From b797f3e574d0697ffa0524c4a9e34b57510fcfb5 Mon Sep 17 00:00:00 2001 From: wangchangqi Date: Tue, 22 Nov 2022 11:11:13 +0800 Subject: [PATCH] =?UTF-8?q?(update)star-li=E6=94=AF=E6=8C=81embed-slider,?= =?UTF-8?q?=20=E5=90=8C=E6=97=B6=E8=B0=83=E6=95=B4=E4=BA=86star-li?= =?UTF-8?q?=E7=9A=84padding-inline,=20=E4=BB=A5=E9=80=82=E5=BA=94=E8=BD=BB?= =?UTF-8?q?=E9=87=8F=E5=8C=96=E7=9A=84=E5=88=97=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/base/auto-px-style.ts | 6 +- src/components/button/button.css.ts | 5 +- src/components/li/README-settings.md | 117 ++++++++++++++++++--------- src/components/li/li.css.ts | 78 +++++++++++------- src/components/li/li.ts | 37 +++++---- src/test/panels/li/li.ts | 16 ++++ 6 files changed, 174 insertions(+), 85 deletions(-) diff --git a/src/components/base/auto-px-style.ts b/src/components/base/auto-px-style.ts index e7d213b..23ecc19 100644 --- a/src/components/base/auto-px-style.ts +++ b/src/components/base/auto-px-style.ts @@ -23,8 +23,8 @@ export const autoPxStyle: CSSResult = css` --auto-22px: calc(22px / var(--hostDevicePixelRatio)); --auto-23px: calc(23px / var(--hostDevicePixelRatio)); --auto-24px: calc(24px / var(--hostDevicePixelRatio)); - --auto-26px: calc(26px / var(--hostDevicePixelRatio)); --auto-25_6px: calc(25.6px / var(--hostDevicePixelRatio)); + --auto-26px: calc(26px / var(--hostDevicePixelRatio)); --auto-28px: calc(28px / var(--hostDevicePixelRatio)); --auto-30px: calc(30px / var(--hostDevicePixelRatio)); --auto-31px: calc(31px / var(--hostDevicePixelRatio)); @@ -43,6 +43,7 @@ export const autoPxStyle: CSSResult = css` --auto-46_67px: calc(46.67px / var(--hostDevicePixelRatio)); --auto-48px: calc(48px / var(--hostDevicePixelRatio)); --auto-50px: calc(50px / var(--hostDevicePixelRatio)); + --auto-52px: calc(52px / var(--hostDevicePixelRatio)); --auto-53px: calc(53px / var(--hostDevicePixelRatio)); --auto-54px: calc(54px / var(--hostDevicePixelRatio)); --auto-55px: calc(55px / var(--hostDevicePixelRatio)); @@ -52,10 +53,10 @@ export const autoPxStyle: CSSResult = css` --auto-60px: calc(60px / var(--hostDevicePixelRatio)); --auto-64px: calc(64px / var(--hostDevicePixelRatio)); --auto-66px: calc(66px / var(--hostDevicePixelRatio)); + --auto-68px: calc(68px / var(--hostDevicePixelRatio)); --auto-70px: calc(70px / var(--hostDevicePixelRatio)); --auto-71px: calc(70px / var(--hostDevicePixelRatio)); --auto-72px: calc(72px / var(--hostDevicePixelRatio)); - --auto-68px: calc(68px / var(--hostDevicePixelRatio)); --auto-74px: calc(66px / var(--hostDevicePixelRatio)); --auto-76px: calc(76px / var(--hostDevicePixelRatio)); --auto-77px: calc(77px / var(--hostDevicePixelRatio)); @@ -122,7 +123,6 @@ export const autoPxStyle: CSSResult = css` --auto-640px: calc(640px / var(--hostDevicePixelRatio)); --auto-736px: calc(736px / var(--hostDevicePixelRatio)); --auto-781px: calc(781px / var(--hostDevicePixelRatio)); - --auto-640px: calc(640px / var(--hostDevicePixelRatio)); --auto-815px: calc(815px / var(--hostDevicePixelRatio)); --auto-1040px: calc(1040px / var(--hostDevicePixelRatio)); --auto-1592px: calc(1592px / var(--hostDevicePixelRatio)); diff --git a/src/components/button/button.css.ts b/src/components/button/button.css.ts index 6c5a2ba..df814c1 100644 --- a/src/components/button/button.css.ts +++ b/src/components/button/button.css.ts @@ -305,7 +305,10 @@ export default [ } :host([type='text']) button { /* min-width 保障内容最少情况下的显示 */ - min-width: calc(var(--auto-56px) + var(--auto-56px) + 0.1px); + min-width: var( + --oc-text-min-width, + calc(var(--auto-56px) + var(--auto-56px) + 0.1px) + ); padding-inline: var(--oc-text-padding-inline, var(--auto-56px)); overflow: hidden; white-space: nowrap; diff --git a/src/components/li/README-settings.md b/src/components/li/README-settings.md index aac8633..71b430f 100644 --- a/src/components/li/README-settings.md +++ b/src/components/li/README-settings.md @@ -170,45 +170,6 @@ type="embed-checkbox" └─────────┘ └────────────────┘ └────────────────┘ ``` -## RadioGroup - -Radio 在纵向或横向上的叠加 - -``` -┌────────────────────────────────────────────────────────────────────┐ -│ │ -│ ┌────────────┬───────────────────────────────────────────────────┐ │ -│ │ │ ┌─────────┐ ┌───────┬────────┐ ┌────────────────┐ │ │ -│ │ │ │ │ │ Label │ Square │ │ Radio(mock) │ │ │ -│ │ │ │(App)Icon│ ├───────┴────────┤ │ │ │ │ -│ │type='radio'│ │ │ │ Description | │circle/checkmark│ │ │ -│ │ │ └─────────┘ └────────────────┘ └────────────────┘ │ │ -│ └────────────┴───────────────────────────────────────────────────┘ │ -│ ┌────────────┬───────────────────────────────────────────────────┐ │ -│ │ │ ┌─────────┐ ┌───────┬────────┐ ┌────────────────┐ │ │ -│ │ │ │ │ │ Label │ Square │ │ Radio(mock) │ │ │ -│ │ │ │(App)Icon│ ├───────┴────────┤ │ │ │ │ -│ │type='radio'│ │ │ │ Description | │circle/checkmark│ │ │ -│ │ │ └─────────┘ └────────────────┘ └────────────────┘ │ │ -│ └────────────┴───────────────────────────────────────────────────┘ │ -│ ... │ -└────────────────────────────────────────────────────────────────────┘ -``` - -```html - - - - -``` - ## Card ``` @@ -241,3 +202,81 @@ Radio 在纵向或横向上的叠加 | 次Description | ----------------- ``` + +## type="embed-slider" + +结构: + +``` +┌──────────────┬─────────────────────────────┐ +│ │ ┌───────┐ ┌─────────────┐ │ +│ │ │ Label │---│ star-button │ │ +│ │ └───────┘ └─────────────┘ │ +│ type= │ ┌─────────────────────────┐ │ +│"embed-slider"│ │ star-slider │ │ +│ │ └─────────────────────────┘ │ +└──────────────┴─────────────────────────────┘ +``` + +基本示例: + +```html + + + + + + + + +``` + +## `star-li` 在 `star-radio-group` 中 + +Radio 在纵向或横向上的叠加 + +交互注意: + +- star-radio-group 上的 selected 优先级 > star-li 中的 checked 优先级 +- star-radio-group 上的 variant 优先级 > star-li 中的 variant 优先级 + +``` +┌────────────────────────────────────────────────────────────────────┐ +│ │ +│ ┌────────────┬───────────────────────────────────────────────────┐ │ +│ │ │ ┌─────────┐ ┌───────┬────────┐ ┌────────────────┐ │ │ +│ │ │ │ │ │ Label │ Square │ │ Radio(mock) │ │ │ +│ │ │ │(App)Icon│ ├───────┴────────┤ │ │ │ │ +│ │type='radio'│ │ │ │ Description | │circle/checkmark│ │ │ +│ │ │ └─────────┘ └────────────────┘ └────────────────┘ │ │ +│ └────────────┴───────────────────────────────────────────────────┘ │ +│ ┌────────────┬───────────────────────────────────────────────────┐ │ +│ │ │ ┌─────────┐ ┌───────┬────────┐ ┌────────────────┐ │ │ +│ │ │ │ │ │ Label │ Square │ │ Radio(mock) │ │ │ +│ │ │ │(App)Icon│ ├───────┴────────┤ │ │ │ │ +│ │type='radio'│ │ │ │ Description | │circle/checkmark│ │ │ +│ │ │ └─────────┘ └────────────────┘ └────────────────┘ │ │ +│ └────────────┴───────────────────────────────────────────────────┘ │ +│ ... │ +└────────────────────────────────────────────────────────────────────┘ +``` + +```html + + + + +``` diff --git a/src/components/li/li.css.ts b/src/components/li/li.css.ts index f12572a..dc730c2 100644 --- a/src/components/li/li.css.ts +++ b/src/components/li/li.css.ts @@ -3,16 +3,16 @@ import {css} from 'lit' export default css` :host { display: flex; - width: 100%; + padding-inline: var(--oc-li-padding-inline, var(--auto-48px)); + width: calc(100% - var(--oc-li-padding-inline, var(--auto-48px)) * 2); min-height: var(--auto-96px); } li { - width: inherit; + width: 100%; display: flex; flex-wrap: wrap; overflow: hidden; white-space: nowrap; - padding-inline: var(--oc-li-padding-inline, var(--auto-48px)); } a { display: flex; @@ -77,7 +77,7 @@ export default css` font-size: var(--auto-48px); min-width: var(--auto-48px); padding-inline-end: var(--auto-18px); - margin: auto 0; + margin: auto 0px; } a[href]::after { color: var(--li-link); @@ -86,13 +86,13 @@ export default css` font-size: var(--auto-32px); width: var(--auto-32px); height: var(--auto-32px); - margin: auto 0 auto auto; + margin: auto 0px auto auto; padding-left: var(--auto-14px); } div#content { display: flex; - margin: auto 0; + margin: auto 0px; overflow: hidden; flex-direction: column; } @@ -105,7 +105,7 @@ export default css` span#label { font-weight: bold; color: var(--li-label); - font-weight: 400; + font-weight: 400px; font-size: var(--auto-26px); line-height: var(--auto-34px); } @@ -118,18 +118,18 @@ export default css` margin: auto var(--auto-16px) var(--auto-1px) var(--auto-16px); padding-inline: var(--auto-8px); line-height: var(--auto-23px); - font-weight: 500; + font-weight: 500px; font-size: var(--auto-20px); color: var(--li-square); } div#square span { - /* margin: var(--auto-_2px) var(--auto-5px) 0 var(--auto-6px); */ + /* margin: var(--auto-_2px) var(--auto-5px) 0px var(--auto-6px); */ margin-left: var(--auto-6px); - line-height: 0; + line-height: 0px; } span#description { color: var(--li-description); - font-weight: 400; + font-weight: 400px; font-size: var(--auto-20px); line-height: var(--auto-18px); margin-top: var(--auto-12px); @@ -138,7 +138,7 @@ export default css` flex: 1; display: inline-block; /* 用于克服未知排版故障(自身被挤压为0) */ min-width: var(--auto-112px); - margin: auto 0 auto var(--auto-20px); + margin: auto 0px auto var(--auto-20px); text-align: right; white-space: nowrap; font-size: var(--auto-26px); @@ -158,26 +158,29 @@ export default css` } /* type="input" */ - :host([type='input']) a { - justify-content: space-between; + :host([type='input']) { + padding-inline: var(--auto-26px); + width: calc(100% - var(--auto-26px) * 2); } :host([type='input']) li { border: var(--auto-3px) solid transparent; border-radius: var(--auto-16px); - margin: var(--auto-16px) var(--auto-22px); - padding-inline: var(--auto-26px); + padding: var(--auto-16px) var(--auto-22px); + } + :host([type='input']) a { + justify-content: space-between; } :host([type='input']) input { flex: 1; width: 100%; height: inherit; padding-inline-start: var(--auto-40px); - border: 0; + border: 0px; outline: none; box-sizing: border-box; vertical-align: top; text-align: right; - font-weight: 400; + font-weight: 400px; font-size: var(--auto-26px); line-height: var(--auto-26px); color: var(--li-input); @@ -199,7 +202,7 @@ export default css` content: ' '; width: var(--auto-32px); height: var(--auto-32px); - margin: auto 0 auto auto; + margin: auto 0px auto auto; box-sizing: border-box; border: var(--auto-3px) solid rgba(38, 38, 38, 0.2); border-radius: 50%; @@ -213,7 +216,7 @@ export default css` font-family: 'star-icons'; font-size: var(--auto-48px); color: var(--theme-blue); - border: 0; + border: 0px; } :host([type='radio'][variant='checkmark'][checked]) a::after { content: 'tick'; @@ -228,13 +231,13 @@ export default css` content: ' '; width: var(--auto-32px); height: var(--auto-32px); - margin: auto 0 auto auto; + margin: auto 0px auto auto; box-sizing: border-box; border: var(--auto-3px) solid rgba(38, 38, 38, 0.2); border-radius: var(--auto-5px); } :host([type='checkbox'][pos='left']) a::before { - margin: auto var(--auto-19px) auto 0; + margin: auto var(--auto-19px) auto 0px; } :host([type='checkbox'][checked][pos='left']) a::before, :host([type='checkbox'][checked]:not([pos='left'])) a::after { @@ -251,7 +254,7 @@ export default css` /* other star-web-components */ star-button[type='text']#li-text-button { - --oc-text-padding-inline: 0; + --oc-text-padding-inline: 0px; --oc-text-min-height: var(--auto-96px); pointer-events: none; width: 100%; @@ -274,13 +277,13 @@ export default css` width: var(--auto-64px); height: var(--auto-64px); color: var(--li-info); - margin: auto var(--auto-32px) auto 0; + margin: auto var(--auto-32px) auto 0px; font-size: var(--auto-32px); min-width: var(--auto-64px); } - :host(:is([type='embed-info'], [type='embed-switch'], [type='embed-checkbox'])) - li { - padding-inline-end: 0; + :host(:is([type='embed-info'], [type='embed-switch'], [type='embed-checkbox'])) { + padding-inline-end: 0px; + width: calc(100% - var(--oc-li-padding-inline, var(--auto-48px))); } ::slotted(star-switch[slot='switch']) { @@ -301,7 +304,7 @@ export default css` width: var(--auto-64px); height: var(--auto-64px); min-width: var(--auto-64px); - margin: auto var(--oc-icon-margin-right, var(--auto-16px)) auto 0; + margin: auto var(--oc-icon-margin-right, var(--auto-16px)) auto 0px; } ::slotted(star-checkbox[slot='checkbox']) { position: relative; @@ -323,6 +326,25 @@ export default css` height: var(--auto-40px); left: calc(0px - var(--auto-12px)); } + :host([type='embed-slider']) { + flex-direction: column; + } + :host([type='embed-slider']) li { + padding-bottom: var(--auto-24px); + } + ::slotted(star-button[slot='slider-button']) { + --oc-text-min-height: var(--auto-34px); + --oc-text-padding-inline: 0px; + --oc-text-min-width: min-width; + margin: auto 0px auto auto; + font-weight: 400px; + font-size: var(--auto-26px); + line-height: var(--auto-34px); + color: var(--font-auxiliary-black); + } + ::slotted(star-slider[slot='slider']) { + width: 100%; + } /* 条目按压和释放时的变化 */ :host(.starpress:not([type='embed-switch'], [type='embed-checkbox'])) { diff --git a/src/components/li/li.ts b/src/components/li/li.ts index 8e0f54d..716f1f8 100644 --- a/src/components/li/li.ts +++ b/src/components/li/li.ts @@ -365,6 +365,10 @@ export class StarLi extends StarBaseElement { }} /> ` + case LiType.EMBED_SLIDER: + return html` + + ` case LiType.SWITCH: return html` - ` - case LiType.EMBED_SWITCH: - return html` - - ` case LiType.EMBED_CHECKBOX: return html`
` + case LiType.EMBED_INFO: + return html` + + ` + case LiType.EMBED_SLIDER: + return html` + + ` + case LiType.EMBED_SWITCH: + return html` + + ` default: return nothing } @@ -415,7 +423,7 @@ export class StarLi extends StarBaseElement { ` } - private generateGeneral(renderStatic?: Function) { + private generateGeneral() { return html` ${this.generateWidgetIcon()} @@ -426,7 +434,7 @@ export class StarLi extends StarBaseElement { ${this.generateWidgetDescription()} - ${this.generateWidgetValue()} ${renderStatic?.()} + ${this.generateWidgetValue()} ${this.generateStaticSlot()} ` } @@ -454,9 +462,10 @@ export class StarLi extends StarBaseElement { case LiType.EMBED_CARD: // TBD - case LiType.EMBED_INFO: - case LiType.EMBED_SWITCH: case LiType.EMBED_CHECKBOX: + case LiType.EMBED_INFO: + case LiType.EMBED_SLIDER: + case LiType.EMBED_SWITCH: return html`
  • ${this.generateGeneral()}
    • ${this.generateDynamicSlot()} @@ -467,7 +476,7 @@ export class StarLi extends StarBaseElement { case LiType.INPUT: return html` -
  • ${this.generateGeneral(this.generateStaticSlot.bind(this))}
    • +
  • ${this.generateGeneral()}
    • ` case LiType.CHECKBOX: @@ -480,7 +489,7 @@ export class StarLi extends StarBaseElement { this.emit(this.checked === true ? 'enabled' : 'disabled') }} > - ${this.generateGeneral(this.generateStaticSlot.bind(this))} + ${this.generateGeneral()} ` diff --git a/src/test/panels/li/li.ts b/src/test/panels/li/li.ts index 23e539a..4ffd485 100644 --- a/src/test/panels/li/li.ts +++ b/src/test/panels/li/li.ts @@ -26,6 +26,7 @@ import { } from './static/icons' import '@star-web-components/checkbox' import '@star-web-components/li' +import '@star-web-components/slider' import '@star-web-components/switch' import {StarRadioGroup} from '@star-web-components/radio' @@ -333,6 +334,21 @@ export class PanelLi extends LitElement {     +
    + + + + + + +
    +     +     +

    外嵌图标