@vc-shell/framework 1.0.198 → 1.0.199

package/ui/components/molecules/vc-multivalue/vc-multivalue.vue

@@ -31,94 +31,99 @@
       ref="dropdownToggleRef"
       class="vc-multivalue__field-wrapper"
     >
-      <div
-        v-for="(item, i) in modelValue"
-        :key="`${item?.id}_${generateId()}`"
-        class="vc-multivalue__field-value-wrapper"
-      >
+      <div class="tw-items-center tw-flex tw-flex-wrap">
         <div
-          v-if="item"
-          class="vc-multivalue__field-value"
+          v-for="(item, i) in modelValue"
+          :key="`${item?.id}_${generateId()}`"
+          class="vc-multivalue__field-value-wrapper"
         >
-          <slot
-            name="selected-item"
-            :value="
-              type === 'number'
-                ? Number(item[props.optionLabel as keyof T]).toFixed(3)
-                : item[props.optionLabel as keyof T]
-            "
-            :item="item"
-            :remove="() => onDelete(i)"
+          <div
+            v-if="item"
+            class="vc-multivalue__field-value"
           >
-            <span class="tw-truncate">{{
-              type === "number"
-                ? Number(item[props.optionLabel as keyof T]).toFixed(3)
-                : item[props.optionLabel as keyof T]
-            }}</span>
-          </slot>
-          <VcIcon
-            v-if="!disabled"
-            class="vc-multivalue__field-value-clear"
-            icon="fas fa-times"
-            size="s"
-            @click="onDelete(i)"
-          ></VcIcon>
+            <slot
+              name="selected-item"
+              :value="formatValue(item)"
+              :item="item"
+              :remove="() => onDelete(i)"
+            >
+              <span class="tw-truncate">{{ formatValue(item) }}</span>
+            </slot>
+            <VcIcon
+              v-if="!disabled"
+              class="vc-multivalue__field-value-clear"
+              icon="fas fa-times"
+              size="s"
+              @click="onDelete(i)"
+            ></VcIcon>
+          </div>
         </div>
-      </div>
 
-      <template v-if="multivalue">
-        <div class="vc-multivalue__field vc-multivalue__field_dictionary tw-grow tw-basis-0 tw-p-2">
-          <VcButton
-            small
-            :disabled="disabled"
-            @click.stop="toggleDropdown"
-            >Add +</VcButton
-          >
-          <teleport to="body">
-            <div
-              v-if="isOpened"
-              ref="dropdownRef"
-              v-on-click-outside="[toggleDropdown, { ignore: [dropdownToggleRef] }]"
-              class="vc-multivalue__dropdown"
-              :style="dropdownStyle"
+        <template v-if="multivalue">
+          <div class="vc-multivalue__field vc-multivalue__field_dictionary tw-grow tw-basis-0 tw-p-2">
+            <VcButton
+              small
+              :disabled="disabled"
+              @click.stop="toggleDropdown"
+              >Add +</VcButton
             >
-              <input
-                ref="searchRef"
-                class="vc-multivalue__search"
-                @input="onSearch"
-              />
-
-              <VcContainer
-                ref="root"
-                :no-padding="true"
+            <teleport to="body">
+              <div
+                v-if="isOpened"
+                ref="dropdownRef"
+                v-on-click-outside="[toggleDropdown, { ignore: [dropdownToggleRef] }]"
+                class="vc-multivalue__dropdown"
+                :style="dropdownStyle"
               >
-                <div
-                  v-for="(item, i) in slicedDictionary"
-                  :key="i"
-                  class="vc-multivalue__item"
-                  @click="onItemSelect(item)"
+                <input
+                  ref="searchRef"
+                  class="vc-multivalue__search"
+                  @input="onSearch"
+                />
+
+                <VcContainer
+                  ref="root"
+                  :no-padding="true"
                 >
-                  <slot
-                    name="option"
-                    :item="item"
-                    >{{ item[optionLabel as keyof T] }}</slot
+                  <div
+                    v-for="(item, i) in slicedDictionary"
+                    :key="i"
+                    class="vc-multivalue__item"
+                    @click="onItemSelect(item)"
                   >
-                </div>
-              </VcContainer>
-            </div>
-          </teleport>
-        </div>
-      </template>
-      <template v-else>
-        <input
-          v-model="value"
-          class="vc-multivalue__field tw-grow tw-basis-0 tw-pl-3"
-          :placeholder="placeholder"
-          :type="type"
-          :disabled="disabled"
-          @keypress.enter.stop.prevent="onInput"
-        />
-      </template>
+                    <slot
+                      name="option"
+                      :item="item"
+                      >{{ item[optionLabel as keyof T] }}</slot
+                    >
+                  </div>
+                </VcContainer>
+              </div>
+            </teleport>
+          </div>
+        </template>
+        <template v-else>
+          <input
+            v-model="value"
+            class="vc-multivalue__field tw-grow tw-basis-0 tw-pl-3"
+            :placeholder="placeholder"
+            :type="internalTypeComputed"
+            :disabled="disabled"
+            @keypress.enter.stop.prevent="onInput"
+            @keydown="onKeyDown"
+          />
+        </template>
+      </div>
+      <!-- Loading-->
+      <div
+        v-if="loading"
+        class="tw-flex tw-items-center tw-flex-nowrap tw-px-3 tw-text-[color:var(--select-clear-color)]"
+      >
+        <VcIcon
+          icon="fas fa-circle-notch tw-animate-spin"
+          size="m"
+        ></VcIcon>
+      </div>
     </div>
 
     <Transition
@@ -160,7 +165,7 @@ export interface Props<T> {
   modelValue?: T[];
   required?: boolean;
   disabled?: boolean;
-  type?: "text" | "number";
+  type?: "text" | "number" | "integer";
   label?: string;
   tooltip?: string;
   name?: string;
@@ -173,6 +178,7 @@ export interface Props<T> {
   errorMessage?: string;
   multilanguage?: boolean;
   currentLanguage?: string;
+  loading?: boolean;
 }
 
 export interface Emits<T> {
@@ -204,7 +210,7 @@ const props = withDefaults(defineProps<Props<T>>(), {
 const emit = defineEmits<Emits<T>>();
 defineSlots<{
   option: (args: { item: T }) => any;
-  "selected-item": (args: { value: string | T[keyof T]; item: T; remove: () => void }) => any;
+  "selected-item": (args: { value: string | number | T[keyof T]; item: T; remove: () => void }) => any;
   hint: void;
   error: void;
 }>();
@@ -215,6 +221,7 @@ const root = ref();
 const searchRef = ref();
 const isOpened = ref(false);
 const value = ref();
+const internalType = ref(unref(props.type));
 
 const popper = useFloating(dropdownToggleRef, dropdownRef, {
   placement: "bottom",
@@ -243,6 +250,41 @@ const slicedDictionary = computed(() => {
   });
 });
 
+const formatValue = computed(() => {
+  return (item: T) => {
+    if (props.type === "number") {
+      return Number(item[props.optionLabel as keyof T]).toFixed(3);
+    } else if (props.type === "integer") {
+      return Math.trunc(+item[props.optionLabel as keyof T]);
+    } else {
+      return item[props.optionLabel as keyof T];
+    }
+  };
+});
+
+const internalTypeComputed = computed({
+  get() {
+    if (internalType.value === "integer") {
+      return "number";
+    }
+    return internalType.value;
+  },
+  set(value) {
+    internalType.value = value;
+  },
+});
+
+function onKeyDown(e: KeyboardEvent) {
+  const allowedKeys = ["Backspace", "Delete", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Enter"];
+  const keypressed = e.key;
+  if (props.type === "integer") {
+    if (!/^\d$/.test(keypressed) && !allowedKeys.includes(keypressed)) {
+      e.preventDefault();
+      return;
+    }
+  }
+}
+
 function onInput(e: KeyboardEvent) {
   const newValue = (e.target as HTMLInputElement).value;
   emit("update:model-value", [...props.modelValue, { [props.optionLabel]: newValue } as T]);
@@ -356,8 +398,7 @@ function onSearch(event: Event) {
     tw-rounded-[var(--multivalue-border-radius)]
     tw-bg-[color:var(--multivalue-background-color)]
     tw-items-center
-    tw-flex
-    tw-flex-wrap;
+    tw-flex tw-justify-between;
   }
 
   &__dropdown {

package/ui/components/molecules/vc-select/vc-select.vue

@@ -76,7 +76,6 @@
                           <div class="tw-flex tw-flex-wrap tw-gap-1 tw-py-1">
                             <div
                               v-for="(item, i) in selectedScope"
-                              v-bind="item"
                               :key="i"
                               class="tw-flex tw-items-center"
                             >
@@ -84,12 +83,19 @@
                                 <div
                                   class="tw-bg-[#fbfdfe] tw-border tw-border-solid tw-border-[color:#bdd1df] tw-rounded-[2px] tw-flex tw-items-center tw-h-[28px] tw-box-border tw-px-2"
                                 >
-                                  <slot
-                                    name="selected-item"
-                                    v-bind="item"
-                                  >
-                                    <span>{{ getOptionLabel(item.opt) }}</span>
-                                  </slot>
+                                  <template v-if="loading">
+                                    <span class="tw-text-[#a5a5a5]">{{
+                                      t("COMPONENTS.MOLECULES.VC_SELECT.LOADING")
+                                    }}</span>
+                                  </template>
+                                  <template v-else>
+                                    <slot
+                                      name="selected-item"
+                                      v-bind="item"
+                                    >
+                                      <span>{{ getOptionLabel(item.opt) }}</span>
+                                    </slot>
+                                  </template>
                                   <VcIcon
                                     v-if="!disabled"
                                     class="tw-text-[#a9bfd2] tw-ml-2 tw-cursor-pointer hover:tw-text-[color:var(--select-clear-color-hover)]"
@@ -100,12 +106,23 @@
                                 </div>
                               </template>
                               <template v-else-if="!multiple">
-                                <slot
-                                  name="selected-item"
-                                  v-bind="item"
-                                >
-                                  {{ getEmittingOptionValue(item.opt) }}
-                                </slot>
+                                <template v-if="loading">
+                                  <span class="tw-text-[#a5a5a5]">{{
+                                    t("COMPONENTS.MOLECULES.VC_SELECT.LOADING")
+                                  }}</span>
+                                </template>
+                                <template v-else>
+                                  <slot
+                                    name="selected-item"
+                                    v-bind="item"
+                                  >
+                                    {{
+                                      loading
+                                        ? t("COMPONENTS.MOLECULES.VC_SELECT.LOADING")
+                                        : getEmittingOptionValue(item.opt)
+                                    }}
+                                  </slot>
+                                </template>
                               </template>
                             </div>
                           </div>
@@ -140,7 +157,7 @@
                       class="tw-flex tw-items-center tw-flex-nowrap tw-pl-3 tw-text-[color:var(--select-clear-color)]"
                     >
                       <VcIcon
-                        icon="fas fa-spinner tw-animate-spin"
+                        icon="fas fa-circle-notch tw-animate-spin"
                         size="m"
                       ></VcIcon>
                     </div>
@@ -715,9 +732,17 @@ const dropdownStyle = computed(() => {
 function getPropValueFn(propValue: OptionProp<Option>, defaultVal: OptionProp<Option>) {
   const val = propValue !== undefined ? propValue : defaultVal;
 
-  return typeof val === "function"
-    ? val
-    : (opt: Option) => (opt !== null && typeof opt === "object" && val && val in opt ? opt[val as keyof Option] : opt);
+  if (typeof val === "function") {
+    return val;
+  } else {
+    return (opt: Option) => {
+      if (opt !== null && typeof opt === "object" && val && val in opt) {
+        return opt[val as keyof Option];
+      } else {
+        return opt;
+      }
+    };
+  }
 }
 
 function getOption(value: Option, valueCache: Option[]) {

package/ui/components/organisms/vc-dynamic-property/vc-dynamic-property.vue

@@ -65,8 +65,9 @@
         :current-language="currentLanguage"
         :options="items"
         :option-label="multilanguage ? 'value' : 'alias'"
-        option-value="id"
+        :option-value="multilanguage ? 'value' : 'alias'"
         :multivalue="computedProperty.multivalue"
+        :loading="loading"
         @search="onSearch"
         @close="onClose"
       ></VcMultivalue>
@@ -82,7 +83,6 @@
         :required="computedProperty.required"
         :placeholder="computedProperty.displayName || 'Add value'"
         :disabled="disabled"
-        :multilanguage="multilanguage"
         :current-language="currentLanguage"
         :loading="loading"
       ></VcInput>
@@ -98,6 +98,8 @@
         type="number"
         :error="!!errors.length"
         :error-message="errorMessage"
+        option-label="value"
+        option-value="value"
         :options="items"
       ></VcMultivalue>
     </template>
@@ -109,9 +111,11 @@
         :required="computedProperty.required"
         placeholder="Add value"
         :disabled="disabled"
-        type="number"
+        type="integer"
         :error="!!errors.length"
         :error-message="errorMessage"
+        option-label="value"
+        option-value="value"
         :options="items"
       ></VcMultivalue>
     </template>
@@ -138,7 +142,7 @@
         :error-message="errorMessage"
         :label="computedProperty.displayName"
         clearable
-        type="number"
+        type="integer"
         step="1"
         :required="computedProperty.required"
         :placeholder="computedProperty.placeholder"
@@ -169,7 +173,6 @@
         :required="computedProperty.required"
         :placeholder="computedProperty.placeholder"
         :disabled="disabled"
-        :multilanguage="multilanguage"
         :current-language="currentLanguage"
       ></VcTextarea
     ></template>
@@ -190,10 +193,11 @@
 
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup generic="T extends { [x: string]: any; id?: string }">
-import { ref, onMounted, computed, Ref } from "vue";
+import { ref, onMounted, computed, Ref, watch } from "vue";
 import { Field } from "vee-validate";
 import { useI18n } from "vue-i18n";
 import { VcSelect, VcInput, VcTextarea, VcCheckbox } from "./../../";
+import * as _ from "lodash-es";
 
 type IValidationRules = {
   required?: boolean;
@@ -206,7 +210,11 @@ const props = withDefaults(
   defineProps<{
     property: T;
     modelValue: any;
-    optionsGetter: (property: T, keyword?: string, locale?: string) => Promise<any[]> | any[] | undefined;
+    optionsGetter: (
+      propertyId: string,
+      keyword?: string,
+      locale?: string,
+    ) => Promise<any[] | undefined> | any[] | undefined;
     required: boolean;
     multivalue?: boolean;
     multilanguage?: boolean;
@@ -236,9 +244,7 @@ const props = withDefaults(
 );
 
 const emit = defineEmits<{
-  "update:model-value": [
-    data: { readonly property: T; readonly value: any; readonly dictionary?: any[]; readonly locale?: string },
-  ];
+  "update:model-value": [data: { readonly value: any; readonly dictionary?: any[]; readonly locale?: string }];
 }>();
 
 const { locale, te, t } = useI18n({ useScope: "global" });
@@ -246,6 +252,30 @@ const { locale, te, t } = useI18n({ useScope: "global" });
 const items: Ref<any[]> = ref([]);
 const loading = ref(false);
 const initialOptions = ref<any[]>([]);
+const internalProperty = ref(props.property) as Ref<typeof props.property>;
+const internalModel = ref(props.modelValue) as Ref<typeof props.modelValue>;
+
+watch(
+  () => props.property,
+  (newVal) => {
+    internalProperty.value = _.cloneDeep(newVal);
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    internalModel.value = _.cloneDeep(newVal);
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
 
 const computedProperty = computed(() => {
   const rules: IValidationRules = {};
@@ -278,7 +308,7 @@ const computedProperty = computed(() => {
     dictionary: props.dictionary || false,
     multivalue: props.multivalue || false,
     name: props.multilanguage ? props.name + "_" + props.currentLanguage : props.name,
-    key: props.multilanguage ? props.property.id + "_" + props.currentLanguage : props.property.id,
+    key: props.multilanguage ? internalProperty.value.id + "_" + props.currentLanguage : internalProperty.value.id,
     displayName: propertyDisplayNameLocalized,
     optionValue: props.optionsValue,
     optionLabel: optionLabelField,
@@ -289,11 +319,10 @@ const computedProperty = computed(() => {
 
 const value = computed({
   get() {
-    return props.modelValue;
+    return internalModel.value;
   },
   set(newValue) {
     emit("update:model-value", {
-      property: props.property,
       value: newValue,
       dictionary: items.value,
       locale: props.currentLanguage,
@@ -307,10 +336,10 @@ onMounted(async () => {
 });
 
 async function getOptions(keyword: string | undefined = undefined) {
-  if (props.optionsGetter) {
+  if (props.optionsGetter && internalProperty.value.dictionary && internalProperty.value.id) {
     try {
       loading.value = true;
-      const res = await props.optionsGetter(props.property, keyword, props.currentLanguage);
+      const res = await props.optionsGetter(internalProperty.value.id, keyword, props.currentLanguage);
 
       if (res) {
         items.value = res;