@mptw/skylens-ui 1.0.0

package/components/SLSortByDropdown.vue

@@ -0,0 +1,189 @@
+<template lang="pug">
+.sort-by-dropdown(
+  :class='{ single: options.length === 1 }',
+  ref='el',
+)
+  a(href='javascript:;', ref='toggleEl', @click='onToggle').sort-by-dropdown-toggle
+    span {{ selectedOption ? selectedOption.label : '' }}
+    SLIcon(icon='caret-down')
+  .sort-by-dropdown-menu(ref='menuEl')
+    a.sort-by-dropdown-item(
+      v-for='option in options',
+      href='javascript:;',
+      :class='{ active: option.value === modelValue }'
+      :key='option.value',
+      @click='onClickedItem(option.value)'
+    ) {{ option.label }}
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import { createPopper } from "@popperjs/core";
+import type { Instance as PopperInstance } from "@popperjs/core";
+import { fromEvent, Subscription } from "rxjs";
+import type IInputOption from "~ui/interface/IInputOption";
+
+export default defineComponent({
+  name: "SLSortByDropdown",
+  components: {},
+  props: {
+    modelValue: {
+      type: [String, Number] as PropType<string | number>,
+      required: true,
+    },
+    options: {
+      type: Array as PropType<IInputOption[]>,
+      required: true,
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { modelValue, options } = toRefs(props);
+
+    const el = shallowRef<HTMLDivElement | null>(null);
+    const toggleEl = shallowRef<HTMLLinkElement | null>(null);
+    const menuEl = shallowRef<HTMLDivElement | null>(null);
+    const isShowMenu = ref(false);
+
+    let popperInstance: PopperInstance | null = null;
+    let clickSubscriber: Subscription | null = null;
+
+    const selectedOption = computed(() =>
+      (options.value || []).find((o) => o.value === modelValue.value)
+    );
+
+    function onToggle() {
+      isShowMenu.value = !isShowMenu.value;
+    }
+
+    function createPopperInstance() {
+      destroyPopper();
+
+      nextTick(() => {
+        if (toggleEl.value && menuEl.value && options.value.length > 1) {
+          popperInstance = createPopper(toggleEl.value, menuEl.value, {
+            modifiers: [
+              {
+                name: "offset",
+                options: {
+                  offset: [0, 4],
+                },
+              },
+              { name: "eventListeners", enabled: false },
+            ],
+          });
+        }
+      });
+    }
+
+    function destroyPopper() {
+      if (popperInstance) {
+        popperInstance.destroy();
+      }
+      popperInstance = null;
+    }
+
+    function destorySubscriber() {
+      if (clickSubscriber) {
+        clickSubscriber.unsubscribe();
+      }
+      clickSubscriber = null;
+    }
+
+    function show() {
+      if (!menuEl.value || !popperInstance || options.value.length < 2) return;
+
+      menuEl.value.setAttribute("data-show", "");
+      popperInstance.setOptions((options) => ({
+        ...options,
+        modifiers: [
+          ...(options.modifiers || []),
+          { name: "eventListeners", enabled: true },
+        ],
+      }));
+      popperInstance.update();
+
+      destorySubscriber();
+      clickSubscriber = fromEvent(window, "click").subscribe((e: Event) => {
+        if (el.value && el.value.contains(e.target as Node)) {
+          return;
+        }
+
+        isShowMenu.value = false;
+      });
+    }
+
+    function hide() {
+      if (!menuEl.value || !popperInstance) return;
+
+      menuEl.value.removeAttribute("data-show");
+      popperInstance.setOptions((options) => ({
+        ...options,
+        modifiers: [
+          ...(options.modifiers || []),
+          { name: "eventListeners", enabled: false },
+        ],
+      }));
+
+      destorySubscriber();
+    }
+
+    function onClickedItem(optionValue: string | number) {
+      emit("update:modelValue", optionValue);
+      isShowMenu.value = false;
+    }
+
+    watch(isShowMenu, () => {
+      if (isShowMenu.value) {
+        show();
+      } else {
+        hide();
+      }
+    });
+
+    onMounted(() => {
+      createPopperInstance();
+    });
+
+    onBeforeUnmount(() => {
+      destroyPopper();
+    });
+
+    return {
+      el,
+      toggleEl,
+      menuEl,
+      selectedOption,
+      onToggle,
+      onClickedItem,
+    };
+  },
+});
+</script>
+
+<style lang="stylus" scoped>
+.sort-by-dropdown
+  @apply inline-flex
+
+  &.single
+    .sort-by-dropdown-toggle
+      @apply bg-white cursor-default
+      .icon
+        @apply hidden
+
+  &-toggle
+    @apply inline-flex items-center px-1 s('py-0.5') space-x-2 bg-bg-middle rounded text-sm text-primary
+    .icon
+      @apply text-xs
+
+  &-menu
+    @apply s('z-[2]') flex-col s('min-w-[84px]') bg-white border border-primary-light rounded overflow-hidden hidden
+
+    &[data-show]
+      @apply inline-flex
+
+    .sort-by-dropdown-item
+      @apply inline-flex p-2 bg-white text-sm text-gray-3
+      &.active
+        @apply bg-bg text-primary
+</style>

package/components/SLSpinIcon.vue

@@ -0,0 +1,24 @@
+<template lang="pug">
+SLIcon(:icon='icon').spin-icon
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: "SLSpinIcon",
+  components: {},
+  props: {
+    icon: {
+      type: String,
+      default: "",
+    },
+  },
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style lang="stylus">
+i.spin-icon
+  @apply animate-spin
+</style>

package/components/SLStayRangeInput.vue

@@ -0,0 +1,306 @@
+<template lang="pug">
+.stay-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"
+    )
+    .form-control-container
+      .input-group
+        input(
+          type='text'
+          :value='stayStart'
+          placeholder='1'
+          maxlength='3'
+          :disabled='disabled'
+          @input='onInputedStayStart'
+        )
+        SLSelect(
+          :modelValue='stayStartLevel'
+          :options='stayLevelOptions'
+          placeholder=''
+          :disabled='disabled'
+          :beReadonly='beReadonly'
+          :isInvalid='isInvalid'
+          ref='startSelectComp'
+          @update:modelValue='onInputedStayStartLevel'
+        )
+      .input-group-splitter
+      .input-group
+        input(
+          type='text'
+          :value='stayEnd'
+          placeholder='24'
+          maxlength='3'
+          :disabled='disabled'
+          @input='onInputedStayEnd'
+        )
+        SLSelect(
+          :modelValue='stayEndLevel'
+          :options='stayLevelOptions'
+          placeholder=''
+          :disabled='disabled'
+          :beReadonly='beReadonly'
+          :isInvalid='isInvalid'
+          ref='endSelectComp'
+          @update:modelValue='onInputedStayEndLevel'
+        )
+    .invalid-feedback
+      slot(name="invalid-feedback") {{ invalidFeedback }}
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import { SLSelect } from "#components";
+import type IStayRange from "~ui/interface/IStayRange";
+import { StayRangeLevel } from "~ui/interface/IStayRange";
+
+type SLSelectType = InstanceType<typeof SLSelect>;
+
+export default defineComponent({
+  name: "SLStayRangeInput",
+  components: {},
+  props: {
+    label: {
+      type: String,
+      default: undefined,
+    },
+    inline: {
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: Object as PropType<IStayRange | null>,
+      default: null,
+    },
+    step: {
+      type: Number,
+      default: 1,
+    },
+    isInvalid: {
+      type: Boolean,
+      default: false,
+    },
+    invalidFeedback: {
+      type: String,
+      default: "",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    beReadonly: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { modelValue } = toRefs(props);
+
+    const toggle = shallowRef<HTMLElement | null>(null);
+    const startSelectComp = shallowRef<SLSelectType | null>(null);
+    const endSelectComp = shallowRef<SLSelectType | null>(null);
+
+    const stayLevelOptions = computed(() => [
+      { label: "分鐘", value: "minutes" },
+      { label: "小時", value: "hours" },
+    ]);
+    const stayStart = computed(() => {
+      if (
+        !modelValue.value ||
+        !modelValue.value.start ||
+        modelValue.value.start.value === undefined ||
+        modelValue.value.start.value === null
+      ) {
+        return "";
+      }
+
+      return modelValue.value.start.value;
+    });
+    const stayEnd = computed(() => {
+      if (
+        !modelValue.value ||
+        !modelValue.value.end ||
+        modelValue.value.end.value === undefined ||
+        modelValue.value.end.value === null
+      ) {
+        return "";
+      }
+
+      return modelValue.value.end.value;
+    });
+    const stayStartLevel = computed(() => {
+      return modelValue.value?.start?.level || "minutes";
+    });
+    const stayEndLevel = computed(() => {
+      return modelValue.value?.end?.level || "hours";
+    });
+
+    function onInputedStayStart(e: Event) {
+      const target = e.target as HTMLInputElement;
+      let start = target.value === "" ? null : Number(target.value);
+
+      if (
+        start === null ||
+        Number.isNaN(start) ||
+        start < 1 ||
+        (stayStartLevel.value === "hours" && start > 24)
+      ) {
+        start = null;
+      }
+
+      emit("update:modelValue", {
+        start: {
+          value: start,
+          level: stayStartLevel.value,
+        },
+        end: {
+          value: modelValue.value?.end?.value || null,
+          level: stayEndLevel.value,
+        },
+      });
+    }
+
+    function onInputedStayEnd(e: Event) {
+      const target = e.target as HTMLInputElement;
+      let end = target.value === "" ? null : Number(target.value);
+
+      if (
+        end === null ||
+        Number.isNaN(end) ||
+        (stayEndLevel.value === "hours" && end > 24)
+      ) {
+        end = null;
+      }
+
+      emit("update:modelValue", {
+        start: {
+          value: modelValue.value?.start?.value || null,
+          level: stayStartLevel.value,
+        },
+        end: {
+          value: end,
+          level: stayEndLevel.value,
+        },
+      });
+    }
+
+    function onInputedStayStartLevel(newLevel: StayRangeLevel) {
+      let start = modelValue.value?.start?.value || null;
+
+      if (newLevel === "hours" && start !== null && start > 24) {
+        start = null;
+      }
+
+      emit("update:modelValue", {
+        start: {
+          value: start,
+          level: newLevel,
+        },
+        end: {
+          value: modelValue.value?.end?.value || null,
+          level: stayEndLevel.value,
+        },
+      });
+    }
+
+    function onInputedStayEndLevel(newLevel: StayRangeLevel) {
+      let end = modelValue.value?.end?.value || null;
+
+      if (newLevel === "hours" && end !== null && end > 24) {
+        end = null;
+      }
+
+      emit("update:modelValue", {
+        start: {
+          value: modelValue.value?.start?.value || null,
+          level: stayStartLevel.value,
+        },
+        end: {
+          value: end,
+          level: newLevel,
+        },
+      });
+    }
+
+    function hide() {
+      if (startSelectComp.value) {
+        startSelectComp.value.hide();
+      }
+
+      if (endSelectComp.value) {
+        endSelectComp.value.hide();
+      }
+    }
+
+    return {
+      toggle,
+      startSelectComp,
+      endSelectComp,
+      stayLevelOptions,
+      stayStart,
+      stayEnd,
+      stayStartLevel,
+      stayEndLevel,
+      onInputedStayStart,
+      onInputedStayEnd,
+      onInputedStayStartLevel,
+      onInputedStayEndLevel,
+      hide,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.stay-range-input
+  @apply flex flex-col
+
+  &.inline
+    @apply flex flex-row
+
+    & > 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[type=text]
+        @apply border-primary-light bg-bg
+
+
+  & > label
+    @apply mb-2 text-base leading-normal text-gray-2
+
+  .is-invalid
+    .input-group
+      input[type=text]
+        @apply border-danger
+
+    .invalid-feedback
+      @apply block
+
+
+  .form-control-container
+    @apply flex items-center space-x-2
+
+  .input-group
+    @apply flex-grow flex flex-nowrap space-x-2
+
+    input[type=text]
+      @apply flex-grow-0 flex-shrink-0 w-11 border border-primary-light rounded text-base text-center text-gray-2 outline-none
+
+    .custom-select
+      @apply w-full
+
+  .input-group-splitter
+    @apply flex-grow-0 flex-shrink-0 w-3 h-px bg-primary
+
+  .invalid-feedback
+    @apply hidden text-danger text-xs
+</style>

package/components/SLTab.vue

@@ -0,0 +1,159 @@
+<template lang="pug">
+li(
+    v-if="distributed && distributed.header"
+    :class="tabNavItemClass"
+    @click="navClick"
+    ref='tabPaneEl'
+  )
+  a(
+      href="javascript:;"
+    ).tab-nav-item-link
+    .tab-nav-item-link-title
+      .inline-flex.items-center.justify-center.w-full.space-x-1
+        slot(name="title")
+          SLIcon(v-if="icon", :icon="icon")
+          span {{ title }}
+div(
+  v-else
+  :class="{ active: isActive }"
+  ref='tabPaneEl'
+)
+  .tab-pane(
+      v-if="isActive"
+      :class="{ active: isActive }"
+    )
+    slot
+</template>
+
+<script lang="ts">
+import type { Ref } from "vue";
+
+export default defineComponent({
+  name: "SLTab",
+  components: {},
+  props: {
+    icon: {
+      type: String,
+      default: "",
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    order: {
+      type: Number,
+      require: true,
+      default: -1,
+    },
+    activeTabBorderColor: {
+      type: String,
+      default: "",
+      validator: (val: string) =>
+        [
+          "",
+          "insight-web-1",
+          "insight-poi-1",
+          "insight-1",
+          "insight-2",
+          "insight-3",
+        ].includes(val),
+    },
+    single: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const { order, activeTabBorderColor, single } = toRefs(props);
+
+    const distributed = inject<{
+      header: boolean;
+      changeTabTo: (newTab: number) => void;
+    }>("distributed");
+    const activeTab = inject<Ref<number>>("activeTab");
+    const initialTab = inject<Ref<number>>("initialTab");
+    const self = getCurrentInstance();
+    const parent = self?.parent?.parent;
+
+    const tabPaneEl = shallowRef<HTMLElement | null>(null);
+    const index = ref<number | null>(null);
+
+    const isActive = computed(() => {
+      return activeTab && activeTab.value === index.value;
+    });
+    const tabNavItemClass = computed(() => {
+      const classes = ["tab-nav-item"];
+
+      if (isActive.value) {
+        classes.push("active");
+      }
+
+      if (activeTabBorderColor.value !== "") {
+        classes.push(`tab-nav-item-${activeTabBorderColor.value}`);
+      }
+
+      if (single.value) {
+        classes.push("single");
+      }
+
+      return classes.join(" ");
+    });
+
+    function navClick() {
+      if (!isActive.value && distributed && distributed.changeTabTo) {
+        distributed.changeTabTo(index.value || 0);
+      }
+    }
+
+    function setupIndex() {
+      if (!distributed) return;
+
+      if (order.value < 0) {
+        const contentBody = (
+          distributed.header
+            ? parent?.refs?.tabsNavLeftEl
+            : parent?.refs?.tabsContentBody
+        ) as HTMLElement;
+        if (!contentBody) return;
+
+        const tabsElement = distributed.header
+          ? contentBody.querySelectorAll(".tab-nav-item")
+          : contentBody.children;
+        index.value = tabPaneEl.value
+          ? Array.from(tabsElement).indexOf(tabPaneEl.value)
+          : null;
+      } else {
+        index.value = order.value;
+      }
+    }
+
+    watch(order, () => {
+      setupIndex();
+    });
+
+    onMounted(() => {
+      setupIndex();
+
+      if (
+        isActive.value &&
+        distributed &&
+        distributed.header &&
+        (!initialTab || !initialTab.value)
+      ) {
+        distributed.changeTabTo(index.value || 0);
+      }
+    });
+
+    return {
+      distributed,
+      activeTab,
+      tabPaneEl,
+      isActive,
+      tabNavItemClass,
+      navClick,
+    };
+  },
+});
+</script>
+
+<style lang="stylus"></style>