forked from a/lifeto-shop
36 lines
921 B
Vue
36 lines
921 B
Vue
<template>
|
|
<input type="checkbox" id={{props.colname}} v-model="checked" />
|
|
<label for={{props.colname}}>{{(props.label ? props.label : Columns[props.colname].displayName)}}</label>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
|
|
const props = defineProps(["colname","label"])
|
|
const {columns} = useStoreRef()
|
|
const checked = ref(columns.value.has(props.colname))
|
|
watch(columns.value.dirty,()=>{
|
|
console.log("changed")
|
|
if(columns.value.has(props.colname)) {
|
|
checked.value = true
|
|
}else{
|
|
checked.value = false
|
|
}
|
|
},{deep:true})
|
|
|
|
watch(checked, ()=>{
|
|
if(checked.value === true) {
|
|
columns.value.add(props.colname)
|
|
return
|
|
}
|
|
if(checked.value === false) {
|
|
columns.value.delete(props.colname)
|
|
return
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { defineProps, ref, watch } from 'vue';
|
|
import { useStoreRef } from '../state/state';
|
|
import { ColumnName, Columns } from '../lib/columns';
|
|
</script>
|