@vc-shell/framework 1.1.0-alpha.1 → 1.1.0-alpha.2

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

@@ -1,163 +1,163 @@
-<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"
-  >
-    <VcImage
-      aspect="1x1"
-      :src="image.url"
-      background="contain"
-    ></VcImage>
-    <div class="vc-gallery-item__overlay">
-      <div class="vc-gallery-item__overlay-content">
-        <VcIcon
-          v-if="!readonly && !disableDrag"
-          class="vc-gallery-item__move"
-          icon="fas fa-arrows-alt"
-          size="s"
-        ></VcIcon>
-        <div
-          class="vc-gallery-item__image-name"
-          :title="image.name"
-        >
-          {{ image.name }}
-        </div>
-      </div>
-      <div class="vc-gallery-item__actions">
-        <div
-          v-if="actions && actions.preview"
-          class="vc-gallery-item__button"
-          @click="$emit('preview', image)"
-        >
-          <VcIcon
-            class="vc-gallery-item__button-icon"
-            icon="fas fa-eye"
-          ></VcIcon>
-          <div class="vc-gallery-item__button-text">
-            {{ t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_ITEM.FULLSCREEN") }}
-          </div>
-        </div>
-        <div
-          v-if="!readonly && actions && actions.edit"
-          class="vc-gallery-item__button"
-          @click="$emit('edit', image)"
-        >
-          <VcIcon
-            class="vc-gallery-item__button-icon"
-            icon="fas fa-pen"
-          ></VcIcon>
-          <div class="vc-gallery-item__button-text">
-            {{ $t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_ITEM.EDIT") }}
-          </div>
-        </div>
-        <div
-          v-if="!readonly && actions && actions.remove"
-          class="vc-gallery-item__button"
-          @click="$emit('remove', image)"
-        >
-          <VcIcon
-            class="vc-gallery-item__button-icon"
-            icon="fas fa-trash"
-          ></VcIcon>
-          <div class="vc-gallery-item__button-text">
-            {{ $t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_ITEM.DELETE") }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from "vue";
-import { vOnClickOutside } from "@vueuse/components";
-import { ICommonAsset } from "./../../../../../../core/types";
-import { VcImage, VcIcon } from "./../../../../";
-import { useI18n } from "vue-i18n";
-
-export interface Props {
-  image: ICommonAsset;
-  readonly?: boolean | undefined;
-  actions?: {
-    preview: boolean | undefined;
-    edit: boolean | undefined;
-    remove: boolean | undefined;
-  };
-  disableDrag?: boolean | undefined;
-}
-
-withDefaults(defineProps<Props>(), {
-  image: () => ({}) as ICommonAsset,
-  readonly: false,
-  actions: () => ({
-    name: undefined,
-    preview: undefined,
-    edit: undefined,
-    remove: undefined,
-  }),
-  disableDrag: false,
-});
-
-defineEmits(["preview", "edit", "remove"]);
-const { t } = useI18n({ useScope: "global" });
-const hover = ref(false);
-
-function onClose() {
-  hover.value = false;
-}
-</script>
-
-<style lang="scss">
-:root {
-  --gallery-item-border-color: var(--secondary-200);
-  --gallery-item-overlay-bg-color: var(--primary-100);
-  --gallery-item-move-icon-color: var(--secondary-300);
-  --gallery-item-button-icon-color: var(--primary-500);
-}
-
-.vc-gallery-item {
-  @apply tw-relative tw-w-[155px] tw-h-[155px] tw-box-border tw-border tw-border-solid tw-border-[var(--gallery-item-border-color)] tw-rounded-md tw-p-1;
-
-  &__overlay {
-    @apply tw-bg-[var(--gallery-item-overlay-bg-color)] tw-opacity-0 tw-flex tw-flex-col tw-p-2 tw-absolute tw-left-0 tw-top-0 tw-right-0 tw-bottom-0 tw-transition-opacity tw-duration-200;
-  }
-
-  &:hover &__overlay,
-  .vc-app_touch &__hover &__overlay {
-    @apply tw-opacity-100;
-  }
-
-  &__move {
-    @apply tw-text-[var(--gallery-item-move-icon-color)] tw-cursor-move tw-mr-2;
-  }
-
-  &__button {
-    @apply tw-cursor-pointer tw-flex tw-flex-col tw-items-center;
-
-    &-icon {
-      @apply tw-text-[var(--gallery-item-button-icon-color)];
-    }
-
-    &-text {
-      @apply tw-mt-2 tw-text-sm;
-    }
-  }
-
-  &__overlay-content {
-    @apply tw-flex;
-  }
-
-  &__image-name {
-    @apply tw-truncate tw-text-sm;
-  }
-
-  &__actions {
-    @apply tw-flex tw-grow tw-basis-0 tw-items-center tw-justify-around;
-  }
-}
-</style>
+<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"
+  >
+    <VcImage
+      aspect="1x1"
+      :src="image.url"
+      background="contain"
+    ></VcImage>
+    <div class="vc-gallery-item__overlay">
+      <div class="vc-gallery-item__overlay-content">
+        <VcIcon
+          v-if="!readonly && !disableDrag"
+          class="vc-gallery-item__move"
+          icon="fas fa-arrows-alt"
+          size="s"
+        ></VcIcon>
+        <div
+          class="vc-gallery-item__image-name"
+          :title="image.name"
+        >
+          {{ image.name }}
+        </div>
+      </div>
+      <div class="vc-gallery-item__actions">
+        <div
+          v-if="actions && actions.preview"
+          class="vc-gallery-item__button"
+          @click="$emit('preview', image)"
+        >
+          <VcIcon
+            class="vc-gallery-item__button-icon"
+            icon="fas fa-eye"
+          ></VcIcon>
+          <div class="vc-gallery-item__button-text">
+            {{ t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_ITEM.FULLSCREEN") }}
+          </div>
+        </div>
+        <div
+          v-if="!readonly && actions && actions.edit"
+          class="vc-gallery-item__button"
+          @click="$emit('edit', image)"
+        >
+          <VcIcon
+            class="vc-gallery-item__button-icon"
+            icon="fas fa-pen"
+          ></VcIcon>
+          <div class="vc-gallery-item__button-text">
+            {{ $t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_ITEM.EDIT") }}
+          </div>
+        </div>
+        <div
+          v-if="!readonly && actions && actions.remove"
+          class="vc-gallery-item__button"
+          @click="$emit('remove', image)"
+        >
+          <VcIcon
+            class="vc-gallery-item__button-icon"
+            icon="fas fa-trash"
+          ></VcIcon>
+          <div class="vc-gallery-item__button-text">
+            {{ $t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_ITEM.DELETE") }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { vOnClickOutside } from "@vueuse/components";
+import { ICommonAsset } from "./../../../../../../core/types";
+import { VcImage, VcIcon } from "./../../../../";
+import { useI18n } from "vue-i18n";
+
+export interface Props {
+  image: ICommonAsset;
+  readonly?: boolean | undefined;
+  actions?: {
+    preview: boolean | undefined;
+    edit: boolean | undefined;
+    remove: boolean | undefined;
+  };
+  disableDrag?: boolean | undefined;
+}
+
+withDefaults(defineProps<Props>(), {
+  image: () => ({}) as ICommonAsset,
+  readonly: false,
+  actions: () => ({
+    name: undefined,
+    preview: undefined,
+    edit: undefined,
+    remove: undefined,
+  }),
+  disableDrag: false,
+});
+
+defineEmits(["preview", "edit", "remove"]);
+const { t } = useI18n({ useScope: "global" });
+const hover = ref(false);
+
+function onClose() {
+  hover.value = false;
+}
+</script>
+
+<style lang="scss">
+:root {
+  --gallery-item-border-color: var(--secondary-200);
+  --gallery-item-overlay-bg-color: var(--primary-100);
+  --gallery-item-move-icon-color: var(--secondary-300);
+  --gallery-item-button-icon-color: var(--primary-500);
+}
+
+.vc-gallery-item {
+  @apply tw-relative tw-w-[155px] tw-h-[155px] tw-box-border tw-border tw-border-solid tw-border-[var(--gallery-item-border-color)] tw-rounded-md tw-p-1;
+
+  &__overlay {
+    @apply tw-bg-[var(--gallery-item-overlay-bg-color)] tw-opacity-0 tw-flex tw-flex-col tw-p-2 tw-absolute tw-left-0 tw-top-0 tw-right-0 tw-bottom-0 tw-transition-opacity tw-duration-200;
+  }
+
+  &:hover &__overlay,
+  .vc-app_touch &__hover &__overlay {
+    @apply tw-opacity-100;
+  }
+
+  &__move {
+    @apply tw-text-[var(--gallery-item-move-icon-color)] tw-cursor-move tw-mr-2;
+  }
+
+  &__button {
+    @apply tw-cursor-pointer tw-flex tw-flex-col tw-items-center;
+
+    &-icon {
+      @apply tw-text-[var(--gallery-item-button-icon-color)];
+    }
+
+    &-text {
+      @apply tw-mt-2 tw-text-sm;
+    }
+  }
+
+  &__overlay-content {
+    @apply tw-flex;
+  }
+
+  &__image-name {
+    @apply tw-truncate tw-text-sm;
+  }
+
+  &__actions {
+    @apply tw-flex tw-grow tw-basis-0 tw-items-center tw-justify-around;
+  }
+}
+</style>

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

@@ -1,166 +1,166 @@
-<template>
-  <VcPopup
-    v-if="currentImage"
-    :title="currentImage?.title"
-    is-mobile-fullscreen
-    is-fullscreen
-    modal-width="tw-w-full"
-    @close="$emit('close')"
-    @keydown.passive="handleKeyDown"
-  >
-    <template #header>
-      <div>
-        <span>{{ currentImage.name }} (</span>
-        <VcLink @click="copyLink(currentImage.url ?? '')">
-          {{ t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_PREVIEW.COPY_IMAGE_LINK") }}
-        </VcLink>
-        <span>)</span>
-      </div>
-    </template>
-    <template #content>
-      <div class="vc-gallery-preview__content">
-        <div class="vc-gallery-preview__image-container">
-          <div
-            class="vc-gallery-preview__image-handler"
-            :style="imageHandler"
-          ></div>
-          <button
-            v-if="localIndex > 0"
-            class="vc-gallery-preview__nav-btn vc-gallery-preview__nav-btn_left"
-            @click="localIndex--"
-          >
-            <VcIcon
-              icon="fas fa-arrow-left"
-              size="xl"
-            ></VcIcon>
-          </button>
-          <button
-            v-if="localIndex < images.length - 1"
-            class="vc-gallery-preview__nav-btn vc-gallery-preview__nav-btn_right"
-            @click="localIndex++"
-          >
-            <VcIcon
-              icon="fas fa-arrow-right"
-              size="xl"
-            ></VcIcon>
-          </button>
-        </div>
-        <div class="vc-gallery-preview__thumbnails">
-          <div
-            v-for="(item, i) in images"
-            :key="i"
-            class="vc-gallery-preview__thumbnail"
-            :class="{ 'vc-gallery-preview__thumbnail_current': i === localIndex }"
-          >
-            <VcImage
-              :src="item.url"
-              size="xl"
-              background="contain"
-              :bordered="true"
-              :clickable="true"
-              @click="localIndex = i"
-            ></VcImage>
-          </div>
-        </div>
-      </div>
-    </template>
-  </VcPopup>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref } from "vue";
-import { VcPopup, VcLink, VcIcon, VcImage } from "../../../../";
-import { ICommonAsset } from "./../../../../../../core/types";
-import { useI18n } from "vue-i18n";
-
-export interface Props {
-  images?: ICommonAsset[];
-  index: number;
-}
-
-export interface Emits {
-  (event: "close"): void;
-}
-
-defineEmits<Emits>();
-
-const props = withDefaults(defineProps<Props>(), {
-  images: () => [],
-  index: 0,
-});
-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 undefined;
-});
-
-const currentImage = computed(() => props.images[localIndex.value]);
-
-const copyLink = (link: string) => {
-  if (link.charAt(0) === "/") {
-    navigator.clipboard?.writeText(`${location.origin}${link}`);
-  } else {
-    navigator.clipboard?.writeText(link);
-  }
-};
-
-function handleKeyDown(event: KeyboardEvent) {
-  if (event.key === "ArrowLeft" && localIndex.value > 0) {
-    localIndex.value--;
-  } else if (event.key === "ArrowRight" && localIndex.value < props.images.length - 1) {
-    localIndex.value++;
-  }
-}
-</script>
-
-<style lang="scss">
-:root {
-  --gallery-preview-btn-bg-color: var(--secondary-50);
-  --gallery-preview-btn-icon-color: var(--secondary-400);
-  --gallery-preview-btn-shadow-color: var(--base-text-color, var(--neutrals-950));
-  --gallery-preview-btn-shadow: 0 0 20px rgb(from var(--gallery-preview-btn-shadow-color) r g b / 15%);
-  --gallery-preview-overlay-color: var(--primary-400);
-}
-
-.vc-gallery-preview {
-  &__content {
-    @apply tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center;
-  }
-
-  &__image-container {
-    @apply tw-box-border tw-p-5 tw-grow tw-basis-0 tw-w-full tw-relative;
-  }
-
-  &__image-handler {
-    @apply tw-w-full tw-h-full tw-box-border;
-  }
-
-  &__nav-btn {
-    @apply tw-absolute tw-top-2/4 tw-h-[72px] tw-w-[72px] tw-flex tw-items-center tw-justify-center tw-rounded-full tw-bg-[var(--gallery-preview-btn-bg-color)] tw-cursor-pointer tw-text-[color:var(--gallery-preview-btn-icon-color)] hover:[box-shadow:var(--gallery-preview-btn-shadow)];
-
-    &_left {
-      @apply tw-left-[25px];
-    }
-
-    &_right {
-      @apply tw-right-[25px];
-    }
-  }
-
-  &__thumbnails {
-    @apply tw-p-4 tw-pb-[40px] tw-max-w-full tw-overflow-x-auto tw-box-border tw-shrink tw-flex;
-  }
-
-  &__thumbnail {
-    @apply tw-m-1 tw-opacity-60;
-
-    &_current {
-      @apply tw-opacity-100 tw-relative after:tw-content-[''] after:tw-bg-[var(--gallery-preview-overlay-color)] after:tw-h-1 after:tw-w-full after:tw-rounded-[5px] after:tw-absolute after:tw-left-0 after:-tw-bottom-[12px];
-    }
-  }
-}
-</style>
+<template>
+  <VcPopup
+    v-if="currentImage"
+    :title="currentImage?.title"
+    is-mobile-fullscreen
+    is-fullscreen
+    modal-width="tw-w-full"
+    @close="$emit('close')"
+    @keydown.passive="handleKeyDown"
+  >
+    <template #header>
+      <div>
+        <span>{{ currentImage.name }} (</span>
+        <VcLink @click="copyLink(currentImage.url ?? '')">
+          {{ t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_PREVIEW.COPY_IMAGE_LINK") }}
+        </VcLink>
+        <span>)</span>
+      </div>
+    </template>
+    <template #content>
+      <div class="vc-gallery-preview__content">
+        <div class="vc-gallery-preview__image-container">
+          <div
+            class="vc-gallery-preview__image-handler"
+            :style="imageHandler"
+          ></div>
+          <button
+            v-if="localIndex > 0"
+            class="vc-gallery-preview__nav-btn vc-gallery-preview__nav-btn_left"
+            @click="localIndex--"
+          >
+            <VcIcon
+              icon="fas fa-arrow-left"
+              size="xl"
+            ></VcIcon>
+          </button>
+          <button
+            v-if="localIndex < images.length - 1"
+            class="vc-gallery-preview__nav-btn vc-gallery-preview__nav-btn_right"
+            @click="localIndex++"
+          >
+            <VcIcon
+              icon="fas fa-arrow-right"
+              size="xl"
+            ></VcIcon>
+          </button>
+        </div>
+        <div class="vc-gallery-preview__thumbnails">
+          <div
+            v-for="(item, i) in images"
+            :key="i"
+            class="vc-gallery-preview__thumbnail"
+            :class="{ 'vc-gallery-preview__thumbnail_current': i === localIndex }"
+          >
+            <VcImage
+              :src="item.url"
+              size="xl"
+              background="contain"
+              :bordered="true"
+              :clickable="true"
+              @click="localIndex = i"
+            ></VcImage>
+          </div>
+        </div>
+      </div>
+    </template>
+  </VcPopup>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import { VcPopup, VcLink, VcIcon, VcImage } from "../../../../";
+import { ICommonAsset } from "./../../../../../../core/types";
+import { useI18n } from "vue-i18n";
+
+export interface Props {
+  images?: ICommonAsset[];
+  index: number;
+}
+
+export interface Emits {
+  (event: "close"): void;
+}
+
+defineEmits<Emits>();
+
+const props = withDefaults(defineProps<Props>(), {
+  images: () => [],
+  index: 0,
+});
+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 undefined;
+});
+
+const currentImage = computed(() => props.images[localIndex.value]);
+
+const copyLink = (link: string) => {
+  if (link.charAt(0) === "/") {
+    navigator.clipboard?.writeText(`${location.origin}${link}`);
+  } else {
+    navigator.clipboard?.writeText(link);
+  }
+};
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (event.key === "ArrowLeft" && localIndex.value > 0) {
+    localIndex.value--;
+  } else if (event.key === "ArrowRight" && localIndex.value < props.images.length - 1) {
+    localIndex.value++;
+  }
+}
+</script>
+
+<style lang="scss">
+:root {
+  --gallery-preview-btn-bg-color: var(--secondary-50);
+  --gallery-preview-btn-icon-color: var(--secondary-400);
+  --gallery-preview-btn-shadow-color: var(--base-text-color, var(--neutrals-950));
+  --gallery-preview-btn-shadow: 0 0 20px rgb(from var(--gallery-preview-btn-shadow-color) r g b / 15%);
+  --gallery-preview-overlay-color: var(--primary-400);
+}
+
+.vc-gallery-preview {
+  &__content {
+    @apply tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center;
+  }
+
+  &__image-container {
+    @apply tw-box-border tw-p-5 tw-grow tw-basis-0 tw-w-full tw-relative;
+  }
+
+  &__image-handler {
+    @apply tw-w-full tw-h-full tw-box-border;
+  }
+
+  &__nav-btn {
+    @apply tw-absolute tw-top-2/4 tw-h-[72px] tw-w-[72px] tw-flex tw-items-center tw-justify-center tw-rounded-full tw-bg-[var(--gallery-preview-btn-bg-color)] tw-cursor-pointer tw-text-[color:var(--gallery-preview-btn-icon-color)] hover:[box-shadow:var(--gallery-preview-btn-shadow)];
+
+    &_left {
+      @apply tw-left-[25px];
+    }
+
+    &_right {
+      @apply tw-right-[25px];
+    }
+  }
+
+  &__thumbnails {
+    @apply tw-p-4 tw-pb-[40px] tw-max-w-full tw-overflow-x-auto tw-box-border tw-shrink tw-flex;
+  }
+
+  &__thumbnail {
+    @apply tw-m-1 tw-opacity-60;
+
+    &_current {
+      @apply tw-opacity-100 tw-relative after:tw-content-[''] after:tw-bg-[var(--gallery-preview-overlay-color)] after:tw-h-1 after:tw-w-full after:tw-rounded-[5px] after:tw-absolute after:tw-left-0 after:-tw-bottom-[12px];
+    }
+  }
+}
+</style>

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

@@ -1 +1 @@
-export { default as VcGallery } from "./vc-gallery.vue";
+export { default as VcGallery } from "./vc-gallery.vue";