Merge pull request #12 in YR/star-web-components from featurn-component-switch-touchmove to master

* commit '12d975cb000d88bcfcd15c32290fd59d8dd1930e':
  TASK: #105399 icon做成了可选的类型
  TASK: #105399 解决了touchmove与icon显示不兼容问题
  TASK: #105399 实现手指激活switch全屏连续滑动触发开关功能

src/components/li/li.ts

@@ -27,6 +27,7 @@ export class StarLi extends LitElement {
   @property({type: String}) switchcolor = ''
   @property({type: Boolean}) disabled = false
   @property({type: Boolean}) checked = false
+  @property({type: Boolean}) switchicon = false
   @property({type: String}) size = ''
 
   getbase(): HTMLTemplateResult {
@@ -232,6 +233,7 @@ export class StarLi extends LitElement {
                   ?checked="${this.checked}"
                   switchcolor=${this.switchcolor}
                   size=${this.size}
+                  ?switchicon="${this.switchicon}"
                 ></star-switch>
               </a>
             `
@@ -244,6 +246,7 @@ export class StarLi extends LitElement {
                   ?checked="${this.checked}"
                   switchcolor=${this.switchcolor}
                   size=${this.size}
+                  ?switchicon="${this.switchicon}"
                 ></star-switch>
               </a>
             `}

src/components/switch/switch-styles.ts

@@ -18,7 +18,7 @@ export const sharedStyles: CSSResult = css`
     display: inline-block;
     position: relative;
     width: 46px;
-    height: 24px;
+    height: 25px;
     border-radius: 30px;
     background-color: #e9e9e9;
   }
@@ -30,8 +30,8 @@ export const sharedStyles: CSSResult = css`
     /*使用伪元素生成一个按钮*/
     content: '';
     display: inline-block;
-    height: 22px;
-    width: 22px;
+    height: 23px;
+    width: 23px;
     left: 2px;
     top: 1px;
     position: absolute;
@@ -46,7 +46,7 @@ export const sharedStyles: CSSResult = css`
   .base:checked + label::before {
     /*checkbox选中时按钮的样式*/
     transition: 0.25s cubic-bezier(0.16, 0.67, 0.18, 1.1);
-    left: 22px;
+    left: 21px;
   }
 
   /*Disabled*/
@@ -75,6 +75,17 @@ export const sharedStyles: CSSResult = css`
     /*checkbox选中时按钮的样式*/
     left: 18px;
   }
+  :host([size='small'][switchicon]) .iconFalse {
+    left: 24px;
+    top: 6px;
+    width: 6px;
+    height: 6px;
+  }
+  :host([size='small'][switchicon]) .iconTrue {
+    left: 11px;
+    top: 6px;
+    height: 7px;
+  }
 
   /*Large*/
   :host([size='large']) label {
@@ -92,6 +103,18 @@ export const sharedStyles: CSSResult = css`
     left: 26px;
   }
 
+  :host([size='large'][switchicon]) .iconFalse {
+    left: 34px;
+    top: 8px;
+    width: 9px;
+    height: 9px;
+  }
+  :host([size='large'][switchicon]) .iconTrue {
+    top: 9px;
+    height: 9px;
+    left: 14px;
+  }
+
   /*ExtraLarge*/
   :host([size='extralarge']) label {
     width: 62px;
@@ -107,4 +130,33 @@ export const sharedStyles: CSSResult = css`
     /*checkbox选中时按钮的样式*/
     left: 30px;
   }
+  :host([size='extralarge'][switchicon]) .iconFalse {
+    left: 39px;
+    top: 9px;
+    width: 11px;
+    height: 11px;
+  }
+  :host([size='extralarge'][switchicon]) .iconTrue {
+    top: 10px;
+    height: 10px;
+    left: 16px;
+  }
+
+  :host([switchicon]) .iconFalse {
+    position: absolute;
+    left: 29px;
+    top: 7px;
+    width: 8px;
+    height: 8px;
+    background-color: #e9e9e9;
+    border-radius: 50%;
+    border: 1px solid #b1b1b1;
+  }
+  :host([switchicon]) .iconTrue {
+    position: absolute;
+    left: 13px;
+    top: 7px;
+    height: 8px;
+    border-left: 1px solid #fff;
+  }
 `

src/components/switch/switch.ts

@@ -1,6 +1,7 @@
 import {html, LitElement, CSSResultArray} from 'lit'
-import {customElement, property} from 'lit/decorators.js'
+import {customElement, property, query} from 'lit/decorators.js'
 import {sharedStyles} from './switch-styles'
+// import {classMap} from 'lit/directives/class-map.js'
 
 @customElement('star-switch')
 export class StarSwitch extends LitElement {
@@ -9,34 +10,60 @@ export class StarSwitch extends LitElement {
     return [sharedStyles]
   }
 
-  // @property({type: String}) switchtype = ''
+  @property({type: Number}) right = 0
+  @property({type: Number}) left = 0
+  @property({type: Number}) switchx = 0
+  @property({type: Number}) x = 0
   @property({type: Boolean}) disabled = false
   @property({type: Boolean}) checked = false
   @property({type: String})
-  get switchColor() {
+  get switchcolor() {
     return this._backgoundColor
   }
-
-  set switchColor(value: string) {
+  set switchcolor(value: string) {
     this.style.setProperty('--background-color', value)
     this._backgoundColor = value
   }
 
+  @query('#switchBall') switchBall!: HTMLLabelElement
+  @query('#base') base!: HTMLInputElement
+
   render() {
     return html`
       <input
         ?disabled="${this.disabled}"
         ?checked="${this.checked}"
+        @change=${(evt: Event) =>
+          (this.checked = (evt.target as HTMLInputElement).checked)}
         type="checkbox"
         class="base"
         id="base"
         switchcolor="#0265dc"
       />
-      <label for="base"></label>
+      <label id="switchBall" for="base" @touchmove=${this.selectTouchMove}>
+        <div class="${this.checked ? 'iconTrue' : 'iconFalse '}"></div>
+      </label>
     `
   }
+  private selectTouchMove(evt: TouchEvent) {
+    // disabled不允许拖动
+    if (!this.disabled) {
+      let right = this.switchBall.getBoundingClientRect().right
+      let left = this.switchBall.getBoundingClientRect().left
+      let switchx = (right - left) / 2 + left
+      let x = evt.touches[0].clientX
+      if (x >= switchx) {
+        this.base.checked = true
+        // 解决touchmove监测不到checked变化
+        this.checked = true
+      } else {
+        this.base.checked = false
+        // 解决touchmove监测不到checked变化
+        this.checked = false
+      }
+    }
+  }
 }
-
 declare global {
   interface HTMLElementTagNameMap {
     'star-switch': StarSwitch

src/test/panels/switch/switch.ts

@@ -50,6 +50,46 @@ export class PanelSwitch extends LitElement {
         <hr />
       </star-ul>
 
+      <star-ul type=${UlType.ONLY_HEADER} title="SWITCH - ICON">
+        <star-li
+          type=${LiType.SWITCH_LABEL}
+          label="BASE"
+          icon="switch"
+          iconcolor="blue"
+          switchicon
+        ></star-li>
+        <hr />
+        <star-li
+          type=${LiType.SWITCH_LABEL}
+          label="GREEN"
+          icon="switch"
+          iconcolor="green"
+          switchcolor="#4cd964"
+          checked
+          switchicon
+        ></star-li>
+        <hr />
+        <star-li
+          type=${LiType.SWITCH_LABEL}
+          label="BLACK"
+          icon="switch"
+          iconcolor="black"
+          switchcolor="#222222"
+          switchicon
+        ></star-li>
+        <hr />
+        <star-li
+          type=${LiType.SWITCH_LABEL}
+          label="RED"
+          checked
+          icon="switch"
+          iconcolor="red"
+          switchcolor="#ff3b30"
+          switchicon
+        ></star-li>
+        <hr />
+      </star-ul>
+
       <star-ul type=${UlType.ONLY_HEADER} title="SWITCH - CHECKED">
         <star-li
           type=${LiType.SWITCH_LABEL}