diff --git a/packages/duoyun-ui/src/elements/date-picker.ts b/packages/duoyun-ui/src/elements/date-picker.ts index 2ed72fb7..81ece605 100644 --- a/packages/duoyun-ui/src/elements/date-picker.ts +++ b/packages/duoyun-ui/src/elements/date-picker.ts @@ -43,14 +43,14 @@ const style = createCSSSheet(css` .placeholder { color: ${theme.describeColor}; } - .iconwrap { + .icon { display: flex; } .close, - .clearable:hover .date { + :host(:not([disabled])) .clearable:hover .date { display: none; } - .clearable:hover .close { + :host(:not([disabled])) .clearable:hover .close { display: inline-flex; } `); @@ -167,7 +167,7 @@ export class DuoyunDatePickElement extends GemElement implements BasePickerEleme render = () => { return html`
${this.#valueString || this.placeholder}
-
+
diff --git a/packages/duoyun-ui/src/elements/date-range-picker.ts b/packages/duoyun-ui/src/elements/date-range-picker.ts index b4299d3b..2c7283c0 100644 --- a/packages/duoyun-ui/src/elements/date-range-picker.ts +++ b/packages/duoyun-ui/src/elements/date-range-picker.ts @@ -45,10 +45,10 @@ const style = createCSSSheet(css` display: flex; } .close, - .clearable:hover .date { + :host(:not([disabled])) .clearable:hover .date { display: none; } - .clearable:hover .close { + :host(:not([disabled])) .clearable:hover .close { display: inline-flex; } `); diff --git a/packages/duoyun-ui/src/elements/input.ts b/packages/duoyun-ui/src/elements/input.ts index b9665fa8..6415a506 100644 --- a/packages/duoyun-ui/src/elements/input.ts +++ b/packages/duoyun-ui/src/elements/input.ts @@ -118,7 +118,7 @@ const style = createCSSSheet(css` padding-inline: 0.35em; margin-inline-start: -0.35em; } - :host(:where(:not(:focus-within, :hover))) .clear { + :host(:where([disabled], :not(:focus-within, :hover))) .clear { display: none; } .clear:hover { diff --git a/packages/duoyun-ui/src/elements/picker.ts b/packages/duoyun-ui/src/elements/picker.ts index b98e4c63..a3c47405 100644 --- a/packages/duoyun-ui/src/elements/picker.ts +++ b/packages/duoyun-ui/src/elements/picker.ts @@ -42,6 +42,9 @@ export const pickerStyle = createCSSSheet(css` border-color: transparent; background: ${theme.disabledColor}; } + :host([disabled]) dy-use { + pointer-events: none; + } :host([borderless]) { width: auto; border-color: transparent; @@ -52,7 +55,7 @@ export const pickerStyle = createCSSSheet(css` width: 1.2em; color: ${theme.borderColor}; } - :host(:where(:hover, :--active, :state(active))) dy-use { + :host(:not([disabled]):where(:hover, :--active, :state(active))) dy-use { color: ${theme.textColor}; } `); diff --git a/packages/duoyun-ui/src/elements/time-picker.ts b/packages/duoyun-ui/src/elements/time-picker.ts index d33b81a8..892a4a03 100644 --- a/packages/duoyun-ui/src/elements/time-picker.ts +++ b/packages/duoyun-ui/src/elements/time-picker.ts @@ -40,14 +40,14 @@ const style = createCSSSheet(css` .placeholder { color: ${theme.describeColor}; } - .iconwrap { + .icon { display: flex; } .close, - .clearable:hover .date { + :host(:not([disabled])) .clearable:hover .date { display: none; } - .clearable:hover .close { + :host(:not([disabled])) .clearable:hover .close { display: inline-flex; } `); @@ -148,7 +148,7 @@ export class DuoyunTimePickElement extends GemElement implements BasePickerEleme render = () => { return html`
${this.#valueString || this.placeholder}
-
+