duoyun-ui/elements/radio.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 _DuoyunRadioElement_onClick, _DuoyunRadioGroupElement_onChange;
import { adoptedStyle, customElement, attribute, globalemitter, property, boolattribute, } from '@mantou/gem/lib/decorators';
import { GemElement, html } from '@mantou/gem/lib/element';
import { createCSSSheet, css } from '@mantou/gem/lib/utils';
import { theme } from '../lib/theme';
import { commonHandle } from '../lib/hotkeys';
import { focusStyle } from '../lib/styles';
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    cursor: default;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
  }
  :host([disabled]) {
    cursor: not-allowed;
    opacity: 0.3;
  }
  .radio {
    box-sizing: border-box;
    width: 1em;
    aspect-ratio: 1;
    border: 2px solid currentColor;
    color: ${theme.borderColor};
    background-clip: content-box;
    padding: 2px;
    border-radius: 10em;
    transform: scale(1.001);
  }
  :host(:where(:hover, [checked])) .radio {
    color: ${theme.primaryColor};
  }
  :host([checked]) .radio {
    background-color: currentColor;
  }
`);
/**
 * @customElement dy-radio
 * @attr checked
 * @attr value
 * @attr disabled
 */
let DuoyunRadioElement = class DuoyunRadioElement extends GemElement {
    constructor() {
        super({ delegatesFocus: true });
        _DuoyunRadioElement_onClick.set(this, () => {
            if (this.disabled)
                return;
            if (!this.checked) {
                this.change(this.value);
            }
        });
        this.render = () => {
            return html `
      <div
        role="radio"
        tabindex="0"
        @keydown=${commonHandle}
        aria-labelledby="label"
        aria-disabled=${this.disabled}
        aria-checked=${this.checked}
        class="radio"
      ></div>
      <slot id="label"></slot>
    `;
        };
        this.addEventListener('click', __classPrivateFieldGet(this, _DuoyunRadioElement_onClick, "f"));
    }
};
_DuoyunRadioElement_onClick = new WeakMap();
__decorate([
    boolattribute
], DuoyunRadioElement.prototype, "checked", void 0);
__decorate([
    boolattribute
], DuoyunRadioElement.prototype, "disabled", void 0);
__decorate([
    globalemitter
], DuoyunRadioElement.prototype, "change", void 0);
__decorate([
    attribute
], DuoyunRadioElement.prototype, "value", void 0);
DuoyunRadioElement = __decorate([
    customElement('dy-radio'),
    adoptedStyle(style),
    adoptedStyle(focusStyle)
], DuoyunRadioElement);
export { DuoyunRadioElement };
export const groupStyle = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  :host([orientation='horizontal']) {
    gap: 1em;
  }
  :host([orientation='vertical']) {
    flex-direction: column;
    align-items: flex-start;
  }
`);
/**
 * @customElement dy-radio-group
 * @attr disabled
 */
let DuoyunRadioGroupElement = class DuoyunRadioGroupElement extends GemElement {
    constructor() {
        super({ delegatesFocus: true });
        _DuoyunRadioGroupElement_onChange.set(this, (evt) => {
            evt.stopPropagation();
            this.change(evt.detail);
        });
        this.render = () => {
            if (!this.options)
                return null;
            return html `${this.options.map(({ label, value }) => html `
        <dy-radio
          ?disabled=${this.disabled}
          .value=${value !== null && value !== void 0 ? value : label}
          ?checked=${(value !== null && value !== void 0 ? value : label) === this.value}
          @change=${__classPrivateFieldGet(this, _DuoyunRadioGroupElement_onChange, "f")}
        >
          ${label}
        </dy-radio>
      `)}`;
        };
        this.internals.role = 'radiogroup';
    }
};
_DuoyunRadioGroupElement_onChange = new WeakMap();
__decorate([
    attribute
], DuoyunRadioGroupElement.prototype, "orientation", void 0);
__decorate([
    boolattribute
], DuoyunRadioGroupElement.prototype, "disabled", void 0);
__decorate([
    globalemitter
], DuoyunRadioGroupElement.prototype, "change", void 0);
__decorate([
    property
], DuoyunRadioGroupElement.prototype, "value", void 0);
__decorate([
    property
], DuoyunRadioGroupElement.prototype, "options", void 0);
DuoyunRadioGroupElement = __decorate([
    customElement('dy-radio-group'),
    adoptedStyle(groupStyle)
], DuoyunRadioGroupElement);
export { DuoyunRadioGroupElement };
//# sourceMappingURL=radio.js.map