TASK:#105403 StarWebComponents开发-radio

CHANGELOG.md

@@ -8,3 +8,4 @@
 - add bubble
 - add indicator-page-point
 - add blur
+- add radio

src/components/radio/README.md

@@ -0,0 +1,71 @@
+# star-radio and star-radio group
+星光 Web 组件——单选框组件：radio组件介绍（8月31日)
+          
+
+## 介绍
+star-radio和star-radio-group为单选框按钮和单选框按钮组，一般在使用过程中都是同时使用。
+star-radio属性：
+
+  ### 1、checkedType属性
+  单选框风格样式类型,checkedType="symbol"为默认类型(√),checkedType="round"为圆圈类型，后续根据具体要求可扩展定义 
+    ```html demo
+    <star-radio-group checkedType="round">
+      <star-radio></star-radio>
+    <star-radio-group>
+    ```
+   ### 2、checked属性
+  Booloean类型，checked=true,单选框选中状态，checked=false,未选中状态。默认为false，不选中状态。
+    ```html demo
+      <star-radio-group>
+        <star-radio checked></star-radio>
+        <star-radio></star-radio>
+      <star-radio-group>
+    ```
+  ### 3、checkedLocation属性
+  单选框选中图标位置状态，checkedLocation="left" 选中图标在左侧栏，checkedLocation="right" 选中图标在右侧栏，默认在左侧栏
+    ```html demo
+      <star-radio-group checkedLocation="right">
+        <star-radio checked></star-radio>
+        <star-radio></star-radio>
+      <star-radio-group>
+    ```
+  ### 4、label属性
+  UI界面中的正文主体文本内容
+    ```html demo
+    <star-radio-group checkedLocation="right">
+        <star-radio label="content1" checked></star-radio>
+        <star-radio> label="content2"</star-radio>
+    <star-radio-group>  
+    ```
+  ### 5、node属性
+  UI界面中的正文主体文本内容下方补充扩展文本内容
+    ``` html demo
+      <star-radio-group checkedLocation="right">
+        <star-radio label="content1" label2="expand1" checked></star-radio>
+        <star-radio> label="content2" label2="expand2" </star-radio>
+      <star-radio-group>  
+    ```
+  ### 6、icon属性
+  控制ui界面中的图标字体样式属性
+    ```html demo
+      <star-radio-group checkedLocation="right" checkedType="round">
+        <star-radio icon="add" label="content1" label2="expand1" checked></star-radio>
+        <star-radio> icon="keyboard" label="content2" label2="expand2" </star-radio>
+      <star-radio-group>  
+    ```
+  ### 7、iconcolor属性
+  控制图标字体颜色样式属性，和icon属性同时使用时起作用
+    ```html demo
+      <star-radio-group checkedLocation="right" checkedType="round">
+        <star-radio icon="add" iconcolor="#226dee" label="content1" label2="expand1" checked></star-radio>
+        <star-radio> icon="keyboard" iconcolor="#226dee" label="content2" label2="expand2" </star-radio>
+      <star-radio-group> 
+    ```
+  ### 8、disabled属性
+  控制单选框按钮禁用状态，默认为：false。
+    ```html demo
+      <star-radio-group checkedLocation="right" checkedType="round">
+        <star-radio icon="add" iconcolor="#226dee" label="content1" label2="expand1" disabled></star-radio>
+        <star-radio> icon="keyboard" iconcolor="#226dee" label="content2" label2="expand2" disabled</star-radio>
+      <star-radio-group> 
+    ``` 

src/components/radio/radio-group.ts

@@ -0,0 +1,67 @@
+import {LitElement, html, CSSResultArray, PropertyValues} from 'lit'
+import {customElement, property, queryAssignedNodes} from 'lit/decorators.js'
+import './radio'
+import {StarRadio} from './radio'
+import {sharedStyles} from './radio-style'
+@customElement('star-radio-group')
+export class StarRadioGroup extends LitElement {
+  public static override get styles(): CSSResultArray {
+    return [sharedStyles]
+  }
+  @property() selected = ''
+  @property() checkedLocation = 'left'
+  @property() checkedType = ''
+  constructor() {
+    super()
+    const shadowRoot = this.attachShadow({mode: 'open'})
+    shadowRoot.addEventListener('change', (event: Event) => {
+      event.stopPropagation() //阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。
+      // @ts-ignore
+      this.selected = event.target.value
+      this.radioChange(event.target) //重构event.target对象
+    })
+  }
+  @queryAssignedNodes() //用来获取对应的slot元素
+  public defaultNodes!: Node[]
+  public get radios(): StarRadio[] {
+    return this.defaultNodes.filter(
+      (node) => (node as HTMLElement) instanceof StarRadio
+    ) as StarRadio[]
+  }
+  render() {
+    return html`
+      <div id="star-radio-group">
+        <slot></slot>
+      </div>
+    `
+  }
+  protected override firstUpdated(changes: PropertyValues): void {
+    super.firstUpdated(changes)
+    this.radios.map((radio) => {
+      radio.checkedLocation = this.checkedLocation
+      radio.checkedType = this.checkedType
+      radio.checked ? (this.selected = radio.value) : ''
+    })
+    this.changeEvent()
+  }
+  // @ts-ignore
+  radioChange(checkedRadio) {
+    this.radios.map((radio) => {
+      radio.checked = this.selected === radio.value
+    })
+    this.changeEvent()
+  }
+  protected changeEvent() {
+    this.dispatchEvent(
+      new Event('star-radio-change', {
+        bubbles: true,
+        composed: false,
+      })
+    )
+  }
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'star-radio-group': StarRadioGroup
+  }
+}

src/components/radio/radio-style.ts

@@ -0,0 +1,76 @@
+import {css, CSSResult} from 'lit'
+export const sharedStyles: CSSResult = css`
+  .star-radio {
+    display: flex;
+    cursor: pointer;
+    padding: 15px;
+  }
+  /*按钮禁用状态*/
+  .star-radio.disabled {
+    color: #606266;
+    cursor: default;
+    pointer-events: none;
+  }
+   /*按钮选中状态*/
+  .star-radio.checked {
+    display: flex;
+    cursor: pointer;
+    background-color: #b4c4e6;
+  }
+  .star-radio-main {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+  .star-radio-main.right {
+    flex-direction: row-reverse;
+  }
+  .star-radio .label-img {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+  /* 控制单选框显示的类型 */
+  .star-radio .checktype {
+    margin: 0 12px;
+    /* text-align: center; */
+  }
+  .star-radio .checkedType.symbol {
+    color: #1561f0;
+    font-weight: bold;
+    width: 20px;
+    height: 20px;
+  }
+  .star-radio .checkedType.round {
+    box-sizing: border-box;
+    display: inline-block;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    background-color: #dedede;
+  }
+  .star-radio.checked .checkedType.round {
+    border: 6px solid #1a60e2;
+  }
+  /*控制图标*/
+  .star-radio .srcImg {
+    margin: 10px;
+    font-size: 25px;
+    font-family: 'gaia-icons';
+    text-align: center;
+  }
+  /*控制label*/
+  .star-radio .label {
+    display: flex;
+    flex-direction: column;
+  }
+  .star-radio .label .label1 {
+    font-size: 16px;
+  }
+  .star-radio .label .note {
+    font-size: 12px;
+  }
+  .star-radio.checked .label {
+    color: #1561f0;
+  }
+`

src/components/radio/radio.ts

@@ -0,0 +1,87 @@
+import {LitElement, html, CSSResultArray} from 'lit'
+import {customElement, property} from 'lit/decorators.js'
+import {sharedStyles} from './radio-style'
+@customElement('star-radio')
+export class StarRadio extends LitElement {
+  public static override get styles(): CSSResultArray {
+    return [sharedStyles]
+  }
+  @property({type: String}) checkedType = ''
+  @property({type: Boolean}) checked = false
+  @property({type: Boolean}) disabled = false
+  @property({type: String}) checkedLocation = 'left'
+  @property({type: String}) label = ''
+  @property({type: String}) note = ''
+  @property({type: String}) icon = ''
+  @property({type: String}) iconcolor = ''
+  @property({type: String}) value = ''
+  render() {
+    return html`
+      <div
+        class="star-radio ${this.checked ? 'checked' : 'nothing'} ${this
+          .disabled
+          ? 'disabled'
+          : 'nothing'}"
+        @click="${this.radioActivate}"
+      >
+        <div class="star-radio-main ${this.checkedLocation}">
+          ${this.checkedTypeFun()}
+          <div class="label-img">
+            ${this.icon
+              ? html`
+                  <span class="srcImg">${this.icon}</span>
+                `
+              : ''}
+            ${this.iconcolor
+              ? html`
+                  <style>
+                    .star-radio .srcImg {
+                      color: ${this.iconcolor} !important;
+                    }
+                  </style>
+                `
+              : ''}
+            <span class="label">
+              <span class="label1">${this.label}</span>
+              ${this.note
+                ? html`
+                    <span class="note">${this.note}</span>
+                  `
+                : ''}
+            </span>
+          </div>
+        </div>
+      </div>
+    `
+  }
+  protected radioActivate() {
+    if (this.checked) return
+    this.checked = true
+    this.dispatchEvent(
+      new Event('change', {
+        bubbles: true, //向上冒泡
+        composed: false, //事件不会在ShadowDOM根节点之外触发侦听器
+      })
+    )
+  }
+  checkedTypeFun() {
+    if (this.checkedType === 'symbol') {
+      return html`
+        <span class="checkedType symbol">${this.checked ? `√` : ''}</span>
+      `
+    } else if (this.checkedType === 'round') {
+      return html`
+        <span class="checkedType round"></span>
+      `
+    } else {
+      return html`
+        <span class="checkedType">${this.checked ? `√` : ''}</span>
+      `
+    }
+  }
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'star-radio': StarRadio
+  }
+}

src/index.ts

@@ -8,6 +8,8 @@ import {StarAnimateSection} from './components/section/section'
 import './components/section/section'
 import './test/panels/root'
 import './components/button/button'
+import './components/radio/radio-group'
+import './components/radio/radio'
 
 @customElement('settings-app')
 export class SettingsApp extends LitElement {

src/test/panels/radio/radio.ts

@@ -0,0 +1,153 @@
+import {html, LitElement, CSSResultArray} from 'lit'
+import {customElement, property, state} from 'lit/decorators.js'
+@customElement('panel-radio')
+export class PanelRadio extends LitElement {
+  @property()
+  foo = ''
+  @state()
+  bar = ''
+  @state()
+  addNumber = 0
+  constructor() {
+    super()
+    const shadowRoot = this.attachShadow({mode: 'open'})
+    shadowRoot.addEventListener('star-radio-change', (event: Event) => {
+      event.stopPropagation()
+      // @ts-ignore
+      console.log('选择的单选框value : ' + event.target.__selected)
+    })
+  }
+  render() {
+    return html`
+      <div>
+        <div style="border: 1px dashed #bbbbbb; border-radius: 10px 10px 0 0">
+          <div style="text-align: center; margin: 15px 0">自动锁屏</div>
+          <star-radio-group
+            id="star-radio-group1"
+            checkedLocation="right"
+            checkedType="symbol"
+          >
+            <star-radio label="15秒" value="15秒" checked></star-radio>
+            <star-radio label="30秒" value="30秒"></star-radio>
+            <star-radio label="1分钟" value="1分钟"></star-radio>
+            <star-radio label="2分钟" value="2分钟"></star-radio>
+          </star-radio-group>
+        </div>
+      </div>
+      <div>
+        <div style="border: 1px dashed #bbbbbb; border-radius: 10px 10px 0 0">
+          <div style="text-align: center; margin: 15px 0">模式选择</div>
+          <star-radio-group
+            id="star-radio-group2"
+            checkedLocation="right"
+            checkedType="round"
+          >
+            <star-radio
+              label="自动推荐壁纸"
+              note="开启画报后，将为您推荐精选壁纸"
+              value="自动推荐壁纸"
+              checked
+            ></star-radio>
+            <star-radio
+              label="幻灯片壁纸"
+              note="开启画报后，将为您轮播自选壁纸"
+              value="幻灯片壁纸"
+            ></star-radio>
+          </star-radio-group>
+        </div>
+      </div>
+      <div>
+        <div style="border: 1px dashed #bbbbbb; border-radius: 10px 10px 0 0">
+          <div style="text-align: center; margin: 15px 0">色彩风格</div>
+          <star-radio-group
+            id="star-radio-group3"
+            checkedLocation="left"
+            checkedType="symbol"
+          >
+            <star-radio
+              label="生动(推荐)"
+              note="根据屏幕内容提供更生动的显示效果"
+              value="生动(推荐)"
+              checked
+            ></star-radio>
+            <star-radio
+              label="鲜艳"
+              note="增强屏幕显示色彩"
+              value="鲜艳"
+            ></star-radio>
+            <star-radio
+              label="标准"
+              note="还原标准色彩，显示与其他标准显示设备一致的效果"
+              value="标准"
+            ></star-radio>
+          </star-radio-group>
+        </div>
+      </div>
+      <div>
+        <div style="border: 1px dashed #bbbbbb; border-radius: 10px 10px 0 0">
+          <div style="text-align: center; margin: 15px 0">自动填充服务</div>
+          <star-radio-group
+            id="star-radio-group4"
+            checkedLocation="right"
+            checkedType="round"
+          >
+            <star-radio
+              icon="add"
+              iconcolor="#138d2e"
+              label="添加"
+              note="请添加具体内容"
+              value="添加"
+              checked
+            ></star-radio>
+            <star-radio
+              icon="keyboard"
+              iconcolor="#226dee"
+              label="麒麟智能密码管理"
+              note="麒麟智能密码管理键盘详细说明"
+              value="智能密码管理"
+            ></star-radio>
+            <star-radio
+              icon="link"
+              iconcolor="#5710b3"
+              label="添加服务"
+              note="请选择要添加的具体服务"
+              value="添加服务"
+            ></star-radio>
+          </star-radio-group>
+        </div>
+      </div>
+      <div>
+        <div style="border: 1px dashed #bbbbbb; border-radius: 10px 10px 0 0">
+          <div style="text-align: center; margin: 15px 0">禁用状态测试</div>
+          <star-radio-group
+            id="star-radio-group5"
+            checkedLocation="right"
+            checkedType="round"
+          >
+            <star-radio
+              label="按钮禁用"
+              note="无法添加"
+              value="添加"
+              value="first"
+              disabled
+            ></star-radio>
+            <star-radio
+              label="麒麟智能密码管理"
+              note="麒麟智能密码管理键盘详细说明"
+              value="second"
+              disabled
+            ></star-radio>
+          </star-radio-group>
+        </div>
+      </div>
+    `
+  }
+  public static override get styles(): CSSResultArray {
+    return []
+  }
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'panel-radio': PanelRadio
+  }
+}

src/test/panels/root.ts

@@ -13,6 +13,8 @@ import './indicators/indicators'
 import './blur/use-blur'
 import './button/button'
 import './container/container'
+import './radio/radio'
+
 
 type SEID = string
 
@@ -118,6 +120,14 @@ export class PanelRoot extends LitElement {
         href="#button"
       ></star-li>
       <hr />
+      <star-li
+        type=${LiType.ICON_LABEL}
+        label="单选框"
+        icon="o"
+        iconcolor="black"
+        href="#radio"
+      ></star-li>
+      <hr />
       <star-li
         type=${LiType.ICON_LABEL}
         label="关于"