@finema/core 3.1.0 → 3.2.1

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/Pagination.vue

@@ -1,70 +1,70 @@
 <template>
-  <div
+  <div
     :class="
   theme.paginationContainer({
     class: [ui?.paginationContainer]
   })
-"
-  >
-    <div
+"
+  >
+    <div
       :class="
   theme.paginationInfoWrapper({
     class: [ui?.paginationInfoWrapper]
   })
-"
-    >
-      <USelect
-        v-if="options.pageOptions && !options.isHideLimitSelect"
-        size="lg"
-        trailing="รายการ"
+"
+    >
+      <USelect
+        v-if="options.pageOptions && !options.isHideLimitSelect"
+        size="lg"
+        trailing="รายการ"
         :class="
   theme.paginationLimitSelect({
     class: [ui?.paginationLimitSelect, 'cursor-pointer']
   })
-"
-        :items="pageLimitItems"
-        :model-value="pageLimit"
-        @update:modelValue="emits('pageLimitChange', $event)"
-      >
-        <template #default="{ modelValue }">
-          <p
+"
+        :items="pageLimitItems"
+        :model-value="pageLimit"
+        @update:modelValue="emits('pageLimitChange', $event)"
+      >
+        <template #default="{ modelValue }">
+          <p
             :class="
   theme.paginationLimitSelectLabel({
     class: [ui?.paginationLimitSelectLabel]
   })
-"
-          >
-            {{ modelValue }} รายการ
-          </p>
-        </template>
-      </USelect>
-      <p
+"
+          >
+            {{ modelValue }} รายการ
+          </p>
+        </template>
+      </USelect>
+      <p
         :class="
   theme.paginationInfo({
     class: [ui?.paginationInfo, '']
   })
-"
-      >
-        <span v-if="options.pageOptions">{{ pageBetween }} จากทั้งหมด {{ totalCountWithComma }}</span>
-        <span v-else>ทั้งหมด {{ options.rawData.length }} รายการ</span>
-      </p>
-    </div>
-
-    <UPagination
-      v-if="options.pageOptions && options.pageOptions.totalPage > 1"
-      :page="page"
-      :default-page="options.pageOptions?.currentPage || 1"
-      :items-per-page="options.pageOptions.limit"
-      :total="options.pageOptions.totalCount"
-      :to="options.isRouteChange ? to : void 0"
-      show-edges
-      variant="outline"
-      color="neutral"
-      active-color="neutral"
-      active-variant="subtle"
-      @update:page="emits('pageChange', $event)"
-    />
-  </div>
+"
+      >
+        <span v-if="options.pageOptions">{{ pageBetween }} จากทั้งหมด {{ totalCountWithComma }}</span>
+        <span v-else>ทั้งหมด {{ options.rawData.length }} รายการ</span>
+      </p>
+    </div>
+
+    <UPagination
+      v-if="options.pageOptions && options.pageOptions.totalPage > 1"
+      :page="page"
+      :default-page="options.pageOptions?.currentPage || 1"
+      :items-per-page="options.pageOptions.limit"
+      :total="options.pageOptions.totalCount"
+      :to="options.isRouteChange ? to : void 0"
+      show-edges
+      variant="outline"
+      color="neutral"
+      active-color="neutral"
+      active-variant="subtle"
+      @update:page="emits('pageChange', $event)"
+    />
+  </div>
 </template>
 
 <script setup>

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

@@ -1,25 +1,25 @@
 <template>
-  <Base
-    v-bind="$attrs"
+  <Base
+    v-bind="$attrs"
     :options="{
   ...options,
   pageOptions,
   isHideLimitSelect: true
-}"
-    :ui="ui"
-    :raw-data="itemsByPage"
-    @page-change="onPageChange"
-  >
-    <template
-      v-for="(_, slot) of $slots"
-      #[slot]="slotProps"
-    >
-      <slot
-        :name="slot"
-        v-bind="slotProps || {}"
-      />
-    </template>
-  </Base>
+}"
+    :ui="ui"
+    :raw-data="itemsByPage"
+    @page-change="onPageChange"
+  >
+    <template
+      v-for="(_, slot) of $slots"
+      #[slot]="slotProps"
+    >
+      <slot
+        :name="slot"
+        v-bind="slotProps || {}"
+      />
+    </template>
+  </Base>
 </template>
 
 <script setup>

package/dist/runtime/helpers/apiPageHelper.js

@@ -162,21 +162,21 @@ export const apiFetchHelper = async (state, onUpdateStatus, onUpdateOptions, onU
           ...moreOptions
         } = response;
         onUpdateItems(items);
-        onUpdateOptions({
+        onUpdateOptions(JSON.parse(JSON.stringify({
           ...getOptions(moreOptions),
           _timestamp: Date.now(),
           _status: status,
           request: requestOptions
-        });
+        })));
         onUpdateStatus(updateLoaderState.setSuccess(state().status));
       },
       onError: (error) => {
         onUpdateStatus(updateLoaderState.setError(state().status, error));
-        onUpdateOptions({
+        onUpdateOptions(JSON.parse(JSON.stringify({
           ...state().options,
           _status: error.response?.status,
           request: requestOptions
-        });
+        })));
       },
       onComplete: () => {
         onUpdateStatus(updateLoaderState.setComplete(state().status));

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

@@ -9,6 +9,7 @@ export declare const uploadFileDropzoneTheme: {
         actionDownloadIcon: string;
         actionDeleteIcon: string;
         actionRetryIcon: string;
+        errorIcon: string;
     };
     slots: {
         base: string;
@@ -38,6 +39,28 @@ export declare const uploadFileDropzoneTheme: {
         actionIconClass: string;
         actionDeleteIconClass: string;
         actionRetryBtnClass: string;
+        multipleFilesWrapper: string;
+        fileItemWrapper: string;
+        uploadingItemWrapper: string;
+        uploadingIconWrapper: string;
+        uploadingIconClass: string;
+        uploadingTextWrapper: string;
+        progressBarWrapper: string;
+        progressBarFill: string;
+        successItemWrapper: string;
+        successImgWrapper: string;
+        successImgClass: string;
+        successFileWrapper: string;
+        successFileClass: string;
+        successTextWrapper: string;
+        errorItemWrapper: string;
+        errorIconWrapper: string;
+        errorIconClass: string;
+        errorTextWrapper: string;
+        errorActionWrapper: string;
+        addMoreWrapper: string;
+        addMoreButton: string;
+        addMoreIcon: string;
     };
     variants: {
         dragover: {

package/dist/runtime/theme/uploadFileDropzone.js

@@ -8,7 +8,8 @@ export const uploadFileDropzoneTheme = {
     actionPreviewIcon: "ic:outline-remove-red-eye",
     actionDownloadIcon: "material-symbols:download",
     actionDeleteIcon: "material-symbols:delete",
-    actionRetryIcon: "stash:arrow-retry"
+    actionRetryIcon: "stash:arrow-retry",
+    errorIcon: "i-heroicons:exclamation-circle-solid"
   },
   slots: {
     base: "relative w-full text-base p-4 transition rounded-lg flex items-center justify-center ring-1 bg-white ring-accented",
@@ -28,7 +29,7 @@ export const uploadFileDropzoneTheme = {
     // Preview state
     onPreviewWrapper: "flex items-center space-x-4 rounded-lg w-full",
     onPreviewImgWrapper: "flex-shrink-0 w-16 h-16 flex justify-center items-center rounded-lg overflow-hidden bg-gray-100",
-    onPreviewImgClass: "w-full h-full object-cover",
+    onPreviewImgClass: "w-full h-full object-fit",
     onPreviewFileWrapper: "flex-shrink-0 w-16 h-16 flex justify-center items-center rounded-lg overflow-hidden",
     onPreviewFileClass: "size-8 text-gray-400 m-auto",
     onPreviewTextWrapper: "flex-1 min-w-0 flex items-center justify-between",
@@ -41,7 +42,34 @@ 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",
-    actionRetryBtnClass: "px-0"
+    actionRetryBtnClass: "px-0",
+    // Multiple files
+    multipleFilesWrapper: "flex flex-col gap-3 w-full mt-4",
+    fileItemWrapper: "w-full ring-1 bg-white ring-accented rounded-lg p-3",
+    // Uploading item
+    uploadingItemWrapper: "flex items-center space-x-4 w-full",
+    uploadingIconWrapper: "flex-shrink-0",
+    uploadingIconClass: "size-12 text-gray-400",
+    uploadingTextWrapper: "flex-1 min-w-0",
+    progressBarWrapper: "w-full bg-gray-200 rounded-full h-2 overflow-hidden",
+    progressBarFill: "bg-primary h-full transition-all duration-300",
+    // Success item
+    successItemWrapper: "flex items-center space-x-4 rounded-lg w-full",
+    successImgWrapper: "flex-shrink-0 w-16 h-16 flex justify-center items-center rounded-lg overflow-hidden bg-gray-100",
+    successImgClass: "w-full h-full object-fit",
+    successFileWrapper: "flex-shrink-0 w-16 h-16 flex justify-center items-center rounded-lg overflow-hidden",
+    successFileClass: "size-8 text-gray-400 m-auto",
+    successTextWrapper: "flex-1 min-w-0 flex items-center justify-between",
+    // Error item
+    errorItemWrapper: "flex items-center space-x-4 w-full rounded-lg bg-(--ui-color-error-50) p-3",
+    errorIconWrapper: "flex-shrink-0",
+    errorIconClass: "size-12 text-(--ui-color-error-500)",
+    errorTextWrapper: "flex-1 min-w-0",
+    errorActionWrapper: "flex items-center space-x-2",
+    // Add more button
+    addMoreWrapper: "w-full mt-3 pt-3 border-t border-gray-200",
+    addMoreButton: "w-full flex items-center justify-center gap-2 px-4 py-2 text-sm text-primary border border-primary rounded-lg hover:bg-primary-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+    addMoreIcon: "size-4"
   },
   variants: {
     dragover: {

package/package.json

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