@finema/core 1.3.22 → 1.3.24

package/dist/module.d.mts

@@ -10,10 +10,10 @@ declare namespace config {
   export { config_core as core };
 }
 
-type Strategy = 'merge' | 'override'
-
-type DeepPartial<T> = Partial<{
-  [P in keyof T]: DeepPartial<T[P]> | Record<string, string>
+type Strategy = 'merge' | 'override'
+
+type DeepPartial<T> = Partial<{
+  [P in keyof T]: DeepPartial<T[P]> | Record<string, string>
 }>
 
 interface ModuleOptions {

package/dist/module.d.ts

@@ -10,10 +10,10 @@ declare namespace config {
   export { config_core as core };
 }
 
-type Strategy = 'merge' | 'override'
-
-type DeepPartial<T> = Partial<{
-  [P in keyof T]: DeepPartial<T[P]> | Record<string, string>
+type Strategy = 'merge' | 'override'
+
+type DeepPartial<T> = Partial<{
+  [P in keyof T]: DeepPartial<T[P]> | Record<string, string>
 }>
 
 interface ModuleOptions {

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.3.22",
+  "version": "1.3.24",
   "configKey": "core",
   "compatibility": {
     "nuxt": "^3.7.4"

package/dist/module.mjs

@@ -2,7 +2,7 @@ import { defineNuxtModule, createResolver, installModule, addPlugin, addComponen
 import { merge } from 'lodash-es';
 
 const name = "@finema/core";
-const version = "1.3.22";
+const version = "1.3.24";
 
 const colors = {
   black: "#20243E",
@@ -68,9 +68,86 @@ const colors = {
 };
 
 const ui = {
+  strategy: "override",
   safelistColors: ["secondary"],
   icons: {
     dynamic: true
+  },
+  pagination: {
+    wrapper: "flex items-center -space-x-px space-x-1",
+    default: {
+      activeButton: {
+        color: "primary",
+        class: "rounded-md px-3"
+      },
+      inactiveButton: {
+        color: "primary",
+        variant: "ghost",
+        class: "rounded-md px-3 text-gray-500 hover:bg-primary-500 hover:text-white"
+      },
+      firstButton: {
+        color: "primary",
+        variant: "ghost",
+        class: "rtl:[&_span:first-child]:rotate-180 rounded-md px-2 text-gray-500 hover:bg-primary-500 hover:text-white"
+      },
+      lastButton: {
+        color: "primary",
+        variant: "ghost",
+        class: "rtl:[&_span:last-child]:rotate-180 rounded-md px-2 text-gray-500 hover:bg-primary-500 hover:text-white"
+      },
+      prevButton: {
+        color: "primary",
+        variant: "ghost",
+        class: "rtl:[&_span:first-child]:rotate-180 rounded-md px-2 text-gray-500 hover:bg-primary-500 hover:text-white"
+      },
+      nextButton: {
+        color: "primary",
+        variant: "ghost",
+        class: "rtl:[&_span:last-child]:rotate-180 rounded-md px-2 text-gray-500 hover:bg-primary-500 hover:text-white"
+      }
+    }
+  },
+  table: {
+    wrapper: "relative overflow-x-auto bg-white rounded-lg",
+    base: "min-w-full table-fixed",
+    divide: "divide-y divide-y-2 divide-gray-300 dark:divide-gray-700",
+    thead: "",
+    tbody: "divide-y divide-gray-200 dark:divide-gray-800",
+    tr: {
+      base: "even:bg-gray-50",
+      selected: "bg-gray-50 dark:bg-gray-800/50",
+      active: "hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer"
+    },
+    th: {
+      base: "text-left rtl:text-right",
+      padding: "px-3 py-3.5",
+      color: "text-gray-700 dark:text-white",
+      font: "font-normal",
+      size: "text-sm"
+    },
+    td: {
+      base: "whitespace-nowrap",
+      padding: "px-3 py-4",
+      color: "text-gray-500 dark:text-gray-400",
+      font: "",
+      size: "text-sm"
+    },
+    default: {
+      sortButton: {
+        icon: "i-heroicons-arrows-up-down-20-solid",
+        trailing: true,
+        square: true,
+        color: "gray",
+        variant: "ghost",
+        class: "-m-1.5 text-gray-700 font-normal"
+      },
+      loadingState: {
+        label: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14..."
+      },
+      emptyState: {
+        label: "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25"
+      }
+    }
   }
 };
 
@@ -94,7 +171,7 @@ const module = defineNuxtModule({
     nuxt.options.alias["#core"] = runtimeDir;
     nuxt.options.css.push(resolve(runtimeDir, "ui.css"));
     nuxt.options.appConfig.app = {
-      strategy: "merge"
+      strategy: "override"
     };
     nuxt.hook("tailwindcss:config", (tailwindConfig) => {
       tailwindConfig.content = {
@@ -102,7 +179,8 @@ const module = defineNuxtModule({
         files: [
           ...tailwindConfig.content.files,
           resolve(runtimeDir, "components/**/*.{vue,mjs,ts}"),
-          resolve(runtimeDir, "*.{mjs,js,ts}")
+          resolve(runtimeDir, "*.{mjs,js,ts}"),
+          resolve("./ui.ts")
         ]
       };
       tailwindConfig.theme.extend.colors = {
@@ -110,8 +188,8 @@ const module = defineNuxtModule({
         ...colors
       };
     });
-    nuxt.options.appConfig.ui = _merge(ui, nuxt.options.appConfig.ui);
     await installModule("@nuxt/ui");
+    nuxt.options.appConfig.ui = _merge(ui, nuxt.options.appConfig.ui);
     await installModule("@pinia/nuxt");
     await installModule("@vee-validate/nuxt", {
       // disable or enable auto imports

package/dist/runtime/components/Badge.vue

@@ -0,0 +1,54 @@
+<template>
+  <UBadge
+    v-bind="attrs"
+    :class="$props.class"
+    :label="label"
+    :size="size"
+    :color="color"
+    :variant="variant"
+    :ui="ui"
+  >
+    <slot />
+  </UBadge>
+</template>
+
+<script setup lang="ts">
+import { useUiConfig, type PropType, useUI, toRef } from '#imports'
+import { type BadgeSize, type BadgeColor, type BadgeVariant } from '#ui/types'
+import { badge } from '#core/ui.config'
+import type { Strategy } from '#core/types/utils'
+
+const config = useUiConfig<typeof badge>(badge, 'badge')
+
+const props = defineProps({
+  size: {
+    type: String as PropType<BadgeSize>,
+    default: () => badge.default.size,
+    validator(value: string) {
+      return Object.keys(badge.size).includes(value)
+    },
+  },
+  color: {
+    type: String as PropType<BadgeColor>,
+    default: () => badge.default.color,
+  },
+  variant: {
+    type: String as PropType<BadgeVariant>,
+    default: () => badge.default.variant,
+  },
+  label: {
+    type: [String, Number],
+    default: null,
+  },
+  class: {
+    type: [String, Object, Array] as PropType<any>,
+    default: () => '',
+  },
+  ui: {
+    type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+    default: () => ({}),
+  },
+})
+
+const { ui, attrs } = useUI('badge', toRef(props, 'ui'), config, toRef(props, 'class'))
+</script>

package/dist/runtime/components/Breadcrumb.vue

@@ -0,0 +1,45 @@
+<template>
+  <UBreadcrumb v-bind="attrs" :class="$props.class" :links="links" :divider="divider" :ui="ui">
+    <template #default="{ link, isActive, index }">
+      <slot name="default" :link="link" :is-active="isActive" :index="index" />
+    </template>
+
+    <template #icon="{ link, index, isActive }">
+      <slot name="icon" :link="link" :is-active="isActive" :index="index" />
+    </template>
+
+    <template #divider>
+      <slot name="divider" />
+    </template>
+  </UBreadcrumb>
+</template>
+
+<script setup lang="ts">
+import { useUiConfig, type PropType, useUI, toRef } from '#imports'
+import { type BreadcrumbLink } from '#ui/types'
+import type { Strategy } from '#core/types/utils'
+import { breadcrumb } from '#core/ui.config'
+
+const config = useUiConfig<typeof breadcrumb>(breadcrumb, 'breadcrumb')
+
+const props = defineProps({
+  links: {
+    type: Array as PropType<BreadcrumbLink[]>,
+    default: () => [],
+  },
+  divider: {
+    type: String,
+    default: () => breadcrumb.default.divider,
+  },
+  class: {
+    type: [String, Object, Array] as PropType<any>,
+    default: () => '',
+  },
+  ui: {
+    type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+    default: () => ({}),
+  },
+})
+
+const { ui, attrs } = useUI('breadcrumb', toRef(props, 'ui'), config, toRef(props, 'class'))
+</script>

package/dist/runtime/components/Button/Group.vue

@@ -1,31 +1,47 @@
 <template>
-  <div>
-    <UButtonGroup v-bind="$attrs">
-      <Button label="Button" />
-      <Button color="blue" size="xs">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          class="h-3 w-3"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"
-          />
-        </svg>
-      </Button>
-    </UButtonGroup>
-  </div>
+  <UButtonGroup
+    v-bind="attrs"
+    :class="$props.class"
+    :size="size"
+    :orientation="orientation"
+    :ui="ui"
+  >
+    <slot />
+  </UButtonGroup>
 </template>
 
 <script lang="ts" setup>
-defineOptions({
-  inheritAttrs: true,
+import { type PropType, useUiConfig, useUI, toRef } from '#imports'
+import { button, buttonGroup } from '#core/ui.config'
+import { type ButtonSize } from '#ui/types/button'
+import { type Strategy } from '#core/types/utils'
+
+const config = useUiConfig<typeof buttonGroup>(buttonGroup, 'buttonGroup')
+
+const props = defineProps({
+  size: {
+    type: String as PropType<ButtonSize>,
+    default: () => button.default.size,
+    validator(value: string) {
+      return Object.keys(button.size).includes(value)
+    },
+  },
+  orientation: {
+    type: String as PropType<'horizontal' | 'vertical'>,
+    default: 'horizontal',
+    validator(value: string) {
+      return ['horizontal', 'vertical'].includes(value)
+    },
+  },
+  class: {
+    type: [String, Object, Array] as PropType<any>,
+    default: undefined,
+  },
+  ui: {
+    type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+    default: undefined,
+  },
 })
-</script>
 
-<style></style>
+const { ui, attrs } = useUI('buttonGroup', toRef(props, 'ui'), config, toRef(props, 'class'))
+</script>

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

@@ -1,36 +1,58 @@
 <template>
-  <UButton v-bind="$props">
-    <template #leading>
-      <slot name="leading" />
-    </template>
-    <slot />
+  <UButton
+    v-bind="attrs"
+    :class="$props.class"
+    :label="label"
+    :type="type"
+    :block="block"
+    :loading="loading"
+    :disabled="disabled"
+    :padded="padded"
+    :size="size"
+    :color="color"
+    :variant="variant"
+    :icon="icon"
+    :loading-icon="loadingIcon"
+    :leading-icon="leadingIcon"
+    :trailing-icon="trailingIcon"
+    :trailing="trailing"
+    :leading="leading"
+    :square="square"
+    :truncate="truncate"
+    :ui="ui"
+  >
+    <template #leading><slot name="leading" /></template>
 
-    <template #trailing>
-      <slot name="trailing" />
-    </template>
+    <slot />
+    <template #trailing><slot name="trailing" /></template>
   </UButton>
 </template>
+
 <script lang="ts" setup>
-import { UButton } from '#components'
-import { type PropType } from 'vue'
+import { useUiConfig, toRef, type PropType, useUI } from '#imports'
+import { button } from '#core/ui.config'
+import { type ButtonSize, type ButtonColor, type ButtonVariant } from '#ui/types/button'
+import { type Strategy } from '#core/types/utils'
+
+const config = useUiConfig<typeof button>(button, 'button')
 
 defineOptions({
   inheritAttrs: true,
 })
 
-defineProps({
-  type: {
+const props = defineProps({
+  label: {
     type: String,
+    default: '',
+  },
+  type: {
+    type: String as PropType<'button' | 'submit' | 'reset'>,
     default: 'button',
   },
   block: {
     type: Boolean,
     default: false,
   },
-  label: {
-    type: String,
-    default: null,
-  },
   loading: {
     type: Boolean,
     default: false,
@@ -44,24 +66,28 @@ defineProps({
     default: true,
   },
   size: {
-    type: String,
-    validator(value: unknown): boolean {
-      return ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'].includes(value as string)
+    type: String as PropType<ButtonSize>,
+    default: () => button.default.size,
+    validator(value: string) {
+      return Object.keys(button.size).includes(value)
     },
   },
   color: {
-    type: String,
+    type: String as PropType<ButtonColor>,
+    default: () => button.default.color,
   },
   variant: {
+    type: String as PropType<ButtonVariant>,
+    default: () => button.default.variant,
+  },
+  loadingIcon: {
     type: String,
+    default: () => button.default.loadingIcon,
   },
   icon: {
     type: String,
     default: null,
   },
-  loadingIcon: {
-    type: String,
-  },
   leadingIcon: {
     type: String,
     default: null,
@@ -87,10 +113,14 @@ defineProps({
     default: false,
   },
   class: {
-    type: [String, Object, Array] as PropType<any>,
+    type: [String, Array, Object] as PropType<any>,
+    default: undefined,
   },
   ui: {
-    type: Object,
+    type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+    default: undefined,
   },
 })
+
+const { ui, attrs } = useUI('button', toRef(props, 'ui'), config, toRef(props, 'class'))
 </script>

package/dist/runtime/components/Card.vue

@@ -0,0 +1,38 @@
+<template>
+  <UCard v-bind="attrs" :class="$props.class" :as="as" :ui="ui">
+    <template #header>
+      <slot name="header" />
+    </template>
+
+    <slot />
+
+    <template #footer>
+      <slot name="footer" />
+    </template>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+import { useUiConfig, type PropType, useUI, toRef } from '#imports'
+import type { Strategy } from '#core/types/utils'
+import { card } from '#core/ui.config'
+
+const config = useUiConfig<typeof card>(card, 'card')
+
+const props = defineProps({
+  as: {
+    type: String,
+    default: 'div',
+  },
+  class: {
+    type: [String, Object, Array] as PropType<any>,
+    default: () => '',
+  },
+  ui: {
+    type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+    default: () => ({}),
+  },
+})
+
+const { ui, attrs } = useUI('card', toRef(props, 'ui'), config, toRef(props, 'class'))
+</script>

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

@@ -2,6 +2,7 @@
   <UDropdown
     v-if="renderOnMounted"
     v-bind="attrs"
+    :class="$props.class"
     :items="items"
     :mode="mode"
     :open-delay="openDelay"

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

@@ -1,5 +1,11 @@
 <template>
-  <UFormGroup :label="label" :name="name" :error="errorMessage" :required="!!isRequired">
+  <UFormGroup
+    :label="label"
+    :name="name"
+    :help="help"
+    :error="errorMessage"
+    :required="!!isRequired"
+  >
     <slot />
   </UFormGroup>
 </template>

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

@@ -1,5 +1,5 @@
 import { type Component } from '@nuxt/schema';
-import { type FormContext, type RuleExpression } from 'vee-validate';
+import { type FormContext } from 'vee-validate';
 import { type ITextField } from '#core/components/Form/InputText/types';
 import { type IStaticField } from '#core/components/Form/InputStatic/types';
 import { type ICheckboxField } from '#core/components/Form/InputCheckbox/types';
@@ -21,19 +21,11 @@ export declare const enum INPUT_TYPES {
     DATE_TIME = "DATE_TIME",
     DATE = "DATE"
 }
-export interface IOption {
-    label: string;
-    value: any;
-}
-export interface IRadioOption {
-    label: string | any;
-    value: any;
-}
 export interface IFieldProps {
     form?: FormContext;
     name: string;
     label?: string | any;
-    rules?: RuleExpression<any> | any;
+    rules?: any;
     autoFocus?: boolean;
     class?: any;
     classInner?: any;
@@ -48,12 +40,12 @@ export interface IFieldProps {
     transform?: (value: any, oldValue: any, e: InputEvent) => any;
     getInstance?: (el: HTMLElement) => void;
 }
-export interface IFormFieldBase<I extends INPUT_TYPES, P extends object = never, O extends object = never> {
-    type: I | INPUT_TYPES;
+export interface IFormFieldBase<I extends INPUT_TYPES, P, O> {
+    type: I;
     component?: Component;
     class?: any;
     isHide?: boolean;
-    props: IFieldProps & P;
+    props: P;
     on?: O;
 }
 export type IFormField = ITextField | IStaticField | ICheckboxField | IRadioField | ISelectField | IToggleField | ITextareaField | IDateTimeField;

package/dist/runtime/components/Icon.vue

@@ -1,11 +1,23 @@
-<template>
-  <UIcon :name="name" />
-</template>
-<script lang="ts" setup>
-defineProps({
-  name: {
-    type: String,
-    required: true,
-  },
-})
-</script>
+<template>
+  <UIcon :name="name" :dynamic="dynamicValue" />
+</template>
+
+<script lang="ts" setup>
+import { computed, useUiConfig } from '#imports'
+import { icon } from '#core/ui.config'
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  dynamic: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const config = useUiConfig<typeof icon>(icon, 'icon')
+
+const dynamicValue = computed(() => props.dynamic || config.dynamic)
+</script>

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

@@ -2,6 +2,7 @@
   <UModal
     v-bind="attrs"
     :model-value="modelValue"
+    :class="$props.class"
     :overlay="overlay"
     :transition="transition"
     :prevent-close="preventClose"

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

@@ -2,6 +2,7 @@
   <USlideover
     v-bind="attrs"
     :model-value="modelValue"
+    :class="$props.class"
     :prevent-close="preventClose"
     :overlay="overlay"
     :transition="transition"

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

@@ -1,8 +1,8 @@
 <template>
   <div>
     <div
-      v-if="!options.isHideToolbar"
-      class="flex border-b border-gray-200 px-3 py-3.5 dark:border-gray-700"
+      v-if="options.isEnabledSearch"
+      class="flex border-b border-gray-200 py-3.5 dark:border-gray-700"
     >
       <UInput v-model="q" placeholder="Search..." />
     </div>
@@ -14,7 +14,7 @@
     >
       <template #empty-state>
         <div class="flex flex-col items-center justify-center gap-3 py-6">
-          <span class="text-sm italic">No one here!</span>
+          <span class="text-sm italic">ไม่พบข้อมูล!</span>
         </div>
       </template>
       <template
@@ -42,7 +42,10 @@
         <slot :name="slot" v-bind="scope" />
       </template>
     </UTable>
-    <div class="mt-4 flex justify-end">
+    <div class="mt-4 flex justify-between">
+      <p class="text-xs text-gray-500">
+        ผลลัพธ์ {{ pageBetween }} ของ {{ totalCountWithComma }} รายการ
+      </p>
       <UPagination
         v-model="page"
         :page-count="options.pageOptions.totalPage"
@@ -52,9 +55,9 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { type PropType } from 'vue'
+import { computed, type PropType } from 'vue'
 import { COLUMN_TYPES, type ITableOptions } from '#core/components/Table/types'
-import { _debounce, ref, watch } from '#imports'
+import { _debounce, ref, StringHelper, watch } from '#imports'
 import ColumnNumber from '#core/components/Table/ColumnNumber.vue'
 import ColumnImage from '#core/components/Table/ColumnImage.vue'
 
@@ -65,6 +68,10 @@ const emits = defineEmits<{
 
 const props = defineProps({
   options: { type: Object as PropType<ITableOptions>, required: true },
+  class: {
+    type: [String, Array, Object] as PropType<any>,
+    default: undefined,
+  },
 })
 
 const q = ref(props.options?.pageOptions.search ?? '')
@@ -81,4 +88,23 @@ watch(
 watch(page, () => {
   emits('pageChange', page.value)
 })
+
+const pageBetween = computed((): string => {
+  const length = props.options?.rawData?.length
+
+  if (length === 0) {
+    return '0'
+  }
+
+  const start = (props.options.pageOptions.currentPage - 1) * props.options.pageOptions.limit + 1
+  const end = start + length - 1
+
+  return `${start} - ${end}`
+})
+
+const totalCountWithComma = computed((): string => {
+  return !props.options.pageOptions.totalCount
+    ? '0'
+    : StringHelper.withComma(props.options.pageOptions.totalCount)
+})
 </script>

package/dist/runtime/components/Table/types.d.ts

@@ -36,6 +36,7 @@ export interface ITableOptions<T = object> {
     pageOptions: IPageOptions;
     columns: IColumn[];
     isHideToolbar?: boolean;
+    isEnabledSearch?: boolean;
     isShowCheckbox?: boolean;
     deleteStatus?: IStatus;
     onRowClick?: (index: number, columns: Array<{

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

@@ -0,0 +1,65 @@
+<template>
+  <UTabs
+    v-bind="attrs"
+    :model-value="modelValue"
+    :class="$props.class"
+    :items="items"
+    :orientation="orientation"
+    :default-index="defaultIndex"
+    :ui="ui"
+    @change="change"
+  >
+    <template #default="{ item, index, selected }">
+      <slot name="default" :item="item" :index="index" :selected="selected" />
+    </template>
+
+    <template #item="{ item, index, selected }">
+      <slot name="item" :item="item" :index="index" :selected="selected" />
+    </template>
+  </UTabs>
+</template>
+
+<script setup lang="ts">
+import { useUiConfig, type PropType, useUI, toRef } from '#imports'
+import { type TabItem } from '#ui/types'
+import type { Strategy } from '#core/types/utils'
+import { tabs } from '#core/ui.config'
+
+const config = useUiConfig<typeof tabs>(tabs, 'tabs')
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: undefined,
+  },
+  items: {
+    type: Array as PropType<TabItem[]>,
+    default: () => [],
+  },
+  orientation: {
+    type: String as PropType<'horizontal' | 'vertical'>,
+    default: 'horizontal',
+    validator: (value: string) => ['horizontal', 'vertical'].includes(value),
+  },
+  defaultIndex: {
+    type: Number,
+    default: 0,
+  },
+  class: {
+    type: [String, Object, Array] as PropType<any>,
+    default: () => '',
+  },
+  ui: {
+    type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+    default: () => ({}),
+  },
+})
+
+const emits = defineEmits(['update:modelValue', 'change'])
+
+const change = (index: number) => {
+  emits('change', index)
+}
+
+const { ui, attrs } = useUI('tabs', toRef(props, 'ui'), config, toRef(props, 'class'))
+</script>

package/dist/runtime/composables/useForm.d.ts

@@ -11,6 +11,7 @@ export interface IFieldWrapperProps {
     isHideLabel?: boolean;
     customErrorMessage?: string | DefineComponent;
     name: string;
+    help?: string;
 }
 interface IFieldContext<TValue> extends FieldContext<TValue> {
     isRequired: boolean;

package/dist/runtime/composables/useForm.mjs

@@ -36,7 +36,8 @@ export const useFieldHOC = (newFormProps, opts) => {
       isRequired: newFormProps.isRequired,
       isHideLabel: newFormProps.isHideLabel,
       customErrorMessage: newFormProps.customErrorMessage,
-      name: newFormProps.name
+      name: newFormProps.name,
+      help: newFormProps.help
     }))
   };
 };

package/dist/runtime/plugin.mjs

@@ -25,12 +25,12 @@ export default defineNuxtPlugin((nuxtApp) => {
             not_multiple_of: "\u0E08\u0E33\u0E40\u0E1B\u0E47\u0E19\u0E15\u0E49\u0E2D\u0E07\u0E40\u0E1B\u0E47\u0E19\u0E2D\u0E22\u0E39\u0E48\u0E43\u0E19\u0E04\u0E48\u0E32\u0E02\u0E2D\u0E07 {{multipleOf}}",
             not_finite: "\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02\u0E15\u0E49\u0E2D\u0E07\u0E40\u0E1B\u0E47\u0E19\u0E08\u0E33\u0E19\u0E27\u0E19\u0E08\u0E23\u0E34\u0E07",
             invalid_string: {
-              email: "\u0E2D\u0E35\u0E40\u0E21\u0E25\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07 {{validation}}",
-              url: "URL \u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07 {{validation}}",
-              uuid: "UUID \u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07 {{validation}}",
-              cuid: "CUID \u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07 {{validation}}",
+              email: "\u0E2D\u0E35\u0E40\u0E21\u0E25\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07",
+              url: "URL \u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07",
+              uuid: "UUID \u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07",
+              cuid: "CUID \u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07",
               regex: "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07",
-              datetime: "\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48\u0E41\u0E25\u0E30\u0E40\u0E27\u0E25\u0E32\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07 {{validation}}",
+              datetime: "\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48\u0E41\u0E25\u0E30\u0E40\u0E27\u0E25\u0E32\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07",
               startsWith: '\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07: \u0E08\u0E30\u0E15\u0E49\u0E2D\u0E07\u0E02\u0E36\u0E49\u0E19\u0E15\u0E49\u0E19\u0E14\u0E49\u0E27\u0E22 "{{startsWith}}"',
               endsWith: '\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07: \u0E08\u0E30\u0E15\u0E49\u0E2D\u0E07\u0E25\u0E07\u0E17\u0E49\u0E32\u0E22\u0E14\u0E49\u0E27\u0E22 "{{endsWith}}"'
             },

package/dist/runtime/types/config.d.ts

@@ -1 +1 @@
-export type UIComponentList = 'modal' | 'slideover' | 'dropdown';
+export type UIComponentList = 'modal' | 'slideover' | 'dropdown' | 'icon' | 'button' | 'buttonGroup' | 'tabs' | 'card' | 'breadcrumb' | 'badge';

package/dist/runtime/types/utils.d.ts

@@ -1,9 +1,29 @@
-export type Strategy = 'merge' | 'override'
-
-export type NestedKeyOf<ObjectType extends object> = {
-  [Key in keyof ObjectType]: ObjectType[Key] extends object ? NestedKeyOf<ObjectType[Key]> : Key
-}[keyof ObjectType]
-
-export type DeepPartial<T> = Partial<{
-  [P in keyof T]: DeepPartial<T[P]> | Record<string, string>
-}>
+export type Strategy = 'merge' | 'override'
+
+export type NestedKeyOf<ObjectType extends object> = {
+  [Key in keyof ObjectType]: ObjectType[Key] extends object ? NestedKeyOf<ObjectType[Key]> : Key
+}[keyof ObjectType]
+
+export type DeepPartial<T> = Partial<{
+  [P in keyof T]: DeepPartial<T[P]> | Record<string, string>
+}>
+
+type DeepKey<T, Keys extends string[]> = Keys extends [infer First, ...infer Rest]
+  ? First extends keyof T
+    ? Rest extends string[]
+      ? DeepKey<T[First], Rest>
+      : never
+    : never
+  : T
+
+export type ExtractDeepKey<T, Path extends string[]> = DeepKey<T, Path> extends infer Result
+  ? Result extends Record<string, any>
+    ? keyof Result
+    : never
+  : never
+
+export type ExtractDeepObject<T, Path extends string[]> = DeepKey<T, Path> extends infer Result
+  ? Result extends Record<string, any>
+    ? Result
+    : never
+  : never

package/dist/runtime/ui.config.d.ts

@@ -1,2 +1,11 @@
+export declare const icon: {
+    dynamic: boolean;
+};
+export declare const card: any;
+export declare const breadcrumb: any;
+export declare const buttonGroup: any;
+export declare const button: any;
 export declare const modal: any;
 export declare const slideover: any;
+export declare const tabs: any;
+export declare const badge: any;

package/dist/runtime/ui.config.mjs

@@ -1,4 +1,39 @@
-import { modal as inheritModal, slideover as inheritSlideover } from "#ui/ui.config";
+import {
+  modal as inheritModal,
+  slideover as inheritSlideover,
+  button as inheritButton,
+  buttonGroup as inheritButtonGroup,
+  tabs as inheritTabs,
+  card as inheritCard,
+  breadcrumb as inheritBreadcrumb,
+  badge as inheritBadge
+} from "#ui/ui.config";
+export const icon = {
+  dynamic: false
+};
+export const card = { ...inheritCard };
+export const breadcrumb = {
+  ...inheritBreadcrumb,
+  default: {
+    divider: "i-heroicons-chevron-right-20-solid rtl:i-heroicons-chevron-left-20-solid"
+  }
+};
+export const buttonGroup = {
+  ...inheritButtonGroup,
+  default: {
+    size: "md",
+    orientation: "horizontal"
+  }
+};
+export const button = {
+  ...inheritButton,
+  default: {
+    size: "md",
+    variant: "solid",
+    color: "primary",
+    loadingIcon: "i-heroicons-arrow-path-20-solid"
+  }
+};
 export const modal = {
   ...inheritModal,
   header: "px-4 py-2 border-b",
@@ -42,3 +77,14 @@ export const slideover = {
     size: "md"
   }
 };
+export const tabs = {
+  ...inheritTabs
+};
+export const badge = {
+  ...inheritBadge,
+  default: {
+    size: "sm",
+    variant: "solid",
+    color: "primary"
+  }
+};

package/dist/runtime/utils/ObjectHelper.d.ts

@@ -15,4 +15,5 @@ export declare class ObjectHelper {
     static createStatus(): IStatus;
     static isInvalidParams(errorData: any): boolean;
     static isEmpty: (object: any) => boolean;
+    static stringArrayToObject: (array: string[]) => Record<string, string>;
 }

package/dist/runtime/utils/ObjectHelper.mjs

@@ -105,4 +105,10 @@ export class ObjectHelper {
   static isEmpty = (object) => {
     return _isEmpty(object);
   };
+  static stringArrayToObject = (array) => {
+    return array.reduce((obj, item) => {
+      obj[item] = item;
+      return obj;
+    }, {});
+  };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.3.22",
+  "version": "1.3.24",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Development Team",
@@ -69,6 +69,7 @@
     "nuxt": "^3.7.4",
     "prettier": "^3.0.3",
     "release-it": "^16.2.1",
+    "sass": "^1.69.5",
     "stylelint": "^15.10.3",
     "stylelint-config-prettier-scss": "^1.0.0",
     "stylelint-config-standard-scss": "^11.0.0",