@nuralyui/tabs 0.0.4 → 0.0.6
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/package.json +1 -1
- package/tabs.component.js +4 -6
- package/tabs.component.js.map +1 -1
- package/tabs.style.js +2 -2
- package/tabs.style.js.map +1 -1
package/package.json
CHANGED
package/tabs.component.js
CHANGED
|
@@ -141,7 +141,7 @@ export class TabsComponent extends LitElement {
|
|
|
141
141
|
@dragstart=${(e) => this.handleDragStart(e)}
|
|
142
142
|
@drop=${(event) => this.handleDrop(event)}
|
|
143
143
|
class=${tabIndex === this.activeTab ? 'tab-label active' : 'tab-label'}
|
|
144
|
-
@
|
|
144
|
+
@mousedown=${(e) => this.setActiveTab(tabIndex, children[tabIndex], e)}
|
|
145
145
|
>
|
|
146
146
|
<hy-label
|
|
147
147
|
contenteditable=${((_b = this.editable) === null || _b === void 0 ? void 0 : _b.canEditTabTitle) ? true : nothing}
|
|
@@ -209,11 +209,9 @@ export class TabsComponent extends LitElement {
|
|
|
209
209
|
setActiveTab(index, _element, event) {
|
|
210
210
|
event.preventDefault();
|
|
211
211
|
this.activeTab = index;
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
})
|
|
216
|
-
);*/
|
|
212
|
+
this.dispatchEvent(new CustomEvent(TabEvent.tabTilteClick, {
|
|
213
|
+
detail: { index },
|
|
214
|
+
}));
|
|
217
215
|
}
|
|
218
216
|
}
|
|
219
217
|
TabsComponent.styles = styles;
|
package/tabs.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.component.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.component.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {LitElement, PropertyValueMap, html, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {styles} from './tabs.style.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport { NOTHING_STRING, TabEditable, TabEvent, TabOrientation, TabsAlign} from './tabs.constant.js';\n//todo: make this use peer dependency\nimport \"../label/label.component.js\";\n/**\n * `hy-tabs` is a LitElement that provides a customizable tabs.\n * @customElement 'hy-tabs'\n *\n * Attributes\n * @attr activeTab\n * @attr orientation\n * @attr tabsAlign\n * @attr editable\n * Events\n * @fires tabEdited - Indicates when tab edited\n * @fires removeTab - Indicates when tab removed\n * @fires addTab - Indicates when tab added\n */\nexport class TabsComponent extends LitElement {\n @property({type: Number})\n activeTab!: number;\n\n @property({type: String})\n orientation!: TabOrientation;\n\n @property({type: String})\n tabsAlign!: TabsAlign;\n\n @property({type: Object})\n editable!: TabEditable;\n\n @property({type: Array})\n tabs!: any[];\n\n static override styles = styles;\n\n constructor() {\n super();\n this.activeTab = 0;\n this.orientation = TabOrientation.Horizontal;\n }\n\n override render() {\n return html`\n <div\n class=${classMap({\n 'tabs-container': true,\n 'vertical-align': this.orientation === TabOrientation.Vertical,\n 'horizontal-align': this.orientation === TabOrientation.Horizontal,\n 'right-align': this.tabsAlign === TabsAlign.Right,\n 'left-align': this.tabsAlign === TabsAlign.Left,\n 'center-align': this.tabsAlign === TabsAlign.Center,\n })}\n >\n <div\n class=\"tab-labels\"\n style=\"flex-direction: ${this.orientation === TabOrientation.Vertical ? 'column' : ('row' as any)}\"\n >\n <div></div>\n\n ${this.renderTabs()}\n <div></div>\n </div>\n <div class=\"tab-content\">${this.renderActiveTab()}</div>\n </div>\n `;\n }\n override connectedCallback() {\n super.connectedCallback();\n this.observeChildrenChanges();\n this.addEventListener('dragover', this.handleDragOver);\n }\n\n private observeChildrenChanges() {\n const mutationObserver = new MutationObserver(() => {\n this.requestUpdate();\n });\n\n mutationObserver.observe(this, {childList: true});\n }\n\n private handleDragStart(event: any) {\n event.dataTransfer.setData('text/plain', event.currentTarget.dataset.index);\n event.dataTransfer.effectAllowed = 'move';\n event.target.closest('.tab-label').classList.add('dragging-start');\n }\n\n private handleDragOver(event: any) {\n event.preventDefault();\n event.dataTransfer.dropEffect = 'move';\n }\n\n private handleDragEnter(event: any) {\n event.preventDefault();\n if (event.currentTarget.contains(event.relatedTarget)) {\n return;\n }\n event.currentTarget.classList.add('dragging');\n }\n\n private handleDragLeave(event: any) {\n event.preventDefault();\n if (event.currentTarget.contains(event.relatedTarget)) {\n return;\n }\n if (event.currentTarget.classList.contains('dragging')) {\n event.currentTarget.classList.remove('dragging');\n }\n }\n\n private handleDrop(event: any) {\n event.preventDefault();\n const sourceIndex = event.dataTransfer.getData('text/plain');\n const targetIndex = event.currentTarget.dataset.index;\n if (sourceIndex !== targetIndex) {\n const tabs = Array.from(this.children || []);\n const sourceTab = tabs[sourceIndex];\n const targetTab = tabs[targetIndex];\n this.dispatchEvent(\n new CustomEvent(TabEvent.tabOrderChange, {\n detail: {sourceTab, targetTab, sourceIndex: parseInt(sourceIndex), targetIndex: parseInt(targetIndex)},\n })\n );\n }\n this.shadowRoot!.querySelector('.dragging')?.classList.remove('dragging');\n event.target.classList.remove('dragging');\n this.shadowRoot!.querySelector('.dragging-start')?.classList.remove('dragging-start');\n }\n\n renderDeleteIcon(tab :any){\n // if the tab does not gave edibale propetry and canDeleteTab is true\n // then render the delete icon\n if(!tab.editable && this.editable?.canDeleteTab){\n return html`<hy-icon\n @click=${() => {\n this.dispatchEvent(\n new CustomEvent(TabEvent.removeTab, {\n detail: {index: tab.index},\n })\n );\n }}\n name=\"window-close\"\n class=\"close-icon\"\n ></hy-icon>`\n ;\n }\n return nothing;\n\n }\n private renderTabs() {\n const tabs = [];\n const children = this.tabs || [];\n for (let tabIndex = 0; tabIndex < children.length; tabIndex++) {\n const tab = html`\n <div\n data-index=${tabIndex}\n draggable=${this.editable?.canMove}\n @dragenter=${this.handleDragEnter}\n @dragleave=${this.handleDragLeave}\n @dragstart=${(e: any) => this.handleDragStart(e)}\n @drop=${(event: Event) => this.handleDrop(event)}\n class=${tabIndex === this.activeTab ? 'tab-label active' : 'tab-label'}\n @click=${(e: Event) => this.setActiveTab(tabIndex, children[tabIndex], e)}\n >\n <hy-label\n contenteditable=${this.editable?.canEditTabTitle ? true : nothing}\n @blur=${(event: Event) => {\n this.dispatchEvent(\n new CustomEvent(TabEvent.tabEdited, {\n detail: {\n tab: {\n label: (event.target as HTMLElement)?.textContent,\n index: tabIndex,\n },\n },\n })\n );\n }}\n >${children[tabIndex].label}</hy-label\n >\n ${children[tabIndex].editable?.canDeleteTab ?? this.editable?.canDeleteTab\n ? html`<hy-icon\n @click=${() => {\n this.dispatchEvent(\n new CustomEvent(TabEvent.removeTab, {\n detail: {index: tabIndex},\n })\n );\n }}\n name=\"window-close\"\n class=\"close-icon\"\n ></hy-icon>`\n : NOTHING_STRING}\n </div>\n `;\n tabs.push(tab);\n }\n if (this.editable?.canAddTab) {\n const tab = html`\n <div\n class=\"tab-label add-tab-label\"\n @click=${() => {\n this.dispatchEvent(new CustomEvent(TabEvent.addTab));\n }}\n >\n <hy-icon name=\"plus\" class=\"add-tab-icon\"></hy-icon>\n </div>\n `;\n tabs.push(tab);\n }\n return tabs;\n }\n\n override updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>) {\n super.updated(changedProperties);\n if (!this.tabs[this.activeTab]) {\n if (!this.tabs[this.activeTab - 1]) {\n this.activeTab++;\n } else {\n this.activeTab--;\n }\n }\n }\n\n private renderActiveTab() {\n const children = this.tabs ? [...this.tabs] : [];\n if (children.length > 0 && this.activeTab >= 0 && this.activeTab < children.length) {\n return html`${children[this.activeTab].content}`;\n }\n return html`${NOTHING_STRING}`;\n }\n\n private setActiveTab(index: number, _element: Element, event: Event) {\n event.preventDefault();\n this.activeTab = index;\n /*element?.dispatchEvent(\n new CustomEvent(TabEvent.tabTilteClick, {\n detail: event,\n })\n );*/\n }\n}\n\ncustomElements.define('hy-tabs', TabsComponent);\n"]}
|
|
1
|
+
{"version":3,"file":"tabs.component.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.component.ts"],"names":[],"mappings":";;;;;;AAAA,uDAAuD;AACvD,OAAO,EAAC,UAAU,EAAoB,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAChE,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,MAAM,EAAC,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,cAAc,EAAe,QAAQ,EAAE,cAAc,EAAE,SAAS,EAAC,MAAM,oBAAoB,CAAC;AACrG,qCAAqC;AACrC,OAAO,6BAA6B,CAAC;AACrC;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,aAAc,SAAQ,UAAU;IAkB3C;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QACnB,IAAI,CAAC,WAAW,GAAG,cAAc,CAAC,UAAU,CAAC;IAC/C,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,gBAAgB,EAAE,IAAI;YACtB,gBAAgB,EAAE,IAAI,CAAC,WAAW,KAAK,cAAc,CAAC,QAAQ;YAC9D,kBAAkB,EAAE,IAAI,CAAC,WAAW,KAAK,cAAc,CAAC,UAAU;YAClE,aAAa,EAAE,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,KAAK;YACjD,YAAY,EAAE,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,IAAI;YAC/C,cAAc,EAAE,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,MAAM;SACpD,CAAC;;;;mCAIyB,IAAI,CAAC,WAAW,KAAK,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAE,KAAa;;;;YAI/F,IAAI,CAAC,UAAU,EAAE;;;mCAGM,IAAI,CAAC,eAAe,EAAE;;KAEpD,CAAC;IACJ,CAAC;IACQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IACzD,CAAC;IAEO,sBAAsB;QAC5B,MAAM,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACjD,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC,CAAC,CAAC;QAEH,gBAAgB,CAAC,OAAO,CAAC,IAAI,EAAE,EAAC,SAAS,EAAE,IAAI,EAAC,CAAC,CAAC;IACpD,CAAC;IAEO,eAAe,CAAC,KAAU;QAChC,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,YAAY,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAC5E,KAAK,CAAC,YAAY,CAAC,aAAa,GAAG,MAAM,CAAC;QAC1C,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACrE,CAAC;IAEO,cAAc,CAAC,KAAU;QAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,YAAY,CAAC,UAAU,GAAG,MAAM,CAAC;IACzC,CAAC;IAEO,eAAe,CAAC,KAAU;QAChC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE;YACrD,OAAO;SACR;QACD,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IAChD,CAAC;IAEO,eAAe,CAAC,KAAU;QAChC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE;YACrD,OAAO;SACR;QACD,IAAI,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;YACtD,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;SAClD;IACH,CAAC;IAEO,UAAU,CAAC,KAAU;;QAC3B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,MAAM,WAAW,GAAG,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAC7D,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC;QACtD,IAAI,WAAW,KAAK,WAAW,EAAE;YAC/B,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC;YAC7C,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC;YACpC,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC;YACpC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,CAAC,cAAc,EAAE;gBACvC,MAAM,EAAE,EAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,CAAC,WAAW,CAAC,EAAE,WAAW,EAAE,QAAQ,CAAC,WAAW,CAAC,EAAC;aACvG,CAAC,CACH,CAAC;SACH;QACD,MAAA,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,WAAW,CAAC,0CAAE,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QAC1E,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QAC1C,MAAA,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,0CAAE,SAAS,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;IACxF,CAAC;IAED,gBAAgB,CAAC,GAAQ;;QACvB,qEAAqE;QACrE,8BAA8B;QAC9B,IAAG,CAAC,GAAG,CAAC,QAAQ,KAAI,MAAA,IAAI,CAAC,QAAQ,0CAAE,YAAY,CAAA,EAAC;YAC9C,OAAO,IAAI,CAAA;eACF,GAAG,EAAE;gBACZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,CAAC,SAAS,EAAE;oBAClC,MAAM,EAAE,EAAC,KAAK,EAAE,GAAG,CAAC,KAAK,EAAC;iBAC3B,CAAC,CACH,CAAC;YACJ,CAAC;;;gBAGS,CACX;SACF;QACD,OAAO,OAAO,CAAC;IAEf,CAAC;IACO,UAAU;;QAChB,MAAM,IAAI,GAAG,EAAE,CAAC;QAChB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;QACjC,KAAK,IAAI,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE;YAC7D,MAAM,GAAG,GAAG,IAAI,CAAA;;uBAEC,QAAQ;sBACT,MAAA,IAAI,CAAC,QAAQ,0CAAE,OAAO;uBACrB,IAAI,CAAC,eAAe;uBACpB,IAAI,CAAC,eAAe;uBACpB,CAAC,CAAM,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;kBACxC,CAAC,KAAY,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;kBACxC,QAAQ,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,WAAW;uBACzD,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;;;8BAGzD,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,eAAe,EAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;oBACzD,CAAC,KAAY,EAAE,EAAE;;gBACvB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,CAAC,SAAS,EAAE;oBAClC,MAAM,EAAE;wBACN,GAAG,EAAE;4BACH,KAAK,EAAE,MAAC,KAAK,CAAC,MAAsB,0CAAE,WAAW;4BACjD,KAAK,EAAE,QAAQ;yBAChB;qBACF;iBACF,CAAC,CACH,CAAC;YACJ,CAAC;eACE,QAAQ,CAAC,QAAQ,CAAC,CAAC,KAAK;;YAE3B,CAAA,MAAA,MAAA,QAAQ,CAAC,QAAQ,CAAC,CAAC,QAAQ,0CAAE,YAAY,mCAAI,MAAA,IAAI,CAAC,QAAQ,0CAAE,YAAY;gBACxE,CAAC,CAAC,IAAI,CAAA;yBACO,GAAG,EAAE;oBACZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,CAAC,SAAS,EAAE;wBAClC,MAAM,EAAE,EAAC,KAAK,EAAE,QAAQ,EAAC;qBAC1B,CAAC,CACH,CAAC;gBACJ,CAAC;;;0BAGS;gBACd,CAAC,CAAC,cAAc;;OAErB,CAAC;YACF,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SAChB;QACD,IAAI,MAAA,IAAI,CAAC,QAAQ,0CAAE,SAAS,EAAE;YAC5B,MAAM,GAAG,GAAG,IAAI,CAAA;;;mBAGH,GAAG,EAAE;gBACZ,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;YACvD,CAAC;;;;OAIJ,CAAC;YACF,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SAChB;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAEQ,OAAO,CAAC,iBAAoE;QACnF,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;YAC9B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,EAAE;gBAClC,IAAI,CAAC,SAAS,EAAE,CAAC;aAClB;iBAAM;gBACL,IAAI,CAAC,SAAS,EAAE,CAAC;aAClB;SACF;IACH,CAAC;IAEO,eAAe;QACrB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QACjD,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,MAAM,EAAE;YAClF,OAAO,IAAI,CAAA,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,CAAC;SAClD;QACD,OAAO,IAAI,CAAA,GAAG,cAAc,EAAE,CAAC;IACjC,CAAC;IAEO,YAAY,CAAC,KAAa,EAAE,QAAiB,EAAE,KAAY;QACjE,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,CAAC,aAAa,EAAE;YACtC,MAAM,EAAE,EAAC,KAAK,EAAC;SAChB,CAAC,CACH,CAAC;IACJ,CAAC;;AA9Me,oBAAM,GAAG,MAAM,CAAC;AAdhC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;gDACN;AAGnB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;kDACI;AAG7B;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;gDACH;AAGtB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;+CACF;AAGvB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC;2CACX;AAmNf,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {LitElement, PropertyValueMap, html, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {styles} from './tabs.style.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport { NOTHING_STRING, TabEditable, TabEvent, TabOrientation, TabsAlign} from './tabs.constant.js';\n//todo: make this use peer dependency\nimport \"../label/label.component.js\";\n/**\n * `hy-tabs` is a LitElement that provides a customizable tabs.\n * @customElement 'hy-tabs'\n *\n * Attributes\n * @attr activeTab\n * @attr orientation\n * @attr tabsAlign\n * @attr editable\n * Events\n * @fires tabEdited - Indicates when tab edited\n * @fires removeTab - Indicates when tab removed\n * @fires addTab - Indicates when tab added\n */\nexport class TabsComponent extends LitElement {\n @property({type: Number})\n activeTab!: number;\n\n @property({type: String})\n orientation!: TabOrientation;\n\n @property({type: String})\n tabsAlign!: TabsAlign;\n\n @property({type: Object})\n editable!: TabEditable;\n\n @property({type: Array})\n tabs!: any[];\n\n static override styles = styles;\n\n constructor() {\n super();\n this.activeTab = 0;\n this.orientation = TabOrientation.Horizontal;\n }\n\n override render() {\n return html`\n <div\n class=${classMap({\n 'tabs-container': true,\n 'vertical-align': this.orientation === TabOrientation.Vertical,\n 'horizontal-align': this.orientation === TabOrientation.Horizontal,\n 'right-align': this.tabsAlign === TabsAlign.Right,\n 'left-align': this.tabsAlign === TabsAlign.Left,\n 'center-align': this.tabsAlign === TabsAlign.Center,\n })}\n >\n <div\n class=\"tab-labels\"\n style=\"flex-direction: ${this.orientation === TabOrientation.Vertical ? 'column' : ('row' as any)}\"\n >\n <div></div>\n\n ${this.renderTabs()}\n <div></div>\n </div>\n <div class=\"tab-content\">${this.renderActiveTab()}</div>\n </div>\n `;\n }\n override connectedCallback() {\n super.connectedCallback();\n this.observeChildrenChanges();\n this.addEventListener('dragover', this.handleDragOver);\n }\n\n private observeChildrenChanges() {\n const mutationObserver = new MutationObserver(() => {\n this.requestUpdate();\n });\n\n mutationObserver.observe(this, {childList: true});\n }\n\n private handleDragStart(event: any) {\n event.dataTransfer.setData('text/plain', event.currentTarget.dataset.index);\n event.dataTransfer.effectAllowed = 'move';\n event.target.closest('.tab-label').classList.add('dragging-start');\n }\n\n private handleDragOver(event: any) {\n event.preventDefault();\n event.dataTransfer.dropEffect = 'move';\n }\n\n private handleDragEnter(event: any) {\n event.preventDefault();\n if (event.currentTarget.contains(event.relatedTarget)) {\n return;\n }\n event.currentTarget.classList.add('dragging');\n }\n\n private handleDragLeave(event: any) {\n event.preventDefault();\n if (event.currentTarget.contains(event.relatedTarget)) {\n return;\n }\n if (event.currentTarget.classList.contains('dragging')) {\n event.currentTarget.classList.remove('dragging');\n }\n }\n\n private handleDrop(event: any) {\n event.preventDefault();\n const sourceIndex = event.dataTransfer.getData('text/plain');\n const targetIndex = event.currentTarget.dataset.index;\n if (sourceIndex !== targetIndex) {\n const tabs = Array.from(this.children || []);\n const sourceTab = tabs[sourceIndex];\n const targetTab = tabs[targetIndex];\n this.dispatchEvent(\n new CustomEvent(TabEvent.tabOrderChange, {\n detail: {sourceTab, targetTab, sourceIndex: parseInt(sourceIndex), targetIndex: parseInt(targetIndex)},\n })\n );\n }\n this.shadowRoot!.querySelector('.dragging')?.classList.remove('dragging');\n event.target.classList.remove('dragging');\n this.shadowRoot!.querySelector('.dragging-start')?.classList.remove('dragging-start');\n }\n\n renderDeleteIcon(tab :any){\n // if the tab does not gave edibale propetry and canDeleteTab is true\n // then render the delete icon\n if(!tab.editable && this.editable?.canDeleteTab){\n return html`<hy-icon\n @click=${() => {\n this.dispatchEvent(\n new CustomEvent(TabEvent.removeTab, {\n detail: {index: tab.index},\n })\n );\n }}\n name=\"window-close\"\n class=\"close-icon\"\n ></hy-icon>`\n ;\n }\n return nothing;\n\n }\n private renderTabs() {\n const tabs = [];\n const children = this.tabs || [];\n for (let tabIndex = 0; tabIndex < children.length; tabIndex++) {\n const tab = html`\n <div\n data-index=${tabIndex}\n draggable=${this.editable?.canMove}\n @dragenter=${this.handleDragEnter}\n @dragleave=${this.handleDragLeave}\n @dragstart=${(e: any) => this.handleDragStart(e)}\n @drop=${(event: Event) => this.handleDrop(event)}\n class=${tabIndex === this.activeTab ? 'tab-label active' : 'tab-label'}\n @mousedown=${(e: Event) => this.setActiveTab(tabIndex, children[tabIndex], e)}\n >\n <hy-label\n contenteditable=${this.editable?.canEditTabTitle ? true : nothing}\n @blur=${(event: Event) => {\n this.dispatchEvent(\n new CustomEvent(TabEvent.tabEdited, {\n detail: {\n tab: {\n label: (event.target as HTMLElement)?.textContent,\n index: tabIndex,\n },\n },\n })\n );\n }}\n >${children[tabIndex].label}</hy-label\n >\n ${children[tabIndex].editable?.canDeleteTab ?? this.editable?.canDeleteTab\n ? html`<hy-icon\n @click=${() => {\n this.dispatchEvent(\n new CustomEvent(TabEvent.removeTab, {\n detail: {index: tabIndex},\n })\n );\n }}\n name=\"window-close\"\n class=\"close-icon\"\n ></hy-icon>`\n : NOTHING_STRING}\n </div>\n `;\n tabs.push(tab);\n }\n if (this.editable?.canAddTab) {\n const tab = html`\n <div\n class=\"tab-label add-tab-label\"\n @click=${() => {\n this.dispatchEvent(new CustomEvent(TabEvent.addTab));\n }}\n >\n <hy-icon name=\"plus\" class=\"add-tab-icon\"></hy-icon>\n </div>\n `;\n tabs.push(tab);\n }\n return tabs;\n }\n\n override updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>) {\n super.updated(changedProperties);\n if (!this.tabs[this.activeTab]) {\n if (!this.tabs[this.activeTab - 1]) {\n this.activeTab++;\n } else {\n this.activeTab--;\n }\n }\n }\n\n private renderActiveTab() {\n const children = this.tabs ? [...this.tabs] : [];\n if (children.length > 0 && this.activeTab >= 0 && this.activeTab < children.length) {\n return html`${children[this.activeTab].content}`;\n }\n return html`${NOTHING_STRING}`;\n }\n\n private setActiveTab(index: number, _element: Element, event: Event) {\n event.preventDefault();\n this.activeTab = index;\n this.dispatchEvent(\n new CustomEvent(TabEvent.tabTilteClick, {\n detail: {index},\n })\n );\n }\n}\n\ncustomElements.define('hy-tabs', TabsComponent);\n"]}
|
package/tabs.style.js
CHANGED
|
@@ -54,7 +54,7 @@ export const styles = css `
|
|
|
54
54
|
flex-grow: 1;
|
|
55
55
|
background-color: var(--hybrid-tabs-content-background-color);
|
|
56
56
|
border-top: var(--hybrid-tabs-content-border-top);
|
|
57
|
-
max-height:
|
|
57
|
+
max-height:100vh;
|
|
58
58
|
overflow-y:auto;
|
|
59
59
|
overflow-x:hidden;
|
|
60
60
|
}
|
|
@@ -112,7 +112,7 @@ export const styles = css `
|
|
|
112
112
|
|
|
113
113
|
.close-icon {
|
|
114
114
|
font-size: var(--hybrid-tabs-add-icon-font-size);
|
|
115
|
-
vertical-align:
|
|
115
|
+
vertical-align: bottom;
|
|
116
116
|
margin-left: var(--hybrid-tabs-add-icon-margin-left);
|
|
117
117
|
}
|
|
118
118
|
|
package/tabs.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.style.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6LxB,CAAC","sourcesContent":["import {css} from 'lit';\n\nexport const styles = css`\n :host{\n display: block;\n height: 100%;\n }\n .tabs-container{\n background-color:var(--hybrid-tabs-container-background-color);\n height: 100%;\n }\n .tab-labels,\n .tabs-container {\n display: flex;\n }\n\n .tabs-container {\n box-shadow: var(--hybrid-tabs-container-box-shadow);\n }\n\n .dragging-start {\n border: var(--hybrid-tabs-dragging-start-border);\n }\n .dragging-enter {\n background-color: var(--hybrid-tabs-dragging-enter-background-color);\n }\n .vertical-align > .tab-content {\n border: var(--hybrid-tabs-va-enter-border);\n border-left: var(--hybrid-tabs-va-enter-border-left);\n }\n .vertical-align.right-align > .tab-content {\n border: var(--hybrid-tabs-va-ra-border);\n border-right: var(--hybrid-tabs-va-ra-border-right);\n }\n\n .tab-label {\n cursor: var(--hybrid-tabs-label-cursor);\n padding: var(--hybrid-tabs-label-padding);\n border-bottom: var(--hybrid-tabs-label-border-bottom);\n transition: var(--hybrid-tabs-label-transition);\n user-select: var(--hybrid-tabs-label-user-select);\n color:var(--hybrid-tabs-label-color);\n }\n\n .tab-label:hover {\n color: var(--hybrid-tabs-label-hover-color);\n }\n\n .tab-label.active {\n color: var(--hybrid-tabs-label-active-hover-color);\n }\n\n .tab-content {\n padding: var(--hybrid-tabs-content-padding);\n flex-grow: 1;\n background-color: var(--hybrid-tabs-content-background-color);\n border-top: var(--hybrid-tabs-content-border-top);\n max-height:
|
|
1
|
+
{"version":3,"file":"tabs.style.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6LxB,CAAC","sourcesContent":["import {css} from 'lit';\n\nexport const styles = css`\n :host{\n display: block;\n height: 100%;\n }\n .tabs-container{\n background-color:var(--hybrid-tabs-container-background-color);\n height: 100%;\n }\n .tab-labels,\n .tabs-container {\n display: flex;\n }\n\n .tabs-container {\n box-shadow: var(--hybrid-tabs-container-box-shadow);\n }\n\n .dragging-start {\n border: var(--hybrid-tabs-dragging-start-border);\n }\n .dragging-enter {\n background-color: var(--hybrid-tabs-dragging-enter-background-color);\n }\n .vertical-align > .tab-content {\n border: var(--hybrid-tabs-va-enter-border);\n border-left: var(--hybrid-tabs-va-enter-border-left);\n }\n .vertical-align.right-align > .tab-content {\n border: var(--hybrid-tabs-va-ra-border);\n border-right: var(--hybrid-tabs-va-ra-border-right);\n }\n\n .tab-label {\n cursor: var(--hybrid-tabs-label-cursor);\n padding: var(--hybrid-tabs-label-padding);\n border-bottom: var(--hybrid-tabs-label-border-bottom);\n transition: var(--hybrid-tabs-label-transition);\n user-select: var(--hybrid-tabs-label-user-select);\n color:var(--hybrid-tabs-label-color);\n }\n\n .tab-label:hover {\n color: var(--hybrid-tabs-label-hover-color);\n }\n\n .tab-label.active {\n color: var(--hybrid-tabs-label-active-hover-color);\n }\n\n .tab-content {\n padding: var(--hybrid-tabs-content-padding);\n flex-grow: 1;\n background-color: var(--hybrid-tabs-content-background-color);\n border-top: var(--hybrid-tabs-content-border-top);\n max-height:100vh;\n overflow-y:auto;\n overflow-x:hidden;\n }\n .right-align > .tab-labels {\n flex-direction: var(--hybrid-tabs-right-align-labels-flex-direction);\n align-self: var(--hybrid-tabs-right-align-labels-align-self);\n }\n\n .center-align > .tab-labels {\n align-self: var(--hybrid-tabs-center-align-labels-align-self);\n }\n .vertical-align {\n flex-direction: var(--hybrid-tabs-vertical-align-flex-direction);\n }\n .horizontal-align {\n flex-direction: var(--hybrid-tabs-halign-flex-direction);\n }\n\n .vertical-align.right-align {\n flex-direction: var(--hybrid-tabs-valign-right-align-flex-direction);\n }\n\n .tab-label:hover,\n .tab-label.active {\n border-bottom: var(--hybrid-tabs-label-active-border-bottom);\n border-color: var(--hybrid-tabs-label-active-border-color);\n }\n\n .tab-label.active {\n color: var(--hybrid-tabs-label-active-hover-color);\n }\n\n .vertical-align .tab-label {\n border: var(--hybrid-tabs-vertical-align-label-border);\n border-right: var(--hybrid-tabs-vertical-align-label-border-right);\n }\n\n .vertical-align.right-align .tab-label {\n border: var(--hybrid-tabs-valign-ralign-label-border);\n border-left: var(--hybrid-tabs-valign-ralign-label-border-left);\n }\n\n .vertical-align .tab-label:hover,\n .vertical-align .tab-label.active {\n border: var(--hybrid-tabs-vertical-align-label-border-active);\n border-right: var(--hybrid-tabs-vertical-align-label-border-right-active);\n border-color: var(--hybrid-tabs-vertical-align-label-border-color-active);\n }\n .vertical-align.right-align .tab-label:hover,\n .vertical-align.right-align .tab-label.active {\n border: var(--hybrid-tabs-valign-ralign-label-border-active);\n border-left: var(--hybrid-tabs-valign-ralign-label-border-left-active);\n border-color: var(--hybrid-tabs-valign-ralign-label-border-color-active);\n }\n\n .close-icon {\n font-size: var(--hybrid-tabs-add-icon-font-size);\n vertical-align: bottom;\n margin-left: var(--hybrid-tabs-add-icon-margin-left);\n }\n\n .add-tab-label {\n font-size: var(--hybrid-tabs-add-label-font-size);\n text-align: var(--hybrid-tabs-add-label-text-align);\n }\n .dragging {\n border: var(--hybrid-tabs-dragging-border) !important;\n opacity: 0.8;\n color: #464646 !important;\n }\n .tab-label.active {\n color: var(--hybrid-tabs-label-active);\n font-weight: bold;\n } \n .add-tab-icon{\n --hybrid-icon-color:var(--hybrid-tabs-add-icon-color);\n }\n :host{\n --hybrid-tabs-container-background-color:#ffffff;\n --hybrid-tabs-container-box-shadow:none;\n --hybrid-tabs-dragging-start-border:1px dashed black;\n --hybrid-tabs-dragging-enter-background-color:#1661b1;\n --hybrid-tabs-va-enter-border: none;\n --hybrid-tabs-va-enter-border-left: 1px solid #ccc;\n --hybrid-tabs-va-ra-border:none;\n --hybrid-tabs-va-ra-border-right:1px solid #ccc;\n --hybrid-tabs-label-cursor:pointer;\n --hybrid-tabs-label-padding: 7px 7px 5px 7px;\n --hybrid-tabs-label-border-bottom: 2px solid transparent;\n --hybrid-tabs-label-transition: border-color 0.1s ease;\n --hybrid-tabs-label-user-select: none;\n --hybrid-tabs-label-hover-color: #1661b1;\n --hybrid-tabs-label-active-hover-color:#006afe;\n --hybrid-tabs-content-padding:10px;\n --hybrid-tabs-content-background-color: #fff;\n --hybrid-tabs-content-border-top: 1px solid #ccc;\n --hybrid-tabs-right-align-labels-flex-direction:row-reverse;\n --hybrid-tabs-right-align-labels-align-self: end;\n --hybrid-tabs-center-align-labels-align-self:center;\n --hybrid-tabs-vertical-align-flex-direction:row;\n --hybrid-tabs-halign-flex-direction:column;\n --hybrid-tabs-valign-right-align-flex-direction:row-reverse;\n --hybrid-tabs-label-active-border-bottom:2px solid transparent;\n --hybrid-tabs-label-active-border-color: rgb(0, 106, 254);\n --hybrid-tabs-label-active-hover-color: #006afe;\n --hybrid-tabs-vertical-align-label-border: #006afe;\n --hybrid-tabs-vertical-align-label-border-right: 2px solid transparent;\n --hybrid-tabs-valign-ralign-label-border: none;\n --hybrid-tabs-valign-ralign-label-border-left: 2px solid transparent;\n --hybrid-tabs-vertical-align-label-border-active: none;\n --hybrid-tabs-vertical-align-label-border-right-active: 2px solid transparent;\n --hybrid-tabs-vertical-align-label-border-color-active: rgb(0, 106, 254);\n --hybrid-tabs-valign-ralign-label-border-active: none;\n --hybrid-tabs-valign-ralign-label-border-left-active: 2px solid transparent;\n --hybrid-tabs-valign-ralign-label-border-color-active: rgb(0, 106, 254);\n --hybrid-tabs-add-icon-font-size: 13px;\n --hybrid-tabs-add-icon-margin-left: 5px;\n --hybrid-tabs-add-label-font-size: 13px;\n --hybrid-tabs-add-label-text-align: center;\n --hybrid-tabs-dragging-border: 1px dashed gray;\n --hybrid-tabs-label-active: #000000;\n --hybrid-tabs-label-color:gray;\n --hybrid-tabs-add-icon-color: #000000;\n }\n @media (prefers-color-scheme: dark) {\n :host{\n --hybrid-tabs-container-background-color: #000000;\n --hybrid-tabs-content-background-color: #2d2d2d;\n --hybrid-tabs-label-hover-color: #aaa;\n --hybrid-tabs-label-active:#ffffff; \n --hybrid-tabs-add-icon-color: #ffffff;\n }\n }\n`;\n"]}
|