@finema/core 2.6.2 → 2.7.0

package/dist/module.json

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

package/dist/module.mjs

@@ -3,13 +3,17 @@ import defu from 'defu';
 import * as theme from '../dist/runtime/theme/index.js';
 
 const name = "@finema/core";
-const version = "2.6.2";
+const version = "2.7.0";
 
 const nuxtAppOptions = {
   head: {
-    htmlAttrs: { lang: "en" },
+    htmlAttrs: {
+      lang: "en"
+    },
     meta: [
-      { charset: "utf-8" },
+      {
+        charset: "utf-8"
+      },
       {
         name: "viewport",
         content: "width=device-width, initial-scale=1"
@@ -68,7 +72,9 @@ const module = defineNuxtModule({
   // Default configuration options of the Nuxt module
   defaults: {},
   async setup(_options, _nuxt) {
-    const { resolve } = createResolver(import.meta.url);
+    const {
+      resolve
+    } = createResolver(import.meta.url);
     const runtimeDir = resolve("./runtime");
     _nuxt.options.build.transpile.push(runtimeDir);
     _nuxt.options.alias["#core"] = runtimeDir;
@@ -82,7 +88,9 @@ const module = defineNuxtModule({
       _nuxt.options.appConfig.core || {},
       core
     );
-    _nuxt.options.colorMode = { preference: "light" };
+    _nuxt.options.colorMode = {
+      preference: "light"
+    };
     _nuxt.options.appConfig.ui = {
       colors: {
         primary: "main",
@@ -109,7 +117,11 @@ const module = defineNuxtModule({
       _nuxt.options.build
     );
     _nuxt.options.vite = defu(
-      { optimizeDeps: { include: [..._nuxt.options.vite?.optimizeDeps?.include || [], "@wdns/vue-code-block"] } },
+      {
+        optimizeDeps: {
+          include: [..._nuxt.options.vite?.optimizeDeps?.include || [], "@wdns/vue-code-block"]
+        }
+      },
       _nuxt.options.vite
     );
     await installModule("@nuxt/ui", {

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

@@ -8,7 +8,7 @@
     <!-- Draggable Title Bar -->
     <div class="flex items-center justify-between px-2 py-1 select-none">
       <p
-        class="text-sm font-semibold cursor-move flex-grow"
+        class="flex-grow cursor-move text-sm font-semibold"
         @mousedown.prevent="handleDragStart"
       >
         Debug Tools
@@ -37,7 +37,7 @@
     <!-- Content Area Target for Logs -->
     <div
       id="dev-logs"
-      class="flex flex-col flex-1 space-y-1 p-2 overflow-auto"
+      class="flex flex-1 flex-col space-y-1 overflow-auto p-2"
       :style="{ height: `calc(${devToolsHeight} - 40px)` }"
     />
 
@@ -83,7 +83,7 @@
 
   <!-- Toggle button for this DevToolsWindow -->
   <div
-    class="fixed bottom-1 right-1 z-[99999]"
+    class="fixed right-1 bottom-1 z-[99999]"
   >
     <Button
       :icon="isShowDevTools ? 'heroicons:x-mark' : 'heroicons:information-circle'"
@@ -299,7 +299,9 @@ onMounted(() => {
         }
       });
     }
-  }, { immediate: true });
+  }, {
+    immediate: true
+  });
 });
 onUnmounted(() => {
   if (isDragging.value) handleDragEnd();

package/dist/runtime/components/FlexDeck/Base.vue

@@ -40,7 +40,7 @@
     <div class="flex h-60 items-center justify-center">
       <Icon
         name="i-svg-spinners:180-ring-with-bg"
-        class="text-primary size-8"
+        class="size-8 text-primary"
       />
     </div>
   </slot>
@@ -108,7 +108,9 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
-  containerClass: { type: [String, Array, Object] }
+  containerClass: {
+    type: [String, Array, Object]
+  }
 });
 const bottomEdgeElement = ref(null);
 const page = ref(props.pageOptions?.currentPage || 1);

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

@@ -1,20 +1,20 @@
 <template>
-  <div
+  <div
     :class="[theme.base({
   class: [$props.class, ui?.base]
-})]"
-  >
-    <component
-      :is="componentMap[option.type] || option.component"
-      v-for="option in options.filter((item) => !item.isHide)"
-      :key="option.props.name"
-      :class="option.class"
-      :form="form"
-      v-bind="getFieldBinding(option)"
-      :type="option.type === INPUT_TYPES.PASSWORD ? 'password' : void 0"
-      v-on="option.on ?? {}"
-    />
-  </div>
+})]"
+  >
+    <component
+      :is="componentMap[option.type] || option.component"
+      v-for="option in options.filter((item) => !item.isHide)"
+      :key="option.props.name"
+      :class="option.class"
+      :form="form"
+      v-bind="getFieldBinding(option)"
+      :type="option.type === INPUT_TYPES.PASSWORD ? 'password' : void 0"
+      v-on="option.on ?? {}"
+    />
+  </div>
 </template>
 
 <script setup>
@@ -27,6 +27,7 @@ import FormInputCheckbox from "./InputCheckbox/index.vue";
 import FormInputSelect from "./InputSelect/index.vue";
 import FormInputSelectMultiple from "./InputSelectMultiple/index.vue";
 import FormInputDateTime from "./InputDateTime/index.vue";
+import FormInputUploadDropzoneAuto from "./InputUploadDropzoneAuto/index.vue";
 import { INPUT_TYPES } from "#core/components/Form/types";
 import { formTheme } from "#core/theme/form";
 import { useUiConfig } from "#core/composables/useConfig";
@@ -63,13 +64,15 @@ const componentMap = {
   [INPUT_TYPES.UPLOAD_FILE_CLASSIC_AUTO]: void 0,
   [INPUT_TYPES.UPLOAD_IMAGE_AUTO]: void 0,
   [INPUT_TYPES.UPLOAD_DROPZONE]: void 0,
-  [INPUT_TYPES.UPLOAD_DROPZONE_AUTO]: void 0,
+  [INPUT_TYPES.UPLOAD_DROPZONE_AUTO]: FormInputUploadDropzoneAuto,
   [INPUT_TYPES.UPLOAD_DROPZONE_AUTO_MULTIPLE]: void 0,
   [INPUT_TYPES.UPLOAD_DROPZONE_IMAGE_AUTO_MULTIPLE]: void 0,
   [INPUT_TYPES.WYSIWYG]: void 0,
   [INPUT_TYPES.TAGS]: void 0
 };
-const theme = computed(() => useUiConfig(formTheme, "form")({ orientation: props.orientation }));
+const theme = computed(() => useUiConfig(formTheme, "form")({
+  orientation: props.orientation
+}));
 const getFieldBinding = (field) => {
   const {
     props: fieldProps,
@@ -77,14 +80,20 @@ const getFieldBinding = (field) => {
   } = field;
   const allProps = {
     ...fieldProps,
-    containerUi: { ...fieldUi }
+    containerUi: {
+      ...fieldUi
+    }
   };
   if (props.orientation === "horizontal") {
     return {
       ...allProps,
       containerUi: {
-        root: theme.value.wrapper({ class: [props.ui?.wrapper] }),
-        labelWrapper: theme.value.container({ class: [props.ui?.container] })
+        root: theme.value.wrapper({
+          class: [props.ui?.wrapper]
+        }),
+        labelWrapper: theme.value.container({
+          class: [props.ui?.container]
+        })
       }
     };
   }

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

@@ -0,0 +1,114 @@
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <div
+      ref="dropZoneRef"
+      :class="theme.base()"
+    >
+      <div :class="theme.wrapper()">
+        <div
+          v-if="!selectedFile && !value"
+          :class="[theme.placeholderWrapper()]"
+        >
+          <Icon
+            :name="useUiConfigStatic('uploadFileDropzone').uploadIcon"
+            :class="[theme.labelIcon()]"
+          />
+          <div :class="[theme.labelWrapper()]">
+            <p
+              class="text-primary bg-primary-50 cursor-pointer"
+              @click="fileDialog.open"
+            >
+              {{ selectFileLabel }}
+            </p>
+            <p>{{ selectFileSubLabel }}</p>
+          </div>
+          <p
+            v-if="placeholder"
+            :class="theme.placeholder()"
+          >
+            {{ placeholder }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </FieldWrapper>
+</template>
+
+<script setup>
+import { useDropZone, useFileDialog } from "@vueuse/core";
+import { computed, ref, useTemplateRef } from "vue";
+import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
+import { useFieldHOC } from "#core/composables/useForm";
+import { uploadFileDropzoneTheme } from "#core/theme/uploadFileDropzone";
+import { useUiConfig, useUiConfigStatic } from "#core/composables/useConfig";
+import { useFileAllocate, useFileProgress, useFileSize } from "#core/helpers/componentHelper";
+const props = defineProps({
+  requestOptions: { type: Object, required: true },
+  uploadPathURL: { type: String, required: false },
+  selectFileLabel: { type: String, required: false, default: "\u0E04\u0E25\u0E34\u0E01\u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E44\u0E1F\u0E25\u0E4C" },
+  selectFileSubLabel: { type: String, required: false, default: "\u0E2B\u0E23\u0E37\u0E2D \u0E25\u0E32\u0E01\u0E41\u0E25\u0E30\u0E27\u0E32\u0E07\u0E17\u0E35\u0E48\u0E19\u0E35\u0E48" },
+  uploadingLabel: { type: String, required: false, default: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1E\u0E42\u0E2B\u0E25\u0E14..." },
+  uploadFailedLabel: { type: String, required: false, default: "\u0E2D\u0E31\u0E1E\u0E42\u0E2B\u0E25\u0E14\u0E25\u0E49\u0E21\u0E40\u0E2B\u0E25\u0E27, \u0E01\u0E23\u0E38\u0E13\u0E32\u0E25\u0E2D\u0E07\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07" },
+  retryLabel: { type: String, required: false },
+  accept: { type: [Array, String], required: false },
+  bodyKey: { type: String, required: false, default: "file" },
+  responseURL: { type: String, required: false, default: "url" },
+  responsePath: { type: String, required: false, default: "path" },
+  maxSize: { type: Number, 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 emits = defineEmits(["change", "success", "delete"]);
+const {
+  wrapperProps,
+  handleChange: onChange,
+  setErrors,
+  value
+} = useFieldHOC(props);
+const dropZoneRef = useTemplateRef("dropZoneRef");
+const theme = computed(() => useUiConfig(uploadFileDropzoneTheme, "uploadFileDropzone")({
+  dragover: dropzone.isOverDropZone.value
+}));
+const fileDialog = useFileDialog({
+  accept: typeof props.accept === "string" ? props.accept : props.accept?.join(","),
+  // Set to accept only image files
+  directory: false
+  // Select directories instead of files if set true
+});
+const selectedFile = ref();
+const isPreviewOpen = ref(false);
+const {
+  onUploadProgress,
+  onDownloadProgress,
+  percent
+} = useFileProgress();
+const fileAllocate = useFileAllocate(selectedFile, props);
+const fileAllocateFromPath = computed(() => useFileSize(value.value?.size));
+fileDialog.onChange((files) => {
+  console.log("Selected files:", files);
+});
+const onDrop = (files) => {
+  console.log("Selected files drop:", files);
+};
+const dropzone = useDropZone(dropZoneRef, {
+  onDrop,
+  // specify the types of data to be received.
+  dataTypes: typeof props.accept === "string" ? [props.accept] : props.accept,
+  // control multi-file drop
+  multiple: false,
+  // whether to prevent default behavior for unhandled events
+  preventDefaultForUnhandled: false
+});
+</script>

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

@@ -0,0 +1,19 @@
+import type { IUploadDropzoneAutoProps } from './types.js';
+declare const _default: import("vue").DefineComponent<IUploadDropzoneAutoProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    success: (...args: any[]) => void;
+    delete: (...args: any[]) => void;
+    change: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<IUploadDropzoneAutoProps> & Readonly<{
+    onSuccess?: ((...args: any[]) => any) | undefined;
+    onDelete?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    selectFileLabel: string;
+    selectFileSubLabel: string;
+    uploadingLabel: string;
+    uploadFailedLabel: string;
+    bodyKey: string;
+    responseURL: string;
+    responsePath: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,23 @@
+import type { AxiosRequestConfig } from 'axios';
+import type { IFieldProps, IFormFieldBase, INPUT_TYPES } from '../types.js';
+export interface IUploadDropzoneAutoProps extends IFieldProps {
+    requestOptions: Omit<AxiosRequestConfig, 'baseURL'> & {
+        baseURL: string;
+    };
+    uploadPathURL?: string;
+    selectFileLabel?: string;
+    selectFileSubLabel?: string;
+    uploadingLabel?: string;
+    uploadFailedLabel?: string;
+    retryLabel?: string;
+    accept?: string[] | string;
+    bodyKey?: string;
+    responseURL?: string;
+    responsePath?: string;
+    maxSize?: number;
+}
+export type IUploadDropzoneAutoField = IFormFieldBase<INPUT_TYPES.UPLOAD_DROPZONE_AUTO, IUploadDropzoneAutoProps, {
+    change: (value: File | undefined) => void;
+    success: (res: any) => void;
+    delete: () => void;
+}>;

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

@@ -1,5 +1,6 @@
 import type { Component } from '@nuxt/schema';
 import type { FormContext } from 'vee-validate';
+import type { IUploadDropzoneAutoField } from './InputUploadDropzoneAuto/types.js';
 import type { ITextField } from '#core/components/Form/InputText/types';
 import type { ITextareaField } from '#core/components/Form/InputTextarea/types';
 import type { IToggleField } from '#core/components/Form/InputToggle/types';
@@ -60,7 +61,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 | IDateTimeField | IFormFieldBase<INPUT_TYPES.COMPONENT, any, any>;
+export type IFormField = ITextField | INumberField | ITextareaField | IToggleField | ISelectField | ICheckboxField | ISelectMultipleField | IDateTimeField | IUploadDropzoneAutoField | IFormFieldBase<INPUT_TYPES.COMPONENT, any, any>;
 export interface IFileValue {
     url: string;
     path?: string;

package/dist/runtime/components/Image.vue

@@ -3,7 +3,7 @@
     <template #loading>
       <slot name="loading">
         <div
-          class="w-full h-full flex justify-center items-center"
+          class="flex h-full w-full items-center justify-center"
         >
           <Loader
             :loading="true"
@@ -15,12 +15,12 @@
     <template #error>
       <slot name="error">
         <div
-          class="w-full h-full flex justify-center items-center"
+          class="flex h-full w-full items-center justify-center"
         >
           <p class="text-error-400">
             <Icon
               name="i-heroicons:exclamation-circle-solid"
-              class="text-error-400 size-8"
+              class="size-8 text-error-400"
             />
           </p>
         </div>

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

@@ -18,7 +18,7 @@
       <div class="flex h-60 items-center justify-center">
         <Icon
           name="i-svg-spinners:180-ring-with-bg"
-          class="text-primary size-8"
+          class="size-8 text-primary"
         />
       </div>
     </template>

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

@@ -53,7 +53,7 @@
           name="error"
         >
           <div
-            class="text-error-400 text-2xl h-[200px] flex justify-center items-center"
+            class="flex h-[200px] items-center justify-center text-2xl text-error-400"
           >
             {{ StringHelper.getError(options.status.errorData) }}
           </div>
@@ -173,6 +173,8 @@ const totalCountWithComma = computed(() => {
   return StringHelper.withComma(total);
 });
 const transformValue = (column, row) => {
-  return column.cell ? column.cell({ row }) : row.getValue(column.accessorKey);
+  return column.cell ? column.cell({
+    row
+  }) : row.getValue(column.accessorKey);
 };
 </script>

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

@@ -1,4 +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;

package/dist/runtime/composables/useConfig.js

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

package/dist/runtime/composables/useDialog.js

@@ -10,7 +10,9 @@ export var DialogType = /* @__PURE__ */ ((DialogType2) => {
 export const useDialog = () => {
   const overlay = useOverlay();
   const openDialog = async (payload) => {
-    const modal = overlay.create(Dialog, { props: payload });
+    const modal = overlay.create(Dialog, {
+      props: payload
+    });
     const result = await modal.open();
     const res = await result.result;
     return new Promise((resolve, reject) => {

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

@@ -6,7 +6,7 @@ interface IFieldContext<TValue> extends FieldContext<TValue> {
 }
 export declare const useFieldHOC: <TValue = unknown>(newFormProps: IFieldProps, opts?: Partial<FieldOptions<TValue>>) => IFieldContext<TValue>;
 export declare const createFormFields: (fields: () => IFormField[]) => ComputedRef<IFormField[]>;
-export declare const moveToError: ({ errors }: {
+export declare const moveToError: ({ errors, }: {
     errors: any;
 }) => void;
 export {};

package/dist/runtime/composables/useForm.js

@@ -21,11 +21,15 @@ export const useFieldHOC = (newFormProps, opts) => {
   };
 };
 export const createFormFields = (fields) => computed(fields);
-export const moveToError = ({ errors }) => {
+export const moveToError = ({
+  errors
+}) => {
   const firstErrorFieldName = Object.keys(errors)[0];
   const el = document.querySelector(`[name="${firstErrorFieldName}"]`);
   if (el) {
-    el.focus({ preventScroll: true });
+    el.focus({
+      preventScroll: true
+    });
     const elementRect = el.getBoundingClientRect();
     const absoluteElementTop = elementRect.top + window.scrollY;
     const paddingTop = 60;

package/dist/runtime/helpers/apiBaseHelper.js

@@ -17,7 +17,9 @@ export const prepareRequestOptions = (baseOptions, requestOptions, params) => {
     ...baseOptions || {},
     ...requestOptions || {}
   };
-  options.params = ParamHelper.getParams({ params }, options);
+  options.params = ParamHelper.getParams({
+    params
+  }, options);
   return options;
 };
 export const handleApiRequest = async (requestContext, mockData, callbacks) => {

package/dist/runtime/helpers/componentHelper.d.ts

@@ -4,6 +4,7 @@ export declare const checkFileType: (file: File, acceptFileType: string | string
 export declare const generateURL: (file: File) => string;
 export declare const isImage: (file: File) => boolean;
 export declare const isImageFromPath: (path?: string) => boolean;
+export declare const isVideoFromPath: (path?: string) => boolean;
 export declare const isPDFFromPath: (path?: string) => boolean;
 export declare const useFileAllocate: (selectedFile: Ref<File | undefined | null>, props: {
     accept?: string | string[];

package/dist/runtime/helpers/componentHelper.js

@@ -41,6 +41,11 @@ export const isImageFromPath = (path = "") => {
   const extension = path.toLowerCase().substring(path.lastIndexOf("."));
   return imageExtensions.includes(extension);
 };
+export const isVideoFromPath = (path = "") => {
+  const imageExtensions = [".mp4"];
+  const extension = path.toLowerCase().substring(path.lastIndexOf("."));
+  return imageExtensions.includes(extension);
+};
 export const isPDFFromPath = (path = "") => {
   const imageExtensions = [".pdf"];
   const extension = path.toLowerCase().substring(path.lastIndexOf("."));

package/dist/runtime/theme/button.js

@@ -1 +1,5 @@
-export const buttonTheme = { slots: { base: "cursor-pointer" } };
+export const buttonTheme = {
+  slots: {
+    base: "cursor-pointer"
+  }
+};

package/dist/runtime/theme/dialog.js

@@ -18,13 +18,23 @@ export const dialogTheme = {
   },
   variants: {
     color: {
-      success: { icon: "text-success" },
-      info: { icon: "text-info" },
-      warning: { icon: "text-warning" },
-      error: { icon: "text-error" }
+      success: {
+        icon: "text-success"
+      },
+      info: {
+        icon: "text-info"
+      },
+      warning: {
+        icon: "text-warning"
+      },
+      error: {
+        icon: "text-error"
+      }
     },
     confirm: {
-      true: { icon: "text-info" },
+      true: {
+        icon: "text-info"
+      },
       false: {}
     }
   },

package/dist/runtime/theme/form.js

@@ -12,5 +12,7 @@ export const formTheme = {
       }
     }
   },
-  defaultVariants: { orientation: "vertical" }
+  defaultVariants: {
+    orientation: "vertical"
+  }
 };

package/dist/runtime/theme/icons.js

@@ -1 +1,3 @@
-export const iconsTheme = { loading: "i-svg-spinners:180-ring-with-bg" };
+export const iconsTheme = {
+  loading: "i-svg-spinners:180-ring-with-bg"
+};

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

@@ -9,3 +9,4 @@ export { tableTheme as table } from './table.js';
 export { formTheme as form } from './form.js';
 export { inputNumberTheme as inputNumber } from './inputNumber.js';
 export { iconsTheme as icons } from './icons.js';
+export { uploadFileDropzoneTheme as uploadFileDropzone } from './uploadFileDropzone.js';

package/dist/runtime/theme/index.js

@@ -9,3 +9,4 @@ export { tableTheme as table } from "./table.js";
 export { formTheme as form } from "./form.js";
 export { inputNumberTheme as inputNumber } from "./inputNumber.js";
 export { iconsTheme as icons } from "./icons.js";
+export { uploadFileDropzoneTheme as uploadFileDropzone } from "./uploadFileDropzone.js";

package/dist/runtime/theme/input.js

@@ -1,4 +1,8 @@
 export const inputTheme = {
-  slots: { root: "w-full" },
-  defaultVariants: { size: "lg" }
+  slots: {
+    root: "w-full"
+  },
+  defaultVariants: {
+    size: "lg"
+  }
 };

package/dist/runtime/theme/inputNumber.js

@@ -1,4 +1,8 @@
 export const inputNumberTheme = {
-  slots: { root: "w-full" },
-  defaultVariants: { size: "lg" }
+  slots: {
+    root: "w-full"
+  },
+  defaultVariants: {
+    size: "lg"
+  }
 };

package/dist/runtime/theme/loader.js

@@ -5,11 +5,21 @@ export const loaderTheme = {
   },
   variants: {
     size: {
-      sm: { icon: "text-2xl" },
-      md: { icon: "text-4xl" },
-      lg: { icon: "text-6xl" }
+      sm: {
+        icon: "text-2xl"
+      },
+      md: {
+        icon: "text-4xl"
+      },
+      lg: {
+        icon: "text-6xl"
+      }
     },
-    color: { primary: { icon: "text-primary" } }
+    color: {
+      primary: {
+        icon: "text-primary"
+      }
+    }
   },
   defaultVariants: {
     size: "md",

package/dist/runtime/theme/selectMenu.js

@@ -14,5 +14,7 @@ export const selectMenuTheme = {
     ],
     tagsItemDeleteIcon: "ph:x"
   },
-  defaultVariants: { size: "lg" }
+  defaultVariants: {
+    size: "lg"
+  }
 };

package/dist/runtime/theme/textarea.js

@@ -1 +1,5 @@
-export const textareaTheme = { slots: { root: "w-full" } };
+export const textareaTheme = {
+  slots: {
+    root: "w-full"
+  }
+};

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

@@ -0,0 +1,24 @@
+export declare const uploadFileDropzoneTheme: {
+    slots: {
+        base: string;
+        wrapper: string;
+        disabled: string;
+        failed: string;
+        placeholderWrapper: string;
+        placeholder: string;
+        labelWrapper: string;
+        filePreviewIcon: string;
+        uploadIcon: string;
+        placeholderImgIcon: string;
+        failedImgIcon: string;
+        loadingIcon: string;
+        labelIcon: string;
+    };
+    variants: {
+        dragover: {
+            true: {
+                base: string;
+            };
+        };
+    };
+};

package/dist/runtime/theme/uploadFileDropzone.js

@@ -0,0 +1,24 @@
+export const uploadFileDropzoneTheme = {
+  slots: {
+    base: "relative w-full p-4 transition rounded-lg flex items-center justify-center ring-1 bg-white ring-gray-300",
+    wrapper: "flex flex-col items-center w-full",
+    disabled: "bg-gray-100 border-none grayscale cursor-not-allowed",
+    failed: "border-danger",
+    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: "i-ph:cloud-arrow-up",
+    placeholderImgIcon: "i-material-symbols:imagesmode-outline",
+    failedImgIcon: "i-material-symbols:imagesmode-outline",
+    loadingIcon: "i-svg-spinners:180-ring-with-bg",
+    labelIcon: "w-6 h-6 text-gray-400 text-center mb-4"
+  },
+  variants: {
+    dragover: {
+      true: {
+        base: "ring-primary bg-primary-50"
+      }
+    }
+  }
+};

package/dist/runtime/utils/FileHelper.js

@@ -24,6 +24,8 @@ export class FileHelper {
   static dataURLtoFile = async (dataUrl, filename) => {
     const res = await fetch(dataUrl);
     const blob = await res.blob();
-    return new File([blob], filename, { type: "image/png" });
+    return new File([blob], filename, {
+      type: "image/png"
+    });
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "2.6.2",
+  "version": "2.7.0",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",
@@ -8,6 +8,7 @@
   "exports": {
     ".": {
       "types": "./dist/types.d.mts",
+      "style": "./dist/runtime/styles/main.css",
       "default": "./dist/module.mjs"
     }
   },
@@ -38,7 +39,7 @@
   "dependencies": {
     "@nuxt/kit": "^3.17.4",
     "@nuxt/ui": "^3.1.3",
-    "@pinia/nuxt": "^0.11.0",
+    "@pinia/nuxt": "0.7.0",
     "@tiptap/extension-image": "^2.8.0",
     "@tiptap/extension-link": "^2.8.0",
     "@tiptap/extension-text-align": "^2.8.0",
@@ -66,6 +67,7 @@
     "url-join": "^5.0.0"
   },
   "devDependencies": {
+    "@hyoban/eslint-plugin-tailwindcss": "^4.0.0-alpha.12",
     "@eslint/js": "^9.26.0",
     "@nuxt/devtools": "^2.4.1",
     "@nuxt/eslint-config": "^1.3.1",
@@ -89,6 +91,6 @@
     "vue-tsc": "^2.2.10"
   },
   "lint-staged": {
-    "*": "eslint --fix ."
+    "*": "eslint --fix"
   }
 }