From 28c46c0ef429202e49485ba3668871315bd1e6dd Mon Sep 17 00:00:00 2001 From: mantou132 <709922234@qq.com> Date: Fri, 19 Jan 2024 01:27:06 +0800 Subject: [PATCH] [duoyun-ui] Add `` `` --- .../duoyun-ui/docs/zh/01-guide/55-pattern.md | 2 +- .../duoyun-ui/docs/zh/30-blog/200-crud.md | 2 +- packages/duoyun-ui/src/lib/icons.ts | 6 + packages/duoyun-ui/src/lib/styles.ts | 8 +- packages/duoyun-ui/src/lib/utils.ts | 5 + packages/duoyun-ui/src/patterns/console.ts | 19 +- packages/duoyun-ui/src/patterns/footer.ts | 278 ++++++++++++++++ packages/duoyun-ui/src/patterns/nav.ts | 313 ++++++++++++++++++ packages/gem-book/src/plugins/example.ts | 36 +- packages/gem-examples/src/console/index.ts | 2 +- packages/gem-examples/src/homepage/index.ts | 151 +++++++++ 11 files changed, 790 insertions(+), 32 deletions(-) create mode 100644 packages/duoyun-ui/src/patterns/footer.ts create mode 100644 packages/duoyun-ui/src/patterns/nav.ts create mode 100644 packages/gem-examples/src/homepage/index.ts diff --git a/packages/duoyun-ui/docs/zh/01-guide/55-pattern.md b/packages/duoyun-ui/docs/zh/01-guide/55-pattern.md index 6cdc7f86..e9aeb949 100644 --- a/packages/duoyun-ui/docs/zh/01-guide/55-pattern.md +++ b/packages/duoyun-ui/docs/zh/01-guide/55-pattern.md @@ -17,7 +17,7 @@ render( html` + `, + ), menu: genIcon(`M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z`), filter: genIcon(`M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z`), more: genIcon( diff --git a/packages/duoyun-ui/src/lib/styles.ts b/packages/duoyun-ui/src/lib/styles.ts index 1b9e2809..66c33519 100644 --- a/packages/duoyun-ui/src/lib/styles.ts +++ b/packages/duoyun-ui/src/lib/styles.ts @@ -6,12 +6,12 @@ import { theme } from '../lib/theme'; // global style: `::selection`, `::target-text`, `::highlight` // https://bugzilla.mozilla.org/show_bug.cgi?id=1868009 export const focusStyle = createCSSSheet(css` - :host(:focus), - :focus { + :host(:where(:focus)), + :where(:focus) { outline: none; } - :host(:focus-visible), - :focus-visible { + :host(:where(:focus-visible)), + :where(:focus-visible) { outline: 2px solid ${theme.focusColor}; outline-offset: -2px; } diff --git a/packages/duoyun-ui/src/lib/utils.ts b/packages/duoyun-ui/src/lib/utils.ts index a4a4aefa..8a3493b0 100644 --- a/packages/duoyun-ui/src/lib/utils.ts +++ b/packages/duoyun-ui/src/lib/utils.ts @@ -389,3 +389,8 @@ export function createCacheStore>( const [store, , save] = useCacheStore(storageKey, initStore, options); return [store, save] as const; } + +// 是链接需要使用 img 渲染 +export function isRemoteIcon(icon: string | Element | DocumentFragment): icon is string { + return typeof icon === 'string' && !!icon.trim().match(/^(http|[./])/); +} diff --git a/packages/duoyun-ui/src/patterns/console.ts b/packages/duoyun-ui/src/patterns/console.ts index 90fb9250..e0d4bd63 100644 --- a/packages/duoyun-ui/src/patterns/console.ts +++ b/packages/duoyun-ui/src/patterns/console.ts @@ -12,6 +12,7 @@ import type { NavItems } from '../elements/side-navigation'; import type { DuoyunUseElement } from '../elements/use'; import { DuoyunRouteElement, RouteItem, RoutesObject } from '../elements/route'; import { ContextMenu, ContextMenuItem } from '../elements/contextmenu'; +import { isRemoteIcon } from '../lib/utils'; import '../elements/title'; import '../elements/use'; @@ -142,7 +143,8 @@ const style = createCSSSheet( : rules, ); -const globalStyle = createCSSSheet(css` +// 禁止向皮条 +const consoleStyle = createCSSSheet(css` ::selection, ::target-text { color: white; @@ -152,22 +154,19 @@ const globalStyle = createCSSSheet(css` color: white; background: ${theme.informativeColor}; } - :root { + :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; - } - html { height: 100%; overflow: hidden; } - body { + :where(body) { height: 100%; overflow: auto; - scrollbar-width: thin; + overscroll-behavior: none; margin: 0; - padding: 0; } `); @@ -176,14 +175,14 @@ const globalStyle = createCSSSheet(css` */ @customElement('dy-pat-console') @adoptedStyle(style) -@adoptedStyle(globalStyle) +@adoptedStyle(consoleStyle) export class DyPatConsoleElement extends GemElement { @boolattribute keyboardAccess: boolean; @boolattribute screencastMode: boolean; @boolattribute responsive: boolean; - @attribute logo: string; @attribute name: string; + @property logo: string | Element | DocumentFragment; @property routes?: Routes; @property navItems?: NavItems; @property contextMenus?: ContextMenus; @@ -224,7 +223,7 @@ export class DyPatConsoleElement extends GemElement { return html`
- ${this.logo.trim().match(/^(http|[./])/) + ${isRemoteIcon(this.logo) ? html`` : html``} diff --git a/packages/duoyun-ui/src/patterns/footer.ts b/packages/duoyun-ui/src/patterns/footer.ts new file mode 100644 index 00000000..31d63c00 --- /dev/null +++ b/packages/duoyun-ui/src/patterns/footer.ts @@ -0,0 +1,278 @@ +import { GemElement, html } from '@mantou/gem/lib/element'; +import { Emitter, adoptedStyle, customElement, globalemitter, property } from '@mantou/gem/lib/decorators'; +import { createCSSSheet, css } from '@mantou/gem/lib/utils'; +import { mediaQuery } from '@mantou/gem/helper/mediaquery'; + +import { theme } from '../lib/theme'; +import { icons } from '../lib/icons'; +import { isRemoteIcon } from '../lib/utils'; +import { focusStyle } from '../lib/styles'; + +import '../elements/link'; +import '../elements/use'; +import '../elements/divider'; + +type Link = { + label: string; + href: string; +}; + +type SocialItem = { + icon: string | Element | DocumentFragment; +} & Link; + +export type Social = { + label: string; + items: SocialItem[]; +}; + +export type Links = { + label: string; + href?: string; + items?: Link[]; +}[]; + +export type Terms = Link[]; + +export type Help = Link; + +export type Languages = { + current: string; + /**language code -> display name */ + names: Record; +}; + +const style = createCSSSheet(css` + dy-pat-footer { + display: block; + background: ${theme.lightBackgroundColor}; + line-height: 1.7; + } + dy-pat-footer dy-link { + outline-offset: 0; + display: inline-flex; + align-items: center; + gap: 0.5em; + } + dy-pat-footer .outward { + width: 1.2em; + } + dy-pat-footer footer { + container-type: inline-size; + max-width: 80em; + margin: auto; + } + @container (width < 80em) { + dy-pat-footer :is(.social, .links, .terms-wrap) { + padding-inline: 2em; + } + dy-pat-footer .outward { + display: none; + } + } + dy-pat-footer ul { + display: contents; + padding: 0; + margin: 0; + } + dy-pat-footer li { + list-style: none; + } + dy-pat-footer :is(.terms, .social) { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 2em; + } + dy-pat-footer :is(.terms-nav, .help, .social ul) { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 1.5em; + } + dy-pat-footer :is(.links, .terms-nav, .help) :where(dy-link, select):not(:hover) { + opacity: 0.65; + } + dy-pat-footer .social { + padding-block: 1.5em; + } + dy-pat-footer .social li { + display: contents; + } + dy-pat-footer h3 { + margin: 0; + font-weight: 500; + font-size: 1em; + } + dy-pat-footer .icon { + width: 2em; + } + dy-pat-footer .links { + padding-block: 2.5em; + display: flex; + flex-wrap: wrap; + gap: 1em; + } + dy-pat-footer .column { + width: 0; + min-width: 10em; + flex-grow: 1; + display: flex; + flex-direction: column; + gap: 0.6em; + } + dy-pat-footer h4 { + font-weight: 500; + margin-block: 0 1em; + font-size: 1em; + } + dy-pat-footer .terms-wrap { + display: flex; + gap: 2em; + justify-content: space-between; + flex-wrap: wrap; + padding-block: 1.5em 3em; + } + dy-pat-footer .logo { + height: 4em; + } + dy-pat-footer .languages { + min-width: 10em; + font-size: 1em; + border: none; + border-bottom: 1px solid; + background: transparent; + padding-block: 0.25em; + } +`); + +const mobileStyle = createCSSSheet( + css` + dy-pat-footer .column { + width: 100%; + } + dy-pat-footer .column + .column { + border-block-start: 1px solid ${theme.borderColor}; + padding-block-start: 1em; + } + `, + mediaQuery.PHONE, +); + +/** + * @customElement dy-pat-footer + */ +@customElement('dy-pat-footer') +@adoptedStyle(mobileStyle) +@adoptedStyle(style) +@adoptedStyle(focusStyle) +export class DyPatFooterElement extends GemElement { + @property social?: Social; + @property links?: Links; + + @property logo?: string | Element | DocumentFragment; + @property terms?: Terms; + + @property help?: Help; + @property languages?: Languages; + + @globalemitter languagechange: Emitter; + + constructor() { + super({ isLight: true }); + } + + #isOutwardLink(href: string) { + return new URL(href, location.origin).origin !== location.origin; + } + + #onChange = (evt: Event) => { + evt.stopPropagation(); + this.languagechange((evt.target as HTMLSelectElement).value); + }; + + #renderIcon({ icon, label }: Omit, className = '') { + return isRemoteIcon(icon) + ? html`` + : html``; + } + + #renderLinks(items: Link[] | SocialItem[], renderOutward = false) { + return html` +
    + ${items.map( + (item) => html` +
  • + + ${'icon' in item + ? this.#renderIcon(item, 'icon') + : html` + ${item.label} + ${renderOutward && this.#isOutwardLink(item.href) + ? html`` + : ''} + `} + +
    • + `, + )} +
+ `; + } + + render = () => { + return html` +
+ ${this.social + ? html` + + + ` + : ''} + + + + + +
+
+ ${this.logo ? html`
${this.#renderIcon({ icon: this.logo, label: 'Logo' }, 'logo')}
` : ''} + ${this.terms ? html`` : ''} +
+
+ ${this.help + ? html` + + ${this.help.label} + + ` + : ''} + ${this.languages + ? html` + + ` + : ``} +
+
+
+ `; + }; +} diff --git a/packages/duoyun-ui/src/patterns/nav.ts b/packages/duoyun-ui/src/patterns/nav.ts new file mode 100644 index 00000000..a95092b1 --- /dev/null +++ b/packages/duoyun-ui/src/patterns/nav.ts @@ -0,0 +1,313 @@ +import { history } from '@mantou/gem/lib/history'; +import { GemElement, TemplateResult, html, render } from '@mantou/gem/lib/element'; +import { adoptedStyle, attribute, connectStore, customElement, property } from '@mantou/gem/lib/decorators'; +import { addListener, classMap, createCSSSheet, css } from '@mantou/gem/lib/utils'; +import { mediaQuery } from '@mantou/gem/helper/mediaquery'; + +import { isRemoteIcon } from '../lib/utils'; +import { icons } from '../lib/icons'; +import { theme } from '../lib/theme'; +import { focusStyle } from '../lib/styles'; + +import { Links } from './footer'; + +import '../elements/use'; + +export type { Links } from './footer'; + +const style = createCSSSheet(css` + dy-pat-nav { + display: flex; + align-items: center; + gap: 2em; + background: ${theme.backgroundColor}; + box-shadow: rgba(0, 0, 0, calc(${theme.maskAlpha} - 0.1)) 0px 0px 8px; + } + dy-pat-nav, + dy-pat-nav .drawer-brand { + padding: 0.6em 1em; + } + dy-pat-nav .drawer-brand { + display: none; + } + dy-pat-nav li { + list-style: none; + } + dy-pat-nav dy-use:not(.menu) { + width: 1.2em; + } + dy-pat-nav .menu { + display: none; + } + dy-pat-nav :where(.brand, .navbar, .navbar-top-link, dy-link) { + display: flex; + align-items: center; + } + dy-pat-nav .brand { + gap: 0.5em; + } + dy-pat-nav .logo { + height: 2.6em; + } + dy-pat-nav .name { + font-size: 1.35em; + opacity: 0.65; + } + dy-pat-nav .navbar { + gap: 0.5em; + } + dy-pat-nav :where(.nav-list) { + display: contents; + } + dy-pat-nav .navbar-item-wrap { + position: relative; + } + dy-pat-nav .navbar-top-link { + cursor: pointer; + gap: 0.3em; + padding-inline: 0.5em; + line-height: 2.4; + border-radius: ${theme.normalRound}; + opacity: 0.65; + } + dy-pat-nav .navbar-item-wrap:hover .navbar-top-link { + background: ${theme.lightBackgroundColor}; + } + dy-pat-nav .dropdown { + display: none; + position: absolute; + flex-direction: column; + gap: 0.3em; + top: 100%; + left: 0; + min-width: max(100%, 10em); + width: max-content; + margin: 0; + padding: 0.5em; + line-height: 1.7; + background: ${theme.backgroundColor}; + border-radius: ${theme.normalRound}; + filter: drop-shadow(${theme.borderColor} 0px 0px 1px) + drop-shadow(rgba(0, 0, 0, calc(${theme.maskAlpha} - 0.1)) 0px 7px 10px); + } + dy-pat-nav:where(:not([data-switching])) :where(.navbar-item-wrap:where(:hover, :focus-within)) .dropdown { + display: flex; + } + dy-pat-nav .dropdown dy-link { + border-radius: ${theme.normalRound}; + padding: 0.5em; + gap: 0.3em; + opacity: 0.65; + } + dy-pat-nav .dropdown dy-link:hover { + background: ${theme.lightBackgroundColor}; + } +`); + +const mobileStyle = createCSSSheet( + css` + dy-pat-nav { + gap: 1em; + } + dy-pat-nav .drawer-brand { + display: block; + position: sticky; + top: 0; + background: ${theme.backgroundColor}; + z-index: 1; + border-block-end: 1px solid ${theme.borderColor}; + margin-block-end: 1em; + } + dy-pat-nav .menu { + display: block; + width: 1.5em; + padding: 0.5em; + margin: -0.5em; + border-radius: 10em; + } + dy-pat-nav .navbar:not(.open) { + display: none; + } + dy-pat-nav .navbar { + position: fixed; + z-index: ${theme.popupZIndex}; + inset: 0; + background: rgba(0, 0, 0, calc(${theme.maskAlpha})); + align-items: stretch; + } + dy-pat-nav .nav-list { + display: block; + width: 20em; + height: 100%; + margin: 0; + padding: 0; + background: ${theme.backgroundColor}; + overflow: auto; + overscroll-behavior: none; + } + dy-pat-nav .nav-list > li { + padding-inline: 1em; + } + dy-pat-nav .nav-list > li:last-of-type { + margin-block-end: 3em; + } + dy-pat-nav .open-dropdown + .dropdown { + display: block; + padding-inline-start: 2em; + } + dy-pat-nav .dropdown { + position: relative; + display: none; + width: 100%; + box-sizing: border-box; + padding: 0; + min-width: auto; + filter: none; + } + dy-pat-nav .dropdown::before { + position: absolute; + content: ''; + width: 1px; + height: 100%; + left: 1.2em; + top: 0; + background: ${theme.borderColor}; + } + `, + `${mediaQuery.PHONE}`, +); + +type State = { + drawerOpen: boolean; +}; + +/** + * @customElement dy-pat-nav + */ +@customElement('dy-pat-nav') +@adoptedStyle(mobileStyle) +@adoptedStyle(style) +@adoptedStyle(focusStyle) +@connectStore(history.store) +export class DyPatNavElement extends GemElement { + @attribute name: string; + @property links?: Links; + @property logo?: string | Element | DocumentFragment; + @property renderSlot?: (ele: Element) => TemplateResult | undefined; + + constructor() { + super({ isLight: true }); + const blur = () => { + this.setState({ drawerOpen: false }); + (this.getRootNode() as any).activeElement?.blur(); + this.dataset.switching = ''; + setTimeout(() => delete this.dataset.switching, 60); + }; + this.effect( + () => blur(), + () => [location.href], + ); + this.effect( + () => { + return addListener(document, 'visibilitychange', () => { + if (document.visibilityState === 'hidden') { + blur(); + } + }); + }, + () => [], + ); + } + + state: State = { + drawerOpen: false, + }; + + #navSlot = document.createElement('div'); + + #onMobileItemClick = (evt: MouseEvent) => { + (evt.currentTarget as HTMLLIElement).classList.toggle('open-dropdown'); + }; + + #isOutwardLink(href: string) { + return new URL(href, location.origin).origin !== location.origin; + } + + #renderBrand = () => { + return html` + + ${!this.logo + ? '' + : isRemoteIcon(this.logo) + ? html`` + : html``} + ${this.name} + + `; + }; + + render = () => { + render(this.renderSlot ? this.renderSlot(this.#navSlot) : html``, this.#navSlot); + + return html` + this.setState({ drawerOpen: true })} + > + + ${this.#renderBrand()} + + + + ${this.#navSlot} + `; + }; +} diff --git a/packages/gem-book/src/plugins/example.ts b/packages/gem-book/src/plugins/example.ts index 3ff9dd8e..b2c83376 100644 --- a/packages/gem-book/src/plugins/example.ts +++ b/packages/gem-book/src/plugins/example.ts @@ -260,6 +260,23 @@ customElements.whenDefined('gem-book').then(({ GemBookPluginElement }: typeof Ge }; mounted = () => { + let propsList: Props[] = []; + let textContentIsProps = false; + try { + const obj = JSON.parse(this.textContent!) as Props | Props[]; + propsList = Array.isArray(obj) ? obj : [obj]; + textContentIsProps = true; + } catch { + const props = JSON.parse(this.props || '{}'); + if (this.html) props.innerHTML = this.html; + propsList = [props]; + textContentIsProps = false; + } + this.setState({ + textContentIsProps, + code: propsList?.map((props, index) => html`${index ? '\n' : ''}${this.#renderCode(props)}`), + }); + Promise.all( this.src .trim() @@ -267,29 +284,18 @@ customElements.whenDefined('gem-book').then(({ GemBookPluginElement }: typeof Ge .map((src) => this.#loadResource(src)), ) .then(() => { - let propsList: Props[] = []; - let textContentIsProps = false; - try { - const obj = JSON.parse(this.textContent!) as Props | Props[]; - propsList = Array.isArray(obj) ? obj : [obj]; - textContentIsProps = true; - } catch { - const props = JSON.parse(this.props || '{}'); - if (this.html) props.innerHTML = this.html; - propsList = [props]; - textContentIsProps = false; - } if (this.hidden) return; this.setState({ loading: false, error: false, - code: propsList?.map((props, index) => html`${index ? '\n' : ''}${this.#renderCode(props)}`), - textContentIsProps, elements: propsList.map((props) => this.#renderElement(props)), }); }) .catch((evt: ErrorEvent) => { - this.setState({ error: evt.error || 'Load Error!', loading: false }); + this.setState({ + error: evt.error || 'Load Error!', + loading: false, + }); this.error(evt); }); }; diff --git a/packages/gem-examples/src/console/index.ts b/packages/gem-examples/src/console/index.ts index 4b450d35..6b8832cf 100644 --- a/packages/gem-examples/src/console/index.ts +++ b/packages/gem-examples/src/console/index.ts @@ -115,7 +115,7 @@ render( html` { + return html` + +
+ This is my Product! +
+
+ + `; + }; +} + +render( + html` + + + `, + document.body, +);