@vc-shell/framework 1.0.57 → 1.0.60

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

@@ -60,7 +60,7 @@
                         {{ prefix }}
                       </div>
                       <div
-                        class="tw-w-full tw-appearance-none tw-border-none tw-outline-none tw-min-h-[var(--select-height)] tw-flex tw-items-center tw-w-full tw-box-border tw-box-border tw-cursor-pointer invalid:tw-text-[color:var(--select-placeholder-color)] tw-truncate"
+                        class="tw-appearance-none tw-border-none tw-outline-none tw-min-h-[var(--select-height)] tw-flex tw-items-center tw-w-full tw-box-border tw-cursor-pointer invalid:tw-text-[color:var(--select-placeholder-color)] tw-truncate"
                         @click.stop="toggleDropdown"
                       >
                         <div
@@ -90,7 +90,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>{{ getEmittingOptionValue(item.opt) }}</span>
+                                    <span>{{ getDisplayLabel(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)]"
@@ -344,6 +344,26 @@ export interface Props {
    * @returns Label of the current option
    */
   optionLabel?: OptionProp;
+  /**
+   * @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;
+  /**
+   * @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;
   /**
    * Update model with the value of the selected option instead of the whole option
    */
@@ -548,9 +568,13 @@ const hasNextPage = computed(() => {
   return optionsList.value.length < totalItems.value;
 });
 
-const getOptionValue = computed(() => getPropValueFn(props.optionValue, "value"));
+const getOptionValue = computed(() => getPropValueFn(props.optionValue, "id"));
+
+const getOptionLabel = computed(() => getPropValueFn(props.optionLabel, "title"));
+
+const getDisplayValue = computed(() => getPropValueFn(props.displayValue, "id"));
 
-const getOptionLabel = computed(() => getPropValueFn(props.optionLabel, "label"));
+const getDisplayLabel = computed(() => getPropValueFn(props.displayLabel, "title"));
 
 const innerValue = computed((): Record<string, unknown>[] | string[] => {
   const mapNull = props.mapOptions === true && props.multiple !== true;
@@ -593,7 +617,9 @@ const selectedScope = computed(() => {
 
 const hasValue = computed(() => fieldValueIsFilled(innerValue.value));
 
-const innerOptionsValue = computed(() => innerValue.value.map((opt) => getOptionValue.value(opt)));
+const innerOptionsValue = computed(() =>
+  innerValue.value.map((opt) => getOptionValue.value(opt) || getDisplayValue.value(opt))
+);
 
 const optionScope = computed(() => {
   return optionsTemp.value.map((opt, i) => {
@@ -601,7 +627,7 @@ const optionScope = computed(() => {
       index: i,
       opt,
       selected: isOptionSelected(opt) === true,
-      label: getOptionLabel.value(opt),
+      label: getOptionLabel.value(opt) || getDisplayLabel.value(opt),
       toggleOption,
     };
   });
@@ -624,7 +650,7 @@ function getPropValueFn(propValue: OptionProp, defaultVal: OptionProp) {
 }
 
 function getOption(value: Record<string, unknown> | string, valueCache: Array<Record<string, unknown> | string>) {
-  const fn = (opt) => isEqual(getOptionValue.value(opt), value);
+  const fn = (opt) => isEqual(getOptionValue.value(opt), value) || isEqual(getDisplayValue.value(opt), value);
   return defaultValue.value.find(fn) || optionsList.value.find(fn) || valueCache.find(fn) || value;
 }
 
@@ -649,7 +675,8 @@ function removeAtIndex(index: number) {
 }
 
 function isOptionSelected(opt: Record<string, unknown>) {
-  const val = getOptionValue.value(opt);
+  const val = getOptionValue.value(opt) || getDisplayValue.value(opt);
+
   return innerOptionsValue.value.find((v) => isEqual(v, val)) !== void 0;
 }
 
@@ -722,7 +749,7 @@ function toggleOption(opt: { [x: string]: string }) {
     return;
   }
 
-  const optValue = getOptionValue.value(opt);
+  const optValue = getOptionValue.value(opt) || getDisplayValue.value(opt);
 
   if (props.multiple !== true) {
     if (innerValue.value.length === 0 || isEqual(getOptionValue.value(innerValue.value[0]), optValue) !== true) {
@@ -796,6 +823,10 @@ function emitValue(val: string) {
 }
 
 function onReset() {
+  if (props.multiple) {
+    emit("update:modelValue", []);
+    return;
+  }
   emit("update:modelValue", null);
 }
 </script>

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

@@ -50,7 +50,7 @@ import { VcLabel } from "./../../../components";
 
 export interface Props {
   placeholder?: string;
-  modelValue: string;
+  modelValue?: string;
   required?: boolean;
   disabled?: boolean;
   label?: string;

package/ui/components/organisms/vc-app/_internal/vc-app-bar/vc-app-bar.vue

@@ -26,13 +26,14 @@
       <!-- Show blades name when at least one blade is opened -->
       <div
         v-if="blades.length === 1"
-        class="tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap tw-text-2xl tw-leading-header"
+        class="tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap tw-text-2xl tw-leading-header tw-ml-2"
       >
         {{ blades[0].title }}
       </div>
 
       <!-- Show back link when more than one blade is opened -->
       <VcLink
+        class="tw-ml-3"
         v-else-if="blades.length > 1"
         @click="$emit('backlink:click')"
       >
@@ -45,7 +46,7 @@
     </template>
 
     <!-- Additional spacer -->
-    <div class="tw-grow tw-basis-0 tw-basis-0"></div>
+    <div class="tw-grow tw-basis-0"></div>
 
     <!-- Toolbar container -->
     <div class="tw-flex tw-h-full tw-box-border">

package/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/vc-app-menu-item.vue

@@ -4,10 +4,10 @@
       <router-link
         :to="component.url"
         custom
-        v-slot="{ isActive, navigate }"
+        v-slot="{ isExactActive, navigate }"
       >
         <vc-app-menu-link
-          :isActive="isActive"
+          :isActive="isExactActive"
           :children="children"
           :sticky="sticky"
           :icon="icon as string"
@@ -23,7 +23,6 @@
         :icon="icon as string"
         :title="title"
         @onClick="onMenuItemClick"
-        :isActive="isHomePage"
       />
 
       <!-- Nested menu items -->
@@ -61,7 +60,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, computed } from "vue";
+import { onMounted, ref } from "vue";
 import { IBladeToolbar, IMenuItems } from "./../../../../../../../../core/types";
 import VcAppMenuLink from "./_internal/vc-app-menu-link.vue";
 import { NavigationFailure, useRoute } from "vue-router";
@@ -109,8 +108,6 @@ const emit = defineEmits<Emits>();
 
 const isOpened = ref(false);
 
-const isHomePage = computed(() => route.path === "/");
-
 onMounted(() => {
   if (props.children && props.children.length && props.children.find((x) => x.component?.url === route?.path)) {
     isOpened.value = true;

package/ui/components/organisms/vc-blade/_internal/vc-blade-header/vc-blade-header.vue

@@ -50,7 +50,7 @@
         </div>
         <div
           v-else
-          class="vc-blade-header__button"
+          class="tw-text-[color:var(--blade-header-button-color)] tw-ml-4 tw-cursor-pointer hover:tw-text-[color:var(--blade-header-button-color-hover)]"
           @click="onExpand"
         >
           <VcIcon
@@ -81,11 +81,7 @@ export interface Props {
   subtitle?: string | undefined;
   icon?: string | undefined;
 }
-const props = withDefaults(defineProps<Props>(), {
-  expandable: false,
-  expanded: false,
-  closable: false,
-});
+const props = defineProps<Props>();
 
 const emit = defineEmits(["close", "expand", "collapse"]);
 

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

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

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

@@ -56,7 +56,12 @@
       :required="property.required || property.isRequired"
       placeholder="Add value"
       :disabled="disabled"
+      option-label="alias"
+      option-value="id"
+      :display-label="displayedValueLabel.label"
+      :display-value="displayedValueLabel.value"
       :multiple="true"
+      :emit-value="false"
     ></VcSelect>
   </Field>
 
@@ -88,9 +93,12 @@
       :options="items"
       option-label="alias"
       option-value="id"
+      :display-label="displayedValueLabel.label"
+      :display-value="displayedValueLabel.value"
       @search="onSearch"
       @close="onClose"
       :multiple="property.multivalue"
+      :emit-value="false"
     ></VcSelect>
   </Field>
 
@@ -148,6 +156,8 @@
       :options="items"
       option-value="id"
       :option-label="handleDisplayProperty"
+      :display-label="displayedValueLabel.label"
+      :display-value="displayedValueLabel.value"
       multiple
     ></VcSelect>
   </Field>
@@ -317,8 +327,8 @@
 
 <script lang="ts" setup>
 import { ref, onMounted, computed } from "vue";
-import { useI18n } from "./../../../../core/composables";
 import { Field } from "vee-validate";
+import { useI18n } from "vue-i18n";
 
 export interface Props {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -342,6 +352,13 @@ export interface Props {
   ) => 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 {

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

@@ -10,7 +10,7 @@
   >
     <VcImage
       aspect="1x1"
-      :src="image.url"
+      :src="image['url']"
       background="contain"
     ></VcImage>
     <div class="vc-gallery-item__overlay">
@@ -23,9 +23,9 @@
         ></VcIcon>
         <div
           class="tw-truncate"
-          :title="image.name"
+          :title="image['name']"
         >
-          {{ image.name }}
+          {{ image["name"] }}
         </div>
       </div>
       <div class="tw-flex tw-grow tw-basis-0 tw-items-center tw-justify-around">
@@ -73,7 +73,7 @@ import { clickOutside as vClickOutside } from "./../../../../../../core/directiv
 import { IImage } from "./../../../../../../core/types";
 
 export interface Props {
-  image?: IImage | undefined;
+  image: IImage;
   readonly?: boolean | undefined;
   actions?:
     | {
@@ -87,12 +87,6 @@ export interface Props {
 }
 
 withDefaults(defineProps<Props>(), {
-  image: () => ({
-    sortOrder: undefined,
-    title: undefined,
-    name: undefined,
-    url: undefined,
-  }),
   readonly: false,
   actions: () => ({
     name: undefined,
@@ -126,7 +120,7 @@ function onClose() {
   }
 
   &__move {
-    @apply tw-text-[#a1c0d4] tw-cursor-pointer tw-mr-2;
+    @apply tw-text-[#a1c0d4] tw-cursor-move tw-mr-2;
   }
 
   &__button {

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

@@ -9,44 +9,45 @@
       {{ label }}
     </VcLabel>
 
-    <template v-if="(images && images.length) || !disabled">
-      <div class="tw-flex tw-flex-wrap">
-        <draggable
-          :list="images"
+    <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"
-          tag="transition-group"
-          v-bind="dragOptions"
-          @change="updateOrder"
-          :component-data="{
-            tag: 'div',
-          }"
+          ref="galleryRef"
         >
-          <template #item="{ element, index }">
-            <VcGalleryItem
-              class="tw-m-2"
-              :key="element.sortOrder"
-              :image="element"
-              :readonly="disabled"
-              @preview="onPreviewClick(index)"
-              @edit="$emit('item:edit', $event)"
-              @remove="$emit('item:remove', $event)"
-              :actions="itemActions"
-              :disableDrag="disableDrag"
-            ></VcGalleryItem>
-          </template>
-          <template #footer>
-            <VcFileUpload
-              v-if="!disabled && !hideAfterUpload"
-              class="tw-m-2"
-              :icon="uploadIcon"
-              @upload="onUpload"
-              :variant="variant"
-              :multiple="multiple"
-              :rules="rules"
-              :name="name"
-            ></VcFileUpload>
-          </template>
-        </draggable>
+          <VcGalleryItem
+            class="tw-m-2 vc-gallery__item"
+            v-for="(image, i) in defaultImages"
+            :key="`image_${i}`"
+            :image="image"
+            :readonly="disabled"
+            @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"
+            @dragleave="onItemDragLeave"
+            @drop="onItemDrop($event, image)"
+            @touchstart="onItemMouseDown"
+          ></VcGalleryItem>
+          <VcFileUpload
+            v-if="!disabled && !hideAfterUpload"
+            class="tw-m-2"
+            :icon="uploadIcon"
+            @upload="onUpload"
+            :variant="variant"
+            :multiple="multiple"
+            :rules="rules"
+            :name="name"
+          ></VcFileUpload>
+        </div>
+        <div
+          ref="reorderGalleryRef"
+          class="tw-w-0.5 tw-bg-[#41afe6] tw-h-full tw-absolute tw-top-0 tw-bottom-0 tw-z-[2] tw-hidden"
+        ></div>
       </div>
     </template>
     <div
@@ -66,7 +67,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from "vue";
+import { ref, watch } from "vue";
 import { IImage } from "../../../../core/types";
 import { VcLabel, VcFileUpload } from "./../../../components";
 import VcGalleryItem from "./_internal/vc-gallery-item/vc-gallery-item.vue";
@@ -99,7 +100,6 @@ export interface Emits {
   (event: "sort", sorted: IImage[]): void;
   (event: "item:edit", image: IImage): void;
   (event: "item:remove", image: IImage): void;
-  (event: "item:move", image: IImage): void;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -118,15 +118,22 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<Emits>();
 
 const preview = ref(false);
-const previewImageIndex = ref();
-const dragOptions = computed(() => {
-  return {
-    animation: 200,
-    group: "description",
-    disabled: props.disableDrag,
-    ghostClass: "ghost",
-  };
-});
+const previewImageIndex = ref<number>();
+
+const defaultImages = ref<IImage[]>([]);
+const draggedItem = ref<IImage>();
+const draggedElement = ref<HTMLElement>();
+const galleryRef = ref<HTMLElement>();
+const reorderGalleryRef = ref<HTMLElement>();
+const dropPosition = ref<number>();
+
+watch(
+  () => props.images,
+  (newVal) => {
+    defaultImages.value = newVal;
+  },
+  { deep: true, immediate: true }
+);
 
 const onUpload = (files: FileList) => {
   if (files && files.length) {
@@ -140,11 +147,119 @@ const onPreviewClick = (index: number) => {
 };
 
 const updateOrder = () => {
-  const images = props.images;
+  const images = defaultImages.value;
   const sortedImgs = images.map((item, index) => {
     item.sortOrder = index;
     return item;
   });
-  emit("sort", ref(sortedImgs).value);
+
+  emit("sort", sortedImgs);
 };
+
+function onItemMouseDown(event: MouseEvent & { currentTarget?: { draggable: boolean } }) {
+  if (!props.disableDrag) {
+    event.currentTarget.draggable = true;
+    return;
+  }
+}
+
+function onItemDragStart(event: DragEvent, item: IImage) {
+  draggedItem.value = item;
+  draggedElement.value = event.target as HTMLElement;
+  event.dataTransfer.setData("text", "gallery_reorder");
+}
+
+function onItemDragOver(event: DragEvent) {
+  let dropItem = findParentElement(event.target as HTMLElement);
+
+  if (!props.disableDrag && draggedItem.value && dropItem) {
+    event.preventDefault();
+
+    let containerOffset = galleryRef.value.getBoundingClientRect();
+    let dropItemOffset = dropItem.getBoundingClientRect();
+
+    if (draggedElement.value !== dropItem) {
+      let elementStyle = getComputedStyle(dropItem);
+      const dropItemOffsetWidth = dropItem.offsetWidth + parseFloat(elementStyle.marginLeft);
+      let targetLeft = dropItemOffset.left - containerOffset.left;
+      let columnCenter = dropItemOffset.left + dropItemOffsetWidth / 2;
+
+      reorderGalleryRef.value.style.top = dropItemOffset.top - containerOffset.top + "px";
+      reorderGalleryRef.value.style.height = dropItem.offsetHeight + "px";
+
+      if (event.pageX > columnCenter) {
+        reorderGalleryRef.value.style.left = targetLeft + dropItemOffsetWidth + "px";
+        dropPosition.value = 1;
+      } else {
+        reorderGalleryRef.value.style.left = targetLeft - parseFloat(elementStyle.marginLeft) + "px";
+        dropPosition.value = -1;
+      }
+
+      reorderGalleryRef.value.style.display = "block";
+    }
+  }
+}
+
+function onItemDragLeave(event: DragEvent) {
+  if (!props.disableDrag && draggedItem.value) {
+    event.preventDefault();
+
+    reorderGalleryRef.value.style.display = "none";
+  }
+}
+
+function onItemDrop(event: DragEvent, item: IImage) {
+  event.preventDefault();
+
+  if (draggedItem.value) {
+    let dragIndex = defaultImages.value.indexOf(draggedItem.value);
+    let dropIndex = defaultImages.value.indexOf(item);
+
+    let allowDrop = dragIndex !== dropIndex;
+
+    if (
+      allowDrop &&
+      ((dropIndex - dragIndex === 1 && dropPosition.value === -1) ||
+        (dropIndex - dragIndex === -1 && dropPosition.value === 1))
+    ) {
+      allowDrop = false;
+    }
+
+    if (allowDrop) {
+      reorderArray(defaultImages.value, dragIndex, dropIndex);
+
+      updateOrder();
+    }
+
+    reorderGalleryRef.value.style.display = "none";
+    draggedElement.value.draggable = false;
+    draggedItem.value = null;
+    dropPosition.value = null;
+  }
+}
+
+function reorderArray(value: unknown[], from: number, to: number) {
+  if (value && from !== to) {
+    if (to >= value.length) {
+      to %= value.length;
+      from %= value.length;
+    }
+
+    value.splice(to, 0, value.splice(from, 1)[0]);
+  }
+}
+
+function findParentElement(element: HTMLElement) {
+  if (element.classList.contains("vc-gallery__item")) {
+    return element;
+  } else {
+    let parent = element.parentElement;
+
+    while (!parent.classList.contains("vc-gallery__item")) {
+      parent = parent.parentElement;
+      if (!parent) break;
+    }
+    return parent;
+  }
+}
 </script>