diff --git a/src/components/base/auto-px-style.ts b/src/components/base/auto-px-style.ts index ed619b0..3f7c7ea 100644 --- a/src/components/base/auto-px-style.ts +++ b/src/components/base/auto-px-style.ts @@ -5,6 +5,7 @@ export const autoPxStyle: CSSResult = css` --hostDevicePixelRatio: var(--devicePixelRatio, 1); --auto-1px: calc(1px / var(--hostDevicePixelRatio)); --auto-2px: calc(2px / var(--hostDevicePixelRatio)); + --auto-3px: calc(3px / var(--hostDevicePixelRatio)); --auto-4px: calc(4px / var(--hostDevicePixelRatio)); --auto-5px: calc(5px / var(--hostDevicePixelRatio)); --auto-6px: calc(6px / var(--hostDevicePixelRatio)); @@ -18,6 +19,8 @@ export const autoPxStyle: CSSResult = css` --auto-16px: calc(16px / var(--hostDevicePixelRatio)); --auto-18px: calc(18px / var(--hostDevicePixelRatio)); --auto-20px: calc(20px / var(--hostDevicePixelRatio)); + --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)); @@ -45,17 +48,14 @@ export const autoPxStyle: CSSResult = css` --auto-58px: calc(58px / var(--hostDevicePixelRatio)); --auto-64px: calc(64px / var(--hostDevicePixelRatio)); --auto-66px: calc(66px / var(--hostDevicePixelRatio)); - --auto-71px: calc(71px / var(--hostDevicePixelRatio)); + --auto-70px: calc(70px / var(--hostDevicePixelRatio)); + --auto-71px: calc(70px / var(--hostDevicePixelRatio)); --auto-72px: calc(72px / var(--hostDevicePixelRatio)); --auto-74px: calc(66px / var(--hostDevicePixelRatio)); --auto-76px: calc(76px / var(--hostDevicePixelRatio)); --auto-77px: calc(77px / var(--hostDevicePixelRatio)); --auto-80px: calc(80px / var(--hostDevicePixelRatio)); --auto-82px: calc(80px / var(--hostDevicePixelRatio)); - --auto-70px: calc(70px / var(--hostDevicePixelRatio)); - --auto-72px: calc(72px / var(--hostDevicePixelRatio)); - --auto-76px: calc(76px / var(--hostDevicePixelRatio)); - --auto-80px: calc(80px / var(--hostDevicePixelRatio)); --auto-85px: calc(85px / var(--hostDevicePixelRatio)); --auto-88px: calc(88px / var(--hostDevicePixelRatio)); --auto-92px: calc(92px / var(--hostDevicePixelRatio)); @@ -63,7 +63,7 @@ export const autoPxStyle: CSSResult = css` --auto-108px: calc(108px / var(--hostDevicePixelRatio)); --auto-112px: calc(112px / var(--hostDevicePixelRatio)); --auto-116px: calc(116px / var(--hostDevicePixelRatio)); - --auto-124px: calc(124px / var(--hostDevicePixelRatio)); + --auto-118px: calc(118px / var(--hostDevicePixelRatio)); --auto-128px: calc(128px / var(--hostDevicePixelRatio)); --auto-129px: calc(129px / var(--hostDevicePixelRatio)); --auto-140px: calc(140px / var(--hostDevicePixelRatio)); @@ -71,8 +71,8 @@ export const autoPxStyle: CSSResult = css` --auto-160px: calc(160px / var(--hostDevicePixelRatio)); --auto-166px: calc(166px / var(--hostDevicePixelRatio)); --auto-176px: calc(176px / var(--hostDevicePixelRatio)); - --auto-186px: calc(186px / var(--hostDevicePixelRatio)); --auto-183px: calc(183px / var(--hostDevicePixelRatio)); + --auto-186px: calc(186px / var(--hostDevicePixelRatio)); --auto-200px: calc(200px / var(--hostDevicePixelRatio)); --auto-201px: calc(201px / var(--hostDevicePixelRatio)); --auto-206px: calc(206px / var(--hostDevicePixelRatio)); diff --git a/src/components/base/global-style.ts b/src/components/base/global-style.ts index b475199..337e538 100644 --- a/src/components/base/global-style.ts +++ b/src/components/base/global-style.ts @@ -9,6 +9,7 @@ import {css, CSSResultArray} from 'lit' * btn = button * bgc = background-color * bs = box-shadow + * oc = out-control 外部样式控制，用于侵入性修改 * * 模块划分原则： * 基础模块 - 基础模块存放具有通用意义的变量 @@ -35,6 +36,7 @@ const baseStyle = css` :root { --devicePixelRatio: 2; --text-font-family: 'OPPPSans'; + --icon-font: 'star-icons'; /*****************************线性渐变*************************************/ --gradient-black: linear-gradient(180deg, #83eea1 0%, #24ba8d 100%); @@ -364,6 +366,8 @@ const baseStyle = css` --full-pop-up-mask: rgba(24, 24, 24, 0.35); /********************************共用***************************************/ + --split-line-color: var(--opacity-black-09); + /* 全/radio */ --bgc-radio-off: rgba(38, 38, 38, 0.25); --bgc-radio-on: rgba(29, 152, 240, 1); @@ -448,6 +452,18 @@ const baseComponentStyle = css` --dialog-content: var(--font-heading-black); --dialog-checkbox: var(--font-sec-auxiliary-black); + /* Li */ + --li-label: var(--font-main-black); + --li-description: var(--font-sec-auxiliary-black); + --li-square: #B3B3B3; + --li-value-primary: var(--theme-blue); + --li-value-default: var(--font-sec-auxiliary-black); + --li-link: var(--linear-icon32-black); + --li-icon: var(--linear-icon-black); + --li-info: var(--linear-icon32-black); + --li-input: var(--font-prompt-black); + --li-bg-pressed: var(--opacity-black-06); + /* Radio */ --bor-radio-off: var(--auto-3px) solid rgba(38, 38, 38, 0.25); --bor-radio-off: var(--auto-3px) solid var(--opacity-white-25); diff --git a/src/components/base/star-base-element.ts b/src/components/base/star-base-element.ts index ad12e91..7c21df9 100644 --- a/src/components/base/star-base-element.ts +++ b/src/components/base/star-base-element.ts @@ -27,7 +27,7 @@ export type Constructor> = { prototype: T } -let currentHoverTarger!: StarBaseElement +let currentHoverTarget!: StarBaseElement function handleHover(e: Event) { // Firefox 仅支持 e.composedPath() @@ -38,16 +38,30 @@ function handleHover(e: Event) { while (path[i++] !== undefined) { const target = path[i] as Element switch (target?.tagName) { + /** + * 注意：star-button为原子化组成单位，遵循同一时刻只有一个单位被命中的原则 + * 在被触摸击中时将中止事件传递！ + * 绕开此行为可在包含其的组件中添加: + * ::slotted::(star-button) { + * pointer-events: none; + * } + */ case 'STAR-BUTTON': - currentHoverTarger = target as StarBaseElement - currentHoverTarger?.onhover() + case 'STAR-SWITCH': + e.stopImmediatePropagation() + currentHoverTarget = target as StarBaseElement + currentHoverTarget?.onhover() + return + case 'STAR-LI': + currentHoverTarget = target as StarBaseElement + currentHoverTarget?.onhover() break } } } function handleHoverEnd() { - currentHoverTarger?.onhoverend() + currentHoverTarget?.onhoverend() } function handleContextMenu(e: Event) { diff --git a/src/components/button/button.css.ts b/src/components/button/button.css.ts index 305c8b0..6c5a2ba 100644 --- a/src/components/button/button.css.ts +++ b/src/components/button/button.css.ts @@ -6,6 +6,7 @@ export default [ /* fit-content 同样适用，但firefox不支持 */ width: min-content; height: min-content; + text-align: center; display: flex; } :host([type='icononly']) { @@ -25,7 +26,7 @@ export default [ height: 100%; min-width: inherit; min-height: inherit; - text-align: center; + text-align: inherit; color: inherit; font-size: inherit; font-weight: inherit; @@ -141,8 +142,7 @@ export default [ /* 按钮共性 */ :host([type='normal']) button, :host([type='pure'][label]) button { - padding-inline-start: var(--auto-32px); - padding-inline-end: var(--auto-32px); + padding-inline: var(--auto-32px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @@ -150,13 +150,11 @@ export default [ } :host([type='normal']) button.middle, :host([type='pure'][label]) button.middle { - padding-inline-start: var(--auto-40px); - padding-inline-end: var(--auto-40px); + padding-inline: var(--auto-40px); } :host([type='normal']) button.large, :host([type='pure'][label]) button.large { - padding-inline-start: var(--auto-48px); - padding-inline-end: var(--auto-48px); + padding-inline: var(--auto-48px); } :host([type='pure']) button::before, :host([type='icon']) button::before, @@ -302,14 +300,13 @@ export default [ /* text 类型按钮 */ :host([type='text']) { font-size: var(--auto-28px); - min-height: var(--auto-112px); - max-height: var(--auto-112px); + min-height: var(--oc-text-min-height, var(--auto-112px)); + max-height: var(--oc-text-max-height, var(--auto-112px)); } :host([type='text']) button { /* min-width 保障内容最少情况下的显示 */ min-width: calc(var(--auto-56px) + var(--auto-56px) + 0.1px); - padding-inline-start: var(--auto-56px); - padding-inline-end: var(--auto-56px); + padding-inline: var(--oc-text-padding-inline, var(--auto-56px)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; diff --git a/src/components/li/README-settings.md b/src/components/li/README-settings.md new file mode 100644 index 0000000..826e330 --- /dev/null +++ b/src/components/li/README-settings.md @@ -0,0 +1,267 @@ +## Li + +总结 + +``` +----------------------------------------------------------------------------------------------------------- +| | -------------- ------------------ | +| | / | 状态值VALUE | | 伪类(>) | | +| | / | 蓝色/灰色 | | 跳转(>),Info(i) | | +| | / -------------- ------------------- | +| | ------------- ---------------- ------------ -------- / | +| | | | | 主Label | | | | | / | +| | | (App)Icon | |--------------| |--方块标签--| | 分隔线 |/ | +| STAR | | | | 次Description| | | | |\ | +| LI | ------------- ---------------- ------------ -------- \ | +| | \ ---------------------------------- | +| | \ |　　　　　 SLOT | | +| | \ ---------------------------------- | +| | \|　　 可嵌入按钮info | | +| | | 选择器Selector | | +| | | (值选择器, 时间选择器, 日期选择器) | | +| | | 输入框Input | | +| | | 复选框CheckBox | | +| | | 复选框组 CheckBoxGroup | | +| | | 单选按钮Radio | | +| | | 单选按钮组RadioGroup | | +| | | 开关Switch | | +| | ----------------------------------- | +------------------------------------------------------------------------------------------------------------ +``` + +命名: + +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +注意: + +1. 图标优先级上: appicon > 伪类 icon > 图像插槽。当既没有 appicon 也没有伪类 icon 时，将放置一个图像嵌入插槽 + +``` +## 安全可信管理 +---------------- +| 主Label | +---------------- 跳转伪类(>) +| 次Description | +----------------- + +---------------- +| 主Label | +---------------- 灰色状态值VALUE 跳转伪类(>) +| 次Description | +----------------- +``` + +``` +---------------- +| 主Label | 灰色状态值VALUE +---------------- + +---------------- +| 主Label | 灰色状态值VALUE +---------------- + +---------------- +| 主Label | 跳转伪类(>) +---------------- + +---------------- +| 主Label | 蓝色状态值VALUE 跳转伪类(>) +---------------- + +------- ---------------- +| Icon| | 主Label | 跳转伪类(>) +------- ---------------- + +## 电池 +-------- ---------------- +| Icon | | 主Label | 分隔线 灰色状态值VALUE +-------- ---------------- + +## WLAN +-------- ---------------- ---------- +| Icon | | 主Label | | 方块标签 | Info伪类(i) +-------- ---------------- ---------- + +-------- ---------------- +| Icon | | 主Label | 蓝色状态值VALUE 跳转伪类(>) +-------- ---------------- + +## 移动网络 + +----------- ---------------- +| AppIcon | | 主Label | 灰色状态值VALUE 跳转伪类(>) +----------- ---------------- + +## 加速清理 + +----------- ---------------- +| | | 主Label | +| AppIcon | ---------------- 蓝色状态值VALUE 跳转伪类(>) +| | | 次Description | +----------- ----------------- + + +########################################----SLOT +---------------- +| 主Label | Slot-选择器Selector(值选择器, 时间选择器, 日期选择器) +---------------- + +---------------- +| 主Label | Slot-输入框Input +---------------- + +-------- ---------------- +| Icon | | 主Label | 分隔线 Slot-复选框组 CheckBoxGroup +-------- ---------------- + +``` + +## CheckBox + +CheckBox, Switch 不直接控制点击态内容, + +``` +## 开发者HUD +---------------- +| 主Label | Checkbox +---------------- + +---------------- +| 主Label | 文本|Checkbox +---------------- +``` + +## Switch + +``` +---------------- +| 主Label | Switch +---------------- + +-------- ---------------- +| Icon | | 主Label | Switch +-------- ---------------- + +---------------- +| 主Label | +---------------- Switch +| 次Description | +----------------- + +----------- ---------------- +| | | 主Label | +| AppIcon | ---------------- SplitLine Switch +| | | 次Description | +----------- ----------------- +``` + +## Radio + +``` +---------------- +| 主Label | Radio +---------------- + +---------------- +| 主Label | +---------------- Radio(圆环) +| 次Description | +----------------- + +## 时区 +---------------- +| 主Label | +---------------- Radio(对勾) +| 次Description | +----------------- +``` + +## RadioGroup + +Radio 在纵向或横向上的叠加 + +## Card + +``` +---------------- +| | +| 图 | +| | +----------------- +| 文本|图标 | +----------------- + +---------------- +| | +| 图 | +| | +----------------- +| CheckBox | +----------------- + +``` + +## Button + +需要新适配如下内容 + +``` +---------------- +| 主Label | +---------------- +| 次Description | +----------------- +``` diff --git a/src/components/li/li.css.ts b/src/components/li/li.css.ts index 6e4bd57..5e14949 100644 --- a/src/components/li/li.css.ts +++ b/src/components/li/li.css.ts @@ -2,30 +2,23 @@ import {css} from 'lit' export default css` :host { - width: inherit; - border-radius: var(--base-border-radius); + display: flex; + width: 100%; + min-height: var(--auto-96px); } li { width: inherit; display: flex; flex-wrap: wrap; - border-radius: var(--base-border-radius); - min-height: var(--li-base-height); - line-height: var(--li-base-height); - padding-inline-start: var(--li-left-padding); - padding-inline-end: var( - --li-right-padding - ); /* right-arrow须与最右侧文字对齐 */ + padding-inline: var(--oc-li-padding-inline, var(--auto-48px)); } - /* right-arrow须与最右侧文字对齐 */ - /* li.hashref { -padding-inline-end: 0; -} */ a { display: flex; text-decoration: none; color: #000; width: 100%; + /* 解除Chrome用户代理-点击标签时出现的淡蓝色 */ + -webkit-tap-highlight-color: transparent; } a.hasicon::before, a.hashref::after { @@ -46,19 +39,6 @@ padding-inline-end: 0; text-align: right; content: 'right-light'; } - input { - width: 100vw; - max-width: 500px; - padding: 0; - border: 0; - height: inherit; - outline: none; - box-sizing: border-box; - vertical-align: top; - border-radius: 6px; - background-color: transparent; - font-size: 16px; - } span.infokey, span.label { flex: 1; @@ -87,4 +67,196 @@ padding-inline-end: 0; text-align: right; color: #aaa; } + + a[data-icon]::before { + color: var(--li-icon); + content: attr(data-icon); + font-family: var(--icon-font); + font-size: var(--auto-48px); + min-width: var(--auto-48px); + padding-inline-end: var(--auto-18px); + margin: auto 0; + } + a[href]::after { + color: var(--li-link); + content: 'right-light'; + font-family: var(--icon-font); + font-size: var(--auto-32px); + width: var(--auto-32px); + height: var(--auto-32px); + margin: auto 0 auto auto; + padding-left: var(--auto-14px); + } + + div#content { + display: flex; + margin: auto 0; + flex-direction: column; + } + + div#main-label { + display: flex; + float: left; + } + + span#label { + font-weight: bold; + color: var(--li-label); + font-weight: 400; + font-size: var(--auto-26px); + line-height: var(--auto-34px); + } + div#square { + border: var(--auto-1px) solid var(--li-square); + height: var(--auto-28px); + border: var(--auto-2px) solid var(--li-square); + box-sizing: border-box; + border-radius: var(--auto-6px); + 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-size: var(--auto-20px); + color: var(--li-square); + } + div#square span { + /* margin: var(--auto-_2px) var(--auto-5px) 0 var(--auto-6px); */ + margin-left: var(--auto-6px); + line-height: 0; + } + span#description { + color: var(--li-description); + font-weight: 400; + font-size: var(--auto-20px); + line-height: var(--auto-18px); + margin-top: var(--auto-12px); + } + span#value { + flex: 1; + display: inline-block; /* 用于克服未知排版故障(自身被挤压为0) */ + min-width: var(--auto-112px); + margin: auto 0 auto var(--auto-20px); + text-align: right; + white-space: nowrap; + font-size: var(--auto-26px); + line-height: var(--auto-26px); + color: var(--li-value-default); + } + :host([type='primary']) span#value { + color: var(--li-value-primary); + } + + :host([type='input']) a { + justify-content: space-between; + } + :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); + } + :host([type='input']) input { + flex: 1; + width: 100%; + height: inherit; + padding-inline-start: var(--auto-40px); + border: 0; + outline: none; + box-sizing: border-box; + vertical-align: top; + text-align: right; + font-weight: 400; + font-size: var(--auto-26px); + line-height: var(--auto-26px); + color: var(--li-input); + caret-color: var(--theme-blue); + background-color: transparent; + } + :host([type='input'][active]) li { + border-color: var(--theme-blue); + } + :host([type='input'][active]) input { + color: var(--li-label); + } + + /* other star-web-components */ + star-button[type='text']#li-text-button { + --oc-text-padding-inline: 0; + --oc-text-min-height: var(--auto-96px); + pointer-events: none; + width: 100%; + height: 100%; + text-align: left; + } + star-switch#li-switch { + pointer-events: none; + margin: auto 0px auto auto; + } + + /* 边界折叠 */ + :host(:is([type='default'], [type='primary'], [type='button'], [type='switch'], [type='embed-info'], [type='embed-switch'])) + li { + overflow: hidden; + white-space: nowrap; + } + :host(:is([type='default'], [type='primary'], [type='switch'], [type='embed-info'], [type='embed-switch'])) + div#content { + overflow: hidden; + } + :host(:is([type='default'], [type='primary'], [type='switch'], [type='embed-info'], [type='embed-switch'])) + span#label, + :host(:is([type='default'], [type='primary'])) span#value, + :host(:is([type='default'], [type='primary'], [type='embed-switch'])) + span#description { + overflow: hidden; + text-overflow: ellipsis; + } + + /* slot */ + + /** + * 当前浏览器排版都含有一个故障： + * 在包含外部slot插入的情况下，无法准确计算本宿主标签的准确width， + * 导致max-width使用百分比时不够准确。 + */ + ::slotted(star-button[slot='info']) { + width: var(--auto-64px); + height: var(--auto-64px); + color: var(--li-info); + margin: auto var(--auto-32px) auto 0; + font-size: var(--auto-32px); + min-width: var(--auto-64px); + } + :host(:is([type='embed-info'], [type='embed-switch'])) li { + padding-inline-end: 0; + } + + ::slotted(star-switch[slot='switch']) { + position: relative; + width: var(--auto-70px); + height: var(--auto-38px); + margin: auto var(--auto-48px); + } + :host([split]) ::slotted(star-switch[slot='switch'])::before { + content: ''; + position: absolute; + display: block; + border-left: var(--auto-1px) solid var(--split-line-color); + height: var(--auto-40px); + left: calc(0px - var(--auto-48px)); + } + ::slotted(star-svg-icon[slot='icon']) { + width: var(--auto-64px); + height: var(--auto-64px); + min-width: var(--auto-64px); + margin: auto var(--oc-icon-margin-right, --auto-16px) auto 0; + } + + /* 条目按压和释放时的变化 */ + :host(.starpress:not([type='embed-switch'])) { + background-color: var(--li-bg-pressed); + } + :host(.starpress[type='embed-switch']) li { + background-color: var(--li-bg-pressed); + } ` diff --git a/src/components/li/li.ts b/src/components/li/li.ts index ae5500d..e61707b 100644 --- a/src/components/li/li.ts +++ b/src/components/li/li.ts @@ -1,19 +1,45 @@ -import {html, CSSResultArray, HTMLTemplateResult, nothing} from 'lit' -import {customElement, property} from 'lit/decorators.js' -import {StarBaseElement} from '../base/star-base-element.js' +import { + customElement, + html, + ifDefined, + nothing, + property, + CSSResultArray, + HTMLTemplateResult, + StarBaseElement, + TemplateResult, +} from '@star-web-components/base' import liStyles from './li.css.js' import '../bubble/bubble.js' import '../switch/switch.js' +import {StarSwitch} from '../switch/switch.js' export enum LiType { - BASE = 'base', - BUBBLE_LABEL = 'bubble-label', - ICON_LABEL = 'icon-label', - INFO_LABEL = 'info-label', - ONLY_EDIT = 'only-edit', - ONLY_LABEL = 'only-label', - ONLY_READ = 'only-read', - SWITCH_LABEL = 'switch-label', + /* deprecated */ BASE = 'base', + /* deprecated */ BUBBLE_LABEL = 'bubble-label', + /* deprecated */ ICON_LABEL = 'icon-label', + /* deprecated */ INFO_LABEL = 'info-label', + /* deprecated */ ONLY_EDIT = 'only-edit', + /* deprecated */ ONLY_LABEL = 'only-label', + /* deprecated */ ONLY_READ = 'only-read', + /* deprecated */ SWITCH_LABEL = 'switch-label', + + /* 基础式 */ + DEFAULT = 'default', + PRIMARY = 'primary', + + /* 内包含式 */ + SWITCH = 'switch', + SELECTOR = 'selector', + BUTTON = 'button', + INPUT = 'input', + CHECKBOX = 'checkbox', + + /* 嵌入式 */ + EMBED_INFO = 'embed-info', + EMBED_SWITCH = 'embed-switch', + EMBED_CHECKBOX_GROUP = 'embed-checkbox-group', + EMBED_CARD = 'embed-card', } @customElement('star-li') @@ -23,16 +49,32 @@ export class StarLi extends StarBaseElement { } @property({type: String}) type = '' + @property({type: String}) label = '' - @property({type: String}) value = '' + + @property({type: String}) description = '' + + /** + * LiButton 内的多样性控制，有 default, primary + */ + @property({type: String}) variant = 'default' + + /** + * label之后的方块信息 + */ + @property({type: String}) square = '' + + // @property({type: Boolean, reflect: true}) checked!: boolean + @property({type: Boolean, reflect: true}) checked = false + + @property({type: String, reflect: true}) value!: string @property({type: String}) default = '' - @property({type: String}) href = '' - @property({type: String}) icon = '' + @property({type: String}) href!: string + @property({type: String}) icon!: string @property({type: String}) iconcolor = '' @property({type: Number}) bubble = 0 @property({type: String}) switchcolor = '' @property({type: Boolean}) disabled = false - @property({type: Boolean}) checked = false @property({type: Boolean}) switchicon = false @property({type: String}) size = '' @@ -260,27 +302,179 @@ export class StarLi extends StarBaseElement { ` } + dynamicSlot: TemplateResult | typeof nothing = nothing + + /** + * + */ + renderGeneral() { + return html` +
  • + + ${this.icon + ? nothing + : html` + + `} +
    +
    + ${this.label} + ${this.square + ? html` +
    ${this.square}
    + ` + : nothing} +
    + ${this.description + ? html` + ${this.description} + ` + : nothing} +
    + ${this.value + ? html` + ${this.value} + ` + : nothing} +     +
    • + ${this.dynamicSlot} + ` + } + + renderInput() { + return html` +
  • + +
    +
    + ${this.label} +
    +
    + { + const target = evt.target as HTMLInputElement + this.setAttribute('active', '') + this.value = target.value = target.placeholder + }} + @blur=${(evt: Event) => { + const target = evt.target as HTMLInputElement + this.removeAttribute('active') + this.value = target.placeholder = target.value + }} + /> +     +
    • + ` + } + + renderButton() { + return html` +
  • + +
    • + ` + } + + renderSwitch() { + return html` +
  • { + this.checked = !this.checked + }} + > + + ${this.icon + ? nothing + : html` + + `} +
    +
    + ${this.label} +
    + ${this.description + ? html` + ${this.description} + ` + : nothing} +
    + { + const target = evt.target as StarSwitch + this.checked = target.checked + }} + > +     +
    • + ` + } + render() { switch (this.type) { - case LiType.BASE: + /* deprecated */ case LiType.BASE: return this.getbase() - case LiType.BUBBLE_LABEL: + /* deprecated */ case LiType.BUBBLE_LABEL: return this.getbubblelabel() - case LiType.ICON_LABEL: + /* deprecated */ case LiType.ICON_LABEL: return this.geticonlabel() - case LiType.INFO_LABEL: + /* deprecated */ case LiType.INFO_LABEL: return this.getinfolabel() - case LiType.ONLY_EDIT: + /* deprecated */ case LiType.ONLY_EDIT: return this.getonlyedit() - case LiType.ONLY_LABEL: + /* deprecated */ case LiType.ONLY_LABEL: return this.getonlylabel() - case LiType.ONLY_READ: + /* deprecated */ case LiType.ONLY_READ: return this.getonlyread() - case LiType.SWITCH_LABEL: + /* deprecated */ case LiType.SWITCH_LABEL: return this.getswitchlabel() + + case LiType.EMBED_INFO: + this.dynamicSlot = html` + + ` + return this.renderGeneral() + + case LiType.EMBED_SWITCH: + this.dynamicSlot = html` + + ` + return this.renderGeneral() + + case LiType.SELECTOR: + case LiType.EMBED_CARD: + case LiType.EMBED_CHECKBOX_GROUP: + // TBD + + case LiType.INPUT: + return this.renderInput() + + case LiType.BUTTON: + return this.renderButton() + + case LiType.SWITCH: + return this.renderSwitch() + + case LiType.DEFAULT: + case LiType.PRIMARY: default: - console.error('unhanled 【star-li】 type') - return nothing + return this.renderGeneral() } } } diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts index cb81adb..fd31ddd 100755 --- a/src/components/switch/switch.ts +++ b/src/components/switch/switch.ts @@ -18,7 +18,7 @@ export class StarSwitch extends LitElement { @property({type: Number}) leftx = 10000 @property({type: Number}) x = 0 @property({type: Boolean}) disabled = false - @property({type: Boolean}) checked = false + @property({type: Boolean, reflect: true}) checked = false @property({type: String}) get switchcolor() { return this._backgoundColor @@ -36,8 +36,7 @@ export class StarSwitch extends LitElement { - (this.checked = (evt.target as HTMLInputElement).checked)} + @change=${this} type="checkbox" class="base" id="base" @@ -54,6 +53,21 @@ export class StarSwitch extends LitElement { ` } + + handleEvent(evt: Event) { + switch (evt.type) { + case 'change': + this.checked = (evt.target as HTMLInputElement).checked + this.dispatchEvent( + new Event('change', { + bubbles: true, + composed: true, + }) + ) + break + } + } + private touchStart(evt: TouchEvent) { console.log('##') this.startx = evt.touches[0].clientX diff --git a/src/test/panels/button/button-group.ts b/src/test/panels/button/button-group.ts index cab8cdf..146c8da 100644 --- a/src/test/panels/button/button-group.ts +++ b/src/test/panels/button/button-group.ts @@ -20,7 +20,7 @@ export class PanelButtonGroup extends LitElement { type="base" style="border-radius: 25px !important;" > - + @@ -33,7 +33,7 @@ export class PanelButtonGroup extends LitElement { type="base" style="border-radius: 25px !important;" > - + - + diff --git a/src/test/panels/fonts/star-icons.ts b/src/test/panels/fonts/star-icons.ts index 8a058d9..311d5b5 100644 --- a/src/test/panels/fonts/star-icons.ts +++ b/src/test/panels/fonts/star-icons.ts @@ -1,4 +1,4 @@ -import {css, html, LitElement} from 'lit' +import {html, LitElement} from 'lit' import {customElement} from 'lit/decorators.js' import {map} from 'lit/directives/map.js' diff --git a/src/test/panels/gesture/gesture.ts b/src/test/panels/gesture/gesture.ts index 6874279..f0d3f3a 100644 --- a/src/test/panels/gesture/gesture.ts +++ b/src/test/panels/gesture/gesture.ts @@ -1,7 +1,6 @@ import {customElement} from 'lit/decorators.js' import {html, LitElement, CSSResultArray} from 'lit' import {UlType} from '../../../components/ul/ul' -import {LiType} from '../../../components/li/li' import {sharedStyles} from '../shared-styles' import './examples/test-tap' @@ -14,29 +13,13 @@ export class PanelGesture extends LitElement { render() { return html` - +
    - +
    - +
    - +     ` } diff --git a/src/test/panels/li/li.ts b/src/test/panels/li/li.ts new file mode 100644 index 0000000..8614df1 --- /dev/null +++ b/src/test/panels/li/li.ts @@ -0,0 +1,336 @@ +import {css, html, customElement, LitElement} from '@star-web-components/base' +import { + weibo, + garbage, + airplane, + wlan, + network, + bluetooth, + connection, + wallpaper, + brightness, + voice, + notification, + call, + battery, + application, + password, + security, + storage, + general, + help, + aboutself, + lockscreen, + privacy, +} from './static/icons' +import '@star-web-components/li' +import '@star-web-components/switch' + +@customElement('panel-li') +export class PanelLi extends LitElement { + render() { + return html` +

    设置边栏

    +
    + + ${airplane} + + + ${airplane} + + + ${airplane} + + + ${wlan} + + + ${wlan} + + + ${wlan} + + + ${wlan} + + + ${network} + + + ${network} + + + ${bluetooth} + + + ${connection} + + + + ${wallpaper} + + + ${lockscreen} + + + ${brightness} + + + + ${voice} + + + ${notification} + + + ${call} + + + + ${battery} + + + ${application} + + + ${password} + + + ${privacy} + + + ${security} + + + + ${storage} + + + ${general} + + + ${help} + + + ${aboutself} + +
    + +

    两态交互

    + +
    + +
    + +
    + + console.log('info按钮被点击')} + > + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +

    外嵌入式组件

    + + ${weibo} + + + +

    外嵌图标

    + + ${garbage} + +
    + + ${weibo} + + +

    边界测试

    + + + + console.log('info按钮被点击')} + > + + + + ${weibo} + + + ${weibo} + + + ${weibo} + + + ${garbage} + + + + ${weibo} + + + ` + } + + static get styles() { + return css` + :host { + --oc-icon-margin-right: var(--auto-20px); + } + div#settings-side-bar star-li { + --oc-li-padding-inline: var(--auto-24px); + width: var(--auto-424px); + border-radius: var(--auto-16px); + } + ` + } +} + +declare global { + interface HTMLElementTagNameMap { + 'panel-li': PanelLi + } +} diff --git a/src/test/panels/li/static/icons.ts b/src/test/panels/li/static/icons.ts new file mode 100644 index 0000000..eea6a3a --- /dev/null +++ b/src/test/panels/li/static/icons.ts @@ -0,0 +1,1403 @@ +import {html} from '@star-web-components/base' + +export const weibo = html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +` + +export const garbage = html` + + + + + + + + + + + + + + + +` + +export const wlan = html` + + + + + + + + + + + + + + + + + + + + + + + + +` + +export const brightness = html` + + + + + + + + + + + + + + + + + + + +` + +export const storage = html` + + + + + + + + + + + + + + + + + + + +` + +export const aboutself = html` + + + + + + + + + + + + + + + + + + + +` + +export const voice = html` + + + + + + + + + + + + + + + + + + + +` + +export const security = html` + + + + + + + + + + + + + + + + + + + +` + +export const password = html` + + + + + + + + + + + + + + + + + + + +` + +export const application = html` + + + + + + + + + + + + + + + + + + + +` + +export const wallpaper = html` + + + + + + + + + + + + + + + + + + + + + + + + +` + +export const battery = html` + + + + + + + + + + + + + + + + + + + + + + + + + +` + +export const network = html` + + + + + + + + + + + + + + + + + + + +` + +export const bluetooth = html` + + + + + + + + + + + + + + + + + + + +` + +export const help = html` + + + + + + + + + + + + + + + + + + + + + + + + +` + +export const connection = html` + + + + + + + + + + + + + + + + + + + +` + +export const general = html` + + + + + + + + + + + + + + + + + + + + + + + + +` + +export const notification = html` + + + + + + + + + + + + + + + + + + + +` + +export const call = html` + + + + + + + + + + + + + + + + + + + + + + + + +` + +export const lockscreen = html` + + + + + + + + + + + + + + + + + + + +` + +export const privacy = html` + + + + + + + + + + + + + + + + + + + +` + +export const airplane = html` + + + + + + + + + + + + + + + + + + + +` diff --git a/src/test/panels/root.ts b/src/test/panels/root.ts index d5f9db7..d2f4687 100644 --- a/src/test/panels/root.ts +++ b/src/test/panels/root.ts @@ -32,6 +32,7 @@ import './iconfont/iconfont' import './indicators/deformation-indicator' import './indicators/home-indicator' import './indicators/point-indicator' +import './li/li' import './locked/locked' import './notification/notification' import './overflowmenu/overflowmenu' @@ -64,433 +65,156 @@ export class PanelRoot extends LitElement { } rootPanel = html` - - + + +
    + +
    +
    -
    - -
    - -
    - -
    - -
    - -
    -     - + + + + + +
    +     + + + +
    + +
    + +
    +
    +     + + +
    - + +
    + +
    +     + + + +
    + +
    + +
    +
    -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    -
    + +
    + +
    +
    +     + + + +
    + +
    + +
    + +     + + + + + + + +
    + +     + +
    -
    - -
    - -
    - -
    - -
    - -
    -
    -
    -
    - - -
    - -
    - -     - +
    - -     - - - +
    -     - - + +
    - -     - - - +
    - -     - - - - - - - -
    - -
    - -     - - - - - - - -
    - -     - - - -
    - -     - - - 自动加入热点 - - - - -
    -     `