@zero86/edge-ui

edge-ui

$3

- TEST(Code Sendbox) : https://codesandbox.io/s/peaceful-euclid-2t2y7

``
// any components


`

- checkbox

component :

props
> name: {type: String, default: ''}

> id: {type: String, default: ''}

> disabled: {type: Boolean, default: false}

> color: {type: String, default: 'primary'}

> option: {type: String, default: ''}

> border: {type: Boolean, default: false}

> size: {type: String, default: 'md'}

> inline: {type: Boolean, default: false}

> value: {type: String, default: ''}

> modelValue: {type: [Boolean, Array], default: false}


size : 'sm' | 'md' | 'lg' // default md

color : 'primary' | 'secondary' | 'red' | 'orange' // default primary


events
> @update:modelValue = (value: any) => {}

> @change = (checked: boolean, value: any, el: any) => {}


examples
`
const isChecked = ref(false);
const handleChange = (checked: boolean, value: string, el: any) => {
console.log(checked, value, el);
isChecked.value = checked;
};



`

`
const isChecked = ref(false);


`

checkbox checked
If modelValue is Boolean, it is checked if true.



If modelValue is an Array, it is checked if the modelValue Array contains value.
`
const isCheckedArray = ref(['1']);

// checked started..



`

---

- radio

component :

props
> name: {type: String, default: ''}

> id: {type: String, default: ''}

> disabled: {type: Boolean, default: false}

> color: {type: String, default: 'primary'}

> option: {type: String, default: ''}

> size: {type: String, default: 'md'}

> inline: {type: Boolean, default: false}

> value: {type: String, default: ''}

> modelValue: {type: [Boolean, Array], default: ''}


size : 'sm' | 'md' | 'lg' // default md

color : 'primary' | 'secondary' | 'red' | 'orange' // default primary


events
> @update:modelValue = (value: any) => {}

> @change = (checked: boolean, value: string, el: any) => {}


examples
`
const isRadioChecked = ref(1);
const handleChange = (checked: boolean, value: any, el: any) => {
isRadioChecked.value = value;
};



`

`
const isRadioChecked = ref(1);


`

radio checked
If modelValue and value are equal, checked
`