@mptw/skylens-ui 1.0.0

package/components/SLRangeInput.vue

@@ -0,0 +1,209 @@
+<template lang="pug">
+.range-input(
+    :class="{ inline, disabled, readonly: beReadonly }"
+  )
+  label(v-if="label") {{ label }}
+  .form-control(
+      :class="{ 'is-invalid': isInvalid !== null && isInvalid, 'is-valid': isInvalid !== null && !isInvalid }"
+      ref="toggle"
+    )
+    .input-group(
+        :class="{ 'is-fill': !!modelValue }"
+      )
+      .input-range-group
+        .range-input-accept-values
+          span {{ min }}
+          span {{ max }}
+        VueSlider(
+          v-model='modelValueProxy'
+          :min='min'
+          :max='max'
+          :interval='step'
+          :contained='true'
+          :lazy='false',
+          :disabled='disabled || beReadonly || min === max'
+          :dotSize='12'
+          :height='6'
+          tooltip='none'
+          :dotOptions='dotOptions'
+          :railStyle='railStyle'
+          :processStyle='processStyle'
+        )
+      input(
+        type='text'
+        :value='modelValue'
+        :disabled='disabled || min === max'
+        @input='onInputed'
+        @blur='onBlured'
+      )
+    .invalid-feedback
+      slot(name="invalid-feedback") {{ invalidFeedback }}
+</template>
+
+<script lang="ts">
+import "vue-slider-component/theme/default.css";
+import VueSlider from "vue-slider-component";
+import type { DotOption } from "vue-slider-component";
+
+export default defineComponent({
+  name: "SLRangeInput",
+  components: { VueSlider },
+  props: {
+    label: {
+      type: String,
+      default: undefined,
+    },
+    inline: {
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: Number,
+      default: 0,
+    },
+    min: {
+      type: Number,
+      default: 0,
+    },
+    max: {
+      type: Number,
+      default: 10,
+    },
+    step: {
+      type: Number,
+      default: 1,
+    },
+    isInvalid: {
+      type: Boolean,
+      default: false,
+    },
+    invalidFeedback: {
+      type: String,
+      default: "",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    beReadonly: {
+      type: Boolean,
+      default: false,
+    },
+    tooltip: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { modelValue, disabled, beReadonly, min, max } = toRefs(props);
+
+    const toggle = ref(null);
+
+    const modelValueProxy = computed({
+      get: () => modelValue.value,
+      set: (newValue) => {
+        emit("update:modelValue", newValue);
+      },
+    });
+    const railStyle = computed(() => ({
+      backgroundColor: "#E8EAF2",
+    }));
+    const dotOptions = computed<DotOption>(() => ({
+      disabled: disabled.value || beReadonly.value,
+      tooltip: "none",
+      style: {
+        backgroundColor: "#8486B4",
+        borderColor: "#8486B4",
+      },
+      focusStyle: {
+        boxShadow: "none",
+      },
+      disabledStyle: {
+        backgroundColor: "#A09BAF",
+        borderColor: "#A09BAF",
+      },
+    }));
+    const processStyle = computed(() => ({
+      backgroundColor: "#8486B4",
+    }));
+    const tooltipStyle = computed(() => ({
+      display: "none",
+    }));
+
+    function onInputed(e: Event) {
+      const newValue = Number((e.target as HTMLInputElement).value);
+
+      if (Number.isNaN(newValue) || newValue < min.value) {
+        emit("update:modelValue", min.value);
+        return;
+      } else if (newValue > max.value) {
+        emit("update:modelValue", max.value);
+        return;
+      }
+
+      emit("update:modelValue", newValue);
+    }
+
+    function onBlured(e: Event) {
+      (e.target as HTMLInputElement).value = `${modelValue.value}`;
+    }
+
+    return {
+      toggle,
+      modelValueProxy,
+      railStyle,
+      dotOptions,
+      processStyle,
+      tooltipStyle,
+      onInputed,
+      onBlured,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.range-input
+  &.inline
+    @apply flex
+
+    & > label
+      @apply flex-grow-0 flex-shrink-0 mb-0 mr-2 py-2 border-t border-b border-transparent
+
+    .form-control
+      @apply flex-grow
+
+  &.disabled, &.readonly
+    .input-group
+      .input-range-group
+        .range-input-accept-values
+          @apply text-gray-4
+
+      input[type=text]
+        @apply border-primary-light bg-bg
+
+  & > label
+    @apply mb-2 text-base leading-normal text-gray-2
+
+  .is-invalid
+    .invalid-feedback
+      @apply block
+
+
+  .input-group
+    @apply flex flex-nowrap text-base leading-normal space-x-4
+
+    .input-range-group
+      @apply flex-grow
+
+      .range-input-accept-values
+        @apply flex justify-between mb-1 text-sm text-gray-3
+
+    input[type=text]
+      @apply flex-grow-0 flex-shrink-0 w-11 bg-white border border-primary-light rounded text-base text-center text-gray-2
+      @apply s('focus:outline-none')
+
+  .invalid-feedback
+    @apply hidden text-danger text-xs
+</style>

package/components/SLRegionsMapChart.vue

@@ -0,0 +1,151 @@
+<template lang="pug">
+.chart
+  ECharts(
+    :loading="loading"
+    :option="formatedOption"
+    autoresize
+    @click="onClicked"
+    ref="chartComp"
+  ).vchart
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import axios from "axios";
+import ECharts from "vue-echarts";
+import { use } from "echarts/core";
+import { registerMap } from "echarts/core";
+import { MapChart } from "echarts/charts";
+import "echarts-wordcloud";
+import {
+  GridComponent,
+  LegendComponent,
+  TooltipComponent,
+  VisualMapComponent,
+  VisualMapContinuousComponent,
+} from "echarts/components";
+import { CanvasRenderer } from "echarts/renderers";
+import type { ECBasicOption } from "echarts/types/dist/shared";
+
+use([
+  MapChart,
+  GridComponent,
+  LegendComponent,
+  TooltipComponent,
+  VisualMapComponent,
+  VisualMapContinuousComponent,
+  CanvasRenderer,
+]);
+
+const DefaultGrid = {
+  top: 14,
+  right: 0,
+  bottom: 0,
+  left: 30,
+  containLabel: true,
+};
+
+const DefaultOption = {
+  xAxis: {
+    axisLine: {
+      lineStyle: {
+        color: "#828282",
+      },
+    },
+  },
+  yAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#828282",
+      },
+    },
+    axisTick: {
+      show: true,
+    },
+    splitLine: {
+      lineStyle: {
+        color: "#E5E6F4",
+        opacity: 0.5,
+      },
+    },
+  },
+  tooltip: {
+    padding: 16,
+    textStyle: {
+      color: "#4F4F4F",
+      fontSize: 16,
+      lineHeight: 21,
+    },
+  },
+  grid: DefaultGrid,
+};
+
+export default defineComponent({
+  name: "SLRegionsMapChart",
+  components: {
+    ECharts,
+  },
+  props: {
+    option: {
+      type: Object as PropType<ECBasicOption>,
+      default: null,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    const { option } = toRefs(props);
+
+    const mapJsonLoaded = ref(false);
+
+    const formatedOption = computed(() => {
+      if (mapJsonLoaded.value) {
+        return {
+          ...DefaultOption,
+          ...option.value,
+        };
+      }
+
+      return {
+        ...DefaultOption,
+      };
+    });
+
+    function onClicked(e: any) {
+      emit("click", e);
+    }
+
+    function loadMapJson() {
+      axios
+        .get("/assets/files/taiwan-regions.json")
+        .then((response) => {
+          const { data } = response;
+
+          registerMap("TaiwanRegions", data);
+          mapJsonLoaded.value = true;
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    }
+
+    onMounted(() => {
+      loadMapJson();
+    });
+
+    return {
+      formatedOption,
+      onClicked,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.chart
+  @apply h-52
+</style>

package/components/SLRightSider.vue

@@ -0,0 +1,242 @@
+<template lang="pug">
+.right-sider(:class="{ show: isShow, hover: isHover }" ref="el")
+  transition(name="fade")
+    .right-sider-modal(
+      v-if="isShow"
+      @click.prevent="onClickedModal"
+    )
+  .right-sider-content(:style="`margin-left: -${contentMarginLeft}px; min-height: ${contentMinHeight > 0 ? `${contentMinHeight}px` : 0}`" ref="contentEl")
+    SLLink.sider-toggle(
+      v-if="icon !== ''"
+      :class="`${toggleColor !== '' ? `sider-toggle-${toggleColor}` : ''}`"
+      :style="`margin-top: ${78 + order * (44 + 4)}px`"
+      :title="toggleTitle"
+      @mouseenter="onMouseEnteredToggle"
+      @mouseleave="onMouseLeavedToggle"
+      @click="toggleSider"
+    )
+      SLIcon(v-if="icon !== ''" :icon='icon')
+    .right-sider-content-wrapper
+      slot
+    a.sider-close-button(href="javascript:;" @click="toggleSider")
+      SLIcon(icon="times")
+  .right-sider-addition-content(
+    v-show='isShowAdditionContent',
+    :style='`margin-right: ${contentMarginLeft + 4}px;`',
+    ref='additionContentEl'
+  )
+    slot(name='addition-content')
+</template>
+
+<script lang="ts">
+import { fromEvent, interval, Subscription } from "rxjs";
+import { debounce, startWith } from "rxjs/operators";
+
+export default defineComponent({
+  name: "SLRightSider",
+  components: {},
+  props: {
+    isShow: {
+      type: Boolean,
+      default: false,
+    },
+    isShowAdditionContent: {
+      type: Boolean,
+      default: false,
+    },
+    icon: {
+      type: String,
+      default: "",
+    },
+    toggleColor: {
+      type: String,
+      default: "",
+    },
+    toggleTitle: {
+      type: String,
+      default: "",
+    },
+    contentMinHeight: {
+      type: Number,
+      default: 437,
+    },
+    closeOnBackdrop: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:isShow"],
+  setup(props, { emit }) {
+    const { isShow, isShowAdditionContent, closeOnBackdrop } = toRefs(props);
+
+    const el = shallowRef<HTMLElement | null>(null);
+    const contentEl = shallowRef<HTMLElement | null>(null);
+    const additionContentEl = shallowRef<HTMLElement | null>(null);
+    const order = ref(-1);
+    const contentMarginLeft = ref(0);
+    const isHover = ref(false);
+
+    let observer: MutationObserver | null = null;
+    let resizeSubscriber: Subscription | null = null;
+
+    function toggleSider() {
+      emit("update:isShow", !isShow.value);
+    }
+
+    function caculateCotentMarginLeft() {
+      nextTick(() => {
+        if (contentEl.value && isShow.value) {
+          const contentElRect = contentEl.value.getBoundingClientRect();
+          let marginLeft = contentElRect.width;
+
+          if (isShowAdditionContent.value && additionContentEl.value) {
+            const additionContentElRect =
+              additionContentEl.value.getBoundingClientRect();
+
+            const siderFullWidth =
+              contentElRect.width + 4 + additionContentElRect.width + 12;
+
+            if (siderFullWidth > window.innerWidth) {
+              marginLeft -= siderFullWidth - window.innerWidth;
+            }
+          }
+
+          contentMarginLeft.value = marginLeft;
+          return;
+        }
+
+        contentMarginLeft.value = 0;
+      });
+    }
+
+    function updateOrder() {
+      nextTick(() => {
+        const rightSideEl = document.querySelector("#right-side");
+        if (!rightSideEl || !el.value) return;
+
+        const rightSiders = rightSideEl.children;
+        let newOrder = -1;
+        for (let i = 0; i < rightSiders.length; i += 1) {
+          if (rightSiders[i] === el.value) {
+            newOrder = i;
+          }
+        }
+
+        order.value = newOrder;
+      });
+    }
+
+    function onMouseEnteredToggle() {
+      isHover.value = true;
+    }
+
+    function onMouseLeavedToggle() {
+      isHover.value = false;
+    }
+
+    function subscribeResize() {
+      resizeSubscriber = fromEvent(window, "resize")
+        .pipe(debounce(() => interval(500)))
+        .pipe(startWith(0))
+        .subscribe(() => {
+          caculateCotentMarginLeft();
+        });
+    }
+
+    function unsubscribeResize() {
+      if (resizeSubscriber) {
+        resizeSubscriber.unsubscribe();
+      }
+      resizeSubscriber = null;
+    }
+
+    function onClickedModal() {
+      if (!closeOnBackdrop.value) return;
+
+      emit("update:isShow", false);
+    }
+
+    watch([isShow, isShowAdditionContent], () => {
+      caculateCotentMarginLeft();
+    });
+
+    onMounted(() => {
+      subscribeResize();
+
+      const rightSideEl = document.querySelector("#right-side");
+      if (rightSideEl) {
+        observer = new MutationObserver(updateOrder);
+        observer.observe(rightSideEl, {
+          attributes: false,
+          childList: true,
+          subtree: false,
+        });
+      }
+      updateOrder();
+    });
+
+    onBeforeUnmount(() => {
+      unsubscribeResize();
+      if (observer) {
+        observer.disconnect();
+      }
+      observer = null;
+    });
+
+    return {
+      el,
+      contentEl,
+      additionContentEl,
+      order,
+      contentMarginLeft,
+      isHover,
+      toggleSider,
+      onMouseEnteredToggle,
+      onMouseLeavedToggle,
+      onClickedModal,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.right-sider
+  @apply fixed top-0 right-0 h-full
+  z-index 9
+
+  &.show, &.hover
+    @apply z-50
+
+  &.show
+    .right-sider-modal
+      @apply block
+
+  &-modal
+    @apply fixed top-0 left-0 w-full h-full s('bg-backdrop/70') hidden
+
+  &-content
+    @apply absolute top-4 left-0 flex p-6 bg-white border-t border-l border-b border-border rounded-l-lg shadow-popup-lg transition-margin
+    max-width calc(100vw - 16px)
+    max-height calc(100% - theme('spacing.8'))
+
+    .sider-toggle
+      @apply absolute top-0 left-0 inline-flex p-3 rounded-l-full text-lg text-white
+      margin-top 78px
+      margin-left -44px
+
+      &-third
+        @apply bg-third-hover
+
+      &-purple
+        @apply bg-edit-purple
+
+    &-wrapper
+      @apply flex max-w-full overflow-hidden
+
+    .sider-close-button
+      @apply absolute top-0 right-0 inline-flex mt-6 mr-6 text-base text-primary
+
+  &-addition-content
+    @apply absolute top-4 right-0 flex bg-white border border-border rounded-lg overflow-hidden shadow-popup-lg transition-margin
+    max-height calc(100% - theme('spacing.8'))
+</style>

package/components/SLSearchInput.vue

@@ -0,0 +1,87 @@
+<template lang="pug">
+SLTextInput(
+  :size='size'
+  :modelValue="modelValue"
+  :placeholder="placeholder"
+  :lazy="lazy"
+  @update:modelValue='onInputedValue'
+).search-input
+  template(#append)
+    .button-group
+      .button-group-divider
+      SLButton(v-if="!isSearch", :size='size' @click.prevent="onClickedSearch").btn-search
+        SLIcon(icon="search").icon-search
+      SLButton(v-else, :size='size' @click.prevent="onClickedClear").btn-clear
+        SLIcon(icon="times").icon-times
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: "SLSearchInput",
+  components: {},
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    lazy: {
+      type: [Boolean, Number],
+      default: true,
+    },
+    isSearch: {
+      type: Boolean,
+      defalut: false,
+    },
+    size: {
+      type: String,
+      default: "",
+      valiator: (val: string) => ["", "sm"].includes(val),
+    },
+  },
+  emits: ["search", "clear", "update:modelValue", "update:value"],
+  setup(_, { emit }) {
+    function onClickedSearch(e: Event) {
+      emit("search", e);
+    }
+
+    function onClickedClear(e: Event) {
+      emit("clear", e);
+    }
+
+    function onInputedValue(newValue: string) {
+      emit("update:modelValue", newValue);
+    }
+
+    function onUpdatedValue(newValue: string) {
+      emit("update:value", newValue);
+    }
+
+    return {
+      onClickedSearch,
+      onClickedClear,
+      onInputedValue,
+      onUpdatedValue,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.search-input
+  .is-focus
+    .button-group
+      @apply border-primary
+
+  .button-group
+    @apply inline-flex items-center h-full s('py-1.25') border-t border-r border-b border-primary-light rounded rounded-l-none bg-white
+
+    &-divider
+      @apply s('w-[0.0625rem]') h-full bg-primary-light
+
+    .btn
+      @apply s('p-0') s('mx-1.75') leading-none text-gray-3 s('focus:outline-none') s('active:outline-none')
+</style>