@mptw/skylens-ui 1.0.0 → 1.1.0

package/app.vue

@@ -1,3 +1,2 @@
 <template lang="pug">
-SLMap
 </template>

package/components/SLMultiEmailInput.vue

@@ -0,0 +1,719 @@
+<template lang="pug">
+.multi-email-input(:class='{ collapsable, collapsed }')
+  a.multi-email-input-header(href='javascript:;', @click='onClickedToggleCollapse')
+    .left-block
+      span 與其他使用者共用
+      SLInfoTip(placement="top", :pinnable='false')
+        .space-y-3
+          .flex.items-center.text-sm.text-gray-2
+            SLIcon.text-secondary(icon="check-circle")
+            span.whitespace-nowrap ：確認帳號存在 SKYLENS
+          .flex.items-center.text-sm.text-gray-2
+            SLIcon.text-danger(icon='exclamation-circle')
+            span.whitespace-nowrap ：帳號可能不存在 SKYLENS , 需請帳號管理者新增
+    .right-block
+      SLIcon(icon='chevron-down')
+  .multi-email-input-body
+    .multi-email-input-body-wrapper
+      .emails-input(ref='inputEl')
+        .emails-input-wrapper
+          .emails-list.custom-scrollbar-y(
+            v-if='modelValue.length > 0'
+            ref='listEl'
+          )
+            .emails-list-wrapper(ref='listWrapperEl')
+              .email-item(
+                v-for='inputEmail in modelValue'
+                :key='inputEmail.email'
+              )
+                .email-item-status
+                  SLSpinIcon(
+                    v-if='inputEmail.status === "loading"'
+                    icon='loading-circle'
+                  ).icon-loading
+                  SLIcon(
+                    v-else-if='inputEmail.status === "success"'
+                    icon='check-circle'
+                  ).icon-success
+                  SLIcon(
+                    v-else-if='inputEmail.status === "warn"'
+                    icon='exclamation-circle'
+                  ).icon-warn
+                .email-item-email {{ inputEmail.email }}
+                a.email-item-delete-button(
+                  href='javascript:;'
+                  @click='onClickedRemoveInputEmail(inputEmail.email)'
+                )
+                  SLIcon(icon='times')
+          textarea(
+            v-model.trim="email"
+            rows="1"
+            placeholder='輸入使用者Email'
+            ref='textareaEl'
+            @paste.prevent="onPastedEmails"
+            @keydown.enter.prevent="onEnteredEmail"
+            @focus='onFocusTextarea'
+            @blur='onBlurTextarea'
+          )
+      .multi-email-input-role(v-if='isShowRoleOptions')
+        SLDropdown.multi-email-input-role-dropdown(
+          v-model:show-dropdown="isShowRoleDropdown"
+          :title='roleDropdownTitle'
+          toggle-icon='chevron-down'
+          placement="bottom"
+          menu-class='multi-email-input-role-dropdown-menu'
+        )
+          SLDropdownItem(
+            title='檢視'
+            :active='role === "normal"'
+            @click='onClickedRole("normal")'
+          )
+          SLDropdownItem(
+            title='編輯'
+            :active='role === "editor"'
+            @click='onClickedRole("editor")'
+          )
+      .multi-email-input-actions
+        SLButton(
+          :title="addButtonTitle"
+          color="primary"
+          size="md"
+          :disabled="!isAddEnable"
+          :loading='loading'
+          @click="onClickedAdd"
+        )
+  ClientOnly
+    Teleport(to='body')
+      .multi-email-input-autocomplete(
+        :style='`width: ${autoCompleteWidth}px;`'
+        ref='autoCompleteEl'
+      )
+        .swiper(ref='swiperEl')
+          .swiper-wrapper
+            .swiper-slide
+              a.autotcomplete-item(
+                v-for='member, i in autoCompletedMembers'
+                href='javascript:;'
+                tabindex='-1'
+                :class='{ focused: focusedAutoCompleteIndex === i }'
+                :key='member'
+                @click='onClickedMember(member)'
+                ref='autoCompleteItemEls'
+              ) {{ member }}
+          .swiper-scrollbar
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import { createPopper } from "@popperjs/core";
+import type { Instance as PopperInstance } from "@popperjs/core";
+import { fromEvent, Subscription } from "rxjs";
+import Swiper from "swiper";
+import { FreeMode, Scrollbar, Mousewheel } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/scrollbar";
+import { OrgUserRole } from "~ui/interface/IOrganization";
+
+export default defineComponent({
+  name: "SLMultiEmailInput",
+  components: {},
+  props: {
+    collapsable: {
+      type: Boolean,
+      default: false,
+    },
+    collapsed: {
+      type: Boolean,
+      default: true,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    orgMembers: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+    label: {
+      type: String,
+      default: "與其他使用者共用",
+    },
+    modelValue: {
+      type: Array as PropType<
+        {
+          email: string;
+          status: "loading" | "success" | "warn";
+        }[]
+      >,
+      default: () => [
+        { email: "aaa@example.com", status: "loading" },
+        { email: "bbb@example.com", status: "success" },
+        { email: "ccc@example.com", status: "warn" },
+      ],
+    },
+    role: {
+      type: String as PropType<OrgUserRole>,
+      default: OrgUserRole.Normal,
+    },
+    isShowRoleOptions: {
+      type: Boolean,
+      default: true,
+    },
+    addButtonTitle: {
+      type: String,
+      default: "加入",
+    },
+    recommendEmails: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+  },
+  emits: [
+    "remove:email",
+    "paste:emails",
+    "enter:email",
+    "update:role",
+    "add",
+    "toggle:collapse",
+  ],
+  setup(props, { emit }) {
+    const { collapsable, orgMembers, modelValue, role, recommendEmails } =
+      toRefs(props);
+
+    const inputEl = shallowRef<HTMLDivElement | null>(null);
+    const listEl = shallowRef<HTMLDivElement | null>(null);
+    const listWrapperEl = shallowRef<HTMLDivElement | null>(null);
+    const textareaEl = shallowRef<HTMLTextAreaElement | null>(null);
+    const autoCompleteEl = shallowRef<HTMLDivElement | null>(null);
+    const swiperEl = shallowRef<HTMLDivElement | null>(null);
+    const email = ref("");
+    const isShowRoleDropdown = ref(false);
+    const isShowAutoComplete = ref(false);
+    const autoCompleteWidth = ref(0);
+    const isScrollToEnd = ref(false);
+    const focusedAutoCompleteIndex = ref(-1);
+    const focusedTextarea = ref(false);
+
+    let popperInstance: PopperInstance | null = null;
+    let clickSubscription: Subscription | null = null;
+    let keydownSubscription: Subscription | null = null;
+    let swiper: Swiper | null = null;
+
+    const autoCompletedMembers = computed(() => {
+      if (!email.value) return recommendEmails.value;
+
+      const regexp = new RegExp(`.*${email.value}.*`, "i");
+      return orgMembers.value.filter((member) => regexp.test(member));
+    });
+    const roleDropdownTitle = computed(() => {
+      switch (role.value) {
+        case OrgUserRole.Editor:
+          return "編輯";
+        default:
+          return "檢視";
+      }
+    });
+    const isAddEnable = computed(() => {
+      let isEnable =
+        modelValue.value.filter((inputEmail) => inputEmail.status === "success")
+          .length > 0;
+
+      modelValue.value.forEach((inputEmail) => {
+        if (inputEmail.status === "loading") {
+          isEnable = false;
+        }
+      });
+
+      return isEnable;
+    });
+
+    function onClickedRemoveInputEmail(email: string) {
+      emit("remove:email", email);
+    }
+
+    function onPastedEmails(e: ClipboardEvent) {
+      if (!e.clipboardData) return;
+
+      const pastedText = e.clipboardData.getData("text");
+      const pastedEmails = pastedText.replaceAll(/\r\n|\r/g, "\n").split("\n");
+      const pastedEmailSet: Set<string> = new Set();
+      pastedEmails.forEach((email) => {
+        if (
+          !modelValue.value.find((inputEmail) => inputEmail.email === email)
+        ) {
+          pastedEmailSet.add(email);
+        }
+      });
+      isScrollToEnd.value = true;
+      emit("paste:emails", Array.from(pastedEmailSet));
+    }
+
+    function onEnteredEmail() {
+      if (
+        !modelValue.value.find((inputEmail) => inputEmail.email === email.value)
+      ) {
+        isScrollToEnd.value = true;
+        emit("enter:email", email.value);
+      }
+      email.value = "";
+    }
+
+    function onClickedMember(member: string) {
+      if (!modelValue.value.find((inputEmail) => inputEmail.email === member)) {
+        emit("enter:email", member);
+      }
+      email.value = "";
+      focusedAutoCompleteIndex.value = -1;
+    }
+
+    function onClickedRole(changeRole: "normal" | "editor") {
+      emit("update:role", changeRole);
+      isShowRoleDropdown.value = false;
+    }
+
+    function onClickedAdd() {
+      emit("add");
+    }
+
+    function updateSwiper() {
+      nextTick(() => {
+        if (!swiper) return;
+
+        swiper.update();
+      });
+    }
+
+    function setupSwiper() {
+      nextTick(() => {
+        if (!swiperEl.value) return;
+
+        if (swiper) {
+          updateSwiper();
+          return;
+        }
+
+        swiper = new Swiper(swiperEl.value, {
+          modules: [FreeMode, Scrollbar, Mousewheel],
+          slidesPerView: "auto",
+          direction: "vertical",
+          freeMode: true,
+          mousewheel: true,
+          scrollbar: {
+            el: ".swiper-scrollbar",
+            draggable: true,
+            snapOnRelease: false,
+          },
+        });
+      });
+    }
+
+    function destroySwiper() {
+      if (swiper) {
+        swiper.destroy();
+      }
+      swiper = null;
+    }
+
+    function subscribeClick() {
+      clickSubscription = fromEvent(window, "click").subscribe((e) => {
+        const { target } = e;
+        if (
+          (!textareaEl.value || !textareaEl.value.contains(target as Node)) &&
+          (!autoCompleteEl.value ||
+            !autoCompleteEl.value.contains(target as Node))
+        ) {
+          hideAutoComplete();
+        }
+      });
+    }
+
+    function unsubscribeClick() {
+      if (clickSubscription) {
+        clickSubscription.unsubscribe();
+      }
+      clickSubscription = null;
+    }
+
+    function setupPopper() {
+      nextTick(() => {
+        if (!inputEl.value || !autoCompleteEl.value) return;
+        popperInstance = createPopper(inputEl.value, autoCompleteEl.value, {
+          placement: "bottom",
+          modifiers: [
+            {
+              name: "offset",
+              options: {
+                offset: [0, 4],
+              },
+            },
+            { name: "eventListeners", enabled: false },
+          ],
+        });
+      });
+    }
+
+    function destroyPopper() {
+      destroySwiper();
+      unsubscribeClick();
+
+      if (popperInstance) {
+        popperInstance.destroy();
+      }
+      popperInstance = null;
+    }
+
+    function showAutoComplete() {
+      if (
+        !autoCompleteEl.value ||
+        !inputEl.value ||
+        autoCompleteEl.value.hasAttribute("data-show") ||
+        !popperInstance ||
+        !autoCompletedMembers.value.length
+      )
+        return;
+
+      isShowAutoComplete.value = true;
+      subscribeClick();
+      const inputElRect = inputEl.value.getBoundingClientRect();
+      autoCompleteWidth.value = inputElRect.width;
+
+      autoCompleteEl.value.setAttribute("data-show", "");
+      popperInstance.setOptions((options) => ({
+        ...options,
+        modifiers: [
+          ...(options.modifiers || []),
+          { name: "eventListeners", enabled: true },
+        ],
+      }));
+
+      setupSwiper();
+    }
+
+    function hideAutoComplete() {
+      if (!autoCompleteEl.value || !popperInstance) return;
+
+      isShowAutoComplete.value = false;
+      unsubscribeClick();
+      destroySwiper();
+      autoCompleteEl.value.removeAttribute("data-show");
+      popperInstance.setOptions((options) => ({
+        ...options,
+        modifiers: [
+          ...(options.modifiers || []),
+          { name: "eventListeners", enabled: false },
+        ],
+      }));
+    }
+
+    function onFocusTextarea() {
+      focusedTextarea.value = true;
+      showAutoComplete();
+    }
+
+    function onBlurTextarea() {
+      focusedTextarea.value = false;
+    }
+
+    function listScrollToEnd() {
+      if (!isScrollToEnd.value) return;
+
+      nextTick(() => {
+        isScrollToEnd.value = false;
+        if (!listEl.value || !listWrapperEl.value) return;
+
+        const listElRect = listEl.value.getBoundingClientRect();
+        const listWrapperElRect = listWrapperEl.value.getBoundingClientRect();
+        const diff = listWrapperElRect.height - listElRect.height;
+
+        listEl.value.scrollTo({
+          top: diff > 0 ? diff : 0,
+          behavior: "smooth",
+        });
+      });
+    }
+
+    function onWindowKeydown(e: Event) {
+      if (!isShowAutoComplete.value) return;
+
+      const keyboardEvent = e as KeyboardEvent;
+      if (
+        keyboardEvent.key === "ArrowDown" ||
+        keyboardEvent.key === "ArrowUp" ||
+        keyboardEvent.key === "Enter"
+      ) {
+        switch (keyboardEvent.key) {
+          case "ArrowDown":
+            focusedAutoCompleteIndex.value = Math.min(
+              autoCompletedMembers.value.length - 1,
+              focusedAutoCompleteIndex.value + 1
+            );
+            break;
+          case "ArrowUp":
+            focusedAutoCompleteIndex.value = Math.max(
+              -1,
+              focusedAutoCompleteIndex.value - 1
+            );
+            break;
+          default:
+            const member =
+              autoCompletedMembers.value[focusedAutoCompleteIndex.value];
+            onClickedMember(member);
+            hideAutoComplete();
+        }
+
+        if (textareaEl.value && keyboardEvent.key !== "Enter") {
+          if (focusedAutoCompleteIndex.value > -1) {
+            textareaEl.value.blur();
+          } else {
+            textareaEl.value.focus();
+          }
+        }
+
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+    }
+
+    function setupAutoCompleteItemsTabindex() {
+      nextTick(() => {
+        const slideEl = swiperEl.value?.querySelector(".swiper-slide");
+        if (!slideEl) return;
+
+        for (let i = 0; i < slideEl.children.length; i += 1) {
+          const autoCompleteItemEl = slideEl.children[i];
+
+          if (i === focusedAutoCompleteIndex.value) {
+            autoCompleteItemEl.setAttribute("tabindex", "0");
+          } else {
+            autoCompleteItemEl.setAttribute("tabindex", "-1");
+          }
+        }
+      });
+    }
+
+    function scrollToAutoCompleteItem() {
+      nextTick(() => {
+        if (!swiperEl.value || !swiper) return;
+
+        if (focusedAutoCompleteIndex.value <= -1) {
+          swiper.translateTo(0, 0, false, false);
+          return;
+        }
+
+        const swiperWrapperEl = swiperEl.value.querySelector(".swiper-wrapper");
+        const swiperSlideEl = swiperEl.value.querySelector(".swiper-slide");
+        const itemEl = swiperSlideEl?.children[focusedAutoCompleteIndex.value];
+
+        if (!swiperWrapperEl || !swiperSlideEl || !itemEl) return;
+
+        const swiperRect = swiperEl.value.getBoundingClientRect();
+        const wrapperRect = swiperWrapperEl.getBoundingClientRect();
+        const slideRect = swiperSlideEl.getBoundingClientRect();
+        const itemRect = itemEl.getBoundingClientRect();
+        const scrollTop = wrapperRect.y - swiperRect.y;
+        const scrollBotttom = scrollTop - swiperRect.height;
+        const itemTop = slideRect.y - itemRect.y;
+        const itemBottom = itemTop - itemRect.height;
+
+        if (itemTop > scrollTop) {
+          swiper.translateTo(itemTop, 300, false, false);
+          return;
+        }
+
+        if (itemBottom < scrollBotttom) {
+          swiper.translateTo(
+            itemBottom - scrollBotttom + scrollTop,
+            300,
+            false,
+            false
+          );
+        }
+      });
+    }
+
+    function onClickedToggleCollapse() {
+      if (!collapsable.value) return;
+
+      emit("toggle:collapse");
+    }
+
+    watch(autoCompletedMembers, () => {
+      focusedAutoCompleteIndex.value = -1;
+
+      if (autoCompletedMembers.value.length) {
+        if (focusedTextarea.value) {
+          showAutoComplete();
+        }
+        updateSwiper();
+      } else {
+        hideAutoComplete();
+      }
+    });
+
+    watch(modelValue, () => {
+      listScrollToEnd();
+    });
+
+    watch(focusedAutoCompleteIndex, () => {
+      setupAutoCompleteItemsTabindex();
+      scrollToAutoCompleteItem();
+    });
+
+    onMounted(() => {
+      setupPopper();
+
+      keydownSubscription = fromEvent(window, "keydown").subscribe(
+        onWindowKeydown
+      );
+    });
+
+    onBeforeUnmount(() => {
+      destroyPopper();
+
+      if (keydownSubscription) {
+        keydownSubscription.unsubscribe();
+      }
+      keydownSubscription = null;
+    });
+
+    return {
+      inputEl,
+      listEl,
+      listWrapperEl,
+      textareaEl,
+      autoCompleteEl,
+      swiperEl,
+      email,
+      isShowRoleDropdown,
+      autoCompleteWidth,
+      focusedAutoCompleteIndex,
+      autoCompletedMembers,
+      roleDropdownTitle,
+      isAddEnable,
+      onClickedRemoveInputEmail,
+      onPastedEmails,
+      onEnteredEmail,
+      onClickedMember,
+      onClickedRole,
+      onClickedAdd,
+      onFocusTextarea,
+      onBlurTextarea,
+      onClickedToggleCollapse,
+    };
+  },
+});
+</script>
+
+<style lang="stylus" scoped>
+.multi-email-input
+  @apply flex flex-col
+
+  &.collapsable
+    .multi-email-input-header
+      @apply cursor-pointer
+
+      .right-block
+        @apply flex
+
+  &.collapsed
+    .multi-email-input-header
+      .right-block
+        .icon
+          @apply rotate-0
+
+  &-header
+    @apply flex items-center justify-between mb-2 cursor-default
+
+    .left-block
+      @apply flex-grow-0 flex-shrink-0 flex items-center text-base text-gray-2
+
+    .right-block
+      @apply flex-grow-0 flex-shrink-0 text-xs hidden
+      .icon
+        @apply transition-transform rotate-180
+
+  &-body
+
+    &-wrapper
+      @apply flex items-start space-x-4
+
+    .emails-input
+      @apply flex-grow flex items-center s('p-1.75') space-x-4 bg-white border border-primary-light rounded overflow-hidden
+
+      &-wrapper
+        @apply flex-grow space-y-2 overflow-hidden
+
+      .emails-list
+        @apply s('max-h-[97px]')
+
+        &-wrapper
+          @apply flex flex-col items-start space-y-2 overflow-hidden
+
+          .email-item
+            @apply inline-flex items-center justify-start max-w-full s('px-1.75') s('py-0.5') space-x-2 bg-white border border-primary-lighter rounded-full text-base text-gray-2
+
+            &-email
+              @apply flex-grow truncate
+
+            &-status
+              @apply flex-grow-0 flex-shrink-0
+
+              .icon-loading
+                @apply text-third
+
+              .icon-success
+                @apply text-secondary
+
+              .icon-warn
+                @apply text-danger
+
+            &-delete-button
+              @apply text-xs
+
+      textarea
+        @apply flex-grow-0 flex-shrink-0 block w-full p-0 border-0 bg-white text-sm text-gray-2 resize-none s('focus:outline-none')
+
+    .multi-email-input-role
+      @apply flex-grow-0 flex-shrink-0 flex
+
+      :deep(.dropdown-toggle)
+        @apply text-sm
+
+  .multi-email-input-actions
+    @apply flex-grow-0 flex-shrink-0
+
+    .btn
+      @apply text-sm
+
+.multi-email-input-autocomplete
+  @apply z-50 s('max-h-[116px]') p-1 bg-white rounded shadow hidden
+
+  &[data-show]
+    @apply flex
+
+  .swiper
+    @apply w-full
+
+  .swiper-slide
+    @apply h-auto
+  .swiper-scrollbar
+    @apply top-0 right-0 h-full bg-transparent
+
+  :deep(.swiper-scrollbar-drag)
+    @apply bg-primary-lighter
+  .autotcomplete-item
+    @apply block w-full py-1 px-2 bg-white text-sm text-gray-2
+    &:hover, &.focused
+      @apply bg-bg
+</style>
+
+<style lang="stylus">
+.dropdown-menu.multi-email-input-role-dropdown-menu
+  @apply border-primary
+
+  .dropdown-list-wrapper
+    .dropdown-list
+      .dropdown-item
+        @apply text-center
+</style>

package/components/SLProjectShareItem.vue

@@ -0,0 +1,94 @@
+<template lang="pug">
+.project-share-item
+  .item-info
+    .item-info-email {{ email }}
+  .item-actions
+    SLDropdown(
+      v-model:showDropdown="showDropdown"
+      :title="`${modelValue === 'normal' ? '檢視者' : '編輯者'}`"
+      toggle-icon='chevron-down'
+      placement='bottom'
+    )
+      SLDrowdownItem(
+        title="檢視者"
+        :class="{ active: modelValue === 'normal' }"
+        @click="onClickedViewer"
+      )
+      SLDrowdownItem(
+        title="編輯者"
+        :class="{ active: modelValue === 'editor' }"
+        @click="onClickedEditor"
+      )
+      SLDrowdownItem(title="刪除" @click="onClickedDelete")
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import { OrgUserRole } from "~ui/interface/IOrganization";
+
+export default defineComponent({
+  name: "SLProjectShareItem",
+  components: {},
+  props: {
+    email: {
+      type: String,
+      default: "",
+    },
+    modelValue: {
+      type: String as PropType<OrgUserRole>,
+      default: OrgUserRole.Normal,
+    },
+  },
+  emits: ["update:modelValue", "delete"],
+  setup(props, { emit }) {
+    const { email } = toRefs(props);
+
+    const showDropdown = ref(false);
+
+    function onClickedViewer() {
+      emit("update:modelValue", email.value, OrgUserRole.Normal);
+      showDropdown.value = false;
+    }
+
+    function onClickedEditor() {
+      emit("update:modelValue", email.value, OrgUserRole.Editor);
+      showDropdown.value = false;
+    }
+
+    function onClickedDelete() {
+      emit("delete", email.value);
+      showDropdown.value = false;
+    }
+
+    return {
+      showDropdown,
+      onClickedViewer,
+      onClickedEditor,
+      onClickedDelete,
+    };
+  },
+});
+</script>
+
+<style lang="stylus" scoped>
+.project-share-item
+  @apply flex items-center justify-between space-x-4
+
+  .item-info
+    @apply flex-grow text-sm text-gray-2 truncate
+
+  .item-actions
+    @apply flex-grow-0 flex-shrink-0
+
+    :deep(.dropdown-menu)
+      @apply border-primary-light
+      .dropdown-list-wrapper
+        .dropdown-list
+          @apply s('min-w-[74px]') divide-y divide-bg
+
+    :deep(.dropdown-toggle)
+      @apply s('py-0.75') border-primary-light bg-white text-sm
+
+    .dropdown-item
+      @apply text-center
+</style>

package/components/SLTab.vue

@@ -2,6 +2,7 @@
 li(
     v-if="distributed && distributed.header"
     :class="tabNavItemClass"
+    :style="distributed && distributed.style"
     @click="navClick"
     ref='tabPaneEl'
   )
@@ -68,6 +69,7 @@ export default defineComponent({
 
     const distributed = inject<{
       header: boolean;
+      style: string;
       changeTabTo: (newTab: number) => void;
     }>("distributed");
     const activeTab = inject<Ref<number>>("activeTab");

package/interface/IOrganization.ts

@@ -0,0 +1,6 @@
+export enum OrgUserRole {
+  Personal = 'personal',
+  Admin = 'admin',
+  Editor = 'editor',
+  Normal = 'normal',
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mptw/skylens-ui",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",
@@ -43,6 +43,7 @@
     "rxjs": "^7.8.1",
     "sortablejs": "^1.15.2",
     "stylus": "^0.63.0",
+    "swiper": "^11.1.1",
     "tailwindcss-textshadow": "^2.1.3",
     "v-calendar": "^3.1.2",
     "vue": "^3.4.22",