@mptw/skylens-ui 1.3.15 → 1.4.0

package/components/SLNotification.vue

@@ -0,0 +1,151 @@
+<template lang="pug">
+  Transition(
+    @before-enter='onBeforeEnter',
+    @enter='onEnter',
+    @after-enter='onAfterEnter',
+    @enter-cancelled='onAfterEnter',
+    @before-leave='onBeforeLeave',
+    @leave='onLeave',
+    @after-leave='onAfterLeave',
+    @leave-cancelled='onAfterLeave',
+  )
+    .notification(v-if='isShow')
+      .notification-wrapper {{ content }}
+  </template>
+  
+  <script lang="ts">
+  import gsap from 'gsap';
+  
+  export default defineComponent({
+    name: 'SLNotification',
+    props: {
+      isShow: {
+        type: Boolean,
+        default: false,
+      },
+      content: {
+        type: String,
+        default: '',
+      },
+    },
+    emits: ['update:isShow'],
+    setup(props, { emit }) {
+      const { isShow } = toRefs(props);
+  
+      let timeoutId: any = null;
+  
+      function onBeforeEnter(el: Element) {
+        const wrapperEl = el.querySelector('.notification-wrapper');
+  
+        if (wrapperEl) {
+          gsap.set(wrapperEl, {
+            alpha: 0
+          });
+        }
+      }
+  
+      function onEnter(el: Element, done: () => void) {
+        const wrapperEl = el.querySelector('.notification-wrapper');
+  
+        if (wrapperEl) {
+          gsap.to(wrapperEl, {
+            alpha: 1,
+            duration: 0.3,
+            onComplete: () => {
+              done();
+            }
+          })
+        } else {
+          done();
+        }
+      }
+  
+      function onAfterEnter(el: Element) {
+        const wrapperEl = el.querySelector('.notification-wrapper');
+  
+        if (wrapperEl) {
+          gsap.set(wrapperEl, {
+            alpha: 1
+          });
+        }
+      }
+  
+      function onBeforeLeave(el: Element) {
+        const wrapperEl = el.querySelector('.notification-wrapper');
+  
+        if (wrapperEl) {
+          gsap.set(wrapperEl, {
+            alpha: 1
+          });
+        }
+      }
+  
+      function onLeave(el: Element, done: () => void) {
+        const wrapperEl = el.querySelector('.notification-wrapper');
+  
+        if (wrapperEl) {
+          gsap.to(wrapperEl, {
+            alpha: 0,
+            duration: 0.3,
+            onComplete: () => {
+              done();
+            }
+          })
+        } else {
+          done();
+        }
+      }
+  
+      function onAfterLeave(el: Element) {
+        const wrapperEl = el.querySelector('.notification-wrapper');
+  
+        if (wrapperEl) {
+          gsap.set(wrapperEl, {
+            alpha: 0
+          });
+        }
+      }
+  
+      function delayHide() {
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+        timeoutId = null;
+  
+        timeoutId = setTimeout(() => {
+          emit('update:isShow', false);
+        }, 2000);
+      }
+  
+      watch(isShow, () => {
+        if (isShow.value) {
+          delayHide();
+        }
+      });
+  
+      onBeforeUnmount(() => {
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+        timeoutId = null;
+      })
+  
+      return {
+        onBeforeEnter,
+        onEnter,
+        onAfterEnter,
+        onBeforeLeave,
+        onLeave,
+        onAfterLeave,
+      };
+    },
+  });
+  </script>
+  
+  <style lang="stylus">
+  .notification
+    @apply s('z-[100]') fixed top-0 left-0 w-full h-full pointer-events-none
+  
+    &-wrapper
+      @apply absolute s('top-1/2') s('left-1/2') p-4 s('bg-backdrop/80') rounded text-base text-white s('-translate-x-1/2') s('-translate-y-1/2') shadow-popup-sm
+  </style>

package/components/SLTabs.vue

@@ -1,428 +1,430 @@
 <template lang="pug">
-SLSitePage.m03-02p-page
-  ClientOnly
-    Teleport(to="#app-header-welcome-message") 受眾行為內單元提供單次的資料分析，可隨時查看歷史分析結果
-    Teleport(to='#header-breadcrumbs')
-      SLBreadcrumbs(:items='["受眾試算"]' info="依照設定的投放條件，在媒體投放前試算可接觸的受眾數量")
-  template(#site-page-header)
-    .site-page-header
-      .site-page-header-left
-        .site-page-title 受眾試算
-        .site-page-desc
-          span 依照設定的受眾條件，在媒體投放前試算可接觸的受眾數量
-          a(href='javascript:;')
-            SLIcon(icon='book')
-            span 單元導覽
-        .site-page-actions
-          SLButton(title='新增受眾包', post-icon='chevron-right', color='primary' class='create-btn')
-      .site-page-header-right
-        img(src='~/assets/images/m03/02p/m0302p-page-logo.svg')
-  SLNewTabs(:type='5')
-    template(#tabs-nav-right)
-      .inline-flex.items-center.space-x-4
-        SLSearchInput(
-          size='sm',
-          placeholder='搜尋標題名稱（部分字元即可）',
-          class='m0302p-search-input'
-        )
-    SLTab(title='受眾列表 (125)')
-      SLCard.audience-package-card
-        .audience-package
-          .audience-package-header
-            .header-left
-              SLButton(
-                title='新增受眾包',
-                color='primary',
-                size='lg',
-                @click='onClickedAdd'
-              )
-            .header-right
-              SLPagination(
-                v-if='totalCount > 0',
-                :total='totalCount',
-                :perPage='perPage',
-                :page='currentPage',
-                :showInfo='true'
-                @update:perPage='onUpdatedPerPage'
-                @update:page='onUpdatedPage'
-              )
-          .audience-package-body
-            template(v-if='tasks.length > 0')
-              ModuleM12AudiencePackageListItem(
-                v-for='task in tasks',
-                :task='task',
-                :key='task.id',
-                @delete='onClickedDelete',
-                @repack='onClickedRepack'
-              )
-            template(v-else) 沒有任何受眾包
-          .audience-package-footer
-            SLPagination(
-              v-if='totalCount > 0',
-              :total='totalCount',
-              :perPage='perPage',
-              :page='currentPage',
-              :showInfo='true'
-              @update:perPage='onUpdatedPerPage'
-              @update:page='onUpdatedPage'
-            )
-    SLTab(title='投放 (125)')
-  ClientOnly
-    Teleport(to="#popup")
-      SLConfirmModal(
-        v-model:show='isShowDeleteConfirmModal',
-        title='刪除受眾包',
-        confirmButtonTitle='刪除',
-        confirmButtonColor='danger',
-        confirmButtonVariant='',
-        modalClass='m12-delete-confirm-modal',
-        @confirm='onDeleteApply',
-        data-cy="delete-confirm-modal"
+.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'
       )
-        SLIcon(icon='exclamation-triangle')
-        p 確定要刪除此受眾包嗎？
+        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 uniqueId from 'lodash/uniqueId';
-import { format as formatDate } from 'date-fns';
-import useAppStore from '~/store/app';
-import useM12Store from '~/store/app/m12';
-import DomainUnionSubset from '@/models/DomainUnionSubset';
-import LatlonUnionSubset from '@/models/LatlonUnionSubset';
-import type { IAudTaskResponse, IUnionSubsetSource } from '~/interface/IAudTask';
-import type IAudTask from '~/interface/IAudTask';
-import { AudTaskStatus, AudTaskCMType } from '~/interface/IAudTask';
-
-const PER_PAGE = 10;
-
-function normalizeTask(task: IAudTaskResponse): IAudTask {
-  let gender = '';
-
-  switch ((task.genders || [])[0]) {
-    case '0':
-      gender = '未知';
-      break;
-    case '1':
-      gender = '男性';
-      break;
-    case '2':
-      gender = '女性';
-      break;
-    case '3':
-      gender = '不限';
-      break;
-    default:
-      break;
-  }
-
-  return {
-    id: task.task_id || '',
-    name: task.name || '',
-    status: task.status || AudTaskStatus.Run,
-    includeSets: JSON.parse(task.and || '[]').map((includeSets: Array<IUnionSubsetSource>) => {
-      return {
-        id: uniqueId(),
-        sets: includeSets
-          .map((includeSet) => {
-            if (includeSet.domains) {
-              return DomainUnionSubset.normalize(includeSet);
-            }
-            if (includeSet.pg_id) {
-              return LatlonUnionSubset.normalize(includeSet);
-            }
-            return null;
-          })
-          .filter((includeSet) => !!includeSet),
-      };
-    }),
-    differenceSets: JSON.parse(task.not || '[]').map((differenceSets: Array<IUnionSubsetSource>) => {
-      return {
-        id: uniqueId(),
-        sets: differenceSets
-          .map((differenceSet) => {
-            if (differenceSet.domains) {
-              return DomainUnionSubset.normalize(differenceSet);
-            }
-            if (differenceSet.pg_id) {
-              return LatlonUnionSubset.normalize(differenceSet);
-            }
-            return null;
-          })
-          .filter((differenceSet) => !!differenceSet),
-      };
-    }),
-    uuid: task.uuid || '',
-    steps: task.steps || [],
-    ages: (task.ages || []).map((age) => {
-      let name = '';
-      switch (age) {
-        case 'A':
-          name = '17以下';
-          break;
-        case 'B':
-          name = '18 - 24';
-          break;
-        case 'C':
-          name = '25 - 34';
-          break;
-        case 'D':
-          name = '35 - 44';
-          break;
-        case 'E':
-          name = '45 - 54';
-          break;
-        case 'F':
-          name = '55 - 64';
-          break;
-        case 'G':
-          name = '65 - 74';
-          break;
-        case 'H':
-          name = '75以上';
-          break;
-        default:
-          break;
-      }
+import { fromEvent, interval, Subscription } from "rxjs";
+import { debounce, startWith } from "rxjs/operators";
+import { SLDistributor } from "#components";
 
-      return {
-        key: age,
-        name,
-      };
-    }),
-    gender: {
-      key: (task.genders || [])[0],
-      name: gender,
+type SLDistributorType = InstanceType<typeof SLDistributor>;
+
+export default defineComponent({
+  name: "SLTabs",
+  components: {},
+  props: {
+    size: {
+      type: String,
+      default: "",
+      validator: (value: string) => ["", "xs", "sm"].includes(value),
     },
-    workAt: task.workCity || [],
-    homeAt: task.homeCity || [],
-    cms: (task.cm || []).map((cm) => {
-      let name = '';
-      switch (cm) {
-        case AudTaskCMType.GID:
-          name = 'Google瀏覽器受眾';
-          break;
-        case AudTaskCMType.IFA:
-          name = '行動裝置受眾';
-          break;
-        default:
-          break;
+    navMode: {
+      type: String,
+      default: "",
+    },
+    type: {
+      type: Number,
+      default: 1,
+      validator: (value: number) => [1, 2, 3, 4, 5].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 activeTabIndex = ref(activeTab.value || 0);
+    const tabTitles = ref<Array<string>>([]);
+    const showDropdown = ref(false);
+    const tabItemsOversizeProxy = ref(false);
+
+    let observer: MutationObserver | null = null;
+    let resizeSubscriber: Subscription | null = null;
+
+    const tabsClass = computed(() => {
+      const classes: Array<string> = [`tabs-type-${type.value}`];
+
+      if (size.value !== "") {
+        classes.push(`tabs-${size.value}`);
       }
-      const foundCM = (task.reports?.cm || []).find(
-        (reportsCM) => reportsCM.name === cm
-      );
 
-      let cmStatus = foundCM?.status || AudTaskStatus.Run;
-      if (task.status === AudTaskStatus.Warn || task.status === AudTaskStatus.Error) {
-        cmStatus = AudTaskStatus.Error;
-      }
+      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;
+      },
+    });
 
-      const sourceCount = foundCM?.sourceCount || 0;
-      const targetCount = foundCM?.targetCount || 0;
-
-      return {
-        key: cm,
-        name,
-        status: cmStatus,
-        sourceCount: numberToLocaleString(sourceCount, { NaNString: '-' }) as string,
-        targetCount: numberToLocaleString(targetCount, { NaNString: '-' }) as string,
-        ratio: sourceCount ? toFixed((targetCount / sourceCount) * 100, 2, { NaNString: '-', unit: '%' }) as string : '0.00%',
-      };
-    }),
-    profile: task.reports?.profile || null,
-    interest: task.reports?.interest || null,
-    createdAt: formatDate(task.created_at ? new Date(task.created_at) : new Date(), 'yyyy-MM-dd HH:mm:ss'),
-    updatedAt: formatDate(task.updated_at ? new Date(task.updated_at) : new Date(), 'yyyy-MM-dd HH:mm:ss'),
-  };
-}
+    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;
+        }
+      });
+    }
 
-export default defineComponent({
-  name: 'M0302IndexPage',
-  components: {},
-  setup() {
-    definePageMeta({
-      middleware: ['acl-route'],
+    function changeTabTo(newTab: number) {
+      activeTabIndex.value = newTab;
+      emit("update:activeTab", newTab);
+    }
+
+    function onClickedTab(i: number) {
+      changeTabTo(i);
+    }
+
+    watch(activeTab, () => {
+      activeTabIndex.value = activeTab.value || 0;
     });
 
-    const router = useRouter();
+    onMounted(() => {
+      resizeSubscriber = fromEvent(window, "resize")
+        .pipe(debounce(() => interval(500)))
+        .pipe(startWith(0))
+        .subscribe(() => {
+          caculateTabs();
+        });
 
-    const appStore = useAppStore();
-    const m12Store = useM12Store();
+      if (navComp.value) {
+        observer = new MutationObserver(caculateTabs);
+        observer.observe(navComp.value.$el, {
+          characterData: true,
+          attributes: false,
+          childList: true,
+          subtree: true,
+        });
+      }
+    });
 
-    const loading = ref(false);
-    const tasks = ref<Array<IAudTask>>([]);
-    const search = ref('');
-    const totalCount = ref(0);
-    const currentPage = ref(1);
-    const isShowDeleteConfirmModal = ref(false);
-    const perPage = ref(PER_PAGE);
+    onBeforeUnmount(() => {
+      if (resizeSubscriber) {
+        resizeSubscriber.unsubscribe();
+      }
+      if (observer) {
+        observer.disconnect();
+      }
+      resizeSubscriber = null;
+      observer = null;
+    });
 
-    let taskId = '';
+    return {
+      tabsContentBody,
+      tabsNavLeftEl,
+      navComp,
+      activeTabIndex,
+      tabTitles,
+      showDropdown,
+      tabItemsOversize,
+      tabsClass,
+      currentTab,
+      changeTabTo,
+      onClickedTab,
+    };
+  },
+});
+</script>
 
-    const project = computed(() => appStore.project);
+<style lang="stylus">
+.tabs
+  &.tabs-sm
+    &.tabs-type-1
+      & > .tabs-nav
+        ul
+          .tab-nav-item
+            &-link
+              @apply text-sm
 
-    async function fetch() {
-      loading.value = true;
+  &.tabs-xs
+    &.tabs-type-1
+      & > .tabs-nav
+        ul
+          .tab-nav-item
+            &.active
+              &:before
+                @apply hidden
 
-      const { data, error } = await m12Store.getTasks({
-        offset: (currentPage.value - 1) * perPage.value,
-        limit: perPage.value,
-      });
-      
-      loading.value = false;
-
-      if (error) {
-        appStore.addAlert({
-          title: '錯誤',
-          color: 'danger',
-          message: error.message,
-        });
-      }
+            &-link
+              @apply s("py-0.75") text-base
 
-      totalCount.value = data?.aud_task_list.totalCount || 0;
-      tasks.value = (data?.aud_task_list.data || []).map((task) => normalizeTask(task));
-    }
+  &.tabs-type-1
+    & > .tabs-nav
+      @apply flex items-start justify-between h-0 space-x-8 overflow-hidden
+      @apply s('lg:space-x-30')
 
-    function onClickedAdd() {
-      router.push('/application/m03/02/create');
-    }
+      &.show
+        @apply h-auto s("-mb-1.5")
 
-    function onClearedSearch() {
-      search.value = '';
-    }
+      .tabs-nav-left
+        @apply flex-grow overflow-hidden
 
-    function onClickedDelete(id: string) {
-      taskId = id;
-      isShowDeleteConfirmModal.value = true;
-    }
+      .tabs-nav-right
+        @apply flex-grow-0 flex-shrink-0
 
-    function onClickedRepack(id: string) {
-      const foundTask = tasks.value.find((task) => task.id === id);
-      if (!foundTask) return;
+      ul
+        @apply inline-flex items-start s("-space-x-px")
 
-      m12Store.setTask(foundTask);
-      router.push(`/application/m03/02/create`);
-    }
+        .tab-nav-item
+          @apply relative rounded-t bg-white
 
-    async function onDeleteApply() {
-      isShowDeleteConfirmModal.value = false;
+          &:first-child
+            .tab-nav-item-link
+              &:after
+                content ""
+                @apply absolute bottom-0 left-0 w-px h-3 s("-mb-3") s("-ml-px") bg-border
 
-      const { error } = await m12Store.deleteTask(taskId);
+          &.active
+            @apply s("pb-1.75")
 
-      if (error) {
-        appStore.addAlert({
-          color: 'danger',
-          code: error.code,
-          message: error.message,
-        });
-      }
+            &:before
+              content ""
+              @apply block absolute s("top-0.5") s("right-0.75") s("left-0.75") h-1 bg-secondary-hover
 
-      if (tasks.value.length === 1) {
-        currentPage.value = Math.max(1, currentPage.value - 1);
-      }
-      fetch();
-    }
+            .tab-nav-item-link
+              @apply text-primary cursor-default
 
-    function onUpdatedPerPage(newPerPage: number) {
-      perPage.value = newPerPage;
-      currentPage.value = 1;
-      fetch();
-    }
+          &-link
+            @apply relative block s("py-1.75") s("px-3.75") border-t border-r border-l border-border rounded-t text-lg text-primary-light
 
-    function onUpdatedPage(newPage: number) {
-      currentPage.value = newPage;
-    }
+            &-title
+              @apply truncate
 
-    watch(search, () => {
-      currentPage.value = 1;
-    });
-    watch(currentPage, () => {
-      fetch();
-    });
-    watch(project, () => {
-      currentPage.value = 1;
-      fetch();
-    });
+        .tab-pane
+          @apply space-y-8
 
-    onMounted(() => {
-      fetch();
-    });
+    & > .tabs-content
+      @apply p-4 border border-border rounded-lg bg-white overflow-hidden
 
-    return {
-      tasks,
-      search,
-      totalCount,
-      currentPage,
-      loading,
-      isShowDeleteConfirmModal,
-      perPage,
-      onClickedAdd,
-      onClearedSearch,
-      onClickedDelete,
-      onClickedRepack,
-      onDeleteApply,
-      onUpdatedPerPage,
-      onUpdatedPage,
-    };
-  },
-});
-</script>
+      .tabs-content-header
+        @apply flex items-start justify-between mb-4
 
-<style lang="stylus">
-.m03-02p-page
-  .site-page-header
-    @apply p-6 bg-white rounded-lg shadow
+  &.tabs-type-2
+    & > .tabs-nav
+      @apply mb-0
+
+      ul
+        @apply flex px-8 pb-5 space-x-8
+        @apply s('lg:px-6') s('lg:space-x-14')
+
+        .tab-nav-item
+          @apply relative flex-grow s('py-6') rounded bg-bg text-lg text-primary-hover text-center
+          @apply s('lg:py-5.5')
+
+          &:before
+            content ""
+            @apply absolute s('top-0.5') s('left-0.5') block rounded bg-white
+            width calc(100% - theme('spacing.1'))
+            height calc(100% - theme('spacing.1'))
+
+          &:after
+            content ""
+            @apply absolute left-0 bottom-0 s('-ml-4') s('-mb-5') block w-full h-3 rounded-t bg-primary-lighter opacity-0
+            width calc(100% + theme('spacing.4') * 2)
+
+          &.active
+            @apply text-primary font-bold
+
+            &:after
+              @apply opacity-100
+
+            &:nth-child(odd)
+              @apply bg-transparent s('bg-gradient-to-r') s('from-insight-web-title-start') s('to-insight-web-title-end')
+
+              &:after
+                @apply bg-transparent s('bg-gradient-to-r') s('from-insight-web-title-start') s('to-insight-web-title-end')
+
+            &:nth-child(even)
+              @apply bg-transparent s('bg-gradient-to-r') s('from-insight-poi-title-start') s('to-insight-poi-title-end')
+
+              &:after
+                @apply bg-transparent s('bg-gradient-to-r') s('from-insight-poi-title-start') s('to-insight-poi-title-end')
+
+            .tab-nav-item-link
+              @apply cursor-default
+
+          &-link
+            @apply relative
+
+  &.tabs-type-3
+    & > .tabs-nav
+      @apply flex items-start justify-between h-0 space-x-8 overflow-hidden
+      @apply s('lg:space-x-30')
+
+      &.show
+        @apply h-auto mb-1
+
+      .tabs-nav-left
+        @apply flex-grow overflow-hidden
+
+      .tabs-nav-right
+        @apply flex-grow-0 flex-shrink-0
+
+      ul
+        @apply inline-flex items-start space-x-2
+
+        .tab-nav-item
+          @apply relative rounded-t bg-bg
+
+          &.active
+            @apply bg-primary
+
+            .tab-nav-item-link
+              @apply text-white cursor-default
+
+          &-link
+            @apply relative block py-2 px-8 rounded-t text-base text-primary
+
+            &-title
+              @apply truncate
+
+        .tab-pane
+          @apply space-y-8
+
+    & > .tabs-content
+      @apply p-6 rounded-tr-lg rounded-b-lg bg-white shadow overflow-hidden
+
+      .tabs-content-header
+        @apply flex items-start justify-between
+
+      .tabs-dropdown
+        @apply mb-4
+
+  &.tabs-type-4
+    @apply flex
+
+    & > .tabs-nav
+      @apply flex-grow-0 flex-shrink-0
+
+      .tabs-nav-left
+        ul
+          @apply flex flex-col s('space-y-0.5')
+
+          .tab-nav-item
+            @apply flex justify-between s('w-[184px]') py-3 pl-3 pr-5 bg-bg-middle rounded-l-lg text-xs
+
+            &.active
+              @apply bg-primary-hover text-white font-bold shadow-md
+
+            &-link
+              @apply block w-full
+
+    .tabs-content
+      @apply flex-grow s('-ml-2') p-4 bg-white border border-border rounded-lg shadow-md
 
-    &-left
-      .site-page-title
-        @apply mb-2 s('text-3.33xl') text-primary font-bold
+      & > div
+        @apply flex min-h-full
 
-      .site-page-desc
-        @apply flex items-center mb-6 space-x-2 text-sm text-gray-2 font-medium
+        .tabs-content-body
+          @apply w-full
 
-        a
-          @apply inline-flex items-center space-x-1 text-blue-1 font-normal
+  &.tabs-type-5
+    & > .tabs-nav
+      @apply relative flex items-start justify-between h-0 mb-4 space-x-8 overflow-hidden
+      @apply s('lg:space-x-30')
 
-      .site-page-actions
-        .create-btn
-          @apply s('py-1.75') s('pl-[23px]') s('pr-3.75') rounded-lg text-lg
+      &.show
+        @apply h-auto
 
-  .site-page-content
-    @apply p-0 bg-transparent
+        &:before
+          content ""
+          @apply absolute right-0 bottom-0 left-0 h-px s('rounded-[1px]') bg-primary-lighter
 
-    .m0302p-search-input
-      @apply s('w-[238px]')
+      .tabs-nav-left
+        @apply flex-grow overflow-hidden
 
-      .input-group
-        .input.input-sm
-          input
-            @apply text-sm
+      .tabs-nav-right
+        @apply flex-grow-0 flex-shrink-0
 
-    & > .card
-      @apply border-0 rounded-lg shadow-none
+      ul
+        @apply inline-flex items-start
 
-    .audience-package-card
-      .audience-package
-        @apply space-y-4
+        .tab-nav-item
+          @apply relative
 
-        &-header
-          @apply flex items-end justify-between
+          &.active
+            &:after
+              content ""
+              @apply block absolute right-0 bottom-0 left-0 h-1 s('rounded-[1px]') bg-primary
 
-          .header-left
-            @apply flex-shrink-0 flex-grow-0
+            .tab-nav-item-link
+              @apply cursor-default
 
-          .header-right
-            @apply flex-grow flex items-end justify-end
+          &-link
+            @apply relative block  px-4 pb-2 text-lg text-gray-2
 
-        &-body
-          @apply space-y-4
+            &-title
+              @apply truncate
 
-.m12-delete-confirm-modal
-  .modal-body
-    &-content
-      @apply flex flex-col items-center justify-center space-y-6 text-base text-gray-2
+        .tab-pane
+          @apply space-y-8
 
-      .icon
-        @apply text-16xl text-danger
+  & > .tabs-content
+    .tabs
+      & > .tabs-content
+        @apply shadow-md
 </style>
-  
+    

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mptw/skylens-ui",
   "type": "module",
-  "version": "1.3.15",
+  "version": "1.4.0",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",