简化space组件;完成slider组件重构

src/slider/index.js

@@ -4,7 +4,7 @@
  * @date 2023/04/28 16:14:10
  */
 
-import { css, html, Component, range } from 'wkit'
+import { css, html, Component, bind, unbind, range, offset } from 'wkit'
 
 class Slider extends Component {
   static props = {
@@ -38,6 +38,7 @@ class Slider extends Component {
       }
     },
     vertical: false,
+    range: false,
     disabled: false
   }
 
@@ -53,7 +54,6 @@ class Slider extends Component {
         display: flex;
         align-items: center;
         width: 100%;
-        min-height: 32px;
       }
 
       .container {
@@ -83,9 +83,9 @@ class Slider extends Component {
     // vertical
     css`
       :host([vertical]) {
-        width: auto;
+        width: 32px;
         height: 100%;
-        align-items: flex-end;
+        justify-content: center;
 
         .container {
           width: var(--line-width);
@@ -127,7 +127,6 @@ class Slider extends Component {
         position: absolute;
         left: 0;
         top: calc((32px - var(--line-width)) / -2);
-        z-index: 2;
         width: 32px;
         height: 32px;
         padding: 7px;
@@ -187,6 +186,23 @@ class Slider extends Component {
           }
         }
       }
+      :host([hide-thumb]) {
+        .thumb::before {
+          display: none;
+        }
+      }
+    `,
+    // disabled
+    css`
+      :host([disabled]) {
+        cursor: not-allowed;
+        opacity: 0.6;
+
+        .thumb::before {
+          cursor: not-allowed;
+          transform: unset;
+        }
+      }
     `
   ]
 
@@ -224,18 +240,44 @@ class Slider extends Component {
   }
 
   #seek(ev) {
-    let { clientWidth, clientHeight } = ev.target
+    let { clientWidth: w, clientHeight: h } = ev.target
     let { min, max, step } = this
     let val = 0
+
     if (this.vertical) {
-      val = (clientHeight - ev.offsetY) / clientHeight
+      val = (h - ev.y) / h
     } else {
-      val = ev.offsetX / clientWidth
+      val = ev.x / w
     }
     val *= this.#len
     val += min
 
     this.value = this.#fix(val)
+    this.$emit('input')
+  }
+
+  #mousedown(ev) {
+    let target = ev.currentTarget
+    let doc = document
+    let opts = { once: true }
+    let { left, top } = offset(target)
+    let { scrollLeft, scrollTop } = document.documentElement
+    let _x = left - scrollLeft
+    let _y = top - scrollTop
+
+    if (this.disabled) {
+      return
+    }
+
+    this.#seek({ target, x: ev.x - _x, y: ev.y - _y })
+
+    let callback = bind(doc, 'mousemove', ({ x, y }) => {
+      x -= _x
+      y -= _y
+      this.#seek({ target, x, y })
+    })
+
+    bind(doc, 'mouseup', _ => unbind(doc, 'mousemove', callback), opts)
   }
 
   get #activeStyle() {
@@ -256,17 +298,13 @@ class Slider extends Component {
     let n = this.hasAttribute('show-stops') ? this.#stops : 1
 
     return html`
-      <main class="container">
+      <main class="container" @mousedown=${this.#mousedown}>
         <div class="slider-bar">
           ${range(1, n).map(i => {
             return html`<i style="left:${i * this.#point}%"></i>`
           })}
         </div>
-        <div
+        <div class="slider-bar" style=${this.#activeStyle}></div>
-          class="slider-bar"
-          style=${this.#activeStyle}
-          @click=${this.#seek}
-        ></div>
 
         <div class="thumb" style=${this.#thumbStyle}>
           <mark class="value">${this.value}</mark>

src/space/index.js

@@ -8,18 +8,17 @@ import { css, html, Component } from 'wkit'
 
 class Space extends Component {
   static styles = css`
-    @use 'sass:math';
-
     :host {
       display: block;
     }
     .container {
+      --gaps: var(--wc-space-gap, 12px);
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       width: 100%;
-      padding: 6px 0;
+      padding: calc(var(--gaps) / 2) 0;
-      gap: 12px;
+      gap: var(--gaps);
     }
     :host([vertical]) {
       .container {
@@ -31,27 +30,10 @@ class Space extends Component {
         justify-content: space-between;
       }
     }
-
-    $gaps: (
-      's': 4px,
-      'm': 8px,
-      'l': 12px,
-      'xl': 16px,
-      'xxl': 20px,
-      'xxxl': 24px
-    );
-    @loop $k, $v in $gaps {
-      :host([gap='#{$k}']) {
-        .container {
-          padding: math.div($v, 2) 0;
-          gap: $v;
-        }
-      }
-    }
   `
 
   render() {
-    return html`<div class="container"><slot /></div>`
+    return html`<div class="container"><slot></slot></div>`
   }
 }