[gem] Light dom use @scope

mantou132 · Jul 18, 2024 · c63cd89 · c63cd89
1 parent 2caea68
commit c63cd89
Show file tree

Hide file tree

Showing 19 changed files with 389 additions and 355 deletions.
diff --git a/packages/duoyun-ui/src/elements/form.ts b/packages/duoyun-ui/src/elements/form.ts
@@ -38,40 +38,45 @@ import './date-picker';
 import './date-range-picker';
 
 const formStyle = createCSSSheet(css`
-  :where(dy-form:not([hidden])) {
+  :where(:scope:not([inline], [hidden])) {
     display: block;
   }
-  dy-form:not([inline]) dy-form-item {
-    margin-block-end: 1.8em;
-  }
-  :where(dy-form[inline]:not([hidden])) {
+  :where(:scope[inline]:not([hidden])) {
     display: flex;
-    flex-wrap: wrap;
-    gap: 1em;
   }
-  dy-form[inline] dy-form-item {
-    position: relative;
-    gap: 0.5em;
-    align-items: center;
-    flex-direction: row;
-    flex-grow: 0;
-    margin-block-end: 0;
-  }
-  dy-form[inline] dy-form-item::part(label) {
-    margin-block-end: 0;
-  }
-  dy-form[inline] dy-form-item::part(input) {
-    width: 15em;
-  }
-  dy-form[inline] dy-form-item::part(input),
-  dy-form[inline] dy-form-item::part(add) {
-    margin-block-start: 0;
+  :scope:not([inline]) {
+    dy-form-item {
+      margin-block-end: 1.8em;
+    }
   }
-  dy-form[inline] dy-form-item::part(tip) {
-    position: absolute;
-    width: 100%;
-    top: 100%;
-    left: 0;
+  :scope[inline] {
+    flex-wrap: wrap;
+    gap: 1em;
+
+    dy-form-item {
+      position: relative;
+      gap: 0.5em;
+      align-items: center;
+      flex-direction: row;
+      flex-grow: 0;
+      margin-block-end: 0;
+    }
+    dy-form-item::part(label) {
+      margin-block-end: 0;
+    }
+    dy-form-item::part(input) {
+      width: 15em;
+    }
+    dy-form-item::part(input),
+    dy-form-item::part(add) {
+      margin-block-start: 0;
+    }
+    dy-form-item::part(tip) {
+      position: absolute;
+      width: 100%;
+      top: 100%;
+      left: 0;
+    }
   }
   dy-form-item:state(invalid) * {
     border-color: ${theme.negativeColor};
@@ -81,7 +86,7 @@ const formStyle = createCSSSheet(css`
       display: flex;
       gap: 1em;
     }
-    dy-form:not([inline]) dy-form-item-inline-group > dy-form-item {
+    :scope:not([inline]) dy-form-item-inline-group > dy-form-item {
       width: 0;
       flex-grow: 1;
     }
@@ -382,6 +387,7 @@ export class DuoyunFormItemElement extends GemElement<FormItemState> {
           ? html`
               <dy-date-picker
                 class="input"
+                part=${DuoyunFormItemElement.input}
                 @change=${this.#onChange}
                 @clear=${(evt: any) => evt.target.change(undefined)}
                 ?disabled=${this.disabled}
@@ -396,6 +402,7 @@ export class DuoyunFormItemElement extends GemElement<FormItemState> {
             ? html`
                 <dy-date-range-picker
                   class="input"
+                  part=${DuoyunFormItemElement.input}
                   @change=${this.#onChange}
                   @clear=${(evt: any) => evt.target.change(undefined)}
                   ?disabled=${this.disabled}

diff --git a/packages/duoyun-ui/src/elements/input.ts b/packages/duoyun-ui/src/elements/input.ts
@@ -412,27 +412,28 @@ export class DuoyunInputElement extends GemElement {
 }
 
 const inputGroupStyle = createCSSSheet(css`
-  dy-input-group {
+  :scope {
     display: flex;
-  }
-  dy-input-group :where(dy-input, dy-select):where(:focus, :focus-within, :hover, :state(active)) {
-    position: relative;
-    z-index: 1;
-  }
-  dy-input-group > * {
-    flex-grow: 10;
-    width: 0;
-  }
-  dy-input-group > :not(:last-child) {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  dy-input-group > :nth-child(n + 2),
-  /* dy-input-group > dy-tooltip > dy-button */
-  dy-input-group > dy-tooltip:last-child > * {
-    margin-inline-start: -1px;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+
+    :where(dy-input, dy-select):where(:focus, :focus-within, :hover, :state(active)) {
+      position: relative;
+      z-index: 1;
+    }
+    > * {
+      flex-grow: 10;
+      width: 0;
+    }
+    > :not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    > :nth-child(n + 2),
+    /* > dy-tooltip > dy-button */
+    > dy-tooltip:last-child > * {
+      margin-inline-start: -1px;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
   }
 `);
 

diff --git a/packages/duoyun-ui/src/elements/paragraph.ts b/packages/duoyun-ui/src/elements/paragraph.ts
@@ -1,26 +1,30 @@
-import { adoptedStyle, aria, customElement, slot } from '@mantou/gem/lib/decorators';
+import { adoptedStyle, aria, customElement } from '@mantou/gem/lib/decorators';
 import { GemElement } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 
 import { theme } from '../lib/theme';
 
 const style = createCSSSheet(css`
-  :where(dy-paragraph:not([hidden])) {
+  :where(:scope:not([hidden])) {
     display: block;
     margin-block-end: 0.75em;
     line-height: 1.5;
-  }
-  :where(dy-paragraph):where(:lang(zh), :lang(ja), :lang(kr)) {
-    line-height: 1.7;
-  }
-  :where(dy-paragraph) {
-    :where(gem-link, dy-link):where(:not([hidden])) {
-      display: inline-block;
+
+    &:where(:lang(zh), :lang(ja), :lang(kr)) {
+      line-height: 1.7;
+
+      :where(gem-link, dy-link, a[href]) {
+        text-underline-offset: 0.125em;
+      }
+    }
+
+    :where(gem-link, dy-link, a[href]) {
       color: ${theme.primaryColor};
       text-decoration: underline;
-    }
-    :where(gem-link, dy-link):where(:lang(zh), :lang(ja), :lang(kr)) {
-      text-underline-offset: 0.125em;
+
+      &:where(:not([hidden])) {
+        display: inline-block;
+      }
     }
     code,
     kbd {

diff --git a/packages/duoyun-ui/src/elements/space.ts b/packages/duoyun-ui/src/elements/space.ts
@@ -3,19 +3,19 @@ import { GemElement } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 
 const style = createCSSSheet(css`
-  :where(dy-space:not([hidden])) {
+  :where(:scope:not([hidden])) {
     display: inline-flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 0.4em;
   }
-  :where(dy-space[orientation='vertical']) {
+  :where(:scope[orientation='vertical']) {
     flex-direction: column;
   }
-  :where(dy-space[size='small']) {
+  :where(:scope[size='small']) {
     gap: 0.2em;
   }
-  :where(dy-space[size='large']) {
+  :where(:scope[size='large']) {
     gap: 0.8em;
   }
 `);

diff --git a/packages/duoyun-ui/src/lib/styles.ts b/packages/duoyun-ui/src/lib/styles.ts
@@ -17,29 +17,31 @@ export const focusStyle = createCSSSheet(css`
   }
 `);
 
-// support `hidden` attribute
 export const blockContainer = createCSSSheet(css`
-  :host(:where(:not([hidden]))) {
+  :host(:where(:not([hidden]))),
+  :where(:scope:not([hidden])) {
     display: block;
   }
 `);
 
-// support `hidden` attribute
 export const flexContainer = createCSSSheet(css`
-  :host(:where(:not([hidden]))) {
+  :host(:where(:not([hidden]))),
+  :where(:scope:not([hidden])) {
     display: flex;
   }
 `);
 
 export const contentsContainer = createCSSSheet(css`
-  :host(:where(:not([hidden]))) {
+  :host(:where(:not([hidden]))),
+  :where(:scope:not([hidden])) {
     display: contents;
   }
 `);
 
 export const noneTemplate = html`
   <style>
-    :host {
+    :host,
+    :scope {
       display: none;
     }
   </style>

diff --git a/packages/duoyun-ui/src/lib/theme.ts b/packages/duoyun-ui/src/lib/theme.ts
@@ -1,4 +1,4 @@
-import { getThemeStore, useTheme } from '@mantou/gem/helper/theme';
+import { getThemeStore, useTheme, Theme } from '@mantou/gem/helper/theme';
 
 export function getSemanticColor(semantic?: string) {
   switch (semantic) {
@@ -73,5 +73,5 @@ export const themeStore = getThemeStore(theme);
 
 export function extendTheme<T extends Record<string, string>>(t: Partial<typeof lightTheme> & T) {
   updateTheme(t);
-  return [theme as typeof lightTheme & T, updateTheme as (tm: Partial<typeof lightTheme> & T) => void] as const;
+  return [theme as Theme<typeof lightTheme & T>, updateTheme as (tm: Partial<typeof lightTheme> & T) => void] as const;
 }