super-vue3-tabs/dist/super-vue3-tabs.umd.cjs

A vue3 tabs component for showing tabs and tab content.

(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.right-0{right:0}.m-auto{margin:auto}.mb-1{margin-bottom:.25rem}.mb-4{margin-bottom:1rem}.mt-4{margin-top:1rem}.block{display:block}.flex{display:flex}.h-1{height:.25rem}.h-full{height:100%}.w-1{width:.25rem}.w-6{width:1.5rem}.min-w-max{min-width:-moz-max-content;min-width:max-content}.\\!cursor-default{cursor:default!important}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.rounded-lg{border-radius:.5rem}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-4{padding:1rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-semibold{font-weight:600}.opacity-50{opacity:.5}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.super-vue3-tabs .tabs{overflow-x:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative}.super-vue3-tabs .tabs::-webkit-scrollbar{display:none}.super-vue3-tabs .tabs .underline-marker{position:absolute;bottom:0;left:0;height:3px;transition:left .3s ease;border-radius:16px}.super-vue3-tabs .dropdown{position:absolute;background-color:#f8f8f8;min-width:140px;max-height:300px;overflow:auto;box-shadow:0 4px 20px -2px #0000001a;z-index:1;border-radius:8px}.super-vue3-tabs .dropdown div{padding:8px 12px;margin:4px;text-decoration:none;display:block}.super-vue3-tabs .dropdown div:hover{background-color:#f1f1f1;border-radius:8px}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
(function(k,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(k=typeof globalThis<"u"?globalThis:k||self,e(k.SuperVue3Tabs={},k.Vue))})(this,function(k,e){"use strict";const M="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='lucide%20lucide-ellipsis-vertical'%3e%3ccircle%20cx='12'%20cy='12'%20r='1'/%3e%3ccircle%20cx='12'%20cy='5'%20r='1'/%3e%3ccircle%20cx='12'%20cy='19'%20r='1'/%3e%3c/svg%3e";function N(n){return e.getCurrentScope()?(e.onScopeDispose(n),!0):!1}function v(n){return typeof n=="function"?n():e.unref(n)}const I=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const D=n=>n!=null,E=()=>{};function T(n){var s;const a=v(n);return(s=a==null?void 0:a.$el)!=null?s:a}const S=I?window:void 0;function L(){const n=e.ref(!1),s=e.getCurrentInstance();return s&&e.onMounted(()=>{n.value=!0},s),n}function $(n){const s=L();return e.computed(()=>(s.value,!!n()))}function j(n,s,a={}){const{root:g,rootMargin:d="0px",threshold:r=.1,window:f=S,immediate:u=!0}=a,o=$(()=>f&&"IntersectionObserver"in f),h=e.computed(()=>{const w=v(n);return(Array.isArray(w)?w:[w]).map(T).filter(D)});let m=E;const y=e.ref(u),V=o.value?e.watch(()=>[h.value,T(g),y.value],([w,C])=>{if(m(),!y.value||!w.length)return;const b=new IntersectionObserver(s,{root:T(C),rootMargin:d,threshold:r});w.forEach(t=>t&&b.observe(t)),m=()=>{b.disconnect(),m=E}},{immediate:u,flush:"post"}):E,B=()=>{m(),V(),y.value=!1};return N(B),{isSupported:o,isActive:y,pause(){m(),y.value=!1},resume(){y.value=!0},stop:B}}function O(n,s={}){const{window:a=S,scrollTarget:g,threshold:d=0}=s,r=e.ref(!1);return j(n,f=>{let u=r.value,o=0;for(const h of f)h.time>=o&&(o=h.time,u=h.isIntersecting);r.value=u},{root:g,window:a,threshold:d}),r}const W={class:"super-vue3-tabs"},z={class:"flex gap-2"},A=["id","onClick"],F=[e.createElementVNode("img",{src:M,width:"16",class:"m-auto"},null,-1)],G={key:0,class:"dropdown"},R=["onClick"],Y={class:"content"},q=e.defineComponent({__name:"Tabs",props:e.mergeModels({themeColor:{default:"#3b82f6"}},{modelValue:{default:""},modelModifiers:{}}),emits:e.mergeModels(["change"],["update:modelValue"]),setup(n,{emit:s}){const a=n,g=s,d=e.ref(null),r=e.ref([]),f=e.ref({id:"",value:""}),u=e.useModel(n,"modelValue"),o=e.ref([]),h=e.ref({}),m=e.ref(!1),y=()=>{for(let t in o.value){const i=O(o.value[t]);h.value[r.value[t].id]=i}},V=e.computed(()=>r.value.filter(t=>!h.value[t.id])),B=e.computed(()=>{var p,c;const t=r.value.findIndex(_=>_.id===f.value.id),i=o.value[t];return i?{width:((p=i==null?void 0:i.parentElement)==null?void 0:p.offsetWidth)+"px",left:((c=i==null?void 0:i.parentElement)==null?void 0:c.offsetLeft)+"px"}:{width:"0px",left:"0px"}}),w=t=>{r.value.push(t)};e.provide("addTabs",w),e.provide("activeTab",f),e.watch(o.value,y);const C=function(t){t.deltaY==0||!d.value||(t.preventDefault(),d.value.scrollLeft+=t.deltaY)},b=({tab:t,tabValue:i})=>{var _;if(!t&&i&&(t=r.value.find(x=>x.value===i)),!t)return;m.value=!1;const l=t.id,p=r.value.findIndex(x=>x.id===l),c=o.value[p];c&&((_=c==null?void 0:c.parentElement)==null||_.scrollIntoView({behavior:"smooth",block:"nearest"})),f.value=t,u.value=t.value,g("change",t)};return e.onMounted(()=>{var t;if((t=d.value)==null||t.addEventListener("wheel",C),!!r.value.length){if(u.value)return b({tabValue:u.value});b({tab:r.value[0]})}}),e.onUnmounted(()=>{var t;(t=d.value)==null||t.removeEventListener("wheel",C)}),(t,i)=>(e.openBlock(),e.createElementBlock("div",W,[e.createElementVNode("div",z,[e.createElementVNode("div",{class:"flex gap-3 tabs",ref_key:"tabsContainerRef",ref:d},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.value,(l,p)=>(e.openBlock(),e.createElementBlock("div",{key:p,id:l.id,class:e.normalizeClass(["relative flex items-center px-3 py-2 rounded-sm cursor-pointer min-w-max",{"opacity-50 !cursor-default":l.disabled}]),style:e.normalizeStyle({color:f.value.id===l.id?a.themeColor:"",borderBottomColor:f.value.id===l.id?a.themeColor:""}),onClick:c=>l.disabled?"":b({tab:l})},[e.createElementVNode("div",{class:"absolute left-0 right-0 w-1 h-1 m-auto tracker-element",ref_for:!0,ref:c=>{o.value[p]=c}},null,512),l.icon?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(l.icon(),(c,_)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(c),{key:_}))),128)):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(l.value),1)],14,A))),128)),e.createElementVNode("div",{class:"underline-marker",style:e.normalizeStyle({width:B.value.width,left:B.value.left,backgroundColor:a.themeColor})},null,4)],512),V.value.length?(e.openBlock(),e.createElementBlock("div",{key:0,onMouseleave:i[1]||(i[1]=l=>m.value=!1)},[e.createElementVNode("button",{class:"w-6 h-full",onMouseover:i[0]||(i[0]=l=>m.value=!0)},F,32),m.value?(e.openBlock(),e.createElementBlock("div",G,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(V.value,l=>(e.openBlock(),e.createElementBlock("div",{key:l.id,onClick:p=>b({tab:l}),class:"cursor-pointer"},[l.icon?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(l.icon(),(p,c)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(p),{key:c}))),128)):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(l.value),1)],8,R))),128))])):e.createCommentVNode("",!0)],32)):e.createCommentVNode("",!0)]),e.createElementVNode("div",Y,[e.renderSlot(t.$slots,"default")])]))}}),H={class:"mt-4"},P=e.defineComponent({__name:"Tab",props:{id:{},value:{},disabled:{type:Boolean}},setup(n){const s=n,a=e.ref({}),g=e.inject("addTabs",o=>{console.log(o)}),d=e.inject("activeTab",e.ref({id:"",value:""})),r=e.computed(()=>s.id||s.value.toLowerCase().replace(/ /g,"-")+"_"+Math.floor(Math.random()*11)),f=e.computed(()=>{var o;return((o=d==null?void 0:d.value)==null?void 0:o.id)===r.value}),u=e.useSlots();return e.onBeforeMount(()=>{let o={...s,icon:u==null?void 0:u.icon};o.id||(o.id=r.value),a.value=o,g(o)}),(o,h)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",H,[e.renderSlot(o.$slots,"default")],512)),[[e.vShow,f.value]])}});k.Tab=P,k.Tabs=q,Object.defineProperty(k,Symbol.toStringTag,{value:"Module"})});