@ramathibodi/nuxt-commons 0.0.1

package/dist/runtime/labs/form/EditMobile.vue

@@ -0,0 +1,153 @@
+<script lang="ts" setup>
+import { ref, withDefaults } from 'vue';
+import FormPad from "../../components/form/Pad.vue";
+import { useAlert } from "../../composables/alert";
+import { Mask } from "maska";
+
+interface Props {
+  modelValue: number;
+  decimal?: number;
+  currency?: string;
+}
+
+const masksInput = new Mask({
+  mask: "###-###-N",
+  tokens: {
+    N: { pattern: /[0-9]/, multiple: true }
+  }
+});
+
+const alert = useAlert();
+const dialog = ref(false);
+const phone = ref();
+const typePhone = ref([]);
+const formPadTemplate = ref();
+const phoneNoField: any = ref(null);
+const objAddNew = ref({ phone: "", type: <any>[] });
+
+const listPhonesAll = ref([
+  { "phone": "082745855410101", "type": ["default"] },
+  { "phone": "0827196038", "type": null },
+  { "phone": "0956458547", "type": ["post", "receipt"] }
+]);
+
+const listPhonesType = ref([
+  { "id": "default", "name": "ค่าเริ่มต้น" },
+  { "id": "post", "name": "จัดส่งไปรษณีย์" },
+  { "id": "receipt", "name": "จัดส่งใบเสร็จ (e-receipt)" }
+]);
+
+const property = withDefaults(defineProps<Props>(), {
+  modelValue: 0,
+  decimal: 2,
+  currency: "",
+});
+
+const focusOnTextField = () => {
+  if (phoneNoField.value) {
+    phoneNoField.value.focus();
+  }
+};
+
+const mapTypeName = (id: string) => {
+  const item = listPhonesType.value.find(entry => entry.id === id);
+  return item ? item.name : undefined;
+};
+
+const mapPhoneCurrent = (phone: string) => {
+  const item = listPhonesAll.value.find(entry => entry.phone === phone);
+  return item ? item.phone : "";
+};
+
+const add = () => {
+  if (formPadTemplate.value.isValid) {
+    objAddNew.value.phone = phone.value.phone;
+    objAddNew.value.type = typePhone.value.length === 0 ? ["default"] : typePhone.value;
+
+    if (mapPhoneCurrent(objAddNew.value.phone) != "") {
+      focusOnTextField();
+      alert?.addAlert({ message: "เบอร์โทรศัพท์ซ้ำ กรุณาตรวจสอบ", alertType: 'error' });
+    } else {
+      dialog.value = false;
+      listPhonesAll.value.push(objAddNew.value);
+    }
+  }
+};
+
+const registerPhone = () => {
+  dialog.value = true;
+  phone.value = "";
+  typePhone.value = [];
+};
+</script>
+
+<template>
+  <v-row class="ma-5">
+    <v-col cols="4">
+      <div>
+        <v-card v-for="item in listPhonesAll" :key="item.phone"
+                class="mt-1"
+                variant="tonal"
+                width="auto"
+                :title="masksInput.masked(item.phone)"
+        >
+          <v-card-text class="pl-10">
+            <v-chip color="primary" v-for="itemType in item.type">{{ mapTypeName(itemType) }}</v-chip>
+          </v-card-text>
+          <template v-slot:prepend>
+            <v-icon icon="mdi mdi-phone"></v-icon>
+          </template>
+          <template v-slot:append>
+            <v-icon icon="mdi mdi-pencil"></v-icon>
+          </template>
+        </v-card>
+      </div>
+      <div class="mt-1">
+        <v-btn size="large" prepend-icon="mdi mdi-plus" color="primary" :block="true" @click="registerPhone">เพิ่มเบอร์โทรศัพท์ใหม่</v-btn>
+      </div>
+    </v-col>
+    <v-col cols="4">
+    </v-col>
+  </v-row>
+  <v-dialog v-model="dialog" width="550">
+    <v-card title="เบอร์โทรศัพท์ใหม่">
+      <template v-slot:prepend>
+        <v-icon icon="mdi mdi-phone-plus"></v-icon>
+      </template>
+      <template v-slot:append>
+        <v-icon icon="mdi mdi-close" @click="dialog = false"></v-icon>
+      </template>
+      <v-card-text>
+        <form-pad ref="formPadTemplate" v-model="phone">
+          <template v-slot:default="{ data, rules }">
+            <v-text-field
+                ref="phoneNoField"
+                color="primary"
+                label="เบอร์โทรศัพท์ (Phone Number)"
+                variant="underlined"
+                :rules="[rules.telephone('เบอร์โทรศัพท์ไม่ถูกต้อง'), rules.require()]"
+                v-model="data.phone"
+                :autofocus="true"
+            ></v-text-field>
+          </template>
+        </form-pad>
+        <v-chip-group
+            v-model="typePhone"
+            column
+            multiple
+            selected-class="text-primary"
+        >
+          <v-chip v-for="item in listPhonesType" :key="item.id" :value="item.id"
+                  filter
+                  variant="outlined"
+          >
+            {{ item.name }}
+          </v-chip>
+        </v-chip-group>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn color="primary" variant="flat" @click="add" :block="true">ยืนยัน</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>

package/dist/runtime/labs/form/TextFieldMask.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { VTextField } from 'vuetify/components/VTextField'
+import { type MaskaDetail, type MaskOptions, vMaska } from 'maska'
+
+export interface Props extends /* @vue-ignore */ InstanceType<typeof VTextField['$props']> {
+  type: 'eReceipt' | 'telephone'
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void
+}>()
+
+const computedMaskOption = computed<MaskOptions>(() => {
+  if (props.type == 'eReceipt') return { mask: '##-##-N', tokens: { N: { pattern: /[0-9]/, multiple: true } } }
+  if (props.type == 'telephone') return { mask: '###-###-####' }
+  return {}
+})
+
+function onMaska(event: CustomEvent<MaskaDetail>) {
+  emit('update:modelValue', event.detail.unmasked)
+}
+</script>
+
+<template>
+  <v-text-field
+    v-maska:[computedMaskOption]
+    v-bind="$attrs"
+    @maska="onMaska"
+  >
+    <template
+      v-for="(_, slot, index) in ($slots as {})"
+      :key="index"
+      #[slot]="scope"
+    >
+      <slot
+        :name="slot"
+        v-bind="{ scope }"
+      />
+    </template>
+  </v-text-field>
+</template>

package/dist/runtime/plugins/vueSignaturePad.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/vueSignaturePad.mjs

@@ -0,0 +1,5 @@
+import { defineNuxtPlugin } from "nuxt/app";
+import VueSignaturePad from "vue-signature-pad";
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(VueSignaturePad);
+});

package/dist/runtime/types/alert.d.ts

@@ -0,0 +1,11 @@
+export interface AlertItem {
+  message: string
+  statusCode?: number
+  statusMessage?: string
+  alertLocation?: string
+  alertType?: 'error' | 'success' | 'warning' | 'info' | undefined
+  alertIcon?: string
+  alertDateTime?: number
+  alertExpireIn?: number
+  data?: object
+}

package/dist/runtime/types/modules.d.ts

@@ -0,0 +1,5 @@
+declare module 'painterro';
+declare module '@zxing/browser'
+declare module 'vue-signature-pad'
+declare module 'accounting'
+declare module 'pdf-vue3'

package/dist/runtime/utils/datetime.d.ts

@@ -0,0 +1,25 @@
+import { type DateObjectUnits, type DateTimeFormatOptions, DateTime } from 'luxon';
+export type supportedLocale = 'EN' | 'TH';
+export type dateFormat = 'tinyDate' | 'monthShortDate' | 'shortDate' | 'longDate';
+export type dateTimeFormat = 'tinyDateTime' | 'shortDateTime' | 'longDateTime';
+export declare const Datetime: () => {
+    luxonDateTime: DateTime<false>;
+    fromString: (dateTime: string | null, formatDate?: string, locale?: supportedLocale) => any;
+    fromStringTime: (time: string | null, formatTime?: string, locale?: supportedLocale) => any;
+    fromISO: (dateTime: string, locale?: supportedLocale) => any;
+    fromObject: (dateTime: DateObjectUnits, locale?: supportedLocale) => any;
+    setDateTime: (inputDate: DateTime, locale?: supportedLocale) => any;
+    toFormat: (format: string, locale?: supportedLocale) => any;
+    toISO: () => any;
+    toLocaleFormat: (locale: supportedLocale, format: DateTimeFormatOptions) => any;
+    toTinyDate: (locale?: supportedLocale) => any;
+    toMonthShortDate: (locale?: supportedLocale) => any;
+    toShortDate: (locale?: supportedLocale) => any;
+    toLongDate: (locale?: supportedLocale) => any;
+    toTinyDateTime: (locale?: supportedLocale) => any;
+    toShortDateTime: (locale?: supportedLocale) => any;
+    toLongDateTime: (locale?: supportedLocale) => any;
+    now: () => any;
+};
+export declare function verifyDateFormat(date: string): string | null;
+export declare function returnVerifyDate(date: string): string | null;

package/dist/runtime/utils/datetime.mjs

@@ -0,0 +1,166 @@
+import { DateTime } from "luxon";
+export const Datetime = () => ({
+  luxonDateTime: DateTime.invalid("Uninitialized"),
+  fromString: function(dateTime, formatDate, locale = "EN") {
+    if (!dateTime)
+      return this.setDateTime(DateTime.invalid("No datetime string provided"), locale);
+    let inputDate = void 0;
+    if (formatDate)
+      inputDate = DateTime.fromFormat(dateTime, formatDate, { locale });
+    if (!inputDate?.isValid)
+      inputDate = DateTime.fromISO(dateTime, { locale });
+    if (!inputDate?.isValid) {
+      const formats = [
+        "ddMMyyyy",
+        "ddMMyy",
+        "dd/MM/yyyy",
+        "yyyyMMdd",
+        "dd/MM/yyyy",
+        "dd/M/yyyy",
+        "d/MM/yyyy",
+        "d/M/yyyy",
+        "dd MMM yyyy",
+        "d MMM yyyy",
+        "yyyy-MM-dd HH:mm",
+        "yyyy-MM-dd HH:mm:ss"
+      ];
+      for (let i = 0; i < formats.length; ++i) {
+        inputDate = DateTime.fromFormat(dateTime, formats[i], { locale });
+        if (inputDate.isValid)
+          break;
+      }
+    }
+    return this.setDateTime(inputDate, locale);
+  },
+  fromStringTime: function(time, formatTime, locale = "EN") {
+    if (!time)
+      return this.setDateTime(DateTime.invalid("No datetime string provided"), locale);
+    let inputTime = void 0;
+    if (formatTime)
+      inputTime = DateTime.fromFormat(time, formatTime, { locale });
+    if (!inputTime?.isValid) {
+      const formats = [
+        "HHmm",
+        "Hmm",
+        "HHmmss",
+        "HH:mm",
+        "H:mm",
+        "HH:mm:ss"
+      ];
+      for (let i = 0; i < formats.length; ++i) {
+        inputTime = DateTime.fromFormat(time, formats[i], { locale });
+        if (inputTime.isValid)
+          break;
+      }
+    }
+    if (!inputTime?.isValid)
+      inputTime = DateTime.fromISO(time, { locale });
+    return this.setDateTime(inputTime, locale);
+  },
+  fromISO: function(dateTime, locale = "EN") {
+    const inputDate = DateTime.fromISO(dateTime, { locale });
+    return this.setDateTime(inputDate, locale);
+  },
+  fromObject: function(dateTime, locale = "EN") {
+    const inputDate = DateTime.fromObject(dateTime, { locale });
+    return this.setDateTime(inputDate, locale);
+  },
+  setDateTime: function(inputDate, locale = "EN") {
+    if (inputDate.isValid) {
+      if (inputDate.year - DateTime.now().year > 300)
+        inputDate.set({ year: inputDate.year - 543 });
+    }
+    this.luxonDateTime = inputDate;
+    if (locale == "TH")
+      this.luxonDateTime = this.luxonDateTime.setLocale(locale).reconfigure({ outputCalendar: "buddhist" });
+    else
+      this.luxonDateTime = this.luxonDateTime.setLocale(locale).reconfigure({ outputCalendar: "gregory" });
+    return this;
+  },
+  toFormat: function(format, locale = "EN") {
+    if (format == "tinyDate")
+      return this.toTinyDate(locale);
+    if (format == "monthShortDate")
+      return this.toMonthShortDate(locale);
+    if (format == "shortDate")
+      return this.toShortDate(locale);
+    if (format == "longDate")
+      return this.toLongDate(locale);
+    if (format == "tinyDateTime")
+      return this.toTinyDateTime(locale);
+    if (format == "shortDateTime")
+      return this.toShortDateTime(locale);
+    if (format == "longDateTime")
+      return this.toLongDateTime(locale);
+    if (locale == "TH")
+      this.luxonDateTime = this.luxonDateTime.setLocale(locale).reconfigure({ outputCalendar: "buddhist" });
+    else
+      this.luxonDateTime = this.luxonDateTime.setLocale(locale).reconfigure({ outputCalendar: "gregory" });
+    return this.luxonDateTime.toFormat(format);
+  },
+  toISO: function() {
+    return this.luxonDateTime.toISO();
+  },
+  toLocaleFormat: function(locale, format) {
+    if (locale == "TH")
+      this.luxonDateTime = this.luxonDateTime.setLocale(locale).reconfigure({ outputCalendar: "buddhist" });
+    else
+      this.luxonDateTime = this.luxonDateTime.setLocale(locale).reconfigure({ outputCalendar: "gregory" });
+    return this.luxonDateTime.setLocale(locale).toLocaleString(format);
+  },
+  toTinyDate: function(locale = "EN") {
+    return this.toLocaleFormat(locale, DateTime.DATE_SHORT);
+  },
+  toMonthShortDate: function(locale = "EN") {
+    return this.toLocaleFormat(locale, DateTime.DATE_MED);
+  },
+  toShortDate: function(locale = "EN") {
+    return this.toLocaleFormat(locale, DateTime.DATE_FULL);
+  },
+  toLongDate: function(locale = "EN") {
+    return this.toLocaleFormat(locale, DateTime.DATE_HUGE);
+  },
+  toTinyDateTime: function(locale = "EN") {
+    return this.toLocaleFormat(locale, DateTime.DATETIME_SHORT);
+  },
+  toShortDateTime: function(locale = "EN") {
+    return this.toLocaleFormat(locale, DateTime.DATETIME_MED);
+  },
+  toLongDateTime: function(locale = "EN") {
+    return this.toLocaleFormat(locale, DateTime.DATETIME_HUGE);
+  },
+  now: function() {
+    const DateNow = DateTime.now();
+    this.luxonDateTime = DateNow;
+    return this;
+  }
+});
+export function verifyDateFormat(date) {
+  const dateFormatRegex = /^(\d{4}|0{4})-(\d{2}|0{2})-(\d{2}|0{2})$/;
+  const match = date.match(dateFormatRegex);
+  if (match) {
+    const year = match[1];
+    const month = match[2];
+    const day = match[3];
+    const formatYear = Number.parseInt(year) > 0 ? "yyyy" : "";
+    const fotmatMonth = Number.parseInt(month) > 0 && Number.parseInt(month) <= 12 ? "MM" : "";
+    const formatDay = Number.parseInt(day) > 0 && Number.parseInt(day) <= 31 ? "dd" : "";
+    return `${formatYear}${fotmatMonth}${formatDay}`;
+  } else {
+    return null;
+  }
+}
+export function returnVerifyDate(date) {
+  const dateFormatRegex = /^(\d{4}|0{4})-(\d{2}|0{2})-(\d{2}|0{2})$/;
+  const match = date.match(dateFormatRegex);
+  if (match) {
+    const year = match[1];
+    const month = match[2];
+    const day = match[3];
+    const fullMonth = Number.parseInt(month) == 0 || Number.parseInt(month) >= 13 ? "01" : month;
+    const fullDay = Number.parseInt(day) == 0 || Number.parseInt(month) >= 32 ? "01" : day;
+    return `${year}-${fullMonth}-${fullDay}`;
+  } else {
+    return null;
+  }
+}

package/dist/runtime/utils/object.d.ts

@@ -0,0 +1,8 @@
+export type ClassConstructor<T> = {
+    new (...args: any[]): T;
+};
+export declare function isClassConstructor<T>(arg: any): arg is ClassConstructor<T>;
+export declare function onlyClassAttributes<T extends Record<string, any>>(cls: ClassConstructor<T>, object: Record<string, any>): Record<string, any>;
+export declare function classAttributes<T extends Record<string, any>>(cls: ClassConstructor<T>): string[];
+export declare function onlyAttributes(keys: string[], object: Record<string, any>): Record<string, any>;
+export declare function renameAttributes(object: Record<string, any>, mapper: Record<string, string>): Record<string, any>;

package/dist/runtime/utils/object.mjs

@@ -0,0 +1,28 @@
+import { cloneDeep } from "lodash-es";
+export function isClassConstructor(arg) {
+  return typeof arg === "function" && /^class\s/.test(arg.toString());
+}
+export function onlyClassAttributes(cls, object) {
+  return onlyAttributes(classAttributes(cls), object);
+}
+export function classAttributes(cls) {
+  return Object.keys(new cls());
+}
+export function onlyAttributes(keys, object) {
+  let returnObject = cloneDeep(object);
+  Object.keys(object).forEach((localKey) => {
+    if (!keys.includes(localKey))
+      delete returnObject[localKey];
+  });
+  return returnObject;
+}
+export function renameAttributes(object, mapper) {
+  let returnObject = cloneDeep(object);
+  Object.keys(mapper).forEach((key) => {
+    if (returnObject.hasOwnProperty(key)) {
+      returnObject[mapper[key]] = cloneDeep(returnObject[key]);
+      delete returnObject[key];
+    }
+  });
+  return returnObject;
+}

package/dist/types.d.mts

@@ -0,0 +1,16 @@
+
+import type { ModuleOptions } from './module.js'
+
+
+declare module '@nuxt/schema' {
+  interface NuxtConfig { ['nuxt-commons']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['nuxt-commons']?: ModuleOptions }
+}
+
+declare module 'nuxt/schema' {
+  interface NuxtConfig { ['nuxt-commons']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['nuxt-commons']?: ModuleOptions }
+}
+
+
+export type { ModuleOptions, default } from './module.js'

package/dist/types.d.ts

@@ -0,0 +1,16 @@
+
+import type { ModuleOptions } from './module'
+
+
+declare module '@nuxt/schema' {
+  interface NuxtConfig { ['nuxt-commons']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['nuxt-commons']?: ModuleOptions }
+}
+
+declare module 'nuxt/schema' {
+  interface NuxtConfig { ['nuxt-commons']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['nuxt-commons']?: ModuleOptions }
+}
+
+
+export type { ModuleOptions, default } from './module'

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "@ramathibodi/nuxt-commons",
+  "version": "0.0.1",
+  "description": "Ramathibodi Nuxt modules for common components",
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.rama.mahidol.ac.th/ramacare/frontend/rama-modules.git"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    },
+    "./utils/*": {
+      "types": "./dist/runtime/utils/*.d.ts",
+      "import": "./dist/runtime/utils/*.mjs",
+      "require": "./dist/runtime/utils/*.cjs"
+    },
+    "./lab/*" : "./dist/runtime/labs/*.vue",
+    "./lab/*/*" : "./dist/runtime/labs/*/*.vue"
+  },
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepack": "nuxt-module-build build",
+    "dev": "nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run",
+    "test:watch": "vitest watch"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.5.2",
+    "@fullcalendar/core": "^6.1.11",
+    "@fullcalendar/daygrid": "^6.1.11",
+    "@fullcalendar/interaction": "^6.1.11",
+    "@fullcalendar/list": "^6.1.11",
+    "@fullcalendar/multimonth": "^6.1.11",
+    "@fullcalendar/timegrid": "^6.1.11",
+    "@fullcalendar/vue3": "^6.1.11",
+    "@mdi/font": "^7.4.47",
+    "@nuxt/kit": "^3.11.2",
+    "@nuxtjs/apollo": "5.0.0-alpha.14",
+    "@vue/apollo-composable": "^4.0.2",
+    "@vuepic/vue-datepicker": "^7.4.1",
+    "@zxing/browser": "^0.1.4",
+    "cropperjs": "^1.6.2",
+    "currency.js": "^2.0.4",
+    "gql-query-builder": "^3.8.0",
+    "lodash": "^4.17.21",
+    "luxon": "^3.4.4",
+    "maska": "^2.1.11",
+    "pdf-vue3": "^1.0.12",
+    "print-js": "^1.6.0",
+    "uid": "^2.0.2",
+    "vue": "^3.4.25",
+    "vue-signature-pad": "^3.0.2",
+    "vuetify": "^3.5.17",
+    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "^1.2.0",
+    "@nuxt/eslint-config": "^0.3.9",
+    "@nuxt/module-builder": "^0.5.5",
+    "@nuxt/schema": "^3.11.2",
+    "@nuxt/test-utils": "^3.12.1",
+    "@types/lodash": "^4.17.0",
+    "@types/luxon": "^3.4.2",
+    "@types/node": "^18.17.5",
+    "@vueuse/core": "^10.9.0",
+    "@vueuse/nuxt": "^10.9.0",
+    "changelogen": "^0.5.5",
+    "eslint": "^9.1.1",
+    "nuxt": "^3.11.2",
+    "nuxt-lodash": "^2.5.3",
+    "sass": "^1.75.0",
+    "typescript": "^5.4.5",
+    "vitest": "^1.5.1",
+    "vue-tsc": "^1.8.27"
+  }
+}