From 5842248030bafa9068f8d059dd49496b72acaeb6 Mon Sep 17 00:00:00 2001 From: 709922234 <709922234@qq.com> Date: Fri, 25 Oct 2024 21:07:29 +0800 Subject: [PATCH] Support highlight --- .vscode/gem.code-snippets | 31 - package.json | 10 +- .../docs/en/01-guide/30-customize.md | 5 +- .../docs/zh/01-guide/30-customize.md | 5 +- packages/duoyun-ui/package.json | 4 +- .../duoyun-ui/src/elements/action-text.ts | 11 +- packages/duoyun-ui/src/elements/alert.ts | 8 +- packages/duoyun-ui/src/elements/area-chart.ts | 9 +- packages/duoyun-ui/src/elements/avatar.ts | 26 +- packages/duoyun-ui/src/elements/badge.ts | 9 +- packages/duoyun-ui/src/elements/banner.ts | 8 +- packages/duoyun-ui/src/elements/bar-chart.ts | 8 +- packages/duoyun-ui/src/elements/base/chart.ts | 6 +- .../duoyun-ui/src/elements/base/loadable.ts | 15 +- .../duoyun-ui/src/elements/base/scroll.ts | 6 +- .../duoyun-ui/src/elements/base/visible.ts | 4 - .../duoyun-ui/src/elements/breadcrumbs.ts | 9 +- packages/duoyun-ui/src/elements/button.ts | 13 +- packages/duoyun-ui/src/elements/calendar.ts | 11 +- packages/duoyun-ui/src/elements/card.ts | 12 +- packages/duoyun-ui/src/elements/carousel.ts | 9 +- .../duoyun-ui/src/elements/cascader-picker.ts | 9 +- packages/duoyun-ui/src/elements/cascader.ts | 13 +- .../duoyun-ui/src/elements/chart-tooltip.ts | 9 +- packages/duoyun-ui/src/elements/chart-zoom.ts | 9 +- packages/duoyun-ui/src/elements/checkbox.ts | 17 +- packages/duoyun-ui/src/elements/coach-mark.ts | 17 +- packages/duoyun-ui/src/elements/code-block.ts | 9 +- packages/duoyun-ui/src/elements/collapse.ts | 16 +- .../duoyun-ui/src/elements/color-panel.ts | 11 +- .../duoyun-ui/src/elements/color-picker.ts | 9 +- .../duoyun-ui/src/elements/compartment.ts | 3 - .../duoyun-ui/src/elements/contextmenu.ts | 9 +- packages/duoyun-ui/src/elements/copy.ts | 9 +- packages/duoyun-ui/src/elements/date-panel.ts | 12 +- .../duoyun-ui/src/elements/date-picker.ts | 15 +- .../src/elements/date-range-panel.ts | 8 +- .../src/elements/date-range-picker.ts | 14 +- packages/duoyun-ui/src/elements/divider.ts | 10 +- .../duoyun-ui/src/elements/donut-chart.ts | 8 +- packages/duoyun-ui/src/elements/drawer.ts | 8 +- packages/duoyun-ui/src/elements/drop-area.ts | 9 +- packages/duoyun-ui/src/elements/empty.ts | 8 +- .../duoyun-ui/src/elements/file-picker.ts | 9 +- packages/duoyun-ui/src/elements/flow.ts | 16 +- packages/duoyun-ui/src/elements/form.ts | 35 +- packages/duoyun-ui/src/elements/gesture.ts | 3 - packages/duoyun-ui/src/elements/heading.ts | 9 +- packages/duoyun-ui/src/elements/help-text.ts | 9 +- packages/duoyun-ui/src/elements/icons.ts | 8 +- .../duoyun-ui/src/elements/image-preview.ts | 8 +- .../duoyun-ui/src/elements/input-capture.ts | 9 +- packages/duoyun-ui/src/elements/input.ts | 29 +- .../duoyun-ui/src/elements/keyboard-access.ts | 7 +- packages/duoyun-ui/src/elements/legend.ts | 9 +- packages/duoyun-ui/src/elements/line-chart.ts | 8 +- packages/duoyun-ui/src/elements/link.ts | 12 +- packages/duoyun-ui/src/elements/list.ts | 11 +- packages/duoyun-ui/src/elements/loading.ts | 8 +- packages/duoyun-ui/src/elements/map.ts | 15 +- packages/duoyun-ui/src/elements/meter.ts | 9 +- packages/duoyun-ui/src/elements/modal.ts | 16 +- packages/duoyun-ui/src/elements/more.ts | 14 +- packages/duoyun-ui/src/elements/options.ts | 10 +- .../duoyun-ui/src/elements/page-loadbar.ts | 8 +- packages/duoyun-ui/src/elements/pagination.ts | 11 +- packages/duoyun-ui/src/elements/paragraph.ts | 8 +- packages/duoyun-ui/src/elements/picker.ts | 18 +- .../duoyun-ui/src/elements/placeholder.ts | 14 +- packages/duoyun-ui/src/elements/popover.ts | 17 +- packages/duoyun-ui/src/elements/progress.ts | 3 - packages/duoyun-ui/src/elements/radio.ts | 20 +- packages/duoyun-ui/src/elements/rate.ts | 9 +- packages/duoyun-ui/src/elements/reflect.ts | 3 - packages/duoyun-ui/src/elements/result.ts | 8 +- packages/duoyun-ui/src/elements/route.ts | 6 - .../duoyun-ui/src/elements/scatter-chart.ts | 9 +- packages/duoyun-ui/src/elements/scroll-box.ts | 3 - packages/duoyun-ui/src/elements/segmented.ts | 9 +- packages/duoyun-ui/src/elements/select.ts | 15 +- .../duoyun-ui/src/elements/selection-box.ts | 12 +- .../duoyun-ui/src/elements/shortcut-record.ts | 12 +- .../duoyun-ui/src/elements/side-navigation.ts | 8 +- packages/duoyun-ui/src/elements/slider.ts | 9 +- packages/duoyun-ui/src/elements/sort-box.ts | 15 +- packages/duoyun-ui/src/elements/space.ts | 9 +- packages/duoyun-ui/src/elements/statistic.ts | 10 +- .../duoyun-ui/src/elements/status-light.ts | 8 +- packages/duoyun-ui/src/elements/switch.ts | 12 +- packages/duoyun-ui/src/elements/table.ts | 9 +- packages/duoyun-ui/src/elements/tabs.ts | 16 +- packages/duoyun-ui/src/elements/tag.ts | 11 +- packages/duoyun-ui/src/elements/text-mask.ts | 8 +- packages/duoyun-ui/src/elements/time-panel.ts | 11 +- .../duoyun-ui/src/elements/time-picker.ts | 9 +- packages/duoyun-ui/src/elements/timeline.ts | 9 +- packages/duoyun-ui/src/elements/title.ts | 3 - packages/duoyun-ui/src/elements/toast.ts | 9 +- packages/duoyun-ui/src/elements/tooltip.ts | 3 - packages/duoyun-ui/src/elements/tree.ts | 20 +- packages/duoyun-ui/src/elements/unsafe.ts | 3 - packages/duoyun-ui/src/elements/use.ts | 3 - packages/duoyun-ui/src/elements/wait.ts | 9 +- packages/duoyun-ui/src/lib/styles.ts | 11 +- packages/duoyun-ui/src/patterns/console.ts | 8 +- .../duoyun-ui/src/patterns/filter-form.ts | 8 +- packages/duoyun-ui/src/patterns/footer.ts | 10 +- packages/duoyun-ui/src/patterns/form.ts | 9 +- packages/duoyun-ui/src/patterns/nav.ts | 13 +- packages/duoyun-ui/src/patterns/table.ts | 8 +- packages/gem-book/docs/hello.ts | 6 +- packages/gem-book/src/element/elements/404.ts | 6 +- .../src/element/elements/edit-link.ts | 5 +- .../gem-book/src/element/elements/footer.ts | 8 +- .../gem-book/src/element/elements/homepage.ts | 8 +- .../gem-book/src/element/elements/loadbar.ts | 8 +- .../gem-book/src/element/elements/main.ts | 5 +- .../gem-book/src/element/elements/nav-logo.ts | 9 +- packages/gem-book/src/element/elements/nav.ts | 10 +- packages/gem-book/src/element/elements/pre.ts | 8 +- .../gem-book/src/element/elements/rel-link.ts | 5 +- .../src/element/elements/side-link.ts | 3 - .../gem-book/src/element/elements/sidebar.ts | 5 +- packages/gem-book/src/element/elements/toc.ts | 8 +- packages/gem-book/src/element/index.ts | 11 +- packages/gem-book/src/element/lib/renderer.ts | 12 +- packages/gem-book/src/plugins/api.ts | 5 +- packages/gem-book/src/plugins/code-group.ts | 6 +- packages/gem-book/src/plugins/comment.ts | 6 +- packages/gem-book/src/plugins/docsearch.ts | 5 +- packages/gem-book/src/plugins/example.ts | 7 +- packages/gem-book/src/plugins/media.ts | 6 +- packages/gem-book/src/plugins/raw.ts | 6 +- packages/gem-book/src/plugins/sandpack.ts | 5 +- packages/gem-book/src/website/index.ts | 4 +- packages/gem-devtools/src/elements/header.ts | 8 +- packages/gem-devtools/src/elements/section.ts | 9 +- .../gem-devtools/src/elements/statistics.ts | 3 - packages/gem-devtools/src/modules/panel.ts | 6 +- packages/gem-examples/src/benchmark/fps.ts | 8 +- packages/gem-examples/src/benchmark/index.ts | 5 +- .../gem-examples/src/life-cycle/children.ts | 11 - packages/gem-examples/src/life-cycle/index.ts | 5 +- packages/gem-examples/src/scope/index.ts | 10 +- packages/gem-examples/src/styled/index.ts | 6 +- packages/gem-examples/src/theme/index.ts | 7 +- .../001-guide/001-basic/006-styled-element.md | 4 +- .../en/001-guide/002-advance/003-theme.md | 4 +- packages/gem/docs/en/003-api/008-utils.md | 2 - .../004-blog/001-create-standard-element.md | 4 +- packages/gem/docs/en/004-blog/007-v2-intro.md | 4 +- packages/gem/docs/en/README.md | 5 +- packages/gem/docs/en/snippets/scoped-theme.md | 4 +- .../001-guide/001-basic/006-styled-element.md | 4 +- .../zh/001-guide/002-advance/003-theme.md | 4 +- packages/gem/docs/zh/003-api/008-utils.md | 2 - .../004-blog/001-create-standard-element.md | 4 +- packages/gem/docs/zh/004-blog/007-v2-intro.md | 4 +- packages/gem/docs/zh/README.md | 5 +- packages/gem/docs/zh/snippets/scoped-theme.md | 4 +- packages/gem/package.json | 2 +- packages/gem/src/elements/base/dialog.ts | 4 - packages/gem/src/elements/base/gesture.ts | 15 +- packages/gem/src/elements/base/link.ts | 22 +- packages/gem/src/elements/base/reflect.ts | 3 - packages/gem/src/elements/base/route.ts | 10 - packages/gem/src/elements/base/title.ts | 5 - packages/gem/src/elements/base/unsafe.ts | 5 - packages/gem/src/elements/base/use.ts | 8 +- packages/gem/src/lib/element.ts | 24 +- packages/gem/src/lib/utils.ts | 23 +- .../gem/src/test/gem-element/advance.test.ts | 5 +- .../gem/src/test/gem-element/basic.test.ts | 5 +- .../src/test/gem-element/decorators.test.ts | 5 +- packages/gem/src/test/utils.test.ts | 9 +- packages/vscode-gem-plugin/README.md | 5 + packages/vscode-gem-plugin/esbuild.js | 1 + packages/vscode-gem-plugin/package.json | 126 +- .../vscode-gem-plugin/snippets/snippets.json | 32 + packages/vscode-gem-plugin/src/cache.ts | 35 + packages/vscode-gem-plugin/src/decorators.ts | 58 + packages/vscode-gem-plugin/src/extension.ts | 45 +- .../vscode-gem-plugin/src/providers/css.ts | 112 + .../vscode-gem-plugin/src/providers/hover.ts | 111 + .../vscode-gem-plugin/src/providers/html.ts | 76 + .../vscode-gem-plugin/src/providers/style.ts | 53 + packages/vscode-gem-plugin/src/util.ts | 123 + .../syntaxes/es6.inline.css.json | 36 + .../syntaxes/es6.inline.html.json | 46 + .../syntaxes/es6.inline.less.json | 36 + .../syntaxes/es6.inline.scss.json | 36 + .../syntaxes/es6.inline.style.json | 36 + .../syntaxes/style.tmLanguage.json | 1232 +++ packages/vscode-gem-plugin/tsconfig.json | 2 - pnpm-lock.yaml | 7959 +++++++---------- 195 files changed, 5777 insertions(+), 5978 deletions(-) delete mode 100644 .vscode/gem.code-snippets create mode 100644 packages/vscode-gem-plugin/snippets/snippets.json create mode 100644 packages/vscode-gem-plugin/src/cache.ts create mode 100644 packages/vscode-gem-plugin/src/decorators.ts create mode 100644 packages/vscode-gem-plugin/src/providers/css.ts create mode 100644 packages/vscode-gem-plugin/src/providers/hover.ts create mode 100644 packages/vscode-gem-plugin/src/providers/html.ts create mode 100644 packages/vscode-gem-plugin/src/providers/style.ts create mode 100644 packages/vscode-gem-plugin/src/util.ts create mode 100644 packages/vscode-gem-plugin/syntaxes/es6.inline.css.json create mode 100644 packages/vscode-gem-plugin/syntaxes/es6.inline.html.json create mode 100644 packages/vscode-gem-plugin/syntaxes/es6.inline.less.json create mode 100644 packages/vscode-gem-plugin/syntaxes/es6.inline.scss.json create mode 100644 packages/vscode-gem-plugin/syntaxes/es6.inline.style.json create mode 100644 packages/vscode-gem-plugin/syntaxes/style.tmLanguage.json diff --git a/.vscode/gem.code-snippets b/.vscode/gem.code-snippets deleted file mode 100644 index bcf73fd0..00000000 --- a/.vscode/gem.code-snippets +++ /dev/null @@ -1,31 +0,0 @@ -{ - // Place your duoyun-fe workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and - // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope - // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is - // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: - // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. - // Placeholders with the same ids are connected. - // Example: - "Print to console": { - "scope": "typescript", - "prefix": "@custom", - "body": [ - "import { GemElement, html, adoptedStyle, customElement, createCSSSheet, css } from '@mantou/gem';", - "", - "const style = createCSSSheet(css``);", - "", - "/**", - " * @customElement ${1}-${2}", - " */", - "@customElement('${1:$WORKSPACE_NAME}-${2:$TM_FILENAME_BASE}')", - "@adoptedStyle(style)", - "export class ${3:${1/((^|-)(.))/${3:/upcase}/g}}${4:${2/((^|-)(.))/${3:/upcase}/g}}Element extends GemElement {", - " render = () => {", - " return html`${1}-${2}`;", - " };", - "}", - "" - ], - "description": "use gem custom element" - } -} diff --git a/package.json b/package.json index 2986a47c..f94e0c7a 100644 --- a/package.json +++ b/package.json @@ -4,10 +4,10 @@ "version": "1.6.5", "scripts": { "lint": "lerna exec --ignore @gemjs/config -- tsc --noEmit && eslint . --ext .ts,.js", - "test": "lerna exec --concurrency=1 --scope '{@mantou/gem,gem-book,duoyun-ui}' -- pnpm test", + "test": "lerna exec --concurrency=1 --scope \"{@mantou/gem,gem-book,duoyun-ui}\" -- pnpm test", "release": "lerna version", - "prepare:build": "pnpm -C packages/gem build && lerna exec --scope '{gem-analyzer,duoyun-ui,gem-book,gem-port}' -- pnpm build", - "prepare:link": "lerna exec --scope '{gem-book,@mantou/gem-port}' -- npm link", + "prepare:build": "pnpm -C packages/gem build && lerna exec --scope \"{gem-analyzer,duoyun-ui,gem-book,gem-port}\" -- pnpm build", + "prepare:link": "lerna exec --scope \"{gem-book,@mantou/gem-port}\" -- npm link", "prepare": "husky install && pnpm prepare:build && pnpm prepare:link" }, "devDependencies": { @@ -17,7 +17,7 @@ "@typescript-eslint/parser": "^6.13.1", "concurrently": "^8.2.2", "cross-env": "^7.0.3", - "esbuild": "^0.23.1", + "esbuild": "^0.24.0", "eslint": "^8.54.0", "eslint-config-prettier": "^9.0.0", "eslint-gitignore": "^0.1.0", @@ -36,7 +36,7 @@ "packageManager": "pnpm@9.10.0+sha512.73a29afa36a0d092ece5271de5177ecbf8318d454ecd701343131b8ebc0c1a91c487da46ab77c8e596d6acf1461e3594ced4becedf8921b074fbd8653ed7051c", "pnpm": { "overrides": { - "esbuild": "^0.23.1" + "esbuild": "^0.24.0" } } } diff --git a/packages/duoyun-ui/docs/en/01-guide/30-customize.md b/packages/duoyun-ui/docs/en/01-guide/30-customize.md index dd2a9a76..c419935d 100644 --- a/packages/duoyun-ui/docs/en/01-guide/30-customize.md +++ b/packages/duoyun-ui/docs/en/01-guide/30-customize.md @@ -5,7 +5,6 @@ DuoyunUI comes with themes, icons, texts, and can be used in the application: ```ts import { createCSSSheet, - css, adoptedStyle, customElement, GemElement, @@ -17,11 +16,11 @@ import { locale } from 'duoyun-ui/lib/locale'; import '@mantou/gem'; -const style = createCSSSheet(css` +const style = createCSSSheet` gem-use { color: ${theme.positiveColor}; } -`); +`; @customElement('my-ele') @adoptedStyle(style) diff --git a/packages/duoyun-ui/docs/zh/01-guide/30-customize.md b/packages/duoyun-ui/docs/zh/01-guide/30-customize.md index 64434da2..972a5cb5 100644 --- a/packages/duoyun-ui/docs/zh/01-guide/30-customize.md +++ b/packages/duoyun-ui/docs/zh/01-guide/30-customize.md @@ -5,7 +5,6 @@ DuoyunUI 自带主题、图标、文本，在应用中可以这样使用它们 ```ts import { createCSSSheet, - css, adoptedStyle, customElement, GemElement, @@ -17,11 +16,11 @@ import { locale } from 'duoyun-ui/lib/locale'; import '@mantou/gem'; -const style = createCSSSheet(css` +const style = createCSSSheet` gem-use { color: ${theme.positiveColor}; } -`); +`; @customElement('my-ele') @adoptedStyle(style) diff --git a/packages/duoyun-ui/package.json b/packages/duoyun-ui/package.json index 2de70cf4..db5f6113 100644 --- a/packages/duoyun-ui/package.json +++ b/packages/duoyun-ui/package.json @@ -35,11 +35,11 @@ "/locales/" ], "scripts": { - "docs": "GEM_BOOK_REPLACE=true gem-book docs", + "docs": "cross-env GEM_BOOK_REPLACE=true gem-book docs", "docs:remote": "gem-book docs", "build:docs": "gem-book docs --build", "build:components": "gem-port src/elements && gem-port src/patterns --svelte-ns=pat", - "build:dev": "MODE=dev nodemon -w ../gem-port/bin --exec gem-port src/elements", + "build:dev": "cross-env MODE=dev nodemon -w ../gem-port/bin --exec gem-port src/elements", "clean": "node -e \"fs.readdirSync('src').map(dir => require('rimraf').sync(dir))\"", "build": "pnpm clean && tsc -p tsconfig.build.json", "start": "pnpm build --watch", diff --git a/packages/duoyun-ui/src/elements/action-text.ts b/packages/duoyun-ui/src/elements/action-text.ts index 7a9daeab..90c917e6 100644 --- a/packages/duoyun-ui/src/elements/action-text.ts +++ b/packages/duoyun-ui/src/elements/action-text.ts @@ -1,6 +1,6 @@ import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; import { adoptedStyle, customElement, attribute, state, slot, aria, shadow, mounted } from '@mantou/gem/lib/decorators'; -import { addListener, css } from '@mantou/gem/lib/utils'; +import { addListener } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; import { theme, getSemanticColor } from '../lib/theme'; @@ -11,7 +11,7 @@ import './tooltip'; const elementTheme = createDecoratorTheme({ color: '', activeColor: '' }); -const style = createCSSSheet(css` +const style = createCSSSheet` :host { overflow: hidden; text-overflow: ellipsis; @@ -27,13 +27,8 @@ const style = createCSSSheet(css` :host(:where(:lang(zh), :lang(ja), :lang(kr))) { text-underline-offset: 0.125em; } -`); +`; -/** - * @customElement dy-action-text - * @attr color - * @attr tooltip - */ @customElement('dy-action-text') @adoptedStyle(style) @adoptedStyle(focusStyle) diff --git a/packages/duoyun-ui/src/elements/alert.ts b/packages/duoyun-ui/src/elements/alert.ts index 5348a933..8e61771d 100644 --- a/packages/duoyun-ui/src/elements/alert.ts +++ b/packages/duoyun-ui/src/elements/alert.ts @@ -1,7 +1,6 @@ // https://spectrum.adobe.com/page/in-line-alert/ import { adoptedStyle, customElement, attribute, property, slot, aria, shadow } from '@mantou/gem/lib/decorators'; import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; -import { css } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; import { theme, getSemanticColor } from '../lib/theme'; @@ -12,7 +11,7 @@ import './action-text'; const elementTheme = createDecoratorTheme({ color: '' }); -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: flex; flex-direction: column; @@ -43,13 +42,10 @@ const style = createCSSSheet(css` .footer { text-align: right; } -`); +`; type Status = 'positive' | 'notice' | 'negative' | 'informative' | 'default'; -/** - * @customElement dy-alert - */ @customElement('dy-alert') @adoptedStyle(style) @aria({ role: 'alert' }) diff --git a/packages/duoyun-ui/src/elements/area-chart.ts b/packages/duoyun-ui/src/elements/area-chart.ts index 948c5812..a865f20f 100644 --- a/packages/duoyun-ui/src/elements/area-chart.ts +++ b/packages/duoyun-ui/src/elements/area-chart.ts @@ -1,7 +1,7 @@ import { createCSSSheet, createState, html, svg } from '@mantou/gem/lib/element'; import type { Emitter } from '@mantou/gem/lib/decorators'; import { adoptedStyle, customElement, emitter, memo, mounted, property } from '@mantou/gem/lib/decorators'; -import { addListener, classMap, css } from '@mantou/gem/lib/utils'; +import { addListener, classMap } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; import { isNotNullish } from '../lib/types'; @@ -48,7 +48,7 @@ const elementTheme = createDecoratorTheme({ symbolStrokeWidth: 0, }); -const style = createCSSSheet(css` +const style = createCSSSheet` .hit-line { pointer-events: stroke; } @@ -90,11 +90,8 @@ const style = createCSSSheet(css` margin-inline-start: ${elementTheme.zoomLeft}; align-self: flex-start; } -`); +`; -/** - * @customElement dy-area-chart - */ @customElement('dy-area-chart') @adoptedStyle(style) export class DuoyunAreaChartElement extends DuoyunChartBaseElement { diff --git a/packages/duoyun-ui/src/elements/avatar.ts b/packages/duoyun-ui/src/elements/avatar.ts index d0ce9b6f..240e8fed 100644 --- a/packages/duoyun-ui/src/elements/avatar.ts +++ b/packages/duoyun-ui/src/elements/avatar.ts @@ -10,7 +10,7 @@ import { shadow, } from '@mantou/gem/lib/decorators'; import { createCSSSheet, GemElement, html } from '@mantou/gem/lib/element'; -import { css, exportPartsMap } from '@mantou/gem/lib/utils'; +import { exportPartsMap } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; import { theme } from '../lib/theme'; @@ -21,7 +21,7 @@ import './tooltip'; const elementTheme = createDecoratorTheme({ color: '' }); -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { cursor: default; display: inline-block; @@ -76,19 +76,8 @@ const style = createCSSSheet(css` transform: translate(50%, -50%); background-color: ${elementTheme.color}; } -`); - -/** - * @customElement dy-avatar - * @attr src - * @attr alt - * @attr status - * @attr background - * @attr tooltip - * @attr size - * @attr square - * @attr crossorigin - */ +`; + @customElement('dy-avatar') @adoptedStyle(style) @shadow() @@ -121,7 +110,7 @@ export class DuoyunAvatarElement extends GemElement { }; } -const groupStyle = createCSSSheet(css` +const groupStyle = createCSSSheet` :scope:where(:not([hidden])) { display: flex; } @@ -146,7 +135,7 @@ const groupStyle = createCSSSheet(css` .item:hover + .item:last-child { --m: var(--m-left); } -`); +`; export type AvatarItem = { src?: string; @@ -157,9 +146,6 @@ export type AvatarItem = { onClick?: (evt: Event) => void; }; -/** - * @customElement dy-avatar-group - */ @customElement('dy-avatar-group') @adoptedStyle(groupStyle) @aria({ role: 'list' }) diff --git a/packages/duoyun-ui/src/elements/badge.ts b/packages/duoyun-ui/src/elements/badge.ts index 3aea7f4c..855e5962 100644 --- a/packages/duoyun-ui/src/elements/badge.ts +++ b/packages/duoyun-ui/src/elements/badge.ts @@ -12,7 +12,7 @@ import { mounted, } from '@mantou/gem/lib/decorators'; import { createCSSSheet, createRef, GemElement, html } from '@mantou/gem/lib/element'; -import { classMap, css } from '@mantou/gem/lib/utils'; +import { classMap } from '@mantou/gem/lib/utils'; import { contentsContainer } from '../lib/styles'; import { getSemanticColor, theme } from '../lib/theme'; @@ -20,7 +20,7 @@ import type { StringList } from '../lib/types'; import './use'; -const style = createCSSSheet(css` +const style = createCSSSheet` .badge { display: flex; align-items: center; @@ -74,11 +74,8 @@ const style = createCSSSheet(css` right: 0; } } -`); +`; -/** - * @customElement dy-badge - */ @customElement('dy-badge') @adoptedStyle(style) @adoptedStyle(contentsContainer) diff --git a/packages/duoyun-ui/src/elements/banner.ts b/packages/duoyun-ui/src/elements/banner.ts index 037b23ae..057d4624 100644 --- a/packages/duoyun-ui/src/elements/banner.ts +++ b/packages/duoyun-ui/src/elements/banner.ts @@ -12,7 +12,6 @@ import { aria, } from '@mantou/gem/lib/decorators'; import { createCSSSheet, GemElement, html } from '@mantou/gem/lib/element'; -import { css } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; import { icons } from '../lib/icons'; @@ -21,7 +20,7 @@ import { commonHandle } from '../lib/hotkeys'; import './use'; import './divider'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: flex; align-items: flex-start; @@ -75,13 +74,10 @@ const style = createCSSSheet(css` .close:hover { opacity: 1; } -`); +`; type Status = 'positive' | 'notice' | 'negative' | 'default'; -/** - * @customElement dy-banner - */ @customElement('dy-banner') @adoptedStyle(style) @shadow({ delegatesFocus: true }) diff --git a/packages/duoyun-ui/src/elements/bar-chart.ts b/packages/duoyun-ui/src/elements/bar-chart.ts index 74fd1bb9..8b8aa079 100644 --- a/packages/duoyun-ui/src/elements/bar-chart.ts +++ b/packages/duoyun-ui/src/elements/bar-chart.ts @@ -1,6 +1,5 @@ import { customElement, property, adoptedStyle, memo } from '@mantou/gem/lib/decorators'; import { createCSSSheet, html, svg } from '@mantou/gem/lib/element'; -import { css } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; @@ -13,7 +12,7 @@ export interface Sequence { values: (number | null)[]; } -const style = createCSSSheet(css` +const style = createCSSSheet` .col:hover .rect { fill: ${theme.hoverBackgroundColor}; opacity: 0.2; @@ -21,11 +20,8 @@ const style = createCSSSheet(css` .bar:hover { filter: brightness(1.05); } -`); +`; -/** - * @customElement dy-bar-chart - */ @customElement('dy-bar-chart') @adoptedStyle(style) export class DuoyunBarChartElement extends DuoyunChartBaseElement { diff --git a/packages/duoyun-ui/src/elements/base/chart.ts b/packages/duoyun-ui/src/elements/base/chart.ts index c81651e2..80fb1141 100644 --- a/packages/duoyun-ui/src/elements/base/chart.ts +++ b/packages/duoyun-ui/src/elements/base/chart.ts @@ -2,7 +2,7 @@ import type { Emitter } from '@mantou/gem/lib/decorators'; import { adoptedStyle, emitter, property, state, part, aria, shadow, memo } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; import { createCSSSheet, html, svg } from '@mantou/gem/lib/element'; -import { css, randomStr } from '@mantou/gem/lib/utils'; +import { randomStr } from '@mantou/gem/lib/utils'; import { theme } from '../../lib/theme'; import type { Data, DataItem } from '../chart-tooltip'; @@ -31,7 +31,7 @@ export interface MarkLine { color?: string; } -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: flex; flex-direction: column; @@ -52,7 +52,7 @@ const style = createCSSSheet(css` text { cursor: default; } -`); +`; @adoptedStyle(style) @aria({ role: 'img' }) diff --git a/packages/duoyun-ui/src/elements/base/loadable.ts b/packages/duoyun-ui/src/elements/base/loadable.ts index fdf3e2d1..a6d406c1 100644 --- a/packages/duoyun-ui/src/elements/base/loadable.ts +++ b/packages/duoyun-ui/src/elements/base/loadable.ts @@ -1,12 +1,11 @@ import { adoptedStyle, customElement, boolattribute, shadow, effect } from '@mantou/gem/lib/decorators'; import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; -import { css } from '@mantou/gem/lib/utils'; import { theme } from '../../lib/theme'; import '../loading'; -const maskStyle = createCSSSheet(css` +const maskStyle = createCSSSheet` :host(:where(:not([hidden]))) { position: absolute; z-index: ${theme.popupZIndex}; @@ -21,11 +20,8 @@ const maskStyle = createCSSSheet(css` inset: 0; background-color: rgba(0, 0, 0, calc(${theme.maskAlpha} / 2)); } -`); +`; -/** - * @customElement dy-loadable-mask - */ @customElement('dy-loadable-mask') @adoptedStyle(maskStyle) @shadow() @@ -38,18 +34,15 @@ export class DuoyunLoadableMaskElement extends GemElement { }; } -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: block; position: relative; z-index: 1; overflow: hidden; } -`); +`; -/** - * @attr loading - */ @adoptedStyle(style) @shadow() export class DuoyunLoadableBaseElement extends GemElement { diff --git a/packages/duoyun-ui/src/elements/base/scroll.ts b/packages/duoyun-ui/src/elements/base/scroll.ts index 65f00199..bd644820 100644 --- a/packages/duoyun-ui/src/elements/base/scroll.ts +++ b/packages/duoyun-ui/src/elements/base/scroll.ts @@ -1,12 +1,12 @@ import { adoptedStyle, effect, mounted, shadow, state } from '@mantou/gem/lib/decorators'; import { createCSSSheet } from '@mantou/gem/lib/element'; -import { addListener, css } from '@mantou/gem/lib/utils'; +import { addListener } from '@mantou/gem/lib/utils'; import { DuoyunResizeBaseElement } from './resize'; const PIXEL_DEVIATION = 0.1; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: block; overflow: auto; @@ -42,7 +42,7 @@ const style = createCSSSheet(css` --m: linear-gradient(to var(--mask-dir), #fff0, #000 var(--mask-start), #000 var(--mask-end), #fff0 100%); mask-image: var(--m); } -`); +`; @adoptedStyle(style) @shadow() diff --git a/packages/duoyun-ui/src/elements/base/visible.ts b/packages/duoyun-ui/src/elements/base/visible.ts index 0a603fc5..23033d9f 100644 --- a/packages/duoyun-ui/src/elements/base/visible.ts +++ b/packages/duoyun-ui/src/elements/base/visible.ts @@ -32,10 +32,6 @@ export function visibilityObserver(ele: VisibleBaseElement) { return () => io.disconnect(); } -/** - * @fires show - * @fires hide - */ export class DuoyunVisibleBaseElement extends GemElement implements VisibleBaseElement { @emitter show: Emitter; @emitter hide: Emitter; diff --git a/packages/duoyun-ui/src/elements/breadcrumbs.ts b/packages/duoyun-ui/src/elements/breadcrumbs.ts index 8dbb60dd..fa026bdf 100644 --- a/packages/duoyun-ui/src/elements/breadcrumbs.ts +++ b/packages/duoyun-ui/src/elements/breadcrumbs.ts @@ -1,7 +1,7 @@ // https://spectrum.adobe.com/page/breadcrumbs/ import { adoptedStyle, customElement, property, boolattribute, part, aria, shadow } from '@mantou/gem/lib/decorators'; import { createCSSSheet, GemElement, html } from '@mantou/gem/lib/element'; -import { css, classMap } from '@mantou/gem/lib/utils'; +import { classMap } from '@mantou/gem/lib/utils'; import { icons } from '../lib/icons'; import { theme } from '../lib/theme'; @@ -11,7 +11,7 @@ import './use'; import './tooltip'; import './action-text'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: flex; align-items: center; @@ -41,7 +41,7 @@ const style = createCSSSheet(css` color: ${theme.primaryColor}; font-weight: bold; } -`); +`; export type BreadcrumbsItem = { title?: string; @@ -50,9 +50,6 @@ export type BreadcrumbsItem = { handle?: () => void; }; -/** - * @customElement dy-breadcrumbs - */ @customElement('dy-breadcrumbs') @adoptedStyle(style) @aria({ ariaLabel: 'breadcrumbs' }) diff --git a/packages/duoyun-ui/src/elements/button.ts b/packages/duoyun-ui/src/elements/button.ts index af00f0fd..508e5ed6 100644 --- a/packages/duoyun-ui/src/elements/button.ts +++ b/packages/duoyun-ui/src/elements/button.ts @@ -13,7 +13,7 @@ import { } from '@mantou/gem/lib/decorators'; import { createCSSSheet, GemElement, html, createRef } from '@mantou/gem/lib/element'; import { history } from '@mantou/gem/lib/history'; -import { addListener, classMap, css, QueryString } from '@mantou/gem/lib/utils'; +import { addListener, classMap, QueryString } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; import { theme, getSemanticColor } from '../lib/theme'; @@ -32,7 +32,7 @@ import './use'; const elementTheme = createDecoratorTheme({ bg: '', color: '' }); -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: inline-flex; align-items: stretch; @@ -123,15 +123,8 @@ const style = createCSSSheet(css` :host([disabled]) ::after { content: none; } -`); +`; -/** - * @customElement dy-button - * @attr type - * @attr color - * @attr small - * @attr disabled - */ @customElement('dy-button') @adoptedStyle(style) @adoptedStyle(focusStyle) diff --git a/packages/duoyun-ui/src/elements/calendar.ts b/packages/duoyun-ui/src/elements/calendar.ts index 5f657a0d..7a163e5b 100644 --- a/packages/duoyun-ui/src/elements/calendar.ts +++ b/packages/duoyun-ui/src/elements/calendar.ts @@ -11,7 +11,7 @@ import { } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; import { createCSSSheet, GemElement, html } from '@mantou/gem/lib/element'; -import { css, classMap, partMap } from '@mantou/gem/lib/utils'; +import { classMap, partMap } from '@mantou/gem/lib/utils'; import { isNotNullish } from '../lib/types'; import { Time } from '../lib/time'; @@ -19,7 +19,7 @@ import { theme } from '../lib/theme'; import { commonHandle } from '../lib/hotkeys'; import { focusStyle } from '../lib/styles'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { cursor: default; font-size: 0.875em; @@ -99,7 +99,7 @@ const style = createCSSSheet(css` border-radius: 0; border-color: transparent; } -`); +`; interface Day { date: Time; @@ -107,11 +107,6 @@ interface Day { isToday?: boolean; } -/** - * @customElement dy-calendar - * @attr borderless - * @attr today - */ @customElement('dy-calendar') @adoptedStyle(style) @adoptedStyle(focusStyle) diff --git a/packages/duoyun-ui/src/elements/card.ts b/packages/duoyun-ui/src/elements/card.ts index 60dac976..ece0205e 100644 --- a/packages/duoyun-ui/src/elements/card.ts +++ b/packages/duoyun-ui/src/elements/card.ts @@ -1,7 +1,6 @@ // https://spectrum.adobe.com/page/cards/ import { adoptedStyle, customElement, attribute, property, part, slot, shadow, aria } from '@mantou/gem/lib/decorators'; import { createCSSSheet, html } from '@mantou/gem/lib/element'; -import { css } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; import { icons } from '../lib/icons'; @@ -15,7 +14,7 @@ import { ContextMenu } from './contextmenu'; import './use'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: flex; flex-direction: column; @@ -87,17 +86,10 @@ const style = createCSSSheet(css` justify-content: flex-end; gap: 1em; } -`); +`; export type ActionItem = Omit & { handle: (rest: HTMLElement) => void | Promise }; -/** - * @customElement dy-card - * @attr header - * @attr detail - * @attr avatar - * @attr preview - */ @customElement('dy-card') @adoptedStyle(style) @adoptedStyle(focusStyle) diff --git a/packages/duoyun-ui/src/elements/carousel.ts b/packages/duoyun-ui/src/elements/carousel.ts index 2794a47d..f9d59eb7 100644 --- a/packages/duoyun-ui/src/elements/carousel.ts +++ b/packages/duoyun-ui/src/elements/carousel.ts @@ -14,7 +14,7 @@ import { mounted, effect, } from '@mantou/gem/lib/decorators'; -import { css, styleMap, classMap, addListener } from '@mantou/gem/lib/utils'; +import { styleMap, classMap, addListener } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; import { theme } from '../lib/theme'; @@ -30,7 +30,7 @@ import './more'; const elementTheme = createDecoratorTheme({ bgImg: '' }); -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: block; width: 100%; @@ -133,7 +133,7 @@ const style = createCSSSheet(css` width: 1.5em; opacity: 1; } -`); +`; export type CarouselItem = { img: string; @@ -153,9 +153,6 @@ enum Direction { Right, } -/** - * @customElement dy-carousel - */ @customElement('dy-carousel') @adoptedStyle(style) @adoptedStyle(focusStyle) diff --git a/packages/duoyun-ui/src/elements/cascader-picker.ts b/packages/duoyun-ui/src/elements/cascader-picker.ts index 8809a468..8d2c9b04 100644 --- a/packages/duoyun-ui/src/elements/cascader-picker.ts +++ b/packages/duoyun-ui/src/elements/cascader-picker.ts @@ -14,7 +14,7 @@ import { memo, } from '@mantou/gem/lib/decorators'; import { createCSSSheet, GemElement, html } from '@mantou/gem/lib/element'; -import { addListener, css } from '@mantou/gem/lib/utils'; +import { addListener } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; import { icons } from '../lib/icons'; @@ -34,7 +34,7 @@ import './cascader'; import './tag'; import './scroll-box'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host { width: 15em; white-space: nowrap; @@ -57,11 +57,8 @@ const style = createCSSSheet(css` dy-tag { border-radius: ${theme.smallRound}; } -`); +`; -/** - * @customElement dy-cascader-picker - */ @customElement('dy-cascader-picker') @adoptedStyle(style) @adoptedStyle(pickerStyle) diff --git a/packages/duoyun-ui/src/elements/cascader.ts b/packages/duoyun-ui/src/elements/cascader.ts index b66bcac1..69661ba8 100644 --- a/packages/duoyun-ui/src/elements/cascader.ts +++ b/packages/duoyun-ui/src/elements/cascader.ts @@ -12,7 +12,7 @@ import { } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; import { createCSSSheet, createState, GemElement, html } from '@mantou/gem/lib/element'; -import { css, styleMap, classMap } from '@mantou/gem/lib/utils'; +import { styleMap, classMap } from '@mantou/gem/lib/utils'; import { icons } from '../lib/icons'; import { getCascaderDeep, readProp } from '../lib/utils'; @@ -23,7 +23,7 @@ import { locale } from '../lib/locale'; import './use'; import './checkbox'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: flex; align-items: stretch; @@ -68,7 +68,7 @@ const style = createCSSSheet(css` .right { width: 1.2em; } -`); +`; export type Option = { label: string | number; @@ -101,13 +101,6 @@ enum CheckboxStatus { Indeterminate, } -/** - * @customElement dy-cascader - * @attr fit - * @attr multiple - * @fires change - * @fires expand - */ @customElement('dy-cascader') @adoptedStyle(style) @shadow() diff --git a/packages/duoyun-ui/src/elements/chart-tooltip.ts b/packages/duoyun-ui/src/elements/chart-tooltip.ts index d0551e6c..c95560c8 100644 --- a/packages/duoyun-ui/src/elements/chart-tooltip.ts +++ b/packages/duoyun-ui/src/elements/chart-tooltip.ts @@ -1,7 +1,7 @@ import { connectStore, adoptedStyle, customElement, shadow, effect } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; import { createCSSSheet, GemElement, html } from '@mantou/gem/lib/element'; -import { css, styleMap, classMap } from '@mantou/gem/lib/utils'; +import { styleMap, classMap } from '@mantou/gem/lib/utils'; import { createStore } from '@mantou/gem/lib/store'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; @@ -9,7 +9,7 @@ import { theme } from '../lib/theme'; const elementTheme = createDecoratorTheme({ top: '', left: '', width: '' }); -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { position: fixed; z-index: ${theme.popupZIndex}; @@ -63,7 +63,7 @@ const style = createCSSSheet(css` .value { white-space: nowrap; } -`); +`; export type DataItem = { label: string | string[]; @@ -95,9 +95,6 @@ const store = createStore({ debug: false, }); -/** - * @customElement dy-chart-tooltip - */ @customElement('dy-chart-tooltip') @adoptedStyle(style) @connectStore(store) diff --git a/packages/duoyun-ui/src/elements/chart-zoom.ts b/packages/duoyun-ui/src/elements/chart-zoom.ts index 2b7e2100..b0b7badc 100644 --- a/packages/duoyun-ui/src/elements/chart-zoom.ts +++ b/packages/duoyun-ui/src/elements/chart-zoom.ts @@ -1,7 +1,7 @@ import type { Emitter } from '@mantou/gem/lib/decorators'; import { adoptedStyle, customElement, emitter, mounted, property, shadow } from '@mantou/gem/lib/decorators'; import { createCSSSheet, createState, GemElement, html } from '@mantou/gem/lib/element'; -import { css, styleMap, classMap, addListener } from '@mantou/gem/lib/utils'; +import { styleMap, classMap, addListener } from '@mantou/gem/lib/utils'; import { clamp } from '../lib/number'; import { theme } from '../lib/theme'; @@ -11,7 +11,7 @@ import type { PanEventDetail } from './gesture'; import './gesture'; import './area-chart'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { position: relative; display: block; @@ -70,11 +70,8 @@ const style = createCSSSheet(css` right: 0; transform: translate(50%, -50%); } -`); +`; -/** - * @customElement dy-chart-zoom - */ @customElement('dy-chart-zoom') @adoptedStyle(style) @shadow() diff --git a/packages/duoyun-ui/src/elements/checkbox.ts b/packages/duoyun-ui/src/elements/checkbox.ts index c1fa8208..8ee0f4f6 100644 --- a/packages/duoyun-ui/src/elements/checkbox.ts +++ b/packages/duoyun-ui/src/elements/checkbox.ts @@ -13,7 +13,7 @@ import { memo, } from '@mantou/gem/lib/decorators'; import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; -import { addListener, css } from '@mantou/gem/lib/utils'; +import { addListener } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; import { icons } from '../lib/icons'; @@ -25,7 +25,7 @@ import { groupStyle } from './radio'; import './use'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { cursor: default; display: inline-flex; @@ -65,15 +65,8 @@ const style = createCSSSheet(css` padding: 2px; background-color: ${theme.primaryColor}; } -`); +`; -/** - * @customElement dy-checkbox - * @attr checked - * @attr indeterminate - * @attr value - * @attr disabled - */ @customElement('dy-checkbox') @adoptedStyle(style) @adoptedStyle(focusStyle) @@ -112,10 +105,6 @@ export class DuoyunCheckboxElement extends GemElement { }; } -/** - * @customElement dy-checkbox-group - * @attr disabled - */ @customElement('dy-checkbox-group') @adoptedStyle(groupStyle) @aria({ role: 'group' }) diff --git a/packages/duoyun-ui/src/elements/coach-mark.ts b/packages/duoyun-ui/src/elements/coach-mark.ts index 07bd52fd..5ba90e87 100644 --- a/packages/duoyun-ui/src/elements/coach-mark.ts +++ b/packages/duoyun-ui/src/elements/coach-mark.ts @@ -10,7 +10,7 @@ import { mounted, } from '@mantou/gem/lib/decorators'; import { html, createCSSSheet } from '@mantou/gem/lib/element'; -import { addListener, css } from '@mantou/gem/lib/utils'; +import { addListener } from '@mantou/gem/lib/utils'; import { createStore } from '@mantou/gem/lib/store'; import { splice } from '@mantou/gem/helper/i18n'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; @@ -85,7 +85,7 @@ async function nextTour() { const elementTheme = createDecoratorTheme({ color: '' }); -const style = createCSSSheet(css` +const style = createCSSSheet` :host { position: absolute; left: 50%; @@ -131,17 +131,8 @@ const style = createCSSSheet(css` transform: scale(1); } } -`); - -/** - * parent element must is relative position - * - * @customElement dy-coach-mark - * @attr index - * @attr width - * @attr size - * @attr color - */ +`; + @customElement('dy-coach-mark') @adoptedStyle(style) @connectStore(store) diff --git a/packages/duoyun-ui/src/elements/code-block.ts b/packages/duoyun-ui/src/elements/code-block.ts index 8315efa2..421cb4fc 100644 --- a/packages/duoyun-ui/src/elements/code-block.ts +++ b/packages/duoyun-ui/src/elements/code-block.ts @@ -1,7 +1,7 @@ // https://spectrum.adobe.com/page/code/ import { adoptedStyle, customElement, attribute, shadow, mounted, effect } from '@mantou/gem/lib/decorators'; import { createCSSSheet, createRef, html } from '@mantou/gem/lib/element'; -import { css, styleMap } from '@mantou/gem/lib/utils'; +import { styleMap } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; @@ -206,7 +206,7 @@ const langAliases: Record = { const lineHeight = 1.5; const padding = 1; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { position: relative; display: block; @@ -321,11 +321,8 @@ const style = createCSSSheet(css` display: none; } } -`); +`; -/** - * @customElement dy-code-block - */ @customElement('dy-code-block') @adoptedStyle(style) @shadow() diff --git a/packages/duoyun-ui/src/elements/collapse.ts b/packages/duoyun-ui/src/elements/collapse.ts index 55b0b478..ab9ab445 100644 --- a/packages/duoyun-ui/src/elements/collapse.ts +++ b/packages/duoyun-ui/src/elements/collapse.ts @@ -16,7 +16,7 @@ import { } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; import { createCSSSheet, GemElement, html, createState, createRef } from '@mantou/gem/lib/element'; -import { css, classMap, exportPartsMap } from '@mantou/gem/lib/utils'; +import { classMap, exportPartsMap } from '@mantou/gem/lib/utils'; import { icons } from '../lib/icons'; import { theme } from '../lib/theme'; @@ -26,7 +26,7 @@ import { commonAnimationOptions } from '../lib/animations'; import './use'; -const panelStyle = createCSSSheet(css` +const panelStyle = createCSSSheet` :host(:where(:not([hidden]))) { display: block; border-block-start: 1px solid ${theme.borderColor}; @@ -65,11 +65,8 @@ const panelStyle = createCSSSheet(css` padding-block: 1em; border-width: 1px; } -`); +`; -/** - * @customElement dy-collapse-panel - */ @customElement('dy-collapse-panel') @adoptedStyle(panelStyle) @adoptedStyle(focusStyle) @@ -142,7 +139,7 @@ export class DuoyunCollapsePanelElement extends GemElement { }; } -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: block; overflow: hidden; @@ -153,16 +150,13 @@ const style = createCSSSheet(css` :host dy-collapse-panel:first-child { border-block-start: none; } -`); +`; type CollapseItem = { summary: string | TemplateResult; detail: string | TemplateResult; }; -/** - * @customElement dy-collapse - */ @customElement('dy-collapse') @adoptedStyle(style) @shadow({ delegatesFocus: true }) diff --git a/packages/duoyun-ui/src/elements/color-panel.ts b/packages/duoyun-ui/src/elements/color-panel.ts index 1a8865c3..71d86176 100644 --- a/packages/duoyun-ui/src/elements/color-panel.ts +++ b/packages/duoyun-ui/src/elements/color-panel.ts @@ -11,7 +11,7 @@ import { memo, } from '@mantou/gem/lib/decorators'; import { createCSSSheet, createState, GemElement, html } from '@mantou/gem/lib/element'; -import { css, styleMap, classMap } from '@mantou/gem/lib/utils'; +import { styleMap, classMap } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; import type { HexColor } from '../lib/color'; @@ -39,7 +39,7 @@ import './select'; const elementTheme = createDecoratorTheme({ h: 0, s: 0, l: 0, a: 0 }); -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: flex; flex-direction: column; @@ -152,17 +152,12 @@ const style = createCSSSheet(css` .colorize:hover { background: ${theme.lightBackgroundColor}; } -`); +`; const modes = ['Hex', 'RGB', 'HSL'] as const; type Mode = (typeof modes)[number]; -/** - * @customElement dy-color-panel - * @attr value - * @attr alpha - */ @customElement('dy-color-panel') @adoptedStyle(style) @aria({ role: 'widget' }) diff --git a/packages/duoyun-ui/src/elements/color-picker.ts b/packages/duoyun-ui/src/elements/color-picker.ts index 959a26bb..8803e53c 100644 --- a/packages/duoyun-ui/src/elements/color-picker.ts +++ b/packages/duoyun-ui/src/elements/color-picker.ts @@ -9,7 +9,7 @@ import { shadow, } from '@mantou/gem/lib/decorators'; import { createCSSSheet, createRef, GemElement, html } from '@mantou/gem/lib/element'; -import { css, styleMap } from '@mantou/gem/lib/utils'; +import { styleMap } from '@mantou/gem/lib/utils'; import type { HexColor } from '../lib/color'; import { theme } from '../lib/theme'; @@ -21,7 +21,7 @@ import type { BasePickerElement } from './picker'; import './popover'; import './color-panel'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { cursor: pointer; display: inline-flex; @@ -54,11 +54,8 @@ const style = createCSSSheet(css` height: 100%; box-shadow: inset 0 0 0 1px #0002; } -`); +`; -/** - * @customElement dy-color-picker - */ @customElement('dy-color-picker') @adoptedStyle(style) @adoptedStyle(focusStyle) diff --git a/packages/duoyun-ui/src/elements/compartment.ts b/packages/duoyun-ui/src/elements/compartment.ts index 4982a29e..7cfde04c 100644 --- a/packages/duoyun-ui/src/elements/compartment.ts +++ b/packages/duoyun-ui/src/elements/compartment.ts @@ -4,9 +4,6 @@ import { GemElement, html } from '@mantou/gem/lib/element'; import { contentsContainer } from '../lib/styles'; -/** - * @customElement dy-compartment - */ @customElement('dy-compartment') @adoptedStyle(contentsContainer) @shadow() diff --git a/packages/duoyun-ui/src/elements/contextmenu.ts b/packages/duoyun-ui/src/elements/contextmenu.ts index 463aeeda..53fe7cad 100644 --- a/packages/duoyun-ui/src/elements/contextmenu.ts +++ b/packages/duoyun-ui/src/elements/contextmenu.ts @@ -1,7 +1,7 @@ import { connectStore, adoptedStyle, customElement, shadow, effect, mounted } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; import { createCSSSheet, html, GemElement, createRef } from '@mantou/gem/lib/element'; -import { css, styleMap, classMap } from '@mantou/gem/lib/utils'; +import { styleMap, classMap } from '@mantou/gem/lib/utils'; import { createStore } from '@mantou/gem/lib/store'; import { icons } from '../lib/icons'; @@ -80,7 +80,7 @@ function getMenuObject(menuOrMenuObject: MenuOrMenuObject) { let closeResolve: (value?: any) => void; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: block; position: fixed; @@ -109,11 +109,8 @@ const style = createCSSSheet(css` box-shadow: 0 7px 14px rgba(0, 0, 0, calc(${theme.maskAlpha} - 0.1)); scrollbar-width: none; } -`); +`; -/** - * @customElement dy-contextmenu - */ @customElement('dy-contextmenu') @connectStore(contextmenuStore) @adoptedStyle(style) diff --git a/packages/duoyun-ui/src/elements/copy.ts b/packages/duoyun-ui/src/elements/copy.ts index 67c91f61..c5b478cc 100644 --- a/packages/duoyun-ui/src/elements/copy.ts +++ b/packages/duoyun-ui/src/elements/copy.ts @@ -10,7 +10,7 @@ import { shadow, } from '@mantou/gem/lib/decorators'; import { createCSSSheet, createState, GemElement, html } from '@mantou/gem/lib/element'; -import { css, classMap } from '@mantou/gem/lib/utils'; +import { classMap } from '@mantou/gem/lib/utils'; import { icons } from '../lib/icons'; import { theme } from '../lib/theme'; @@ -21,7 +21,7 @@ import { focusStyle } from '../lib/styles'; import './use'; import '../elements/tooltip'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { position: relative; display: flex; @@ -77,13 +77,10 @@ const style = createCSSSheet(css` text-overflow: ellipsis; white-space: nowrap; } -`); +`; type Status = 'none' | 'success' | 'fail'; -/** - * @customElement dy-copy - */ @customElement('dy-copy') @adoptedStyle(style) @adoptedStyle(focusStyle) diff --git a/packages/duoyun-ui/src/elements/date-panel.ts b/packages/duoyun-ui/src/elements/date-panel.ts index 00b32a40..945e175b 100644 --- a/packages/duoyun-ui/src/elements/date-panel.ts +++ b/packages/duoyun-ui/src/elements/date-panel.ts @@ -14,7 +14,7 @@ import { effect, } from '@mantou/gem/lib/decorators'; import { createCSSSheet, createState, GemElement, html } from '@mantou/gem/lib/element'; -import { css, classMap, exportPartsMap } from '@mantou/gem/lib/utils'; +import { classMap, exportPartsMap } from '@mantou/gem/lib/utils'; import { isNotNullish } from '../lib/types'; import { theme } from '../lib/theme'; @@ -30,7 +30,7 @@ import './divider'; import './action-text'; import './time-panel'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { font-size: 0.875em; display: flex; @@ -125,18 +125,12 @@ const style = createCSSSheet(css` height: 0; flex-grow: 1; } -`); +`; const modes = ['day', 'month', 'year'] as const; type Mode = (typeof modes)[number]; -/** - * @customElement dy-date-panel - * @attr time - * @fires change - * @fires datehover - */ @customElement('dy-date-panel') @adoptedStyle(style) @adoptedStyle(focusStyle) diff --git a/packages/duoyun-ui/src/elements/date-picker.ts b/packages/duoyun-ui/src/elements/date-picker.ts index 29847bdb..51c836a4 100644 --- a/packages/duoyun-ui/src/elements/date-picker.ts +++ b/packages/duoyun-ui/src/elements/date-picker.ts @@ -14,7 +14,7 @@ import { mounted, } from '@mantou/gem/lib/decorators'; import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; -import { css, classMap, addListener } from '@mantou/gem/lib/utils'; +import { classMap, addListener } from '@mantou/gem/lib/utils'; import { Time } from '../lib/time'; import { theme } from '../lib/theme'; @@ -34,7 +34,7 @@ import './use'; import './date-panel'; import './button'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host { width: 15em; } @@ -57,17 +57,8 @@ const style = createCSSSheet(css` :host(:not([disabled])) .clearable:hover .close { display: inline-flex; } -`); +`; -/** - * @customElement dy-date-picker - * @attr placeholder - * @attr time - * @attr clearable - * @attr disabled - * @fires change - * @fires clear - */ @customElement('dy-date-picker') @adoptedStyle(pickerStyle) @adoptedStyle(style) diff --git a/packages/duoyun-ui/src/elements/date-range-panel.ts b/packages/duoyun-ui/src/elements/date-range-panel.ts index 413de1de..ba97d9aa 100644 --- a/packages/duoyun-ui/src/elements/date-range-panel.ts +++ b/packages/duoyun-ui/src/elements/date-range-panel.ts @@ -10,7 +10,6 @@ import { memo, } from '@mantou/gem/lib/decorators'; import { GemElement, html, createCSSSheet, createState } from '@mantou/gem/lib/element'; -import { css } from '@mantou/gem/lib/utils'; import { Time, parseNarrowRelativeTime, parseNarrowTimeRange } from '../lib/time'; import { theme } from '../lib/theme'; @@ -23,7 +22,7 @@ import './divider'; export type DateRangeValue = string | number[]; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: flex; align-items: flex-start; @@ -40,7 +39,7 @@ const style = createCSSSheet(css` color: ${theme.lightBackgroundColor}; margin-inline: 0.5em; } -`); +`; type State = { start?: number; @@ -48,9 +47,6 @@ type State = { hover?: number; }; -/** - * @customElement dy-date-range-panel - */ @customElement('dy-date-range-panel') @adoptedStyle(style) @aria({ role: 'widget' }) diff --git a/packages/duoyun-ui/src/elements/date-range-picker.ts b/packages/duoyun-ui/src/elements/date-range-picker.ts index a7d3befd..a23bb054 100644 --- a/packages/duoyun-ui/src/elements/date-range-picker.ts +++ b/packages/duoyun-ui/src/elements/date-range-picker.ts @@ -13,7 +13,7 @@ import { mounted, } from '@mantou/gem/lib/decorators'; import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; -import { css, classMap } from '@mantou/gem/lib/utils'; +import { classMap } from '@mantou/gem/lib/utils'; import { Time } from '../lib/time'; import { icons } from '../lib/icons'; @@ -33,7 +33,7 @@ import './use'; import './date-range-panel'; import './button'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host { width: 18em; } @@ -56,16 +56,8 @@ const style = createCSSSheet(css` :host(:not([disabled])) .clearable:hover .close { display: inline-flex; } -`); +`; -/** - * @customElement dy-date-range-picker - * @attr placeholder - * @attr clearable - * @attr disabled - * @fires change - * @fires clear - */ @customElement('dy-date-range-picker') @adoptedStyle(style) @adoptedStyle(pickerStyle) diff --git a/packages/duoyun-ui/src/elements/divider.ts b/packages/duoyun-ui/src/elements/divider.ts index 090295cb..e2412e4d 100644 --- a/packages/duoyun-ui/src/elements/divider.ts +++ b/packages/duoyun-ui/src/elements/divider.ts @@ -9,14 +9,13 @@ import { slot, } from '@mantou/gem/lib/decorators'; import { html, GemElement, createCSSSheet } from '@mantou/gem/lib/element'; -import { css } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; import { theme, getSemanticColor } from '../lib/theme'; const elementTheme = createDecoratorTheme({ color: '' }); -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { align-self: stretch; display: flex; @@ -59,13 +58,8 @@ const style = createCSSSheet(css` background: ${elementTheme.color}; block-size: var(--size); } -`); +`; -/** - * @customElement dy-divider - * @attr size - * @attr orientation - */ @customElement('dy-divider') @adoptedStyle(style) @aria({ role: 'separator' }) diff --git a/packages/duoyun-ui/src/elements/donut-chart.ts b/packages/duoyun-ui/src/elements/donut-chart.ts index 60efff2c..42d250c1 100644 --- a/packages/duoyun-ui/src/elements/donut-chart.ts +++ b/packages/duoyun-ui/src/elements/donut-chart.ts @@ -1,7 +1,6 @@ // https://spectrum.adobe.com/page/donut-chart/ import { adoptedStyle, customElement, attribute, property, memo, unmounted } from '@mantou/gem/lib/decorators'; import { html, svg, createCSSSheet } from '@mantou/gem/lib/element'; -import { css } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; @@ -9,18 +8,15 @@ import { DuoyunChartBaseElement } from './base/chart'; import type { Data } from './chart-tooltip'; import { ChartTooltip } from './chart-tooltip'; -const style = createCSSSheet(css` +const style = createCSSSheet` .path { stroke: ${theme.backgroundColor}; } .path:hover { filter: brightness(1.05); } -`); +`; -/** - * @customElement dy-donut-chart - */ @customElement('dy-donut-chart') @adoptedStyle(style) export class DuoyunDonutChartElement extends DuoyunChartBaseElement { diff --git a/packages/duoyun-ui/src/elements/drawer.ts b/packages/duoyun-ui/src/elements/drawer.ts index d1903e31..5a9465ba 100644 --- a/packages/duoyun-ui/src/elements/drawer.ts +++ b/packages/duoyun-ui/src/elements/drawer.ts @@ -1,13 +1,12 @@ import { adoptedStyle, customElement } from '@mantou/gem/lib/decorators'; import { createCSSSheet } from '@mantou/gem/lib/element'; -import { css } from '@mantou/gem/lib/utils'; import { slideInLeft, slideOutRight } from '../lib/animations'; import type { ModalOptions } from './modal'; import { DuoyunModalElement } from './modal'; -const style = createCSSSheet(css` +const style = createCSSSheet` .dialog { top: 0; left: auto; @@ -21,11 +20,8 @@ const style = createCSSSheet(css` max-height: none; border-radius: 0; } -`); +`; -/** - * @customElement dy-drawer - */ @customElement('dy-drawer') @adoptedStyle(style) export class DuoyunDrawerElement extends DuoyunModalElement { diff --git a/packages/duoyun-ui/src/elements/drop-area.ts b/packages/duoyun-ui/src/elements/drop-area.ts index ed3462f2..ce980435 100644 --- a/packages/duoyun-ui/src/elements/drop-area.ts +++ b/packages/duoyun-ui/src/elements/drop-area.ts @@ -12,11 +12,11 @@ import { mounted, } from '@mantou/gem/lib/decorators'; import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; -import { addListener, css } from '@mantou/gem/lib/utils'; +import { addListener } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: block; position: relative; @@ -49,11 +49,8 @@ const style = createCSSSheet(css` color: white; border: 1px dashed currentColor; } -`); +`; -/** - * @customElement dy-drop-area - */ @customElement('dy-drop-area') @adoptedStyle(style) @aria({ role: 'region' }) diff --git a/packages/duoyun-ui/src/elements/empty.ts b/packages/duoyun-ui/src/elements/empty.ts index 22342142..db500ab2 100644 --- a/packages/duoyun-ui/src/elements/empty.ts +++ b/packages/duoyun-ui/src/elements/empty.ts @@ -8,14 +8,13 @@ import { slot, } from '@mantou/gem/lib/decorators'; import { GemElement, html, createCSSSheet, render } from '@mantou/gem/lib/element'; -import { css } from '@mantou/gem/lib/utils'; import { locale } from '../lib/locale'; import { theme } from '../lib/theme'; import './use'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: inline-flex; flex-direction: column; @@ -27,11 +26,8 @@ const style = createCSSSheet(css` .icon { width: 5em; } -`); +`; -/** - * @customElement dy-empty - */ @customElement('dy-empty') @adoptedStyle(style) @connectStore(locale) diff --git a/packages/duoyun-ui/src/elements/file-picker.ts b/packages/duoyun-ui/src/elements/file-picker.ts index 3f89e600..f7d8d55e 100644 --- a/packages/duoyun-ui/src/elements/file-picker.ts +++ b/packages/duoyun-ui/src/elements/file-picker.ts @@ -11,7 +11,7 @@ import { shadow, } from '@mantou/gem/lib/decorators'; import { createCSSSheet, createRef, GemElement, html, repeat } from '@mantou/gem/lib/element'; -import { css, styleMap } from '@mantou/gem/lib/utils'; +import { styleMap } from '@mantou/gem/lib/utils'; import { icons } from '../lib/icons'; import { theme } from '../lib/theme'; @@ -25,7 +25,7 @@ import type { BasePickerElement } from './picker'; import './use'; import './image-preview'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { font-size: 0.875em; display: flex; @@ -102,7 +102,7 @@ const style = createCSSSheet(css` width: auto; max-width: 100%; } -`); +`; type FileStatus = 'success' | 'fail' | 'uploading'; @@ -113,9 +113,6 @@ export interface FileItem extends File { progress?: number; } -/** - * @customElement dy-file-picker - */ @customElement('dy-file-picker') @adoptedStyle(style) @adoptedStyle(focusStyle) diff --git a/packages/duoyun-ui/src/elements/flow.ts b/packages/duoyun-ui/src/elements/flow.ts index 4adb95bf..9ee4c109 100644 --- a/packages/duoyun-ui/src/elements/flow.ts +++ b/packages/duoyun-ui/src/elements/flow.ts @@ -3,7 +3,7 @@ import { adoptedStyle, customElement, property, part, state, shadow, memo, effect } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; import { createCSSSheet, createRef, createState, html, svg } from '@mantou/gem/lib/element'; -import { css, styleMap, exportPartsMap } from '@mantou/gem/lib/utils'; +import { styleMap, exportPartsMap } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; import type { ElkNode, ElkExtendedEdge, ElkEdgeSection, LayoutOptions, ElkShape, ElkPoint } from 'elkjs'; import ELK from 'elkjs/lib/elk.bundled.js'; @@ -192,7 +192,7 @@ export type Node = Modify< const elementTheme = createDecoratorTheme({ opacity: 0, width: '', height: '' }); -const canvasStyle = createCSSSheet(css` +const canvasStyle = createCSSSheet` :host(:where(:not([hidden]))) { display: block; position: relative; @@ -221,11 +221,8 @@ const canvasStyle = createCSSSheet(css` stroke-width: 1; fill: none; } -`); +`; -/** - * @customElement dy-flow-canvas - */ @customElement('dy-flow-canvas') @adoptedStyle(canvasStyle) @shadow() @@ -506,17 +503,14 @@ type State = { marginBlock?: number; }; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: flex; align-items: center; justify-content: center; } -`); +`; -/** - * @customElement dy-flow - */ @customElement('dy-flow') @adoptedStyle(style) @shadow() diff --git a/packages/duoyun-ui/src/elements/form.ts b/packages/duoyun-ui/src/elements/form.ts index d0503b69..e7e286ac 100644 --- a/packages/duoyun-ui/src/elements/form.ts +++ b/packages/duoyun-ui/src/elements/form.ts @@ -17,7 +17,7 @@ import { } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; import { GemElement, html, createCSSSheet, createState, createRef } from '@mantou/gem/lib/element'; -import { addListener, css } from '@mantou/gem/lib/utils'; +import { addListener } from '@mantou/gem/lib/utils'; import { mediaQuery } from '@mantou/gem/helper/mediaquery'; import { theme } from '../lib/theme'; @@ -38,7 +38,7 @@ import './help-text'; import './date-picker'; import './date-range-picker'; -const formStyle = createCSSSheet(css` +const formStyle = createCSSSheet` :where(:scope:not([inline], [hidden])) { display: block; } @@ -97,12 +97,8 @@ const formStyle = createCSSSheet(css` display: contents; } } -`); +`; -/** - * @customElement dy-form - * @attr inline - */ @customElement('dy-form') @adoptedStyle(formStyle) @aria({ role: 'form' }) @@ -158,14 +154,11 @@ export class DuoyunFormElement> extends GemElement { } } -/** - * @customElement dy-form-item-inline-group - */ @customElement('dy-form-item-inline-group') @aria({ role: 'group' }) export class DuoyunFormItemInlineGroupElement extends GemElement {} -const formItemStyle = createCSSSheet(css` +const formItemStyle = createCSSSheet` :host(:where(:not([hidden]))) { display: flex; flex-direction: column; @@ -197,7 +190,7 @@ const formItemStyle = createCSSSheet(css` .footer { margin-top: 0.7em; } -`); +`; type FormItemState = { invalidMessage?: string; @@ -210,24 +203,6 @@ type FormItemRule = { validator?: (value: any) => void | Promise; }; -/** - * @customElement dy-form-item - * @attr type - * @attr multiple - * @attr name - * @attr label - * @attr placeholder - * @attr required - * @attr checked - * @attr autofocus - * @attr disabled - * @attr searchable - * @attr clearable - * @attr rows - * @attr step - * @attr min - * @attr max - */ @customElement('dy-form-item') @adoptedStyle(formItemStyle) @shadow() diff --git a/packages/duoyun-ui/src/elements/gesture.ts b/packages/duoyun-ui/src/elements/gesture.ts index 5555e6af..e948a10b 100644 --- a/packages/duoyun-ui/src/elements/gesture.ts +++ b/packages/duoyun-ui/src/elements/gesture.ts @@ -3,8 +3,5 @@ import { customElement } from '@mantou/gem/lib/decorators'; export * from '@mantou/gem/elements/base/gesture'; -/** - * @customElement dy-gesture - */ @customElement('dy-gesture') export class DuoyunGestureElement extends GemGestureElement {} diff --git a/packages/duoyun-ui/src/elements/heading.ts b/packages/duoyun-ui/src/elements/heading.ts index d5174bea..166d83c6 100644 --- a/packages/duoyun-ui/src/elements/heading.ts +++ b/packages/duoyun-ui/src/elements/heading.ts @@ -1,11 +1,10 @@ import { connectStore, adoptedStyle, customElement, attribute, slot, shadow, effect } from '@mantou/gem/lib/decorators'; import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; import { history } from '@mantou/gem/lib/history'; -import { css } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: block; font-size: 2.5em; @@ -32,12 +31,8 @@ const style = createCSSSheet(css` font: inherit; text-wrap: balance; } -`); +`; -/** - * @customElement dy-heading - * @attr lv - */ @customElement('dy-heading') @adoptedStyle(style) @connectStore(history.store) diff --git a/packages/duoyun-ui/src/elements/help-text.ts b/packages/duoyun-ui/src/elements/help-text.ts index 2ae7c6f6..d2b52c43 100644 --- a/packages/duoyun-ui/src/elements/help-text.ts +++ b/packages/duoyun-ui/src/elements/help-text.ts @@ -1,25 +1,20 @@ import { adoptedStyle, customElement, attribute, slot, shadow } from '@mantou/gem/lib/decorators'; import { GemElement, createCSSSheet } from '@mantou/gem/lib/element'; -import { css } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; import { getStatusColor } from './status-light'; const elementTheme = createDecoratorTheme({ color: '' }); -const style = createCSSSheet(css` +const style = createCSSSheet` :host { margin-block: 0.2em; font-size: 0.875em; line-height: 1.5; color: ${elementTheme.color}; } -`); +`; -/** - * @customElement dy-help-text - * @attr status - */ @customElement('dy-help-text') @adoptedStyle(style) @shadow() diff --git a/packages/duoyun-ui/src/elements/icons.ts b/packages/duoyun-ui/src/elements/icons.ts index 2a65f782..7665f92f 100644 --- a/packages/duoyun-ui/src/elements/icons.ts +++ b/packages/duoyun-ui/src/elements/icons.ts @@ -1,6 +1,5 @@ import { adoptedStyle, customElement, shadow } from '@mantou/gem/lib/decorators'; import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; -import { css } from '@mantou/gem/lib/utils'; import { icons } from '../lib/icons'; import { theme } from '../lib/theme'; @@ -10,7 +9,7 @@ import { Toast } from './toast'; import './use'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: grid; grid-template-columns: repeat(auto-fill, minmax(6em, 1fr)); @@ -32,11 +31,8 @@ const style = createCSSSheet(css` .icon { width: 2em; } -`); +`; -/** - * @customElement dy-icons - */ @customElement('dy-icons') @adoptedStyle(style) @shadow() diff --git a/packages/duoyun-ui/src/elements/image-preview.ts b/packages/duoyun-ui/src/elements/image-preview.ts index abd060d9..8a4b101f 100644 --- a/packages/duoyun-ui/src/elements/image-preview.ts +++ b/packages/duoyun-ui/src/elements/image-preview.ts @@ -8,7 +8,6 @@ import { effect, } from '@mantou/gem/lib/decorators'; import { createCSSSheet, createState, GemElement, html } from '@mantou/gem/lib/element'; -import { css } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; import { theme, getSemanticColor } from '../lib/theme'; @@ -21,7 +20,7 @@ import './use'; const elementTheme = createDecoratorTheme({ color: '', progress: '' }); -const style = createCSSSheet(css` +const style = createCSSSheet` :host { position: relative; aspect-ratio: 1; @@ -75,7 +74,7 @@ const style = createCSSSheet(css` .status .icon { color: ${elementTheme.color}; } -`); +`; type Action = { icon: string | Element | DocumentFragment; @@ -84,9 +83,6 @@ type Action = { export type ImageStatus = 'negative' | 'positive' | 'default'; -/** - * @customElement dy-image-preview - */ @customElement('dy-image-preview') @adoptedStyle(style) @adoptedStyle(focusStyle) diff --git a/packages/duoyun-ui/src/elements/input-capture.ts b/packages/duoyun-ui/src/elements/input-capture.ts index 725b23f1..bde80c0a 100644 --- a/packages/duoyun-ui/src/elements/input-capture.ts +++ b/packages/duoyun-ui/src/elements/input-capture.ts @@ -1,6 +1,6 @@ import { adoptedStyle, customElement, mounted, part, shadow } from '@mantou/gem/lib/decorators'; import { createCSSSheet, createState, GemElement, html } from '@mantou/gem/lib/element'; -import { addListener, css } from '@mantou/gem/lib/utils'; +import { addListener } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; import { theme } from '../lib/theme'; @@ -12,7 +12,7 @@ import './paragraph'; const elementTheme = createDecoratorTheme({ left: '', top: '' }); -const style = createCSSSheet(css` +const style = createCSSSheet` .container, .circle { position: fixed; @@ -42,16 +42,13 @@ const style = createCSSSheet(css` left: ${elementTheme.left}; top: ${elementTheme.top}; } -`); +`; type State = { keys: string[]; mousePosition: number[] | null; }; -/** - * @customElement dy-input-capture - */ @customElement('dy-input-capture') @adoptedStyle(style) @adoptedStyle(contentsContainer) diff --git a/packages/duoyun-ui/src/elements/input.ts b/packages/duoyun-ui/src/elements/input.ts index 195b9a14..f9a682c2 100644 --- a/packages/duoyun-ui/src/elements/input.ts +++ b/packages/duoyun-ui/src/elements/input.ts @@ -17,7 +17,6 @@ import { } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; import { GemElement, html, createCSSSheet, createRef } from '@mantou/gem/lib/element'; -import { css } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; import { icons } from '../lib/icons'; @@ -66,7 +65,7 @@ class InputHistory { }, 300); } -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { font-size: 0.875em; inline-size: 15em; @@ -156,23 +155,8 @@ const style = createCSSSheet(css` display: block; } } -`); - -/** - * @customElement dy-input - * @attr name - * @attr value - * @attr type - * @attr placeholder - * @attr disabled - * @attr autofocus - * @attr clearable - * @attr alwayclearable - * @attr rows - * @attr step - * @attr min - * @attr max - */ +`; + @customElement('dy-input') @adoptedStyle(style) @adoptedStyle(focusStyle) @@ -420,7 +404,7 @@ export class DuoyunInputElement extends GemElement { } } -const inputGroupStyle = createCSSSheet(css` +const inputGroupStyle = createCSSSheet` :scope { display: flex; @@ -444,11 +428,8 @@ const inputGroupStyle = createCSSSheet(css` border-bottom-left-radius: 0; } } -`); +`; -/** - * @customElement dy-input-group - */ @customElement('dy-input-group') @adoptedStyle(inputGroupStyle) @aria({ role: 'group' }) diff --git a/packages/duoyun-ui/src/elements/keyboard-access.ts b/packages/duoyun-ui/src/elements/keyboard-access.ts index e49a8dc3..ddc6192e 100644 --- a/packages/duoyun-ui/src/elements/keyboard-access.ts +++ b/packages/duoyun-ui/src/elements/keyboard-access.ts @@ -11,7 +11,7 @@ import { effect, mounted, } from '@mantou/gem/lib/decorators'; -import { addListener, css, styleMap } from '@mantou/gem/lib/utils'; +import { addListener, styleMap } from '@mantou/gem/lib/utils'; import { logger } from '@mantou/gem/helper/logger'; import type { HotKeyHandles } from '../lib/hotkeys'; @@ -59,7 +59,7 @@ const getFocusableElements = () => { }); }; -const style = createCSSSheet(css` +const style = createCSSSheet` :host { font-size: 0.75em; } @@ -78,7 +78,7 @@ const style = createCSSSheet(css` border-color: #0002; text-transform: uppercase; } -`); +`; type FocusableElement = { key: string; @@ -97,7 +97,6 @@ type State = { export type NavigationDirection = 'up' | 'down' | 'left' | 'right'; /** - * @customElement dy-keyboard-access * Firefox cross origin open popup allow: about:config -> dom.popup_allowed_events add `keydown` */ @customElement('dy-keyboard-access') diff --git a/packages/duoyun-ui/src/elements/legend.ts b/packages/duoyun-ui/src/elements/legend.ts index 05a697ad..d8e79cac 100644 --- a/packages/duoyun-ui/src/elements/legend.ts +++ b/packages/duoyun-ui/src/elements/legend.ts @@ -1,7 +1,7 @@ import type { Emitter } from '@mantou/gem/lib/decorators'; import { adoptedStyle, aria, customElement, emitter, mounted, property } from '@mantou/gem/lib/decorators'; import { createCSSSheet, html } from '@mantou/gem/lib/element'; -import { css, styleMap, classMap, addListener } from '@mantou/gem/lib/utils'; +import { styleMap, classMap, addListener } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; import { commonColors } from '../lib/color'; @@ -10,7 +10,7 @@ import { DuoyunScrollBaseElement } from './base/scroll'; import './tooltip'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { --color: initial; display: flex; @@ -36,7 +36,7 @@ const style = createCSSSheet(css` border-radius: ${theme.smallRound}; background-color: currentColor; } -`); +`; export interface Legend { label: string; @@ -48,9 +48,6 @@ function getValue(legend: Legend) { return legend.value ?? legend.label; } -/** - * @customElement dy-legend - */ @customElement('dy-legend') @adoptedStyle(style) @aria({ ariaHidden: 'true' }) diff --git a/packages/duoyun-ui/src/elements/line-chart.ts b/packages/duoyun-ui/src/elements/line-chart.ts index a56c9982..20e1e4f3 100644 --- a/packages/duoyun-ui/src/elements/line-chart.ts +++ b/packages/duoyun-ui/src/elements/line-chart.ts @@ -1,6 +1,5 @@ import { adoptedStyle, customElement } from '@mantou/gem/lib/decorators'; import { html, svg, createCSSSheet } from '@mantou/gem/lib/element'; -import { css } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; import { isNullish } from '../lib/types'; @@ -10,7 +9,7 @@ import { DuoyunBarChartElement } from './bar-chart'; const elementTheme = createDecoratorTheme({ strokeWidth: 0, strokeDasharray: '' }); -const style = createCSSSheet(css` +const style = createCSSSheet` .line { pointer-events: none; } @@ -27,11 +26,8 @@ const style = createCSSSheet(css` transform-origin: center; transform: scale(1.5); } -`); +`; -/** - * @customElement dy-line-chart - */ @customElement('dy-line-chart') @adoptedStyle(style) export class DuoyunLineChartElement extends DuoyunBarChartElement { diff --git a/packages/duoyun-ui/src/elements/link.ts b/packages/duoyun-ui/src/elements/link.ts index bcc03f18..dc39941f 100644 --- a/packages/duoyun-ui/src/elements/link.ts +++ b/packages/duoyun-ui/src/elements/link.ts @@ -1,6 +1,6 @@ import { adoptedStyle, customElement, mounted } from '@mantou/gem/lib/decorators'; import { createCSSSheet } from '@mantou/gem/lib/element'; -import { addListener, css } from '@mantou/gem/lib/utils'; +import { addListener } from '@mantou/gem/lib/utils'; import { GemLinkElement, GemActiveLinkElement } from '@mantou/gem/elements/base/link'; import { commonHandle } from '../lib/hotkeys'; @@ -9,17 +9,14 @@ import { theme } from '../lib/theme'; export * from '@mantou/gem/elements/base/link'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host { color: inherit; text-decoration: inherit; border-radius: ${theme.normalRound}; } -`); +`; -/** - * @customElement dy-link - */ @customElement('dy-link') @adoptedStyle(style) @adoptedStyle(focusStyle) @@ -28,9 +25,6 @@ export class DuoyunLinkElement extends GemLinkElement { #init = () => addListener(this, 'keydown', commonHandle); } -/** - * @customElement dy-active-link - */ @customElement('dy-active-link') @adoptedStyle(style) @adoptedStyle(focusStyle) diff --git a/packages/duoyun-ui/src/elements/list.ts b/packages/duoyun-ui/src/elements/list.ts index 58363b76..571eea7a 100644 --- a/packages/duoyun-ui/src/elements/list.ts +++ b/packages/duoyun-ui/src/elements/list.ts @@ -19,7 +19,7 @@ import { import type { TemplateResult } from '@mantou/gem/lib/element'; import { createCSSSheet, createRef, createState, GemElement, html } from '@mantou/gem/lib/element'; import type { LinkedListItem } from '@mantou/gem/lib/utils'; -import { addListener, css, LinkedList, styled, styleMap } from '@mantou/gem/lib/utils'; +import { addListener, LinkedList, styled, styleMap } from '@mantou/gem/lib/utils'; import { logger } from '@mantou/gem/helper/logger'; import { theme } from '../lib/theme'; @@ -59,7 +59,7 @@ export type PersistentState = State & { @shadow() export class DuoyunOutsideElement extends DuoyunVisibleBaseElement {} -const styles = createCSSSheet(css` +const styles = createCSSSheet` :host([infinite]), * { overflow-anchor: none; @@ -72,11 +72,8 @@ const styles = createCSSSheet(css` ::slotted(*) { grid-column: 1/-1; } -`); +`; -/** - * @customElement dy-list - */ @customElement('dy-list') @adoptedStyle(styles) @adoptedStyle(blockContainer) @@ -562,7 +559,7 @@ export class DuoyunListElement extends GemElement { const itemStyle = createCSSSheet({ // 避免该样式干扰用户样式 - item: styled.class` + item: styled` display: flex; align-items: center; gap: 1em; diff --git a/packages/duoyun-ui/src/elements/loading.ts b/packages/duoyun-ui/src/elements/loading.ts index e32a5476..f67a80d1 100644 --- a/packages/duoyun-ui/src/elements/loading.ts +++ b/packages/duoyun-ui/src/elements/loading.ts @@ -1,6 +1,5 @@ import { adoptedStyle, customElement, shadow, slot } from '@mantou/gem/lib/decorators'; import { html, createCSSSheet } from '@mantou/gem/lib/element'; -import { css } from '@mantou/gem/lib/utils'; import { icons } from '../lib/icons'; @@ -8,7 +7,7 @@ import { DuoyunVisibleBaseElement } from './base/visible'; import './use'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { position: relative; display: inline-flex; @@ -21,11 +20,8 @@ const style = createCSSSheet(css` .describe { opacity: 0.7; } -`); +`; -/** - * @customElement dy-loading - */ @customElement('dy-loading') @adoptedStyle(style) @shadow() diff --git a/packages/duoyun-ui/src/elements/map.ts b/packages/duoyun-ui/src/elements/map.ts index 8cc17fda..349f2cf3 100644 --- a/packages/duoyun-ui/src/elements/map.ts +++ b/packages/duoyun-ui/src/elements/map.ts @@ -1,7 +1,7 @@ import type { Emitter } from '@mantou/gem/lib/decorators'; import { adoptedStyle, customElement, emitter, property, state, part, aria, memo } from '@mantou/gem/lib/decorators'; import { createCSSSheet, createState, html, svg } from '@mantou/gem/lib/element'; -import { css, styleMap, classMap } from '@mantou/gem/lib/utils'; +import { styleMap, classMap } from '@mantou/gem/lib/utils'; import type { GeoRawProjection } from 'd3-geo'; import { geoProjection, geoMercatorRaw, geoEquirectangularRaw, geoPath } from 'd3-geo'; @@ -84,7 +84,7 @@ export const shapes = [ }, ]; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: block; border-radius: ${theme.normalRound}; @@ -121,7 +121,7 @@ const style = createCSSSheet(css` .node.current:hover { transform: translate(var(--translate)) scale(calc(var(--scale) * 1.5)); } -`); +`; type Area = { name: string; @@ -146,15 +146,6 @@ type State = { export type NodeEventDetail = { id: string; originEvent: MouseEvent }; export type AreaEventDetail = { name: string; originEvent: MouseEvent }; -/** - * @customElement dy-map - * @fire nodehover - * @fire nodeleave - * @fire nodeclick - * @fire areahover - * @fire arealeave - * @fire areaclick - */ @customElement('dy-map') @adoptedStyle(style) @aria({ role: 'img' }) diff --git a/packages/duoyun-ui/src/elements/meter.ts b/packages/duoyun-ui/src/elements/meter.ts index 767b6cb0..2aab2529 100644 --- a/packages/duoyun-ui/src/elements/meter.ts +++ b/packages/duoyun-ui/src/elements/meter.ts @@ -11,12 +11,12 @@ import { slot, } from '@mantou/gem/lib/decorators'; import { createCSSSheet, GemElement, html } from '@mantou/gem/lib/element'; -import { css, styleMap } from '@mantou/gem/lib/utils'; +import { styleMap } from '@mantou/gem/lib/utils'; import { theme, getSemanticColor } from '../lib/theme'; import type { StringList } from '../lib/types'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { font-size: 0.875em; width: 15em; @@ -51,11 +51,8 @@ const style = createCSSSheet(css` background: currentColor; transition: width 0.3s; } -`); +`; -/** - * @customElement dy-meter - */ @customElement('dy-meter') @adoptedStyle(style) @aria({ role: 'meter' }) diff --git a/packages/duoyun-ui/src/elements/modal.ts b/packages/duoyun-ui/src/elements/modal.ts index 2f1226cd..0f415db2 100644 --- a/packages/duoyun-ui/src/elements/modal.ts +++ b/packages/duoyun-ui/src/elements/modal.ts @@ -16,7 +16,7 @@ import { memo, } from '@mantou/gem/lib/decorators'; import { createCSSSheet, createRef, GemElement, html, TemplateResult } from '@mantou/gem/lib/element'; -import { addListener, css, styled } from '@mantou/gem/lib/utils'; +import { addListener, styled } from '@mantou/gem/lib/utils'; import { mediaQuery } from '@mantou/gem/helper/mediaquery'; import { theme } from '../lib/theme'; @@ -30,7 +30,7 @@ import './button'; import './divider'; import './scroll-box'; -const style = createCSSSheet(css` +const style = createCSSSheet` /* modal 可能会在刷新前后保持打开 */ :host { view-transition-name: dy-modal; @@ -106,13 +106,13 @@ const style = createCSSSheet(css` height: 100%; } } -`); +`; const style2 = createCSSSheet({ - p: styled.class` + p: styled` margin: 0; `, - c: styled.class` + c: styled` &::first-letter { text-transform: capitalize; } @@ -139,12 +139,6 @@ export interface ModalOpenOptions { prepareOk?: (ele: T) => void | Promise; } -/** - * @customElement dy-modal - * @fires ok - * @fires close - * @fires maskclick - */ @customElement('dy-modal') @adoptedStyle(style) @adoptedStyle(style2) diff --git a/packages/duoyun-ui/src/elements/more.ts b/packages/duoyun-ui/src/elements/more.ts index 01574dc8..1c2b8a68 100644 --- a/packages/duoyun-ui/src/elements/more.ts +++ b/packages/duoyun-ui/src/elements/more.ts @@ -11,7 +11,7 @@ import { effect, } from '@mantou/gem/lib/decorators'; import { createCSSSheet, createState, GemElement, html } from '@mantou/gem/lib/element'; -import { classMap, css, styleMap } from '@mantou/gem/lib/utils'; +import { classMap, styleMap } from '@mantou/gem/lib/utils'; import { locale } from '../lib/locale'; import { commonHandle } from '../lib/hotkeys'; @@ -20,7 +20,7 @@ import { DuoyunScrollBaseElement } from './base/scroll'; import './action-text'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: flex; flex-direction: column; @@ -36,13 +36,8 @@ const style = createCSSSheet(css` .action { cursor: pointer; } -`); +`; -/** - * @customElement dy-more - * @attr maxheight - * @attr expandless - */ @customElement('dy-more') @adoptedStyle(style) @aria({ role: 'combobox' }) @@ -92,9 +87,6 @@ export class DuoyunMoreElement extends GemElement { }; } -/** - * @customElement dy-more-slot - */ @customElement('dy-more-slot') @aria({ role: 'paragraph' }) export class DuoyunMoreSlotElement extends DuoyunScrollBaseElement { diff --git a/packages/duoyun-ui/src/elements/options.ts b/packages/duoyun-ui/src/elements/options.ts index 3712ef4e..3f952505 100644 --- a/packages/duoyun-ui/src/elements/options.ts +++ b/packages/duoyun-ui/src/elements/options.ts @@ -1,7 +1,7 @@ import { adoptedStyle, customElement, property, boolattribute, slot, aria, shadow } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; import { GemElement, html, createCSSSheet, createState } from '@mantou/gem/lib/element'; -import { css, classMap } from '@mantou/gem/lib/utils'; +import { classMap } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; import { icons } from '../lib/icons'; @@ -13,7 +13,7 @@ import { focusStyle } from '../lib/styles'; import './use'; import './input'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { cursor: default; font-size: 0.875em; @@ -115,7 +115,7 @@ const style = createCSSSheet(css` dy-tag { padding-block: 0; } -`); +`; export type Option = { label: string | TemplateResult; @@ -141,10 +141,6 @@ export type Adder = { export const SEPARATOR = '---'; -/** - * @customElement dy-options - * @attr searchable - */ @customElement('dy-options') @adoptedStyle(style) @adoptedStyle(focusStyle) diff --git a/packages/duoyun-ui/src/elements/page-loadbar.ts b/packages/duoyun-ui/src/elements/page-loadbar.ts index f7915beb..417a07d2 100644 --- a/packages/duoyun-ui/src/elements/page-loadbar.ts +++ b/packages/duoyun-ui/src/elements/page-loadbar.ts @@ -1,6 +1,5 @@ import { adoptedStyle, aria, customElement, mounted, shadow } from '@mantou/gem/lib/decorators'; import { GemElement, html, createCSSSheet, createState } from '@mantou/gem/lib/element'; -import { css } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; import { theme } from '../lib/theme'; @@ -8,7 +7,7 @@ import { sleep } from '../lib/timer'; const elementTheme = createDecoratorTheme({ progress: '' }); -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { view-transition-name: dy-page-loadbar; z-index: ${theme.popupZIndex}; @@ -31,11 +30,8 @@ const style = createCSSSheet(css` border-end-start-radius: 50%; filter: drop-shadow(0 0 4px ${theme.primaryColor}); } -`); +`; -/** - * @customElement dy-page-loadbar - */ @customElement('dy-page-loadbar') @adoptedStyle(style) @aria({ role: 'progressbar' }) diff --git a/packages/duoyun-ui/src/elements/pagination.ts b/packages/duoyun-ui/src/elements/pagination.ts index c064ecc3..25287e32 100644 --- a/packages/duoyun-ui/src/elements/pagination.ts +++ b/packages/duoyun-ui/src/elements/pagination.ts @@ -11,7 +11,7 @@ import { aria, } from '@mantou/gem/lib/decorators'; import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; -import { css, classMap } from '@mantou/gem/lib/utils'; +import { classMap } from '@mantou/gem/lib/utils'; import { splice } from '@mantou/gem/helper/i18n'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; @@ -31,7 +31,7 @@ import './picker'; const elementTheme = createDecoratorTheme({ align: '' }); -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: flex; align-items: center; @@ -75,13 +75,8 @@ const style = createCSSSheet(css` .size { font-size: 1em; } -`); +`; -/** - * @customElement dy-pagination - * @fires pagechange - * @fires sizechange - */ @customElement('dy-pagination') @adoptedStyle(style) @adoptedStyle(focusStyle) diff --git a/packages/duoyun-ui/src/elements/paragraph.ts b/packages/duoyun-ui/src/elements/paragraph.ts index 75b81a5b..702d5fc0 100644 --- a/packages/duoyun-ui/src/elements/paragraph.ts +++ b/packages/duoyun-ui/src/elements/paragraph.ts @@ -1,10 +1,9 @@ import { adoptedStyle, aria, customElement } from '@mantou/gem/lib/decorators'; import { GemElement, createCSSSheet } from '@mantou/gem/lib/element'; -import { css } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; -const style = createCSSSheet(css` +const style = createCSSSheet` :where(:scope:not([hidden])) { display: block; margin-block-end: 0.75em; @@ -43,11 +42,8 @@ const style = createCSSSheet(css` border-bottom-width: 2px; } } -`); +`; -/** - * @customElement dy-paragraph - */ @customElement('dy-paragraph') @adoptedStyle(style) @aria({ role: 'paragraph' }) diff --git a/packages/duoyun-ui/src/elements/picker.ts b/packages/duoyun-ui/src/elements/picker.ts index 1daf84a4..95c6e987 100644 --- a/packages/duoyun-ui/src/elements/picker.ts +++ b/packages/duoyun-ui/src/elements/picker.ts @@ -15,7 +15,7 @@ import { } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; -import { addListener, css } from '@mantou/gem/lib/utils'; +import { addListener } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; import { icons } from '../lib/icons'; @@ -28,7 +28,7 @@ import { ContextMenu } from './contextmenu'; import './use'; import './scroll-box'; -export const pickerStyle = createCSSSheet(css` +export const pickerStyle = createCSSSheet` :host(:where(:not([hidden]))) { cursor: pointer; display: inline-flex; @@ -71,14 +71,14 @@ export const pickerStyle = createCSSSheet(css` :host(:not([disabled]):where(:hover, :state(active))) dy-use { color: ${theme.textColor}; } -`); +`; export abstract class BasePickerElement { disabled: boolean; showPicker: () => void; } -const style = createCSSSheet(css` +const style = createCSSSheet` :host { width: 12em; white-space: nowrap; @@ -96,7 +96,7 @@ const style = createCSSSheet(css` .placeholder { color: ${theme.describeColor}; } -`); +`; export interface Option { label: string | TemplateResult; @@ -105,14 +105,6 @@ export interface Option { children?: Option[]; } -/** - * @customElement dy-picker - * @attr disabled - * @attr borderless - * @attr selectmode - * @attr fit - * @attr multiple - */ @customElement('dy-picker') @adoptedStyle(style) @adoptedStyle(pickerStyle) diff --git a/packages/duoyun-ui/src/elements/placeholder.ts b/packages/duoyun-ui/src/elements/placeholder.ts index 22bf3c17..fffa7b01 100644 --- a/packages/duoyun-ui/src/elements/placeholder.ts +++ b/packages/duoyun-ui/src/elements/placeholder.ts @@ -9,7 +9,7 @@ import { shadow, } from '@mantou/gem/lib/decorators'; import { createCSSSheet, html } from '@mantou/gem/lib/element'; -import { css, styleMap } from '@mantou/gem/lib/utils'; +import { styleMap } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; import { theme } from '../lib/theme'; @@ -18,7 +18,7 @@ import { DuoyunVisibleBaseElement } from './base/visible'; const elementTheme = createDecoratorTheme({ color: '' }); -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: block; flex-grow: 1; @@ -36,16 +36,8 @@ const style = createCSSSheet(css` background-size: 100% 1em; background-repeat: no-repeat; } -`); +`; -/** - * @customElement dy-placeholder - * @attr mode - * @attr width - * @attr center - * @attr max-line - * @attr min-line - */ @customElement('dy-placeholder') @adoptedStyle(style) @aria({ role: 'progressbar', ariaBusy: 'true' }) diff --git a/packages/duoyun-ui/src/elements/popover.ts b/packages/duoyun-ui/src/elements/popover.ts index 77f6044d..21d932ed 100644 --- a/packages/duoyun-ui/src/elements/popover.ts +++ b/packages/duoyun-ui/src/elements/popover.ts @@ -14,7 +14,7 @@ import { import type { TemplateResult } from '@mantou/gem/lib/element'; import { createCSSSheet, createRef, createState, GemElement, html } from '@mantou/gem/lib/element'; import type { StyleObject } from '@mantou/gem/lib/utils'; -import { addListener, css, styleMap } from '@mantou/gem/lib/utils'; +import { addListener, styleMap } from '@mantou/gem/lib/utils'; import { toggleActiveState, getBoundingClientRect, setBodyInert } from '../lib/element'; import { sleep } from '../lib/timer'; @@ -48,14 +48,6 @@ type CloseCallback = { instance: DuoyunPopoverElement; }; -/** - * @customElement dy-popover - * @attr debug - * @attr unreachable - * @attr disabled - * @attr position - * @attr trigger - */ @customElement('dy-popover') @adoptedStyle(contentsContainer) @shadow({ delegatesFocus: true }) @@ -346,7 +338,7 @@ export class DuoyunPopoverElement extends GemElement { export const Popover = DuoyunPopoverElement; -const ghostStyle = createCSSSheet(css` +const ghostStyle = createCSSSheet` :host { position: fixed; z-index: ${theme.popupZIndex}; @@ -456,11 +448,8 @@ const ghostStyle = createCSSSheet(css` border-width: 6px 6px 6px 0; transform: translateY(-50%); } -`); +`; -/** - * @customElement dy-popover-ghost - */ @customElement('dy-popover-ghost') @adoptedStyle(ghostStyle) @shadow() diff --git a/packages/duoyun-ui/src/elements/progress.ts b/packages/duoyun-ui/src/elements/progress.ts index 082676dd..48b7dcb6 100644 --- a/packages/duoyun-ui/src/elements/progress.ts +++ b/packages/duoyun-ui/src/elements/progress.ts @@ -4,9 +4,6 @@ import { theme } from '../lib/theme'; import { DuoyunMeterElement } from './meter'; -/** - * @customElement dy-progress - */ @customElement('dy-progress') @aria({ role: 'progressbar' }) export class DuoyunProgressElement extends DuoyunMeterElement { diff --git a/packages/duoyun-ui/src/elements/radio.ts b/packages/duoyun-ui/src/elements/radio.ts index feb06176..dc8e15e7 100644 --- a/packages/duoyun-ui/src/elements/radio.ts +++ b/packages/duoyun-ui/src/elements/radio.ts @@ -13,13 +13,13 @@ import { } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; -import { addListener, css } from '@mantou/gem/lib/utils'; +import { addListener } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; import { commonHandle } from '../lib/hotkeys'; import { focusStyle } from '../lib/styles'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { cursor: default; display: inline-flex; @@ -52,14 +52,8 @@ const style = createCSSSheet(css` :host([checked]) .radio { background-color: currentColor; } -`); +`; -/** - * @customElement dy-radio - * @attr checked - * @attr value - * @attr disabled - */ @customElement('dy-radio') @adoptedStyle(style) @adoptedStyle(focusStyle) @@ -97,7 +91,7 @@ export class DuoyunRadioElement extends GemElement { }; } -export const groupStyle = createCSSSheet(css` +export const groupStyle = createCSSSheet` :scope:where(:not([hidden])) { display: flex; align-items: center; @@ -110,17 +104,13 @@ export const groupStyle = createCSSSheet(css` flex-direction: column; align-items: flex-start; } -`); +`; export interface Option { label: string | TemplateResult; value?: T; } -/** - * @customElement dy-radio-group - * @attr disabled - */ @customElement('dy-radio-group') @adoptedStyle(groupStyle) @aria({ role: 'radiogroup' }) diff --git a/packages/duoyun-ui/src/elements/rate.ts b/packages/duoyun-ui/src/elements/rate.ts index 8103e505..96f3effa 100644 --- a/packages/duoyun-ui/src/elements/rate.ts +++ b/packages/duoyun-ui/src/elements/rate.ts @@ -12,7 +12,7 @@ import { effect, } from '@mantou/gem/lib/decorators'; import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; -import { css, classMap } from '@mantou/gem/lib/utils'; +import { classMap } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; import { createDataURLFromSVG } from '../lib/image'; @@ -27,7 +27,7 @@ const starUrl = createDataURLFromSVG(icons.star); const elementTheme = createDecoratorTheme({ color: '' }); -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: inline-flex; flex-direction: row-reverse; @@ -65,11 +65,8 @@ const style = createCSSSheet(css` :host(:where(:not(:hover), [readonly])) .mask::part(icon) { background-image: linear-gradient(to right, currentColor ${elementTheme.color}, transparent ${elementTheme.color}); } -`); +`; -/** - * @customElement dy-rate - */ @customElement('dy-rate') @adoptedStyle(style) @adoptedStyle(focusStyle) diff --git a/packages/duoyun-ui/src/elements/reflect.ts b/packages/duoyun-ui/src/elements/reflect.ts index 9e9dd13f..aa2e794d 100644 --- a/packages/duoyun-ui/src/elements/reflect.ts +++ b/packages/duoyun-ui/src/elements/reflect.ts @@ -3,8 +3,5 @@ import { customElement } from '@mantou/gem/lib/decorators'; export * from '@mantou/gem/elements/base/reflect'; -/** - * @customElement dy-reflect - */ @customElement('dy-reflect') export class DuoyunReflectElement extends GemReflectElement {} diff --git a/packages/duoyun-ui/src/elements/result.ts b/packages/duoyun-ui/src/elements/result.ts index 884166d4..1230afcf 100644 --- a/packages/duoyun-ui/src/elements/result.ts +++ b/packages/duoyun-ui/src/elements/result.ts @@ -1,6 +1,5 @@ import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; import { adoptedStyle, customElement, property, attribute, slot, shadow } from '@mantou/gem/lib/decorators'; -import { css } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; import type { StringList } from '../lib/types'; @@ -13,7 +12,7 @@ import './heading'; import './paragraph'; import './space'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: flex; flex-direction: column; @@ -38,11 +37,8 @@ const style = createCSSSheet(css` slot::slotted(*) { margin-block-start: 1em; } -`); +`; -/** - * @customElement dy-result - */ @customElement('dy-result') @adoptedStyle(style) @shadow() diff --git a/packages/duoyun-ui/src/elements/route.ts b/packages/duoyun-ui/src/elements/route.ts index 61fee198..b95d0803 100644 --- a/packages/duoyun-ui/src/elements/route.ts +++ b/packages/duoyun-ui/src/elements/route.ts @@ -12,14 +12,8 @@ export { } from '@mantou/gem/elements/base/route'; export type { RouteItem, RouteOptions, RoutesObject } from '@mantou/gem/elements/base/route'; -/** - * @customElement dy-route - */ @customElement('dy-route') export class DuoyunRouteElement extends GemRouteElement {} -/** - * @customElement dy-light-route - */ @customElement('dy-light-route') export class DuoyunLightRouteElement extends GemLightRouteElement {} diff --git a/packages/duoyun-ui/src/elements/scatter-chart.ts b/packages/duoyun-ui/src/elements/scatter-chart.ts index 0241786d..2b293e1f 100644 --- a/packages/duoyun-ui/src/elements/scatter-chart.ts +++ b/packages/duoyun-ui/src/elements/scatter-chart.ts @@ -1,7 +1,7 @@ // https://spectrum.adobe.com/page/scatter-plot/ import { adoptedStyle, customElement, memo, property, unmounted } from '@mantou/gem/lib/decorators'; import { createCSSSheet, html, svg } from '@mantou/gem/lib/element'; -import { classMap, css } from '@mantou/gem/lib/utils'; +import { classMap } from '@mantou/gem/lib/utils'; import { isNullish } from '../lib/types'; @@ -10,7 +10,7 @@ import type { Sequence } from './area-chart'; import type { Data } from './chart-tooltip'; import { ChartTooltip } from './chart-tooltip'; -const style = createCSSSheet(css` +const style = createCSSSheet` .symbol { opacity: 0.8; } @@ -23,11 +23,8 @@ const style = createCSSSheet(css` .disabled { pointer-events: none; } -`); +`; -/** - * @customElement dy-scatter-chart - */ @customElement('dy-scatter-chart') @adoptedStyle(style) export class DuoyunScatterChartElement extends DuoyunChartBaseElement { diff --git a/packages/duoyun-ui/src/elements/scroll-box.ts b/packages/duoyun-ui/src/elements/scroll-box.ts index 7d4d326f..44ce28f9 100644 --- a/packages/duoyun-ui/src/elements/scroll-box.ts +++ b/packages/duoyun-ui/src/elements/scroll-box.ts @@ -4,9 +4,6 @@ import { blockContainer } from '../lib/styles'; import { DuoyunScrollBaseElement } from './base/scroll'; -/** - * @customElement dy-scroll-box - */ @customElement('dy-scroll-box') @adoptedStyle(blockContainer) export class DuoyunScrollBoxElement extends DuoyunScrollBaseElement {} diff --git a/packages/duoyun-ui/src/elements/segmented.ts b/packages/duoyun-ui/src/elements/segmented.ts index bbfffbe4..61db2d4e 100644 --- a/packages/duoyun-ui/src/elements/segmented.ts +++ b/packages/duoyun-ui/src/elements/segmented.ts @@ -11,7 +11,7 @@ import { shadow, state, } from '@mantou/gem/lib/decorators'; -import { classMap, css, partMap, styleMap } from '@mantou/gem/lib/utils'; +import { classMap, partMap, styleMap } from '@mantou/gem/lib/utils'; import { commonHandle } from '../lib/hotkeys'; import { theme } from '../lib/theme'; @@ -22,7 +22,7 @@ import './use'; const getAnchorName = (index: number) => `--anchor-${index}`; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: flex; cursor: default; @@ -100,15 +100,12 @@ const style = createCSSSheet(css` box-shadow: ${theme.controlShadow}; } } -`); +`; export interface SegmentedOption extends Option { icon?: string | Element | DocumentFragment; } -/** - * @customElement dy-segmented - */ @customElement('dy-segmented') @adoptedStyle(style) @shadow({ delegatesFocus: true }) diff --git a/packages/duoyun-ui/src/elements/select.ts b/packages/duoyun-ui/src/elements/select.ts index b086ab56..6098b153 100644 --- a/packages/duoyun-ui/src/elements/select.ts +++ b/packages/duoyun-ui/src/elements/select.ts @@ -18,7 +18,7 @@ import { import type { TemplateResult } from '@mantou/gem/lib/element'; import { createCSSSheet, createRef, createState, GemElement, html } from '@mantou/gem/lib/element'; import type { StyleObject } from '@mantou/gem/lib/utils'; -import { addListener, css, styleMap } from '@mantou/gem/lib/utils'; +import { addListener, styleMap } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; import { icons } from '../lib/icons'; @@ -40,7 +40,7 @@ import './input'; import './tag'; import './scroll-box'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host { width: 15em; } @@ -107,7 +107,7 @@ const style = createCSSSheet(css` .search:where(:state(filled), :state(composing)) + .placeholder { display: none; } -`); +`; export interface Option { label: string | TemplateResult; @@ -117,15 +117,6 @@ export interface Option { onRemove?: (evt: MouseEvent) => void; } -/** - * @customElement dy-select - * @attr multiple - * @attr disabled - * @attr searchable - * @attr inline - * @attr placeholder - * @attr borderless - */ @customElement('dy-select') @adoptedStyle(style) @adoptedStyle(pickerStyle) diff --git a/packages/duoyun-ui/src/elements/selection-box.ts b/packages/duoyun-ui/src/elements/selection-box.ts index c04cc3d0..0220fb55 100644 --- a/packages/duoyun-ui/src/elements/selection-box.ts +++ b/packages/duoyun-ui/src/elements/selection-box.ts @@ -1,7 +1,7 @@ import type { Emitter } from '@mantou/gem/lib/decorators'; import { adoptedStyle, customElement, effect, emitter, property, shadow } from '@mantou/gem/lib/decorators'; import { createCSSSheet, createState, GemElement, html } from '@mantou/gem/lib/element'; -import { addListener, css, styleMap } from '@mantou/gem/lib/utils'; +import { addListener, styleMap } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; import { contentsContainer } from '../lib/styles'; @@ -32,9 +32,6 @@ export type SelectionChange = { mode: SelectionMode; }; -/** - * @customElement dy-selection-box - */ @customElement('dy-selection-box') @adoptedStyle(contentsContainer) @shadow() @@ -147,7 +144,7 @@ export class DuoyunSelectionBoxElement extends GemElement { } const borderWidth = 100; -const maskStyle = createCSSSheet(css` +const maskStyle = createCSSSheet` :host { position: fixed; border: ${borderWidth}px solid transparent; @@ -169,11 +166,8 @@ const maskStyle = createCSSSheet(css` :host::after { border: 1px solid ${theme.informativeColor}; } -`); +`; -/** - * @customElement dy-selection-box-mask - */ @customElement('dy-selection-box-mask') @adoptedStyle(maskStyle) @shadow() diff --git a/packages/duoyun-ui/src/elements/shortcut-record.ts b/packages/duoyun-ui/src/elements/shortcut-record.ts index a7811ee8..fbd5f599 100644 --- a/packages/duoyun-ui/src/elements/shortcut-record.ts +++ b/packages/duoyun-ui/src/elements/shortcut-record.ts @@ -13,7 +13,7 @@ import { mounted, } from '@mantou/gem/lib/decorators'; import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; -import { addListener, css } from '@mantou/gem/lib/utils'; +import { addListener } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; import { isNotNullish } from '../lib/types'; @@ -24,7 +24,7 @@ import { icons } from '../lib/icons'; import './paragraph'; import './use'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: inline-flex; font-size: 0.875em; @@ -91,14 +91,8 @@ const style = createCSSSheet(css` display: block; } } -`); +`; -/** - * @customElement dy-shortcut-record - * @attr placeholder - * @attr tooltip - * @attr disabled - */ @customElement('dy-shortcut-record') @adoptedStyle(style) @adoptedStyle(focusStyle) diff --git a/packages/duoyun-ui/src/elements/side-navigation.ts b/packages/duoyun-ui/src/elements/side-navigation.ts index 344f6419..a8f12f07 100644 --- a/packages/duoyun-ui/src/elements/side-navigation.ts +++ b/packages/duoyun-ui/src/elements/side-navigation.ts @@ -13,7 +13,6 @@ import type { TemplateResult } from '@mantou/gem/lib/element'; import { createCSSSheet, createState, html } from '@mantou/gem/lib/element'; import { history } from '@mantou/gem/lib/history'; import type { QueryString } from '@mantou/gem/lib/utils'; -import { css } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; import { commonHandle } from '../lib/hotkeys'; @@ -59,7 +58,7 @@ interface NavItemGroup { export type NavItems = (Item | NavItemGroup)[]; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { user-select: none; display: flex; @@ -131,11 +130,8 @@ const style = createCSSSheet(css` :host(:state(compact)) :where(.item, .title-wrap) { justify-content: center; } -`); +`; -/** - * @customElement dy-side-navigation - */ @customElement('dy-side-navigation') @adoptedStyle(style) @adoptedStyle(focusStyle) diff --git a/packages/duoyun-ui/src/elements/slider.ts b/packages/duoyun-ui/src/elements/slider.ts index 21b0b02d..02895fec 100644 --- a/packages/duoyun-ui/src/elements/slider.ts +++ b/packages/duoyun-ui/src/elements/slider.ts @@ -14,7 +14,7 @@ import { effect, } from '@mantou/gem/lib/decorators'; import { GemElement, html, createCSSSheet, createState, createRef } from '@mantou/gem/lib/element'; -import { css, classMap, addListener } from '@mantou/gem/lib/utils'; +import { classMap, addListener } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; import { theme } from '../lib/theme'; @@ -29,7 +29,7 @@ import './input'; const elementTheme = createDecoratorTheme({ position: '', positionPoint: '' }); -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { font-size: 0.875em; inline-size: 15em; @@ -99,11 +99,8 @@ const style = createCSSSheet(css` .input { inline-size: 50px; } -`); +`; -/** - * @customElement dy-slider - */ @customElement('dy-slider') @adoptedStyle(style) @adoptedStyle(focusStyle) diff --git a/packages/duoyun-ui/src/elements/sort-box.ts b/packages/duoyun-ui/src/elements/sort-box.ts index 143c8d4f..ef6fce35 100644 --- a/packages/duoyun-ui/src/elements/sort-box.ts +++ b/packages/duoyun-ui/src/elements/sort-box.ts @@ -1,6 +1,6 @@ import { GemElement, createCSSSheet } from '@mantou/gem/lib/element'; import { adoptedStyle, boolattribute, customElement, emitter, mounted, type Emitter } from '@mantou/gem/lib/decorators'; -import { addListener, css } from '@mantou/gem/lib/utils'; +import { addListener } from '@mantou/gem/lib/utils'; import { blockContainer } from '../lib/styles'; import { theme } from '../lib/theme'; @@ -8,7 +8,7 @@ import { theme } from '../lib/theme'; import { DuoyunGestureElement } from './gesture'; import type { PanEventDetail } from './gesture'; -const style = createCSSSheet(css` +const style = createCSSSheet` :where(dy-sort-item[handle], dy-sort-handle):state(grabbing) { cursor: grabbing; @@ -21,13 +21,10 @@ const style = createCSSSheet(css` position: relative; z-index: ${theme.popupZIndex}; } -`); +`; export type SortEventDetail = { new: number; old: number }; -/** - * @customElement dy-sort-box - */ @customElement('dy-sort-box') @adoptedStyle(style) @adoptedStyle(blockContainer) @@ -81,16 +78,10 @@ export class DuoyunSortBoxElement extends GemElement { }; } -/** - * @customElement dy-sort-item - */ @customElement('dy-sort-item') export class DuoyunSortItemElement extends DuoyunGestureElement { @boolattribute handle: boolean; } -/** - * @customElement dy-sort-handle - */ @customElement('dy-sort-handle') export class DuoyunSortHandleElement extends DuoyunGestureElement {} diff --git a/packages/duoyun-ui/src/elements/space.ts b/packages/duoyun-ui/src/elements/space.ts index 25d6a7c7..e53e8941 100644 --- a/packages/duoyun-ui/src/elements/space.ts +++ b/packages/duoyun-ui/src/elements/space.ts @@ -1,8 +1,7 @@ import { adoptedStyle, customElement, attribute } from '@mantou/gem/lib/decorators'; import { GemElement, createCSSSheet } from '@mantou/gem/lib/element'; -import { css } from '@mantou/gem/lib/utils'; -const style = createCSSSheet(css` +const style = createCSSSheet` :where(:scope:not([hidden])) { display: inline-flex; flex-wrap: wrap; @@ -18,12 +17,8 @@ const style = createCSSSheet(css` :where(:scope[size='large']) { gap: 0.8em; } -`); +`; -/** - * @customElement dy-space - * @attr size - */ @customElement('dy-space') @adoptedStyle(style) export class DuoyunSpaceElement extends GemElement { diff --git a/packages/duoyun-ui/src/elements/statistic.ts b/packages/duoyun-ui/src/elements/statistic.ts index 99cc002d..6ff5a30c 100644 --- a/packages/duoyun-ui/src/elements/statistic.ts +++ b/packages/duoyun-ui/src/elements/statistic.ts @@ -10,7 +10,7 @@ import { slot, } from '@mantou/gem/lib/decorators'; import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; -import { css, classMap } from '@mantou/gem/lib/utils'; +import { classMap } from '@mantou/gem/lib/utils'; import { parseDuration } from '../lib/time'; import { theme } from '../lib/theme'; @@ -19,7 +19,7 @@ import { formatBandwidth, formatDecimal, formatPercentage, formatTraffic, format import './placeholder'; import './use'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: block; font-size: 0.875em; @@ -60,7 +60,7 @@ const style = createCSSSheet(css` .negative { color: ${theme.negativeColor}; } -`); +`; export type StatisticType = 'bandwidth' | 'traffic' | 'decimal' | 'percentage' | 'duration' | 'currency'; export type StatisticNeutral = 'positive' | 'negative'; @@ -74,10 +74,6 @@ export const formatFnMap: Record { number: string; duration: parseDuration, }; -/** - * @customElement dy-statistic - * @attr loading - */ @customElement('dy-statistic') @adoptedStyle(style) @aria({ role: 'group' }) diff --git a/packages/duoyun-ui/src/elements/status-light.ts b/packages/duoyun-ui/src/elements/status-light.ts index f6280195..c79b8584 100644 --- a/packages/duoyun-ui/src/elements/status-light.ts +++ b/packages/duoyun-ui/src/elements/status-light.ts @@ -1,11 +1,10 @@ import { adoptedStyle, customElement, attribute, slot, aria, shadow } from '@mantou/gem/lib/decorators'; import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; -import { css } from '@mantou/gem/lib/utils'; import { theme, getSemanticColor } from '../lib/theme'; import type { StringList } from '../lib/types'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: inline-flex; align-items: center; @@ -25,7 +24,7 @@ const style = createCSSSheet(css` white-space: nowrap; text-overflow: ellipsis; } -`); +`; export type Status = StringList<'default' | 'positive' | 'informative' | 'neutral' | 'notice' | 'negative'>; @@ -40,9 +39,6 @@ export function getStatusColor(status: Status) { } } -/** - * @customElement dy-status-light - */ @customElement('dy-status-light') @adoptedStyle(style) @aria({ role: 'status' }) diff --git a/packages/duoyun-ui/src/elements/switch.ts b/packages/duoyun-ui/src/elements/switch.ts index 03932c5b..9b1103bf 100644 --- a/packages/duoyun-ui/src/elements/switch.ts +++ b/packages/duoyun-ui/src/elements/switch.ts @@ -10,7 +10,7 @@ import { mounted, } from '@mantou/gem/lib/decorators'; import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; -import { addListener, css } from '@mantou/gem/lib/utils'; +import { addListener } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; import { theme, getSemanticColor } from '../lib/theme'; @@ -19,7 +19,7 @@ import { focusStyle } from '../lib/styles'; const elementTheme = createDecoratorTheme({ color: '' }); -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { cursor: default; display: inline-flex; @@ -65,14 +65,8 @@ const style = createCSSSheet(css` :host([checked]) .switch::before { margin-inline-start: calc(100% * 4 / 9); } -`); +`; -/** - * @customElement dy-switch - * @attr checked - * @attr value - * @attr neutral - */ @customElement('dy-switch') @adoptedStyle(style) @adoptedStyle(focusStyle) diff --git a/packages/duoyun-ui/src/elements/table.ts b/packages/duoyun-ui/src/elements/table.ts index ea0df43d..e40fb790 100644 --- a/packages/duoyun-ui/src/elements/table.ts +++ b/packages/duoyun-ui/src/elements/table.ts @@ -16,7 +16,7 @@ import { import type { TemplateResult } from '@mantou/gem/lib/element'; import { createCSSSheet, html } from '@mantou/gem/lib/element'; import type { StyleObject } from '@mantou/gem/lib/utils'; -import { css, styleMap, classMap, isArrayChange } from '@mantou/gem/lib/utils'; +import { styleMap, classMap, isArrayChange } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; import { readProp } from '../lib/utils'; @@ -38,7 +38,7 @@ import './loading'; import './space'; import './selection-box'; -const styles = createCSSSheet(css` +const styles = createCSSSheet` :host(:where(:not([hidden]))) { display: block; width: 100%; @@ -126,7 +126,7 @@ const styles = createCSSSheet(css` margin-block-start: 0.5em; font-weight: bold; } -`); +`; export type Column = { title: string | TemplateResult; @@ -154,9 +154,6 @@ export type ItemContextMenuEventDetail = { originEvent: MouseEvent; }; -/** - * @customElement dy-table - */ @customElement('dy-table') @adoptedStyle(styles) @adoptedStyle(focusStyle) diff --git a/packages/duoyun-ui/src/elements/tabs.ts b/packages/duoyun-ui/src/elements/tabs.ts index 6ebfbaa6..93536bc6 100644 --- a/packages/duoyun-ui/src/elements/tabs.ts +++ b/packages/duoyun-ui/src/elements/tabs.ts @@ -15,7 +15,7 @@ import { } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; import { createCSSSheet, GemElement, html } from '@mantou/gem/lib/element'; -import { css, partMap, classMap, styleMap, addListener } from '@mantou/gem/lib/utils'; +import { partMap, classMap, styleMap, addListener } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; import { commonHandle } from '../lib/hotkeys'; @@ -30,7 +30,7 @@ import './divider'; const getAnchorName = (index: number) => `--anchor-${index}`; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: flex; flex-direction: column; @@ -106,7 +106,7 @@ const style = createCSSSheet(css` inset: anchor(top) auto anchor(bottom) anchor(right); } } -`); +`; export interface TabItem { label: string | TemplateResult; @@ -115,9 +115,6 @@ export interface TabItem { getContent?: () => string | TemplateResult; } -/** - * @customElement dy-tabs - */ @customElement('dy-tabs') @adoptedStyle(style) @adoptedStyle(focusStyle) @@ -197,7 +194,7 @@ export class DuoyunTabsElement extends GemElement { }; } -const panelStyle = createCSSSheet(css` +const panelStyle = createCSSSheet` :host(:where(:not([hidden]))) { display: block; flex-shrink: 1; @@ -209,11 +206,8 @@ const panelStyle = createCSSSheet(css` margin-inline-start: 1em; margin-block-start: 0em; } -`); +`; -/** - * @customElement dy-tab-panel - */ @customElement('dy-tab-panel') @adoptedStyle(panelStyle) @aria({ role: 'tabpanel' }) diff --git a/packages/duoyun-ui/src/elements/tag.ts b/packages/duoyun-ui/src/elements/tag.ts index 6024dce3..e1482203 100644 --- a/packages/duoyun-ui/src/elements/tag.ts +++ b/packages/duoyun-ui/src/elements/tag.ts @@ -11,7 +11,6 @@ import { aria, } from '@mantou/gem/lib/decorators'; import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; -import { css } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; import { icons } from '../lib/icons'; @@ -24,7 +23,7 @@ import './use'; const elementTheme = createDecoratorTheme({ color: '', borderColor: '', bg: '' }); -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { cursor: default; display: inline-flex; @@ -52,16 +51,10 @@ const style = createCSSSheet(css` .close:hover { opacity: 1; } -`); +`; export type PresetColor = 'positive' | 'informative' | 'negative' | 'notice' | 'default'; -/** - * @customElement dy-tag - * @attr small - * @attr closable - * @fires close - */ @customElement('dy-tag') @adoptedStyle(style) @adoptedStyle(focusStyle) diff --git a/packages/duoyun-ui/src/elements/text-mask.ts b/packages/duoyun-ui/src/elements/text-mask.ts index a3e3ffaa..d15a5dc3 100644 --- a/packages/duoyun-ui/src/elements/text-mask.ts +++ b/packages/duoyun-ui/src/elements/text-mask.ts @@ -1,20 +1,16 @@ import { adoptedStyle, customElement, property, attribute, shadow, mounted, memo } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; -import { css } from '@mantou/gem/lib/utils'; -const style = createCSSSheet(css` +const style = createCSSSheet` span { user-select: none; } -`); +`; // other | placeholder | replacer type MaskParseValue = TemplateResult | string | number; -/** - * @customElement dy-text-mask - */ @customElement('dy-text-mask') @adoptedStyle(style) @shadow() diff --git a/packages/duoyun-ui/src/elements/time-panel.ts b/packages/duoyun-ui/src/elements/time-panel.ts index e6dce2ba..a8157eea 100644 --- a/packages/duoyun-ui/src/elements/time-panel.ts +++ b/packages/duoyun-ui/src/elements/time-panel.ts @@ -9,7 +9,7 @@ import { mounted, } from '@mantou/gem/lib/decorators'; import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; -import { css, classMap } from '@mantou/gem/lib/utils'; +import { classMap } from '@mantou/gem/lib/utils'; import { Time, parseDate } from '../lib/time'; import { theme } from '../lib/theme'; @@ -17,7 +17,7 @@ import { isNotNullish } from '../lib/types'; import { locale } from '../lib/locale'; import { focusStyle } from '../lib/styles'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: grid; grid-template: 'hour minute second' / 1fr 1fr 1fr; @@ -49,13 +49,8 @@ const style = createCSSSheet(css` .checked { background: ${theme.hoverBackgroundColor}; } -`); +`; -/** - * @customElement dy-time-panel - * @attr headless - * @emits change - */ @customElement('dy-time-panel') @adoptedStyle(style) @adoptedStyle(focusStyle) diff --git a/packages/duoyun-ui/src/elements/time-picker.ts b/packages/duoyun-ui/src/elements/time-picker.ts index c1f76750..5e7839b3 100644 --- a/packages/duoyun-ui/src/elements/time-picker.ts +++ b/packages/duoyun-ui/src/elements/time-picker.ts @@ -13,7 +13,7 @@ import { mounted, } from '@mantou/gem/lib/decorators'; import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; -import { css, classMap, addListener } from '@mantou/gem/lib/utils'; +import { classMap, addListener } from '@mantou/gem/lib/utils'; import { Time } from '../lib/time'; import { theme } from '../lib/theme'; @@ -31,7 +31,7 @@ import type { DuoyunTimePanelElement } from './time-panel'; import './time-panel'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host { width: 10em; } @@ -54,11 +54,8 @@ const style = createCSSSheet(css` :host(:not([disabled])) .clearable:hover .close { display: inline-flex; } -`); +`; -/** - * @customElement dy-time-picker - */ @customElement('dy-time-picker') @adoptedStyle(style) @adoptedStyle(pickerStyle) diff --git a/packages/duoyun-ui/src/elements/timeline.ts b/packages/duoyun-ui/src/elements/timeline.ts index 418eefcc..96761374 100644 --- a/packages/duoyun-ui/src/elements/timeline.ts +++ b/packages/duoyun-ui/src/elements/timeline.ts @@ -2,7 +2,7 @@ import { adoptedStyle, aria, customElement, property, shadow } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; import { createCSSSheet, html } from '@mantou/gem/lib/element'; -import { css, styleMap, classMap } from '@mantou/gem/lib/utils'; +import { styleMap, classMap } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; @@ -10,7 +10,7 @@ import { DuoyunScrollBaseElement } from './base/scroll'; import './use'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { --size: 1.5em; line-height: var(--size); @@ -53,7 +53,7 @@ const style = createCSSSheet(css` color: ${theme.describeColor}; padding-block-end: 0.5em; } -`); +`; type Item = { title: string; @@ -62,9 +62,6 @@ type Item = { color?: string; }; -/** - * @customElement dy-timeline - */ @customElement('dy-timeline') @adoptedStyle(style) @aria({ role: 'list' }) diff --git a/packages/duoyun-ui/src/elements/title.ts b/packages/duoyun-ui/src/elements/title.ts index 9f2ab243..34883fa8 100644 --- a/packages/duoyun-ui/src/elements/title.ts +++ b/packages/duoyun-ui/src/elements/title.ts @@ -3,8 +3,5 @@ import { customElement } from '@mantou/gem/lib/decorators'; export * from '@mantou/gem/elements/base/title'; -/** - * @customElement dy-title - */ @customElement('dy-title') export class DuoyunTitleElement extends GemTitleElement {} diff --git a/packages/duoyun-ui/src/elements/toast.ts b/packages/duoyun-ui/src/elements/toast.ts index 1ce2c4d5..8c30dcb2 100644 --- a/packages/duoyun-ui/src/elements/toast.ts +++ b/packages/duoyun-ui/src/elements/toast.ts @@ -1,7 +1,7 @@ import { adoptedStyle, aria, customElement, mounted, property, shadow } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; import { GemElement, html, createCSSSheet, repeat } from '@mantou/gem/lib/element'; -import { css, classMap, addListener } from '@mantou/gem/lib/utils'; +import { classMap, addListener } from '@mantou/gem/lib/utils'; import { icons } from '../lib/icons'; import { theme } from '../lib/theme'; @@ -10,7 +10,7 @@ import { getStringFromTemplate } from '../lib/utils'; import './use'; import './action-text'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { --item-gap: 1em; --item-padding-block: 0.6em; @@ -89,7 +89,7 @@ const style = createCSSSheet(css` cursor: pointer; text-decoration: underline; } -`); +`; type Type = 'info' | 'success' | 'warning' | 'error' | 'loading'; @@ -108,9 +108,6 @@ type ToastOptions = Partial & { const itemTimerMap = new WeakMap(); const removedSet = new WeakSet(); -/** - * @customElement dy-toast - */ @customElement('dy-toast') @adoptedStyle(style) @aria({ role: 'alert', ariaLive: 'polite' }) diff --git a/packages/duoyun-ui/src/elements/tooltip.ts b/packages/duoyun-ui/src/elements/tooltip.ts index 6a38b0d6..ada781e6 100644 --- a/packages/duoyun-ui/src/elements/tooltip.ts +++ b/packages/duoyun-ui/src/elements/tooltip.ts @@ -4,9 +4,6 @@ import { theme } from '../lib/theme'; import { DuoyunPopoverElement } from './popover'; -/** - * @customElement dy-tooltip - */ @customElement('dy-tooltip') export class DuoyunTooltipElement extends DuoyunPopoverElement { static ghostStyle: (typeof DuoyunPopoverElement)['ghostStyle'] = { diff --git a/packages/duoyun-ui/src/elements/tree.ts b/packages/duoyun-ui/src/elements/tree.ts index aac11256..f8a6843d 100644 --- a/packages/duoyun-ui/src/elements/tree.ts +++ b/packages/duoyun-ui/src/elements/tree.ts @@ -17,7 +17,7 @@ import { } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; import { createCSSSheet, createState, GemElement, html } from '@mantou/gem/lib/element'; -import { css, styleMap } from '@mantou/gem/lib/utils'; +import { styleMap } from '@mantou/gem/lib/utils'; import { icons } from '../lib/icons'; import { commonHandle } from '../lib/hotkeys'; @@ -54,7 +54,7 @@ function getItemValue(item: TreeItem) { return item.value ?? item.label; } -const itemStyle = createCSSSheet(css` +const itemStyle = createCSSSheet` :host(:where(:not([hidden]))) { display: flex; align-items: center; @@ -99,11 +99,8 @@ const itemStyle = createCSSSheet(css` background: currentColor; border-radius: 10em; } -`); +`; -/** - * @customElement dy-tree-item - */ @customElement('dy-tree-item') @adoptedStyle(itemStyle) @shadow() @@ -136,22 +133,15 @@ class _DuoyunTreeItemElement extends GemElement { }; } -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { display: block; font-size: 0.875em; } -`); +`; export type MouseEventDetail = { value: any; item: TreeItem; originEvent: MouseEvent }; -/** - * @customElement dy-tree - * @fires itemclick - * @fires itemcontextmenu - * @fires expand - * @fires collapse - */ @customElement('dy-tree') @adoptedStyle(style) @adoptedStyle(focusStyle) diff --git a/packages/duoyun-ui/src/elements/unsafe.ts b/packages/duoyun-ui/src/elements/unsafe.ts index 05ee9371..f608e05e 100644 --- a/packages/duoyun-ui/src/elements/unsafe.ts +++ b/packages/duoyun-ui/src/elements/unsafe.ts @@ -3,8 +3,5 @@ import { customElement } from '@mantou/gem/lib/decorators'; export * from '@mantou/gem/elements/base/unsafe'; -/** - * @customElement dy-unsafe - */ @customElement('dy-unsafe') export class DuoyunUnsafeElement extends GemUnsafeElement {} diff --git a/packages/duoyun-ui/src/elements/use.ts b/packages/duoyun-ui/src/elements/use.ts index 3699521a..d17f71dd 100644 --- a/packages/duoyun-ui/src/elements/use.ts +++ b/packages/duoyun-ui/src/elements/use.ts @@ -3,8 +3,5 @@ import { customElement } from '@mantou/gem/lib/decorators'; export * from '@mantou/gem/elements/base/use'; -/** - * @customElement dy-use - */ @customElement('dy-use') export class DuoyunUseElement extends GemUseElement {} diff --git a/packages/duoyun-ui/src/elements/wait.ts b/packages/duoyun-ui/src/elements/wait.ts index 317db7b1..ea476614 100644 --- a/packages/duoyun-ui/src/elements/wait.ts +++ b/packages/duoyun-ui/src/elements/wait.ts @@ -1,6 +1,6 @@ import { adoptedStyle, aria, customElement, effect, mounted, shadow, state } from '@mantou/gem/lib/decorators'; import { GemElement, html, createCSSSheet, createState } from '@mantou/gem/lib/element'; -import { addListener, css } from '@mantou/gem/lib/utils'; +import { addListener } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; import { sleep } from '../lib/timer'; @@ -12,7 +12,7 @@ import './loading'; const elementTheme = createDecoratorTheme({ color: '', align: '', justify: '', paddingBottom: '' }); -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { view-transition-name: dy-wait; position: fixed; @@ -37,7 +37,7 @@ const style = createCSSSheet(css` pointer-events: all; background-color: rgba(0, 0, 0, ${theme.maskAlpha}); } -`); +`; interface WaitOptions { minDelay?: number; @@ -96,9 +96,6 @@ type State = { position?: Position | `${Position} ${Position}`; }; -/** - * @customElement dy-wait - */ @customElement('dy-wait') @adoptedStyle(style) @aria({ role: 'alert', ariaBusy: 'true' }) diff --git a/packages/duoyun-ui/src/lib/styles.ts b/packages/duoyun-ui/src/lib/styles.ts index d16f2d0e..50580653 100644 --- a/packages/duoyun-ui/src/lib/styles.ts +++ b/packages/duoyun-ui/src/lib/styles.ts @@ -1,11 +1,10 @@ -import { createCSSSheet, html } from '@mantou/gem/lib/element'; -import { css } from '@mantou/gem/lib/utils'; +import { createCSSSheet } from '@mantou/gem/lib/element'; 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` +export const focusStyle = createCSSSheet` :host(:where(:focus)), :where(:focus) { outline: none; @@ -15,17 +14,17 @@ export const focusStyle = createCSSSheet(css` outline: 2px solid ${theme.focusColor}; outline-offset: -2px; } -`); +`; function createContainer(display: string) { - return createCSSSheet(css` + return createCSSSheet` @layer { :host(:where(:not([hidden]))), :where(:scope:not([hidden])) { display: ${display}; } } - `); + `; } export const blockContainer = createContainer('block'); diff --git a/packages/duoyun-ui/src/patterns/console.ts b/packages/duoyun-ui/src/patterns/console.ts index 4b87d5ca..4d8dbb56 100644 --- a/packages/duoyun-ui/src/patterns/console.ts +++ b/packages/duoyun-ui/src/patterns/console.ts @@ -1,6 +1,5 @@ import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; import { adoptedStyle, attribute, boolattribute, customElement, effect, property } from '@mantou/gem/lib/decorators'; -import { css } from '@mantou/gem/lib/utils'; import { mediaQuery } from '@mantou/gem/helper/mediaquery'; import { theme } from '../lib/theme'; @@ -34,7 +33,7 @@ export type UserInfo = { profile?: string; }; -const style = createCSSSheet(css` +const style = createCSSSheet` :scope { display: flex; color: ${theme.textColor}; @@ -132,11 +131,8 @@ const style = createCSSSheet(css` } } } -`); +`; -/** - * @customElement dy-pat-console - */ @customElement('dy-pat-console') @adoptedStyle(style) export class DyPatConsoleElement extends GemElement { diff --git a/packages/duoyun-ui/src/patterns/filter-form.ts b/packages/duoyun-ui/src/patterns/filter-form.ts index 77ea813e..93aa8498 100644 --- a/packages/duoyun-ui/src/patterns/filter-form.ts +++ b/packages/duoyun-ui/src/patterns/filter-form.ts @@ -1,5 +1,4 @@ import { GemElement, html, createCSSSheet, createState } from '@mantou/gem/lib/element'; -import { css } from '@mantou/gem/lib/utils'; import type { Emitter } from '@mantou/gem/lib/decorators'; import { adoptedStyle, @@ -39,7 +38,7 @@ export type FilterableOptions = { connectStores?: Store[]; }; -const style = createCSSSheet(css` +const style = createCSSSheet` dy-input, dy-select { width: 100%; @@ -60,7 +59,7 @@ const style = createCSSSheet(css` .filter { margin-block-end: 0.5em; } -`); +`; const durationUnitList = [ { label: locale.minute, value: 1000 * 60 }, @@ -87,9 +86,6 @@ const defaultState: State = { provider: undefined, }; -/** - * @customElement dy-pat-filter-form - */ @customElement('dy-pat-filter-form') @adoptedStyle(style) @adoptedStyle(blockContainer) diff --git a/packages/duoyun-ui/src/patterns/footer.ts b/packages/duoyun-ui/src/patterns/footer.ts index 67921e93..c478de8f 100644 --- a/packages/duoyun-ui/src/patterns/footer.ts +++ b/packages/duoyun-ui/src/patterns/footer.ts @@ -1,7 +1,6 @@ import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; import type { Emitter } from '@mantou/gem/lib/decorators'; import { adoptedStyle, customElement, globalemitter, property } from '@mantou/gem/lib/decorators'; -import { css } from '@mantou/gem/lib/utils'; import { mediaQuery } from '@mantou/gem/helper/mediaquery'; import { theme } from '../lib/theme'; @@ -43,7 +42,7 @@ export type Languages = { names: Record; }; -const style = createCSSSheet(css` +const style = createCSSSheet` :scope { display: block; background: ${theme.lightBackgroundColor}; @@ -146,11 +145,11 @@ const style = createCSSSheet(css` background: transparent; padding-block: 0.25em; } -`); +`; const mobileStyle = createCSSSheet( mediaQuery.PHONE, - css` + /*css*/ ` :scope { .column { width: 100%; @@ -163,9 +162,6 @@ const mobileStyle = createCSSSheet( `, ); -/** - * @customElement dy-pat-footer - */ @customElement('dy-pat-footer') @adoptedStyle(mobileStyle) @adoptedStyle(style) diff --git a/packages/duoyun-ui/src/patterns/form.ts b/packages/duoyun-ui/src/patterns/form.ts index d21b643f..77cf8f9d 100644 --- a/packages/duoyun-ui/src/patterns/form.ts +++ b/packages/duoyun-ui/src/patterns/form.ts @@ -1,7 +1,7 @@ import { createCSSSheet, html, GemElement, createState, createRef, TemplateResult } from '@mantou/gem/lib/element'; import { adoptedStyle, customElement, memo, property, shadow } from '@mantou/gem/lib/decorators'; import type { StyleObject } from '@mantou/gem/lib/utils'; -import { GemError, css, styleMap } from '@mantou/gem/lib/utils'; +import { GemError, styleMap } from '@mantou/gem/lib/utils'; import { history } from '@mantou/gem/lib/history'; import { icons } from '../lib/icons'; @@ -83,7 +83,7 @@ export type FormItem = label?: string; }; -const style = createCSSSheet(css` +const style = createCSSSheet` dy-form { width: 100%; } @@ -122,7 +122,7 @@ const style = createCSSSheet(css` details[open] summary { display: none; } -`); +`; type OptionsRecord = { loading: boolean; @@ -135,9 +135,6 @@ type State = { ignoreCache: Partial>; }; -/** - * @customElement dy-pat-form - */ @customElement('dy-pat-form') @adoptedStyle(blockContainer) @adoptedStyle(focusStyle) diff --git a/packages/duoyun-ui/src/patterns/nav.ts b/packages/duoyun-ui/src/patterns/nav.ts index 265bb045..dcac0f37 100644 --- a/packages/duoyun-ui/src/patterns/nav.ts +++ b/packages/duoyun-ui/src/patterns/nav.ts @@ -11,7 +11,7 @@ import { property, state, } from '@mantou/gem/lib/decorators'; -import { addListener, classMap, css } from '@mantou/gem/lib/utils'; +import { addListener, classMap } from '@mantou/gem/lib/utils'; import { mediaQuery } from '@mantou/gem/helper/mediaquery'; import { isRemoteIcon } from '../lib/utils'; @@ -25,7 +25,7 @@ import '../elements/use'; export type { Links } from './footer'; -const style = createCSSSheet(css` +const style = createCSSSheet` :scope { display: flex; align-items: center; @@ -112,11 +112,11 @@ const style = createCSSSheet(css` .dropdown dy-link:hover { background: ${theme.lightBackgroundColor}; } -`); +`; const mobileStyle = createCSSSheet( - `${mediaQuery.PHONE}`, - css` + mediaQuery.PHONE, + /*css*/ ` :scope { gap: 1em; } @@ -187,9 +187,6 @@ const mobileStyle = createCSSSheet( `, ); -/** - * @customElement dy-pat-nav - */ @customElement('dy-pat-nav') @adoptedStyle(style) @adoptedStyle(mobileStyle) diff --git a/packages/duoyun-ui/src/patterns/table.ts b/packages/duoyun-ui/src/patterns/table.ts index 791a89a1..2169fa1e 100644 --- a/packages/duoyun-ui/src/patterns/table.ts +++ b/packages/duoyun-ui/src/patterns/table.ts @@ -1,5 +1,5 @@ import { createCSSSheet, createRef, createState, GemElement, html } from '@mantou/gem/lib/element'; -import { QueryString, addListener, css, styleMap } from '@mantou/gem/lib/utils'; +import { QueryString, addListener, styleMap } from '@mantou/gem/lib/utils'; import type { Emitter } from '@mantou/gem/lib/decorators'; import { adoptedStyle, @@ -120,7 +120,7 @@ export type FetchEventDetail = Omit & { sort: Record; }; -const style = createCSSSheet(css` +const style = createCSSSheet` .searchbar { display: flex; align-items: center; @@ -149,11 +149,9 @@ const style = createCSSSheet(css` right: 1rem; bottom: 1rem; } -`); +`; /** - * @customElement dy-pat-table - * * !WARNING * * field not contain `,`, `filters` field and `sort` key use `,` split diff --git a/packages/gem-book/docs/hello.ts b/packages/gem-book/docs/hello.ts index 6fb01154..56e5e67e 100644 --- a/packages/gem-book/docs/hello.ts +++ b/packages/gem-book/docs/hello.ts @@ -3,16 +3,16 @@ import type { GemBookElement } from 'gem-book'; customElements.whenDefined('gem-book').then(() => { const { GemBookPluginElement } = customElements.get('gem-book') as typeof GemBookElement; const { Gem, theme } = GemBookPluginElement; - const { html, css, adoptedStyle, createCSSSheet, customElement } = Gem; + const { html, adoptedStyle, createCSSSheet, customElement } = Gem; - const style = createCSSSheet(css` + const style = createCSSSheet` my-plugin-hello { display: block; border-radius: ${theme.normalRound}; background: rgb(from ${theme.textColor} r g b / 0.05); padding: 1rem; } - `); + `; @customElement('my-plugin-hello') @adoptedStyle(style) diff --git a/packages/gem-book/src/element/elements/404.ts b/packages/gem-book/src/element/elements/404.ts index b6ca4c5a..5fe92641 100644 --- a/packages/gem-book/src/element/elements/404.ts +++ b/packages/gem-book/src/element/elements/404.ts @@ -1,4 +1,4 @@ -import { adoptedStyle, aria, createCSSSheet, css, customElement, GemElement, html } from '@mantou/gem'; +import { adoptedStyle, aria, createCSSSheet, customElement, GemElement, html } from '@mantou/gem'; import { getGithubPath, isGitLab } from '../lib/utils'; import { bookStore, locationStore } from '../store'; @@ -11,7 +11,7 @@ import '@mantou/gem/elements/reflect'; import '@mantou/gem/elements/title'; import '@mantou/gem/elements/use'; -const styles = createCSSSheet(css` +const styles = createCSSSheet` :scope { text-align: center; } @@ -34,7 +34,7 @@ const styles = createCSSSheet(css` height: 18px; margin-right: 10px; } -`); +`; @customElement('gem-book-404') @adoptedStyle(styles) @aria({ role: 'region' }) diff --git a/packages/gem-book/src/element/elements/edit-link.ts b/packages/gem-book/src/element/elements/edit-link.ts index 9c9babc6..d2fc6c83 100644 --- a/packages/gem-book/src/element/elements/edit-link.ts +++ b/packages/gem-book/src/element/elements/edit-link.ts @@ -3,7 +3,6 @@ import { GemElement, customElement, connectStore, - css, adoptedStyle, createCSSSheet, createState, @@ -23,7 +22,7 @@ import { icons } from './icons'; import '@mantou/gem/elements/link'; import '@mantou/gem/elements/use'; -const styles = createCSSSheet(css` +const styles = createCSSSheet` :scope { display: flex; gap: 1rem; @@ -56,7 +55,7 @@ const styles = createCSSSheet(css` white-space: nowrap; } } -`); +`; const cache: Record = {}; const fetchData = async (api: string) => { diff --git a/packages/gem-book/src/element/elements/footer.ts b/packages/gem-book/src/element/elements/footer.ts index 80c4a9a4..57a29e87 100644 --- a/packages/gem-book/src/element/elements/footer.ts +++ b/packages/gem-book/src/element/elements/footer.ts @@ -1,4 +1,4 @@ -import { html, GemElement, customElement, connectStore, css, createCSSSheet, adoptedStyle, aria } from '@mantou/gem'; +import { html, GemElement, customElement, connectStore, createCSSSheet, adoptedStyle, aria } from '@mantou/gem'; import { selfI18n } from '../helper/i18n'; import { theme } from '../helper/theme'; @@ -7,7 +7,7 @@ import { unsafeRenderHTML } from '../lib/renderer'; import '@mantou/gem/elements/link'; -const styles = createCSSSheet(css` +const styles = createCSSSheet` :scope { display: block; padding-block: 2rem; @@ -24,7 +24,7 @@ const styles = createCSSSheet(css` gem-link:hover { opacity: 0.8; } -`); +`; @customElement('gem-book-footer') @connectStore(bookStore) @@ -37,7 +37,7 @@ export class Footer extends GemElement { ${config?.footer ? unsafeRenderHTML( config.footer, - css` + /*css*/ ` p { margin: 0; } diff --git a/packages/gem-book/src/element/elements/homepage.ts b/packages/gem-book/src/element/elements/homepage.ts index 31ecb0e6..61f3e4b0 100644 --- a/packages/gem-book/src/element/elements/homepage.ts +++ b/packages/gem-book/src/element/elements/homepage.ts @@ -1,4 +1,4 @@ -import { html, GemElement, customElement, connectStore, css, createCSSSheet, adoptedStyle } from '@mantou/gem'; +import { html, GemElement, customElement, connectStore, createCSSSheet, adoptedStyle } from '@mantou/gem'; import { mediaQuery } from '@mantou/gem/helper/mediaquery'; import { getUserLink } from '../../common/utils'; @@ -14,7 +14,7 @@ import { icons } from './icons'; import '@mantou/gem/elements/link'; import '@mantou/gem/elements/use'; -const styles = createCSSSheet(css` +const styles = createCSSSheet` :scope { overflow: hidden; @@ -153,7 +153,7 @@ const styles = createCSSSheet(css` margin: 0; } } -`); +`; @customElement('gem-book-homepage') @connectStore(bookStore) @@ -199,7 +199,7 @@ export class Homepage extends GemElement {
${unsafeRenderHTML( feature.desc, - css` + /*css*/ ` p:last-of-type { margin-block-end: 0; } diff --git a/packages/gem-book/src/element/elements/loadbar.ts b/packages/gem-book/src/element/elements/loadbar.ts index 2d97c7dc..43a6018d 100644 --- a/packages/gem-book/src/element/elements/loadbar.ts +++ b/packages/gem-book/src/element/elements/loadbar.ts @@ -4,7 +4,6 @@ import { shadow, GemElement, html, - css, createCSSSheet, adoptedStyle, createState, @@ -16,7 +15,7 @@ import { theme } from '../helper/theme'; const elementTheme = createDecoratorTheme({ progress: '' }); -const styles = createCSSSheet(css` +const styles = createCSSSheet` :host { z-index: 22222222; position: fixed; @@ -38,11 +37,8 @@ const styles = createCSSSheet(css` border-end-start-radius: 50%; filter: drop-shadow(0 0 4px ${theme.primaryColor}); } -`); +`; -/** - * @customElement gem-book-loadbar - */ @customElement('gem-book-loadbar') @aria({ role: 'progressbar' }) @adoptedStyle(styles) diff --git a/packages/gem-book/src/element/elements/main.ts b/packages/gem-book/src/element/elements/main.ts index 08d90085..90a4ed36 100644 --- a/packages/gem-book/src/element/elements/main.ts +++ b/packages/gem-book/src/element/elements/main.ts @@ -2,7 +2,6 @@ import { html, GemElement, customElement, - css, property, createCSSSheet, adoptedStyle, @@ -25,7 +24,7 @@ import '@mantou/gem/elements/unsafe'; import '@mantou/gem/elements/link'; import './pre'; -const style = createCSSSheet(css` +const style = createCSSSheet` /** * 未定义元素提醒 * https://github.com/w3c/csswg-drafts/issues/9712 @@ -205,7 +204,7 @@ const style = createCSSSheet(css` ${tableStyle} ${headingStyle} ${blockquoteStyle} -`); +`; @customElement('gem-book-main') @adoptedStyle(style) diff --git a/packages/gem-book/src/element/elements/nav-logo.ts b/packages/gem-book/src/element/elements/nav-logo.ts index 660f499f..3ee4dbf0 100644 --- a/packages/gem-book/src/element/elements/nav-logo.ts +++ b/packages/gem-book/src/element/elements/nav-logo.ts @@ -1,11 +1,11 @@ -import { GemElement, html, customElement, connectStore, createCSSSheet, css, adoptedStyle } from '@mantou/gem'; +import { GemElement, html, customElement, connectStore, createCSSSheet, adoptedStyle } from '@mantou/gem'; import { mediaQuery } from '@mantou/gem/helper/mediaquery'; import { bookStore } from '../store'; import { theme } from '../helper/theme'; import { GemBookElement } from '..'; -const styles = createCSSSheet(css` +const styles = createCSSSheet` :scope:where(:not([hidden])) { height: ${theme.headerHeight}; font-size: 1.2rem; @@ -35,11 +35,8 @@ const styles = createCSSSheet(css` display: none; } } -`); +`; -/** - * @customElement gem-book-nav-logo - */ @customElement('gem-book-nav-logo') @connectStore(bookStore) @adoptedStyle(styles) diff --git a/packages/gem-book/src/element/elements/nav.ts b/packages/gem-book/src/element/elements/nav.ts index 3806c2ac..a748bc51 100644 --- a/packages/gem-book/src/element/elements/nav.ts +++ b/packages/gem-book/src/element/elements/nav.ts @@ -10,7 +10,6 @@ import { history, state, createCSSSheet, - css, adoptedStyle, effect, aria, @@ -29,7 +28,7 @@ import '@mantou/gem/elements/link'; import '@mantou/gem/elements/use'; import './nav-logo'; -const styles = createCSSSheet(css` +const styles = createCSSSheet` :scope { display: flex; box-sizing: border-box; @@ -128,13 +127,8 @@ const styles = createCSSSheet(css` display: none; } } -`); +`; -/** - * @attr tl - * @attr icon - * @attr github - */ @customElement('gem-book-nav') @connectStore(bookStore) @connectStore(sidebarStore) diff --git a/packages/gem-book/src/element/elements/pre.ts b/packages/gem-book/src/element/elements/pre.ts index 3520e709..9490fc54 100644 --- a/packages/gem-book/src/element/elements/pre.ts +++ b/packages/gem-book/src/element/elements/pre.ts @@ -8,7 +8,6 @@ import { html, adoptedStyle, createCSSSheet, - css, styleMap, mounted, memo, @@ -246,7 +245,7 @@ const IGNORE_LINE = 2; const LINE_HEIGHT = '24px'; const PADDING = '1em'; -const styles = createCSSSheet(css` +const styles = createCSSSheet` :host([status='hidden']) { display: none; } @@ -443,11 +442,8 @@ const styles = createCSSSheet(css` display: none; } } -`); +`; -/** - * @customElement gem-book-pre - */ @customElement('gem-book-pre') @adoptedStyle(styles) @shadow() diff --git a/packages/gem-book/src/element/elements/rel-link.ts b/packages/gem-book/src/element/elements/rel-link.ts index 9c4b1386..1e5f9439 100644 --- a/packages/gem-book/src/element/elements/rel-link.ts +++ b/packages/gem-book/src/element/elements/rel-link.ts @@ -6,7 +6,6 @@ import { property, adoptedStyle, createCSSSheet, - css, aria, } from '@mantou/gem'; import { mediaQuery } from '@mantou/gem/helper/mediaquery'; @@ -18,7 +17,7 @@ import { bookStore } from '../store'; import '@mantou/gem/elements/link'; -const styles = createCSSSheet(css` +const styles = createCSSSheet` :scope:where(:not([hidden])) { display: flex; flex-wrap: wrap; @@ -54,7 +53,7 @@ const styles = createCSSSheet(css` width: 100%; } } -`); +`; @customElement('gem-book-rel-link') @connectStore(bookStore) diff --git a/packages/gem-book/src/element/elements/side-link.ts b/packages/gem-book/src/element/elements/side-link.ts index 80338a84..53e62a77 100644 --- a/packages/gem-book/src/element/elements/side-link.ts +++ b/packages/gem-book/src/element/elements/side-link.ts @@ -3,9 +3,6 @@ import { GemActiveLinkElement } from '@mantou/gem/elements/link'; import { locationStore } from '../store'; -/** - * @customElement gem-book-side-link - */ @customElement('gem-book-side-link') @connectStore(locationStore) export class GemBookSideLinkElement extends GemActiveLinkElement { diff --git a/packages/gem-book/src/element/elements/sidebar.ts b/packages/gem-book/src/element/elements/sidebar.ts index af211375..ed7fc2ab 100644 --- a/packages/gem-book/src/element/elements/sidebar.ts +++ b/packages/gem-book/src/element/elements/sidebar.ts @@ -8,7 +8,6 @@ import { state, connect, createStore, - css, createCSSSheet, adoptedStyle, effect, @@ -34,7 +33,7 @@ import './nav-logo'; export const sidebarStore = createStore({ open: false }); -const styles = createCSSSheet(css` +const styles = createCSSSheet` :scope { display: flex; flex-direction: column; @@ -188,7 +187,7 @@ const styles = createCSSSheet(css` display: none; } } -`); +`; @customElement('gem-book-sidebar') @connectStore(bookStore) diff --git a/packages/gem-book/src/element/elements/toc.ts b/packages/gem-book/src/element/elements/toc.ts index 4560dd66..9a9d07d8 100644 --- a/packages/gem-book/src/element/elements/toc.ts +++ b/packages/gem-book/src/element/elements/toc.ts @@ -6,7 +6,6 @@ import { classMap, createStore, createCSSSheet, - css, adoptedStyle, createState, unmounted, @@ -22,7 +21,7 @@ export const tocStore = createStore({ elements: [] as HTMLHeadingElement[], }); -const styles = createCSSSheet(css` +const styles = createCSSSheet` :scope { font-size: 0.875rem; padding: 2rem 1.5rem; @@ -61,15 +60,12 @@ const styles = createCSSSheet(css` opacity: 1; color: ${theme.primaryColor}; } -`); +`; type State = { current?: Element; }; -/** - * @customElement gem-book-toc - */ @customElement('gem-book-toc') @connectStore(tocStore) @adoptedStyle(styles) diff --git a/packages/gem-book/src/element/index.ts b/packages/gem-book/src/element/index.ts index ba91d6c4..bc8d6eb3 100644 --- a/packages/gem-book/src/element/index.ts +++ b/packages/gem-book/src/element/index.ts @@ -12,7 +12,6 @@ import { state, createRef, boolattribute, - css, adoptedStyle, createCSSSheet, kebabToCamelCase, @@ -45,7 +44,7 @@ import './elements/rel-link'; import './elements/meta'; import './elements/toc'; -const styles = createCSSSheet(css` +const styles = createCSSSheet` :scope { display: grid; grid-template-areas: 'aside content toc'; @@ -152,14 +151,8 @@ const styles = createCSSSheet(css` } } } -`); +`; -/** - * @custom-element gem-book - * @prop {BookConfig} config - * @prop {Theme} theme - * @attr src - */ @customElement('gem-book') @connectStore(bookStore) @adoptedStyle(styles) diff --git a/packages/gem-book/src/element/lib/renderer.ts b/packages/gem-book/src/element/lib/renderer.ts index 64bc862b..310196e7 100644 --- a/packages/gem-book/src/element/lib/renderer.ts +++ b/packages/gem-book/src/element/lib/renderer.ts @@ -1,4 +1,4 @@ -import { html, css, connect } from '@mantou/gem'; +import { html, connect } from '@mantou/gem'; import { Renderer, parse } from 'marked'; import { icons } from '../elements/icons'; @@ -106,7 +106,7 @@ export function parseMarkdown(mdBody: string) { return [...parser.parseFromString(parse(mdBody, { renderer: currentRenderer }), 'text/html').body.children]; } -export const blockquoteStyle = css` +export const blockquoteStyle = /*css*/ ` blockquote { --highlight: ${theme.textColor}; border-left: ${theme.normalRound} solid rgb(from var(--highlight) r g b / 0.05); @@ -148,7 +148,7 @@ export const blockquoteStyle = css` } `; -export const headingStyle = css` +export const headingStyle = /*css*/ ` .header-anchor { font-size: 0.75em; margin-inline-start: 0.25em; @@ -165,7 +165,7 @@ export const headingStyle = css` } `; -export const tableStyle = css` +export const tableStyle = /*css*/ ` .table-wrap { margin: 2rem 0; width: max-content; @@ -203,7 +203,7 @@ export const tableStyle = css` } `; -export const linkStyle = css` +export const linkStyle = /*css*/ ` .link { color: ${theme.primaryColor}; text-decoration: none; @@ -221,7 +221,7 @@ export const linkStyle = css` export function unsafeRenderHTML(s: string, style = '') { const htmlStr = parse(s, { renderer: currentRenderer }); // 只包含链接样式 - const cssStr = css` + const cssStr = /*css*/ ` ${linkStyle} ${style} `; diff --git a/packages/gem-book/src/plugins/api.ts b/packages/gem-book/src/plugins/api.ts index 0812c34d..d73b3dc3 100644 --- a/packages/gem-book/src/plugins/api.ts +++ b/packages/gem-book/src/plugins/api.ts @@ -16,7 +16,6 @@ const { attribute, numattribute, createCSSSheet, - css, adoptedStyle, effect, kebabToCamelCase, @@ -24,7 +23,7 @@ const { light, } = Gem; -const styles = createCSSSheet(css` +const styles = createCSSSheet` table { tr td:first-of-type { white-space: nowrap; @@ -36,7 +35,7 @@ const styles = createCSSSheet(css` .error { color: ${theme.cautionColor}; } -`); +`; @customElement('gbp-api') @adoptedStyle(styles) diff --git a/packages/gem-book/src/plugins/code-group.ts b/packages/gem-book/src/plugins/code-group.ts index d5a6fd68..a1badbf3 100644 --- a/packages/gem-book/src/plugins/code-group.ts +++ b/packages/gem-book/src/plugins/code-group.ts @@ -16,9 +16,9 @@ type State = { const { GemBookPluginElement } = (await customElements.whenDefined('gem-book')) as typeof GemBookElement; const { Gem, theme, icons } = GemBookPluginElement; -const { html, customElement, adoptedStyle, css, createCSSSheet, classMap, shadow, createState, willMount } = Gem; +const { html, customElement, adoptedStyle, createCSSSheet, classMap, shadow, createState, willMount } = Gem; -const style = createCSSSheet(css` +const style = createCSSSheet` :host { display: block; border-radius: ${theme.normalRound}; @@ -70,7 +70,7 @@ const style = createCSSSheet(css` margin: 0 !important; border-radius: 0 !important; } -`); +`; @customElement('gbp-code-group') @adoptedStyle(style) diff --git a/packages/gem-book/src/plugins/comment.ts b/packages/gem-book/src/plugins/comment.ts index e53252f2..8953eee7 100644 --- a/packages/gem-book/src/plugins/comment.ts +++ b/packages/gem-book/src/plugins/comment.ts @@ -5,9 +5,9 @@ const gitalkCSSUrl = 'https://esm.sh/gitalk@1.7.2/dist/gitalk.css'; const { GemBookPluginElement } = (await customElements.whenDefined('gem-book')) as typeof GemBookElement; const { config, Gem, theme, locationStore } = GemBookPluginElement; -const { html, customElement, attribute, connectStore, shadow, adoptedStyle, css, createCSSSheet, effect } = Gem; +const { html, customElement, attribute, connectStore, shadow, adoptedStyle, createCSSSheet, effect } = Gem; -const style = createCSSSheet(css` +const style = createCSSSheet` :host { display: contents; } @@ -49,7 +49,7 @@ const style = createCSSSheet(css` .gt-container .gt-comment-content { background: rgb(from ${theme.primaryColor} r g b / 0.05); } -`); +`; @customElement('gbp-comment') @connectStore(locationStore) @adoptedStyle(style) diff --git a/packages/gem-book/src/plugins/docsearch.ts b/packages/gem-book/src/plugins/docsearch.ts index 5bc5401c..f7a7eb30 100644 --- a/packages/gem-book/src/plugins/docsearch.ts +++ b/packages/gem-book/src/plugins/docsearch.ts @@ -61,14 +61,13 @@ const { createRef, property, createCSSSheet, - css, adoptedStyle, createState, effect, mounted, } = Gem; -const styles = createCSSSheet(css` +const styles = createCSSSheet` :scope { display: block; } @@ -117,7 +116,7 @@ const styles = createCSSSheet(css` margin-inline: 0; } } -`); +`; @customElement('gbp-docsearch') @adoptedStyle(styles) diff --git a/packages/gem-book/src/plugins/example.ts b/packages/gem-book/src/plugins/example.ts index 0df6f57d..79ab0721 100644 --- a/packages/gem-book/src/plugins/example.ts +++ b/packages/gem-book/src/plugins/example.ts @@ -16,10 +16,9 @@ type Props = Record; const { GemBookPluginElement } = (await customElements.whenDefined('gem-book')) as typeof GemBookElement; const { Gem, theme, icons } = GemBookPluginElement; -const { html, customElement, attribute, createCSSSheet, css, adoptedStyle, styleMap, shadow, createState, mounted } = - Gem; +const { html, customElement, attribute, createCSSSheet, adoptedStyle, styleMap, shadow, createState, mounted } = Gem; -const styles = createCSSSheet(css` +const styles = createCSSSheet` :host(:where(:not([hidden]))) { display: flex; flex-direction: column; @@ -77,7 +76,7 @@ const styles = createCSSSheet(css` .inner { color: #515151; } -`); +`; @customElement('gbp-example') @adoptedStyle(styles) @shadow() diff --git a/packages/gem-book/src/plugins/media.ts b/packages/gem-book/src/plugins/media.ts index bdda6c56..eac10c14 100644 --- a/packages/gem-book/src/plugins/media.ts +++ b/packages/gem-book/src/plugins/media.ts @@ -4,9 +4,9 @@ type MediaType = 'img' | 'video' | 'audio' | 'unknown'; const { GemBookPluginElement } = (await customElements.whenDefined('gem-book')) as typeof GemBookElement; const { Gem, theme, Utils } = GemBookPluginElement; -const { html, customElement, attribute, state, createCSSSheet, css, adoptedStyle } = Gem; +const { html, customElement, attribute, state, createCSSSheet, adoptedStyle } = Gem; -const styles = createCSSSheet(css` +const styles = createCSSSheet` :scope { display: block; overflow: hidden; @@ -28,7 +28,7 @@ const styles = createCSSSheet(css` background: ${theme.borderColor}; border-radius: ${theme.normalRound}; } -`); +`; @customElement('gbp-media') @adoptedStyle(styles) diff --git a/packages/gem-book/src/plugins/raw.ts b/packages/gem-book/src/plugins/raw.ts index 8af657bd..5cd146d9 100644 --- a/packages/gem-book/src/plugins/raw.ts +++ b/packages/gem-book/src/plugins/raw.ts @@ -7,9 +7,9 @@ type State = { const { GemBookPluginElement } = (await customElements.whenDefined('gem-book')) as typeof GemBookElement; const { Gem, theme, Utils } = GemBookPluginElement; -const { attribute, customElement, html, createCSSSheet, css, adoptedStyle, createState, effect } = Gem; +const { attribute, customElement, html, createCSSSheet, adoptedStyle, createState, effect } = Gem; -const style = createCSSSheet(css` +const style = createCSSSheet` :scope { display: contents; } @@ -40,7 +40,7 @@ const style = createCSSSheet(css` opacity: 1; } } -`); +`; @customElement('gbp-raw') @adoptedStyle(style) diff --git a/packages/gem-book/src/plugins/sandpack.ts b/packages/gem-book/src/plugins/sandpack.ts index 7d61208a..e4804062 100644 --- a/packages/gem-book/src/plugins/sandpack.ts +++ b/packages/gem-book/src/plugins/sandpack.ts @@ -73,7 +73,6 @@ const { attribute, boolattribute, adoptedStyle, - css, createCSSSheet, classMap, shadow, @@ -82,7 +81,7 @@ const { mounted, } = GemBookPluginElement.Gem; -const styles = createCSSSheet(css` +const styles = createCSSSheet` :host { display: block; container-type: inline-size; @@ -190,7 +189,7 @@ const styles = createCSSSheet(css` height: 35vh; } } -`); +`; @customElement('gbp-sandpack') @adoptedStyle(styles) diff --git a/packages/gem-book/src/website/index.ts b/packages/gem-book/src/website/index.ts index 6787eff2..cb4199c6 100644 --- a/packages/gem-book/src/website/index.ts +++ b/packages/gem-book/src/website/index.ts @@ -1,4 +1,4 @@ -import { css, history } from '@mantou/gem'; +import { history } from '@mantou/gem'; import { logger } from '@mantou/gem/helper/logger'; import { GemBookElement } from '../element'; @@ -62,7 +62,7 @@ book.dev = dev; document.body.append(book); const style = document.createElement('style'); -style.textContent = css` +style.textContent = /*css*/ ` ::selection, ::target-text { color: ${defaultTheme.backgroundColor}; diff --git a/packages/gem-devtools/src/elements/header.ts b/packages/gem-devtools/src/elements/header.ts index 302e77c7..087b1569 100644 --- a/packages/gem-devtools/src/elements/header.ts +++ b/packages/gem-devtools/src/elements/header.ts @@ -4,7 +4,6 @@ import { adoptedStyle, customElement, createCSSSheet, - css, connectStore, styleMap, shadow, @@ -15,7 +14,7 @@ import { configureStore } from '../store'; import { execution } from '../common'; import { getAllFrames } from '../scripts/get-all-frame'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host { display: flex; line-height: 1.5; @@ -37,11 +36,8 @@ const style = createCSSSheet(css` min-width: 4em; max-width: 10em; } -`); +`; -/** - * @customElement devtools-header - */ @customElement('devtools-header') @adoptedStyle(style) @connectStore(configureStore) diff --git a/packages/gem-devtools/src/elements/section.ts b/packages/gem-devtools/src/elements/section.ts index 98b8e7c6..d247890c 100644 --- a/packages/gem-devtools/src/elements/section.ts +++ b/packages/gem-devtools/src/elements/section.ts @@ -2,7 +2,6 @@ import { adoptedStyle, attribute, createCSSSheet, - css, customElement, GemElement, html, @@ -22,7 +21,7 @@ import { setGemPropValue } from '../scripts/set-value'; const maybeBuildInPrefix = '[[Gem?]] '; const buildInPrefix = '[[Gem]] '; -export const style = createCSSSheet(css` +export const style = createCSSSheet` :host(:not([hidden])) { display: block; line-height: 1.5; @@ -161,12 +160,8 @@ export const style = createCSSSheet(css` .element { color: ${theme.elementValueColor}; } -`); +`; -/** - * @attr name - * @attr tip - */ @customElement('devtools-section') @adoptedStyle(style) @shadow() diff --git a/packages/gem-devtools/src/elements/statistics.ts b/packages/gem-devtools/src/elements/statistics.ts index 0d62a9a3..ad6937ec 100644 --- a/packages/gem-devtools/src/elements/statistics.ts +++ b/packages/gem-devtools/src/elements/statistics.ts @@ -19,9 +19,6 @@ import { execution } from '../common'; import { style } from './section'; -/** - * @customElement devtools-statistics - */ @customElement('devtools-statistics') @adoptedStyle(style) @connectStore(panelStore) diff --git a/packages/gem-devtools/src/modules/panel.ts b/packages/gem-devtools/src/modules/panel.ts index b5fc5770..6a6c377e 100644 --- a/packages/gem-devtools/src/modules/panel.ts +++ b/packages/gem-devtools/src/modules/panel.ts @@ -1,4 +1,4 @@ -import { adoptedStyle, connectStore, createCSSSheet, css, customElement, GemElement, html, shadow } from '@mantou/gem'; +import { adoptedStyle, connectStore, createCSSSheet, customElement, GemElement, html, shadow } from '@mantou/gem'; import { panelStore } from '../store'; @@ -8,13 +8,13 @@ import '../elements/header'; const TIP = 'Only works on GemElement written with Decorator, fallback to "Unobserved Properties"'; -const style = createCSSSheet(css` +const style = createCSSSheet` :host { display: block; margin-bottom: 4em; font-size: 12px; } -`); +`; @customElement('devtools-panel') @connectStore(panelStore) diff --git a/packages/gem-examples/src/benchmark/fps.ts b/packages/gem-examples/src/benchmark/fps.ts index c40c8221..fa9927db 100644 --- a/packages/gem-examples/src/benchmark/fps.ts +++ b/packages/gem-examples/src/benchmark/fps.ts @@ -4,18 +4,17 @@ import { adoptedStyle, customElement, createCSSSheet, - css, connectStore, createStore, shadow, mounted, } from '@mantou/gem'; -export const fpsStyle = createCSSSheet(css` +export const fpsStyle = createCSSSheet` :host { font-variant-numeric: tabular-nums; } -`); +`; const store = createStore({ min: 0, @@ -55,9 +54,6 @@ const tick = () => { timer = requestAnimationFrame(tick); }; -/** - * @customElement nesbox-fps - */ @customElement('nesbox-fps') @adoptedStyle(fpsStyle) @connectStore(store) diff --git a/packages/gem-examples/src/benchmark/index.ts b/packages/gem-examples/src/benchmark/index.ts index a320f229..6595ef18 100644 --- a/packages/gem-examples/src/benchmark/index.ts +++ b/packages/gem-examples/src/benchmark/index.ts @@ -7,7 +7,6 @@ import { attribute, numattribute, createCSSSheet, - css, adoptedStyle, createRef, repeat, @@ -46,7 +45,7 @@ export class Pixel extends GemElement { } } -const style = createCSSSheet(css` +const style = createCSSSheet` :host { display: grid; place-items: center; @@ -69,7 +68,7 @@ const style = createCSSSheet(css` .grid { display: grid; } -`); +`; @customElement('app-root') @adoptedStyle(style) diff --git a/packages/gem-examples/src/life-cycle/children.ts b/packages/gem-examples/src/life-cycle/children.ts index de1f6dc3..d527c34b 100644 --- a/packages/gem-examples/src/life-cycle/children.ts +++ b/packages/gem-examples/src/life-cycle/children.ts @@ -39,17 +39,6 @@ export class Descendant extends GemElement { } } -/** - * @attr first-name - * @attr last-name - * @attr count - * @attr disabled - * @fires say-hi - * @fires load - * @state odd - * @slot light - * @part paragraph - */ @customElement('app-children') @shadow() export class Children extends GemElement { diff --git a/packages/gem-examples/src/life-cycle/index.ts b/packages/gem-examples/src/life-cycle/index.ts index 60d63a18..80a2daf2 100644 --- a/packages/gem-examples/src/life-cycle/index.ts +++ b/packages/gem-examples/src/life-cycle/index.ts @@ -7,7 +7,6 @@ import { connectStore, customElement, adoptedStyle, - css, render, createStore, mounted, @@ -29,11 +28,11 @@ const store = createStore({ now: new Date(), }); -const styles = createCSSSheet(css` +const styles = createCSSSheet` h1 { text-decoration: underline; } -`); +`; @connectStore(store) @adoptedStyle(styles) diff --git a/packages/gem-examples/src/scope/index.ts b/packages/gem-examples/src/scope/index.ts index f9df30b3..5ee41b44 100644 --- a/packages/gem-examples/src/scope/index.ts +++ b/packages/gem-examples/src/scope/index.ts @@ -1,12 +1,12 @@ -import { GemElement, adoptedStyle, createCSSSheet, css, customElement, html, render, shadow } from '@mantou/gem'; +import { GemElement, adoptedStyle, createCSSSheet, customElement, html, render, shadow } from '@mantou/gem'; import '../elements/layout'; -const closedStyles = createCSSSheet(css` +const closedStyles = createCSSSheet` div { color: red; } -`); +`; @shadow({ mode: 'closed' }) @adoptedStyle(closedStyles) @customElement('closed-shadow-dom') @@ -23,14 +23,14 @@ class _OtherElement extends GemElement { } } -const style = createCSSSheet(css` +const style = createCSSSheet` :scope { font-style: italic; } p { text-decoration: underline; } -`); +`; @customElement('app-root') @adoptedStyle(style) diff --git a/packages/gem-examples/src/styled/index.ts b/packages/gem-examples/src/styled/index.ts index 4eb9f2cd..7cec0aaa 100644 --- a/packages/gem-examples/src/styled/index.ts +++ b/packages/gem-examples/src/styled/index.ts @@ -3,10 +3,10 @@ import { GemElement, html, styled, createCSSSheet, render, adoptedStyle, customE import '../elements/layout'; const styles = createCSSSheet({ - $: styled.class` + $: styled` font-style: italic; `, - div: styled.class` + div: styled` color: blue; &:hover { color: red; @@ -15,7 +15,7 @@ const styles = createCSSSheet({ }); const styles2 = createCSSSheet({ - [styles.div]: styled.class` + [styles.div]: styled` font-weight: bold; font-size: 2em; `, diff --git a/packages/gem-examples/src/theme/index.ts b/packages/gem-examples/src/theme/index.ts index c6b5d153..2d9da455 100644 --- a/packages/gem-examples/src/theme/index.ts +++ b/packages/gem-examples/src/theme/index.ts @@ -5,7 +5,6 @@ import { customElement, connectStore, createCSSSheet, - css, adoptedStyle, styleMap, } from '@mantou/gem'; @@ -38,16 +37,16 @@ document.onclick = () => { }); }; -const style = createCSSSheet(css` +const style = createCSSSheet` div { color: ${scopedTheme.color}; border: 2px solid ${scopedTheme.borderColor}; } -`); +`; const printStyle = createCSSSheet( mediaQuery.PRINT, - css` + ` div { border: 2px solid ${printTheme.borderColor}; } diff --git a/packages/gem/docs/en/001-guide/001-basic/006-styled-element.md b/packages/gem/docs/en/001-guide/001-basic/006-styled-element.md index 56999886..7b5cece7 100644 --- a/packages/gem/docs/en/001-guide/001-basic/006-styled-element.md +++ b/packages/gem/docs/en/001-guide/001-basic/006-styled-element.md @@ -126,11 +126,11 @@ class MyElement extends GemElement { > > ```js > GemLinkElement[Symbol.metadata].adoptedStyleSheets.push( -> createCSSSheet(css` +> createCSSSheet` > * { > font-style: italic; > } -> `), +> `, > ); > ``` diff --git a/packages/gem/docs/en/001-guide/002-advance/003-theme.md b/packages/gem/docs/en/001-guide/002-advance/003-theme.md index 460300c8..351efb9c 100644 --- a/packages/gem/docs/en/001-guide/002-advance/003-theme.md +++ b/packages/gem/docs/en/001-guide/002-advance/003-theme.md @@ -109,11 +109,11 @@ import { createDecoratorTheme } from '@mantou/gem/helper/theme'; const elementTheme = createDecoratorTheme({ color: '' }); -const style = createCSSSheet(css` +const style = createCSSSheet` :host(:where(:not([hidden]))) { border-color: ${elementTheme.color}; } -`); +`; @customElement('app-root') class App extends GemElement { diff --git a/packages/gem/docs/en/003-api/008-utils.md b/packages/gem/docs/en/003-api/008-utils.md index f727a1ee..d5a02d4b 100644 --- a/packages/gem/docs/en/003-api/008-utils.md +++ b/packages/gem/docs/en/003-api/008-utils.md @@ -4,8 +4,6 @@ Some frequently used functions | name | description | | ---------- | ------------------------------------------------------------------------- | -| `css` | Template string label function, only use for CSS text syntax highlighting | -| `raw` | Template string tag function, only use for HTML text syntax highlighting | | `styled` | A collection of template string label functions, provide CSS highlighting | | `styleMap` | Convert objects into `style` attribute | | `classMap` | Convert objects into `class` attribute | diff --git a/packages/gem/docs/en/004-blog/001-create-standard-element.md b/packages/gem/docs/en/004-blog/001-create-standard-element.md index 1a76d583..a41ba2e9 100644 --- a/packages/gem/docs/en/004-blog/001-create-standard-element.md +++ b/packages/gem/docs/en/004-blog/001-create-standard-element.md @@ -167,11 +167,11 @@ class MyElement extends GemElement { This is equivalent to creating a `