godown 3.13.4 → 3.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/godown.iife.js +16 -16
- package/build/godown.iife.js.map +1 -1
- package/build/godown.umd.js +16 -16
- package/build/godown.umd.js.map +1 -1
- package/build/web-components/tabs/component.d.ts +10 -3
- package/build/web-components/tabs/component.d.ts.map +1 -1
- package/build/web-components/tabs/component.js +1 -1
- package/build/web-components/tabs/component.js.map +1 -1
- package/custom-elements.json +1 -1
- package/package.json +4 -4
- package/src/web-components/tabs/component.ts +19 -6
- package/web-types.json +7 -2
|
@@ -10,14 +10,20 @@ import { type RingType } from "../../internal/ring.js";
|
|
|
10
10
|
declare class Tabs extends GlobalStyle {
|
|
11
11
|
ringType: RingType;
|
|
12
12
|
/**
|
|
13
|
-
* If
|
|
13
|
+
* If "select", the indicator moves from the selected content to the hover position.
|
|
14
14
|
*
|
|
15
|
-
* If
|
|
15
|
+
* If "previous", the indicator moves from the last moved position to the hover position.
|
|
16
16
|
*
|
|
17
|
-
* If "none", the indicator
|
|
17
|
+
* If "none", the indicator does not move.
|
|
18
18
|
*/
|
|
19
19
|
beginning: "selected" | "previous" | "none";
|
|
20
20
|
/**
|
|
21
|
+
* If "remain", the indicator remain on the selected item.
|
|
22
|
+
*
|
|
23
|
+
* If "none", the indicator dose not display.
|
|
24
|
+
*/
|
|
25
|
+
ending: "remain" | "none";
|
|
26
|
+
/**
|
|
21
27
|
* The behavior of the indicator:
|
|
22
28
|
*
|
|
23
29
|
* If "background", its size will be consistent with that of a single tab.
|
|
@@ -38,6 +44,7 @@ declare class Tabs extends GlobalStyle {
|
|
|
38
44
|
protected _indicators: HTMLCollectionOf<HTMLDivElement>;
|
|
39
45
|
constructor();
|
|
40
46
|
render(): TemplateResult<1>;
|
|
47
|
+
protected get _finalIndex();
|
|
41
48
|
connectedCallback(): void;
|
|
42
49
|
protected _handleMouseLeave(): void;
|
|
43
50
|
move(sourceIndex: number, targetIndex: number): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AACA,SAAwB,mBAAgC,gCAAiC;AACzF,cAAyB,sBAAsB,KAAM;AAErD,cAA8C,gBAAgB,wBAAyB;;;;;;;AAavF,cAyEM,aAAa,YAAY;CAC7B,AACA,UAAU;;;;;;;;CASV,AACA,WAAW,aAAa,aAAa;;;;;;;;
|
|
1
|
+
{"mappings":"AACA,SAAwB,mBAAgC,gCAAiC;AACzF,cAAyB,sBAAsB,KAAM;AAErD,cAA8C,gBAAgB,wBAAyB;;;;;;;AAavF,cAyEM,aAAa,YAAY;CAC7B,AACA,UAAU;;;;;;;;CASV,AACA,WAAW,aAAa,aAAa;;;;;;CAOrC,AACA,QAAQ,WAAW;;;;;;;;CASnB,AACA,WAAW,eAAe;;;;CAK1B,AACA;;;;CAKA,AACA;CAEA,UAAU;CAEV,UACU,QAAQ,iBAAiB;CAEnC,UACU,aAAa,iBAAiB;CAExC;CAKA,UAAU,eAAe;CA2BzB,cAAc;CAId;CAKA,UAAU;CAQV,KAAKA,qBAAqBC;CAsC1B,OAAOC;AASR;AAED,eAAe;AACf,SAAS","names":["sourceIndex: number","targetIndex: number","selected: number"],"sources":["../../../../src/web-components/tabs/component.ts"],"sourcesContent":["import { attr, godown, htmlSlot, StyleController, styles, tokenList } from \"@godown/element\";\nimport { cssGlobalVars, GlobalStyle, scopePrefix } from \"../../internal/global-style.js\";\nimport { css, html, type TemplateResult } from \"lit\";\nimport { property, queryAll } from \"lit/decorators.js\";\nimport { RingBuilder, ringTypeAttribute, type RingType } from \"../../internal/ring.js\";\n\nconst protoName = \"tabs\";\nconst cssScope = scopePrefix(protoName);\n\nconst hoverToken = \"hover\";\n\n/**\n * {@linkcode Tabs} used to render a set of tabs.\n *\n * @fires select - Fires when the tab index is changed.\n * @category display\n */\n@godown(protoName)\n@styles(css`\n :host {\n ${cssScope}--indicator-background: var(${cssGlobalVars.passive});\n ${cssScope}--selected-background: var(${cssGlobalVars.passive});\n transition: 0.2s ease-in-out;\n display: flex;\n cursor: default;\n }\n\n [part=\"root\"] {\n gap: 0.25em;\n padding: 0.25em;\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: inherit;\n overflow-x: clip;\n border-radius: inherit;\n transition: inherit;\n transition-property: width, transform, opacity;\n }\n\n [part~=\"item\"] {\n position: relative;\n width: 100%;\n display: block;\n text-align: center;\n position: relative;\n white-space: nowrap;\n transition: inherit;\n border-radius: inherit;\n transition-property: inherit;\n }\n\n [part=\"indicator\"],\n [part~=\"item\"]::after {\n width: 100%;\n height: 100%;\n inset: 0;\n position: absolute;\n transition: inherit;\n border-radius: inherit;\n transition-property: inherit;\n background: var(${cssScope}--indicator-background);\n }\n\n [part=\"indicator\"] {\n opacity: 0;\n z-index: -1;\n }\n\n [part~=\"item\"]::after {\n z-index: -2;\n }\n\n [indicator=\"underline\"] [part=\"indicator\"],\n [indicator=\"underline\"] [part~=\"item\"]::after {\n top: 100%;\n height: 0.15em;\n border-radius: 0.075em;\n margin-top: 0.15em;\n }\n\n [part~=\"selected\"]::after {\n content: \"\";\n background: var(${cssScope}--selected-background);\n }\n\n [part~=\"hover\"] [part=\"indicator\"] {\n opacity: 1;\n }\n`)\nclass Tabs extends GlobalStyle {\n @property({ attribute: ringTypeAttribute })\n ringType: RingType = \"border\";\n\n /**\n * If \"select\", the indicator moves from the selected content to the hover position.\n *\n * If \"previous\", the indicator moves from the last moved position to the hover position.\n *\n * If \"none\", the indicator does not move.\n */\n @property()\n beginning: \"selected\" | \"previous\" | \"none\" = \"selected\";\n\n /**\n * If \"remain\", the indicator remain on the selected item.\n *\n * If \"none\", the indicator dose not display.\n */\n @property()\n ending: \"remain\" | \"none\" = \"remain\";\n\n /**\n * The behavior of the indicator:\n *\n * If \"background\", its size will be consistent with that of a single tab.\n *\n * If \"underline\", an underline will be displayed at the bottom of the tab.\n */\n @property()\n indicator: \"background\" | \"underline\" = \"background\";\n\n /**\n * Tab list or slot list.\n */\n @property({ type: Array })\n tabs: string[];\n\n /**\n * The index of the currently selected tab.\n */\n @property({ type: Number })\n index = 0;\n\n protected previousIndex: number;\n\n @queryAll(\"[part~=item]\")\n protected _items: HTMLCollectionOf<HTMLLIElement>;\n\n @queryAll(\"[part=indicator]\")\n protected _indicators: HTMLCollectionOf<HTMLDivElement>;\n\n constructor() {\n super();\n new StyleController(this, () => new RingBuilder({ type: this.ringType }).css);\n }\n\n render(): TemplateResult<1> {\n const isRemain = this.ending === \"remain\";\n return html`\n <ul\n part=\"root\"\n ${attr(this.observedRecord)}\n @mouseleave=\"${this._handleMouseLeave}\"\n >\n ${this.tabs?.map(\n (tab, index) => html`\n <li\n part=\"${tokenList(\"item\", isRemain && this.index === index && \"selected\")}\"\n @mouseenter=${() => {\n this.move(this.previousIndex, index);\n this.previousIndex = index;\n }}\n @click=${() => this.select(index)}\n >\n ${htmlSlot(tab, tab)}\n <div part=\"indicator\"></div>\n </li>\n `,\n )}\n </ul>\n `;\n }\n\n protected get _finalIndex() {\n return this.ending === \"none\" && this.beginning === \"selected\" ? this.index : -1;\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.previousIndex = this._finalIndex;\n }\n\n protected _handleMouseLeave(): void {\n const lastItem = this._items[this.previousIndex];\n if (lastItem) {\n lastItem.part.remove(hoverToken);\n }\n this.previousIndex = this._finalIndex;\n }\n\n move(sourceIndex: number, targetIndex: number): void {\n if (sourceIndex === targetIndex) {\n return;\n }\n const { _items, _indicators } = this;\n const targetElement = _items[targetIndex];\n if (!targetElement) {\n return;\n }\n targetElement.part.add(hoverToken);\n const fromItem = _items[sourceIndex];\n if (!fromItem) {\n return;\n }\n fromItem.part.remove(hoverToken);\n if (this.beginning === \"none\") {\n return;\n }\n const targetIndicator = _indicators[targetIndex];\n const sourceIndicator = _indicators[sourceIndex];\n if (!targetIndicator || !sourceIndicator) {\n return;\n }\n const { x: sourceX, y: sourceY, width: sourceWidth } = sourceIndicator.getBoundingClientRect();\n const { x, y } = targetIndicator.getBoundingClientRect();\n const transformX = sourceX - x;\n const transformY = sourceY - y;\n\n const { style: targetStyle } = targetIndicator;\n const { style: sourceStyle } = sourceIndicator;\n\n targetStyle.transform = `translate3d(${transformX}px,${transformY}px,0)`;\n targetStyle.width = `${sourceWidth}px`;\n targetStyle.transition = sourceStyle.transition = \"none\";\n targetIndicator.getBoundingClientRect();\n targetStyle.width = targetStyle.transform = targetStyle.transition = sourceStyle.transition = \"\";\n }\n\n select(selected: number): void {\n const { index, previousIndex } = this;\n this.move(previousIndex, selected);\n if (selected !== index) {\n this.previousIndex = selected;\n this.index = selected;\n this.dispatchCustomEvent(\"select\", selected);\n }\n }\n}\n\nexport default Tabs;\nexport { Tabs };\n"],"version":3,"file":"component.d.ts"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{godown,styles,StyleController,attr,tokenList,htmlSlot}from"@godown/element";import{scopePrefix,cssGlobalVars,GlobalStyle}from"../../internal/global-style.js";import{css,html}from"lit";import{property,queryAll}from"lit/decorators.js";import{ringTypeAttribute,RingBuilder}from"../../internal/ring.js";import _decorate from"@oxc-project/runtime/helpers/decorate";import"../../internal/reset-style.js";import"sharekit";const protoName=`tabs`,cssScope=scopePrefix(protoName),hoverToken=`hover`;let Tabs=class e extends GlobalStyle{constructor(){super(),this.ringType=`border`,this.beginning=`selected`,this.indicator=`background`,this.index=0,new StyleController(this,()=>new RingBuilder({type:this.ringType}).css)}render(){return html`<ul part="root" ${attr(this.observedRecord)} @mouseleave="${this._handleMouseLeave}"> ${this.tabs?.map((
|
|
1
|
+
import{godown,styles,StyleController,attr,tokenList,htmlSlot}from"@godown/element";import{scopePrefix,cssGlobalVars,GlobalStyle}from"../../internal/global-style.js";import{css,html}from"lit";import{property,queryAll}from"lit/decorators.js";import{ringTypeAttribute,RingBuilder}from"../../internal/ring.js";import _decorate from"@oxc-project/runtime/helpers/decorate";import"../../internal/reset-style.js";import"sharekit";const protoName=`tabs`,cssScope=scopePrefix(protoName),hoverToken=`hover`;let Tabs=class e extends GlobalStyle{constructor(){super(),this.ringType=`border`,this.beginning=`selected`,this.ending=`remain`,this.indicator=`background`,this.index=0,new StyleController(this,()=>new RingBuilder({type:this.ringType}).css)}render(){let e=this.ending===`remain`;return html`<ul part="root" ${attr(this.observedRecord)} @mouseleave="${this._handleMouseLeave}"> ${this.tabs?.map((a,o)=>html`<li part="${tokenList(`item`,e&&this.index===o&&`selected`)}" @mouseenter=${()=>{this.move(this.previousIndex,o),this.previousIndex=o}} @click=${()=>this.select(o)}> ${htmlSlot(a,a)} <div part="indicator"></div> </li>`)} </ul>`}get _finalIndex(){return this.ending===`none`&&this.beginning===`selected`?this.index:-1}connectedCallback(){super.connectedCallback(),this.previousIndex=this._finalIndex}_handleMouseLeave(){let e=this._items[this.previousIndex];e&&e.part.remove(hoverToken),this.previousIndex=this._finalIndex}move(e,a){if(e===a)return;let{_items:o,_indicators:s}=this,c=o[a];if(!c)return;c.part.add(hoverToken);let l=o[e];if(!l||(l.part.remove(hoverToken),this.beginning===`none`))return;let u=s[a],d=s[e];if(!u||!d)return;let{x:f,y:p,width:m}=d.getBoundingClientRect(),{x:h,y:g}=u.getBoundingClientRect(),_=f-h,v=p-g,{style:y}=u,{style:b}=d;y.transform=`translate3d(${_}px,${v}px,0)`,y.width=`${m}px`,y.transition=b.transition=`none`,u.getBoundingClientRect(),y.width=y.transform=y.transition=b.transition=``}select(e){let{index:a,previousIndex:o}=this;this.move(o,e),e!==a&&(this.previousIndex=e,this.index=e,this.dispatchCustomEvent(`select`,e))}};_decorate([property({attribute:ringTypeAttribute})],Tabs.prototype,`ringType`,void 0),_decorate([property()],Tabs.prototype,`beginning`,void 0),_decorate([property()],Tabs.prototype,`ending`,void 0),_decorate([property()],Tabs.prototype,`indicator`,void 0),_decorate([property({type:Array})],Tabs.prototype,`tabs`,void 0),_decorate([property({type:Number})],Tabs.prototype,`index`,void 0),_decorate([queryAll(`[part~=item]`)],Tabs.prototype,`_items`,void 0),_decorate([queryAll(`[part=indicator]`)],Tabs.prototype,`_indicators`,void 0),Tabs=_decorate([godown(protoName),styles(css`:host{${cssScope}--indicator-background:var(${cssGlobalVars.passive});${cssScope}--selected-background:var(${cssGlobalVars.passive});transition:.2s ease-in-out;display:flex;cursor:default}[part=root]{gap:.25em;padding:.25em;position:relative;z-index:1;display:flex;flex-direction:inherit;overflow-x:clip;border-radius:inherit;transition:inherit;transition-property:width,transform,opacity}[part~=item]{position:relative;width:100%;display:block;text-align:center;position:relative;white-space:nowrap;transition:inherit;border-radius:inherit;transition-property:inherit}[part=indicator],[part~=item]::after{width:100%;height:100%;inset:0;position:absolute;transition:inherit;border-radius:inherit;transition-property:inherit;background:var(${cssScope}--indicator-background)}[part=indicator]{opacity:0;z-index:-1}[part~=item]::after{z-index:-2}[indicator=underline] [part=indicator],[indicator=underline] [part~=item]::after{top:100%;height:.15em;border-radius:.075em;margin-top:.15em}[part~=selected]::after{content:"";background:var(${cssScope}--selected-background)}[part~=hover] [part=indicator]{opacity:1}`)],Tabs);var Tabs$1=Tabs;export{Tabs,Tabs$1 as default};
|
|
2
2
|
//# sourceMappingURL=component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../src/web-components/tabs/component.ts"],"sourcesContent":["import { attr, godown, htmlSlot, StyleController, styles, tokenList } from \"@godown/element\";\nimport { cssGlobalVars, GlobalStyle, scopePrefix } from \"../../internal/global-style.js\";\nimport { css, html, type TemplateResult } from \"lit\";\nimport { property, queryAll } from \"lit/decorators.js\";\nimport { RingBuilder, ringTypeAttribute, type RingType } from \"../../internal/ring.js\";\n\nconst protoName = \"tabs\";\nconst cssScope = scopePrefix(protoName);\n\nconst hoverToken = \"hover\";\n\n/**\n * {@linkcode Tabs} used to render a set of tabs.\n *\n * @fires select - Fires when the tab index is changed.\n * @category display\n */\n@godown(protoName)\n@styles(css`\n :host {\n ${cssScope}--indicator-background: var(${cssGlobalVars.passive});\n ${cssScope}--selected-background: var(${cssGlobalVars.passive});\n transition: 0.2s ease-in-out;\n display: flex;\n cursor: default;\n }\n\n [part=\"root\"] {\n gap: 0.25em;\n padding: 0.25em;\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: inherit;\n overflow-x: clip;\n border-radius: inherit;\n transition: inherit;\n transition-property: width, transform, opacity;\n }\n\n [part~=\"item\"] {\n position: relative;\n width: 100%;\n display: block;\n text-align: center;\n position: relative;\n white-space: nowrap;\n transition: inherit;\n border-radius: inherit;\n transition-property: inherit;\n }\n\n [part=\"indicator\"],\n [part~=\"item\"]::after {\n width: 100%;\n height: 100%;\n inset: 0;\n position: absolute;\n transition: inherit;\n border-radius: inherit;\n transition-property: inherit;\n background: var(${cssScope}--indicator-background);\n }\n\n [part=\"indicator\"] {\n opacity: 0;\n z-index: -1;\n }\n\n [part~=\"item\"]::after {\n z-index: -2;\n }\n\n [indicator=\"underline\"] [part=\"indicator\"],\n [indicator=\"underline\"] [part~=\"item\"]::after {\n top: 100%;\n height: 0.15em;\n border-radius: 0.075em;\n margin-top: 0.15em;\n }\n\n [part~=\"selected\"]::after {\n content: \"\";\n background: var(${cssScope}--selected-background);\n }\n\n [part~=\"hover\"] [part=\"indicator\"] {\n opacity: 1;\n }\n`)\nclass Tabs extends GlobalStyle {\n @property({ attribute: ringTypeAttribute })\n ringType: RingType = \"border\";\n\n /**\n * If
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../src/web-components/tabs/component.ts"],"sourcesContent":["import { attr, godown, htmlSlot, StyleController, styles, tokenList } from \"@godown/element\";\nimport { cssGlobalVars, GlobalStyle, scopePrefix } from \"../../internal/global-style.js\";\nimport { css, html, type TemplateResult } from \"lit\";\nimport { property, queryAll } from \"lit/decorators.js\";\nimport { RingBuilder, ringTypeAttribute, type RingType } from \"../../internal/ring.js\";\n\nconst protoName = \"tabs\";\nconst cssScope = scopePrefix(protoName);\n\nconst hoverToken = \"hover\";\n\n/**\n * {@linkcode Tabs} used to render a set of tabs.\n *\n * @fires select - Fires when the tab index is changed.\n * @category display\n */\n@godown(protoName)\n@styles(css`\n :host {\n ${cssScope}--indicator-background: var(${cssGlobalVars.passive});\n ${cssScope}--selected-background: var(${cssGlobalVars.passive});\n transition: 0.2s ease-in-out;\n display: flex;\n cursor: default;\n }\n\n [part=\"root\"] {\n gap: 0.25em;\n padding: 0.25em;\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: inherit;\n overflow-x: clip;\n border-radius: inherit;\n transition: inherit;\n transition-property: width, transform, opacity;\n }\n\n [part~=\"item\"] {\n position: relative;\n width: 100%;\n display: block;\n text-align: center;\n position: relative;\n white-space: nowrap;\n transition: inherit;\n border-radius: inherit;\n transition-property: inherit;\n }\n\n [part=\"indicator\"],\n [part~=\"item\"]::after {\n width: 100%;\n height: 100%;\n inset: 0;\n position: absolute;\n transition: inherit;\n border-radius: inherit;\n transition-property: inherit;\n background: var(${cssScope}--indicator-background);\n }\n\n [part=\"indicator\"] {\n opacity: 0;\n z-index: -1;\n }\n\n [part~=\"item\"]::after {\n z-index: -2;\n }\n\n [indicator=\"underline\"] [part=\"indicator\"],\n [indicator=\"underline\"] [part~=\"item\"]::after {\n top: 100%;\n height: 0.15em;\n border-radius: 0.075em;\n margin-top: 0.15em;\n }\n\n [part~=\"selected\"]::after {\n content: \"\";\n background: var(${cssScope}--selected-background);\n }\n\n [part~=\"hover\"] [part=\"indicator\"] {\n opacity: 1;\n }\n`)\nclass Tabs extends GlobalStyle {\n @property({ attribute: ringTypeAttribute })\n ringType: RingType = \"border\";\n\n /**\n * If \"select\", the indicator moves from the selected content to the hover position.\n *\n * If \"previous\", the indicator moves from the last moved position to the hover position.\n *\n * If \"none\", the indicator does not move.\n */\n @property()\n beginning: \"selected\" | \"previous\" | \"none\" = \"selected\";\n\n /**\n * If \"remain\", the indicator remain on the selected item.\n *\n * If \"none\", the indicator dose not display.\n */\n @property()\n ending: \"remain\" | \"none\" = \"remain\";\n\n /**\n * The behavior of the indicator:\n *\n * If \"background\", its size will be consistent with that of a single tab.\n *\n * If \"underline\", an underline will be displayed at the bottom of the tab.\n */\n @property()\n indicator: \"background\" | \"underline\" = \"background\";\n\n /**\n * Tab list or slot list.\n */\n @property({ type: Array })\n tabs: string[];\n\n /**\n * The index of the currently selected tab.\n */\n @property({ type: Number })\n index = 0;\n\n protected previousIndex: number;\n\n @queryAll(\"[part~=item]\")\n protected _items: HTMLCollectionOf<HTMLLIElement>;\n\n @queryAll(\"[part=indicator]\")\n protected _indicators: HTMLCollectionOf<HTMLDivElement>;\n\n constructor() {\n super();\n new StyleController(this, () => new RingBuilder({ type: this.ringType }).css);\n }\n\n render(): TemplateResult<1> {\n const isRemain = this.ending === \"remain\";\n return html`\n <ul\n part=\"root\"\n ${attr(this.observedRecord)}\n @mouseleave=\"${this._handleMouseLeave}\"\n >\n ${this.tabs?.map(\n (tab, index) => html`\n <li\n part=\"${tokenList(\"item\", isRemain && this.index === index && \"selected\")}\"\n @mouseenter=${() => {\n this.move(this.previousIndex, index);\n this.previousIndex = index;\n }}\n @click=${() => this.select(index)}\n >\n ${htmlSlot(tab, tab)}\n <div part=\"indicator\"></div>\n </li>\n `,\n )}\n </ul>\n `;\n }\n\n protected get _finalIndex() {\n return this.ending === \"none\" && this.beginning === \"selected\" ? this.index : -1;\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.previousIndex = this._finalIndex;\n }\n\n protected _handleMouseLeave(): void {\n const lastItem = this._items[this.previousIndex];\n if (lastItem) {\n lastItem.part.remove(hoverToken);\n }\n this.previousIndex = this._finalIndex;\n }\n\n move(sourceIndex: number, targetIndex: number): void {\n if (sourceIndex === targetIndex) {\n return;\n }\n const { _items, _indicators } = this;\n const targetElement = _items[targetIndex];\n if (!targetElement) {\n return;\n }\n targetElement.part.add(hoverToken);\n const fromItem = _items[sourceIndex];\n if (!fromItem) {\n return;\n }\n fromItem.part.remove(hoverToken);\n if (this.beginning === \"none\") {\n return;\n }\n const targetIndicator = _indicators[targetIndex];\n const sourceIndicator = _indicators[sourceIndex];\n if (!targetIndicator || !sourceIndicator) {\n return;\n }\n const { x: sourceX, y: sourceY, width: sourceWidth } = sourceIndicator.getBoundingClientRect();\n const { x, y } = targetIndicator.getBoundingClientRect();\n const transformX = sourceX - x;\n const transformY = sourceY - y;\n\n const { style: targetStyle } = targetIndicator;\n const { style: sourceStyle } = sourceIndicator;\n\n targetStyle.transform = `translate3d(${transformX}px,${transformY}px,0)`;\n targetStyle.width = `${sourceWidth}px`;\n targetStyle.transition = sourceStyle.transition = \"none\";\n targetIndicator.getBoundingClientRect();\n targetStyle.width = targetStyle.transform = targetStyle.transition = sourceStyle.transition = \"\";\n }\n\n select(selected: number): void {\n const { index, previousIndex } = this;\n this.move(previousIndex, selected);\n if (selected !== index) {\n this.previousIndex = selected;\n this.index = selected;\n this.dispatchCustomEvent(\"select\", selected);\n }\n }\n}\n\nexport default Tabs;\nexport { Tabs };\n"],"names":["Tabs","isRemain","tab","index","lastItem","sourceIndex: number","targetIndex: number","sourceIndex","targetIndex","targetElement","_items","fromItem","targetIndicator","_indicators","sourceIndicator","sourceX","sourceY","sourceWidth","transformX","x","transformY","y","targetStyle","sourceStyle","selected: number","previousIndex","selected"],"mappings":"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"}
|