@ramathibodi/nuxt-commons 0.1.14 → 0.1.15

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

@@ -1,117 +1,117 @@
-<script lang="ts" setup>
-import {ref,computed} from 'vue'
-import Cropper from 'cropperjs'
-import 'cropperjs/dist/cropper.css'
-import type {ImageFormat} from "exif-rotate-js"
-
-interface Props {
-  imageFormat?: ImageFormat
-  maxHeight?: string | number
-  maxWidth?: string | number
-  aspectRatio?: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  imageFormat: "image/jpeg",
-  maxWidth: 1024
-})
-
-const imageData = defineModel<string>()
-
-const cropper = ref<Cropper>()
-const imageRef = ref<HTMLImageElement>()
-const dragMode = ref<string>("crop")
-
-function loadCropper() {
-  if (cropper.value) cropper.value?.destroy()
-  if (imageRef.value) {
-    cropper.value = new Cropper(<HTMLImageElement>imageRef.value,{
-      aspectRatio: props.aspectRatio
-    })
-  }
-}
-
-const dragMove = () => {
-  cropper.value?.setDragMode('move')
-}
-const dragCrop = () => {
-  cropper.value?.setDragMode('crop')
-}
-const rotateLeft90 = () => cropper.value?.rotate(-90)
-const rotateLeft = () => cropper.value?.rotate(-5)
-const rotateRight = () => cropper.value?.rotate(5)
-const rotateRight90 = () => cropper.value?.rotate(90)
-const flipHorizontal = () => cropper.value?.scaleX(cropper.value.getData().scaleX * -1)
-const flipVertical = () => cropper.value?.scaleY(cropper.value.getData().scaleY * -1)
-const zoomIn = () => cropper.value?.zoom(0.1)
-const zoomOut = () => cropper.value?.zoom(-0.1)
-const moveUp = () => cropper.value?.move(0, -10)
-const moveDown = () => cropper.value?.move(0, 10)
-const moveLeft = () => cropper.value?.move(-10, 0)
-const moveRight = () => cropper.value?.move(10, 0)
-const accept = () => {
-  const croppedCanvas = cropper.value?.getCroppedCanvas()
-  console.log(props.imageFormat)
-  imageData.value = croppedCanvas?.toDataURL(props.imageFormat,1)
-}
-const reset = () => cropper.value?.reset()
-
-const computedMaxWidth = computed(() => {
-  if (typeof props.maxWidth === 'number') {
-    return `${props.maxWidth}px`
-  } else if (!isNaN(Number(props.maxWidth))) {
-    return `${props.maxWidth}px`
-  }
-  return props.maxWidth
-})
-
-const computedMaxHeight = computed(() => {
-  if (typeof props.maxHeight === 'number') {
-    return `${props.maxHeight}px`
-  } else if (!isNaN(Number(props.maxHeight))) {
-    return `${props.maxHeight}px`
-  }
-  return props.maxHeight
-})
-</script>
-<template>
-  <div :style="{maxWidth:computedMaxWidth,maxHeight:computedMaxHeight}">
-    <v-card>
-      <v-toolbar color="primary" dark>
-        <v-btn-toggle v-model="dragMode" class="ml-1">
-          <v-btn value="move" icon="mdi mdi-cursor-move" @click="dragMove"></v-btn>
-          <v-btn value="crop" icon="mdi mdi-crop" @click="dragCrop"></v-btn>
-        </v-btn-toggle>
-        <v-btn-group class="ml-1">
-          <v-btn value="rotateLeft" icon="mdi mdi-rotate-left-variant" @click="rotateLeft90"></v-btn>
-          <v-btn value="rotateRight" icon="mdi mdi-rotate-left" @click="rotateLeft"></v-btn>
-          <v-btn value="rotateRight" icon="mdi mdi-rotate-right" @click="rotateRight"></v-btn>
-          <v-btn value="rotateRight" icon="mdi mdi-rotate-right-variant" @click="rotateRight90"></v-btn>
-        </v-btn-group>
-        <v-btn-group class="ml-1">
-          <v-btn value="flipHorizontal" icon="mdi mdi-flip-horizontal" @click="flipHorizontal"></v-btn>
-          <v-btn value="flipVertical" icon="mdi mdi-flip-vertical" @click="flipVertical"></v-btn>
-        </v-btn-group>
-        <v-btn-group class="ml-1">
-          <v-btn value="flipHorizontal" icon="mdi mdi-magnify-plus-outline" @click="zoomIn"></v-btn>
-          <v-btn value="flipVertical" icon="mdi mdi-magnify-minus-outline" @click="zoomOut"></v-btn>
-        </v-btn-group>
-        <v-btn-group class="ml-1">
-          <v-btn value="moveUp" icon="mdi mdi-arrow-up" @click="moveUp"></v-btn>
-          <v-btn value="moveDown" icon="mdi mdi-arrow-down" @click="moveDown"></v-btn>
-          <v-btn value="moveLeft" icon="mdi mdi-arrow-left" @click="moveLeft"></v-btn>
-          <v-btn value="moveRight" icon="mdi mdi-arrow-right" @click="moveRight"></v-btn>
-        </v-btn-group>
-        <v-spacer></v-spacer>
-        <v-btn icon="mdi mdi-check" @click="accept"></v-btn>
-        <v-btn icon="mdi mdi-refresh" @click="reset"></v-btn>
-      </v-toolbar>
-      <v-card-text class="ma-0 pa-0">
-        <img ref="imageRef" :src="imageData" alt="" @load="loadCropper" style="display: block; max-width: 100%">
-      </v-card-text>
-    </v-card>
-  </div>
-</template>
+<script lang="ts" setup>
+import {ref,computed} from 'vue'
+import Cropper from 'cropperjs'
+import 'cropperjs/dist/cropper.css'
+import type {ImageFormat} from "exif-rotate-js"
+
+interface Props {
+  imageFormat?: ImageFormat
+  maxHeight?: string | number
+  maxWidth?: string | number
+  aspectRatio?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  imageFormat: "image/jpeg",
+  maxWidth: 1024
+})
+
+const imageData = defineModel<string>()
+
+const cropper = ref<Cropper>()
+const imageRef = ref<HTMLImageElement>()
+const dragMode = ref<string>("crop")
+
+function loadCropper() {
+  if (cropper.value) cropper.value?.destroy()
+  if (imageRef.value) {
+    cropper.value = new Cropper(<HTMLImageElement>imageRef.value,{
+      aspectRatio: props.aspectRatio
+    })
+  }
+}
+
+const dragMove = () => {
+  cropper.value?.setDragMode('move')
+}
+const dragCrop = () => {
+  cropper.value?.setDragMode('crop')
+}
+const rotateLeft90 = () => cropper.value?.rotate(-90)
+const rotateLeft = () => cropper.value?.rotate(-5)
+const rotateRight = () => cropper.value?.rotate(5)
+const rotateRight90 = () => cropper.value?.rotate(90)
+const flipHorizontal = () => cropper.value?.scaleX(cropper.value.getData().scaleX * -1)
+const flipVertical = () => cropper.value?.scaleY(cropper.value.getData().scaleY * -1)
+const zoomIn = () => cropper.value?.zoom(0.1)
+const zoomOut = () => cropper.value?.zoom(-0.1)
+const moveUp = () => cropper.value?.move(0, -10)
+const moveDown = () => cropper.value?.move(0, 10)
+const moveLeft = () => cropper.value?.move(-10, 0)
+const moveRight = () => cropper.value?.move(10, 0)
+const accept = () => {
+  const croppedCanvas = cropper.value?.getCroppedCanvas()
+  console.log(props.imageFormat)
+  imageData.value = croppedCanvas?.toDataURL(props.imageFormat,1)
+}
+const reset = () => cropper.value?.reset()
+
+const computedMaxWidth = computed(() => {
+  if (typeof props.maxWidth === 'number') {
+    return `${props.maxWidth}px`
+  } else if (!isNaN(Number(props.maxWidth))) {
+    return `${props.maxWidth}px`
+  }
+  return props.maxWidth
+})
+
+const computedMaxHeight = computed(() => {
+  if (typeof props.maxHeight === 'number') {
+    return `${props.maxHeight}px`
+  } else if (!isNaN(Number(props.maxHeight))) {
+    return `${props.maxHeight}px`
+  }
+  return props.maxHeight
+})
+</script>
+<template>
+  <div :style="{maxWidth:computedMaxWidth,maxHeight:computedMaxHeight}">
+    <v-card>
+      <v-toolbar color="primary" dark>
+        <v-btn-toggle v-model="dragMode" class="ml-1">
+          <v-btn value="move" icon="mdi mdi-cursor-move" @click="dragMove"></v-btn>
+          <v-btn value="crop" icon="mdi mdi-crop" @click="dragCrop"></v-btn>
+        </v-btn-toggle>
+        <v-btn-group class="ml-1">
+          <v-btn value="rotateLeft" icon="mdi mdi-rotate-left-variant" @click="rotateLeft90"></v-btn>
+          <v-btn value="rotateRight" icon="mdi mdi-rotate-left" @click="rotateLeft"></v-btn>
+          <v-btn value="rotateRight" icon="mdi mdi-rotate-right" @click="rotateRight"></v-btn>
+          <v-btn value="rotateRight" icon="mdi mdi-rotate-right-variant" @click="rotateRight90"></v-btn>
+        </v-btn-group>
+        <v-btn-group class="ml-1">
+          <v-btn value="flipHorizontal" icon="mdi mdi-flip-horizontal" @click="flipHorizontal"></v-btn>
+          <v-btn value="flipVertical" icon="mdi mdi-flip-vertical" @click="flipVertical"></v-btn>
+        </v-btn-group>
+        <v-btn-group class="ml-1">
+          <v-btn value="flipHorizontal" icon="mdi mdi-magnify-plus-outline" @click="zoomIn"></v-btn>
+          <v-btn value="flipVertical" icon="mdi mdi-magnify-minus-outline" @click="zoomOut"></v-btn>
+        </v-btn-group>
+        <v-btn-group class="ml-1">
+          <v-btn value="moveUp" icon="mdi mdi-arrow-up" @click="moveUp"></v-btn>
+          <v-btn value="moveDown" icon="mdi mdi-arrow-down" @click="moveDown"></v-btn>
+          <v-btn value="moveLeft" icon="mdi mdi-arrow-left" @click="moveLeft"></v-btn>
+          <v-btn value="moveRight" icon="mdi mdi-arrow-right" @click="moveRight"></v-btn>
+        </v-btn-group>
+        <v-spacer></v-spacer>
+        <v-btn icon="mdi mdi-check" @click="accept"></v-btn>
+        <v-btn icon="mdi mdi-refresh" @click="reset"></v-btn>
+      </v-toolbar>
+      <v-card-text class="ma-0 pa-0">
+        <img ref="imageRef" :src="imageData" alt="" @load="loadCropper" style="display: block; max-width: 100%">
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
 <style>
 .cropper-bg{background-repeat:repeat!important}
 </style>

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

@@ -1,29 +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>
+<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/Field.vue

@@ -1,42 +1,42 @@
-<script lang="ts" setup>
-interface Props {
-  label: string
-  value?: string  | null | undefined
-  horizontal?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  label: '', value: '',
-})
-</script>
-
-<template>
-  <div v-if="horizontal" class="d-flex align-end" :="$attrs">
-    <div class="text-medium-emphasis">
-      <slot name="label">
-        {{ label }}:
-      </slot>
-    </div>
-    <div class="ml-1">
-      <slot name="value">
-        {{ value }}
-      </slot>
-    </div>
-  </div>
-  <v-card v-else variant="flat" :="$attrs">
-  <VCardSubtitle class="ma-0 pa-0 text-black">
-    <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>
+<script lang="ts" setup>
+interface Props {
+  label: string
+  value?: string  | null | undefined
+  horizontal?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '', value: '',
+})
+</script>
+
+<template>
+  <div v-if="horizontal" class="d-flex align-end" :="$attrs">
+    <div class="text-medium-emphasis">
+      <slot name="label">
+        {{ label }}:
+      </slot>
+    </div>
+    <div class="ml-1">
+      <slot name="value">
+        {{ value }}
+      </slot>
+    </div>
+  </div>
+  <v-card v-else variant="flat" :="$attrs">
+  <VCardSubtitle class="ma-0 pa-0 text-black">
+    <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/FormatMoney.vue

@@ -1,29 +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: '',
-})
-
-const formattedCurrency = computed(() => {
-  return currency(props.modelValue, {
-    pattern: `# !`,
-    symbol: props.currency,
-    separator: ',',
-    precision: props.decimal,
-  }).format()
-})
-</script>
-
-<template>
-  {{ formattedCurrency }}
-</template>
+<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: '',
+})
+
+const formattedCurrency = computed(() => {
+  return currency(props.modelValue, {
+    pattern: `# !`,
+    symbol: props.currency,
+    separator: ',',
+    precision: props.decimal,
+  }).format()
+})
+</script>
+
+<template>
+  {{ formattedCurrency }}
+</template>

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

@@ -1,38 +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>
+<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>