@ramathibodi/nuxt-commons 0.1.33 → 0.1.34

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.33",
+  "version": "0.1.34",
   "builder": {
     "@nuxt/module-builder": "0.8.3",
     "unbuild": "2.0.0"

package/dist/runtime/components/TabsGroup.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import {ref} from 'vue'
 import {VTabs} from 'vuetify/components'
 
 interface Props extends /* @vue-ignore */ InstanceType<typeof VTabs['$props']> {
@@ -11,7 +10,7 @@ defineOptions({
 })
 
 const props = defineProps<Props>()
-const currentTab = ref<string | number>()
+const currentTab = defineModel<string|number>()
 </script>
 
 <template>

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {computed, defineOptions, nextTick, ref, useAttrs, useSlots, watch} from 'vue'
+import {computed, defineExpose, defineOptions, nextTick, ref, useAttrs, useSlots, watch} from 'vue'
 import {omit} from 'lodash-es'
 import type {FormDialogCallback} from '../../types/formDialog'
 import {VDataIterator} from "vuetify/components/VDataIterator";
@@ -20,6 +20,7 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VDataIterator['$pr
   importable?: boolean
   exportable?: boolean
   insertable?: boolean
+  searchable?: boolean
 
   viewSwitch?: boolean
   viewSwitchMultiple?: boolean
@@ -41,6 +42,7 @@ const props = withDefaults(defineProps<Props>(), {
   importable: true,
   exportable: true,
   insertable: true,
+  searchable: true,
 
   viewSwitch: false,
   viewSwitchMultiple:false,
@@ -72,6 +74,10 @@ 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 isDialogOpen = ref<boolean>(false)
 
 watch(() => props.modelValue, (newValue) => {
@@ -189,7 +195,9 @@ function openDialog(item?: object) {
   })
 }
 
-const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpItem, moveDownItem,moveToItem })
+const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpItem, moveDownItem,moveToItem,setSearch })
+
+defineExpose({operation})
 </script>
 
 <template>
@@ -278,7 +286,7 @@ const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpIt
                 </VToolbarTitle>
               </v-col>
               <v-col cols="5">
-                <slot name="search">
+                <slot name="search" :items="items" :operation="operation" v-if="props.searchable">
                   <VTextField
                       v-model="search"
                       class="justify-end w-100"
@@ -293,7 +301,7 @@ const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpIt
             </v-row>
 
             <VToolbarItems>
-              <slot name="toolbarItems" />
+              <slot name="toolbarItems" :items="items" :operation="operation"/>
               <ImportCSV
                   v-if="props.importable"
                   icon="mdi:mdi-file-upload"

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {VDataTable} from 'vuetify/components/VDataTable'
-import {computed, defineOptions, nextTick, ref, useAttrs, watch} from 'vue'
+import {computed, defineOptions,defineExpose, nextTick, ref, useAttrs, watch} from 'vue'
 import {omit} from 'lodash-es'
 import type {FormDialogCallback} from '../../types/formDialog'
 
@@ -19,6 +19,7 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props
   importable?: boolean
   exportable?: boolean
   insertable?: boolean
+  searchable?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -29,6 +30,7 @@ const props = withDefaults(defineProps<Props>(), {
   importable: true,
   exportable: true,
   insertable: true,
+  searchable: true,
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -42,6 +44,10 @@ 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 isDialogOpen = ref<boolean>(false)
 
 watch(() => props.modelValue, (newValue) => {
@@ -153,69 +159,77 @@ function openDialog(item?: object) {
   })
 }
 
-const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpItem, moveDownItem,moveToItem })
+const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpItem, moveDownItem,moveToItem,setSearch })
+
+defineExpose({operation})
 </script>
 
 <template>
   <v-card>
-    <VToolbar :color="toolbarColor">
-      <v-row
-          justify="end"
-          class="ma-1"
-          dense
-          no-gutters
-          align="center"
-      >
-        <v-col cols="7">
-          <VToolbarTitle class="pl-3">
-            <slot name="title">
-              {{ title }}
-            </slot>
-          </VToolbarTitle>
-        </v-col>
-        <v-col cols="5">
-          <slot name="search">
-            <VTextField
-                v-model="search"
-                class="justify-end w-100"
-                density="compact"
-                hide-details
-                placeholder="ค้นหา"
-                clearable
-                variant="solo"
-            />
-          </slot>
-        </v-col>
-      </v-row>
-
-      <VToolbarItems>
-        <slot name="toolbarItems" />
-        <ImportCSV
-            v-if="props.importable"
-            icon="mdi:mdi-file-upload"
-            variant="flat"
-            @import="importItems"
-            :color="toolbarColor"
-        />
-        <ExportCSV
-            v-if="props.exportable && items.length"
-            icon="mdi:mdi-file-download"
-            variant="flat"
-            :file-name="title"
-            :model-value="items"
-            :color="toolbarColor"
-        />
-        <VBtn
-            v-if="props.insertable"
-            :color="toolbarColor"
-            prepend-icon="mdi:mdi-plus"
-            variant="flat"
-            @click="openDialog()"
+    <slot
+      name="header"
+      :items="items"
+      :operation="operation"
+    >
+      <VToolbar :color="toolbarColor">
+        <v-row
+            justify="end"
+            class="ma-1"
+            dense
+            no-gutters
+            align="center"
         >
-          add
-        </VBtn>
-      </VToolbarItems>
-    </VToolbar>
+          <v-col cols="7">
+            <VToolbarTitle class="pl-3">
+              <slot name="title">
+                {{ title }}
+              </slot>
+            </VToolbarTitle>
+          </v-col>
+          <v-col cols="5">
+            <slot name="search" :items="items" :operation="operation" v-if="props.searchable">
+              <VTextField
+                  v-model="search"
+                  class="justify-end w-100"
+                  density="compact"
+                  hide-details
+                  placeholder="ค้นหา"
+                  clearable
+                  variant="solo"
+              />
+            </slot>
+          </v-col>
+        </v-row>
+
+        <VToolbarItems>
+          <slot name="toolbarItems" :items="items" :operation="operation"/>
+          <ImportCSV
+              v-if="props.importable"
+              icon="mdi:mdi-file-upload"
+              variant="flat"
+              @import="importItems"
+              :color="toolbarColor"
+          />
+          <ExportCSV
+              v-if="props.exportable && items.length"
+              icon="mdi:mdi-file-download"
+              variant="flat"
+              :file-name="title"
+              :model-value="items"
+              :color="toolbarColor"
+          />
+          <VBtn
+              v-if="props.insertable"
+              :color="toolbarColor"
+              prepend-icon="mdi:mdi-plus"
+              variant="flat"
+              @click="openDialog()"
+          >
+            add
+          </VBtn>
+        </VToolbarItems>
+      </VToolbar>
+    </slot>
     <v-data-table
       v-bind="plainAttrs"
       color="primary"

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed,watch, nextTick, ref, useAttrs } from 'vue'
 import { VDataTable } from 'vuetify/components/VDataTable'
-import { omit } from 'lodash-es'
+import { clone } from 'lodash-es'
 import type { GraphqlModelProps } from '../../composables/graphqlModel'
 import { useGraphqlModel } from '../../composables/graphqlModel'
 
@@ -37,7 +37,7 @@ const props = withDefaults(defineProps<Props & GraphqlModelProps>(), {
 
 const attrs = useAttrs()
 const plainAttrs = computed(() => {
-  const returnAttrs = omit(attrs, ['modelValue', 'onUpdate:modelValue'])
+  const returnAttrs = clone(attrs)
   if (props.headers) returnAttrs['headers'] = props.headers
   return returnAttrs
 })
@@ -68,7 +68,7 @@ watch(()=>props.search,()=>{
   search.value = props.search
 },{immediate:true})
 
-defineExpose({ reload })
+defineExpose({ reload,operation })
 </script>
 
 <template>
@@ -102,8 +102,8 @@ defineExpose({ reload })
               </slot>
             </VToolbarTitle>
           </v-col>
-          <v-col cols="5" v-if="props.searchable">
-            <slot name="search">
+          <v-col cols="5">
+            <slot name="search" :items="items" :operation="operation" v-if="props.searchable">
               <VTextField
                 v-model="search"
                 class="justify-end w-100"
@@ -118,7 +118,7 @@ defineExpose({ reload })
         </v-row>
 
         <VToolbarItems>
-          <slot name="toolbarItems" />
+          <slot name="toolbarItems" :items="items" :operation="operation"/>
           <ImportCSV
             v-if="props.importable && canCreate && props.insertable"
             icon="mdi mdi-file-upload"

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

@@ -128,7 +128,7 @@ watch(()=>props.search,()=>{
   search.value = props.search
 },{immediate:true})
 
-defineExpose({ reload })
+defineExpose({ reload,operation })
 </script>
 
 <template>
@@ -227,8 +227,8 @@ defineExpose({ reload })
                   </slot>
                 </VToolbarTitle>
               </v-col>
-              <v-col cols="5" v-if="props.searchable">
-                <slot name="search">
+              <v-col cols="5">
+                <slot name="search" :items="items" :operation="operation" v-if="props.searchable">
                   <VTextField
                     v-model="search"
                     class="justify-end w-100"
@@ -243,7 +243,7 @@ defineExpose({ reload })
             </v-row>
 
             <VToolbarItems>
-              <slot name="toolbarItems" />
+              <slot name="toolbarItems" :items="items" :operation="operation"/>
               <ImportCSV
                   v-if="props.importable && canCreate && props.insertable"
                   icon="mdi mdi-file-upload"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "0.1.33",
+  "version": "0.1.34",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",
@@ -115,5 +115,5 @@
     "vitest": "^1.6.0",
     "vue-tsc": "2.0.29"
   },
-  "packageManager": "pnpm@9.12.3+sha512.cce0f9de9c5a7c95bef944169cc5dfe8741abfb145078c0d508b868056848a87c81e626246cb60967cbd7fd29a6c062ef73ff840d96b3c86c40ac92cf4a813ee"
+  "packageManager": "pnpm@9.13.2+sha512.88c9c3864450350e65a33587ab801acf946d7c814ed1134da4a924f6df5a2120fd36b46aab68f7cd1d413149112d53c7db3a4136624cfd00ff1846a0c6cef48a"
 }