@finema/core 3.2.0 → 3.3.0

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

@@ -1,28 +1,28 @@
 <template>
-  <div :class="theme.onLoadingWrapper()">
-    <div :class="theme.onLoadingPlaceholderWrapper()">
-      <Icon
-        :name="getFileIcon(selectedFile)"
-        :class="theme.onLoadingPlaceholderIconClass()"
-      />
-    </div>
-    <div :class="theme.onLoadingTextWrapper()">
-      <div class="truncate">
-        <h1 class="truncate font-bold">
-          {{ selectedFile.name }}
-        </h1>
-        <p class="truncate font-light text-gray-400">
-          {{ getFileSize(selectedFile) }} - {{ percent }}% {{ uploadingLabel }}
-        </p>
-      </div>
-      <div>
-        <Icon
-          :name="icons.loadingIcon"
-          :class="theme.onLoadingLoadingIconClass()"
-        />
-      </div>
-    </div>
-  </div>
+  <div :class="theme.onLoadingWrapper()">
+    <div :class="theme.onLoadingPlaceholderWrapper()">
+      <Icon
+        :name="getFileIcon(selectedFile)"
+        :class="theme.onLoadingPlaceholderIconClass()"
+      />
+    </div>
+    <div :class="theme.onLoadingTextWrapper()">
+      <div class="truncate">
+        <h1 class="truncate font-bold">
+          {{ selectedFile.name }}
+        </h1>
+        <p class="truncate font-light text-gray-400">
+          {{ getFileSize(selectedFile) }} - {{ percent }}% {{ uploadingLabel }}
+        </p>
+      </div>
+      <div>
+        <Icon
+          :name="icons.loadingIcon"
+          :class="theme.onLoadingLoadingIconClass()"
+        />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>

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

@@ -1,149 +1,149 @@
 <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>
+
+      <!-- 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>
 </template>
 
 <script setup>

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/useUploadImageState.d.ts

@@ -0,0 +1,25 @@
+import type { TemplateRef } from 'vue';
+import type { IUploadImageAutoProps } from '../InputUploadImageAuto/types.js';
+import type { IFileValue } from '#core/components/Form/types';
+export declare enum UploadState {
+    EMPTY = "empty",
+    UPLOADING = "uploading",
+    SUCCESS = "success",
+    ERROR = "error"
+}
+export declare const useUploadImageState: (props: IUploadImageAutoProps, emits: any, onChange: (value: IFileValue | undefined) => void, setErrors: (error: string) => void, value: any, acceptedFileTypes: any, wrapperProps: any, dropzoneRef: TemplateRef<HTMLDivElement | undefined>) => {
+    currentState: import("vue").ComputedRef<UploadState>;
+    isEmpty: import("vue").ComputedRef<boolean>;
+    isUploading: import("vue").ComputedRef<boolean>;
+    isSuccess: import("vue").ComputedRef<boolean>;
+    isError: import("vue").ComputedRef<boolean>;
+    selectedFile: import("vue").Ref<File | undefined, File | undefined>;
+    upload: import("../../../helpers/apiObjectHelper.js").IUseObjectLoader<any, any, Record<string, any>>;
+    dropzone: import("@vueuse/core").UseDropZoneReturn;
+    percent: import("vue").Ref<number, number>;
+    handleInputChange: (event: Event) => void;
+    handleOpenFile: () => void;
+    handleDeleteFile: () => void;
+    handleRetryUpload: () => void;
+    handlePreview: () => void;
+};