jnpf-app-vue3-v6x/components/Jnpf/Checkbox/index.vue

<template>
	<u-checkbox-group class="jnpf-checkbox" :disabled='disabled' :wrap="direction == 'horizontal' ? false : true"
		@change="onChange">
		<u-checkbox v-model="item.checked" v-for="(item, index) in optionList" :key="index" :name="item[props.value]"
			:class="{'jnpf-checkbox-disabled':disabled}">
			{{item[props.label]}}
		</u-checkbox>
	</u-checkbox-group>
</template>
<script>
	export default {
		name: 'jnpf-checkbox',
		inheritAttrs: false,
		props: {
			modelValue: {
				type: Array,
				default: () => []
			},
			direction: {
				type: String,
				default: "horizontal"
			},
			options: {
				type: Array,
				default: () => []
			},
			props: {
				type: Object,
				default: () => ({
					label: 'fullName',
					value: 'id'
				})
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				optionList: []
			}
		},
		watch: {
			modelValue: {
				handler(val) {
					if (!val || !val?.length) return this.setColumnData()
					this.setDefault()
				},
				immediate: true,
			},
			options: {
				handler(val) {
					this.setColumnData()
				},
				immediate: true,
			}
		},
		methods: {
			setDefault() {
				if (!this.modelValue || !this.modelValue?.length) return
				outer: for (let i = 0; i < this.modelValue.length; i++) {
					inner: for (let j = 0; j < this.optionList.length; j++) {
						if (this.modelValue[i] === this.optionList[j][this.props.value]) {
							this.optionList[j].checked = true
							break inner
						}
					}
				}
			},
			setColumnData() {
				this.optionList = this.options.map(o => ({
					...o,
					checked: false
				}))
				this.setDefault()
			},
			onChange(value) {
				const selectData = this.optionList.filter(o => o.checked) || []
				this.$emit('update:modelValue', value)
				this.$emit('change', value, selectData)
			},
		}
	}
</script>
<style lang="scss" scoped>
	:deep(.u-checkbox__icon-wrap--square) {
		border-color: #D9D9D9 !important;
	}

	.jnpf-checkbox-disabled {
		:deep(.u-checkbox__icon-wrap--disabled) {
			background-color: #E6E6E6 !important;
			border-color: #D9D9D9 !important;
		}
	}
</style>