@finema/core 1.4.116 → 1.4.118

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.116",
+  "version": "1.4.118",
   "configKey": "core",
   "compatibility": {
     "nuxt": "^3.7.4"

package/dist/module.mjs

@@ -1,7 +1,7 @@
 import { defineNuxtModule, createResolver, installModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
 
 const name = "@finema/core";
-const version = "1.4.116";
+const version = "1.4.118";
 
 const colors = {
   black: "#20243E",

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

@@ -63,6 +63,14 @@
         v-bind="getFieldBinding(option)"
         v-on="option.on ?? {}"
       />
+      <FormInputSelectMultiple
+        v-else-if="option.type === INPUT_TYPES.SELECT_MULTIPLE"
+        :class="option.class"
+        :form="form"
+        :options="option.props.options"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
       <FormInputRadio
         v-else-if="option.type === INPUT_TYPES.RADIO"
         :class="option.class"

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

@@ -1,9 +1,10 @@
 import type { IFieldProps, IFormFieldBase, INPUT_TYPES } from '#core/components/Form/types';
 import { type IOption } from '#core/types/common';
+import type { SelectSize } from '#ui/types';
 export interface ISelectFieldProps extends IFieldProps {
     color?: string;
     icon?: string;
-    size?: string;
+    size?: SelectSize;
     searchablePlaceholder?: string;
     loading?: boolean;
     uiMenu?: object | any;

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

@@ -0,0 +1,52 @@
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <USelectMenu
+      :model-value="value || []"
+      searchable
+      multiple
+      :options="options"
+      :placeholder="placeholder || label"
+      :disabled="wrapperProps.isDisabled"
+      :loading="loading"
+      :searchable-placeholder="searchablePlaceholder"
+      value-attribute="value"
+      option-attribute="label"
+      :icon="icon"
+      :color="color"
+      :size="size"
+      :ui="ui"
+      :ui-menu="uiMenu"
+      @update:model-value="value = $event"
+    >
+      <template #label>
+        <div v-if="ArrayHelper.toArray(value).length > 0" class="flex flex-wrap gap-x-2 gap-y-1">
+          <Badge v-for="_value in ArrayHelper.toArray(value)" :key="_value">
+            <div class="flex items-center gap-x-1">
+              {{ options.find((item) => item.value === _value)?.label || _value }}
+              <Icon
+                name="i-heroicons:x-circle-20-solid"
+                class="size-4 cursor-pointer hover:text-gray-200"
+                @click.prevent="handleDelete(_value)"
+              />
+            </div>
+          </Badge>
+        </div>
+      </template>
+    </USelectMenu>
+  </FieldWrapper>
+</template>
+
+<script lang="ts" setup>
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+import { useFieldHOC } from '#core/composables/useForm'
+import type { ISelectMultipleFieldProps } from '#core/components/Form/InputSelectMultiple/types'
+import { ArrayHelper } from '#core/utils/ArrayHelper'
+
+const props = withDefaults(defineProps<ISelectMultipleFieldProps>(), {})
+
+const { value, wrapperProps } = useFieldHOC<any[]>(props)
+
+const handleDelete = (_value: any) => {
+  value.value = ArrayHelper.toArray(value.value).filter((item: any) => item !== _value)
+}
+</script>

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

@@ -0,0 +1,15 @@
+import type { IFieldProps, IFormFieldBase, INPUT_TYPES } from '#core/components/Form/types';
+import { type IOption } from '#core/types/common';
+import type { SelectSize } from '#ui/types';
+export interface ISelectMultipleFieldProps extends IFieldProps {
+    color?: string;
+    icon?: string;
+    size?: SelectSize;
+    searchablePlaceholder?: string;
+    loading?: boolean;
+    uiMenu?: object | any;
+    options: IOption[];
+}
+export type ISelectMultipleField = IFormFieldBase<INPUT_TYPES.SELECT_MULTIPLE, ISelectMultipleFieldProps, {
+    change?: (value: string) => void;
+}>;

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

@@ -19,6 +19,7 @@ import type { IUploadDropzoneAutoMultipleField } from '#core/components/Form/Inp
 import type { IUploadDropzoneImageAutoMultipleField } from '#core/components/Form/InputUploadDropzoneImageAutoMultiple/types';
 import type { IWYSIWYGField } from '#core/components/Form/InputWYSIWYG/types';
 import type { ITagsField } from '#core/components/Form/InputTags/types';
+import type { ISelectMultipleField } from '#core/components/Form/InputSelectMultiple/types';
 export declare const enum INPUT_TYPES {
     TEXT = "TEXT",
     NUMBER = "NUMBER",
@@ -28,6 +29,7 @@ export declare const enum INPUT_TYPES {
     STATIC = "STATIC",
     TOGGLE = "TOGGLE",
     SELECT = "SELECT",
+    SELECT_MULTIPLE = "SELECT_MULTIPLE",
     RADIO = "RADIO",
     CHECKBOX = "CHECKBOX",
     DATE_TIME = "DATE_TIME",
@@ -72,7 +74,7 @@ export interface IFormFieldBase<I extends INPUT_TYPES, P extends IFieldProps, O>
     props: P;
     on?: O;
 }
-export type IFormField = ITextField | INumberField | IStaticField | ICheckboxField | IRadioField | ISelectField | IToggleField | ITextareaField | IDateTimeField | IDateTimeRangeField | IUploadFileClassicField | IUploadFileField | IUploadImageAutoField | IUploadDropzoneField | IUploadDropzoneAutoField | IUploadDropzoneAutoMultipleField | IUploadDropzoneImageAutoMultipleField | IWYSIWYGField | ITagsField | IFormFieldBase<INPUT_TYPES.COMPONENT, any, any>;
+export type IFormField = ITextField | INumberField | IStaticField | ICheckboxField | IRadioField | ISelectField | ISelectMultipleField | IToggleField | ITextareaField | IDateTimeField | IDateTimeRangeField | IUploadFileClassicField | IUploadFileField | IUploadImageAutoField | IUploadDropzoneField | IUploadDropzoneAutoField | IUploadDropzoneAutoMultipleField | IUploadDropzoneImageAutoMultipleField | IWYSIWYGField | ITagsField | IFormFieldBase<INPUT_TYPES.COMPONENT, any, any>;
 export interface IFileValue {
     url: string;
     path?: string;

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

@@ -7,6 +7,7 @@ export var INPUT_TYPES = /* @__PURE__ */ ((INPUT_TYPES2) => {
   INPUT_TYPES2["STATIC"] = "STATIC";
   INPUT_TYPES2["TOGGLE"] = "TOGGLE";
   INPUT_TYPES2["SELECT"] = "SELECT";
+  INPUT_TYPES2["SELECT_MULTIPLE"] = "SELECT_MULTIPLE";
   INPUT_TYPES2["RADIO"] = "RADIO";
   INPUT_TYPES2["CHECKBOX"] = "CHECKBOX";
   INPUT_TYPES2["DATE_TIME"] = "DATE_TIME";

package/dist/runtime/utils/ObjectHelper.mjs

@@ -66,7 +66,14 @@ export class ObjectHelper {
     if (process.env.NODE_ENV !== "production") {
       console.error("API ERROR", error);
     }
-    let newError = JSON.parse(error.response?.request?.response || "{}");
+    let newError = {
+      code: "SOMETHING_WENT_WRONG",
+      message: "Something went wrong"
+    };
+    try {
+      newError = JSON.parse(error.response?.request?.response || "{}");
+    } catch (e) {
+    }
     if (!error.response?.status) {
       newError = {
         code: "NETWORK_ERROR",

package/package.json

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