dev: hotfix, added my-ui/checkboxes
This commit is contained in:
@@ -0,0 +1,41 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { Item } from './index'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
items: Item[]
|
||||||
|
useFlex?: boolean
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const model = defineModel<string[]>()
|
||||||
|
const checks: Record<string, any> = ref({})
|
||||||
|
|
||||||
|
model.value = []
|
||||||
|
props.items.forEach((item) => {
|
||||||
|
checks.value[item.value] = item.checked || false
|
||||||
|
})
|
||||||
|
|
||||||
|
watch(checks, () => {
|
||||||
|
const list: string[] = []
|
||||||
|
Object.keys(checks.value).forEach((key) => {
|
||||||
|
if (checks.value[key]) {
|
||||||
|
list.push(key)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
model.value = list
|
||||||
|
}, { deep: true })
|
||||||
|
|
||||||
|
function check(value: string, status: boolean) {
|
||||||
|
checks.value[value] = status
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div :class="useFlex ? 'flex gap-2' : ''">
|
||||||
|
<label v-for="item, idx in items" :key="item.value" class="flex pe-4">
|
||||||
|
<Checkbox @update:checked="(status) => check(item.value, status)" :checked="checks[item.value]" />
|
||||||
|
<div class="pt-0.5 ps-2">
|
||||||
|
{{ item.label }}
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
export interface Item {
|
||||||
|
value: string
|
||||||
|
label: string
|
||||||
|
checked?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export function checkItems(items: Item[], value: string[]) {
|
||||||
|
items.forEach((item, idx) => {
|
||||||
|
items[idx]!.checked = value.includes(item.value)
|
||||||
|
// item.checked = value.includes(item.value)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export { default as Checkboxes } from './checkboxes.vue'
|
||||||
Reference in New Issue
Block a user