Closed #78

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

@@ -18,7 +18,7 @@ const style = createCSSSheet(css`
  color: var(--color, inherit);
  border-radius: ${theme.normalRound};
  }
- :host(:where(:hover, :--active, [data-active])) {
+ :host(:where(:hover, :--active, :state(active))) {
  color: var(--color, ${theme.primaryColor});
  text-decoration: underline;
  }

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

@@ -37,7 +37,7 @@ const style = createCSSSheet(css`
  justify-content: center;
  font-size: 0.75em;
  }
- :host(:where(:--loading, [data-loading], :--no-data, [data-nodata])) {
+ :host(:where(:--loading, :state(loading), :--no-data, :state(nodata))) {
  aspect-ratio: 2 / 1;
  }
  svg {

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

@@ -21,33 +21,33 @@ const style = createCSSSheet(css`
  --mask-start: var(--mask-top);
  --mask-end: var(--mask-bottom);
  }
- :host(:where(:--top-overflow, [data-topoverflow])) {
+ :host(:where(:--top-overflow, :state(top-overflow))) {
  --mask-top: var(--mask-width);
  }
- :host(:where(:--bottom-overflow, [data-bottomoverflow])) {
+ :host(:where(:--bottom-overflow, :state(bottom-overflow))) {
  --mask-bottom: calc(100% - var(--mask-width));
  }
- :host(:where(:--left-overflow, [data-leftoverflow], :--right-overflow, [data-rightoverflow])) {
+ :host(:where(:--left-overflow, :state(left-overflow), :--right-overflow, :state(right-overflow))) {
  --mask-dir: right;
  --mask-start: var(--mask-left);
  --mask-end: var(--mask-right);
  }
- :host(:where(:--left-overflow, [data-leftoverflow])) {
+ :host(:where(:--left-overflow, :state(left-overflow))) {
  --mask-left: var(--mask-width);
  }
- :host(:where(:--right-overflow, [data-rightoverflow])) {
+ :host(:where(:--right-overflow, :state(right-overflow))) {
  --mask-right: calc(100% - var(--mask-width));
  }
  :host(
  :where(
  :--top-overflow,
- [data-topoverflow],
+ :state(top-overflow),
  :--bottom-overflow,
- [data-bottomoverflow],
+ :state(bottom-overflow),
  :--left-overflow,
- [data-leftoverflow],
+ :state(left-overflow),
  :--right-overflow,
- [data-rightoverflow]
+ :state(right-overflow)
  )
  ) {
  --m: linear-gradient(to var(--mask-dir), #fff0, #000 var(--mask-start), #000 var(--mask-end), #fff0 100%);

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

@@ -96,9 +96,9 @@ const style = createCSSSheet(css`
  --bg: ${theme.disabledColor};
  }
  :where(
- :host(:where(:--active, [data-active])) .content,
+ :host(:where(:--active, :state(active))) .content,
  .content:where(:hover),
- .dropdown:where(:hover, :--active, [data-active])
+ .dropdown:where(:hover, :--active, :state(active))
  )::after {
  content: '';
  position: absolute;

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

@@ -68,7 +68,7 @@ const style = createCSSSheet(css`
  border-radius: ${theme.normalRound};
  align-self: center;
  }
- .actions:where(:hover, :--active, [data-active]) {
+ .actions:where(:hover, :--active, :state(active)) {
  background-color: ${theme.hoverBackgroundColor};
  }
  slot[name='body']::slotted(*) {

packages/duoyun-ui/src/elements/drop-area.ts

@@ -33,7 +33,7 @@ const style = createCSSSheet(css`
  display: none;
  pointer-events: none;
  }
- :host(:where(:--allow-drop, [data-allowdrop])) .content {
+ :host(:where(:--allow-drop, :state(allow-drop))) .content {
  display: block;
  }
  .tip {

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

@@ -73,7 +73,7 @@ const formStyle = createCSSSheet(css`
  dy-form-item[type='checkbox'] {
  flex-grow: 0;
  }
- dy-form-item:where(:--invalid, [data-invalid]) * {
+ dy-form-item:where(:--invalid, :state(invalid)) * {
  border-color: ${theme.negativeColor};
  }
  dy-form-item-inline-group {
@@ -175,7 +175,7 @@ const formItemStyle = createCSSSheet(css`
  .label:empty {
  display: none;
  }
- :host(:where(:--invalid, [data-invalid])) .input {
+ :host(:where(:--invalid, :state(invalid))) .input {
  border-color: ${theme.negativeColor};
  }
  .input {
@@ -191,11 +191,6 @@ const formItemStyle = createCSSSheet(css`
  flex-direction: row;
  align-items: center;
  }
- :host([type='checkbox']) .lable {
- flex-direction: row;
- align-items: center;
- margin-bottom: 0;
- }
 `);
 
 type FormItemState = {
@@ -517,7 +512,7 @@ export class DuoyunFormItemElement extends GemElement<FormItemState> {
  if (rule.required && (!this.value || (Array.isArray(this.value) && !this.value.length))) {
  invalidMessage = rule.message || locale.requiredMeg;
  } else if (rule.pattern && !new RegExp(rule.pattern).test(String(this.value || ''))) {
- invalidMessage = rule.message || locale.ptternMsg;
+ invalidMessage = rule.message || locale.patternMsg;
  } else if (rule.validator) {
  try {
  await rule.validator(this.value);

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

@@ -99,7 +99,10 @@ const style = createCSSSheet(css`
  resize: none;
  }
  .input::-webkit-calendar-picker-indicator,
- .input::-webkit-search-cancel-button {
+ .input::-webkit-search-decoration,
+ .input::-webkit-search-cancel-button,
+ .input::-webkit-search-results-button,
+ .input::-webkit-search-results-decoration {
  display: none !important;
  }
  .icon,
@@ -408,7 +411,7 @@ const inputGroupStyle = createCSSSheet(css`
  dy-input-group {
  display: flex;
  }
- dy-input-group :where(dy-input, dy-select):where(:focus, :focus-within, :hover, :--active, [data-active]) {
+ dy-input-group :where(dy-input, dy-select):where(:focus, :focus-within, :hover, :--active, :state(active)) {
  position: relative;
  z-index: 1;
  }

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

@@ -34,7 +34,7 @@ export const pickerStyle = createCSSSheet(css`
  font-size: 0.875em;
  box-sizing: border-box;
  }
- :host(:where(:--active, [data-active])) {
+ :host(:where(:--active, :state(active))) {
  background: ${theme.lightBackgroundColor};
  }
  :host([disabled]) {
@@ -52,7 +52,7 @@ export const pickerStyle = createCSSSheet(css`
  width: 1.2em;
  color: ${theme.borderColor};
  }
- :host(:where(:hover, :--active, [data-active])) dy-use {
+ :host(:where(:hover, :--active, :state(active))) dy-use {
  color: ${theme.textColor};
  }
 `);

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

@@ -36,7 +36,7 @@ const style = createCSSSheet(css`
  :host {
  width: 15em;
  }
- :host(:where(:hover, :--active, [data-active])) {
+ :host(:where(:hover, :--active, :state(active))) {
  background: none;
  border-color: ${theme.textColor};
  }
@@ -77,7 +77,7 @@ const style = createCSSSheet(css`
  .search::part(input) {
  padding: 0;
  }
- .search:where(:--filled, [data-filled], :--composing, [data-composing]) + .value {
+ .search:where(:--filled, :state(filled), :--composing, :state(composing)) + .value {
  display: none;
  }
  .value {

packages/duoyun-ui/src/elements/side-navigation.ts

@@ -55,7 +55,7 @@ const style = createCSSSheet(css`
  .children .item {
  padding-inline-start: calc(0.75em + 1em);
  }
- .item:where(:hover, :--active, [data-active]) {
+ .item:where(:hover, :--active, :state(active)) {
  background-color: ${theme.hoverBackgroundColor};
  }
  .group {

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

@@ -48,7 +48,7 @@ const style = createCSSSheet(css`
  table-layout: fixed;
  border-collapse: collapse;
  }
- .selection:where(:--select, [data-select]) ~ table {
+ .selection:where(:--select, :state(select)) ~ table {
  user-select: none;
  }
  .selection ~ table {
@@ -103,7 +103,7 @@ const style = createCSSSheet(css`
  padding: 4px;
  border-radius: ${theme.normalRound};
  }
- .action:where(:hover, :--active, [data-active]) {
+ .action:where(:hover, :--active, :state(active)) {
  background-color: ${theme.hoverBackgroundColor};
  }
  .side {

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

@@ -175,7 +175,7 @@ const panelStyle = createCSSSheet(css`
  line-height: 1.5;
  margin-block-start: 1em;
  }
- :host(:where(:--vertical, [data-vertical])) {
+ :host(:where(:--vertical, :state(vertical))) {
  margin-inline-start: 1em;
  margin-block-start: 0em;
  }

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

@@ -27,7 +27,7 @@ const style = createCSSSheet(css`
  dy-loading {
  padding: 1em;
  }
- :host(:where(:--modal, [data-modal])) {
+ :host(:where(:--modal, :state(modal))) {
  pointer-events: all;
  background-color: rgba(0, 0, 0, ${theme.maskAlpha});
  }

packages/duoyun-ui/src/locales/en.ts

@@ -34,5 +34,5 @@ export default {
  currentOfTotal: '$1 of $2',
 
  requiredMeg: 'Please fill in the necessary field',
- ptternMsg: 'Pattern does not match',
+ patternMsg: 'Pattern does not match',
 };

packages/duoyun-ui/src/locales/zh.ts

@@ -36,7 +36,7 @@ const lang: typeof en = {
  currentOfTotal: '$1 / $2',
 
  requiredMeg: '请填写必要字段',
- ptternMsg: '格式不正确',
+ patternMsg: '格式不正确',
 };
 
 export default lang;

packages/gem-analyzer/src/index.ts

@@ -115,8 +115,8 @@ export const parseElement = (declaration: ClassDeclaration) => {
  }));
  }
 
- const staticPropertieDeclarations = declaration.getStaticProperties();
- for (const staticPropDeclaration of staticPropertieDeclarations) {
+ const staticPropertiesDeclarations = declaration.getStaticProperties();
+ for (const staticPropDeclaration of staticPropertiesDeclarations) {
  const staticPropName = staticPropDeclaration.getName();
  if (staticPropName.startsWith('#')) continue;
  const prop: StaticProperty = {
@@ -131,8 +131,8 @@ export const parseElement = (declaration: ClassDeclaration) => {
 
  let isPartOrSlot = false;
 
- const staticPorpDecorators = staticPropDeclaration.getDecorators();
- for (const decorator of staticPorpDecorators) {
+ const staticPropDecorators = staticPropDeclaration.getDecorators();
+ for (const decorator of staticPropDecorators) {
  const decoratorName = decorator.getName();
  if (slotDecoratorName.includes(decoratorName)) {
  isPartOrSlot = true;
@@ -185,8 +185,8 @@ export const parseElement = (declaration: ClassDeclaration) => {
  };
  detail.properties.push(prop);
 
- const porpDecorators = propDeclaration.getDecorators();
- for (const decorator of porpDecorators) {
+ const propDecorators = propDeclaration.getDecorators();
+ for (const decorator of propDecorators) {
  const decoratorName = decorator.getName();
  if (attrDecoratorName.includes(decoratorName)) {
  prop.reactive = true;
@@ -195,7 +195,7 @@ export const parseElement = (declaration: ClassDeclaration) => {
  } else if (propDecoratorName.includes(decoratorName)) {
  prop.reactive = true;
  } else if (stateDecoratorName.includes(decoratorName)) {
- prop.cssState = `--${camelToKebabCase(propName)}`;
+ prop.cssState = camelToKebabCase(propName);
  detail.cssStates.push(prop.cssState);
  } else if (slotDecoratorName.includes(decoratorName)) {
  prop.slot = camelToKebabCase(propName);
@@ -249,13 +249,13 @@ export const parseElement = (declaration: ClassDeclaration) => {
 export const getElements = (file: SourceFile) => {
  const result: ElementDetail[] = [];
  for (const declaration of file.getClasses()) {
- const elementDecoratior = declaration
+ const elementDeclaration = declaration
  .getDecorators()
  .find((decorator) => elementDecoratorName.includes(decorator.getName()));
- if (elementDecoratior) {
+ if (elementDeclaration) {
  const detail = {
  ...parseElement(declaration),
- name: elementDecoratior
+ name: elementDeclaration
  .getCallExpression()!
  .getArguments()[0]
  .getText()

packages/gem-book/src/element/elements/nav.ts

@@ -130,10 +130,10 @@ export class Nav extends GemElement {
  background: rgba(${theme.primaryColorRGB}, 0.1);
  }
  gem-active-link:hover,
- gem-active-link:where([data-active], :--active) {
+ gem-active-link:where(:state(active), :--active) {
  color: ${theme.primaryColor};
  }
- gem-active-link:where([data-active], :--active)::after {
+ gem-active-link:where(:state(active), :--active)::after {
  content: '';
  position: absolute;
  left: 0;

packages/gem-book/src/element/elements/sidebar.ts

@@ -95,14 +95,14 @@ export class SideBar extends GemElement {
  padding: 0.15em 0;
  color: inherit;
  }
- .file:where([data-active], :--active) {
+ .file:where(:state(active), :--active) {
  font-weight: bolder;
  }
- .link:where([data-active], :--active) + .hash {
+ .link:where(:state(active), :--active) + .hash {
  display: block;
  }
- .heading:not(:where([data-active], :--active)):not(:hover),
- .file:not(:where([data-active], :--active)):hover {
+ .heading:not(:where(:state(active), :--active)):not(:hover),
+ .file:not(:where(:state(active), :--active)):hover {
  opacity: 0.6;
  }
  .arrow {
@@ -166,7 +166,7 @@ export class SideBar extends GemElement {
  }
 
  updated() {
- const activeEle = this.shadowRoot?.querySelector(':where([data-active], :--active)');
+ const activeEle = this.shadowRoot?.querySelector(':where(:state(active), :--active)');
  const removeCloseClass = (e: Element | null | undefined) => {
  if (e) {
  e.classList.remove('close');

packages/gem-devtools/src/elements/panel.ts

@@ -4,7 +4,7 @@ import { panelStore } from '../store';
 
 import './section';
 
-const TIP = 'Only works on GemElement written with TypeScript decorator, fallback to "Unobserved Propertys"';
+const TIP = 'Only works on GemElement written with TypeScript decorator, fallback to "Unobserved Properties"';
 
 @customElement('devtools-panel')
 @connectStore(panelStore)
@@ -33,7 +33,7 @@ export class Panel extends GemElement {
  }
  </style>
  <devtools-section name="Observed Attributes" .data=${panelStore.observedAttributes}></devtools-section>
- <devtools-section name="Observed Propertys" .data=${panelStore.observedPropertys}></devtools-section>
+ <devtools-section name="Observed Properties" .data=${panelStore.observedProperties}></devtools-section>
  <devtools-section name="Observed Stores" .data=${panelStore.observedStores}></devtools-section>
  <devtools-section name="Adopted Styles" .data=${panelStore.adoptedStyles}></devtools-section>
  <devtools-section
@@ -49,7 +49,7 @@ export class Panel extends GemElement {
  <devtools-section name="Lifecycle Method" .data=${panelStore.lifecycleMethod}></devtools-section>
  <devtools-section name="Method" .data=${panelStore.method}></devtools-section>
  <devtools-section name="Unobserved Attributes" .data=${panelStore.attributes}></devtools-section>
- <devtools-section name="Unobserved Propertys" .data=${panelStore.propertys}></devtools-section>
+ <devtools-section name="Unobserved Properties" .data=${panelStore.properties}></devtools-section>
  <devtools-section name="Class Static Member" .data=${panelStore.staticMember}></devtools-section>
  `;
  }