@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.
Files changed (210) hide show
  1. package/LICENCE +21 -21
  2. package/README.en-US.md +401 -401
  3. package/README.md +396 -396
  4. package/generators/base/.prettierignore +9 -9
  5. package/generators/base/.prettierrc +5 -5
  6. package/generators/base/README.md +82 -82
  7. package/generators/base/babel.config.js +10 -10
  8. package/generators/base/public/highlight.css +1 -1
  9. package/generators/base/public/logo.svg +1 -1
  10. package/generators/base/shims/shims-md.d.ts +4 -4
  11. package/generators/base/shims/shims-vue.d.ts +6 -6
  12. package/generators/base/tsconfig.json +13 -13
  13. package/generators/config/default/base/docs/home.zh-CN.md +10 -10
  14. package/generators/config/default/base/package.json +6 -0
  15. package/generators/config/default/base/types/basicComponent.d.ts +7 -7
  16. package/generators/config/default/base/types/button.d.ts +12 -12
  17. package/generators/config/default/base/types/index.d.ts +6 -6
  18. package/generators/config/default/base/varlet.config.js +110 -110
  19. package/generators/config/default/sfc/src/button/Button.vue +30 -30
  20. package/generators/config/default/sfc/src/button/__tests__/index.spec.js +7 -7
  21. package/generators/config/default/sfc/src/button/button.less +14 -14
  22. package/generators/config/default/sfc/src/button/docs/zh-CN.md +47 -47
  23. package/generators/config/default/sfc/src/button/example/BasicUse.vue +7 -7
  24. package/generators/config/default/sfc/src/button/example/ModifyColor.vue +7 -7
  25. package/generators/config/default/sfc/src/button/example/index.vue +13 -13
  26. package/generators/config/default/sfc/src/button/index.ts +10 -10
  27. package/generators/config/default/tsx/src/button/Button.tsx +31 -31
  28. package/generators/config/default/tsx/src/button/__tests__/index.spec.js +7 -7
  29. package/generators/config/default/tsx/src/button/button.less +14 -14
  30. package/generators/config/default/tsx/src/button/docs/zh-CN.md +47 -47
  31. package/generators/config/default/tsx/src/button/example/BasicUse.vue +7 -7
  32. package/generators/config/default/tsx/src/button/example/ModifyColor.vue +7 -7
  33. package/generators/config/default/tsx/src/button/example/index.vue +13 -13
  34. package/generators/config/default/tsx/src/button/index.ts +10 -10
  35. package/generators/config/i18n/base/docs/home.en-US.md +11 -11
  36. package/generators/config/i18n/base/docs/home.zh-CN.md +10 -10
  37. package/generators/config/i18n/base/package.json +6 -0
  38. package/generators/config/i18n/base/types/basicComponent.d.ts +7 -7
  39. package/generators/config/i18n/base/types/button.d.ts +12 -12
  40. package/generators/config/i18n/base/types/index.d.ts +7 -7
  41. package/generators/config/i18n/base/types/locale.d.ts +24 -24
  42. package/generators/config/i18n/base/varlet.config.js +122 -122
  43. package/generators/config/i18n/sfc/src/button/Button.vue +36 -36
  44. package/generators/config/i18n/sfc/src/button/__tests__/index.spec.js +7 -7
  45. package/generators/config/i18n/sfc/src/button/button.less +14 -14
  46. package/generators/config/i18n/sfc/src/button/docs/en-US.md +34 -34
  47. package/generators/config/i18n/sfc/src/button/docs/zh-CN.md +34 -34
  48. package/generators/config/i18n/sfc/src/button/example/BasicUse.vue +11 -11
  49. package/generators/config/i18n/sfc/src/button/example/ModifyColor.vue +11 -11
  50. package/generators/config/i18n/sfc/src/button/example/index.vue +13 -13
  51. package/generators/config/i18n/sfc/src/button/example/locale/en-US.ts +5 -5
  52. package/generators/config/i18n/sfc/src/button/example/locale/index.ts +23 -23
  53. package/generators/config/i18n/sfc/src/button/example/locale/zh-CN.ts +5 -5
  54. package/generators/config/i18n/sfc/src/button/index.ts +10 -10
  55. package/generators/config/i18n/sfc/src/locale/__tests__/index.spec.js +51 -51
  56. package/generators/config/i18n/sfc/src/locale/docs/en-US.md +26 -26
  57. package/generators/config/i18n/sfc/src/locale/docs/zh-CN.md +25 -25
  58. package/generators/config/i18n/sfc/src/locale/en-US.d.ts +5 -5
  59. package/generators/config/i18n/sfc/src/locale/en-US.ts +7 -7
  60. package/generators/config/i18n/sfc/src/locale/index.ts +67 -67
  61. package/generators/config/i18n/sfc/src/locale/zh-CN.d.ts +5 -5
  62. package/generators/config/i18n/sfc/src/locale/zh-CN.ts +7 -7
  63. package/generators/config/i18n/tsx/src/button/Button.tsx +35 -35
  64. package/generators/config/i18n/tsx/src/button/__tests__/index.spec.js +7 -7
  65. package/generators/config/i18n/tsx/src/button/button.less +14 -14
  66. package/generators/config/i18n/tsx/src/button/docs/en-US.md +34 -34
  67. package/generators/config/i18n/tsx/src/button/docs/zh-CN.md +34 -34
  68. package/generators/config/i18n/tsx/src/button/example/BasicUse.vue +11 -11
  69. package/generators/config/i18n/tsx/src/button/example/ModifyColor.vue +11 -11
  70. package/generators/config/i18n/tsx/src/button/example/index.vue +13 -13
  71. package/generators/config/i18n/tsx/src/button/example/locale/en-US.ts +5 -5
  72. package/generators/config/i18n/tsx/src/button/example/locale/index.ts +23 -23
  73. package/generators/config/i18n/tsx/src/button/example/locale/zh-CN.ts +5 -5
  74. package/generators/config/i18n/tsx/src/button/index.ts +10 -10
  75. package/generators/config/i18n/tsx/src/locale/__tests__/index.spec.js +51 -51
  76. package/generators/config/i18n/tsx/src/locale/docs/en-US.md +26 -26
  77. package/generators/config/i18n/tsx/src/locale/docs/zh-CN.md +25 -25
  78. package/generators/config/i18n/tsx/src/locale/en-US.d.ts +5 -5
  79. package/generators/config/i18n/tsx/src/locale/en-US.ts +7 -7
  80. package/generators/config/i18n/tsx/src/locale/index.ts +67 -67
  81. package/generators/config/i18n/tsx/src/locale/zh-CN.d.ts +5 -5
  82. package/generators/config/i18n/tsx/src/locale/zh-CN.ts +7 -7
  83. package/lib/commands/build.d.ts +1 -1
  84. package/lib/commands/build.js +67 -67
  85. package/lib/commands/changelog.d.ts +6 -6
  86. package/lib/commands/changelog.js +27 -27
  87. package/lib/commands/commitLint.d.ts +1 -1
  88. package/lib/commands/commitLint.js +21 -21
  89. package/lib/commands/compile.d.ts +5 -5
  90. package/lib/commands/compile.js +119 -119
  91. package/lib/commands/create.d.ts +3 -3
  92. package/lib/commands/create.js +132 -132
  93. package/lib/commands/dev.d.ts +3 -3
  94. package/lib/commands/dev.js +123 -123
  95. package/lib/commands/gen.d.ts +1 -1
  96. package/lib/commands/gen.js +112 -112
  97. package/lib/commands/jest.d.ts +8 -8
  98. package/lib/commands/jest.js +81 -81
  99. package/lib/commands/lint.d.ts +1 -1
  100. package/lib/commands/lint.js +123 -123
  101. package/lib/commands/preview.d.ts +1 -1
  102. package/lib/commands/preview.js +74 -74
  103. package/lib/commands/release.d.ts +3 -3
  104. package/lib/commands/release.js +270 -267
  105. package/lib/compiler/compileModule.d.ts +5 -5
  106. package/lib/compiler/compileModule.js +186 -186
  107. package/lib/compiler/compileSFC.d.ts +2 -2
  108. package/lib/compiler/compileSFC.js +132 -132
  109. package/lib/compiler/compileScript.d.ts +17 -17
  110. package/lib/compiler/compileScript.js +202 -202
  111. package/lib/compiler/compileSiteEntry.d.ts +13 -13
  112. package/lib/compiler/compileSiteEntry.js +237 -237
  113. package/lib/compiler/compileStyle.d.ts +11 -11
  114. package/lib/compiler/compileStyle.js +101 -101
  115. package/lib/compiler/compileTemplateHighlight.d.ts +10 -10
  116. package/lib/compiler/compileTemplateHighlight.js +193 -193
  117. package/lib/compiler/compileTypes.d.ts +2 -2
  118. package/lib/compiler/compileTypes.js +88 -88
  119. package/lib/config/babel.config.d.ts +2 -2
  120. package/lib/config/babel.config.js +31 -31
  121. package/lib/config/babel.sfc.transform.d.ts +1 -1
  122. package/lib/config/babel.sfc.transform.js +18 -18
  123. package/lib/config/jest.config.d.ts +1 -1
  124. package/lib/config/jest.config.js +36 -36
  125. package/lib/config/jest.media.mock.js +2 -2
  126. package/lib/config/jest.style.mock.js +2 -2
  127. package/lib/config/varlet.config.d.ts +1 -1
  128. package/lib/config/varlet.config.js +24 -24
  129. package/lib/config/vite.config.d.ts +5 -5
  130. package/lib/config/vite.config.js +162 -162
  131. package/lib/index.d.ts +2 -2
  132. package/lib/index.js +83 -83
  133. package/lib/shared/constant.d.ts +43 -43
  134. package/lib/shared/constant.js +50 -50
  135. package/lib/shared/fsUtils.d.ts +12 -12
  136. package/lib/shared/fsUtils.js +108 -108
  137. package/lib/shared/logger.d.ts +7 -7
  138. package/lib/shared/logger.js +20 -20
  139. package/package.json +7 -7
  140. package/preset.js +3 -3
  141. package/site/components/button/Button.vue +84 -84
  142. package/site/components/button/button.less +183 -183
  143. package/site/components/button/index.ts +10 -10
  144. package/site/components/button/props.ts +70 -70
  145. package/site/components/cell/Cell.vue +42 -42
  146. package/site/components/cell/cell.less +74 -74
  147. package/site/components/cell/index.ts +10 -10
  148. package/site/components/cell/props.ts +27 -27
  149. package/site/components/code-example/CodeExample.vue +143 -143
  150. package/site/components/code-example/codeExample.less +41 -41
  151. package/site/components/code-example/index.ts +10 -10
  152. package/site/components/context/index.ts +17 -17
  153. package/site/components/context/lock.ts +103 -103
  154. package/site/components/context/zIndex.ts +20 -20
  155. package/site/components/icon/Icon.vue +68 -68
  156. package/site/components/icon/icon.less +26 -26
  157. package/site/components/icon/index.ts +10 -10
  158. package/site/components/icon/props.ts +24 -24
  159. package/site/components/loading/Loading.vue +55 -55
  160. package/site/components/loading/index.ts +10 -10
  161. package/site/components/loading/loading.less +420 -420
  162. package/site/components/loading/props.ts +37 -37
  163. package/site/components/progress/Progress.vue +108 -108
  164. package/site/components/progress/index.ts +10 -10
  165. package/site/components/progress/progress.less +98 -98
  166. package/site/components/progress/props.ts +55 -55
  167. package/site/components/ripple/index.ts +167 -167
  168. package/site/components/ripple/ripple.less +17 -17
  169. package/site/components/snackbar/Snackbar.vue +38 -38
  170. package/site/components/snackbar/core.vue +117 -117
  171. package/site/components/snackbar/index.tsx +270 -270
  172. package/site/components/snackbar/props.ts +94 -94
  173. package/site/components/snackbar/snackbar.less +135 -135
  174. package/site/components/styles/common.less +64 -64
  175. package/site/components/styles/elevation.less +126 -126
  176. package/site/components/styles/var.less +27 -27
  177. package/site/components/utils/components.ts +69 -69
  178. package/site/components/utils/elements.ts +85 -85
  179. package/site/index.html +49 -49
  180. package/site/mobile/App.vue +291 -291
  181. package/site/mobile/components/AppHome.vue +134 -134
  182. package/site/mobile/components/AppType.vue +22 -22
  183. package/site/mobile/components/app-bar/AppBar.vue +69 -69
  184. package/site/mobile/components/app-bar/appBar.less +56 -56
  185. package/site/mobile/components/app-bar/index.ts +10 -10
  186. package/site/mobile/components/app-bar/props.ts +25 -25
  187. package/site/mobile/components/styles/common.less +64 -64
  188. package/site/mobile/components/styles/elevation.less +126 -126
  189. package/site/mobile/components/styles/var.less +27 -27
  190. package/site/mobile/main.ts +74 -74
  191. package/site/mobile.html +41 -41
  192. package/site/module.d.ts +5 -5
  193. package/site/pc/App.vue +43 -43
  194. package/site/pc/Layout.vue +397 -397
  195. package/site/pc/components/AnimationBox.vue +45 -45
  196. package/site/pc/components/AppHeader.vue +355 -355
  197. package/site/pc/components/AppMobile.vue +54 -54
  198. package/site/pc/components/AppSidebar.vue +134 -134
  199. package/site/pc/components/LogoAnimation.vue +119 -119
  200. package/site/pc/floating.ts +9 -9
  201. package/site/pc/main.ts +94 -94
  202. package/site/pc/pages/index/index.less +231 -194
  203. package/site/pc/pages/index/index.vue +145 -128
  204. package/site/pc/pages/index/locale/en-US.ts +5 -3
  205. package/site/pc/pages/index/locale/zh-CN.ts +5 -3
  206. package/site/tsconfig.json +11 -11
  207. package/site/useProgress.ts +75 -75
  208. package/site/utils.ts +153 -153
  209. package/tsconfig.json +14 -14
  210. 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