@vc-shell/framework 1.0.92 → 1.0.94

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

@@ -1,369 +1,254 @@
 <template>
   <Field
-    v-if="(property.dictionary || property.isDictionary) && !property.multivalue"
-    v-slot="{ errorMessage, handleChange, errors }"
-    :label="handleDisplayName || property.displayName"
-    :name="property.displayName || property.name"
-    :model-value="getter(property, true)"
-    :rules="rules"
+    v-if="computedProperty.dictionary && !computedProperty.multivalue"
+    v-slot="{ errorMessage, errors }"
+    :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="handleDisplayName || property.displayName"
-      :model-value="getter(property, true)"
-      :required="property.required || property.isRequired"
-      :placeholder="handleDisplayName || property.defaultValue"
+      :label="computedProperty.displayName"
+      :required="computedProperty.required"
+      :placeholder="computedProperty.placeholder"
       :options="items"
-      option-value="id"
-      :option-label="handleDisplayProperty"
+      :option-value="computedProperty.optionValue"
+      :option-label="computedProperty.optionLabel"
       :disabled="disabled"
       searchable
-      @update:model-value="
-        (e) => {
-          handleChange(e);
-          setter(property, e, items);
-        }
-      "
       @search="onSearch"
       @close="onClose"
     ></VcSelect>
   </Field>
-
   <Field
     v-else-if="
-      property.valueType === 'ShortText' && property.multivalue && !(property.dictionary || property.isDictionary)
+      computedProperty.valueType === 'ShortText' && computedProperty.multivalue && !computedProperty.dictionary
     "
-    v-slot="{ errorMessage, handleChange, errors }"
-    :name="property.name"
-    :model-value="property.values"
-    :label="handleDisplayName"
-    :rules="rules"
+    v-slot="{ errorMessage, errors }"
+    :name="computedProperty.name"
+    :model-value="value"
+    :label="computedProperty.displayName"
+    :rules="computedProperty.rules"
   >
-    <VcSelect
+    <VcMultivalue
       v-bind="$attrs"
+      v-model="value"
+      :name="computedProperty.name"
       :error="!!errors.length"
       :error-message="errorMessage"
-      :label="handleDisplayName"
-      :model-value="property.values"
-      :required="property.required || property.isRequired"
+      :label="computedProperty.displayName"
+      :required="computedProperty.required"
       placeholder="Add value"
       :disabled="disabled"
-      option-label="alias"
-      option-value="id"
-      :display-label="displayedValueLabel.label"
-      :display-value="displayedValueLabel.value"
-      :multiple="true"
-      :emit-value="false"
-      @update:model-value="
-        (e) => {
-          handleChange(e);
-          setter(property, e);
-        }
-      "
-    ></VcSelect>
+    ></VcMultivalue>
   </Field>
 
   <Field
-    v-else-if="
-      property.valueType === 'ShortText' && property.multivalue && (property.dictionary || property.isDictionary)
-    "
-    v-slot="{ errorMessage, handleChange, errors }"
-    :name="property.name"
-    :label="handleDisplayName"
-    :model-value="property.values"
-    :rules="rules"
+    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"
   >
-    <VcSelect
+    <VcMultivalue
       v-bind="$attrs"
+      v-model="value"
       :error="!!errors.length"
       :error-message="errorMessage"
-      :label="handleDisplayName"
-      :model-value="property.values"
-      :required="property.required || property.isRequired"
+      :label="computedProperty.displayName"
+      :required="computedProperty.required"
       placeholder="Add value"
       :disabled="disabled"
       :options="items"
       option-label="alias"
       option-value="id"
-      :display-label="displayedValueLabel.label"
-      :display-value="displayedValueLabel.value"
-      :multiple="property.multivalue"
-      :emit-value="false"
-      @update:model-value="
-        (e) => {
-          handleChange(e);
-          setter(property, e, items);
-        }
-      "
+      :multivalue="computedProperty.multivalue"
       @search="onSearch"
       @close="onClose"
-    ></VcSelect>
+    ></VcMultivalue>
   </Field>
 
   <Field
-    v-else-if="property.valueType === 'ShortText'"
-    v-slot="{ errorMessage, handleChange, errors }"
-    :name="property.displayName || property.name"
-    :label="handleDisplayName || property.displayName"
-    :model-value="getter(property)"
-    :rules="rules"
+    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="handleDisplayName || property.displayName"
-      :model-value="(getter(property) as string | number | Date)"
+      :label="computedProperty.displayName"
       clearable
-      :required="property.required || property.isRequired"
-      :placeholder="handleDisplayName || 'Add value'"
+      :required="computedProperty.required"
+      :placeholder="computedProperty.displayName || 'Add value'"
       :disabled="disabled"
-      @update:model-value="
-        (e) => {
-          handleChange(e);
-          setter(property, e as Record<string, unknown> | string | number | boolean);
-        }
-      "
     ></VcInput>
   </Field>
 
   <Field
-    v-else-if="property.valueType === 'Number' && property.multivalue"
-    v-slot="{ errorMessage, handleChange, errors }"
-    :name="property.name"
-    :model-value="property.values"
-    :label="handleDisplayName"
-    :rules="rules"
+    v-else-if="computedProperty.valueType === 'Number' && computedProperty.multivalue"
+    v-slot="{ errorMessage, errors }"
+    :name="computedProperty.name"
+    :model-value="value"
+    :label="computedProperty.displayName"
+    :rules="computedProperty.rules"
   >
-    <VcSelect
+    <VcMultivalue
       v-bind="$attrs"
-      :label="handleDisplayName"
-      :model-value="property.values"
-      :required="property.required || property.isRequired"
+      v-model="value"
+      :label="computedProperty.displayName"
+      :required="computedProperty.required"
       placeholder="Add value"
       :disabled="disabled"
+      type="number"
       :error="!!errors.length"
       :error-message="errorMessage"
       :options="items"
-      option-value="id"
-      :option-label="handleDisplayProperty"
-      :display-label="displayedValueLabel.label"
-      :display-value="displayedValueLabel.value"
-      multiple
-      @update:model-value="
-        (e) => {
-          handleChange(e);
-          setter(property, e);
-        }
-      "
-    ></VcSelect>
+    ></VcMultivalue>
   </Field>
 
   <Field
-    v-else-if="property.valueType === 'Number'"
-    v-slot="{ errorMessage, handleChange, errors }"
-    :name="property.name"
-    :label="handleDisplayName"
-    :model-value="getter(property)"
-    :rules="rules"
+    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="handleDisplayName"
-      :model-value="(getter(property) as string | number | Date)"
+      :label="computedProperty.displayName"
       clearable
       type="number"
-      :required="property.required || property.isRequired"
-      :placeholder="handleDisplayName || property.defaultValue"
+      :required="computedProperty.required"
+      :placeholder="computedProperty.placeholder"
       :disabled="disabled"
-      @update:model-value="
-        (e) => {
-          handleChange(e);
-          setter(property, e as Record<string, unknown> | string | number | boolean);
-        }
-      "
     ></VcInput>
   </Field>
 
   <Field
-    v-else-if="property.valueType === 'Integer'"
-    v-slot="{ errorMessage, handleChange, errors }"
-    :name="property.name"
-    :label="handleDisplayName"
-    :model-value="getter(property)"
-    :rules="rules"
+    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="handleDisplayName"
-      :model-value="(getter(property) as string | number | Date)"
+      :label="computedProperty.displayName"
       clearable
       type="number"
       step="1"
-      :required="property.required || property.isRequired"
-      :placeholder="handleDisplayName || property.defaultValue"
+      :required="computedProperty.required"
+      :placeholder="computedProperty.placeholder"
       :disabled="disabled"
-      @update:model-value="
-        (e) => {
-          handleChange(e);
-          setter(property, e as Record<string, unknown> | string | number | boolean);
-        }
-      "
     ></VcInput>
   </Field>
 
   <Field
-    v-else-if="property.valueType === 'DateTime'"
-    v-slot="{ errorMessage, handleChange, errors }"
-    :name="property.name"
-    :label="handleDisplayName"
-    :model-value="getter(property)"
-    :rules="rules"
+    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="handleDisplayName"
-      :model-value="(getter(property) as string | number | Date)"
+      :label="computedProperty.displayName"
       type="datetime-local"
-      :required="property.required || property.isRequired"
-      :placeholder="handleDisplayName || property.defaultValue"
+      :required="computedProperty.required"
+      :placeholder="computedProperty.placeholder"
       :disabled="disabled"
-      @update:model-value="
-        (e) => {
-          handleChange(e);
-          setter(property, e as Record<string, unknown> | string | number | boolean);
-        }
-      "
     ></VcInput>
   </Field>
 
   <Field
-    v-else-if="property.valueType === 'LongText'"
-    v-slot="{ errorMessage, handleChange }"
-    :name="property.name"
-    :label="handleDisplayName"
-    :model-value="getter(property)"
-    :rules="rules"
+    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="handleDisplayName"
-      :model-value="getter(property) as string"
-      :required="property.required || property.isRequired"
-      :placeholder="handleDisplayName || property.defaultValue"
+      :label="computedProperty.displayName"
+      :required="computedProperty.required"
+      :placeholder="computedProperty.placeholder"
       :disabled="disabled"
-      @update:model-value="
-        (e) => {
-          handleChange(e);
-          setter(property, e);
-        }
-      "
     ></VcTextarea>
   </Field>
 
   <Field
-    v-else-if="property.valueType === 'Boolean'"
-    v-slot="{ errorMessage, handleChange }"
-    :name="property.displayName || property.name"
-    :label="handleDisplayName || property.displayName"
-    :model-value="getter(property)"
-    :rules="rules"
+    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"
-      :model-value="getter(property) as boolean"
-      :required="property.required || property.isRequired"
+      :required="computedProperty.required"
       :disabled="disabled"
-      :name="property.displayName || property.name"
-      @update:model-value="
-        (e) => {
-          handleChange(e);
-          setter(property, e);
-        }
-      "
+      :name="computedProperty.name"
     >
-      {{ handleDisplayName || property.displayName }}
+      {{ computedProperty.displayName }}
     </VcCheckbox>
   </Field>
-
-  <Field
-    v-else-if="property.valueType === 'Html'"
-    v-slot="{ errorMessage, handleChange }"
-    :name="property.displayName || property.name"
-    :label="handleDisplayName || property.displayName"
-    :model-value="getter(property)"
-    :rules="rules"
-  >
-    <VcCodeEditor
-      v-bind="$attrs"
-      :label="handleDisplayName || property.displayName"
-      :model-value="(getter(property) as string | number | Date)"
-      :required="property.required || property.isRequired"
-      :placeholder="handleDisplayName || 'Add value'"
-      :disabled="disabled"
-      :name="property.displayName || property.name"
-      :error-message="errorMessage"
-      @update:model-value="
-        (e) => {
-          handleChange(e);
-          setter(property, e as Record<string, unknown> | string | number | boolean);
-        }
-      "
-    >
-    </VcCodeEditor>
-  </Field>
 </template>
-
-<script lang="ts" setup>
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<script lang="ts" setup generic="T">
 import { ref, onMounted, computed } from "vue";
 import { Field } from "vee-validate";
 import { useI18n } from "vue-i18n";
-import { VcSelect, VcInput, VcTextarea, VcCheckbox, VcCodeEditor } from "./../../";
-
-export interface Props {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  property: any;
-  dictionaries?: Record<string, unknown>;
-  getter: (
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    property: Record<string, any>,
-    isDictionary?: boolean
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ) => Record<string, any> | string | number | boolean | Date;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  optionsGetter: (property: Record<string, any>, keyword?: string) => Promise<any[] | undefined> | any[];
-  setter: (
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    property: Record<string, any>,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    value: Record<string, any> | string | number | boolean,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    dictionary?: any[]
-  ) => void | undefined;
-  culture?: string;
-  disabled?: boolean;
-  /**
-   * @description Used only with multiple selection **only** in rare cases, where we need to display selection with other value-label pair
-   */
-  displayedValueLabel?: {
-    value: string;
-    label: string;
-  };
-}
-
-export interface PropertyItem {
-  alias: string;
-}
+import { VcSelect, VcInput, VcTextarea, VcCheckbox } from "./../../";
 
 type IValidationRules = {
   required?: boolean;
@@ -372,37 +257,89 @@ type IValidationRules = {
   regex?: RegExp;
 };
 
-interface IDisplayName {
-  languageCode: string;
-  name?: string;
-}
+const props = withDefaults(
+  defineProps<{
+    property: T;
+    modelValue: any;
+    optionsGetter: (property: T, keyword?: string) => Promise<unknown[]> | unknown[];
+    required: boolean;
+    multivalue?: boolean;
+    valueType: string;
+    dictionary?: boolean;
+    name: string;
+    optionsValue?: string;
+    optionsLabel?: string;
+    displayNames?: {
+      name?: string;
+      languageCode?: string;
+    }[];
+    rules?: {
+      min: number;
+      max: number;
+      regex: string;
+    };
+    disabled?: boolean;
+    placeholder?: string;
+  }>(),
+  {
+    optionsValue: "id",
+    optionsLabel: "alias",
+    disabled: false,
+  }
+);
 
-const props = withDefaults(defineProps<Props>(), {
-  culture: "en-US",
-});
+const emit = defineEmits<{
+  "update:model-value": [data: { readonly property: T; readonly value: any; readonly dictionary?: any[] }];
+}>();
 
 const { locale, te, t } = useI18n({ useScope: "global" });
 
-const rules: IValidationRules = {};
-const items = ref<PropertyItem[]>([]);
-const handleDisplayProperty = computed(() => {
-  return items.value?.some((x: { alias: string }) => x.alias) ? "alias" : "name";
-});
-const handleDisplayName = computed(() => {
-  let localized: string;
-  const isLocaleExists = props.property.displayNames?.find((x: IDisplayName) =>
-    x.languageCode?.toLowerCase().startsWith((locale.value as string)?.toLowerCase())
-  );
-  if (isLocaleExists && isLocaleExists.name) {
-    localized = isLocaleExists.name;
-  } else {
-    const fallback = props.property.displayNames?.find((x: IDisplayName) =>
-      x.languageCode?.toLowerCase().includes(props.culture?.toLowerCase())
-    );
-    localized = fallback && fallback?.name ? fallback.name : props.property.name;
+const items = ref([]);
+
+const computedProperty = computed(() => {
+  const rules: IValidationRules = {};
+  if (props.required) {
+    rules["required"] = true;
   }
+  if (props.rules?.min) {
+    rules["min"] = Number(props.rules.min);
+  }
+  if (props.rules?.max) {
+    rules["max"] = Number(props.rules.max);
+  }
+  if (props.rules?.regex) {
+    rules["regex"] = new RegExp(props.rules.regex);
+  }
+
+  const propertyDisplayName =
+    props.displayNames?.find((displayName) => displayName.languageCode?.startsWith(locale.value as string))?.name ||
+    props.name;
+  const propertyDisplayNameLocalized =
+    propertyDisplayName && te(propertyDisplayName.toUpperCase())
+      ? t(propertyDisplayName.toUpperCase())
+      : propertyDisplayName;
+
+  return {
+    rules,
+    valueType: props.valueType,
+    dictionary: props.dictionary || false,
+    multivalue: props.multivalue || false,
+    name: props.name,
+    displayName: propertyDisplayNameLocalized, //|| setting?.displayName || setting?.defaultValue,
+    optionValue: props.optionsValue,
+    optionLabel: props.optionsLabel,
+    required: props.required,
+    placeholder: props.placeholder || propertyDisplayNameLocalized,
+  };
+});
 
-  return localized && te(localized.toUpperCase()) ? t(localized.toUpperCase()) : localized;
+const value = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(newValue) {
+    emit("update:model-value", { property: props.property, value: newValue, dictionary: items.value });
+  },
 });
 
 onMounted(async () => {
@@ -411,28 +348,6 @@ onMounted(async () => {
   }
 });
 
-if (props.property.required || props.property.isRequired) {
-  rules.required = true;
-}
-if (props.property.validationRule?.charCountMin) {
-  rules.min = Number(props.property.validationRule.charCountMin);
-}
-if (props.property.validationRule?.charCountMax) {
-  rules.max = Number(props.property.validationRule.charCountMax);
-}
-if (props.property.validationRule?.regExp) {
-  rules.regex = new RegExp(props.property.validationRule?.regExp);
-}
-
-/*function getLabel() {
-  return (
-    (props.property.displayNames as { culture: string }[]).find(
-      (item) => item.culture === props.culture
-    ) || props.property.name
-  );
-}
- */
-
 async function onSearch(keyword: string) {
   if (props.optionsGetter) {
     items.value = await props.optionsGetter(props.property, keyword);

package/ui/types/index.ts

@@ -38,6 +38,7 @@ declare module "@vue/runtime-core" {
     VcSelect: (typeof VcShellComponents)["VcSelect"];
     VcSlider: (typeof VcShellComponents)["VcSlider"];
     VcTextarea: (typeof VcShellComponents)["VcTextarea"];
+    VcMultivalue: (typeof VcShellComponents)["VcMultivalue"];
 
     // organisms
     VcApp: (typeof VcShellComponents)["VcApp"];