Merge pull request #17 in YR/star-web-components from featrue-component-slider to master

* commit 'c135154f1aa5ccc3302dca25f5308942ce8060f1':
  TASK: #109540 slider测试页面、slider结构和样式以及基础功能完成。

src/components/slider/README.md

@@ -1,12 +1,38 @@
 # 滑块-Slider
 
 工作职责：
+
 - 滑块空间
 
-说明：
-- | 用途：分割位置
+## 类型包括：
 
+1. 默认滑块
 
-类型包括：
+```
+<star-slider></star-slider>
+```
 
-- 左侧图标|滑块|右侧图标
+2. 滑块中小球左侧进行填充 --- `filled`
+
+```
+<star-slider variant="filled"></star-slider>
+```
+
+3. 禁用滑块 --- `disabled`
+
+```
+<star-slider disabled></star-slider>
+```
+
+4. 分格滑块 --- `Tick`
+
+```
+<star-slider variant="tick" tick-step="20"></star-slider>
+<star-slider variant="tick" tick-step="20" disabled></star-slider>
+```
+
+5. 左侧图标|滑块|右侧图标
+
+```
+<star-slider ><slot></slot></star-slider>
+```

src/components/slider/slider-styles.ts

@@ -0,0 +1,49 @@
+import {css, CSSResult} from 'lit'
+export const sharedStyles: CSSResult = css`
+  :host {
+    --cover-width: 100px;
+    --dot-move: 87px;
+  }
+  .content {
+    margin: 5px 5px;
+    position: relative;
+    padding: 50px 50px;
+    border: 1px solid skyblue;
+    border-radius: 5px;
+  }
+  .sliderBar {
+    position: absolute;
+    width: 100%;
+    height: 6px;
+    left: 0px;
+    right: 0px;
+    top: calc(50% - 6px / 2);
+    background: rgba(0, 0, 0, 0.06);
+    border-radius: 5px;
+  }
+  .progress {
+    position: absolute;
+    width: var(--cover-width);
+    /*width: 100px;*/
+    height: 6px;
+    left: 0px;
+    right: 0px;
+    top: calc(50% - 6px / 2);
+    background: #4d4d4d;
+    border-radius: 5px;
+  }
+  .dot {
+    position: absolute;
+    left: var(--dot-move);
+    width: 26px;
+    height: 26px;
+    top: calc(50% - 26px / 2);
+    background: #544f4f;
+    border-radius: 50%;
+  }
+  p {
+    position: absolute;
+    right: 5px;
+    top: 1px;
+  }
+`

src/components/slider/slider.ts

@@ -0,0 +1,94 @@
+import {html, LitElement, CSSResultArray} from 'lit'
+import {customElement, property, query} from 'lit/decorators.js'
+import {sharedStyles} from './slider-styles'
+
+export const variants = ['filled', 'tick']
+
+@customElement('star-slider')
+export class StarSlider extends LitElement {
+  _coverWidth: string = ''
+  public static override get styles(): CSSResultArray {
+    return [sharedStyles]
+  }
+
+  @query('.content') content!: HTMLDivElement
+  @query('.sliderBar') sliderBar!: HTMLDivElement
+  @query('.progress') progress!: HTMLDivElement
+  @query('.dot') dot!: HTMLDivElement
+  @query('p') p!: HTMLParagraphElement
+  @property({type: Number}) startX = 0
+  @property({type: Number}) touchX = 0
+  @property({type: Number}) moveX = 0
+  @property({type: Number}) newX = 0
+  @property({type: Number}) barWidth = 0
+  @property({type: Number}) dotL = 0
+  @property({type: Number}) proportion = 0
+  @property({type: String}) pValue = ''
+  @property({type: Number}) sliderBarLeft = 0
+  @property({type: Number}) sliderBarRight = 0
+  @property({type: Number}) ball = 0
+  @property({type: String}) sliderCoverWidth = ''
+  @property({type: String}) ballMove = ''
+  @property({type: String})
+  get coverWidth() {
+    return this._coverWidth
+  }
+  set coverWidth(value: string) {
+    this.style.setProperty('--cover-width', value)
+    this._coverWidth = value
+  }
+
+  render() {
+    return html`
+      <div class="content">
+        <p>${this.pValue}</p>
+        <div class="sliderBar">
+          <div class="progress" coverWidth="100px"></div>
+          <div
+            class="dot"
+            @touchstart=${this.touchStart}
+            @touchend=${this.touchEnd}
+            @touchmove=${this.touchMove}
+          ></div>
+        </div>
+      </div>
+    `
+  }
+  private touchStart(evt: TouchEvent) {
+    this.barWidth = this.sliderBar.offsetWidth - this.dot.offsetWidth //总长度减去小球覆盖的部分
+    this.dotL = this.dot.offsetLeft //小球左侧相对于父元素的左边距
+    this.startX = evt.touches[0].clientX //手指点下的 X 坐标
+  }
+  private touchMove(evt: TouchEvent) {
+    //阻止默认行为
+    evt.preventDefault()
+    this.touchX = evt.touches[0].clientX //整个屏幕实时触摸的 X 坐标
+    this.moveX = this.touchX - this.startX //手指移动的距离
+    //判断最大值和最小值
+    this.newX = this.dotL + this.moveX
+    if (this.newX < 0) {
+      this.newX = 0
+    }
+    if (this.newX >= this.barWidth) {
+      this.newX = this.barWidth
+    }
+    //改变dot的left值
+    this.style.setProperty('--dot-move', this.newX + 'px')
+    //计算比例
+    this.proportion = (this.newX / this.barWidth) * 100
+    this.pValue = Math.ceil(this.proportion) + ''
+    this.progress.style.setProperty(
+      'width',
+      (this.barWidth * Math.ceil(this.proportion)) / 100 + 'px'
+    )
+  }
+  private touchEnd(evt: TouchEvent) {
+    return console.log(this.pValue)
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'star-slider': StarSlider
+  }
+}

src/index.ts

@@ -12,6 +12,7 @@ import './components/radio/radio-group'
 import './components/radio/radio'
 import './components/toast/toast'
 import './components/picker/picker'
+import './components/slider/slider'
 @customElement('settings-app')
 export class SettingsApp extends LitElement {
   @query('star-animate-section#root') private rootSection!: StarAnimateSection

src/test/panels/root.ts

@@ -15,10 +15,12 @@ import './blur/use-blur'
 import './button/button'
 import './container/container'
 import './radio/radio'
+import './switch/switch'
+import './slider/slider'
 import './container/homescreen-container'
-
 import './toast/toast'
 import './picker/picker'
+
 type SEID = string
 
 @customElement('panel-root')
@@ -115,6 +117,14 @@ export class PanelRoot extends LitElement {
         href="#switch"
       ></star-li>
       <hr />
+      <star-li
+        type=${LiType.ICON_LABEL}
+        label="SliderTest"
+        icon="scene"
+        iconcolor="brown"
+        href="#slider"
+      ></star-li>
+      <hr />
       <star-li
         type=${LiType.ICON_LABEL}
         label="查看所有按钮"

src/test/panels/slider/slider.ts

@@ -0,0 +1,35 @@
+import {html, LitElement, css} from 'lit'
+import {customElement} from 'lit/decorators.js'
+
+@customElement('panel-slider')
+export class PanelSlider extends LitElement {
+  static styles = css`
+    div {
+      position: relative;
+      border: 1px solid;
+      margin: 50px 50px;
+      border-radius: 5px;
+    }
+  `
+
+  render() {
+    return html`
+      <div>
+        <h4>default</h4>
+        <star-slider></star-slider>
+        <h4>初始化覆盖长度</h4>
+        <star-slider coverWidth="150px"></star-slider>
+        <star-slider coverWidth="50%"></star-slider>
+        <h4>disabled</h4>
+        <star-slider></star-slider>
+        <star-slider></star-slider>
+        <star-slider></star-slider>
+      </div>
+    `
+  }
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'panel-slider': PanelSlider
+  }
+}