@ramathibodi/nuxt-commons 0.0.6 → 0.0.8

package/README.md

@@ -6,7 +6,7 @@ Find and replace all on all files (CMD+SHIFT+F):
 - Package name: @ramahis/common-components
 -->
 
-# Ramahis Common Component
+# @ramathibodi/nuxt-commons
 
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
@@ -16,17 +16,17 @@ Find and replace all on all files (CMD+SHIFT+F):
 
 ## Quick Setup
 
-1. Add `@deverloprama/common-components` dependency to your project
+1. Add `'@ramathibodi/nuxt-commons'` dependency to your project
 
 ```bash
 # Using pnpm
-pnpm add -D @deverloprama/common-components
+pnpm add -D @ramathibodi/nuxt-commons
 
 # Using yarn
-yarn add --dev @deverloprama/common-components
+yarn add --dev @ramathibodi/nuxt-commons
 
 # Using npm
-npm install --save-dev @deverloprama/common-components
+npm install --save-dev @ramathibodi/nuxt-commons
 ```
 
 2. Add `my-module` to the `modules` section of `nuxt.config.ts`
@@ -34,7 +34,7 @@ npm install --save-dev @deverloprama/common-components
 ```js
 export default defineNuxtConfig({
   modules: [
-    '@deverloprama/common-components'
+    '@ramathibodi/nuxt-commons'
   ]
 })
 ```

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.0.6"
+  "version": "0.0.8"
 }

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="top"
-      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/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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  modelValue: string
+  variant?: 'mobilePhone' | 'homePhone' | 'citizenId' | 'creditCard'
+  hideContent?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  hideContent: false,
+})
+
+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'
+
+    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)}`
+  }
+})
+</script>
+
+<template>
+  {{ 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.6",
+  "version": "0.0.8",
   "description": "Ramathibodi Nuxt modules for common components",
   "repository": {
     "type": "git",
@@ -64,7 +64,7 @@
     "uid": "^2.0.2",
     "vue": "^3.4.25",
     "vue-signature-pad": "^3.0.2",
-    "vuetify": "^3.6.6",
+    "vuetify": "^3.6.8",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz"
   },
   "devDependencies": {