[gem][gem-book] Fix something

Closed #176, #177, #178,
mantou132 · Jul 10, 2024 · 5db7e9c · 5db7e9c
1 parent 4f633a8
commit 5db7e9c
Show file tree

Hide file tree

Showing 35 changed files with 51 additions and 53 deletions.
diff --git a/packages/duoyun-ui/src/elements/banner.ts b/packages/duoyun-ui/src/elements/banner.ts
@@ -84,7 +84,7 @@ type Status = 'positive' | 'notice' | 'negative' | 'default';
  */
 @customElement('dy-banner')
 @adoptedStyle(style)
-@shadow()
+@shadow({ delegatesFocus: true })
 @aria({ role: 'banner' })
 export class DuoyunBannerElement extends GemElement {
   @slot static unnamed: string;

diff --git a/packages/duoyun-ui/src/elements/button.ts b/packages/duoyun-ui/src/elements/button.ts
@@ -140,7 +140,7 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
 @connectStore(icons)
-@shadow()
+@shadow({ delegatesFocus: true })
 export class DuoyunButtonElement extends GemElement {
   @slot static unnamed: string;
 

diff --git a/packages/duoyun-ui/src/elements/calendar.ts b/packages/duoyun-ui/src/elements/calendar.ts
@@ -113,7 +113,7 @@ interface Day {
 @customElement('dy-calendar')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
-@shadow()
+@shadow({ delegatesFocus: true })
 export class DuoyunCalendarElement extends GemElement {
   @part static headerRow: string;
   @part static headerLeftCell: string;

diff --git a/packages/duoyun-ui/src/elements/card.ts b/packages/duoyun-ui/src/elements/card.ts
@@ -99,7 +99,7 @@ export type ActionItem = Omit<ContextMenuItem, 'handle'> & { handle: (rest: HTML
 @customElement('dy-card')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
-@shadow()
+@shadow({ delegatesFocus: true })
 @aria({ role: 'group' })
 export class DuoyunCardElement extends DuoyunLoadableBaseElement {
   @part static preview: string;

diff --git a/packages/duoyun-ui/src/elements/carousel.ts b/packages/duoyun-ui/src/elements/carousel.ts
@@ -151,7 +151,7 @@ type State = {
 @customElement('dy-carousel')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
-@shadow()
+@shadow({ delegatesFocus: true })
 export class DuoyunCarouselElement extends GemElement<State> {
   @part static img: string;
   @part static title: string;

diff --git a/packages/duoyun-ui/src/elements/cascader-picker.ts b/packages/duoyun-ui/src/elements/cascader-picker.ts
@@ -8,7 +8,6 @@ import {
   boolattribute,
   state,
   emitter,
-  shadow,
   focusable,
   aria,
 } from '@mantou/gem/lib/decorators';
@@ -64,7 +63,6 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @adoptedStyle(pickerStyle)
 @adoptedStyle(focusStyle)
-@shadow()
 @focusable()
 @aria({ role: 'combobox' })
 export class DuoyunCascaderPickerElement extends GemElement implements BasePickerElement {

diff --git a/packages/duoyun-ui/src/elements/checkbox.ts b/packages/duoyun-ui/src/elements/checkbox.ts
@@ -74,7 +74,7 @@ const style = createCSSSheet(css`
 @customElement('dy-checkbox')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
-@shadow()
+@shadow({ delegatesFocus: true })
 export class DuoyunCheckboxElement extends GemElement {
   @slot static unnamed: string;
 
@@ -117,7 +117,7 @@ export class DuoyunCheckboxElement extends GemElement {
  */
 @customElement('dy-checkbox-group')
 @adoptedStyle(groupStyle)
-@shadow()
+@shadow({ delegatesFocus: true })
 @aria({ role: 'group' })
 export class DuoyunCheckboxGroupElement extends GemElement {
   @attribute orientation: 'horizontal' | 'vertical';

diff --git a/packages/duoyun-ui/src/elements/collapse.ts b/packages/duoyun-ui/src/elements/collapse.ts
@@ -171,7 +171,7 @@ type CollapseItem = {
  */
 @customElement('dy-collapse')
 @adoptedStyle(style)
-@shadow()
+@shadow({ delegatesFocus: true })
 @aria({ role: 'list' })
 export class DuoyunCollapseElement extends GemElement {
   @part static panel: string;

diff --git a/packages/duoyun-ui/src/elements/color-picker.ts b/packages/duoyun-ui/src/elements/color-picker.ts
@@ -64,7 +64,7 @@ const style = createCSSSheet(css`
 @customElement('dy-color-picker')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
-@shadow()
+@shadow({ delegatesFocus: true })
 export class DuoyunColorPickerElement extends GemElement implements BasePickerElement {
   @attribute value: HexColor;
   @boolattribute alpha: boolean;

diff --git a/packages/duoyun-ui/src/elements/contextmenu.ts b/packages/duoyun-ui/src/elements/contextmenu.ts
@@ -119,7 +119,7 @@ const style = createCSSSheet(css`
 @customElement('dy-contextmenu')
 @connectStore(contextmenuStore)
 @adoptedStyle(style)
-@shadow()
+@shadow({ delegatesFocus: true })
 export class DuoyunContextmenuElement extends GemElement {
   @refobject optionsRef: RefObject<DuoyunOptionsElement>;
 

diff --git a/packages/duoyun-ui/src/elements/copy.ts b/packages/duoyun-ui/src/elements/copy.ts
@@ -89,7 +89,7 @@ type State = {
 @customElement('dy-copy')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
-@shadow()
+@shadow({ delegatesFocus: true })
 export class DuoyunCopyElement extends GemElement<State> {
   @slot static unnamed: string;
   @slot static after: string;

diff --git a/packages/duoyun-ui/src/elements/date-panel.ts b/packages/duoyun-ui/src/elements/date-panel.ts
@@ -147,7 +147,7 @@ type State = {
 @customElement('dy-date-panel')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
-@shadow()
+@shadow({ delegatesFocus: true })
 @aria({ role: 'widget' })
 export class DuoyunDatePanelElement extends GemElement<State> {
   @part static dayCell: string;

diff --git a/packages/duoyun-ui/src/elements/file-picker.ts b/packages/duoyun-ui/src/elements/file-picker.ts
@@ -122,7 +122,7 @@ export interface FileItem extends File {
 @customElement('dy-file-picker')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
-@shadow()
+@shadow({ delegatesFocus: true })
 export class DuoyunFilePickerElement extends GemElement implements BasePickerElement {
   @part static button: string;
   @part static item: string;

diff --git a/packages/duoyun-ui/src/elements/image-preview.ts b/packages/duoyun-ui/src/elements/image-preview.ts
@@ -80,7 +80,7 @@ export type ImageStatus = 'negative' | 'positive' | 'default';
 @customElement('dy-image-preview')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
-@shadow()
+@shadow({ delegatesFocus: true })
 export class DuoyunImagePreviewElement extends GemElement<State> {
   @attribute status: ImageStatus;
   /**0-100 */

diff --git a/packages/duoyun-ui/src/elements/input.ts b/packages/duoyun-ui/src/elements/input.ts
@@ -166,7 +166,7 @@ const style = createCSSSheet(css`
 @customElement('dy-input')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
-@shadow()
+@shadow({ delegatesFocus: true })
 export class DuoyunInputElement extends GemElement {
   @part static input: string;
   @part static clear: string;

diff --git a/packages/duoyun-ui/src/elements/list.ts b/packages/duoyun-ui/src/elements/list.ts
@@ -74,7 +74,7 @@ const styles = createCSSSheet(css`
 @customElement('dy-list')
 @adoptedStyle(styles)
 @adoptedStyle(blockContainer)
-@shadow()
+@shadow({ delegatesFocus: true })
 @aria({ role: 'list' })
 export class DuoyunListElement extends GemElement<State> {
   @part static list: string;
@@ -594,7 +594,7 @@ const itemStyle = createCSSSheet({
 @customElement('dy-list-item')
 @adoptedStyle(blockContainer)
 @adoptedStyle(itemStyle)
-@shadow()
+@shadow({ delegatesFocus: true })
 @aria({ role: 'listitem' })
 export class DuoyunListItemElement extends DuoyunResizeBaseElement implements DuoyunVisibleBaseElement {
   @emitter show: Emitter;

diff --git a/packages/duoyun-ui/src/elements/modal.ts b/packages/duoyun-ui/src/elements/modal.ts
@@ -150,7 +150,7 @@ export interface ModalOpenOptions<T> {
 @adoptedStyle(style)
 @adoptedStyle(style2)
 @connectStore(locale)
-@shadow()
+@shadow({ delegatesFocus: true })
 export class DuoyunModalElement extends GemElement {
   @boolattribute open: boolean;
   @boolattribute customize: boolean;

diff --git a/packages/duoyun-ui/src/elements/pagination.ts b/packages/duoyun-ui/src/elements/pagination.ts
@@ -82,7 +82,7 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
 @connectStore(locale)
-@shadow()
+@shadow({ delegatesFocus: true })
 @aria({ role: 'listbox', ariaLabel: 'Pagination' })
 export class DuoyunPaginationElement extends GemElement {
   @attribute align: 'left' | 'start' | 'right' | 'end' | 'center';

diff --git a/packages/duoyun-ui/src/elements/popover.ts b/packages/duoyun-ui/src/elements/popover.ts
@@ -66,7 +66,7 @@ type CloseCallback = {
  */
 @customElement('dy-popover')
 @adoptedStyle(contentsContainer)
-@shadow()
+@shadow({ delegatesFocus: true })
 export class DuoyunPopoverElement extends GemElement<PopoverState> {
   // 用于非继承样式通过 `inherit` 继承
   @part static slot: string;

diff --git a/packages/duoyun-ui/src/elements/radio.ts b/packages/duoyun-ui/src/elements/radio.ts
@@ -61,7 +61,7 @@ const style = createCSSSheet(css`
 @customElement('dy-radio')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
-@shadow()
+@shadow({ delegatesFocus: true })
 export class DuoyunRadioElement extends GemElement {
   @slot static unnamed: string;
 
@@ -125,7 +125,7 @@ export interface Option<T = any> {
  */
 @customElement('dy-radio-group')
 @adoptedStyle(groupStyle)
-@shadow()
+@shadow({ delegatesFocus: true })
 @aria({ role: 'radiogroup' })
 export class DuoyunRadioGroupElement extends GemElement {
   @attribute orientation: 'horizontal' | 'vertical';

diff --git a/packages/duoyun-ui/src/elements/rate.ts b/packages/duoyun-ui/src/elements/rate.ts
@@ -67,7 +67,7 @@ const style = createCSSSheet(css`
 @customElement('dy-rate')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
-@shadow()
+@shadow({ delegatesFocus: true })
 @aria({ role: 'range' })
 export class DuoyunRateElement extends GemElement {
   @part static star: string;

diff --git a/packages/duoyun-ui/src/elements/segmented.ts b/packages/duoyun-ui/src/elements/segmented.ts
@@ -111,7 +111,7 @@ export interface SegmentedOption<T = any> extends Option<T> {
  */
 @customElement('dy-segmented')
 @adoptedStyle(style)
-@shadow()
+@shadow({ delegatesFocus: true })
 @aria({ role: 'group' })
 export class DuoyunSegmentedElement extends GemElement {
   @part static segment: string;

diff --git a/packages/duoyun-ui/src/elements/side-navigation.ts b/packages/duoyun-ui/src/elements/side-navigation.ts
@@ -139,7 +139,7 @@ type State = Record<string, boolean>;
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
 @connectStore(history.store)
-@shadow()
+@shadow({ delegatesFocus: true })
 @aria({ role: 'navigation', ariaLabel: 'Side Navigation' })
 export class DuoyunSideNavigationElement extends DuoyunScrollBaseElement<State> {
   @part static item: string;

diff --git a/packages/duoyun-ui/src/elements/switch.ts b/packages/duoyun-ui/src/elements/switch.ts
@@ -74,7 +74,7 @@ const style = createCSSSheet(css`
 @customElement('dy-switch')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
-@shadow()
+@shadow({ delegatesFocus: true })
 export class DuoyunSwitchElement extends GemElement {
   @slot static unnamed: string;
 

diff --git a/packages/duoyun-ui/src/elements/table.ts b/packages/duoyun-ui/src/elements/table.ts
@@ -156,7 +156,7 @@ export type ItemContextMenuEventDetail<T> = {
 @adoptedStyle(styles)
 @adoptedStyle(focusStyle)
 @connectStore(icons)
-@shadow()
+@shadow({ delegatesFocus: true })
 export class DuoyunTableElement<T = any, K = any> extends DuoyunScrollBoxElement {
   @part static table: string;
   @part static th: string;

diff --git a/packages/duoyun-ui/src/elements/tabs.ts b/packages/duoyun-ui/src/elements/tabs.ts
@@ -118,7 +118,7 @@ export interface TabItem<T = any> {
 @customElement('dy-tabs')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
-@shadow()
+@shadow({ delegatesFocus: true })
 @aria({ role: 'tablist' })
 export class DuoyunTabsElement extends GemElement {
   @part static tabs: string;

diff --git a/packages/duoyun-ui/src/elements/tag.ts b/packages/duoyun-ui/src/elements/tag.ts
@@ -60,7 +60,7 @@ export type PresetColor = 'positive' | 'informative' | 'negative' | 'notice' | '
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
 @connectStore(icons)
-@shadow()
+@shadow({ delegatesFocus: true })
 @aria({ role: 'mark' })
 export class DuoyunTagElement extends GemElement {
   @slot static unnamed: string;

diff --git a/packages/duoyun-ui/src/elements/time-panel.ts b/packages/duoyun-ui/src/elements/time-panel.ts
@@ -58,7 +58,7 @@ const style = createCSSSheet(css`
 @customElement('dy-time-panel')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
-@shadow()
+@shadow({ delegatesFocus: true })
 export class DuoyunTimePanelElement extends GemElement {
   @boolattribute headless: boolean;
   @globalemitter change: Emitter<number>;

diff --git a/packages/duoyun-ui/src/elements/tree.ts b/packages/duoyun-ui/src/elements/tree.ts
@@ -156,7 +156,7 @@ export type MouseEventDetail = { value: any; item: TreeItem; originEvent: MouseE
 @customElement('dy-tree')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
-@shadow()
+@shadow({ delegatesFocus: true })
 @aria({ role: 'tree' })
 export class DuoyunTreeElement extends GemElement<State> {
   @part static item: string;

diff --git a/packages/gem-book/src/bin/builder.ts b/packages/gem-book/src/bin/builder.ts
@@ -89,17 +89,17 @@ function getPluginRecord(pluginList: string[]) {
       const [base, ...rest] = plugin.split(/(\?)/);
       const search = rest.join('');
       const pluginPath = resolveLocalPlugin(base);
-      if (!pluginPath) return [plugin, { name: plugin, url: 'file:' + plugin }];
+      if (!pluginPath) return [plugin, { name: plugin, url: 'gbp:' + plugin }];
       if (pluginPath.custom) {
         const filename = path.basename(pluginPath.custom);
         const uniqueFilename = filename + Date.now();
         const symLinkPath = path.resolve(pluginDir, filename);
         symlinkSync(pluginPath.custom, path.resolve(pluginDir, uniqueFilename));
         // 替换内置文件
         renameSync(path.resolve(pluginDir, uniqueFilename), symLinkPath);
-        return [pluginPath.custom, { name: filename, url: 'file:' + filename + search }];
+        return [pluginPath.custom, { name: filename, url: 'gbp:' + filename + search }];
       }
-      return [pluginPath.builtIn!, { name: base, url: 'file:' + base + search }];
+      return [pluginPath.builtIn!, { name: base, url: 'gbp:' + base + search }];
     }),
   );
 }

diff --git a/packages/gem-book/src/bin/index.ts b/packages/gem-book/src/bin/index.ts
@@ -158,7 +158,7 @@ function readFiles(filenames: string[], docsRootDir: string, dir: string, link:
             features,
           };
           if (redirect) {
-            (bookConfig.redirects ||= {})[item.link] = new URL(redirect, `file:${item.link}`).pathname;
+            (bookConfig.redirects ||= {})[item.link] = new URL(redirect, `gbp:${item.link}`).pathname;
           } else {
             result.push(item);
           }
@@ -170,7 +170,7 @@ function readFiles(filenames: string[], docsRootDir: string, dir: string, link:
         const newLink = path.join(link, filename) + '/';
         if (redirect) {
           const pattern = `${newLink}*`;
-          const redirectPath = new URL(redirect, `file:${pattern}`).pathname;
+          const redirectPath = new URL(redirect, `gbp:${pattern}`).pathname;
           (bookConfig.redirects ||= {})[pattern] = `${redirectPath}${redirectPath.endsWith('/') ? ':0' : ''}`;
         } else {
           const subFilenameSet = new Set([...readdirSync(fullPath)]);

diff --git a/packages/gem-book/src/element/elements/edit-link.ts b/packages/gem-book/src/element/elements/edit-link.ts
@@ -85,7 +85,7 @@ export class EditLink extends GemElement<State> {
           height: 18px;
           margin-right: 10px;
         }
-        .last-updated span {
+        .last-updated gem-link {
           opacity: 0.5;
         }
         @media ${mediaQuery.PHONE} {
@@ -95,15 +95,15 @@ export class EditLink extends GemElement<State> {
           }
         }
       </style>
-      <gem-link class="edit" href=${`${github}/edit/${sourceBranch}${this.#fullPath}`}>
+      <gem-link href=${`${github}/edit/${sourceBranch}${this.#fullPath}`}>
         <gem-use .element=${icons.compose}></gem-use>
         <span>${selfI18n.get('editOnGithub')}</span>
       </gem-link>
       ${lastUpdated &&
       html`
         <div class="last-updated">
-          <gem-link class="edit" href=${commitUrl} title=${message}>${selfI18n.get('lastUpdated')}:</gem-link>
-          <span>${lastUpdated}</span>
+          <span>${selfI18n.get('lastUpdated')}:</span>
+          <gem-link href=${commitUrl} title=${message}>${lastUpdated}</gem-link>
         </div>
       `}
     `;

diff --git a/packages/gem/src/lib/decorators.ts b/packages/gem/src/lib/decorators.ts
@@ -451,7 +451,7 @@ export function rootElement(rootType: string) {
 export function shadow({
   mode = 'open',
   serializable = true,
-  delegatesFocus = true,
+  delegatesFocus,
   slotAssignment,
 }: Partial<Omit<ShadowRootInit, 'mode'> & { mode?: null | ShadowRootMode }> = {}) {
   return function (_: any, context: ClassDecoratorContext) {
@@ -491,8 +491,10 @@ export function aria(info: Partial<ARIAMixin>) {
  * ```
  */
 export function customElement(name: string) {
-  return function (cls: new (...args: any) => any, _: ClassDecoratorContext) {
-    customElements.define(name, cls);
+  return function (cls: new (...args: any) => any, { addInitializer }: ClassDecoratorContext) {
+    addInitializer(function () {
+      customElements.define(name, cls);
+    });
   };
 }
 

diff --git a/packages/gem/src/lib/element.ts b/packages/gem/src/lib/element.ts
@@ -168,8 +168,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
   }
 
   get #metadata(): Metadata {
-    // BUG? 为啥会是空
-    return (this.constructor as any)[Symbol.metadata] || {};
+    return (this.constructor as any)[Symbol.metadata];
   }
 
   get internals() {