@mptw/skylens-ui 1.0.0

package/components/SLInfoTip.vue

@@ -0,0 +1,221 @@
+<template lang="pug">
+.info-tip(:class='{ "info-tip--xs": size === "xs" }')
+  a(
+    href="javascript:;"
+    @mouseenter="onInfoMouseEntered"
+    @mouseleave="onInfoMouseLeaved"
+    ref="toggleEl"
+  ).info-tip-toggle
+    slot(name='toggle')
+      SLIcon(icon="info-circle")
+    .info(
+      :class="{ pinned: isPinned }"
+      ref="popupEl"
+    )
+      .info-content(
+        :style="{ 'max-width': `${maxWidth}px`, 'min-width': `${minWidth}px` }"
+      )
+        slot {{ info }}
+        a.pin-toggle(
+          v-if='pinnable'
+          href="javascript:;"
+          @click="togglePin"
+        )
+          SLIcon(icon="pin-line")
+</template>
+
+<script lang="ts">
+import { fromEvent, interval } from "rxjs";
+import { debounce, startWith } from "rxjs/operators";
+import { createPopper } from "@popperjs/core";
+import type { Placement } from "@popperjs/core";
+
+export default defineComponent({
+  name: "SLInfoTip",
+  components: {},
+  props: {
+    info: {
+      type: String,
+      default: "",
+    },
+    placement: {
+      type: String as PropType<Placement>,
+      default: "right-start",
+    },
+    size: {
+      type: String as PropType<"" | "xs">,
+      default: "",
+    },
+    pinnable: {
+      type: Boolean,
+      default: true,
+    },
+    minWidth: {
+      type: Number,
+      default: 0,
+    },
+  },
+  emits: ["infoTip:mouseenter"],
+  setup(props, { slots, emit }) {
+    const { info, placement } = toRefs(props);
+
+    const toggleEl = shallowRef<HTMLLIElement | null>(null);
+    const popupEl = shallowRef<HTMLLIElement | null>(null);
+    const maxWidth = ref(480);
+    const isPinned = ref(false);
+
+    let popperInstance: any = null;
+    let resizeSubscriber: any = null;
+
+    function subscribeResize() {
+      resizeSubscriber = fromEvent(window, "resize")
+        .pipe(debounce(() => interval(500)))
+        .pipe(startWith(0))
+        .subscribe(() => {
+          const toggleRect = toggleEl.value?.getBoundingClientRect() || null;
+          const windowWidth = window.innerWidth;
+
+          if (!toggleRect) return;
+
+          maxWidth.value = Math.min(
+            365,
+            windowWidth - toggleRect.left - toggleRect.width - 11
+          );
+        });
+    }
+
+    function unsubscribeResize() {
+      if (resizeSubscriber) {
+        resizeSubscriber.unsubscribe();
+      }
+      resizeSubscriber = null;
+    }
+
+    function show() {
+      if (!popupEl.value) return;
+
+      popupEl.value.setAttribute("data-show", "");
+
+      popperInstance.setOptions({
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [0, 0],
+            },
+          },
+          { name: "eventListeners", enabled: true },
+        ],
+      });
+
+      popperInstance.update();
+    }
+
+    function hide() {
+      if (!popupEl.value || popupEl.value.getAttribute("data-show") === null)
+        return;
+      popupEl.value.removeAttribute("data-show");
+      popperInstance.setOptions({
+        modifiers: [{ name: "eventListeners", enabled: false }],
+      });
+    }
+
+    function onInfoMouseEntered() {
+      emit("infoTip:mouseenter");
+      show();
+    }
+
+    function onInfoMouseLeaved() {
+      hide();
+    }
+
+    function togglePin() {
+      isPinned.value = !isPinned.value;
+    }
+
+    onMounted(() => {
+      if (info.value === "" && !slots.default) {
+        return;
+      }
+
+      if (toggleEl.value && popupEl.value) {
+        popperInstance = createPopper(toggleEl.value, popupEl.value, {
+          placement: placement.value,
+          modifiers: [{ name: "eventListeners", enabled: false }],
+        });
+      }
+
+      subscribeResize();
+    });
+
+    onBeforeUnmount(() => {
+      if (popperInstance) {
+        popperInstance.destroy();
+      }
+      popperInstance = null;
+
+      unsubscribeResize();
+    });
+
+    return {
+      toggleEl,
+      popupEl,
+      maxWidth,
+      isPinned,
+      onInfoMouseEntered,
+      onInfoMouseLeaved,
+      togglePin,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.info-tip
+  @apply inline-flex ml-2 text-base s('leading-4.5') text-primary s('hover:text-primary-hover') cursor-default
+
+  &--xs
+    @apply ml-1 text-xs
+
+  .info-tip-toggle
+    @apply inline-flex cursor-default
+
+  .info
+    @apply z-10 absolute invisible
+
+    &[data-popper-placement^='bottom']
+      @apply pt-1
+
+    &[data-popper-placement^='right']
+      @apply pl-3
+
+    &[data-show], &.pinned
+      @apply visible
+
+    &.pinned
+      .info-content
+        .pin-toggle
+          &:hover
+            .icon
+              &:before
+                content '\e943'
+
+          .icon
+            &:before
+              content '\e943'
+
+    &-content
+      @apply relative flex py-5 pl-4 pr-6 border s('border-border/50') rounded-lg bg-white text-sm text-gray-2 font-normal shadow-popup-sm
+
+      .pin-toggle
+        @apply absolute top-0 right-0 mt-2 mr-2 text-base text-primary-hover
+
+        &:hover
+          .icon
+            &:before
+              content '\e967'
+
+        .icon
+          &:before
+            content '\e980'
+</style>

package/components/SLInsightSitePage.vue

@@ -0,0 +1,27 @@
+<template lang="pug">
+.insight-site-page
+  .insight-site-page-header(v-if="$slots['site-page-header']")
+    slot(name="site-page-header")
+  .insight-site-page-content
+    slot
+</template>
+
+<script>
+export default {
+  name: "SLInsightSitePage",
+  props: {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="stylus">
+.insight-site-page
+  @apply flex-grow flex flex-col
+
+  &-header
+    @apply s('-mx-4')
+
+  &-content
+    @apply flex flex-col flex-grow w-full p-4 rounded bg-bg-middle
+</style>

package/components/SLLegend.vue

@@ -0,0 +1,76 @@
+<template lang="pug">
+.chart-legend
+  a.chart-legend-item(
+    v-for='(item, index) in items',
+    href='javascript:;',
+    :class='{ unactive: !item.active }',
+    :key='item.key',
+    @click='onClickedItem(item, index, $event)',
+    @mouseenter='onMouseEnterItem(item, index, $event)',
+    @mouseleave='onMouseLeaveItem(item, index, $event)'
+  )
+    SLIcon.item-icon(
+      v-if='item.icon',
+      :icon='item.icon',
+      :style='{ color: item.active ? item.color : "#E0E0E0" }',
+    )
+    span.item-marker(
+      v-else
+      :style='{ background: item.active ? item.color : "#E0E0E0" }'
+    )
+    span {{ item.name }}
+  slot(name="custom-item")
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import type ILegendItem from "~ui/interface/ILegendItem";
+
+export default defineComponent({
+  name: "SLLegend",
+  components: {},
+  props: {
+    items: {
+      type: Array as PropType<Array<ILegendItem>>,
+      default: () => [],
+    },
+  },
+  emits: ["toggle", "enter", "leave"],
+  setup(_, { emit }) {
+    function onClickedItem(item: ILegendItem, index: number, e: Event) {
+      emit("toggle", item, index, e);
+    }
+
+    function onMouseEnterItem(item: ILegendItem, index: number, e: Event) {
+      emit("enter", item, index, e);
+    }
+
+    function onMouseLeaveItem(item: ILegendItem, index: number, e: Event) {
+      emit("leave", item, index, e);
+    }
+
+    return {
+      onClickedItem,
+      onMouseEnterItem,
+      onMouseLeaveItem,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.chart-legend
+  @apply text-center
+
+  &-item
+    @apply inline-flex items-center mx-2 text-base text-gray-2
+
+    &.unactive
+      @apply text-cancel
+
+    .item-icon
+      @apply mr-1
+
+    .item-marker
+      @apply inline-block w-3 h-3 mr-1 rounded-full
+</style>

package/components/SLLinearProgressBar.vue

@@ -0,0 +1,35 @@
+<template lang="pug">
+.linear-progress-bar
+  .linear-progress-bar-value
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: "SLLinearProgressBar",
+});
+</script>
+
+<style lang="stylus" scoped>
+.linear-progress-bar
+  @apply w-full h-2 overflow-hidden
+  background-color #D3D3D3
+  border-radius 1px
+
+  &-value
+    @apply w-full h-full
+    background linear-gradient(270deg, rgba(211, 211, 211, 0.62) 0.08%, #E1E1E1 46.69%, rgba(211, 211, 211, 0.62) 100%)
+    animation indeterminateAnimation 1s infinite linear
+    transform-origin 0% 50%
+
+@keyframes indeterminateAnimation {
+  0% {
+    transform  translateX(0) scaleX(0)
+  }
+  40% {
+    transform  translateX(0) scaleX(0.4)
+  }
+  100% {
+    transform  translateX(100%) scaleX(0.5)
+  }
+}
+</style>

package/components/SLLink.vue

@@ -0,0 +1,162 @@
+<template lang="pug">
+a.sl-link(
+  href="javascript:;"
+  @mouseenter="onMouseEnter"
+  @mouseleave="onMouseLeave"
+  @mousemove="onMouseMove"
+)
+  slot
+  .sl-link-tooltip(
+    v-if="title !== ''"
+    ref="tooltipEl"
+  ) {{ 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: "SLLink",
+  components: {},
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    placement: {
+      type: String as PropType<Placement>,
+      default: "bottom",
+    },
+  },
+  setup(props) {
+    const { placement } = toRefs(props);
+
+    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;
+    });
+
+    function createTipPopper() {
+      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;
+      tooltipEl.value.setAttribute("data-show", "");
+      popperInstance.setOptions({
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: placement.value === "bottom" ? [0, 18] : [0, 0],
+            },
+          },
+          // {
+          //   name: 'flip',
+          //   options: {
+          //     boundary: boundaryTarget,
+          //   },
+          // },
+          { 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();
+        }
+      });
+    }
+
+    onMounted(() => {
+      createTipPopper();
+    });
+
+    onBeforeUnmount(() => {
+      destroyPopper();
+    });
+
+    return {
+      tooltipEl,
+      onMouseEnter,
+      onMouseLeave,
+      onMouseMove,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.sl-link
+  *
+    @apply pointer-events-none
+
+  &-tooltip
+    @apply p-1 bg-gray-2 text-xs text-white whitespace-nowrap shadow invisible
+
+    &[data-show]
+      @apply visible
+</style>

package/components/SLLoading.vue

@@ -0,0 +1,127 @@
+<template lang="pug">
+.loading-modal(:style="{ position: 'absolute', top: containerCoords.top, right: containerCoords.right, bottom: containerCoords.bottom, left: containerCoords.left }" :class="modalClass" ref='el')
+  div(:style="{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }")
+    .loading
+      div
+      div
+      div
+      div
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+
+export default defineComponent({
+  name: "SLLoading",
+  components: {},
+  props: {
+    boundaries: {
+      type: Array as PropType<
+        Array<{
+          sides: ("top" | "right" | "bottom" | "left")[];
+          query: string;
+        }>
+      >,
+      default: () => [],
+    },
+    color: {
+      type: String,
+      default: "primary",
+      validator: (value: string) => ["primary", "secondary"].includes(value),
+    },
+    bgAlpha: {
+      type: Number,
+      default: 0.2,
+    },
+  },
+  setup(props) {
+    const { boundaries, color } = toRefs(props);
+
+    const el = shallowRef<HTMLElement | null>(null);
+    const containerCoords = reactive({
+      top: "0px",
+      bottom: "0px",
+      left: "0px",
+      right: "0px",
+    });
+    const parentCoords = ref<DOMRect | null>(null);
+
+    const modalClass = computed(() => `loading-modal-${color.value}`);
+
+    function setOffsets() {
+      const parent = el.value?.parentElement || null;
+      if (!parent) return;
+
+      parentCoords.value = parent.getBoundingClientRect();
+      boundaries.value.forEach(({ sides, query }) => {
+        const element = parent.querySelector(query);
+        if (!element || !sides) {
+          return;
+        }
+        const coords = element.getBoundingClientRect();
+        sides.forEach((side) => {
+          if (!parentCoords.value) return;
+
+          const sideMargin = Math.abs(coords[side] - parentCoords.value[side]);
+          containerCoords[side] = sideMargin + "px";
+        });
+      });
+    }
+
+    onMounted(() => {
+      if (boundaries.value) {
+        setOffsets();
+      }
+    });
+
+    return {
+      el,
+      containerCoords,
+      parentCoords,
+      modalClass,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.loading-modal
+  @apply z-10
+
+  &-primary
+    @apply s('bg-primary-lighter/20')
+
+    .loading
+      div
+        border-color theme('colors.primary.DEFAULT') transparent transparent transparent
+
+  &-secondary
+    @apply s('bg-secondary/20')
+
+    .loading
+      div
+        border-color theme('colors.secondary.DEFAULT') transparent transparent transparent
+
+  .loading
+    @apply relative inline-block w-12 h-12
+
+    div
+      @apply absolute block w-8 h-8 m-2 border-4 rounded-full
+      animation loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite
+
+      &:nth-child(1)
+        animation-delay -0.45s
+
+      &:nth-child(2)
+        animation-delay -0.3s
+
+      &:nth-child(3)
+        animation-delay -0.15s
+
+@keyframes loading
+  0%
+    transform rotate(0deg)
+
+  100%
+    transform rotate(360deg)
+</style>