@ramathibodi/nuxt-commons 0.0.5 → 0.0.7

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.5"
+  "version": "0.0.7"
 }

package/dist/module.mjs

@@ -17,7 +17,7 @@ const module = defineNuxtModule({
       pathPrefix: true,
       global: true
     });
-    addImportsDir(resolver.resolve("runtime/composables"));
+    addImportsDir(resolver.resolve("runtime/composables/**"));
     addTypeTemplate({
       filename: "types/modules.d.ts",
       getContents: () => `

package/dist/runtime/components/Alert.vue

@@ -32,7 +32,7 @@ watch(() => alert?.hasAlert(), (hasAlert) => {
       v-if="currentItem"
       v-model="isAlertOpen"
       :timeout="timeout"
-      location="top"
+      location="center"
       multi-line
       variant="text"
       @update:model-value="renewAlert()"

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

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

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

@@ -0,0 +1,36 @@
+<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/utils/datetime.mjs

@@ -68,7 +68,7 @@ export const Datetime = () => ({
   setDateTime: function(inputDate, locale = "EN") {
     if (inputDate.isValid) {
       if (inputDate.year - DateTime.now().year > 300)
-        inputDate.set({ year: inputDate.year - 543 });
+        inputDate = inputDate.set({ year: inputDate.year - 543 });
     }
     this.luxonDateTime = inputDate;
     if (locale == "TH")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramathibodi/nuxt-commons",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "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": {