@vc-shell/framework 1.0.110 → 1.0.111

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>

package/ui/components/organisms/vc-gallery/vc-gallery.vue

@@ -24,8 +24,8 @@
             :actions="itemActions"
             :disable-drag="disableDrag"
             @preview="onPreviewClick(i)"
-            @edit="$emit('item:edit', $event)"
-            @remove="$emit('item:remove', $event)"
+            @edit="$emit('edit', $event)"
+            @remove="$emit('remove', $event)"
             @mousedown="onItemMouseDown"
             @dragstart="onItemDragStart($event, image)"
             @dragover="onItemDragOver"
@@ -40,6 +40,7 @@
             :multiple="multiple"
             :rules="rules"
             :name="name"
+            :loading="loading"
             @upload="onUpload"
           ></VcFileUpload>
         </div>
@@ -59,7 +60,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from "vue";
+import { MaybeRef, computed, ref, unref, watch } from "vue";
 import { IImage } from "../../../../core/types";
 import { VcLabel, VcFileUpload, VcHint } from "./../../";
 import VcGalleryItem from "./_internal/vc-gallery-item/vc-gallery-item.vue";
@@ -87,13 +88,14 @@ export interface Props {
   hideAfterUpload?: boolean;
   rules?: string | Record<string, unknown>;
   name?: string;
+  loading?: boolean;
 }
 
 export interface Emits {
   (event: "upload", files: FileList): void;
   (event: "sort", sorted: IImage[]): void;
-  (event: "item:edit", image: IImage): void;
-  (event: "item:remove", image: IImage): void;
+  (event: "edit", image: IImage): void;
+  (event: "remove", image: IImage): void;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -113,7 +115,7 @@ const emit = defineEmits<Emits>();
 const { t } = useI18n({ useScope: "global" });
 const previewImageIndex = ref<number>();
 
-const defaultImages = ref<IImage[]>([]);
+const defaultImages = ref<MaybeRef<IImage[]>>([]);
 const draggedItem = ref<IImage>();
 const draggedElement = ref<HTMLElement>();
 const galleryRef = ref<HTMLElement>();
@@ -135,7 +137,7 @@ const { open } = usePopup(
 watch(
   () => props.images,
   (newVal) => {
-    defaultImages.value = newVal;
+    defaultImages.value = unref(newVal);
   },
   { deep: true, immediate: true }
 );

package/ui/components/organisms/vc-notification-dropdown/_internal/notification/notification.vue

@@ -38,10 +38,16 @@ export interface Props {
   templates: NotificationTemplateConstructor[];
 }
 
+export interface Emits {
+  (event: "onClick"): void;
+}
+
 const props = withDefaults(defineProps<Props>(), {
   notification: undefined,
 });
 
+const emit = defineEmits<Emits>();
+
 const locale = window.navigator.language;
 
 const notificationStyle = computed(() => ({
@@ -58,6 +64,9 @@ const currentTemplate = computed(() => props.templates?.find((x) => x?.notifyTyp
 function notificationTemplateRenderer() {
   const notificationTemplate = currentTemplate.value;
 
-  return notificationTemplate && h(notificationTemplate, { notification: props.notification });
+  return (
+    notificationTemplate &&
+    h(notificationTemplate, { notification: props.notification, onNotificationClick: () => emit("onClick") })
+  );
 }
 </script>

package/ui/components/organisms/vc-notification-dropdown/vc-notification-dropdown.vue

@@ -62,11 +62,11 @@
             v-for="item in notifications"
             :key="`notification_${item.id}`"
             class="tw-py-[18px] tw-px-[15px] tw-border-b tw-border-solid tw-border-b-[#e3e7ec] tw-cursor-pointer last-of-type:tw-border-b-0"
-            @click="handleClick(item)"
           >
             <NotificationItem
               :notification="item"
               :templates="templates"
+              @on-click="() => (isDropdownVisible = false)"
             />
           </div>
         </VcCol>
@@ -96,21 +96,12 @@ export interface Props {
   notifications: PushNotification[];
   templates?: NotificationTemplateConstructor[];
   onOpen?: () => void;
-  onClick?: (notification: PushNotification) => void;
 }
 
 const props = defineProps<Props>();
 const { t } = useI18n({ useScope: "global" });
 const isDropdownVisible = ref(false);
 
-const handleClick = async (notification: PushNotification) => {
-  isDropdownVisible.value = false;
-
-  if (props.onClick && typeof props.onClick === "function") {
-    props.onClick(notification);
-  }
-};
-
 function toggleNotificationsDrop() {
   isDropdownVisible.value = !isDropdownVisible.value;
   if (props.onOpen && typeof props.onOpen === "function") {

package/ui/components/organisms/vc-table/index.ts

@@ -1,3 +1 @@
-import _Table from "./vc-table.vue";
-
-export const VcTable = _Table as typeof _Table;
+export { default as VcTable } from "./vc-table.vue";

package/ui/components/organisms/vc-table/vc-table.stories.ts

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/vue3";
 
 import { VcTable } from "./";
-import VcHint from "../../atoms/vc-hint/vc-hint.vue";
-import VcImage from "../../atoms/vc-image/vc-image.vue";
+// import VcHint from "../../atoms/vc-hint/vc-hint.vue";
+// import VcImage from "../../atoms/vc-image/vc-image.vue";
 
 const meta: Meta<typeof VcTable> = {
   title: "organisms/VcTable",
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof VcTable>;
 
 export const Primary: Story = {
   render: (args) => ({
-    components: { VcTable, VcHint, VcImage },
+    // components: { VcTable, VcHint, VcImage },
     setup() {
       return { args };
     },