@finema/core 3.22.0 → 3.23.2

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

@@ -1,92 +1,92 @@
 <template>
-  <FieldWrapper v-bind="wrapperProps">
-    <div class="relative">
-      <Input
-        v-if="type === 'password'"
-        ref="inputRef"
-        v-maska="activeMaskOptions"
-        :model-value="value"
-        :disabled="wrapperProps.disabled"
-        :leading-icon="leadingIcon"
-        :trailing-icon="trailingIcon"
-        :loading="loading"
-        :loading-icon="loadingIcon"
-        :name="name"
-        :placeholder="wrapperProps.placeholder"
-        :type="isShowPassword ? 'text' : 'password'"
-        :autofocus="!!autoFocus"
-        :icon="icon"
-        :readonly="readonly"
-        :ui="defu(ui, { icon: { trailing: { pointer: '' } } })"
-        @update:model-value="onChange"
-        @focus="onFocus"
-        @blur="onBlur"
-        @keydown="onKeydown"
-      >
-        <template #trailing>
-          <Button
-            color="neutral"
-            variant="link"
-            :icon="isShowPassword ? 'i-heroicons-eye-slash' : 'i-heroicons-eye'"
-            :padded="false"
-            @click="isShowPassword = !isShowPassword"
-          />
-        </template>
-      </Input>
-      <Popover
-        v-else
-        v-model:open="showSuggestions"
-        :dismissible="false"
-        :ui="{ content: 'w-(--reka-popper-anchor-width)' }"
-      >
-        <template #anchor>
-          <Input
-            ref="inputRef"
-            v-maska="activeMaskOptions"
-            :model-value="value"
-            :disabled="wrapperProps.disabled"
-            :leading-icon="leadingIcon"
-            :trailing-icon="trailingIcon"
-            :loading="loading"
-            :loading-icon="loadingIcon"
-            :name="name"
-            :placeholder="wrapperProps.placeholder"
-            :type="type"
-            :autofocus="!!autoFocus"
-            :icon="icon"
-            :readonly="readonly"
-            :ui="ui"
-            @update:model-value="onChange"
-            @focus="onFocus"
-            @blur="onBlur"
-            @keydown="onKeydown"
-          />
-        </template>
-
-        <template #content>
-          <div
-            v-if="showSuggestions && filteredSuggestions.length > 0"
-            ref="suggestionsContainerRef"
-            :class="theme.suggestionsContainer()"
-          >
-            <div
-              v-for="(suggestion, index) in filteredSuggestions"
-              :key="suggestion"
-              :ref="(el) => setSuggestionItemRef(el, index)"
+  <FieldWrapper v-bind="wrapperProps">
+    <div class="relative">
+      <Input
+        v-if="type === 'password'"
+        ref="inputRef"
+        v-maska="activeMaskOptions"
+        :model-value="value"
+        :disabled="wrapperProps.disabled"
+        :leading-icon="leadingIcon"
+        :trailing-icon="trailingIcon"
+        :loading="loading"
+        :loading-icon="loadingIcon"
+        :name="name"
+        :placeholder="wrapperProps.placeholder"
+        :type="isShowPassword ? 'text' : 'password'"
+        :autofocus="!!autoFocus"
+        :icon="icon"
+        :readonly="readonly"
+        :ui="defu(ui, { icon: { trailing: { pointer: '' } } })"
+        @update:model-value="onChange"
+        @focus="onFocus"
+        @blur="onBlur"
+        @keydown="onKeydown"
+      >
+        <template #trailing>
+          <Button
+            color="neutral"
+            variant="link"
+            :icon="isShowPassword ? 'i-heroicons-eye-slash' : 'i-heroicons-eye'"
+            :padded="false"
+            @click="isShowPassword = !isShowPassword"
+          />
+        </template>
+      </Input>
+      <Popover
+        v-else
+        v-model:open="showSuggestions"
+        :dismissible="false"
+        :ui="{ content: 'w-(--reka-popper-anchor-width)' }"
+      >
+        <template #anchor>
+          <Input
+            ref="inputRef"
+            v-maska="activeMaskOptions"
+            :model-value="value"
+            :disabled="wrapperProps.disabled"
+            :leading-icon="leadingIcon"
+            :trailing-icon="trailingIcon"
+            :loading="loading"
+            :loading-icon="loadingIcon"
+            :name="name"
+            :placeholder="wrapperProps.placeholder"
+            :type="type"
+            :autofocus="!!autoFocus"
+            :icon="icon"
+            :readonly="readonly"
+            :ui="ui"
+            @update:model-value="onChange"
+            @focus="onFocus"
+            @blur="onBlur"
+            @keydown="onKeydown"
+          />
+        </template>
+
+        <template #content>
+          <div
+            v-if="showSuggestions && filteredSuggestions.length > 0"
+            ref="suggestionsContainerRef"
+            :class="theme.suggestionsContainer()"
+          >
+            <div
+              v-for="(suggestion, index) in filteredSuggestions"
+              :key="suggestion"
+              :ref="(el) => setSuggestionItemRef(el, index)"
               :class="[
   theme.suggestionItem(),
   { [theme.suggestionItemActive()]: index === selectedSuggestionIndex }
-]"
-              @mousedown.prevent="selectSuggestion(suggestion, index)"
-              @mouseenter="selectedSuggestionIndex = index"
-            >
-              {{ suggestion }}
-            </div>
-          </div>
-        </template>
-      </Popover>
-    </div>
-  </FieldWrapper>
+]"
+              @mousedown.prevent="selectSuggestion(suggestion, index)"
+              @mouseenter="selectedSuggestionIndex = index"
+            >
+              {{ suggestion }}
+            </div>
+          </div>
+        </template>
+      </Popover>
+    </div>
+  </FieldWrapper>
 </template>
 
 <script setup>
@@ -124,7 +124,8 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   help: { type: String, required: false },
-  ui: { type: null, required: false }
+  ui: { type: null, required: false },
+  containerUi: { type: null, required: false }
 });
 const theme = computed(() => useUiConfig(inputTheme, "input")());
 const {
@@ -193,7 +194,7 @@ const onKeydown = (event) => {
         return;
       }
       event.preventDefault();
-      if (selectedSuggestionIndex.value >= 0) {
+      if (filteredSuggestions.value[selectedSuggestionIndex.value] !== void 0) {
         selectSuggestion(filteredSuggestions.value[selectedSuggestionIndex.value], selectedSuggestionIndex.value);
       }
       break;

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

@@ -1,22 +1,22 @@
 <template>
-  <FieldWrapper v-bind="wrapperProps">
-    <Textarea
-      :model-value="value"
-      :disabled="wrapperProps.disabled"
-      :name="name"
-      :resize="resize"
-      :placeholder="wrapperProps.placeholder"
-      :autofocus="!!autoFocus"
-      :autoresize="autoresize"
-      :rows="rows"
-      :maxrows="maxrows"
-      :loading="loading"
-      :loading-icon="loadingIcon"
-      :readonly="readonly"
-      :ui="ui"
-      @update:model-value="onChange"
-    />
-  </FieldWrapper>
+  <FieldWrapper v-bind="wrapperProps">
+    <Textarea
+      :model-value="value"
+      :disabled="wrapperProps.disabled"
+      :name="name"
+      :resize="resize"
+      :placeholder="wrapperProps.placeholder"
+      :autofocus="!!autoFocus"
+      :autoresize="autoresize"
+      :rows="rows"
+      :maxrows="maxrows"
+      :loading="loading"
+      :loading-icon="loadingIcon"
+      :readonly="readonly"
+      :ui="ui"
+      @update:model-value="onChange"
+    />
+  </FieldWrapper>
 </template>
 
 <script setup>
@@ -43,7 +43,8 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   help: { type: String, required: false },
-  ui: { type: null, required: false }
+  ui: { type: null, required: false },
+  containerUi: { type: null, required: false }
 });
 const {
   value,

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

@@ -1,51 +1,52 @@
 <template>
-  <FieldWrapper v-bind="wrapperProps">
-    <Datepicker
-      v-model="innerValue"
-      :teleport="teleport"
-      :disabled="wrapperProps.disabled"
-      :cancel-text="appConfig.core?.locale === 'th' ? '\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01' : 'Cancel'"
-      :select-text="appConfig.core?.locale === 'th' ? '\u0E15\u0E01\u0E25\u0E07' : 'Select'"
-      :locale="appConfig.core?.locale"
-      time-picker
-      :placeholder="wrapperProps.placeholder"
-      :format="format"
-      :min-time="minTime"
-      :max-time="maxTime"
-      :start-time="startTime"
-      :required="required"
-      :enable-seconds="enableSeconds"
-      @update:model-value="onChange"
-    >
-      <template #dp-input="{ value: innerValue }">
-        <Input
-          :trailing-icon="innerValue ? void 0 : 'i-heroicons-clock'"
-          type="text"
-          :disabled="wrapperProps.disabled"
-          :model-value="innerValue"
-          :placeholder="wrapperProps.placeholder"
-          :readonly="true"
+  <FieldWrapper v-bind="wrapperProps">
+    <Datepicker
+      v-model="innerValue"
+      :teleport="teleport"
+      :disabled="wrapperProps.disabled"
+      :cancel-text="messages.common.cancel"
+      :select-text="messages.common.select"
+      :locale="appConfig.core?.locale"
+      time-picker
+      :placeholder="wrapperProps.placeholder"
+      :format="format"
+      :min-time="minTime"
+      :max-time="maxTime"
+      :start-time="startTime"
+      :required="required"
+      :enable-seconds="enableSeconds"
+      @update:model-value="onChange"
+    >
+      <template #dp-input="{ value: innerValue }">
+        <Input
+          :trailing-icon="innerValue ? void 0 : 'i-heroicons-clock'"
+          type="text"
+          :disabled="wrapperProps.disabled"
+          :model-value="innerValue"
+          :placeholder="wrapperProps.placeholder"
+          :readonly="true"
           :ui="{
   base: 'cursor-pointer select-none',
   trailingIcon: 'cursor-pointer'
-}"
-        />
-      </template>
-      <template #clear-icon="{ clear }">
-        <Icon
-          :name="clearIcon"
+}"
+        />
+      </template>
+      <template #clear-icon="{ clear }">
+        <Icon
+          :name="clearIcon"
           :class="theme.clearIcon({
   class: [ui?.clearIcon]
-})"
-          @click.stop="clear"
-        />
-      </template>
-    </Datepicker>
-  </FieldWrapper>
+})"
+          @click.stop="clear"
+        />
+      </template>
+    </Datepicker>
+  </FieldWrapper>
 </template>
 
 <script setup>
-import Datepicker from "@vuepic/vue-datepicker";
+import { useCoreMessages } from "#core/composables/useMessages";
+import Datepicker, {} from "@vuepic/vue-datepicker";
 import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
 import { computed, ref, useFieldHOC, useUiConfig, watch, useAppConfig } from "#imports";
 import "@vuepic/vue-datepicker/dist/main.css";
@@ -72,7 +73,8 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   help: { type: String, required: false },
-  ui: { type: null, required: false }
+  ui: { type: null, required: false },
+  containerUi: { type: null, required: false }
 });
 const appConfig = useAppConfig();
 const innerValue = ref(void 0);
@@ -109,4 +111,7 @@ watch(value, (newValue) => {
 }, {
   immediate: true
 });
+const {
+  messages
+} = useCoreMessages();
 </script>

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

@@ -14,5 +14,5 @@ export interface ITimeFieldProps extends IFieldProps {
     teleport?: boolean | string | HTMLElement;
 }
 export type ITimeField = IFormFieldBase<INPUT_TYPES.TIME, ITimeFieldProps, {
-    change: (value: string) => void;
+    change?: (value: string) => void;
 }>;

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

@@ -1,21 +1,21 @@
 <template>
-  <FieldWrapper
-    v-bind="wrapperProps"
-    label=""
-    description=""
-  >
-    <Switch
-      :model-value="value"
-      :disabled="wrapperProps.disabled"
-      :name="name"
-      :ui="ui"
-      :label="label"
-      :description="description"
-      :loading="loading"
-      :loading-icon="loadingIcon"
-      @update:modelValue="onChange"
-    />
-  </FieldWrapper>
+  <FieldWrapper
+    v-bind="wrapperProps"
+    label=""
+    description=""
+  >
+    <Switch
+      :model-value="value"
+      :disabled="wrapperProps.disabled"
+      :name="name"
+      :ui="ui"
+      :label="label"
+      :description="description"
+      :loading="loading"
+      :loading-icon="loadingIcon"
+      @update:modelValue="onChange"
+    />
+  </FieldWrapper>
 </template>
 
 <script setup>
@@ -38,7 +38,8 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   help: { type: String, required: false },
-  ui: { type: null, required: false }
+  ui: { type: null, required: false },
+  containerUi: { type: null, required: false }
 });
 const {
   value,

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

@@ -5,9 +5,6 @@ declare const __VLS_export: import("vue").DefineComponent<IUploadDropzoneProps,
 }, string, import("vue").PublicProps, Readonly<IUploadDropzoneProps> & Readonly<{
     onDelete?: (() => any) | undefined;
     onChange?: ((value: File | undefined) => any) | undefined;
-}>, {
-    selectFileLabel: string;
-    selectFileSubLabel: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,34 +1,34 @@
 <template>
-  <FieldWrapper v-bind="wrapperProps">
-    <div
-      ref="dropzoneRef"
-      :class="theme.base()"
-    >
-      <div :class="theme.wrapper()">
-        <!-- Empty State -->
-        <EmptyState
-          v-if="uploadState.isEmpty.value"
-          :theme="theme"
-          :select-file-label="selectFileLabel"
-          :select-file-sub-label="selectFileSubLabel"
-          :placeholder="placeholder"
-          @open-file="uploadState.handleOpenFile"
-        />
-
-        <!-- Success State -->
-        <SuccessState
-          v-if="uploadState.isSuccess.value"
-          :theme="theme"
-          :value="value"
-          :disabled="wrapperProps.disabled"
-          :readonly="wrapperProps.readonly"
-          @preview="uploadState.handlePreview"
-          @download="handleDownloadFile"
-          @delete="uploadState.handleDeleteFile"
-        />
-      </div>
-    </div>
-  </FieldWrapper>
+  <FieldWrapper v-bind="wrapperProps">
+    <div
+      ref="dropzoneRef"
+      :class="theme.base()"
+    >
+      <div :class="theme.wrapper()">
+        <!-- Empty State -->
+        <EmptyState
+          v-if="uploadState.isEmpty.value"
+          :theme="theme"
+          :select-file-label="selectFileLabel ?? messages.upload.selectFile"
+          :select-file-sub-label="selectFileSubLabel ?? messages.upload.dropHere"
+          :placeholder="placeholder"
+          @open-file="uploadState.handleOpenFile"
+        />
+
+        <!-- Success State -->
+        <SuccessState
+          v-if="uploadState.isSuccess.value"
+          :theme="theme"
+          :value="value"
+          :disabled="wrapperProps.disabled"
+          :readonly="wrapperProps.readonly"
+          @preview="uploadState.handlePreview"
+          @download="handleDownloadFile"
+          @delete="uploadState.handleDeleteFile"
+        />
+      </div>
+    </div>
+  </FieldWrapper>
 </template>
 
 <script setup>
@@ -40,12 +40,13 @@ import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
 import { useFieldHOC } from "#core/composables/useForm";
 import { uploadFileDropzoneTheme } from "#core/theme/uploadFileDropzone";
 import { useUiConfig } from "#core/composables/useConfig";
+import { useCoreMessages } from "#core/composables/useMessages";
 const emits = defineEmits(["change", "delete"]);
 const props = defineProps({
   accept: { type: [Array, String], required: false },
   maxSize: { type: Number, 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" },
+  selectFileLabel: { type: String, required: false },
+  selectFileSubLabel: { type: String, required: false },
   form: { type: Object, required: false },
   name: { type: String, required: true },
   errorMessage: { type: String, required: false },
@@ -59,8 +60,12 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   help: { type: String, required: false },
-  ui: { type: null, required: false }
+  ui: { type: null, required: false },
+  containerUi: { type: null, required: false }
 });
+const {
+  messages
+} = useCoreMessages();
 const {
   wrapperProps,
   handleChange: onChange,
@@ -71,7 +76,7 @@ const acceptedFileTypes = computed(
   () => typeof props.accept === "string" ? props.accept : props.accept?.join(",")
 );
 const dropzoneRef = useTemplateRef("dropzoneRef");
-const uploadState = useFileState(
+const uploadState = useFileState({
   props,
   emits,
   onChange,
@@ -80,7 +85,7 @@ const uploadState = useFileState(
   acceptedFileTypes,
   wrapperProps,
   dropzoneRef
-);
+});
 useWatchChange(() => value.value, (newValue) => {
   if (typeof newValue === "object" && newValue !== null) {
     onChange(newValue);

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

@@ -5,9 +5,6 @@ declare const __VLS_export: import("vue").DefineComponent<IUploadDropzoneProps,
 }, string, import("vue").PublicProps, Readonly<IUploadDropzoneProps> & Readonly<{
     onDelete?: (() => any) | undefined;
     onChange?: ((value: File | undefined) => any) | undefined;
-}>, {
-    selectFileLabel: string;
-    selectFileSubLabel: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -6,6 +6,6 @@ export interface IUploadDropzoneProps extends IFieldProps {
     selectFileSubLabel?: string;
 }
 export type IUploadDropzoneField = IFormFieldBase<INPUT_TYPES.UPLOAD_DROPZONE, IUploadDropzoneProps, {
-    change: (value: File | undefined) => void;
-    delete: () => void;
+    change?: (value: File | undefined) => void;
+    delete?: () => void;
 }>;

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

@@ -9,11 +9,6 @@ declare const __VLS_export: import("vue").DefineComponent<IUploadDropzoneAutoPro
     onDelete?: (() => any) | undefined;
     onChange?: ((value: File | undefined) => any) | undefined;
 }>, {
-    selectFileLabel: string;
-    selectFileSubLabel: string;
-    uploadingLabel: string;
-    uploadFailedLabel: string;
-    retryLabel: string;
     bodyKey: string;
     responseURL: string;
     responsePath: string;