@mptw/skylens-ui 1.0.0

package/components/SLAlertModal.vue

@@ -0,0 +1,99 @@
+<template lang="pug">
+SLModal(
+    :show="show"
+    :title="title"
+    size="xs"
+    :backdrop="true"
+    :closeOnBackdrop="false"
+    modalClass='alert-modal'
+    @update:show="onUpdatedShow"
+  )
+  slot
+    SLIcon(
+        v-if="color === 'primary'"
+        icon="check-circle"
+      ).text-secondary
+    SLIcon(
+        v-else
+        icon="exclamation-triangle"
+        :class="color === '' ? '' : `text-${color}-hover`"
+      )
+    p(v-html='message')
+  template(#footer)
+    SLButton(
+        color="primary"
+        size="lg"
+        :title="buttonTitle"
+        @click="onClickedConfirm"
+      )
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: "SLAlertModal",
+  components: {},
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    buttonTitle: {
+      type: String,
+      default: "確定",
+    },
+    color: {
+      type: String,
+      default: "secondary",
+      validator: (value: string) =>
+        ["", "primary", "secondary", "danger"].includes(value),
+    },
+    message: {
+      type: String,
+      default: "",
+    },
+  },
+  emits: ["update:show"],
+  setup(_, { emit }) {
+    function onClickedConfirm() {
+      emit("update:show", false);
+    }
+
+    function onUpdatedShow(value: boolean) {
+      emit("update:show", value);
+    }
+
+    return {
+      onClickedConfirm,
+      onUpdatedShow,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.alert-modal
+  @apply z-60
+
+  .modal-backdrop
+    @apply s('bg-white/40') backdrop-blur-5
+
+    &.show
+      @apply s('bg-white/40')
+
+  .modal-body
+    &-content
+      @apply text-base leading-6 text-gray-2 text-center space-y-4
+
+      .icon
+        @apply s('text-7.17xl')
+
+      p
+        @apply whitespace-pre-wrap
+
+  .modal-footer
+    @apply flex justify-center
+</style>

package/components/SLBreadcrumbs.vue

@@ -0,0 +1,42 @@
+<template lang="pug">
+.breadcrumbs
+  .breadcrumbs-container
+    template(v-for="item, i in items")
+      span.breadcrumb-divider(v-if="i > 0")  | 
+      span.breadcrumb-item {{ item }}
+  SLInfoTip(v-if="info !== ''" :info="info")
+  .breadcrumbs-notice(v-if="$slots.notice")
+    slot(name="notice")
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+
+export default defineComponent({
+  name: "SLBreadcrumbs",
+  components: {},
+  props: {
+    items: {
+      type: Array as PropType<Array<string>>,
+      default: () => [],
+    },
+    info: {
+      type: String,
+      default: "",
+    },
+  },
+  setup() {},
+});
+</script>
+
+<style lang="stylus">
+.breadcrumbs
+  @apply flex flex-wrap items-center justify-start text-lg text-primary font-bold
+
+  &-container
+    .breadcrumb-item:not(:last-child)
+      @apply text-base font-normal
+
+  &-notice
+    @apply inline-flex items-center
+</style>

package/components/SLButton.vue

@@ -0,0 +1,301 @@
+<template lang="pug">
+button(:type='type', :class='btnClass' :disabled="disabled")
+  .btn-content
+    slot
+      SLIcon(v-if='icon !== ""', :icon='icon')
+      span(v-if='title !== ""') {{ title }}
+      SLIcon(v-if='postIcon !== ""', :icon='postIcon')
+  .btn-loading
+    .loading
+        div
+        div
+        div
+        div
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+
+export default defineComponent({
+  name: "SLButton",
+  components: {},
+  props: {
+    size: {
+      type: String,
+      default: "",
+      validator: (val: string) => ["", "lg", "md", "sm", "xs"].includes(val),
+    },
+    color: {
+      type: String,
+      default: "",
+      validator: (val: string) =>
+        [
+          "",
+          "white",
+          "primary",
+          "primary-hover",
+          "secondary",
+          "third",
+          "danger",
+          "cancel",
+          "gray-2",
+          "secondary-new",
+          "blue-1",
+          "insight-title-line",
+        ].includes(val),
+    },
+    variant: {
+      type: String,
+      default: "",
+      validator: (val: string) => ["", "outline", "icon"].includes(val),
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    icon: {
+      type: String,
+      default: "",
+    },
+    postIcon: {
+      type: String,
+      default: "",
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    type: {
+      type: String as PropType<"submit" | "reset" | "button">,
+      default: "button",
+      validator: (val: string) => ["submit", "reset", "button"].includes(val),
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+    const { size, color, variant, disabled, loading } = toRefs(props);
+
+    const btnClass = computed(() => {
+      const btnClass = ["btn"];
+      if (size.value !== "") {
+        btnClass.push(`btn-${size.value}`);
+      }
+      if (color.value !== "") {
+        btnClass.push(`btn-${color.value}`);
+      }
+      if (variant.value !== "") {
+        btnClass.push(`btn-${variant.value}`);
+      }
+      if (disabled.value) {
+        btnClass.push("btn-disabled");
+      }
+      if (loading.value) {
+        btnClass.push("loading");
+      }
+
+      return btnClass.join(" ");
+    });
+
+    return {
+      btnClass,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.btn
+  @apply relative inline-flex items-center justify-center s("p-1.75") border border-transparent rounded bg-transparent text-base leading-normal s("focus:outline-none")
+
+  &-lg
+    @apply s("px-7.75")
+
+  &-md
+    @apply s("px-3.75")
+
+  &-sm
+    @apply s("py-0.75") s("px-1.75")
+
+    .btn-content
+      @apply space-x-1
+
+  &-xs
+    @apply s("py-0.75") s("px-1.75") text-xs
+
+    .btn-content
+      @apply space-x-1
+
+  &-white
+    @apply bg-white border-white text-gray-2 s("hover:bg-white") s("hover:border-white")
+
+    &.btn-outline
+      @apply text-gray-2 s("hover:text-gray-2")
+
+    .btn-loading
+      .loading
+        div
+          border-color white transparent transparent transparent
+
+  &-primary
+    @apply bg-primary border-primary text-gray s("hover:bg-primary-hover") s("hover:border-primary-hover")
+
+    &.btn-outline
+      @apply text-primary s("hover:text-primary-hover")
+
+    .btn-loading
+      .loading
+        div
+          border-color theme('colors.primary.DEFAULT') transparent transparent transparent
+
+  &-primary-hover
+    @apply bg-primary-hover border-primary-hover text-gray s("hover:bg-primary-lighter") s("hover:border-primary-lighter")
+
+    &.btn-outline
+      @apply text-primary-hover s("hover:text-primary-lighter")
+
+    .btn-loading
+      .loading
+        div
+          border-color theme('colors.primary.hover') transparent transparent transparent
+
+  &-secondary
+    @apply bg-secondary border-secondary text-gray s("hover:bg-secondary-hover") s("hover:text-white") s("hover:border-secondary-hover")
+
+    &.btn-outline
+      @apply text-secondary s("hover:text-secondary-hover")
+
+    .btn-loading
+      .loading
+        div
+          border-color theme('colors.secondary.hover') transparent transparent transparent
+
+  &-third
+    @apply bg-third-7 border-third-7 text-white s("hover:bg-third-hover") s("hover:text-white") s("hover:border-third-hover")
+
+    &.btn-outline
+      @apply text-secondary s("hover:text-secondary-hover")
+
+    .btn-loading
+      .loading
+        div
+          border-color theme('colors.third.hover') transparent transparent transparent
+
+  &-danger
+    @apply bg-danger border-danger text-white s("hover:bg-danger-hover") s("hover:border-danger-hover")
+
+    &.btn-outline
+      @apply text-danger s("hover:text-danger-hover")
+
+    .btn-loading
+      .loading
+        div
+          border-color theme('colors.danger.hover') transparent transparent transparent
+
+  &-cancel
+    @apply bg-cancel border-cancel text-gray-2 s("hover:bg-cancel-hover") s("hover:border-cancel-hover")
+
+    &.btn-outline
+      @apply text-cancel s("hover:text-cancel-hover")
+
+    .btn-loading
+      .loading
+        div
+          border-color theme('colors.cancel.hover') transparent transparent transparent
+
+  &-gray-2
+    @apply bg-gray-2 border-gray-2 text-white s("hover:bg-gray-3") s("hover:border-gray-3")
+
+    &.btn-outline
+      @apply text-gray-2 s("hover:text-gray-3")
+
+    .btn-loading
+      .loading
+        div
+          border-color theme('colors.gray.3') transparent transparent transparent
+
+  &-secondary-new
+    @apply bg-secondary-new border-secondary-new text-white s("hover:bg-secondary-new") s("hover:border-secondary-new")
+
+    &.btn-outline
+      @apply text-secondary-new s("hover:text-secondary-new")
+
+    .btn-loading
+      .loading
+        div
+          border-color theme('colors.secondary.new') transparent transparent transparent
+
+  &-blue-1
+    @apply bg-secondary-new border-secondary-new text-white s("hover:bg-blue-1") s("hover:border-blue-1")
+
+    &.btn-outline
+      @apply text-blue-1 s("hover:text-blue-1")
+
+    .btn-loading
+      .loading
+        div
+          border-color theme('colors.blue.1') transparent transparent transparent
+
+  &-insight-title-line
+    @apply bg-insight-title-line border-insight-title-line text-white s("hover:bg-insight-title-line") s("hover:border-insight-title-line")
+
+    &.btn-outline
+      @apply text-insight-title s("hover:text-insight-title")
+
+    .btn-loading
+      .loading
+        div
+          border-color theme('colors.blue.1') transparent transparent transparent
+
+  &-outline
+    @apply bg-transparent border s("hover:bg-white")
+
+  &-disabled
+    @apply bg-cancel border-cancel text-white cursor-default s("hover:bg-cancel") s("hover:border-cancel") s("hover:text-white")
+
+    &.btn-outline
+      @apply bg-cancel border-cancel text-white s("hover:bg-cancel") s("hover:border-cancel") s("hover:text-white")
+
+    &.btn-icon
+      @apply bg-transparent border-transparent text-cancel  s("hover:bg-transparent") s("hover:border-transparent") s("hover:text-cancel")
+
+  &.loading
+    @apply bg-line border-line cursor-default
+
+    .btn-content
+      @apply opacity-0
+
+    .btn-loading
+      @apply block
+
+  .btn-content
+    @apply inline-flex items-center space-x-2
+
+  .btn-loading
+    @apply absolute s('top-1/2') s('left-1/2') w-4 h-4 s('-translate-x-1/2') s('-translate-y-1/2') pointer-events-none hidden
+
+    .loading
+      @apply relative inline-block w-4 h-4
+
+      div
+        @apply absolute block w-4 h-4 border-2 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>

package/components/SLCalendarButton.vue

@@ -0,0 +1,259 @@
+<template lang="pug">
+.calendar-button(ref="button")
+  a(
+      href="javascript:;"
+      @click="onClickedToggle"
+      ref="toggle"
+    ).toggle-button
+    .date-range
+      SLIcon(icon="calendar")
+      span.divider
+      span.date-range {{ dateRange1 }}
+      span.range-days(v-if='dateRange1Days') {{ dateRange1Days }} 天
+    .compare-date-range(v-if="dateRange2 && showCompareSwitch")
+      span v.s.
+      span {{ dateRange2 }}
+  ClientOnly
+    Teleport(to="body")
+      SLCalendarPopup(
+          :data-source-type='dataSourceType'
+          :show-quicks="showQuicks"
+          :showCompareSwitch="showCompareSwitch"
+          :min-date="minDate"
+          :maxDate="maxDate"
+          :maxDays="maxDays"
+          :modelValue="modelValue"
+          @compare:change="onCompareChanged"
+          @update:modelValue="onInputed"
+          ref="popup"
+        )
+</template>
+
+<script lang="ts">
+import { SLCalendarPopup } from "#components";
+import type { PropType } from "vue";
+import { fromEvent } from "rxjs";
+import { differenceInCalendarDays, subDays } from "date-fns";
+import { createPopper } from "@popperjs/core";
+import type { Placement } from "@popperjs/core";
+import DateRange from "~ui/models/DateRange";
+import type IDateRange from "~ui/interface/IDateRange";
+import { OnlineSourceType } from "~ui/interface/IWeb";
+
+type SLCalendarPopupType = InstanceType<typeof SLCalendarPopup>;
+
+export default defineComponent({
+  name: "SLCalendarButton",
+  components: {},
+  props: {
+    dataSourceType: {
+      type: Number as PropType<OnlineSourceType>,
+      default: OnlineSourceType.Mobile,
+    },
+    showQuicks: {
+      type: Boolean,
+      default: true,
+    },
+    showCompareSwitch: {
+      type: Boolean,
+      default: true,
+    },
+    minDate: {
+      type: Date,
+      default: () => null,
+    },
+    maxDate: {
+      type: Date,
+      default: () => subDays(Date.now(), 1),
+    },
+    maxDays: {
+      type: Number,
+      default: 365,
+    },
+    modelValue: {
+      type: Array as PropType<Array<IDateRange | null>>,
+      default: () => [
+        { start: new Date(2020, 8, 11), end: new Date(2020, 8, 17) },
+      ],
+    },
+    placement: {
+      type: String,
+      default: "bottom-start",
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { modelValue, placement } = toRefs(props);
+
+    const button = shallowRef<HTMLElement | null>(null);
+    const toggle = shallowRef<HTMLElement | null>(null);
+    const popup = shallowRef<SLCalendarPopupType | null>(null);
+
+    let popperInstance: any = null;
+    let clickSubscriber: any = null;
+
+    const dateRange1 = computed(() => {
+      const [dateRange1] = modelValue.value;
+      if (!dateRange1) {
+        return null;
+      }
+      return new DateRange(dateRange1.start, dateRange1.end);
+    });
+    const dateRange2 = computed(() => {
+      const [, dateRange2] = modelValue.value;
+      if (!dateRange2) {
+        return null;
+      }
+      return new DateRange(dateRange2.start, dateRange2.end);
+    });
+    const dateRange1Days = computed(() => {
+      if (!dateRange1.value || !dateRange1.value.start || !dateRange1.value.end)
+        return 0;
+
+      return (
+        differenceInCalendarDays(dateRange1.value.end, dateRange1.value.start) +
+        1
+      );
+    });
+
+    function subscribeClick() {
+      clickSubscriber = fromEvent(window, "click").subscribe((e) => {
+        const { target } = e;
+        if (
+          button.value &&
+          !button.value.contains(target as Node) &&
+          popup.value &&
+          !popup.value.$el.contains(target as Node)
+        ) {
+          hide();
+        }
+      });
+    }
+
+    function unsubscribeClick() {
+      if (clickSubscriber) {
+        clickSubscriber.unsubscribe();
+      }
+      clickSubscriber = null;
+    }
+
+    function show() {
+      if (!popup.value) return;
+
+      subscribeClick();
+      popup.value.$el.setAttribute("data-show", "");
+
+      popperInstance.setOptions({
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [0, 8],
+            },
+          },
+          { name: "eventListeners", enabled: true },
+        ],
+      });
+
+      popperInstance.update();
+    }
+
+    function hide() {
+      if (!popup.value || popup.value.$el.getAttribute("data-show") === null)
+        return;
+      unsubscribeClick();
+      popup.value.$el.removeAttribute("data-show");
+      popperInstance.setOptions({
+        modifiers: [{ name: "eventListeners", enabled: false }],
+      });
+      nextTick(() => {
+        if (popup.value) {
+          popup.value.reset();
+        }
+      });
+    }
+
+    function onClickedToggle() {
+      if (!popup.value || popup.value.$el.getAttribute("data-show") !== null) {
+        hide();
+        return;
+      }
+      show();
+    }
+
+    function onInputed(value: Array<IDateRange>) {
+      emit("update:modelValue", value);
+      hide();
+    }
+
+    function onCompareChanged() {
+      popperInstance.update();
+    }
+
+    onMounted(() => {
+      nextTick(() => {
+        if (button.value && popup.value && popup.value.$el) {
+          popperInstance = createPopper(
+            button.value,
+            popup.value.$el as HTMLElement,
+            {
+              placement: placement.value as Placement,
+              modifiers: [{ name: "eventListeners", enabled: false }],
+            }
+          );
+        }
+      });
+    });
+
+    onBeforeUnmount(() => {
+      if (popperInstance) {
+        popperInstance.destroy();
+      }
+      popperInstance = null;
+    });
+
+    return {
+      button,
+      toggle,
+      popup,
+      dateRange1,
+      dateRange2,
+      dateRange1Days,
+      onClickedToggle,
+      onInputed,
+      onCompareChanged,
+      hide,
+    };
+  },
+});
+</script>
+
+<style lang="stylus" scoped>
+.calendar-button
+  @apply inline-block
+
+  .toggle-button
+    @apply inline-flex flex-col justify-center s('px-2.75')  space-y-1 border s('border-white/20') rounded bg-white text-sm leading-normal text-gray-2
+    height 58px
+
+    .date-range
+      @apply flex items-center
+
+      .icon
+        @apply flex-grow-0 flex-shrink-0 text-base text-primary leading-none
+
+      .divider
+        @apply flex-grow-0 flex-shrink-0 block w-px s('h-4.75') ml-2 s('mr-1.75') bg-primary
+
+      .range-days
+        @apply block s('ml-0.5') px-1 s('py-0.5') bg-bg-middle rounded text-xs text-primary
+
+    .compare-date-range
+      @apply pl-1 space-x-2 text-sm text-gray-3
+
+.calendar-popup
+  @apply z-60 absolute invisible pointer-events-none
+
+  &[data-show]
+    @apply visible pointer-events-auto
+</style>