@finema/core 1.4.152 → 1.4.154

package/dist/runtime/components/Form/InputDateTimeRange/index.vue

@@ -1,83 +1,83 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <Datepicker
-      v-model="innerValueRef"
-      :disabled="wrapperProps.isDisabled"
-      cancel-text="ยกเลิก"
-      select-text="เลือก"
-      locale="th"
-      :format="format"
-      :enable-time-picker="!disabledTime"
-      :placeholder="wrapperProps.placeholder"
-      :min-date="minDate"
-      :max-date="maxDate"
-      :min-time="minTime"
-      :max-time="maxTime"
-      :start-time="startTime"
-      :multi-calendars="!isDisabledMultiCalendar"
-      :required="isRequired"
-      time-picker-inline
-      range
-      @update:model-value="onInput"
-    >
-      <template #dp-input="{ value: innerValue }">
-        <UInput
-          :trailing-icon="innerValue ? undefined : 'i-heroicons-calendar-days'"
-          type="text"
-          :value="innerValue"
-          :placeholder="wrapperProps.placeholder"
-          :readonly="true"
-          input-class="cursor-pointer select-none"
-        />
-      </template>
-    </Datepicker>
-  </FieldWrapper>
-</template>
-<script lang="ts" setup>
-import Datepicker from '@vuepic/vue-datepicker'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import { TimeHelper, ref, useFieldHOC } from '#imports'
-import '@vuepic/vue-datepicker/dist/main.css'
-import type {
-  IDateTimeRangeFieldProps,
-  IDateTimeRangeResponse,
-} from './date_range_time_field.types'
-
-const props = withDefaults(defineProps<IDateTimeRangeFieldProps>(), {})
-
-const { value, wrapperProps } = useFieldHOC<IDateTimeRangeResponse | null>(props)
-
-const innerValueRef = ref<Date[]>([])
-
-const format = (date: Date[]) => {
-  if (props.disabledTime) {
-    return date.length > 0
-      ? TimeHelper.displayDate(date[0]) + ' - ' + TimeHelper.displayDate(date[1] ?? '')
-      : ''
-  }
-
-  return date.length > 0
-    ? TimeHelper.displayDateTime(date[0]) + ' - ' + TimeHelper.displayDateTime(date[1] ?? '')
-    : ''
-}
-
-const onInput = (_value: Date[]) => {
-  if (_value === null) {
-    value.value = null
-
-    return
-  }
-
-  if (props.disabledTime && !props.isReturnISO) {
-    value.value = <IDateTimeRangeResponse>{
-      start: TimeHelper.getDateFormTime(_value[0]),
-      end: TimeHelper.getDateFormTime(_value[1]),
-    }
-  } else {
-    value.value = <IDateTimeRangeResponse>{
-      start: _value[0],
-      end: _value[1],
-    }
-  }
-}
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <Datepicker
+      v-model="innerValueRef"
+      :disabled="wrapperProps.isDisabled"
+      cancel-text="ยกเลิก"
+      select-text="เลือก"
+      locale="th"
+      :format="format"
+      :enable-time-picker="!disabledTime"
+      :placeholder="wrapperProps.placeholder"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :min-time="minTime"
+      :max-time="maxTime"
+      :start-time="startTime"
+      :multi-calendars="!isDisabledMultiCalendar"
+      :required="isRequired"
+      time-picker-inline
+      range
+      @update:model-value="onInput"
+    >
+      <template #dp-input="{ value: innerValue }">
+        <UInput
+          :trailing-icon="innerValue ? undefined : 'i-heroicons-calendar-days'"
+          type="text"
+          :value="innerValue"
+          :placeholder="wrapperProps.placeholder"
+          :readonly="true"
+          input-class="cursor-pointer select-none"
+        />
+      </template>
+    </Datepicker>
+  </FieldWrapper>
+</template>
+<script lang="ts" setup>
+import Datepicker from '@vuepic/vue-datepicker'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+import { TimeHelper, ref, useFieldHOC } from '#imports'
+import '@vuepic/vue-datepicker/dist/main.css'
+import type {
+  IDateTimeRangeFieldProps,
+  IDateTimeRangeResponse,
+} from './date_range_time_field.types'
+
+const props = withDefaults(defineProps<IDateTimeRangeFieldProps>(), {})
+
+const { value, wrapperProps } = useFieldHOC<IDateTimeRangeResponse | null>(props)
+
+const innerValueRef = ref<Date[]>([])
+
+const format = (date: Date[]) => {
+  if (props.disabledTime) {
+    return date.length > 0
+      ? TimeHelper.displayDate(date[0]) + ' - ' + TimeHelper.displayDate(date[1] ?? '')
+      : ''
+  }
+
+  return date.length > 0
+    ? TimeHelper.displayDateTime(date[0]) + ' - ' + TimeHelper.displayDateTime(date[1] ?? '')
+    : ''
+}
+
+const onInput = (_value: Date[]) => {
+  if (_value === null) {
+    value.value = null
+
+    return
+  }
+
+  if (props.disabledTime && !props.isReturnISO) {
+    value.value = <IDateTimeRangeResponse>{
+      start: TimeHelper.getDateFormTime(_value[0]),
+      end: TimeHelper.getDateFormTime(_value[1]),
+    }
+  } else {
+    value.value = <IDateTimeRangeResponse>{
+      start: _value[0],
+      end: _value[1],
+    }
+  }
+}
+</script>

package/dist/runtime/components/Form/InputNumber/index.vue

@@ -1,27 +1,27 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <UInput
-      v-model.number="value"
-      type="number"
-      :disabled="wrapperProps.isDisabled"
-      :leading-icon="leadingIcon"
-      :trailing-icon="trailingIcon"
-      :name="name"
-      :placeholder="wrapperProps.placeholder"
-      :autofocus="!!autoFocus"
-      :icon="icon"
-      :readonly="isReadonly"
-      :ui="_deepMerge({}, ui, { icon: { trailing: { pointer: '' } } })"
-    />
-  </FieldWrapper>
-</template>
-<script lang="ts" setup>
-import { _deepMerge } from '#imports'
-import { useFieldHOC } from '#core/composables/useForm'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import type { INumberFieldProps } from '#core/components/Form/InputNumber/types'
-
-const props = withDefaults(defineProps<INumberFieldProps>(), {})
-
-const { value, wrapperProps } = useFieldHOC<number>(props)
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <UInput
+      v-model.number="value"
+      type="number"
+      :disabled="wrapperProps.isDisabled"
+      :leading-icon="leadingIcon"
+      :trailing-icon="trailingIcon"
+      :name="name"
+      :placeholder="wrapperProps.placeholder"
+      :autofocus="!!autoFocus"
+      :icon="icon"
+      :readonly="isReadonly"
+      :ui="_deepMerge({}, ui, { icon: { trailing: { pointer: '' } } })"
+    />
+  </FieldWrapper>
+</template>
+<script lang="ts" setup>
+import { _deepMerge } from '#imports'
+import { useFieldHOC } from '#core/composables/useForm'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+import type { INumberFieldProps } from '#core/components/Form/InputNumber/types'
+
+const props = withDefaults(defineProps<INumberFieldProps>(), {})
+
+const { value, wrapperProps } = useFieldHOC<number>(props)
+</script>

package/dist/runtime/components/Form/InputRadio/index.vue

@@ -1,27 +1,27 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <URadioGroup
-      v-model="value"
-      :options="options"
-      :disabled="wrapperProps.isDisabled"
-      :required="isRequired"
-      value-attribute="value"
-      option-attribute="label"
-      :icon="icon"
-      :color="color"
-      :size="size"
-      :ui="ui"
-      :ui-menu="uiMenu"
-    />
-  </FieldWrapper>
-</template>
-
-<script lang="ts" setup>
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import { useFieldHOC } from '#core/composables/useForm'
-import { type ISelectFieldProps } from '#core/components/Form/InputSelect/types'
-
-const props = withDefaults(defineProps<ISelectFieldProps>(), {})
-
-const { value, wrapperProps } = useFieldHOC<any>(props)
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <URadioGroup
+      v-model="value"
+      :options="options"
+      :disabled="wrapperProps.isDisabled"
+      :required="isRequired"
+      value-attribute="value"
+      option-attribute="label"
+      :icon="icon"
+      :color="color"
+      :size="size"
+      :ui="ui"
+      :ui-menu="uiMenu"
+    />
+  </FieldWrapper>
+</template>
+
+<script lang="ts" setup>
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+import { useFieldHOC } from '#core/composables/useForm'
+import { type ISelectFieldProps } from '#core/components/Form/InputSelect/types'
+
+const props = withDefaults(defineProps<ISelectFieldProps>(), {})
+
+const { value, wrapperProps } = useFieldHOC<any>(props)
+</script>

package/dist/runtime/components/Form/InputSelect/index.vue

@@ -1,45 +1,45 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <USelectMenu
-      :model-value="value"
-      searchable
-      :options="options"
-      :placeholder="placeholder || label"
-      :disabled="wrapperProps.isDisabled"
-      :loading="loading"
-      :searchable-placeholder="searchablePlaceholder"
-      value-attribute="value"
-      option-attribute="label"
-      :icon="icon"
-      :color="color"
-      :size="size"
-      :ui="ui"
-      :ui-menu="uiMenu"
-      @update:modelValue="onChange"
-    >
-      <template #label>
-        <span v-if="value" class="truncate">
-          {{ options.find((item) => item.value === value)?.label || value }}
-        </span>
-      </template>
-    </USelectMenu>
-  </FieldWrapper>
-</template>
-
-<script lang="ts" setup>
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import { useFieldHOC } from '#core/composables/useForm'
-import { type ISelectFieldProps } from '#core/components/Form/InputSelect/types'
-
-const emits = defineEmits(['change'])
-const props = withDefaults(defineProps<ISelectFieldProps>(), {
-  searchablePlaceholder: 'ค้นหา...',
-})
-
-const { value, wrapperProps, handleChange } = useFieldHOC<any>(props)
-
-const onChange = (value: any) => {
-  handleChange(value)
-  emits('change', value)
-}
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <USelectMenu
+      :model-value="value"
+      searchable
+      :options="options"
+      :placeholder="placeholder || label"
+      :disabled="wrapperProps.isDisabled"
+      :loading="loading"
+      :searchable-placeholder="searchablePlaceholder"
+      value-attribute="value"
+      option-attribute="label"
+      :icon="icon"
+      :color="color"
+      :size="size"
+      :ui="ui"
+      :ui-menu="uiMenu"
+      @update:modelValue="onChange"
+    >
+      <template #label>
+        <span v-if="value" class="truncate">
+          {{ options.find((item) => item.value === value)?.label || value }}
+        </span>
+      </template>
+    </USelectMenu>
+  </FieldWrapper>
+</template>
+
+<script lang="ts" setup>
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+import { useFieldHOC } from '#core/composables/useForm'
+import { type ISelectFieldProps } from '#core/components/Form/InputSelect/types'
+
+const emits = defineEmits(['change'])
+const props = withDefaults(defineProps<ISelectFieldProps>(), {
+  searchablePlaceholder: 'ค้นหา...',
+})
+
+const { value, wrapperProps, handleChange } = useFieldHOC<any>(props)
+
+const onChange = (value: any) => {
+  handleChange(value)
+  emits('change', value)
+}
+</script>

package/dist/runtime/components/Form/InputSelectMultiple/index.vue

@@ -1,54 +1,54 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <USelectMenu
-      :model-value="value || []"
-      searchable
-      multiple
-      :options="options"
-      :placeholder="placeholder || label"
-      :disabled="wrapperProps.isDisabled"
-      :loading="loading"
-      :searchable-placeholder="searchablePlaceholder"
-      value-attribute="value"
-      option-attribute="label"
-      :icon="icon"
-      :color="color"
-      :size="size"
-      :ui="ui"
-      :ui-menu="uiMenu"
-      @update:model-value="value = $event"
-    >
-      <template #label>
-        <div v-if="ArrayHelper.toArray(value).length > 0" class="flex flex-wrap gap-x-2 gap-y-1">
-          <Badge v-for="_value in ArrayHelper.toArray(value)" :key="_value">
-            <div class="flex items-center gap-x-1">
-              {{ options.find((item) => item.value === _value)?.label || _value }}
-              <Icon
-                name="i-heroicons:x-circle-20-solid"
-                class="size-4 cursor-pointer hover:text-gray-200"
-                @click.prevent="handleDelete(_value)"
-              />
-            </div>
-          </Badge>
-        </div>
-      </template>
-    </USelectMenu>
-  </FieldWrapper>
-</template>
-
-<script lang="ts" setup>
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import { useFieldHOC } from '#core/composables/useForm'
-import type { ISelectMultipleFieldProps } from '#core/components/Form/InputSelectMultiple/types'
-import { ArrayHelper } from '#core/utils/ArrayHelper'
-
-const props = withDefaults(defineProps<ISelectMultipleFieldProps>(), {
-  searchablePlaceholder: 'ค้นหา...',
-})
-
-const { value, wrapperProps } = useFieldHOC<any[]>(props)
-
-const handleDelete = (_value: any) => {
-  value.value = ArrayHelper.toArray(value.value).filter((item: any) => item !== _value)
-}
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <USelectMenu
+      :model-value="value || []"
+      searchable
+      multiple
+      :options="options"
+      :placeholder="placeholder || label"
+      :disabled="wrapperProps.isDisabled"
+      :loading="loading"
+      :searchable-placeholder="searchablePlaceholder"
+      value-attribute="value"
+      option-attribute="label"
+      :icon="icon"
+      :color="color"
+      :size="size"
+      :ui="ui"
+      :ui-menu="uiMenu"
+      @update:model-value="value = $event"
+    >
+      <template #label>
+        <div v-if="ArrayHelper.toArray(value).length > 0" class="flex flex-wrap gap-x-2 gap-y-1">
+          <Badge v-for="_value in ArrayHelper.toArray(value)" :key="_value">
+            <div class="flex items-center gap-x-1">
+              {{ options.find((item) => item.value === _value)?.label || _value }}
+              <Icon
+                name="i-heroicons:x-circle-20-solid"
+                class="size-4 cursor-pointer hover:text-gray-200"
+                @click.prevent="handleDelete(_value)"
+              />
+            </div>
+          </Badge>
+        </div>
+      </template>
+    </USelectMenu>
+  </FieldWrapper>
+</template>
+
+<script lang="ts" setup>
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+import { useFieldHOC } from '#core/composables/useForm'
+import type { ISelectMultipleFieldProps } from '#core/components/Form/InputSelectMultiple/types'
+import { ArrayHelper } from '#core/utils/ArrayHelper'
+
+const props = withDefaults(defineProps<ISelectMultipleFieldProps>(), {
+  searchablePlaceholder: 'ค้นหา...',
+})
+
+const { value, wrapperProps } = useFieldHOC<any[]>(props)
+
+const handleDelete = (_value: any) => {
+  value.value = ArrayHelper.toArray(value.value).filter((item: any) => item !== _value)
+}
+</script>

package/dist/runtime/components/Form/InputStatic/index.vue

@@ -1,16 +1,16 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps" :is-required="false">
-    <p class="form-control-static">
-      {{ !value || value.length === 0 ? '-' : value }}
-    </p>
-  </FieldWrapper>
-</template>
-<script lang="ts" setup>
-import { type IStaticFieldProps } from '#core/components/Form/InputStatic/types'
-import { useFieldHOC } from '#core/composables/useForm'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-
-const props = withDefaults(defineProps<IStaticFieldProps>(), {})
-
-const { value, wrapperProps } = useFieldHOC<string>(props)
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps" :is-required="false">
+    <p class="form-control-static">
+      {{ !value || value.length === 0 ? '-' : value }}
+    </p>
+  </FieldWrapper>
+</template>
+<script lang="ts" setup>
+import { type IStaticFieldProps } from '#core/components/Form/InputStatic/types'
+import { useFieldHOC } from '#core/composables/useForm'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+
+const props = withDefaults(defineProps<IStaticFieldProps>(), {})
+
+const { value, wrapperProps } = useFieldHOC<string>(props)
+</script>