This commit is contained in:
Viet An
2026-06-18 11:57:37 +07:00
parent 5302e685a4
commit 8b07ab4e65
34 changed files with 90 additions and 65 deletions

View File

@@ -1,5 +1,3 @@
@use "bulma/sass/utilities/initial-variables.scss" as *;
[data-theme="light"], [data-theme="light"],
.theme-light { .theme-light {
--bulma-block-spacing: 1rem; --bulma-block-spacing: 1rem;
@@ -7,7 +5,7 @@
.card { .card {
--bulma-card-shadow: none; --bulma-card-shadow: none;
border: 1px solid $grey-lighter; border: 1px solid var(--bulma-grey-90);
} }
.title, .title,

View File

@@ -15,6 +15,7 @@
class="modal-card max-w-8xl" class="modal-card max-w-8xl"
:style="{ :style="{
width: $store.viewport <= 1 ? 'calc(100% - 2rem)' : width, width: $store.viewport <= 1 ? 'calc(100% - 2rem)' : width,
height,
}" }"
> >
<header <header
@@ -31,11 +32,26 @@
@click="closeModal" @click="closeModal"
></button> ></button>
</header> </header>
<section <section class="modal-card-body p-4">
class="modal-card-body p-4" <div
:style="{ minHeight: height }" v-if="error"
> class="size-full is-flex"
<Suspense> >
<div class="w-full is-flex is-flex-direction-column is-gap-1">
<p class="has-text-danger-40">Đã lỗi khi tải dữ liệu:</p>
<pre>{{ error }}</pre>
<button
@click="closeModal"
class="button ml-auto max-w-fit"
>
Đóng
</button>
</div>
</div>
<Suspense
v-else
@resolve="loaded = true"
>
<component <component
:is="resolvedComponent" :is="resolvedComponent"
v-bind="vbind" v-bind="vbind"
@@ -134,6 +150,17 @@ onUnmounted(() => {
const remaining = document.getElementsByClassName("modal-background").length; const remaining = document.getElementsByClassName("modal-background").length;
if (remaining === 0) document.documentElement.classList.remove("is-clipped"); if (remaining === 0) document.documentElement.classList.remove("is-clipped");
}); });
const loaded = ref(false);
const error = ref();
onErrorCaptured((err) => {
// catch loading errors to display
if (!loaded) {
console.error(err);
error.value = err.message;
return false; // prevent propagating up further
}
});
</script> </script>
<style scoped> <style scoped>
.modal { .modal {

View File

@@ -55,7 +55,7 @@
v-if="!v.submenu" v-if="!v.submenu"
:class="[ :class="[
'navbar-item rounded-lg is-clipped font-medium', 'navbar-item rounded-lg is-clipped font-medium',
currentTab.code === v.code ? 'has-text-primary-50 has-background-primary-95' : 'has-text-grey-dark', currentTab.code === v.code ? 'has-text-primary-50 has-background-primary-95' : 'has-text-grey-35',
]" ]"
style="font-size: 13.5px" style="font-size: 13.5px"
@click="changeTab(v)" @click="changeTab(v)"
@@ -69,7 +69,7 @@
<a <a
:class="[ :class="[
'navbar-link rounded-lg is-arrowless font-medium', 'navbar-link rounded-lg is-arrowless font-medium',
currentTab.code === v.code ? 'has-text-primary-50 has-background-primary-95' : 'has-text-grey-dark', currentTab.code === v.code ? 'has-text-primary-50 has-background-primary-95' : 'has-text-grey-35',
]" ]"
@click="changeTab(v)" @click="changeTab(v)"
style="font-size: 13.5px" style="font-size: 13.5px"

View File

@@ -11,7 +11,7 @@ const props = defineProps({
@click="$emit('justclick')" @click="$emit('justclick')"
class="rounded-full mx-0 px-0 size-10 font-bold is-flex is-justify-content-center is-align-items-center" class="rounded-full mx-0 px-0 size-10 font-bold is-flex is-justify-content-center is-align-items-center"
:style="{ :style="{
border: image ? 'none' : '1px solid var(--bulma-grey-light)', border: image ? 'none' : '1px solid var(--bulma-grey-70)',
}" }"
> >
<figure <figure

View File

@@ -1,7 +1,7 @@
<template> <template>
<div <div
class="fs-13 font-semibold mx-0 px-0 is-flex is-justify-content-center is-align-items-center is-flex-shrink-0 rounded-full size-10" class="fs-13 font-semibold mx-0 px-0 is-flex is-justify-content-center is-align-items-center is-flex-shrink-0 rounded-full size-10"
style="border: 1px solid var(--bulma-grey-lighter)" style="border: 1px solid var(--bulma-grey-85)"
:style="image && 'border: none'" :style="image && 'border: none'"
> >
<div> <div>
@@ -21,7 +21,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: var(--bulma-grey-lighter); border: var(--bulma-grey-85);
border-radius: 50%; border-radius: 50%;
} }
</style> </style>

View File

@@ -539,6 +539,6 @@
border-left-width: 1px; border-left-width: 1px;
} }
.border-gray-300 { .border-gray-300 {
border-color: var(--bulma-grey-lighter); border-color: var(--bulma-grey-85);
} }
</style> </style>

View File

@@ -12,7 +12,7 @@ const props = defineProps({
<div <div
class="is-flex is-gap-2 fs-14 p-3 rounded-lg" class="is-flex is-gap-2 fs-14 p-3 rounded-lg"
:style="{ :style="{
border: '1px solid var(--bulma-grey-lighter)', border: '1px solid var(--bulma-grey-85)',
}" }"
> >
<AvatarBox :text="name.slice(0, 2)" /> <AvatarBox :text="name.slice(0, 2)" />

View File

@@ -9,7 +9,7 @@
<Icon <Icon
name="mdi:sort-alphabetical-ascending" name="mdi:sort-alphabetical-ascending"
:size="22" :size="22"
:class="checkFilter() && 'has-text-grey-light'" :class="checkFilter() && 'has-text-grey-70'"
/> />
</span> </span>
</button> </button>
@@ -28,7 +28,7 @@
<Icon <Icon
name="mdi:sort-alphabetical-descending" name="mdi:sort-alphabetical-descending"
:size="22" :size="22"
:class="checkFilter() && 'has-text-grey-light'" :class="checkFilter() && 'has-text-grey-70'"
/> />
</span> </span>
</button> </button>

View File

@@ -135,8 +135,9 @@
</template> </template>
<script setup> <script setup>
import { createApp } from "vue/dist/vue.esm-bundler.js"; import { createApp } from "vue/dist/vue.esm-bundler.js";
import { ref, defineComponent } from "vue"; import { isEmpty } from "es-toolkit/compat";
import { useStore } from "~/stores/index"; import { useStore } from "~/stores/index";
const emit = defineEmits(["edit", "insert", "dataevent"]); const emit = defineEmits(["edit", "insert", "dataevent"]);
const { const {
$calc, $calc,
@@ -176,7 +177,7 @@ var currentPage = 1;
var displayFields = ref([]); var displayFields = ref([]);
var displayData = []; var displayData = [];
var pagedata = store[props.pagename]; var pagedata = store[props.pagename];
let tablesetting = $copy(pagedata.tablesetting || store.tablesetting); let tablesetting = $copy(isEmpty(pagedata.tablesetting) ? store.tablesetting : pagedata.tablesetting);
if (!Array.isArray(tablesetting)) { if (!Array.isArray(tablesetting)) {
tablesetting = Object.values(tablesetting); tablesetting = Object.values(tablesetting);
} }

View File

@@ -30,7 +30,7 @@
{{ v.name }} {{ v.name }}
</label> </label>
</div> </div>
<div class="has-background-white-bis mt-3 p-3 rounded-md"> <div class="has-background-white-100 mt-3 p-3 rounded-md">
<div <div
class="tags mb-0" class="tags mb-0"
v-if="choice === 'function'" v-if="choice === 'function'"

View File

@@ -55,11 +55,11 @@
{{ v.label.indexOf(">") >= 0 ? $stripHtml(v.label, 30) : v.label }} {{ v.label.indexOf(">") >= 0 ? $stripHtml(v.label, 30) : v.label }}
</a> </a>
<a <a
class="tag is-delete is-marginless has-text-black-bis" class="tag is-delete is-marginless has-text-black-5"
@click="removeFilter(i)" @click="removeFilter(i)"
></a> ></a>
</div> </div>
<span class="help has-text-black-bis"> <span class="help has-text-black-5">
{{ {{
v.sort v.sort
? v.sort ? v.sort
@@ -163,7 +163,7 @@
</template> </template>
<span <span
v-else v-else
class="has-text-grey-light" class="has-text-grey-70"
>-</span >-</span
> >
</td> </td>

View File

@@ -237,8 +237,8 @@ input[type="color"]::-webkit-color-swatch {
.box { .box {
box-shadow: none; box-shadow: none;
border: 1px solid var(--bulma-grey-lighter); border: 1px solid var(--bulma-grey-85);
background-color: var(--bulma-white-bis); background-color: var(--bulma-grey-95);
height: 100%; height: 100%;
} }
</style> </style>

View File

@@ -50,7 +50,7 @@
<div v-if="type === 'days'"> <div v-if="type === 'days'">
<div class="columns is-mobile mx-0"> <div class="columns is-mobile mx-0">
<div <div
class="column px-2 py-1 has-text-grey-dark" class="column px-2 py-1 has-text-grey-30"
v-for="(m, h) in dateOfWeek" v-for="(m, h) in dateOfWeek"
:key="h" :key="h"
> >

View File

@@ -68,7 +68,7 @@
</div> </div>
</div> </div>
<div v-if="type === 'days'"> <div v-if="type === 'days'">
<div class="fixed-grid has-7-cols mb-1 fs-12 font-medium has-background-white-bis has-text-grey rounded-full"> <div class="fixed-grid has-7-cols mb-1 fs-12 font-medium has-background-white-100 has-text-grey rounded-full">
<div class="grid is-gap-0"> <div class="grid is-gap-0">
<p <p
v-for="(m, h) in dateOfWeek" v-for="(m, h) in dateOfWeek"
@@ -93,7 +93,7 @@
> >
<span <span
v-if="m.disabled" v-if="m.disabled"
class="fs-13 has-text-grey-light is-unselectable" class="fs-13 has-text-grey-70 is-unselectable"
> >
{{ m.dayPrint.replace(/^0/, "") }} {{ m.dayPrint.replace(/^0/, "") }}
</span> </span>

View File

@@ -10,7 +10,7 @@
class="cell" class="cell"
> >
<button <button
:class="['button is-white w-full fs-14', (i === 0 || i === 11) && 'has-text-grey-light']" :class="['button is-white w-full fs-14', (i === 0 || i === 11) && 'has-text-grey-70']"
@click="emit('year', year)" @click="emit('year', year)"
> >
{{ year }} {{ year }}

View File

@@ -241,12 +241,12 @@ async function submit() {
<div <div
v-else v-else
class="w-36 h-36 rounded-md is-flex is-align-items-center is-justify-content-center" class="w-36 h-36 rounded-md is-flex is-align-items-center is-justify-content-center"
style="border: 1px solid var(--bulma-grey-lighter)" style="border: 1px solid var(--bulma-grey-85)"
> >
<Icon <Icon
name="material-symbols:add-photo-alternate-outline-rounded" name="material-symbols:add-photo-alternate-outline-rounded"
:size="40" :size="40"
class="has-text-grey-light" class="has-text-grey-70"
/> />
</div> </div>
</div> </div>

View File

@@ -219,12 +219,12 @@ async function submit() {
<div <div
v-else v-else
class="w-36 h-36 rounded-md is-flex is-align-items-center is-justify-content-center" class="w-36 h-36 rounded-md is-flex is-align-items-center is-justify-content-center"
style="border: 1px solid var(--bulma-grey-lighter)" style="border: 1px solid var(--bulma-grey-85)"
> >
<Icon <Icon
name="material-symbols:add-photo-alternate-outline-rounded" name="material-symbols:add-photo-alternate-outline-rounded"
:size="40" :size="40"
class="has-text-grey-light" class="has-text-grey-70"
/> />
</div> </div>
</div> </div>

View File

@@ -45,7 +45,7 @@ const emit = defineEmits("unselect");
</div> </div>
<div> <div>
<p class="font-semibold mb-1">{{ invItem.name }}</p> <p class="font-semibold mb-1">{{ invItem.name }}</p>
<p class="has-text-grey-dark">SKU: {{ invItem.sku }}</p> <p class="has-text-grey-30">SKU: {{ invItem.sku }}</p>
<p class="fs-12 has-text-grey">{{ invItem.category }}</p> <p class="fs-12 has-text-grey">{{ invItem.category }}</p>
</div> </div>
</div> </div>
@@ -89,7 +89,7 @@ const emit = defineEmits("unselect");
</div> </div>
<div class="mt-6"> <div class="mt-6">
<p class="fs-15 font-semibold mb-4">Vị trí lưu kho</p> <p class="fs-15 font-semibold mb-4">Vị trí lưu kho</p>
<div class="p-4 rounded-md has-background-white-bis"> <div class="p-4 rounded-md has-background-white-100">
<div class="is-flex is-gap-1"> <div class="is-flex is-gap-1">
<Icon <Icon
name="material-symbols:location-on-outline-rounded" name="material-symbols:location-on-outline-rounded"
@@ -106,11 +106,11 @@ const emit = defineEmits("unselect");
</div> </div>
<div class="mt-6"> <div class="mt-6">
<p class="fs-15 font-semibold mb-4">Thông tin hàng</p> <p class="fs-15 font-semibold mb-4">Thông tin hàng</p>
<div class="p-4 rounded-md has-background-white-bis"> <div class="p-4 rounded-md has-background-white-100">
<p class="fs-13 has-text-grey"> </p> <p class="fs-13 has-text-grey"> </p>
<p class="mt-1 is-family-monospace">{{ invItem.batch }}</p> <p class="mt-1 is-family-monospace">{{ invItem.batch }}</p>
</div> </div>
<div class="p-4 mt-4 rounded-md has-background-white-bis"> <div class="p-4 mt-4 rounded-md has-background-white-100">
<div class="is-flex is-gap-1 is-align-items-center"> <div class="is-flex is-gap-1 is-align-items-center">
<Icon <Icon
name="material-symbols:calendar-today-outline-rounded" name="material-symbols:calendar-today-outline-rounded"
@@ -127,7 +127,7 @@ const emit = defineEmits("unselect");
<div <div
v-for="move in invItem.moveHistory" v-for="move in invItem.moveHistory"
:key="move.id" :key="move.id"
class="p-4 mb-4 rounded-md has-background-white-bis has-text-grey fs-12" class="p-4 mb-4 rounded-md has-background-white-100 has-text-grey fs-12"
> >
<div class="is-flex is-justify-content-space-between mb-1"> <div class="is-flex is-justify-content-space-between mb-1">
<div class="is-flex is-gap-1 is-align-items-center"> <div class="is-flex is-gap-1 is-align-items-center">

View File

@@ -60,7 +60,7 @@
<div class="has-text-centered py-6"> <div class="has-text-centered py-6">
<Mail <Mail
:size="64" :size="64"
class="has-text-grey-light mb-4" class="has-text-grey-70 mb-4"
/> />
<p class="title is-5">No emails sent yet</p> <p class="title is-5">No emails sent yet</p>
<p class="subtitle is-6">Sent emails will appear here</p> <p class="subtitle is-6">Sent emails will appear here</p>

View File

@@ -49,7 +49,7 @@
@click="handleRowClick(item.email, item.name, item.id)" @click="handleRowClick(item.email, item.name, item.id)"
> >
<td class="has-text-weight-medium">{{ item.name }}</td> <td class="has-text-weight-medium">{{ item.name }}</td>
<td class="has-text-grey-dark">{{ item.email }}</td> <td class="has-text-grey-30">{{ item.email }}</td>
</tr> </tr>
</template> </template>
</tbody> </tbody>

View File

@@ -44,15 +44,15 @@
class="fixed-grid has-3-cols is-family-monospace" class="fixed-grid has-3-cols is-family-monospace"
> >
<div class="grid"> <div class="grid">
<div class="cell p-2 rounded has-background-white-ter has-text-centered"> <div class="cell p-2 rounded has-background-white-95 has-text-centered">
<p class="fs-11 is-uppercase has-text-grey">width</p> <p class="fs-11 is-uppercase has-text-grey">width</p>
<p class="font-semibold">{{ coordinates.width }}</p> <p class="font-semibold">{{ coordinates.width }}</p>
</div> </div>
<div class="cell p-2 rounded has-background-white-ter has-text-centered"> <div class="cell p-2 rounded has-background-white-95 has-text-centered">
<p class="fs-11 is-uppercase has-text-grey">height</p> <p class="fs-11 is-uppercase has-text-grey">height</p>
<p class="font-semibold">{{ coordinates.height }}</p> <p class="font-semibold">{{ coordinates.height }}</p>
</div> </div>
<div class="cell p-2 rounded has-background-white-ter has-text-centered"> <div class="cell p-2 rounded has-background-white-95 has-text-centered">
<p class="fs-11 is-uppercase has-text-grey">ratio</p> <p class="fs-11 is-uppercase has-text-grey">ratio</p>
<p class="font-semibold">{{ coordinates.ratio }}</p> <p class="font-semibold">{{ coordinates.ratio }}</p>
</div> </div>

View File

@@ -23,12 +23,12 @@
v-else v-else
@click="openImage()" @click="openImage()"
class="size-35 rounded-md is-clickable is-flex is-justify-content-center is-align-items-center" class="size-35 rounded-md is-clickable is-flex is-justify-content-center is-align-items-center"
style="border: 1px dashed var(--bulma-grey-light)" style="border: 1px dashed var(--bulma-grey-70)"
> >
<Icon <Icon
name="material-symbols:add-photo-alternate-outline-rounded" name="material-symbols:add-photo-alternate-outline-rounded"
:size="50" :size="50"
class="has-text-grey-light" class="has-text-grey-70"
/> />
</div> </div>
<div> <div>

View File

@@ -11,7 +11,6 @@ function openModal() {
component: "orders/SelectedOrder", component: "orders/SelectedOrder",
title: "Chi tiết đơn hàng", title: "Chi tiết đơn hàng",
width: "75%", width: "75%",
height: "500px",
vbind: { vbind: {
invoice: props.invoice, invoice: props.invoice,
}, },

View File

@@ -64,7 +64,7 @@ const historyItems = [
:class="`has-text-${item.color}-40`" :class="`has-text-${item.color}-40`"
/> />
<div <div
class="is-flex-grow-1 has-background-grey-lighter rounded-full" class="is-flex-grow-1 has-background-grey-85 rounded-full"
style="width: 3px" style="width: 3px"
></div> ></div>
</div> </div>

View File

@@ -36,7 +36,7 @@ function openModal() {
<div class="is-flex is-flex-direction-column is-gap-2"> <div class="is-flex is-flex-direction-column is-gap-2">
<!-- customer info --> <!-- customer info -->
<div> <div>
<p class="has-text-grey-darker">{{ order.customer__name }}</p> <p class="has-text-grey-20">{{ order.customer__name }}</p>
<div class="has-text-grey fs-13 mt-1 is-flex is-gap-1 is-align-items-center"> <div class="has-text-grey fs-13 mt-1 is-flex is-gap-1 is-align-items-center">
<Icon name="material-symbols:call-outline-rounded" /> <Icon name="material-symbols:call-outline-rounded" />
<p>{{ order.customer__phone }}</p> <p>{{ order.customer__phone }}</p>
@@ -44,12 +44,12 @@ function openModal() {
</div> </div>
<!-- product info --> <!-- product info -->
<div> <div>
<p class="fs-24 has-text-grey-darker font-bold"> <p class="fs-24 has-text-grey-20 font-bold">
{{ $shortenCurrency(order.total) }} {{ $shortenCurrency(order.total) }}
</p> </p>
<p class="fs-13 has-text-grey">{{ order.order__products.length }} sản phẩm</p> <p class="fs-13 has-text-grey">{{ order.order__products.length }} sản phẩm</p>
</div> </div>
<hr class="m-0 has-background-grey-lighter" /> <hr class="m-0 has-background-grey-85" />
<div class="is-flex is-flex-direction-column is-gap-0.5 fs-13 has-text-grey"> <div class="is-flex is-flex-direction-column is-gap-0.5 fs-13 has-text-grey">
<p class="is-flex is-align-items-center is-gap-0.5"> <p class="is-flex is-align-items-center is-gap-0.5">
<Icon <Icon

View File

@@ -8,7 +8,7 @@ const { $formatNum } = useNuxtApp();
<template> <template>
<div> <div>
<div class="is-flex is-gap-2"> <div class="is-flex is-gap-2">
<div class="is-flex-grow-1 p-3 rounded-md has-background-white-bis"> <div class="is-flex-grow-1 p-3 rounded-md has-background-white-100">
<p class="fs-13 has-text-grey">Tổng tiền</p> <p class="fs-13 has-text-grey">Tổng tiền</p>
<p class="font-bold"> <p class="font-bold">
{{ $formatNum(invoice.total, { hasUnit: true }) }} {{ $formatNum(invoice.total, { hasUnit: true }) }}

View File

@@ -43,7 +43,7 @@ const phases = [
v-bind="phase" v-bind="phase"
/> />
</div> </div>
<hr class="has-background-grey-lighter" /> <hr class="has-background-grey-85" />
<div class="is-flex is-justify-content-space-between"> <div class="is-flex is-justify-content-space-between">
<p>Tổng đơn hàng</p> <p>Tổng đơn hàng</p>
<p class="fs-18 font-semibold"> <p class="fs-18 font-semibold">

View File

@@ -27,12 +27,12 @@ const invoiceProducts = computed(() => {
<div <div
v-for="product in invoiceProducts" v-for="product in invoiceProducts"
:key="product.id" :key="product.id"
class="p-3 has-background-white-ter rounded-md" class="p-3 has-background-white-95 rounded-md"
> >
<div class="is-flex is-justify-content-space-between is-align-items-flex-end"> <div class="is-flex is-justify-content-space-between is-align-items-flex-end">
<div> <div>
<p class="font-semibold">{{ product.variant__product__name }}</p> <p class="font-semibold">{{ product.variant__product__name }}</p>
<div class="is-flex is-gap-8 fs-13 has-text-grey-dark mt-1"> <div class="is-flex is-gap-8 fs-13 has-text-grey-30 mt-1">
<p>SL: {{ product.amount }}</p> <p>SL: {{ product.amount }}</p>
<p>Đơn giá: {{ $formatNum(product.price, { hasUnit: true }) }}</p> <p>Đơn giá: {{ $formatNum(product.price, { hasUnit: true }) }}</p>
</div> </div>
@@ -47,15 +47,15 @@ const invoiceProducts = computed(() => {
<table class="table is-fullwidth is-bordered fs-14 mb-8"> <table class="table is-fullwidth is-bordered fs-14 mb-8">
<tbody class="has-text-right"> <tbody class="has-text-right">
<tr> <tr>
<td class="has-text-grey-dark">Tổng tiền hàng</td> <td class="has-text-grey-30">Tổng tiền hàng</td>
<td>{{ $formatNum(invoice.total_amount, { hasUnit: true }) }}</td> <td>{{ $formatNum(invoice.total_amount, { hasUnit: true }) }}</td>
</tr> </tr>
<tr> <tr>
<td class="has-text-grey-dark">Phí vận chuyển</td> <td class="has-text-grey-30">Phí vận chuyển</td>
<td>{{ $formatNum(invoice.shipping_fee, { hasUnit: true }) }}</td> <td>{{ $formatNum(invoice.shipping_fee, { hasUnit: true }) }}</td>
</tr> </tr>
<tr> <tr>
<td class="has-text-grey-dark">Giảm giá</td> <td class="has-text-grey-30">Giảm giá</td>
<td>{{ $formatNum(invoice.discount_amount, { hasUnit: true }) }}</td> <td>{{ $formatNum(invoice.discount_amount, { hasUnit: true }) }}</td>
</tr> </tr>
<tr class="font-bold"> <tr class="font-bold">

View File

@@ -9,7 +9,7 @@ const props = defineProps({
<Icon <Icon
name="material-symbols:receipt-long-outline-rounded" name="material-symbols:receipt-long-outline-rounded"
:size="50" :size="50"
class="has-text-grey-light" class="has-text-grey-70"
/> />
<p>Chưa hoá đơn</p> <p>Chưa hoá đơn</p>
<button class="button is-purple">Tạo hoá đơn</button> <button class="button is-purple">Tạo hoá đơn</button>

View File

@@ -25,7 +25,7 @@ const emit = defineEmits(["selectOrder", "unselect"]);
`has-background-${status.color}-90`, `has-background-${status.color}-90`,
]" ]"
> >
<p class="font-semibold has-text-grey-darker">{{ status.name }}</p> <p class="font-semibold has-text-grey-20">{{ status.name }}</p>
<p <p
class="px-2 py-1 font-semibold rounded-lg has-background-white" class="px-2 py-1 font-semibold rounded-lg has-background-white"
:style="{ border: `1px solid var(--bulma-${status.color}-60)` }" :style="{ border: `1px solid var(--bulma-${status.color}-60)` }"
@@ -33,8 +33,8 @@ const emit = defineEmits(["selectOrder", "unselect"]);
{{ orders.filter((o) => o.status === status.id).length }} {{ orders.filter((o) => o.status === status.id).length }}
</p> </p>
</div> </div>
<hr class="m-0 has-background-grey-lighter" /> <hr class="m-0 has-background-grey-85" />
<div class="has-background-white-bis p-4"> <div class="has-background-white-100 p-4">
<OrderKanbanCard <OrderKanbanCard
v-if="orders.filter((o) => o.status === status.id).length > 0" v-if="orders.filter((o) => o.status === status.id).length > 0"
v-for="order in orders.filter((o) => o.status === status.id)" v-for="order in orders.filter((o) => o.status === status.id)"

View File

@@ -29,7 +29,7 @@ const progressUnfilled = computed(() => `var(--bulma-${props.color}-85)`);
<Icon <Icon
name="material-symbols:arrow-forward-rounded" name="material-symbols:arrow-forward-rounded"
:size="24" :size="24"
class="has-text-grey-light" class="has-text-grey-70"
/> />
</div> </div>
</template> </template>

View File

@@ -99,7 +99,7 @@ const isValid = computed(() => {
:name=" :name="
addressRef.is_default ? 'material-symbols:check-box-rounded' : 'material-symbols:check-box-outline-blank' addressRef.is_default ? 'material-symbols:check-box-rounded' : 'material-symbols:check-box-outline-blank'
" "
:class="['is-clickable', addressRef.is_default ? 'has-text-primary' : 'has-text-grey-light']" :class="['is-clickable', addressRef.is_default ? 'has-text-primary' : 'has-text-grey-70']"
:size="24" :size="24"
@click="addressRef.is_default = !addressRef.is_default" @click="addressRef.is_default = !addressRef.is_default"
/> />

View File

@@ -268,7 +268,7 @@ provide("pos", {
</div> </div>
<p <p
v-else v-else
class="has-text-grey-light py-4 has-text-centered" class="has-text-grey-70 py-4 has-text-centered"
> >
Chưa chọn khách hàng Chưa chọn khách hàng
</p> </p>

View File

@@ -55,7 +55,7 @@ setTimeout(() => store.commit("snackbar", undefined), 2500);
margin-inline: auto; margin-inline: auto;
width: fit-content; width: fit-content;
max-width: min(500px, 90vw); max-width: min(500px, 90vw);
background-color: hsl(from var(--bulma-grey-darker) h s l / 0.85); background-color: hsl(from var(--bulma-grey-20) h s l / 0.85);
} }
.button.is-ghost { .button.is-ghost {