openkylin
/
ura-components
mirror of https://gitee.com/openkylin/ura-components.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'master' of ssh://172.20.184.160:7999/yr/star-web-components

This commit is contained in:
duanzhijiang 2022-11-09 16:10:36 +08:00
parent 627eb03259 b4fcee6662
commit 4fc2d3b973
10 changed files with 1326 additions and 882 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -17,7 +17,8 @@
"build:widgets": "node ./tasks/build-widgets.js",
"esbuild:ts": "node ./tasks/esbuild-packages.js",
"format": "npm run format:prettier",
"format:prettier": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --write"
"format:prettier": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --write",
"postinstall": "husky install"
},
"lint-staged": {
"*.{cjs,html,js,json,md,ts}": [

3
src/components/asset/icons/index.ts
View File

@ -1,5 +1,6 @@
import {html} from 'lit'
/********************复杂SVG***************************/
// 主题
export const store = html`
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -234,6 +235,8 @@ export const privacy = html`
</defs>
</svg>
`
/********************单色SVG***************************/
// 删除, 类'-', 删除角标中使用
export const deletecorner = html`
<svg viewBox="0 0 24 4" fill="none" xmlns="http://www.w3.org/2000/svg">

1038
src/components/base/global-style.ts
View File

File diff suppressed because it is too large Load Diff

14
src/components/base/star-base-element.ts
View File

@ -3,7 +3,6 @@ import GestureDetector, {
GestureEvents,
GestureOptions,
} from '../../lib/gesture/gesture-detector'
import {baseStyles} from './base-style'
import {autoPxStyle} from './auto-px-style'
import {globalStyles} from './global-style'
@ -79,14 +78,15 @@ export function StarMixin<T extends Constructor<ReactiveElement>>(
// 填充全局所需基础样式变量, 只添加一次
const style = document.createElement('style')
const baseStylesString = baseStyles
const globalStylesString = globalStyles
.join(' ')
.toString()
.replace(/(--devicePixelRatio: )\d+/, (_, s1) => {
// 替换 devicepixelRatio
return s1 + String(devicePixelRatio)
})
const autoPxStyleString = autoPxStyle.toString()
style.innerHTML = baseStylesString + autoPxStyleString
style.innerHTML = globalStylesString + autoPxStyleString
document.head.appendChild(style)
window.loadStarMixin = true
@ -98,10 +98,12 @@ export function StarMixin<T extends Constructor<ReactiveElement>>(
return class StarBaseElementInitial extends constructor {
hello() {}
onhover() {
this.classList.add('pressed')
this.classList.toggle('starpress', true)
this.classList.toggle('starfree', false)
}
onhoverend() {
this.classList.remove('pressed')
this.classList.toggle('starpress', false)
this.classList.toggle('starfree', true)
}
}
}
@ -125,7 +127,7 @@ export class StarBaseElement extends StarMixin(LitElement) {
}
public static get styles(): CSSResultArray {
return [globalStyles]
return []
}
}

72
src/components/button/README.md
View File

@ -18,6 +18,7 @@
| special | 'corner-marker'，'hang-up'，'answer-call'，'go-back' |
| icon | 对应 gaia-icons 中的图标名 |
| disabled | true，false | false |
| theme | ligth，theme | light | 手动设置组件主题 |
<center><b>star-button组件支持的插槽</b></center>
@ -49,11 +50,12 @@
注意：
- type 必需: type="normal".
- size 可选， 默认为 "small"，可选 "small", "middle", "large".
- variant 可选， 默认为 "default"，可选 "default", "primary", "warn".
- width 可选, 有效值区间[200,520], 抵近对应按钮的最小宽度和最大宽度
- disabled 可选， 默认为 false.
- type 必需: type="normal"。
- size 可选， 默认为 "small"，可选 "small", "middle", "large"。
- variant 可选， 默认为 "default"，可选 "default", "primary", "warn"。
- width 可选, 有效值区间[200,520], 抵近对应按钮的最小宽度和最大宽度。
- disabled 可选， 默认为 false。
- theme 可选，默认为 light，可选 "light"，"dark"。
### 2. Pure - 纯按钮
@ -73,13 +75,14 @@
注意：
- type 必需: type="pure".
- size 可选， 默认为 "small"，可选 "small", "middle", "large".
- label 可选，填充类型为字符串.
- disabled 可选，默认为 false.
- icon 可选， 其值为 gaia-icons 中支持的图标名.
- 插槽<slot name="asset">可选，其内包裹 svg.
- 当 icon 和 <slot name="asset"> 同时存在时，icon 优先级高于后者.
- type 必需: type="pure"。
- size 可选， 默认为 "small"，可选 "small", "middle", "large"。
- label 可选，填充类型为字符串。
- disabled 可选，默认为 false。
- icon 可选， 其值为 gaia-icons 中支持的图标名。
- 插槽<slot name="asset">可选，其内包裹 svg。
- 当 icon 和 <slot name="asset"> 同时存在时，icon 优先级高于后者。
- theme 可选，默认为 light，可选 "light"，"dark"。
### 3. Text - 文本按钮
@ -94,10 +97,11 @@
注意：
- type 必需: type="text".
- label 必需，填充类型为字符串.
- variant 可选， 默认为 "default"，可选 "default", "primary", "warn".
- disabled 可选，默认为 false.
- type 必需: type="text"。
- label 必需，填充类型为字符串。
- variant 可选， 默认为 "default"，可选 "default", "primary", "warn"。
- disabled 可选，默认为 false。
- theme 可选，默认为 light，可选 "light"，"dark"。
### 4. Icon - 图标按钮
@ -112,12 +116,13 @@
注意：
- type 必需: type="icon".
- size 可选， 默认为 "small"，可选 "small", "middle".
- disabled 可选，默认为 false.
- icon 可选， 其值为 gaia-icons 中支持的图标名.
- 插槽<slot name="asset">可选，其内包裹 svg.
- 当 icon 和 <slot name="asset"> 同时存在时，icon 优先级高于后者.
- type 必需: type="icon"。
- size 可选， 默认为 "small"，可选 "small", "middle"。
- disabled 可选，默认为 false。
- icon 可选， 其值为 gaia-icons 中支持的图标名。
- 插槽<slot name="asset">可选，其内包裹 svg。
- 当 icon 和 <slot name="asset"> 同时存在时，icon 优先级高于后者。
- theme 可选，默认为 light，可选 "light"，"dark"。
### 5. Ghost - 重影按钮
@ -134,13 +139,14 @@
注意：
- type 必需: type="ghost".
- size 可选， 默认为 "small"，可选 "small", "middle", "large", "extralarge".
- variant 可选， 默认为 "default"，可选 "default", "primary", "establish".
- disabled 可选，默认为 false.
- icon 可选， 其值为 gaia-icons 中支持的图标名.
- 插槽<slot name="asset">可选，其内包裹 svg.
- 当 icon 和 <slot name="asset"> 同时存在时，icon 优先级高于后者.
- type 必需: type="ghost"。
- size 可选， 默认为 "small"，可选 "small", "middle", "large", "extralarge"。
- variant 可选， 默认为 "default"，可选 "default", "primary", "establish"。
- disabled 可选，默认为 false。
- icon 可选， 其值为 gaia-icons 中支持的图标名。
- 插槽<slot name="asset">可选，其内包裹 svg。
- 当 icon 和 <slot name="asset"> 同时存在时，icon 优先级高于后者。
- theme 可选，默认为 light，可选 "light"，"dark"。
### 6. Special - 特殊按钮
@ -162,4 +168,12 @@
注意：
- special="corner-marker"和 special="go-back" 只有唯一一种用法
- theme 可选，默认为 light，可选 "light"，"dark"。
- special="hang-up"和 special="answer-call" 支持的 size 必需: "middle", "large"
- theme 可选，默认为 light，可选 "light"，"dark"。
## TBD
- icon 类型 button 的动效未实现，较复杂。
- multi-buttons 未整合
- button 中的 svg icon 颜色未同步黑暗模式，等待新版 gaia-icon 和确定的 svg 包装完成。

1015
src/components/button/button.css.ts
View File

File diff suppressed because it is too large Load Diff

7
src/components/button/button.ts
View File

@ -52,6 +52,11 @@ export enum ButtonSpecial {
GOBACK = 'go-back',
}
export enum Theme {
LIGHT = 'light',
DARK = 'dark',
}
/**
* 首字母大写
*/
@ -140,6 +145,8 @@ export class StarButton extends StarBaseElement {
@property({type: String}) fontsize = ''
@property({type: String}) theme = 'light'
protected get hasLabel(): boolean {
return this.label !== ''
}

7
src/components/button/tsconfig.json
View File

@ -4,5 +4,10 @@
"composite": true,
"rootDir": "../../"
},
"include": ["*.ts", "../base/*.ts", "../asset/svg-icon.ts"]
"include": [
"*.ts",
"../base/*.ts",
"../animation/*.ts",
"../asset/svg-icon.ts"
]
}

2
src/components/icon-control-bar/icon-control-bar.ts
View File

@ -249,7 +249,7 @@ export class IconControlBar extends LitElement {
return
}
this.timer = setTimeout(() => {
this.timer = window.setTimeout(() => {
this.dispatchEvent(
new CustomEvent('icon-control-bar-touch-start', {
detail: {

47
src/test/panels/button/button.ts
View File

@ -64,6 +64,11 @@ export class PanelButton extends LitElement {
<star-button type="normal" variant="default" size="small" label="普通按钮"></star-button>
<star-button type="normal" variant="warn" size="small" label="警告按钮"></star-button>
</star-li>
<star-li type="base">
<star-button type="normal" theme="dark" variant="primary" size="small" label="强调按钮"></star-button>
<star-button type="normal" theme="dark" variant="default" size="small" label="普通按钮"></star-button>
<star-button type="normal" theme="dark" variant="warn" size="small" label="警告按钮"></star-button>
</star-li>
<star-li type="base">
<star-button type="normal" variant="primary" size="middle" label="强调按钮"></star-button>
<star-button type="normal" variant="default" size="middle" label="普通按钮"></star-button>
@ -118,11 +123,21 @@ export class PanelButton extends LitElement {
<star-button type="pure" variant="primary" size="large" icon="delete"></star-button>
<star-button type="pure" variant="primary" size="large" icon="delete" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" theme="dark" variant="primary" size="large" icon="bug"></star-button>
<star-button type="pure" theme="dark" variant="primary" size="large" icon="delete"></star-button>
<star-button type="pure" theme="dark" variant="primary" size="large" icon="delete" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" variant="default" size="extralarge" icon="bug"></star-button>
<star-button type="pure" variant="default" size="extralarge" icon="delete"></star-button>
<star-button type="pure" variant="default" size="extralarge" icon="delete" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" theme="dark" variant="default" size="extralarge" icon="bug"></star-button>
<star-button type="pure" theme="dark" variant="default" size="extralarge" icon="delete"></star-button>
<star-button type="pure" theme="dark" variant="default" size="extralarge" icon="delete" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" variant="primary" size="small" icon="bug" label="添"></star-button>
<star-button type="pure" variant="primary" size="small" icon="bug" label="添" disabled></star-button>
@ -159,6 +174,10 @@ export class PanelButton extends LitElement {
<star-button type="pure" variant="establish" size="large" icon="bug" label="添加组件"></star-button>
<star-button type="pure" variant="establish" size="large" icon="bug" label="添加组件" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" theme="dark" variant="primary" size="large" icon="bug" label="添加组件"></star-button>
<star-button type="pure" theme="dark" variant="primary" size="large" icon="bug" label="添加组件" disabled></star-button>
</star-li>
</star-ul>
<h3>使用场景:对话框底部按钮</h3>
@ -175,6 +194,18 @@ export class PanelButton extends LitElement {
<star-button type="text" variant="warn" label="警告按钮"></star-button>
<star-button type="text" variant="warn" label="警告按钮" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="text" theme="dark" variant="primary" label="强调按钮"></star-button>
<star-button type="text" theme="dark" variant="primary" label="强调按钮" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="text" theme="dark" variant="default" label="普通按钮"></star-button>
<star-button type="text" theme="dark" variant="default" label="普通按钮" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="text" theme="dark" variant="warn" label="警告按钮"></star-button>
<star-button type="text" theme="dark" variant="warn" label="警告按钮" disabled></star-button>
</star-li>
</star-ul>
<h3>Icon类型按钮使用场景:在base色纯背景上的裸图标按钮</h3>
@ -187,6 +218,10 @@ export class PanelButton extends LitElement {
<star-button type="icon" icon="bug" size="middle"></star-button>
<star-button type="icon" icon="bug" size="middle" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="icon" theme="dark" icon="bug" size="middle"></star-button>
<star-button type="icon" theme="dark" icon="bug" size="middle" disabled></star-button>
</star-li>
</star-ul>
<h3>Ghost类型按钮使用场景:拍照、摄像应用，多端协同拍照控制界面</h3>
@ -203,6 +238,10 @@ export class PanelButton extends LitElement {
<star-button type="ghost" icon="bug" size="large"></star-button>
<star-button type="ghost" icon="bug" size="large" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="ghost" theme="dark" icon="bug" size="large"></star-button>
<star-button type="ghost" theme="dark" icon="bug" size="large" disabled></star-button>
</star-li>
</star-ul>
<star-ul type="onlyheader" title="Special类型按钮">
@ -210,6 +249,10 @@ export class PanelButton extends LitElement {
<star-button type="special" special="corner-marker"></star-button>
<star-button type="special" special="corner-marker" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="special" theme="dark" special="corner-marker"></star-button>
<star-button type="special" theme="dark" special="corner-marker" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="special" special="hang-up" size="middle"></star-button>
<star-button type="special" special="hang-up" size="middle" disabled></star-button>
@ -226,6 +269,10 @@ export class PanelButton extends LitElement {
<star-button type="special" special="go-back"></star-button>
<star-button type="special" special="go-back" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="special" theme="dark" special="go-back"></star-button>
<star-button type="special" theme="dark" special="go-back" disabled></star-button>
</star-li>
</star-ul>
<star-ul type="onlyheader" title="插入静态图标的Pure、Icon、Ghost按钮">