242 lines
8.0 KiB
Vue
242 lines
8.0 KiB
Vue
<template>
|
|
<div class="fixed-grid has-12-cols">
|
|
<div class="grid">
|
|
<div class="cell is-col-span-4">
|
|
<div class="box">
|
|
<label class="label fs-14">Cỡ chữ của bảng</label>
|
|
<p class="control fs-14">
|
|
<input
|
|
class="input fs-13"
|
|
type="text"
|
|
:value="tablesetting.find((v) => v.code === 'table-font-size').detail"
|
|
@change="changeSetting($event.target.value, 'table-font-size')"
|
|
/>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="cell is-col-span-4">
|
|
<div class="box">
|
|
<label class="label fs-14">Cỡ chữ tiêu đề</label>
|
|
<p class="control">
|
|
<input
|
|
class="input fs-13"
|
|
type="text"
|
|
:value="tablesetting.find((v) => v.code === 'header-font-size').detail"
|
|
@change="changeSetting($event.target.value, 'header-font-size')"
|
|
/>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="cell is-col-span-4">
|
|
<div class="box">
|
|
<label class="label fs-14">Số dòng trên 1 trang</label>
|
|
<p class="control">
|
|
<input
|
|
class="input fs-13"
|
|
type="text"
|
|
:value="tablesetting.find((v) => v.code === 'per-page').detail"
|
|
@change="changeSetting($event.target.value, 'per-page')"
|
|
/>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="cell is-col-span-6">
|
|
<div class="box">
|
|
<label class="label fs-14">Màu nền bảng</label>
|
|
<p class="control is-flex is-gap-1">
|
|
<input
|
|
type="color"
|
|
:value="tablesetting.find((v) => v.code === 'table-background').detail"
|
|
@change="changeSetting($event.target.value, 'table-background')"
|
|
/>
|
|
<input
|
|
class="input fs-13"
|
|
type="text"
|
|
placeholder="#f29384, var(--bulma-blue)"
|
|
:value="tablesetting.find((v) => v.code === 'table-background').detail"
|
|
@change="changeSetting($event.target.value, 'table-background')"
|
|
/>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="cell is-col-span-6">
|
|
<div class="box">
|
|
<label class="label fs-14">Màu chữ</label>
|
|
<p class="control is-flex is-gap-1">
|
|
<input
|
|
type="color"
|
|
:value="tablesetting.find((v) => v.code === 'table-font-color').detail"
|
|
@change="changeSetting($event.target.value, 'table-font-color')"
|
|
/>
|
|
<input
|
|
class="input fs-13"
|
|
type="text"
|
|
placeholder="#f29384, var(--bulma-blue)"
|
|
:value="tablesetting.find((v) => v.code === 'table-font-color').detail"
|
|
@change="changeSetting($event.target.value, 'table-font-color')"
|
|
/>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="cell is-col-span-6">
|
|
<div class="box">
|
|
<label class="label fs-14">Màu chữ tiêu đề</label>
|
|
<p class="control is-flex is-gap-1">
|
|
<input
|
|
type="color"
|
|
:value="tablesetting.find((v) => v.code === 'header-font-color').detail"
|
|
@change="changeSetting($event.target.value, 'header-font-color')"
|
|
/>
|
|
<input
|
|
class="input fs-13"
|
|
type="text"
|
|
placeholder="#f29384, var(--bulma-blue)"
|
|
:value="tablesetting.find((v) => v.code === 'header-font-color').detail"
|
|
@change="changeSetting($event.target.value, 'header-font-color')"
|
|
/>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="cell is-col-span-6">
|
|
<div class="box">
|
|
<label class="label fs-14">Màu nền tiêu đề</label>
|
|
<div class="control is-flex is-gap-1 is-align-items-stretch">
|
|
<input
|
|
type="color"
|
|
:value="rgbToHex(headerBg)"
|
|
@change="changeSetting($event.target.value, 'header-background')"
|
|
/>
|
|
<input
|
|
class="input fs-13 h-full"
|
|
type="text"
|
|
placeholder="#f29384, var(--bulma-blue)"
|
|
:value="tablesetting.find((v) => v.code === 'header-background').detail"
|
|
@change="changeSetting($event.target.value, 'header-background')"
|
|
/>
|
|
|
|
<div
|
|
ref="renderedHeaderBg"
|
|
class="is-hidden"
|
|
:style="{
|
|
backgroundColor: tablesetting.find((v) => v.code === 'header-background').detail,
|
|
}"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cell is-col-span-6">
|
|
<div class="box">
|
|
<label class="label fs-14">Màu chữ khi filter</label>
|
|
<p class="control is-flex is-gap-1">
|
|
<input
|
|
type="color"
|
|
:value="tablesetting.find((v) => v.code === 'header-filter-color').detail"
|
|
@change="changeSetting($event.target.value, 'header-filter-color')"
|
|
/>
|
|
<input
|
|
class="input fs-13"
|
|
type="text"
|
|
placeholder="#f29384, var(--bulma-blue)"
|
|
:value="tablesetting.find((v) => v.code === 'header-filter-color').detail"
|
|
@change="changeSetting($event.target.value, 'header-filter-color')"
|
|
/>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="cell is-col-span-6">
|
|
<div class="box">
|
|
<label class="label fs-14">Đường viền</label>
|
|
<p class="control fs-14">
|
|
<input
|
|
class="input fs-13"
|
|
type="text"
|
|
:value="
|
|
tablesetting.find((v) => v.code === 'td-border')
|
|
? tablesetting.find((v) => v.code === 'td-border').detail
|
|
: undefined
|
|
"
|
|
@change="changeSetting($event.target.value, 'td-border')"
|
|
/>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="button is-primary"
|
|
@click="emit('close')"
|
|
>
|
|
Cập nhật
|
|
</button>
|
|
</template>
|
|
<script setup>
|
|
const props = defineProps({
|
|
pagename: String,
|
|
});
|
|
const emit = defineEmits(["close"]);
|
|
const { $copy, $clone, $empty, $store } = useNuxtApp();
|
|
var pagedata = $clone($store[props.pagename]);
|
|
if (!Array.isArray(pagedata.tablesetting)) {
|
|
pagedata.tablesetting = Object.values(pagedata.tablesetting);
|
|
}
|
|
const errors = ref([]);
|
|
let radioNote = "no";
|
|
var tablesetting = pagedata.tablesetting;
|
|
let found = tablesetting.find((v) => v.code === "note");
|
|
if (found ? found.detail !== "@" : false) radioNote = "yes";
|
|
|
|
function changeSetting(value, code) {
|
|
if (code === "note" && $empty(value)) return;
|
|
let copy = $copy(tablesetting);
|
|
let found = copy.find((v) => v.code === code);
|
|
if (found) found.detail = value;
|
|
else {
|
|
found = $copy(tablesetting.find((v) => v.code === code));
|
|
found.detail = value;
|
|
copy.push(found);
|
|
}
|
|
tablesetting = copy;
|
|
pagedata.tablesetting = tablesetting;
|
|
$store.commit(props.pagename, pagedata);
|
|
}
|
|
|
|
const renderedHeaderBg = useTemplateRef("renderedHeaderBg");
|
|
const headerBg = ref("#000000");
|
|
|
|
onMounted(() => {
|
|
headerBg.value = window.getComputedStyle(renderedHeaderBg.value).backgroundColor;
|
|
});
|
|
watch();
|
|
|
|
function rgbToHex(rgb) {
|
|
const [r, g, b] = rgb.match(/\d+/g);
|
|
return "#" + [r, g, b].map((x) => Number(x).toString(16).padStart(2, "0")).join("");
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
input[type="color"] {
|
|
width: var(--bulma-control-height);
|
|
min-width: var(--bulma-control-height);
|
|
max-width: var(--bulma-control-height);
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
overflow: hidden;
|
|
}
|
|
input[type="color"]::-webkit-color-swatch-wrapper {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
input[type="color"]::-webkit-color-swatch {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
border: none;
|
|
}
|
|
|
|
.box {
|
|
box-shadow: none;
|
|
border: 1px solid var(--bulma-grey-lighter);
|
|
background-color: var(--bulma-white-bis);
|
|
height: 100%;
|
|
}
|
|
</style>
|