| 1 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
| 2 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
| 3 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
| 4 | 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;
|
| 5 | return c > 3 && r && Object.defineProperty(target, key, r), r;
|
| 6 | };
|
| 7 | var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
| 8 | if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
| 9 | 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");
|
| 10 | return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
| 11 | };
|
| 12 | var _DuoyunHeadingElement_instances, _DuoyunHeadingElement_lv_get, _DuoyunHeadingElement_checkHash;
|
| 13 | import { connectStore, adoptedStyle, customElement, attribute } from '@mantou/gem/lib/decorators';
|
| 14 | import { GemElement, html } from '@mantou/gem/lib/element';
|
| 15 | import { history } from '@mantou/gem/lib/history';
|
| 16 | import { createCSSSheet, css } from '@mantou/gem/lib/utils';
|
| 17 | import { theme } from '../lib/theme';
|
| 18 | const style = createCSSSheet(css `
|
| 19 | :host(:where(:not([hidden]))) {
|
| 20 | display: block;
|
| 21 | font-size: 2.5em;
|
| 22 | line-height: 1;
|
| 23 | font-weight: bold;
|
| 24 | color: ${theme.highlightColor};
|
| 25 | margin-block: 0.75em 0.25em;
|
| 26 | scroll-margin-top: 1em;
|
| 27 | }
|
| 28 | :host([lv='2']) {
|
| 29 | font-size: 2em;
|
| 30 | }
|
| 31 | :host([lv='3']) {
|
| 32 | font-size: 1.5em;
|
| 33 | }
|
| 34 | :host([lv='4']) {
|
| 35 | font-size: 1.2em;
|
| 36 | }
|
| 37 | h1,
|
| 38 | h2,
|
| 39 | h3,
|
| 40 | h4 {
|
| 41 | display: contents;
|
| 42 | font: inherit;
|
| 43 | text-wrap: balance;
|
| 44 | }
|
| 45 | `);
|
| 46 | |
| 47 | |
| 48 | |
| 49 |
|
| 50 | let DuoyunHeadingElement = class DuoyunHeadingElement extends GemElement {
|
| 51 | constructor() {
|
| 52 | super(...arguments);
|
| 53 | _DuoyunHeadingElement_instances.add(this);
|
| 54 | _DuoyunHeadingElement_checkHash.set(this, () => {
|
| 55 | const { hash } = history.getParams();
|
| 56 | if (hash === `#${this.id}`) {
|
| 57 | this.scrollIntoView();
|
| 58 | }
|
| 59 | });
|
| 60 | this.mounted = () => {
|
| 61 | __classPrivateFieldGet(this, _DuoyunHeadingElement_checkHash, "f").call(this);
|
| 62 | };
|
| 63 | this.updated = () => {
|
| 64 | __classPrivateFieldGet(this, _DuoyunHeadingElement_checkHash, "f").call(this);
|
| 65 | };
|
| 66 | this.render = () => {
|
| 67 | switch (__classPrivateFieldGet(this, _DuoyunHeadingElement_instances, "a", _DuoyunHeadingElement_lv_get)) {
|
| 68 | case '1':
|
| 69 | return html `<h1><slot></slot></h1>`;
|
| 70 | case '2':
|
| 71 | return html `<h2><slot></slot></h2>`;
|
| 72 | case '3':
|
| 73 | return html `<h3><slot></slot></h3>`;
|
| 74 | case '4':
|
| 75 | return html `<h4><slot></slot></h4>`;
|
| 76 | }
|
| 77 | };
|
| 78 | }
|
| 79 | };
|
| 80 | _DuoyunHeadingElement_checkHash = new WeakMap(), _DuoyunHeadingElement_instances = new WeakSet(), _DuoyunHeadingElement_lv_get = function _DuoyunHeadingElement_lv_get() {
|
| 81 | return this.lv || '1';
|
| 82 | };
|
| 83 | __decorate([
|
| 84 | attribute
|
| 85 | ], DuoyunHeadingElement.prototype, "lv", void 0);
|
| 86 | DuoyunHeadingElement = __decorate([
|
| 87 | customElement('dy-heading'),
|
| 88 | adoptedStyle(style),
|
| 89 | connectStore(history.store)
|
| 90 | ], DuoyunHeadingElement);
|
| 91 | export { DuoyunHeadingElement };
|
| 92 | |
| \ | No newline at end of file |