@plusui/library 0.1.0

package/dist/components/tab/tab.js

@@ -0,0 +1,213 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { i, x } from '../../lit-element-ByzbtpGk.js';
+import Tailwind from '../base/tailwind-base.js';
+import { tabStyle } from './styles.js';
+import { o } from '../../style-map-DC_vNus2.js';
+import '../../styles/global.js';
+import '../../style-inject.es-tgCJW-Cu.js';
+import '../../index-B9iart53.js';
+import '../../directive-DZCF8pFJ.js';
+
+/**
+ * @tag plus-tab
+ * @summary Tab component that represents a single tab in a tab group.
+ *
+ * @slot - The default slot for tab content
+ * @slot prefix - Content to be placed before the tab content
+ * @slot suffix - Content to be placed after the tab content
+ *
+ * @csspart tab - The component's base wrapper
+ *
+ * @cssproperty --text-color - Controls the text color of the tab
+ * @cssproperty --active-color - Controls the color of the active indicator
+ * @cssproperty --bg-default - Controls the default background color
+ * @cssproperty --bg-hovered - Controls the background color when hovered
+ *
+ * @example
+ * ```html
+ * <plus-tab value="tab1">Tab 1</plus-tab>
+ * ```
+ */
+class PlusTab extends Tailwind {
+    constructor() {
+        super();
+        /**
+         * Sets the value of the tab, used for identification and selection
+         */
+        this.value = '';
+        /**
+         * Indicates if the tab is currently selected
+         * @default false
+         */
+        this.active = false;
+        /**
+         * Sets the size of the tab
+         * - sm: Small size
+         * - md: Medium size
+         * - lg: Large size
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * Disables the tab interaction
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Sets the orientation of the tabs
+         * - horizontal: Tabs arranged horizontally
+         * - vertical: Tabs arranged vertically
+         * @default 'horizontal'
+         */
+        this.orientation = 'horizontal';
+        /**
+         * Enables the dismiss button to remove the tab
+         * @default false
+         */
+        this.dismissible = false;
+        /**
+         * Truncates the text if it's too long
+         * @default false
+         */
+        this.truncate = false;
+        /**
+         * Use animated indicator instead of border for active tab
+         * This is controlled by the parent tab-group
+         * @default false
+         */
+        this.animated = false;
+        this.addEventListener('click', this.handleClick);
+    }
+    handleClick() {
+        if (this.disabled)
+            return;
+        this.emit('plus-tab-click', { detail: { value: this.value } });
+    }
+    handleDismiss(e) {
+        e.stopPropagation();
+        this.emit('plus-tab-dismiss', { detail: { value: this.value } });
+    }
+    render() {
+        const { size, active, disabled, orientation, prefixIcon, suffixIcon, dismissible, truncate, animated, } = this;
+        const dynamicStyles = {
+            '--tab-text-color': 'var(--text-color, var(--plus-color-text-default))',
+            '--tab-active-color': 'var(--active-color, var(--plus-color-primary-default))',
+            '--tab-bg-default': 'var(--bg-default, transparent)',
+            '--tab-bg-hovered': 'var(--bg-hovered, var(--plus-color-background-default-hovered))',
+        };
+        // Create tab style properties from component state
+        const tabStyleProps = {
+            size,
+            active,
+            disabled,
+            orientation,
+            truncated: truncate,
+            animated,
+        };
+        const { tab } = tabStyle(tabStyleProps);
+        return x `
+      <div
+        part="tab"
+        class=${tab()}
+        role="tab"
+        aria-selected=${active}
+        aria-disabled=${disabled}
+        tabindex=${disabled ? -1 : active ? 0 : -1}
+        style=${o(dynamicStyles)}
+      >
+        ${prefixIcon
+            ? x `<span class="tab-prefix-icon"
+              ><i class="${prefixIcon}"></i
+            ></span>`
+            : ''}
+        <slot></slot>
+        ${suffixIcon
+            ? x `<span class="tab-suffix-icon"
+              ><i class="${suffixIcon}"></i
+            ></span>`
+            : ''}
+        ${dismissible
+            ? x `<button
+              type="button"
+              class="tab-dismiss-button"
+              aria-label="Dismiss tab"
+              @click=${this.handleDismiss}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 384 512"
+                class="h-3 w-3 fill-current"
+              >
+                <path
+                  d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
+                />
+              </svg>
+            </button>`
+            : ''}
+      </div>
+    `;
+    }
+}
+PlusTab.styles = [
+    ...Tailwind.styles,
+    i `
+      :host {
+        display: inline-block;
+      }
+
+      .tab-prefix-icon,
+      .tab-suffix-icon {
+        display: inline-flex;
+        align-items: center;
+      }
+
+      .tab {
+        outline: none;
+      }
+    `,
+];
+__decorate([
+    n({ type: String })
+], PlusTab.prototype, "value", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], PlusTab.prototype, "active", void 0);
+__decorate([
+    n({ type: String })
+], PlusTab.prototype, "size", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        reflect: true,
+        converter: (value) => (value === 'false' ? false : Boolean(value)),
+    })
+], PlusTab.prototype, "disabled", void 0);
+__decorate([
+    n({ type: String })
+], PlusTab.prototype, "orientation", void 0);
+__decorate([
+    n({ type: String, attribute: 'prefix-icon' })
+], PlusTab.prototype, "prefixIcon", void 0);
+__decorate([
+    n({ type: String, attribute: 'suffix-icon' })
+], PlusTab.prototype, "suffixIcon", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        converter: (value) => (value === 'false' ? false : Boolean(value)),
+    })
+], PlusTab.prototype, "dismissible", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        converter: (value) => (value === 'false' ? false : Boolean(value)),
+    })
+], PlusTab.prototype, "truncate", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        converter: (value) => (value === 'false' ? false : Boolean(value)),
+    })
+], PlusTab.prototype, "animated", void 0);
+
+export { PlusTab, PlusTab as default };

package/dist/components/tab/tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/components/tab/tab.ts"],"names":[],"mappings":"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"}

package/dist/components/tab-group/index.d.ts

@@ -0,0 +1,2 @@
+export * from './tab-group';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/tab-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tab-group/index.ts"],"names":[],"mappings":"AAEA,cAAc,aAAa,CAAC"}

package/dist/components/tab-group/index.js

@@ -0,0 +1,16 @@
+import PlusTabGroup from './tab-group.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../state-D1d5Sfj8.js';
+import '../../query-CHb9Ft_d.js';
+import '../../base-Cl6v8-BZ.js';
+import '../base/tailwind-base.js';
+import '../../styles/global.js';
+import '../../style-inject.es-tgCJW-Cu.js';
+import '../tab/styles.js';
+import '../../index-B9iart53.js';
+
+// Define the element
+customElements.define('plus-tab-group', PlusTabGroup);
+
+export { PlusTabGroup };

package/dist/components/tab-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/tab-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,cAAc,aAAa,CAAC;AAE5B,qBAAqB;AACrB,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC"}

package/dist/components/tab-group/tab-group.d.ts

@@ -0,0 +1,118 @@
+import Tailwind from '../base/tailwind-base';
+/**
+ * @tag plus-tab-group
+ * @summary Tab group component that manages a set of tabs and panels.
+ *
+ * @slot tablist - Slot for tabs
+ * @slot panels - Slot for tab panels
+ *
+ * @csspart group - The component's base wrapper
+ * @csspart tablist - The tabs container
+ * @csspart panels - The tab panels container
+ * @csspart indicator - The animated indicator element (when animated=true)
+ *
+ * @cssproperty --tabs-gap - Controls the gap between tabs
+ * @cssproperty --tabs-indicator-color - Controls the color of the active tab indicator
+ * @cssproperty --tabs-indicator-height - Controls the height of the animated indicator
+ *
+ * @event plus-tabs-change - Emitted when a tab is selected with the tab's value
+ *
+ * @example
+ * ```html
+ * <plus-tab-group>
+ *   <plus-tab value="tab1" slot="tablist">Tab 1</plus-tab>
+ *   <plus-tab value="tab2" slot="tablist">Tab 2</plus-tab>
+ *   <plus-tab-panel value="tab1" slot="panels">Content 1</plus-tab-panel>
+ *   <plus-tab-panel value="tab2" slot="panels">Content 2</plus-tab-panel>
+ * </plus-tab-group>
+ * ```
+ */
+export default class PlusTabGroup extends Tailwind {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Sets the size of the tabs
+     * - sm: Small size
+     * - md: Medium size
+     * - lg: Large size
+     * @default 'md'
+     */
+    size: 'sm' | 'md' | 'lg';
+    /**
+     * Sets the orientation of the tabs
+     * - horizontal: Tabs arranged horizontally
+     * - vertical: Tabs arranged vertically
+     * @default 'horizontal'
+     */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * Disables all tabs
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Enables the dismiss button on all tabs
+     * @default false
+     */
+    dismissible: boolean;
+    /**
+     * Currently active tab value
+     */
+    value: string;
+    /**
+     * Enables animated sliding indicator for active tab
+     * @default false
+     */
+    animated: boolean;
+    /**
+     * References to DOM elements
+     */
+    private tablistSlot;
+    private panelsSlot;
+    private indicator;
+    /**
+     * Internal state to track tabs and panels
+     */
+    private tabs;
+    private panels;
+    private resizeObserver?;
+    private mutationObserver?;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Get all tabs from the tablist slot
+     */
+    private getTabs;
+    /**
+     * Get all panels from the panels slot
+     */
+    private getPanels;
+    /**
+     * Handle tab slot change
+     */
+    private handleTabsSlotChange;
+    /**
+     * Handle panels slot change
+     */
+    private handlePanelsSlotChange;
+    /**
+     * Updates the indicator position and size
+     */
+    private updateIndicator;
+    /**
+     * Synchronize tabs with panels and apply properties
+     */
+    private syncTabsWithPanels;
+    /**
+     * Handle tab click event
+     */
+    private handleTabClick;
+    /**
+     * Handle tab dismiss event
+     */
+    private handleTabDismiss;
+    updated(changedProperties: Map<string, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export { PlusTabGroup };
+//# sourceMappingURL=tab-group.d.ts.map

package/dist/components/tab-group/tab-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-group.d.ts","sourceRoot":"","sources":["../../../src/components/tab-group/tab-group.ts"],"names":[],"mappings":"AAEA,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAO7C;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,QAAQ;IAChD,OAAgB,MAAM,4BAsCpB;IAEF;;;;;;OAMG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;;;;OAKG;IAEH,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IAEtD;;;OAGG;IAKH,QAAQ,UAAS;IAEjB;;;OAGG;IAKH,WAAW,UAAS;IAEpB;;OAEG;IAEH,KAAK,SAAM;IAEX;;;OAGG;IAMH,QAAQ,UAAS;IAEjB;;OAEG;IAC4B,OAAO,CAAC,WAAW,CAAmB;IACvC,OAAO,CAAC,UAAU,CAAmB;IAC1C,OAAO,CAAC,SAAS,CAAyB;IAEnE;;OAEG;IACM,OAAO,CAAC,IAAI,CAAiB;IAC7B,OAAO,CAAC,MAAM,CAAsB;IAG7C,OAAO,CAAC,cAAc,CAAC,CAAiB;IACxC,OAAO,CAAC,gBAAgB,CAAC,CAAmB;;IAcnC,iBAAiB;IAgBjB,oBAAoB;IAU7B;;OAEG;IACH,OAAO,CAAC,OAAO;IAQf;;OAEG;IACH,OAAO,CAAC,SAAS;IAQjB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAQ5B;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAK9B;;OAEG;IACH,OAAO,CAAC,eAAe;IAqCvB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IA0B1B;;OAEG;IACH,OAAO,CAAC,cAAc;IAStB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IA2Bf,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAa/C,MAAM;CAkBhB;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}