duoyun-ui/elements/tabs.js

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _DuoyunTabsElement_instances, _DuoyunTabsElement_orientation_get;
var DuoyunTabsElement_1;
import { adoptedStyle, customElement, emitter, property, boolattribute, attribute, part, state, } from '@mantou/gem/lib/decorators';
import { GemElement, html } from '@mantou/gem/lib/element';
import { createCSSSheet, css, partMap, classMap } from '@mantou/gem/lib/utils';
import { theme } from '../lib/theme';
import { commonHandle } from '../lib/hotkeys';
import { focusStyle } from '../lib/styles';
import { DuoyunScrollBaseElement } from './base/scroll';
import './use';
import './compartment';
import './divider';
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    display: flex;
    flex-direction: column;
  }
  :host([orientation='vertical']) {
    flex-direction: row;
  }
  .tabs {
    display: flex;
    font-size: 0.875em;
    gap: 2em;
    flex-shrink: 0;
    max-width: 100%;
  }
  :host([orientation='vertical']) .tabs {
    flex-direction: column;
    gap: 0;
  }
  .divider {
    flex-shrink: 0;
  }
  :host([center]) .tabs {
    justify-content: center;
  }
  .tab {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    line-height: 1.5;
    padding: 0.8em 0;
    gap: 0.3em;
    color: ${theme.describeColor};
  }
  :host([orientation='vertical']) .tab {
    padding-inline-end: 1em;
  }
  .icon {
    width: 1.2em;
  }
  .tab:hover,
  .current {
    color: ${theme.primaryColor};
  }
  .marker {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
  }
  :host([orientation='vertical']) .marker {
    top: 0;
    left: 100%;
    height: 100%;
  }
`);
/**
 * @customElement dy-tabs
 */
let DuoyunTabsElement = DuoyunTabsElement_1 = class DuoyunTabsElement extends GemElement {
    constructor() {
        super({ delegatesFocus: true });
        _DuoyunTabsElement_instances.add(this);
        this.render = () => {
            if (!this.data)
                return html ``;
            let currentContent = '';
            return html `
      <div part=${DuoyunTabsElement_1.tabs} class="tabs">
        ${this.data.map(({ value, tab, icon, getContent }, index) => {
                const isCurrent = (value !== null && value !== void 0 ? value : index) === this.value;
                if (isCurrent)
                    currentContent = (getContent === null || getContent === void 0 ? void 0 : getContent()) || '';
                return html `
            <div
              role="tab"
              class=${classMap({ tab: true, current: isCurrent })}
              part=${partMap({ [DuoyunTabsElement_1.tab]: true, [DuoyunTabsElement_1.currentTab]: isCurrent })}
              @click=${() => this.change(value !== null && value !== void 0 ? value : index)}
            >
              ${icon ? html `<dy-use part=${DuoyunTabsElement_1.icon} class="icon" .element=${icon}></dy-use>` : ''}
              <span tabindex="0" @keydown=${commonHandle}>${tab}</span>
              ${isCurrent
                    ? html `
                    <dy-divider
                      part=${DuoyunTabsElement_1.marker}
                      class="marker"
                      size="medium"
                      orientation=${__classPrivateFieldGet(this, _DuoyunTabsElement_instances, "a", _DuoyunTabsElement_orientation_get)}
                      .color=${theme.primaryColor}
                    ></dy-divider>
                  `
                    : ''}
            </div>
          `;
            })}
      </div>
      <dy-divider
        part=${DuoyunTabsElement_1.divider}
        class="divider"
        size="medium"
        orientation=${__classPrivateFieldGet(this, _DuoyunTabsElement_instances, "a", _DuoyunTabsElement_orientation_get)}
      ></dy-divider>
      <dy-compartment
        .content=${html `
          <style>
            dy-tab-panel::-webkit-scrollbar {
              width: 0;
            }
          </style>
          ${currentContent}
        `}
      ></dy-compartment>
    `;
        };
        this.internals.role = 'tablist';
    }
};
_DuoyunTabsElement_instances = new WeakSet(), _DuoyunTabsElement_orientation_get = function _DuoyunTabsElement_orientation_get() {
    return this.orientation || 'horizontal';
};
__decorate([
    boolattribute
], DuoyunTabsElement.prototype, "center", void 0);
__decorate([
    attribute
], DuoyunTabsElement.prototype, "orientation", void 0);
__decorate([
    property
], DuoyunTabsElement.prototype, "data", void 0);
__decorate([
    property
], DuoyunTabsElement.prototype, "value", void 0);
__decorate([
    emitter
], DuoyunTabsElement.prototype, "change", void 0);
__decorate([
    part
], DuoyunTabsElement, "tabs", void 0);
__decorate([
    part
], DuoyunTabsElement, "tab", void 0);
__decorate([
    part
], DuoyunTabsElement, "currentTab", void 0);
__decorate([
    part
], DuoyunTabsElement, "icon", void 0);
__decorate([
    part
], DuoyunTabsElement, "marker", void 0);
__decorate([
    part
], DuoyunTabsElement, "divider", void 0);
DuoyunTabsElement = DuoyunTabsElement_1 = __decorate([
    customElement('dy-tabs'),
    adoptedStyle(style),
    adoptedStyle(focusStyle)
], DuoyunTabsElement);
export { DuoyunTabsElement };
const panelStyle = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    display: block;
    flex-shrink: 1;
    flex-grow: 1;
    line-height: 1.5;
    margin-block-start: 1em;
  }
  :host(:where([data-vertical], :state(vertical))) {
    margin-inline-start: 1em;
    margin-block-start: 0em;
  }
`);
/**
 * @customElement dy-tab-panel
 */
let DuoyunTabPanelElement = class DuoyunTabPanelElement extends DuoyunScrollBaseElement {
    constructor() {
        super();
        this.internals.role = 'tabpanel';
        this.addEventListener('change', (e) => e.stopPropagation());
        this.effect(() => {
            var _a;
            this.vertical = ((_a = this.closestElement(DuoyunTabsElement)) === null || _a === void 0 ? void 0 : _a.orientation) === 'vertical';
        });
    }
};
__decorate([
    state
], DuoyunTabPanelElement.prototype, "vertical", void 0);
DuoyunTabPanelElement = __decorate([
    customElement('dy-tab-panel'),
    adoptedStyle(panelStyle)
], DuoyunTabPanelElement);
export { DuoyunTabPanelElement };
//# sourceMappingURL=tabs.js.map