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

* commit 'e1d1418c71ce65ca28a3c5aa54d18fc9a83c1592': TASK #105401 StarWebComponent开发-button-优化代码，修改样式 TASK #105401 StarWebComponent开发-button-增加按钮组，修改样式 TASK #105401 StarWebComponent开发-button-样式及代码完善 TASK #105401 StarWebComponent开发-button-修改样式及代码 TASK #105401 StarWebComponent开发-button-增加test测试页 TASK #105401 StarWebComponent开发-button-合并冲突 TASK #105401 StarWebComponent开发-button-合并冲突 TASK #105401 StarWebComponent开发-button-1 TASK: #105401 StarWebComponents 开发-button
2022-08-30 10:35:36 +08:00 · 2022-08-30 10:35:36 +08:00 · ddc4fc5dda
parent 9d6b72000c e1d1418c71
commit ddc4fc5dda
8 changed files with 573 additions and 24 deletions
--- a/src/components/button-group/button-group.ts
+++ b/src/components/button-group/button-group.ts
@ -0,0 +1,9 @@
+import {css, CSSResult} from 'lit'
+
+export const sharedStyles: CSSResult = css`
+  .vertical {
+    display: inline-flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+`
--- a/src/components/button-group/buttongroup.ts
+++ b/src/components/button-group/buttongroup.ts
@ -0,0 +1,39 @@
+import {LitElement, html, CSSResultArray, HTMLTemplateResult} from 'lit'
+import {property, customElement} from 'lit/decorators.js'
+import {sharedStyles} from './button-group'
+
+@customElement('star-buttongroup')
+export class StarButtonGroup extends LitElement {
+  public static override get styles(): CSSResultArray {
+    return [sharedStyles]
+  }
+
+  @property({type: Boolean})
+  public vertical = false
+
+  getButtonGroup(): HTMLTemplateResult {
+    if (this.hasAttribute('vertical')) {
+      return html`
+        <div class="vertical">
+          <slot></slot>
+        </div>
+      `
+    } else {
+      return html`
+        <div class="horizontal">
+          <slot></slot>
+        </div>
+      `
+    }
+  }
+
+  render() {
+    return this.getButtonGroup()
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'star-buttongroup': StarButtonGroup
+  }
+}
--- a/src/components/button/README.md
+++ b/src/components/button/README.md
@ -0,0 +1,54 @@
+# star-button
+
+星光 Web 组件——按钮组件：本组件样式及代码风格依然在完善阶段，现阶段介绍如下（8月27日）
+
+## 介绍
+
+star-button属性：
+1. type：按钮类型，包括文本按钮base、图标文本按钮iconlabel和图标按钮icononly。
+
+```html demo
+<star-button type="base" label="文本按钮"></star-button>
+<star-button type="iconlabel" label="图标文本按钮"></star-button>
+<star-button type="icononly" label="图标按钮"></star-button>
+```
+
+2. variant：按钮样式，包括accent、primary、secondary、negative、black和white，默认为accent。
+
+```html demo
+<star-button type="base" variant="accent" label="accent"></star-button>
+<star-button type="base" variant="primary" label="primary"></star-button>
+```
+
+3. size：控制按钮大小，包括small、medium、large和extralarge四种，默认为medium。
+
+```html demo
+<star-button type="base" variant="accent" label="accent" size="small"></star-button>
+<star-button type="base" variant="primary" label="primary" size="large"></star-button>
+```
+
+4. label：显示按钮名，如省略则显示为“默认”。
+
+```html demo
+<star-button type="base" variant="accent" label="按钮名"></star-button>
+```
+
+5. disabled：控制按钮禁用状态，默认为：false。
+
+```html demo
+<star-button type="base" variant="accent" label="禁用" disabled></star-button>
+```
+
+6. treatment：控制按钮填充状态，包括fill和outline，默认为：fill。
+
+```html demo
+<star-button type="base" variant="accent" label="fill" treatment="fill"></star-button>
+<star-button type="base" variant="accent" label="outline" treatment="outline"></star-button>
+```
+
+7. icon和iconcolor：控制图标样式和其颜色。
+
+```html demo
+<star-button type="base" variant="accent" label="图标按钮" icon="alarm" iconcolor="white"></star-button>
+```
+
--- a/src/components/button/button-styles.ts
+++ b/src/components/button/button-styles.ts
@ -1,23 +1,161 @@
 import {css, CSSResult} from 'lit'

 export const sharedStyles: CSSResult = css`
-  .test {
-    color: darkred;
-    font-weight: bold;
-    background-color: #ffffff;
+  button {
+    display: inline-block;
+    line-height: 18.2px;
+    white-space: nowrap;
+    cursor: pointer;
+    background: #fff;
+    color: #606266;
+    text-align: center;
+    box-sizing: border-box;
+    margin: 20px;
+    transition: 0.1s;
+    font-weight: 500;
+    font-size: 14px;
+    padding: 12px 23px 14px 23px;
+    border: none;
+    border-radius: 18px;
  }

-  button {
-    color: blue;
-    padding: 0;
-    width: 100%;
-    border: unset;
-    display: block;
+  .small {
+    font-size: 12px;
+    height: 24px;
+    line-height: 15.6px;
+    min-height: 24px;
+    min-width: 54px;
+    padding: 0px 10px 0px 10px;
+  }
+
+  .medium {
+    font-size: 14px;
+    height: 32.2px;
+    line-height: 18.2px;
+    min-height: 32px;
+    min-width: 72px;
+    padding: 0px 14px 0px 14px;
+  }
+
+  .large {
    font-size: 16px;
-    text-align: left;
-    background: unset;
-    padding-inline-start: var(--li-left-padding);
-    min-height: var(--li-base-height);
-    line-height: var(--li-base-height);
+    height: 40.8px;
+    line-height: 20.8px;
+    min-height: 40px;
+    min-width: 90px;
+    padding: 0px 18px 0px 18px;
+  }
+
+  .extralarge {
+    font-size: 18px;
+    height: 48.4px;
+    line-height: 23.4px;
+    min-height: 48px;
+    min-width: 100px;
+    padding: 0px 22px 0px 22px;
+  }
+
+  .accent {
+    background-color: #0469e3;
+    color: #FFFFFF;
+  }
+
+  .accent:hover {
+    background-color: #015BC7;
+    box-shadow: none;
+  }
+
+  .primary {
+    background-color: #222222;
+    color: #EBEBEB;
+  }
+
+  .primary:hover {
+    background-color: #000000;
+    color: #FFFFFF;
+  }
+
+  .secondary {
+    background-color: #E6E6E6;
+    color: #222222;
+  }
+
+  .secondary:hover {
+    background-color: #D5D5D5;
+    color: #d42222;
+    transition-property: color;
+    transition-duration: 2s;
+    transition-timing-function: linear;
+    transition-delay: 0.2s;
+  }
+
+  .negative {
+    background-color: #B30202;
+    color: #EBEBEB;
+  }
+
+  .negative:hover {
+    background-color: #A20101;
+    color: #EBEBEB;
+  }
+
+  .black {
+    color: #222222;
+    background-color: #000000;
+  }
+
+  .white {
+    background-color: #FFFFFF;
+    color: #EBEBEB;
+  }
+
+  .disabled {
+    background-color: #E6E6E6;
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .fill.primary {
+    color: #FFFFFF;
+  }
+
+  .fill.primary:hover {
+    background-color: #000000;
+  }
+
+  .outline.primary {
+    background-color: #f0f0f0;
+    border-style: solid;
+    color: #222222;
+  }
+
+  .outline.primary:hover {
+    background-color: #D5D5D5;
+    border-style: solid;
+    color: #000000;
+  }
+
+  button.hasicon::before {
+    font-size: 16px;
+    font-family: 'gaia-icons';
+    content: attr(data-icon);
+    text-align: center;
+    padding-inline-end: 5px; /**定义元素逻辑块末尾填充 */
+  }
+
+  button.icononly::before {
+    font-size: 16px;
+    font-family: 'gaia-icons';
+    content: attr(data-icon);
+    text-align: center;
+  }
+
+  button.icononly {
+    border-radius: 50%;
+    height: auto;
+    line-height: auto;
+    min-height: 32.2px;
+    min-width: 32.2px;
+    padding: 0px;
  }
 `
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@ -10,6 +10,24 @@ import {sharedStyles} from './button-styles'

 export enum ButtonType {
  BASE = 'base',
+  ICONONLY = 'icononly',
+  ICONLABEL = 'iconlabel',
+}
+
+export enum ButtonSize {
+  SMALL = 'small',
+  MEDIUM = 'medium',
+  LARGE = 'large',
+  EXTRALARGE = 'extralarge',
+}
+
+export enum ButtonVariants {
+  ACCENT = 'accent',
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary',
+  NEGATIVE = 'negative',
+  WHITE = 'white',
+  BLACK = 'black',
 }

@customElement('star-button')
@ -17,20 +35,106 @@ export class StarButton extends LitElement {
  public static override get styles(): CSSResultArray {
    return [sharedStyles]
  }
-
-  @property({type: ButtonType}) type = ''
-  @property({type: String}) label = ''
+  @property({type: String}) type = 'base'
+  @property({type: String}) variant = 'accent'
+  @property({type: String}) size = 'medium'
+  @property({type: String}) label = '默认'
+  @property({type: Boolean}) disabled = false
+  @property({type: String}) treatment = ''
+  @property({type: String}) icon = 'bug'
+  @property({type: String}) iconcolor = ''

  getBaseButton(): HTMLTemplateResult {
-    return html`
-      <button>${this.label}</button>
-    `
+    if (this.hasAttribute('disabled')) {
+      return html`
+        <button
+          class="disabled ${this.variant} ${this.size} ${this.treatment}"
+          size=${this.size}
+        >
+          ${this.label}
+        </button>
+      `
+    } else {
+      return html`
+        <button class="${this.variant} ${this.size} ${this.treatment}">
+          ${this.label}
+        </button>
+      `
+    }
+  }
+
+  getIconLabelButton(): HTMLTemplateResult {
+    const colorstyle = this.iconcolor
+      ? html`
+          <style>
+            button::before {
+              color: ${this.iconcolor} !important;
+            }
+          </style>
+        `
+      : nothing
+    if (this.hasAttribute('disabled')) {
+      return html`
+        <button
+          class="disabled hasicon ${this.variant} ${this.size} ${this
+            .treatment}"
+          data-icon=${this.icon}
+        >
+          ${colorstyle} ${this.label}
+        </button>
+      `
+    } else {
+      return html`
+        <button
+          class="hasicon ${this.variant} ${this.size} ${this.treatment}"
+          data-icon=${this.icon}
+        >
+          ${colorstyle} ${this.label}
+        </button>
+      `
+    }
+  }
+
+  getIconOnlyButton(): HTMLTemplateResult {
+    const colorstyle = this.iconcolor
+      ? html`
+          <style>
+            button::before {
+              color: ${this.iconcolor} !important;
+            }
+          </style>
+        `
+      : nothing
+    if (this.hasAttribute('disabled')) {
+      return html`
+        <button
+          class="icononly disabled ${this.variant} ${this.size} ${this
+            .treatment}"
+          data-icon=${this.icon}
+        >
+          ${colorstyle}
+        </button>
+      `
+    } else {
+      return html`
+        <button
+          class="icononly ${this.variant} ${this.size} ${this.treatment}"
+          data-icon=${this.icon}
+        >
+          ${colorstyle}
+        </button>
+      `
+    }
  }

  render() {
    switch (this.type) {
      case ButtonType.BASE:
        return this.getBaseButton()
+      case ButtonType.ICONONLY:
+        return this.getIconOnlyButton()
+      case ButtonType.ICONLABEL:
+        return this.getIconLabelButton()
      default:
        console.error('unhanled 【star-button】 type')
        return nothing
--- a/src/index.ts
+++ b/src/index.ts
@ -1,8 +1,12 @@
 import {html, css, LitElement} from 'lit'
 import {customElement, query, state} from 'lit/decorators.js'
+import './components/ul/ul'
+import './components/li/li'
+import './components/section/section'
 import {StarAnimateSection} from './components/section/section'
 import './components/section/section'
 import './test/panels/root'
+import './components/button/button'

@customElement('settings-app')
 export class SettingsApp extends LitElement {
--- a/src/test/panels/button/button.ts
+++ b/src/test/panels/button/button.ts
@ -0,0 +1,195 @@
+import {html, LitElement} from 'lit'
+import {customElement, eventOptions} from 'lit/decorators.js'
+import {StarButton} from '../../../components/button/button'
+import '../../../components/button-group/buttongroup'
+
+@customElement('panel-button')
+export class PanelButton extends LitElement {
+  @eventOptions({passive: false})
+  handleEvent(evt: Event) {
+    switch (evt.type) {
+      case 'click':
+        if ((evt.target as StarButton).label === 'Click') {
+          alert('这是一次点击事件测试')
+        }
+        break
+    }
+  }
+
+  render() {
+    return html`
+      <div>
+        <h4>按钮类型属性展示</h4>
+        <star-button></star-button>
+        <star-button type="base" variant="accent" label="accent"></star-button>
+        <star-button
+          type="base"
+          variant="primary"
+          label="primary"
+        ></star-button>
+        <star-button
+          type="base"
+          variant="secondary"
+          label="secondary"
+        ></star-button>
+        <star-button
+          type="base"
+          variant="negative"
+          label="negative"
+        ></star-button>
+        <star-button type="base" variant="black" label="black"></star-button>
+        <star-button type="base" variant="white" label="white"></star-button>
+      </div>
+      <div>
+        <h4>按钮大小属性展示</h4>
+        <star-button
+          type="base"
+          variant="accent"
+          label="small"
+          size="small"
+        ></star-button>
+        <star-button
+          type="base"
+          variant="accent"
+          label="medium"
+          size="medium"
+        ></star-button>
+        <star-button
+          type="base"
+          variant="accent"
+          label="large"
+          size="large"
+        ></star-button>
+        <star-button
+          type="base"
+          variant="accent"
+          label="extralarge"
+          size="extralarge"
+        ></star-button>
+      </div>
+      <div>
+        <h4>按钮填充状态展示</h4>
+        <star-button
+          type="base"
+          treatment="fill"
+          variant="primary"
+          label="fill"
+        ></star-button>
+        <star-button
+          type="base"
+          treatment="outline"
+          variant="primary"
+          label="outline"
+        ></star-button>
+      </div>
+      <div>
+        <h4>按钮点击事件展示</h4>
+        <star-button
+          @click=${this}
+          type="base"
+          variant="accent"
+          label="Click"
+        ></star-button>
+      </div>
+      <div>
+        <h4>图标按钮展示</h4>
+        <star-button
+          type="iconlabel"
+          variant="accent"
+          label="Icon+Label"
+          icon="alarm"
+          iconcolor="white"
+        ></star-button>
+        <star-button
+          type="icononly"
+          variant="accent"
+          label="IconOnly"
+          icon="delete"
+          iconcolor="#f9f9f9"
+        ></star-button>
+      </div>
+      <div>
+        <h4>各类按钮属性在禁用状态下的展示</h4>
+        <star-button type="base" variant="accent" label="正常"></star-button>
+        <star-button
+          type="base"
+          variant="accent"
+          label="禁用"
+          disabled
+        ></star-button>
+        <star-button
+          type="iconlabel"
+          variant="accent"
+          label="Icon禁用"
+          icon="alarm"
+          iconcolor="silver"
+          disabled
+        ></star-button>
+        <star-button
+          type="base"
+          treatment="fill"
+          variant="primary"
+          label="fill禁用"
+          disabled
+        ></star-button>
+        <star-button
+          type="base"
+          variant="accent"
+          label="large"
+          size="large"
+          disabled
+        ></star-button>
+      </div>
+      <div>
+        <h4>按钮组</h4>
+        <star-buttongroup class="bg">
+          <star-button
+            type="base"
+            variant="accent"
+            label="按钮1"
+            class="bg"
+          ></star-button>
+          <star-button
+            type="base"
+            variant="accent"
+            label="按钮2"
+            class="bg"
+          ></star-button>
+          <star-button
+            type="base"
+            variant="accent"
+            label="按钮3"
+            class="bg"
+          ></star-button>
+        </star-buttongroup>
+        <hr />
+        <star-buttongroup vertical class="bg">
+          <star-button
+            type="base"
+            variant="accent"
+            label="按钮1"
+            class="bg"
+          ></star-button>
+          <star-button
+            type="base"
+            variant="accent"
+            label="按钮2"
+            class="bg"
+          ></star-button>
+          <star-button
+            type="base"
+            variant="accent"
+            label="按钮3"
+            class="bg"
+          ></star-button>
+        </star-buttongroup>
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'panel-button': PanelButton
+  }
+}
--- a/src/test/panels/root.ts
+++ b/src/test/panels/root.ts
@ -3,14 +3,12 @@ import {customElement, state} 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 './about/about'
 import './icon/icon'
 import './general/general'
 import './indicators/indicators'
 import './blur/use-blur'
+import './button/button'

 type SEID = String

@ -100,6 +98,14 @@ export class PanelRoot extends LitElement {
        href="#general"
      ></star-li>
      <hr />
+      <star-li
+        type=${LiType.ICON_LABEL}
+        label="查看所有按钮"
+        icon="play-circle"
+        iconcolor="red"
+        href="#button"
+      ></star-li>
+      <hr />
      <star-li
        type=${LiType.ICON_LABEL}
        label="关于"