Fixed disabled element also clear

mantou132 · Dec 4, 2023 · 35627c5 · 35627c5
1 parent 2412f32
commit 35627c5
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 12 deletions.
diff --git 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`
       <div class=${classMap({ value: true, placeholder: !this.#value })}>${this.#valueString || this.placeholder}</div>
-      <div class=${classMap({ iconwrap: true, clearable: this.clearable })}>
+      <div class=${classMap({ icon: true, clearable: this.clearable })}>
         <dy-use class="date" .element=${icons.date}></dy-use>
         <dy-use class="close" @click=${this.#onClear} .element=${icons.close}></dy-use>
       </div>

diff --git 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
@@ -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
@@ -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
@@ -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`
       <div class=${classMap({ value: true, placeholder: !this.#value })}>${this.#valueString || this.placeholder}</div>
-      <div class=${classMap({ iconwrap: true, clearable: this.clearable })}>
+      <div class=${classMap({ icon: true, clearable: this.clearable })}>
         <dy-use class="date" .element=${icons.schedule}></dy-use>
         <dy-use class="close" @click=${this.#onClear} .element=${icons.close}></dy-use>
       </div>