@finema/core 2.14.1 → 2.15.1

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

@@ -1,19 +1,19 @@
 <template>
-  <div
+  <div
     :class="[theme.base({
   class: [$props.class, ui?.base]
-})]"
-  >
-    <component
-      :is="componentMap[option.type]?.component"
-      v-for="option in options.filter((item) => !item.isHide)"
-      :key="option.props.name"
-      :class="option.class"
-      :form="form"
-      v-bind="{ ...getFieldBinding(option), ...componentMap[option.type]?.props }"
-      v-on="option.on ?? {}"
-    />
-  </div>
+})]"
+  >
+    <component
+      :is="componentMap[option.type]?.component"
+      v-for="option in options.filter((item) => !item.isHide)"
+      :key="option.props.name"
+      :class="option.class"
+      :form="form"
+      v-bind="{ ...getFieldBinding(option), ...componentMap[option.type]?.props }"
+      v-on="option.on ?? {}"
+    />
+  </div>
 </template>
 
 <script setup>
@@ -25,9 +25,11 @@ import FormInputToggle from "./InputToggle/index.vue";
 import FormInputCheckbox from "./InputCheckbox/index.vue";
 import FormInputSelect from "./InputSelect/index.vue";
 import FormInputSelectMultiple from "./InputSelectMultiple/index.vue";
+import FormInputRadio from "./InputRadio/index.vue";
 import FormInputDateTime from "./InputDateTime/index.vue";
 import FormInputDateTimeRange from "./InputDateTimeRange/index.vue";
 import FormInputUploadDropzoneAuto from "./InputUploadDropzoneAuto/index.vue";
+import FormInputWYSIWYG from "./InputWYSIWYG/index.vue";
 import { INPUT_TYPES } from "#core/components/Form/types";
 import { formTheme } from "#core/theme/form";
 import { useUiConfig } from "#core/composables/useConfig";
@@ -84,7 +86,10 @@ const componentMap = {
     }
   },
   [INPUT_TYPES.STATIC]: void 0,
-  [INPUT_TYPES.RADIO]: void 0,
+  [INPUT_TYPES.RADIO]: {
+    component: FormInputRadio,
+    props: {}
+  },
   [INPUT_TYPES.DATE_TIME]: {
     component: FormInputDateTime,
     props: {}
@@ -115,7 +120,10 @@ const componentMap = {
   },
   [INPUT_TYPES.UPLOAD_DROPZONE_AUTO_MULTIPLE]: void 0,
   [INPUT_TYPES.UPLOAD_DROPZONE_IMAGE_AUTO_MULTIPLE]: void 0,
-  [INPUT_TYPES.WYSIWYG]: void 0,
+  [INPUT_TYPES.WYSIWYG]: {
+    component: FormInputWYSIWYG,
+    props: {}
+  },
   [INPUT_TYPES.TAGS]: void 0
 };
 const theme = computed(() => useUiConfig(formTheme, "form")({

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

@@ -1,22 +1,22 @@
 <template>
-  <FieldWrapper
-    v-bind="wrapperProps"
-    label=""
-    description=""
-  >
-    <Checkbox
-      :model-value="value"
-      :disabled="wrapperProps.disabled"
-      :name="name"
-      :label="label"
-      :description="description"
-      :required="required"
-      :variant="variant"
-      :indicator="indicator"
-      :ui="ui"
-      @update:modelValue="onChange"
-    />
-  </FieldWrapper>
+  <FieldWrapper
+    v-bind="wrapperProps"
+    label=""
+    description=""
+  >
+    <Checkbox
+      :model-value="value"
+      :disabled="wrapperProps.disabled"
+      :name="name"
+      :label="label"
+      :description="description"
+      :required="required"
+      :variant="variant"
+      :indicator="indicator"
+      :ui="ui"
+      @update:modelValue="onChange"
+    />
+  </FieldWrapper>
 </template>
 
 <script setup>

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

@@ -1,24 +1,24 @@
 <template>
-  <FieldWrapper v-bind="wrapperProps">
-    <InputNumber
-      :model-value="value"
-      :disabled="wrapperProps.disabled"
-      :name="name"
-      :placeholder="wrapperProps.placeholder"
-      :autofocus="!!autoFocus"
-      :readonly="readonly"
-      :orientation="orientation"
-      :increment-disabled="incrementDisabled"
-      :decrement-disabled="decrementDisabled"
-      :min="min"
-      :max="max"
-      :step="step"
-      :disable-wheel-change="disableWheelChange"
-      :format-options="formatOptions"
-      :ui="ui"
-      @update:model-value="onChange"
-    />
-  </FieldWrapper>
+  <FieldWrapper v-bind="wrapperProps">
+    <InputNumber
+      :model-value="value"
+      :disabled="wrapperProps.disabled"
+      :name="name"
+      :placeholder="wrapperProps.placeholder"
+      :autofocus="!!autoFocus"
+      :readonly="readonly"
+      :orientation="orientation"
+      :increment-disabled="incrementDisabled"
+      :decrement-disabled="decrementDisabled"
+      :min="min"
+      :max="max"
+      :step="step"
+      :disable-wheel-change="disableWheelChange"
+      :format-options="formatOptions"
+      :ui="ui"
+      @update:model-value="onChange"
+    />
+  </FieldWrapper>
 </template>
 
 <script setup>

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

@@ -0,0 +1,56 @@
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <RadioGroup
+      :model-value="value"
+      :items="options"
+      :variant="variant"
+      :orientation="orientation"
+      :indicator="indicator"
+      :legend="legend"
+      :disabled="wrapperProps.disabled"
+      :required="wrapperProps.required"
+      :name="wrapperProps.name"
+      value-key="value"
+      label-key="label"
+      description-key="description"
+      :ui="ui"
+      @update:model-value="onChange"
+    />
+  </FieldWrapper>
+</template>
+
+<script setup>
+import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
+import { useFieldHOC } from "#core/composables/useForm";
+const emits = defineEmits(["change"]);
+const props = defineProps({
+  variant: { type: String, required: false, default: "list" },
+  orientation: { type: String, required: false, default: "vertical" },
+  indicator: { type: String, required: false, default: "start" },
+  options: { type: Array, required: true },
+  legend: { type: String, required: false },
+  form: { type: Object, required: false },
+  name: { type: String, required: true },
+  errorMessage: { type: String, required: false },
+  label: { type: null, required: false },
+  description: { type: String, required: false },
+  hint: { type: String, required: false },
+  rules: { type: null, required: false },
+  autoFocus: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  help: { type: String, required: false },
+  ui: { type: null, required: false }
+});
+const {
+  value,
+  wrapperProps,
+  handleChange
+} = useFieldHOC(props);
+const onChange = (newValue) => {
+  handleChange(newValue);
+  emits("change", newValue);
+};
+</script>

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

@@ -0,0 +1,11 @@
+import type { IRadioFieldProps } from '#core/components/Form/InputRadio/types';
+declare const _default: import("vue").DefineComponent<IRadioFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<IRadioFieldProps> & Readonly<{
+    onChange?: ((value: any) => any) | undefined;
+}>, {
+    orientation: "horizontal" | "vertical";
+    variant: "list" | "card" | "table";
+    indicator: "start" | "end" | "hidden";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,19 @@
+import type { IFieldProps, IFormFieldBase, INPUT_TYPES } from '#core/components/Form/types';
+import type { IOption } from '#core/types/common';
+export type RadioOption = IOption & {
+    label?: string;
+    value?: any;
+    description?: string;
+    disabled?: boolean;
+    class?: any;
+};
+export interface IRadioFieldProps extends IFieldProps {
+    variant?: 'list' | 'card' | 'table';
+    orientation?: 'horizontal' | 'vertical';
+    indicator?: 'start' | 'end' | 'hidden';
+    options: RadioOption[];
+    legend?: string;
+}
+export type IRadioField = IFormFieldBase<INPUT_TYPES.RADIO, IRadioFieldProps, {
+    change?: (value: any) => void;
+}>;

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

@@ -1,57 +1,57 @@
 <template>
-  <FieldWrapper v-bind="wrapperProps">
-    <SelectMenu
-      :model-value="value"
-      :items="options"
-      multiple
-      :placeholder="wrapperProps.placeholder"
-      :disabled="wrapperProps.disabled"
-      :loading="loading"
-      :search-input="searchInput"
-      :selected-icon="selectedIcon"
-      value-key="value"
-      label-key="label"
-      :icon="icon"
-      :ui="ui"
-      :ignore-filter="!!$attrs.onSearch"
-      @update:model-value="onChange"
-      @update:searchTerm="onSearch"
-    >
-      <template #default="{ modelValue }">
-        <div
-          v-if="!ArrayHelper.isEmpty(value)"
+  <FieldWrapper v-bind="wrapperProps">
+    <SelectMenu
+      :model-value="value"
+      :items="options"
+      multiple
+      :placeholder="wrapperProps.placeholder"
+      :disabled="wrapperProps.disabled"
+      :loading="loading"
+      :search-input="searchInput"
+      :selected-icon="selectedIcon"
+      value-key="value"
+      label-key="label"
+      :icon="icon"
+      :ui="ui"
+      :ignore-filter="!!$attrs.onSearch"
+      @update:model-value="onChange"
+      @update:searchTerm="onSearch"
+    >
+      <template #default="{ modelValue }">
+        <div
+          v-if="!ArrayHelper.isEmpty(value)"
           :class="theme.tagsWrapper({
   class: [ui?.tagsWrapper]
-})"
-        >
-          <div
-            v-for="_value in ArrayHelper.toArray(modelValue)"
-            :key="_value"
+})"
+        >
+          <div
+            v-for="_value in ArrayHelper.toArray(modelValue)"
+            :key="_value"
             :class="theme.tagsItem({
   class: [ui?.tagsItem]
-})"
-          >
-            <div
+})"
+          >
+            <div
               :class="theme.tagsItemText({
   class: [ui?.tagsItemText]
-})"
-            >
-              {{ options.find((item) => item.value === _value)?.label || _value }}
-              <Icon
+})"
+            >
+              {{ options.find((item) => item.value === _value)?.label || _value }}
+              <Icon
                 :name="theme.tagsItemDeleteIcon({
   class: [ui?.tagsItemDeleteIcon]
-})"
+})"
                 :class="theme.tagsItemDelete({
   class: [ui?.tagsItemDelete]
-})"
-                @click.stop="handleDelete(_value)"
-              />
-            </div>
-          </div>
-        </div>
-      </template>
-    </SelectMenu>
-  </FieldWrapper>
+})"
+                @click.stop="handleDelete(_value)"
+              />
+            </div>
+          </div>
+        </div>
+      </template>
+    </SelectMenu>
+  </FieldWrapper>
 </template>
 
 <script setup>

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

@@ -1,52 +1,52 @@
 <template>
-  <FieldWrapper v-bind="wrapperProps">
-    <Input
-      v-if="type === 'password'"
-      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"
-    >
-      <template #trailing>
-        <Button
-          color="neutral"
-          variant="link"
-          :icon="isShowPassword ? 'i-heroicons-eye-slash' : 'i-heroicons-eye'"
-          :padded="false"
-          @click="isShowPassword = !isShowPassword"
-        />
-      </template>
-    </Input>
-    <Input
-      v-else
-      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"
-    />
-  </FieldWrapper>
+  <FieldWrapper v-bind="wrapperProps">
+    <Input
+      v-if="type === 'password'"
+      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"
+    >
+      <template #trailing>
+        <Button
+          color="neutral"
+          variant="link"
+          :icon="isShowPassword ? 'i-heroicons-eye-slash' : 'i-heroicons-eye'"
+          :padded="false"
+          @click="isShowPassword = !isShowPassword"
+        />
+      </template>
+    </Input>
+    <Input
+      v-else
+      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"
+    />
+  </FieldWrapper>
 </template>
 
 <script setup>

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>

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>

package/dist/runtime/components/Form/InputWYSIWYG/UploadImageForm.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="upload-image-form">
+    <input
+      ref="fileInput"
+      type="file"
+      accept="image/*"
+      @change="handleFileSelect"
+    />
+    <button
+      type="button"
+      @click="handleUpload"
+    >
+      Upload
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const props = defineProps({
+  options: { type: Object, required: false }
+});
+const emit = defineEmits(["submit"]);
+const fileInput = ref();
+const selectedFile = ref(null);
+const handleFileSelect = (event) => {
+  const target = event.target;
+  const file = target.files?.[0];
+  if (file) {
+    selectedFile.value = file;
+  }
+};
+const handleUpload = async () => {
+  if (!selectedFile.value) return;
+  const url = URL.createObjectURL(selectedFile.value);
+  emit("submit", url);
+};
+</script>

package/dist/runtime/components/Form/InputWYSIWYG/UploadImageForm.vue.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    options?: {
+        requestOptions?: any;
+    };
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (url: string) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onSubmit?: ((url: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;