@finema/core 2.22.0 → 2.23.1

package/dist/runtime/components/Form/{InputUploadDropzoneAuto → fileState}/useUploadState.d.ts

@@ -1,5 +1,5 @@
 import type { TemplateRef } from 'vue';
-import type { IUploadDropzoneAutoProps } from './types.js';
+import type { IUploadDropzoneAutoProps } from '../InputUploadDropzoneAuto/types.js';
 import type { IFileValue } from '#core/components/Form/types';
 export declare enum UploadState {
     EMPTY = "empty",

package/dist/runtime/components/Form/{InputUploadDropzoneAuto → fileState}/useUploadState.js

@@ -1,12 +1,11 @@
 import { useDropZone, useFileDialog } from "@vueuse/core";
+import { useWatchTrue } from "./../../../../../dist/runtime/composables/useWatch";
 import PreviewModal from "./PreviewModal.vue";
-import { computed, ref, useOverlay, watch } from "#imports";
+import { computed, ref, useOverlay } from "#imports";
 import { useUploadLoader } from "#core/composables/useUpload";
 import { useFileAllocate, useFileProgress } from "#core/helpers/componentHelper";
 import { StringHelper } from "#core/utils/StringHelper";
 import { _get } from "#core/utils/lodash";
-const overlay = useOverlay();
-const previewModal = overlay.create(PreviewModal);
 export var UploadState = /* @__PURE__ */ ((UploadState2) => {
   UploadState2["EMPTY"] = "empty";
   UploadState2["UPLOADING"] = "uploading";
@@ -15,6 +14,8 @@ export var UploadState = /* @__PURE__ */ ((UploadState2) => {
   return UploadState2;
 })(UploadState || {});
 export const useUploadState = (props, emits, onChange, setErrors, value, acceptedFileTypes, wrapperProps, dropzoneRef) => {
+  const overlay = useOverlay();
+  const previewModal = overlay.create(PreviewModal);
   const selectedFile = ref();
   const fileAllocate = useFileAllocate(selectedFile, props);
   const {
@@ -73,7 +74,7 @@ export const useUploadState = (props, emits, onChange, setErrors, value, accepte
     selectedFile.value = file;
     emits("change", file);
     const formData = new FormData();
-    formData.append(props.bodyKey || "file", file);
+    formData.append(props.bodyKey, file);
     upload.run({
       data: formData
     });
@@ -132,7 +133,7 @@ export const useUploadState = (props, emits, onChange, setErrors, value, accepte
   const handleRetryUpload = () => {
     if (selectedFile.value) {
       const formData = new FormData();
-      formData.append(props.bodyKey || "file", selectedFile.value);
+      formData.append(props.bodyKey, selectedFile.value);
       upload.run(formData);
     }
   };
@@ -141,10 +142,10 @@ export const useUploadState = (props, emits, onChange, setErrors, value, accepte
       value: value.value
     });
   };
-  watch(
+  useWatchTrue(
     () => upload.status.value.isSuccess,
-    (isSuccess2) => {
-      if (isSuccess2 && upload.data.value) {
+    () => {
+      if (upload.data.value) {
         const fileValue = {
           url: _get(upload.data.value, props.responseURL),
           path: _get(upload.data.value, props.responsePath),
@@ -156,12 +157,10 @@ export const useUploadState = (props, emits, onChange, setErrors, value, accepte
       }
     }
   );
-  watch(
+  useWatchTrue(
     () => upload.status.value.isError,
-    (isError2) => {
-      if (isError2) {
-        setErrors("\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14: " + StringHelper.getError(upload.status.value.errorData));
-      }
+    () => {
+      setErrors("\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14: " + StringHelper.getError(upload.status.value.errorData));
     }
   );
   return {

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

@@ -1,5 +1,5 @@
-<template>
-  <form class="form">
-    <slot />
-  </form>
-</template>
+<template>
+  <form class="form">
+    <slot />
+  </form>
+</template>

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 { IUploadDropzoneField } from './InputUploadDropzone/types.js';
 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';
@@ -66,7 +67,7 @@ export interface IFormFieldBase<I extends INPUT_TYPES, P extends IFieldProps, O>
     props: P;
     on?: O;
 }
-export type IFormField = ITextField | ISearchField | 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 | IUploadDropzoneField | IUploadDropzoneAutoField | IWYSIWYGField | IFormFieldBase<INPUT_TYPES.COMPONENT, any, any>;
 export interface IFileValue {
     url: string;
     path?: string;

package/dist/runtime/components/Image.vue

@@ -1,32 +1,32 @@
 <template>
-  <UseImage v-bind="$props">
-    <template #loading>
-      <slot name="loading">
-        <div
-          class="flex h-full w-full items-center justify-center"
-        >
-          <Loader
-            :loading="true"
-          />
-        </div>
-      </slot>
-    </template>
-
-    <template #error>
-      <slot name="error">
-        <div
-          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"
-            />
-          </p>
-        </div>
-      </slot>
-    </template>
-  </UseImage>
+  <UseImage v-bind="$props">
+    <template #loading>
+      <slot name="loading">
+        <div
+          class="flex h-full w-full items-center justify-center"
+        >
+          <Loader
+            :loading="true"
+          />
+        </div>
+      </slot>
+    </template>
+
+    <template #error>
+      <slot name="error">
+        <div
+          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"
+            />
+          </p>
+        </div>
+      </slot>
+    </template>
+  </UseImage>
 </template>
 
 <script setup>

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

@@ -1,21 +1,21 @@
 <template>
-  <DevOnly>
-    <TeleportSafe
-      to="#dev-logs"
-    >
-      <LogItem
-        v-if="typeof data !== 'undefined'"
-        :data="data"
-        :title="title"
-      />
-      <LogItem
-        v-for="(item, index) in dataItems"
-        :key="index"
-        :data="item"
-        :title="`${title} #${index + 1}`"
-      />
-    </TeleportSafe>
-  </DevOnly>
+  <DevOnly>
+    <TeleportSafe
+      to="#dev-logs"
+    >
+      <LogItem
+        v-if="typeof data !== 'undefined'"
+        :data="data"
+        :title="title"
+      />
+      <LogItem
+        v-for="(item, index) in dataItems"
+        :key="index"
+        :data="item"
+        :title="`${title} #${index + 1}`"
+      />
+    </TeleportSafe>
+  </DevOnly>
 </template>
 
 <script setup>

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

@@ -1,5 +1,5 @@
 <template>
-  {{ getValue || "-" }}
+  {{ getValue || "-" }}
 </template>
 
 <script setup>

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

@@ -1,5 +1,5 @@
 <template>
-  {{ getValue || "-" }}
+  {{ getValue || "-" }}
 </template>
 
 <script setup>

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

@@ -1,8 +1,8 @@
 <template>
-  <Image
-    class="h-12 rounded"
-    :src="getValue"
-  />
+  <Image
+    class="h-12 rounded"
+    :src="getValue"
+  />
 </template>
 
 <script setup>

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

@@ -1,5 +1,5 @@
 <template>
-  {{ getValue }}
+  {{ getValue }}
 </template>
 
 <script setup>

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

@@ -1,101 +1,101 @@
 <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"
-      :ui="ui"
-    >
-      <template #empty>
-        <slot
-          v-if="options.status.isLoading"
-          name="loading"
-        >
-          <Loader
-            :loading="true"
-          />
-        </slot>
-        <slot
-          v-else-if="options.status.isError"
-          name="error"
-        >
-          <div
+})"
+    >
+      <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"
+      :ui="ui"
+    >
+      <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="
               text-error-400 flex h-[200px] items-center justify-center text-2xl
-            "
-          >
-            {{ 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"
+            "
+          >
+            {{ 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.isRouteChange ? to : void 0"
-        @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.isRouteChange ? to : void 0"
+        @update:page="onPageChange"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup>

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

@@ -0,0 +1 @@
+export declare const getFileIcon: (file: File) => string;

package/dist/runtime/composables/useFileIcon.js

@@ -0,0 +1,9 @@
+import { isImage } from "../helpers/componentHelper.js";
+import { useUiIconConfig } from "./useConfig.js";
+export const getFileIcon = (file) => {
+  const icons = useUiIconConfig("uploadFileDropzone");
+  if (isImage(file)) {
+    return icons.placeholderImgIcon;
+  }
+  return icons.filePreviewIcon;
+};

package/dist/runtime/server/tsconfig.json

@@ -1,3 +1,3 @@
-{
-  "extends": "../../../.nuxt/tsconfig.server.json",
-}
+{
+  "extends": "../../../.nuxt/tsconfig.server.json",
+}

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

@@ -25,9 +25,10 @@ export declare const uploadFileDropzoneTheme: {
         onLoadingTextWrapper: string;
         onLoadingLoadingIconClass: string;
         onPreviewWrapper: string;
-        onPreviewPreviewImgWrapper: string;
-        onPreviewPreviewImgClass: string;
-        onPreviewPreviewFileClass: string;
+        onPreviewImgWrapper: string;
+        onPreviewImgClass: string;
+        onPreviewFileWrapper: string;
+        onPreviewFileClass: string;
         onPreviewTextWrapper: string;
         onFailedWrapper: string;
         onFailedFailedImgWrapper: string;

package/dist/runtime/theme/uploadFileDropzone.js

@@ -27,9 +27,10 @@ export const uploadFileDropzoneTheme = {
     onLoadingLoadingIconClass: "size-10 text-primary animate-spin",
     // Preview state
     onPreviewWrapper: "flex items-center space-x-4 rounded-md w-full",
-    onPreviewPreviewImgWrapper: "flex-shrink-0 w-16 h-16 rounded-md overflow-hidden bg-gray-100",
-    onPreviewPreviewImgClass: "w-full h-full object-cover",
-    onPreviewPreviewFileClass: "size-8 text-gray-400 m-auto mt-4",
+    onPreviewImgWrapper: "flex-shrink-0 w-16 h-16 flex justify-center items-center rounded-md overflow-hidden bg-gray-100",
+    onPreviewImgClass: "w-full h-full object-cover",
+    onPreviewFileWrapper: "flex-shrink-0 w-16 h-16 flex justify-center items-center rounded-md overflow-hidden",
+    onPreviewFileClass: "size-8 text-gray-400 m-auto",
     onPreviewTextWrapper: "flex-1 min-w-0 flex items-center justify-between",
     // Failed state
     onFailedWrapper: "flex items-start space-x-4 w-full rounded-md",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "2.22.0",
+  "version": "2.23.1",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",
@@ -93,4 +93,4 @@
   "lint-staged": {
     "*": "eslint --fix --quiet"
   }
-}
+}