fine-true/lib/tabs/index.js

A small and beautiful Vue3 version of the UI Library

!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("vue"),require("./../types/tabs"),require("./../utils/withInstall"));else if("function"==typeof define&&define.amd)define(["vue","./../types/tabs","./../utils/withInstall"],t);else{var a="object"==typeof exports?t(require("vue"),require("./../types/tabs"),require("./../utils/withInstall")):t(e.vue,e["./../types/tabs"],e["./../utils/withInstall"]);for(var r in a)("object"==typeof exports?exports:e)[r]=a[r]}}(self,((e,t,a)=>(()=>{"use strict";var r={4324:e=>{e.exports=t},1677:e=>{e.exports=a},748:t=>{t.exports=e}},o={};function l(e){var t=o[e];if(void 0!==t)return t.exports;var a=o[e]={exports:{}};return r[e](a,a.exports,l),a.exports}l.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return l.d(t,{a:t}),t},l.d=(e,t)=>{for(var a in t)l.o(t,a)&&!l.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},l.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),l.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{l.r(n),l.d(n,{default:()=>v});var e=l(748),t=l(4324);const a=(0,e.defineComponent)({name:"fine-tab-nav-list",props:{tabList:{type:Array}},emits:["tabClick"],setup(a,r){var o,{emit:l}=r,n=(0,e.inject)(t.TABSPROVIDERKEY),i=(0,e.ref)(),u=(0,e.ref)(),s=(0,e.ref)(0),c=(0,e.ref)(0),v=(0,e.ref)(!1),f=(0,e.computed)((()=>null==n?void 0:n.activeValue.value)),d=(0,e.computed)((()=>null==n?void 0:n.tabPosition.value)),p=(0,e.computed)((()=>{var e=d.value;return["top","bottom"].includes(e)?"horizontal":["left","right"].includes(e)?"vertical":""})),b=(0,e.computed)((()=>"horizontal"===p.value?{width:c.value+"px",transform:"translateX(".concat(s.value,"px)")}:"vertical"===p.value?{height:c.value+"px",transform:"translateY(".concat(s.value,"px)")}:{})),m=()=>{var e,t=(null===(e=a.tabList)||void 0===e?void 0:e.findIndex((e=>e.value===f.value)))||0;return t<0?0:t},y=()=>{var{size:e,distance:t}=(()=>{var e=m(),t=u.value.children[e],{offsetWidth:a,offsetLeft:r,offsetHeight:o,offsetTop:l}=t,n={size:0,distance:0};return"horizontal"===p.value?(n.size=a,n.distance=r):"vertical"===p.value&&(n.size=o,n.distance=l),n})();c.value=e,s.value=t},h=(0,e.ref)(0),g=(0,e.ref)(0),V=(0,e.ref)(0),x=()=>{var{offsetWidth:e,offsetHeight:t}=i.value,{offsetWidth:a,offsetHeight:r}=u.value;"horizontal"===p.value?V.value=a-e:"vertical"===p.value&&(V.value=r-t),v.value=V.value>0},N=()=>{h.value-=100,h.value=Math.max(g.value,h.value)},O=()=>{h.value+=100,h.value=Math.min(V.value,h.value)},j=(0,e.computed)((()=>"horizontal"===p.value?{transform:"translateX(".concat(-h.value,"px)")}:"vertical"===p.value?{transform:"translateY(".concat(-h.value,"px)")}:{})),w=()=>{if(v.value){var e=m(),t=u.value.children[e],{offsetWidth:a,offsetLeft:r,offsetHeight:o,offsetTop:l}=t,{offsetWidth:n,offsetHeight:s}=i.value,{offsetWidth:c,offsetHeight:f}=u.value;"horizontal"===p.value?h.value=r-n+n/2+a/2:"vertical"===p.value&&(h.value=l-s+s/2+o/2),h.value=Math.max(g.value,h.value),h.value=Math.min(V.value,h.value)}};(0,e.onMounted)((()=>{y(),x()})),(0,e.watch)([d,f],(()=>{new Promise((e=>o=e)).then((()=>{(0,e.nextTick)((()=>{y(),x(),w()}))}))}));var P=()=>{o&&o()};return()=>{var t=a.tabList;return(0,e.createVNode)("div",{class:{"fine-tabs-nav-container":!0,["fine-tabs-tab-position-".concat(d.value)]:!0}},[v.value&&("horizontal"===p.value?(0,e.createVNode)(e.Fragment,null,[(0,e.createVNode)("span",{class:"fine-tabs-tab-prev",onClick:N},[(0,e.createVNode)("i",{class:"fine-icon icon-arrow-left-bold"},null)]),(0,e.createVNode)("span",{class:"fine-tabs-tab-next",onClick:O},[(0,e.createVNode)("i",{class:"fine-icon icon-arrow-right-bold"},null)])]):"vertical"===p.value?(0,e.createVNode)(e.Fragment,null,[(0,e.createVNode)("span",{class:"fine-tabs-tab-prev",onClick:N},[(0,e.createVNode)("i",{class:"fine-icon icon-arrow-up-bold"},null)]),(0,e.createVNode)("span",{class:"fine-tabs-tab-next",onClick:O},[(0,e.createVNode)("i",{class:"fine-icon icon-arrow-down-bold"},null)])]):void 0),(0,e.createVNode)("div",{class:"fine-tabs-nav-warp",ref:e=>i.value=e},[(0,e.createVNode)("div",{class:"fine-tabs-nav",style:j.value},[(0,e.createVNode)("div",{ref:e=>u.value=e},[null==t?void 0:t.map(((t,a)=>(0,e.createVNode)("div",{class:{"fine-tabs-tab":!0,"fine-tabs-tab-actived":f.value===t.value},onClick:()=>{var a;a=t.value,l("tabClick",a),(0,e.nextTick)((()=>{y(),w()}))}},[t.label])))]),(0,e.createVNode)("div",{class:"fine-tabs-nav-mark",style:b.value,onTransitionend:P},null)])])])}}});function r(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,r)}return a}function o(e,t,a){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var a=e[Symbol.toPrimitive];if(void 0!==a){var r=a.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}var i=function t(){var a=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],r=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],o=Array.isArray(a)?a:[a],l=[];return o.forEach((a=>{var o,n;Array.isArray(a)?l.push(...t(a,r)):a&&a.type===e.Fragment?l.push(...t(a.children,r)):a&&(0,e.isVNode)(a)?(!r||(n=a)&&(n.type===e.Comment||n.type===e.Fragment&&0===n.children.length||n.type===Text&&""===n.children.trim()))&&r||l.push(a):null!=(o=a)&&""!==o&&l.push(a)})),l};function u(e){return e.map((e=>{if(u=e,Array.isArray(u)&&1===u.length&&(u=u[0]),u&&u.__v_isVNode&&"symbol"!=typeof u.type){var t=function(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?r(Object(a),!0).forEach((function(t){o(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):r(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}({},e.props||{}),{label:a,disabled:l,closable:n,value:i}=(e.children,void 0!==e.key&&e.key,t);return{label:a,disabled:l,closable:n,node:e,value:i}}var u;return null})).filter((e=>e))}const s=(0,e.defineComponent)({name:"fine-tabs",props:{modelValue:{type:String,default:""},tabPosition:{type:String,default:"top"}},emits:["update:modelValue"],setup(r,o){var{slots:l,emit:n}=o,s=(0,e.computed)((()=>r.modelValue)),c=(0,e.computed)((()=>r.tabPosition));(0,e.provide)(t.TABSPROVIDERKEY,{activeValue:s,tabPosition:c});var v=e=>{n("update:modelValue",e)},f=t=>"bottom"===r.tabPosition?(0,e.createVNode)(e.Fragment,null,[(0,e.createVNode)("div",{class:"fine-tabs-slot-container"},[t.map((e=>e.node))]),(0,e.createVNode)(a,{tabList:t,onTabClick:v},null)]):(0,e.createVNode)(e.Fragment,null,[(0,e.createVNode)(a,{tabList:t,onTabClick:v},null),(0,e.createVNode)("div",{class:"fine-tabs-slot-container"},[t.map((e=>e.node))])]);return()=>{var t,a=u(i(null===(t=l.default)||void 0===t?void 0:t.call(l)));return(0,e.createVNode)("div",{class:"fine-tabs"},[f(a)])}}});var c=l(1677);l.n(c)()(s);const v=s})(),n})()));