Merge pull request #4 in YR/star-web-components from feature-component-switch to master

* commit 'cf4d740bff8708e440420be504db3ba8bf11e55a': TASK： #105399 增加了README.md文件，优化了代码结构和回弹效果。 TASK: #105399 switch所有属性实现了激活效果、回弹效果。 TASK: #105399 switch优化 TASK: #105399 StarWebComponents开发-switch add star-blur component
2022-08-30 14:28:36 +08:00 · 2022-08-30 14:28:36 +08:00 · abc2a89422
parent ddc4fc5dda cf4d740bff
commit abc2a89422
8 changed files with 532 additions and 0 deletions
--- a/src/components/li/li.ts
+++ b/src/components/li/li.ts
@ -1,6 +1,7 @@
 import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit'
 import {customElement, property} from 'lit/decorators.js'
 import '../bubble/bubble'
+import '../switch/switch'

 export enum LiType {
  BASE = 'base',
@ -10,6 +11,7 @@ export enum LiType {
  ONLY_EDIT = 'only-edit',
  ONLY_LABEL = 'only-label',
  ONLY_READ = 'only-read',
+  SWITCH_LABEL = 'switch-label',
 }

@customElement('star-li')
@ -22,6 +24,10 @@ export class StarLi extends LitElement {
  @property({type: String}) icon = ''
  @property({type: String}) iconcolor = ''
  @property({type: Number}) bubble = 0
+  @property({type: String}) switchcolor = ''
+  @property({type: Boolean}) disabled = false
+  @property({type: Boolean}) checked = false
+  @property({type: String}) size = ''

  getbase(): HTMLTemplateResult {
    return html`
@ -195,6 +201,56 @@ export class StarLi extends LitElement {
    `
  }

+  getswitchlabel(): HTMLTemplateResult | typeof nothing {
+    if (!this.label) {
+      console.error('【star-ul】【switchlabel】缺少 label 参数')
+      return nothing
+    }
+
+    const classes = `${this.href ? 'hashref' : ''} ${
+      this.icon ? 'hasicon' : ''
+    }`
+    const colorstyle = this.iconcolor
+      ? html`
+          <style>
+            a::before {
+              color: ${this.iconcolor} !important;
+            }
+          </style>
+        `
+      : nothing
+
+    return html`
+      <li>
+        ${this.href
+          ? html`
+              <a data-icon=${this.icon} class=${classes} href=${this.href}>
+                ${colorstyle}
+                <span class="label">${this.label}</span>
+                <star-switch
+                  ?disabled="${this.disabled}"
+                  ?checked="${this.checked}"
+                  switchcolor=${this.switchcolor}
+                  size=${this.size}
+                ></star-switch>
+              </a>
+            `
+          : html`
+              <a data-icon=${this.icon} class=${classes}>
+                ${colorstyle}
+                <span class="label">${this.label}</span>
+                <star-switch
+                  ?disabled="${this.disabled}"
+                  ?checked="${this.checked}"
+                  switchcolor=${this.switchcolor}
+                  size=${this.size}
+                ></star-switch>
+              </a>
+            `}
+      </li>
+    `
+  }
+
  render() {
    switch (this.type) {
      case LiType.BASE:
@ -211,6 +267,8 @@ export class StarLi extends LitElement {
        return this.getonlylabel()
      case LiType.ONLY_READ:
        return this.getonlyread()
+      case LiType.SWITCH_LABEL:
+        return this.getswitchlabel()
      default:
        console.error('unhanled 【star-li】 type')
        return nothing
--- a/src/components/switch/README.md
+++ b/src/components/switch/README.md
@ -0,0 +1,47 @@
+## star-switch
+
+星光 Web 组件 --- Switch 组件（8 月 29 日）
+
+`star-switch` 组件包含**四种**互相独立的属性，介绍如下：
+
+1. switchcolor : 控制 switch 的选中背景颜色，默认为蓝色`#0265dc`。
+
+```
+    <star-switch></star-switch>
+    <hr />
+    <star-switch switchcolor="#4cd964"></star-switch>
+```
+
+2. checked : 用于选择对应 switch 首次加载时是否被选中，默认为`false`。
+
+```
+   <star-switch></star-switch>
+   <hr />
+   <star-switch checked></star-switch>
+   <hr />
+   <star-switch checked switchcolor="#4cd964"></star-switch>
+```
+
+3. disabled : 控制 switch 是否**禁用**状态，默认为`false`。
+
+```
+   <star-switch></star-switch>
+   <hr />
+   <star-switch disabled></star-switch>
+   <hr />
+   <star-switch disabled checked></star-switch>
+```
+
+4. size : 控制 switch 的大小，包括 small、medium、large 和 extralarge，默认为 `medium` 。
+
+```
+   <star-switch size="small" switchcolor="#4cd964"></star-switch>
+   <hr />
+   <star-switch></star-switch>
+   <hr />
+   <star-switch size="large" checked></star-switch>
+   <hr />
+   <star-switch size="extralarge" disabled></star-switch>
+   <hr />
+   <star-switch size="extralarge" disabled checked></star-switch>
+```
--- a/src/components/switch/switch-styles.ts
+++ b/src/components/switch/switch-styles.ts
@ -0,0 +1,110 @@
+import {css, CSSResult} from 'lit'
+export const sharedStyles: CSSResult = css`
+  :host {
+    /*默认颜色 */
+    --background-color: #0265dc;
+    /*默认开关小球颜色 */
+    --before-color: #fff;
+  }
+  label {
+    vertical-align: middle;
+  }
+
+  .base {
+    display: none;
+    /*隐藏表单元素*/
+  }
+  .base + label {
+    display: inline-block;
+    position: relative;
+    width: 46px;
+    height: 24px;
+    border-radius: 30px;
+    background-color: #e9e9e9;
+  }
+  .base:checked + label {
+    /*选中表单后的样式，:checked表示checkbox被选中后的状态*/
+    background-color: var(--background-color);
+  }
+  .base + label::before {
+    /*使用伪元素生成一个按钮*/
+    content: '';
+    display: inline-block;
+    height: 22px;
+    width: 22px;
+    left: 2px;
+    top: 1px;
+    position: absolute;
+    border-radius: 20px;
+    background-color: var(--before-color);
+    box-shadow: 0.5px 0px 3px 0.1px #888888;
+    transition: 0.15s cubic-bezier(0.16, 0.67, 0.18, 1.1);
+  }
+  .base + label:active::before {
+    transform: scale(1.05, 1.05);
+  }
+  .base:checked + label::before {
+    /*checkbox选中时按钮的样式*/
+    transition: 0.25s cubic-bezier(0.16, 0.67, 0.18, 1.1);
+    left: 22px;
+  }
+
+  /*Disabled*/
+  :host([disabled]) {
+    --background-color: #b1b1b1 !important;
+  }
+  :host([disabled]) label::before {
+    background-color: #f0f0f0;
+  }
+  :host([disabled]) label:active::before {
+    transform: scale(1, 1);
+  }
+
+  /*Small*/
+  :host([size='small']) label {
+    width: 38px;
+    height: 20px;
+    line-height: 20px;
+  }
+  :host([size='small']) label::before {
+    /*使用伪元素生成一个按钮*/
+    height: 18px;
+    width: 18px;
+  }
+  :host([size='small']) input:checked + label::before {
+    /*checkbox选中时按钮的样式*/
+    left: 18px;
+  }
+
+  /*Large*/
+  :host([size='large']) label {
+    width: 54px;
+    height: 28px;
+    line-height: 28px;
+  }
+  :host([size='large']) label::before {
+    /*使用伪元素生成一个按钮*/
+    height: 26px;
+    width: 26px;
+  }
+  :host([size='large']) input:checked + label::before {
+    /*checkbox选中时按钮的样式*/
+    left: 26px;
+  }
+
+  /*ExtraLarge*/
+  :host([size='extralarge']) label {
+    width: 62px;
+    height: 32px;
+    line-height: 32px;
+  }
+  :host([size='extralarge']) label::before {
+    /*使用伪元素生成一个按钮*/
+    height: 30px;
+    width: 30px;
+  }
+  :host([size='extralarge']) input:checked + label::before {
+    /*checkbox选中时按钮的样式*/
+    left: 30px;
+  }
+`
--- a/src/components/switch/switch.ts
+++ b/src/components/switch/switch.ts
@ -0,0 +1,44 @@
+import {html, LitElement, CSSResultArray} from 'lit'
+import {customElement, property} from 'lit/decorators.js'
+import {sharedStyles} from './switch-styles'
+
+@customElement('star-switch')
+export class StarSwitch extends LitElement {
+  _backgoundColor: string = ''
+  public static override get styles(): CSSResultArray {
+    return [sharedStyles]
+  }
+
+  // @property({type: String}) switchtype = ''
+  @property({type: Boolean}) disabled = false
+  @property({type: Boolean}) checked = false
+  @property({type: String})
+  get switchColor() {
+    return this._backgoundColor
+  }
+
+  set switchColor(value: string) {
+    this.style.setProperty('--background-color', value)
+    this._backgoundColor = value
+  }
+
+  render() {
+    return html`
+      <input
+        ?disabled="${this.disabled}"
+        ?checked="${this.checked}"
+        type="checkbox"
+        class="base"
+        id="base"
+        switchcolor="#0265dc"
+      />
+      <label for="base"></label>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'star-switch': StarSwitch
+  }
+}
--- a/src/index.ts
+++ b/src/index.ts
@ -2,6 +2,7 @@ import {html, css, LitElement} from 'lit'
 import {customElement, query, state} from 'lit/decorators.js'
 import './components/ul/ul'
 import './components/li/li'
+import './components/switch/switch'
 import './components/section/section'
 import {StarAnimateSection} from './components/section/section'
 import './components/section/section'
--- a/src/test/panels/root.ts
+++ b/src/test/panels/root.ts
@ -4,6 +4,7 @@ import {LiType} from '../../components/li/li'
 import {UlType} from '../../components/ul/ul'
 import {sharedStyles} from './shared-styles'
 import './about/about'
+import './switch/switch'
 import './icon/icon'
 import './general/general'
 import './indicators/indicators'
@ -98,6 +99,14 @@ export class PanelRoot extends LitElement {
        href="#general"
      ></star-li>
      <hr />
+      <star-li
+        type=${LiType.ICON_LABEL}
+        label="AllSwitch"
+        icon="switch"
+        iconcolor="black"
+        href="#switch"
+      ></star-li>
+      <hr />
      <star-li
        type=${LiType.ICON_LABEL}
        label="查看所有按钮"
--- a/src/test/panels/switch-styles.ts
+++ b/src/test/panels/switch-styles.ts
@ -0,0 +1,25 @@
+import { css, CSSResult } from 'lit'
+
+export const switchStyles: CSSResult = css`
+  div {
+      padding: 10px 40px;
+    }
+
+    html {
+      scrollbar-width: none;
+    }
+
+    body {
+      margin: 0;
+      padding: 0;
+      background: #f0f0f0;
+    }
+
+    :root {
+      --left-transform: -100vw;
+      --right-transform: +100vw;
+      --li-base-height: 43px;
+      --li-left-padding: 10px;
+      --li-right-padding: 10px;
+    }
+`
--- a/src/test/panels/switch/switch.ts
+++ b/src/test/panels/switch/switch.ts
@ -0,0 +1,238 @@
+import {html, LitElement, CSSResultArray} from 'lit'
+import {customElement} from 'lit/decorators.js'
+import {LiType} from '../../../components/li/li'
+import {UlType} from '../../../components/ul/ul'
+import {sharedStyles} from '../shared-styles'
+import '../../../components/ul/ul'
+import '../../../components/li/li'
+import '../icon/icon'
+import '../about/about'
+import '../icon/icon'
+import '../general/general'
+import '../indicators/indicators'
+import '../blur/use-blur'
+
+@customElement('panel-switch')
+export class PanelSwitch extends LitElement {
+  render() {
+    return html`
+      <star-ul type=${UlType.ONLY_HEADER} title="SWITCH - COLOR">
+        <star-li
+          type=${LiType.SWITCH_LABEL}
+          label="BASE"
+          icon="switch"
+          iconcolor="blue"
+        ></star-li>
+        <hr />
+        <star-li
+          type=${LiType.SWITCH_LABEL}
+          label="GREEN"
+          icon="switch"
+          iconcolor="green"
+          switchcolor="#4cd964"
+        ></star-li>
+        <hr />
+        <star-li
+          type=${LiType.SWITCH_LABEL}
+          label="BLACK"
+          icon="switch"
+          iconcolor="black"
+          switchcolor="#222222"
+        ></star-li>
+        <hr />
+        <star-li
+          type=${LiType.SWITCH_LABEL}
+          label="RED"
+          icon="switch"
+          iconcolor="red"
+          switchcolor="#ff3b30"
+        ></star-li>
+        <hr />
+      </star-ul>
+
+      <star-ul type=${UlType.ONLY_HEADER} title="SWITCH - CHECKED">
+        <star-li
+          type=${LiType.SWITCH_LABEL}
+          label="BASE - CHECKED"
+          icon="switch"
+          iconcolor="blue"
+          checked
+        ></star-li>
+        <hr />
+        <star-li
+          type=${LiType.SWITCH_LABEL}
+          label="GREEN - CHECKED"
+          icon="switch"
+          iconcolor="green"
+          switchcolor="#4cd964"
+          checked
+        ></star-li>
+        <hr />
+        <star-li
+          type=${LiType.SWITCH_LABEL}
+          label="BLUE - CHECKED"
+          icon="switch"
+          iconcolor="black"
+          switchcolor="#222222"
+          checked
+        ></star-li>
+        <hr />
+        <star-li
+          type=${LiType.SWITCH_LABEL}
+          label="RED - CHECKED"
+          icon="switch"
+          iconcolor="red"
+          switchcolor="#ff3b30"
+          checked
+        ></star-li>
+        <hr />
+      </star-ul>
+
+      <star-ul type=${UlType.ONLY_HEADER} title="SWITCH - DISABLED">
+        <star-li
+          type=${LiType.SWITCH_LABEL}
+          label="DISABLED"
+          icon="switch"
+          iconcolor="gray"
+          disabled
+        ></star-li>
+        <hr />
+        <star-li
+          type=${LiType.SWITCH_LABEL}
+          label="DISABLED - CHECKED"
+          icon="switch"
+          iconcolor="gray"
+          checked
+          disabled
+        ></star-li>
+        <hr />
+      </star-ul>
+
+      <star-ul type=${UlType.ONLY_HEADER} title="SWITCH - SMALL">
+        <star-li
+          type=${LiType.SWITCH_LABEL}
+          label="BASE - SMALL"
+          icon="switch"
+          iconcolor="black"
+          size="small"
+        ></star-li>
+        <hr />
+        <star-li
+          type=${LiType.SWITCH_LABEL}
+          label="DISABLED - SMALL"
+          icon="switch"
+          iconcolor="black"
+          size="small"
+          disabled
+        ></star-li>
+        <hr />
+        <star-li
+          type=${LiType.SWITCH_LABEL}
+          label="CHECKED - SMALL"
+          icon="switch"
+          iconcolor="black"
+          size="small"
+          checked
+        ></star-li>
+        <hr />
+        <star-li
+          type=${LiType.SWITCH_LABEL}
+          label="DISABLED - CHECKED - SMALL"
+          icon="switch"
+          iconcolor="black"
+          size="small"
+          checked
+          disabled
+        ></star-li>
+        <hr />
+      </star-ul>
+
+      <star-ul type=${UlType.ONLY_HEADER} title="SWITCH - LARGE">
+        <star-li
+          type=${LiType.SWITCH_LABEL}
+          label="BASE - LARGE"
+          icon="switch"
+          iconcolor="black"
+          size="large"
+        ></star-li>
+        <hr />
+        <star-li
+          type=${LiType.SWITCH_LABEL}
+          label="DISABLED - LARGE"
+          icon="switch"
+          iconcolor="black"
+          size="large"
+          disabled
+        ></star-li>
+        <hr />
+        <star-li
+          type=${LiType.SWITCH_LABEL}
+          label="CHECKED - LARGE"
+          icon="switch"
+          iconcolor="black"
+          size="large"
+          checked
+        ></star-li>
+        <hr />
+        <star-li
+          type=${LiType.SWITCH_LABEL}
+          label="DISABLED - CHECKED - LARGE"
+          icon="switch"
+          iconcolor="black"
+          size="large"
+          checked
+          disabled
+        ></star-li>
+        <hr />
+      </star-ul>
+
+      <star-ul type=${UlType.ONLY_HEADER} title="SWITCH - EXTRALARGE">
+        <star-li
+          type=${LiType.SWITCH_LABEL}
+          label="BASE - EXTRALARGE"
+          icon="switch"
+          iconcolor="black"
+          size="extralarge"
+        ></star-li>
+        <hr />
+        <star-li
+          type=${LiType.SWITCH_LABEL}
+          label="DISABLED - EXTRALARGE"
+          icon="switch"
+          iconcolor="black"
+          size="extralarge"
+          disabled
+        ></star-li>
+        <hr />
+        <star-li
+          type=${LiType.SWITCH_LABEL}
+          label="CHECKED - EXTRALARGE"
+          icon="switch"
+          iconcolor="black"
+          size="extralarge"
+          checked
+        ></star-li>
+        <hr />
+        <star-li
+          type=${LiType.SWITCH_LABEL}
+          label="DISABLED - CHECKED - EXTRALARGE"
+          icon="switch"
+          iconcolor="black"
+          size="extralarge"
+          checked
+          disabled
+        ></star-li>
+        <hr />
+      </star-ul>
+    `
+  }
+  public static override get styles(): CSSResultArray {
+    return [sharedStyles]
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'panel-switch': PanelSwitch
+  }
+}