feat/things-munaja: content switcher

app/components/pub/my-ui/content-switcher/content-switcher.vue

@@ -1,40 +1,33 @@
 <script setup lang="ts">
 const props = defineProps<{
   height?: number
+  class?: string
   activeTab?: 1 | 2
 }>()
 
+const classVal = computed(() => {
+  return props.class ? props.class : ''
+})
 const activeTab = ref(props.activeTab || 1)
 
-function handleClick(value: 1 | 2) {
-  activeTab.value = value
+function switchActiveTab() {
+  activeTab.value = activeTab.value === 1 ? 2 : 1
 }
 </script>
 
 <template>
-  <div class="content-switcher" :style="`height: ${height || 200}px`">
-    <div :class="`${activeTab === 1 ? 'active' : 'inactive'}`">
-      <div class="content-wrapper">
-        <div>
-          <slot name="content1" />
-        </div>
+  <div :class="`content-switcher ${classVal}`" :style="height ? `height:${200}px` : ''">
+    <div class="wrapper">
+      <div :class="`item item-1 ${activeTab === 1 ? 'active' : 'inactive'}`">
+        <slot name="content1" />
       </div>
-      <div class="content-nav">
-        <button @click="handleClick(1)">
-          <Icon name="i-lucide-chevron-right" />
+      <div :class="`nav border-slate-300 ${ activeTab == 1 ? 'border-l' : 'border-r'}`">
+        <button @click="switchActiveTab()" class="!p-0 w-full h-full">
+          <Icon :name="activeTab == 1 ? 'i-lucide-chevron-left' : 'i-lucide-chevron-right'" class="text-3xl" />
         </button>
       </div>
-    </div>
-    <div :class="`${activeTab === 2 ? 'active' : 'inactive'}`">
-      <div class="content-nav">
-        <button @click="handleClick(2)">
-          <Icon name="i-lucide-chevron-left" />
-        </button>
-      </div>
-      <div class="content-wrapper">
-        <div>
-          <slot name="content2" />
-        </div>
+      <div :class="`item item-2 ${activeTab === 2 ? 'active' : 'inactive'}`">
+        <slot name="content2" />
       </div>
     </div>
   </div>
@@ -42,45 +35,24 @@ function handleClick(value: 1 | 2) {
 
 <style>
   .content-switcher {
-    @apply flex overflow-hidden gap-3
+    @apply overflow-hidden
   }
-  .content-switcher > * {
-    @apply border border-slate-300 rounded-md flex overflow-hidden
+  .wrapper {
+    @apply flex w-[200%] h-full
+  }
+  .item {
+    @apply w-[calc(50%-60px)]
   }
 
-  .content-wrapper {
-    @apply p-4 2xl:p-5 overflow-hidden grow
+  .item-1.active {
+    @apply ms-0 transition-all duration-500 ease-in-out
   }
-  .inactive .content-wrapper {
-    @apply p-0 w-0
+  .item-1.inactive {
+    @apply -ms-[calc(50%-60px)] transition-all duration-500 ease-in-out
   }
 
-  .content-nav {
-    @apply h-full flex flex-row items-center justify-center content-center !text-2xl overflow-hidden
+  .nav {
+    @apply h-full w-[60px] flex flex-row items-center justify-center content-center !text-2xl overflow-hidden
   }
 
-  .content-nav button {
-    @apply pt-2 px-2 h-full w-full
-  }
-
-  /* .content-switcher .inactive > .content-wrapper {
-    @apply w-0 p-0 opacity-0 transition-all duration-500 ease-in-out
-  } */
-  .content-switcher .inactive {
-    @apply w-16 transition-all duration-500 ease-in-out
-  }
-  .content-switcher .inactive > .content-nav {
-    @apply w-full transition-all duration-100 ease-in-out
-  }
-
-  .content-switcher .active {
-    @apply grow transition-all duration-500 ease-in-out
-  }
-  .content-switcher .active > .content-nav {
-    @apply w-0 transition-all duration-100 ease-in-out
-  }
-  /* .content-switcher .active > .content-wrapper {
-    @apply w-full delay-1000 transition-all duration-1000 ease-in-out
-  } */
-
 </style>

app/components/pub/my-ui/doc-entry/block.vue

@@ -53,8 +53,8 @@ const settingClass = computed(() => {
       '[&_.cell]:2xl:flex',
     ][getBreakpointIdx(props.cellFlexPoint)]
     cls += ' [&_.label]:flex-shrink-0 ' + [
-      '[&_.label]:md:w-12 [&_.label]:xl:w-20',
-      '[&_.label]:md:w-16 [&_.label]:xl:w-24',
+      '[&_.label]:md:w-16 [&_.label]:xl:w-20',
+      '[&_.label]:md:w-20 [&_.label]:xl:w-24',
       '[&_.label]:md:w-24 [&_.label]:xl:w-32',
       '[&_.label]:md:w-32 [&_.label]:xl:w-40',
       '[&_.label]:md:w-44 [&_.label]:xl:w-52',