@finema/core 1.4.220 → 2.1.0

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

@@ -1,230 +1,92 @@
-<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>
+<template>
+  <div
+    :class="[theme.base({
+  class: [$props.class, ui?.base]
+})]"
+  >
+    <component
+      :is="componentMap[option.type] || option.component"
+      v-for="option in options.filter((item) => !item.isHide)"
+      :key="option.props.name"
+      :class="option.class"
+      :form="form"
+      v-bind="getFieldBinding(option)"
+      v-on="option.on ?? {}"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import FormInputTextarea from "./InputTextarea/index.vue";
+import FormInputText from "./InputText/index.vue";
+import FormInputNumber from "./InputNumber/index.vue";
+import FormInputToggle from "./InputToggle/index.vue";
+import FormInputCheckbox from "./InputCheckbox/index.vue";
+import FormInputSelect from "./InputSelect/index.vue";
+import FormInputSelectMultiple from "./InputSelectMultiple/index.vue";
+import FormInputDateTime from "./InputDateTime/index.vue";
+import { INPUT_TYPES } from "#core/components/Form/types";
+import { formTheme } from "#core/theme/form";
+import { useUiConfig } from "#core/composables/useConfig";
+const props = defineProps({
+  form: { type: Object, required: false },
+  options: { type: Array, required: true },
+  orientation: { type: String, required: false, default: "vertical" },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const componentMap = {
+  [INPUT_TYPES.TEXT]: FormInputText,
+  [INPUT_TYPES.TEXTAREA]: FormInputTextarea,
+  [INPUT_TYPES.TOGGLE]: FormInputToggle,
+  [INPUT_TYPES.CHECKBOX]: FormInputCheckbox,
+  [INPUT_TYPES.SELECT]: FormInputSelect,
+  [INPUT_TYPES.SELECT_MULTIPLE]: FormInputSelectMultiple,
+  // For INPUT_TYPES.COMPONENT, it will use option.component directly from the template
+  [INPUT_TYPES.COMPONENT]: void 0,
+  // Add other INPUT_TYPES here if they have dedicated components not covered by option.component
+  [INPUT_TYPES.NUMBER]: FormInputNumber,
+  // Example: Map to FormInputText or a specific Number input if exists
+  [INPUT_TYPES.PASSWORD]: void 0,
+  // Example: Map to FormInputText or a specific Password input if exists
+  [INPUT_TYPES.EMAIL]: void 0,
+  // Example: Map to FormInputText or a specific Email input if exists
+  [INPUT_TYPES.STATIC]: void 0,
+  [INPUT_TYPES.RADIO]: void 0,
+  [INPUT_TYPES.DATE_TIME]: FormInputDateTime,
+  [INPUT_TYPES.DATE]: void 0,
+  [INPUT_TYPES.DATE_RANGE]: void 0,
+  [INPUT_TYPES.DATE_TIME_RANGE]: void 0,
+  [INPUT_TYPES.UPLOAD_FILE_CLASSIC]: void 0,
+  [INPUT_TYPES.UPLOAD_FILE_CLASSIC_AUTO]: void 0,
+  [INPUT_TYPES.UPLOAD_IMAGE_AUTO]: void 0,
+  [INPUT_TYPES.UPLOAD_DROPZONE]: void 0,
+  [INPUT_TYPES.UPLOAD_DROPZONE_AUTO]: void 0,
+  [INPUT_TYPES.UPLOAD_DROPZONE_AUTO_MULTIPLE]: void 0,
+  [INPUT_TYPES.UPLOAD_DROPZONE_IMAGE_AUTO_MULTIPLE]: void 0,
+  [INPUT_TYPES.WYSIWYG]: void 0,
+  [INPUT_TYPES.TAGS]: void 0
+};
+const theme = computed(() => useUiConfig(formTheme, "form")({ orientation: props.orientation }));
+const getFieldBinding = (field) => {
+  const {
+    props: fieldProps,
+    ui: fieldUi
+  } = field;
+  const allProps = {
+    ...fieldProps,
+    containerUi: { ...fieldUi }
+  };
+  if (props.orientation === "horizontal") {
+    return {
+      ...allProps,
+      containerUi: {
+        root: theme.value.wrapper({ class: [props.ui?.wrapper] }),
+        labelWrapper: theme.value.container({ class: [props.ui?.container] })
+      }
+    };
+  }
+  return allProps;
+};
+</script>

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

@@ -0,0 +1,14 @@
+import type { FormContext } from 'vee-validate';
+import { type IFormField } from '#core/components/Form/types';
+import { formTheme } from '#core/theme/form';
+type __VLS_Props = {
+    form?: FormContext;
+    options: IFormField[];
+    orientation?: 'horizontal' | 'vertical';
+    class?: any;
+    ui?: typeof formTheme['slots'];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,28 +1,53 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps" label="">
-    <UCheckbox
-      :model-value="value"
-      :disabled="wrapperProps.isDisabled"
-      :name="name"
-      :label="props.label"
-      :required="isRequired"
-      :ui="ui"
-      @update:modelValue="onChange"
-    />
-  </FieldWrapper>
-</template>
-<script lang="ts" setup>
-import { useFieldHOC } from '#core/composables/useForm'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import { type ICheckboxFieldProps } from '#core/components/Form/InputCheckbox/types'
-
-const emits = defineEmits(['change'])
-const props = withDefaults(defineProps<ICheckboxFieldProps>(), {})
-
-const { value, wrapperProps, handleChange } = useFieldHOC<boolean>(props)
-
-const onChange = (value: any) => {
-  handleChange(value)
-  emits('change', value)
-}
-</script>
+<template>
+  <FieldWrapper
+    v-bind="wrapperProps"
+    label=""
+    description=""
+  >
+    <Checkbox
+      :model-value="value"
+      :disabled="wrapperProps.disabled"
+      :name="name"
+      :label="label"
+      :description="description"
+      :required="required"
+      :variant="variant"
+      :indicator="indicator"
+      :ui="ui"
+      @update:modelValue="onChange"
+    />
+  </FieldWrapper>
+</template>
+
+<script setup>
+import { useFieldHOC } from "#core/composables/useForm";
+import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
+const emits = defineEmits(["change"]);
+const props = defineProps({
+  label: { type: String, required: false },
+  description: { type: String, required: false },
+  variant: { type: String, required: false },
+  indicator: { type: String, required: false },
+  form: { type: Object, required: false },
+  name: { type: String, required: true },
+  errorMessage: { type: String, required: false },
+  hint: { type: String, required: false },
+  rules: { type: null, required: false },
+  autoFocus: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  help: { type: String, required: false },
+  ui: { type: null, required: false }
+});
+const {
+  value,
+  wrapperProps,
+  handleChange
+} = useFieldHOC(props);
+const onChange = (value2) => {
+  handleChange(value2);
+  emits("change", value2);
+};
+</script>

package/dist/runtime/components/Form/InputCheckbox/index.vue.d.ts

@@ -0,0 +1,3 @@
+import type { ICheckboxFieldProps } from '#core/components/Form/InputCheckbox/types';
+declare const _default: import("vue").DefineComponent<ICheckboxFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Form/InputCheckbox/types.d.ts

@@ -1,5 +1,9 @@
-import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '#core/components/Form/types';
+import type { IFieldProps, IFormFieldBase, INPUT_TYPES } from '#core/components/Form/types';
 export interface ICheckboxFieldProps extends IFieldProps {
+    label?: string;
+    description?: string;
+    variant?: 'card' | 'list';
+    indicator?: 'start' | 'end' | 'hidden';
 }
 export type ICheckboxField = IFormFieldBase<INPUT_TYPES.CHECKBOX, ICheckboxFieldProps, {
     change?: (value: boolean) => void;

package/dist/runtime/components/Form/InputDateTime/date_time_field.types.d.ts

@@ -1,4 +1,4 @@
-import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '#core/components/Form/types';
+import type { IFieldProps, IFormFieldBase, INPUT_TYPES } from '#core/components/Form/types';
 export interface ITimeOption {
     hours?: number | string;
     minutes?: number | string;

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

@@ -1,68 +1,97 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <Datepicker
-      :model-value="value"
-      :disabled="wrapperProps.isDisabled"
-      cancel-text="ยกเลิก"
-      select-text="เลือก"
-      locale="th"
-      :enable-time-picker="!disabledTime"
-      :placeholder="wrapperProps.placeholder"
-      :format="format"
-      :min-date="minDate"
-      :max-date="maxDate"
-      :min-time="minTime"
-      :max-time="maxTime"
-      :start-time="startTime"
-      :required="isRequired"
-      time-picker-inline
-      @update:model-value="onInput"
-    >
-      <template v-if="appConfig.core?.is_thai_year" #year="{ value }">
-        {{ value + 543 }}
-      </template>
-      <template v-if="appConfig.core?.is_thai_year" #year-overlay-value="{ value }">
-        {{ value + 543 }}
-      </template>
-      <template #dp-input="{ value: innerValue }">
-        <UInput
-          :trailing-icon="innerValue ? undefined : 'i-heroicons-calendar-days'"
-          type="text"
-          :disabled="wrapperProps.isDisabled"
-          :model-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 { type IDateTimeFieldProps } from '#core/components/Form/InputDateTime/date_time_field.types'
-import { TimeHelper, useFieldHOC, useAppConfig } from '#imports'
-import '@vuepic/vue-datepicker/dist/main.css'
-
-const props = withDefaults(defineProps<IDateTimeFieldProps>(), {})
-
-const appConfig = useAppConfig()
-const { value, wrapperProps } = useFieldHOC<string>(props)
-
-const format = (date: Date) => {
-  if (props.disabledTime) {
-    return TimeHelper.displayDate(date)
-  }
-
-  return TimeHelper.displayDateTime(date)
-}
-
-const onInput = (_value: any) => {
-  if (props.disabledTime && !props.isReturnISO) {
-    value.value = TimeHelper.getDateFormTime(_value)
-  } else {
-    value.value = _value
-  }
-}
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <Datepicker
+      :model-value="value"
+      :disabled="wrapperProps.disabled"
+      cancel-text="ยกเลิก"
+      select-text="เลือก"
+      locale="th"
+      :enable-time-picker="!disabledTime"
+      :placeholder="wrapperProps.placeholder"
+      :format="format"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :min-time="minTime"
+      :max-time="maxTime"
+      :start-time="startTime"
+      :required="required"
+      :flow="['calendar', 'time']"
+      @update:model-value="onInput"
+    >
+      <template
+        v-if="appConfig.core?.is_thai_year"
+        #year="{ value }"
+      >
+        {{ value + 543 }}
+      </template>
+      <template
+        v-if="appConfig.core?.is_thai_year"
+        #year-overlay-value="{ value }"
+      >
+        {{ value + 543 }}
+      </template>
+      <template #dp-input="{ value: innerValue }">
+        <Input
+          :trailing-icon="innerValue ? void 0 : 'i-heroicons-calendar-days'"
+          type="text"
+          :disabled="wrapperProps.disabled"
+          :model-value="innerValue"
+          :placeholder="wrapperProps.placeholder"
+          :readonly="true"
+          :ui="{
+  base: 'cursor-pointer select-none',
+  trailingIcon: 'cursor-pointer'
+}"
+        />
+      </template>
+    </Datepicker>
+  </FieldWrapper>
+</template>
+
+<script setup>
+import Datepicker from "@vuepic/vue-datepicker";
+import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
+import { TimeHelper, useAppConfig, useFieldHOC } from "#imports";
+import "@vuepic/vue-datepicker/dist/main.css";
+const props = defineProps({
+  disabledTime: { type: Boolean, required: false },
+  minDate: { type: [Date, String], required: false },
+  maxDate: { type: [Date, String], required: false },
+  startTime: { type: Object, required: false },
+  minTime: { type: Object, required: false },
+  maxTime: { type: Object, required: false },
+  isReturnISO: { type: Boolean, required: false },
+  form: { type: Object, required: false },
+  name: { type: String, required: true },
+  errorMessage: { type: String, required: false },
+  label: { type: null, required: false },
+  description: { type: String, required: false },
+  hint: { type: String, required: false },
+  rules: { type: null, required: false },
+  autoFocus: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  help: { type: String, required: false },
+  ui: { type: null, required: false }
+});
+const appConfig = useAppConfig();
+const {
+  value,
+  wrapperProps
+} = useFieldHOC(props);
+const format = (date) => {
+  if (props.disabledTime) {
+    return TimeHelper.displayDate(date);
+  }
+  return TimeHelper.displayDateTime(date);
+};
+const onInput = (_value) => {
+  if (props.disabledTime && !props.isReturnISO) {
+    value.value = TimeHelper.getDateFormTime(_value);
+  } else {
+    value.value = _value;
+  }
+};
+</script>

package/dist/runtime/components/Form/InputDateTime/index.vue.d.ts

@@ -0,0 +1,4 @@
+import '@vuepic/vue-datepicker/dist/main.css';
+import type { IDateTimeFieldProps } from '#core/components/Form/InputDateTime/date_time_field.types';
+declare const _default: import("vue").DefineComponent<IDateTimeFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IDateTimeFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;