Skip to content

Commit

Permalink
[gem][duoyun-ui] Remove css state compatible mode
Browse files Browse the repository at this point in the history
Closed #167
  • Loading branch information
mantou132 committed Jun 23, 2024
1 parent 5be1567 commit f06ab51
Show file tree
Hide file tree
Showing 31 changed files with 56 additions and 87 deletions.
2 changes: 1 addition & 1 deletion packages/duoyun-ui/docs/en/02-elements/link.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ See [`<gem-link>`](https://gemjs.org/zh/api/built-in-element)
[
{
"tagName": "style",
"innerHTML": "dy-active-link:where([data-active],:state(active)){color: red})"
"innerHTML": "dy-active-link:state(active){color: red})"
},
{
"path": "/test/test",
Expand Down
2 changes: 1 addition & 1 deletion packages/duoyun-ui/docs/zh/02-elements/link.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ See [`<gem-link>`](https://gemjs.org/zh/api/built-in-element)
[
{
"tagName": "style",
"innerHTML": "dy-active-link:where([data-active],:state(active)){color: red})"
"innerHTML": "dy-active-link:state(active){color: red})"
},
{
"path": "/test/test",
Expand Down
2 changes: 1 addition & 1 deletion packages/duoyun-ui/src/elements/action-text.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const style = createCSSSheet(css`
color: var(--color, inherit);
border-radius: ${theme.normalRound};
}
:host(:where(:hover, [data-active], :state(active))) {
:host(:where(:hover, :state(active))) {
color: var(--color, ${theme.primaryColor});
text-decoration: underline;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/duoyun-ui/src/elements/badge.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const style = createCSSSheet(css`
width: 1em;
}
@supports (anchor-name: --foo) {
:host(:where(:where([data-inline], :state(inline)):not([hidden]))) {
:host(:where(:state(inline):not([hidden]))) {
display: inline;
anchor-name: --anchor;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/duoyun-ui/src/elements/base/chart.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const style = createCSSSheet(css`
justify-content: center;
font-size: 0.75em;
}
:host(:where([data-loading], :state(loading), [data-no-data], :state(no-data))) {
:host(:where(:state(loading), :state(no-data))) {
aspect-ratio: 2 / 1;
}
svg {
Expand Down
23 changes: 6 additions & 17 deletions packages/duoyun-ui/src/elements/base/scroll.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,35 +20,24 @@ const style = createCSSSheet(css`
--mask-start: var(--mask-top);
--mask-end: var(--mask-bottom);
}
:host(:where([data-top-overflow], :state(top-overflow))) {
:host(:state(top-overflow)) {
--mask-top: var(--mask-width);
}
:host(:where([data-bottom-overflow], :state(bottom-overflow))) {
:host(:state(bottom-overflow)) {
--mask-bottom: calc(100% - var(--mask-width));
}
:host(:where([data-left-overflow], :state(left-overflow), [data-right-overflow], :state(right-overflow))) {
:host(:where(:state(left-overflow), :state(right-overflow))) {
--mask-dir: right;
--mask-start: var(--mask-left);
--mask-end: var(--mask-right);
}
:host(:where([data-left-overflow], :state(left-overflow))) {
:host(:state(left-overflow)) {
--mask-left: var(--mask-width);
}
:host(:where([data-right-overflow], :state(right-overflow))) {
:host(:state(right-overflow)) {
--mask-right: calc(100% - var(--mask-width));
}
:host(
:where(
[data-top-overflow],
:state(top-overflow),
[data-bottom-overflow],
:state(bottom-overflow),
[data-left-overflow],
:state(left-overflow),
[data-right-overflow],
:state(right-overflow)
)
) {
:host(:where(:state(top-overflow), :state(bottom-overflow), :state(left-overflow), :state(right-overflow))) {
--m: linear-gradient(to var(--mask-dir), #fff0, #000 var(--mask-start), #000 var(--mask-end), #fff0 100%);
-webkit-mask-image: var(--m);
mask-image: var(--m);
Expand Down
6 changes: 1 addition & 5 deletions packages/duoyun-ui/src/elements/button.ts
Original file line number Diff line number Diff line change
Expand Up @@ -111,11 +111,7 @@ const style = createCSSSheet(css`
cursor: not-allowed;
--bg: ${theme.disabledColor};
}
:where(
:host(:where([data-active], :state(active))) .content,
.content:where(:hover),
.dropdown:where(:hover, [data-active], :state(active))
)::after {
:where(:host(:state(active)) .content, .content:where(:hover), .dropdown:where(:hover, :state(active)))::after {
content: '';
position: absolute;
inset: -1px;
Expand Down
2 changes: 1 addition & 1 deletion packages/duoyun-ui/src/elements/card.ts
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ const style = createCSSSheet(css`
border-radius: ${theme.normalRound};
align-self: center;
}
.actions:where(:hover, [data-active], :state(active)) {
.actions:where(:hover, :state(active)) {
background-color: ${theme.hoverBackgroundColor};
}
slot[name='body']::slotted(*),
Expand Down
2 changes: 1 addition & 1 deletion packages/duoyun-ui/src/elements/drop-area.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const style = createCSSSheet(css`
display: none;
pointer-events: none;
}
:host(:where([data-allow-drop], :state(allow-drop))) .content {
:host(:state(allow-drop)) .content {
display: block;
}
.tip {
Expand Down
4 changes: 2 additions & 2 deletions packages/duoyun-ui/src/elements/form.ts
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const formStyle = createCSSSheet(css`
top: 100%;
left: 0;
}
dy-form-item:where([data-invalid], :state(invalid)) * {
dy-form-item:state(invalid) * {
border-color: ${theme.negativeColor};
}
@media not ${mediaQuery.PHONE} {
Expand Down Expand Up @@ -182,7 +182,7 @@ const formItemStyle = createCSSSheet(css`
.label:empty {
display: none;
}
:host(:where([data-invalid], :state(invalid))) .input {
:host(:state(invalid)) .input {
border-color: ${theme.negativeColor};
}
.input {
Expand Down
2 changes: 1 addition & 1 deletion packages/duoyun-ui/src/elements/input.ts
Original file line number Diff line number Diff line change
Expand Up @@ -416,7 +416,7 @@ const inputGroupStyle = createCSSSheet(css`
dy-input-group {
display: flex;
}
dy-input-group :where(dy-input, dy-select):where(:focus, :focus-within, :hover, [data-active], :state(active)) {
dy-input-group :where(dy-input, dy-select):where(:focus, :focus-within, :hover, :state(active)) {
position: relative;
z-index: 1;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/duoyun-ui/src/elements/modal.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const style = createCSSSheet(css`
align-items: center;
justify-content: center;
}
:host(:not([hidden]):where([open], :where([data-closing], :state(closing)))) {
:host(:not([hidden]):where([open], :state(closing))) {
display: flex;
}
.absolute {
Expand Down
2 changes: 1 addition & 1 deletion packages/duoyun-ui/src/elements/pagination.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const style = createCSSSheet(css`
border: 1px solid transparent;
}
.item:where(:not(.disabled, .current)):hover,
.item:where([data-active], :state(active)) {
.item:where(:state(active)) {
color: ${theme.highlightColor};
background-color: ${theme.hoverBackgroundColor};
}
Expand Down
6 changes: 3 additions & 3 deletions packages/duoyun-ui/src/elements/picker.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export const pickerStyle = createCSSSheet(css`
:host(:not([borderless], [disabled])) {
box-shadow: ${theme.controlShadow};
}
:host(:where([data-active], :state(active))) {
:host(:state(active)) {
background: ${theme.lightBackgroundColor};
}
:host([disabled]) {
Expand All @@ -59,10 +59,10 @@ export const pickerStyle = createCSSSheet(css`
width: 1.2em;
color: ${theme.borderColor};
}
:host(:not([disabled], [borderless]):where(:hover, [data-active], :state(active))) {
:host(:not([disabled], [borderless]):where(:hover, :state(active))) {
border-color: ${theme.primaryColor};
}
:host(:not([disabled]):where(:hover, [data-active], :state(active))) dy-use {
:host(:not([disabled]):where(:hover, :state(active))) dy-use {
color: ${theme.textColor};
}
`);
Expand Down
2 changes: 1 addition & 1 deletion packages/duoyun-ui/src/elements/segmented.ts
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const style = createCSSSheet(css`
border-radius: var(--inner-radius);
min-width: 5em;
}
:host(:where(:not([disabled], :where([data-animating], :state(animating))))) .segment:hover {
:host(:where(:not([disabled], :state(animating)))) .segment:hover {
background: color-mix(in srgb, ${theme.hoverBackgroundColor}, currentColor 6%);
&:active {
background: color-mix(in srgb, ${theme.hoverBackgroundColor}, currentColor 10%);
Expand Down
4 changes: 2 additions & 2 deletions packages/duoyun-ui/src/elements/select.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const style = createCSSSheet(css`
:host {
width: 15em;
}
:host(:where(:hover, [data-active], :state(active))) {
:host(:where(:hover, :state(active))) {
background: none;
border-color: ${theme.textColor};
}
Expand Down Expand Up @@ -98,7 +98,7 @@ const style = createCSSSheet(css`
.search::part(input) {
padding: 0;
}
.search:where([data-filled], :state(filled), [data-composing], :state(composing)) + .placeholder {
.search:where(:state(filled), :state(composing)) + .placeholder {
display: none;
}
`);
Expand Down
8 changes: 4 additions & 4 deletions packages/duoyun-ui/src/elements/side-navigation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -91,10 +91,10 @@ const style = createCSSSheet(css`
overflow: hidden;
text-overflow: ellipsis;
}
:host(:not(:where([data-compact], :state(:compact)))) .children .item {
:host(:not(:state(compact))) .children .item {
padding-inline-start: calc(0.75em + 1em);
}
.item:where(:hover, [data-active], :state(active)) {
.item:where(:hover, :state(active)) {
background-color: ${theme.hoverBackgroundColor};
&:active {
background: color-mix(in srgb, ${theme.hoverBackgroundColor}, currentColor 3%);
Expand All @@ -113,10 +113,10 @@ const style = createCSSSheet(css`
font-size: 0.7em;
color: ${theme.describeColor};
}
:host(:where([data-compact], :state(:compact))) :where(.group-title, .title, .title-wrap + *) {
:host(:state(compact)) :where(.group-title, .title, .title-wrap + *) {
display: none;
}
:host(:where([data-compact], :state(:compact))) :where(.item, .title-wrap) {
:host(:state(compact)) :where(.item, .title-wrap) {
justify-content: center;
}
`);
Expand Down
2 changes: 1 addition & 1 deletion packages/duoyun-ui/src/elements/table.ts
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ const styles = createCSSSheet(css`
padding: 4px;
border-radius: ${theme.normalRound};
}
.action:where(:hover, [data-active], :state(active)) {
.action:where(:hover, :state(active)) {
background-color: ${theme.hoverBackgroundColor};
}
.side {
Expand Down
2 changes: 1 addition & 1 deletion packages/duoyun-ui/src/elements/tabs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ const panelStyle = createCSSSheet(css`
line-height: 1.5;
margin-block-start: 1em;
}
:host(:where([data-vertical], :state(vertical))) {
:host(:state(vertical)) {
margin-inline-start: 1em;
margin-block-start: 0em;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/duoyun-ui/src/elements/tree.ts
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const itemStyle = createCSSSheet(css`
line-height: 2;
user-select: none;
}
:host(:where(:hover, [data-active], :state(active))) {
:host(:where(:hover, :state(active))) {
background-color: ${theme.lightBackgroundColor};
}
:host([highlight]) {
Expand Down
2 changes: 1 addition & 1 deletion packages/duoyun-ui/src/elements/wait.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const style = createCSSSheet(css`
dy-loading {
padding: 1em;
}
:host(:where([data-modal], :state(modal))) {
:host(:state(modal)) {
pointer-events: all;
background-color: rgba(0, 0, 0, ${theme.maskAlpha});
}
Expand Down
2 changes: 1 addition & 1 deletion packages/duoyun-ui/src/patterns/console.ts
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ const rules = css`
padding: 4px;
border-radius: ${theme.normalRound};
}
dy-pat-console .menu:where(:hover, :state(active), [data-active]) {
dy-pat-console .menu:where(:hover, :state(active)) {
background-color: ${theme.hoverBackgroundColor};
}
dy-pat-console .main-container {
Expand Down
10 changes: 6 additions & 4 deletions packages/duoyun-ui/src/patterns/nav.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { history } from '@mantou/gem/lib/history';
import { GemElement, TemplateResult, html, render } from '@mantou/gem/lib/element';
import { adoptedStyle, attribute, connectStore, customElement, property } from '@mantou/gem/lib/decorators';
import { adoptedStyle, attribute, connectStore, customElement, property, state } from '@mantou/gem/lib/decorators';
import { addListener, classMap, createCSSSheet, css } from '@mantou/gem/lib/utils';
import { mediaQuery } from '@mantou/gem/helper/mediaquery';

Expand Down Expand Up @@ -90,7 +90,7 @@ const style = createCSSSheet(css`
filter: drop-shadow(${theme.borderColor} 0px 0px 1px)
drop-shadow(rgba(0, 0, 0, calc(${theme.maskAlpha} - 0.1)) 0px 7px 10px);
}
dy-pat-nav:where(:not([data-switching])) :where(.navbar-item-wrap:where(:hover, :focus-within)) .dropdown {
dy-pat-nav:where(:not(:state(switching))) :where(.navbar-item-wrap:where(:hover, :focus-within)) .dropdown {
display: flex;
}
dy-pat-nav .dropdown dy-link {
Expand Down Expand Up @@ -195,13 +195,15 @@ export class DyPatNavElement extends GemElement<State> {
@property logo?: string | Element | DocumentFragment;
@property renderSlot?: (ele: Element) => TemplateResult | undefined;

@state switching: boolean;

constructor() {
super({ isLight: true });
const blur = () => {
this.setState({ drawerOpen: false });
(this.getRootNode() as any).activeElement?.blur();
this.dataset.switching = '';
setTimeout(() => delete this.dataset.switching, 60);
this.switching = true;
setTimeout(() => (this.switching = false), 60);
};
this.effect(
() => blur(),
Expand Down
8 changes: 4 additions & 4 deletions packages/gem-book/src/element/elements/nav.ts
Original file line number Diff line number Diff line change
Expand Up @@ -140,10 +140,10 @@ export class Nav extends GemElement {
width: 1em;
margin-left: 0.3rem;
}
:host(:where([data-compact], :state(compact))) .external:not(.icon) {
:host(:state(compact)) .external:not(.icon) {
display: none;
}
:host(:where([data-compact], :state(compact))) .left .item {
:host(:state(compact)) .left .item {
padding: 0 0.5rem;
}
gem-link,
Expand All @@ -155,10 +155,10 @@ export class Nav extends GemElement {
background: rgba(${theme.primaryColorRGB}, 0.1);
}
gem-active-link:not(.icon):hover,
gem-active-link:where(:state(active), [data-active]) {
gem-active-link:state(active) {
color: ${theme.primaryColor};
}
gem-active-link:where(:state(active), [data-active])::after {
gem-active-link:state(active)::after {
content: '';
position: absolute;
left: 0;
Expand Down
14 changes: 7 additions & 7 deletions packages/gem-book/src/element/elements/sidebar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export class SideBar extends GemElement {
@state open: boolean;

get #currentLink() {
return this.shadowRoot?.querySelector(':where(:state(active), [data-active])');
return this.shadowRoot?.querySelector(':state(active)');
}

#closeSidebar = () => updateSidebarStore({ open: false });
Expand Down Expand Up @@ -166,7 +166,7 @@ export class SideBar extends GemElement {
border-radius: 10em;
background: rgba(${theme.primaryColorRGB}, 0.1);
}
.top-nav gem-active-link:where(:state(active), [data-active]) {
.top-nav gem-active-link:state(active) {
color: ${theme.primaryColor};
}
.link {
Expand All @@ -176,11 +176,11 @@ export class SideBar extends GemElement {
line-height: 1.5;
padding: 0.25em 0;
}
.file:where(:state(active), [data-active]) {
.file:state(active) {
color: ${theme.primaryColor};
}
.heading:not(:where(:state(active), [data-active])):not(:hover),
.file:not(:where(:state(active), [data-active])):hover {
.heading:not(:state(active)):not(:hover),
.file:not(:state(active)):hover {
transition: opacity 0.1s;
opacity: 0.6;
}
Expand Down Expand Up @@ -251,7 +251,7 @@ export class SideBar extends GemElement {
margin-bottom: 2rem;
}
@media not ${`(${mediaQuery.DESKTOP})`} {
.link:where(:state(match), [data-match]) + .hash {
.link:state(match) + .hash {
display: block;
}
}
Expand All @@ -264,7 +264,7 @@ export class SideBar extends GemElement {
top: ${theme.headerHeight};
z-index: 3;
}
:host(:not(:where([data-open], :state(open)))) {
:host(:not(:state(open))) {
display: none;
}
.nav {
Expand Down
Loading

0 comments on commit f06ab51

Please sign in to comment.