@finema/core 3.3.0 → 3.5.1

package/dist/runtime/components/Form/fileState/MultipleFilesState.vue

@@ -1,158 +1,82 @@
 <template>
-  <div :class="theme.multipleFilesWrapper()">
-    <div
-      v-for="(item, index) in fileItems"
-      :key="index"
-      :class="theme.fileItemWrapper()"
-    >
-      <!-- Uploading State -->
-      <div
-        v-if="item.state === UploadState.UPLOADING"
-        :class="theme.uploadingItemWrapper()"
-      >
-        <div :class="theme.uploadingIconWrapper()">
-          <Icon
-            :name="icons.filePreviewIcon"
-            :class="theme.uploadingIconClass()"
-          />
-        </div>
-        <div :class="theme.uploadingTextWrapper()">
-          <h1 class="truncate font-bold">
-            {{ item.file.name }}
-          </h1>
-          <div class="flex items-center gap-2">
-            <div :class="theme.progressBarWrapper()">
-              <div
-                :class="theme.progressBarFill()"
-                :style="{ width: `${item.progress}%` }"
-              />
-            </div>
-            <p class="text-sm text-gray-400">
-              {{ item.progress }}%
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <!-- Success State -->
-      <div
-        v-else-if="item.state === UploadState.SUCCESS && item.value"
-        :class="theme.successItemWrapper()"
-      >
-        <div
-          v-if="isImageFromPath(item.value.path)"
-          :class="theme.successImgWrapper()"
-        >
-          <img
-            :src="item.value.url"
-            :class="theme.successImgClass()"
-            alt="img-preview"
-          />
-        </div>
-        <div
-          v-else
-          :class="theme.successFileWrapper()"
-        >
-          <Icon
-            :name="icons.filePreviewIcon"
-            :class="theme.successFileClass()"
-          />
-        </div>
-        <div :class="theme.successTextWrapper()">
-          <div class="truncate">
-            <h1 class="truncate font-bold">
-              {{ item.value.name }}
-            </h1>
-            <p class="truncate text-sm font-light text-gray-400">
-              {{ getFileSizeFromValue(item.value) }}
-            </p>
-          </div>
-          <div :class="theme.actionWrapper()">
-            <a
-              v-if="isPDFFromPath(item.value.path)"
-              :href="item.value.url"
-              target="_blank"
-              class="flex"
-            >
-              <Icon
-                :name="icons.actionPreviewIcon"
-                :class="theme.actionIconClass()"
-                title="ดูตัวอย่าง"
-              />
-            </a>
-            <Icon
-              v-if="isImageFromPath(item.value.path) || isVideoFromPath(item.value.path)"
-              :name="icons.actionPreviewIcon"
-              :class="theme.actionIconClass()"
-              title="ดูตัวอย่าง"
-              @click="$emit('preview', item.value)"
-            />
-            <Icon
-              :name="icons.actionDownloadIcon"
-              :class="theme.actionIconClass()"
-              title="ดาวน์โหลดไฟล์"
-              @click="$emit('download', item.value)"
-            />
-            <Icon
-              v-if="!disabled && !readonly"
-              :name="icons.actionDeleteIcon"
-              :class="theme.actionIconClass()"
-              title="ลบไฟล์"
-              @click="$emit('delete', index)"
-            />
-          </div>
-        </div>
-      </div>
-
-      <!-- Error State -->
-      <div
-        v-else-if="item.state === UploadState.ERROR"
-        :class="theme.errorItemWrapper()"
-      >
-        <div :class="theme.errorIconWrapper()">
-          <Icon
-            :name="icons.errorIcon"
-            :class="theme.errorIconClass()"
-          />
-        </div>
-        <div :class="theme.errorTextWrapper()">
-          <h1 class="truncate font-bold">
-            {{ item.file.name }}
-          </h1>
-          <p class="text-error-500 text-sm">
-            {{ item.error || uploadFailedLabel }}
-          </p>
-        </div>
-        <div :class="theme.errorActionWrapper()">
-          <Button
-            variant="link"
-            :icon="icons.actionRetryIcon"
-            :class="theme.actionRetryBtnClass()"
-            color="primary"
-            @click="$emit('retry', index)"
-          >
-            {{ retryLabel }}
-          </Button>
-          <Icon
-            v-if="!disabled && !readonly"
-            :name="icons.actionDeleteIcon"
-            :class="theme.actionIconClass()"
-            title="ลบไฟล์"
-            @click="$emit('delete', index)"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
+  <div :class="theme.multipleFilesWrapper()">
+    <div
+      v-for="(item, index) in fileItems"
+      :key="index"
+      :class="theme.fileItemWrapper()"
+    >
+      <!-- Uploading State -->
+      <div
+        v-if="item.state === UploadState.UPLOADING"
+        :class="theme.uploadingItemWrapper()"
+      >
+        <div :class="theme.uploadingIconWrapper()">
+          <Icon
+            :name="icons.filePreviewIcon"
+            :class="theme.uploadingIconClass()"
+          />
+        </div>
+        <div :class="theme.uploadingTextWrapper()">
+          <h1 class="truncate font-bold">
+            {{ item.file.name }}
+          </h1>
+          <div class="flex items-center gap-2">
+            <div :class="theme.progressBarWrapper()">
+              <div
+                :class="theme.progressBarFill()"
+                :style="{ width: `${item.progress}%` }"
+              />
+            </div>
+            <p class="text-sm text-gray-400">
+              {{ item.progress }}%
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Error State -->
+      <div
+        v-else-if="item.state === UploadState.ERROR"
+        :class="theme.errorItemWrapper()"
+      >
+        <div :class="theme.errorIconWrapper()">
+          <Icon
+            :name="icons.errorIcon"
+            :class="theme.errorIconClass()"
+          />
+        </div>
+        <div :class="theme.errorTextWrapper()">
+          <h1 class="truncate font-bold">
+            {{ item.file.name }}
+          </h1>
+          <p class="text-error-500 text-sm">
+            {{ item.error || uploadFailedLabel }}
+          </p>
+        </div>
+        <div :class="theme.errorActionWrapper()">
+          <Button
+            variant="link"
+            :icon="icons.actionRetryIcon"
+            :class="theme.actionRetryBtnClass()"
+            color="primary"
+            @click="$emit('retry', index)"
+          >
+            {{ retryLabel }}
+          </Button>
+          <Icon
+            v-if="!disabled && !readonly"
+            :name="icons.actionDeleteIcon"
+            :class="theme.actionIconClass()"
+            title="ลบไฟล์"
+            @click="$emit('delete', index)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import {
-  isImageFromPath,
-  isPDFFromPath,
-  isVideoFromPath,
-  useFileSize
-} from "#core/helpers/componentHelper";
 import { useUiIconConfig } from "#core/composables/useConfig";
 import { UploadState } from "./useUploadStateMultiple";
 defineEmits(["preview", "download", "delete", "retry"]);
@@ -165,8 +89,4 @@ defineProps({
   retryLabel: { type: String, required: false }
 });
 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`;
-};
 </script>

package/dist/runtime/components/Form/fileState/PreviewModal.vue

@@ -1,29 +1,29 @@
 <template>
-  <Modal
-    :close="{ onClick: () => emits('close', false) }"
-    :dismissible="false"
-    :title="value?.name"
+  <Modal
+    :close="{ onClick: () => emits('close', false) }"
+    :dismissible="false"
+    :title="value?.name"
     :ui="{
   content: 'max-w-3xl'
-}"
-  >
-    <template #body>
-      <div class="flex justify-center">
-        <img
-          v-if="value && isImageFromPath(value.path)"
-          :src="value.url"
-          alt="img-preview"
-          class="max-h-96 max-w-full rounded-lg"
-        />
-        <video
-          v-else-if="value && isVideoFromPath(value.path)"
-          :src="value.url"
-          controls
-          class="max-h-96 max-w-full"
-        />
-      </div>
-    </template>
-  </Modal>
+}"
+  >
+    <template #body>
+      <div class="flex justify-center">
+        <img
+          v-if="value && isImageFromPath(value.path)"
+          :src="value.url"
+          alt="img-preview"
+          class="max-h-96 max-w-full rounded-lg"
+        />
+        <video
+          v-else-if="value && isVideoFromPath(value.path)"
+          :src="value.url"
+          controls
+          class="max-h-96 max-w-full"
+        />
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

package/dist/runtime/components/Form/fileState/useUploadStateMultiple.js

@@ -98,11 +98,8 @@ export const useUploadStateMultiple = (props, emits, onChange, setErrors, value,
             size: Number(_get(uploadLoader.data.value, props.responseSize) || fileItem.file.size),
             id: _get(uploadLoader.data.value, props.responseID)
           };
-          updateFileItem(index, {
-            value: fileValue,
-            state: "success" /* SUCCESS */
-          });
-          updateFormValue();
+          fileItems.value.splice(index, 1);
+          onChange([fileValue, ...value.value]);
           emits("success", fileValue);
           stopProgressWatch();
           stopSuccessWatch();
@@ -154,10 +151,6 @@ export const useUploadStateMultiple = (props, emits, onChange, setErrors, value,
     });
     emits("change", fileItems.value.map((item) => item.file));
   };
-  const updateFormValue = () => {
-    const successfulFiles = fileItems.value.filter((item) => item.state === "success" /* SUCCESS */ && item.value).map((item) => item.value);
-    onChange(successfulFiles.length > 0 ? successfulFiles : void 0);
-  };
   const handleFileDrop = (files) => {
     if (wrapperProps.value.disabled || wrapperProps.value.readonly || !files?.length) return;
     files.forEach((file) => processFile(file));
@@ -195,7 +188,6 @@ export const useUploadStateMultiple = (props, emits, onChange, setErrors, value,
   };
   const handleDeleteFile = (index) => {
     fileItems.value.splice(index, 1);
-    updateFormValue();
     if (fileItems.value.length === 0) {
       setErrors("");
     }

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

@@ -21,6 +21,7 @@ import type { IWYSIWYGField } from '#core/components/Form/InputWYSIWYG/types';
 import type { IComponentField } from '#core/components/Form/InputComponent/types';
 import type { ITagsField } from '#core/components/Form/InputTags/types';
 import type { ICurrencyField } from '#core/components/Form/InputCurrency/types';
+import type { ICheckboxGroupField } from '#core/components/Form/InputCheckboxGroup/types';
 export declare enum INPUT_TYPES {
     TEXT = "TEXT",
     SEARCH = "SEARCH",
@@ -36,6 +37,7 @@ export declare enum INPUT_TYPES {
     SELECT_MULTIPLE = "SELECT_MULTIPLE",
     RADIO = "RADIO",
     CHECKBOX = "CHECKBOX",
+    CHECKBOX_GROUP = "CHECKBOX_GROUP",
     DATE_TIME = "DATE_TIME",
     TIME = "TIME",
     DATE = "DATE",
@@ -77,7 +79,7 @@ export interface IFormFieldBase<I extends INPUT_TYPES, P extends IFieldProps, O>
     props: P;
     on?: O;
 }
-export type IFormField = ITextField | ISearchField | INumberField | ICurrencyField | ITextareaField | IToggleField | ISelectField | ICheckboxField | ISelectMultipleField | IRadioField | IDateTimeField | ITimeField | IMonthField | IDateTimeRangeField | IUploadDropzoneField | IUploadDropzoneAutoField | IUploadDropzoneAutoMultipleField | IUploadImageAutoField | IWYSIWYGField | IComponentField | ITagsField | IFormFieldBase<INPUT_TYPES.COMPONENT, any, any>;
+export type IFormField = ITextField | ISearchField | INumberField | ICurrencyField | ITextareaField | IToggleField | ISelectField | ICheckboxField | ICheckboxGroupField | ISelectMultipleField | IRadioField | IDateTimeField | ITimeField | IMonthField | IDateTimeRangeField | IUploadDropzoneField | IUploadDropzoneAutoField | IUploadDropzoneAutoMultipleField | IUploadImageAutoField | IWYSIWYGField | IComponentField | ITagsField | IFormFieldBase<INPUT_TYPES.COMPONENT, any, any>;
 export interface IFileValue {
     url: string;
     path?: string;

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

@@ -13,6 +13,7 @@ export var INPUT_TYPES = /* @__PURE__ */ ((INPUT_TYPES2) => {
   INPUT_TYPES2["SELECT_MULTIPLE"] = "SELECT_MULTIPLE";
   INPUT_TYPES2["RADIO"] = "RADIO";
   INPUT_TYPES2["CHECKBOX"] = "CHECKBOX";
+  INPUT_TYPES2["CHECKBOX_GROUP"] = "CHECKBOX_GROUP";
   INPUT_TYPES2["DATE_TIME"] = "DATE_TIME";
   INPUT_TYPES2["TIME"] = "TIME";
   INPUT_TYPES2["DATE"] = "DATE";

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.d.vue.ts

@@ -2,7 +2,11 @@ import type { TableColumn } from '@nuxt/ui';
 type __VLS_Props = {
     value: any;
     row: any;
-    column: TableColumn<any>;
+    column: TableColumn<any> & {
+        meta: {
+            max: number;
+        };
+    };
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

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

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

@@ -2,7 +2,11 @@ import type { TableColumn } from '@nuxt/ui';
 type __VLS_Props = {
     value: any;
     row: any;
-    column: TableColumn<any>;
+    column: TableColumn<any> & {
+        meta: {
+            max: number;
+        };
+    };
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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>