@vc-shell/framework 1.1.1 → 1.1.2

package/dist/assets/ui-media-advanced-T8ibi153.js

@@ -0,0 +1,492 @@
+import { defineComponent, ref, withDirectives, createElementBlock, openBlock, withModifiers, normalizeClass, createVNode, createElementVNode, unref, createBlock, createCommentVNode, toDisplayString, computed, withCtx, normalizeStyle, Fragment, renderList, createTextVNode, watch, createSlots, toValue } from 'vue';
+import './ui-indicators-mIQeEqha.js';
+import { A as _sfc_main$3, _ as _sfc_main$4 } from './ui-media-WWYrwmZw.js';
+import { V as VcLink, _ as _sfc_main$6 } from './ui-controls-nmDJYLmC.js';
+import './ui-layout-v2XBQky3.js';
+import { V as VcHint } from './ui-helpers-CF-EUlOg.js';
+import { a as _sfc_main$5, b as usePopup } from './ui-navigation-BtHa6ovW.js';
+import './core-composables-DYxpIWyY.js';
+import './ui-app-D31Pr1WY.js';
+import 'vee-validate';
+import './ui-content-B7SxH8y9.js';
+import { u as useI18n, v as vOnClickOutside } from './ui-form-fields-DFQi31jT.js';
+import { _ as _sfc_main$7 } from './ui-form-Cs5ooOo7.js';
+import './shared-composables-v9NkNuAe.js';
+import './core-plugins-wv2bDZ0l.js';
+import 'vue-router';
+import './shared-components-CfAt2hC6.js';
+import './shared-modules-CDP-H5ZB.js';
+import './ui-data-Ci3b1ye0.js';
+
+const _hoisted_1$2 = { class: "vc-gallery-item__overlay" };
+const _hoisted_2$2 = { class: "vc-gallery-item__overlay-content" };
+const _hoisted_3$2 = ["title"];
+const _hoisted_4 = { class: "vc-gallery-item__actions" };
+const _hoisted_5 = { class: "vc-gallery-item__button-text" };
+const _hoisted_6 = { class: "vc-gallery-item__button-text" };
+const _hoisted_7 = { class: "vc-gallery-item__button-text" };
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "vc-gallery-item",
+  props: {
+    image: { default: () => ({}) },
+    readonly: { type: Boolean, default: false },
+    actions: { default: () => ({
+      name: void 0,
+      preview: void 0,
+      edit: void 0,
+      remove: void 0
+    }) },
+    disableDrag: { type: Boolean, default: false }
+  },
+  emits: ["preview", "edit", "remove"],
+  setup(__props) {
+    const { t } = useI18n({ useScope: "global" });
+    const hover = ref(false);
+    function onClose() {
+      hover.value = false;
+    }
+    return (_ctx, _cache) => {
+      return withDirectives((openBlock(), createElementBlock("div", {
+        class: normalizeClass(["vc-gallery-item", {
+          "vc-gallery-item_readonly": _ctx.readonly,
+          "vc-gallery-item_hover": hover.value
+        }]),
+        onTap: _cache[3] || (_cache[3] = withModifiers(($event) => hover.value = !hover.value, ["stop"]))
+      }, [
+        createVNode(unref(_sfc_main$3), {
+          aspect: "1x1",
+          src: _ctx.image.url,
+          background: "contain"
+        }, null, 8, ["src"]),
+        createElementVNode("div", _hoisted_1$2, [
+          createElementVNode("div", _hoisted_2$2, [
+            !_ctx.readonly && !_ctx.disableDrag ? (openBlock(), createBlock(unref(_sfc_main$4), {
+              key: 0,
+              class: "vc-gallery-item__move",
+              icon: "material-drag_indicator",
+              size: "s"
+            })) : createCommentVNode("", true),
+            createElementVNode("div", {
+              class: "vc-gallery-item__image-name",
+              title: _ctx.image.name
+            }, toDisplayString(_ctx.image.name), 9, _hoisted_3$2)
+          ]),
+          createElementVNode("div", _hoisted_4, [
+            _ctx.actions && _ctx.actions.preview ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: "vc-gallery-item__button",
+              onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("preview", _ctx.image))
+            }, [
+              createVNode(unref(_sfc_main$4), {
+                class: "vc-gallery-item__button-icon",
+                icon: "material-open_in_full"
+              }),
+              createElementVNode("div", _hoisted_5, toDisplayString(unref(t)("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_ITEM.FULLSCREEN")), 1)
+            ])) : createCommentVNode("", true),
+            !_ctx.readonly && _ctx.actions && _ctx.actions.edit ? (openBlock(), createElementBlock("div", {
+              key: 1,
+              class: "vc-gallery-item__button",
+              onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("edit", _ctx.image))
+            }, [
+              createVNode(unref(_sfc_main$4), {
+                class: "vc-gallery-item__button-icon",
+                icon: "material-edit"
+              }),
+              createElementVNode("div", _hoisted_6, toDisplayString(_ctx.$t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_ITEM.EDIT")), 1)
+            ])) : createCommentVNode("", true),
+            !_ctx.readonly && _ctx.actions && _ctx.actions.remove ? (openBlock(), createElementBlock("div", {
+              key: 2,
+              class: "vc-gallery-item__button",
+              onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("remove", _ctx.image))
+            }, [
+              createVNode(unref(_sfc_main$4), {
+                class: "vc-gallery-item__button-icon",
+                icon: "material-delete"
+              }),
+              createElementVNode("div", _hoisted_7, toDisplayString(_ctx.$t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_ITEM.DELETE")), 1)
+            ])) : createCommentVNode("", true)
+          ])
+        ])
+      ], 34)), [
+        [unref(vOnClickOutside), onClose]
+      ]);
+    };
+  }
+});
+
+const _hoisted_1$1 = { class: "vc-gallery-preview__content" };
+const _hoisted_2$1 = { class: "vc-gallery-preview__image-container" };
+const _hoisted_3$1 = { class: "vc-gallery-preview__thumbnails" };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "vc-gallery-preview",
+  props: {
+    images: { default: () => [] },
+    index: { default: 0 }
+  },
+  emits: ["close"],
+  setup(__props) {
+    const props = __props;
+    const { t } = useI18n({ useScope: "global" });
+    const localIndex = ref(props.index);
+    const imageHandler = computed(() => {
+      if (currentImage.value.url) {
+        return `background: url(${CSS.escape(currentImage.value.url)}) center / contain no-repeat`;
+      }
+      return void 0;
+    });
+    const currentImage = computed(() => props.images[localIndex.value]);
+    const copyLink = (link) => {
+      if (link.charAt(0) === "/") {
+        navigator.clipboard?.writeText(`${location.origin}${link}`);
+      } else {
+        navigator.clipboard?.writeText(link);
+      }
+    };
+    function handleKeyDown(event) {
+      if (event.key === "ArrowLeft" && localIndex.value > 0) {
+        localIndex.value--;
+      } else if (event.key === "ArrowRight" && localIndex.value < props.images.length - 1) {
+        localIndex.value++;
+      }
+    }
+    return (_ctx, _cache) => {
+      return currentImage.value ? (openBlock(), createBlock(unref(_sfc_main$5), {
+        key: 0,
+        title: currentImage.value?.title,
+        "is-mobile-fullscreen": "",
+        "is-fullscreen": "",
+        "modal-width": "tw-w-full",
+        onClose: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("close")),
+        onKeydownPassive: handleKeyDown
+      }, {
+        header: withCtx(() => [
+          createElementVNode("div", null, [
+            createElementVNode("span", null, toDisplayString(currentImage.value.name) + " (", 1),
+            createVNode(unref(VcLink), {
+              onClick: _cache[0] || (_cache[0] = ($event) => copyLink(currentImage.value.url ?? ""))
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(t)("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_PREVIEW.COPY_IMAGE_LINK")), 1)
+              ]),
+              _: 1
+            }),
+            _cache[4] || (_cache[4] = createElementVNode("span", null, ")", -1))
+          ])
+        ]),
+        content: withCtx(() => [
+          createElementVNode("div", _hoisted_1$1, [
+            createElementVNode("div", _hoisted_2$1, [
+              createElementVNode("div", {
+                class: "vc-gallery-preview__image-handler",
+                style: normalizeStyle(imageHandler.value)
+              }, null, 4),
+              localIndex.value > 0 ? (openBlock(), createElementBlock("button", {
+                key: 0,
+                class: "vc-gallery-preview__nav-btn vc-gallery-preview__nav-btn_left",
+                onClick: _cache[1] || (_cache[1] = ($event) => localIndex.value--)
+              }, [
+                createVNode(unref(_sfc_main$4), {
+                  icon: "material-arrow_back",
+                  size: "xl"
+                })
+              ])) : createCommentVNode("", true),
+              localIndex.value < _ctx.images.length - 1 ? (openBlock(), createElementBlock("button", {
+                key: 1,
+                class: "vc-gallery-preview__nav-btn vc-gallery-preview__nav-btn_right",
+                onClick: _cache[2] || (_cache[2] = ($event) => localIndex.value++)
+              }, [
+                createVNode(unref(_sfc_main$4), {
+                  icon: "material-arrow_forward",
+                  size: "xl"
+                })
+              ])) : createCommentVNode("", true)
+            ]),
+            createElementVNode("div", _hoisted_3$1, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.images, (item, i) => {
+                return openBlock(), createElementBlock("div", {
+                  key: i,
+                  class: normalizeClass(["vc-gallery-preview__thumbnail", { "vc-gallery-preview__thumbnail_current": i === localIndex.value }])
+                }, [
+                  createVNode(unref(_sfc_main$3), {
+                    src: item.url,
+                    size: "xl",
+                    background: "contain",
+                    bordered: true,
+                    clickable: true,
+                    onClick: ($event) => localIndex.value = i
+                  }, null, 8, ["src", "onClick"])
+                ], 2);
+              }), 128))
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["title"])) : createCommentVNode("", true);
+    };
+  }
+});
+
+const _hoisted_1 = { class: "vc-gallery" };
+const _hoisted_2 = {
+  key: 1,
+  class: "vc-gallery__container"
+};
+const _hoisted_3 = {
+  key: 2,
+  class: "vc-gallery__empty"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "vc-gallery",
+  props: {
+    images: { default: () => [] },
+    disabled: { type: Boolean },
+    required: { type: Boolean },
+    label: {},
+    tooltip: {},
+    uploadIcon: { default: "material-cloud_upload" },
+    multiple: { type: Boolean },
+    variant: { default: "gallery" },
+    itemActions: { default: () => ({
+      preview: true,
+      edit: true,
+      remove: true
+    }) },
+    hideAfterUpload: { type: Boolean },
+    rules: {},
+    name: { default: "Gallery" },
+    loading: { type: Boolean },
+    customText: {}
+  },
+  emits: ["upload", "sort", "edit", "remove"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { t } = useI18n({ useScope: "global" });
+    const previewImageIndex = ref();
+    const defaultImages = ref([]);
+    const draggedItem = ref();
+    const draggedElement = ref();
+    const galleryRef = ref();
+    const reorderGalleryRef = ref();
+    const dropPosition = ref();
+    const currentIndex = computed(() => previewImageIndex.value);
+    const disableDrag = computed(() => defaultImages.value.length <= 1);
+    const uploadHidden = ref(false);
+    const { open } = usePopup(
+      computed(() => ({
+        component: _sfc_main$1,
+        props: {
+          images: props.images,
+          index: currentIndex.value
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      }))
+    );
+    watch(
+      () => props.images,
+      (newVal) => {
+        defaultImages.value = unref(newVal);
+        if (props.hideAfterUpload) {
+          uploadHidden.value = !!defaultImages.value.length;
+        }
+      },
+      { deep: true, immediate: true }
+    );
+    const onUpload = (files) => {
+      if (files && files.length) {
+        const uploadedFiles = [];
+        const existingImageNames = defaultImages.value.map((image) => image.name);
+        Array.from(files).forEach((file) => {
+          let fileName = file.name;
+          if (existingImageNames.includes(fileName)) {
+            let index = 1;
+            const baseName = fileName.replace(/\.[^/.]+$/, "");
+            while (existingImageNames.includes(fileName)) {
+              fileName = `${baseName}_${index}.${file.name.split(".").pop()}`;
+              index++;
+            }
+          }
+          const modifiedFile = new File([file], fileName, { type: file.type });
+          uploadedFiles.push(modifiedFile);
+        });
+        const modifiedFileList = new DataTransfer();
+        uploadedFiles.forEach((file) => {
+          modifiedFileList.items.add(file);
+        });
+        emit("upload", modifiedFileList.files, props.images[props.images.length - 1]?.sortOrder);
+      }
+    };
+    const onPreviewClick = (index) => {
+      previewImageIndex.value = index;
+      open();
+    };
+    const updateOrder = () => {
+      const images = defaultImages.value;
+      const sortedImgs = images.map((item, index) => {
+        item.sortOrder = index;
+        return item;
+      });
+      emit("sort", sortedImgs);
+    };
+    function onItemMouseDown(event) {
+      if (!disableDrag.value && !props.disabled) {
+        event.currentTarget.draggable = true;
+        return;
+      }
+    }
+    function onItemDragStart(event, item) {
+      if (!disableDrag.value && !props.disabled) {
+        draggedItem.value = item;
+        draggedElement.value = event.target;
+        event.dataTransfer?.setData("text", "gallery_reorder");
+      }
+    }
+    function onItemDragOver(event) {
+      const dropItem = findParentElement(event.target);
+      if (!disableDrag.value && !props.disabled && draggedItem.value && dropItem) {
+        event.preventDefault();
+        const containerOffset = galleryRef.value?.getBoundingClientRect();
+        const dropItemOffset = dropItem.getBoundingClientRect();
+        if (draggedElement.value !== dropItem && containerOffset) {
+          const elementStyle = getComputedStyle(dropItem);
+          const dropItemOffsetWidth = dropItem.offsetWidth + parseFloat(elementStyle.marginLeft);
+          const targetLeft = dropItemOffset.left - containerOffset.left;
+          const columnCenter = dropItemOffset.left + dropItemOffsetWidth / 2;
+          if (reorderGalleryRef.value) {
+            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) {
+      if (!disableDrag.value && !props.disabled && draggedItem.value && reorderGalleryRef.value) {
+        event.preventDefault();
+        reorderGalleryRef.value.style.display = "none";
+      }
+    }
+    function onItemDrop(event, item) {
+      event.preventDefault();
+      if (draggedItem.value) {
+        const dragIndex = defaultImages.value.indexOf(draggedItem.value);
+        const 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();
+        }
+        if (reorderGalleryRef.value && draggedElement.value) {
+          reorderGalleryRef.value.style.display = "none";
+          draggedElement.value.draggable = false;
+          draggedItem.value = void 0;
+          dropPosition.value = void 0;
+        }
+      }
+    }
+    function reorderArray(value, from, to) {
+      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) {
+      if (element.classList.contains("vc-gallery__item")) {
+        return element;
+      } else {
+        let parent = element.parentElement;
+        while (!(parent && parent.classList.contains("vc-gallery__item"))) {
+          parent = parent?.parentElement || null;
+          if (!parent) break;
+        }
+        return parent;
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        _ctx.label ? (openBlock(), createBlock(unref(_sfc_main$6), {
+          key: 0,
+          required: _ctx.required
+        }, createSlots({
+          default: withCtx(() => [
+            createElementVNode("span", null, toDisplayString(_ctx.label), 1)
+          ]),
+          _: 2
+        }, [
+          _ctx.tooltip ? {
+            name: "tooltip",
+            fn: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.tooltip), 1)
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["required"])) : createCommentVNode("", true),
+        toValue(defaultImages.value) && toValue(defaultImages.value).length || !_ctx.disabled ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createElementVNode("div", {
+            ref_key: "galleryRef",
+            ref: galleryRef,
+            class: "vc-gallery__wrapper"
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(defaultImages.value, (image, i) => {
+              return openBlock(), createBlock(_sfc_main$2, {
+                key: `image_${i}`,
+                class: "vc-gallery__item",
+                image,
+                readonly: _ctx.disabled,
+                actions: _ctx.itemActions,
+                "disable-drag": disableDrag.value,
+                onPreview: ($event) => onPreviewClick(i),
+                onEdit: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("edit", $event)),
+                onRemove: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("remove", $event)),
+                onMousedown: onItemMouseDown,
+                onDragstart: ($event) => onItemDragStart($event, image),
+                onDragover: onItemDragOver,
+                onDragleave: onItemDragLeave,
+                onDrop: ($event) => onItemDrop($event, image)
+              }, null, 8, ["image", "readonly", "actions", "disable-drag", "onPreview", "onDragstart", "onDrop"]);
+            }), 128)),
+            !_ctx.disabled && !uploadHidden.value ? (openBlock(), createBlock(unref(_sfc_main$7), {
+              key: 0,
+              class: "vc-gallery__upload",
+              icon: _ctx.uploadIcon,
+              variant: _ctx.variant,
+              multiple: _ctx.multiple,
+              rules: _ctx.rules,
+              name: _ctx.name,
+              loading: _ctx.loading,
+              "custom-text": _ctx.customText,
+              onUpload
+            }, null, 8, ["icon", "variant", "multiple", "rules", "name", "loading", "custom-text"])) : createCommentVNode("", true)
+          ], 512),
+          createElementVNode("div", {
+            ref_key: "reorderGalleryRef",
+            ref: reorderGalleryRef,
+            class: "vc-gallery__reorder-line"
+          }, null, 512)
+        ])) : (openBlock(), createElementBlock("div", _hoisted_3, [
+          createVNode(unref(VcHint), null, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(t)("COMPONENTS.ORGANISMS.VC_GALLERY.GALLERY_IS_EMPTY")), 1)
+            ]),
+            _: 1
+          })
+        ]))
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as _ };

package/dist/assets/ui-modals-BdZXzI85.js

@@ -0,0 +1,2 @@
+import 'vue';
+import './ui-navigation-BtHa6ovW.js';