[duoyun-ui] Fixed document.createElement error

packages/duoyun-ui/src/elements/action-text.ts

@@ -41,8 +41,7 @@ export class DuoyunActionTextElement extends GemElement {
   @state active: boolean;
 
   constructor() {
-    super();
-    this.tabIndex = 0;
+    super({ focusable: true });
     this.internals.role = 'button';
     this.addEventListener('keydown', commonHandle);
   }

packages/duoyun-ui/src/elements/button.ts

@@ -208,8 +208,8 @@ export class DuoyunButtonElement extends GemElement {
         }
       </style>
       <div
-        tabindex="0"
         role="button"
+        tabindex=${-Number(this.disabled)}
         aria-disabled=${this.disabled}
         @keydown=${commonHandle}
         class="content"
@@ -234,9 +234,9 @@ export class DuoyunButtonElement extends GemElement {
               ref=${this.dropdownRef.ref}
               class="dropdown"
               part=${DuoyunButtonElement.dropdown}
-              tabindex="0"
               @keydown=${commonHandle}
               role="button"
+              tabindex=${-Number(this.disabled)}
               aria-disabled=${this.disabled}
               @click=${this.#onClickDropdown}
               .element=${icons.expand}

packages/duoyun-ui/src/elements/cascader-picker.ts

@@ -51,7 +51,7 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @adoptedStyle(pickerStyle)
 @adoptedStyle(focusStyle)
-export class DuoyunCascaderPickElement extends GemElement implements BasePickerElement {
+export class DuoyunCascaderPickerElement extends GemElement implements BasePickerElement {
   @attribute placeholder: string;
   @boolattribute fit: boolean;
   @boolattribute disabled: boolean;
@@ -65,10 +65,9 @@ export class DuoyunCascaderPickElement extends GemElement implements BasePickerE
   @emitter expand: Emitter<Option>;
 
   constructor() {
-    super();
+    super({ focusable: true });
     this.addEventListener('click', this.#onOpen);
     this.addEventListener('keydown', commonHandle);
-    this.tabIndex = 0;
     this.internals.role = 'combobox';
   }
 

packages/duoyun-ui/src/elements/checkbox.ts

@@ -89,12 +89,12 @@ export class DuoyunCheckboxElement extends GemElement {
     return html`
       <dy-use
         role="checkbox"
-        tabindex="0"
-        @keydown=${commonHandle}
+        tabindex=${-Number(this.disabled)}
         aria-disabled=${this.disabled}
         aria-labelledby="label"
         aria-checked=${this.indeterminate ? 'mixed' : this.checked}
         class="checkbox"
+        @keydown=${commonHandle}
         .element=${this.checked ? icons.check : undefined}
       ></dy-use>
       <slot id="label"></slot>

packages/duoyun-ui/src/elements/color-picker.ts

@@ -56,7 +56,7 @@ const style = createCSSSheet(css`
 @customElement('dy-color-picker')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
-export class DuoyunColorPickElement extends GemElement implements BasePickerElement {
+export class DuoyunColorPickerElement extends GemElement implements BasePickerElement {
   @attribute value: HexColor;
   @boolattribute alpha: boolean;
   @refobject popoverRef: RefObject<DuoyunPopoverElement>;
@@ -85,7 +85,8 @@ export class DuoyunColorPickElement extends GemElement implements BasePickerElem
       >
         <div
           role="combobox"
-          tabindex="0"
+          tabindex=${-Number(this.disabled)}
+          aria-disabled=${this.disabled}
           @keydown=${commonHandle}
           class="picker"
           style=${styleMap({ backgroundColor: this.value })}

packages/duoyun-ui/src/elements/contextmenu.ts

@@ -113,10 +113,10 @@ const style = createCSSSheet(css`
 @customElement('dy-contextmenu')
 @connectStore(contextmenuStore)
 @adoptedStyle(style)
-export class DuoyunContextMenuElement extends GemElement {
+export class DuoyunContextmenuElement extends GemElement {
   @refobject optionsRef: RefObject<DuoyunOptionsElement>;
 
-  static instance?: DuoyunContextMenuElement;
+  static instance?: DuoyunContextmenuElement;
 
   static async open(contextmenu: Menu, options: ContextMenuOptions = {}) {
     const {
@@ -365,4 +365,4 @@ export class DuoyunContextMenuElement extends GemElement {
   };
 }
 
-export const ContextMenu = DuoyunContextMenuElement;
+export const ContextMenu = DuoyunContextmenuElement;

packages/duoyun-ui/src/elements/date-picker.ts

@@ -69,7 +69,7 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
 @connectStore(icons)
-export class DuoyunDatePickElement extends GemElement implements BasePickerElement {
+export class DuoyunDatePickerElement extends GemElement implements BasePickerElement {
   @attribute placeholder: string;
   @boolattribute time: boolean;
   @boolattribute clearable: boolean;
@@ -89,10 +89,9 @@ export class DuoyunDatePickElement extends GemElement implements BasePickerEleme
   }
 
   constructor() {
-    super();
+    super({ focusable: true });
     this.addEventListener('click', this.#onOpen);
     this.addEventListener('keydown', commonHandle);
-    this.tabIndex = 0;
     this.internals.role = 'combobox';
   }
 

packages/duoyun-ui/src/elements/date-range-picker.ts

@@ -66,7 +66,7 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @adoptedStyle(pickerStyle)
 @adoptedStyle(focusStyle)
-export class DuoyunDateRangePickElement extends GemElement implements BasePickerElement {
+export class DuoyunDateRangePickerElement extends GemElement implements BasePickerElement {
   @attribute placeholder: string;
   @boolattribute clearable: boolean;
   @boolattribute disabled: boolean;
@@ -78,10 +78,9 @@ export class DuoyunDateRangePickElement extends GemElement implements BasePicker
   @emitter clear: Emitter;
 
   constructor() {
-    super();
+    super({ focusable: true });
     this.addEventListener('click', this.#onOpen);
     this.addEventListener('keydown', commonHandle);
-    this.tabIndex = 0;
     this.internals.role = 'combobox';
   }
 

packages/duoyun-ui/src/elements/drawer.ts

@@ -27,7 +27,7 @@ const style = createCSSSheet(css`
 @customElement('dy-drawer')
 @adoptedStyle(style)
 export class DuoyunDrawerElement extends DuoyunModalElement {
-  constructor(options: ModalOptions) {
+  constructor(options: ModalOptions = {}) {
     super(options);
     this.addEventListener('maskclick', () => this.close(null));
     this.openAnimation = slideInLeft;

packages/duoyun-ui/src/elements/file-picker.ts

@@ -120,7 +120,7 @@ export interface FileItem extends File {
 @customElement('dy-file-picker')
 @adoptedStyle(style)
 @adoptedStyle(focusStyle)
-export class DuoyunFilePickElement extends GemElement implements BasePickerElement {
+export class DuoyunFilePickerElement extends GemElement implements BasePickerElement {
   @part static button: string;
   @part static item: string;
 
@@ -131,6 +131,7 @@ export class DuoyunFilePickElement extends GemElement implements BasePickerEleme
   /**@deprecated Use children*/
   @attribute placeholder: string;
   @boolattribute directory: boolean;
+  @boolattribute disabled: boolean;
   @boolattribute multiple: boolean;
   @globalemitter change: Emitter<FileItem[]>;
   @refobject inputRef: RefObject<HTMLInputElement>;
@@ -173,13 +174,14 @@ export class DuoyunFilePickElement extends GemElement implements BasePickerEleme
       }
     };
     return html`
-      <div role="listitem" class="item" part=${DuoyunFilePickElement.item} style=${styleMap({ color: getColor() })}>
+      <div role="listitem" class="item" part=${DuoyunFilePickerElement.item} style=${styleMap({ color: getColor() })}>
         <div class="name">${name}</div>
         ${progress ? html`<div role="progressbar">${Math.floor(progress)}%</div>` : ''}
         <slot name=${utf8ToB64(name, true)}></slot>
         <dy-use
           role="button"
-          tabindex="0"
+          tabindex=${-Number(this.disabled)}
+          aria-disabled=${this.disabled}
           @keydown=${commonHandle}
           class="icon"
           .element=${icons.delete}
@@ -204,7 +206,7 @@ export class DuoyunFilePickElement extends GemElement implements BasePickerEleme
       <dy-image-preview
         role="listitem"
         class="item"
-        part=${DuoyunFilePickElement.item}
+        part=${DuoyunFilePickerElement.item}
         .status=${getStatus()}
         .progress=${item.progress || 0}
         .file=${item}
@@ -221,15 +223,17 @@ export class DuoyunFilePickElement extends GemElement implements BasePickerEleme
         hidden
         type="file"
         ?multiple=${this.multiple}
+        ?disabled=${this.disabled}
         ref=${this.inputRef.ref}
         @change=${this.#onChange}
         .webkitdirectory=${this.directory}
         accept=${this.#accept}>
       </input>
       <div
-        tabindex="0"
         role="button"
-        part=${DuoyunFilePickElement.button}
+        tabindex=${-Number(this.disabled)}
+        aria-disabled=${this.disabled}
+        part=${DuoyunFilePickerElement.button}
         class="item button"
         @keydown=${commonHandle}
         @click=${() => this.showPicker()}>

packages/duoyun-ui/src/elements/input.ts

@@ -388,8 +388,9 @@ export class DuoyunInputElement extends GemElement {
       ${this.clearable && (this.alwayclearable || this.value)
         ? html`
             <dy-use
-              tabindex="0"
               role="button"
+              tabindex=${-Number(this.disabled)}
+              aria-disabled=${this.disabled}
               @keydown=${commonHandle}
               @click=${this.#onClear}
               part=${DuoyunInputElement.clear}

packages/duoyun-ui/src/elements/link.ts

@@ -4,13 +4,15 @@ import { GemLinkElement, GemActiveLinkElement } from '@mantou/gem/elements/base/
 
 import { commonHandle } from '../lib/hotkeys';
 import { focusStyle } from '../lib/styles';
+import { theme } from '../lib/theme';
 
 export * from '@mantou/gem/elements/base/link';
 
 const style = createCSSSheet(css`
   :host {
     color: inherit;
     text-decoration: inherit;
+    border-radius: ${theme.normalRound};
   }
 `);
 

packages/duoyun-ui/src/elements/options.ts

@@ -164,8 +164,7 @@ export class DuoyunOptionsElement extends GemElement<State> {
   };
 
   constructor() {
-    super();
-    this.tabIndex = 0;
+    super({ focusable: true });
     this.internals.role = 'listbox';
   }
 

packages/duoyun-ui/src/elements/picker.ts

@@ -61,6 +61,7 @@ export const pickerStyle = createCSSSheet(css`
 `);
 
 export abstract class BasePickerElement {
+  disabled: boolean;
   showPicker: () => void;
 }
 
@@ -99,7 +100,7 @@ export interface Option<T = any> {
 @adoptedStyle(pickerStyle)
 @adoptedStyle(focusStyle)
 @connectStore(icons)
-export class DuoyunPickElement extends GemElement implements BasePickerElement {
+export class DuoyunPickerElement extends GemElement implements BasePickerElement {
   @attribute placeholder: string;
   @boolattribute disabled: boolean;
   @boolattribute borderless: boolean;
@@ -113,10 +114,9 @@ export class DuoyunPickElement extends GemElement implements BasePickerElement {
   @globalemitter change: Emitter<any>;
 
   constructor() {
-    super();
+    super({ focusable: true });
     this.addEventListener('click', this.#onOpen);
     this.addEventListener('keydown', commonHandle);
-    this.tabIndex = 0;
     this.internals.role = 'combobox';
   }
 

packages/duoyun-ui/src/elements/radio.ts

@@ -80,11 +80,11 @@ export class DuoyunRadioElement extends GemElement {
     return html`
       <div
         role="radio"
-        tabindex="0"
         @keydown=${commonHandle}
-        aria-labelledby="label"
+        tabindex=${-Number(this.disabled)}
         aria-disabled=${this.disabled}
         aria-checked=${this.checked}
+        aria-labelledby="label"
         class="radio"
       ></div>
       <slot id="label"></slot>

packages/duoyun-ui/src/elements/rate.ts

@@ -116,7 +116,8 @@ export class DuoyunRateElement extends GemElement {
               fill: this.value >= this.#total - index,
               mask: this.value < this.#total - index && this.value > this.#total - 1 - index,
             })}
-            tabindex="0"
+            tabindex=${-Number(this.disabled)}
+            aria-disabled=${this.disabled}
             @keydown=${commonHandle}
             @click=${() => this.#onClick(this.#total - index)}
             .element=${icons.star}

packages/duoyun-ui/src/elements/segmented.ts

@@ -148,7 +148,8 @@ export class DuoyunSegmentedElement extends GemElement {
         return html`
           <div
             role="radio"
-            tabindex="0"
+            tabindex=${-Number(this.disabled)}
+            aria-disabled=${this.disabled}
             style=${styleMap({ anchorName: getAnchorName(index) })}
             class=${classMap({ segment: true, current: index === currentIndex })}
             part=${partMap({

packages/duoyun-ui/src/elements/select.ts

@@ -173,8 +173,7 @@ export class DuoyunSelectElement extends GemElement<State> implements BasePicker
   }
 
   constructor() {
-    super();
-    this.tabIndex = 0;
+    super({ focusable: true });
     this.effect(() => {
       this.internals.role = this.inline ? null : 'combobox';
       this.internals.ariaExpanded = String(this.state.open);

packages/duoyun-ui/src/elements/shortcut-record.ts

@@ -111,17 +111,9 @@ export class DuoyunShortcutRecordElement extends GemElement {
   }
 
   constructor() {
-    super();
+    super({ focusable: true });
     this.internals.role = 'input';
     this.addEventListener('keydown', this.#onKeydown);
-    this.effect(() => {
-      if (this.disabled) {
-        this.removeAttribute('tabindex');
-      } else {
-        this.tabIndex = 0;
-      }
-      this.internals.ariaDisabled = String(this.disabled);
-    });
   }
 
   #onKeydown = (evt: KeyboardEvent) => {

packages/duoyun-ui/src/elements/slider.ts

@@ -128,18 +128,16 @@ export class DuoyunSliderElement extends GemElement {
   }
 
   constructor() {
-    super();
-    this.tabIndex = 0;
-    this.addEventListener('keydown', this.#onKeydown);
+    super({ focusable: true });
     this.internals.role = 'slider';
+    this.addEventListener('keydown', this.#onKeydown);
     this.effect(
       () => {
-        this.internals.ariaDisabled = String(this.disabled);
         this.internals.ariaValueText = String(this.value);
         const position = this.#getValue(clamp(this.min, this.value, this.#max)) / this.#diff;
         this.setState({ position, displayPosition: position });
       },
-      () => [this.value, this.disabled],
+      () => [this.value],
     );
   }
 

packages/duoyun-ui/src/elements/switch.ts

@@ -101,9 +101,9 @@ export class DuoyunSwitchElement extends GemElement {
       </style>
       <div
         class="switch"
-        role="switch"
-        tabindex="0"
         @keydown=${commonHandle}
+        role="switch"
+        tabindex=${-Number(this.disabled)}
         aria-disabled=${this.disabled}
         aria-labelledby="label"
         aria-checked=${this.checked}