@ramathibodi/nuxt-commons 0.0.6 → 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.6"
+  "version": "0.0.7"
 }

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/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/package.json

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