123 lines
2.0 KiB
Vue
123 lines
2.0 KiB
Vue
<template>
|
|
<input
|
|
type="checkbox"
|
|
class="css-checkbox"
|
|
:id="'toggle-'+props.header"
|
|
v-model="show"
|
|
/>
|
|
<label :for="'toggle-'+props.header" class="css-label">
|
|
<span class="fa fa-plus">+</span>
|
|
<span class="fa fa-minus">-</span>
|
|
</label>
|
|
<label :for="'checkbox-'+props.header">{{props.header}}</label>
|
|
<input type="checkbox" :id="'checkbox-'+props.header" v-model="checked" />
|
|
<br>
|
|
<div
|
|
class="checkbox_parent"
|
|
:style="'grid-template-rows: repeat('+Math.ceil(props.columns.length/2+2)+', 1fr);'"
|
|
v-if="show"
|
|
>
|
|
<div
|
|
v-for="(item, index) in props.columns"
|
|
class="checkbox_child"
|
|
>
|
|
<ColumnCheckbox :colname="item"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import ColumnCheckbox from './ColumnCheckbox.vue';
|
|
|
|
const props = defineProps<{
|
|
header: string
|
|
columns: ColumnName[]
|
|
default?: boolean
|
|
}>()
|
|
const {columns} = useStoreRef()
|
|
const checked = ref(props.default)
|
|
const show = ref(true)
|
|
watch(show,()=>{
|
|
})
|
|
watch(checked,()=>{
|
|
if(checked.value === true) {
|
|
props.columns.forEach(x=>columns.value.add(x))
|
|
return
|
|
}
|
|
if(checked.value === false) {
|
|
props.columns.forEach(x=>columns.value.delete(x))
|
|
return
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { defineProps, ref, watch } from 'vue';
|
|
import { useStoreRef } from '../state/state';
|
|
import { ColumnName } from '../lib/columns';
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
|
.checkbox_parent {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-column-gap: 0px;
|
|
grid-row-gap: 0px;
|
|
}
|
|
.checkbox_child {
|
|
align-content: left;
|
|
justify-self: left;
|
|
}
|
|
|
|
.css-label {
|
|
cursor: pointer;
|
|
}
|
|
.css-checkbox {
|
|
display: none;
|
|
}
|
|
.fa {
|
|
color: white;
|
|
border-radius: 4px;
|
|
padding-top: 0px;
|
|
padding-right: 4px;
|
|
padding-left: 4px;
|
|
padding-bottom: 0px;
|
|
}
|
|
.fa-plus {
|
|
background-color: #E85764;
|
|
}
|
|
.fa-minus {
|
|
background-color: #3AC5C9;
|
|
display: none;
|
|
}
|
|
.css-checkbox:checked + .css-label .fa-minus {
|
|
display: inline;
|
|
}
|
|
.css-checkbox:checked + .css-label .fa-plus {
|
|
display: none;
|
|
}
|
|
</style>
|