@finema/core 1.4.219 → 2.1.0

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

@@ -1,55 +1,95 @@
 <template>
   <FieldWrapper v-bind="wrapperProps">
-    <USelectMenu
+    <SelectMenu
       :model-value="value"
-      :searchable="searchable as any"
-      :options="options"
-      :placeholder="placeholder || label"
-      :disabled="wrapperProps.isDisabled"
+      :items="options"
+      :placeholder="wrapperProps.placeholder"
+      :disabled="wrapperProps.disabled"
       :loading="loading"
-      :searchable-placeholder="searchablePlaceholder"
-      value-attribute="value"
-      option-attribute="label"
+      :search-input="searchInput"
+      :selected-icon="selectedIcon"
+      value-key="value"
+      label-key="label"
       :icon="icon"
-      :color="color"
-      :size="size"
       :ui="ui"
-      :ui-menu="uiMenu"
+      :leading-icon="options.find((item) => item.value === value)?.icon"
+      :avatar="options.find((item) => item.value === value)?.avatar"
       @update:modelValue="onChange"
+      @update:searchTerm="onSearch"
     >
-      <template #label>
-        <div v-if="value" class="flex w-full items-center justify-between">
-          <span class="truncate">
-            {{ options.find((item) => item.value === value)?.label || value }}
+      <template #default="{ modelValue }">
+        <div
+          v-if="value"
+          :class="theme.selectedWrapper({
+  class: [ui?.selectedWrapper]
+})"
+        >
+          <span
+            :class="theme.selectedLabel({
+  class: [ui?.selectedLabel]
+})"
+          >
+            {{ options.find((item) => item.value === modelValue)?.label || modelValue }}
           </span>
-
           <Icon
             v-if="clearable"
-            name="ph:x-circle-fill"
-            class="size-4 cursor-pointer text-gray-300 hover:text-gray-200"
-            @click.stop="onChange('')"
+            :name="clearIcon"
+            :class="theme.clearIcon({
+  class: [ui?.clearIcon]
+})"
+            @click.stop="onChange(void 0)"
           />
         </div>
       </template>
-    </USelectMenu>
+    </SelectMenu>
   </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: 'ค้นหา...',
-  searchable: true,
-})
-
-const { value, wrapperProps, handleChange } = useFieldHOC<any>(props)
-
-const onChange = (value: any) => {
-  handleChange(value)
-  emits('change', value)
-}
+<script setup>
+import { computed } from "vue";
+import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
+import { useFieldHOC } from "#core/composables/useForm";
+import { selectMenuTheme } from "#core/theme/selectMenu";
+import { useUiConfig } from "#core/composables/useConfig";
+const emits = defineEmits([
+  "change"
+  // 'search',
+]);
+const props = defineProps({
+  icon: { type: String, required: false },
+  trailingIcon: { type: String, required: false },
+  clearIcon: { type: String, required: false, default: "ph:x-circle-fill" },
+  selectedIcon: { type: String, required: false },
+  searchInput: { type: Object, required: false },
+  clearable: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  options: { type: Array, required: true },
+  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 theme = computed(() => useUiConfig(selectMenuTheme, "select")());
+const {
+  value,
+  wrapperProps,
+  handleChange
+} = useFieldHOC(props);
+const onChange = (value2) => {
+  handleChange(value2);
+  emits("change", value2);
+};
+const onSearch = (value2) => {
+  emits("search", value2);
+};
 </script>

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

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

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

@@ -1,17 +1,23 @@
 import type { IFieldProps, IFormFieldBase, INPUT_TYPES } from '#core/components/Form/types';
-import { type IOption } from '#core/types/common';
-import type { SelectSize } from '#ui/types';
+import type { SelectMenuItem } from '#ui/components/SelectMenu.vue';
+export type SelectOption = SelectMenuItem & {
+    label?: string;
+    value?: any;
+};
 export interface ISelectFieldProps extends IFieldProps {
-    color?: string;
     icon?: string;
-    size?: SelectSize;
-    searchablePlaceholder?: string;
+    trailingIcon?: string;
+    clearIcon?: string;
+    selectedIcon?: string;
+    searchInput?: {
+        placeholder?: string;
+        icon?: string;
+    };
     clearable?: boolean;
     loading?: boolean;
-    uiMenu?: object | any;
-    options: IOption[];
-    searchable?: ((q: string) => PromiseLike<IOption[]>) | boolean;
+    options: SelectOption[];
 }
 export type ISelectField = IFormFieldBase<INPUT_TYPES.SELECT, ISelectFieldProps, {
     change?: (value: string) => void;
+    search?: (value: string) => void;
 }>;

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

@@ -1,54 +1,108 @@
 <template>
   <FieldWrapper v-bind="wrapperProps">
-    <USelectMenu
-      :model-value="value || []"
-      searchable
+    <SelectMenu
+      :model-value="value"
+      :items="options"
       multiple
-      :options="options"
-      :placeholder="placeholder || label"
-      :disabled="wrapperProps.isDisabled"
+      :placeholder="wrapperProps.placeholder"
+      :disabled="wrapperProps.disabled"
       :loading="loading"
-      :searchable-placeholder="searchablePlaceholder"
-      value-attribute="value"
-      option-attribute="label"
+      :search-input="searchInput"
+      :selected-icon="selectedIcon"
+      value-key="value"
+      label-key="label"
       :icon="icon"
-      :color="color"
-      :size="size"
       :ui="ui"
-      :ui-menu="uiMenu"
-      @update:model-value="value = $event"
+      :ignore-filter="!!$attrs.onSearch"
+      @update:model-value="onChange"
+      @update:searchTerm="onSearch"
     >
-      <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" size="xs" :ui="badgeUi">
-            <div class="flex items-center gap-x-1">
+      <template #default="{ modelValue }">
+        <div
+          v-if="!ArrayHelper.isEmpty(value)"
+          :class="theme.tagsWrapper({
+  class: [ui?.tagsWrapper]
+})"
+        >
+          <div
+            v-for="_value in ArrayHelper.toArray(modelValue)"
+            :key="_value"
+            :class="theme.tagsItem({
+  class: [ui?.tagsItem]
+})"
+          >
+            <div
+              :class="theme.tagsItemText({
+  class: [ui?.tagsItemText]
+})"
+            >
               {{ options.find((item) => item.value === _value)?.label || _value }}
               <Icon
-                name="ph:x"
-                class="size-3 cursor-pointer hover:text-gray-200"
-                @click.prevent="handleDelete(_value)"
+                :name="theme.tagsItemDeleteIcon({
+  class: [ui?.tagsItemDeleteIcon]
+})"
+                :class="theme.tagsItemDelete({
+  class: [ui?.tagsItemDelete]
+})"
+                @click.stop="handleDelete(_value)"
               />
             </div>
-          </Badge>
+          </div>
         </div>
       </template>
-    </USelectMenu>
+    </SelectMenu>
   </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 setup>
+import { computed } from "vue";
+import { ArrayHelper } from "#core/utils/ArrayHelper";
+import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
+import { useFieldHOC } from "#core/composables/useForm";
+import { useUiConfig } from "#core/composables/useConfig";
+import { selectMenuTheme } from "#core/theme/selectMenu";
+const emits = defineEmits([
+  "change"
+  // 'search',
+]);
+const props = defineProps({
+  icon: { type: String, required: false },
+  trailingIcon: { type: String, required: false },
+  clearIcon: { type: String, required: false },
+  selectedIcon: { type: String, required: false },
+  searchInput: { type: Object, required: false },
+  clearable: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  options: { type: Array, required: true },
+  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 theme = computed(() => useUiConfig(selectMenuTheme, "select")());
+const {
+  value,
+  wrapperProps,
+  handleChange
+} = useFieldHOC(props);
+const onChange = (value2) => {
+  handleChange(value2);
+  emits("change", value2);
+};
+const onSearch = (value2) => {
+  emits("search", value2);
+};
+const handleDelete = (_value) => {
+  value.value = ArrayHelper.toArray(value.value).filter((item) => item !== _value);
+};
 </script>

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

@@ -0,0 +1,3 @@
+import type { ISelectFieldProps } from '#core/components/Form/InputSelect/types';
+declare const _default: import("vue").DefineComponent<ISelectFieldProps, {}, {}, {}, {}, 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/InputSelectMultiple/types.d.ts

@@ -1,16 +1,17 @@
 import type { IFieldProps, IFormFieldBase, INPUT_TYPES } from '#core/components/Form/types';
-import { type IOption } from '#core/types/common';
-import type { SelectSize } from '#ui/types';
+import type { SelectOption } from '#core/components/Form/InputSelect/types';
 export interface ISelectMultipleFieldProps extends IFieldProps {
-    color?: string;
     icon?: string;
-    size?: SelectSize;
-    searchablePlaceholder?: string;
+    trailingIcon?: string;
+    selectedIcon?: string;
+    searchInput?: {
+        placeholder?: string;
+        icon?: string;
+    };
     loading?: boolean;
-    uiMenu?: object | any;
-    options: IOption[];
-    badgeUi?: object | any;
+    options: SelectOption[];
 }
 export type ISelectMultipleField = IFormFieldBase<INPUT_TYPES.SELECT_MULTIPLE, ISelectMultipleFieldProps, {
     change?: (value: string) => void;
+    search?: (value: string) => void;
 }>;

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

@@ -1,68 +1,135 @@
 <template>
   <FieldWrapper v-bind="wrapperProps">
-    <UInput
+    <Input
       v-if="type === 'password'"
-      v-model="value"
-      v-maska:[maskOptions]
-      :data-maska="mask"
-      :data-maska-tokens="maskTokens"
-      :data-maska-tokens-replace="maskTokensReplace"
-      :data-maska-reversed="maskReversed"
-      :data-maska-eager="maskEager"
-      :disabled="wrapperProps.isDisabled"
+      v-maska="activeMaskOptions"
+      :model-value="value"
+      :disabled="wrapperProps.disabled"
       :leading-icon="leadingIcon"
       :trailing-icon="trailingIcon"
+      :loading="loading"
+      :loading-icon="loadingIcon"
       :name="name"
       :placeholder="wrapperProps.placeholder"
       :type="isShowPassword ? 'text' : 'password'"
       :autofocus="!!autoFocus"
       :icon="icon"
-      :readonly="isReadonly"
+      :readonly="readonly"
       :ui="defu(ui, { icon: { trailing: { pointer: '' } } })"
+      @update:model-value="onChange"
     >
       <template #trailing>
-        <UButton
-          color="gray"
+        <Button
+          color="neutral"
           variant="link"
           :icon="isShowPassword ? 'i-heroicons-eye-slash' : 'i-heroicons-eye'"
           :padded="false"
           @click="isShowPassword = !isShowPassword"
         />
       </template>
-    </UInput>
-    <UInput
+    </Input>
+    <Input
       v-else
-      v-model="value"
-      v-maska:[maskOptions]
-      :data-maska="mask"
-      :data-maska-tokens="maskTokens"
-      :data-maska-tokens-replace="maskTokensReplace"
-      :data-maska-reversed="maskReversed"
-      :data-maska-eager="maskEager"
-      :disabled="wrapperProps.isDisabled"
+      v-maska="activeMaskOptions"
+      :model-value="value"
+      :disabled="wrapperProps.disabled"
       :leading-icon="leadingIcon"
       :trailing-icon="trailingIcon"
+      :loading="loading"
+      :loading-icon="loadingIcon"
       :name="name"
       :placeholder="wrapperProps.placeholder"
-      :type="type || 'text'"
+      :type="type"
       :autofocus="!!autoFocus"
       :icon="icon"
-      :readonly="isReadonly"
+      :readonly="readonly"
       :ui="ui"
+      @update:model-value="onChange"
     />
   </FieldWrapper>
 </template>
-<script lang="ts" setup>
-import { ref } from '#imports'
-import { type ITextFieldProps } from '#core/components/Form/InputText/types'
-import { useFieldHOC } from '#core/composables/useForm'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import { vMaska } from 'maska'
-import { defu } from 'defu'
 
-const props = withDefaults(defineProps<ITextFieldProps>(), {})
-
-const { value, wrapperProps } = useFieldHOC<string>(props)
-
-const isShowPassword = ref(false)
+<script setup>
+import { vMaska } from "maska/vue";
+import { defu } from "defu";
+import { ref, computed } from "#imports";
+import { useFieldHOC } from "#core/composables/useForm";
+import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
+const emits = defineEmits(["change"]);
+const props = defineProps({
+  type: { type: String, required: false, default: "text" },
+  leadingIcon: { type: null, required: false },
+  trailingIcon: { type: null, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: null, required: false },
+  icon: { type: String, required: false },
+  mask: { type: [String, Array, Function, null], required: false },
+  maskOptions: { type: Object, required: false },
+  maskTokens: { type: null, required: false },
+  maskEager: { type: Boolean, required: false },
+  maskTokensReplace: { type: Boolean, required: false },
+  maskReversed: { 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 {
+  value,
+  wrapperProps,
+  handleChange
+} = useFieldHOC(props);
+const isShowPassword = ref(false);
+const onChange = (value2) => {
+  handleChange(value2);
+  emits("change", value2);
+};
+const activeMaskOptions = computed(() => {
+  if (props.maskOptions && Object.keys(props.maskOptions).length > 0) {
+    if (typeof props.maskOptions.mask === "string" && Object.keys(props.maskOptions).length === 1) {
+      return props.maskOptions.mask;
+    }
+    return props.maskOptions;
+  }
+  const options = {};
+  let hasIndividualProps = false;
+  if (props.mask !== void 0) {
+    options.mask = props.mask;
+    hasIndividualProps = true;
+  }
+  if (props.maskTokens !== void 0) {
+    options.tokens = props.maskTokens;
+    hasIndividualProps = true;
+  }
+  if (props.maskEager !== void 0) {
+    options.eager = props.maskEager;
+    hasIndividualProps = true;
+  }
+  if (props.maskReversed !== void 0) {
+    options.reversed = props.maskReversed;
+    hasIndividualProps = true;
+  }
+  if (props.maskTokensReplace !== void 0) {
+    options.tokensReplace = props.maskTokensReplace;
+    hasIndividualProps = true;
+  }
+  if (hasIndividualProps) {
+    const keys = Object.keys(options);
+    if (keys.length === 1 && keys[0] === "mask" && typeof options.mask === "string") {
+      return options.mask;
+    }
+    return options;
+  }
+  return void 0;
+});
 </script>

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

@@ -0,0 +1,5 @@
+import type { ITextFieldProps } from '#core/components/Form/InputText/types';
+declare const _default: import("vue").DefineComponent<ITextFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    type: "text" | "password" | "email";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,18 +1,19 @@
-import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '#core/components/Form/types';
 import type { MaskInputOptions, MaskType } from 'maska';
+import type { IFieldProps, IFormFieldBase, INPUT_TYPES } from '#core/components/Form/types';
 export interface ITextFieldProps extends IFieldProps {
     type?: 'text' | 'password' | 'email';
     leadingIcon?: any;
     trailingIcon?: any;
+    loading?: boolean;
+    loadingIcon?: any;
     icon?: string;
     mask?: MaskType;
     maskOptions?: MaskInputOptions;
-    maskTokens?: string;
+    maskTokens?: MaskInputOptions['tokens'];
     maskEager?: boolean;
     maskTokensReplace?: boolean;
     maskReversed?: boolean;
 }
 export type ITextField = IFormFieldBase<INPUT_TYPES.TEXT | INPUT_TYPES.PASSWORD | INPUT_TYPES.EMAIL, ITextFieldProps, {
     change?: (value: string) => void;
-    blur?: (value: string) => void;
 }>;

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

@@ -1,25 +1,57 @@
 <template>
   <FieldWrapper v-bind="wrapperProps">
-    <UTextarea
-      v-model="value"
-      :disabled="wrapperProps.isDisabled"
+    <Textarea
+      :model-value="value"
+      :disabled="wrapperProps.disabled"
       :name="name"
       :resize="resize"
       :placeholder="wrapperProps.placeholder"
       :autofocus="!!autoFocus"
       :autoresize="autoresize"
       :rows="rows"
-      :readonly="isReadonly"
+      :maxrows="maxrows"
+      :loading="loading"
+      :loading-icon="loadingIcon"
+      :readonly="readonly"
       :ui="ui"
+      @update:model-value="onChange"
     />
   </FieldWrapper>
 </template>
-<script lang="ts" setup>
-import { useFieldHOC } from '#core/composables/useForm'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import { type ITextareaFieldProps } from '#core/components/Form/InputTextarea/types'
 
-const props = withDefaults(defineProps<ITextareaFieldProps>(), {})
-
-const { value, wrapperProps } = useFieldHOC<string>(props)
+<script setup>
+import { useFieldHOC } from "#core/composables/useForm";
+import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
+const emits = defineEmits(["change"]);
+const props = defineProps({
+  autoresize: { type: Boolean, required: false },
+  resize: { type: Boolean, required: false },
+  rows: { type: Number, required: false },
+  maxrows: { type: Number, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: null, 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 {
+  value,
+  wrapperProps,
+  handleChange
+} = useFieldHOC(props);
+const onChange = (value2) => {
+  handleChange(value2);
+  emits("change", value2);
+};
 </script>

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

@@ -0,0 +1,3 @@
+import type { ITextareaFieldProps } from '#core/components/Form/InputTextarea/types';
+declare const _default: import("vue").DefineComponent<ITextareaFieldProps, {}, {}, {}, {}, 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/InputTextarea/types.d.ts

@@ -1,7 +1,12 @@
-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 ITextareaFieldProps extends IFieldProps {
     autoresize?: boolean;
     resize?: boolean;
     rows?: number;
+    maxrows?: number;
+    loading?: boolean;
+    loadingIcon?: any;
 }
-export type ITextareaField = IFormFieldBase<INPUT_TYPES.TEXTAREA, ITextareaFieldProps, never>;
+export type ITextareaField = IFormFieldBase<INPUT_TYPES.TEXTAREA, ITextareaFieldProps, {
+    change?: (value: string) => void;
+}>;