@ramathibodi/nuxt-commons 0.1.74 → 4.0.0

package/dist/runtime/components/form/Iterator.vue

@@ -1,301 +1,211 @@
-<script lang="ts" setup>
-/**
- * FormIterator is a schema-driven form field component that binds model data, renders field UI, and emits normalized updates.
- * This doc block is consumed by vue-docgen for generated API documentation.
- */
-import {computed, defineExpose, defineOptions, nextTick, ref, useAttrs, useSlots, useTemplateRef, watch} from 'vue'
-import {omit} from 'lodash-es'
-import type {FormDialogCallback} from '../../types/formDialog'
-import {VDataIterator} from "vuetify/components/VDataIterator";
-import {VDataTable} from "vuetify/components/VDataTable";
-import {VInput} from 'vuetify/components/VInput'
-import {useDisplay} from 'vuetify'
-
+<script setup>
+import { computed, nextTick, ref, useAttrs, useSlots, useTemplateRef, watch } from "vue";
+import { omit } from "lodash-es";
+import { VDataIterator } from "vuetify/components/VDataIterator";
+import { VDataTable } from "vuetify/components/VDataTable";
+import { VInput } from "vuetify/components/VInput";
+import { useDisplay } from "vuetify";
 defineOptions({
-  inheritAttrs: false,
-})
-
-interface Props extends /* @vue-ignore */ InstanceType<typeof VDataIterator['$props']>,/* @vue-ignore */ InstanceType<typeof VDataTable['$props']> {
-  title: string // Toolbar title shown above iterator/table view.
-  noDataText?: string // Message shown when no rows are available to render.
-  modelValue?: Record<string, any>[] // Parent-provided rows; component emits reordered/edited rows back via v-model.
-  modelKey?: string // Row identity key used for edit/delete/move operations and table item-value.
-  dialogFullscreen?: boolean // Opens item editor dialog in fullscreen mode by default.
-  initialData?: Record<string, any> // Default payload merged into a new item before editing.
-  toolbarColor?: string // Toolbar/action color theme token.
-  importable?: boolean // Shows import action and allows creating rows from imported records.
-  exportable?: boolean // Shows export action for the current iterator dataset.
-  insertable?: boolean // Enables add/create action for new rows.
-  searchable?: boolean // Shows search control and applies client-side filtering keyword.
-
-  loading?: boolean // External loading state passed through to iterator/table rendering.
-
-  viewSwitch?: boolean // Enables UI control that lets users switch between card iterator and table view.
-  viewSwitchMultiple?: boolean // Allows multi-select behavior in view switch control when enabled.
-
-  cols?: string | number | boolean // Base grid columns for iterator card items.
-  xxl?: string | number | boolean // Card grid columns at `xxl` breakpoint.
-  xl?: string | number | boolean // Card grid columns at `xl` breakpoint.
-  lg?: string | number | boolean // Card grid columns at `lg` breakpoint.
-  md?: string | number | boolean // Card grid columns at `md` breakpoint.
-  sm?: string | number | boolean // Card grid columns at `sm` breakpoint.
-  itemsPerPage?: string | number // Page size for iterator/table; supports `'all'` semantics.
-
-  preferTable?: string | number | boolean // Global auto-switch rule: `true` always table, number means table when item count reaches threshold.
-  preferTableXxl?: string | number | boolean // Breakpoint-specific override for `preferTable` at `xxl`.
-  preferTableXl?: string | number | boolean // Breakpoint-specific override for `preferTable` at `xl`.
-  preferTableLg?: string | number | boolean // Breakpoint-specific override for `preferTable` at `lg`.
-  preferTableMd?: string | number | boolean // Breakpoint-specific override for `preferTable` at `md`.
-  preferTableSm?: string | number | boolean // Breakpoint-specific override for `preferTable` at `sm`.
-}
-
-/**
- * Public props accepted by FormIterator.
- * Document each prop field with intent, defaults, and side effects for clear generated docs.
- */
-const props = withDefaults(defineProps<Props>(), {
-  noDataText: 'ไม่พบข้อมูล',
-  dialogFullscreen: false,
-  modelKey: 'id',
-  toolbarColor: 'primary',
-  importable: true,
-  exportable: true,
-  insertable: true,
-  searchable: true,
-
-  loading: false,
-
-  viewSwitch: false,
-  viewSwitchMultiple:false,
-
-  cols: 12,
-  xxl: false,
-  xl: false,
-  lg: 2,
-  md: 4,
-  sm: 6,
-  itemsPerPage: 12,
-})
-
-/**
- * Custom events emitted by FormIterator.
- * Parents can listen to these events to react to user actions and internal state changes.
- */
-const emit = defineEmits(['update:modelValue'])
-
-const attrs = useAttrs()
+  inheritAttrs: false
+});
+const props = defineProps({
+  title: { type: String, required: true },
+  noDataText: { type: String, required: false, default: "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25" },
+  modelValue: { type: Array, required: false },
+  modelKey: { type: String, required: false, default: "id" },
+  dialogFullscreen: { type: Boolean, required: false, default: false },
+  initialData: { type: Object, required: false },
+  toolbarColor: { type: String, required: false, default: "primary" },
+  importable: { type: Boolean, required: false, default: true },
+  exportable: { type: Boolean, required: false, default: true },
+  insertable: { type: Boolean, required: false, default: true },
+  searchable: { type: Boolean, required: false, default: true },
+  loading: { type: Boolean, required: false, default: false },
+  viewSwitch: { type: Boolean, required: false, default: false },
+  viewSwitchMultiple: { type: Boolean, required: false, default: false },
+  cols: { type: [String, Number, Boolean], required: false, default: 12 },
+  xxl: { type: [String, Number, Boolean], required: false, default: false },
+  xl: { type: [String, Number, Boolean], required: false, default: false },
+  lg: { type: [String, Number, Boolean], required: false, default: 2 },
+  md: { type: [String, Number, Boolean], required: false, default: 4 },
+  sm: { type: [String, Number, Boolean], required: false, default: 6 },
+  itemsPerPage: { type: [String, Number], required: false, default: 12 },
+  preferTable: { type: [String, Number, Boolean], required: false },
+  preferTableXxl: { type: [String, Number, Boolean], required: false },
+  preferTableXl: { type: [String, Number, Boolean], required: false },
+  preferTableLg: { type: [String, Number, Boolean], required: false },
+  preferTableMd: { type: [String, Number, Boolean], required: false },
+  preferTableSm: { type: [String, Number, Boolean], required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const attrs = useAttrs();
 const plainAttrs = computed(() => {
-  return omit(attrs, ['modelValue', 'onUpdate:modelValue'])
-})
-
-const inputRef = useTemplateRef<VInput>("inputRef")
-
-const slots = useSlots()
+  return omit(attrs, ["modelValue", "onUpdate:modelValue"]);
+});
+const inputRef = useTemplateRef("inputRef");
+const slots = useSlots();
 const tableSlots = computed(() => {
-  return omit(slots, ['item'])
-})
-
-const display = useDisplay()
-const isProgrammaticSet = ref(false)
-const userOverrodeView = ref(false)
-
-const viewType = ref<string[] | string>('iterator')
-
-function setViewTypeSafely(val: 'iterator' | 'table') {
-  isProgrammaticSet.value = true
+  return omit(slots, ["item"]);
+});
+const display = useDisplay();
+const isProgrammaticSet = ref(false);
+const userOverrodeView = ref(false);
+const viewType = ref("iterator");
+function setViewTypeSafely(val) {
+  isProgrammaticSet.value = true;
   if (Array.isArray(viewType.value)) {
-    viewType.value = [val]
+    viewType.value = [val];
   } else {
-    viewType.value = val
+    viewType.value = val;
   }
-  nextTick(() => { isProgrammaticSet.value = false })
+  nextTick(() => {
+    isProgrammaticSet.value = false;
+  });
 }
-
 watch(viewType, () => {
-  if (!isProgrammaticSet.value) userOverrodeView.value = true
-})
-
-function parsePrefer(val: unknown): boolean | number {
-  if (val === true) return true
-  const n = Number(val)
-  return Number.isFinite(n) && n > 0 ? n : false
+  if (!isProgrammaticSet.value) userOverrodeView.value = true;
+});
+function parsePrefer(val) {
+  if (val === true) return true;
+  const n = Number(val);
+  return Number.isFinite(n) && n > 0 ? n : false;
 }
-
-const computedPreferTable = computed<boolean | number>(() => {
-  const bp = display.name?.value
-  if (bp === 'xxl' && props.preferTableXxl !== undefined) return parsePrefer(props.preferTableXxl)
-  if (bp === 'xl'  && props.preferTableXl  !== undefined) return parsePrefer(props.preferTableXl)
-  if (bp === 'lg'  && props.preferTableLg  !== undefined) return parsePrefer(props.preferTableLg)
-  if (bp === 'md'  && props.preferTableMd  !== undefined) return parsePrefer(props.preferTableMd)
-  if (bp === 'sm'  && props.preferTableSm  !== undefined) return parsePrefer(props.preferTableSm)
-  return parsePrefer(props.preferTable)
-})
-
-const items = ref<Record<string, any>[]>([])
-const search = ref<string>()
-const currentItem = ref<Record<string, any> | undefined>(undefined)
-
-function setSearch(keyword: string) {
-  search.value = keyword
+const computedPreferTable = computed(() => {
+  const bp = display.name?.value;
+  if (bp === "xxl" && props.preferTableXxl !== void 0) return parsePrefer(props.preferTableXxl);
+  if (bp === "xl" && props.preferTableXl !== void 0) return parsePrefer(props.preferTableXl);
+  if (bp === "lg" && props.preferTableLg !== void 0) return parsePrefer(props.preferTableLg);
+  if (bp === "md" && props.preferTableMd !== void 0) return parsePrefer(props.preferTableMd);
+  if (bp === "sm" && props.preferTableSm !== void 0) return parsePrefer(props.preferTableSm);
+  return parsePrefer(props.preferTable);
+});
+const items = ref([]);
+const search = ref();
+const currentItem = ref(void 0);
+function setSearch(keyword) {
+  search.value = keyword;
 }
-
-const isDialogOpen = ref<boolean>(false)
-
+const isDialogOpen = ref(false);
 watch(() => props.modelValue, (newValue) => {
-  if (!Array.isArray(newValue) || !newValue.every(item => typeof item === 'object')) {
-    items.value = []
-  }
-  else {
-    let maxKey = 0
-
+  if (!Array.isArray(newValue) || !newValue.every((item) => typeof item === "object")) {
+    items.value = [];
+  } else {
+    let maxKey = 0;
     newValue.forEach((item) => {
       if (!item.hasOwnProperty(props.modelKey)) {
-        maxKey = Math.max(maxKey, ...newValue.map(i => i[props.modelKey] || 0))
-        item[props.modelKey] = maxKey + 1
+        maxKey = Math.max(maxKey, ...newValue.map((i) => i[props.modelKey] || 0));
+        item[props.modelKey] = maxKey + 1;
       }
-    })
-
-    items.value = newValue
+    });
+    items.value = newValue;
   }
-}, { immediate: true })
-
+}, { immediate: true });
 watch(items, (newValue) => {
-  emit('update:modelValue', newValue)
-}, { deep: true })
-
+  emit("update:modelValue", newValue);
+}, { deep: true });
 watch(
-    [() => items.value?.length, computedPreferTable, () => display.name?.value],
-    ([len, prefer]) => {
-      if (userOverrodeView.value) return // respect explicit user choice forever (until remount)
-
-      let target: 'iterator' | 'table' = 'iterator'
-      if (prefer === true) {
-        target = 'table'
-      } else if (typeof prefer === 'number') {
-        if (Number(len) >= prefer) target = 'table'
-      }
-
-      if (!viewType.value?.includes(target)) setViewTypeSafely(target)
-    },
-    { immediate: true }
-)
-
-const itemsPerPageInternal = ref<string | number>()
+  [() => items.value?.length, computedPreferTable, () => display.name?.value],
+  ([len, prefer]) => {
+    if (userOverrodeView.value) return;
+    let target = "iterator";
+    if (prefer === true) {
+      target = "table";
+    } else if (typeof prefer === "number") {
+      if (Number(len) >= prefer) target = "table";
+    }
+    if (!viewType.value?.includes(target)) setViewTypeSafely(target);
+  },
+  { immediate: true }
+);
+const itemsPerPageInternal = ref();
 watch(() => props.itemsPerPage, (newValue) => {
-  if (newValue.toString().toLowerCase() == 'all') itemsPerPageInternal.value = '-1'
-  else if (newValue) itemsPerPageInternal.value = newValue
-}, { immediate: true })
-
-function createItem(item: Record<string, any>, callback?: FormDialogCallback) {
-  if (items.value.length > 0) item[props.modelKey] = Math.max(...items.value.map(i => i[props.modelKey] || 0)) + 1
-  else item[props.modelKey] = 1
-
-  items.value.push(item)
-
-  if (callback) callback.done()
+  if (newValue.toString().toLowerCase() == "all") itemsPerPageInternal.value = "-1";
+  else if (newValue) itemsPerPageInternal.value = newValue;
+}, { immediate: true });
+function createItem(item, callback) {
+  if (items.value.length > 0) item[props.modelKey] = Math.max(...items.value.map((i) => i[props.modelKey] || 0)) + 1;
+  else item[props.modelKey] = 1;
+  items.value.push(item);
+  if (callback) callback.done();
 }
-
-function importItems(importItems: Record<string, any>[], callback?: FormDialogCallback) {
-  importItems.forEach((item) => {
-    createItem(item)
-  })
-  if (callback) callback.done()
+function importItems(importItems2, callback) {
+  importItems2.forEach((item) => {
+    createItem(item);
+  });
+  if (callback) callback.done();
 }
-
-function updateItem(newItem: Record<string, any>, callback?: FormDialogCallback) {
-  const index = items.value.findIndex(item => item[props.modelKey] === newItem[props.modelKey])
-
+function updateItem(newItem, callback) {
+  const index = items.value.findIndex((item) => item[props.modelKey] === newItem[props.modelKey]);
   if (index !== -1) {
-    items.value[index] = newItem
+    items.value[index] = newItem;
   }
-
-  if (callback) callback.done()
+  if (callback) callback.done();
 }
-
-function moveUpItem(currentItem: Record<string, any>, callback?: FormDialogCallback) {
-  const index = items.value.findIndex(item => item[props.modelKey] === currentItem[props.modelKey])
-
+function moveUpItem(currentItem2, callback) {
+  const index = items.value.findIndex((item) => item[props.modelKey] === currentItem2[props.modelKey]);
   if (index > 0) {
-    const temp = items.value[index - 1]
-    items.value[index - 1] = items.value[index]
-    items.value[index] = temp
+    const temp = items.value[index - 1];
+    items.value[index - 1] = items.value[index];
+    items.value[index] = temp;
   }
-
-  if (callback) callback.done()
+  if (callback) callback.done();
 }
-
-function moveDownItem(currentItem: Record<string, any>, callback?: FormDialogCallback) {
-  const index = items.value.findIndex(item => item[props.modelKey] === currentItem[props.modelKey])
-
+function moveDownItem(currentItem2, callback) {
+  const index = items.value.findIndex((item) => item[props.modelKey] === currentItem2[props.modelKey]);
   if (index >= 0 && index < items.value.length - 1) {
-    const temp = items.value[index + 1]
-    items.value[index + 1] = items.value[index]
-    items.value[index] = temp
+    const temp = items.value[index + 1];
+    items.value[index + 1] = items.value[index];
+    items.value[index] = temp;
   }
-
-  if (callback) callback.done()
+  if (callback) callback.done();
 }
-
-function moveToItem(currentItem: Record<string, any>, callback?: FormDialogCallback) {
-  const index = items.value.findIndex(item => item[props.modelKey] === currentItem[props.modelKey]);
-
+function moveToItem(currentItem2, callback) {
+  const index = items.value.findIndex((item) => item[props.modelKey] === currentItem2[props.modelKey]);
   if (index !== -1) {
     const newPosition = prompt("Enter the new position (0-based index):");
-    const parsedPosition = parseInt(<string>newPosition, 10);
-
+    const parsedPosition = parseInt(newPosition, 10);
     if (isNaN(parsedPosition) || parsedPosition < 0 || parsedPosition >= items.value.length) {
       alert("Invalid position entered. Please enter a number between 0 and " + (items.value.length - 1));
-      return
+      return;
     }
-
     const [temp] = items.value.splice(index, 1);
-
     items.value.splice(parsedPosition, 0, temp);
   }
-
   if (callback) callback.done();
 }
-
-function deleteItem(deleteItem: Record<string, any>, callback?: FormDialogCallback) {
-  const index = items.value.findIndex(item => item[props.modelKey] === deleteItem[props.modelKey])
-
+function deleteItem(deleteItem2, callback) {
+  const index = items.value.findIndex((item) => item[props.modelKey] === deleteItem2[props.modelKey]);
   if (index !== -1) {
-    items.value.splice(index, 1)
+    items.value.splice(index, 1);
   }
-
-  if (callback) callback.done()
+  if (callback) callback.done();
 }
-
-function openDialog(item?: object) {
-  currentItem.value = item
+function openDialog(item) {
+  currentItem.value = item;
   nextTick(() => {
-    isDialogOpen.value = true
-  })
+    isDialogOpen.value = true;
+  });
 }
-
-const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpItem, moveDownItem,moveToItem,setSearch })
-
-const isValid = computed(()=>{
-  return inputRef.value?.isValid
-})
-
-const errorMessages = computed(()=>{
-  return inputRef.value?.errorMessages
-})
-
+const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpItem, moveDownItem, moveToItem, setSearch });
+const isValid = computed(() => {
+  return inputRef.value?.isValid;
+});
+const errorMessages = computed(() => {
+  return inputRef.value?.errorMessages;
+});
 defineExpose({
   errorMessages,
   isValid,
-  reset: ()=>inputRef.value?.reset(),
-  resetValidation : ()=>inputRef.value?.resetValidation(),
-  validate : ()=>inputRef.value?.validate(),
+  reset: () => inputRef.value?.reset(),
+  resetValidation: () => inputRef.value?.resetValidation(),
+  validate: () => inputRef.value?.validate(),
   operation
-})
+});
 </script>
 
 <template>
   <v-input v-model="items" v-bind="plainAttrs" ref="inputRef">
-    <template #default="{isReadonly,isDisabled}">
+    <template #default="{ isReadonly, isDisabled }">
       <v-container fluid class="ma-0 pa-0">
         <v-card>
           <v-data-iterator
@@ -371,7 +281,7 @@ defineExpose({
                   <v-row
                       justify="end"
                       class="ma-1"
-                      dense
+                      density="compact"
                       no-gutters
                       align="center"
                   >
@@ -442,13 +352,13 @@ defineExpose({
               >
                 <!-- @ts-ignore -->
                 <template
-                    v-for="(_, name, index) in (tableSlots as {})"
+                    v-for="(_, name, index) in tableSlots"
                     :key="index"
                     #[name]="slotData"
                 >
                   <slot
                       :name="name"
-                      v-bind="((slotData || {}) as object)"
+                      v-bind="slotData || {}"
                       :operation="operation"
                       :isReadonly="isReadonly"
                       :isDisabled="isDisabled"
@@ -458,9 +368,9 @@ defineExpose({
                     v-if="!$slots['item.operation'] && !(isReadonly.value || isDisabled.value)"
                     #item.operation="props"
                 >
-                  <v-icon density="compact" :disabled="props.index==0" @click="moveUpItem(props.item)">mdi:mdi-arrow-up-thick</v-icon>
+                  <v-icon density="compact" :disabled="props.index == 0" @click="moveUpItem(props.item)">mdi:mdi-arrow-up-thick</v-icon>
                   <v-icon density="compact" @click="moveToItem(props.item)">fa:fas fa-arrow-right-to-bracket</v-icon>
-                  <v-icon density="compact" :disabled="props.index==items.length-1" @click="moveDownItem(props.item)">mdi:mdi-arrow-down-thick</v-icon>
+                  <v-icon density="compact" :disabled="props.index == items.length - 1" @click="moveDownItem(props.item)">mdi:mdi-arrow-down-thick</v-icon>
                 </template>
                 <template
                     v-if="!$slots['item.action'] && !(isReadonly.value || isDisabled.value)"
@@ -486,7 +396,7 @@ defineExpose({
                 <v-row
                     align-content="center"
                     justify="end"
-                    dense
+                    density="compact"
                 >
                   <v-spacer />
                   <v-select