@mixd-id/web-scaffold 0.1.230406091 → 0.1.230406092

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 (9) hide show
  1. package/package.json +1 -1
  2. package/src/components/Table.vue +68 -0
  3. package/src/index.js +9 -4
  4. package/src/widgets/EmbeddedVideo.vue +11 -35
  5. package/src/widgets/EmbeddedVideoSetting.vue +0 -42
  6. package/src/widgets/FAQ.vue +0 -1
  7. package/src/widgets/TableItem.vue +25 -0
  8. package/src/widgets/TableSetting.vue +174 -0
  9. package/src/widgets/WebPageBuilder.vue +8 -0
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.230406091",
4
+ "version": "0.1.230406092",
5
5
  "scripts": {
6
6
  "dev": "vite serve",
7
7
  "build": "vite build",
package/src/components/Table.vue ADDED
@@ -0,0 +1,68 @@
1
+ <template>
2
+ <div :class="compClass">
3
+ <table>
4
+ <thead>
5
+ <tr>
6
+ <th v-for="header in headers">{{ header.text }}</th>
7
+ </tr>
8
+ </thead>
9
+ <tbody>
10
+ <tr v-for="content in contents">
11
+ <td v-for="header in headers">{{ content[header.key] ?? '' }}</td>
12
+ </tr>
13
+ </tbody>
14
+ </table>
15
+ </div>
16
+ </template>
17
+
18
+ <script>
19
+
20
+ import {componentMixin} from "../mixin/component";
21
+
22
+ export default{
23
+
24
+ mixins: [ componentMixin ],
25
+
26
+ props:{
27
+
28
+ headers: Array,
29
+ contents: Array,
30
+
31
+ },
32
+
33
+ computed: {
34
+
35
+ compClass(){
36
+ return [
37
+ this.$style.comp,
38
+ this.extClass
39
+ ]
40
+ .join(' ')
41
+ }
42
+
43
+ }
44
+
45
+ }
46
+
47
+ </script>
48
+
49
+ <style module>
50
+
51
+ .comp{
52
+ @apply overflow-auto;
53
+ }
54
+
55
+ .comp table{
56
+ @apply border-[1px] border-text-200 border-collapse;
57
+ table-layout: fixed;
58
+ }
59
+
60
+ .comp th{
61
+ @apply whitespace-nowrap bg-text-50 text-left;
62
+ }
63
+
64
+ .comp th, .comp td{
65
+ @apply border-[1px] border-text-200 p-3;
66
+ }
67
+
68
+ </style>
package/src/index.js CHANGED
@@ -3,8 +3,8 @@ import {observeInit} from './utils/helpers.mjs'
3
3
  import throttle from "lodash/throttle"
4
4
 
5
5
  let _UNIQID = 0
6
- const uniqid = () => {
7
- return _UNIQID++
6
+ const uniqid = (additionalKey = '') => {
7
+ return '_c' + additionalKey + (new Date().getTime()).toString().substring(8) + _UNIQID++
8
8
  }
9
9
 
10
10
  const mediaBreakpoints = {
@@ -316,6 +316,7 @@ export default{
316
316
  app.component('VirtualTable', defineAsyncComponent(() => import("./components/VirtualTable.vue")))
317
317
  app.component('Slider', defineAsyncComponent(() => import("./components/Slider.vue")))
318
318
  app.component('SplitPane', defineAsyncComponent(() => import("./components/SplitPane.vue")))
319
+ app.component('Table', defineAsyncComponent(() => import("./components/Table.vue")))
319
320
  app.component('TabView', defineAsyncComponent(() => import("./components/TabView.vue")))
320
321
  app.component('TextBlock', defineAsyncComponent(() => import("./components/TextBlock.vue")))
321
322
  app.component('TextEditor', defineAsyncComponent(() => import("./components/TextEditor.vue")))
@@ -330,13 +331,15 @@ export default{
330
331
  app.component('BoxItem', defineAsyncComponent(() => import("./widgets/BoxItem.vue")))
331
332
  app.component('BoxSetting', defineAsyncComponent(() => import("./widgets/BoxSetting.vue")))
332
333
  app.component('ButtonItem', defineAsyncComponent(() => import("./widgets/ButtonItem.vue")))
333
- app.component('ButtonSetting', defineAsyncComponent(() => import("./wid" +
334
- "gets/ButtonSetting.vue")))
334
+ app.component('ButtonSetting', defineAsyncComponent(() => import("./widgets/ButtonSetting.vue")))
335
335
  app.component('CarouselItem', defineAsyncComponent(() => import("./widgets/CarouselItem.vue")))
336
336
  app.component('CarouselSetting', defineAsyncComponent(() => import("./widgets/CarouselSetting.vue")))
337
337
  app.component('ContactForm', defineAsyncComponent(() => import("./widgets/ContactForm.vue")))
338
338
  app.component('ContactFormItem', defineAsyncComponent(() => import("./widgets/ContactFormItem.vue")))
339
339
  app.component('ContactFormSetting', defineAsyncComponent(() => import("./widgets/ContactFormSetting.vue")))
340
+ app.component('EmbeddedVideo', defineAsyncComponent(() => import("./widgets/EmbeddedVideo.vue")))
341
+ app.component('EmbeddedVideoItem', defineAsyncComponent(() => import("./widgets/EmbeddedVideoItem.vue")))
342
+ app.component('EmbeddedVideoSetting', defineAsyncComponent(() => import("./widgets/EmbeddedVideoSetting.vue")))
340
343
  app.component('FAQ', defineAsyncComponent(() => import("./widgets/FAQ.vue")))
341
344
  app.component('FAQItem', defineAsyncComponent(() => import("./widgets/FAQItem.vue")))
342
345
  app.component('FAQSetting', defineAsyncComponent(() => import("./widgets/FAQSetting.vue")))
@@ -363,6 +366,8 @@ export default{
363
366
  app.component('StyleSetting', defineAsyncComponent(() => import("./widgets/StyleSetting.vue")))
364
367
  app.component('ParagraphItem', defineAsyncComponent(() => import("./widgets/ParagraphItem.vue")))
365
368
  app.component('ParagraphSetting', defineAsyncComponent(() => import("./widgets/ParagraphSetting.vue")))
369
+ app.component('TableItem', defineAsyncComponent(() => import("./widgets/TableItem.vue")))
370
+ app.component('TableSetting', defineAsyncComponent(() => import("./widgets/TableSetting.vue")))
366
371
  app.component('TextBlockItem', defineAsyncComponent(() => import("./widgets/TextBlockItem.vue")))
367
372
  app.component('TextBlockSetting', defineAsyncComponent(() => import("./widgets/TextBlockSetting.vue")))
368
373
  }
package/src/widgets/EmbeddedVideo.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div :class="compClass" :style="computedStyle">
2
+ <div :class="compClass">
3
3
  <iframe :class="videoClass"
4
4
  :src="computedSrc"
5
5
  frameborder="0"
@@ -10,50 +10,29 @@
10
10
 
11
11
  <script>
12
12
 
13
- export default{
14
-
15
- props: {
13
+ import { componentMixin } from '../mixin/component'
16
14
 
17
- bgColors: Array,
18
- display: Array,
19
- margin: Array,
20
- padding: Array,
21
- enabled: undefined,
22
- name: String,
15
+ export default{
23
16
 
24
- videoUrl: String,
17
+ mixins: [ componentMixin ],
25
18
 
26
- width: Array,
19
+ props: {
27
20
 
28
- align: Array
21
+ videoUrl: String
29
22
 
30
23
  },
31
24
 
32
25
  computed: {
33
26
 
34
- computedDisplay(){
35
- return [
36
- Boolean(this.display[0]) ? '' : 'none',
37
- Boolean(this.display[1]) ? '' : 'none'
38
- ]
39
- },
40
-
41
27
  computedSrc(){
42
28
  return (this.videoUrl ?? '').replace('https://www.youtube.com/watch?v=', 'https://www.youtube.com/embed/')
43
29
  .replace('https://youtu.be/', 'https://www.youtube.com/embed/')
44
30
  },
45
31
 
46
- computedStyle(){
47
- return {
48
- backgroundColor: this.bgColors[0]
49
- }
50
- },
51
-
52
32
  compClass(){
53
33
  return [
54
34
  this.$style.comp,
55
- this.align[0] ? this.align[0] : undefined,
56
- this.align[1] ? 'md:' + this.align[1] : undefined,
35
+ this.extClass
57
36
  ]
58
37
  .filter(_ => _)
59
38
  .join(' ')
@@ -62,12 +41,11 @@ export default{
62
41
  videoClass(){
63
42
  return [
64
43
  this.$style.video,
65
- this.width[0] ? `w-${this.width[0]}` : undefined,
66
- this.width[1] ? `md:w-${this.width[1]}` : undefined,
44
+ /*this.width[0] ? `w-${this.width[0]}` : undefined,
45
+ this.width[1] ? `md:w-${this.width[1]}` : undefined,*/
67
46
  ]
68
47
  .filter(_ => _)
69
48
  .join(' ')
70
-
71
49
  }
72
50
 
73
51
  }
@@ -80,8 +58,7 @@ export default{
80
58
 
81
59
  .comp{
82
60
  @apply flex flex-col;
83
- background-color: v-bind(bgColors[0]);
84
- display: v-bind(computedDisplay[0]);
61
+ background-image: v-bind(bgImages[0]);
85
62
  }
86
63
 
87
64
  .video{
@@ -92,8 +69,7 @@ export default{
92
69
 
93
70
  @media screen and (min-width: 768px){
94
71
  .comp{
95
- background-color: v-bind(bgColors[1]);
96
- display: v-bind(computedDisplay[1]);
72
+ background-image: v-bind(bgImages[1]);
97
73
  }
98
74
  }
99
75
 
package/src/widgets/EmbeddedVideoSetting.vue CHANGED
@@ -7,54 +7,12 @@
7
7
  @keyup.enter="$emit('change')" />
8
8
  </div>
9
9
 
10
- <div class="flex flex-row gap-4 items-center">
11
- <label class="flex-1 text-text-400">Width</label>
12
- <div>
13
- <Dropdown v-for="(_viewType, index) in viewTypes"
14
- v-show="_viewType.value === viewType"
15
- v-model="item.props.width[index]"
16
- @change="$emit('change')"
17
- class="w-[120px]">
18
- <option value="full">Full</option>
19
- <option value="[360px]">360px</option>
20
- <option value="[480px]">480px</option>
21
- <option value="[640px]">640px</option>
22
- </Dropdown>
23
- </div>
24
- </div>
25
-
26
- <div class="flex flex-row gap-4 items-center">
27
- <label class="flex-1 text-text-400">Align</label>
28
- <div>
29
- <Dropdown v-for="(_viewType, index) in viewTypes"
30
- v-show="_viewType.value === viewType"
31
- v-model="item.props.align[index]"
32
- @change="$emit('change')"
33
- class="w-[120px]">
34
- <option value="justify-start">Left</option>
35
- <option value="justify-center">Center</option>
36
- <option value="justify-end">Right</option>
37
- </Dropdown>
38
- </div>
39
- </div>
40
-
41
- <div class="flex flex-row gap-4 items-center">
42
- <label class="flex-1 text-text-400">Background Color</label>
43
- <ColorPicker v-for="(_viewType, index) in viewTypes"
44
- v-show="_viewType.value === viewType"
45
- v-model="item.props.bgColors[index]"
46
- @change="$emit('change')"
47
- :custom-color="true">
48
- </ColorPicker>
49
- </div>
50
-
51
10
  <ComponentSetting :item="item"
52
11
  :view-type="viewType"
53
12
  :view-types="viewTypes"
54
13
  defaultDisplay="flex"
55
14
  @change="$emit('change')" />
56
15
 
57
-
58
16
  </div>
59
17
  </template>
60
18
 
package/src/widgets/FAQ.vue CHANGED
@@ -27,7 +27,6 @@ export default{
27
27
  mixins: [ componentMixin ],
28
28
 
29
29
  props:{
30
-
31
30
  title: String,
32
31
  items: Array
33
32
  },
package/src/widgets/TableItem.vue ADDED
@@ -0,0 +1,25 @@
1
+ <template>
2
+ <div class="flex-1 flex flex-row items-center gap-4">
3
+ {{ item.props.name ?? item.type }}
4
+ </div>
5
+ </template>
6
+
7
+ <script>
8
+
9
+ export default{
10
+
11
+ props: {
12
+ item: Object
13
+ }
14
+
15
+ }
16
+
17
+ </script>
18
+
19
+ <style module>
20
+
21
+ .comp{
22
+
23
+ }
24
+
25
+ </style>
package/src/widgets/TableSetting.vue ADDED
@@ -0,0 +1,174 @@
1
+ <template>
2
+ <div :class="$style.comp">
3
+
4
+ <div>
5
+ <div class="flex flex-row items-center">
6
+ <label class="flex-1 text-text-400">Headers</label>
7
+ <button type="button" class="text-primary"
8
+ @click="this.$refs.headerEdit.open({ header:{ key:$util.uniqid(item.uid.substring(0, 3)) } })">Add Header</button>
9
+ </div>
10
+ <ListItem :items="headers"
11
+ @reorder="(from, to) => { item.props.headers.splice(to, 0, item.props.headers.splice(from, 1)[0]); $emit('change') }">
12
+ <template v-slot="{ item:header, index }">
13
+ <div class="flex flex-row items-center gap-3 p-2">
14
+ <div data-reorder>
15
+ <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
16
+ </div>
17
+ <div class="flex-1" @click="this.$refs.headerEdit.open({ header, index })">
18
+ <pre>{{ header.text }}</pre>
19
+ </div>
20
+ <div>
21
+ <button type="button" @click="confirm($t('Remove this item?'), '', () => { item.props.headers.splice(index, 1); $emit('change') })">
22
+ <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
23
+ </button>
24
+ </div>
25
+ </div>
26
+ </template>
27
+ </ListItem>
28
+ </div>
29
+
30
+ <div>
31
+ <div class="flex flex-row items-center">
32
+ <label class="flex-1 text-text-400">Items</label>
33
+ <button type="button" class="text-primary"
34
+ @click="$refs.itemEdit.open({ item:{} })">Add Item</button>
35
+ </div>
36
+ <ListItem :items="contents"
37
+ @reorder="(from, to) => { item.props.contents.splice(to, 0, item.props.contents.splice(from, 1)[0]); $emit('change') }">
38
+ <template v-slot="{ item:aItem, index }">
39
+ <div class="flex flex-row items-center gap-3 p-2">
40
+ <div data-reorder>
41
+ <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
42
+ </div>
43
+ <div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden" @click="this.$refs.itemEdit.open({ item:aItem, index })">
44
+ {{ Object.values(aItem).join(' ')}}
45
+ </div>
46
+ <div>
47
+ <button type="button" @click="confirm($t('Remove this item?'), '', () => { item.props.contents.splice(index, 1); $emit('change') })">
48
+ <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
49
+ </button>
50
+ </div>
51
+ </div>
52
+ </template>
53
+ </ListItem>
54
+ </div>
55
+
56
+ <ComponentSetting :item="item"
57
+ :view-type="viewType"
58
+ :view-types="viewTypes"
59
+ defaultDisplay="flex"
60
+ @change="$emit('change')" />
61
+
62
+ <Modal ref="headerEdit" width="320" height="320">
63
+ <template v-slot:head>
64
+ <div class="relative p-5">
65
+ <h3>Header</h3>
66
+ <div class="absolute top-0 right-0 p-2">
67
+ <button type="button" class="p-2" @click="$refs.headerEdit.close()">
68
+ <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
69
+ <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
70
+ </svg>
71
+ </button>
72
+ </div>
73
+ </div>
74
+ </template>
75
+ <template v-slot:foot="{ context }">
76
+ <div class="p-5">
77
+ <Button type="button" class="w-full"
78
+ @click="if(!('index' in context)) item.props.headers.push(context.header); $refs.headerEdit.close();$emit('change')">OK</Button>
79
+ </div>
80
+ </template>
81
+ <template #default="{ context }">
82
+ <div class="flex-1 p-5">
83
+
84
+ <div>
85
+ <label class="text-text-400">Text</label>
86
+ <Textbox v-model="context.header.text" class="mt-1" />
87
+ </div>
88
+
89
+ </div>
90
+ </template>
91
+ </Modal>
92
+
93
+ <Modal ref="itemEdit" width="480" height="480">
94
+ <template v-slot:head>
95
+ <div class="relative p-5">
96
+ <h3>Item</h3>
97
+ <div class="absolute top-0 right-0 p-2">
98
+ <button type="button" class="p-2" @click="$refs.itemEdit.close()">
99
+ <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
100
+ <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
101
+ </svg>
102
+ </button>
103
+ </div>
104
+ </div>
105
+ </template>
106
+ <template v-slot:foot="{ context }">
107
+ <div class="p-5">
108
+ <Button type="button" class="w-full"
109
+ @click="if(!('index' in context)) item.props.contents.push(context.item); $refs.itemEdit.close();$emit('change')">OK</Button>
110
+ </div>
111
+ </template>
112
+ <template #default="{ context }">
113
+ <div class="flex-1 p-5">
114
+
115
+ <div v-for="header in item.props.headers">
116
+ <label class="text-text-400">{{ header.text }}</label>
117
+ <Textbox v-model="context.item[header.key]" />
118
+ </div>
119
+
120
+ <pre>{{ context.item }}</pre>
121
+
122
+ </div>
123
+ </template>
124
+ </Modal>
125
+
126
+ </div>
127
+ </template>
128
+
129
+ <script>
130
+
131
+ export default{
132
+
133
+ emits: [ 'change' ],
134
+
135
+ inject: [ 'confirm' ],
136
+
137
+ methods: {
138
+
139
+
140
+ },
141
+
142
+ props: {
143
+ item: Object,
144
+ viewType: String,
145
+ viewTypes: Array,
146
+ },
147
+
148
+ computed: {
149
+
150
+ headers(){
151
+ if(!Array.isArray(this.item.props.headers))
152
+ this.item.props.headers = []
153
+ return this.item.props.headers
154
+ },
155
+
156
+ contents(){
157
+ if(!Array.isArray(this.item.props.contents))
158
+ this.item.props.contents = []
159
+ return this.item.props.contents
160
+ }
161
+
162
+ }
163
+
164
+ }
165
+
166
+ </script>
167
+
168
+ <style module>
169
+
170
+ .comp{
171
+ @apply flex flex-col gap-4;
172
+ }
173
+
174
+ </style>
package/src/widgets/WebPageBuilder.vue CHANGED
@@ -877,10 +877,18 @@ export default{
877
877
  src:[],
878
878
  }},
879
879
 
880
+ { type:'EmbeddedVideo', name:'Video', group:'Components', props:{
881
+ src:[],
882
+ }},
883
+
880
884
  { type:'Article', name:'Article', group:'Components', props:{} },
881
885
 
882
886
  { type:'Paragraph', name:'Paragraph', group:'Components', props:{} },
883
887
 
888
+ { type:'Table', name:'Table', group:'Components', props:{
889
+ items: []
890
+ }},
891
+
884
892
  { type:'TextBlock', name:'TextBlock', group:'Components', props:{
885
893
  htmlText:'',
886
894
  fontFamily:[], fontSize:[], fontWeight:[], textColor:[]