duoyun-ui/elements/icons.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 _DuoyunIconsElement_onCopy;
import { adoptedStyle, customElement } from '@mantou/gem/lib/decorators';
import { GemElement, html } from '@mantou/gem/lib/element';
import { createCSSSheet, css } from '@mantou/gem/lib/utils';
import { icons } from '../lib/icons';
import { theme } from '../lib/theme';
import { locale } from '../lib/locale';
import { Toast } from './toast';
import './use';
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6em, 1fr));
    gap: ${theme.gridGutter};
  }
  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    border-radius: ${theme.normalRound};
    padding: 1em;
    cursor: default;
    background-color: ${theme.lightBackgroundColor};
  }
  .item:hover {
    background-color: ${theme.hoverBackgroundColor};
  }
  .icon {
    width: 2em;
  }
`);
/**
 * @customElement dy-icons
 */
let DuoyunIconsElement = class DuoyunIconsElement extends GemElement {
    constructor() {
        super(...arguments);
        _DuoyunIconsElement_onCopy.set(this, async (name) => {
            await navigator.clipboard.writeText(`<dy-use .element=\${icons.${name}}></dy-use>`);
            Toast.open('success', locale.copySuccess, {
                duration: 1000,
            });
        });
        this.render = () => {
            const entries = Object.entries(icons);
            return html `
      ${entries.map(([name, value]) => {
                return html `
          <div class="item" @click=${() => __classPrivateFieldGet(this, _DuoyunIconsElement_onCopy, "f").call(this, name)}>
            <dy-use class="icon" .element=${value}></dy-use>${name}
          </div>
        `;
            })}
    `;
        };
    }
};
_DuoyunIconsElement_onCopy = new WeakMap();
DuoyunIconsElement = __decorate([
    customElement('dy-icons'),
    adoptedStyle(style)
], DuoyunIconsElement);
export { DuoyunIconsElement };
//# sourceMappingURL=icons.js.map