@ramathibodi/nuxt-commons 0.0.7 → 0.0.9

package/README.md

@@ -67,6 +67,15 @@ npm run test:watch
 npm run release
 ```
 
+## NPM PUBLISH
+```bash
+1. ตรวจสอบ source code, ตรวจสอบ Branch ว่าเป็น master แล้ว จากนั้นตรวจสอบ version ของ npm ว่ามีการเปลี่ยนและไม่ชนกับ version บน npm
+2. npm run dev:build
+3. npm publish --access public
+4. set token ใน link ที่ npm ให้มา
+5. เสร็จสิ้น
+```
+
 <!-- Badges -->
 [npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
 [npm-version-href]: https://npmjs.com/package/my-module

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.0.7"
+  "version": "0.0.9"
 }

package/dist/runtime/components/Alert.vue

@@ -29,23 +29,23 @@ watch(() => alert?.hasAlert(), (hasAlert) => {
 
 <template>
   <VSnackbar
-      v-if="currentItem"
-      v-model="isAlertOpen"
-      :timeout="timeout"
-      location="center"
-      multi-line
-      variant="text"
-      @update:model-value="renewAlert()"
+    v-if="currentItem"
+    v-model="isAlertOpen"
+    :timeout="timeout"
+    location="center"
+    multi-line
+    variant="text"
+    @update:model-value="renewAlert()"
   >
     <!-- @vue-expected-error Type conversion problem -->
     <VAlert
-        v-model="isAlertOpen"
-        closable
-        :type="currentItem.alertType"
-        elevation="2"
-        theme="dark"
-        variant="flat"
-        @click:close="renewAlert()"
+      v-model="isAlertOpen"
+      closable
+      :type="currentItem.alertType"
+      elevation="2"
+      theme="dark"
+      variant="flat"
+      @click:close="renewAlert()"
     >
       {{ currentItem.statusCode ? currentItem.statusCode + ' ' : '' }} {{ currentItem.message }} {{ !isEmpty(currentItem.data) ? currentItem.data : '' }}
     </VAlert>

package/dist/runtime/components/Camera.vue

@@ -93,23 +93,36 @@ onMounted(() => {
     </v-card-title>
     <v-card-text class="d-flex justify-center">
       <video
-          ref="videoRef"
-          autoplay
-          style="max-width: 1024px"
+        ref="videoRef"
+        autoplay
+        style="max-width: 1024px"
       />
       <div style="z-index: 2000; position: relative; bottom: -410px; left: -80px; height: 50px">
         <FileBtn
-            accept="image/*"
-            icon="mdi mdi-image-plus"
-            icon-only
-            @update:model-value="loadImageFile"
+          accept="image/*"
+          icon="mdi mdi-image-plus"
+          icon-only
+          @update:model-value="loadImageFile"
         />
       </div>
     </v-card-text>
     <v-card-actions class="d-flex justify-center">
-      <v-btn icon size="x-large" variant="tonal" @click="captureImage()">
-        <v-icon icon="fa:fa-solid fa-circle" size="x-large"></v-icon>
-        <v-tooltip activator="parent" location="top">ถ่ายภาพ</v-tooltip>
+      <v-btn
+        icon
+        size="x-large"
+        variant="tonal"
+        @click="captureImage()"
+      >
+        <v-icon
+          icon="fa:fa-solid fa-circle"
+          size="x-large"
+        />
+        <v-tooltip
+          activator="parent"
+          location="top"
+        >
+          ถ่ายภาพ
+        </v-tooltip>
       </v-btn>
     </v-card-actions>
   </v-card>

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import PDF from 'pdf-vue3';
-import { uid } from 'uid';
-import { useAlert } from '../../composables/alert'
+import PDF from 'pdf-vue3'
+import { uid } from 'uid'
 import printJS from 'print-js'
-import {ref, computed} from 'vue'
+import { ref, computed } from 'vue'
+import { useAlert } from '../../composables/alert'
 
 const props = defineProps<{
   base64String?: string
@@ -40,7 +40,7 @@ const downloadPdf = (): void => {
   anchorElement.click()
   URL.revokeObjectURL(link)
   document.body.removeChild(anchorElement)
-  base64.value = ""
+  base64.value = ''
 }
 
 const printPdf = () => {
@@ -53,16 +53,16 @@ const printPdf = () => {
       alert?.addAlert({ message: error, alertType: 'error' })
     },
   })
-  base64.value = ""
+  base64.value = ''
 }
 
 const endLoadPdf = () => {
   emit('closeDialog', false)
-  base64.value = ""
+  base64.value = ''
 }
 
 const isMobile = computed(() => {
-  if(/Android|Mobi|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Macintosh/i.test(navigator.userAgent)){
+  if (/Android|Mobi|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Macintosh/i.test(navigator.userAgent)) {
     return true
   }
 })
@@ -74,31 +74,31 @@ const isMobile = computed(() => {
       <v-toolbar-title>{{ props.title }}</v-toolbar-title>
       <v-spacer />
       <v-btn
-          v-if="!isMobile"
-          icon="mdi mdi-printer"
-          variant="plain"
-          @click="printPdf"
+        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-if="!props.disabled"
+        icon="mdi mdi-download"
+        variant="plain"
+        @click="downloadPdf"
       />
       <v-btn
-          icon="mdi mdi-close"
-          variant="plain"
-          @click="endLoadPdf"
+        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"
-          :showPageTooltip="false"
-          :show-back-to-top-btn="false"
+        :show-progress="true"
+        pdf-width="100%"
+        :src="base64"
+        :show-page-tooltip="false"
+        :show-back-to-top-btn="false"
       />
     </v-card-text>
   </v-card>
-</template>
+</template>

package/dist/runtime/components/SplitterPanel.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+import { VCard } from 'vuetify/components/VCard'
+const isResizing = ref(false);
+const pane1Width = ref('50%');
+interface Props extends /* @vue-ignore */ InstanceType<typeof VCard['$props']>{
+height : number | string
+}
+const props = defineProps<Props>()
+
+const startResize = () => {
+  isResizing.value = true;
+};
+
+const stopResize = () => {
+  isResizing.value = false;
+};
+
+const resize = (event: MouseEvent) => {
+  if (isResizing.value) {
+    const container = document.querySelector('.split-pane') as HTMLElement;
+    const containerRect = container.getBoundingClientRect();
+    const newWidth = event.clientX - containerRect.left;
+    pane1Width.value = `${(newWidth / containerRect.width) * 100}%`;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('mousemove', resize);
+  document.addEventListener('mouseup', stopResize);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('mousemove', resize);
+  document.removeEventListener('mouseup', stopResize);
+});
+</script>
+
+<template>
+  <v-card :="$attrs">
+    <v-sheet border :height="height">
+      <div class="split-pane">
+        <div class="pane" :style="{ width: pane1Width }">
+          <slot name="left"></slot>
+        </div>
+        <v-divider :thickness="3" vertical class="cursor-move" @mousedown="startResize"></v-divider>
+        <div class="pane" :style="{ width: `calc(100% - ${pane1Width})` }">
+          <slot name="right"></slot>
+        </div>
+      </div>
+    </v-sheet>
+
+  </v-card>
+
+</template>
+
+<style scoped>
+.split-pane{height:100%;overflow:hidden;width:100%}.pane,.split-pane{display:flex}
+</style>

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

@@ -182,6 +182,6 @@ watch(combinedBase64String, (newValue, oldValue) => {
     :accept="props.accept"
     :multiple="props.multiple"
     style="display: none"
-    @update:modelValue="addFiles"
+    @update:model-value="addFiles"
   />
 </template>

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

@@ -127,7 +127,7 @@ onBeforeUnmount(() => {
           <v-icon>fa-solid fa-trash</v-icon>
         </v-btn>
         <v-menu>
-          <template #activator="{ props : activatorProps }">
+          <template #activator="{ props: activatorProps }">
             <v-btn
               :color="selectedColor"
               :icon="true"
@@ -141,11 +141,11 @@ onBeforeUnmount(() => {
               <v-col class="text-center">
                 <v-avatar
                   v-for="(color, index) in colorOptions"
+                  :key="index"
                   :color="color"
                   :value="color"
                   class="mr-1"
                   @click="changePenColor(color)"
-                  :key="index"
                 >
                   <v-icon color="white">
                     {{ selectedColor === color ? 'fa-solid fa-check' : '' }}

package/dist/runtime/components/form/images/CameraCrop.vue

@@ -20,7 +20,7 @@ const handleAddImage = (image: string) => {
 
 const handleCloseDialog = () => {
   isDialogOpen.value = false
-  emit("openCamera", true);
+  emit('openCamera', true)
   emit('closeDialog', false)
 }
 

package/dist/runtime/components/form/images/Edit.vue

@@ -56,13 +56,13 @@ const handleCrop = () => {
   if (croppedCanvas) {
     const dataURL = croppedCanvas.toDataURL()
     emit('update:modelValue', dataURL)
-    emit("closeDialog", false);
+    emit('closeDialog', false)
   }
 }
 
 const resetCrop = () => {
-  emit("closeDialog", false);
-  emit("openCamera", true);
+  emit('closeDialog', false)
+  emit('openCamera', true)
 }
 
 const close = () => {

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

@@ -1,28 +1,25 @@
 <script lang="ts" setup>
-
-
 interface Props {
-  label: string;
-  value?: string | String | null | undefined;
+  label: string
+  value?: string | string | null | undefined
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  label: '', value: ''
-});
-
+  label: '', value: '',
+})
 </script>
+
 <template>
   <v-card variant="flat">
     <VCardSubtitle class="ma-0 pa-0">
       <slot name="label">
         {{ label }}
       </slot>
-      </VCardSubtitle>
+    </VCardSubtitle>
     <VCardText class="text-h6 pa-0 mb-2">
       <slot name="value">
         {{ value }}
       </slot>
-
     </VCardText>
   </v-card>
 </template>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import {computed} from "vue";
+import { computed } from 'vue'
+
 interface Props {
   modelValue: string
   variant?: 'mobilePhone' | 'homePhone' | 'citizenId' | 'creditCard'
@@ -12,25 +13,26 @@ const props = withDefaults(defineProps<Props>(), {
 
 const labelMask = computed(() => {
   if (!props.hideContent) {
-    if(props.variant == 'mobilePhone') return props.modelValue.length == 10 ? `${props.modelValue.substring(0,3)}-${props.modelValue.substring(3,6)}-${props.modelValue.substring(6,10)}` : "invalid format"
-    if(props.variant == 'homePhone') return props.modelValue.length == 9 ? `${props.modelValue.substring(0,2)}-${props.modelValue.substring(2,5)}-${props.modelValue.substring(5,9)}` : "invalid format"
-    if(props.variant == 'citizenId') return props.modelValue.length == 13 ? `${props.modelValue.substring(0,1)}-${props.modelValue.substring(1,5)}-${props.modelValue.substring(5,10)}-${props.modelValue.substring(10,12)}-${props.modelValue.substring(12,13)}` : "invalid format"
-    if(props.variant == 'creditCard') return props.modelValue.length == 16 ? `${props.modelValue.substring(0,4)}-${props.modelValue.substring(4,8)}-${props.modelValue.substring(8,12)}-${props.modelValue.substring(12,16)}` : "invalid format"
+    if (props.variant == 'mobilePhone') return props.modelValue.length == 10 ? `${props.modelValue.substring(0, 3)}-${props.modelValue.substring(3, 6)}-${props.modelValue.substring(6, 10)}` : 'invalid format'
+    if (props.variant == 'homePhone') return props.modelValue.length == 9 ? `${props.modelValue.substring(0, 2)}-${props.modelValue.substring(2, 5)}-${props.modelValue.substring(5, 9)}` : 'invalid format'
+    if (props.variant == 'citizenId') return props.modelValue.length == 13 ? `${props.modelValue.substring(0, 1)}-${props.modelValue.substring(1, 5)}-${props.modelValue.substring(5, 10)}-${props.modelValue.substring(10, 12)}-${props.modelValue.substring(12, 13)}` : 'invalid format'
+    if (props.variant == 'creditCard') return props.modelValue.length == 16 ? `${props.modelValue.substring(0, 4)}-${props.modelValue.substring(4, 8)}-${props.modelValue.substring(8, 12)}-${props.modelValue.substring(12, 16)}` : 'invalid format'
 
-    const middlePart = 'x'.repeat(props.modelValue.length - 6);
-    return `${props.modelValue.substring(0,3)}${middlePart}${props.modelValue.slice(-3)}`
-  } else {
-    if(props.variant == 'mobilePhone') return props.modelValue.length == 10 ? `${props.modelValue.substring(0,2)}x-xxx-${props.modelValue.substring(6,10)}` : "invalid format"
-    if(props.variant == 'homePhone') return props.modelValue.length == 9 ? `${props.modelValue.substring(0,2)}-xxx-${props.modelValue.substring(5,9)}` : "invalid format"
-    if(props.variant == 'citizenId') return props.modelValue.length == 13 ? `${props.modelValue.substring(0,1)}-xxxx-xxxxx-${props.modelValue.substring(10,12)}-${props.modelValue.substring(12,13)}` : "invalid format"
-    if(props.variant == 'creditCard') return props.modelValue.length == 16 ? `xxxx-xxxx-xxxx-${props.modelValue.substring(12,16)}` : "invalid format"
+    const middlePart = 'x'.repeat(props.modelValue.length - 6)
+    return `${props.modelValue.substring(0, 3)}${middlePart}${props.modelValue.slice(-3)}`
+  }
+  else {
+    if (props.variant == 'mobilePhone') return props.modelValue.length == 10 ? `${props.modelValue.substring(0, 2)}x-xxx-${props.modelValue.substring(6, 10)}` : 'invalid format'
+    if (props.variant == 'homePhone') return props.modelValue.length == 9 ? `${props.modelValue.substring(0, 2)}-xxx-${props.modelValue.substring(5, 9)}` : 'invalid format'
+    if (props.variant == 'citizenId') return props.modelValue.length == 13 ? `${props.modelValue.substring(0, 1)}-xxxx-xxxxx-${props.modelValue.substring(10, 12)}-${props.modelValue.substring(12, 13)}` : 'invalid format'
+    if (props.variant == 'creditCard') return props.modelValue.length == 16 ? `xxxx-xxxx-xxxx-${props.modelValue.substring(12, 16)}` : 'invalid format'
 
-    const middlePart = 'x'.repeat(props.modelValue.length - 6);
-    return `${props.modelValue.substring(0,3)}${middlePart}${props.modelValue.slice(-3)}`
+    const middlePart = 'x'.repeat(props.modelValue.length - 6)
+    return `${props.modelValue.substring(0, 3)}${middlePart}${props.modelValue.slice(-3)}`
   }
 })
 </script>
 
 <template>
-{{labelMask}}
+  {{ labelMask }}
 </template>

package/dist/runtime/composables/utils/validation.d.ts

@@ -13,6 +13,7 @@ export declare function useRules(): {
     telephone: (customError?: string) => (value: any) => string | true;
     email: (customError?: string) => (value: any) => string | true;
     regex: (regex: string, customError?: string) => (value: any) => string | true;
+    idcard: (customError?: string) => (value: any) => string | true;
     rules: import("vue").Ref<{
         require: (customError?: string) => (value: any) => string | true;
         requireIf: (conditionIf: boolean, customError?: string) => (value: any) => string | true;
@@ -28,5 +29,6 @@ export declare function useRules(): {
         telephone: (customError?: string) => (value: any) => string | true;
         email: (customError?: string) => (value: any) => string | true;
         regex: (regex: string, customError?: string) => (value: any) => string | true;
+        idcard: (customError?: string) => (value: any) => string | true;
     }>;
 };

package/dist/runtime/composables/utils/validation.mjs

@@ -16,6 +16,7 @@ export function useRules() {
   const telephone = (customError = "Invalid telephone number") => (value) => condition(!value || /^(?:\s*(?:0[23457][0-9]{7}|0[689][0-9]{8})(?:#[0-9]{1,5})?\s*(?:\([^()]+\))?\s*(?:,(?=.+))?)*$/.test(value), customError);
   const email = (customError = "Invalid email address") => (value) => condition(!value || /^([a-zA-Z0-9_\-.]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,5})$/.test(value), customError);
   const regex = (regex2, customError = "Invalid format") => (value) => condition(!value || new RegExp(regex2).test(value), customError);
+  const idcard = (customError = "Invalid idcard") => (value) => condition(/^\d{13}$/.test(value) && (11 - [...value].slice(0, 12).reduce((sum, n, i) => sum + +n * (13 - i), 0) % 11) % 10 === +value[12], customError);
   const rules = ref({
     require,
     requireIf,
@@ -30,7 +31,8 @@ export function useRules() {
     lengthLess,
     telephone,
     email,
-    regex
+    regex,
+    idcard
   });
   return { rules, ...rules.value };
 }

package/dist/runtime/labs/Calendar.vue

@@ -68,7 +68,7 @@ const eventContentDay = (arg: any) => {
   return { domNodes: [list] }
 }
 
-// @ts-ignore
+// @ts-expect-error
 const calendarOptions = ref<CalendarOptions>({
   plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
   initialView: props.mode,

package/dist/runtime/utils/object.mjs

@@ -9,7 +9,7 @@ export function classAttributes(cls) {
   return Object.keys(new cls());
 }
 export function onlyAttributes(keys, object) {
-  let returnObject = cloneDeep(object);
+  const returnObject = cloneDeep(object);
   Object.keys(object).forEach((localKey) => {
     if (!keys.includes(localKey))
       delete returnObject[localKey];
@@ -17,7 +17,7 @@ export function onlyAttributes(keys, object) {
   return returnObject;
 }
 export function renameAttributes(object, mapper) {
-  let returnObject = cloneDeep(object);
+  const returnObject = cloneDeep(object);
   Object.keys(mapper).forEach((key) => {
     if (returnObject.hasOwnProperty(key)) {
       returnObject[mapper[key]] = cloneDeep(returnObject[key]);

package/package.json

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