@mptw/skylens-ui 1.0.0

package/components/SLDraggable.vue

@@ -0,0 +1,151 @@
+<template lang="pug">
+component(
+  :is="tag"
+  :class="class"
+  ref="draggableEl"
+) ddd
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import Sortable from "sortablejs";
+
+export default defineComponent({
+  name: "SLDraggable",
+  components: {},
+  props: {
+    tag: {
+      type: String,
+      default: "div",
+    },
+    class: {
+      type: String,
+      default: "",
+    },
+    modelValue: {
+      type: Array as PropType<any[]>,
+      default: () => [],
+    },
+    group: {
+      type: String,
+      default: "",
+    },
+    sort: {
+      type: Boolean,
+      default: true,
+    },
+    itemKey: {
+      type: String,
+      default: "id",
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { modelValue, group, sort } = toRefs(props);
+
+    const draggableEl = shallowRef<HTMLElement | null>(null);
+
+    let sortable: Sortable | null = null;
+
+    onMounted(() => {
+      if (draggableEl.value) {
+        const sortableOptions: Sortable.Options = {
+          sort: sort.value,
+          setData: (dataTransfer, dragEl) => {
+            if (!draggableEl.value) {
+              dataTransfer.clearData("element");
+              return;
+            }
+
+            const elIndex = Array.from(draggableEl.value.children).indexOf(
+              dragEl
+            );
+
+            if (elIndex === -1) {
+              dataTransfer.clearData("element");
+              return;
+            }
+
+            const element = modelValue.value[elIndex];
+
+            if (element === undefined || element === null) {
+              dataTransfer.clearData("element");
+              return;
+            }
+
+            dataTransfer.setData("widget", JSON.stringify(element));
+          },
+          onAdd: (e) => {
+            const elementIndex = e.newIndex;
+            const originalEvent = e["originalEvent"];
+            if (elementIndex === undefined || !originalEvent) return;
+
+            const elementJson = originalEvent.dataTransfer.getData("widget");
+            if (!elementJson) return;
+
+            const element = JSON.parse(elementJson);
+
+            if (modelValue.value.length === 0) {
+              emit("update:modelValue", [
+                ...modelValue.value.slice(0, elementIndex - 1),
+                element,
+                ...modelValue.value.slice(elementIndex - 1),
+              ]);
+            } else {
+              emit("update:modelValue", [
+                ...modelValue.value.slice(0, elementIndex),
+                element,
+                ...modelValue.value.slice(elementIndex),
+              ]);
+            }
+          },
+          onRemove: (e) => {
+            if (e.oldIndex === undefined) return;
+
+            emit("update:modelValue", [
+              ...modelValue.value.slice(0, e.oldIndex),
+              ...modelValue.value.slice(e.oldIndex + 1),
+            ]);
+          },
+          onEnd: (e) => {
+            if (
+              e.newIndex === undefined ||
+              e.oldIndex === undefined ||
+              e.newIndex === e.oldIndex
+            ) {
+              return;
+            }
+
+            const element = modelValue.value[e.oldIndex];
+            const newValue = [...modelValue.value];
+
+            newValue.splice(e.oldIndex, 1);
+            newValue.splice(e.newIndex, 0, element);
+            emit("update:modelValue", newValue);
+          },
+        };
+
+        if (group.value !== "") {
+          sortableOptions.group = group.value;
+        }
+
+        sortable = new Sortable(draggableEl.value, sortableOptions);
+      }
+    });
+
+    onBeforeUnmount(() => {
+      if (sortable) {
+        sortable.destroy();
+      }
+
+      sortable = null;
+    });
+
+    return {
+      draggableEl,
+    };
+  },
+});
+</script>
+
+<style lang="stylus"></style>

package/components/SLDropdown.vue

@@ -0,0 +1,277 @@
+<template lang="pug">
+.dropdown(:class="{ active: visible }" ref="buttonEl")
+  a(
+      href="javascript:;"
+      @click="onClickedToggle"
+      ref="toggleEl"
+    ).dropdown-toggle
+    span.toggle-title {{ title }}
+    SLIcon(:icon="toggleIcon").toggle-icon
+  Teleport(to='body')
+    .dropdown-menu(:class='menuClass', ref="popupEl")
+      .dropdown-search(v-if="withSearch")
+        SLSearchInput(
+            placeholder="搜尋"
+            v-model="search"
+          )
+      .dropdown-list-wrapper.custom-scrollbar-y(:style='`min-width: ${listWidth}px`', ref="listWrapperEl")
+        .dropdown-list(ref='dropdownListEl')
+          slot
+</template>
+
+<script lang="ts">
+import { fromEvent } from "rxjs";
+import { createPopper } from "@popperjs/core";
+import type { Placement } from "@popperjs/core";
+import { gsap } from "gsap";
+import { ScrollToPlugin } from "gsap/ScrollToPlugin";
+
+gsap.registerPlugin(ScrollToPlugin);
+
+export default defineComponent({
+  name: "SLDropdown",
+  components: {},
+  props: {
+    showDropdown: {
+      type: Boolean,
+      default: false,
+    },
+    withSearch: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    placement: {
+      type: String,
+      default: "bottom-start",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    toggleIcon: {
+      type: String,
+      default: "caret-down",
+    },
+    menuClass: {
+      type: [Object, Array, String] as PropType<
+        { [key: string]: boolean } | string[] | string
+      >,
+      default: () => [],
+    },
+  },
+  emits: ["update:showDropdown", "update:search"],
+  setup(props, { emit }) {
+    const { showDropdown, placement, disabled } = toRefs(props);
+
+    const toggleEl = shallowRef<HTMLElement | null>(null);
+    const popupEl = shallowRef<HTMLElement | null>(null);
+    const listWrapperEl = shallowRef<HTMLElement | null>(null);
+    const dropdownListEl = shallowRef<HTMLElement | null>(null);
+    const buttonEl = shallowRef<HTMLElement | null>(null);
+    const visible = ref(showDropdown.value);
+    const search = ref("");
+    const listWidth = ref(64);
+
+    let popperInstance: any = null;
+    let clickSubscriber: any = null;
+    let observer: MutationObserver | null = null;
+
+    function subscribeClick() {
+      clickSubscriber = fromEvent(window, "click").subscribe((e) => {
+        const { target } = e;
+        if (buttonEl.value && !buttonEl.value.contains(target as Node)) {
+          hide();
+        }
+      });
+    }
+
+    function unsubscribeClick() {
+      if (clickSubscriber) {
+        clickSubscriber.unsubscribe();
+      }
+      clickSubscriber = null;
+    }
+
+    function show() {
+      if (!popupEl.value) return;
+
+      if (popupEl.value.getAttribute("data-show") === "") return;
+
+      const body = document.querySelector("body");
+      if (body) {
+        body.classList.add("popup");
+      }
+
+      subscribeClick();
+      popupEl.value.setAttribute("data-show", "");
+
+      popperInstance.setOptions({
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [0, 4],
+            },
+          },
+          { name: "eventListeners", enabled: true },
+        ],
+      });
+
+      popperInstance.update();
+      visible.value = true;
+    }
+
+    function hide() {
+      const body = document.querySelector("body");
+      if (body) {
+        body.classList.remove("popup");
+      }
+
+      if (!popupEl.value || popupEl.value.getAttribute("data-show") === null)
+        return;
+      unsubscribeClick();
+      popupEl.value.removeAttribute("data-show");
+      popperInstance.setOptions({
+        modifiers: [{ name: "eventListeners", enabled: false }],
+      });
+      visible.value = false;
+    }
+
+    function onClickedToggle() {
+      if (disabled.value) return;
+
+      if (!popupEl.value || popupEl.value.getAttribute("data-show") !== null) {
+        hide();
+        return;
+      }
+      show();
+    }
+
+    function refreshScroll() {
+      if (listWrapperEl.value) {
+        gsap.to(listWrapperEl.value, { duration: 0.5, scrollTo: 0 });
+      }
+    }
+
+    function setupListWidth() {
+      nextTick(() => {
+        const lwidth = dropdownListEl.value?.getBoundingClientRect().width || 0;
+        const toggleWidth = toggleEl.value?.getBoundingClientRect().width || 0;
+        listWidth.value = Math.max(lwidth, toggleWidth);
+      });
+    }
+
+    watch(showDropdown, () => {
+      visible.value = showDropdown.value;
+    });
+    watch(
+      visible,
+      () => {
+        if (visible.value) {
+          show();
+        } else {
+          hide();
+        }
+        emit("update:showDropdown", visible.value);
+      },
+      { immediate: true }
+    );
+    watch(search, () => {
+      emit("update:search", search.value);
+    });
+
+    onMounted(() => {
+      if (toggleEl.value && popupEl.value) {
+        popperInstance = createPopper(toggleEl.value, popupEl.value, {
+          placement: placement.value as Placement,
+          modifiers: [{ name: "eventListeners", enabled: false }],
+        });
+      }
+
+      observer = new MutationObserver(() => {
+        refreshScroll();
+        setupListWidth();
+      });
+
+      if (dropdownListEl.value) {
+        observer.observe(dropdownListEl.value, {
+          attributes: false,
+          childList: true,
+          subtree: false,
+        });
+      }
+
+      setupListWidth();
+    });
+    onBeforeUnmount(() => {
+      const body = document.querySelector("body");
+      if (body) {
+        body.classList.remove("popup");
+      }
+
+      if (popperInstance) {
+        popperInstance.destroy();
+      }
+
+      if (observer) {
+        observer.disconnect();
+      }
+
+      popperInstance = null;
+      observer = null;
+    });
+
+    return {
+      toggleEl,
+      popupEl,
+      listWrapperEl,
+      dropdownListEl,
+      buttonEl,
+      visible,
+      search,
+      listWidth,
+      onClickedToggle,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.dropdown
+  @apply inline-block relative
+
+  &.active
+    .dropdown-toggle
+
+      .toggle-icon
+        @apply text-primary-hover rotate-180
+
+  &-toggle
+    @apply flex items-center s('p-1.75') border border-primary-light rounded bg-white space-x-2 text-base text-gray-2 whitespace-nowrap
+
+    .toggle-icon
+      @apply text-xs leading-none text-gray-2 transition-transform transform
+
+  &-menu
+    @apply z-50 flex flex-col max-h-48 border border-primary-light rounded bg-white shadow-md overflow-hidden invisible pointer-events-none
+
+    &[data-show]
+      @apply visible pointer-events-auto
+
+      .dropdown-list-wrapper
+        .dropdown-list
+          @apply relative
+
+    .dropdown-search
+      @apply flex-grow-0 flex-shrink-0 mb-1 p-1
+
+    .dropdown-list-wrapper
+      @apply flex-grow
+
+      .dropdown-list
+        @apply absolute
+</style>

package/components/SLDropdownItem.vue

@@ -0,0 +1,31 @@
+<template lang="pug">
+a(href="javascript:;", :class='{ active }').dropdown-item
+  slot {{ title }}
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: "SLDropdownItem",
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style lang="stylus">
+.dropdown-item
+  @apply block p-2 bg-white text-sm text-primary whitespace-nowrap s('hover:text-primary') s('hover:bg-bg-middle') s('focus:text-primary') s('focus:bg-bg-middle') s('active:text-primary') s('active:bg-bg-middle')
+
+  &.active
+    @apply text-primary bg-bg-middle
+</style>

package/components/SLElementWithTitle.vue

@@ -0,0 +1,181 @@
+<template lang="pug">
+.element-with-title(
+  @mouseenter="onMouseEnter"
+  @mouseleave="onMouseLeave"
+  @mousemove="onMouseMove"
+  ref="el"
+)
+  slot
+  .element-with-title-tooltip(
+    v-if="title !== '' || $slots.title"
+    :style="`max-width: ${maxWidth}px`"
+    ref="tooltipEl"
+  )
+    slot(name="title") {{ title }}
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import { createPopper } from "@popperjs/core";
+import type {
+  VirtualElement,
+  Placement,
+  Instance as PopperInstance,
+} from "@popperjs/core";
+
+export default defineComponent({
+  name: "SLElementWithTitle",
+  components: {},
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    placement: {
+      type: String as PropType<Placement>,
+      default: "bottom-start",
+    },
+    maxWidth: {
+      type: [Number, String],
+      default: "none",
+    },
+  },
+  setup(props) {
+    const { title, placement } = toRefs(props);
+
+    const el = shallowRef<HTMLElement | null>(null);
+    const tooltipEl = shallowRef<HTMLElement | null>(null);
+    const mouseX = ref(0);
+    const mouseY = ref(0);
+
+    let popperInstance: PopperInstance | null = null;
+
+    const virtualElement = computed(() => {
+      return {
+        getBoundingClientRect: () => {
+          return {
+            width: 0,
+            height: 0,
+            top: mouseY.value,
+            right: mouseX.value,
+            bottom: mouseY.value,
+            left: mouseX.value,
+          };
+        },
+      } as VirtualElement;
+    });
+
+    async function createTipPopper() {
+      await nextTick();
+      destroyPopper();
+      if (!virtualElement.value || !tooltipEl.value) return;
+
+      popperInstance = createPopper(virtualElement.value, tooltipEl.value, {
+        placement: placement.value,
+        strategy: "fixed",
+        modifiers: [{ name: "eventListeners", enabled: false }],
+      });
+    }
+
+    function destroyPopper() {
+      if (popperInstance) {
+        popperInstance.destroy();
+      }
+      popperInstance = null;
+    }
+
+    function show() {
+      if (!tooltipEl.value || !popperInstance) return;
+      const appWrapperEl = document.querySelector(".app-wrapper");
+
+      tooltipEl.value.setAttribute("data-show", "");
+      popperInstance.setOptions({
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: placement.value === "bottom-start" ? [-8, 18] : [0, 0],
+            },
+          },
+          {
+            name: "preventOverflow",
+            options: {
+              boundary: appWrapperEl,
+              padding: 16,
+            },
+          },
+          { name: "eventListeners", enabled: true },
+        ],
+      });
+      popperInstance.update();
+    }
+
+    function hide() {
+      if (
+        !tooltipEl.value ||
+        tooltipEl.value.getAttribute("data-show") === null ||
+        !popperInstance
+      )
+        return;
+      tooltipEl.value.removeAttribute("data-show");
+      popperInstance.setOptions({
+        modifiers: [{ name: "eventListeners", enabled: false }],
+      });
+    }
+
+    function onMouseEnter(e: MouseEvent) {
+      show();
+    }
+
+    function onMouseLeave(e: MouseEvent) {
+      hide();
+    }
+
+    function onMouseMove(e: MouseEvent) {
+      mouseX.value = e.clientX;
+      mouseY.value = e.clientY;
+
+      nextTick(() => {
+        if (popperInstance) {
+          popperInstance.update();
+        }
+      });
+    }
+
+    watch(title, () => {
+      if (title.value) {
+        createTipPopper();
+      } else {
+        destroyPopper();
+      }
+    });
+
+    onMounted(() => {
+      createTipPopper();
+    });
+
+    onBeforeUnmount(() => {
+      destroyPopper();
+    });
+
+    return {
+      el,
+      tooltipEl,
+      onMouseEnter,
+      onMouseLeave,
+      onMouseMove,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.element-with-title
+  @apply inline-flex
+
+  &-tooltip
+    @apply s('z-[10]') p-2 s('bg-backdrop/70') rounded text-xs text-white whitespace-pre shadow invisible pointer-events-none
+
+    &[data-show]
+      @apply visible
+</style>