@phoenix-cg/v-tabs 0.2.0-beta.0 → 0.2.0-beta.2

package/dist/v-tabs.css

@@ -0,0 +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}

package/dist/v-tabs.es.js

@@ -0,0 +1,123 @@
+import { mergeModels as y, useModel as V, 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 k, createTextVNode as F, normalizeStyle as O, nextTick as q } from "vue";
+const A = { class: "v-tabs_inner" }, D = ["data-id", "onClick"], P = {
+  key: 0,
+  class: "v-tabs_tab_title"
+}, X = {
+  __name: "VTabs",
+  props: /* @__PURE__ */ y({
+    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: /* @__PURE__ */ y(["update:modelValue"], ["update:modelValue"]),
+  setup(a, { emit: S }) {
+    const e = a, r = V(a, "modelValue"), g = S, f = C({});
+    let i = null;
+    const B = v("tabs"), c = v("elRef");
+    function w() {
+      e.withSlider && (i = new ResizeObserver(() => {
+        u();
+      }), B.value.forEach((t) => {
+        i.observe(t);
+      }));
+    }
+    function T() {
+      i == null || i.disconnect(), i = null;
+    }
+    function d(t) {
+      g("update:modelValue", t), u();
+    }
+    async function u() {
+      if (!e.withSlider || !c.value)
+        return;
+      const t = c.value;
+      await q();
+      const { left: o } = t.getBoundingClientRect(), [l] = t.getElementsByClassName("__active");
+      if (l) {
+        const {
+          left: m,
+          width: _
+        } = l.getBoundingClientRect(), R = t.scrollLeft, p = m + R - o;
+        f.value = {
+          transform: `translateX(${p}px)`,
+          width: `${_}px`
+        };
+      }
+    }
+    return x(() => {
+      if (e.selectFirst && e.list.length && !r.value && d(e.list[0]), e.initialTab && e.list.length && !r.value) {
+        const t = e.list.find((o) => o[e.trackBy] === e.initialTab);
+        t && d(t);
+      }
+      w();
+    }), z(() => {
+      T();
+    }), E(r, () => {
+      e.withSlider && u();
+    }), (t, o) => (s(), n("div", {
+      class: b(["v-tabs", [`__${e.direction}`]]),
+      ref_key: "elRef",
+      ref: c
+    }, [
+      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) => d(l)
+        }, [
+          M(t.$slots, "single-tab", { tab: l }, () => [
+            a.wrapTitle ? (s(), n("div", P, k(l[a.label] || ""), 1)) : (s(), n(h, { key: 1 }, [
+              F(k(l[a.label] || ""), 1)
+            ], 64))
+          ])
+        ], 10, D))), 128))
+      ]),
+      e.withSlider ? (s(), n("div", {
+        key: 0,
+        style: O(f.value),
+        class: "v-tabs_slider"
+      }, null, 4)) : N("", !0)
+    ], 2));
+  }
+};
+export {
+  X as default
+};

package/dist/v-tabs.umd.js

@@ -0,0 +1 @@
+(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_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,o=e.useModel(i,"modelValue"),b=B,m=e.ref({});let a=null;const h=e.useTemplateRef("tabs"),c=e.useTemplateRef("elRef");function p(){t.withSlider&&(a=new ResizeObserver(()=>{f()}),h.value.forEach(l=>{a.observe(l)}))}function g(){a==null||a.disconnect(),a=null}function d(l){b("update:modelValue",l),f()}async function f(){if(!t.withSlider||!c.value)return;const l=c.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,_=u+T-r;m.value={transform:`translateX(${_}px)`,width:`${S}px`}}}return e.onMounted(()=>{if(t.selectFirst&&t.list.length&&!o.value&&d(t.list[0]),t.initialTab&&t.list.length&&!o.value){const l=t.list.find(r=>r[t.trackBy]===t.initialTab);l&&d(l)}p()}),e.onBeforeUnmount(()=>{g()}),e.watch(o,()=>{t.withSlider&&f()}),(l,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["v-tabs",[`__${t.direction}`]]),ref_key:"elRef",ref:c},[e.createElementVNode("div",s,[(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:o.value&&o.value[i.trackBy]===n[i.trackBy],_disabled:n&&n._disabled}]),"data-id":n[i.trackBy],onClick:u=>d(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(m.value),class:"v-tabs_slider"},null,4)):e.createCommentVNode("",!0)],2))}}});

package/package.json

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

package/src/export.js

@@ -0,0 +1,3 @@
+import VTabs from './components/VTabs.vue'
+
+export default VTabs

package/vite.config.js

@@ -11,6 +11,14 @@ export default defineConfig({
       entry: path.resolve(__dirname, 'src/export.js'),
       name: 'VTabs',
       fileName: (format) => `v-tabs.${format}.js`
+    },
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue',
+        }
+      }
     }
   },
   plugins: [

package/export.js

@@ -1,3 +0,0 @@
-import VTabs from './src/components/VTabs.vue'
-
-export default VTabs