Vue & Nuxt library of standalone components & tools to build interfaces
Home Page: https://maz-ui.com
License: MIT License
I'm a French Web Developer freelancer. Passionate about JavaScript and Typescript
I spend most of my time on Vue & Nuxt π
Standalone components & tools library for Vue 3 |
Make football predictions with your friends |
|---|---|
| Enjoy Maz-UI | Harderbetter.io |
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
Describe the bug
Country list closes when clicking scroll bar
To Reproduce
When the scroller on the country list is clicked, the close event is emitted.
Describe the bug
If user set "English" language in Chrome, it will have "en" in the "window.navigator.language" property.
Phone component will show error: "MazPhoneNumberInput: The locale EN is not available" in dev mode. In production mode it will not have default country set.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Phone component should at least fallback to "en-us" locale or detect country in some other way.
Screenshots
Desktop (please complete the following information):
I would like to integrate some of this components with quasar. is it possible ?
Components in coming:
These components will arrive after Vue3 support (3.0.0 #114)
Hello,
If I retrieve a phone number from an API as a string the input can't display it because it's a string and not an object like the one from the plugin.
Is there a way to parse it automatically and rebuild an entire object so that the input can display the formatted number ?
Describe the bug
The method inside "v-on:input" firing twice after initial loading of template.
To Reproduce
Steps to reproduce the behavior:
<template>
<div>
<MazPhoneNumberInput v-model="phone" v-on:input="testInput" />
</div>
</template>
<script>
import {MazPhoneNumberInput} from 'maz-ui';
export default {
components: {MazPhoneNumberInput},
data() {
return {
phone: '',
}
},
methods: {
testInput(){
console.log('I must fire only on input');
}
}
Expected behavior
testInput() with console.log must fire only when user types something inside input field.
Screenshots
When running typescript in Vue, you get errors when trying to compile this project. With Vue 3 moving to a typescript core, I think this becomes even more useful.
Describe the bug
I am using a MazPhoneNumberImput component to to allow only United States country
<MazPhoneNumberInput
:only-countries="['US']"
v-model="phoneNumberUS.value"
default-country-code="US"
@update="onUpdateUS"
:error="!phoneNumberUS.isValid"
:no-example="true"
:no-country-selector="cellView"
>
</MazPhoneNumberInput>Expected behavior
It is expected that the PhoneInput will display United States flag and generate United States code. As you could see in the next section, this is not happening
Screenshots
Smartphone (please complete the following information):
Describe the bug
fetch-country prop do not work, but few days ago it did, defaultCountryCode is still working but i need to use dynamic fetch country if it possible
Expected behavior
after rendering main component phone-input should be initialized with fetched country but it empty
Screenshots
Desktop (please complete the following information):
Hey !
Country code is displayed twice in fields that are near to each other, which seems like a duplicate information :
example from your doc (https://louismazel.github.io/maz-ui/#/documentation/phone-number-input) :
+33 / +33 65 65 65 65
Is there a way to remove it from the phone number field so that it's not displayed twice ?
Describe the bug
I followed the instruction on how to change colours, etc. of the components here: https://louismazel.github.io/maz-ui/documentation/theme. When I run npm run get-theme, I get sh: 1: maz-ui: not found
To Reproduce
Follow the instruction on https://louismazel.github.io/maz-ui/documentation/theme till you get to "Execute the script".
Desktop (please complete the following information):
Using your control with vue formulate forms, and in form i need several rows with phone-number-input. And this problem occured after opening dropdown. See screenshot
After research of this problem possible solution may be like this : default display value for maz-select__options-list is display: none; and there is maz-flex class on this block that should set display: flex; and as chrome devtools shows it should work but there is small moment that display: flex; should be set dynamically
Describe the bug
I really like this UI library - clean, fresh & creative.
But many of the input components are not keyboard accessible.
There are some other ways components could improve their accessibility as well, such as the tabs component, which should respond to certain key presses, and use aria-roles - but I'm mainly raising this initial issue to focus on very basic keyboard accessibility for the input components above.
To Reproduce
This is reproducible on https://louismazel.github.io/maz-ui/
Is your feature request related to a problem? Please describe.
maz-phone-number-input placeholder should be able to be set to something. Or blank if necessary
Describe the solution you'd like
It should follow the same approach as maz-input
Describe alternatives you've considered
N/A
Additional context
This one field looks strange
It's reproduced on demo page https://louismazel.github.io/maz-ui/documentation/maz-phone-number-input
select Russia country code, then put for example this phone number 9992223345, and then press a backspace button. After that symbols not deleted, until the '8' ΡΠ½ΡΠΈΡΠ΄ will not take up the whole field.
According to the docs there is an icon property (the doc might not be correct since the type is given as a boolen).
The icon is not appearing in the button:
<MazBtn icon="login" block type="submit">Login</MazBtn>
Since all the example buttons are also without icons, that is a feature in progress?
Great library! Thanks for the awesome work
Cheers
Christian
Is it possible to change default css values without changing .babelrc or vue.config.js since Δ± am in a big project and these files are in different format and pretty complicated. Also Δ± would like to say that like in the your vuePhoneNumberInput component colors so easy to change. It would be nice to add these options as a prop like font-weight, font-size, colors, border-radius-border-width.
Describe the bug
MazPhoneNumberInput displaying E164 format in national number input box instead of formatted national number, since version 1.4.0 and through current version 1.4.19. It displays find 1.3.1.
To Reproduce
Steps to reproduce the behavior:
Render MazPhoneNumberInput with v-model bound to "+12125553333".
Expected behavior
Form input box displays US for country code, and (212) 555-3333 in national number input box.
Screenshots
version 1.4.0+
version 1.3.1
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Here is the code sandbox repro:
https://codesandbox.io/s/mazphonenumberinput-bind-bug-u88gy?file=/src/App.vue
I am using the phone number input component, the thing is that I am displaying it into a dialog, and I want to clean the user input each time the dialog is opened. To achieve this I am doing what you can see below:
cleanUI() {
this.phone = "";
this.inputError = "";
this.formattedNumber = "";
this.isValidPhone = false;
}The property 'phone' is the one to which the component 'value' is binded to, as you can see:
<MazPhoneNumberInput
ref="phoneInput"
style="margin-bottom: 20px"
:only-countries="inUseCountries"
v-model="phone"
default-country-code="US"
@update="onUpdate"
:error="!isValidPhone"
:no-example="true"
>
</MazPhoneNumberInput>The problem is that the input is not visually removed from the component.
Thanks in advance
Describe the bug
Referencing the issue #57 I wanted to say -- thank you, MazPicker now works just fine! But there are some warnings in browser's console when you use it.
To Reproduce
Steps to reproduce the behavior:
MazPickerMazPicker as you wantExpected behavior
The component is working as expected.
Screenshots
Desktop (please complete the following information):
Additional context
The warnings appear when you open (click on) the picker and when changing month/year (haven't tested with time).
Great plugin !
Would it be possible to add autofocus option to all type of inputs such as MazInput ?
I can only select current date, if I choose another date it will not select it, and value will be "undefined".
If I choose any time, it goes back to the current date.
Describe the bug
Hello again!
The MazPicker component doesn't work -- it errors on mount.
To Reproduce
Here's example from the docs:
<template>
<MazPicker
v-model="pickerValue"
/>
</template>
<script>
import { MazPicker } from 'maz-ui'
export default {
components: { MazPicker },
data () {
return {
pickerValue: null
}
}
}
</script>
I'm using Nuxt, so I create a new page and put this code in it. Then, when I hit ctrl+s the server rebuilds just fine, but in browser there is the following error: this.$options.filters.capitalize is not a function.
Expected behavior
Component expected to not crash my Nuxt project :)
Screenshots
It just shows the standard Nuxt error page with the following content:
TypeError
**this.$options.filters.capitalize is not a function**
and request details, headers, cookies, etc.
Desktop (please complete the following information):
Additional context
It seems that the component uses some Vue-filter, that isn't present in production, but maybe I'm wrong.
Nice component!
Documentation:
Enhancement:
Any chance of adding a prop to prevent scrolling left months before min-date, and right after max-date?
Describe the bug
After selecting the date or time for the first time the picker won't open again
To Reproduce
Steps to reproduce the behavior:
Add picker with following options
Open picker, select any date or time. The picker autocloses as expected but when you try to open it again it won't open anymore. I also noticed that when I select hour the minutes portion is automatically set to the current time, not sure if it's by design or a bug though.
Expected behavior
User should be able to reopen the picker
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Additional context
Not really. It's a clean slate Vue project with only this component being rendered on a page
Describe the bug
I have mazPicker with a min date set as "2020-08-01T15:00:00.000Z" Current value is set as "2020-08-02T15:00:59.999Z" but in the time picker portion, all of the times below 15:00:00 are blanked out even though the date is set to the 02 and not the 01.
I'd like to use only this component https://louismazel.github.io/maz-ui/documentation/maz-phone-number-input but I could not find a way to import CSS only for this component, I don't want to include all the theme CSS into my project. Is this possible? Thanks!
Like ask in this issue: #51
Is your feature request related to a problem? Please describe.
Hello. I'd like to use some of your library's components in my current project, mainly inputs (text, date, phone). The project itself is not based on moz-ui and when I import, say, <MozInput/> inside my page (I'm using Nuxt.js) these styles gets added to body/html:
font: 400 16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
line-height: 1.5;
-webkit-font-kerning: normal;
font-feature-settings: "kern";
font-kerning: normal;
color: #212121;
background-color: white;
, which breakes my current template styling.
Describe the solution you'd like
Maybe these styles should be added to each component separately? Or have some component, like <MozWrapper/>, so when you put any other components inside these styles will apply to them?
Thank you in advance.
I didn't find the event name in your doc for the "clear" button.
I tried @clear but it's not working.
What is it ?
Inside the template:
<MazPhoneNumberInput v-model="myForm.contactPhone"/>
and in the script:
import { MazPhoneNumberInput } from 'maz-ui'
export default {
name: "Institution",
components: {
// VuePhoneNumberInput: VuePhoneNumberInput,
MazPhoneNumberInput
}
}
But the css of the compnenet is not loading
Describe the bug
The input doesn't load the style of the component (here the MazInput). Check the screenshot
To Reproduce
Steps to reproduce the behavior:
npm i maz-ui -S<template>
<Layout>
<MazInput
v-model="contactFormData.fullname"
placeholder="Nom complet"
autocomplete="new-name"
class="maz-mb-3"
left-icon-name="person"
right-icon-name="favorite"
clearable
/>
<MazPhoneNumberInput v-model="contactFormData.phone" />
</Layout>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { MazPhoneNumberInput, MazInput } from 'maz-ui';
@Component({
components: { MazInput, MazPhoneNumberInput },
filters: {},
})
export default class Contact extends Vue {
contactFormData = {
email: '',
fullname: '',
phone: '',
content: '',
};
}
</script>Expected behavior
Display the inputs with Maz default style
Screenshots
The input display :
Desktop:
Additional context
This sample of code is running on Gridsome (v0.7.0) in TypeScript (4.0.3). The style of the component isn't overwrite.
Describe the bug
I'm using the phone input inside the MODAL DIALOG on bootstrap-vue, everytime I use the scroll bar the country selection list closes.
Expected behavior
The country selection list must not close.
Desktop:
Describe the bug
When tabbing into the MazSelect component, it's impossible to tab on or exit the component via keyboard.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
I expect to be able to tab in, select an option, press enter to select it and then tab out.
Desktop (please complete the following information):
I have a right to left display via vuetify, when using one of your components, phone number input, it looks awkward. is there a way to enable right to left on your components?
Describe the bug
The phone number input does not render properly inside framework7-vue. It seems like a styling issue. See screenshot below.
To Reproduce
See code sandbox: https://codesandbox.io/s/f7-maz-vue-dpnej?file=/src/pages/Maz.vue
To navigate to the example route, click on the Maz list item under Navigation.
Expected behavior
It should look the same inside framework7-vue as it does in a vanilla application.
Screenshots
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Describe the bug
Setting an initial phone number in international format results the country code doubled up, it's displayed in both the country selector list and the input field.
To Reproduce
Steps to reproduce the behavior:
<template>
<div>
<MazPhoneNumberInput v-model="phoneNumberExample" />
</div>
</template>
<script>
import {MazPhoneNumberInput} from 'maz-ui';
import "maz-ui/lib/css/base.css";
import "maz-ui/lib/css/maz-phone-number-input.css";
export default {
props: ['value'],
components: {MazPhoneNumberInput},
data() {
return {
phoneNumberExample: '+642101234567',
}
}
}
Expected behavior
The input field component should not contain the country code.
Screenshots
My Code is here :
<MazSelect
v-model="wacfilter.type"
@change="filterChange()"
placeholder="Choose a type"
left-icon-name="flash_on"
:options="filterTypes"
/>Method :
filterChange() {
console.log("hello world");
}I dont know why its not working !!
Describe the bug
Crashes with Error in render: "Error: Unknown country: JA"
Seeing this in the wild in an e-commerce application that uses MazPhoneNumberInput
To Reproduce
Steps to reproduce the behavior:
vue.esm.js:1897 Error: Unknown country: JA
at getCountryCallingCode (metadata.js:631)
at withMetadata (metadata.js:10)
at getCountryCallingCode (getCountryCallingCode.js:5)
at VueComponent.callingCode (maz-ui.common.js:13806)
at Watcher.get (vue.esm.js:4488)
at Watcher.evaluate (vue.esm.js:4593)
at VueComponent.computedGetter [as callingCode] (vue.esm.js:4845)
at Object.get (vue.esm.js:2104)
at Proxy._mainvue_type_template_id_0022c02d_render (maz-ui.common.js:12119)
at VueComponent.Vue._render (vue.esm.js:3557)
Desktop (please complete the following information):
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google β€οΈ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.