@phoenix-cg/v-tabs 0.2.0 → 0.2.2

package/dist/v-tabs.css

@@ -1 +1 @@
-.v-tabs{position:relative}.v-tabs_inner{display:flex}.v-tabs_tab{padding:10px 20px;background:#ddd;cursor:pointer;-webkit-user-select:none;user-select:none}.v-tabs_tab.__active{background:#b6b5b5}.v-tabs.__disabled{pointer-events:none;opacity:.5}.v-tabs_slider{position:absolute;height:2px;background:#000;left:0;bottom:0;transition:all .2s ease-in-out}
+.v-tabs-wrap{position:relative;display:inline-flex;max-width:100%}.v-tabs{position:relative}.v-tabs_inner{display:flex}.v-tabs_tab{padding:10px 20px;background:#ddd;cursor:pointer;-webkit-user-select:none;user-select:none}.v-tabs_tab.__active{background:#b6b5b5}.v-tabs.__disabled{pointer-events:none;opacity:.5}.v-tabs_slider{position:absolute;height:2px;background:#000;left:0;bottom:0;transition:all .2s ease-in-out}.v-tabs-hint{transition:opacity .3s ease-in-out;opacity:0;pointer-events:none}.v-tabs-hint.__visible{opacity:1}

package/dist/v-tabs.es.js

@@ -1,10 +1,10 @@
-import { mergeModels as y, useModel as R, ref as C, useTemplateRef as v, onMounted as x, onBeforeUnmount as z, watch as E, createElementBlock as n, openBlock as s, normalizeClass as b, createElementVNode as L, createCommentVNode as N, Fragment as h, renderList as $, renderSlot as M, toDisplayString as S, createTextVNode as F, normalizeStyle as O, nextTick as q } from "vue";
-const A = { class: "v-tabs_inner" }, D = ["data-id", "onClick"], P = {
+import { mergeModels as S, useModel as F, ref as b, useTemplateRef as w, computed as M, onMounted as P, onBeforeUnmount as q, watch as g, createElementBlock as r, openBlock as n, createElementVNode as k, createBlock as B, normalizeClass as C, createCommentVNode as I, Fragment as T, renderList as A, resolveDynamicComponent as H, mergeProps as U, withCtx as X, renderSlot as j, toDisplayString as _, createTextVNode as G, normalizeStyle as J, unref as K, nextTick as Q } from "vue";
+const W = { class: "v-tabs-wrap" }, Y = { class: "v-tabs_inner" }, Z = {
   key: 0,
   class: "v-tabs_tab_title"
-}, X = {
+}, te = {
   __name: "VTabs",
-  props: /* @__PURE__ */ y({
+  props: /* @__PURE__ */ S({
     direction: {
       type: String,
       default: "horizontal"
@@ -36,87 +36,137 @@ const A = { class: "v-tabs_inner" }, D = ["data-id", "onClick"], P = {
     wrapTitle: {
       type: Boolean,
       default: !1
+    },
+    mobileHintComponent: {
+      type: String
+    },
+    mobileHintShowDelay: {
+      type: Number,
+      default: 1500
+    },
+    mobileHintHideDelay: {
+      type: Number,
+      default: 2e3
+    },
+    tabComponent: {
+      type: String,
+      default: "div"
+    },
+    tabProps: {
+      type: Function,
+      default: () => ({})
     }
   }, {
     modelValue: {},
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ y(["update:modelValue"], ["update:modelValue"]),
-  setup(a, { emit: g }) {
-    const e = a, r = R(a, "modelValue"), k = g, u = C({});
-    let i = null;
-    const B = v("tabs"), f = v("root");
-    function w() {
-      e.withSlider && (i = new ResizeObserver(() => {
-        d();
-      }), B.value.forEach((t) => {
-        i.observe(t);
+  emits: /* @__PURE__ */ S(["update:modelValue"], ["update:modelValue"]),
+  setup(i, { emit: V }) {
+    const e = i, s = F(i, "modelValue"), R = V, v = b({});
+    let a = null, c = b(!1), u = b(null);
+    const N = w("tabs"), d = w("root"), y = M(() => e.mobileHintComponent);
+    function x() {
+      e.withSlider && (a = new ResizeObserver(() => {
+        m();
+      }), N.value.forEach((t) => {
+        a.observe(t);
       }));
     }
-    function T() {
-      i == null || i.disconnect(), i = null;
+    function D() {
+      a == null || a.disconnect(), a = null;
+    }
+    function h() {
+      y.value && (u.value = new IntersectionObserver((t, o) => {
+        t.forEach((l) => {
+          l.isIntersecting && (E(), o.disconnect(), u.value = null);
+        });
+      }, {
+        threshold: 1
+      }), u.value.observe(d.value));
+    }
+    function E() {
+      setTimeout(() => {
+        c.value = !0, z();
+      }, e.mobileHintShowDelay);
+    }
+    function z() {
+      setTimeout(() => {
+        c.value = !1;
+      }, e.mobileHintShowDelay);
     }
-    function c(t) {
-      k("update:modelValue", t), d();
+    function f(t) {
+      R("update:modelValue", t), m();
     }
-    async function d() {
-      if (!e.withSlider || !f.value)
+    async function m() {
+      if (!e.withSlider || !d.value)
         return;
-      const t = f.value;
-      await q();
+      const t = d.value;
+      await Q();
       const { left: o } = t.getBoundingClientRect(), [l] = t.getElementsByClassName("__active");
       if (l) {
         const {
-          left: m,
-          width: _
-        } = l.getBoundingClientRect(), p = t.scrollLeft, V = m + p - o;
-        u.value = {
-          transform: `translateX(${V}px)`,
-          width: `${_}px`
+          left: p,
+          width: L
+        } = l.getBoundingClientRect(), O = t.scrollLeft, $ = p + O - o;
+        v.value = {
+          transform: `translateX(${$}px)`,
+          width: `${L}px`
         };
       }
     }
-    return x(() => {
-      if (e.selectFirst && e.list.length && !r.value && c(e.list[0]), e.initialTab && e.list.length && !r.value) {
+    return P(() => {
+      if (e.selectFirst && e.list.length && !s.value && f(e.list[0]), e.initialTab && e.list.length && !s.value) {
         const t = e.list.find((o) => o[e.trackBy] === e.initialTab);
-        t && c(t);
+        t && f(t);
       }
-      w();
-    }), z(() => {
-      T();
-    }), E(r, () => {
-      e.withSlider && d();
-    }), (t, o) => (s(), n("div", {
-      class: b(["v-tabs", [`__${e.direction}`]]),
-      ref: "root"
-    }, [
-      L("div", A, [
-        (s(!0), n(h, null, $(e.list, (l) => (s(), n("div", {
-          key: l[a.trackBy],
-          ref_for: !0,
-          ref: "tabs",
-          class: b(["v-tabs_tab", {
-            __active: r.value && r.value[a.trackBy] === l[a.trackBy],
-            _disabled: l && l._disabled
-          }]),
-          "data-id": l[a.trackBy],
-          onClick: (m) => c(l)
-        }, [
-          M(t.$slots, "single-tab", { tab: l }, () => [
-            a.wrapTitle ? (s(), n("div", P, S(l[a.label] || ""), 1)) : (s(), n(h, { key: 1 }, [
-              F(S(l[a.label] || ""), 1)
-            ], 64))
-          ])
-        ], 10, D))), 128))
-      ]),
-      e.withSlider ? (s(), n("div", {
-        key: 0,
-        style: O(u.value),
-        class: "v-tabs_slider"
-      }, null, 4)) : N("", !0)
-    ], 2));
+      x(), h();
+    }), q(() => {
+      D();
+    }), g(s, () => {
+      e.withSlider && m();
+    }), g(y, () => {
+      h();
+    }), (t, o) => (n(), r("div", W, [
+      k("div", {
+        class: C(["v-tabs", [`__${e.direction}`]]),
+        ref: "root"
+      }, [
+        k("div", Y, [
+          (n(!0), r(T, null, A(e.list, (l) => (n(), B(H(e.tabComponent), U({
+            key: l[i.trackBy],
+            ref_for: !0,
+            ref: "tabs",
+            class: "v-tabs_tab"
+          }, e.tabProps, {
+            "data-id": l[i.trackBy],
+            class: {
+              __active: s.value && s.value[i.trackBy] === l[i.trackBy],
+              _disabled: l && l._disabled
+            },
+            onClick: (p) => f(l)
+          }), {
+            default: X(() => [
+              j(t.$slots, "single-tab", { tab: l }, () => [
+                i.wrapTitle ? (n(), r("div", Z, _(l[i.label] || ""), 1)) : (n(), r(T, { key: 1 }, [
+                  G(_(l[i.label] || ""), 1)
+                ], 64))
+              ])
+            ]),
+            _: 2
+          }, 1040, ["data-id", "class", "onClick"]))), 128))
+        ]),
+        e.withSlider ? (n(), r("div", {
+          key: 0,
+          style: J(v.value),
+          class: "v-tabs_slider"
+        }, null, 4)) : I("", !0)
+      ], 2),
+      (n(), B(H(e.mobileHintComponent), {
+        class: C(["v-tabs-hint", { __visible: K(c) }])
+      }, null, 8, ["class"]))
+    ]));
   }
 };
 export {
-  X as default
+  te as default
 };

package/dist/v-tabs.umd.js

@@ -1 +1 @@
-(function(e,o){typeof exports=="object"&&typeof module<"u"?module.exports=o(require("vue")):typeof define=="function"&&define.amd?define(["vue"],o):(e=typeof globalThis<"u"?globalThis:e||self,e.VTabs=o(e.Vue))})(this,function(e){"use strict";const o={class:"v-tabs_inner"},y=["data-id","onClick"],k={key:0,class:"v-tabs_tab_title"};return{__name:"VTabs",props:e.mergeModels({direction:{type:String,default:"horizontal"},trackBy:{type:String,default:"_id"},label:{type:String,default:"title"},list:{type:Array,required:!0},selectFirst:{type:Boolean,default:!0},withSlider:{type:Boolean,default:!1},initialTab:{type:[Number,String],default:null},wrapTitle:{type:Boolean,default:!1}},{modelValue:{},modelModifiers:{}}),emits:e.mergeModels(["update:modelValue"],["update:modelValue"]),setup(i,{emit:B}){const t=i,s=e.useModel(i,"modelValue"),b=B,f=e.ref({});let a=null;const h=e.useTemplateRef("tabs"),m=e.useTemplateRef("root");function p(){t.withSlider&&(a=new ResizeObserver(()=>{d()}),h.value.forEach(l=>{a.observe(l)}))}function g(){a==null||a.disconnect(),a=null}function c(l){b("update:modelValue",l),d()}async function d(){if(!t.withSlider||!m.value)return;const l=m.value;await e.nextTick();const{left:r}=l.getBoundingClientRect(),[n]=l.getElementsByClassName("__active");if(n){const{left:u,width:S}=n.getBoundingClientRect(),T=l.scrollLeft,w=u+T-r;f.value={transform:`translateX(${w}px)`,width:`${S}px`}}}return e.onMounted(()=>{if(t.selectFirst&&t.list.length&&!s.value&&c(t.list[0]),t.initialTab&&t.list.length&&!s.value){const l=t.list.find(r=>r[t.trackBy]===t.initialTab);l&&c(l)}p()}),e.onBeforeUnmount(()=>{g()}),e.watch(s,()=>{t.withSlider&&d()}),(l,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["v-tabs",[`__${t.direction}`]]),ref:"root"},[e.createElementVNode("div",o,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.list,n=>(e.openBlock(),e.createElementBlock("div",{key:n[i.trackBy],ref_for:!0,ref:"tabs",class:e.normalizeClass(["v-tabs_tab",{__active:s.value&&s.value[i.trackBy]===n[i.trackBy],_disabled:n&&n._disabled}]),"data-id":n[i.trackBy],onClick:u=>c(n)},[e.renderSlot(l.$slots,"single-tab",{tab:n},()=>[i.wrapTitle?(e.openBlock(),e.createElementBlock("div",k,e.toDisplayString(n[i.label]||""),1)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(n[i.label]||""),1)],64))])],10,y))),128))]),t.withSlider?(e.openBlock(),e.createElementBlock("div",{key:0,style:e.normalizeStyle(f.value),class:"v-tabs_slider"},null,4)):e.createCommentVNode("",!0)],2))}}});
+(function(e,s){typeof exports=="object"&&typeof module<"u"?module.exports=s(require("vue")):typeof define=="function"&&define.amd?define(["vue"],s):(e=typeof globalThis<"u"?globalThis:e||self,e.VTabs=s(e.Vue))})(this,function(e){"use strict";const s={class:"v-tabs-wrap"},k={class:"v-tabs_inner"},B={key:0,class:"v-tabs_tab_title"};return{__name:"VTabs",props:e.mergeModels({direction:{type:String,default:"horizontal"},trackBy:{type:String,default:"_id"},label:{type:String,default:"title"},list:{type:Array,required:!0},selectFirst:{type:Boolean,default:!0},withSlider:{type:Boolean,default:!1},initialTab:{type:[Number,String],default:null},wrapTitle:{type:Boolean,default:!1},mobileHintComponent:{type:String},mobileHintShowDelay:{type:Number,default:1500},mobileHintHideDelay:{type:Number,default:2e3},tabComponent:{type:String,default:"div"},tabProps:{type:Function,default:()=>({})}},{modelValue:{},modelModifiers:{}}),emits:e.mergeModels(["update:modelValue"],["update:modelValue"]),setup(i,{emit:S}){const t=i,r=e.useModel(i,"modelValue"),g=S,b=e.ref({});let o=null,c=e.ref(!1),d=e.ref(null);const w=e.useTemplateRef("tabs"),f=e.useTemplateRef("root"),y=e.computed(()=>t.mobileHintComponent);function T(){t.withSlider&&(o=new ResizeObserver(()=>{u()}),w.value.forEach(l=>{o.observe(l)}))}function C(){o==null||o.disconnect(),o=null}function p(){y.value&&(d.value=new IntersectionObserver((l,a)=>{l.forEach(n=>{n.isIntersecting&&(_(),a.disconnect(),d.value=null)})},{threshold:1}),d.value.observe(f.value))}function _(){setTimeout(()=>{c.value=!0,H()},t.mobileHintShowDelay)}function H(){setTimeout(()=>{c.value=!1},t.mobileHintShowDelay)}function m(l){g("update:modelValue",l),u()}async function u(){if(!t.withSlider||!f.value)return;const l=f.value;await e.nextTick();const{left:a}=l.getBoundingClientRect(),[n]=l.getElementsByClassName("__active");if(n){const{left:h,width:V}=n.getBoundingClientRect(),E=l.scrollLeft,R=h+E-a;b.value={transform:`translateX(${R}px)`,width:`${V}px`}}}return e.onMounted(()=>{if(t.selectFirst&&t.list.length&&!r.value&&m(t.list[0]),t.initialTab&&t.list.length&&!r.value){const l=t.list.find(a=>a[t.trackBy]===t.initialTab);l&&m(l)}T(),p()}),e.onBeforeUnmount(()=>{C()}),e.watch(r,()=>{t.withSlider&&u()}),e.watch(y,()=>{p()}),(l,a)=>(e.openBlock(),e.createElementBlock("div",s,[e.createElementVNode("div",{class:e.normalizeClass(["v-tabs",[`__${t.direction}`]]),ref:"root"},[e.createElementVNode("div",k,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.list,n=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.tabComponent),e.mergeProps({key:n[i.trackBy],ref_for:!0,ref:"tabs",class:"v-tabs_tab"},t.tabProps,{"data-id":n[i.trackBy],class:{__active:r.value&&r.value[i.trackBy]===n[i.trackBy],_disabled:n&&n._disabled},onClick:h=>m(n)}),{default:e.withCtx(()=>[e.renderSlot(l.$slots,"single-tab",{tab:n},()=>[i.wrapTitle?(e.openBlock(),e.createElementBlock("div",B,e.toDisplayString(n[i.label]||""),1)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(n[i.label]||""),1)],64))])]),_:2},1040,["data-id","class","onClick"]))),128))]),t.withSlider?(e.openBlock(),e.createElementBlock("div",{key:0,style:e.normalizeStyle(b.value),class:"v-tabs_slider"},null,4)):e.createCommentVNode("",!0)],2),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.mobileHintComponent),{class:e.normalizeClass(["v-tabs-hint",{__visible:e.unref(c)}])},null,8,["class"]))]))}}});

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@phoenix-cg/v-tabs",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "private": false,
   "type": "module",
   "module": "./dist/v-tabs.es.js",
   "browser": "dist/v-tabs.umd.js",
+  "main": "./dist/v-tabs.es.js",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

package/src/components/VTabs.vue

@@ -1,36 +1,46 @@
 <template>
-  <div class="v-tabs" :class="[`__${props.direction}`]" ref="root">
-    <div class="v-tabs_inner">
-      <div
-        v-for="tab in props.list"
-        :key="tab[trackBy]"
-        ref="tabs"
-        class="v-tabs_tab"
-        :data-id="tab[trackBy]"
-        :class="{
-          __active: model && model[trackBy] === tab[trackBy],
-          _disabled: tab && tab._disabled
-        }"
-        @click="handleTabSelect(tab, $event)"
-      >
-        <slot name="single-tab" :tab="tab">
-          <template v-if="wrapTitle">
-            <div class="v-tabs_tab_title">
+  <div class="v-tabs-wrap">
+    <div class="v-tabs" :class="[`__${props.direction}`]" ref="root">
+      <div class="v-tabs_inner">
+        <component
+          :is="props.tabComponent"
+          v-for="tab in props.list"
+          :key="tab[trackBy]"
+          ref="tabs"
+          class="v-tabs_tab"
+          v-bind="props.tabProps"
+          :data-id="tab[trackBy]"
+          :class="{
+            __active: model && model[trackBy] === tab[trackBy],
+            _disabled: tab && tab._disabled
+          }"
+          @click="handleTabSelect(tab, $event)"
+        >
+          <slot name="single-tab" :tab="tab">
+            <template v-if="wrapTitle">
+              <div class="v-tabs_tab_title">
+                {{ tab[label] || "" }}
+              </div>
+            </template>
+            <template v-else>
               {{ tab[label] || "" }}
-            </div>
-          </template>
-          <template v-else>
-            {{ tab[label] || "" }}
-          </template>
-        </slot>
+            </template>
+          </slot>
+        </component>
       </div>
+      <div v-if="props.withSlider" :style="sliderStyle" class="v-tabs_slider" />
     </div>
-    <div v-if="props.withSlider" :style="sliderStyle" class="v-tabs_slider" />
+    <component
+      :is="props.mobileHintComponent"
+      class="v-tabs-hint"
+      :class="{ __visible: isHintVisible }"
+    />
   </div>
 </template>
 
 <script setup>
 import {
+  computed,
   nextTick,
   onBeforeUnmount,
   onMounted,
@@ -70,15 +80,38 @@ const props = defineProps({
   wrapTitle: {
     type: Boolean,
     default: false
+  },
+  mobileHintComponent: {
+    type: String
+  },
+  mobileHintShowDelay: {
+    type: Number,
+    default: 1500
+  },
+  mobileHintHideDelay: {
+    type: Number,
+    default: 2000
+  },
+  tabComponent: {
+    type: String,
+    default: 'div'
+  },
+  tabProps: {
+    type: Function,
+    default: () => ({})
   }
 })
 const model = defineModel()
 const emit = defineEmits(['update:modelValue'])
 const sliderStyle = ref({})
 let resizeObserver = null
+let isHintVisible = ref(false)
+let hintObserver = ref(null)
 const tabsRefs = useTemplateRef('tabs')
 const elRef = useTemplateRef('root')
 
+const hintShowCondition = computed(() => props.mobileHintComponent)
+
 function createResizeObserver () {
   if (props.withSlider) {
     resizeObserver = new ResizeObserver(() => {
@@ -95,6 +128,36 @@ function destroyResizeObserver () {
   resizeObserver = null
 }
 
+function createHintObserver () {
+  if (hintShowCondition.value) {
+    hintObserver.value = new IntersectionObserver((entries, observer) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          queueShowHint()
+          observer.disconnect()
+          hintObserver.value = null
+        }
+      })
+    }, {
+      threshold: 1.0
+    })
+    hintObserver.value.observe(elRef.value)
+  }
+}
+
+function queueShowHint () {
+  setTimeout(() => {
+    isHintVisible.value = true
+    queueHideHint()
+  }, props.mobileHintShowDelay)
+}
+
+function queueHideHint () {
+  setTimeout(() => {
+    isHintVisible.value = false
+  }, props.mobileHintShowDelay)
+}
+
 function handleTabSelect (tab) {
   emit('update:modelValue', tab)
   calcSlider()
@@ -131,6 +194,7 @@ onMounted(() => {
     tab && handleTabSelect(tab)
   }
   createResizeObserver()
+  createHintObserver()
 })
 
 onBeforeUnmount(() => {
@@ -140,9 +204,20 @@ onBeforeUnmount(() => {
 watch(model, () => {
   props.withSlider && calcSlider()
 })
+
+watch(hintShowCondition, () => {
+
+
+  createHintObserver()
+})
 </script>
 
 <style>
+.v-tabs-wrap {
+  position: relative;
+  display: inline-flex;
+  max-width: 100%;
+}
 .v-tabs {
   position: relative;
 }
@@ -170,4 +245,12 @@ watch(model, () => {
   bottom: 0;
   transition: all 0.2s ease-in-out;
 }
+.v-tabs-hint {
+  transition: opacity .3s ease-in-out;
+  opacity: 0;
+  pointer-events: none;
+}
+.v-tabs-hint.__visible {
+  opacity: 1;
+}
 </style>

package/.vscode/extensions.json

@@ -1,8 +0,0 @@
-{
-  "recommendations": [
-    "Vue.volar",
-    "vitest.explorer",
-    "dbaeumer.vscode-eslint",
-    "EditorConfig.EditorConfig"
-  ]
-}

package/.vscode/settings.json

@@ -1,11 +0,0 @@
-{
-  "explorer.fileNesting.enabled": true,
-  "explorer.fileNesting.patterns": {
-    "tsconfig.json": "tsconfig.*.json, env.d.ts",
-    "vite.config.*": "jsconfig*, vitest.config.*, cypress.config.*, playwright.config.*",
-    "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .prettier*, prettier*, .editorconfig"
-  },
-  "editor.codeActionsOnSave": {
-    "source.fixAll": "explicit"
-  }
-}