maz-ui Styles in Vue3 messing up all CSS formatting

[gadget-man]

Describe the bug

As soon as I try and import the css styles using the @latest version of maz-ui, all the other styles on my website seem to get messed up

To Reproduce

Steps to reproduce the behavior:

I'm trying to use the maz-ui MazPhoneNumberInput component in my Vue3 Laravel web app.

I have the following in my main.js:

import MazPhoneNumberInput from "maz-ui/components/MazPhoneNumberInput"; import 'maz-ui/styles'

and before I mount the app, I also call app.component('MazPhoneNumberInput', MazPhoneNumberInput);

However, the minute I add the import of the maz-ui styles, my entire css formatting across the site gets messed up. If I inspect an example element in Safari to look for css differences with and without the import maz-ui/styles line included, one noticeable difference is that I see a lot of additional css tags appearing.

In particular, the below item seems to be added, which when disables does solve many of the issues:
*, ::after, ::before {
border: 0 solid;
box-sizing: border-box;
}

I'm unable to find where in the maz-ui code this script is included, or how I can override it.

Expected behavior

I was expecting that 'import 'maz-ui/styles' would manage formatting of my maz-ui component 'MaxPhoneNumberInput', but work alongside my sites other css styles.

Screenshots

[LouisMazel]

Hi @gadget-man,

I just released a beta version without the reset CSS.
can you test it and tell me if it fixes your CSS style?

npm install maz-ui@3.36.3-beta.0
# or npm install maz-ui@beta

[gadget-man]

Hi @gadget-man,

I just released a beta version without the reset CSS. can you test it and tell me if it fixes your CSS style?

npm install maz-ui@3.36.3-beta.0
# or npm install maz-ui@beta

Wow, that was quick! Thanks, that does seem to resolve most of the issues. However, I've noticed that with the latest beta, there is now a grey area above and below the flag, partially obscuring the 'country code' text. There's also an additional border link appearing to the left of the country dropdown indicator. (see screenshot).

[LouisMazel]

Hmm, it's very strange.

For the country flag

Can you share a screenshot of the country flag with the developer console opened with the CSS part?
I want to find where this gray background color is applied.

Are you on Windows or MacOS?

As it's mentioned here, the Unicode flag seems to have some bugs on Windows.
Normally, on the documentation page linked before, you should see this

For the border

In CSS the good practice is to use this rule to avoid this behavior :

This CSS rules will remove the default border applied by the browser on HTML elements

*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
}

Test it, disable one by one rules to have the best result

[gadget-man]

I'm on Mac Safari. Screenshot enclosed.....

[LouisMazel]

It's because you don't have any reset CSS.
So all buttons on your page have the default background color applied by the browser.

You can simply override it with :

<template>
  ...
  <MazPhoneNumberInput v-model="phoneNumber" class="maz-phone-number-input" />
  ...
</template>

<style scoped>
  .maz-phone-number-input:deep(.m-phone-number-input__country-flag) {
     background-color: transparent;
  }

  /* For the border issue */
  
  .maz-phone-number-input:deep(*) {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
  }
</style>

[gadget-man]

Thanks that has helped. I was doing similar within maz-ui-variables.scss, which wasn't working. However, it's fine now ive' included it in the <style scoped> as per above.

One final question - I'm passing the data back to the form submission as cphonenumber based on the following. However, this returns the number in local format, how do I return the model value in international format?
`

<MazPhoneNumberInput
v-model="cphonenumber"
name="cphonenumber"
class="maz-phone-number-input"
show-code-on-list
:preferred-countries="['GB', 'BE', 'NL']"
size="sm"
@update:model-value = "results = $event"
/>

<code>
    {{ results }}
</code>

`

[LouisMazel]

I'm not sure I understand

When the phone number is valid, the v-model returns the international number formatted (red arrow)
Otherwise, you have all the data about the phone number in the @update event (blue arrow)

But I see an error in your code :

<MazPhoneNumberInput
  v-model="cphonenumber"
  name="cphonenumber"
  class="maz-phone-number-input"
  show-code-on-list
  :preferred-countries="['GB', 'BE', 'NL']"
  size="sm"
  @update="results = $event" <!--- Error instead of '@update:model-value' -->
/>

[gadget-man]

I have a Laravel blade which includes the following as the way to initialise the component, and pass any existing saved number down to the child component.
<phone-number-component id="phone" v-bind:phonenumber="{{ (isset($details)) ? $details['phonenumber'] : '+44' }}"></phone-number-component>

In PhoneNumberComponent.vue, I then have the following:

`

<MazPhoneNumberInput
v-model="cphonenumber"
name="cphonenumber"
class="maz-phone-number-input"
show-code-on-list
:preferred-countries="['GB', 'BE', 'NL']"
size="sm"
@update:model-value = "results = $event"
/>

<code>
    {{ results }}
</code>
</div>
</template>

<style scoped>
.maz-phone-number-input:deep(.m-phone-number-input__country-flag) {
  background-color: transparent!important;
}
</style>

<script>
  import { ref } from 'vue'

  export default {
    data: function () {
        return {
            cphonenumber:  '+' + this.phonenumber,
            results: ""
        }

    },
    props: [
        "phonenumber",   ]
};

</script>`

I can't directly include v-model as 'phonenumber' as I get an error v-model cannot be used on a prop, because local prop bindings are not writable., so I'm using cphonenumber and updating that with this.phonenumber. (a separate issue is that for some reason the leading '+' isn't being carried forwards so I'm having to re-add it manually. However, when I then submit the form in the Laravel blade, I see from the form submission that cphonenumber is returned, but only using the local number, not the international format.

I suspect I'm doing something really obviously wrong, but I can't see it!

[gadget-man]

@LouisMazel I just updated to latest and the above issue has come back. Was the beta incorporated into updates, and if not is there an alternative way to avoid the reset CSS?

[gadget-man]

This problem is still occurring on the latest version. @LouisMazel please can you advise how it can be overcome in the latest version, as I'm no longer able to use the beta you provided due to other bug fixes I need in later versions.