@ramathibodi/nuxt-commons 0.1.70 → 0.1.72

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.70",
+  "version": "0.1.72",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -53,6 +53,7 @@ const module = defineNuxtModule({
     _nuxt.options.vite.optimizeDeps.include.push("print-js");
     _nuxt.options.vite.optimizeDeps.include.push("gql-query-builder");
     _nuxt.options.vite.optimizeDeps.include.push("exif-rotate-js");
+    _nuxt.options.vite.optimizeDeps.include.push("localstorage-slim");
   }
 });
 

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

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import Pad from './Pad.vue'
+import { watch } from 'vue'
+import { useGraphQlOperation } from '../../composables/graphqlOperation'
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof Pad['$props']> {
+  templateId: string;
+  cache?: boolean | number
+}
+
+const props = withDefaults(defineProps<Props>(),{
+  cache: false
+})
+
+const currentTemplate = ref<any>({})
+
+watch(()=>props.templateId, (newValue) => {
+  useGraphQlOperation("Query","systemTemplateById",["template","templateScript"],{id: newValue},props.cache).then(result => {
+    currentTemplate.value = result
+  }).catch(_error => {
+    currentTemplate.value = {}
+  })
+})
+</script>
+<template>
+  <FormPad v-bind="$attrs" :template="currentTemplate.template" :template-script="currentTemplate.templateScript" />
+</template>

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

@@ -203,7 +203,8 @@ defineExpose({
   reset: ()=>inputRef.value?.reset(),
   resetValidation : ()=>inputRef.value?.resetValidation(),
   validate : ()=>inputRef.value?.validate(),
-  operation
+  operation,
+  items
 })
 </script>
 

package/dist/runtime/components/master/label.vue

@@ -39,5 +39,9 @@ const computedItemTitle = computed(()=>{
       :not-found-text="computedNotFoundText"
       :placeholder="computedPlaceholder"
       :cache="props.cache"
-  ></model-label>
+  >
+    <template v-for="(_, name, index) in ($slots as {})" :key="index" #[name]="slotData">
+      <slot :name="name" v-bind="((slotData || {}) as object)" />
+    </template>
+  </model-label>
 </template>

package/dist/runtime/components/model/Table.vue

@@ -135,7 +135,7 @@ watch(()=>props.search,()=>{
   search.value = props.search
 },{immediate:true})
 
-defineExpose({ reload,operation })
+defineExpose({ reload,operation,items })
 </script>
 
 <template>

package/dist/runtime/components/model/label.vue

@@ -2,6 +2,7 @@
 import { computedAsync } from '@vueuse/core'
 import { useGraphQlOperation } from '../../composables/graphqlOperation'
 import { concat } from "lodash-es";
+import { ref } from 'vue'
 
 interface Props {
   modelName: string
@@ -18,6 +19,8 @@ const props = withDefaults(defineProps<Props>(), {
   cache: false,
 })
 
+const modelItem = ref<Record<string, any>>({})
+
 const modelItemValue = computedAsync<string>(async () => {
   if (props.modelName && props.itemTitle) {
     let fields: any[] = (typeof props.itemTitle === "string") ? [props.itemTitle] : []
@@ -28,6 +31,7 @@ const modelItemValue = computedAsync<string>(async () => {
 
     try {
       if (result) {
+        modelItem.value = result
         if (typeof props.itemTitle === "string") return result[props.itemTitle]
         else return props.itemTitle(result)
       }
@@ -40,5 +44,7 @@ const modelItemValue = computedAsync<string>(async () => {
 </script>
 
 <template>
-  <span>{{ modelItemValue }}</span>
+  <slot name="default" :data="modelItem">
+    <span>{{ modelItemValue }}</span>
+  </slot>
 </template>

package/dist/runtime/composables/graphqlModel.js

@@ -4,6 +4,7 @@ import { useAlert } from "./alert.js";
 import { buildRequiredInputFields } from "./graphqlOperation.js";
 import { useGraphqlModelOperation } from "./graphqlModelOperation.js";
 import pLimit from "p-limit";
+import { arrayWrap } from "../utils/array.js";
 export function useGraphqlModel(props) {
   const alert = useAlert();
   const items = ref([]);
@@ -130,6 +131,8 @@ export function useGraphqlModel(props) {
         items.value = result.data;
         itemsLength.value = result.meta.totalItems;
       }).catch((error) => {
+        items.value = [];
+        itemsLength.value = 0;
         alert?.addAlert({ alertType: "error", message: error });
       }).finally(() => {
         isLoading.value = false;
@@ -142,8 +145,9 @@ export function useGraphqlModel(props) {
     } else {
       isLoading.value = true;
       operationRead.value?.call(fields.value, props.modelBy).then((result) => {
-        items.value = result;
+        items.value = arrayWrap(result);
       }).catch((error) => {
+        items.value = [];
         alert?.addAlert({ alertType: "error", message: error });
       }).finally(() => {
         isLoading.value = false;

package/dist/runtime/utils/array.d.ts

@@ -0,0 +1 @@
+export declare function arrayWrap<T>(value: T | T[] | null | undefined): T[];

package/dist/runtime/utils/array.js

@@ -0,0 +1,4 @@
+export function arrayWrap(value) {
+  if (value === null || value === void 0) return [];
+  return Array.isArray(value) ? value : [value];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "0.1.70",
+  "version": "0.1.72",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",