@vc-shell/framework 1.0.94 → 1.0.95

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

@@ -16,6 +16,8 @@
       v-if="label"
       class="tw-mb-2"
       :required="required"
+      :multilanguage="multilanguage"
+      :current-language="currentLanguage"
     >
       <span>{{ label }}</span>
       <template
@@ -249,6 +251,14 @@ export interface Props {
    * Input required state
    */
   required?: boolean;
+  /**
+   * Input multilanguage state
+   */
+  multilanguage?: boolean;
+  /**
+   * Input current language
+   */
+  currentLanguage?: string;
 }
 
 export interface Emits {

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

@@ -15,6 +15,8 @@
       v-if="label"
       class="tw-mb-2"
       :required="required"
+      :multilanguage="multilanguage"
+      :current-language="currentLanguage"
     >
       <span>{{ label }}</span>
       <template
@@ -31,10 +33,13 @@
     >
       <div
         v-for="(item, i) in modelValue"
-        :key="`${item.id}_${generateId()}`"
+        :key="`${item?.id}_${generateId()}`"
         class="vc-multivalue__field-value-wrapper"
       >
-        <div class="vc-multivalue__field-value">
+        <div
+          v-if="item"
+          class="vc-multivalue__field-value"
+        >
           <span class="tw-truncate">{{
             type === "number" ? Number(item[props.emitLabel]).toFixed(3) : item[props.emitLabel]
           }}</span>
@@ -113,7 +118,7 @@
   </div>
 </template>
 
-<script lang="ts" setup generic="T extends {id?: string; alias?: string}">
+<script lang="ts" setup generic="T extends {id?: string; alias?: string, languageCode?: string, value?:string}">
 import { unref, nextTick, ref, computed } from "vue";
 import { vOnClickOutside } from "@vueuse/components";
 import { useFloating, UseFloatingReturn, offset, flip, shift, autoUpdate } from "@floating-ui/vue";
@@ -136,6 +141,8 @@ export interface Props<T> {
   multivalue?: boolean;
   error?: boolean;
   errorMessage?: string;
+  multilanguage?: boolean;
+  currentLanguage?: string;
 }
 
 export interface Emits<T> {
@@ -203,7 +210,10 @@ const slicedDictionary = computed(() => {
 // Handle input event to propertly validate value and emit changes
 function onInput(e: KeyboardEvent) {
   const newValue = (e.target as HTMLInputElement).value;
-  emit("update:model-value", [...props.modelValue, { [props.emitLabel]: newValue } as T]);
+  emit("update:model-value", [
+    ...props.modelValue,
+    { [props.emitLabel]: newValue, languageCode: props.currentLanguage } as T,
+  ]);
   value.value = undefined;
 }
 

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

@@ -13,6 +13,8 @@
       v-if="label"
       class="tw-mb-2"
       :required="required"
+      :multilanguage="multilanguage"
+      :current-language="currentLanguage"
     >
       <span>{{ label }}</span>
       <template
@@ -478,6 +480,8 @@ const props = withDefaults(
      * Input search activation
      */
     searchable?: boolean;
+    multilanguage?: boolean;
+    currentLanguage?: string;
   }>(),
   {
     optionValue: "id",

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

@@ -11,6 +11,8 @@
       v-if="label"
       class="tw-mb-2"
       :required="required"
+      :multilanguage="multilanguage"
+      :current-language="currentLanguage"
     >
       <span>{{ label }}</span>
       <template
@@ -58,6 +60,8 @@ export interface Props {
   name?: string;
   maxchars?: string;
   errorMessage?: string;
+  multilanguage?: boolean;
+  currentLanguage?: string;
 }
 
 export interface Emits {

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

@@ -20,6 +20,8 @@
       :option-label="computedProperty.optionLabel"
       :disabled="disabled"
       searchable
+      :multilanguage="multilanguage"
+      :current-language="currentLanguage"
       @search="onSearch"
       @close="onClose"
     ></VcSelect>
@@ -44,6 +46,8 @@
       :required="computedProperty.required"
       placeholder="Add value"
       :disabled="disabled"
+      :multilanguage="multilanguage"
+      :current-language="currentLanguage"
     ></VcMultivalue>
   </Field>
 
@@ -64,10 +68,13 @@
       :required="computedProperty.required"
       placeholder="Add value"
       :disabled="disabled"
+      :multilanguage="multilanguage"
+      :current-language="currentLanguage"
       :options="items"
-      option-label="alias"
+      :option-label="multilanguage ? 'value' : 'alias'"
       option-value="id"
       :multivalue="computedProperty.multivalue"
+      :emit-label="multilanguage ? 'value' : 'alias'"
       @search="onSearch"
       @close="onClose"
     ></VcMultivalue>
@@ -91,6 +98,8 @@
       :required="computedProperty.required"
       :placeholder="computedProperty.displayName || 'Add value'"
       :disabled="disabled"
+      :multilanguage="multilanguage"
+      :current-language="currentLanguage"
     ></VcInput>
   </Field>
 
@@ -220,6 +229,8 @@
       :required="computedProperty.required"
       :placeholder="computedProperty.placeholder"
       :disabled="disabled"
+      :multilanguage="multilanguage"
+      :current-language="currentLanguage"
     ></VcTextarea>
   </Field>
 
@@ -261,9 +272,11 @@ const props = withDefaults(
   defineProps<{
     property: T;
     modelValue: any;
-    optionsGetter: (property: T, keyword?: string) => Promise<unknown[]> | unknown[];
+    optionsGetter: (property: T, keyword?: string, locale?: string) => Promise<unknown[]> | unknown[];
     required: boolean;
     multivalue?: boolean;
+    multilanguage?: boolean;
+    currentLanguage?: string;
     valueType: string;
     dictionary?: boolean;
     name: string;
@@ -283,13 +296,15 @@ const props = withDefaults(
   }>(),
   {
     optionsValue: "id",
-    optionsLabel: "alias",
+    optionsLabel: "value",
     disabled: false,
   }
 );
 
 const emit = defineEmits<{
-  "update:model-value": [data: { readonly property: T; readonly value: any; readonly dictionary?: any[] }];
+  "update:model-value": [
+    data: { readonly property: T; readonly value: any; readonly dictionary?: any[]; readonly locale?: string }
+  ];
 }>();
 
 const { locale, te, t } = useI18n({ useScope: "global" });
@@ -319,6 +334,8 @@ const computedProperty = computed(() => {
       ? t(propertyDisplayName.toUpperCase())
       : propertyDisplayName;
 
+  const optionLabelField = props.multilanguage ? "value" : "alias";
+
   return {
     rules,
     valueType: props.valueType,
@@ -327,7 +344,7 @@ const computedProperty = computed(() => {
     name: props.name,
     displayName: propertyDisplayNameLocalized, //|| setting?.displayName || setting?.defaultValue,
     optionValue: props.optionsValue,
-    optionLabel: props.optionsLabel,
+    optionLabel: optionLabelField,
     required: props.required,
     placeholder: props.placeholder || propertyDisplayNameLocalized,
   };
@@ -338,25 +355,30 @@ const value = computed({
     return props.modelValue;
   },
   set(newValue) {
-    emit("update:model-value", { property: props.property, value: newValue, dictionary: items.value });
+    emit("update:model-value", {
+      property: props.property,
+      value: newValue,
+      dictionary: items.value,
+      locale: props.currentLanguage,
+    });
   },
 });
 
 onMounted(async () => {
   if (props.optionsGetter) {
-    items.value = await props.optionsGetter(props.property);
+    items.value = await props.optionsGetter(props.property, null, props.currentLanguage);
   }
 });
 
 async function onSearch(keyword: string) {
   if (props.optionsGetter) {
-    items.value = await props.optionsGetter(props.property, keyword);
+    items.value = await props.optionsGetter(props.property, keyword, props.currentLanguage);
   }
 }
 
 async function onClose() {
   if (props.optionsGetter) {
-    items.value = await props.optionsGetter(props.property);
+    items.value = await props.optionsGetter(props.property, null, props.currentLanguage);
   }
 }
 </script>