@mptw/skylens-ui 1.4.109 → 1.5.1

package/app/components/SLTabs.vue

@@ -0,0 +1,528 @@
+<template lang="pug">
+.tabs(:class='tabsClass')
+  .tabs-nav(
+    v-show="!tabItemsOversize"
+    :class="{ show: !tabItemsOversize }"
+  )
+    .tabs-nav-left(ref='tabsNavLeftEl')
+      SLDistributor(
+        tag='ul',
+        :header='true',
+        :changeTabTo='changeTabTo',
+        ref='navComp'
+      )
+        slot
+    .tabs-nav-right(v-if='(type === 1 || type === 5) && $slots["tabs-nav-right"]')
+      slot(name='tabs-nav-right')
+  .tabs-content
+    SLDistributor
+      .tabs-content-header(v-show="tabItemsOversize")
+        .tabs-content-header-left
+          SLDropdown.tabs-dropdown(
+            :title='currentTab',
+            v-model:showDropdown='showDropdown',
+            :class='{ active: showDropdown }',
+          )
+            SLDropdownItem(
+              v-for='(tabTitle, i) in tabTitles',
+              :title='tabTitle',
+              :class='{ active: i === activeTabIndex }',
+              @click='onClickedTab(i)',
+              :key='`${tabTitle}-${i}`'
+            )
+        .tabs-content-header-right(v-if='$slots["tabs-nav-right"]')
+          slot(name='tabs-nav-right')
+      .tabs-content-body(ref='tabsContentBody')
+        slot
+</template>
+
+<script lang="ts">
+import { fromEvent, interval, Subscription } from "rxjs";
+import { debounce, startWith } from "rxjs/operators";
+import { SLDistributor } from "#components";
+
+type SLDistributorType = InstanceType<typeof SLDistributor>;
+
+export default defineComponent({
+  name: "SLTabs",
+  components: {},
+  props: {
+    size: {
+      type: String,
+      default: "",
+      validator: (value: string) => ["", "xs", "sm"].includes(value),
+    },
+    navMode: {
+      type: String,
+      default: "",
+    },
+    type: {
+      type: Number,
+      default: 1,
+      validator: (value: number) => [1, 2, 3, 4, 5, 6].includes(value),
+    },
+    activeTab: {
+      type: Number,
+      default: 0,
+    },
+  },
+  emits: ["update:activeTab"],
+  setup(props, { emit }) {
+    const { activeTab, size, type, navMode } = toRefs(props);
+
+    const tabsContentBody = shallowRef<HTMLElement | null>(null);
+    const tabsNavLeftEl = shallowRef<HTMLElement | null>(null);
+    const navComp = shallowRef<SLDistributorType | null>(null);
+    const tabTitles = ref<Array<string>>([]);
+    const showDropdown = ref(false);
+    const tabItemsOversizeProxy = ref(false);
+
+    let observer: MutationObserver | null = null;
+    let resizeSubscriber: Subscription | null = null;
+
+    const activeTabIndex = computed(() => activeTab.value || 0);
+    const tabsClass = computed(() => {
+      const classes: Array<string> = [`tabs-type-${type.value}`];
+
+      if (size.value !== "") {
+        classes.push(`tabs-${size.value}`);
+      }
+
+      return classes.join(" ");
+    });
+    const currentTab = computed(() => {
+      return tabTitles.value[activeTabIndex.value];
+    });
+    const tabItemsOversize = computed({
+      get: () => {
+        return (
+          type.value !== 4 &&
+          (tabItemsOversizeProxy.value || navMode.value === "dropdown")
+        );
+      },
+      set: (newValue: boolean) => {
+        tabItemsOversizeProxy.value = newValue;
+      },
+    });
+
+    provide("activeTab", readonly(activeTabIndex));
+    provide("initialTab", readonly(activeTab));
+
+    function caculateTabs() {
+      nextTick(() => {
+        const tabLinks =
+          navComp.value?.$el.querySelectorAll(".tab-nav-item-link");
+        const tabLinkTitles = [];
+        if (tabLinks) {
+          for (let i = 0; i < tabLinks.length; i += 1) {
+            tabLinkTitles.push((tabLinks[i] as HTMLElement).innerText);
+          }
+        }
+        tabTitles.value = tabLinkTitles;
+
+        const tabsNavLeftRect = tabsNavLeftEl.value?.getBoundingClientRect();
+        const navRect = navComp.value?.$el?.getBoundingClientRect();
+
+        if (tabsNavLeftRect && navRect) {
+          tabItemsOversizeProxy.value = navRect.width > tabsNavLeftRect.width;
+        }
+      });
+    }
+
+    function changeTabTo(newTab: number) {
+      emit("update:activeTab", newTab);
+    }
+
+    function onClickedTab(i: number) {
+      changeTabTo(i);
+    }
+
+    onMounted(() => {
+      resizeSubscriber = fromEvent(window, "resize")
+        .pipe(debounce(() => interval(500)))
+        .pipe(startWith(0))
+        .subscribe(() => {
+          caculateTabs();
+        });
+
+      if (navComp.value) {
+        observer = new MutationObserver(caculateTabs);
+        observer.observe(navComp.value.$el, {
+          characterData: true,
+          attributes: false,
+          childList: true,
+          subtree: true,
+        });
+      }
+    });
+
+    onBeforeUnmount(() => {
+      if (resizeSubscriber) {
+        resizeSubscriber.unsubscribe();
+      }
+      if (observer) {
+        observer.disconnect();
+      }
+      resizeSubscriber = null;
+      observer = null;
+    });
+
+    return {
+      tabsContentBody,
+      tabsNavLeftEl,
+      navComp,
+      activeTabIndex,
+      tabTitles,
+      showDropdown,
+      tabItemsOversize,
+      tabsClass,
+      currentTab,
+      changeTabTo,
+      onClickedTab,
+    };
+  },
+});
+</script>
+
+<style>
+@reference '~ui/app/assets/css/main.css';
+
+.tabs.tabs-sm.tabs-type-1 > .tabs-nav ul .tab-nav-item-link {
+  @apply text-sm;
+}
+
+.tabs.tabs-xs.tabs-type-1 > .tabs-nav ul .tab-nav-item.active::before {
+  @apply hidden;
+}
+
+.tabs.tabs-xs.tabs-type-1 > .tabs-nav ul .tab-nav-item-link {
+  @apply py-0.75 text-base;
+}
+
+.tabs.tabs-type-1 > .tabs-nav {
+  @apply flex items-start justify-between h-0 space-x-8 overflow-hidden lg:space-x-30;
+}
+
+.tabs.tabs-type-1 > .tabs-nav.show {
+  @apply h-auto -mb-1.5;
+}
+
+.tabs.tabs-type-1 > .tabs-nav .tabs-nav-left {
+  @apply grow overflow-hidden;
+}
+
+.tabs.tabs-type-1 > .tabs-nav .tabs-nav-right {
+  @apply grow-0 shrink-0;
+}
+
+.tabs.tabs-type-1 > .tabs-nav ul {
+  @apply inline-flex items-start -space-x-px;
+}
+
+.tabs.tabs-type-1 > .tabs-nav ul .tab-nav-item {
+  @apply relative rounded-t bg-white;
+}
+
+.tabs.tabs-type-1
+  > .tabs-nav
+  ul
+  .tab-nav-item:first-child
+  .tab-nav-item-link::after {
+  content: "";
+  @apply absolute bottom-0 left-0 w-px h-3 -mb-3 -ml-px bg-primary-600;
+}
+
+.tabs.tabs-type-1 > .tabs-nav ul .tab-nav-item.active {
+  @apply pb-1.75;
+}
+
+.tabs.tabs-type-1 > .tabs-nav ul .tab-nav-item.active::before {
+  content: "";
+  @apply block absolute top-0.5 right-0.75 left-0.75 h-1 bg-highlight-400;
+}
+
+.tabs.tabs-type-1 > .tabs-nav ul .tab-nav-item.active .tab-nav-item-link {
+  @apply text-primary cursor-default;
+}
+
+.tabs.tabs-type-1 > .tabs-nav ul .tab-nav-item-link {
+  @apply relative block py-1.75 px-3.75 border-t border-r border-l border-primary-600 rounded-t text-lg text-primary-600;
+}
+
+.tabs.tabs-type-1 > .tabs-nav ul .tab-nav-item-link-title {
+  @apply truncate;
+}
+
+.tabs.tabs-type-1 > .tabs-nav ul .tab-pane {
+  @apply space-y-8;
+}
+
+.tabs.tabs-type-1 > .tabs-content {
+  @apply p-4 border border-primary-600 rounded-lg bg-white overflow-hidden;
+}
+
+.tabs.tabs-type-1 > .tabs-content .tabs-content-header {
+  @apply flex items-start justify-between mb-4;
+}
+
+.tabs.tabs-type-2 > .tabs-nav {
+  @apply mb-0;
+}
+
+.tabs.tabs-type-2 > .tabs-nav ul {
+  @apply flex px-8 pb-5 space-x-8 lg:px-6 lg:space-x-14;
+}
+
+.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item {
+  @apply relative grow py-6 rounded bg-primary-100 text-lg text-primary-600 text-center lg:py-5.5;
+}
+
+.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item::before {
+  content: "";
+  @apply absolute top-0.5 left-0.5 block rounded bg-white;
+  width: calc(100% - var(--spacing));
+  height: calc(100% - var(--spacing));
+}
+
+.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item::after {
+  content: "";
+  @apply absolute left-0 bottom-0 -ml-4 -mb-5 block w-full h-3 rounded-t bg-primary-300 opacity-0;
+  width: calc(100% + var(--spacing) * 4 * 2);
+}
+
+.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item.active {
+  @apply text-primary font-bold;
+}
+
+.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item.active::after {
+  @apply opacity-100;
+}
+
+.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item.active:nth-child(odd) {
+  @apply bg-transparent bg-linear-to-r from-insight-web-title-start to-insight-web-title-end;
+}
+
+.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item.active:nth-child(odd)::after {
+  @apply bg-transparent bg-linear-to-r from-insight-web-title-start to-insight-web-title-end;
+}
+
+.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item.active:nth-child(even) {
+  @apply bg-transparent bg-linear-to-r from-insight-poi-title-start to-insight-poi-title-end;
+}
+
+.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item.active:nth-child(even)::after {
+  @apply bg-transparent bg-linear-to-r from-insight-poi-title-start to-insight-poi-title-end;
+}
+
+.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item.active .tab-nav-item-link {
+  @apply cursor-default;
+}
+
+.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item-link {
+  @apply relative;
+}
+
+.tabs.tabs-type-3 > .tabs-nav {
+  @apply flex items-start justify-between h-0 space-x-8 overflow-hidden lg:space-x-30;
+}
+
+.tabs.tabs-type-3 > .tabs-nav.show {
+  @apply h-auto mb-1;
+}
+
+.tabs.tabs-type-3 > .tabs-nav .tabs-nav-left {
+  @apply grow overflow-hidden;
+}
+
+.tabs.tabs-type-3 > .tabs-nav .tabs-nav-right {
+  @apply grow-0 shrink-0;
+}
+
+.tabs.tabs-type-3 > .tabs-nav ul {
+  @apply inline-flex items-start space-x-2;
+}
+
+.tabs.tabs-type-3 > .tabs-nav ul .tab-nav-item {
+  @apply relative rounded-t bg-primary-100;
+}
+
+.tabs.tabs-type-3 > .tabs-nav ul .tab-nav-item.active {
+  @apply bg-primary;
+}
+
+.tabs.tabs-type-3 > .tabs-nav ul .tab-nav-item.active .tab-nav-item-link {
+  @apply text-white cursor-default;
+}
+
+.tabs.tabs-type-3 > .tabs-nav ul .tab-nav-item-link {
+  @apply relative block py-2 px-8 rounded-t text-base text-primary;
+}
+
+.tabs.tabs-type-3 > .tabs-nav ul .tab-nav-item-link-title {
+  @apply truncate;
+}
+
+.tabs.tabs-type-3 > .tabs-nav ul .tab-pane {
+  @apply space-y-8;
+}
+
+.tabs.tabs-type-3 > .tabs-content {
+  @apply p-6 rounded-tr-lg rounded-b-lg bg-white shadow-default overflow-hidden;
+}
+
+.tabs.tabs-type-3 > .tabs-content .tabs-content-header {
+  @apply flex items-start justify-between;
+}
+
+.tabs.tabs-type-3 > .tabs-content .tabs-dropdown {
+  @apply mb-4;
+}
+
+.tabs.tabs-type-4 {
+  @apply flex;
+}
+
+.tabs.tabs-type-4 > .tabs-nav {
+  @apply grow-0 shrink-0;
+}
+
+.tabs.tabs-type-4 > .tabs-nav .tabs-nav-left ul {
+  @apply flex flex-col space-y-0.5;
+}
+
+.tabs.tabs-type-4 > .tabs-nav .tabs-nav-left ul .tab-nav-item {
+  @apply flex justify-between w-[184px] py-3 pl-3 pr-5 bg-primary-50 rounded-l-lg text-xs;
+}
+
+.tabs.tabs-type-4 > .tabs-nav .tabs-nav-left ul .tab-nav-item.active {
+  @apply bg-primary-600 text-white font-bold shadow-md;
+}
+
+.tabs.tabs-type-4 > .tabs-nav .tabs-nav-left ul .tab-nav-item-link {
+  @apply block w-full;
+}
+
+.tabs.tabs-type-4 .tabs-content {
+  @apply grow -ml-2 p-4 bg-white border border-primary-600 rounded-lg shadow-md;
+}
+
+.tabs.tabs-type-4 .tabs-content > div {
+  @apply flex min-h-full;
+}
+
+.tabs.tabs-type-4 .tabs-content > div .tabs-content-body {
+  @apply w-full;
+}
+
+.tabs.tabs-type-5 > .tabs-nav {
+  @apply flex items-start justify-between h-0 mb-4 space-x-8 overflow-hidden lg:space-x-30;
+}
+
+.tabs.tabs-type-5 > .tabs-nav.show {
+  @apply h-auto;
+}
+
+.tabs.tabs-type-5 > .tabs-nav.show .tabs-nav-left::before {
+  content: "";
+  @apply absolute right-0 bottom-0 left-0 h-px rounded-[1px] bg-primary-300;
+}
+
+.tabs.tabs-type-5 > .tabs-nav .tabs-nav-left {
+  @apply relative grow overflow-hidden;
+}
+
+.tabs.tabs-type-5 > .tabs-nav .tabs-nav-right {
+  @apply grow-0 shrink-0;
+}
+
+.tabs.tabs-type-5 > .tabs-nav ul {
+  @apply inline-flex items-start;
+}
+
+.tabs.tabs-type-5 > .tabs-nav ul .tab-nav-item {
+  @apply relative;
+}
+
+.tabs.tabs-type-5 > .tabs-nav ul .tab-nav-item.active::after {
+  content: "";
+  @apply block absolute right-0 bottom-0 left-0 h-1 rounded-[1px] bg-primary;
+}
+
+.tabs.tabs-type-5 > .tabs-nav ul .tab-nav-item.active .tab-nav-item-link {
+  @apply cursor-default;
+}
+
+.tabs.tabs-type-5 > .tabs-nav ul .tab-nav-item.disabled .tab-nav-item-link {
+  @apply text-pgray-4 cursor-default;
+}
+
+.tabs.tabs-type-5 > .tabs-nav ul .tab-nav-item-link {
+  @apply relative block px-4 pb-2 text-lg text-pgray-2;
+}
+
+.tabs.tabs-type-5 > .tabs-nav ul .tab-nav-item-link-title {
+  @apply truncate;
+}
+
+.tabs.tabs-type-5 > .tabs-nav ul .tab-pane {
+  @apply space-y-8;
+}
+
+.tabs.tabs-type-6 > .tabs-nav {
+  @apply flex items-start justify-between h-0 mb-6 space-x-8 overflow-hidden lg:space-x-30;
+}
+
+.tabs.tabs-type-6 > .tabs-nav.show {
+  @apply h-auto;
+}
+
+.tabs.tabs-type-6 > .tabs-nav.show .tabs-nav-left::before {
+  content: "";
+  @apply absolute right-0 bottom-0 left-0 h-1 bg-pgray-5;
+}
+
+.tabs.tabs-type-6 > .tabs-nav .tabs-nav-left {
+  @apply relative grow-0 shrink-0;
+}
+
+.tabs.tabs-type-6 > .tabs-nav .tabs-nav-right {
+  @apply grow-0 shrink-0;
+}
+
+.tabs.tabs-type-6 > .tabs-nav ul {
+  @apply inline-flex items-start;
+}
+
+.tabs.tabs-type-6 > .tabs-nav ul .tab-nav-item {
+  @apply relative;
+}
+
+.tabs.tabs-type-6 > .tabs-nav ul .tab-nav-item.active::after {
+  content: "";
+  @apply block absolute right-0 bottom-0 left-0 h-1 bg-blue-1;
+}
+
+.tabs.tabs-type-6 > .tabs-nav ul .tab-nav-item.active .tab-nav-item-link {
+  @apply text-blue-1 cursor-default;
+}
+
+.tabs.tabs-type-6 > .tabs-nav ul .tab-nav-item.disabled .tab-nav-item-link {
+  @apply text-pgray-4 cursor-default;
+}
+
+.tabs.tabs-type-6 > .tabs-nav ul .tab-nav-item-link {
+  @apply relative block pt-1 px-6 pb-2 text-base text-secondary-500;
+}
+
+.tabs.tabs-type-6 > .tabs-nav ul .tab-nav-item-link-title {
+  @apply truncate;
+}
+
+.tabs.tabs-type-6 > .tabs-nav ul .tab-pane {
+  @apply space-y-8;
+}
+
+.tabs > .tabs-content .tabs > .tabs-content {
+  @apply shadow-md;
+}
+</style>