@vc-shell/framework 1.0.110 → 1.0.112

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

@@ -93,7 +93,7 @@
                                   <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"
                                   >
-                                    <span>{{ getDisplayLabel(item.opt) }}</span>
+                                    <span>{{ getOptionLabel(item.opt) }}</span>
                                     <VcIcon
                                       v-if="!disabled"
                                       class="tw-text-[#a9bfd2] tw-ml-2 tw-cursor-pointer hover:tw-text-[color:var(--select-clear-color-hover)]"
@@ -255,7 +255,7 @@
 
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup generic="T, P extends {results?: T[]; totalCount?: number }">
-import { ref, computed, watch, toRefs, nextTick, Ref } from "vue";
+import { ref, computed, watch, nextTick, Ref, toRefs, MaybeRef, unref } from "vue";
 import { vOnClickOutside } from "@vueuse/components";
 import * as _ from "lodash-es";
 import { useIntersectionObserver } from "@vueuse/core";
@@ -435,26 +435,6 @@ const props = withDefaults(
      * @returns Label of the current option
      */
     optionLabel?: OptionProp<Option>;
-    /**
-     * @requires optionValue
-     * @description Similar to optionValue, but used only for displaying selection result in rare cases. **Can't be used without optionValue**
-     *
-     * Property of option which holds the 'value'
-     * Default value: id
-     * @param option The current option being processed
-     * @returns Value of the current option
-     */
-    displayValue?: OptionProp<Option>;
-    /**
-     * @requires optionLabel
-     * @description Similar to optionValue, but used only for displaying selection result in rare cases. **Can't be used without optionLabel**
-     *
-     * Property of option which holds the 'label'
-     * Default value: title
-     * @param option The current option being processed
-     * @returns Label of the current option
-     */
-    displayLabel?: OptionProp<Option>;
     /**
      * Update model with the value of the selected option instead of the whole option
      */
@@ -500,15 +480,15 @@ const emit = defineEmits<{
    * Emitted when the component needs to change the model; Is also used by v-model
    */
 
-  (event: "update:modelValue", inputValue: Option | string | (Option | string)[]): void;
+  "update:modelValue": [inputValue: Option | string | (Option | string)[]];
   /**
    * Emitted when user wants to filter a value
    */
-  (event: "search", inputValue: string): void;
+  search: [inputValue: string];
   /**
    * Emitted when the select options list is hidden
    */
-  (event: "close"): void;
+  close: [];
 }>();
 
 const { t } = useI18n({ useScope: "global" });
@@ -648,10 +628,6 @@ const getOptionValue = computed(() => getPropValueFn(props.optionValue, "id"));
 
 const getOptionLabel = computed(() => getPropValueFn(props.optionLabel, "title"));
 
-const getDisplayValue = computed(() => getPropValueFn(props.displayValue, "id"));
-
-const getDisplayLabel = computed(() => getPropValueFn(props.displayLabel, "title"));
-
 const innerValue = computed((): Option[] => {
   const mapNull = props.mapOptions === true && props.multiple !== true;
 
@@ -701,9 +677,7 @@ const selectedScope = computed(
 
 const hasValue = computed(() => fieldValueIsFilled(innerValue.value));
 
-const innerOptionsValue = computed(() =>
-  innerValue.value.map((opt) => getOptionValue.value(opt) || getDisplayValue.value(opt))
-);
+const innerOptionsValue = computed(() => innerValue.value.map((opt) => getOptionValue.value(opt)));
 
 const optionScope = computed(() => {
   return optionsTemp.value.map((opt, i) => {
@@ -711,7 +685,7 @@ const optionScope = computed(() => {
       index: i,
       opt,
       selected: isOptionSelected(opt) === true,
-      label: getOptionLabel.value(opt) || getDisplayLabel.value(opt),
+      label: getOptionLabel.value(opt),
       toggleOption,
     };
   });
@@ -734,7 +708,7 @@ function getPropValueFn(propValue: OptionProp<Option>, defaultVal: OptionProp<Op
 }
 
 function getOption(value: Option, valueCache: Option[]) {
-  const fn = (opt) => _.isEqual(getOptionValue.value(opt), value) || _.isEqual(getDisplayValue.value(opt), value);
+  const fn = (opt) => _.isEqual(getOptionValue.value(opt), value);
   return defaultValue.value.find(fn) || optionsList.value.find(fn) || valueCache.find(fn) || value;
 }
 
@@ -743,7 +717,7 @@ function fieldValueIsFilled(val: Option[]) {
 }
 
 function getEmittingOptionValue(opt: Option) {
-  return props.emitValue === true ? getOptionLabel.value(opt) : getOptionValue.value(opt);
+  return getOptionLabel.value(opt);
 }
 
 function removeAtIndex(index: number) {
@@ -759,7 +733,7 @@ function removeAtIndex(index: number) {
 }
 
 function isOptionSelected(opt: Option) {
-  const val = getOptionValue.value(opt) || getDisplayValue.value(opt);
+  const val = getOptionValue.value(opt);
 
   return innerOptionsValue.value.find((v) => _.isEqual(v, val)) !== void 0;
 }
@@ -833,7 +807,7 @@ function toggleOption(opt: Option) {
     return;
   }
 
-  const optValue = getOptionValue.value(opt) || getDisplayValue.value(opt);
+  const optValue = getOptionValue.value(opt);
 
   if (props.multiple !== true) {
     if (innerValue.value.length === 0 || _.isEqual(getOptionValue.value(innerValue.value[0]), optValue) !== true) {

package/ui/components/organisms/vc-dynamic-property/index.ts

@@ -1,3 +1 @@
-import _DynamicProperty from "./vc-dynamic-property.vue";
-
-export const VcDynamicProperty = _DynamicProperty;
+export { default as VcDynamicProperty } from "./vc-dynamic-property.vue";

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

@@ -1,262 +1,197 @@
 <template>
   <Field
-    v-if="computedProperty.dictionary && !computedProperty.multivalue"
     v-slot="{ errorMessage, errors }"
+    :key="computedProperty.key"
     :label="computedProperty.displayName"
     :name="computedProperty.name"
     :model-value="value"
     :rules="computedProperty.rules"
   >
-    <VcSelect
-      v-bind="$attrs"
-      v-model="value"
-      :error="!!errors.length"
-      :error-message="errorMessage"
-      :label="computedProperty.displayName"
-      :required="computedProperty.required"
-      :placeholder="computedProperty.placeholder"
-      :options="items"
-      :option-value="computedProperty.optionValue"
-      :option-label="computedProperty.optionLabel"
-      :disabled="disabled"
-      searchable
-      :multilanguage="multilanguage"
-      :current-language="currentLanguage"
-      @search="onSearch"
-      @close="onClose"
-    ></VcSelect>
-  </Field>
-  <Field
-    v-else-if="
-      computedProperty.valueType === 'ShortText' && computedProperty.multivalue && !computedProperty.dictionary
-    "
-    v-slot="{ errorMessage, errors }"
-    :name="computedProperty.name"
-    :model-value="value"
-    :label="computedProperty.displayName"
-    :rules="computedProperty.rules"
-  >
-    <VcMultivalue
-      v-bind="$attrs"
-      v-model="value"
-      :name="computedProperty.name"
-      :error="!!errors.length"
-      :error-message="errorMessage"
-      :label="computedProperty.displayName"
-      :required="computedProperty.required"
-      placeholder="Add value"
-      :disabled="disabled"
-      :multilanguage="multilanguage"
-      :current-language="currentLanguage"
-    ></VcMultivalue>
-  </Field>
-
-  <Field
-    v-else-if="computedProperty.valueType === 'ShortText' && computedProperty.multivalue && computedProperty.dictionary"
-    v-slot="{ errorMessage, errors }"
-    :name="computedProperty.name"
-    :label="computedProperty.displayName"
-    :model-value="value"
-    :rules="computedProperty.rules"
-  >
-    <VcMultivalue
-      v-bind="$attrs"
-      v-model="value"
-      :error="!!errors.length"
-      :error-message="errorMessage"
-      :label="computedProperty.displayName"
-      :required="computedProperty.required"
-      placeholder="Add value"
-      :disabled="disabled"
-      :multilanguage="multilanguage"
-      :current-language="currentLanguage"
-      :options="items"
-      :option-label="multilanguage ? 'value' : 'alias'"
-      option-value="id"
-      :multivalue="computedProperty.multivalue"
-      :emit-label="multilanguage ? 'value' : 'alias'"
-      @search="onSearch"
-      @close="onClose"
-    ></VcMultivalue>
-  </Field>
-
-  <Field
-    v-else-if="computedProperty.valueType === 'ShortText'"
-    v-slot="{ errorMessage, errors }"
-    :name="computedProperty.name"
-    :label="computedProperty.displayName"
-    :model-value="value"
-    :rules="computedProperty.rules"
-  >
-    <VcInput
-      v-bind="$attrs"
-      v-model="value"
-      :error="!!errors.length"
-      :error-message="errorMessage"
-      :label="computedProperty.displayName"
-      clearable
-      :required="computedProperty.required"
-      :placeholder="computedProperty.displayName || 'Add value'"
-      :disabled="disabled"
-      :multilanguage="multilanguage"
-      :current-language="currentLanguage"
-    ></VcInput>
-  </Field>
-
-  <Field
-    v-else-if="computedProperty.valueType === 'Number' && computedProperty.multivalue"
-    v-slot="{ errorMessage, errors }"
-    :name="computedProperty.name"
-    :model-value="value"
-    :label="computedProperty.displayName"
-    :rules="computedProperty.rules"
-  >
-    <VcMultivalue
-      v-bind="$attrs"
-      v-model="value"
-      :label="computedProperty.displayName"
-      :required="computedProperty.required"
-      placeholder="Add value"
-      :disabled="disabled"
-      type="number"
-      :error="!!errors.length"
-      :error-message="errorMessage"
-      :options="items"
-    ></VcMultivalue>
-  </Field>
-
-  <Field
-    v-else-if="computedProperty.valueType === 'Integer' && computedProperty.multivalue"
-    v-slot="{ errorMessage, errors }"
-    :name="computedProperty.name"
-    :model-value="value"
-    :label="computedProperty.displayName"
-    :rules="computedProperty.rules"
-  >
-    <VcMultivalue
-      v-bind="$attrs"
-      v-model="value"
-      :label="computedProperty.displayName"
-      :required="computedProperty.required"
-      placeholder="Add value"
-      :disabled="disabled"
-      type="number"
-      :error="!!errors.length"
-      :error-message="errorMessage"
-      :options="items"
-    ></VcMultivalue>
-  </Field>
-
-  <Field
-    v-else-if="computedProperty.valueType === 'Number'"
-    v-slot="{ errorMessage, errors }"
-    :name="computedProperty.name"
-    :label="computedProperty.displayName"
-    :model-value="value"
-    :rules="computedProperty.rules"
-  >
-    <VcInput
-      v-bind="$attrs"
-      v-model="value"
-      :error="!!errors.length"
-      :error-message="errorMessage"
-      :label="computedProperty.displayName"
-      clearable
-      type="number"
-      :required="computedProperty.required"
-      :placeholder="computedProperty.placeholder"
-      :disabled="disabled"
-    ></VcInput>
-  </Field>
-
-  <Field
-    v-else-if="computedProperty.valueType === 'Integer'"
-    v-slot="{ errorMessage, errors }"
-    :name="computedProperty.name"
-    :label="computedProperty.displayName"
-    :model-value="value"
-    :rules="computedProperty.rules"
-  >
-    <VcInput
-      v-bind="$attrs"
-      v-model="value"
-      :error="!!errors.length"
-      :error-message="errorMessage"
-      :label="computedProperty.displayName"
-      clearable
-      type="number"
-      step="1"
-      :required="computedProperty.required"
-      :placeholder="computedProperty.placeholder"
-      :disabled="disabled"
-    ></VcInput>
-  </Field>
-
-  <Field
-    v-else-if="computedProperty.valueType === 'DateTime'"
-    v-slot="{ errorMessage, errors }"
-    :name="computedProperty.name"
-    :label="computedProperty.displayName"
-    :model-value="value"
-    :rules="computedProperty.rules"
-  >
-    <VcInput
-      v-bind="$attrs"
-      v-model="value"
-      :error="!!errors.length"
-      :error-message="errorMessage"
-      :label="computedProperty.displayName"
-      type="datetime-local"
-      :required="computedProperty.required"
-      :placeholder="computedProperty.placeholder"
-      :disabled="disabled"
-    ></VcInput>
-  </Field>
-
-  <Field
-    v-else-if="computedProperty.valueType === 'LongText'"
-    v-slot="{ errorMessage }"
-    :name="computedProperty.name"
-    :label="computedProperty.displayName"
-    :model-value="value"
-    :rules="computedProperty.rules"
-  >
-    <VcTextarea
-      v-bind="$attrs"
-      v-model="value"
-      :error-message="errorMessage"
-      :label="computedProperty.displayName"
-      :required="computedProperty.required"
-      :placeholder="computedProperty.placeholder"
-      :disabled="disabled"
-      :multilanguage="multilanguage"
-      :current-language="currentLanguage"
-    ></VcTextarea>
-  </Field>
-
-  <Field
-    v-else-if="computedProperty.valueType === 'Boolean'"
-    v-slot="{ errorMessage }"
-    :name="computedProperty.name"
-    :label="computedProperty.displayName"
-    :model-value="value"
-    :rules="computedProperty.rules"
-  >
-    <VcCheckbox
-      v-bind="$attrs"
-      v-model="value"
-      :error-message="errorMessage"
-      :required="computedProperty.required"
-      :disabled="disabled"
-      :name="computedProperty.name"
+    <template v-if="computedProperty.dictionary && !computedProperty.multivalue">
+      <VcSelect
+        v-bind="$attrs"
+        v-model="value"
+        :error="!!errors.length"
+        :error-message="errorMessage"
+        :label="computedProperty.displayName"
+        :required="computedProperty.required"
+        :placeholder="computedProperty.placeholder"
+        :options="items"
+        :option-value="computedProperty.optionValue"
+        :option-label="computedProperty.optionLabel"
+        :disabled="disabled"
+        searchable
+        :multilanguage="multilanguage"
+        :current-language="currentLanguage"
+        :loading="loading"
+        @search="onSearch"
+        @close="onClose"
+      ></VcSelect>
+    </template>
+    <template
+      v-else-if="
+        computedProperty.valueType === 'ShortText' && computedProperty.multivalue && !computedProperty.dictionary
+      "
+    >
+      <VcMultivalue
+        v-bind="$attrs"
+        v-model="value"
+        :name="computedProperty.name"
+        :error="!!errors.length"
+        :error-message="errorMessage"
+        :label="computedProperty.displayName"
+        :required="computedProperty.required"
+        placeholder="Add value"
+        :disabled="disabled"
+        :multilanguage="multilanguage"
+        :current-language="currentLanguage"
+      ></VcMultivalue>
+    </template>
+    <template
+      v-else-if="
+        computedProperty.valueType === 'ShortText' && computedProperty.multivalue && computedProperty.dictionary
+      "
     >
-      {{ computedProperty.displayName }}
-    </VcCheckbox>
+      <VcMultivalue
+        v-bind="$attrs"
+        v-model="value"
+        :error="!!errors.length"
+        :error-message="errorMessage"
+        :label="computedProperty.displayName"
+        :required="computedProperty.required"
+        placeholder="Add value"
+        :disabled="disabled"
+        :multilanguage="multilanguage"
+        :current-language="currentLanguage"
+        :options="items"
+        :option-label="multilanguage ? 'value' : 'alias'"
+        option-value="id"
+        :multivalue="computedProperty.multivalue"
+        :emit-label="multilanguage ? 'value' : 'alias'"
+        @search="onSearch"
+        @close="onClose"
+      ></VcMultivalue>
+    </template>
+    <template v-else-if="computedProperty.valueType === 'ShortText'">
+      <VcInput
+        v-bind="$attrs"
+        v-model="value"
+        :error="!!errors.length"
+        :error-message="errorMessage"
+        :label="computedProperty.displayName"
+        clearable
+        :required="computedProperty.required"
+        :placeholder="computedProperty.displayName || 'Add value'"
+        :disabled="disabled"
+        :multilanguage="multilanguage"
+        :current-language="currentLanguage"
+        :loading="loading"
+      ></VcInput>
+    </template>
+    <template v-else-if="computedProperty.valueType === 'Number' && computedProperty.multivalue">
+      <VcMultivalue
+        v-bind="$attrs"
+        v-model="value"
+        :label="computedProperty.displayName"
+        :required="computedProperty.required"
+        placeholder="Add value"
+        :disabled="disabled"
+        type="number"
+        :error="!!errors.length"
+        :error-message="errorMessage"
+        :options="items"
+      ></VcMultivalue>
+    </template>
+    <template v-else-if="computedProperty.valueType === 'Integer' && computedProperty.multivalue">
+      <VcMultivalue
+        v-bind="$attrs"
+        v-model="value"
+        :label="computedProperty.displayName"
+        :required="computedProperty.required"
+        placeholder="Add value"
+        :disabled="disabled"
+        type="number"
+        :error="!!errors.length"
+        :error-message="errorMessage"
+        :options="items"
+      ></VcMultivalue>
+    </template>
+    <template v-else-if="computedProperty.valueType === 'Number'">
+      <VcInput
+        v-bind="$attrs"
+        v-model="value"
+        :error="!!errors.length"
+        :error-message="errorMessage"
+        :label="computedProperty.displayName"
+        clearable
+        type="number"
+        :required="computedProperty.required"
+        :placeholder="computedProperty.placeholder"
+        :disabled="disabled"
+        :loading="loading"
+      ></VcInput>
+    </template>
+    <template v-else-if="computedProperty.valueType === 'Integer'">
+      <VcInput
+        v-bind="$attrs"
+        v-model="value"
+        :error="!!errors.length"
+        :error-message="errorMessage"
+        :label="computedProperty.displayName"
+        clearable
+        type="number"
+        step="1"
+        :required="computedProperty.required"
+        :placeholder="computedProperty.placeholder"
+        :disabled="disabled"
+        :loading="loading"
+      ></VcInput>
+    </template>
+    <template v-else-if="computedProperty.valueType === 'DateTime'">
+      <VcInput
+        v-bind="$attrs"
+        v-model="value"
+        :error="!!errors.length"
+        :error-message="errorMessage"
+        :label="computedProperty.displayName"
+        type="datetime-local"
+        :required="computedProperty.required"
+        :placeholder="computedProperty.placeholder"
+        :disabled="disabled"
+        :loading="loading"
+      ></VcInput
+    ></template>
+    <template v-else-if="computedProperty.valueType === 'LongText'">
+      <VcTextarea
+        v-bind="$attrs"
+        v-model="value"
+        :error-message="errorMessage"
+        :label="computedProperty.displayName"
+        :required="computedProperty.required"
+        :placeholder="computedProperty.placeholder"
+        :disabled="disabled"
+        :multilanguage="multilanguage"
+        :current-language="currentLanguage"
+      ></VcTextarea
+    ></template>
+    <template v-else-if="computedProperty.valueType === 'Boolean'">
+      <VcCheckbox
+        v-bind="$attrs"
+        v-model="value"
+        :error-message="errorMessage"
+        :required="computedProperty.required"
+        :disabled="disabled"
+        :name="computedProperty.name"
+      >
+        {{ computedProperty.displayName }}
+      </VcCheckbox>
+    </template>
   </Field>
 </template>
+
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup generic="T">
-import { ref, onMounted, computed } from "vue";
+<script lang="ts" setup generic="T extends {[x:string]: any; id?: string}">
+import { ref, onMounted, computed, watch } from "vue";
 import { Field } from "vee-validate";
 import { useI18n } from "vue-i18n";
 import { VcSelect, VcInput, VcTextarea, VcCheckbox } from "./../../";
@@ -310,6 +245,7 @@ const emit = defineEmits<{
 const { locale, te, t } = useI18n({ useScope: "global" });
 
 const items = ref([]);
+const loading = ref(false);
 
 const computedProperty = computed(() => {
   const rules: IValidationRules = {};
@@ -341,8 +277,9 @@ const computedProperty = computed(() => {
     valueType: props.valueType,
     dictionary: props.dictionary || false,
     multivalue: props.multivalue || false,
-    name: props.name,
-    displayName: propertyDisplayNameLocalized, //|| setting?.displayName || setting?.defaultValue,
+    name: props.multilanguage ? props.name + "_" + props.currentLanguage : props.name,
+    key: props.multilanguage ? props.property.id + "_" + props.currentLanguage : props.property.id,
+    displayName: propertyDisplayNameLocalized,
     optionValue: props.optionsValue,
     optionLabel: optionLabelField,
     required: props.required,
@@ -365,20 +302,25 @@ const value = computed({
 });
 
 onMounted(async () => {
-  if (props.optionsGetter) {
-    items.value = await props.optionsGetter(props.property, null, props.currentLanguage);
-  }
+  await getOptions();
 });
 
-async function onSearch(keyword: string) {
+async function getOptions(keyword = null) {
   if (props.optionsGetter) {
-    items.value = await props.optionsGetter(props.property, keyword, props.currentLanguage);
+    try {
+      loading.value = true;
+      items.value = await props.optionsGetter(props.property, keyword, props.currentLanguage);
+    } finally {
+      loading.value = false;
+    }
   }
 }
 
+async function onSearch(keyword: string) {
+  getOptions(keyword);
+}
+
 async function onClose() {
-  if (props.optionsGetter) {
-    items.value = await props.optionsGetter(props.property, null, props.currentLanguage);
-  }
+  getOptions();
 }
 </script>