Merge ssh://172.20.184.160:7999/yr/star-web-components into feature-component-overflowmenu

2022-09-08 15:34:06 +08:00 · 2022-09-08 15:34:06 +08:00 · aa85d00b2b
parent 467ac5f3a1 8ac2f78316
commit aa85d00b2b
12 changed files with 508 additions and 12 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -9,4 +9,5 @@
 - add indicator-page-point
 - add blur
 - add radio
- add toast
+- add toast
+- add card
--- a/src/components/card/README.md
+++ b/src/components/card/README.md
@ -0,0 +1,32 @@
+## star-card
+
+星光 web 组件 --- Card 组件介绍：（2022 年 9 月 02 日）
+
+star-card 的用途：
+用于显示图片、文本等简要信息，帮助用户简单直观地获取卡片所在环境的主要信息，卡片组件具备拆卸、跳转页面等功能。
+
+star-card 类型：
+1、base
+具有图片、标题、内容以及页脚几个模块，同时删除base类型对应模块可以转变成其他类型：无图卡片、无页脚卡片等。
+
+2、linkcard
+该类型相比base类型多出点击后跳转相应链接的功能。
+
+3、tupianonly
+该类型只展现一张正方形图片，用于陈列图片组。
+
+star-card 其他属性：
+1、image
+通过填写图片URL来讲图片展示在卡片上。
+
+2、heading
+填写卡片标题以表明该卡片的用途。
+
+3、subheading
+简短描述卡片对应的内容，让用户快速获取卡片重要信息。
+
+4、footer
+卡片页脚，一般用来填写卡片内容的时间、作者等信息。
+
+5、link
+用来填写链接卡片的跳转网址。
--- a/src/components/card/card-styles.ts
+++ b/src/components/card/card-styles.ts
@ -0,0 +1,113 @@
+import {css, CSSResult} from 'lit'
+
+export const sharedStyles: CSSResult = css`
+  :host {
+    --background-image-url: ''
+  }
+
+  div {
+    width:200px;
+  }
+
+  .card {
+    background: #FFFFFF;
+    border-color: #E6E6E6;
+    border-radius: 4px;
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: border-box;
+    color: #222222;
+    flex-direction: column;
+    height: atuo;
+    min-width: 200px;
+    position: relative;
+    text-decoration-color: #222222;
+    text-decoration-thickness: auto;
+    unicode-bidi: isolate;
+    width: 200px;
+  }
+
+  .base:hover {
+    background: #E6E6E6;
+    border-color: #B1B1B1;
+  }
+
+  .cardhead {
+    background-image: url(var(--background-image-url));
+    align-items: center;
+    border-bottom-width: 1px;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    overflow-x: hidden;
+    overflow-y: hidden;
+  }
+
+  .base-image {
+    display: block;
+    object-fit: cover;
+    width: 198px;
+  }
+
+  .cardbody {
+    color: #222222;
+    display: block;
+    height: 80px;
+    padding-bottom: 10px;
+    padding-left: 20px;
+    padding-right: 0px;
+    padding-top: 1px;
+    width: 180px;
+  }
+
+  .heading {
+    align-items: baseline;
+    color: #222222;
+    display: flex;
+    height: 18px;
+    width: 150px;
+  }
+
+  .subheading {
+    color: #222222;
+    display: flex;
+    height: 14px;
+    margin-top: 6px;
+    width: 180px;
+  }
+
+  .cardfooter {
+    border-color: #E6E6E6;
+    border-top-style: solid;
+    border-top-width: 1px;
+    display: block;
+    margin-left: 24px;
+    margin-right: 24px;
+    padding-bottom: 10px;
+    padding-top: 1px;
+    width: 150px;
+  }
+
+  .imageonly {
+    background: #B1B1B1;
+    border-color: #000000;
+    border: 10px;
+    border-style: solid;
+    border-width: 1px;
+    border-image-outset: 0;
+  }
+
+  .imageonly-image {
+    height: 198px;
+    border: 1px;
+    border-radius: 3px;
+    object-fit: cover;
+    width: 198px;
+  }
+
+  .imageonly:hover {
+    border-color: #E6E6E6;
+  }
+`
--- a/src/components/card/card.ts
+++ b/src/components/card/card.ts
@ -0,0 +1,134 @@
+import {
+    html,
+    LitElement,
+    CSSResultArray,
+    HTMLTemplateResult,
+    nothing,
+  } from "lit"
+  import {customElement, property} from "lit/decorators.js"
+  import {sharedStyles} from "./card-styles"
+  
+  export enum CardType {
+    BASE = "base",
+    LINKCARD = "linkcard",
+    IMAGEONLY = "imageonly",
+    LABELONLY = "labelonly",
+    FOOTERDELETED = 'footerdeleted',
+  }
+  
+  // export enum CardSize {
+  //   SMALL = "small",
+  //   MEDIUM = "medium",
+  // }
+  
+  @customElement("star-card")
+  export class StarCard extends LitElement {
+    public static override get styles(): CSSResultArray {
+      return [sharedStyles]
+    }
+  
+    @property({type: String}) type = "base"
+    // @property({type: String}) size = "medium"
+    @property({type: String}) heading = ""
+    @property({type: String}) subheading = ""
+    @property({type: String}) footer = ""
+    @property({type: String}) image = ""
+    @property({type: String}) link = ""
+  
+    getBaseCard(): HTMLTemplateResult {
+        return html`
+          <div class="card base">
+            <div class="cardhead">
+              <img class="base-image" src="${this.image}">  
+            </div>  
+            <div class="cardbody">  
+              <h3 class="heading">${this.heading}</h3>  
+              <p class="subheading">${this.subheading}</p>  
+            </div>  
+            <div class="cardfooter">  
+              <p class="foooter">${this.footer}</p>  
+            </div>    
+          </div>
+        `
+    }
+
+    getLinkCard(): HTMLTemplateResult {
+      return html`
+        <a href=${this.link} target="_blank" style="text-decoration:none;">
+          <div class="card base">
+            <div class="cardhead">
+              <img class="base-image" src="${this.image}">
+            </div>
+            <div class="cardbody"> 
+              <h3 class="heading">${this.heading}</h3>  
+              <p class="subheading">${this.subheading}</p>  
+            </div>  
+            <div class="cardfooter">  
+              <p class="foooter">${this.footer}</p>  
+            </div>    
+          </div>
+        </a>
+      `
+  }
+  
+    getLabelOnlyCard(): HTMLTemplateResult {
+        return html`
+          <div class="card base">
+            <div class="cardbody">
+              <h3 class="heading">${this.heading}</h3>
+              <p class="subheading">${this.subheading}</p>
+            </div>
+            <div class="cardfooter">
+              <p class="foooter">${this.footer}</p>
+            </div>
+          </div>
+        `
+      }
+  
+    getImageOnlyCard(): HTMLTemplateResult {
+        return html`
+          <div class="card imageonly">
+            <div class="cardhead">
+              <img class="imageonly-image" src="${this.image}">
+            </div>
+          </div>
+        `
+      } 
+    getFooterDeletedCard(): HTMLTemplateResult {
+        return html `
+          <div class="card base">
+            <div class="cardhead">
+              <img class="base-image" src="${this.image}">
+            </div>
+            <div class="cardbody">
+              <h3 class="heading">${this.heading}</h3>
+              <p class="subheading">${this.subheading}</p>
+            </div>
+          </div>
+        `
+    }
+  
+    render() {
+      switch (this.type) {
+        case CardType.BASE:
+          return this.getBaseCard()
+        case CardType.LINKCARD:
+          return this.getLinkCard()    
+        case CardType.IMAGEONLY:
+          return this.getImageOnlyCard()
+        case CardType.LABELONLY:
+          return this.getLabelOnlyCard()
+        case CardType.FOOTERDELETED:
+          return this.getFooterDeletedCard()
+        default:
+          console.error("unhanled 【star-card】 type")
+          return nothing
+      }
+    }
+  }
+    
+  declare global {
+    interface HTMLElementTagNameMap {
+      "star-card": StarCard
+    }
+  }
--- a/src/components/li/li.ts
+++ b/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>
            `}
--- a/src/components/switch/switch-styles.ts
+++ b/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;
+  }
 `
--- a/src/components/switch/switch.ts
+++ b/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
--- a/src/test/panels/card/card.ts
+++ b/src/test/panels/card/card.ts
@ -0,0 +1,85 @@
+import {html, LitElement, CSSResultArray} from "lit"
+import {customElement} from "lit/decorators.js"
+import {sharedStyles} from "../shared-styles"
+import "../../../components/card/card"
+
+@customElement("panel-card")
+export class PanelCard extends LitElement {
+    render() {
+        return html `
+            <div>
+                <h4>基础卡片</h4>
+                <star-card
+                 type="base"
+                 image="./src/test/panels/card/image/1.png"
+                 heading="基础卡片"
+                 subheading="详情叙述"
+                 footer="footer"
+                ></star-card>
+            </div>
+            <br>
+            <br>
+            <br>
+            <br>
+            <div>
+                <h4>链接卡片</h4>
+                <star-card
+                 type="linkcard"
+                 link="https://www.kylinos.cn/"
+                 image="./src/test/panels/card/image/1.png"
+                 heading="连接卡片"
+                 subheading="详情叙述"
+                 footer="footer"
+                ></star-card>
+            </div>
+            <br>
+            <br>
+            <br>
+            <br>
+            <div>
+                <h4>无图卡片</h4>
+                <star-card
+                 type="labelonly"
+                 heading="无图卡片"
+                 subheading="内容展示"
+                 footer="footer"
+                ></star-card>
+            </div>
+            <br>
+            <br>
+            <br>
+            <br>
+            <div>
+                <h4>无页脚卡片</h4>
+                <star-card
+                 type="footerdeleted"
+                 image="./src/test/panels/card/image/2.jpg"
+                 heading="无页脚卡片"
+                 subheading="内容展示"
+                ></star-card>
+            </div>
+            <br>
+            <br>
+            <br>
+            <br>
+            <div>
+                <h4>只图卡片</h4>
+                <star-card
+                 type="imageonly"
+                 image="./src/test/panels/card/image/2.jpg"
+                ></star-card>
+            </div>
+        `
+    }
+
+    public static override get styles(): CSSResultArray {
+        return [sharedStyles]
+    }
+
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+      "panel-card": PanelCard
+    }
+  }
--- a/src/test/panels/card/image/1.png
+++ b/src/test/panels/card/image/1.png
--- a/src/test/panels/card/image/2.jpg
+++ b/src/test/panels/card/image/2.jpg
--- a/src/test/panels/root.ts
+++ b/src/test/panels/root.ts
@ -9,6 +9,7 @@ import '../../components/li/li'
 import './about/about'
 import './icon/icon'
 import './general/general'
+import './card/card'
 import './indicators/indicators'
 import './blur/use-blur'
 import './button/button'
@ -161,6 +162,14 @@ export class PanelRoot extends LitElement {
        href="#blur"
      ></star-li>
      <hr />
+      <star-li
+        type=${LiType.ICON_LABEL}
+        label="基础卡片组件"
+        icon="play-circle"
+        iconcolor="blue"
+        href="#card"
+      ></star-li>
+      <hr />
      <star-li
        type=${LiType.ICON_LABEL}
        label="主屏容器"
--- a/src/test/panels/switch/switch.ts
+++ b/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}