@varlet/cli 1.27.17-alpha.1656907860130 → 1.27.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENCE +21 -21
- package/README.en-US.md +401 -401
- package/README.md +396 -396
- package/generators/base/.prettierignore +9 -9
- package/generators/base/.prettierrc +5 -5
- package/generators/base/README.md +82 -82
- package/generators/base/babel.config.js +10 -10
- package/generators/base/public/highlight.css +1 -1
- package/generators/base/public/logo.svg +1 -1
- package/generators/base/shims/shims-md.d.ts +4 -4
- package/generators/base/shims/shims-vue.d.ts +6 -6
- package/generators/base/tsconfig.json +13 -13
- package/generators/config/default/base/docs/home.zh-CN.md +10 -10
- package/generators/config/default/base/package.json +6 -0
- package/generators/config/default/base/types/basicComponent.d.ts +7 -7
- package/generators/config/default/base/types/button.d.ts +12 -12
- package/generators/config/default/base/types/index.d.ts +6 -6
- package/generators/config/default/base/varlet.config.js +110 -110
- package/generators/config/default/sfc/src/button/Button.vue +30 -30
- package/generators/config/default/sfc/src/button/__tests__/index.spec.js +7 -7
- package/generators/config/default/sfc/src/button/button.less +14 -14
- package/generators/config/default/sfc/src/button/docs/zh-CN.md +47 -47
- package/generators/config/default/sfc/src/button/example/BasicUse.vue +7 -7
- package/generators/config/default/sfc/src/button/example/ModifyColor.vue +7 -7
- package/generators/config/default/sfc/src/button/example/index.vue +13 -13
- package/generators/config/default/sfc/src/button/index.ts +10 -10
- package/generators/config/default/tsx/src/button/Button.tsx +31 -31
- package/generators/config/default/tsx/src/button/__tests__/index.spec.js +7 -7
- package/generators/config/default/tsx/src/button/button.less +14 -14
- package/generators/config/default/tsx/src/button/docs/zh-CN.md +47 -47
- package/generators/config/default/tsx/src/button/example/BasicUse.vue +7 -7
- package/generators/config/default/tsx/src/button/example/ModifyColor.vue +7 -7
- package/generators/config/default/tsx/src/button/example/index.vue +13 -13
- package/generators/config/default/tsx/src/button/index.ts +10 -10
- package/generators/config/i18n/base/docs/home.en-US.md +11 -11
- package/generators/config/i18n/base/docs/home.zh-CN.md +10 -10
- package/generators/config/i18n/base/package.json +6 -0
- package/generators/config/i18n/base/types/basicComponent.d.ts +7 -7
- package/generators/config/i18n/base/types/button.d.ts +12 -12
- package/generators/config/i18n/base/types/index.d.ts +7 -7
- package/generators/config/i18n/base/types/locale.d.ts +24 -24
- package/generators/config/i18n/base/varlet.config.js +122 -122
- package/generators/config/i18n/sfc/src/button/Button.vue +36 -36
- package/generators/config/i18n/sfc/src/button/__tests__/index.spec.js +7 -7
- package/generators/config/i18n/sfc/src/button/button.less +14 -14
- package/generators/config/i18n/sfc/src/button/docs/en-US.md +34 -34
- package/generators/config/i18n/sfc/src/button/docs/zh-CN.md +34 -34
- package/generators/config/i18n/sfc/src/button/example/BasicUse.vue +11 -11
- package/generators/config/i18n/sfc/src/button/example/ModifyColor.vue +11 -11
- package/generators/config/i18n/sfc/src/button/example/index.vue +13 -13
- package/generators/config/i18n/sfc/src/button/example/locale/en-US.ts +5 -5
- package/generators/config/i18n/sfc/src/button/example/locale/index.ts +23 -23
- package/generators/config/i18n/sfc/src/button/example/locale/zh-CN.ts +5 -5
- package/generators/config/i18n/sfc/src/button/index.ts +10 -10
- package/generators/config/i18n/sfc/src/locale/__tests__/index.spec.js +51 -51
- package/generators/config/i18n/sfc/src/locale/docs/en-US.md +26 -26
- package/generators/config/i18n/sfc/src/locale/docs/zh-CN.md +25 -25
- package/generators/config/i18n/sfc/src/locale/en-US.d.ts +5 -5
- package/generators/config/i18n/sfc/src/locale/en-US.ts +7 -7
- package/generators/config/i18n/sfc/src/locale/index.ts +67 -67
- package/generators/config/i18n/sfc/src/locale/zh-CN.d.ts +5 -5
- package/generators/config/i18n/sfc/src/locale/zh-CN.ts +7 -7
- package/generators/config/i18n/tsx/src/button/Button.tsx +35 -35
- package/generators/config/i18n/tsx/src/button/__tests__/index.spec.js +7 -7
- package/generators/config/i18n/tsx/src/button/button.less +14 -14
- package/generators/config/i18n/tsx/src/button/docs/en-US.md +34 -34
- package/generators/config/i18n/tsx/src/button/docs/zh-CN.md +34 -34
- package/generators/config/i18n/tsx/src/button/example/BasicUse.vue +11 -11
- package/generators/config/i18n/tsx/src/button/example/ModifyColor.vue +11 -11
- package/generators/config/i18n/tsx/src/button/example/index.vue +13 -13
- package/generators/config/i18n/tsx/src/button/example/locale/en-US.ts +5 -5
- package/generators/config/i18n/tsx/src/button/example/locale/index.ts +23 -23
- package/generators/config/i18n/tsx/src/button/example/locale/zh-CN.ts +5 -5
- package/generators/config/i18n/tsx/src/button/index.ts +10 -10
- package/generators/config/i18n/tsx/src/locale/__tests__/index.spec.js +51 -51
- package/generators/config/i18n/tsx/src/locale/docs/en-US.md +26 -26
- package/generators/config/i18n/tsx/src/locale/docs/zh-CN.md +25 -25
- package/generators/config/i18n/tsx/src/locale/en-US.d.ts +5 -5
- package/generators/config/i18n/tsx/src/locale/en-US.ts +7 -7
- package/generators/config/i18n/tsx/src/locale/index.ts +67 -67
- package/generators/config/i18n/tsx/src/locale/zh-CN.d.ts +5 -5
- package/generators/config/i18n/tsx/src/locale/zh-CN.ts +7 -7
- package/lib/commands/build.d.ts +1 -1
- package/lib/commands/build.js +67 -67
- package/lib/commands/changelog.d.ts +6 -6
- package/lib/commands/changelog.js +27 -27
- package/lib/commands/commitLint.d.ts +1 -1
- package/lib/commands/commitLint.js +21 -21
- package/lib/commands/compile.d.ts +5 -5
- package/lib/commands/compile.js +119 -119
- package/lib/commands/create.d.ts +3 -3
- package/lib/commands/create.js +132 -132
- package/lib/commands/dev.d.ts +3 -3
- package/lib/commands/dev.js +123 -123
- package/lib/commands/gen.d.ts +1 -1
- package/lib/commands/gen.js +112 -112
- package/lib/commands/jest.d.ts +8 -8
- package/lib/commands/jest.js +81 -81
- package/lib/commands/lint.d.ts +1 -1
- package/lib/commands/lint.js +123 -123
- package/lib/commands/preview.d.ts +1 -1
- package/lib/commands/preview.js +74 -74
- package/lib/commands/release.d.ts +3 -3
- package/lib/commands/release.js +270 -267
- package/lib/compiler/compileModule.d.ts +5 -5
- package/lib/compiler/compileModule.js +186 -186
- package/lib/compiler/compileSFC.d.ts +2 -2
- package/lib/compiler/compileSFC.js +132 -132
- package/lib/compiler/compileScript.d.ts +17 -17
- package/lib/compiler/compileScript.js +202 -202
- package/lib/compiler/compileSiteEntry.d.ts +13 -13
- package/lib/compiler/compileSiteEntry.js +237 -237
- package/lib/compiler/compileStyle.d.ts +11 -11
- package/lib/compiler/compileStyle.js +101 -101
- package/lib/compiler/compileTemplateHighlight.d.ts +10 -10
- package/lib/compiler/compileTemplateHighlight.js +193 -193
- package/lib/compiler/compileTypes.d.ts +2 -2
- package/lib/compiler/compileTypes.js +88 -88
- package/lib/config/babel.config.d.ts +2 -2
- package/lib/config/babel.config.js +31 -31
- package/lib/config/babel.sfc.transform.d.ts +1 -1
- package/lib/config/babel.sfc.transform.js +18 -18
- package/lib/config/jest.config.d.ts +1 -1
- package/lib/config/jest.config.js +36 -36
- package/lib/config/jest.media.mock.js +2 -2
- package/lib/config/jest.style.mock.js +2 -2
- package/lib/config/varlet.config.d.ts +1 -1
- package/lib/config/varlet.config.js +24 -24
- package/lib/config/vite.config.d.ts +5 -5
- package/lib/config/vite.config.js +162 -162
- package/lib/index.d.ts +2 -2
- package/lib/index.js +83 -83
- package/lib/shared/constant.d.ts +43 -43
- package/lib/shared/constant.js +50 -50
- package/lib/shared/fsUtils.d.ts +12 -12
- package/lib/shared/fsUtils.js +108 -108
- package/lib/shared/logger.d.ts +7 -7
- package/lib/shared/logger.js +20 -20
- package/package.json +7 -7
- package/preset.js +3 -3
- package/site/components/button/Button.vue +84 -84
- package/site/components/button/button.less +183 -183
- package/site/components/button/index.ts +10 -10
- package/site/components/button/props.ts +70 -70
- package/site/components/cell/Cell.vue +42 -42
- package/site/components/cell/cell.less +74 -74
- package/site/components/cell/index.ts +10 -10
- package/site/components/cell/props.ts +27 -27
- package/site/components/code-example/CodeExample.vue +143 -143
- package/site/components/code-example/codeExample.less +41 -41
- package/site/components/code-example/index.ts +10 -10
- package/site/components/context/index.ts +17 -17
- package/site/components/context/lock.ts +103 -103
- package/site/components/context/zIndex.ts +20 -20
- package/site/components/icon/Icon.vue +68 -68
- package/site/components/icon/icon.less +26 -26
- package/site/components/icon/index.ts +10 -10
- package/site/components/icon/props.ts +24 -24
- package/site/components/loading/Loading.vue +55 -55
- package/site/components/loading/index.ts +10 -10
- package/site/components/loading/loading.less +420 -420
- package/site/components/loading/props.ts +37 -37
- package/site/components/progress/Progress.vue +108 -108
- package/site/components/progress/index.ts +10 -10
- package/site/components/progress/progress.less +98 -98
- package/site/components/progress/props.ts +55 -55
- package/site/components/ripple/index.ts +167 -167
- package/site/components/ripple/ripple.less +17 -17
- package/site/components/snackbar/Snackbar.vue +38 -38
- package/site/components/snackbar/core.vue +117 -117
- package/site/components/snackbar/index.tsx +270 -270
- package/site/components/snackbar/props.ts +94 -94
- package/site/components/snackbar/snackbar.less +135 -135
- package/site/components/styles/common.less +64 -64
- package/site/components/styles/elevation.less +126 -126
- package/site/components/styles/var.less +27 -27
- package/site/components/utils/components.ts +69 -69
- package/site/components/utils/elements.ts +85 -85
- package/site/index.html +49 -49
- package/site/mobile/App.vue +291 -291
- package/site/mobile/components/AppHome.vue +134 -134
- package/site/mobile/components/AppType.vue +22 -22
- package/site/mobile/components/app-bar/AppBar.vue +69 -69
- package/site/mobile/components/app-bar/appBar.less +56 -56
- package/site/mobile/components/app-bar/index.ts +10 -10
- package/site/mobile/components/app-bar/props.ts +25 -25
- package/site/mobile/components/styles/common.less +64 -64
- package/site/mobile/components/styles/elevation.less +126 -126
- package/site/mobile/components/styles/var.less +27 -27
- package/site/mobile/main.ts +74 -74
- package/site/mobile.html +41 -41
- package/site/module.d.ts +5 -5
- package/site/pc/App.vue +43 -43
- package/site/pc/Layout.vue +397 -397
- package/site/pc/components/AnimationBox.vue +45 -45
- package/site/pc/components/AppHeader.vue +355 -355
- package/site/pc/components/AppMobile.vue +54 -54
- package/site/pc/components/AppSidebar.vue +134 -134
- package/site/pc/components/LogoAnimation.vue +119 -119
- package/site/pc/floating.ts +9 -9
- package/site/pc/main.ts +94 -94
- package/site/pc/pages/index/index.less +231 -194
- package/site/pc/pages/index/index.vue +145 -128
- package/site/pc/pages/index/locale/en-US.ts +5 -3
- package/site/pc/pages/index/locale/zh-CN.ts +5 -3
- package/site/tsconfig.json +11 -11
- package/site/useProgress.ts +75 -75
- package/site/utils.ts +153 -153
- package/tsconfig.json +14 -14
- package/varlet.default.config.js +145 -151
|
@@ -1,103 +1,103 @@
|
|
|
1
|
-
import { watch, onBeforeMount, onUnmounted, onDeactivated, onActivated, getCurrentInstance } from 'vue'
|
|
2
|
-
import type { ComponentInternalInstance } from 'vue'
|
|
3
|
-
import context from '.'
|
|
4
|
-
|
|
5
|
-
export function resolveLock() {
|
|
6
|
-
const lockCounts: number = Object.keys(context.locks).length
|
|
7
|
-
lockCounts <= 0 ? document.body.classList.remove('var-site--lock') : document.body.classList.add('var-site--lock')
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export function addLock(uid: number) {
|
|
11
|
-
context.locks[uid] = 1
|
|
12
|
-
resolveLock()
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
export function releaseLock(uid: number) {
|
|
16
|
-
delete context.locks[uid]
|
|
17
|
-
resolveLock()
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* 组件锁操作
|
|
22
|
-
* @param props 组件props
|
|
23
|
-
* @param state 组件props中控制组件加锁的开关对应的key值
|
|
24
|
-
* @param use 组件props中控制组件加锁的开关是否可用对应的key值
|
|
25
|
-
*/
|
|
26
|
-
export function useLock(props: any, state: string, use?: string) {
|
|
27
|
-
const { uid } = getCurrentInstance() as ComponentInternalInstance
|
|
28
|
-
if (use) {
|
|
29
|
-
watch(
|
|
30
|
-
() => props[use],
|
|
31
|
-
(newValue: boolean) => {
|
|
32
|
-
if (newValue === false) {
|
|
33
|
-
// 改变为禁用状态 组件解锁
|
|
34
|
-
releaseLock(uid)
|
|
35
|
-
} else if (newValue === true && props[state] === true) {
|
|
36
|
-
// 改变为启用状态 并且popup处于开启状态 组件加锁
|
|
37
|
-
addLock(uid)
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
)
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
watch(
|
|
44
|
-
() => props[state],
|
|
45
|
-
(newValue: boolean) => {
|
|
46
|
-
if (use && props[use] === false) {
|
|
47
|
-
return
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
if (newValue === true) {
|
|
51
|
-
// popup开启 组件加锁
|
|
52
|
-
addLock(uid)
|
|
53
|
-
} else {
|
|
54
|
-
// popup关闭 组件解锁
|
|
55
|
-
releaseLock(uid)
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
)
|
|
59
|
-
|
|
60
|
-
onBeforeMount(() => {
|
|
61
|
-
if (use && props[use] === false) {
|
|
62
|
-
return
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
if (props[state] === true) {
|
|
66
|
-
// popup处于开启状态 组件挂载 组件加锁
|
|
67
|
-
addLock(uid)
|
|
68
|
-
}
|
|
69
|
-
})
|
|
70
|
-
|
|
71
|
-
onUnmounted(() => {
|
|
72
|
-
if (use && props[use] === false) {
|
|
73
|
-
return
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
if (props[state] === true) {
|
|
77
|
-
// popup处于开启状态 组件卸载 组件解锁
|
|
78
|
-
releaseLock(uid)
|
|
79
|
-
}
|
|
80
|
-
})
|
|
81
|
-
|
|
82
|
-
onActivated(() => {
|
|
83
|
-
if (use && props[use] === false) {
|
|
84
|
-
return
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
if (props[state] === true) {
|
|
88
|
-
// popup处于开启状态 组件处于keepalive前台 组件加锁
|
|
89
|
-
addLock(uid)
|
|
90
|
-
}
|
|
91
|
-
})
|
|
92
|
-
|
|
93
|
-
onDeactivated(() => {
|
|
94
|
-
if (use && props[use] === false) {
|
|
95
|
-
return
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
if (props[state] === true) {
|
|
99
|
-
// popup处于开启状态 组件处于keepalive后台 组件解锁
|
|
100
|
-
releaseLock(uid)
|
|
101
|
-
}
|
|
102
|
-
})
|
|
103
|
-
}
|
|
1
|
+
import { watch, onBeforeMount, onUnmounted, onDeactivated, onActivated, getCurrentInstance } from 'vue'
|
|
2
|
+
import type { ComponentInternalInstance } from 'vue'
|
|
3
|
+
import context from '.'
|
|
4
|
+
|
|
5
|
+
export function resolveLock() {
|
|
6
|
+
const lockCounts: number = Object.keys(context.locks).length
|
|
7
|
+
lockCounts <= 0 ? document.body.classList.remove('var-site--lock') : document.body.classList.add('var-site--lock')
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export function addLock(uid: number) {
|
|
11
|
+
context.locks[uid] = 1
|
|
12
|
+
resolveLock()
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export function releaseLock(uid: number) {
|
|
16
|
+
delete context.locks[uid]
|
|
17
|
+
resolveLock()
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* 组件锁操作
|
|
22
|
+
* @param props 组件props
|
|
23
|
+
* @param state 组件props中控制组件加锁的开关对应的key值
|
|
24
|
+
* @param use 组件props中控制组件加锁的开关是否可用对应的key值
|
|
25
|
+
*/
|
|
26
|
+
export function useLock(props: any, state: string, use?: string) {
|
|
27
|
+
const { uid } = getCurrentInstance() as ComponentInternalInstance
|
|
28
|
+
if (use) {
|
|
29
|
+
watch(
|
|
30
|
+
() => props[use],
|
|
31
|
+
(newValue: boolean) => {
|
|
32
|
+
if (newValue === false) {
|
|
33
|
+
// 改变为禁用状态 组件解锁
|
|
34
|
+
releaseLock(uid)
|
|
35
|
+
} else if (newValue === true && props[state] === true) {
|
|
36
|
+
// 改变为启用状态 并且popup处于开启状态 组件加锁
|
|
37
|
+
addLock(uid)
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
)
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
watch(
|
|
44
|
+
() => props[state],
|
|
45
|
+
(newValue: boolean) => {
|
|
46
|
+
if (use && props[use] === false) {
|
|
47
|
+
return
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
if (newValue === true) {
|
|
51
|
+
// popup开启 组件加锁
|
|
52
|
+
addLock(uid)
|
|
53
|
+
} else {
|
|
54
|
+
// popup关闭 组件解锁
|
|
55
|
+
releaseLock(uid)
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
)
|
|
59
|
+
|
|
60
|
+
onBeforeMount(() => {
|
|
61
|
+
if (use && props[use] === false) {
|
|
62
|
+
return
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
if (props[state] === true) {
|
|
66
|
+
// popup处于开启状态 组件挂载 组件加锁
|
|
67
|
+
addLock(uid)
|
|
68
|
+
}
|
|
69
|
+
})
|
|
70
|
+
|
|
71
|
+
onUnmounted(() => {
|
|
72
|
+
if (use && props[use] === false) {
|
|
73
|
+
return
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
if (props[state] === true) {
|
|
77
|
+
// popup处于开启状态 组件卸载 组件解锁
|
|
78
|
+
releaseLock(uid)
|
|
79
|
+
}
|
|
80
|
+
})
|
|
81
|
+
|
|
82
|
+
onActivated(() => {
|
|
83
|
+
if (use && props[use] === false) {
|
|
84
|
+
return
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
if (props[state] === true) {
|
|
88
|
+
// popup处于开启状态 组件处于keepalive前台 组件加锁
|
|
89
|
+
addLock(uid)
|
|
90
|
+
}
|
|
91
|
+
})
|
|
92
|
+
|
|
93
|
+
onDeactivated(() => {
|
|
94
|
+
if (use && props[use] === false) {
|
|
95
|
+
return
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
if (props[state] === true) {
|
|
99
|
+
// popup处于开启状态 组件处于keepalive后台 组件解锁
|
|
100
|
+
releaseLock(uid)
|
|
101
|
+
}
|
|
102
|
+
})
|
|
103
|
+
}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import context from './index'
|
|
2
|
-
import { watch, ref } from 'vue'
|
|
3
|
-
import type { Ref } from 'vue'
|
|
4
|
-
|
|
5
|
-
export function useZIndex(source: any, count: number) {
|
|
6
|
-
const zIndex: Ref<number> = ref(context.zIndex)
|
|
7
|
-
|
|
8
|
-
watch(
|
|
9
|
-
source,
|
|
10
|
-
(newValue) => {
|
|
11
|
-
if (newValue) {
|
|
12
|
-
context.zIndex += count
|
|
13
|
-
zIndex.value = context.zIndex
|
|
14
|
-
}
|
|
15
|
-
},
|
|
16
|
-
{ immediate: true }
|
|
17
|
-
)
|
|
18
|
-
|
|
19
|
-
return { zIndex }
|
|
20
|
-
}
|
|
1
|
+
import context from './index'
|
|
2
|
+
import { watch, ref } from 'vue'
|
|
3
|
+
import type { Ref } from 'vue'
|
|
4
|
+
|
|
5
|
+
export function useZIndex(source: any, count: number) {
|
|
6
|
+
const zIndex: Ref<number> = ref(context.zIndex)
|
|
7
|
+
|
|
8
|
+
watch(
|
|
9
|
+
source,
|
|
10
|
+
(newValue) => {
|
|
11
|
+
if (newValue) {
|
|
12
|
+
context.zIndex += count
|
|
13
|
+
zIndex.value = context.zIndex
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
{ immediate: true }
|
|
17
|
+
)
|
|
18
|
+
|
|
19
|
+
return { zIndex }
|
|
20
|
+
}
|
|
@@ -1,68 +1,68 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<component
|
|
3
|
-
class="var-site-icon"
|
|
4
|
-
:is="isURL(name) ? 'img' : 'i'"
|
|
5
|
-
:class="[
|
|
6
|
-
`${namespace}--set`,
|
|
7
|
-
isURL(name) ? 'var-site-icon__image' : `${namespace}-${nextName}`,
|
|
8
|
-
shrinking ? 'var-site-icon--shrinking' : null,
|
|
9
|
-
]"
|
|
10
|
-
:style="{
|
|
11
|
-
color,
|
|
12
|
-
transition: `all ${toNumber(transition)}ms`,
|
|
13
|
-
width: isURL(name) ? toSizeUnit(size) : null,
|
|
14
|
-
height: isURL(name) ? toSizeUnit(size) : null,
|
|
15
|
-
fontSize: toSizeUnit(size),
|
|
16
|
-
}"
|
|
17
|
-
:src="isURL(name) ? nextName : null"
|
|
18
|
-
@click="onClick"
|
|
19
|
-
/>
|
|
20
|
-
</template>
|
|
21
|
-
|
|
22
|
-
<script lang="ts">
|
|
23
|
-
import { defineComponent, watch, ref, nextTick } from 'vue'
|
|
24
|
-
import { isURL, toNumber } from '@varlet/shared'
|
|
25
|
-
import { toSizeUnit } from '../utils/elements'
|
|
26
|
-
import { props } from './props'
|
|
27
|
-
import type { Ref } from 'vue'
|
|
28
|
-
|
|
29
|
-
export default defineComponent({
|
|
30
|
-
name: 'VarSiteIcon',
|
|
31
|
-
props,
|
|
32
|
-
setup(props) {
|
|
33
|
-
const nextName: Ref<string | undefined> = ref('')
|
|
34
|
-
const shrinking: Ref<boolean> = ref(false)
|
|
35
|
-
|
|
36
|
-
const handleNameChange = async (newName: string | undefined, oldName: string | undefined) => {
|
|
37
|
-
const { transition } = props
|
|
38
|
-
|
|
39
|
-
if (oldName == null || toNumber(transition) === 0) {
|
|
40
|
-
nextName.value = newName
|
|
41
|
-
return
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
shrinking.value = true
|
|
45
|
-
await nextTick()
|
|
46
|
-
setTimeout(() => {
|
|
47
|
-
oldName != null && (nextName.value = newName)
|
|
48
|
-
shrinking.value = false
|
|
49
|
-
}, toNumber(transition))
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
watch(() => props.name, handleNameChange, { immediate: true })
|
|
53
|
-
|
|
54
|
-
return {
|
|
55
|
-
nextName,
|
|
56
|
-
shrinking,
|
|
57
|
-
isURL,
|
|
58
|
-
toNumber,
|
|
59
|
-
toSizeUnit,
|
|
60
|
-
}
|
|
61
|
-
},
|
|
62
|
-
})
|
|
63
|
-
</script>
|
|
64
|
-
|
|
65
|
-
<style lang="less">
|
|
66
|
-
@import '../styles/common';
|
|
67
|
-
@import './icon';
|
|
68
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<component
|
|
3
|
+
class="var-site-icon"
|
|
4
|
+
:is="isURL(name) ? 'img' : 'i'"
|
|
5
|
+
:class="[
|
|
6
|
+
`${namespace}--set`,
|
|
7
|
+
isURL(name) ? 'var-site-icon__image' : `${namespace}-${nextName}`,
|
|
8
|
+
shrinking ? 'var-site-icon--shrinking' : null,
|
|
9
|
+
]"
|
|
10
|
+
:style="{
|
|
11
|
+
color,
|
|
12
|
+
transition: `all ${toNumber(transition)}ms`,
|
|
13
|
+
width: isURL(name) ? toSizeUnit(size) : null,
|
|
14
|
+
height: isURL(name) ? toSizeUnit(size) : null,
|
|
15
|
+
fontSize: toSizeUnit(size),
|
|
16
|
+
}"
|
|
17
|
+
:src="isURL(name) ? nextName : null"
|
|
18
|
+
@click="onClick"
|
|
19
|
+
/>
|
|
20
|
+
</template>
|
|
21
|
+
|
|
22
|
+
<script lang="ts">
|
|
23
|
+
import { defineComponent, watch, ref, nextTick } from 'vue'
|
|
24
|
+
import { isURL, toNumber } from '@varlet/shared'
|
|
25
|
+
import { toSizeUnit } from '../utils/elements'
|
|
26
|
+
import { props } from './props'
|
|
27
|
+
import type { Ref } from 'vue'
|
|
28
|
+
|
|
29
|
+
export default defineComponent({
|
|
30
|
+
name: 'VarSiteIcon',
|
|
31
|
+
props,
|
|
32
|
+
setup(props) {
|
|
33
|
+
const nextName: Ref<string | undefined> = ref('')
|
|
34
|
+
const shrinking: Ref<boolean> = ref(false)
|
|
35
|
+
|
|
36
|
+
const handleNameChange = async (newName: string | undefined, oldName: string | undefined) => {
|
|
37
|
+
const { transition } = props
|
|
38
|
+
|
|
39
|
+
if (oldName == null || toNumber(transition) === 0) {
|
|
40
|
+
nextName.value = newName
|
|
41
|
+
return
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
shrinking.value = true
|
|
45
|
+
await nextTick()
|
|
46
|
+
setTimeout(() => {
|
|
47
|
+
oldName != null && (nextName.value = newName)
|
|
48
|
+
shrinking.value = false
|
|
49
|
+
}, toNumber(transition))
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
watch(() => props.name, handleNameChange, { immediate: true })
|
|
53
|
+
|
|
54
|
+
return {
|
|
55
|
+
nextName,
|
|
56
|
+
shrinking,
|
|
57
|
+
isURL,
|
|
58
|
+
toNumber,
|
|
59
|
+
toSizeUnit,
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
})
|
|
63
|
+
</script>
|
|
64
|
+
|
|
65
|
+
<style lang="less">
|
|
66
|
+
@import '../styles/common';
|
|
67
|
+
@import './icon';
|
|
68
|
+
</style>
|
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
@import '@varlet/icons/dist/css/varlet-icons.less';
|
|
2
|
-
|
|
3
|
-
@site-icon-size: 20px;
|
|
4
|
-
|
|
5
|
-
:root {
|
|
6
|
-
--site-icon-size: @site-icon-size;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.var-site-icon {
|
|
10
|
-
display: inline-flex;
|
|
11
|
-
justify-content: center;
|
|
12
|
-
align-items: center;
|
|
13
|
-
font-size: var(--site-icon-size);
|
|
14
|
-
color: inherit;
|
|
15
|
-
vertical-align: bottom;
|
|
16
|
-
|
|
17
|
-
&--shrinking {
|
|
18
|
-
transform: scale(0);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
&__image {
|
|
22
|
-
width: var(--site-icon-size);
|
|
23
|
-
height: var(--site-icon-size);
|
|
24
|
-
object-fit: cover;
|
|
25
|
-
}
|
|
26
|
-
}
|
|
1
|
+
@import '@varlet/icons/dist/css/varlet-icons.less';
|
|
2
|
+
|
|
3
|
+
@site-icon-size: 20px;
|
|
4
|
+
|
|
5
|
+
:root {
|
|
6
|
+
--site-icon-size: @site-icon-size;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.var-site-icon {
|
|
10
|
+
display: inline-flex;
|
|
11
|
+
justify-content: center;
|
|
12
|
+
align-items: center;
|
|
13
|
+
font-size: var(--site-icon-size);
|
|
14
|
+
color: inherit;
|
|
15
|
+
vertical-align: bottom;
|
|
16
|
+
|
|
17
|
+
&--shrinking {
|
|
18
|
+
transform: scale(0);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&__image {
|
|
22
|
+
width: var(--site-icon-size);
|
|
23
|
+
height: var(--site-icon-size);
|
|
24
|
+
object-fit: cover;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import type { App } from 'vue'
|
|
2
|
-
import Icon from './Icon.vue'
|
|
3
|
-
|
|
4
|
-
Icon.install = function (app: App) {
|
|
5
|
-
app.component(Icon.name, Icon)
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export const _IconComponent = Icon
|
|
9
|
-
|
|
10
|
-
export default Icon
|
|
1
|
+
import type { App } from 'vue'
|
|
2
|
+
import Icon from './Icon.vue'
|
|
3
|
+
|
|
4
|
+
Icon.install = function (app: App) {
|
|
5
|
+
app.component(Icon.name, Icon)
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
export const _IconComponent = Icon
|
|
9
|
+
|
|
10
|
+
export default Icon
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import type { PropType } from 'vue'
|
|
2
|
-
|
|
3
|
-
export const props = {
|
|
4
|
-
name: {
|
|
5
|
-
type: String,
|
|
6
|
-
},
|
|
7
|
-
size: {
|
|
8
|
-
type: [Number, String],
|
|
9
|
-
},
|
|
10
|
-
color: {
|
|
11
|
-
type: String,
|
|
12
|
-
},
|
|
13
|
-
namespace: {
|
|
14
|
-
type: String,
|
|
15
|
-
default: 'var-icon',
|
|
16
|
-
},
|
|
17
|
-
transition: {
|
|
18
|
-
type: [Number, String],
|
|
19
|
-
default: 0,
|
|
20
|
-
},
|
|
21
|
-
onClick: {
|
|
22
|
-
type: Function as PropType<(event: Event) => void>,
|
|
23
|
-
},
|
|
24
|
-
}
|
|
1
|
+
import type { PropType } from 'vue'
|
|
2
|
+
|
|
3
|
+
export const props = {
|
|
4
|
+
name: {
|
|
5
|
+
type: String,
|
|
6
|
+
},
|
|
7
|
+
size: {
|
|
8
|
+
type: [Number, String],
|
|
9
|
+
},
|
|
10
|
+
color: {
|
|
11
|
+
type: String,
|
|
12
|
+
},
|
|
13
|
+
namespace: {
|
|
14
|
+
type: String,
|
|
15
|
+
default: 'var-icon',
|
|
16
|
+
},
|
|
17
|
+
transition: {
|
|
18
|
+
type: [Number, String],
|
|
19
|
+
default: 0,
|
|
20
|
+
},
|
|
21
|
+
onClick: {
|
|
22
|
+
type: Function as PropType<(event: Event) => void>,
|
|
23
|
+
},
|
|
24
|
+
}
|
|
@@ -1,55 +1,55 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="var-site--box var-site-loading">
|
|
3
|
-
<div class="var-site-loading__circle" v-if="type === 'circle'">
|
|
4
|
-
<span
|
|
5
|
-
class="var-site-loading__circle-block"
|
|
6
|
-
:style="{
|
|
7
|
-
width: radius * 2 + 'px',
|
|
8
|
-
height: radius * 2 + 'px',
|
|
9
|
-
}"
|
|
10
|
-
>
|
|
11
|
-
<svg viewBox="25 25 50 50">
|
|
12
|
-
<circle cx="50" cy="50" r="20" fill="none"></circle>
|
|
13
|
-
</svg>
|
|
14
|
-
</span>
|
|
15
|
-
</div>
|
|
16
|
-
|
|
17
|
-
<template v-for="(nums, key) in loadingTypeDict" :key="key">
|
|
18
|
-
<div :class="`var-site-loading__${key} var-site-loading__${key}-${size}`" v-if="type === key">
|
|
19
|
-
<div
|
|
20
|
-
v-for="num in nums"
|
|
21
|
-
:key="num + key"
|
|
22
|
-
:style="{ backgroundColor: color }"
|
|
23
|
-
:class="`var-site-loading__${key}-item var-site-loading__${key}-item-${size}`"
|
|
24
|
-
></div>
|
|
25
|
-
</div>
|
|
26
|
-
</template>
|
|
27
|
-
</div>
|
|
28
|
-
</template>
|
|
29
|
-
|
|
30
|
-
<script lang="ts">
|
|
31
|
-
import { defineComponent } from 'vue'
|
|
32
|
-
import { props } from './props'
|
|
33
|
-
|
|
34
|
-
export default defineComponent({
|
|
35
|
-
name: 'VarSiteLoading',
|
|
36
|
-
props,
|
|
37
|
-
setup() {
|
|
38
|
-
const loadingTypeDict = {
|
|
39
|
-
wave: 5,
|
|
40
|
-
cube: 4,
|
|
41
|
-
rect: 8,
|
|
42
|
-
disappear: 3,
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
return {
|
|
46
|
-
loadingTypeDict,
|
|
47
|
-
}
|
|
48
|
-
},
|
|
49
|
-
})
|
|
50
|
-
</script>
|
|
51
|
-
|
|
52
|
-
<style lang="less">
|
|
53
|
-
@import '../styles/common';
|
|
54
|
-
@import './loading';
|
|
55
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="var-site--box var-site-loading">
|
|
3
|
+
<div class="var-site-loading__circle" v-if="type === 'circle'">
|
|
4
|
+
<span
|
|
5
|
+
class="var-site-loading__circle-block"
|
|
6
|
+
:style="{
|
|
7
|
+
width: radius * 2 + 'px',
|
|
8
|
+
height: radius * 2 + 'px',
|
|
9
|
+
}"
|
|
10
|
+
>
|
|
11
|
+
<svg viewBox="25 25 50 50">
|
|
12
|
+
<circle cx="50" cy="50" r="20" fill="none"></circle>
|
|
13
|
+
</svg>
|
|
14
|
+
</span>
|
|
15
|
+
</div>
|
|
16
|
+
|
|
17
|
+
<template v-for="(nums, key) in loadingTypeDict" :key="key">
|
|
18
|
+
<div :class="`var-site-loading__${key} var-site-loading__${key}-${size}`" v-if="type === key">
|
|
19
|
+
<div
|
|
20
|
+
v-for="num in nums"
|
|
21
|
+
:key="num + key"
|
|
22
|
+
:style="{ backgroundColor: color }"
|
|
23
|
+
:class="`var-site-loading__${key}-item var-site-loading__${key}-item-${size}`"
|
|
24
|
+
></div>
|
|
25
|
+
</div>
|
|
26
|
+
</template>
|
|
27
|
+
</div>
|
|
28
|
+
</template>
|
|
29
|
+
|
|
30
|
+
<script lang="ts">
|
|
31
|
+
import { defineComponent } from 'vue'
|
|
32
|
+
import { props } from './props'
|
|
33
|
+
|
|
34
|
+
export default defineComponent({
|
|
35
|
+
name: 'VarSiteLoading',
|
|
36
|
+
props,
|
|
37
|
+
setup() {
|
|
38
|
+
const loadingTypeDict = {
|
|
39
|
+
wave: 5,
|
|
40
|
+
cube: 4,
|
|
41
|
+
rect: 8,
|
|
42
|
+
disappear: 3,
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
return {
|
|
46
|
+
loadingTypeDict,
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
})
|
|
50
|
+
</script>
|
|
51
|
+
|
|
52
|
+
<style lang="less">
|
|
53
|
+
@import '../styles/common';
|
|
54
|
+
@import './loading';
|
|
55
|
+
</style>
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import type { App } from 'vue'
|
|
2
|
-
import Loading from './Loading.vue'
|
|
3
|
-
|
|
4
|
-
Loading.install = function (app: App) {
|
|
5
|
-
app.component(Loading.name, Loading)
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export const _LoadingComponent = Loading
|
|
9
|
-
|
|
10
|
-
export default Loading
|
|
1
|
+
import type { App } from 'vue'
|
|
2
|
+
import Loading from './Loading.vue'
|
|
3
|
+
|
|
4
|
+
Loading.install = function (app: App) {
|
|
5
|
+
app.component(Loading.name, Loading)
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
export const _LoadingComponent = Loading
|
|
9
|
+
|
|
10
|
+
export default Loading
|