@finema/core 1.4.115 → 1.4.117

package/dist/runtime/components/FlexDeck/index.vue

@@ -1,66 +1,66 @@
-<template>
-  <div>
-    <div v-if="options.isEnabledSearch" class="mb-4 flex justify-end">
-      <UInput
-        v-model="q"
-        icon="i-heroicons-magnifying-glass"
-        :placeholder="options.searchPlaceholder || 'ค้นหา...'"
-      />
-    </div>
-    <Base
-      :raw-data="options.rawData"
-      :status="options.status"
-      :page-options="options.pageOptions"
-      :is-simple-pagination="isShowSimplePagination"
-      :is-hide-bottom-pagination="options.isHideBottomPagination"
-      :container-class="containerClass"
-      @page-change="onPageChange"
-    >
-      <template v-for="(_, slot) of $slots" #[slot]="slotProps">
-        <slot :name="slot" v-bind="slotProps || {}" />
-      </template>
-    </Base>
-  </div>
-</template>
-<script lang="ts" setup>
-import { type PropType } from 'vue'
-import { _debounce, computed, ref, watch } from '#imports'
-import { useCoreConfig } from '#core/composables/useConfig'
-import Base from '#core/components/FlexDeck/Base.vue'
-import type { IFlexDeckOptions } from '#core/components/FlexDeck/types'
-
-defineSlots<{
-  default: (props: { row: any }) => any
-  'empty-state': () => any
-  'loading-state': () => any
-}>()
-
-const emits = defineEmits<{
-  (event: 'pageChange', page: number): void
-  (event: 'search', q: string): void
-}>()
-
-const props = defineProps({
-  options: { type: Object as PropType<IFlexDeckOptions>, required: true },
-  containerClass: { type: [String, Array, Object], default: '' },
-})
-
-const coreConfig = useCoreConfig()
-
-const q = ref(props.options?.pageOptions.search ?? '')
-
-const isShowSimplePagination = computed(
-  (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
-)
-
-watch(
-  q,
-  _debounce((value) => {
-    emits('search', value)
-  }, 500)
-)
-
-const onPageChange = (page: number) => {
-  emits('pageChange', page)
-}
-</script>
+<template>
+  <div>
+    <div v-if="options.isEnabledSearch" class="mb-4 flex justify-end">
+      <UInput
+        v-model="q"
+        icon="i-heroicons-magnifying-glass"
+        :placeholder="options.searchPlaceholder || 'ค้นหา...'"
+      />
+    </div>
+    <Base
+      :raw-data="options.rawData"
+      :status="options.status"
+      :page-options="options.pageOptions"
+      :is-simple-pagination="isShowSimplePagination"
+      :is-hide-bottom-pagination="options.isHideBottomPagination"
+      :container-class="containerClass"
+      @page-change="onPageChange"
+    >
+      <template v-for="(_, slot) of $slots" #[slot]="slotProps">
+        <slot :name="slot" v-bind="slotProps || {}" />
+      </template>
+    </Base>
+  </div>
+</template>
+<script lang="ts" setup>
+import { type PropType } from 'vue'
+import { _debounce, computed, ref, watch } from '#imports'
+import { useCoreConfig } from '#core/composables/useConfig'
+import Base from '#core/components/FlexDeck/Base.vue'
+import type { IFlexDeckOptions } from '#core/components/FlexDeck/types'
+
+defineSlots<{
+  default: (props: { row: any }) => any
+  'empty-state': () => any
+  'loading-state': () => any
+}>()
+
+const emits = defineEmits<{
+  (event: 'pageChange', page: number): void
+  (event: 'search', q: string): void
+}>()
+
+const props = defineProps({
+  options: { type: Object as PropType<IFlexDeckOptions>, required: true },
+  containerClass: { type: [String, Array, Object], default: '' },
+})
+
+const coreConfig = useCoreConfig()
+
+const q = ref(props.options?.pageOptions.search ?? '')
+
+const isShowSimplePagination = computed(
+  (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
+)
+
+watch(
+  q,
+  _debounce((value) => {
+    emits('search', value)
+  }, 500)
+)
+
+const onPageChange = (page: number) => {
+  emits('pageChange', page)
+}
+</script>

package/dist/runtime/components/Form/FieldWrapper.vue

@@ -1,23 +1,23 @@
-<template>
-  <UFormGroup
-    :label="label"
-    :name="name"
-    :description="description"
-    :hint="hint"
-    :size="size as FormGroupSize"
-    :data-testid="name"
-    :help="help"
-    :error="errorMessage"
-    :required="!!isRequired"
-    :ui="containerUi"
-  >
-    <slot />
-  </UFormGroup>
-</template>
-
-<script lang="ts" setup>
-import { type IFieldProps } from '#core/components/Form/types'
-import type { FormGroupSize } from '#ui/types'
-
-defineProps<IFieldProps>()
-</script>
+<template>
+  <UFormGroup
+    :label="label"
+    :name="name"
+    :description="description"
+    :hint="hint"
+    :size="size as FormGroupSize"
+    :data-testid="name"
+    :help="help"
+    :error="errorMessage"
+    :required="!!isRequired"
+    :ui="containerUi"
+  >
+    <slot />
+  </UFormGroup>
+</template>
+
+<script lang="ts" setup>
+import { type IFieldProps } from '#core/components/Form/types'
+import type { FormGroupSize } from '#ui/types'
+
+defineProps<IFieldProps>()
+</script>

package/dist/runtime/components/Form/Fields.vue

@@ -1,222 +1,230 @@
-<template>
-  <div :class="['fields', $props.class]">
-    <template
-      v-for="(option, index) in options.filter((item) => !item.isHide)"
-      :key="option.props.name + index + option.type"
-    >
-      <FormInputStatic
-        v-if="option.type === INPUT_TYPES.STATIC"
-        :class="option.class"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputText
-        v-else-if="option.type === INPUT_TYPES.TEXT"
-        :class="option.class"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputNumber
-        v-else-if="option.type === INPUT_TYPES.NUMBER"
-        :class="option.class"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputText
-        v-else-if="option.type === INPUT_TYPES.PASSWORD"
-        :class="option.class"
-        type="password"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputText
-        v-else-if="option.type === INPUT_TYPES.EMAIL"
-        :class="option.class"
-        type="email"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputTextarea
-        v-else-if="option.type === INPUT_TYPES.TEXTAREA"
-        :class="option.class"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputToggle
-        v-else-if="option.type === INPUT_TYPES.TOGGLE"
-        :class="option.class"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputSelect
-        v-else-if="option.type === INPUT_TYPES.SELECT"
-        :class="option.class"
-        :form="form"
-        :options="option.props.options"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputRadio
-        v-else-if="option.type === INPUT_TYPES.RADIO"
-        :class="option.class"
-        :form="form"
-        :options="option.props.options"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputCheckbox
-        v-else-if="option.type === INPUT_TYPES.CHECKBOX"
-        :class="option.class"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputDateTime
-        v-else-if="option.type === INPUT_TYPES.DATE_TIME"
-        :class="option.class"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputDateTime
-        v-else-if="option.type === INPUT_TYPES.DATE"
-        :class="option.class"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        :disabled-time="true"
-        v-on="option.on ?? {}"
-      />
-      <FormInputDateTimeRange
-        v-else-if="option.type === INPUT_TYPES.DATE_TIME_RANGE"
-        :class="option.class"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputDateTimeRange
-        v-else-if="option.type === INPUT_TYPES.DATE_RANGE"
-        :class="option.class"
-        :form="form"
-        :disabled-time="true"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputUploadFileClassic
-        v-else-if="option.type === INPUT_TYPES.UPLOAD_FILE_CLASSIC"
-        :class="option.class"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputUploadFileClassicAuto
-        v-else-if="option.type === INPUT_TYPES.UPLOAD_FILE_CLASSIC_AUTO"
-        :class="option.class"
-        :form="form"
-        :request-options="option.props.requestOptions"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputUploadImageAuto
-        v-else-if="option.type === INPUT_TYPES.UPLOAD_IMAGE_AUTO"
-        :class="option.class"
-        :form="form"
-        :request-options="option.props.requestOptions"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputUploadDropzone
-        v-else-if="option.type === INPUT_TYPES.UPLOAD_DROPZONE"
-        :class="option.class"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputUploadDropzoneAuto
-        v-else-if="option.type === INPUT_TYPES.UPLOAD_DROPZONE_AUTO"
-        :class="option.class"
-        :form="form"
-        :request-options="option.props.requestOptions"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputUploadDropzoneAutoMultiple
-        v-else-if="option.type === INPUT_TYPES.UPLOAD_DROPZONE_AUTO_MULTIPLE"
-        :class="option.class"
-        :form="form"
-        :request-options="option.props.requestOptions"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputUploadDropzoneImageAutoMultiple
-        v-else-if="option.type === INPUT_TYPES.UPLOAD_DROPZONE_IMAGE_AUTO_MULTIPLE"
-        :class="option.class"
-        :form="form"
-        :request-options="option.props.requestOptions"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputWYSIWYG
-        v-else-if="option.type === INPUT_TYPES.WYSIWYG"
-        :class="option.class"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <FormInputTags
-        v-else-if="option.type === INPUT_TYPES.TAGS"
-        :class="option.class"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-      <component
-        :is="option.component"
-        v-else-if="option.type === INPUT_TYPES.COMPONENT"
-        :class="option.class"
-        :form="form"
-        v-bind="getFieldBinding(option)"
-        v-on="option.on ?? {}"
-      />
-    </template>
-  </div>
-</template>
-<script lang="ts" setup>
-import { type FormContext } from 'vee-validate'
-import { type IFormField, INPUT_TYPES } from '#core/components/Form/types'
-
-const props = withDefaults(
-  defineProps<{
-    form?: FormContext
-    options: IFormField[]
-    orientation?: 'horizontal' | 'vertical'
-    class?: any
-  }>(),
-  {
-    class: 'space-y-4',
-    orientation: 'vertical',
-  }
-)
-
-const getFieldBinding = (field: IFormField) => {
-  if (props.orientation === 'horizontal') {
-    return {
-      ...field.props,
-      containerUi: {
-        ...field.props.containerUi,
-        wrapper:
-          'lg:grid lg:grid-cols-3 lg:gap-4 lg:items-start ' + field.props.containerUi?.wrapper,
-        container: 'lg:col-span-2 ' + field.props.containerUi?.container,
-      },
-    }
-  }
-
-  return field.props
-}
-</script>
+<template>
+  <div :class="['fields', $props.class]">
+    <template
+      v-for="(option, index) in options.filter((item) => !item.isHide)"
+      :key="option.props.name + index + option.type"
+    >
+      <FormInputStatic
+        v-if="option.type === INPUT_TYPES.STATIC"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputText
+        v-else-if="option.type === INPUT_TYPES.TEXT"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputNumber
+        v-else-if="option.type === INPUT_TYPES.NUMBER"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputText
+        v-else-if="option.type === INPUT_TYPES.PASSWORD"
+        :class="option.class"
+        type="password"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputText
+        v-else-if="option.type === INPUT_TYPES.EMAIL"
+        :class="option.class"
+        type="email"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputTextarea
+        v-else-if="option.type === INPUT_TYPES.TEXTAREA"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputToggle
+        v-else-if="option.type === INPUT_TYPES.TOGGLE"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputSelect
+        v-else-if="option.type === INPUT_TYPES.SELECT"
+        :class="option.class"
+        :form="form"
+        :options="option.props.options"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputSelectMultiple
+        v-else-if="option.type === INPUT_TYPES.SELECT_MULTIPLE"
+        :class="option.class"
+        :form="form"
+        :options="option.props.options"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputRadio
+        v-else-if="option.type === INPUT_TYPES.RADIO"
+        :class="option.class"
+        :form="form"
+        :options="option.props.options"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputCheckbox
+        v-else-if="option.type === INPUT_TYPES.CHECKBOX"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputDateTime
+        v-else-if="option.type === INPUT_TYPES.DATE_TIME"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputDateTime
+        v-else-if="option.type === INPUT_TYPES.DATE"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        :disabled-time="true"
+        v-on="option.on ?? {}"
+      />
+      <FormInputDateTimeRange
+        v-else-if="option.type === INPUT_TYPES.DATE_TIME_RANGE"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputDateTimeRange
+        v-else-if="option.type === INPUT_TYPES.DATE_RANGE"
+        :class="option.class"
+        :form="form"
+        :disabled-time="true"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputUploadFileClassic
+        v-else-if="option.type === INPUT_TYPES.UPLOAD_FILE_CLASSIC"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputUploadFileClassicAuto
+        v-else-if="option.type === INPUT_TYPES.UPLOAD_FILE_CLASSIC_AUTO"
+        :class="option.class"
+        :form="form"
+        :request-options="option.props.requestOptions"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputUploadImageAuto
+        v-else-if="option.type === INPUT_TYPES.UPLOAD_IMAGE_AUTO"
+        :class="option.class"
+        :form="form"
+        :request-options="option.props.requestOptions"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputUploadDropzone
+        v-else-if="option.type === INPUT_TYPES.UPLOAD_DROPZONE"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputUploadDropzoneAuto
+        v-else-if="option.type === INPUT_TYPES.UPLOAD_DROPZONE_AUTO"
+        :class="option.class"
+        :form="form"
+        :request-options="option.props.requestOptions"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputUploadDropzoneAutoMultiple
+        v-else-if="option.type === INPUT_TYPES.UPLOAD_DROPZONE_AUTO_MULTIPLE"
+        :class="option.class"
+        :form="form"
+        :request-options="option.props.requestOptions"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputUploadDropzoneImageAutoMultiple
+        v-else-if="option.type === INPUT_TYPES.UPLOAD_DROPZONE_IMAGE_AUTO_MULTIPLE"
+        :class="option.class"
+        :form="form"
+        :request-options="option.props.requestOptions"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputWYSIWYG
+        v-else-if="option.type === INPUT_TYPES.WYSIWYG"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputTags
+        v-else-if="option.type === INPUT_TYPES.TAGS"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <component
+        :is="option.component"
+        v-else-if="option.type === INPUT_TYPES.COMPONENT"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+    </template>
+  </div>
+</template>
+<script lang="ts" setup>
+import { type FormContext } from 'vee-validate'
+import { type IFormField, INPUT_TYPES } from '#core/components/Form/types'
+
+const props = withDefaults(
+  defineProps<{
+    form?: FormContext
+    options: IFormField[]
+    orientation?: 'horizontal' | 'vertical'
+    class?: any
+  }>(),
+  {
+    class: 'space-y-4',
+    orientation: 'vertical',
+  }
+)
+
+const getFieldBinding = (field: IFormField) => {
+  if (props.orientation === 'horizontal') {
+    return {
+      ...field.props,
+      containerUi: {
+        ...field.props.containerUi,
+        wrapper:
+          'lg:grid lg:grid-cols-3 lg:gap-4 lg:items-start ' + field.props.containerUi?.wrapper,
+        container: 'lg:col-span-2 ' + field.props.containerUi?.container,
+      },
+    }
+  }
+
+  return field.props
+}
+</script>