@ramathibodi/nuxt-commons 0.1.13 → 0.1.15

package/dist/runtime/components/pdf/Print.vue

@@ -1,63 +1,63 @@
-<script setup lang="ts">
-import printJS from 'print-js'
-import { ref, watch } from 'vue'
-import { useAlert } from '../../composables/alert'
-
-interface Props {
-  base64String?: string
-  fileName?: string
-  print?: boolean
-  title?: string
-  disabled?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  print: false,
-  disabled: false,
-})
-const emit = defineEmits(['update:print'])
-
-const isMobile = ref(false)
-const alert = useAlert()
-
-const openPdf = () => {
-  if (/Android|Mobi|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Macintosh/i.test(navigator.userAgent)) {
-    isMobile.value = true
-  }
-  else {
-    printJS({
-      printable: props.base64String,
-      type: 'pdf',
-      base64: true,
-      onPrintDialogClose: endLoadPdf,
-      onError: (error: any) => {
-        alert?.addAlert({ message: error, alertType: 'error' })
-      },
-    })
-  }
-}
-
-const endLoadPdf = () => {
-  emit('update:print', false)
-  isMobile.value = false
-}
-
-watch(() => props.print, () => {
-  if (props.print) openPdf()
-})
-</script>
-
-<template>
-  <v-dialog
-    v-model="isMobile"
-    fullscreen
-  >
-    <PdfView
-      :base64-string="props.base64String"
-      :disabled="props.disabled"
-      :title="props.title"
-      :file-name="props.fileName"
-      @close-dialog="endLoadPdf"
-    />
-  </v-dialog>
-</template>
+<script setup lang="ts">
+import printJS from 'print-js'
+import { ref, watch } from 'vue'
+import { useAlert } from '../../composables/alert'
+
+interface Props {
+  base64String?: string
+  fileName?: string
+  print?: boolean
+  title?: string
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  print: false,
+  disabled: false,
+})
+const emit = defineEmits(['update:print'])
+
+const isMobile = ref(false)
+const alert = useAlert()
+
+const openPdf = () => {
+  if (/Android|Mobi|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Macintosh/i.test(navigator.userAgent)) {
+    isMobile.value = true
+  }
+  else {
+    printJS({
+      printable: props.base64String,
+      type: 'pdf',
+      base64: true,
+      onPrintDialogClose: endLoadPdf,
+      onError: (error: any) => {
+        alert?.addAlert({ message: error, alertType: 'error' })
+      },
+    })
+  }
+}
+
+const endLoadPdf = () => {
+  emit('update:print', false)
+  isMobile.value = false
+}
+
+watch(() => props.print, () => {
+  if (props.print) openPdf()
+})
+</script>
+
+<template>
+  <v-dialog
+    v-model="isMobile"
+    fullscreen
+  >
+    <PdfView
+      :base64-string="props.base64String"
+      :disabled="props.disabled"
+      :title="props.title"
+      :file-name="props.fileName"
+      @close-dialog="endLoadPdf"
+    />
+  </v-dialog>
+</template>

package/dist/runtime/components/pdf/View.vue

@@ -1,104 +1,104 @@
-<script setup lang="ts">
-import PDF from 'pdf-vue3'
-import { uid } from 'uid'
-import printJS from 'print-js'
-import { ref, computed } from 'vue'
-import { useAlert } from '../../composables/alert'
-
-const props = defineProps<{
-  base64String?: string
-  title?: string
-  fileName?: string
-  disabled?: boolean
-}>()
-
-const emit = defineEmits(['closeDialog'])
-const base64 = ref(props.base64String)
-const alert = useAlert()
-
-const generateUniqueId = (): string => {
-  const uniqueId: string = uid()
-  return props.fileName ? `${props.fileName}` : uniqueId
-}
-
-const downloadPdf = (): void => {
-  const byteString = atob(props.base64String || '')
-  const byteArray = new Uint8Array(byteString.length)
-
-  for (let i = 0; i < byteString.length; i++) {
-    byteArray[i] = byteString.charCodeAt(i)
-  }
-
-  const blob = new Blob([byteArray], { type: 'application/pdf' })
-  const link = URL.createObjectURL(blob)
-  const anchorElement = document.createElement('a')
-  anchorElement.style.display = 'none'
-  anchorElement.href = link
-  anchorElement.download = `${generateUniqueId()}.pdf`
-
-  document.body.appendChild(anchorElement)
-  anchorElement.click()
-  URL.revokeObjectURL(link)
-  document.body.removeChild(anchorElement)
-  base64.value = ''
-}
-
-const printPdf = () => {
-  printJS({
-    printable: props.base64String,
-    type: 'pdf',
-    base64: true,
-    onPrintDialogClose: endLoadPdf,
-    onError: (error: any) => {
-      alert?.addAlert({ message: error, alertType: 'error' })
-    },
-  })
-  base64.value = ''
-}
-
-const endLoadPdf = () => {
-  emit('closeDialog', false)
-  base64.value = ''
-}
-
-const isMobile = computed(() => {
-  if (/Android|Mobi|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Macintosh/i.test(navigator.userAgent)) {
-    return true
-  }
-})
-</script>
-
-<template>
-  <v-card>
-    <v-toolbar density="compact">
-      <v-toolbar-title>{{ props.title }}</v-toolbar-title>
-      <v-spacer />
-      <v-btn
-        v-if="!isMobile"
-        icon="mdi mdi-printer"
-        variant="plain"
-        @click="printPdf"
-      />
-      <v-btn
-        v-if="!props.disabled"
-        icon="mdi mdi-download"
-        variant="plain"
-        @click="downloadPdf"
-      />
-      <v-btn
-        icon="mdi mdi-close"
-        variant="plain"
-        @click="endLoadPdf"
-      />
-    </v-toolbar>
-    <v-card-text class="justify-center">
-      <PDF
-        :show-progress="true"
-        pdf-width="100%"
-        :src="base64"
-        :show-page-tooltip="false"
-        :show-back-to-top-btn="false"
-      />
-    </v-card-text>
-  </v-card>
-</template>
+<script setup lang="ts">
+import PDF from 'pdf-vue3'
+import { uid } from 'uid'
+import printJS from 'print-js'
+import { ref, computed } from 'vue'
+import { useAlert } from '../../composables/alert'
+
+const props = defineProps<{
+  base64String?: string
+  title?: string
+  fileName?: string
+  disabled?: boolean
+}>()
+
+const emit = defineEmits(['closeDialog'])
+const base64 = ref(props.base64String)
+const alert = useAlert()
+
+const generateUniqueId = (): string => {
+  const uniqueId: string = uid()
+  return props.fileName ? `${props.fileName}` : uniqueId
+}
+
+const downloadPdf = (): void => {
+  const byteString = atob(props.base64String || '')
+  const byteArray = new Uint8Array(byteString.length)
+
+  for (let i = 0; i < byteString.length; i++) {
+    byteArray[i] = byteString.charCodeAt(i)
+  }
+
+  const blob = new Blob([byteArray], { type: 'application/pdf' })
+  const link = URL.createObjectURL(blob)
+  const anchorElement = document.createElement('a')
+  anchorElement.style.display = 'none'
+  anchorElement.href = link
+  anchorElement.download = `${generateUniqueId()}.pdf`
+
+  document.body.appendChild(anchorElement)
+  anchorElement.click()
+  URL.revokeObjectURL(link)
+  document.body.removeChild(anchorElement)
+  base64.value = ''
+}
+
+const printPdf = () => {
+  printJS({
+    printable: props.base64String,
+    type: 'pdf',
+    base64: true,
+    onPrintDialogClose: endLoadPdf,
+    onError: (error: any) => {
+      alert?.addAlert({ message: error, alertType: 'error' })
+    },
+  })
+  base64.value = ''
+}
+
+const endLoadPdf = () => {
+  emit('closeDialog', false)
+  base64.value = ''
+}
+
+const isMobile = computed(() => {
+  if (/Android|Mobi|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Macintosh/i.test(navigator.userAgent)) {
+    return true
+  }
+})
+</script>
+
+<template>
+  <v-card>
+    <v-toolbar density="compact">
+      <v-toolbar-title>{{ props.title }}</v-toolbar-title>
+      <v-spacer />
+      <v-btn
+        v-if="!isMobile"
+        icon="mdi mdi-printer"
+        variant="plain"
+        @click="printPdf"
+      />
+      <v-btn
+        v-if="!props.disabled"
+        icon="mdi mdi-download"
+        variant="plain"
+        @click="downloadPdf"
+      />
+      <v-btn
+        icon="mdi mdi-close"
+        variant="plain"
+        @click="endLoadPdf"
+      />
+    </v-toolbar>
+    <v-card-text class="justify-center">
+      <PDF
+        :show-progress="true"
+        pdf-width="100%"
+        :src="base64"
+        :show-page-tooltip="false"
+        :show-back-to-top-btn="false"
+      />
+    </v-card-text>
+  </v-card>
+</template>

package/dist/runtime/composables/graphqlModel.d.ts

@@ -3,7 +3,10 @@ import { type GraphqlModelConfigProps } from './graphqlModelOperation';
 export interface HeaderProps {
     headers?: any[];
 }
-export type GraphqlModelProps = GraphqlModelConfigProps & Partial<HeaderProps>;
+export interface InitialDataProps {
+    initialData?: Record<string, any>;
+}
+export type GraphqlModelProps = GraphqlModelConfigProps & Partial<HeaderProps> & Partial<InitialDataProps>;
 export declare function useGraphqlModel<T extends GraphqlModelProps>(props: T): {
     items: import("vue").Ref<Record<string, any>[]>;
     itemsLength: import("vue").Ref<number>;

package/dist/runtime/composables/graphqlModel.mjs

@@ -63,7 +63,7 @@ export function useGraphqlModel(props) {
   function createItem(item, callback, importing = false) {
     isLoading.value = true;
     return operationCreate.value?.call(fields.value, { input: item }).then((result) => {
-      if (canServerPageable) {
+      if (canServerPageable.value) {
         if (!importing)
           loadItems(currentOptions.value);
       } else
@@ -81,7 +81,7 @@ export function useGraphqlModel(props) {
     isLoading.value = true;
     const importPromise = [];
     importItems2.forEach((item) => {
-      const eachPromise = createItem(item, void 0, true);
+      const eachPromise = createItem(Object.assign({}, props.initialData, item), void 0, true);
       if (eachPromise)
         importPromise.push(eachPromise);
     });
@@ -95,7 +95,7 @@ export function useGraphqlModel(props) {
   function updateItem(item, callback) {
     isLoading.value = true;
     return operationUpdate.value?.call(fields.value, { input: item }).then((result) => {
-      if (canServerPageable)
+      if (canServerPageable.value)
         loadItems(currentOptions.value);
       else {
         const index = items.value.findIndex((item2) => item2[props.modelKey || "id"] === result[props.modelKey || "id"]);
@@ -124,14 +124,14 @@ export function useGraphqlModel(props) {
   }
   function loadItems(options) {
     currentOptions.value = options;
-    if (canServerPageable) {
+    if (canServerPageable.value) {
       const pageableVariable = {
         page: options.page,
         perPage: options.itemsPerPage,
         sortBy: options.sortBy
       };
       isLoading.value = true;
-      operationReadPageable.value?.call([{ data: fields.value }, "meta"], Object.assign(props.modelBy || {}, { pageable: pageableVariable })).then((result) => {
+      operationReadPageable.value?.call([{ data: fields.value }, "meta"], Object.assign({}, props.modelBy, { pageable: pageableVariable })).then((result) => {
         items.value = result.data;
         itemsLength.value = result.meta.totalItems;
       }).catch((error) => {

package/dist/runtime/composables/graphqlModelOperation.mjs

@@ -7,6 +7,9 @@ export function useGraphqlModelOperation(props) {
   function lowercaseFirstLetter(string) {
     return string?.charAt(0).toLowerCase() + string?.slice(1);
   }
+  const computedModelName = computed(() => {
+    return props.modelName.split("By")[0].trim();
+  });
   const operationCreate = computed(() => {
     if (props.operationCreate) {
       if (typeof props.operationCreate === "string") {
@@ -16,7 +19,7 @@ export function useGraphqlModelOperation(props) {
         return props.operationCreate;
       }
     }
-    return graphqlOperation["create" + capitalizeFirstLetter(props.modelName)];
+    return graphqlOperation["create" + capitalizeFirstLetter(computedModelName.value)];
   });
   const operationUpdate = computed(() => {
     if (props.operationUpdate) {
@@ -27,7 +30,7 @@ export function useGraphqlModelOperation(props) {
         return props.operationUpdate;
       }
     }
-    return graphqlOperation["update" + capitalizeFirstLetter(props.modelName)];
+    return graphqlOperation["update" + capitalizeFirstLetter(computedModelName.value)];
   });
   const operationDelete = computed(() => {
     if (props.operationDelete) {
@@ -38,7 +41,7 @@ export function useGraphqlModelOperation(props) {
         return props.operationDelete;
       }
     }
-    return graphqlOperation["delete" + capitalizeFirstLetter(props.modelName)];
+    return graphqlOperation["delete" + capitalizeFirstLetter(computedModelName.value)];
   });
   const operationRead = computed(() => {
     if (props.operationRead) {
@@ -71,7 +74,7 @@ export function useGraphqlModelOperation(props) {
         return props.operationSearch;
       }
     }
-    return graphqlOperation["search" + capitalizeFirstLetter(props.modelName)];
+    return graphqlOperation["search" + capitalizeFirstLetter(computedModelName.value)];
   });
   return { operationCreate, operationUpdate, operationDelete, operationRead, operationReadPageable, operationSearch };
 }

package/dist/runtime/labs/Calendar.vue

@@ -1,99 +1,99 @@
-<script lang="ts" setup>
-import FullCalendar from '@fullcalendar/vue3'
-import dayGridPlugin from '@fullcalendar/daygrid'
-import timeGridPlugin from '@fullcalendar/timegrid'
-import listPlugin from '@fullcalendar/list'
-import interactionPlugin from '@fullcalendar/interaction'
-import { ref, computed, withDefaults } from 'vue'
-import { type CalendarOptions } from '@fullcalendar/core'
-
-type Event = {
-  id: string | undefined
-  title: string
-  start: string // YYYY-MM-DD | YYYY-MM-DD HH:mm:ss
-  end: string // YYYY-MM-DD
-  color: string
-  detail?: string
-  props: Record<string, any> | any[]
-}
-
-interface CalendarProps {
-  modelValue: Event[]
-  locale?: 'th' | 'en'
-  toolBarLeft?: string
-  toolBarCenter?: string
-  toolBarRight?: string
-  height?: string | number
-  selectViewDay?: string
-  mode: 'dayGridMonth' | 'timeGridDay'
-}
-
-const props = withDefaults(defineProps<CalendarProps>(), {
-  locale: 'th',
-  height: 1200,
-  toolBarLeft: 'today prev,next',
-  toolBarCenter: 'title',
-  toolBarRight: 'timeGridDay,timeGridWeek,dayGridMonth',
-  mode: 'dayGridMonth',
-})
-
-const emit = defineEmits(['select', 'dialog'])
-
-const buttonText = computed(() => {
-  return {
-    today: props.locale === 'th' ? 'วันนี้' : 'today',
-    month: props.locale === 'th' ? 'เดือน' : 'month',
-    week: props.locale === 'th' ? 'สัปดาห์' : 'week',
-    day: props.locale === 'th' ? 'วัน' : 'day',
-    list: props.locale === 'th' ? 'รายการ' : 'list',
-    year: props.locale === 'th' ? 'ปี' : 'year',
-  }
-})
-
-const calendarRef = ref<InstanceType<typeof FullCalendar>>()
-const dateViewDay = ref({ date: '', props: {} })
-
-const handleDateClick = (info: any) => {
-  emit('select', info.event)
-}
-
-const handleEventClick = (info: any) => {
-  emit('dialog', true)
-  emit('select', info.event)
-}
-
-const eventContentDay = (arg: any) => {
-  const list = document.createElement('div')
-  list.innerHTML = document.getElementById(arg.event.id.toString())?.innerHTML || ''
-  return { domNodes: [list] }
-}
-
-// @ts-expect-error
-const calendarOptions = ref<CalendarOptions>({
-  plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
-  initialView: props.mode,
-  locale: props.locale,
-  dayMaxEvents: true,
-  timeZone: 'UTC',
-  headerToolbar: {
-    left: props.toolBarLeft,
-    center: props.toolBarCenter,
-    right: props.toolBarRight,
-  },
-  buttonText: buttonText.value,
-  events: props.modelValue,
-  initialDate: props.selectViewDay,
-  dateClick: handleDateClick,
-  eventClick: handleEventClick,
-  nowIndicator: true,
-  height: props.height,
-  eventColor: '#378006',
-})
-</script>
-
-<template>
-  <FullCalendar
-    ref="calendarRef"
-    :options="calendarOptions as CalendarOptions"
-  />
-</template>
+<script lang="ts" setup>
+import FullCalendar from '@fullcalendar/vue3'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import timeGridPlugin from '@fullcalendar/timegrid'
+import listPlugin from '@fullcalendar/list'
+import interactionPlugin from '@fullcalendar/interaction'
+import { ref, computed, withDefaults } from 'vue'
+import { type CalendarOptions } from '@fullcalendar/core'
+
+type Event = {
+  id: string | undefined
+  title: string
+  start: string // YYYY-MM-DD | YYYY-MM-DD HH:mm:ss
+  end: string // YYYY-MM-DD
+  color: string
+  detail?: string
+  props: Record<string, any> | any[]
+}
+
+interface CalendarProps {
+  modelValue: Event[]
+  locale?: 'th' | 'en'
+  toolBarLeft?: string
+  toolBarCenter?: string
+  toolBarRight?: string
+  height?: string | number
+  selectViewDay?: string
+  mode: 'dayGridMonth' | 'timeGridDay'
+}
+
+const props = withDefaults(defineProps<CalendarProps>(), {
+  locale: 'th',
+  height: 1200,
+  toolBarLeft: 'today prev,next',
+  toolBarCenter: 'title',
+  toolBarRight: 'timeGridDay,timeGridWeek,dayGridMonth',
+  mode: 'dayGridMonth',
+})
+
+const emit = defineEmits(['select', 'dialog'])
+
+const buttonText = computed(() => {
+  return {
+    today: props.locale === 'th' ? 'วันนี้' : 'today',
+    month: props.locale === 'th' ? 'เดือน' : 'month',
+    week: props.locale === 'th' ? 'สัปดาห์' : 'week',
+    day: props.locale === 'th' ? 'วัน' : 'day',
+    list: props.locale === 'th' ? 'รายการ' : 'list',
+    year: props.locale === 'th' ? 'ปี' : 'year',
+  }
+})
+
+const calendarRef = ref<InstanceType<typeof FullCalendar>>()
+const dateViewDay = ref({ date: '', props: {} })
+
+const handleDateClick = (info: any) => {
+  emit('select', info.event)
+}
+
+const handleEventClick = (info: any) => {
+  emit('dialog', true)
+  emit('select', info.event)
+}
+
+const eventContentDay = (arg: any) => {
+  const list = document.createElement('div')
+  list.innerHTML = document.getElementById(arg.event.id.toString())?.innerHTML || ''
+  return { domNodes: [list] }
+}
+
+// @ts-expect-error
+const calendarOptions = ref<CalendarOptions>({
+  plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
+  initialView: props.mode,
+  locale: props.locale,
+  dayMaxEvents: true,
+  timeZone: 'UTC',
+  headerToolbar: {
+    left: props.toolBarLeft,
+    center: props.toolBarCenter,
+    right: props.toolBarRight,
+  },
+  buttonText: buttonText.value,
+  events: props.modelValue,
+  initialDate: props.selectViewDay,
+  dateClick: handleDateClick,
+  eventClick: handleEventClick,
+  nowIndicator: true,
+  height: props.height,
+  eventColor: '#378006',
+})
+</script>
+
+<template>
+  <FullCalendar
+    ref="calendarRef"
+    :options="calendarOptions as CalendarOptions"
+  />
+</template>