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

* commit '67f05f3b4399b798f4a40c85f5f0129b786971cb':
  TASK:#-105400-StarWebComponents开发-Card代码变量命名修正
  TASK: #105400 StarWebComponents开发-card

CHANGELOG.md

@@ -9,4 +9,5 @@
 - add indicator-page-point
 - add blur
 - add radio
-- add toast
+- add toast
+- add card

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
+用来填写链接卡片的跳转网址。

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;
+  }
+`

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
+    }
+  }

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
+    }
+  }

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'
@@ -153,6 +154,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="主屏容器"