@feedmepos/mf-order-setting 0.0.2 → 0.0.6

package/src/views/feedme-express/FeedMeExpressSummary.vue

@@ -0,0 +1,62 @@
+<template>
+  <FmCard variant="outlined" class="p-5">
+    <span class="fm-typo-en-title-sm-800">FeedMe express summary</span>
+    <hr class="my-[0.25rem]" />
+    <div class="flex flex-col gap-1">
+      <div class="flex flex-col gap-1">
+        <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary mt-5">Status</span>
+        <div class="fm-typo-en-body-lg-600 block">{{ status }}</div>
+
+        <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">Max delivery distance</span>
+        <div class="fm-typo-en-body-lg-600 block">{{ props.setting.feedMe.maxDistance }}km</div>
+
+        <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">Operation hour</span>
+        <div class="fm-typo-en-body-lg-600 block mb-2">
+          <div v-for="(hours, index) in formattedOperatingHours" :key="index">{{ hours }}</div>
+        </div>
+      </div>
+    </div>
+  </FmCard>
+</template>
+
+<script lang="ts" setup>
+import type { FdoDeliverySetting } from '@feedmepos/core/entity'
+import { computed } from 'vue'
+
+interface Props {
+  setting: FdoDeliverySetting
+}
+const props = defineProps<Props>()
+
+const dayMap = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+
+const formatTime = (time: string): string => {
+  const [hour, minute] = time.split(':').map(Number)
+  const suffix = hour >= 12 ? 'PM' : 'AM'
+  const formattedHour = hour % 12 || 12
+  return `${formattedHour}:${minute.toString().padStart(2, '0')}${suffix}`
+}
+
+const formattedOperatingHours = computed(() => {
+  const sortDays = (a: [string, any], b: [string, any]) => {
+    const dayIndexA = Number(a[0])
+    const dayIndexB = Number(b[0])
+    if (dayIndexA === 0) return 1
+    if (dayIndexB === 0) return -1
+    return dayIndexA - dayIndexB
+  }
+
+  return Object.entries(props.setting.feedMe.operatingHours || {})
+    .filter(([_, day]) => day.enable)
+    .sort(sortDays)
+    .map(([dayIndex, day]) => {
+      const dayName = dayMap[Number(dayIndex)]
+      const timeSlots = day.hours.map((hour) => `${formatTime(hour.start)} - ${formatTime(hour.end)}`)
+      return `${dayName}, ${timeSlots.join(', ')}`
+    })
+})
+
+const status = computed<string>(() => {
+  return props.setting.feedMe.enable ? 'Active' : 'Inactive'
+})
+</script>

package/src/views/kiosk/KioskSummary.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="p-[1.5rem] border fm-corner-radius-lg flex flex-col gap-5">
+    <span class="fm-typo-en-title-sm-800">Kiosk Summary</span>
+    <hr class="my-[0.25rem]" />
+    <div class="flex flex-col gap-1">
+      <div class="flex flex-col gap-1">
+        <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">Kiosk Display</span>
+
+        <div class="fm-typo-en-body-lg-600">
+          <div v-if="devices.length > 0">
+            <li class="block" v-for="device in devices" :key="device.machineId">{{ device.name }}</li>
+          </div>
+          <div v-else>-</div>
+        </div>
+
+        <div v-if="dineInStatus === 'Activated'">
+            <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">Dine In</span>
+            <div class="fm-typo-en-body-lg-600 block">
+            <div>{{ dineInStatus }}</div>
+            </div>
+        </div>
+
+        <div v-if=" dineInStatus === 'Activated' && dineInType !== 'Unknown'">
+            <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">Dine In Type</span>
+            <div class="fm-typo-en-body-lg-600 block">
+            <div>{{ dineInType }}</div>
+            </div>
+        </div>
+        
+        <div v-if="takeAwayStatus === 'Activated'">
+            <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">Take Away</span>
+            <div class="fm-typo-en-body-lg-600 block">
+            <div>{{ takeAwayStatus }}</div>
+            </div>
+        </div>
+        
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { MfKioskDevice } from '@/modules/kiosk/interface';
+import type { MfKioskOrderSetting } from '@/modules/order-setting/kiosk/interface';
+import { computed } from 'vue'
+
+interface Props {
+    restaurantId: string,
+    devices : MfKioskDevice[],
+    kioskOrderSetting: MfKioskOrderSetting | undefined,
+    // getOrderSetting : () => MfKioskOrderSetting | undefined,
+}
+const props = defineProps<Props>();
+
+const dineInStatus = computed<string>(() => {
+  return props.kioskOrderSetting?.dineIn.enabled ? 'Activated' : 'Deactivated';
+});
+
+const takeAwayStatus = computed<string>(() => {
+  return props.kioskOrderSetting?.takeaway.enabled ? 'Activated' : 'Deactivated';
+});
+
+const dineInType = computed<string>(() => {
+    if (props.kioskOrderSetting?.dineIn.displayStand){
+        return 'Table Service'
+    } else if (props.kioskOrderSetting?.dineIn && !props.kioskOrderSetting.dineIn.displayStand){
+        return 'Pick at counter'
+    } else {
+        return 'Unknown'
+    }
+});
+
+</script>

package/src/views/kiosk/KioskView.vue

@@ -0,0 +1,140 @@
+<template>
+    <div class="py-[1.5rem]">
+        <FmPageHead title="Kiosk" />
+        <div class="flex px-[1.5rem]">
+            <div class="flex-[2_2_0%]">
+                <FmTabs v-model:model-value="selectedMenuItem" :items="menuItems"></FmTabs>
+                <div class="pt-[1.5rem]">
+                    <div class="flex flex-col gap-10">
+                        <div class="flex flex-col gap-2">
+                            <span class="fm-typo-en-title-sm-800"> Activate location </span>
+                            <span class="fm-typo-en-title-sm-400"> Select Restaurant: </span>
+                            <FmSelect class="w-1/2" v-model="currentSelect" :items="restaurantItems"
+                                @update:model-value="selectRestaurant" />
+                        </div>
+                        <KioskDevicesView v-if="selectedMenuItem == 'device'" :devices="devices"
+                            :request-otp="requestOtp" />
+                        <KioskSettingView v-if="selectedMenuItem == 'setting'" :restaurant-id="currentRestaurantId"
+                            @update-dine-in="updateDineInSetting" @update-takeaway="updateTakeawaySetting"
+                            :get-order-setting="() => OrderSettingStore.state.kiosk" />
+                    </div>
+                </div>
+            </div>
+            <div class="flex-[1_1_0%]">
+                <KioskSummary :restaurant-id="currentRestaurantId" :devices="devices"
+                    :kiosk-order-setting="OrderSettingStore.state.kiosk" />
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import KioskDevicesView from '@/views/kiosk/devices/KioskDevicesView.vue';
+import KioskSummary from '@/views/kiosk/KioskSummary.vue';
+import { useDialog, useSnackbar, type FmTabProps, type ISelectItem } from '@feedmepos/ui-library';
+import { ref, computed, defineAsyncComponent } from 'vue';
+import { useKioskStore } from '@/stores/kiosk';
+import type { MfKioskDevice } from "@/modules/kiosk/interface";
+import KioskOtpDialog from "@/views/kiosk/devices/KioskOtpDialog.vue";
+import { useCoreStore } from "@feedmepos/mf-common";
+import { useOrderSettings } from '@/stores/order-setting';
+import type { MfKioskDineInSetting, MfKioskTakeawaySetting } from '@/modules/order-setting/kiosk/interface';
+
+type KioskMenuItemValue = "device" | "setting";
+
+const KioskSettingView = defineAsyncComponent(() => import('@/views/kiosk/settings/KioskSettingView.vue'));
+
+const selectedMenuItem = ref<KioskMenuItemValue>('device');
+const KioskStore = useKioskStore();
+const OrderSettingStore = useOrderSettings();
+const Dialog = useDialog();
+const { currentRestaurant, restaurants, changeRestaurant } = useCoreStore();
+const SnackBar = useSnackbar();
+const currentSelect = ref<string>(currentRestaurant.value?.profile.name ?? 'select');
+
+const restaurantItems = computed<ISelectItem[]>(() => {
+    const pv: ISelectItem[] = [{
+        label: 'Please select...',
+        value: 'select',
+    }];
+    pv.push(...restaurants.value.map((r) => {
+        return {
+            label: r.profile.name,
+            value: r._id,
+        }
+    }));
+    return pv;
+});
+
+const currentRestaurantId = ref<string>(currentRestaurant.value?._id ?? '');
+
+async function selectRestaurant(v: string) {
+    if (v == 'select') {
+        changeRestaurant(undefined);
+    } else {
+        const restaurant = restaurants.value.find((r) => r._id == v);
+        changeRestaurant(restaurant);
+        await OrderSettingStore.getSetting();
+        await KioskStore.getDevices();
+        currentRestaurantId.value = v;
+    }
+}
+
+const menuItems = computed<FmTabProps[]>(() => [
+    {
+        label: 'Device Binding',
+        value: 'device',
+    },
+    {
+        label: 'Settings',
+        value: 'setting',
+    }
+]);
+
+const devices = computed<MfKioskDevice[]>(() => {
+    return KioskStore.state.devices;
+});
+
+async function requestOtp() {
+    await KioskStore.requestOtp();
+    Dialog.open({
+        title: "Bind Device",
+        contentComponent: KioskOtpDialog,
+        contentComponentProps: {
+            otp: KioskStore.state.otp,
+        }
+    });
+}
+
+async function updateDineInSetting(form: MfKioskDineInSetting) {
+    try{
+        OrderSettingStore.setKioskDineInSetting(form);
+        await OrderSettingStore.updateKioskSetting();
+        SnackBar.open({
+            title: 'Dine-in setting updated',
+            type: 'success',
+        });
+    }catch(e){
+        SnackBar.open({
+            title: 'Failed to update dine-in setting',
+            type: 'error',
+        });
+    }
+}
+
+async function updateTakeawaySetting(form: MfKioskTakeawaySetting) {
+    try{
+        OrderSettingStore.setKioskTakeawaySetting(form);
+        await OrderSettingStore.updateKioskSetting();
+        SnackBar.open({
+            title: 'Takeaway setting updated',
+            type: 'success',
+        });
+    } catch (e) {
+        SnackBar.open({
+            title: 'Failed to update takeaway setting',
+            type: 'error',
+        });
+    }
+}
+
+</script>

package/src/views/kiosk/devices/KioskDeviceCard.vue

@@ -0,0 +1,105 @@
+<template>
+
+    <div class="border fm-corner-radius-lg flex justify-between pr-[1rem] w-11/12">
+        <FmSideSheet header="Device Details" dismiss-away class="w-full" :maxWidth="700">
+            <template #side-sheet-button>
+                <FmListItem class="flex-1" :label="device.name"
+                    :sublabel="`Activated date: ${dayjs(device.activatedAt).format('DD MMM YYYY HH:mm')}`">
+                </FmListItem>
+            </template>
+            <div class="py-[1rem] flex flex-col gap-6">
+                <span class="fm-typo-en-title-sm-800">{{ device.name }}</span>
+                <div v-for="config in configs.filter(c => c[1])"
+                    class="w-full border p-[1.5rem] fm-corner-radius-lg flex flex-col gap-2">
+                    <span class="fm-typo-en-title-sm-800" v-if="config[1]">{{ config[0] }}</span>
+                    <div class="flex flex-col gap-1" v-if="config[1]" v-for="configEntry in Object.entries(config[1])">
+                        <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">{{ configEntry[0]
+                            }}</span>
+                        <span class="fm-typo-en-body-lg-600 block">{{ configEntry[1] == '' ? '-' : configEntry[1] }}</span>
+                    </div>
+                </div>
+            </div>
+        </FmSideSheet>
+        <FmButton variant="plain" append-icon="link_off" class=" text-fm-color-system-error-300 align-middle my-auto"
+            @click="openUnbindDialog" />
+    </div>
+</template>
+<script setup lang="ts">
+import type { MfKioskDevice } from '@/modules/kiosk/interface';
+import { type SnackbarPosition, useDialog, useSnackbar } from '@feedmepos/ui-library';
+import KioskUnbindConfirm from './KioskUnbindConfirm.vue';
+import { computed, ref } from 'vue';
+import { useKioskStore } from '@/stores/kiosk';
+import dayjs from 'dayjs';
+
+const Dialog = useDialog();
+const Snackbar = useSnackbar();
+const Kiosk = useKioskStore();
+
+interface Props {
+    device: MfKioskDevice,
+}
+const props = defineProps<Props>();
+const unBindTextFieldValue = ref<string>('');
+
+const configs = computed(() => {
+    return Object.entries(props.device.config);
+})
+
+// function showDeviceDetails() {
+//     Dialog.open({
+//         title: props.device.name,
+//         contentComponent: KioskDeviceDetail,
+//         contentComponentProps: {
+//             device: props.device,
+//         },
+//     });
+// }
+
+function openUnbindDialog() {
+    unBindTextFieldValue.value = '';
+    Dialog.open({
+        title: "Unbind Kiosk Device",
+        contentComponent: KioskUnbindConfirm,
+        contentComponentProps: {
+            machineId: props.device.machineId,
+            'onUpdate:modelValue': (v: string) => {
+                unBindTextFieldValue.value = v;
+            }
+        },
+        dismissAway: false,
+        primaryActions: {
+            text: 'Unbind',
+            variant: 'destructive',
+            close: false,
+        },
+        secondaryActions: {
+            text: 'Cancel',
+            variant: 'tertiary',
+            close: true,
+        }
+    }).onPrimary(async () => {
+        if (unBindTextFieldValue.value == props.device.machineId) {
+            await unbind();
+            Snackbar.open({
+                type: 'success',
+                message: 'Kiosk display successfully unbinded.',
+                position: 'bottom' as SnackbarPosition,
+            });
+            Dialog.close();
+        } else {
+            Snackbar.open({
+                type: 'warning',
+                message: 'Please enter the machine ID to confirm unbind.',
+                position: 'bottom' as SnackbarPosition,
+
+            });
+        }
+    });
+}
+
+async function unbind() {
+    await Kiosk.unbind(props.device.machineId);
+}
+
+</script>

package/src/views/kiosk/devices/KioskDeviceDetail.vue

@@ -0,0 +1,28 @@
+<template>
+    <div>
+        <div v-for="config in configs" >
+            <span class="fm-typo-en-title-sm-800" v-if="config[1]">{{ config[0] }}</span>
+            <div class="flex" v-if="config[1]" v-for="configEntry in Object.entries(config[1])">
+                <span class="font-bold">{{ configEntry[0] }}</span>
+                <span>{{ configEntry[1] }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import type { MfKioskDevice } from '@/modules/kiosk/interface';
+import { computed } from 'vue';
+
+interface Props{
+    device: MfKioskDevice
+}
+
+const props = defineProps<Props>();
+
+const configs = computed(() => {
+    return Object.entries(props.device.config);
+});
+
+
+
+</script>

package/src/views/kiosk/devices/KioskDevicesView.vue

@@ -0,0 +1,27 @@
+<template>
+        <div>
+            <div class="flex flex-col gap-2">
+                <div class="flex flex-col gap-2">
+                    <span class="fm-typo-en-title-sm-800 block"> Kiosk Display </span>
+                    <span class="fm-typo-en-body-md-400 block">Click "Bind device" to receive a special code for device
+                        binding.</span>
+                </div>
+                <div class="flex flex-col gap-6">
+                    <KioskDeviceCard v-for="device in devices" :key="device.machineId" :device="device"></KioskDeviceCard>
+                    <FmButton variant="plain" class="w-[10rem] border border-fm-color-primary fm-corner-radius-lg"
+                        label="Bind device" size="md" prepend-icon="link" @click="requestOtp" />
+                </div>
+            </div>
+        </div>
+</template>
+<script setup lang="ts"> 
+import KioskDeviceCard from "./KioskDeviceCard.vue";
+import type { MfKioskDevice } from "@/modules/kiosk/interface";
+
+interface Props{
+    devices : MfKioskDevice[],
+    requestOtp: () => Promise<void>;
+}
+
+const props = defineProps<Props>();
+</script>

package/src/views/kiosk/devices/KioskOtpDialog.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="flex flex-col gap-5">
+    <!--Show otp here-->
+    <span class="fm-typo-en-body-md-400 block">Enter this code to your kiosk device to bind.</span>
+        <div class="fm-typo-en-title-md-800">{{ otp }}</div>
+    </div>
+</template>
+<script setup lang="ts">
+
+interface Props{
+    otp: string
+}
+
+const props = defineProps<Props>();
+</script>

package/src/views/kiosk/devices/KioskUnbindConfirm.vue

@@ -0,0 +1,28 @@
+<template>
+    <div>
+        <span>Are you sure want to unbind device? If yes, please enter {{ machineId }} inside the textfield</span>
+        <FmTextField :model-value="modelValue" @update:model-value="updateModelValue" :placeholder="machineId"></FmTextField>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+
+
+interface Props{
+    machineId: string,
+}
+
+interface Emits{
+    (e: 'update:modelValue', v: string) : void,
+}
+
+const props = defineProps<Props>();
+const emits = defineEmits<Emits>();
+
+const modelValue = ref<string>('');
+
+function updateModelValue(v : string){
+    emits('update:modelValue', v);
+}
+
+</script>

package/src/views/kiosk/settings/KioskDineInSection.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="flex flex-col gap-5">
+        <FmSwitch v-model="enableDineIn" label="Dine In" label-placement="right"/>
+        <div v-show="enableDineIn" class="flex flex-col gap-2">
+            <KioskPickAtCounterSection v-if="form.pickUp" :enabled="form.pickUp.enabled" @update-pick-up="updatePickUp"/>
+            <KioskDisplayStandSection v-if="form.displayStand" :display-stand="form.displayStand" @update-display-stand="updateDisplayStand"/>
+        </div>
+        <FmButton class="w-1/4 mb-10" variant="primary" label="Apply Dine In" :disabled="!canSubmitForm || isApplyLoading"
+                :loading="isApplyLoading" @click="applyDineIn" />
+    </div>
+</template>
+<script lang="ts" setup>
+import type { DisplayStandSettingForm, KioskDineInSettingForm, MfDisplayStandSetting, MfKioskDineInSetting } from '@/modules/order-setting/kiosk/interface';
+import KioskDisplayStandSection from './KioskDisplayStandSection.vue';
+import KioskPickAtCounterSection from './KioskPickAtCounterSection.vue';
+import { computed, ref, watch } from 'vue';
+import { ObjectUtil } from '@/utils/object';
+import { defaultDisplayStand, defaultPickUp } from '@/stores/order-setting/mapper';
+
+interface Props {
+    getSetting: () => KioskDineInSettingForm,
+    isApplyLoading: boolean,
+    restaurantId: string
+}
+
+interface Emits {
+    (e: 'updateDineIn', setting: MfKioskDineInSetting): void
+}
+
+function updatePickUp(v: boolean){
+    form.value.pickUp = {
+        enabled: v,
+    };
+}
+
+function updateDisplayStand(v: DisplayStandSettingForm){
+    form.value.displayStand = v;
+}
+
+const canSubmitForm = computed<boolean>(() => {
+    const f = form.value;
+    if(!enableDineIn.value) {
+        return true;
+    }
+    if (f.enabled && f.displayStand) {
+        const displayStand = f.displayStand;
+        return !!displayStand.padDigit
+            && !!displayStand.standSlotRange.min
+            && !!displayStand.standSlotRange.max
+            && displayStand.standSlotRange.min <= displayStand.standSlotRange.max;
+    }
+    return true;
+});
+
+function applyDineIn() {
+    const appliedSetting = form.value;
+    
+    if (!enableDineIn.value) {
+        const emitObject = {
+            ...appliedSetting,
+            enabled: false,
+            displayStand: defaultDisplayStand,
+            pickUp: defaultPickUp,
+        };
+        emits('updateDineIn', emitObject);
+    } else if (canSubmitForm.value && !props.isApplyLoading) {
+        const emitObject = {
+            ...appliedSetting,
+            enabled: true,
+            displayStand: appliedSetting.enabled ? appliedSetting.displayStand as MfDisplayStandSetting : defaultDisplayStand,
+            pickUp: appliedSetting.enabled ? appliedSetting.pickUp : defaultPickUp,
+        };
+        emits('updateDineIn', emitObject);
+    }
+}
+
+const props = defineProps<Props>();
+const emits = defineEmits<Emits>();
+const form = ref<KioskDineInSettingForm>(ObjectUtil.clone<KioskDineInSettingForm>(props.getSetting()));
+const enableDineIn = ref<boolean>(ObjectUtil.clone(form.value.enabled));
+
+watch(() => props.restaurantId, () => {
+    form.value = props.getSetting();
+})
+
+</script>

package/src/views/kiosk/settings/KioskDisplayStandSection.vue

@@ -0,0 +1,98 @@
+<template>
+    <div>
+        <FmSwitch v-model="form.enabled" label="Display Stand" label-placement="right" @update:modelValue="updateEnabled"/>
+        <div class="border p-[1.5rem] fm-corner-radius-lg flex flex-col gap-2 my-5 w-11/12" v-show="form.enabled">
+            <span class="fm-typo-en-title-sm-800">Table service setting</span>
+            <div class="flex flex-col gap-10">
+                <!-- prefix -->
+                <!-- TODO: How to let user know this field is do for what-->
+                <FmTextField v-model="form.prefix" label="Prefix" placeholder="Prefix" @update:modelValue="updatePrefix"/>
+            </div>
+            <div class="flex flex-row gap-2">
+                <!-- <span class="fm-typo-en-title-sm-800">Table Stand Number Range</span> -->
+                <FmStepperField class="w-1/2" v-model="form.standSlotRange.min" label="Start" labelMark="required" :rules="minRules" placeholder="Enter a number" @update:modelValue="updateMin"/>
+                <FmStepperField class="w-1/2" v-model="form.standSlotRange.max" label="End" labelMark="required" :rules="maxRules" placeholder="Enter a number" @update:modelValue="updateMax"/>
+            </div>
+            <div>
+                <!-- pad digit -->
+                <!-- TODO: How to let user know this field is do for what-->
+                <FmStepperField v-model="form.padDigit" label="Pad Digit" labelMark="required" :rules="padDigitRules" placeholder="Pad Digit" @update:modelValue="updatePadDigit"/>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { NumberUtil } from '@/utils/number';
+import { ObjectUtil } from '@/utils/object';
+import type { DisplayStandSettingForm } from '@/modules/order-setting/kiosk/interface';
+
+interface Props{
+    displayStand: DisplayStandSettingForm;
+}
+
+interface Emits{
+    (e: 'updateDisplayStand', displayStand: DisplayStandSettingForm): void
+}
+
+const props = defineProps<Props>();
+const emits = defineEmits<Emits>();
+const form = ref<DisplayStandSettingForm>(ObjectUtil.clone<DisplayStandSettingForm>(props.displayStand));
+
+const nonNegativeRule = (val : any) => {
+    if (val < 0) {
+        return 'Value should be positive value';
+    } 
+    return true;
+}
+const greaterThanMinRule = (val: any) => {
+    if (val <= (form.value.standSlotRange.min ?? 0)){
+        return 'Max should be exceed to Min';
+    }
+    return true;
+}
+type ErrMsg = string;
+type ValidateCallback = (val: any) => true | ErrMsg;
+
+const padDigitRules = computed<(ValidateCallback[])>(() => {
+    return [nonNegativeRule];
+});
+const minRules = computed<ValidateCallback[]>(() => {
+    return [nonNegativeRule];
+});
+const maxRules = computed<ValidateCallback[]>(() => {
+    return [nonNegativeRule, greaterThanMinRule];
+});
+
+const previewResult = computed<string>(() => {
+    const exampleValue = 5;
+    const padDigitResult = NumberUtil.applyPadDigits(exampleValue, form.value.padDigit ?? 0);
+    return `Preview: ${form.value.prefix ?? ''}${padDigitResult}`;
+});
+
+function updateEnabled(v: boolean){
+    form.value.enabled = v;
+    emits('updateDisplayStand', form.value); 
+}
+
+function updateMin(v: number | null){
+    if(!v) return;
+    emits('updateDisplayStand', form.value); 
+}
+
+function updateMax(v: number | null){
+    if(!v) return;
+    emits('updateDisplayStand', form.value); 
+}
+
+function updatePrefix(v: string){
+    emits('updateDisplayStand', form.value); 
+}
+
+function updatePadDigit(v: number | null){
+    if(!v) return;
+    emits('updateDisplayStand', form.value); 
+}
+
+
+</script>