@mixd-id/web-scaffold 0.1.230406320 → 0.1.230406322

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/components/Button.vue +177 -160
  3. package/src/components/ContextMenu.vue +8 -1
  4. package/src/components/Toast.vue +3 -1
  5. package/src/utils/helpers.js +43 -7
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mixd-id/web-scaffold",
3
3
  "private": false,
4
- "version": "0.1.230406320",
4
+ "version": "0.1.230406322",
5
5
  "scripts": {
6
6
  "dev": "vite serve",
7
7
  "build": "vite build",
package/src/components/Button.vue CHANGED
@@ -1,14 +1,14 @@
1
1
  <template>
2
- <button :class="compClass" :disabled="isDisabled" @click="onClick" :style="computedStyle"
3
- v-tooltip="disabledText">
2
+ <button :class="compClass" @click="onClick" :style="computedStyle"
3
+ v-tooltip="disabledText">
4
4
  <slot>{{ text }}</slot>
5
- <div v-if="isLoading" :class="$style.loadingPane">
6
- <svg :class="$style.spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
7
- <circle :class="$style.svgBg" cx="12" cy="12" r="10" stroke-width="4"></circle>
8
- <path :class="$style.svgHg" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
9
- </svg>
10
- </div>
11
- </button>
5
+ <div v-if="isLoading" :class="$style.loadingPane">
6
+ <svg :class="$style.spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
7
+ <circle :class="$style.svgBg" cx="12" cy="12" r="10" stroke-width="4"></circle>
8
+ <path :class="$style.svgHg" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
9
+ </svg>
10
+ </div>
11
+ </button>
12
12
  </template>
13
13
 
14
14
  <script>
@@ -17,121 +17,133 @@ import {componentMixin} from "../mixin/component";
17
17
 
18
18
  export default{
19
19
 
20
- mixins: [ componentMixin ],
20
+ emits: [ 'click', 'disabled-click' ],
21
21
 
22
- props: {
22
+ mixins: [ componentMixin ],
23
23
 
24
- variant: {
25
- type: [ String, Number ],
26
- default: "primary" // primary|secondary|outline, default:primary
27
- },
24
+ props: {
28
25
 
29
- state: {
26
+ variant: {
27
+ type: [ String, Number ],
28
+ default: "primary" // primary|secondary|outline, default:primary
29
+ },
30
+
31
+ state: {
30
32
  type: [ String, Number ], // -1:disabled, 1:normal, 2:loading, default: normal,
31
- default: 1
32
- },
33
+ default: 1
34
+ },
33
35
 
34
- text: String,
36
+ text: String,
35
37
 
36
- target: String,
38
+ target: String,
37
39
 
38
- targetType: String,
40
+ targetType: String,
39
41
 
40
- width: Array,
42
+ width: Array,
41
43
 
42
44
  disabledText: String
43
45
 
44
- },
46
+ },
45
47
 
46
- computed:{
48
+ computed:{
47
49
 
48
- compClass(){
50
+ compClass(){
49
51
 
50
- return [
51
- this.$style.button,
52
- this.$style['button-' + this.variant],
53
- parseInt(this.computedState) === 2 ? this.$style.loading : ''
54
- ]
55
- .filter(_ => _)
56
- .join(' ')
57
- },
52
+ return [
53
+ this.$style.button,
54
+ this.$style['button-' + this.variant],
55
+ this.isDisabled ? this.$style['button-disabled'] : '',
56
+ this.isDisabled ? this.$style['button-' + this.variant + '-disabled'] : '',
57
+ parseInt(this.computedState) === 2 ? this.$style.loading : ''
58
+ ]
59
+ .filter(_ => _)
60
+ .join(' ')
61
+ },
58
62
 
59
- isDisabled(){
60
- return parseInt(this.computedState) !== 1
61
- },
63
+ isDisabled(){
64
+ return parseInt(this.computedState) !== 1
65
+ },
62
66
 
63
- isLoading(){
64
- return parseInt(this.computedState) === 2
65
- },
67
+ isLoading(){
68
+ return parseInt(this.computedState) === 2
69
+ },
66
70
 
67
- computedState(){
68
- return this._state ?? this.state
69
- },
71
+ computedState(){
72
+ return this._state ?? this.state
73
+ },
70
74
 
71
- widths(){
72
- if(!Array.isArray(this.width)) return [ '', '' ]
75
+ widths(){
76
+ if(!Array.isArray(this.width)) return [ '', '' ]
73
77
 
74
- return [
75
- this.width[0] ?? '',
76
- this.width[1] ? this.width[1] : (this.width[0] ?? ''),
77
- ]
78
- }
78
+ return [
79
+ this.width[0] ?? '',
80
+ this.width[1] ? this.width[1] : (this.width[0] ?? ''),
81
+ ]
82
+ }
79
83
 
80
- },
84
+ },
81
85
 
82
- data(){
83
- return {
84
- _state: null
85
- }
86
- },
86
+ data(){
87
+ return {
88
+ _state: null
89
+ }
90
+ },
87
91
 
88
- methods:{
92
+ methods:{
89
93
 
90
- focus(){
91
- this.$el.focus()
92
- },
94
+ focus(){
95
+ this.$el.focus()
96
+ },
93
97
 
94
- setState(state, percentage){
95
- this._state = state
96
- },
98
+ setState(state, percentage){
99
+ this._state = state
100
+ },
97
101
 
98
- resetState(){
102
+ resetState(){
99
103
  this._state = null
100
- },
101
-
102
- onClick(){
103
- if('edit-mode' in this.$route.query) return
104
-
105
- if(this.target){
106
- switch(this.targetType){
107
-
108
- case 'section':
109
- this.scrollTo(this.target)
110
- break
111
-
112
- default:
113
- if(this.target.indexOf('://') >= 0){
114
- window.location = this.target
115
- }
116
- else{
117
- this.$router.push(this.target)
118
- }
119
- break
120
- }
121
- }
122
- },
123
-
124
- scrollTo(exp){
125
- const el = document.querySelector('._' + exp.substring(0, 4))
126
- if(el){
127
- window.scrollTo({
128
- top: el.offsetTop - 100,
129
- behavior: 'smooth'
130
- });
131
- }
132
- },
133
-
134
- },
104
+ },
105
+
106
+ onClick(){
107
+ if('edit-mode' in this.$route.query) return
108
+
109
+ if(this.isDisabled){
110
+ this.$emit('disabled-click')
111
+ }
112
+ else{
113
+ if(this.target){
114
+ switch(this.targetType){
115
+
116
+ case 'section':
117
+ this.scrollTo(this.target)
118
+ break
119
+
120
+ default:
121
+ if(this.target.indexOf('://') >= 0){
122
+ window.location = this.target
123
+ }
124
+ else{
125
+ this.$router.push(this.target)
126
+ }
127
+ break
128
+ }
129
+ }
130
+ else{
131
+ this.$emit('click')
132
+ }
133
+ }
134
+ },
135
+
136
+ scrollTo(exp){
137
+ const el = document.querySelector('._' + exp.substring(0, 4))
138
+ if(el){
139
+ window.scrollTo({
140
+ top: el.offsetTop - 100,
141
+ behavior: 'smooth'
142
+ });
143
+ }
144
+ },
145
+
146
+ },
135
147
 
136
148
  }
137
149
 
@@ -140,161 +152,166 @@ export default{
140
152
  <style module>
141
153
 
142
154
  .button{
143
- @apply p-2;
144
- @apply relative flex items-center justify-center;
145
- @apply whitespace-nowrap text-ellipsis overflow-hidden;
146
- @apply rounded-lg appearance-none;
155
+ @apply p-2;
156
+ @apply relative flex items-center justify-center;
157
+ @apply whitespace-nowrap text-ellipsis overflow-hidden;
158
+ @apply rounded-lg appearance-none;
147
159
  }
148
160
  .button>*:first-child{
149
- @apply flex items-center justify-center
161
+ @apply flex items-center justify-center
150
162
  }
151
- .button:disabled{
163
+ .button-disabled{
152
164
  @apply text-opacity-50;
153
165
  }
154
166
  .button:active{
155
- @apply top-[1px] left-[1px] relative;
167
+ @apply top-[1px] left-[1px] relative;
156
168
  }
157
169
 
158
170
  .button-primary{
159
- @apply bg-primary-500 text-white rounded-lg;
160
- box-shadow: 0 2px 1px rgba(0, 0, 0, .05);
161
- border: solid 1px rgb(var(--primary-500));
171
+ @apply bg-primary-500 text-white rounded-lg;
172
+ box-shadow: 0 2px 1px rgba(0, 0, 0, .05);
173
+ border: solid 1px rgb(var(--primary-500));
162
174
  }
163
175
  .button-primary:focus{
164
- border-color: rgb(var(--primary-600));
176
+ border-color: rgb(var(--primary-600));
165
177
  }
166
178
  .button-primary:hover{
167
- @apply bg-primary-600;
179
+ @apply bg-primary-600;
168
180
  }
169
- .button-primary:disabled{
170
- @apply bg-primary-500 top-0 left-0 cursor-not-allowed;
171
- @apply top-0 left-0;
181
+ .button-primary-disabled,
182
+ .button-primary-disabled:hover{
183
+ @apply bg-primary-500 top-0 left-0 cursor-not-allowed text-opacity-50;
184
+ @apply top-0 left-0;
172
185
  }
173
186
  .button-primary *{
174
- @apply text-white fill-white;
187
+ @apply text-white fill-white;
175
188
  }
176
189
  .button-primary.loading *{
177
- @apply fill-transparent
190
+ @apply fill-transparent
178
191
  }
179
192
  .button-primary .svgBg{
180
- stroke: #fff;
181
- stroke-opacity: 25%;
193
+ stroke: #fff;
194
+ stroke-opacity: 25%;
182
195
  }
183
196
  .button-primary .svgHg{
184
- fill: #fff;
185
- fill-opacity: 75%;
197
+ fill: #fff;
198
+ fill-opacity: 75%;
186
199
  }
187
200
 
188
201
  .button-outline{
189
- @apply bg-transparent text-primary-500 border-[1px] border-primary;
202
+ @apply bg-transparent text-primary-500 border-[1px] border-primary;
190
203
  }
191
204
  .button-outline:hover{
192
205
  }
193
- .button-outline:disabled{
194
- @apply top-0 left-0 cursor-not-allowed;
195
- @apply text-text border-primary-500;
206
+ .button-outline-disabled,
207
+ .button-outline-disabled:hover{
208
+ @apply top-0 left-0 cursor-not-allowed;
209
+ @apply text-text border-primary-500 text-opacity-50;
196
210
  }
197
211
  .button-outline *{
198
- @apply text-primary-500 fill-primary-500;
212
+ @apply text-primary-500 fill-primary-500;
199
213
  }
200
214
  .button-outline.loading *{
201
- @apply fill-transparent
215
+ @apply fill-transparent
202
216
  }
203
217
  .button-outline .svgBg{
204
- stroke: rgb(var(--primary-600));
205
- stroke-opacity: 50%;
218
+ stroke: rgb(var(--primary-600));
219
+ stroke-opacity: 50%;
206
220
  }
207
221
  .button-outline .svgHg{
208
- fill: rgb(var(--primary-500));
209
- fill-opacity: 100%;
222
+ fill: rgb(var(--primary-500));
223
+ fill-opacity: 100%;
210
224
  }
211
225
 
212
226
  .button-secondary{
213
- @apply bg-secondary-500 border-secondary-500 text-primary-700 rounded-lg text-white;
227
+ @apply bg-secondary-500 border-secondary-500 text-primary-700 rounded-lg text-white;
214
228
  border: solid 1px rgb(var(--secondary-500));
215
229
  }
216
230
  .button-secondary:hover{
217
- @apply bg-secondary-600 border-secondary-600;
231
+ @apply bg-secondary-600 border-secondary-600;
218
232
  }
219
- .button-secondary:disabled{
220
- @apply bg-secondary-400 border-secondary-400 cursor-not-allowed;
233
+ .button-secondary-disabled,
234
+ .button-secondary-disabled:hover{
235
+ @apply bg-secondary-400 border-secondary-400 cursor-not-allowed text-opacity-50;
221
236
  }
222
237
  .button-secondary *{
223
- @apply text-text-500 fill-white;
238
+ @apply text-text-500 fill-white;
224
239
  }
225
240
  .button-secondary.loading *{
226
- @apply fill-transparent
241
+ @apply fill-transparent
227
242
  }
228
243
  .button-secondary .svgBg{
229
- stroke: rgb(var(--text-400));
230
- stroke-opacity: 25%;
244
+ stroke: rgb(var(--text-400));
245
+ stroke-opacity: 25%;
231
246
  }
232
247
  .button-secondary .svgHg{
233
- fill: rgb(var(--text-500));
234
- fill-opacity: 75%;
248
+ fill: rgb(var(--text-500));
249
+ fill-opacity: 75%;
235
250
  }
236
251
 
237
252
  .button-red{
238
- @apply bg-red-500 text-white rounded-md border-[2px] border-red-500;
253
+ @apply bg-red-500 text-white rounded-md border-[2px] border-red-500;
239
254
  }
240
255
  .button-red:hover{
241
- @apply bg-red-600 border-red-600;
256
+ @apply bg-red-600 border-red-600;
242
257
  }
243
- .button-red:disabled{
244
- @apply bg-red-500 border-red-500 top-0 left-0 cursor-not-allowed;
258
+ .button-red-disabled,
259
+ .button-red-disabled:hover{
260
+ @apply bg-red-500 border-red-500 top-0 left-0 cursor-not-allowed text-opacity-50;
245
261
  }
246
262
  .button-red *{
247
- @apply text-white fill-white;
263
+ @apply text-white fill-white;
248
264
  }
249
265
  .button-red.loading *{
250
- @apply fill-transparent
266
+ @apply fill-transparent
251
267
  }
252
268
  .button-red .svgBg{
253
- @apply stroke-red-400;
254
- stroke-opacity: 50%;
269
+ @apply stroke-red-400;
270
+ stroke-opacity: 50%;
255
271
  }
256
272
  .button-red .svgHg{
257
- @apply fill-text-500;
258
- fill-opacity: 100%;
273
+ @apply fill-text-500;
274
+ fill-opacity: 100%;
259
275
  }
260
276
 
261
277
  .button-minimal{
262
- @apply border-[2px] border-transparent;
278
+ @apply border-[2px] border-transparent;
263
279
  }
264
280
  .button-minimal:hover{
265
281
  }
266
282
  .button-minimal .svgBg{
267
- stroke: rgb(var(--text-500));
268
- stroke-opacity: 25%;
283
+ stroke: rgb(var(--text-500));
284
+ stroke-opacity: 25%;
269
285
  }
270
286
  .button-minimal .svgHg{
271
- fill: rgb(var(--text));
272
- fill-opacity: 75%;
287
+ fill: rgb(var(--text));
288
+ fill-opacity: 75%;
273
289
  }
274
290
 
275
291
  .loadingPane{
276
- @apply absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center pl-1;
292
+ @apply absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center pl-1;
277
293
  }
278
294
  .loading{
279
295
  color: transparent;
280
296
  }
281
297
  .loading>*:first-child{
282
- @apply opacity-0
298
+ @apply opacity-0
283
299
  }
284
300
  .loading:hover{
285
301
  }
286
302
  .loading:active{
287
- @apply top-0 left-0;
303
+ @apply top-0 left-0;
288
304
  }
289
305
  .loading>*{
290
- opacity: 0;
306
+ opacity: 0;
291
307
  }
292
308
  .loading .loadingPane{
293
- opacity: 1;
309
+ opacity: 1;
294
310
  }
295
311
 
296
312
  .spinner{
297
- @apply animate-spin h-5 w-5;
313
+ @apply animate-spin h-5 w-5;
298
314
  }
299
315
 
300
316
  </style>
317
+
package/src/components/ContextMenu.vue CHANGED
@@ -92,7 +92,8 @@ export default {
92
92
  const transitionEnd = () => {
93
93
  window.addEventListener('click', this.onDismiss)
94
94
  window.addEventListener('scroll', this.onDismiss)
95
- this.$refs.contextMenu.removeEventListener('transitionend', transitionEnd)
95
+ if(this.$refs.contextMenu)
96
+ this.$refs.contextMenu.removeEventListener('transitionend', transitionEnd)
96
97
  this.$emit('open')
97
98
  }
98
99
 
@@ -200,6 +201,12 @@ export default {
200
201
  transformOrigin = 'bottom right'
201
202
  break
202
203
 
204
+ case 'right':
205
+ left = Math.round(rect.x + rect.width)
206
+ top = Math.round(rect.y - 1)
207
+ transformOrigin = 'top left'
208
+ break
209
+
203
210
  default:
204
211
  left = Math.round(rect.x)
205
212
  top = Math.round(rect.y + rect.height + 8)
package/src/components/Toast.vue CHANGED
@@ -83,8 +83,10 @@ export default{
83
83
  <style>
84
84
 
85
85
  .YWxl{
86
- @apply fixed top-0 left-0 right-0;
86
+ @apply fixed top-0 w-full;
87
87
  z-index: 61;
88
+ left: 50%;
89
+ transform: translate3d(-50%, 0, 0);
88
90
  }
89
91
 
90
92
  .YWxl-enter-active,
package/src/utils/helpers.js CHANGED
@@ -1,3 +1,5 @@
1
+ import {Duplex} from "stream";
2
+
1
3
  const md5 = require("md5");
2
4
  const fs = require("fs");
3
5
  const { Op } = require('sequelize')
@@ -132,7 +134,7 @@ const strSlug = (title, separator) => {
132
134
 
133
135
  // Remove all characters that are not the separator, letters, numbers, or whitespace.
134
136
  title = title.toLowerCase()
135
- .replace(new RegExp('[^a-z0-9' + separator + '\\s]', 'g'), '');
137
+ .replace(new RegExp('[^a-z0-9' + separator + '\\s]', 'g'), '');
136
138
 
137
139
  // Replace all separator characters and whitespace by a single separator
138
140
  title = title.replace(new RegExp('[' + separator + '\\s]+', 'g'), separator);
@@ -277,6 +279,39 @@ const accessNestedObject = function(obj, path) {
277
279
  return nestedObj;
278
280
  }
279
281
 
282
+ const createObjectFromPath = (obj, path, value) => {
283
+ const keys = path.split('.');
284
+
285
+ let current = obj;
286
+ for (let i = 0; i < keys.length; i++) {
287
+ const key = keys[i];
288
+ const indexMatch = key.match(/^(\d+)$/);
289
+ const isArrayIndex = indexMatch !== null;
290
+
291
+ const nextIsArrayIndex = !!(keys[i + 1] ?? '').match(/^(\d+)$/);
292
+ const isLast = i === keys.length - 1
293
+
294
+ if(isArrayIndex) {
295
+ const index = parseInt(indexMatch[1], 10);
296
+ if (!Array.isArray(current)) {
297
+ current = [];
298
+ }
299
+ if (typeof current[index] === 'undefined') {
300
+ current[index] = isLast ? value : nextIsArrayIndex ? [] : {};
301
+ }
302
+ current = current[index]
303
+ }
304
+ else{
305
+ if(typeof current[key] !== 'object' || current[key] === null) {
306
+ current[key] = isLast ? value : nextIsArrayIndex ? [] : {};
307
+ }
308
+ current = current[key];
309
+ }
310
+ }
311
+
312
+ return obj;
313
+ }
314
+
280
315
  const cssDict = {
281
316
  'Global': '*',
282
317
  'Font': 'font-family',
@@ -334,20 +369,20 @@ const createComponentInstance = function(component){
334
369
  class: compUid + compClasses.map(key => {
335
370
  return Array.isArray(component.props[key]) ? component.props[key].join(' ') : ''
336
371
  })
337
- .filter(_ => _)
338
- .join(' '),
372
+ .filter(_ => _)
373
+ .join(' '),
339
374
 
340
375
  containerClass: containerClasses.map(key => {
341
376
  return Array.isArray(component.props[key]) ? component.props[key].join(' ') : ''
342
377
  })
343
- .filter(_ => _)
344
- .join(' '),
378
+ .filter(_ => _)
379
+ .join(' '),
345
380
 
346
381
  itemClass: itemClasses.map(key => {
347
382
  return Array.isArray(component.props[key]) ? component.props[key].join(' ') : ''
348
383
  })
349
- .filter(_ => _)
350
- .join(' ')
384
+ .filter(_ => _)
385
+ .join(' ')
351
386
  })
352
387
 
353
388
  for(let key in component.props){
@@ -511,6 +546,7 @@ module.exports = {
511
546
  getPresetSortWhereParams,
512
547
  unflatten,
513
548
  accessNestedObject,
549
+ createObjectFromPath,
514
550
  generateStylesheet,
515
551
  hexToRgb,
516
552
  createComponentInstance,