Merge branch 'master' of ssh://172.20.184.160:7999/yr/star-web-components into feature-component-overlay
This commit is contained in:
yajun
commit
3d04992b58
|
|
@ -23,4 +23,12 @@ dist-ssr
|
|||
*.sln
|
||||
*.sw?
|
||||
temp/
|
||||
types/
|
||||
types/
|
||||
|
||||
src/components/**/*.d.ts
|
||||
src/components/**/*.js
|
||||
src/components/**/*.js.map
|
||||
src/lib/**/*.d.ts
|
||||
src/lib/**/*.js
|
||||
src/lib/**/*.js.map
|
||||
*.tsbuildinfo
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
- add indicator-page-point
|
||||
- add blur
|
||||
- add radio
|
||||
- add clock
|
||||
- add toast
|
||||
- add card
|
||||
- add contaienr
|
||||
|
|
@ -22,3 +23,4 @@
|
|||
- add function for dragging icon into dock
|
||||
- add function for dragging icon into container
|
||||
- add homescreen function for storing apps' order
|
||||
- fix bugs of container
|
||||
|
|
|
|||
23
package.json
23
package.json
|
|
@ -1,12 +1,9 @@
|
|||
{
|
||||
"name": "start-element",
|
||||
"name": "star-element",
|
||||
"private": true,
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
"main": "dist/my-element.es.js",
|
||||
"exports": {
|
||||
".": "./dist/my-element.es.js"
|
||||
},
|
||||
"types": "types/my-element.d.ts",
|
||||
"files": [
|
||||
"dist",
|
||||
|
|
@ -14,7 +11,10 @@
|
|||
],
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"build": "yarn run esbuild:ts && yarn run build:ts",
|
||||
"build:ts": "yarn tsc --build tsconfig-all.json",
|
||||
"build:vite": "tsc && vite build",
|
||||
"esbuild:ts": "node ./tasks/esbuild-packages.js",
|
||||
"format": "npm run format:prettier",
|
||||
"format:prettier": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --write"
|
||||
},
|
||||
|
|
@ -23,7 +23,14 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"prettier": "^2.7.1",
|
||||
"typescript": "^4.6.4",
|
||||
"vite": "^3.0.0"
|
||||
}
|
||||
"vite": "^3.0.0",
|
||||
"esbuild": "^0.15.8",
|
||||
"fast-glob": "^3.2.12",
|
||||
"tslib": "^2.4.0",
|
||||
"typescript": "^4.8.3"
|
||||
},
|
||||
"workspaces": [
|
||||
"src/components/*",
|
||||
"src/lib/*"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
# 说明
|
||||
|
||||
用于形成 WebAPP，测试星光组件。
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './svg-icon.js'
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"name": "@star-web-components/asset",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./index": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./index.js": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./icons/index.js": {
|
||||
"default": "./icons/index.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import {html, LitElement, css} from 'lit'
|
||||
import {customElement, property} from 'lit/decorators.js'
|
||||
import icons from './icons/index'
|
||||
import icons from './icons/index.js'
|
||||
|
||||
@customElement('star-svg-icon')
|
||||
export class StarSvgIcon extends LitElement {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"rootDir": "./"
|
||||
},
|
||||
"include": ["*.ts", "icons/*.ts"]
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export * from './star-base-element.js'
|
||||
export * from './base-style.js'
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"name": "@star-web-components/base",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./index": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./package.json": "./package.json",
|
||||
"./base-style.js": {
|
||||
"default": "./base-style.js"
|
||||
},
|
||||
"./star-base-element.js": {
|
||||
"default": "./star-base-element.js"
|
||||
}
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
import {LitElement, ReactiveElement} from 'lit'
|
||||
import GestureDector, {GestureEvents} from '../../lib/gesture/gesture-detector'
|
||||
import GestureDector, {
|
||||
GestureEvents,
|
||||
} from '../../lib/gesture/gesture-detector.js'
|
||||
|
||||
export interface StarInterface {
|
||||
hello(): void
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"rootDir": "../../"
|
||||
},
|
||||
"include": ["*.ts", "../../lib/gesture/gesture-detector.ts"]
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './blur.js'
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "@star-web-components/blur",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./index": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./blur.js": {
|
||||
"default": "./blur.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"rootDir": "../../"
|
||||
},
|
||||
"include": ["*.ts"]
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './bubble.js'
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "@star-web-components/bubble",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./index": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./bubble.js": {
|
||||
"default": "./bubble.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"rootDir": "../../"
|
||||
},
|
||||
"include": ["*.ts"]
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import {LitElement, html, CSSResultArray, HTMLTemplateResult} from 'lit'
|
||||
import {property, customElement} from 'lit/decorators.js'
|
||||
import {sharedStyles} from './button-group'
|
||||
import {sharedStyles} from './button-group.js'
|
||||
|
||||
@customElement('star-buttongroup')
|
||||
export class StarButtonGroup extends LitElement {
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export * from './buttongroup.js'
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "@star-web-components/button-group",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./index": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./buttongroup.js": {
|
||||
"default": "./buttongroup.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"rootDir": "../../"
|
||||
},
|
||||
"include": ["*.ts"]
|
||||
}
|
||||
|
|
@ -1,13 +1,7 @@
|
|||
import {
|
||||
html,
|
||||
LitElement,
|
||||
css,
|
||||
CSSResultArray,
|
||||
HTMLTemplateResult,
|
||||
nothing,
|
||||
} from 'lit'
|
||||
import {html, css, CSSResultArray, HTMLTemplateResult, nothing} from 'lit'
|
||||
import {customElement, property} from 'lit/decorators.js'
|
||||
import {baseStyles} from '../base/base-style'
|
||||
import {baseStyles} from '../base/base-style.js'
|
||||
import {StarBaseElement} from '../base/star-base-element.js'
|
||||
|
||||
export enum ButtonType {
|
||||
BASE = 'base',
|
||||
|
|
@ -33,7 +27,7 @@ export enum ButtonVariants {
|
|||
}
|
||||
|
||||
@customElement('star-button')
|
||||
export class StarButton extends LitElement {
|
||||
export class StarButton extends StarBaseElement {
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [
|
||||
baseStyles,
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export * from './button.js'
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "@star-web-components/button",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./index": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./button.js": {
|
||||
"default": "./button.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"rootDir": "../../"
|
||||
},
|
||||
"include": ["*.ts", "../base/*.ts"]
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ import {
|
|||
nothing,
|
||||
} from 'lit'
|
||||
import {customElement, property} from 'lit/decorators.js'
|
||||
import {sharedStyles} from './card-styles'
|
||||
import {sharedStyles} from './card-styles.js'
|
||||
|
||||
export enum CardType {
|
||||
BASE = 'base',
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export * from './card.js'
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "@star-web-components/card",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./index": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./card.js": {
|
||||
"default": "./card.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"rootDir": "../../"
|
||||
},
|
||||
"include": ["*.ts"]
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
# 锁屏时钟表盘，提供基础的时钟样式
|
||||
|
||||
工作职责：
|
||||
|
||||
- 输入当前时,分表盘显示对应的时钟样式
|
||||
|
||||
## 使用方式
|
||||
|
||||
以锁屏使用为例，在 html 内插入
|
||||
<clock-widget id ="lockscreen-clock-widget"></clock-widget>
|
||||
|
||||
设置 clock-widget 的 minute hour date 属性即可正常显示
|
||||
|
||||
## 开发内容
|
||||
|
||||
20220922:组件化基础 BG3 样式时间表盘
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import {css} from 'lit'
|
||||
|
||||
export default css`
|
||||
clock-time {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
`
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import {html, LitElement, CSSResultArray} from 'lit'
|
||||
import {customElement, property} from 'lit/decorators.js'
|
||||
import clockStyles from './clock-widget-style.js'
|
||||
import './date/date.js'
|
||||
import './time/time.js'
|
||||
@customElement('clock-widget')
|
||||
class ClockContainer extends LitElement {
|
||||
@property({type: String}) name = 'clock-widget'
|
||||
@property({type: String}) minute = 0
|
||||
@property({type: String}) hour = 0
|
||||
@property({type: String}) date = 0
|
||||
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [clockStyles]
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<clock-time minute=${this.minute} hour=${this.hour}></clock-time>
|
||||
<clock-date date=${this.date}></clock-date>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'clock-widget': ClockContainer
|
||||
}
|
||||
}
|
||||
|
||||
export default ClockContainer
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import {css} from 'lit'
|
||||
|
||||
export default css`
|
||||
#clock-date {
|
||||
font-family: 'OPPOSans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
top: 16.4%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
#clock-date {
|
||||
font-family: 'OPPOSans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 29px;
|
||||
text-align: center;
|
||||
top: 72.68%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
#clock-date {
|
||||
font-family: 'OPPOSans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 17px;
|
||||
text-align: center;
|
||||
top: 72.68%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import {html, LitElement, CSSResultArray} from 'lit'
|
||||
import {customElement, property} from 'lit/decorators.js'
|
||||
import dateStyles from './date-style.js'
|
||||
|
||||
@customElement('clock-date')
|
||||
class ClockDate extends LitElement {
|
||||
@property({type: String}) name = 'clock-date'
|
||||
@property({type: String}) date = null
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [dateStyles]
|
||||
}
|
||||
render() {
|
||||
return html`
|
||||
<div id="clock-date">${this.date}</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'clock-date': ClockDate
|
||||
}
|
||||
}
|
||||
|
||||
export default ClockDate
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './clock-widget.js'
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "@star-web-components/clock-widget",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./index": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./clock-widget.js": {
|
||||
"default": "./clock-widget.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
import {css} from 'lit'
|
||||
|
||||
export default css`
|
||||
#clock-time-minute {
|
||||
position: absolute;
|
||||
left: 34.8%;
|
||||
top: 35.4%;
|
||||
font-family: 'OPPOSans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 220px;
|
||||
line-height: 220px;
|
||||
height: 220px;
|
||||
text-align: left;
|
||||
color: #ffffff;
|
||||
opacity: 0.67;
|
||||
}
|
||||
|
||||
#clock-time-hour {
|
||||
position: absolute;
|
||||
left: 50.6%;
|
||||
top: 35.4%;
|
||||
|
||||
height: 220px;
|
||||
font-family: 'OPPOSans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 220px;
|
||||
line-height: 220px;
|
||||
/* identical to box height, or 100% */
|
||||
text-align: left;
|
||||
/* 主题色/黄金渐变 */
|
||||
background: linear-gradient(180deg, #ebc965 0%, #d9aa38 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-fill-color: transparent;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
#clock-time-minute {
|
||||
font-weight: 600;
|
||||
font-size: 64px;
|
||||
line-height: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
#clock-time-hour {
|
||||
font-weight: 600;
|
||||
font-size: 64px;
|
||||
line-height: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
#clock-time-minute {
|
||||
font-weight: 600;
|
||||
font-size: 43px;
|
||||
line-height: 43px;
|
||||
height: 43px;
|
||||
}
|
||||
|
||||
#clock-time-hour {
|
||||
font-weight: 600;
|
||||
font-size: 43px;
|
||||
line-height: 43px;
|
||||
height: 43px;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import {html, LitElement, CSSResultArray} from 'lit'
|
||||
import {customElement, property} from 'lit/decorators.js'
|
||||
import timeStyles from './time-style.js'
|
||||
|
||||
@customElement('clock-time')
|
||||
class LockScreenClockTimeContainer extends LitElement {
|
||||
@property({type: String}) name = 'clock-time'
|
||||
@property({type: String}) minute = 0
|
||||
@property({type: String}) hour = 0
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [timeStyles]
|
||||
}
|
||||
render() {
|
||||
return html`
|
||||
<div id="clock-time-minute">${this.minute}</div>
|
||||
<div id="clock-time-hour">${this.hour}</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'clock-time': LockScreenClockTimeContainer
|
||||
}
|
||||
}
|
||||
|
||||
export default LockScreenClockTimeContainer
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"rootDir": "../../"
|
||||
},
|
||||
"include": ["*.ts", "./date/*.ts", "./time/*.ts"]
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
# star-clock
|
||||
|
||||
星光 Web 组件——时钟组件：clock 组件介绍（9 月 22 日)
|
||||
|
||||
## 介绍
|
||||
|
||||
star-clock 组件主要是用来显示时间的组件，用户只需传入时间初始值
|
||||
star-clock 属性：
|
||||
|
||||
### 1、type 属性
|
||||
|
||||
时钟风格样式类型,type="transparent"为不带表盘时钟类型,type="diale"为带表盘类型
|
||||
`html demo <star-clock type="diale"></star-clock> `
|
||||
|
||||
### 2、data 属性
|
||||
|
||||
时钟显示的时间,字符串类型，用户可自定义初始时间显示为 data="9:40:10"，默认为 data="00:00:00"，初始状态。
|
||||
`html demo <star-clock type="diale" data="10:40:00"></star-clock> `
|
||||
|
||||
### 3、mode 属性
|
||||
|
||||
时钟深色模式和浅色模式，mode="dark"为深色模式，mode="light"为浅色模式，默认为深色模式。
|
||||
`html demo <star-clock type="diale" data="10:40:00" mode="light"></star-clock> `
|
||||
|
||||
### 4、自适应布局
|
||||
|
||||
时钟整体布局设计为自适应布局，在测试时只需在外层 div 中设置默认 width 和 height，可自适应显示时钟大小。
|
||||
`html demo <div style="width: 380px; height: 380px"><star-clock date="09:00:00" type="diale"></star-clock></div> `
|
||||
|
|
@ -0,0 +1,232 @@
|
|||
import {css, CSSResult} from 'lit'
|
||||
export const sharedStyles: CSSResult = css`
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.star-clock-case {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 10px solid #d9c393;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(20.3871px);
|
||||
background: radial-gradient(
|
||||
46.11% 46.11% at 29.45% 23.09%,
|
||||
rgba(64, 70, 89, 0.8) 0%,
|
||||
rgba(36, 40, 56, 0.8) 100%
|
||||
);
|
||||
}
|
||||
.star-clock-shaft {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border-radius: 50%;
|
||||
background: #c94d18;
|
||||
border: 6px solid #e07548;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1;
|
||||
}
|
||||
.star-clock-rotate {
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
left: 50%;
|
||||
display: inline-block;
|
||||
height: 45%;
|
||||
width: 0px;
|
||||
background-color: transparent;
|
||||
transform-origin: 0 100%;
|
||||
}
|
||||
.star-clock-point {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
top: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(245, 245, 245, 0.95) 0%,
|
||||
rgba(245, 245, 245, 0.01) 100%
|
||||
);
|
||||
border-radius: 50%;
|
||||
transform: translate(50%, 0);
|
||||
}
|
||||
.star-clock-hour-hand {
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
left: 50%;
|
||||
height: 25%;
|
||||
transform-origin: 0 100%;
|
||||
display: inline-block;
|
||||
transform: translate(-50%, 0);
|
||||
animation: anmiate-hour 86400s linear infinite;
|
||||
}
|
||||
.star-clock-minute-hand {
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
left: 50%;
|
||||
height: 35%;
|
||||
transform-origin: 0 100%;
|
||||
display: inline-block;
|
||||
transform: translate(-50%, 0);
|
||||
animation: anmiate-minute 3600s linear infinite;
|
||||
}
|
||||
.star-clock-second-hand {
|
||||
position: absolute;
|
||||
bottom: calc(50% - 16px);
|
||||
left: 50%;
|
||||
display: inline-block;
|
||||
height: 43%;
|
||||
transform-origin: 0 calc(100% - 16px);
|
||||
transform: translate(-50%, 0);
|
||||
animation: anmiate-second 60s linear infinite;
|
||||
}
|
||||
/*有表盘浅色模式*/
|
||||
.star-clock-case.light {
|
||||
border: 10px solid #e8f6ff;
|
||||
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
|
||||
backdrop-filter: blur(20px);
|
||||
background: linear-gradient(
|
||||
145.7deg,
|
||||
rgba(179, 193, 242, 0.8) 16.24%,
|
||||
rgba(122, 130, 161, 0.8) 94.91%
|
||||
);
|
||||
}
|
||||
.star-clock-case.light .star-clock-point {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(245, 245, 245, 0.95) 0%,
|
||||
rgba(245, 245, 245, 0.01) 100%
|
||||
);
|
||||
}
|
||||
/*无表盘深色模式*/
|
||||
.star-clock-case-transparent {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.star-clock-shaft-transparent {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1;
|
||||
}
|
||||
.star-clock-rotate-transparent {
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
left: 50%;
|
||||
display: inline-block;
|
||||
height: 50%;
|
||||
width: 0px;
|
||||
background-color: transparent;
|
||||
transform-origin: 0 100%;
|
||||
}
|
||||
.star-clock-point-transparent {
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
top: 0;
|
||||
background: #000000;
|
||||
border-radius: 50%;
|
||||
transform: translate(50%, 0);
|
||||
}
|
||||
.star-clock-hour-hand-transparent {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
bottom: calc(50% - 5px);
|
||||
left: 50%;
|
||||
height: 30%;
|
||||
width: 3.5%;
|
||||
background: #1a1a1a;
|
||||
transform-origin: 0 calc(100% - 5px);
|
||||
border-radius: 12px;
|
||||
z-index: 1;
|
||||
transform: translate(-50%, 0);
|
||||
animation: anmiate-hour 86400s linear infinite;
|
||||
}
|
||||
.star-clock-minute-hand-transparent {
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
left: 50%;
|
||||
display: inline-block;
|
||||
height: 33%;
|
||||
width: 6px;
|
||||
background: #1a1a1a;
|
||||
transform-origin: 0 100%;
|
||||
border-radius: 12px;
|
||||
z-index: 1;
|
||||
transform: translate(-50%, 0);
|
||||
animation: anmiate-minute 3600s linear infinite;
|
||||
}
|
||||
.star-clock-second-hand-transparent {
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
left: 50%;
|
||||
display: inline-block;
|
||||
height: 36%;
|
||||
width: 4px;
|
||||
background: #f43737;
|
||||
transform-origin: 0 100%;
|
||||
border-radius: 12px;
|
||||
z-index: 0;
|
||||
transform: translate(-50%, 0);
|
||||
animation: anmiate-second 60s linear infinite;
|
||||
}
|
||||
/*无表盘浅色模式*/
|
||||
.star-clock-case-transparent.light .star-clock-point-transparent {
|
||||
background: #ffffff;
|
||||
}
|
||||
.star-clock-case-transparent.light .star-clock-hour-hand-transparent {
|
||||
background: #ffffff;
|
||||
}
|
||||
.star-clock-case-transparent.light .star-clock-minute-hand-transparent {
|
||||
background: #ffffff;
|
||||
}
|
||||
.star-clock-case-transparent.light .star-clock-second-hand-transparent {
|
||||
background: #f43737;
|
||||
}
|
||||
@keyframes anmiate-second {
|
||||
from {
|
||||
transform: rotate(var(--rotateSecond)) translate(-50%, 0);
|
||||
}
|
||||
to {
|
||||
transform: rotate(var(--rotateSecondAfter)) translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
@keyframes anmiate-minute {
|
||||
from {
|
||||
transform: rotate(var(--rotateMinute)) translate(-50%, 0);
|
||||
}
|
||||
to {
|
||||
transform: rotate(var(--rotateMinuteAfter)) translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
@keyframes anmiate-hour {
|
||||
from {
|
||||
transform: rotate(var(--rotateHour)) translate(-50%, 0);
|
||||
}
|
||||
to {
|
||||
transform: rotate(var(--rotateHourAfter)) translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
import {html, LitElement, CSSResultArray, nothing} from 'lit'
|
||||
import {customElement, property, state} from 'lit/decorators.js'
|
||||
import {sharedStyles} from './clock-style'
|
||||
import darkHour from './svg/dark_hour.svg'
|
||||
import darkMinute from './svg/dark_minute.svg'
|
||||
import lightHour from './svg/light_hour.svg'
|
||||
import lightMinute from './svg/light_minute.svg'
|
||||
import second from './svg/second.svg'
|
||||
|
||||
export enum ClockType {
|
||||
Transparent = 'transparent',
|
||||
Diale = 'diale',
|
||||
}
|
||||
@customElement('star-clock')
|
||||
export class StarClock extends LitElement {
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [sharedStyles]
|
||||
}
|
||||
@property({type: String}) type = '' //时钟样式类型
|
||||
@property({type: String}) mode = 'dark' //支持深色模式和浅色模式,默认背景是深色模式
|
||||
@state() rotateHour = 0
|
||||
@state() rotateMinute = 0
|
||||
@state() rotateSecond = 0
|
||||
private _date = '00:00:00'
|
||||
set date(val: string) {
|
||||
this._date = val
|
||||
val && this.dateUpdated(val)
|
||||
}
|
||||
@property()
|
||||
get date() {
|
||||
return this._date
|
||||
}
|
||||
getTransparentClock() {
|
||||
return html`
|
||||
<div class="star-clock-case-transparent ${this.mode}">
|
||||
<div class="star-clock-shaft-transparent"></div>
|
||||
${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(
|
||||
(item) => html`
|
||||
<span
|
||||
class="star-clock-rotate-transparent"
|
||||
style="transform: rotate(${(360 / 12) * item}deg)"
|
||||
>
|
||||
<span class="star-clock-point-transparent"></span>
|
||||
</span>
|
||||
`
|
||||
)}
|
||||
<span class="star-clock-hour-hand-transparent"></span>
|
||||
<span class="star-clock-minute-hand-transparent"></span>
|
||||
<span class="star-clock-second-hand-transparent"></span>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
getDialeClock() {
|
||||
return html`
|
||||
<div class="star-clock-case ${this.mode}">
|
||||
<div class="star-clock-shaft"></div>
|
||||
${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(
|
||||
(item) => html`
|
||||
<span
|
||||
class="star-clock-rotate"
|
||||
style="transform: rotate(${(360 / 12) * item}deg)"
|
||||
>
|
||||
<span class="star-clock-point"></span>
|
||||
</span>
|
||||
`
|
||||
)}
|
||||
<img
|
||||
class="star-clock-hour-hand"
|
||||
src=${this.modeChange(this.mode).hour}
|
||||
/>
|
||||
<img
|
||||
class="star-clock-minute-hand"
|
||||
src=${this.modeChange(this.mode).minute}
|
||||
/>
|
||||
<img class="star-clock-second-hand" src=${second} />
|
||||
</div>
|
||||
`
|
||||
}
|
||||
render() {
|
||||
switch (this.type) {
|
||||
case ClockType.Transparent:
|
||||
return this.getTransparentClock()
|
||||
case ClockType.Diale:
|
||||
return this.getDialeClock()
|
||||
default:
|
||||
console.error('unhanled [star-clock] type')
|
||||
return nothing
|
||||
}
|
||||
}
|
||||
modeChange(mode: any) {
|
||||
if (mode === 'light') {
|
||||
return {
|
||||
hour: lightHour,
|
||||
minute: lightMinute,
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
hour: darkHour,
|
||||
minute: darkMinute,
|
||||
}
|
||||
}
|
||||
}
|
||||
protected dateUpdated(date: any) {
|
||||
let myDate = date.split(':') //将字符串转化为数组
|
||||
let secondTime = Number(myDate[2] || 0)
|
||||
let minuteTime = Number(myDate[1] || 0) + secondTime / 60
|
||||
let hourTime = Number(myDate[0] || 0) + minuteTime / 60
|
||||
hourTime >= 12 ? (hourTime -= 12) : ''
|
||||
this.rotateSecond = (secondTime / 60) * 360
|
||||
this.rotateMinute = (minuteTime / 60) * 360
|
||||
this.rotateHour = (hourTime / 12) * 360
|
||||
this.style.setProperty('--rotateSecond', this.rotateSecond + 'deg')
|
||||
this.style.setProperty('--rotateMinute', this.rotateMinute + 'deg')
|
||||
this.style.setProperty('--rotateHour', this.rotateHour + 'deg')
|
||||
this.style.setProperty(
|
||||
'--rotateSecondAfter',
|
||||
this.rotateSecond + 360 + 'deg'
|
||||
)
|
||||
this.style.setProperty(
|
||||
'--rotateMinuteAfter',
|
||||
this.rotateMinute + 360 + 'deg'
|
||||
)
|
||||
this.style.setProperty('--rotateHourAfter', this.rotateHour + 360 + 'deg')
|
||||
}
|
||||
}
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'star-clock': StarClock
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
declare module '*.svg'
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="12" height="90" viewBox="0 0 12 90" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.61804 3.2814L0.181058 84.0027C0.0819586 87.2852 2.71599 90 6 90C9.28401 90 11.918 87.2852 11.8189 84.0027L9.38196 3.2814C9.32677 1.45333 7.8289 0 6 0C4.1711 0 2.67323 1.45334 2.61804 3.2814Z" fill="#F0F0F0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 324 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="12" height="152" viewBox="0 0 12 152" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.9408 2.99941C2.97368 1.33339 4.33366 0 6 0V0C7.66634 0 9.02632 1.3334 9.0592 2.99942L11.8816 146.001C11.9466 149.295 9.29438 152 6 152V152C2.70562 152 0.05339 149.295 0.118398 146.001L2.9408 2.99941Z" fill="#A2A6AD"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 375 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="12" height="90" viewBox="0 0 12 90" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.61804 3.2814L0.181058 84.0027C0.0819586 87.2852 2.71599 90 6 90C9.28401 90 11.918 87.2852 11.8189 84.0027L9.38196 3.2814C9.32677 1.45333 7.8289 0 6 0C4.1711 0 2.67323 1.45334 2.61804 3.2814Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 322 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="12" height="152" viewBox="0 0 12 152" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.9408 2.99941C2.97368 1.33339 4.33366 0 6 0V0C7.66634 0 9.02632 1.3334 9.0592 2.99942L11.8816 146.001C11.9466 149.295 9.29438 152 6 152V152C2.70562 152 0.05339 149.295 0.118398 146.001L2.9408 2.99941Z" fill="#D5DDF3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 375 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="4" height="170" viewBox="0 0 4 170" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 170C0.895431 170 -3.91405e-08 169.105 -8.74228e-08 168L-7.34351e-06 2C-7.3918e-06 0.895432 0.895423 -3.91405e-08 1.99999 -8.74228e-08C3.10456 -1.35705e-07 3.99999 0.895431 3.99999 2L4 168C4 169.105 3.10457 170 2 170Z" fill="#E07548"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 390 B |
|
|
@ -1,6 +1,6 @@
|
|||
import {html, LitElement, CSSResultArray} from 'lit'
|
||||
import {customElement, property} from 'lit/decorators.js'
|
||||
import {sharedStyles} from './confirm-style'
|
||||
import {sharedStyles} from './confirm-style.js'
|
||||
@customElement('star-confirm')
|
||||
export class StarConfirm extends LitElement {
|
||||
public static override get styles(): CSSResultArray {
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export * from './confirm.js'
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "@star-web-components/confirm",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./index": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./confirm.js": {
|
||||
"default": "./confirm.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"rootDir": "../../"
|
||||
},
|
||||
"include": ["*.ts"]
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
# 数字密码-digicipher
|
||||
|
||||
工作职责：
|
||||
|
||||
- 由 0-9 数字组成的数字密码
|
||||
- 默认密码为 `123456`
|
||||
- 点击数字反馈，输入成功上滑，输入错误抖动反馈
|
||||
|
||||
## 使用
|
||||
|
||||
```
|
||||
<star-digicipher></star-digicipher>
|
||||
```
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
import {css, CSSResult} from 'lit'
|
||||
export const sharedStyles: CSSResult = css`
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
user-select: none;
|
||||
}
|
||||
p,
|
||||
button,
|
||||
i,
|
||||
h2,
|
||||
.cancel,
|
||||
.delete {
|
||||
font-family: 'OPPOSans';
|
||||
margin-top: 0;
|
||||
color: #292929;
|
||||
}
|
||||
span {
|
||||
position: relative;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
background: #000000;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
p {
|
||||
position: absolute;
|
||||
font-family: 'OPPOSans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
color: #292929;
|
||||
}
|
||||
|
||||
#zero {
|
||||
position: absolute;
|
||||
left: 44.15%;
|
||||
top: 70%;
|
||||
}
|
||||
button {
|
||||
position: relative;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
/*button背景无色*/
|
||||
background: rgba(0, 0, 0, 0);
|
||||
display: inline-block;
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
/*按钮点击的效果*/
|
||||
button::before {
|
||||
content: '';
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 1px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.block::before {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#slideUp {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.topText {
|
||||
font-size: 20px;
|
||||
height: 26.5px;
|
||||
line-height: 26.5px;
|
||||
width: 80px;
|
||||
left: calc(50% - 80px / 2 + 3px);
|
||||
top: calc(50% - 26.5px / 2 - 168.75px);
|
||||
}
|
||||
.spanContainer {
|
||||
position: absolute;
|
||||
left: 206px;
|
||||
top: 349.5px;
|
||||
}
|
||||
.grid {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
grid-template-areas: '1 2 3 ' '4 5 6' '7 8 9' '. 0 .';
|
||||
grid-gap: 20px;
|
||||
margin: 404px 176px;
|
||||
}
|
||||
|
||||
.cancel,
|
||||
.delete {
|
||||
position: absolute;
|
||||
font-family: 'OPPOSans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
color: #292929;
|
||||
width: 36px;
|
||||
height: 23.5px;
|
||||
line-height: 23.5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.cancel {
|
||||
left: calc(50% - 36px / 2 - 90px);
|
||||
top: calc(50% - 23.5px / 2 + 231.75px);
|
||||
}
|
||||
.delete {
|
||||
left: calc(50% - 36px / 2 + 90px);
|
||||
top: calc(50% - 23.5px / 2 + 231.75px);
|
||||
}
|
||||
.cancel:hover,
|
||||
.delete:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.cancel:active,
|
||||
.delete:active {
|
||||
color: #777;
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
/*抖动反馈*/
|
||||
@keyframes errtips {
|
||||
10% {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
20% {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
30% {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
70% {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
80% {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
90% {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/*密码输入正确后动效*/
|
||||
@keyframes suctip {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-1000px);
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
import {html, LitElement, CSSResultArray} from 'lit'
|
||||
import {customElement, property, query, queryAll} from 'lit/decorators.js'
|
||||
import {sharedStyles} from './digicipher-style'
|
||||
|
||||
@customElement('star-digicipher')
|
||||
export class StarLockNumber extends LitElement {
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [sharedStyles]
|
||||
}
|
||||
@query('#slideUp') slideUp!: HTMLDivElement
|
||||
@queryAll('button') buttons!: NodeListOf<HTMLButtonElement>
|
||||
@query('zero') zero!: HTMLButtonElement
|
||||
@queryAll('span') span!: NodeListOf<HTMLSpanElement>
|
||||
@query('spanContainer') spanContainer!: HTMLDivElement
|
||||
@query('#parent') parent!: HTMLDivElement
|
||||
@query('.delete') _delete!: HTMLParagraphElement
|
||||
@query('.cancel') cancel!: HTMLParagraphElement
|
||||
@query('.topText') topText!: HTMLParagraphElement
|
||||
@query('.screen') screen!: HTMLDivElement
|
||||
|
||||
@property({type: Number}) clicks = 0
|
||||
@property({type: Number}) _number = 0
|
||||
@property({type: Number}) clickNumber = 0
|
||||
@property({type: String}) color = ''
|
||||
@property({type: String}) opacity = ''
|
||||
@property({type: String}) guess = ''
|
||||
@property({type: String}) passwd = '123456'
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div id="slideUp">
|
||||
<p class="topText">输入密码</p>
|
||||
<div class="spanContainer">
|
||||
<span id="sOne"></span>
|
||||
<span id="sTwo"></span>
|
||||
<span id="sThree"></span>
|
||||
<span id="sFour"></span>
|
||||
<span id="sFive"></span>
|
||||
<span id="sSix"></span>
|
||||
</div>
|
||||
<div
|
||||
id="parent"
|
||||
@touchstart=${this.touchStart}
|
||||
@touchend=${this.touchEnd}
|
||||
>
|
||||
<button class="0" id="zero" data-num="0">0</button>
|
||||
<div class="grid">
|
||||
<button data-num="1">1</button>
|
||||
<button data-num="2">2</button>
|
||||
<button data-num="3">3</button>
|
||||
<button data-num="4">4</button>
|
||||
<button data-num="5">5</button>
|
||||
<button data-num="6">6</button>
|
||||
<button data-num="7">7</button>
|
||||
<button data-num="8">8</button>
|
||||
<button data-num="9">9</button>
|
||||
</div>
|
||||
<p class="cancel" id="lockCancel">取消</p>
|
||||
<p class="delete">删除</p>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
touchStart(e: TouchEvent) {
|
||||
e.preventDefault()
|
||||
// console.log('e.target', (e.target as HTMLElement).dataset.num)
|
||||
// console.log('click', this.clickNumber)
|
||||
// 点击数字，圆点变色并输出
|
||||
if ((e.target as Element).tagName === 'BUTTON') {
|
||||
this.clickNumber = Number((e.target as HTMLElement).dataset.num)
|
||||
this.makeZero()
|
||||
//点击反馈
|
||||
this.changeNumberBgColor()
|
||||
if (this.clicks < 6) {
|
||||
//圆点变化
|
||||
this.changeBgColor('#333333', this.clicks, 1)
|
||||
this.clicks += 1
|
||||
this.guess += (e.target as HTMLElement).dataset.num
|
||||
console.log('输入后为：', this.guess)
|
||||
}
|
||||
//密码错误
|
||||
if (this.clicks == 6 && this.guess !== this.passwd) {
|
||||
console.log('密码错误')
|
||||
// 抖动反馈
|
||||
for (let i = 0; i < 10; i++) {
|
||||
this.buttons[i].style.setProperty('animation', 'errtips .5s')
|
||||
}
|
||||
//清空密码且删除抖动反馈
|
||||
for (let i = 0; i < 6; i++) {
|
||||
this.changeBgColor('#000000', i, 0.2)
|
||||
}
|
||||
this.guess = ''
|
||||
this.clicks = 0
|
||||
}
|
||||
} else if ((e.target as Element).className === 'delete') {
|
||||
if (this.clicks == 0) {
|
||||
console.log('不可再删除')
|
||||
} else {
|
||||
this.clicks -= 1
|
||||
this.changeBgColor('#000000', this.clicks, 0.2)
|
||||
this.guess = this.guess.slice(0, -1)
|
||||
console.log('删除后为：', this.guess)
|
||||
}
|
||||
} else if ((e.target as Element).className === 'cancel') {
|
||||
//点击取消，返回锁屏
|
||||
console.log('返回锁屏')
|
||||
// this.makeZero()
|
||||
for (let i = 0; i < 6; i++) {
|
||||
this.changeBgColor('#000000', i, 0.2)
|
||||
}
|
||||
this.guess = ''
|
||||
this.clicks = 0
|
||||
}
|
||||
if (this.guess === this.passwd) {
|
||||
for (let j = 0; j < 10; j++) {
|
||||
this.buttons[j].removeAttribute('style')
|
||||
}
|
||||
console.log('密码正确')
|
||||
// this.slideUp.removeAttribute('style')
|
||||
for (let i = 0; i < 6; i++) {
|
||||
this.changeBgColor('#000000', i, 0.2)
|
||||
}
|
||||
this.guess = ''
|
||||
this.clicks = 0
|
||||
this.slideUp.style.setProperty('animation', 'suctip .6s')
|
||||
}
|
||||
}
|
||||
touchEnd(e: TouchEvent) {
|
||||
if ((e.target as Element).tagName === 'BUTTON') {
|
||||
this.removeNumberBgColor()
|
||||
}
|
||||
}
|
||||
|
||||
changeBgColor(color: string, _number: number, opacity: number) {
|
||||
this.span[_number].style.backgroundColor = color
|
||||
this.span[_number].style.opacity = String(opacity)
|
||||
}
|
||||
removeNumberBgColor() {
|
||||
this.buttons[this.clickNumber].classList.remove('block')
|
||||
}
|
||||
changeNumberBgColor() {
|
||||
this.buttons[this.clickNumber].classList.add('block')
|
||||
}
|
||||
makeZero() {
|
||||
//抖动、滑动属性清零
|
||||
this.slideUp.removeAttribute('style')
|
||||
for (let j = 0; j < 10; j++) {
|
||||
this.buttons[j].removeAttribute('style')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -154,9 +154,21 @@ export default class StarDock extends LitElement {
|
|||
return element
|
||||
}
|
||||
|
||||
synchronise() {
|
||||
/**
|
||||
*
|
||||
* @param mode 归位方式，record为根据记录的order归位，current为根据所在位置归位
|
||||
*/
|
||||
synchronise(mode: 'record' | 'current' = 'current') {
|
||||
for (const child of this._children) {
|
||||
child.master.style.order = String(child.order)
|
||||
if (mode == 'current') {
|
||||
child.master.style.order = String(child.order)
|
||||
} else if (+child.master.style.order !== child.order) {
|
||||
const insertedMaster =
|
||||
this.container.children[+child.master.style.order]
|
||||
if (insertedMaster) {
|
||||
this.container.insertBefore(child.master, insertedMaster)
|
||||
}
|
||||
}
|
||||
child.synchroniseContainer()
|
||||
}
|
||||
|
||||
|
|
@ -248,7 +260,7 @@ export default class StarDock extends LitElement {
|
|||
}
|
||||
|
||||
if (this._dnd.delay > 0) {
|
||||
this._dnd.timeout = setTimeout(() => {
|
||||
this._dnd.timeout = window.setTimeout(() => {
|
||||
this._dnd.timeout = undefined
|
||||
this.startDrag()
|
||||
}, this._dnd.delay)
|
||||
|
|
@ -506,7 +518,7 @@ export default class StarDock extends LitElement {
|
|||
DND_MOVE_THROTTLE -
|
||||
(this._dnd.last.timeStamp - this._dnd.lastMoveEventTime)
|
||||
)
|
||||
this._dnd.moveTimeout = setTimeout(() => {
|
||||
this._dnd.moveTimeout = window.setTimeout(() => {
|
||||
this._dnd.moveTimeout = undefined
|
||||
this._dnd.lastMoveEventTime = this._dnd.last.timeStamp
|
||||
this.dispatchEvent(
|
||||
|
|
@ -655,7 +667,7 @@ export default class StarDock extends LitElement {
|
|||
child.container.addEventListener('animationstart', animStart)
|
||||
child.container.classList.add(state)
|
||||
|
||||
child[state] = window.setTimeout(() => {
|
||||
child[state] = window.window.setTimeout(() => {
|
||||
delete child[state]
|
||||
child.container.removeEventListener('animationstart', animStart)
|
||||
child.container.classList.remove(state)
|
||||
|
|
@ -689,8 +701,6 @@ export default class StarDock extends LitElement {
|
|||
min-width: var(--dock-min-width, 100%);
|
||||
max-width: 100%;
|
||||
height: var(--dock-container-height);
|
||||
|
||||
background-color: rgba(1, 1, 1, 0.5);
|
||||
}
|
||||
|
||||
.dock-child-master {
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export * from './dock.js'
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "@star-web-components/dock",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./index": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./index.js": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
class SlotStyleHandler {
|
||||
regex: {[regStr: string]: RegExp} = {
|
||||
slottedCss: /(?:\:\:slotted\(.*\))[^{]+\{[^}]*\}/g,
|
||||
'::slotted()': /\:\:slotted\(([^\(]+)\)/g,
|
||||
keyframes: /@keyframes[^{]+\{([^{]+\{[^}]*\})*\D*\}/g,
|
||||
}
|
||||
head!: HTMLElement
|
||||
headFirstElement!: ChildNode | null
|
||||
headStyle!: HTMLElement
|
||||
shouldRefresh: boolean = false
|
||||
styles: {[styleName: string]: string} = new Proxy(
|
||||
{},
|
||||
{
|
||||
set: (
|
||||
target: {[styleName: string]: string},
|
||||
prop: string,
|
||||
value: string
|
||||
) => {
|
||||
if (!target[prop] || target[prop] !== value) {
|
||||
target[prop] = value
|
||||
this.shouldRefresh = true
|
||||
}
|
||||
return true
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
processCss(style: string, name: string) {
|
||||
let globalCss = ''
|
||||
style.replace(this.regex.keyframes, (match) => {
|
||||
globalCss += match
|
||||
return ''
|
||||
})
|
||||
style = style.replace(this.regex.slottedCss, (match) => {
|
||||
globalCss += match.replace(this.regex['::slotted()'], name + ' $1')
|
||||
return ''
|
||||
})
|
||||
|
||||
return globalCss
|
||||
}
|
||||
|
||||
/**
|
||||
* 将CSS注入头部<style></style>
|
||||
*
|
||||
* @param {String} style
|
||||
* @param {String} name
|
||||
* @returns
|
||||
*/
|
||||
injectGlobalCss(
|
||||
component: HTMLElement,
|
||||
style: string,
|
||||
name: string,
|
||||
subName = ''
|
||||
) {
|
||||
if (!style) return
|
||||
|
||||
const styleName = subName ? `${name}-${subName}` : name
|
||||
let css = this.processCss(style, name)
|
||||
this.styles[styleName] = css
|
||||
|
||||
if (this.shouldRefresh) {
|
||||
if (!this.head || !this.headFirstElement) {
|
||||
this.head = document.head
|
||||
this.headFirstElement = this.head.firstChild
|
||||
}
|
||||
|
||||
if (!this.headStyle) {
|
||||
this.headStyle = document.createElement('style')
|
||||
if (this.headFirstElement) {
|
||||
this.head.insertBefore(this.headStyle, this.headFirstElement)
|
||||
} else {
|
||||
this.head.appendChild(this.headStyle)
|
||||
}
|
||||
}
|
||||
// 当父节点也是 Web Component时，防止全局注册的 Style 被父节点的
|
||||
// ShadowRoot 隔离，需要再在父节点中插入一份样式
|
||||
if (
|
||||
component.parentNode &&
|
||||
(Object.prototype.toString
|
||||
.call(component.parentNode)
|
||||
.includes('DocumentFragment') ||
|
||||
Object.prototype.toString
|
||||
.call(component.parentNode)
|
||||
.includes('ShadowRoot'))
|
||||
) {
|
||||
let scoped = document.createElement('style')
|
||||
scoped.innerHTML = css.trim()
|
||||
component.parentNode.appendChild(scoped)
|
||||
}
|
||||
|
||||
let style = ''
|
||||
for (const styleName in this.styles) {
|
||||
const content = this.styles[styleName]
|
||||
style += content
|
||||
}
|
||||
|
||||
this.headStyle.innerHTML = style
|
||||
this.shouldRefresh = false
|
||||
}
|
||||
}
|
||||
}
|
||||
export default new SlotStyleHandler()
|
||||
|
|
@ -10,7 +10,7 @@ import {
|
|||
ChildElementInfo,
|
||||
DragInType,
|
||||
} from './contianer-interface'
|
||||
import slotStyleHandler from '../../utils/SlotStyleHandler'
|
||||
import slotStyleHandler from './SlotStyleHandler'
|
||||
import varStyle from './style-variables'
|
||||
import containerStyle from './container-style'
|
||||
import ExchangeStrategy from './element-exchange-strategy'
|
||||
|
|
@ -1045,18 +1045,19 @@ class GaiaContainer extends LitElement {
|
|||
}
|
||||
}
|
||||
|
||||
children.push(childToInsert)
|
||||
if (folderName && this.folders[folderName]) {
|
||||
children.push(childToInsert)
|
||||
// 属于文件夹内的图标
|
||||
this.folders[folderName].addAppIcon(childToInsert.master)
|
||||
} else if (referenceIndex === -1) {
|
||||
children.push(childToInsert)
|
||||
this.realAppendChild(pagination ?? 0, childToInsert.master)
|
||||
} else {
|
||||
const referenceNode = children[referenceIndex].folderName
|
||||
? this.folders[children[referenceIndex].folderName].master
|
||||
: children[referenceIndex].master
|
||||
this.realInsertBefore(childToInsert.master, referenceNode)
|
||||
children.splice(referenceIndex, 0, childToInsert)
|
||||
this.realInsertBefore(childToInsert.master, referenceNode)
|
||||
}
|
||||
|
||||
if (folderName && !this.folders[folderName]) {
|
||||
|
|
@ -1141,7 +1142,7 @@ class GaiaContainer extends LitElement {
|
|||
child.container.addEventListener('animationstart', animStart)
|
||||
child.container.classList.add(state)
|
||||
|
||||
child[state] = window.setTimeout(() => {
|
||||
child[state] = window.window.setTimeout(() => {
|
||||
delete child[state]
|
||||
child.container.removeEventListener('animationstart', animStart)
|
||||
child.container.classList.remove(state)
|
||||
|
|
@ -1241,6 +1242,7 @@ class GaiaContainer extends LitElement {
|
|||
this._dnd.child.markDirty()
|
||||
this._dnd.active = false
|
||||
this._dnd.clickCapture = true
|
||||
this._dnd.pagination = undefined
|
||||
this.dispatchEvent(new CustomEvent('drag-finish', {composed: true}))
|
||||
this.resetView('touchend')
|
||||
}
|
||||
|
|
@ -1309,7 +1311,7 @@ class GaiaContainer extends LitElement {
|
|||
let left =
|
||||
(this._dnd.start.translateX as number) +
|
||||
(this._dnd.last.pageX - this._dnd.start.pageX) -
|
||||
this.pages[this._dnd.pagination].offsetLeft
|
||||
this.pages[this._dnd.pagination!].offsetLeft
|
||||
let top =
|
||||
(this._dnd.start.translateY as number) +
|
||||
(this._dnd.last.pageY - this._dnd.start.pageY)
|
||||
|
|
@ -1337,7 +1339,7 @@ class GaiaContainer extends LitElement {
|
|||
DND_MOVE_THROTTLE -
|
||||
(this._dnd.last.timeStamp - this._dnd.lastMoveEventTime)
|
||||
)
|
||||
this._dnd.moveTimeout = setTimeout(() => {
|
||||
this._dnd.moveTimeout = window.setTimeout(() => {
|
||||
this._dnd.moveTimeout = undefined
|
||||
this._dnd.lastMoveEventTime = this._dnd.last.timeStamp
|
||||
this.dispatchEvent(
|
||||
|
|
@ -1382,9 +1384,13 @@ class GaiaContainer extends LitElement {
|
|||
gridX?: number,
|
||||
gridY?: number
|
||||
) {
|
||||
// 拖动中的节点距离分页DOM左上角距离 = 定位坐标 + 手指移动距离 + 与原本页面距离
|
||||
const distanceX =
|
||||
gridX ??
|
||||
this._dnd.gridPosition.x + this._dnd.last.pageX - this._dnd.start.pageX
|
||||
this._dnd.gridPosition.x +
|
||||
(this._dnd.last.pageX - this._dnd.start.pageX) +
|
||||
this.offsetWidth *
|
||||
(this.pagination - (this._dnd.pagination ?? this.pagination))
|
||||
const distanceY =
|
||||
gridY ??
|
||||
this._dnd.gridPosition.y + this._dnd.last.pageY - this._dnd.start.pageY
|
||||
|
|
@ -1447,6 +1453,10 @@ class GaiaContainer extends LitElement {
|
|||
}
|
||||
}
|
||||
this.synchronise()
|
||||
|
||||
if (this._dnd.isSpanning) {
|
||||
this.freshChildCoordinate()
|
||||
}
|
||||
}
|
||||
|
||||
this.dispatchEvent(
|
||||
|
|
@ -1472,7 +1482,7 @@ class GaiaContainer extends LitElement {
|
|||
if (mode === 'immediately') {
|
||||
change()
|
||||
} else {
|
||||
this.exchangeTimer = setTimeout(change, EXCHANGETIMEOUT)
|
||||
this.exchangeTimer = window.setTimeout(change, EXCHANGETIMEOUT)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1536,7 +1546,7 @@ class GaiaContainer extends LitElement {
|
|||
// operator = 'addInFolder'
|
||||
// } else if (dropTarget === this.openedFolder.container) {
|
||||
// // 将要移出文件夹
|
||||
// setTimeout(() => {
|
||||
// window.setTimeout(() => {
|
||||
// ;(this.openedFolder as GaiaContainerFolder).close()
|
||||
// operator = 'removeFromFolder'
|
||||
// }, FORDER_OPERATE_TIME)
|
||||
|
|
@ -1575,7 +1585,7 @@ class GaiaContainer extends LitElement {
|
|||
// ) {
|
||||
// // 图标悬浮于另一个图标正上方
|
||||
// dropChild.master.classList.add('merging')
|
||||
// this.mergeTimer = setTimeout(() => {
|
||||
// this.mergeTimer = window.setTimeout(() => {
|
||||
// if (!child) return
|
||||
// this.mergeFolder(
|
||||
// (dropChild as GaiaContainerChild).master,
|
||||
|
|
@ -1592,7 +1602,7 @@ class GaiaContainer extends LitElement {
|
|||
// ) {
|
||||
// this.clearMergeTimer()
|
||||
// dropChild.master.classList.add('merging')
|
||||
// this.mergeTimer = setTimeout(() => {
|
||||
// this.mergeTimer = window.setTimeout(() => {
|
||||
// if (!child) return
|
||||
// ;(dropChild as GaiaContainerFolder).open()
|
||||
// this.mergeFolder(
|
||||
|
|
@ -1673,12 +1683,44 @@ class GaiaContainer extends LitElement {
|
|||
pagination: number,
|
||||
gridId: number
|
||||
) {
|
||||
let resolve!: Function
|
||||
let reject!: Function
|
||||
let promise = new Promise((res, rej) => {
|
||||
resolve = res
|
||||
reject = rej
|
||||
})
|
||||
|
||||
for (let row = 0; row < child.row; row++) {
|
||||
for (let column = 0; column < child.column; column++) {
|
||||
this.childCoordinate[pagination][gridId + column + row * this.column] =
|
||||
child
|
||||
const targetId = gridId + column + row * this.column
|
||||
if (
|
||||
this.childCoordinate[pagination][targetId] != undefined &&
|
||||
this.childCoordinate[pagination][targetId] != child
|
||||
) {
|
||||
reject()
|
||||
return false
|
||||
}
|
||||
promise.then(() => {
|
||||
this.childCoordinate[pagination][targetId] = child
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
resolve()
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
freshChildCoordinate() {
|
||||
const children = this._children
|
||||
this.childCoordinate = []
|
||||
children.forEach((child) => {
|
||||
const {pagination, curGridId} = child
|
||||
if (!this.childCoordinate[pagination]) {
|
||||
this.childCoordinate[pagination] = {}
|
||||
}
|
||||
this.recordCoordinate(child, pagination, curGridId)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -1915,7 +1957,7 @@ class GaiaContainer extends LitElement {
|
|||
}
|
||||
|
||||
if (this._dnd.delay > 0) {
|
||||
this._dnd.timeout = setTimeout(() => {
|
||||
this._dnd.timeout = window.setTimeout(() => {
|
||||
this._dnd.timeout = undefined
|
||||
this.startDrag()
|
||||
}, this._dnd.delay)
|
||||
|
|
@ -1983,7 +2025,7 @@ class GaiaContainer extends LitElement {
|
|||
if (centerY > this.offsetHeight) {
|
||||
this.dragPosition = 'outter'
|
||||
if (!this.throttle) {
|
||||
this.throttle = setTimeout(() => {
|
||||
this.throttle = window.setTimeout(() => {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('out-of-container', {
|
||||
detail: {
|
||||
|
|
@ -2140,7 +2182,9 @@ class GaiaContainer extends LitElement {
|
|||
if (child.isFolder)
|
||||
children.splice(i + 1, 0, ...(child as GaiaContainerFolder)._children)
|
||||
let isActive = this._dnd.active && child === this._dnd.child
|
||||
child.synchroniseContainer(isActive)
|
||||
if (!child.synchroniseContainer(isActive)) {
|
||||
return
|
||||
}
|
||||
|
||||
// 越界
|
||||
// if (!isActive) {
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ export interface DragAndDrop {
|
|||
|
||||
// 最后一个悬浮经过的元素
|
||||
lastDropChild: any
|
||||
pagination: number
|
||||
pagination: number | undefined
|
||||
top: number
|
||||
left: number
|
||||
|
||||
|
|
|
|||
|
|
@ -355,7 +355,16 @@ export default class GaiaContainerChild {
|
|||
? this.manager.getGridIdByCoordinate(left, top, this.pagination)
|
||||
: this.manager.getFolderGridIdByCoordinate(left, top, this.pagination)
|
||||
if (gridId !== this.curGridId) {
|
||||
this.manager.recordCoordinate(this, this.pagination, gridId)
|
||||
// this.manager.recordCoordinate(this, this.pagination, gridId)
|
||||
if (!this.manager.recordCoordinate(this, this.pagination, gridId)) {
|
||||
/* 未能成功记录，记录位置已有其他子节点，需要清空位置记录并重新归位 */
|
||||
this.loosen()
|
||||
setTimeout(() => {
|
||||
this.manager.freshChildCoordinate()
|
||||
this.manager.synchronise()
|
||||
}, 10)
|
||||
return false
|
||||
}
|
||||
this.preGridId = this.curGridId
|
||||
this.curGridId = gridId
|
||||
}
|
||||
|
|
@ -370,5 +379,6 @@ export default class GaiaContainerChild {
|
|||
!isActive &&
|
||||
!this.container.classList.contains('dragging') &&
|
||||
(container.style.transform = 'translate(' + left + 'px, ' + top + 'px)')
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,7 +56,9 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
|
|||
// NOTE: 避免同步 synchroniseContainer 产生不必要的动画
|
||||
this.container.style.setProperty('transition', 'unset')
|
||||
this.synchroniseContainer()
|
||||
setTimeout(() => this.container.style.removeProperty('transition'))
|
||||
window.setTimeout(() =>
|
||||
this.container.style.removeProperty('transition')
|
||||
)
|
||||
},
|
||||
{once: true}
|
||||
)
|
||||
|
|
@ -254,7 +256,7 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
|
|||
}
|
||||
this.container.style.setProperty('--folder-element-left', '0px')
|
||||
this.container.style.setProperty('--folder-element-top', '0px')
|
||||
this.openTimer = setTimeout(() => {
|
||||
this.openTimer = window.setTimeout(() => {
|
||||
this.master.classList.remove('openning')
|
||||
this.master.classList.add('opened')
|
||||
let element = this.suspendElement.shift()
|
||||
|
|
@ -343,7 +345,7 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
|
|||
this.master.classList.add('destroying') // 文件夹背景缩小消失
|
||||
|
||||
// nextTick，用以配合 originXXX 形成动画
|
||||
setTimeout(() => {
|
||||
window.setTimeout(() => {
|
||||
this.showIconsSubtitle(this._children[0].element!)
|
||||
this.element.style.height = targetHeight + 'px'
|
||||
this.element.style.width = targetWidth + 'px'
|
||||
|
|
@ -367,7 +369,9 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
|
|||
})
|
||||
)
|
||||
|
||||
setTimeout(() => childContainer.style.removeProperty('transition'))
|
||||
window.setTimeout(() =>
|
||||
childContainer.style.removeProperty('transition')
|
||||
)
|
||||
},
|
||||
{once: true}
|
||||
)
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ class GestureManager {
|
|||
// TBD：暂停翻页动画，再划动手指时会出现速度计算异常
|
||||
if (Math.abs(velocity) > this.velocity) {
|
||||
clearTimeout(this.swipeTimer)
|
||||
this.swipeTimer = setTimeout(
|
||||
this.swipeTimer = window.setTimeout(
|
||||
() => (this.swipeTimer = undefined),
|
||||
this.duration
|
||||
)
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export * from './container.js'
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "@star-web-components/grid-container",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./index": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./index.js": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './indicator-page-point.js'
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "@star-web-components/indicator",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./index": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./indicator-page-point.js": {
|
||||
"default": "./indicator-page-point.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"rootDir": "../../"
|
||||
},
|
||||
"include": ["*.ts"]
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './li.js'
|
||||
|
|
@ -7,9 +7,9 @@ import {
|
|||
nothing,
|
||||
} from 'lit'
|
||||
import {customElement, property} from 'lit/decorators.js'
|
||||
import {baseStyles} from '../base/base-style'
|
||||
import '../bubble/bubble'
|
||||
import '../switch/switch'
|
||||
import {baseStyles} from '../base/base-style.js'
|
||||
import '../bubble/bubble.js'
|
||||
import '../switch/switch.js'
|
||||
|
||||
export enum LiType {
|
||||
BASE = 'base',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "@star-web-components/li",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./index": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./li.js": {
|
||||
"default": "./li.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"rootDir": "../../"
|
||||
},
|
||||
"include": [
|
||||
"*.ts",
|
||||
"../base/base-style.js",
|
||||
"../bubble/bubble.js",
|
||||
"../switch/switch.js"
|
||||
]
|
||||
}
|
||||
|
|
@ -3,8 +3,9 @@
|
|||
## 介绍
|
||||
|
||||
### overflowmenu：溢出菜单。
|
||||
现有overflowmenu包含一个绑定点击事件的star-button按钮，通过在响应函数closeoverflowmenu控制溢出菜单内容的显示与隐藏。
|
||||
|
||||
|
||||
现有overflowmenu包含一个绑定点击事件的star-button按钮，通过在响应函数closeoverflowmenu控制溢出菜单内容的显示与隐藏。
|
||||
|
||||
后续改进：结合active-overlay组件，通过调用overlay-stack类控制溢出菜单的显示与隐藏
|
||||
|
||||
```typescript
|
||||
|
|
@ -42,4 +43,4 @@ closeoverflowmenu(e: any) {
|
|||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export * from './overflowmenu.js'
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import {LitElement, html, HTMLTemplateResult, CSSResultArray} from 'lit'
|
||||
import {customElement, property, queryAssignedElements} from 'lit/decorators.js'
|
||||
import '../button/button'
|
||||
import '../button/button.js'
|
||||
import {OverlayStack} from '../overlay/overlay-stack'
|
||||
import {sharedStyles} from './overflowmenustyle'
|
||||
import {sharedStyles} from './overflowmenustyle.js'
|
||||
|
||||
@customElement('star-overflowmenu')
|
||||
export class StarOverflowMenu extends LitElement {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "@star-web-components/overflowmenu",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./index": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./overflowmenu.js": {
|
||||
"default": "./overflowmenu.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"rootDir": "../../"
|
||||
},
|
||||
"include": ["*.ts", "../button/button.js"]
|
||||
}
|
||||
|
|
@ -1,76 +1,95 @@
|
|||
# Adobe SP组件库——overlay
|
||||
# Adobe SP 组件库——overlay
|
||||
|
||||
介绍：Adobe的overlay组件是一个可以用于全局调用的叠加层。
|
||||
介绍：Adobe 的 overlay 组件是一个可以用于全局调用的叠加层。
|
||||
|
||||
## 交互类型
|
||||
|
||||
- type TriggerInteractions =
|
||||
| 'click'
|
||||
| 'custom',
|
||||
| 'hover'
|
||||
| 'modal'
|
||||
| 'click'
|
||||
| 'custom',
|
||||
| 'hover'
|
||||
| 'modal'
|
||||
|
||||
overlay可有多种触发类型，各类型对应情况如下
|
||||
overlay 可有多种触发类型，各类型对应情况如下
|
||||
|
||||
>click将打开一个overlay，该overlay将在下一次单击时立即关闭，该overlay不在overlay内的元素上。
|
||||
> click 将打开一个 overlay，该 overlay 将在下一次单击时立即关闭，该 overlay 不在 overlay 内的元素上。
|
||||
|
||||
>custom允许从外部对显示流程进行定制。
|
||||
> custom 允许从外部对显示流程进行定制。
|
||||
|
||||
>hover一旦指针离开overlay层所连接的触发器，就会关闭overlay层。
|
||||
> hover 一旦指针离开 overlay 层所连接的触发器，就会关闭 overlay 层。
|
||||
|
||||
>modal模态形式，将仅在其内容中捕获标签顺序。
|
||||
> modal 模态形式，将仅在其内容中捕获标签顺序。
|
||||
|
||||
## overlay 中主要用到的方法
|
||||
|
||||
## overlay中主要用到的方法
|
||||
```typescript
|
||||
Overlay.open(
|
||||
(owner: HTMLElement),
|
||||
(interaction: TriggerInteractions),
|
||||
Overlay.open(
|
||||
(owner: HTMLElement),
|
||||
(interaction: TriggerInteractions),
|
||||
(overlayElement: HTMLElement),
|
||||
(options: OverlayOptions) //
|
||||
);
|
||||
```
|
||||
Overlay.open() 是一个异步方法，它返回一个用于关闭overlay的函数。
|
||||
>owner:HTMLElement 代表要打开叠加层的元素
|
||||
|
||||
>interaction:TriggerInteractions overlay的触发交互类型
|
||||
Overlay.open() 是一个异步方法，它返回一个用于关闭 overlay 的函数。
|
||||
|
||||
>overlayElement:HTMLElement 将要放入overlay中的element元素
|
||||
> owner:HTMLElement 代表要打开叠加层的元素
|
||||
|
||||
>options:OverlayOptions overlay定制选项
|
||||
> interaction:TriggerInteractions overlay 的触发交互类型
|
||||
|
||||
> overlayElement:HTMLElement 将要放入 overlay 中的 element 元素
|
||||
|
||||
> options:OverlayOptions overlay 定制选项
|
||||
|
||||
## 作用
|
||||
- 置于底部的overlay，内可填充ul,其他组件可通过调用overlay显示信息
|
||||
|
||||
- 置于底部的 overlay，内可填充 ul,其他组件可通过调用 overlay 显示信息
|
||||
|
||||
# 组件交互
|
||||
- 可与button、menu、popover、picker等联合使用
|
||||
|
||||
# overlay场景、应有接口
|
||||
- 可与 button、menu、popover、picker 等联合使用
|
||||
|
||||
# overlay 场景、应有接口
|
||||
|
||||
- 弹出框、溢出菜单、picker、警告框、主页面应用图标长按显示信息框等
|
||||
- 接口：position显示位置（top、right、left、bottom）、interaction type交互方式（click、custom、hover、modal、replace）、overlayoptions显示配置（delay：延迟出现overlay；placement：自定义位置；offset：偏移量）
|
||||
- 接口：position 显示位置（top、right、left、bottom）、interaction type 交互方式（click、custom、hover、modal、replace）、overlayoptions 显示配置（delay：延迟出现 overlay；placement：自定义位置；offset：偏移量）
|
||||
|
||||
# overlay包含内容
|
||||
> overlay.ts工厂类包含异步函数open()，其通过调用open()和close()函数实现overlay的打开和关闭
|
||||
>> open(OverlayOptions)，其中OverlayOptions为overlay的一些配置参数，open应有方法两个主要方法：updatePosition()和reparentChildren()
|
||||
>>> updatePosition()方法实现open过程的overlay显示位置定位
|
||||
>>> reparentChildren()方法实现组件中content和overlay显示位置的转换
|
||||
# overlay 包含内容
|
||||
|
||||
>> close()，关闭overlay，主要分为两步：关闭overlay，将overlay的content替换回原位置
|
||||
>>> 移除overlay，removeoverlay节点
|
||||
>>> reparentChildren，替换元素
|
||||
> overlay.ts 工厂类包含异步函数 open()，其通过调用 open()和 close()函数实现 overlay 的打开和关闭
|
||||
>
|
||||
> > open(OverlayOptions)，其中 OverlayOptions 为 overlay 的一些配置参数，open 应有方法两个主要方法：updatePosition()和 reparentChildren()
|
||||
> >
|
||||
> > > updatePosition()方法实现 open 过程的 overlay 显示位置定位
|
||||
> > > reparentChildren()方法实现组件中 content 和 overlay 显示位置的转换
|
||||
|
||||
> > close()，关闭 overlay，主要分为两步：关闭 overlay，将 overlay 的 content 替换回原位置
|
||||
> >
|
||||
> > > 移除 overlay，removeoverlay 节点
|
||||
> > > reparentChildren，替换元素
|
||||
|
||||
# overlay 使用
|
||||
|
||||
- 首先获取响应点击事件的节点元素：
|
||||
|
||||
# overlay使用
|
||||
- 首先获取响应点击事件的节点元素：
|
||||
```typescript
|
||||
const targetNode = e.target as HTMLElement
|
||||
const targetNode = e.target as HTMLElement
|
||||
```
|
||||
- 获取被点击节点父节点：
|
||||
|
||||
- 获取被点击节点父节点：
|
||||
|
||||
```typescript
|
||||
const originalNode = targetNode?.parentElement as HTMLElement
|
||||
const originalNode = targetNode?.parentElement as HTMLElement
|
||||
```
|
||||
- 获取要显示在overlay中的内容：
|
||||
|
||||
- 获取要显示在 overlay 中的内容：
|
||||
|
||||
```typescript
|
||||
const content = targetNode?.nextElementSibling as HTMLElement
|
||||
const content = targetNode?.nextElementSibling as HTMLElement
|
||||
```
|
||||
- 构造响应函数时通过调用overlayStack中的openOverlay方法创建activeoverlauy：
|
||||
|
||||
- 构造响应函数时通过调用 overlayStack 中的 openOverlay 方法创建 activeoverlauy：
|
||||
|
||||
```typescript
|
||||
this.overlayStack.openOverlay(originalNode, targetNode, content)
|
||||
```
|
||||
```
|
||||
|
|
|
|||
|
|
@ -20,12 +20,15 @@ export class ActiveOverlay extends LitElement {
|
|||
@property({reflect: true})
|
||||
public placement?: String
|
||||
|
||||
offset!: number
|
||||
skidding!: number
|
||||
|
||||
public constructor() {
|
||||
super()
|
||||
}
|
||||
|
||||
// 调用初始化函数
|
||||
private open(openDetail: OverlayOpenDetail): void {
|
||||
public open(openDetail: OverlayOpenDetail): void {
|
||||
this.extractDetail(openDetail)
|
||||
}
|
||||
// 初始化函数
|
||||
|
|
@ -63,7 +66,7 @@ export class ActiveOverlay extends LitElement {
|
|||
// 边界判断：targetright指被点击的节点右边界，contentwidth表示将要显示的内容的宽度
|
||||
const rightline = targetright + contentwidth > bodywidth ? true : false // 右侧越界条件
|
||||
const bottomline =
|
||||
targetbottom + availableHeight > bodyheight ? true : false //下方越界条件
|
||||
targetbottom + availableHeight > bodyheight ? true : false //下方越界条件
|
||||
// 右下角边界
|
||||
if (rightline && bottomline) {
|
||||
this.style.left = targetleft - (contentwidth - targetnode.offsetWidth) + 'px'
|
||||
|
|
@ -71,7 +74,8 @@ export class ActiveOverlay extends LitElement {
|
|||
return
|
||||
} else if (rightline) {
|
||||
// 右侧边界
|
||||
this.style.left = targetleft - (contentwidth - targetnode.offsetWidth) + 'px'
|
||||
this.style.left =
|
||||
targetleft - (contentwidth - targetnode.offsetWidth) + 'px'
|
||||
this.style.top = targettop + targetnode.offsetHeight + 'px'
|
||||
return
|
||||
} else if (bottomline) {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,11 @@ export class OverlayStack {
|
|||
public overlays: ActiveOverlay[] = []
|
||||
public isOpen: Boolean = false
|
||||
|
||||
public openOverlay(root?: HTMLElement, targetnode?: HTMLElement, content?: HTMLElement) {
|
||||
public openOverlay(
|
||||
root?: HTMLElement,
|
||||
targetnode?: HTMLElement,
|
||||
content?: HTMLElement
|
||||
) {
|
||||
// 创建activeoverlay对象
|
||||
const activeOverlay = ActiveOverlay.create(root, targetnode, content)
|
||||
// 开启状态
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export type TriggerInteractions =
|
|||
| 'inline'
|
||||
| 'modal'
|
||||
|
||||
export type thememode ='light' | 'dark'
|
||||
export type thememode = 'light' | 'dark'
|
||||
|
||||
// overlay配置信息
|
||||
export type OverlayOptions = {
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export * from './picker.js'
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "@star-web-components/picker",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./index": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./picker.js": {
|
||||
"default": "./picker.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
import {html, LitElement, CSSResultArray} from 'lit'
|
||||
import {customElement, property, state} from 'lit/decorators.js'
|
||||
import {styleMap} from 'lit/directives/style-map.js'
|
||||
import {sharedStyles} from './picker-styles'
|
||||
import {sharedStyles} from './picker-styles.js'
|
||||
|
||||
interface StarPickerOption {
|
||||
value: string
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"rootDir": "../../"
|
||||
},
|
||||
"include": ["*.ts"]
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './prompt.js'
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "@star-web-components/prompt",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./index": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./prompt.js": {
|
||||
"default": "./prompt.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import {html, LitElement, CSSResultArray} from 'lit'
|
||||
import {customElement, property, queryAssignedElements} from 'lit/decorators.js'
|
||||
import {sharedStyles} from './prompt-styles'
|
||||
import '../button/button'
|
||||
import {sharedStyles} from './prompt-styles.js'
|
||||
import '../button/button.js'
|
||||
@customElement('star-prompt')
|
||||
export class StarPrompt extends LitElement {
|
||||
public static override get styles(): CSSResultArray {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"rootDir": "../../"
|
||||
},
|
||||
"include": ["*.ts", "../button/button.js"]
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export * from './radio.js'
|
||||
export * from './radio-group.js'
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"name": "@star-web-components/radio",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./index": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./radio.js": {
|
||||
"default": "./radio.js"
|
||||
},
|
||||
"./radio-group.js": {
|
||||
"default": "./radio-group.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
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'
|
||||
import './radio.js'
|
||||
import {StarRadio} from './radio.js'
|
||||
import {sharedStyles} from './radio-style.js'
|
||||
@customElement('star-radio-group')
|
||||
export class StarRadioGroup extends LitElement {
|
||||
public static override get styles(): CSSResultArray {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import {LitElement, html, CSSResultArray} from 'lit'
|
||||
import {customElement, property} from 'lit/decorators.js'
|
||||
import {sharedStyles} from './radio-style'
|
||||
import {sharedStyles} from './radio-style.js'
|
||||
@customElement('star-radio')
|
||||
export class StarRadio extends LitElement {
|
||||
public static override get styles(): CSSResultArray {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"rootDir": "../../"
|
||||
},
|
||||
"include": ["*.ts"]
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './section.js'
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "@star-web-components/section",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./index": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./section.js": {
|
||||
"default": "./section.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"rootDir": "../../"
|
||||
},
|
||||
"include": ["*.ts"]
|
||||
}
|
||||
|
|
@ -54,15 +54,38 @@
|
|||
<star-slider vertical coverWidth="50%"></star-slider>
|
||||
```
|
||||
|
||||
7. 左侧图标|滑块|右侧图标
|
||||
7. `vHeight="300px"`代表垂直 slider 的长度 默认`vHeight="200px"`
|
||||
|
||||
```
|
||||
<star-slider vertical vHeight="300px"></star-slider>
|
||||
<star-slider vertical disabled vHeight="300px"></star-slider>
|
||||
<star-slider vertical coverWidth="50%" vHeight="100px"></star-slider>
|
||||
```
|
||||
|
||||
8. 左侧图标|行滑块|右侧图标
|
||||
- 可根据需求调节 `slider` 位置，例如 : `style="margin-left:10px"`
|
||||
- `slot="l-icon"` 表示图标在`slider`左侧
|
||||
- `slot="r-icon"` 表示图标在`slider`右侧
|
||||
|
||||
```
|
||||
<star-slider>
|
||||
<p class="left" data-icon="brightness"></p>
|
||||
<div slot="l-icon" data-icon="brightness"></div>
|
||||
</star-slider>
|
||||
|
||||
<star-slider>
|
||||
<div slot="r-icon" data-icon="brightness"></div>
|
||||
</star-slider>
|
||||
```
|
||||
|
||||
1. 列滑块 - 下侧图标
|
||||
- `slot="icon"` 表示图标在 slider 下部
|
||||
|
||||
```
|
||||
<star-slider vertical coverWidth="100px">
|
||||
<div slot="icon" data-icon="alarm"></div>
|
||||
</star-slider>
|
||||
```
|
||||
|
||||
## 后续需解决的问题：
|
||||
|
||||
- tick 属性中小球不能完全覆盖 step
|
||||
- vertical 属性变化太快
|
||||
- 后续用 flex 布局重新调整图标位置
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue