renusify 2.5.2 → 3.0.1

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 (212) hide show
  1. package/components/app/index.vue +74 -22
  2. package/components/app/toast/index.vue +76 -71
  3. package/components/app/toast/toast.vue +62 -44
  4. package/components/avatar/index.vue +207 -84
  5. package/components/button/buttonConfirm.vue +53 -26
  6. package/components/button/buttonGroup.js +0 -2
  7. package/components/button/buttonGroup.vue +310 -62
  8. package/components/button/index.vue +584 -100
  9. package/components/calendar/index.js +0 -2
  10. package/components/calendar/index.vue +326 -262
  11. package/components/calendar/month.vue +64 -55
  12. package/components/calendar/year.vue +30 -25
  13. package/components/card/index.vue +139 -59
  14. package/components/codeEditor/highlightCss.vue +38 -39
  15. package/components/codeEditor/highlightHtml.vue +64 -64
  16. package/components/codeEditor/highlightJs.vue +37 -38
  17. package/components/codeEditor/index.vue +129 -79
  18. package/components/codeEditor/run.vue +225 -39
  19. package/components/codeEditor/useCodeFormatter.js +150 -0
  20. package/components/confirm/index.vue +139 -80
  21. package/components/container/col.vue +5 -4
  22. package/components/container/divider.vue +28 -19
  23. package/components/container/index.vue +34 -15
  24. package/components/container/row.vue +26 -9
  25. package/components/container/spacer.vue +2 -4
  26. package/components/container/style.scss +3 -0
  27. package/components/content/index.vue +49 -32
  28. package/components/cropper/index.vue +401 -244
  29. package/components/float/index.vue +542 -415
  30. package/components/form/addressInput/index.vue +184 -109
  31. package/components/form/camInput/index.vue +370 -244
  32. package/components/form/checkInput/index.vue +138 -71
  33. package/components/form/checkboxInput/index.vue +93 -49
  34. package/components/form/colorInput/Alpha.vue +81 -83
  35. package/components/form/colorInput/Hue.vue +91 -68
  36. package/components/form/colorInput/Preview.vue +43 -47
  37. package/components/form/colorInput/Saturation.vue +101 -86
  38. package/components/form/colorInput/index.vue +71 -39
  39. package/components/form/colorInput/picker.vue +111 -106
  40. package/components/form/colorInput/useColor.js +153 -0
  41. package/components/form/dateInput/index.vue +691 -356
  42. package/components/form/dateInput/month.vue +63 -54
  43. package/components/form/dateInput/year.vue +35 -25
  44. package/components/form/fileInput/index.js +0 -1
  45. package/components/form/fileInput/index.vue +263 -106
  46. package/components/form/fileInput/single.vue +332 -168
  47. package/components/form/groupInput/index.vue +199 -101
  48. package/components/form/index.vue +189 -83
  49. package/components/form/input/index.vue +416 -377
  50. package/components/form/jsonInput/JsonView.vue +54 -56
  51. package/components/form/jsonInput/index.vue +247 -165
  52. package/components/form/maskInput/index.vue +252 -132
  53. package/components/form/numberInput/index.js +0 -1
  54. package/components/form/numberInput/index.vue +226 -117
  55. package/components/form/passwordInput/index.js +2 -1
  56. package/components/form/passwordInput/index.vue +269 -102
  57. package/components/form/radioInput/index.vue +143 -72
  58. package/components/form/rangeInput/index.vue +280 -167
  59. package/components/form/ratingInput/index.vue +57 -57
  60. package/components/form/selectInput/index.js +1 -3
  61. package/components/form/selectInput/index.vue +584 -296
  62. package/components/form/switchInput/index.vue +73 -59
  63. package/components/form/telInput/index.js +0 -1
  64. package/components/form/telInput/index.vue +238 -135
  65. package/components/form/textArea/index.vue +72 -35
  66. package/components/form/textEditor/index.vue +739 -0
  67. package/components/form/{text-editor → textEditor}/style.scss +8 -16
  68. package/components/form/textInput/index.vue +54 -32
  69. package/components/form/timeInput/index.vue +82 -55
  70. package/components/form/timeInput/range.vue +115 -94
  71. package/components/form/timeInput/timepicker.vue +382 -449
  72. package/components/form/uniqueInput/index.vue +105 -48
  73. package/components/form/unitInput/index.vue +139 -84
  74. package/components/formCreator/index.js +0 -1
  75. package/components/formCreator/index.vue +314 -148
  76. package/components/highlight/index.vue +41 -25
  77. package/components/highlight/style.scss +2 -2
  78. package/components/highlight/{mixin.js → useHighlight.js} +181 -160
  79. package/components/icon/index.vue +79 -33
  80. package/components/img/index.vue +250 -147
  81. package/components/img/preview.vue +180 -198
  82. package/components/img/svgImg.vue +42 -39
  83. package/components/index.js +5 -20
  84. package/components/infinite/index.js +3 -3
  85. package/components/infinite/index.vue +290 -66
  86. package/components/map/index.vue +428 -261
  87. package/components/map/route.vue +794 -487
  88. package/components/map/select.vue +118 -58
  89. package/components/menu/index.vue +206 -94
  90. package/components/meta/meta.js +26 -3
  91. package/components/modal/index.vue +382 -156
  92. package/components/notify/index.vue +204 -86
  93. package/components/notify/notification.vue +38 -55
  94. package/components/progress/circle.vue +189 -70
  95. package/components/progress/line.vue +266 -46
  96. package/components/searchBox/index.js +1 -3
  97. package/components/searchBox/index.vue +194 -101
  98. package/components/skeleton/index.vue +45 -20
  99. package/components/slider/index.vue +319 -156
  100. package/components/swiper/index.vue +237 -108
  101. package/components/table/crud/footer.vue +77 -53
  102. package/components/table/crud/header.vue +71 -72
  103. package/components/table/crud/index.vue +629 -399
  104. package/components/table/index.vue +721 -278
  105. package/components/timeAgo/index.vue +145 -96
  106. package/components/tour/index.vue +338 -235
  107. package/components/tree/index.vue +235 -89
  108. package/components/tree/tree-element.vue +106 -106
  109. package/directive/animate/index.js +77 -0
  110. package/directive/clickOutSide/index.js +98 -0
  111. package/directive/drag/index.js +153 -0
  112. package/directive/index.js +11 -13
  113. package/directive/intersect/index.js +263 -0
  114. package/directive/mask/index.js +67 -0
  115. package/directive/parallax/index.js +78 -0
  116. package/directive/ripple/index.js +14 -0
  117. package/directive/scroll/index.js +272 -24
  118. package/directive/sortable/index.js +274 -0
  119. package/directive/title/index.js +75 -0
  120. package/directive/touch/index.js +268 -0
  121. package/index.js +11 -19
  122. package/package.json +5 -2
  123. package/plugins/validation/Validate.js +88 -79
  124. package/scripts/generate-docs.mjs +226 -0
  125. package/scripts/menu.mjs +240 -0
  126. package/scripts/parser.mjs +1086 -0
  127. package/style/_index.scss +7 -0
  128. package/style/app.scss +13 -65
  129. package/style/colors.scss +5 -22
  130. package/style/functions/index.scss +8 -0
  131. package/style/mixins/index.scss +17 -5
  132. package/style/variables/base.scss +155 -178
  133. package/style/variables/color.scss +0 -12
  134. package/style/variables/utilities.scss +0 -180
  135. package/tools/helper.js +0 -8
  136. package/tools/icons.js +7 -2
  137. package/tools/root.js +71 -0
  138. package/components/app/style.scss +0 -41
  139. package/components/app/toast/style.scss +0 -20
  140. package/components/avatar/style.scss +0 -32
  141. package/components/bar/bottomNav.js +0 -1
  142. package/components/bar/bottomNav.vue +0 -28
  143. package/components/bar/bottomNavigationCircle.js +0 -2
  144. package/components/bar/bottomNavigationCircle.vue +0 -99
  145. package/components/bar/scss/bottomNav.scss +0 -67
  146. package/components/bar/scss/toolbar.scss +0 -174
  147. package/components/bar/toolbar/index.js +0 -8
  148. package/components/bar/toolbar/index.vue +0 -35
  149. package/components/bar/toolbar/laptop.vue +0 -33
  150. package/components/bar/toolbar/menuChilds.vue +0 -41
  151. package/components/bar/toolbar/menuLaptop.vue +0 -41
  152. package/components/bar/toolbar/menuMob.vue +0 -39
  153. package/components/bar/toolbar/mixin.js +0 -43
  154. package/components/bar/toolbar/mobile.vue +0 -34
  155. package/components/breadcrumb/bredcrumbItem.vue +0 -39
  156. package/components/breadcrumb/index.js +0 -3
  157. package/components/breadcrumb/index.vue +0 -71
  158. package/components/breadcrumb/style.scss +0 -51
  159. package/components/button/style.scss +0 -411
  160. package/components/card/style.scss +0 -86
  161. package/components/chart/chart.js +0 -1
  162. package/components/chart/chart.vue +0 -69
  163. package/components/chart/worldMap.js +0 -2
  164. package/components/chart/worldMap.vue +0 -1112
  165. package/components/chat/MessageList.vue +0 -163
  166. package/components/chat/chatInput.vue +0 -150
  167. package/components/chat/chatMsg.vue +0 -276
  168. package/components/chat/index.js +0 -11
  169. package/components/chat/index.vue +0 -113
  170. package/components/chip/index.js +0 -3
  171. package/components/chip/index.vue +0 -77
  172. package/components/chip/style.scss +0 -199
  173. package/components/codeEditor/mixin.js +0 -145
  174. package/components/countdown/index.js +0 -1
  175. package/components/countdown/index.vue +0 -105
  176. package/components/form/colorInput/mixin.js +0 -132
  177. package/components/form/fileInput/file.js +0 -148
  178. package/components/form/telInput/assets/flags.png +0 -0
  179. package/components/form/telInput/assets/flags@2x.png +0 -0
  180. package/components/form/text-editor/index.vue +0 -705
  181. package/components/icon/style.scss +0 -17
  182. package/components/infinite/div.js +0 -6
  183. package/components/infinite/div.vue +0 -193
  184. package/components/infinite/page.js +0 -3
  185. package/components/infinite/page.vue +0 -105
  186. package/components/list/index.js +0 -3
  187. package/components/list/index.vue +0 -122
  188. package/components/list/style.scss +0 -66
  189. package/components/message/index.js +0 -4
  190. package/components/message/index.vue +0 -40
  191. package/components/modal/style.scss +0 -146
  192. package/components/nestable/NestableItem.vue +0 -307
  193. package/components/nestable/editable.js +0 -44
  194. package/components/nestable/index.js +0 -1
  195. package/components/nestable/index.vue +0 -226
  196. package/components/nestable/methods.js +0 -416
  197. package/components/progress/style.scss +0 -229
  198. package/components/table/style.scss +0 -338
  199. package/components/tabs/index.js +0 -3
  200. package/components/tabs/index.vue +0 -151
  201. package/components/timeline/index.js +0 -6
  202. package/components/timeline/index.vue +0 -76
  203. package/directive/resize/index.js +0 -30
  204. package/directive/skeleton/index.js +0 -27
  205. package/directive/skeleton/style.scss +0 -37
  206. package/plugins/request/Request.js +0 -68
  207. package/style/animation.scss +0 -94
  208. package/style/style.scss +0 -8
  209. package/tools/rootable.js +0 -75
  210. /package/components/form/{text-editor → textEditor}/index.js +0 -0
  211. /package/components/form/{text-editor → textEditor}/preview.js +0 -0
  212. /package/components/form/{text-editor → textEditor}/preview.vue +0 -0
@@ -1,77 +0,0 @@
1
- <template>
2
- <span :class="classes" @click.stop="select">
3
- <span class="chip-content">
4
- <r-icon v-if="modelValue" v-html="$r.icons.check" exact></r-icon>
5
- <slot></slot>
6
- <r-btn @click.stop="closeChip" class="chip-close mx-1" icon size="x-small" text v-if="close">
7
- <r-icon v-html="$r.icons.close" width="20" height="20"></r-icon>
8
- </r-btn>
9
- </span>
10
-
11
- </span>
12
- </template>
13
-
14
- <script>
15
- import './style.scss'
16
-
17
- export default {
18
- name: 'r-chip',
19
- props: {
20
- modelValue: {
21
- type: Boolean,
22
- default: false
23
- },
24
- size: {
25
- type: String,
26
- default: 'default',
27
- validator: function (value) {
28
- return ['x-small', 'small', 'default', 'large', 'x-large'].indexOf(value) !== -1
29
- }
30
- },
31
- selectable: Boolean,
32
- close: Boolean,
33
- disabled: Boolean,
34
- label: Boolean,
35
- outlined: Boolean,
36
- text: Boolean
37
- },
38
- emits:['update:modelValue','close'],
39
- computed: {
40
- classes () {
41
- let c = this.$r.prefix + 'chip chip-size-' + this.size
42
- if (this.selectable) {
43
- c += ' chip-selectable'
44
- }
45
- if (this.modelValue) {
46
- c += ' chip-active ps-0'
47
- }
48
-
49
- if (this.close) {
50
- c += ' pe-0'
51
- }
52
- if (this.disabled) {
53
- c += ' chip-disabled'
54
- }
55
- if (this.label) {
56
- c += ' chip-label'
57
- }
58
- if (this.outlined) {
59
- c += ' chip-outlined'
60
- }
61
- if (this.text) {
62
- c += ' chip-text'
63
- }
64
- return c
65
- }
66
- },
67
- methods: {
68
- closeChip () {
69
- this.$emit('close', true)
70
- this.$emit('update:modelValue', false)
71
- },
72
- select () {
73
- this.$emit('update:modelValue', !this.modelValue)
74
- }
75
- }
76
- }
77
- </script>
@@ -1,199 +0,0 @@
1
- @use "sass:math";
2
- @use "sass:map";
3
- @use "../../style/variables/base";
4
- @use "../../style/mixins";
5
- @use "../../style/functions";
6
-
7
-
8
- $chip-avatar-size: 24px !default;
9
- $chip-close-size: 18px !default;
10
- $chip-icon-margin-after: 8px !default;
11
- $chip-icon-margin-before: -6px !default;
12
- $chip-icon-right-margin-after: -4px !default;
13
- $chip-icon-right-margin-before: 8px !default;
14
- $chip-icon-size: 24px !default;
15
- $chip-label-border-radius: map.get(base.$borders, 'sm') !default;
16
- $chip-link-focus-opacity: 0.32 !default;
17
- $chip-pill-avatar-margin-after: 8px !default;
18
- $chip-pill-avatar-margin-before: -12px !default;
19
- $chip-pill-avatar-size: 32px !default;
20
- $chip-pill-filter-margin: 0 16px 0 0 !default;
21
- $chip-transition-duration: 0.28s !default;
22
- $chip-transition-fn: map.get(base.$transition, 'fast-out-slow-in') !default;
23
- $icon-outlined-border-width: thin !default;
24
- $icon-sizes: (
25
- 'x-small': (
26
- 'font-size': 10,
27
- 'height': 16
28
- ),
29
- 'small': (
30
- 'font-size': 12,
31
- 'height': 24
32
- ),
33
- 'default': (
34
- 'font-size': 14,
35
- 'height': 32
36
- ),
37
- 'large': (
38
- 'font-size': 16,
39
- 'height': 48
40
- ),
41
- 'x-large': (
42
- 'font-size': 18,
43
- 'height': 54
44
- )
45
- ) !default;
46
-
47
-
48
- .#{base.$prefix}chip {
49
- align-items: center;
50
- cursor: default;
51
- white-space: nowrap;
52
- display: inline-flex;
53
- line-height: 20px;
54
- outline: none;
55
- padding: 0 12px;
56
- position: relative;
57
- text-decoration: none;
58
- transition-duration: $chip-transition-duration;
59
- transition-timing-function: $chip-transition-fn;
60
- vertical-align: middle;
61
- border-color: var(--color-border);
62
-
63
- &:not(.chip-active) {
64
- background: var(--color-sheet-container-low);
65
- color: var(--color-on-sheet);
66
- }
67
-
68
- @include mixins.states();
69
-
70
- &.chip-disabled {
71
- @include mixins.disable-states();
72
-
73
- &:not(.chip-text):not(.chip-outlined) {
74
- background-color: var(--color-#{functions.map-metro-get(base.$states, 'disabled','state','color')}) !important;
75
- }
76
-
77
- &.btn-text, &.btn-outlined {
78
- &::before {
79
- opacity: 0 !important;
80
- }
81
- }
82
- }
83
-
84
- &:before {
85
- background-color: currentColor;
86
- bottom: 0;
87
- border-radius: inherit;
88
- content: '';
89
- left: 0;
90
- opacity: 0;
91
- position: absolute;
92
- right: 0;
93
- top: 0;
94
- }
95
-
96
- &.chip-selectable {
97
- cursor: pointer;
98
- }
99
-
100
- .#{base.$prefix}icon {
101
- font-size: $chip-icon-size;
102
- transition: none;
103
- }
104
-
105
- .chip-close {
106
- .#{base.$prefix}icon {
107
- font-size: $chip-close-size;
108
- max-height: $chip-close-size;
109
- max-width: $chip-close-size;
110
- user-select: none;
111
-
112
- &:hover,
113
- &:focus,
114
- &:active {
115
- opacity: .72
116
- }
117
- }
118
- }
119
-
120
- .chip-content {
121
- transition: base.$secondary-transition;
122
- transition-duration: 0.05s;
123
- align-items: center;
124
- display: inline-flex;
125
- height: 100%
126
- }
127
-
128
- &.chip-active {
129
- background-color: var(--color-one);
130
- color: var(--color-on-one);
131
-
132
- .chip-close {
133
- color: var(--color-on-one);
134
- }
135
-
136
- .#{base.$prefix}icon {
137
- color: inherit;
138
- padding: 0 3px;
139
- }
140
- }
141
-
142
- &.chip-label {
143
- border-radius: $chip-label-border-radius !important
144
- }
145
-
146
- &.chip-outlined {
147
- border-width: $icon-outlined-border-width;
148
- border-style: solid;
149
- background-color: transparent !important;
150
-
151
- &:not(.chip-active):before {
152
- opacity: 0
153
- }
154
-
155
- &.chip-active:before {
156
- opacity: 0.08
157
- }
158
-
159
- .#{base.$prefix}icon {
160
- color: inherit
161
- }
162
-
163
- }
164
-
165
- &.chip-text {
166
- border: none;
167
- background-color: transparent !important;
168
-
169
- &:not(.chip-active):before {
170
- opacity: 0
171
- }
172
-
173
- &.chip-active:before {
174
- opacity: 0.08
175
- }
176
-
177
- .#{base.$prefix}icon {
178
- color: inherit
179
- }
180
-
181
- }
182
-
183
- &.chip-selected {
184
- background: transparent;
185
-
186
- &:after {
187
- opacity: .28
188
- }
189
- }
190
-
191
- @each $name, $size in $icon-sizes {
192
- &.chip-size-#{$name} {
193
- border-radius: #{math.div(map.get($size, 'height') , 2)}px;
194
- font-size: #{map.get($size, 'font-size')}px;
195
- min-height: #{map.get($size, 'height')}px;
196
- }
197
- }
198
- }
199
-
@@ -1,145 +0,0 @@
1
- export default {
2
- methods: {
3
- pretty_html(text) {
4
- if (!text) {
5
- return ''
6
- }
7
- text = text.trim()
8
- text = text.replace(/ +(?= )/g, '');
9
- text = text.replace(/[\r\n\t]/g, '');
10
- let r = ''
11
- text = text.split('<')
12
- let numopen = 0
13
- text.forEach((line) => {
14
- if (line) {
15
- const end = line.startsWith('/')
16
- if (end) {
17
- numopen -= 1
18
- }
19
- r += '\t'.repeat(numopen) + '<' + line + '\n'
20
- if (!end) {
21
- numopen += 1
22
- }
23
- }
24
- })
25
- r = r.replace(/<([^/].*)>+[\r\n\t]+<\//g, '<$1></');
26
- return r
27
- },
28
- pretty_js(text) {
29
- if (!text) {
30
- return ''
31
- }
32
- text = text.trim()
33
- text = text.replace(/ +(?= )/g, '');
34
- text = text.replace(/[\r\n\t]/g, '');
35
- text = text.replace(/([,;{(\[])+[\s]/g, '$1');
36
- let r = ''
37
- text = text.split('')
38
- let numopen = 0
39
- const textLength = text.length
40
- let inBracket = 0
41
- let inprantez = 0
42
- for (let i = 0; i < textLength; i++) {
43
- const c = text[i]
44
- const last = i > 0 ? text[i - 1] : ''
45
- const next = i < textLength - 1 ? text[i + 1] : ''
46
-
47
- if (c === '(') {
48
- inprantez += 1
49
- }
50
- if (c === ')') {
51
- inprantez -= 1
52
- }
53
- if (c === '[') {
54
- inBracket += 1
55
- }
56
- if (c === ']') {
57
- inBracket -= 1
58
- }
59
- if (c === '}') {
60
- numopen -= 1
61
- }
62
- if (numopen < 0) {
63
- numopen = 0
64
- }
65
- r += c
66
- if (c === '}' && next !== ',' && next !== ';' && next !== '}' && next !== ')') {
67
- r += '\n' + '\t'.repeat(numopen)
68
- }
69
- if (c === ',' && (!inprantez && !inBracket) && next !== '}') {
70
- r += '\n' + '\t'.repeat(numopen)
71
- }
72
- if (c === ';' && next !== '}') {
73
- r += '\n' + '\t'.repeat(numopen)
74
- }
75
- if (next === '}' && c !== '{' && numopen > 0) {
76
-
77
- r += '\n' + '\t'.repeat(numopen - 1)
78
- }
79
-
80
- if (c === '{') {
81
- numopen += 1
82
- if (next !== '}') {
83
- r += '\n' + '\t'.repeat(numopen)
84
- }
85
- }
86
- }
87
- r = r.replace(/\t /g, '\t');
88
- r = r.replace(/^\s*\n/gm, '');
89
- return r
90
- },
91
- setTab(event) {
92
- if (event.key === "'" || event.key === '"' || event.key === '`') {
93
- const end = event.target.selectionEnd;
94
- event.preventDefault()
95
- document.execCommand('insertText', false, event.key.repeat(2));
96
- event.target.selectionEnd = end + 1;
97
- return false;
98
- }
99
- if (event.key === "{") {
100
- const end = event.target.selectionEnd;
101
- event.preventDefault()
102
- document.execCommand('insertText', false, '{}');
103
- event.target.selectionEnd = end + 1;
104
- return false;
105
- }
106
- if (event.key === "(") {
107
- const end = event.target.selectionEnd;
108
- event.preventDefault()
109
- document.execCommand('insertText', false, '()');
110
- event.target.selectionEnd = end + 1;
111
- return false;
112
- }
113
- if (event.key === "[") {
114
- const end = event.target.selectionEnd;
115
- event.preventDefault()
116
- document.execCommand('insertText', false, '[]');
117
- event.target.selectionEnd = end + 1;
118
- return false;
119
- }
120
- if (event.keyCode === 9) {
121
- event.preventDefault()
122
- document.execCommand('insertText', false, '\t');
123
- return false;
124
- }
125
- if (event.keyCode === 13) {
126
- event.preventDefault()
127
- let n = event.target.value.substr(0, event.target.selectionStart).split('\n')
128
- n = n[n.length - 1].split('\t')
129
-
130
- let w = ''
131
- for (let i = 0; i < n.length; i++) {
132
- if (n[i] === '') {
133
- w += '\t'
134
- } else {
135
- break
136
- }
137
- }
138
-
139
- document.execCommand('insertText', false, '\n' + w);
140
- return false;
141
- }
142
- return true
143
- }
144
- }
145
- }
@@ -1 +0,0 @@
1
- export * as rCountDown from './index.vue'
@@ -1,105 +0,0 @@
1
- <template>
2
- <div>
3
- <slot :days="days" :hours="hours" :minutes="minutes" :seconds="seconds">
4
- <span v-if="days>0">{{ days }}{{ $t('days', 'renusify') }}</span>
5
- {{ hours }}:{{ minutes }}:{{ seconds }}
6
- </slot>
7
- </div>
8
- </template>
9
-
10
- <script>
11
- const MILLISECONDS_SECOND = 1000
12
- const MILLISECONDS_MINUTE = 60 * MILLISECONDS_SECOND
13
- const MILLISECONDS_HOUR = 60 * MILLISECONDS_MINUTE
14
- const MILLISECONDS_DAY = 24 * MILLISECONDS_HOUR
15
- export default {
16
- name: 'countdown',
17
- props: {
18
- autoStart: {
19
- type: Boolean,
20
- default: true
21
- },
22
- interval: {
23
- type: Number,
24
- default: 1000,
25
- validator: value => value >= 0
26
- },
27
- time: {
28
- type: Number,
29
- default: 0,
30
- validator: value => value >= 0
31
- }
32
- },
33
- emits:['start','end'],
34
- data() {
35
- return {
36
- time_id: null,
37
- counting: false,
38
- totalMilliseconds: 0
39
- }
40
- },
41
-
42
- computed: {
43
- days() {
44
- return Math.floor(this.totalMilliseconds / MILLISECONDS_DAY)
45
- },
46
-
47
- hours() {
48
- return Math.floor((this.totalMilliseconds % MILLISECONDS_DAY) / MILLISECONDS_HOUR)
49
- },
50
-
51
- minutes() {
52
- return Math.floor((this.totalMilliseconds % MILLISECONDS_HOUR) / MILLISECONDS_MINUTE)
53
- },
54
-
55
- seconds() {
56
- return Math.floor((this.totalMilliseconds % MILLISECONDS_MINUTE) / MILLISECONDS_SECOND)
57
- },
58
-
59
- milliseconds() {
60
- return Math.floor(this.totalMilliseconds % MILLISECONDS_SECOND)
61
- }
62
- },
63
-
64
- watch: {
65
- $props: {
66
- deep: true,
67
- immediate: true,
68
- handler() {
69
- this.totalMilliseconds = this.time
70
-
71
- if (this.autoStart) {
72
- this.start()
73
- }
74
- }
75
- }
76
- },
77
-
78
- methods: {
79
- start() {
80
- if (this.counting) {
81
- return
82
- }
83
-
84
- this.counting = true
85
-
86
- this.$emit('start')
87
- this.time_id = setInterval(() => {
88
- this.go()
89
- }, this.interval)
90
- },
91
- go() {
92
- if (this.totalMilliseconds <= 0) {
93
- clearInterval(this.time_id)
94
- this.$emit('end')
95
- return
96
- }
97
- this.totalMilliseconds = Math.max(this.totalMilliseconds - this.interval, 0)
98
-
99
- }
100
- },
101
- beforeUnmount() {
102
- clearInterval(this.time_id)
103
- }
104
- }
105
- </script>
@@ -1,132 +0,0 @@
1
- export const color = {
2
- methods: {
3
- setColorValue(color) {
4
- let rgba = {r: 0, g: 0, b: 0, a: 1}
5
- const rgbRegex = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*([01]?\.\d+)?\s*)?\)$/;
6
- const hexRegex = /^#([a-f0-9]{6}|[a-f0-9]{8})$/i;
7
- if (hexRegex.test(color)) {
8
- rgba = this.hex2rgba(color)
9
- } else if (rgbRegex.test(color)) {
10
- rgba = this.rgb2rgba(color)
11
- } else if (Object.prototype.toString.call(color) === '[object Object]') {
12
- rgba = color
13
- } else {
14
- return
15
- }
16
- this.r = rgba.r
17
- this.g = rgba.g
18
- this.b = rgba.b
19
- if (rgba.a >= 0 && rgba.a <= 1) {
20
- this.a = rgba.a
21
- } else {
22
- this.a = 1
23
- }
24
-
25
- this.set_hsv(rgba)
26
- },
27
- createAlphaSquare(size) {
28
- const canvas = document.createElement('canvas')
29
- const ctx = canvas.getContext('2d')
30
- const doubleSize = size * 2
31
- canvas.width = doubleSize
32
- canvas.height = doubleSize
33
-
34
- ctx.fillStyle = '#ffffff'
35
- ctx.fillRect(0, 0, doubleSize, doubleSize)
36
- ctx.fillStyle = '#ccd5db'
37
- ctx.fillRect(0, 0, size, size)
38
- ctx.fillRect(size, size, size, size)
39
-
40
- return canvas
41
- },
42
- createLinearGradient(
43
- direction,
44
- ctx,
45
- width,
46
- height,
47
- color1,
48
- color2
49
- ) {
50
- // l horizontal p vertical
51
- const isL = direction === 'l'
52
- const gradient = ctx.createLinearGradient(
53
- 0,
54
- 0,
55
- isL ? width : 0,
56
- isL ? 0 : height
57
- )
58
- gradient.addColorStop(0.01, color1)
59
- gradient.addColorStop(0.99, color2)
60
- ctx.fillStyle = gradient
61
- ctx.fillRect(0, 0, width, height)
62
- },
63
- rgb2hex({r, g, b, a}, toUpper = false) {
64
- const change = (val) => {
65
- const hex = Math.round(val).toString(16);
66
- return hex.length === 1 ? '0' + hex : hex;
67
- };
68
-
69
- let color = `#${change(r)}${change(g)}${change(b)}`;
70
-
71
- if (a !== undefined && a !== 1) {
72
- const alpha = Math.round(a * 255);
73
- color += change(alpha);
74
- }
75
-
76
- return toUpper ? color.toUpperCase() : color;
77
- },
78
- hex2rgba(hex) {
79
- hex = hex.slice(1)
80
- const change = (val) => parseInt(val, 16) || 0;
81
- const r = change(hex.slice(0, 2));
82
- const g = change(hex.slice(2, 4));
83
- const b = change(hex.slice(4, 6));
84
-
85
- let a = 1;
86
- if (hex.length === 8) {
87
- const alphaHex = hex.slice(6, 8);
88
- a = parseFloat((parseInt(alphaHex, 16) / 255).toFixed(2));
89
- }
90
-
91
- return {r, g, b, a};
92
- },
93
- rgb2rgba(rgba) {
94
- rgba = (/rgba?\((.*?)\)/.exec(rgba) || ['', '0,0,0,1'])[1].split(',')
95
- return {
96
- r: Number(rgba[0]) || 0,
97
- g: Number(rgba[1]) || 0,
98
- b: Number(rgba[2]) || 0,
99
- a: Number(rgba[3] ? rgba[3] : 1), // Avoid the case of 0
100
- }
101
- },
102
- set_hsv({r, g, b}) {
103
- r = r / 255
104
- g = g / 255
105
- b = b / 255
106
- const max = Math.max(r, g, b)
107
- const min = Math.min(r, g, b)
108
- const delta = max - min
109
- let h = 0
110
- if (max === min) {
111
- h = 0
112
- } else if (max === r) {
113
- if (g >= b) {
114
- h = (60 * (g - b)) / delta
115
- } else {
116
- h = (60 * (g - b)) / delta + 360
117
- }
118
- } else if (max === g) {
119
- h = (60 * (b - r)) / delta + 120
120
- } else if (max === b) {
121
- h = (60 * (r - g)) / delta + 240
122
- }
123
- h = Math.floor(h)
124
- let s = parseFloat((max === 0 ? 0 : 1 - min / max).toFixed(2))
125
- let v = parseFloat(max.toFixed(2))
126
- this.h = h
127
- this.s = s
128
- this.v = v
129
- }
130
- },
131
-
132
- }