@ramathibodi/nuxt-commons 0.0.1

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

@@ -0,0 +1,158 @@
+<script lang="ts" setup>
+import { ref, watch, watchEffect, nextTick } from 'vue'
+import Datepicker from '@vuepic/vue-datepicker'
+import '@vuepic/vue-datepicker/dist/main.css'
+import { Datetime } from '../../utils/datetime'
+
+interface Props {
+  readonly?: boolean
+  enableSeconds?: boolean
+  locale?: 'TH' | 'EN'
+  pickerOnly?: boolean
+  modelValue?: string | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  readonly: false,
+  locale: 'TH',
+  pickerOnly: false,
+  enableSeconds: false,
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const time = ref<string | null>(null)
+const tempTime = ref<string | null>(null)
+const isMenuOpen = ref(false)
+const isTextFieldFocused = ref(false)
+const isTextFieldTyped = ref(false)
+
+function onTextFieldFocus(event: Event) {
+  isTextFieldFocused.value = true
+  nextTick(() => {
+    (event.target as HTMLInputElement).select()
+  })
+}
+
+function onTextFieldTyped() {
+  if (!isTextFieldTyped.value) {
+    isTextFieldTyped.value = true
+    isMenuOpen.value = false
+  }
+}
+
+function onTextFieldBlur() {
+  if (isTextFieldTyped.value) {
+    setTime(tempTime.value)
+    isTextFieldTyped.value = false
+  }
+  isTextFieldFocused.value = false
+}
+
+function onTextFieldEnterKey() {
+  onTextFieldBlur()
+}
+
+function onTextFieldClear() {
+  reset()
+}
+
+function reset() {
+  time.value = null
+  tempTime.value = null
+}
+
+function setTime(TimeString: string | null) {
+  const dateTime = Datetime().fromStringTime(TimeString, undefined, props.locale)
+  if (!dateTime.luxonDateTime.isValid) {
+    tempTime.value = null
+    time.value = null
+  }
+  else {
+    time.value = dateTime.toFormat('HH:mm:ss', 'EN')
+    tempTime.value = time.value
+  }
+}
+
+function setDatePicker(DateString: string | null) {
+  setTime(DateString)
+}
+
+watchEffect(() => {
+  if (!isTextFieldFocused.value && time.value) {
+    const dateTime = Datetime().fromString(time.value, undefined, props.locale)
+    tempTime.value = dateTime.toFormat((props.enableSeconds) ? 'HH:mm:ss' : 'HH:mm', props.locale)
+  }
+  else {
+    tempTime.value = time.value
+  }
+})
+
+watch(time, (newValue) => {
+  if (!isMenuOpen.value) emit('update:modelValue', newValue)
+})
+
+watch(isMenuOpen, () => {
+  if (isMenuOpen.value && !time.value) {
+    time.value = Datetime().now().toFormat((props.enableSeconds) ? 'HH:mm:ss' : 'HH:mm:00')
+  }
+  if (!isMenuOpen.value) emit('update:modelValue', time.value)
+})
+
+watch(() => props.modelValue, () => {
+  setTime(props.modelValue || null)
+}, { immediate: true })
+
+const isOpenMenu = (value: string) => {
+  if (value === 'txtField' && props.pickerOnly) {
+    isMenuOpen.value = true
+  }
+  else if (value === 'icon' && !props.pickerOnly) {
+    isMenuOpen.value = true
+  }
+}
+</script>
+
+<template>
+  <v-menu
+    v-model="isMenuOpen"
+    :close-on-content-click="false"
+    :open-on-click="false"
+  >
+    <template #activator="{ props }">
+      <v-text-field
+        ref="textField"
+        v-model="tempTime"
+        :readonly="readonly"
+        v-bind="$attrs"
+        @focus="onTextFieldFocus"
+        @blur="onTextFieldBlur"
+        @keydown="onTextFieldTyped"
+        @keyup.enter="onTextFieldEnterKey"
+        @click:clear="onTextFieldClear"
+        @click="isOpenMenu('txtField')"
+      >
+        <template #append-inner>
+          <v-icon
+            v-bind="props"
+            @click="isOpenMenu('icon')"
+          >
+            fa:fa-regular fa-clock
+          </v-icon>
+        </template>
+      </v-text-field>
+    </template>
+    <Datepicker
+      v-model="time"
+      model-type="HH:mm:ss"
+      :enable-seconds="enableSeconds"
+      minutes-grid-increment="1"
+      time-picker
+      auto-apply
+      :close-on-auto-apply="false"
+      inline
+      :locale="locale"
+      @update:model-value="setDatePicker"
+    />
+  </v-menu>
+</template>

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

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { isUndefined } from 'lodash'
+
+interface Props {
+  modelValue?: string
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits(['update:modelValue', 'closeDialog', 'openCamera'])
+
+const selectedImage = ref<string>()
+const isDialogOpen = ref<boolean>(false)
+const cameraRef = ref()
+
+const handleAddImage = (image: string) => {
+  selectedImage.value = image
+  isDialogOpen.value = true
+}
+
+const handleCloseDialog = () => {
+  isDialogOpen.value = false
+  emit("openCamera", true);
+  emit('closeDialog', false)
+}
+
+const handleCameraClose = (shouldClose: boolean, editStatus: string) => {
+  if (isUndefined(editStatus)) {
+    emit('closeDialog', shouldClose)
+  }
+}
+
+const handleImageEdit = (imageData: any) => {
+  emit('update:modelValue', imageData)
+}
+
+const handleOpenCamera = () => {
+  emit('openCamera', true)
+  isDialogOpen.value = false
+  cameraRef.value.openCamera()
+}
+</script>
+
+<template>
+  <Camera
+    ref="cameraRef"
+    @update:model-value="handleAddImage"
+    @close-dialog="handleCameraClose"
+  />
+  <v-dialog v-model="isDialogOpen">
+    <FormImagesEdit
+      v-model="selectedImage"
+      @update:model-value="handleImageEdit"
+      @close-dialog="handleCloseDialog"
+      @open-camera="handleOpenCamera"
+    />
+  </v-dialog>
+</template>

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

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+import Cropper from 'cropperjs'
+import 'cropperjs/dist/cropper.css'
+
+interface Props {
+  modelValue?: string
+  readonly?: boolean
+  flat?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  readonly: false,
+  flat: false,
+})
+
+const emit = defineEmits(['update:modelValue', 'closeDialog', 'openCamera'])
+
+const cropper = ref<Cropper | null>(null)
+const imageCanvas = ref<HTMLCanvasElement | null>(null)
+
+const loadImageToCanvas = () => {
+  if (imageCanvas.value && props.modelValue) {
+    const canvas = imageCanvas.value as HTMLCanvasElement
+    const context = canvas.getContext('2d')
+    const image = new Image()
+    image.src = props.modelValue
+    image.onload = () => {
+      canvas.width = image.width
+      canvas.height = image.height
+      context?.clearRect(0, 0, canvas.width, canvas.height)
+      context?.drawImage(image, 0, 0)
+      if (!props.readonly) {
+        cropper.value?.destroy()
+        cropper.value = new Cropper(canvas, {
+          aspectRatio: 1,
+          rotatable: true,
+        })
+      }
+    }
+  }
+}
+
+onMounted(() => {
+  loadImageToCanvas()
+})
+
+watch(() => props.modelValue, (newValue, oldValue) => {
+  if (newValue !== oldValue) {
+    loadImageToCanvas()
+  }
+})
+
+const handleCrop = () => {
+  const croppedCanvas = cropper.value?.getCroppedCanvas()
+  if (croppedCanvas) {
+    const dataURL = croppedCanvas.toDataURL()
+    emit('update:modelValue', dataURL)
+    emit("closeDialog", false);
+  }
+}
+
+const resetCrop = () => {
+  emit("closeDialog", false);
+  emit("openCamera", true);
+}
+
+const close = () => {
+  emit('closeDialog', false)
+}
+</script>
+
+<template>
+  <v-card :flat="flat">
+    <v-card-title>
+      <v-row
+        align="center"
+        justify="end"
+      >
+        <slot
+          name="closeButton"
+          :close="close"
+        >
+          <v-btn
+            icon="mdi mdi-close"
+            variant="text"
+            @click="close"
+          />
+        </slot>
+      </v-row>
+    </v-card-title>
+    <v-card-text>
+      <v-row
+        v-if="props.readonly"
+        justify="center"
+      >
+        <v-img
+          :src="props.modelValue as string"
+          height="70vh"
+        />
+      </v-row>
+      <v-row
+        v-else
+        justify="center"
+      >
+        <v-col cols="12">
+          <canvas
+            ref="imageCanvas"
+            class="canvas-photo"
+            style="max-height: 70vh; max-width: 40vh"
+          />
+          <v-row
+            justify="center"
+            class="mt-2"
+          >
+            <slot
+              name="actionButtons"
+              :reset-crop="resetCrop"
+              :handle-crop="handleCrop"
+            >
+              <v-btn
+                class="ma-1"
+                prepend-icon="mdi mdi-camera"
+                color="primary"
+                @click="resetCrop"
+              >
+                Retake
+              </v-btn>
+              <v-btn
+                class="ma-1"
+                prepend-icon="fa-solid fa-check"
+                color="success"
+                @click="handleCrop"
+              >
+                Done
+              </v-btn>
+            </slot>
+          </v-row>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>

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

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+interface Props {
+  modelValue?: any
+  readonly?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  readonly: false,
+})
+
+const emit = defineEmits([
+  'update:modelValue',
+  'closeDialogPreview',
+  'toPaint',
+])
+
+const editImage = () => {
+  emit('toPaint')
+}
+</script>
+
+<template>
+  <v-card>
+    <v-toolbar>
+      <v-toolbar-title>Preview</v-toolbar-title>
+      <v-spacer />
+      <v-btn
+        v-if="!props.readonly"
+        icon="fa:fa-solid fa-pen"
+        variant="text"
+        @click="editImage"
+      />
+      <v-btn
+        icon="fa:fa-solid fa-xmark"
+        variant="text"
+        @click="$emit('closeDialogPreview', false)"
+      />
+    </v-toolbar>
+    <v-card-text>
+      <v-row>
+        <v-img
+          :src="modelValue.data"
+          height="70dvh"
+        />
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>

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

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { type dateFormat, type dateTimeFormat, Datetime } from '../../utils/datetime'
+
+interface Props {
+  modelValue?: string
+  locale?: 'TH' | 'EN'
+  fromFormat?: string
+  format?: dateFormat | dateTimeFormat | string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  locale: 'TH',
+  format: 'shortDate',
+})
+
+const formattedDate = computed(() => {
+  if (!props.modelValue) {
+    return null
+  }
+
+  const dateTime = Datetime().fromString(props.modelValue, props.fromFormat)
+  return dateTime.luxonDateTime.isValid ? dateTime.toFormat(props.format, props.locale) : props.modelValue
+})
+</script>
+
+<template>
+  {{ formattedDate }}
+</template>

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

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import currency from 'currency.js'
+import { computed } from 'vue'
+
+interface Props {
+  modelValue: number
+  decimal?: number
+  currency?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 0,
+  decimal: 2,
+  currency: 'USD',
+})
+
+const formattedCurrency = computed(() => {
+  return currency(props.modelValue, {
+    pattern: `# !`,
+    symbol: props.currency,
+    separator: ',',
+    precision: props.decimal,
+  }).format()
+})
+</script>
+
+<template>
+  {{ formattedCurrency }}
+</template>

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

@@ -0,0 +1,13 @@
+import { type InjectionKey, type Ref } from 'vue';
+import type { AlertItem } from '../types/alert';
+interface AlertProvide {
+    addAlert: (item: Partial<AlertItem>) => void;
+    takeAlert: (location?: string) => AlertItem | undefined;
+    hasAlert: (location?: string) => boolean;
+    clear: () => void;
+    items: Ref<AlertItem[]>;
+}
+export declare const AlertKey: InjectionKey<AlertProvide>;
+export declare function createAlert(): void;
+export declare function useAlert(): AlertProvide | null;
+export {};

package/dist/runtime/composables/alert.mjs

@@ -0,0 +1,44 @@
+import { inject, provide, ref } from "vue";
+import { head, isUndefined, now, remove } from "lodash-es";
+export const AlertKey = Symbol.for("ramacare:alert");
+export function createAlert() {
+  const items = ref([]);
+  provide(AlertKey, {
+    addAlert(item) {
+      const defaultValues = {
+        statusCode: 0,
+        statusMessage: "",
+        alertLocation: "default",
+        alertType: "info",
+        alertIcon: "",
+        alertDateTime: now(),
+        alertExpireIn: 1e3 * 60,
+        // 1 minute
+        data: {}
+      };
+      const newItem = { ...defaultValues, ...item };
+      if (!isUndefined(newItem.message)) {
+        items.value.push(newItem);
+      }
+    },
+    takeAlert(location = "default") {
+      const item = head(items.value.filter((i) => i.alertLocation === location));
+      if (item)
+        remove(items.value, (i) => i === item);
+      return item;
+    },
+    hasAlert(location = "default") {
+      return items.value.some((i) => i.alertLocation === location);
+    },
+    clear() {
+      items.value = [];
+    },
+    items
+  });
+  setInterval(() => {
+    items.value = items.value.filter((i) => Number(i.alertDateTime) + Number(i.alertExpireIn) > now());
+  }, 1e3);
+}
+export function useAlert() {
+  return inject(AlertKey, null);
+}

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

@@ -0,0 +1,32 @@
+export declare function useRules(): {
+    require: (customError?: string) => (value: any) => string | true;
+    requireIf: (conditionIf: boolean, customError?: string) => (value: any) => string | true;
+    requireTrue: (customError?: string) => (value: any) => string | true;
+    requireTrueIf: (conditionIf: boolean, customError?: string) => (value: any) => string | true;
+    numeric: (customError?: string) => (value: any) => string | true;
+    range: (minValue: number, maxValue: number, customError?: string) => (value: any) => string | true;
+    integer: (customError?: string) => (value: any) => string | true;
+    unique: (data: Array<any> | object, fieldName: string, customError?: string) => (value: any) => string | true;
+    length: (length: number, customError?: string) => (value: any) => string | true;
+    lengthGreater: (length: number, customError?: string) => (value: any) => string | true;
+    lengthLess: (length: number, customError?: string) => (value: any) => string | true;
+    telephone: (customError?: string) => (value: any) => string | true;
+    email: (customError?: string) => (value: any) => string | true;
+    regex: (regex: string, 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;
+        requireTrue: (customError?: string) => (value: any) => string | true;
+        requireTrueIf: (conditionIf: boolean, customError?: string) => (value: any) => string | true;
+        numeric: (customError?: string) => (value: any) => string | true;
+        range: (minValue: number, maxValue: number, customError?: string) => (value: any) => string | true;
+        integer: (customError?: string) => (value: any) => string | true;
+        unique: (data: Array<any> | object, fieldName: string, customError?: string) => (value: any) => string | true;
+        length: (length: number, customError?: string) => (value: any) => string | true;
+        lengthGreater: (length: number, customError?: string) => (value: any) => string | true;
+        lengthLess: (length: number, customError?: string) => (value: any) => string | true;
+        telephone: (customError?: string) => (value: any) => string | true;
+        email: (customError?: string) => (value: any) => string | true;
+        regex: (regex: string, customError?: string) => (value: any) => string | true;
+    }>;
+};

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

@@ -0,0 +1,36 @@
+import { ref } from "vue";
+import { isInteger, find } from "lodash-es";
+export function useRules() {
+  const condition = (condition2, customError) => condition2 || customError;
+  const require = (customError = "This field is required") => (value) => condition(!!value || value === false || value === 0, customError);
+  const requireIf = (conditionIf, customError = "This field is required") => (value) => condition(!!value || value === false || value === 0 || !conditionIf, customError);
+  const requireTrue = (customError = "This field must be true") => (value) => condition(!!value, customError);
+  const requireTrueIf = (conditionIf, customError = "This field must be true") => (value) => condition(!!value || !conditionIf, customError);
+  const numeric = (customError = "This field must be a number") => (value) => condition(!value || !Number.isNaN(value), customError);
+  const range = (minValue, maxValue, customError = `Value is out of range (${minValue}-${maxValue})`) => (value) => condition(!value || value >= minValue && value <= maxValue, customError);
+  const integer = (customError = "This field must be an integer") => (value) => condition(!value || isInteger(value) || /^\+?-?\d+$/.test(value), customError);
+  const unique = (data, fieldName, customError = "This field must be unique") => (value) => condition(!value || !data || !find(data, [fieldName, value]), customError);
+  const length = (length2, customError = `Length must be ${length2}`) => (value) => condition(!value || value.length == length2, customError);
+  const lengthGreater = (length2, customError = `Length must be greater than ${length2}`) => (value) => condition(!value || value.length >= length2, customError);
+  const lengthLess = (length2, customError = `Length must be less than ${length2}`) => (value) => condition(!value || value.length <= length2, customError);
+  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 rules = ref({
+    require,
+    requireIf,
+    requireTrue,
+    requireTrueIf,
+    numeric,
+    range,
+    integer,
+    unique,
+    length,
+    lengthGreater,
+    lengthLess,
+    telephone,
+    email,
+    regex
+  });
+  return { rules, ...rules.value };
+}