@finema/core 1.4.220 → 2.1.0

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

@@ -1,27 +1,61 @@
-<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="defu(ui, { icon: { trailing: { pointer: '' } } })"
-    />
-  </FieldWrapper>
-</template>
-<script lang="ts" setup>
-import { useFieldHOC } from '#core/composables/useForm'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import type { INumberFieldProps } from '#core/components/Form/InputNumber/types'
-import { defu } from 'defu'
-
-const props = withDefaults(defineProps<INumberFieldProps>(), {})
-
-const { value, wrapperProps } = useFieldHOC<number>(props)
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <InputNumber
+      :model-value="value"
+      :disabled="wrapperProps.disabled"
+      :name="name"
+      :placeholder="wrapperProps.placeholder"
+      :autofocus="!!autoFocus"
+      :readonly="readonly"
+      :orientation="orientation"
+      :increment-disabled="incrementDisabled"
+      :decrement-disabled="decrementDisabled"
+      :min="min"
+      :max="max"
+      :step="step"
+      :disable-wheel-change="disableWheelChange"
+      :format-options="formatOptions"
+      :ui="ui"
+      @update:model-value="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({
+  orientation: { type: null, required: false, default: "vertical" },
+  incrementDisabled: { type: null, required: false },
+  decrementDisabled: { type: null, required: false },
+  min: { type: null, required: false },
+  max: { type: null, required: false },
+  step: { type: null, required: false },
+  disableWheelChange: { type: null, required: false },
+  formatOptions: { 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/InputNumber/index.vue.d.ts

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

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

@@ -1,10 +1,15 @@
-import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '#core/components/Form/types';
+import type { IFieldProps, IFormFieldBase, INPUT_TYPES } from '#core/components/Form/types';
+import type { InputNumberProps } from '#ui/components/InputNumber.vue';
 export interface INumberFieldProps extends IFieldProps {
-    leadingIcon?: any;
-    trailingIcon?: any;
-    icon?: string;
+    orientation?: InputNumberProps['orientation'];
+    incrementDisabled?: InputNumberProps['incrementDisabled'];
+    decrementDisabled?: InputNumberProps['decrementDisabled'];
+    min?: InputNumberProps['min'];
+    max?: InputNumberProps['max'];
+    step?: InputNumberProps['step'];
+    disableWheelChange?: InputNumberProps['disableWheelChange'];
+    formatOptions?: InputNumberProps['formatOptions'];
 }
 export type INumberField = IFormFieldBase<INPUT_TYPES.NUMBER, INumberFieldProps, {
     change?: (value: string) => void;
-    blur?: (value: string) => void;
 }>;

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

@@ -1,55 +1,95 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <USelectMenu
-      :model-value="value"
-      :searchable="searchable as any"
-      :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>
-        <div v-if="value" class="flex w-full items-center justify-between">
-          <span class="truncate">
-            {{ options.find((item) => item.value === value)?.label || value }}
-          </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('')"
-          />
-        </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 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>
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <SelectMenu
+      :model-value="value"
+      :items="options"
+      :placeholder="wrapperProps.placeholder"
+      :disabled="wrapperProps.disabled"
+      :loading="loading"
+      :search-input="searchInput"
+      :selected-icon="selectedIcon"
+      value-key="value"
+      label-key="label"
+      :icon="icon"
+      :ui="ui"
+      :leading-icon="options.find((item) => item.value === value)?.icon"
+      :avatar="options.find((item) => item.value === value)?.avatar"
+      @update:modelValue="onChange"
+      @update:searchTerm="onSearch"
+    >
+      <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="clearIcon"
+            :class="theme.clearIcon({
+  class: [ui?.clearIcon]
+})"
+            @click.stop="onChange(void 0)"
+          />
+        </div>
+      </template>
+    </SelectMenu>
+  </FieldWrapper>
+</template>
+
+<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
-      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" size="xs" :ui="badgeUi">
-            <div class="flex items-center gap-x-1">
-              {{ 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)"
-              />
-            </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">
+    <SelectMenu
+      :model-value="value"
+      :items="options"
+      multiple
+      :placeholder="wrapperProps.placeholder"
+      :disabled="wrapperProps.disabled"
+      :loading="loading"
+      :search-input="searchInput"
+      :selected-icon="selectedIcon"
+      value-key="value"
+      label-key="label"
+      :icon="icon"
+      :ui="ui"
+      :ignore-filter="!!$attrs.onSearch"
+      @update:model-value="onChange"
+      @update:searchTerm="onSearch"
+    >
+      <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="theme.tagsItemDeleteIcon({
+  class: [ui?.tagsItemDeleteIcon]
+})"
+                :class="theme.tagsItemDelete({
+  class: [ui?.tagsItemDelete]
+})"
+                @click.stop="handleDelete(_value)"
+              />
+            </div>
+          </div>
+        </div>
+      </template>
+    </SelectMenu>
+  </FieldWrapper>
+</template>
+
+<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;
 }>;