@finema/core 2.18.2 → 2.19.1

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "2.18.2",
+  "version": "2.19.1",
   "configKey": "core",
   "builder": {
     "@nuxt/module-builder": "1.0.1",

package/dist/module.mjs

@@ -3,7 +3,7 @@ import defu from 'defu';
 import * as theme from '../dist/runtime/theme/index.js';
 
 const name = "@finema/core";
-const version = "2.18.2";
+const version = "2.19.1";
 
 const nuxtAppOptions = {
   head: {

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

@@ -1,41 +1,41 @@
 <template>
   <AlertDialogRoot :open="true">
     <AlertDialogPortal>
-      <AlertDialogOverlay :class="ui.overlay()" />
+      <AlertDialogOverlay :class="theme.overlay()" />
       <AlertDialogContent
-        :class="ui.base()"
+        :class="theme.base()"
       >
         <Icon
           v-if="!propsSafe.isHideIcon"
           :name="getIcon"
-          :class="ui.icon()"
+          :class="theme.icon()"
         />
-        <div :class="ui.wrapper()">
-          <AlertDialogTitle :class="ui.title()">
+        <div :class="theme.wrapper()">
+          <AlertDialogTitle :class="theme.title()">
             {{ propsSafe.title }}
           </AlertDialogTitle>
           <AlertDialogDescription
             v-if="propsSafe.description"
-            :class="ui.description()"
+            :class="theme.description()"
           >
             {{ propsSafe.description }}
           </AlertDialogDescription>
 
-          <div :class="ui.buttonGroup()">
+          <div :class="theme.buttonGroup()">
             <Button
               v-if="propsSafe.isShowCancelBtn"
               type="button"
               color="neutral"
               variant="outline"
-              :class="ui.cancelButton()"
+              :class="theme.cancelButton()"
               @click="emits('close', false)"
             >
               {{ propsSafe.cancelText }}
             </Button>
             <Button
               type="button"
-              :color="propsSafe.isConfirm ? dialogConfig.confirmColor : propsSafe.type"
-              :class="ui.confirmButton()"
+              :color="propsSafe.isConfirm ? staticTheme.confirmColor : propsSafe.type"
+              :class="theme.confirmButton()"
               @click="emits('close', true)"
             >
               {{ propsSafe.confirmText }}
@@ -57,7 +57,7 @@ import {
   AlertDialogTitle
 } from "reka-ui";
 import { computed, useAttrs } from "vue";
-import { useUiAllConfig, useUiConfig } from "../../composables/useConfig";
+import { useUiIconConfig, useUiConfig, useUiStaticConfig } from "../../composables/useConfig";
 import { dialogTheme } from "#core/theme/dialog";
 import { DialogType } from "#core/composables/useDialog";
 const emits = defineEmits();
@@ -66,7 +66,8 @@ const props = withDefaults(defineProps(), {
   cancelText: "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01"
 });
 const attrs = useAttrs();
-const dialogConfig = useUiAllConfig().dialog.slots;
+const icons = useUiIconConfig("dialog");
+const staticTheme = useUiStaticConfig("dialog");
 const propsSafe = computed(() => {
   if (props.title) {
     return props;
@@ -82,22 +83,22 @@ const getIcon = computed(() => {
     return propsSafe.value.icon;
   }
   if (propsSafe.value.isConfirm) {
-    return dialogConfig.iconConfirm;
+    return icons.iconConfirm;
   }
   switch (propsSafe.value.type) {
     case DialogType.SUCCESS:
-      return dialogConfig.iconSuccess;
+      return icons.iconSuccess;
     case DialogType.ERROR:
-      return dialogConfig.iconError;
+      return icons.iconError;
     case DialogType.INFO:
-      return dialogConfig.iconInfo;
+      return icons.iconInfo;
     case DialogType.WARNING:
-      return dialogConfig.iconWarning;
+      return icons.iconWarning;
     default:
-      return dialogConfig.iconInfo;
+      return icons.iconInfo;
   }
 });
-const ui = computed(() => useUiConfig(dialogTheme, "dialog")({
+const theme = computed(() => useUiConfig(dialogTheme, "dialog")({
   color: propsSafe.value.isConfirm ? void 0 : propsSafe.value.type,
   confirm: propsSafe.value.isConfirm
 }));

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

@@ -20,6 +20,7 @@
 import { computed } from "vue";
 import FormInputTextarea from "./InputTextarea/index.vue";
 import FormInputText from "./InputText/index.vue";
+import FormInputSearch from "./InputSearch/index.vue";
 import FormInputNumber from "./InputNumber/index.vue";
 import FormInputToggle from "./InputToggle/index.vue";
 import FormInputCheckbox from "./InputCheckbox/index.vue";
@@ -45,6 +46,10 @@ const componentMap = {
     component: FormInputText,
     props: {}
   },
+  [INPUT_TYPES.SEARCH]: {
+    component: FormInputSearch,
+    props: {}
+  },
   [INPUT_TYPES.TEXTAREA]: {
     component: FormInputTextarea,
     props: {}

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

@@ -0,0 +1,79 @@
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <Input
+      :model-value="value"
+      :disabled="wrapperProps.disabled"
+      :leading-icon="leadingIcon || searchIcon || 'i-heroicons-magnifying-glass'"
+      :trailing-icon="trailingIcon"
+      :loading="loading"
+      :loading-icon="loadingIcon"
+      :name="name"
+      :placeholder="wrapperProps.placeholder || 'Search...'"
+      type="text"
+      :autofocus="!!autoFocus"
+      :icon="icon"
+      :readonly="readonly"
+      :ui="ui"
+      @update:model-value="onInput"
+    >
+      <template #trailing>
+        <Button
+          v-if="clearable && value && value.length > 0"
+          color="neutral"
+          class="p-0"
+          variant="link"
+          :icon="clearIcon || 'i-heroicons-x-mark'"
+          :padded="false"
+          title="ล้างการค้นหา"
+          @click="onClear"
+        />
+      </template>
+    </Input>
+  </FieldWrapper>
+</template>
+
+<script setup>
+import { useFieldHOC } from "#core/composables/useForm";
+import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
+const emits = defineEmits(["change", "search", "clear"]);
+const props = defineProps({
+  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 },
+  clearable: { type: Boolean, required: false, default: true },
+  clearIcon: { type: String, required: false },
+  searchIcon: { type: String, 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 onInput = (newValue) => {
+  handleChange(newValue);
+  emits("change", newValue);
+  emits("search", newValue);
+};
+const onClear = () => {
+  handleChange("");
+  emits("change", "");
+  emits("clear");
+  emits("search", "");
+};
+</script>

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

@@ -0,0 +1,13 @@
+import type { ISearchFieldProps } from '#core/components/Form/InputSearch/types';
+declare const _default: import("vue").DefineComponent<ISearchFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    search: (...args: any[]) => void;
+    clear: (...args: any[]) => void;
+    change: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<ISearchFieldProps> & Readonly<{
+    onSearch?: ((...args: any[]) => any) | undefined;
+    onClear?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    clearable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,16 @@
+import type { IFieldProps, IFormFieldBase, INPUT_TYPES } from '#core/components/Form/types';
+export interface ISearchFieldProps extends IFieldProps {
+    leadingIcon?: any;
+    trailingIcon?: any;
+    loading?: boolean;
+    loadingIcon?: any;
+    icon?: string;
+    clearable?: boolean;
+    clearIcon?: string;
+    searchIcon?: string;
+}
+export type ISearchField = IFormFieldBase<INPUT_TYPES.SEARCH, ISearchFieldProps, {
+    change?: (value: string) => void;
+    search?: (value: string) => void;
+    clear?: () => void;
+}>;

package/dist/runtime/components/Form/InputUploadDropzoneAuto/EmptyState.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="theme.placeholderWrapper()">
     <Icon
-      :name="themeStatic.uploadIcon"
+      :name="icons.uploadIcon"
       :class="theme.labelIcon()"
     />
     <div :class="theme.labelWrapper()">
@@ -23,7 +23,7 @@
 </template>
 
 <script setup>
-import { useUiConfigStatic } from "#imports";
+import { useUiIconConfig } from "#imports";
 defineProps({
   theme: { type: null, required: true },
   selectFileLabel: { type: String, required: true },
@@ -31,5 +31,5 @@ defineProps({
   placeholder: { type: String, required: false }
 });
 defineEmits(["openFile"]);
-const themeStatic = useUiConfigStatic("uploadFileDropzone");
+const icons = useUiIconConfig("uploadFileDropzone");
 </script>

package/dist/runtime/components/Form/InputUploadDropzoneAuto/FailedState.vue

@@ -16,7 +16,7 @@
         </p>
         <Button
           variant="link"
-          :icon="themeStatic.actionRetryIcon"
+          :icon="icons.actionRetryIcon"
           :class="theme.actionRetryBtnClass()"
           color="primary"
           @click="$emit('retry')"
@@ -25,7 +25,7 @@
         </Button>
       </div>
       <Icon
-        :name="themeStatic.actionDeleteIcon"
+        :name="icons.actionDeleteIcon"
         :class="theme.actionDeleteIconClass()"
         title="ลบไฟล์"
         @click="$emit('delete')"
@@ -36,7 +36,7 @@
 
 <script setup>
 import { isImage } from "#core/helpers/componentHelper";
-import { useUiConfigStatic } from "#imports";
+import { useUiIconConfig } from "#imports";
 const props = defineProps({
   theme: { type: null, required: true },
   selectedFile: { type: null, required: true },
@@ -44,11 +44,11 @@ const props = defineProps({
   retryLabel: { type: String, required: true }
 });
 defineEmits(["retry", "delete"]);
-const themeStatic = useUiConfigStatic("uploadFileDropzone");
+const icons = useUiIconConfig("uploadFileDropzone");
 const getFileIcon = (file) => {
   if (isImage(file)) {
-    return themeStatic.placeholderImgIcon;
+    return icons.placeholderImgIcon;
   }
-  return themeStatic.filePreviewIcon;
+  return icons.filePreviewIcon;
 };
 </script>

package/dist/runtime/components/Form/InputUploadDropzoneAuto/LoadingState.vue

@@ -17,7 +17,7 @@
       </div>
       <div>
         <Icon
-          :name="themeStatic.loadingIcon"
+          :name="icons.loadingIcon"
           :class="theme.onLoadingLoadingIconClass()"
         />
       </div>
@@ -27,19 +27,19 @@
 
 <script setup>
 import { isImage } from "#core/helpers/componentHelper";
-import { useUiConfigStatic } from "#imports";
+import { useUiIconConfig } from "#imports";
 const props = defineProps({
   theme: { type: null, required: true },
   selectedFile: { type: null, required: true },
   percent: { type: Number, required: true },
   uploadingLabel: { type: String, required: true }
 });
-const themeStatic = useUiConfigStatic("uploadFileDropzone");
+const icons = useUiIconConfig("uploadFileDropzone");
 const getFileIcon = (file) => {
   if (isImage(file)) {
-    return themeStatic.placeholderImgIcon;
+    return icons.placeholderImgIcon;
   }
-  return themeStatic.filePreviewIcon;
+  return icons.filePreviewIcon;
 };
 const getFileSize = (file) => {
   const size = file.size;

package/dist/runtime/components/Form/InputUploadDropzoneAuto/SuccessState.vue

@@ -13,7 +13,7 @@
       </div>
       <div v-else>
         <Icon
-          :name="themeStatic.filePreviewIcon"
+          :name="icons.filePreviewIcon"
           :class="theme.onPreviewPreviewFileClass()"
         />
       </div>
@@ -35,27 +35,27 @@
           class="flex"
         >
           <Icon
-            :name="themeStatic.actionPreviewIcon"
+            :name="icons.actionPreviewIcon"
             :class="theme.actionIconClass()"
             title="ดูตัวอย่าง"
           />
         </a>
         <Icon
           v-if="isImageFromPath(value.path) || isVideoFromPath(value.path)"
-          :name="themeStatic.actionPreviewIcon"
+          :name="icons.actionPreviewIcon"
           :class="theme.actionIconClass()"
           title="ดูตัวอย่าง"
           @click="$emit('preview')"
         />
         <Icon
-          :name="themeStatic.actionDownloadIcon"
+          :name="icons.actionDownloadIcon"
           :class="theme.actionIconClass()"
           title="ดาวน์โหลดไฟล์"
           @click="$emit('download')"
         />
         <Icon
           v-if="!disabled && !readonly"
-          :name="themeStatic.actionDeleteIcon"
+          :name="icons.actionDeleteIcon"
           :class="theme.actionIconClass()"
           title="ลบไฟล์"
           @click="$emit('delete')"
@@ -72,7 +72,7 @@ import {
   isVideoFromPath,
   useFileSize
 } from "#core/helpers/componentHelper";
-import { useUiConfigStatic } from "#imports";
+import { useUiIconConfig } from "#imports";
 defineProps({
   theme: { type: null, required: true },
   value: { type: Object, required: true },
@@ -80,7 +80,7 @@ defineProps({
   readonly: { type: Boolean, required: false }
 });
 defineEmits(["preview", "download", "delete"]);
-const themeStatic = useUiConfigStatic("uploadFileDropzone");
+const icons = useUiIconConfig("uploadFileDropzone");
 const getFileSizeFromValue = (fileValue) => {
   const allocate = useFileSize(fileValue.size || 0);
   return allocate.isSelectedFileUseMb.value ? `${allocate.selectedFileSizeMb.value} MB` : `${allocate.selectedFileSizeKb.value} KB`;

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

@@ -3,6 +3,7 @@ import type { FormContext } from 'vee-validate';
 import type { IUploadDropzoneAutoField } from './InputUploadDropzoneAuto/types.js';
 import type { IDateTimeRangeField } from './InputDateTimeRange/date_range_time_field.types.js';
 import type { ITextField } from '#core/components/Form/InputText/types';
+import type { ISearchField } from '#core/components/Form/InputSearch/types';
 import type { ITextareaField } from '#core/components/Form/InputTextarea/types';
 import type { IToggleField } from '#core/components/Form/InputToggle/types';
 import type { ISelectField } from '#core/components/Form/InputSelect/types';
@@ -14,6 +15,7 @@ import type { IRadioField } from '#core/components/Form/InputRadio/types';
 import type { IWYSIWYGField } from '#core/components/Form/InputWYSIWYG/types';
 export declare const enum INPUT_TYPES {
     TEXT = "TEXT",
+    SEARCH = "SEARCH",
     NUMBER = "NUMBER",
     TEXTAREA = "TEXTAREA",
     PASSWORD = "PASSWORD",
@@ -64,7 +66,7 @@ export interface IFormFieldBase<I extends INPUT_TYPES, P extends IFieldProps, O>
     props: P;
     on?: O;
 }
-export type IFormField = ITextField | INumberField | ITextareaField | IToggleField | ISelectField | ICheckboxField | ISelectMultipleField | IRadioField | IDateTimeField | IDateTimeRangeField | IUploadDropzoneAutoField | IWYSIWYGField | IFormFieldBase<INPUT_TYPES.COMPONENT, any, any>;
+export type IFormField = ITextField | ISearchField | INumberField | ITextareaField | IToggleField | ISelectField | ICheckboxField | ISelectMultipleField | IRadioField | IDateTimeField | IDateTimeRangeField | IUploadDropzoneAutoField | IWYSIWYGField | IFormFieldBase<INPUT_TYPES.COMPONENT, any, any>;
 export interface IFileValue {
     url: string;
     path?: string;

package/dist/runtime/components/Form/types.js

@@ -1,5 +1,6 @@
 export var INPUT_TYPES = /* @__PURE__ */ ((INPUT_TYPES2) => {
   INPUT_TYPES2["TEXT"] = "TEXT";
+  INPUT_TYPES2["SEARCH"] = "SEARCH";
   INPUT_TYPES2["NUMBER"] = "NUMBER";
   INPUT_TYPES2["TEXTAREA"] = "TEXTAREA";
   INPUT_TYPES2["PASSWORD"] = "PASSWORD";

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

@@ -1,98 +1,98 @@
 <template>
-  <div ref="tableContainer">
-    <div
-      v-if="options.isEnabledSearch"
+  <div ref="tableContainer">
+    <div
+      v-if="options.isEnabledSearch"
       :class="theme.searchContainer({
   class: [ui?.searchContainer]
-})"
-    >
-      <Input
-        v-model="q"
-        icon="i-heroicons-magnifying-glass"
-        :placeholder="options.searchPlaceholder || '\u0E04\u0E49\u0E19\u0E2B\u0E32....'"
-      />
-    </div>
-    <UTable
-      v-bind="$attrs"
-      :loading="options.status.isLoading"
-      :data="options.rawData"
-      :columns="options.columns"
-    >
-      <template #empty>
-        <slot
-          v-if="options.status.isLoading"
-          name="loading"
-        >
-          <Loader
-            :loading="true"
-          />
-        </slot>
-        <slot
-          v-else-if="options.status.isError"
-          name="error"
-        >
-          <div
-            class="flex h-[200px] items-center justify-center text-2xl text-error-400"
-          >
-            {{ StringHelper.getError(options.status.errorData) }}
-          </div>
-        </slot>
-
-        <slot
-          v-else
-          name="error"
-        >
-          <Empty />
-        </slot>
-      </template>
-      <template
-        v-for="column in options.columns.filter((item) => !!item.type)"
-        #[`${column.accessorKey}-cell`]="{ row }"
-        :key="column.accessorKey"
-      >
-        <component
-          :is="column.type === COLUMN_TYPES.COMPONENT ? column.component : columnTypeComponents[column.type]"
-          v-if="column.type === COLUMN_TYPES.COMPONENT || columnTypeComponents[column.type]"
-          :value="transformValue(column, row)"
-          :column="column"
-          :row="row"
-        />
-      </template>
-      <template
-        v-for="(_, slotName) of $slots"
-        #[slotName]="slotProps"
-      >
-        <slot
-          :name="slotName"
-          v-bind="slotProps || {}"
-        />
-      </template>
-    </UTable>
-
-    <div
-      v-if="!options.isHidePagination"
+})"
+    >
+      <Input
+        v-model="q"
+        icon="i-heroicons-magnifying-glass"
+        :placeholder="options.searchPlaceholder || '\u0E04\u0E49\u0E19\u0E2B\u0E32....'"
+      />
+    </div>
+    <UTable
+      v-bind="$attrs"
+      :loading="options.status.isLoading"
+      :data="options.rawData"
+      :columns="options.columns"
+    >
+      <template #empty>
+        <slot
+          v-if="options.status.isLoading"
+          name="loading"
+        >
+          <Loader
+            :loading="true"
+          />
+        </slot>
+        <slot
+          v-else-if="options.status.isError"
+          name="error"
+        >
+          <div
+            class="flex h-[200px] items-center justify-center text-2xl text-error-400"
+          >
+            {{ StringHelper.getError(options.status.errorData) }}
+          </div>
+        </slot>
+
+        <slot
+          v-else
+          name="error"
+        >
+          <Empty />
+        </slot>
+      </template>
+      <template
+        v-for="column in options.columns.filter((item) => !!item.type)"
+        #[`${column.accessorKey}-cell`]="{ row }"
+        :key="column.accessorKey"
+      >
+        <component
+          :is="column.type === COLUMN_TYPES.COMPONENT ? column.component : columnTypeComponents[column.type]"
+          v-if="column.type === COLUMN_TYPES.COMPONENT || columnTypeComponents[column.type]"
+          :value="transformValue(column, row)"
+          :column="column"
+          :row="row"
+        />
+      </template>
+      <template
+        v-for="(_, slotName) of $slots"
+        #[slotName]="slotProps"
+      >
+        <slot
+          :name="slotName"
+          v-bind="slotProps || {}"
+        />
+      </template>
+    </UTable>
+
+    <div
+      v-if="!options.isHidePagination"
       :class="theme.paginationContainer({
   class: [ui?.paginationContainer]
-})"
-    >
-      <p
+})"
+    >
+      <p
         :class="theme.paginationInfo({
   class: [ui?.paginationInfo]
-})"
-      >
-        {{ pageBetween }} รายการ จากทั้งหมด {{ totalCountWithComma }} รายการ
-      </p>
-      <Pagination
-        v-if="options.pageOptions.totalPage > 1"
-        v-model:page="page"
-        :default-page="options.pageOptions?.currentPage || 1"
-        :items-per-page="options.pageOptions.limit"
-        :total="options.pageOptions.totalCount"
-        :to="options.isPreventRouteChange ? void 0 : to"
-        @update:page="onPageChange"
-      />
-    </div>
-  </div>
+})"
+      >
+        {{ pageBetween }} รายการ จากทั้งหมด {{ totalCountWithComma }} รายการ
+      </p>
+      <Pagination
+        v-if="options.pageOptions.totalPage > 1"
+        v-model:page="page"
+        :default-page="options.pageOptions?.currentPage || 1"
+        :items-per-page="options.pageOptions.limit"
+        :total="options.pageOptions.totalCount"
+        :to="options.isPreventRouteChange ? void 0 : to"
+        @update:page="onPageChange"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -148,18 +148,6 @@ watch(
 useWatchChange(() => props.options?.pageOptions?.currentPage, (value) => {
   page.value = value;
 });
-useWatchChange(() => props.options?.pageOptions?.request?.params, () => {
-  if (props.options?.isPreventRouteChange) return;
-  const params = props.options?.pageOptions?.request?.params || {};
-  const cleanParams = Object.fromEntries(
-    Object.entries(params).filter(
-      ([key, value]) => value !== null && value !== void 0 && value !== ""
-    )
-  );
-  router.replace({
-    query: cleanParams
-  });
-});
 const pageBetween = computed(() => {
   const rawDataLength = props.options.rawData?.length;
   const pageOpts = props.options.pageOptions;

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

@@ -1,5 +1,5 @@
 import type { core as Core } from '../../core.config.js';
 export declare const useCoreConfig: () => typeof Core;
 export declare const useUiConfig: (config: object, name: string) => any;
-export declare const useUiConfigStatic: (name: string) => any;
-export declare const useUiAllConfig: () => any;
+export declare const useUiIconConfig: (name: string) => any;
+export declare const useUiStaticConfig: (name: string) => any;

package/dist/runtime/composables/useConfig.js

@@ -9,9 +9,9 @@ export const useUiConfig = (config, name) => {
     ...appConfig.ui[name] || {}
   });
 };
-export const useUiConfigStatic = (name) => {
-  return appConfig.ui[name].slots;
+export const useUiIconConfig = (name) => {
+  return appConfig.ui[name].icons;
 };
-export const useUiAllConfig = () => {
-  return appConfig.ui;
+export const useUiStaticConfig = (name) => {
+  return appConfig.ui[name].slots;
 };

package/dist/runtime/styles/main.css

@@ -1 +1 @@
-@import "tailwindcss";@import "@nuxt/ui";@plugin "@tailwindcss/typography";@source inline("prose");@theme static{--font-sans:"Noto Sans Thai","Noto Sans Thai Looped","Public Sans",sans-serif;--color-main:#232c5a;--color-main-50:#f4f4f7;--color-main-100:#e9eaef;--color-main-200:#c8cad6;--color-main-300:#a7abbd;--color-main-400:#656b8c;--color-main-500:#232c5a;--color-main-600:#202851;--color-main-700:#151a36;--color-main-800:#101429;--color-main-900:#0b0d1b;--color-main-950:#0b0d1b;--color-secondary:#ee8b36;--color-secondary-50:#fdf1e7;--color-secondary-100:#f9d6b8;--color-secondary-200:#f5bb89;--color-secondary-300:#f1a05a;--color-secondary-400:#ed852b;--color-secondary-500:#d46b12;--color-secondary-600:#a5540e;--color-secondary-700:#763c0a;--color-secondary-800:#472406;--color-secondary-900:#180c02;--color-info:#0d8cee;--color-info-50:#f3f9fe;--color-info-100:#e7f4fd;--color-info-200:#ebf6ff;--color-info-300:#9ed1f8;--color-info-400:#56aff3;--color-info-500:#0d8cee;--color-info-600:#0c7ed6;--color-info-700:#08548f;--color-info-800:#063f6b;--color-info-900:#042a47;--color-error:#f25555;--color-error-50:#fef7f7;--color-error-100:#feeeee;--color-error-200:#ffdfdf;--color-error-300:#fabbbb;--color-error-400:#f68888;--color-error-500:#f25555;--color-error-600:#da4d4d;--color-error-700:#913333;--color-error-800:#6d2626;--color-error-900:#491a1a;--color-success:#3fb061;--color-success-50:#f5fbf7;--color-success-100:#ecf7ef;--color-success-200:#daeee0;--color-success-300:#b2dfc0;--color-success-400:#79c890;--color-success-500:#3fb061;--color-success-600:#399e57;--color-success-700:#266a3a;--color-success-800:#1c4f2c;--color-success-900:#13351d;--color-warning:#ff9a35;--color-warning-50:#fffaf5;--color-warning-100:#fff5eb;--color-warning-200:#fef1cc;--color-warning-300:#ffd7ae;--color-warning-400:#ffb872;--color-warning-500:#ff9a35;--color-warning-600:#e68b30;--color-warning-700:#995c20;--color-warning-800:#734518;--color-warning-900:#4d2e10}::-webkit-scrollbar{-webkit-appearance:none;height:10px;width:10px}::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3);border-radius:4px;box-shadow:0 0 1px hsla(0,0%,100%,.5)}:root{--dp-font-family:inherit!important}.dp__theme_light{--dp-primary-color:var(--color-main)!important;--dp-primary-disabled-color:var(--color-main-200)!important}#__nuxt,body,html{@apply w-full h-full}
+@import "tailwindcss";@import "@nuxt/ui";@plugin "@tailwindcss/typography";@source inline("prose");@theme{--font-sans:"Noto Sans Thai","Noto Sans Thai Looped","Public Sans",sans-serif}@theme static{--color-main:#232c5a;--color-main-50:#f4f4f7;--color-main-100:#e9eaef;--color-main-200:#c8cad6;--color-main-300:#a7abbd;--color-main-400:#656b8c;--color-main-500:#232c5a;--color-main-600:#202851;--color-main-700:#151a36;--color-main-800:#101429;--color-main-900:#0b0d1b;--color-main-950:#0b0d1b;--color-secondary:#ee8b36;--color-secondary-50:#fdf1e7;--color-secondary-100:#f9d6b8;--color-secondary-200:#f5bb89;--color-secondary-300:#f1a05a;--color-secondary-400:#ed852b;--color-secondary-500:#d46b12;--color-secondary-600:#a5540e;--color-secondary-700:#763c0a;--color-secondary-800:#472406;--color-secondary-900:#180c02;--color-info:#0d8cee;--color-info-50:#f3f9fe;--color-info-100:#e7f4fd;--color-info-200:#ebf6ff;--color-info-300:#9ed1f8;--color-info-400:#56aff3;--color-info-500:#0d8cee;--color-info-600:#0c7ed6;--color-info-700:#08548f;--color-info-800:#063f6b;--color-info-900:#042a47;--color-error:#f25555;--color-error-50:#fef7f7;--color-error-100:#feeeee;--color-error-200:#ffdfdf;--color-error-300:#fabbbb;--color-error-400:#f68888;--color-error-500:#f25555;--color-error-600:#da4d4d;--color-error-700:#913333;--color-error-800:#6d2626;--color-error-900:#491a1a;--color-success:#3fb061;--color-success-50:#f5fbf7;--color-success-100:#ecf7ef;--color-success-200:#daeee0;--color-success-300:#b2dfc0;--color-success-400:#79c890;--color-success-500:#3fb061;--color-success-600:#399e57;--color-success-700:#266a3a;--color-success-800:#1c4f2c;--color-success-900:#13351d;--color-warning:#ff9a35;--color-warning-50:#fffaf5;--color-warning-100:#fff5eb;--color-warning-200:#fef1cc;--color-warning-300:#ffd7ae;--color-warning-400:#ffb872;--color-warning-500:#ff9a35;--color-warning-600:#e68b30;--color-warning-700:#995c20;--color-warning-800:#734518;--color-warning-900:#4d2e10}::-webkit-scrollbar{-webkit-appearance:none;height:10px;width:10px}::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3);border-radius:4px;box-shadow:0 0 1px hsla(0,0%,100%,.5)}:root{--dp-font-family:inherit!important}.dp__theme_light{--dp-primary-color:var(--color-main)!important;--dp-primary-disabled-color:var(--color-main-200)!important}#__nuxt,body,html{@apply w-full h-full}

package/dist/runtime/theme/dialog.d.ts

@@ -1,13 +1,15 @@
 export declare const dialogTheme: {
-    slots: {
-        base: string;
-        overlay: string;
-        icon: string;
+    icons: {
         iconSuccess: string;
         iconInfo: string;
         iconWarning: string;
         iconError: string;
         iconConfirm: string;
+    };
+    slots: {
+        base: string;
+        overlay: string;
+        icon: string;
         wrapper: string;
         confirmColor: string;
         title: string;

package/dist/runtime/theme/dialog.js

@@ -1,13 +1,15 @@
 export const dialogTheme = {
-  slots: {
-    base: "flex space-x-4 shadow-lg ring ring-default z-[100] text-sm fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[500px] translate-x-[-50%] translate-y-[-50%] rounded-lg bg-white p-[25px] focus:outline-none",
-    overlay: "fixed inset-0 bg-elevated/75 backdrop-blur",
-    icon: "size-12",
+  icons: {
     iconSuccess: "i-heroicons-check-circle",
     iconInfo: "i-heroicons-information-circle",
     iconWarning: "i-heroicons-exclamation-circle",
     iconError: "i-heroicons-x-circle",
-    iconConfirm: "i-heroicons-information-circle",
+    iconConfirm: "i-heroicons-information-circle"
+  },
+  slots: {
+    base: "flex space-x-4 shadow-lg ring ring-default z-[100] text-sm fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[500px] translate-x-[-50%] translate-y-[-50%] rounded-lg bg-white p-[25px] focus:outline-none",
+    overlay: "fixed inset-0 bg-elevated/75 backdrop-blur",
+    icon: "size-12",
     wrapper: "flex flex-col w-full",
     confirmColor: "info",
     title: "font-bold text-lg",

package/dist/runtime/theme/uploadFileDropzone.d.ts

@@ -1,4 +1,15 @@
 export declare const uploadFileDropzoneTheme: {
+    icons: {
+        filePreviewIcon: string;
+        uploadIcon: string;
+        placeholderImgIcon: string;
+        failedImgIcon: string;
+        loadingIcon: string;
+        actionPreviewIcon: string;
+        actionDownloadIcon: string;
+        actionDeleteIcon: string;
+        actionRetryIcon: string;
+    };
     slots: {
         base: string;
         wrapper: string;
@@ -7,11 +18,6 @@ export declare const uploadFileDropzoneTheme: {
         placeholderWrapper: string;
         placeholder: string;
         labelWrapper: string;
-        filePreviewIcon: string;
-        uploadIcon: string;
-        placeholderImgIcon: string;
-        failedImgIcon: string;
-        loadingIcon: string;
         labelIcon: string;
         onLoadingWrapper: string;
         onLoadingPlaceholderWrapper: string;
@@ -30,10 +36,6 @@ export declare const uploadFileDropzoneTheme: {
         actionWrapper: string;
         actionIconClass: string;
         actionDeleteIconClass: string;
-        actionPreviewIcon: string;
-        actionDownloadIcon: string;
-        actionDeleteIcon: string;
-        actionRetryIcon: string;
         actionRetryBtnClass: string;
     };
     variants: {

package/dist/runtime/theme/uploadFileDropzone.js

@@ -1,4 +1,15 @@
 export const uploadFileDropzoneTheme = {
+  icons: {
+    filePreviewIcon: "i-heroicons:document-text-solid",
+    uploadIcon: "ri:upload-cloud-2-line",
+    placeholderImgIcon: "i-material-symbols:imagesmode-outline",
+    failedImgIcon: "i-material-symbols:imagesmode-outline",
+    loadingIcon: "i-svg-spinners:180-ring-with-bg",
+    actionPreviewIcon: "ic:outline-remove-red-eye",
+    actionDownloadIcon: "material-symbols:download",
+    actionDeleteIcon: "material-symbols:delete",
+    actionRetryIcon: "stash:arrow-retry"
+  },
   slots: {
     base: "relative w-full text-base p-4 transition rounded-md flex items-center justify-center ring-1 bg-white ring-gray-300",
     wrapper: "flex flex-col items-center w-full",
@@ -7,11 +18,6 @@ export const uploadFileDropzoneTheme = {
     placeholderWrapper: "py-4 flex flex-col items-center justify-center",
     placeholder: "text-gray-400 text-center font-light text-sm truncate",
     labelWrapper: "flex items-center space-x-2 text-gray-400 text-center",
-    filePreviewIcon: "i-heroicons:document-text-solid",
-    uploadIcon: "ri:upload-cloud-2-line",
-    placeholderImgIcon: "i-material-symbols:imagesmode-outline",
-    failedImgIcon: "i-material-symbols:imagesmode-outline",
-    loadingIcon: "i-svg-spinners:180-ring-with-bg",
     labelIcon: "size-6 text-gray-400 text-center mb-3",
     // Loading state
     onLoadingWrapper: "flex items-center space-x-4 w-full",
@@ -34,10 +40,6 @@ export const uploadFileDropzoneTheme = {
     actionWrapper: "flex items-center space-x-2",
     actionIconClass: "size-6 text-dimmed hover:text-dimmed-600 cursor-pointer transition-colors",
     actionDeleteIconClass: "size-6 text-(--ui-color-error-500) hover:text-(--ui-color-error-600) cursor-pointer transition-colors",
-    actionPreviewIcon: "ic:outline-remove-red-eye",
-    actionDownloadIcon: "material-symbols:download",
-    actionDeleteIcon: "material-symbols:delete",
-    actionRetryIcon: "stash:arrow-retry",
     actionRetryBtnClass: "px-0"
   },
   variants: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "2.18.2",
+  "version": "2.19.1",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",