duoyun-ui/patterns/console.js

A lightweight desktop UI component library, implemented using Gem

var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
    var _, done = false;
    for (var i = decorators.length - 1; i >= 0; i--) {
        var context = {};
        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
        if (kind === "accessor") {
            if (result === void 0) continue;
            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
            if (_ = accept(result.get)) descriptor.get = _;
            if (_ = accept(result.set)) descriptor.set = _;
            if (_ = accept(result.init)) initializers.unshift(_);
        }
        else if (_ = accept(result)) {
            if (kind === "field") initializers.unshift(_);
            else descriptor[key] = _;
        }
    }
    if (target) Object.defineProperty(target, contextIn.name, descriptor);
    done = true;
};
var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
    var useValue = arguments.length > 2;
    for (var i = 0; i < initializers.length; i++) {
        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
    }
    return useValue ? value : void 0;
};
import { mediaQuery } from '@mantou/gem/helper/mediaquery';
import { adoptedStyle, attribute, boolattribute, customElement, effect, property } from '@mantou/gem/lib/decorators';
import { css, GemElement, html } from '@mantou/gem/lib/element';
import { ContextMenu } from '../elements/contextmenu';
import { Loadbar } from '../elements/page-loadbar';
import { DuoyunRouteElement } from '../elements/route';
import { commonHandle } from '../lib/hotkeys';
import { icons } from '../lib/icons';
import { theme } from '../lib/theme';
import { isNotNullish } from '../lib/types';
import { isRemoteIcon } from '../lib/utils';
import '../elements/avatar';
import '../elements/link';
import '../elements/side-navigation';
import '../elements/title';
import '../elements/use';
export const locationStore = DuoyunRouteElement.createLocationStore();
const style = css `
  :scope {
    display: flex;
    color: ${theme.textColor};
    background-color: ${theme.backgroundColor};
  }
  .sidebar {
    position: sticky;
    top: 0;
    flex-shrink: 0;
    display: flex;
    box-sizing: border-box;
    width: 16em;
    height: 100vh;
    flex-direction: column;
    background-color: ${theme.lightBackgroundColor};
    padding: ${theme.gridGutter};
  }
  .logo {
    align-self: flex-start;
    height: 4em;
    /* logo must padding */
    margin-inline-start: -0.2em;
    margin-block: 0em 2em;
  }
  .navigation {
    flex-grow: 1;
    margin-block-end: 3em;
  }
  .user-info {
    font-size: 0.875em;
    display: flex;
    align-items: center;
    gap: 0.5em;
  }
  .avatar,
  .menu {
    flex-shrink: 0;
  }
  .user {
    min-width: 0;
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }
  .user:not([href]) {
    pointer-events: none;
  }
  .username {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .org {
    font-size: 0.75em;
    font-style: italic;
    color: ${theme.describeColor};
  }
  .menu {
    width: 1.5em;
    padding: 4px;
    border-radius: ${theme.normalRound};
  }
  .menu:where(:hover, :state(active)) {
    background-color: ${theme.hoverBackgroundColor};
  }
  .main-container {
    flex-grow: 1;
    min-width: 0;
  }
  .main {
    margin: auto;
    padding: calc(2 * ${theme.gridGutter});
    max-width: 80em;
  }
  dy-light-route {
    display: contents;
  }
  :scope[responsive] {
    @media ${mediaQuery.PHONE_LANDSCAPE} {
      .sidebar {
        width: 4.5em;
        padding: 2em 1em 1em;
      }
      .navigation {
        font-size: 1.3em;
        margin-block-end: 2em;
      }
      .user-info {
        justify-content: center;
      }
      :is(.logo, .avatar, .user) {
        display: none;
      }
    }
  }
`;
let DyPatConsoleElement = (() => {
    let _classDecorators = [customElement('dy-pat-console'), adoptedStyle(style)];
    let _classDescriptor;
    let _classExtraInitializers = [];
    let _classThis;
    let _classSuper = GemElement;
    let _keyboardAccess_decorators;
    let _keyboardAccess_initializers = [];
    let _keyboardAccess_extraInitializers = [];
    let _screencastMode_decorators;
    let _screencastMode_initializers = [];
    let _screencastMode_extraInitializers = [];
    let _responsive_decorators;
    let _responsive_initializers = [];
    let _responsive_extraInitializers = [];
    let _name_decorators;
    let _name_initializers = [];
    let _name_extraInitializers = [];
    let _logo_decorators;
    let _logo_initializers = [];
    let _logo_extraInitializers = [];
    let _routes_decorators;
    let _routes_initializers = [];
    let _routes_extraInitializers = [];
    let _navItems_decorators;
    let _navItems_initializers = [];
    let _navItems_extraInitializers = [];
    let _contextMenus_decorators;
    let _contextMenus_initializers = [];
    let _contextMenus_extraInitializers = [];
    let _userInfo_decorators;
    let _userInfo_initializers = [];
    let _userInfo_extraInitializers = [];
    let _private_load_decorators;
    let _private_load_initializers = [];
    let _private_load_extraInitializers = [];
    var DyPatConsoleElement = class extends _classSuper {
        static { _classThis = this; }
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _keyboardAccess_decorators = [boolattribute];
            _screencastMode_decorators = [boolattribute];
            _responsive_decorators = [boolattribute];
            _name_decorators = [attribute];
            _logo_decorators = [property];
            _routes_decorators = [property];
            _navItems_decorators = [property];
            _contextMenus_decorators = [property];
            _userInfo_decorators = [property];
            _private_load_decorators = [effect()];
            __esDecorate(null, null, _keyboardAccess_decorators, { kind: "field", name: "keyboardAccess", static: false, private: false, access: { has: obj => "keyboardAccess" in obj, get: obj => obj.keyboardAccess, set: (obj, value) => { obj.keyboardAccess = value; } }, metadata: _metadata }, _keyboardAccess_initializers, _keyboardAccess_extraInitializers);
            __esDecorate(null, null, _screencastMode_decorators, { kind: "field", name: "screencastMode", static: false, private: false, access: { has: obj => "screencastMode" in obj, get: obj => obj.screencastMode, set: (obj, value) => { obj.screencastMode = value; } }, metadata: _metadata }, _screencastMode_initializers, _screencastMode_extraInitializers);
            __esDecorate(null, null, _responsive_decorators, { kind: "field", name: "responsive", static: false, private: false, access: { has: obj => "responsive" in obj, get: obj => obj.responsive, set: (obj, value) => { obj.responsive = value; } }, metadata: _metadata }, _responsive_initializers, _responsive_extraInitializers);
            __esDecorate(null, null, _name_decorators, { kind: "field", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
            __esDecorate(null, null, _logo_decorators, { kind: "field", name: "logo", static: false, private: false, access: { has: obj => "logo" in obj, get: obj => obj.logo, set: (obj, value) => { obj.logo = value; } }, metadata: _metadata }, _logo_initializers, _logo_extraInitializers);
            __esDecorate(null, null, _routes_decorators, { kind: "field", name: "routes", static: false, private: false, access: { has: obj => "routes" in obj, get: obj => obj.routes, set: (obj, value) => { obj.routes = value; } }, metadata: _metadata }, _routes_initializers, _routes_extraInitializers);
            __esDecorate(null, null, _navItems_decorators, { kind: "field", name: "navItems", static: false, private: false, access: { has: obj => "navItems" in obj, get: obj => obj.navItems, set: (obj, value) => { obj.navItems = value; } }, metadata: _metadata }, _navItems_initializers, _navItems_extraInitializers);
            __esDecorate(null, null, _contextMenus_decorators, { kind: "field", name: "contextMenus", static: false, private: false, access: { has: obj => "contextMenus" in obj, get: obj => obj.contextMenus, set: (obj, value) => { obj.contextMenus = value; } }, metadata: _metadata }, _contextMenus_initializers, _contextMenus_extraInitializers);
            __esDecorate(null, null, _userInfo_decorators, { kind: "field", name: "userInfo", static: false, private: false, access: { has: obj => "userInfo" in obj, get: obj => obj.userInfo, set: (obj, value) => { obj.userInfo = value; } }, metadata: _metadata }, _userInfo_initializers, _userInfo_extraInitializers);
            __esDecorate(null, null, _private_load_decorators, { kind: "field", name: "#load", static: false, private: true, access: { has: obj => #load in obj, get: obj => obj.#load, set: (obj, value) => { obj.#load = value; } }, metadata: _metadata }, _private_load_initializers, _private_load_extraInitializers);
            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
            DyPatConsoleElement = _classThis = _classDescriptor.value;
            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
            __runInitializers(_classThis, _classExtraInitializers);
        }
        keyboardAccess = __runInitializers(this, _keyboardAccess_initializers, void 0);
        screencastMode = (__runInitializers(this, _keyboardAccess_extraInitializers), __runInitializers(this, _screencastMode_initializers, void 0));
        responsive = (__runInitializers(this, _screencastMode_extraInitializers), __runInitializers(this, _responsive_initializers, void 0));
        name = (__runInitializers(this, _responsive_extraInitializers), __runInitializers(this, _name_initializers, void 0));
        logo = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _logo_initializers, void 0));
        routes = (__runInitializers(this, _logo_extraInitializers), __runInitializers(this, _routes_initializers, void 0));
        navItems = (__runInitializers(this, _routes_extraInitializers), __runInitializers(this, _navItems_initializers, void 0));
        contextMenus = (__runInitializers(this, _navItems_extraInitializers), __runInitializers(this, _contextMenus_initializers, void 0));
        userInfo = (__runInitializers(this, _contextMenus_extraInitializers), __runInitializers(this, _userInfo_initializers, void 0));
        #onLoading = (__runInitializers(this, _userInfo_extraInitializers), () => {
            Loadbar.start();
        });
        #onChange = () => {
            Loadbar.end();
        };
        #openMenu = ({ target }) => {
            const btn = target;
            ContextMenu.open([...(this.contextMenus || [])].filter(isNotNullish), {
                activeElement: btn,
                width: '16em',
            });
        };
        #load = __runInitializers(this, _private_load_initializers, () => {
            this.keyboardAccess && import('../elements/keyboard-access');
            this.screencastMode && import('../elements/input-capture');
        });
        render = (__runInitializers(this, _private_load_extraInitializers), () => {
            const avatar = this.userInfo?.avatar ||
                `https://api.dicebear.com/7.x/pixel-art/svg?seed=Johnhttps://api.dicebear.com/7.x/pixel-art/svg?seed=${this.userInfo?.username}`;
            return html `
      <dy-title hidden .suffix=${mediaQuery.isPWA ? '' : this.name && ` - ${this.name}`}></dy-title>
      <div class="sidebar">
        <img v-if=${isRemoteIcon(this.logo)} class="logo" alt="Logo" src=${this.logo}></img>
        <dy-use v-else class="logo" .element=${this.logo}></dy-use>
        <dy-side-navigation class="navigation" .items=${this.navItems}></dy-side-navigation>
        <div v-if=${!!this.userInfo} class="user-info">
          <dy-avatar class="avatar" alt="Avatar" src=${avatar}></dy-avatar>
          <dy-link class="user" href=${this.userInfo?.profile || ''}>
            <span class="username" aria-label="Username">${this.userInfo?.username}</span>
            <span class="org" aria-label="Org" ?hidden=${!this.userInfo?.org}>@${this.userInfo?.org}</span>
          </dy-link>
          <dy-use
            tabindex="0"
            role="button"
            aria-label="Preference"
            class="menu"
            ?hidden=${!this.contextMenus}
            @click=${this.#openMenu}
            @keydown=${commonHandle}
            .element=${icons.more}
          ></dy-use>
        </div>
      </div>
      <main class="main-container">
        <div class="main" aria-label="Content">
          <dy-light-route
            @loading=${this.#onLoading}
            @routechange=${this.#onChange}
            .routes=${this.routes}
            .locationStore=${locationStore}
            .scrollContainer=${document.body}
          ></dy-light-route>
        </div>
      </main>
      <dy-keyboard-access v-if=${this.keyboardAccess}></dy-keyboard-access>
      <dy-input-capture v-if=${this.screencastMode}></dy-input-capture>

      <style>
        ::selection,
        ::target-text {
          color: ${theme.backgroundColor};
          background: ${theme.primaryColor};
        }
        ::highlight(search) {
          color: ${theme.backgroundColor};
          background: ${theme.informativeColor};
        }
        :where(:root) {
          font-family:
            -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
            'PingFang SC', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
          -moz-osx-font-smoothing: grayscale;
          -webkit-font-smoothing: antialiased;
          height: 100%;
          overflow: hidden;
        }
        :where(body) {
          height: 100%;
          overflow: auto;
          overscroll-behavior: none;
          margin: 0;
        }
      </style>
    `;
        });
    };
    return DyPatConsoleElement = _classThis;
})();
export { DyPatConsoleElement };
//# sourceMappingURL=console.js.map