@mptw/skylens-ui 1.0.0

package/components/SLCard.vue

@@ -0,0 +1,118 @@
+<template lang="pug">
+.card
+  .card-header(
+    v-if='title !== "" || $slots.header || $slots.title || $slots["title-container"] || desc !== "" || $slots.desc || $slots["header-left"] || $slots["header-right"]'
+  )
+    slot(name='header')
+      .header-left
+        slot(name='header-left')
+          .card-title(v-if='title !== "" || $slots.title || $slots["title-container"]')
+            .card-title-container
+              slot(name="title-container")
+                slot(name="title") {{ title }}
+                SLIcon.title-icon(v-if='titleIcon !== ""', :icon='titleIcon')
+                SLInfoTip(
+                  v-if='info !== "" || !!$slots.info', :info='info'
+                  data-skip-download
+                )
+                  slot(name="info")
+            .card-title-border
+        .inline-info(v-if='inlineInfo !== ""') {{ inlineInfo }}
+      .header-right
+        slot(name='header-right')
+          .card-desc(v-if='desc !== "" || $slots.desc')
+            slot(name='desc') {{ desc }}
+  .card-body
+    slot
+  .card-footer(v-if="$slots.footer")
+    slot(name='footer')
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: "SLCard",
+  components: {},
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    titleIcon: {
+      type: String,
+      default: "",
+    },
+    info: {
+      type: String,
+      default: "",
+    },
+    inlineInfo: {
+      type: String,
+      default: "",
+    },
+    desc: {
+      type: String,
+      default: "",
+    },
+  },
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style lang="stylus">
+.tabs
+  .tabs
+    .card
+      @apply border-0 rounded-none shadow-none
+
+  .card
+    @apply rounded-lg border-primary-lighter shadow-md
+
+    .card
+      @apply border-0 rounded-none shadow-none
+
+.card
+  @apply p-4 border border-border rounded bg-white shadow
+
+  .card-header
+    @apply flex justify-between mb-4
+
+    .card-title
+      @apply inline-flex flex-col
+
+      &-container
+        @apply inline-flex items-center mb-2 text-lg text-primary
+
+        .title-icon
+          @apply ml-2
+
+      &-border
+        @apply s('h-0.5') rounded-full bg-secondary
+
+    .card-desc
+      @apply text-base text-gray-2
+
+      .date-range
+        @apply ml-2 text-sm text-gray-3
+
+    .inline-info
+      @apply mt-2 text-sm text-gray-3
+
+  .card-body
+    @apply relative
+
+  .card-footer
+    @apply mt-4 pb-2 border-b s('border-primary-lighter/30')
+
+  .card
+    @apply border-primary-lighter rounded-lg shadow-md
+
+    .card-header
+      .card-title
+        &-container
+          @apply mb-0 text-base text-gray-2
+
+        &-border
+          @apply hidden
+</style>

package/components/SLChart.vue

@@ -0,0 +1,181 @@
+<template lang="pug">
+.chart
+  ECharts.vchart(
+    :loading="loading"
+    :loading-options="loadingOptions"
+    :option="formatedOption"
+    :update-options="{ notMerge: true }"
+    :autoresize="true"
+    @highlight="onHighlighted"
+    @click="onClicked"
+    @mouseover="onMouseOvered"
+    @mouseout="onMouseOuted"
+    @mousemove="onMouseMoved"
+    ref="chartComp"
+  )
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import ECharts from "vue-echarts";
+import { use } from "echarts/core";
+import {
+  LineChart,
+  BarChart,
+  PieChart,
+  ScatterChart,
+  HeatmapChart,
+  SankeyChart,
+  CustomChart,
+} from "echarts/charts";
+import "echarts-wordcloud";
+import {
+  GridComponent,
+  LegendComponent,
+  TooltipComponent,
+  VisualMapComponent,
+  VisualMapContinuousComponent,
+  PolarComponent,
+  GraphicComponent,
+  MarkLineComponent,
+} from "echarts/components";
+import { CanvasRenderer } from "echarts/renderers";
+import type { ECBasicOption } from "echarts/types/dist/shared";
+
+use([
+  LineChart,
+  BarChart,
+  PieChart,
+  ScatterChart,
+  HeatmapChart,
+  SankeyChart,
+  CustomChart,
+  GridComponent,
+  LegendComponent,
+  TooltipComponent,
+  VisualMapComponent,
+  VisualMapContinuousComponent,
+  PolarComponent,
+  GraphicComponent,
+  MarkLineComponent,
+  CanvasRenderer,
+]);
+
+const DefaultGrid = {
+  top: 14,
+  right: 0,
+  bottom: 0,
+  left: 30,
+  containLabel: true,
+};
+
+type EChartsType = InstanceType<typeof ECharts>;
+
+export default defineComponent({
+  name: "SLChart",
+  components: {
+    ECharts,
+  },
+  props: {
+    option: {
+      type: Object as PropType<ECBasicOption | null>,
+      default: null,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["click", "highlight", "mouseover", "mouseout", "mousemove"],
+  setup(props, { emit }) {
+    const { option } = toRefs(props);
+
+    const chartComp = shallowRef<EChartsType | null>(null);
+
+    const loadingOptions = computed(() => ({
+      color: "#5A5C85",
+    }));
+    const formatedOption = computed(() => {
+      return {
+        xAxis: {
+          axisLine: {
+            lineStyle: {
+              color: "#828282",
+            },
+          },
+        },
+        yAxis: {
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#828282",
+            },
+          },
+          axisTick: {
+            show: true,
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#E5E6F4",
+              opacity: 0.5,
+            },
+          },
+        },
+        tooltip: {
+          appendToBody: true,
+          padding: 16,
+          textStyle: {
+            color: "#4F4F4F",
+            fontSize: 16,
+            lineHeight: 21,
+          },
+        },
+        grid: DefaultGrid,
+        ...(option.value || {}),
+      };
+    });
+
+    function onClicked(e: any) {
+      emit("click", e);
+    }
+
+    function onHighlighted(e: any) {
+      emit("highlight", e);
+    }
+
+    function onMouseOvered(e: any) {
+      emit("mouseover", e);
+    }
+
+    function onMouseOuted(e: any) {
+      emit("mouseout", e);
+    }
+
+    function onMouseMoved(e: any) {
+      emit("mousemove", e);
+    }
+
+    function resize() {
+      if (!chartComp.value) return;
+      chartComp.value.resize();
+    }
+
+    return {
+      chartComp,
+      loadingOptions,
+      formatedOption,
+      onClicked,
+      onHighlighted,
+      onMouseOvered,
+      onMouseOuted,
+      onMouseMoved,
+      resize,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.chart
+  @apply flex w-full h-52 min-h-52 overflow-hidden
+</style>

package/components/SLCheckbox.vue

@@ -0,0 +1,179 @@
+<template lang="pug">
+.checkbox(:class='checkboxClass')
+  input(
+    type='checkbox',
+    :id='uid',
+    :checked='isChecked',
+    :value='value',
+    :disabled='disabled',
+    @change='onChanged'
+  )
+  label(:for='uid', :class='{ "is-check-some": isCheckSome }')
+    SLIcon.icon-square(:icon='falseIcon')
+    SLIcon.icon-check-square(:icon='trueIcon')
+    SLIcon.icon-minus-square(icon='minus-square')
+    slot
+      span(v-if='label !== ""') {{ label }}
+</template>
+
+<script lang="ts">
+import { isEqual } from "lodash-es";
+import { getUID } from "~ui/utils";
+
+export default defineComponent({
+  name: "SLCheckbox",
+  components: {},
+  props: {
+    label: {
+      type: String,
+      default: "",
+    },
+    value: {
+      type: [Number, String, Boolean, Object],
+      default: true,
+    },
+    modelValue: {
+      type: [Number, String, Boolean, Array],
+      default: false,
+    },
+    trueValue: {
+      type: [Number, String, Boolean],
+      default: true,
+    },
+    falseValue: {
+      type: [Number, String, Boolean],
+      default: false,
+    },
+    trueIcon: {
+      type: String,
+      default: "check-square",
+    },
+    falseIcon: {
+      type: String,
+      default: "square",
+    },
+    isCheckSome: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      default: "",
+      validator: (value: string) => ["", "sm"].includes(value),
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { size, disabled, modelValue, trueValue, falseValue, value } =
+      toRefs(props);
+    const uid = ref<string | undefined>(undefined);
+
+    const checkboxClass = computed(() => {
+      if (size.value === "") return "";
+
+      return `checkbox-${size.value}`;
+    });
+    const isChecked = computed(() => {
+      if (Array.isArray(modelValue.value)) {
+        let found = false;
+        modelValue.value.forEach((v) => {
+          if (isEqual(v, value.value)) {
+            found = true;
+          }
+        });
+        return found;
+      }
+      return modelValue.value === trueValue.value;
+    });
+
+    function onChanged(e: Event) {
+      if (disabled.value) {
+        return;
+      }
+
+      const isChecked = (e.target as HTMLInputElement).checked;
+
+      if (Array.isArray(modelValue.value)) {
+        let newValue = [...modelValue.value];
+
+        if (isChecked) {
+          newValue.push(value.value);
+        } else {
+          newValue = newValue.filter((v) => v !== value.value);
+        }
+
+        emit("update:modelValue", newValue);
+      } else {
+        emit(
+          "update:modelValue",
+          isChecked ? trueValue.value : falseValue.value
+        );
+      }
+    }
+
+    onMounted(() => {
+      uid.value = getUID();
+    });
+
+    return {
+      uid,
+      checkboxClass,
+      isChecked,
+      onChanged,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.checkbox
+  @apply inline-flex relative text-base align-top overflow-hidden
+
+  &.checkbox-sm
+    @apply text-sm
+
+    label
+      @apply text-sm
+
+  input
+    @apply absolute s("-top-10") s("-left-10")
+
+  label
+    @apply relative text-base text-gray-3 cursor-pointer
+
+    .icon
+      @apply hidden
+
+    span
+      @apply ml-2
+
+  input:not(:checked) + label:not(.is-check-some)
+    .icon-square
+      @apply inline-block
+
+  input:not(:checked) + label.is-check-some
+    @apply text-primary
+
+    .icon-square
+      @apply hidden
+
+    .icon-minus-square
+      @apply inline-block
+
+  input:checked + label, &.is-check-some
+    @apply text-primary
+
+  input:checked + label
+    .icon-check-square
+      @apply inline-block
+
+  input:not(:checked):disabled + label
+    @apply text-gray-4 cursor-default
+
+  input:checked:disabled + label
+    @apply text-gray-3 cursor-default
+</style>

package/components/SLCircleButton.vue

@@ -0,0 +1,95 @@
+<template lang="pug">
+a.circle-button(
+    href="javascript:;"
+    :class="btnClass"
+    @click="onClicked"
+  )
+  SLIcon(v-if="icon !== ''" :icon="icon")
+  .badge(v-show="showBadge")
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: "SLCircleButton",
+  components: {},
+  props: {
+    size: {
+      type: String,
+      default: "",
+    },
+    color: {
+      type: String,
+      default: "secondary-hover",
+    },
+    icon: {
+      type: String,
+      default: "box",
+    },
+    shadow: {
+      type: Boolean,
+      default: false,
+    },
+    showBadge: {
+      type: Boolean,
+      default: false,
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    const { size, color, shadow, active } = toRefs(props);
+
+    const btnClass = computed(() => {
+      const btnClass = [];
+      if (size.value !== "") {
+        btnClass.push(`circle-button-${size.value}`);
+      }
+      if (color.value !== "") {
+        btnClass.push(`circle-button-${color.value}`);
+      }
+      if (shadow.value) {
+        btnClass.push("shadow");
+      }
+      if (active.value) {
+        btnClass.push("active");
+      }
+      return btnClass.join(" ");
+    });
+
+    function onClicked(e: Event) {
+      emit("click", e);
+    }
+
+    return {
+      btnClass,
+      onClicked,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.circle-button
+  @apply inline-flex items-center justify-center relative w-10 h-10 rounded-full bg-white text-xl s('leading-5.75') text-white
+
+  &&-lg
+    @apply s('w-13.5') s('h-13.5') s('text-2.67xl')
+
+    .badge
+      @apply s('top-1.75') right-3 w-1 h-1
+
+  &&-secondary-hover
+    @apply bg-secondary-hover
+
+    &.shadow
+      @apply shadow-md
+
+    &.active
+      @apply border border-secondary-line text-secondary-line
+
+  .badge
+    @apply absolute s('top-1.5') right-2 block s('w-0.75') s('h-0.75') rounded-full bg-secondary-line
+</style>

package/components/SLCollapsableBlock.vue

@@ -0,0 +1,116 @@
+<template lang="pug">
+.sl-collapsable-block(:class="{ collapsed: isCollapsed }")
+  .sl-collapsable-block-header
+    slot(name="header")
+      a(
+        href="javascript:;"
+        @click="onToggleCollapse"
+      ).flex.items-center.justify-between
+        .text-base.text-gray-1.font-bold {{ blockTitle }}
+        .toggle-collapse-button
+          .button-title {{ isCollapsed ? '展開' : '收合' }}
+          SLIcon(icon="chevron-down")
+  .sl-collapsable-block-body(:style="`height: ${bodyHeight}px;`")
+    .collapsable-block-wrapper(ref="wrapperEl")
+      slot
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: "SLCollapsableBlock",
+  components: {},
+  props: {
+    blockTitle: {
+      type: String,
+      default: "",
+    },
+    defaultCollapsed: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  setup(props) {
+    const { defaultCollapsed } = toRefs(props);
+
+    const wrapperEl = shallowRef<HTMLElement | null>(null);
+    const isCollapsed = ref(defaultCollapsed.value);
+    const bodyHeight = ref(0);
+
+    function onToggleCollapse() {
+      isCollapsed.value = !isCollapsed.value;
+    }
+
+    function checkImageLoaded() {
+      nextTick(() => {
+        if (!wrapperEl.value) return;
+
+        const imageEls = wrapperEl.value.querySelectorAll("img");
+        for (let i = 0; i < imageEls.length; i += 1) {
+          const imageEl = imageEls[i] as HTMLImageElement;
+          imageEl.onload = () => {
+            getWrapperHeight();
+          };
+        }
+      });
+    }
+
+    function getWrapperHeight() {
+      nextTick(() => {
+        if (isCollapsed.value || !wrapperEl.value) {
+          bodyHeight.value = 0;
+          return;
+        }
+
+        const wrapperElRect = wrapperEl.value.getBoundingClientRect();
+        bodyHeight.value = wrapperElRect.height + 16;
+      });
+    }
+
+    watch(isCollapsed, () => {
+      getWrapperHeight();
+    });
+
+    onMounted(() => {
+      getWrapperHeight();
+      checkImageLoaded();
+    });
+
+    return {
+      wrapperEl,
+      isCollapsed,
+      bodyHeight,
+      onToggleCollapse,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.sl-collapsable-block
+  @apply s('p-3.75') border border-secondary-new-300 rounded-lg
+
+  &.collapsed
+    .sl-collapsable-block-header
+      .toggle-collapse-button
+        .icon
+          @apply rotate-0
+
+    .sl-collapsable-block-body
+      @apply pt-0
+
+  &-header
+    .toggle-collapse-button
+      @apply inline-flex items-center space-x-2
+
+      .button-title
+        @apply text-sm text-primary
+
+      .icon
+        @apply text-xs leading-none text-primary-hover rotate-180 transition-transform
+
+  &-body
+    @apply relative pt-4 overflow-hidden transition-all
+
+    .collapsable-block-wrapper
+      @apply absolute top-4 left-0 w-full
+</style>