@vc-shell/framework 1.0.68 → 1.0.70

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

@@ -4,7 +4,7 @@
     v-slot="{ errorMessage, handleChange, errors }"
     :label="handleDisplayName || property.displayName"
     :name="property.displayName || property.name"
-    :modelValue="getter(property, true)"
+    :model-value="getter(property, true)"
     :rules="rules"
   >
     <VcSelect
@@ -12,13 +12,7 @@
       :error="!!errors.length"
       :error-message="errorMessage"
       :label="handleDisplayName || property.displayName"
-      :modelValue="getter(property, true)"
-      @update:modelValue="
-        (e) => {
-          handleChange(e);
-          setter(property, e, items);
-        }
-      "
+      :model-value="getter(property, true)"
       :required="property.required || property.isRequired"
       :placeholder="handleDisplayName || property.defaultValue"
       :options="items"
@@ -26,6 +20,12 @@
       :option-label="handleDisplayProperty"
       :disabled="disabled"
       searchable
+      @update:model-value="
+        (e) => {
+          handleChange(e);
+          setter(property, e, items);
+        }
+      "
       @search="onSearch"
       @close="onClose"
     ></VcSelect>
@@ -37,7 +37,7 @@
     "
     v-slot="{ errorMessage, handleChange, errors }"
     :name="property.name"
-    :modelValue="property.values"
+    :model-value="property.values"
     :label="handleDisplayName"
     :rules="rules"
   >
@@ -46,13 +46,7 @@
       :error="!!errors.length"
       :error-message="errorMessage"
       :label="handleDisplayName"
-      :modelValue="property.values"
-      @update:modelValue="
-        (e) => {
-          handleChange(e);
-          setter(property, e);
-        }
-      "
+      :model-value="property.values"
       :required="property.required || property.isRequired"
       placeholder="Add value"
       :disabled="disabled"
@@ -62,6 +56,12 @@
       :display-value="displayedValueLabel.value"
       :multiple="true"
       :emit-value="false"
+      @update:model-value="
+        (e) => {
+          handleChange(e);
+          setter(property, e);
+        }
+      "
     ></VcSelect>
   </Field>
 
@@ -72,7 +72,7 @@
     v-slot="{ errorMessage, handleChange, errors }"
     :name="property.name"
     :label="handleDisplayName"
-    :modelValue="property.values"
+    :model-value="property.values"
     :rules="rules"
   >
     <VcSelect
@@ -80,13 +80,7 @@
       :error="!!errors.length"
       :error-message="errorMessage"
       :label="handleDisplayName"
-      :modelValue="property.values"
-      @update:modelValue="
-        (e) => {
-          handleChange(e);
-          setter(property, e, items);
-        }
-      "
+      :model-value="property.values"
       :required="property.required || property.isRequired"
       placeholder="Add value"
       :disabled="disabled"
@@ -95,10 +89,16 @@
       option-value="id"
       :display-label="displayedValueLabel.label"
       :display-value="displayedValueLabel.value"
-      @search="onSearch"
-      @close="onClose"
       :multiple="property.multivalue"
       :emit-value="false"
+      @update:model-value="
+        (e) => {
+          handleChange(e);
+          setter(property, e, items);
+        }
+      "
+      @search="onSearch"
+      @close="onClose"
     ></VcSelect>
   </Field>
 
@@ -107,7 +107,7 @@
     v-slot="{ errorMessage, handleChange, errors }"
     :name="property.displayName || property.name"
     :label="handleDisplayName || property.displayName"
-    :modelValue="getter(property)"
+    :model-value="getter(property)"
     :rules="rules"
   >
     <VcInput
@@ -115,17 +115,17 @@
       :error="!!errors.length"
       :error-message="errorMessage"
       :label="handleDisplayName || property.displayName"
-      :modelValue="(getter(property) as string | number | Date)"
-      @update:modelValue="
+      :model-value="(getter(property) as string | number | Date)"
+      clearable
+      :required="property.required || property.isRequired"
+      :placeholder="handleDisplayName || 'Add value'"
+      :disabled="disabled"
+      @update:model-value="
         (e) => {
           handleChange(e);
           setter(property, e as Record<string, unknown> | string | number | boolean);
         }
       "
-      clearable
-      :required="property.required || property.isRequired"
-      :placeholder="handleDisplayName || 'Add value'"
-      :disabled="disabled"
     ></VcInput>
   </Field>
 
@@ -133,20 +133,14 @@
     v-else-if="property.valueType === 'Number' && property.multivalue"
     v-slot="{ errorMessage, handleChange, errors }"
     :name="property.name"
-    :modelValue="property.values"
+    :model-value="property.values"
     :label="handleDisplayName"
     :rules="rules"
   >
     <VcSelect
       v-bind="$attrs"
       :label="handleDisplayName"
-      :modelValue="property.values"
-      @update:modelValue="
-        (e) => {
-          handleChange(e);
-          setter(property, e);
-        }
-      "
+      :model-value="property.values"
       type="number"
       :required="property.required || property.isRequired"
       placeholder="Add value"
@@ -159,6 +153,12 @@
       :display-label="displayedValueLabel.label"
       :display-value="displayedValueLabel.value"
       multiple
+      @update:model-value="
+        (e) => {
+          handleChange(e);
+          setter(property, e);
+        }
+      "
     ></VcSelect>
   </Field>
 
@@ -167,7 +167,7 @@
     v-slot="{ errorMessage, handleChange, errors }"
     :name="property.name"
     :label="handleDisplayName"
-    :modelValue="getter(property)"
+    :model-value="getter(property)"
     :rules="rules"
   >
     <VcInput
@@ -175,18 +175,18 @@
       :error="!!errors.length"
       :error-message="errorMessage"
       :label="handleDisplayName"
-      :modelValue="(getter(property) as string | number | Date)"
-      @update:modelValue="
-        (e) => {
-          handleChange(e);
-          setter(property, e as Record<string, unknown> | string | number | boolean);
-        }
-      "
+      :model-value="(getter(property) as string | number | Date)"
       clearable
       type="number"
       :required="property.required || property.isRequired"
       :placeholder="handleDisplayName || property.defaultValue"
       :disabled="disabled"
+      @update:model-value="
+        (e) => {
+          handleChange(e);
+          setter(property, e as Record<string, unknown> | string | number | boolean);
+        }
+      "
     ></VcInput>
   </Field>
 
@@ -195,7 +195,7 @@
     v-slot="{ errorMessage, handleChange, errors }"
     :name="property.name"
     :label="handleDisplayName"
-    :modelValue="getter(property)"
+    :model-value="getter(property)"
     :rules="rules"
   >
     <VcInput
@@ -203,19 +203,19 @@
       :error="!!errors.length"
       :error-message="errorMessage"
       :label="handleDisplayName"
-      :modelValue="(getter(property) as string | number | Date)"
-      @update:modelValue="
-        (e) => {
-          handleChange(e);
-          setter(property, e as Record<string, unknown> | string | number | boolean);
-        }
-      "
+      :model-value="(getter(property) as string | number | Date)"
       clearable
       type="number"
       step="1"
       :required="property.required || property.isRequired"
       :placeholder="handleDisplayName || property.defaultValue"
       :disabled="disabled"
+      @update:model-value="
+        (e) => {
+          handleChange(e);
+          setter(property, e as Record<string, unknown> | string | number | boolean);
+        }
+      "
     ></VcInput>
   </Field>
 
@@ -224,7 +224,7 @@
     v-slot="{ errorMessage, handleChange, errors }"
     :name="property.name"
     :label="handleDisplayName"
-    :modelValue="getter(property)"
+    :model-value="getter(property)"
     :rules="rules"
   >
     <VcInput
@@ -232,17 +232,17 @@
       :error="!!errors.length"
       :error-message="errorMessage"
       :label="handleDisplayName"
-      :modelValue="(getter(property) as string | number | Date)"
-      @update:modelValue="
+      :model-value="(getter(property) as string | number | Date)"
+      type="datetime-local"
+      :required="property.required || property.isRequired"
+      :placeholder="handleDisplayName || property.defaultValue"
+      :disabled="disabled"
+      @update:model-value="
         (e) => {
           handleChange(e);
           setter(property, e as Record<string, unknown> | string | number | boolean);
         }
       "
-      type="datetime-local"
-      :required="property.required || property.isRequired"
-      :placeholder="handleDisplayName || property.defaultValue"
-      :disabled="disabled"
     ></VcInput>
   </Field>
 
@@ -251,23 +251,23 @@
     v-slot="{ errorMessage, handleChange }"
     :name="property.name"
     :label="handleDisplayName"
-    :modelValue="getter(property)"
+    :model-value="getter(property)"
     :rules="rules"
   >
     <VcTextarea
       v-bind="$attrs"
       :error-message="errorMessage"
       :label="handleDisplayName"
-      :modelValue="getter(property) as string"
-      @update:modelValue="
+      :model-value="getter(property) as string"
+      :required="property.required || property.isRequired"
+      :placeholder="handleDisplayName || property.defaultValue"
+      :disabled="disabled"
+      @update:model-value="
         (e) => {
           handleChange(e);
           setter(property, e);
         }
       "
-      :required="property.required || property.isRequired"
-      :placeholder="handleDisplayName || property.defaultValue"
-      :disabled="disabled"
     ></VcTextarea>
   </Field>
 
@@ -276,22 +276,22 @@
     v-slot="{ errorMessage, handleChange }"
     :name="property.displayName || property.name"
     :label="handleDisplayName || property.displayName"
-    :modelValue="getter(property)"
+    :model-value="getter(property)"
     :rules="rules"
   >
     <VcCheckbox
       v-bind="$attrs"
       :error-message="errorMessage"
-      :modelValue="getter(property) as boolean"
-      @update:modelValue="
+      :model-value="getter(property) as boolean"
+      :required="property.required || property.isRequired"
+      :disabled="disabled"
+      :name="property.displayName || property.name"
+      @update:model-value="
         (e) => {
           handleChange(e);
           setter(property, e);
         }
       "
-      :required="property.required || property.isRequired"
-      :disabled="disabled"
-      :name="property.displayName || property.name"
     >
       {{ handleDisplayName || property.displayName }}
     </VcCheckbox>
@@ -302,24 +302,24 @@
     v-slot="{ errorMessage, handleChange }"
     :name="property.displayName || property.name"
     :label="handleDisplayName || property.displayName"
-    :modelValue="getter(property)"
+    :model-value="getter(property)"
     :rules="rules"
   >
     <VcCodeEditor
       v-bind="$attrs"
       :label="handleDisplayName || property.displayName"
-      :modelValue="(getter(property) as string | number | Date)"
-      @update:modelValue="
-        (e) => {
-          handleChange(e);
-          setter(property, e as Record<string, unknown> | string | number | boolean);
-        }
-      "
+      :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>

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

@@ -1,12 +1,12 @@
 <template>
   <div
+    v-on-click-outside="onClose"
     class="vc-gallery-item"
     :class="{
       'vc-gallery-item_readonly': readonly,
       'vc-gallery-item_hover': hover,
     }"
     @tap.stop="hover = !hover"
-    v-click-outside="onClose"
   >
     <VcImage
       aspect="1x1"
@@ -30,9 +30,9 @@
       </div>
       <div class="tw-flex tw-grow tw-basis-0 tw-items-center tw-justify-around">
         <div
+          v-if="actions && actions.preview"
           class="vc-gallery-item__button"
           @click="$emit('preview', image)"
-          v-if="actions && actions.preview"
         >
           <VcIcon
             class="vc-gallery-item__button-icon"
@@ -69,7 +69,7 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import { clickOutside as vClickOutside } from "./../../../../../../core/directives";
+import { vOnClickOutside } from "@vueuse/components";
 import { IImage } from "./../../../../../../core/types";
 import { VcImage, VcIcon } from "./../../../../";
 

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

@@ -3,7 +3,7 @@
     :title="currentImage.title"
     @close="$emit('close')"
   >
-    <template v-slot:title>
+    <template #title>
       <div>
         <span>{{ currentImage.name }} (</span>
         <VcLink @click="copyLink(currentImage.url)">copy image link</VcLink>
@@ -60,15 +60,21 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from "vue";
+import { computed, ref, ComputedRef } from "vue";
 import { VcPopup, VcLink, VcIcon, VcImage } from "../../../../";
 import { IImage } from "./../../../../../../core/types";
 
 export interface Props {
   images?: IImage[];
-  index: number;
+  index: number | ComputedRef<number>;
 }
 
+export interface Emits {
+  (event: "close"): void;
+}
+
+defineEmits<Emits>();
+
 const props = withDefaults(defineProps<Props>(), {
   images: () => [],
   index: 0,

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

@@ -12,20 +12,20 @@
     <template v-if="(defaultImages && defaultImages.length) || !disabled">
       <div class="tw-flex tw-flex-wrap tw-relative">
         <div
-          class="tw-flex tw-flex-wrap tw-w-full"
           ref="galleryRef"
+          class="tw-flex tw-flex-wrap tw-w-full"
         >
           <VcGalleryItem
-            class="tw-m-2 vc-gallery__item"
             v-for="(image, i) in defaultImages"
             :key="`image_${i}`"
+            class="tw-m-2 vc-gallery__item"
             :image="image"
             :readonly="disabled"
+            :actions="itemActions"
+            :disable-drag="disableDrag"
             @preview="onPreviewClick(i)"
             @edit="$emit('item:edit', $event)"
             @remove="$emit('item:remove', $event)"
-            :actions="itemActions"
-            :disableDrag="disableDrag"
             @mousedown="onItemMouseDown"
             @dragstart="onItemDragStart($event, image)"
             @dragover="onItemDragOver"
@@ -36,11 +36,11 @@
             v-if="!disabled && !hideAfterUpload"
             class="tw-m-2"
             :icon="uploadIcon"
-            @upload="onUpload"
             :variant="variant"
             :multiple="multiple"
             :rules="rules"
             :name="name"
+            @upload="onUpload"
           ></VcFileUpload>
         </div>
         <div
@@ -55,22 +55,16 @@
     >
       <VcHint>Gallery is empty</VcHint>
     </div>
-
-    <VcGalleryPreview
-      v-if="preview"
-      :images="images"
-      :index="previewImageIndex"
-      @close="preview = false"
-    ></VcGalleryPreview>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { IImage } from "../../../../core/types";
 import { VcLabel, VcFileUpload, VcHint } from "./../../";
 import VcGalleryItem from "./_internal/vc-gallery-item/vc-gallery-item.vue";
 import VcGalleryPreview from "./_internal/vc-gallery-preview/vc-gallery-preview.vue";
+import { usePopup } from "./../../../../shared/components/popup-handler/composables/usePopup";
 
 export interface Props {
   images?: IImage[];
@@ -116,7 +110,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
-const preview = ref(false);
 const previewImageIndex = ref<number>();
 
 const defaultImages = ref<IImage[]>([]);
@@ -126,6 +119,16 @@ const galleryRef = ref<HTMLElement>();
 const reorderGalleryRef = ref<HTMLElement>();
 const dropPosition = ref<number>();
 
+const currentIndex = computed(() => previewImageIndex.value);
+
+const { open } = usePopup({
+  component: VcGalleryPreview,
+  props: {
+    images: props.images,
+    index: currentIndex,
+  },
+});
+
 watch(
   () => props.images,
   (newVal) => {
@@ -141,8 +144,9 @@ const onUpload = (files: FileList) => {
 };
 
 const onPreviewClick = (index: number) => {
-  preview.value = true;
   previewImageIndex.value = index;
+
+  open();
 };
 
 const updateOrder = () => {
@@ -171,19 +175,19 @@ function onItemDragStart(event: DragEvent, item: IImage) {
 }
 
 function onItemDragOver(event: DragEvent) {
-  let dropItem = findParentElement(event.target as HTMLElement);
+  const dropItem = findParentElement(event.target as HTMLElement);
 
   if (!props.disableDrag && !props.disabled && draggedItem.value && dropItem) {
     event.preventDefault();
 
-    let containerOffset = galleryRef.value.getBoundingClientRect();
-    let dropItemOffset = dropItem.getBoundingClientRect();
+    const containerOffset = galleryRef.value.getBoundingClientRect();
+    const dropItemOffset = dropItem.getBoundingClientRect();
 
     if (draggedElement.value !== dropItem) {
-      let elementStyle = getComputedStyle(dropItem);
+      const elementStyle = getComputedStyle(dropItem);
       const dropItemOffsetWidth = dropItem.offsetWidth + parseFloat(elementStyle.marginLeft);
-      let targetLeft = dropItemOffset.left - containerOffset.left;
-      let columnCenter = dropItemOffset.left + dropItemOffsetWidth / 2;
+      const targetLeft = dropItemOffset.left - containerOffset.left;
+      const columnCenter = dropItemOffset.left + dropItemOffsetWidth / 2;
 
       reorderGalleryRef.value.style.top = dropItemOffset.top - containerOffset.top + "px";
       reorderGalleryRef.value.style.height = dropItem.offsetHeight + "px";
@@ -213,8 +217,8 @@ function onItemDrop(event: DragEvent, item: IImage) {
   event.preventDefault();
 
   if (draggedItem.value) {
-    let dragIndex = defaultImages.value.indexOf(draggedItem.value);
-    let dropIndex = defaultImages.value.indexOf(item);
+    const dragIndex = defaultImages.value.indexOf(draggedItem.value);
+    const dropIndex = defaultImages.value.indexOf(item);
 
     let allowDrop = dragIndex !== dropIndex;
 

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

@@ -0,0 +1,63 @@
+<template>
+  <div class="tw-flex">
+    <VcRow class="tw-justify-between tw-grow tw-basis-0">
+      <template v-if="currentTemplate">
+        <notificationTemplateRenderer />
+      </template>
+      <template v-else>
+        <VcNotificationTemplate
+          :color="notificationStyle.color"
+          :title="notification.title"
+          :icon="notificationStyle.icon"
+        >
+          <VcHint
+            v-if="notification.description"
+            class="tw-mb-1"
+            >{{ notification.description }}</VcHint
+          >
+        </VcNotificationTemplate>
+      </template>
+      <div class="tw-flex tw-shrink-0">
+        <p class="tw-text-s tw-leading-[18px] tw-text-[#8e8e8e] tw-m-0">
+          {{ pushTime }}
+        </p>
+      </div>
+    </VcRow>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, h } from "vue";
+import moment from "moment";
+import { PushNotification } from "./../../../../../../core/api";
+import { VcRow, VcNotificationTemplate } from "./../../../../";
+import { NotificationTemplateConstructor } from "./../../../../../../core/types";
+
+export interface Props {
+  notification: PushNotification;
+  templates: NotificationTemplateConstructor[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  notification: undefined,
+});
+
+const locale = window.navigator.language;
+
+const notificationStyle = computed(() => ({
+  color: "#A9BCCD",
+  icon: "fas fa-info",
+}));
+
+const pushTime = computed(() => {
+  return moment(props.notification.created).locale(locale).format("L LT");
+});
+
+const currentTemplate = computed(() => props.templates?.find((x) => x?.notifyType === props.notification.notifyType));
+
+function notificationTemplateRenderer() {
+  const notificationTemplate = currentTemplate.value;
+
+  return notificationTemplate && h(notificationTemplate, { notification: props.notification });
+}
+</script>

package/ui/components/organisms/vc-notification-dropdown/index.ts

@@ -0,0 +1,3 @@
+import _NotificationDropdown from "./vc-notification-dropdown.vue";
+
+export const VcNotificationDropdown = _NotificationDropdown as typeof _NotificationDropdown;