[duoyun-ui] Add theme control shadow

packages/duoyun-ui/docs/en/01-guide/50-lib.md

@@ -9,9 +9,9 @@ Color space conversion; brightness, contrast calculation.
 
 <gbp-api src="/src/lib/color.ts"></gbp-api>
 
-## Encode/Decode
+## Encode
 
-hash, base64 etc encode.
+hash, base64 etc encode/decode.
 
 <gbp-api src="/src/lib/encode.ts"></gbp-api>
 
@@ -33,12 +33,18 @@ Format numbers, range adjustments.
 
 <gbp-api src="/src/lib/number.ts"></gbp-api>
 
-## Date/Time
+## Time
 
 Lightweight version of the date time process library.
 
 <gbp-api src="/src/lib/time.ts"></gbp-api>
 
+## Timer
+
+Some timer functions.
+
+<gbp-api src="/src/lib/timer.ts"></gbp-api>
+
 ## Utils
 
 Some common functions.

packages/duoyun-ui/docs/zh/01-guide/50-lib.md

@@ -9,9 +9,9 @@ DuoyunUI 除了提供许多自定义元素、具有某些特定功能的基类
 
 <gbp-api src="/src/lib/color.ts"></gbp-api>
 
-## Encode/Decode
+## Encode
 
-hash, base64 等编码。
+hash, base64 等编码/解码。
 
 <gbp-api src="/src/lib/encode.ts"></gbp-api>
 
@@ -33,12 +33,18 @@ hash, base64 等编码。
 
 <gbp-api src="/src/lib/number.ts"></gbp-api>
 
-## Date/Time
+## Time
 
 轻量版的日期时间处理库。
 
 <gbp-api src="/src/lib/time.ts"></gbp-api>
 
+## Timer
+
+一些定时器函数。
+
+<gbp-api src="/src/lib/timer.ts"></gbp-api>
+
 ## Utils
 
 一些常用的函数。

packages/duoyun-ui/src/elements/base/resize.ts

@@ -1,7 +1,7 @@
 import { emitter, Emitter } from '@mantou/gem/lib/decorators';
 import { GemElement, GemElementOptions } from '@mantou/gem/lib/element';
 
-import { throttle } from '../../lib/utils';
+import { throttle } from '../../lib/timer';
 
 export type ResizeDetail = {
   contentRect: DuoyunResizeBaseElement['contentRect'];

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

@@ -39,6 +39,9 @@ const style = createCSSSheet(css`
     border-radius: ${theme.normalRound};
     white-space: nowrap;
   }
+  :host(:not([borderless], [disabled])) {
+    box-shadow: ${theme.controlShadow};
+  }
   :host([round]) {
     border-radius: 10em;
   }

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

@@ -12,7 +12,7 @@ import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, styleMap, classMap } from '@mantou/gem/lib/utils';
 
 import { icons } from '../lib/icons';
-import { structuredClone, getCascaderDeep, readProp } from '../lib/utils';
+import { getCascaderDeep, readProp } from '../lib/utils';
 import { theme } from '../lib/theme';
 import { isNotNullish } from '../lib/types';
 

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

@@ -46,6 +46,9 @@ const style = createCSSSheet(css`
     transform: scale(1.001);
     transition: background 0.1s;
   }
+  :host(:not([disabled])) .checkbox {
+    box-shadow: ${theme.controlShadow};
+  }
   .checkbox::part(icon) {
     stroke-width: 1px;
     stroke: white;

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

@@ -122,6 +122,7 @@ const style = createCSSSheet(css`
     border-radius: 0;
     border-top-color: transparent;
     border-inline: none;
+    box-shadow: none;
   }
   :where(.value, .alpha)::part(input) {
     padding-inline: 0;

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

@@ -39,6 +39,9 @@ const style = createCSSSheet(css`
       )
       top left / 1.2em 1.2em repeat;
   }
+  :host(:not([disabled])) {
+    box-shadow: ${theme.controlShadow};
+  }
   :host([disabled]) {
     cursor: not-allowed;
   }

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

@@ -5,10 +5,9 @@ import { useStore } from '@mantou/gem/lib/store';
 
 import { icons } from '../lib/icons';
 import { locale } from '../lib/locale';
-import { setBodyInert } from '../lib/utils';
+import { setBodyInert, toggleActiveState } from '../lib/element';
 import { hotkeys } from '../lib/hotkeys';
 import { theme } from '../lib/theme';
-import { toggleActiveState } from '../lib/element';
 
 import type { DuoyunOptionsElement } from './options';
 

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

@@ -71,10 +71,10 @@ const style = createCSSSheet(css`
   .button {
     cursor: pointer;
     border-radius: ${theme.normalRound};
-    border: 1px dashed ${theme.borderColor};
+    border: 1px solid ${theme.borderColor};
   }
-  .button:hover {
-    border-color: ${theme.textColor};
+  :host(:not([disabled])) .button {
+    box-shadow: ${theme.controlShadow};
   }
   :host([type='image']:where(:not([hidden]))) {
     display: grid;

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

@@ -4,7 +4,7 @@ import { addListener, createCSSSheet, css } from '@mantou/gem/lib/utils';
 
 import { theme } from '../lib/theme';
 import { getDisplayKey } from '../lib/hotkeys';
-import { throttle } from '../lib/utils';
+import { throttle } from '../lib/timer';
 import { contentsContainer } from '../lib/styles';
 
 import './paragraph';

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

@@ -21,7 +21,7 @@ import { icons } from '../lib/icons';
 import { focusStyle } from '../lib/styles';
 import { commonHandle, hotkeys } from '../lib/hotkeys';
 import { clamp } from '../lib/number';
-import { throttle } from '../lib/utils';
+import { throttle } from '../lib/timer';
 
 import './use';
 
@@ -76,6 +76,9 @@ const style = createCSSSheet(css`
     border-radius: ${theme.normalRound};
     outline: none;
   }
+  :host(:not([disabled])) {
+    box-shadow: ${theme.controlShadow};
+  }
   :host(:not([type='textarea'])) {
     block-size: calc(2.2em + 2px);
   }
@@ -89,6 +92,7 @@ const style = createCSSSheet(css`
   }
   .input {
     outline: none;
+    cursor: inherit;
     font: inherit;
     text-align: inherit;
     line-height: 1.5;

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

@@ -19,7 +19,7 @@ import { logger } from '@mantou/gem/helper/logger';
 import { theme } from '../lib/theme';
 import { blockContainer } from '../lib/styles';
 import { findScrollContainer } from '../lib/element';
-import { once, throttle } from '../lib/utils';
+import { throttle, once } from '../lib/timer';
 
 import type { Status } from './status-light';
 import { DuoyunVisibleBaseElement, visibilityObserver } from './base/visible';

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

@@ -20,7 +20,8 @@ import { mediaQuery } from '@mantou/gem/helper/mediaquery';
 import { theme } from '../lib/theme';
 import { locale } from '../lib/locale';
 import { hotkeys } from '../lib/hotkeys';
-import { DyPromise, setBodyInert } from '../lib/utils';
+import { DyPromise } from '../lib/utils';
+import { setBodyInert } from '../lib/element';
 import { commonAnimationOptions, fadeIn, fadeOut, slideInUp } from '../lib/animations';
 
 import './button';

packages/duoyun-ui/src/elements/page-loadbar.ts

@@ -3,7 +3,7 @@ import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 
 import { theme } from '../lib/theme';
-import { sleep } from '../lib/utils';
+import { sleep } from '../lib/timer';
 
 const style = createCSSSheet(css`
   :host(:where(:not([hidden]))) {

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

@@ -35,6 +35,9 @@ export const pickerStyle = createCSSSheet(css`
     font-size: 0.875em;
     box-sizing: border-box;
   }
+  :host(:not([borderless], [disabled])) {
+    box-shadow: ${theme.controlShadow};
+  }
   :host(:where([data-active], :state(active))) {
     background: ${theme.lightBackgroundColor};
   }

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

@@ -13,8 +13,8 @@ import {
 import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
 import { addListener, createCSSSheet, css, styleMap, StyleObject } from '@mantou/gem/lib/utils';
 
-import { toggleActiveState, getBoundingClientRect } from '../lib/element';
-import { sleep, setBodyInert } from '../lib/utils';
+import { toggleActiveState, getBoundingClientRect, setBodyInert } from '../lib/element';
+import { sleep } from '../lib/timer';
 import { hotkeys } from '../lib/hotkeys';
 import { theme } from '../lib/theme';
 import { contentsContainer } from '../lib/styles';

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

@@ -39,6 +39,9 @@ const style = createCSSSheet(css`
     transform: scale(1.001);
     transition: background 0.1s;
   }
+  :host(:not([disabled])) .radio {
+    box-shadow: ${theme.controlShadow};
+  }
   :host(:where(:hover, [checked])) .radio {
     color: ${theme.primaryColor};
   }

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

@@ -63,6 +63,9 @@ const style = createCSSSheet(css`
   :host .segment.current {
     background: ${theme.backgroundColor};
   }
+  :host(:not([disabled])) .segment.current {
+    box-shadow: ${theme.controlShadow};
+  }
   .icon {
     flex-shrink: 0;
     width: 1.2em;
@@ -78,6 +81,10 @@ const style = createCSSSheet(css`
   @supports (anchor-name: --foo) {
     :host .segment.current {
       background: none;
+      box-shadow: none;
+    }
+    :host(:not([disabled])) .segment.current {
+      box-shadow: none;
     }
     .marker {
       display: block;
@@ -89,6 +96,9 @@ const style = createCSSSheet(css`
       bottom: anchor(bottom);
       background: ${theme.backgroundColor};
     }
+    :host(:not([disabled])) .marker {
+      box-shadow: ${theme.controlShadow};
+    }
   }
 `);
 

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

@@ -18,7 +18,8 @@ import { createCSSSheet, css, styleMap, StyleObject } from '@mantou/gem/lib/util
 import { theme } from '../lib/theme';
 import { icons } from '../lib/icons';
 import { locale } from '../lib/locale';
-import { isIncludesString, setBodyInert } from '../lib/utils';
+import { isIncludesString } from '../lib/utils';
+import { setBodyInert } from '../lib/element';
 import { hotkeys } from '../lib/hotkeys';
 import { isNotNullish } from '../lib/types';
 import { focusStyle } from '../lib/styles';
@@ -91,6 +92,7 @@ const style = createCSSSheet(css`
     border: none;
     font-size: 1em;
     margin-block: -1em;
+    box-shadow: none;
   }
   .search::part(input) {
     padding: 0;

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

@@ -31,6 +31,9 @@ const style = createCSSSheet(css`
     border-radius: ${theme.normalRound};
     border: 1px solid ${theme.borderColor};
   }
+  :host(:not([disabled])) {
+    box-shadow: ${theme.controlShadow};
+  }
   :host(:focus) {
     border-color: ${theme.textColor};
     background-color: ${theme.lightBackgroundColor};

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

@@ -60,6 +60,9 @@ const style = createCSSSheet(css`
     transition: border-width 0.1s;
     opacity: 0.8;
   }
+  :host(:not([disabled])) .mark {
+    box-shadow: ${theme.controlShadow};
+  }
   .mark:hover {
     opacity: 1;
   }

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

@@ -42,15 +42,22 @@ const style = createCSSSheet(css`
   :host([checked]) .switch {
     background: var(--color);
   }
+  :host(:not([disabled])) .switch {
+    box-shadow: ${theme.controlShadow};
+  }
   .switch::before {
     content: '';
     display: block;
     transition: inherit;
     height: calc(100% - 4px);
     aspect-ratio: 1;
     border-radius: inherit;
-    border: 2px solid var(--color);
+    border: 2px solid transparent;
     background: ${theme.lightBackgroundColor};
+    background-clip: content-box;
+  }
+  :host(:not([disabled])) .switch::before {
+    filter: drop-shadow(${theme.controlShadow});
   }
   :host([checked]) .switch::before {
     margin-inline-start: calc(100% * 4 / 9);

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

@@ -2,7 +2,8 @@ import { adoptedStyle, customElement, state } from '@mantou/gem/lib/decorators';
 import { GemElement, html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
 
-import { sleep, setBodyInert } from '../lib/utils';
+import { sleep } from '../lib/timer';
+import { setBodyInert } from '../lib/element';
 import { theme } from '../lib/theme';
 import { commonAnimationOptions, fadeIn, fadeOut } from '../lib/animations';
 

packages/duoyun-ui/src/lib/element.ts

@@ -99,3 +99,21 @@ export function containsElement(ele: Element, other: Element) {
   }
   return false;
 }
+
+/**In addition to the parameter element, set the `inert` attribute for all element */
+export function setBodyInert(modal: HTMLElement) {
+  const map = new Map<HTMLElement, boolean>();
+  [...document.body.children].forEach((e) => {
+    if (e instanceof HTMLElement) {
+      map.set(e, e.inert);
+      e.inert = true;
+    }
+  });
+  modal.inert = false;
+  return () => {
+    map.forEach((inert, ele) => {
+      ele.inert = inert;
+    });
+    modal.inert = true;
+  };
+}

packages/duoyun-ui/src/lib/encode.ts

@@ -48,7 +48,7 @@ export async function hash(strOrAb: string | ArrayBuffer, output: 'string' | 'ar
 }
 
 // https://en.wikipedia.org/wiki/Fowler%E2%80%93Noll%E2%80%93Vo_hash_function
-/**output int */
+/**Simple hash, output int */
 export function fnv1a(str: string) {
   const FNV_OFFSET_BASIS = 2166136261;
   const FNV_PRIME = 16777619;

packages/duoyun-ui/src/lib/number.ts

@@ -181,6 +181,7 @@ export function adjustRange([min, max]: number[], stepCount: number, units?: num
   return [adjustedMin / scale, adjustedMax / scale];
 }
 
+/**Generate a pseudo -random function */
 export function pseudoRandom(seed: number) {
   const MULTIPLIER = 48271;
   const MODULUS = 2147483647;
@@ -193,7 +194,7 @@ export function pseudoRandom(seed: number) {
   };
 }
 
-/**output 0-1 */
+/**Random large integer normalization, output 0-1 */
 export function normalizeNumber(n: number) {
   return parseFloat(`0.${[...Math.abs(n).toString()].reverse().join('')}`);
 }

packages/duoyun-ui/src/lib/theme.ts

@@ -29,6 +29,7 @@ export const lightTheme = {
   borderColor: '#e1e1e1',
   disabledColor: '#eaeaea',
   maskAlpha: '0.2',
+  controlShadow: '0 1px 2px #0000000d',
 
   // same of light/dark
   // https://spectrum.adobe.com/page/color/#Semantic-colors