@mixd-id/web-scaffold 0.1.230406086 → 0.1.230406088
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/package.json +1 -1
- package/src/components/Article.vue +69 -0
- package/src/components/Carousel.vue +5 -1
- package/src/components/Flex.vue +6 -0
- package/src/components/HTMLEditor.vue +27 -6
- package/src/components/Paragraph.vue +5 -1
- package/src/index.js +3 -0
- package/src/widgets/ArticleItem.vue +25 -0
- package/src/widgets/ArticleSetting.vue +175 -0
- package/src/widgets/CarouselSetting.vue +8 -29
- package/src/widgets/ContactForm.vue +2 -3
- package/src/widgets/ContactFormSetting.vue +24 -20
- package/src/widgets/FeatureList.vue +1 -1
- package/src/widgets/IconList.vue +7 -0
- package/src/widgets/WebPageBuilder.vue +12 -3
- package/tailwind.config.js +243 -0
package/package.json
CHANGED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<article :class="compClass" v-html="htmlText"></article>
|
|
3
|
+
</template>
|
|
4
|
+
|
|
5
|
+
<script>
|
|
6
|
+
|
|
7
|
+
import { componentMixin } from '../mixin/component';
|
|
8
|
+
|
|
9
|
+
export default{
|
|
10
|
+
|
|
11
|
+
mixins: [ componentMixin ],
|
|
12
|
+
|
|
13
|
+
props: {
|
|
14
|
+
|
|
15
|
+
htmlText: String
|
|
16
|
+
|
|
17
|
+
},
|
|
18
|
+
|
|
19
|
+
computed: {
|
|
20
|
+
|
|
21
|
+
compClass(){
|
|
22
|
+
return [
|
|
23
|
+
this.$style.comp,
|
|
24
|
+
this.extClass
|
|
25
|
+
]
|
|
26
|
+
.join(' ')
|
|
27
|
+
},
|
|
28
|
+
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
</script>
|
|
35
|
+
|
|
36
|
+
<style module>
|
|
37
|
+
|
|
38
|
+
.comp{
|
|
39
|
+
background-image: v-bind(bgImages[0]);
|
|
40
|
+
}
|
|
41
|
+
.comp *{
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.comp a{
|
|
45
|
+
@apply text-primary underline;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.comp ul li{
|
|
49
|
+
@apply list-disc list-inside;
|
|
50
|
+
}
|
|
51
|
+
.comp ol li{
|
|
52
|
+
@apply list-decimal list-inside;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
font[size='1']{ @apply text-xs; }
|
|
56
|
+
font[size='2']{ @apply text-sm; }
|
|
57
|
+
font[size='3']{ @apply text-lg; }
|
|
58
|
+
font[size='4']{ @apply text-xl; }
|
|
59
|
+
font[size='5']{ @apply text-2xl; }
|
|
60
|
+
font[size='6']{ @apply text-3xl; }
|
|
61
|
+
font[size='7']{ @apply text-4xl; }
|
|
62
|
+
|
|
63
|
+
@media screen(md){
|
|
64
|
+
.comp{
|
|
65
|
+
background-image: v-bind(bgImages[1]);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
</style>
|
|
@@ -3,7 +3,11 @@
|
|
|
3
3
|
|
|
4
4
|
<div ref="inner" :class="innerClass">
|
|
5
5
|
<div v-for="item in items" :class="itemClass">
|
|
6
|
-
<component :is="item.type"
|
|
6
|
+
<component :is="item.type"
|
|
7
|
+
:uid="item.uid"
|
|
8
|
+
:="item.props"
|
|
9
|
+
:ratio="ratio"
|
|
10
|
+
:ext-class="item.extClass" />
|
|
7
11
|
</div>
|
|
8
12
|
</div>
|
|
9
13
|
|
package/src/components/Flex.vue
CHANGED
|
@@ -35,24 +35,45 @@
|
|
|
35
35
|
|
|
36
36
|
<ContextMenu ref="headingContext">
|
|
37
37
|
<div class="flex flex-col">
|
|
38
|
-
<button class="p-3 text-4xl text-left hover:bg-primary-200" type="button" @click="format('
|
|
38
|
+
<button class="p-3 text-4xl text-left hover:bg-primary-200" type="button" @click="format('formatBlock', 'h1')">
|
|
39
39
|
Heading 1
|
|
40
40
|
</button>
|
|
41
|
-
<button class="p-3 text-3xl text-left hover:bg-primary-200" type="button" @click="format('
|
|
41
|
+
<button class="p-3 text-3xl text-left hover:bg-primary-200" type="button" @click="format('formatBlock', 'h2')">
|
|
42
42
|
Heading 2
|
|
43
43
|
</button>
|
|
44
|
-
<button class="p-3 text-2xl text-left hover:bg-primary-200" type="button" @click="format('
|
|
44
|
+
<button class="p-3 text-2xl text-left hover:bg-primary-200" type="button" @click="format('formatBlock', 'h3')">
|
|
45
45
|
Heading 3
|
|
46
46
|
</button>
|
|
47
|
-
<button class="p-3 text-xl text-left hover:bg-primary-200" type="button" @click="format('
|
|
47
|
+
<button class="p-3 text-xl text-left hover:bg-primary-200" type="button" @click="format('formatBlock', 'h4')">
|
|
48
48
|
Heading 4
|
|
49
49
|
</button>
|
|
50
|
-
<button class="p-3 text-lg text-left hover:bg-primary-200" type="button" @click="format('
|
|
50
|
+
<button class="p-3 text-lg text-left hover:bg-primary-200" type="button" @click="format('formatBlock', 'h5')">
|
|
51
51
|
Heading 5
|
|
52
52
|
</button>
|
|
53
|
-
<button class="p-3 text-left hover:bg-primary-200" type="button" @click="format('
|
|
53
|
+
<button class="p-3 text-left hover:bg-primary-200" type="button" @click="format('formatBlock', 'p')">
|
|
54
54
|
Normal
|
|
55
55
|
</button>
|
|
56
|
+
<button class="p-3 text-left text-xs hover:bg-primary-200" type="button" @click="format('formatBlock', 'p');format('fontSize', '1')">
|
|
57
|
+
Font 1
|
|
58
|
+
</button>
|
|
59
|
+
<button class="p-3 text-left text-sm hover:bg-primary-200" type="button" @click="format('formatBlock', 'p');format('fontSize', '2')">
|
|
60
|
+
Font 2
|
|
61
|
+
</button>
|
|
62
|
+
<button class="p-3 text-left text-lg hover:bg-primary-200" type="button" @click="format('formatBlock', 'p');format('fontSize', '3')">
|
|
63
|
+
Font 3
|
|
64
|
+
</button>
|
|
65
|
+
<button class="p-3 text-left text-xl hover:bg-primary-200" type="button" @click="format('formatBlock', 'p');format('fontSize', '4')">
|
|
66
|
+
Font 4
|
|
67
|
+
</button>
|
|
68
|
+
<button class="p-3 text-left text-2xl hover:bg-primary-200" type="button" @click="format('formatBlock', 'p');format('fontSize', '5')">
|
|
69
|
+
Font 5
|
|
70
|
+
</button>
|
|
71
|
+
<button class="p-3 text-left text-3xl hover:bg-primary-200" type="button" @click="format('formatBlock', 'p');format('fontSize', '6')">
|
|
72
|
+
Font 6
|
|
73
|
+
</button>
|
|
74
|
+
<button class="p-3 text-left text-4xl hover:bg-primary-200" type="button" @click="format('formatBlock', 'p');format('fontSize', '7')">
|
|
75
|
+
Font 7
|
|
76
|
+
</button>
|
|
56
77
|
</div>
|
|
57
78
|
</ContextMenu>
|
|
58
79
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
2
|
+
<article :class="compClass" v-html="htmlText"></article>
|
|
3
3
|
</template>
|
|
4
4
|
|
|
5
5
|
<script>
|
|
@@ -41,6 +41,10 @@ export default{
|
|
|
41
41
|
.comp *{
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
+
.comp a{
|
|
45
|
+
@apply text-primary underline;
|
|
46
|
+
}
|
|
47
|
+
|
|
44
48
|
@media screen(md){
|
|
45
49
|
.comp{
|
|
46
50
|
background-image: v-bind(bgImages[1]);
|
package/src/index.js
CHANGED
|
@@ -248,6 +248,7 @@ export default{
|
|
|
248
248
|
app.config.globalProperties.info = consoleInfo
|
|
249
249
|
|
|
250
250
|
app.component('Alert', defineAsyncComponent(() => import("./components/Alert.vue")))
|
|
251
|
+
app.component('Article', defineAsyncComponent(() => import("./components/Article.vue")))
|
|
251
252
|
app.component('Block', defineAsyncComponent(() => import("./components/Block.vue")))
|
|
252
253
|
app.component('Button', defineAsyncComponent(() => import("./components/Button.vue")))
|
|
253
254
|
app.component('Box', defineAsyncComponent(() => import("./components/Box.vue")))
|
|
@@ -313,6 +314,8 @@ export default{
|
|
|
313
314
|
|
|
314
315
|
app.component('WebPageBuilder', defineAsyncComponent(() => import("./widgets/WebPageBuilder.vue")))
|
|
315
316
|
app.component('ComponentSetting', defineAsyncComponent(() => import("./widgets/ComponentSetting.vue")))
|
|
317
|
+
app.component('ArticleItem', defineAsyncComponent(() => import("./widgets/ArticleItem.vue")))
|
|
318
|
+
app.component('ArticleSetting', defineAsyncComponent(() => import("./widgets/ArticleSetting.vue")))
|
|
316
319
|
app.component('BlockItem', defineAsyncComponent(() => import("./widgets/BlockItem.vue")))
|
|
317
320
|
app.component('BlockSetting', defineAsyncComponent(() => import("./widgets/BlockSetting.vue")))
|
|
318
321
|
app.component('BoxItem', defineAsyncComponent(() => import("./widgets/BoxItem.vue")))
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="flex-1 flex flex-row items-center gap-2">
|
|
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>
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div :class="$style.comp">
|
|
3
|
+
|
|
4
|
+
<div>
|
|
5
|
+
<label class="text-text-400">Text</label>
|
|
6
|
+
<HTMLEditor class="mt-1" v-model="item.props.htmlText" @change="$emit('change')"/>
|
|
7
|
+
</div>
|
|
8
|
+
|
|
9
|
+
<div class="flex flex-row gap-4">
|
|
10
|
+
<label class="flex-1 text-text-400">Color</label>
|
|
11
|
+
<ColorPicker v-for="(_viewType, index) in viewTypes"
|
|
12
|
+
v-show="_viewType.value === viewType"
|
|
13
|
+
v-model="textColor[index]"
|
|
14
|
+
@change="$emit('change')"
|
|
15
|
+
:prefix="viewType === 'desktop' ? 'md:text-' : 'text-'"
|
|
16
|
+
:custom-color="true">
|
|
17
|
+
</ColorPicker>
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
<div class="grid grid-cols-2 gap-4">
|
|
21
|
+
<div>
|
|
22
|
+
<label class="text-text-400">Font</label>
|
|
23
|
+
<Dropdown v-for="(_, index) in viewTypes"
|
|
24
|
+
v-show="_.value === viewType"
|
|
25
|
+
v-model="fontFamily[index]"
|
|
26
|
+
@change="$emit('change')">
|
|
27
|
+
<option :value="`${viewType}font-sans`">Sans</option>
|
|
28
|
+
<option :value="`${viewType}font-serif`">Serif</option>
|
|
29
|
+
<option :value="`${viewType}font-mono`">Mono</option>
|
|
30
|
+
<option value="">Not Set</option>
|
|
31
|
+
</Dropdown>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<div>
|
|
35
|
+
<label class="text-text-400">Size</label>
|
|
36
|
+
<Dropdown v-for="(_, index) in viewTypes"
|
|
37
|
+
v-show="_.value === viewType"
|
|
38
|
+
v-model="fontSize[index]"
|
|
39
|
+
@change="$emit('change')">
|
|
40
|
+
<option :value="`${viewType}text-xs`">Extra Small</option>
|
|
41
|
+
<option :value="`${viewType}text-sm`">Small</option>
|
|
42
|
+
<option :value="`${viewType}text-base`">Normal</option>
|
|
43
|
+
<option :value="`${viewType}text-lg`">Large</option>
|
|
44
|
+
<option :value="`${viewType}text-xl`">Extra Large</option>
|
|
45
|
+
<option :value="`${viewType}text-2xl`">Extra Large 2</option>
|
|
46
|
+
<option :value="`${viewType}text-3xl`">Extra Large 3</option>
|
|
47
|
+
<option :value="`${viewType}text-4xl`">Extra Large 4</option>
|
|
48
|
+
<option :value="`${viewType}text-5xl`">Extra Large 5</option>
|
|
49
|
+
<option :value="`${viewType}text-6xl`">Extra Large 6</option>
|
|
50
|
+
<option value="">Not Set</option>
|
|
51
|
+
</Dropdown>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<div>
|
|
55
|
+
<label class="text-text-400">Weight</label>
|
|
56
|
+
<Dropdown v-for="(_, index) in viewTypes"
|
|
57
|
+
v-show="_.value === viewType"
|
|
58
|
+
v-model="fontWeight[index]"
|
|
59
|
+
@change="$emit('change')">
|
|
60
|
+
<option :value="`${viewType}font-thin`">Thin</option>
|
|
61
|
+
<option :value="`${viewType}font-extralight`">Extra Light</option>
|
|
62
|
+
<option :value="`${viewType}font-light`">Light</option>
|
|
63
|
+
<option :value="`${viewType}font-normal`">Normal</option>
|
|
64
|
+
<option :value="`${viewType}font-medium`">Medium</option>
|
|
65
|
+
<option :value="`${viewType}font-semibold`">Semi Bold</option>
|
|
66
|
+
<option :value="`${viewType}font-bold`">Bold</option>
|
|
67
|
+
<option :value="`${viewType}font-extrabold`">Extra Bold</option>
|
|
68
|
+
<option :value="`${viewType}font-black`">Black</option>
|
|
69
|
+
</Dropdown>
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
<div>
|
|
73
|
+
<label class="text-text-400">Line Height</label>
|
|
74
|
+
<Dropdown v-for="(_, index) in viewTypes"
|
|
75
|
+
v-show="_.value === viewType"
|
|
76
|
+
v-model="lineHeight[index]"
|
|
77
|
+
class="mt-1"
|
|
78
|
+
@change="$emit('change')">
|
|
79
|
+
<option :value="`${viewType}leading-3`">Leading 3</option>
|
|
80
|
+
<option :value="`${viewType}leading-4`">Leading 4</option>
|
|
81
|
+
<option :value="`${viewType}leading-5`">Leading 5</option>
|
|
82
|
+
<option :value="`${viewType}leading-6`">Leading 6</option>
|
|
83
|
+
<option :value="`${viewType}leading-7`">Leading 7</option>
|
|
84
|
+
<option :value="`${viewType}leading-8`">Leading 8</option>
|
|
85
|
+
<option :value="`${viewType}leading-9`">Leading 9</option>
|
|
86
|
+
<option :value="`${viewType}leading-10`">Leading 10</option>
|
|
87
|
+
<option :value="`${viewType}leading-tight`">Tight</option>
|
|
88
|
+
<option :value="`${viewType}leading-snug`">Snug</option>
|
|
89
|
+
<option :value="`${viewType}leading-normal`">Normal</option>
|
|
90
|
+
<option :value="`${viewType}leading-relaxed`">Relaxed</option>
|
|
91
|
+
<option :value="`${viewType}leading-loose`">Loose</option>
|
|
92
|
+
<option value="">Not Set</option>
|
|
93
|
+
</Dropdown>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
</div>
|
|
97
|
+
|
|
98
|
+
<ComponentSetting :item="item"
|
|
99
|
+
:view-type="viewType"
|
|
100
|
+
:view-types="viewTypes"
|
|
101
|
+
defaultDisplay="block"
|
|
102
|
+
@change="$emit('change')" />
|
|
103
|
+
|
|
104
|
+
</div>
|
|
105
|
+
</template>
|
|
106
|
+
|
|
107
|
+
<script>
|
|
108
|
+
|
|
109
|
+
export default{
|
|
110
|
+
|
|
111
|
+
emits: [ 'change' ],
|
|
112
|
+
|
|
113
|
+
props: {
|
|
114
|
+
|
|
115
|
+
item: {
|
|
116
|
+
type: Object,
|
|
117
|
+
required: true
|
|
118
|
+
},
|
|
119
|
+
|
|
120
|
+
viewType: String,
|
|
121
|
+
|
|
122
|
+
viewTypes: Array,
|
|
123
|
+
|
|
124
|
+
},
|
|
125
|
+
|
|
126
|
+
computed: {
|
|
127
|
+
|
|
128
|
+
fontFamily(){
|
|
129
|
+
if(!Array.isArray(this.item.props.fontFamily))
|
|
130
|
+
this.item.props.fontFamily = []
|
|
131
|
+
|
|
132
|
+
return this.item.props.fontFamily
|
|
133
|
+
},
|
|
134
|
+
|
|
135
|
+
fontSize(){
|
|
136
|
+
if(!Array.isArray(this.item.props.fontSize))
|
|
137
|
+
this.item.props.fontSize = []
|
|
138
|
+
|
|
139
|
+
return this.item.props.fontSize
|
|
140
|
+
},
|
|
141
|
+
|
|
142
|
+
fontWeight(){
|
|
143
|
+
if(!Array.isArray(this.item.props.fontWeight))
|
|
144
|
+
this.item.props.fontWeight = []
|
|
145
|
+
|
|
146
|
+
return this.item.props.fontWeight
|
|
147
|
+
},
|
|
148
|
+
|
|
149
|
+
lineHeight(){
|
|
150
|
+
if(!Array.isArray(this.item.props.lineHeight))
|
|
151
|
+
this.item.props.lineHeight = []
|
|
152
|
+
|
|
153
|
+
return this.item.props.lineHeight
|
|
154
|
+
},
|
|
155
|
+
|
|
156
|
+
textColor(){
|
|
157
|
+
if(!Array.isArray(this.item.props.textColor))
|
|
158
|
+
this.item.props.textColor = []
|
|
159
|
+
|
|
160
|
+
return this.item.props.textColor
|
|
161
|
+
},
|
|
162
|
+
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
</script>
|
|
168
|
+
|
|
169
|
+
<style module>
|
|
170
|
+
|
|
171
|
+
.comp{
|
|
172
|
+
@apply flex flex-col gap-4;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
</style>
|
|
@@ -5,33 +5,6 @@
|
|
|
5
5
|
v-show="viewType === _.value">
|
|
6
6
|
<div class="grid grid-cols-2 gap-4">
|
|
7
7
|
|
|
8
|
-
<div class="col-span-2">
|
|
9
|
-
<div class="flex flex-row gap-2">
|
|
10
|
-
<label class="flex-1 text-text-400">Items</label>
|
|
11
|
-
<button type="button" class="text-primary"
|
|
12
|
-
@click="$refs.imageModal.open({ viewType, item:{ type:'Image', props:{ src:[], margin:[], padding:[], bdColor:[], bdSize:[ '0' ], bdRadius:[], bdStyle:[ 'solid' ] } } })">Add Item</button>
|
|
13
|
-
</div>
|
|
14
|
-
<ListItem :items="item.props.items" class="mt-1"
|
|
15
|
-
@reorder="(from, to) => { item.props.items.splice(to, 0, item.props.items.splice(from, 1)[0]); $emit('change') }">
|
|
16
|
-
<template v-slot="{ item:comp, index }">
|
|
17
|
-
<div class="flex flex-row gap-3 p-2 bg-base-500 items-center rounded-lg mb-2">
|
|
18
|
-
<div data-reorder>
|
|
19
|
-
<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>
|
|
20
|
-
</div>
|
|
21
|
-
<div class="flex-1"
|
|
22
|
-
@click="$refs.imageModal.open({ item:comp, index, viewType })">
|
|
23
|
-
<component :is="`${comp.type}Item`" :item="comp" :viewType="viewType" :viewTypes="viewTypes" />
|
|
24
|
-
</div>
|
|
25
|
-
<div>
|
|
26
|
-
<button type="button" @click="confirm('Remove item?', { onConfirm: () => { item.props.items.splice(index, 1); $emit('change') }})">
|
|
27
|
-
<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>
|
|
28
|
-
</button>
|
|
29
|
-
</div>
|
|
30
|
-
</div>
|
|
31
|
-
</template>
|
|
32
|
-
</ListItem>
|
|
33
|
-
</div>
|
|
34
|
-
|
|
35
8
|
<div>
|
|
36
9
|
<label class="text-text-400">Ratio</label>
|
|
37
10
|
<Dropdown v-model="item.props.ratio[idx]" class="mt-1" @change="$emit('change')">
|
|
@@ -105,8 +78,8 @@
|
|
|
105
78
|
<template #foot="{ context }">
|
|
106
79
|
<div class="p-5">
|
|
107
80
|
<Button type="button" class="w-full" @click="context.index >= 0 ?
|
|
108
|
-
item.
|
|
109
|
-
item.
|
|
81
|
+
item.items[context.index] = context.item :
|
|
82
|
+
item.items.push(context.item);
|
|
110
83
|
$refs.imageModal.close();
|
|
111
84
|
$emit('change')
|
|
112
85
|
">
|
|
@@ -154,6 +127,12 @@ export default{
|
|
|
154
127
|
|
|
155
128
|
imageRatio(){
|
|
156
129
|
return 'aspect-[4/1] md:aspect-[8/1]'
|
|
130
|
+
},
|
|
131
|
+
|
|
132
|
+
items(){
|
|
133
|
+
if(!Array.isArray(this.item.items))
|
|
134
|
+
this.item.items = []
|
|
135
|
+
return this.item.items
|
|
157
136
|
}
|
|
158
137
|
|
|
159
138
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div :class="
|
|
2
|
+
<div :class="compClass">
|
|
3
3
|
<div :class="$style.form">
|
|
4
4
|
|
|
5
5
|
<div>
|
|
@@ -49,6 +49,7 @@ export default{
|
|
|
49
49
|
padding: Array,
|
|
50
50
|
enabled: undefined,
|
|
51
51
|
name: String,
|
|
52
|
+
class: String,
|
|
52
53
|
|
|
53
54
|
title: String,
|
|
54
55
|
description: String,
|
|
@@ -89,8 +90,6 @@ export default{
|
|
|
89
90
|
compClass(){
|
|
90
91
|
return [
|
|
91
92
|
this.$style.comp,
|
|
92
|
-
this.status === 1 && this.spinnerType === 'shimmer' && !this.$slots['loading'] ?
|
|
93
|
-
this.$style.shimmer : '',
|
|
94
93
|
this.extClass,
|
|
95
94
|
this.class ?? ''
|
|
96
95
|
]
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
<div class="flex flex-row items-center gap-2 p-3 bg-base-500 rounded-lg">
|
|
24
24
|
<svg data-reorder 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>
|
|
25
25
|
<div class="flex-1 px-2">
|
|
26
|
-
<label>{{ field.type }}</label>
|
|
26
|
+
<label>{{ field.label ?? field.type }}</label>
|
|
27
27
|
</div>
|
|
28
28
|
<button type="button" @click="confirm($t('Remove this item?'), '', () => { item.props.fields.splice(index, 1); $emit('change') })">
|
|
29
29
|
<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>
|
|
@@ -108,25 +108,10 @@
|
|
|
108
108
|
|
|
109
109
|
<ContextMenu ref="fieldOpt" position="bottom-right">
|
|
110
110
|
<div class="flex flex-col gap-1 min-w-[120px]">
|
|
111
|
-
<button
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
<button class="p-3 bg-base-500 text-left pl-8 hover:bg-text-50"
|
|
116
|
-
@click="item.props.fields.push({ type:'mobileNumber', label:'Nomor HP' });$emit('change')">
|
|
117
|
-
Mobile Number
|
|
118
|
-
</button>
|
|
119
|
-
<button class="p-3 bg-base-500 text-left pl-8 hover:bg-text-50"
|
|
120
|
-
@click="item.props.fields.push({ type:'email', label:'Email' });$emit('change')">
|
|
121
|
-
Email
|
|
122
|
-
</button>
|
|
123
|
-
<button class="p-3 bg-base-500 text-left pl-8 hover:bg-text-50"
|
|
124
|
-
@click="item.props.fields.push({ type:'remark', label:'Pertanyaan' });$emit('change')">
|
|
125
|
-
Pertanyaan
|
|
126
|
-
</button>
|
|
127
|
-
<button class="p-3 bg-base-500 text-left pl-8 hover:bg-text-50"
|
|
128
|
-
@click="item.props.fields.push({ type:'referralCode', label:'Kode Referral (optional)' });$emit('change')">
|
|
129
|
-
Referral Code
|
|
111
|
+
<button v-for="field in fields"
|
|
112
|
+
class="p-3 bg-base-500 text-left pl-8 hover:bg-text-50"
|
|
113
|
+
@click="item.props.fields.push(field);$emit('change')">
|
|
114
|
+
{{ field.label }}
|
|
130
115
|
</button>
|
|
131
116
|
</div>
|
|
132
117
|
</ContextMenu>
|
|
@@ -164,6 +149,25 @@ export default{
|
|
|
164
149
|
|
|
165
150
|
},
|
|
166
151
|
|
|
152
|
+
data(){
|
|
153
|
+
return {
|
|
154
|
+
fields: [
|
|
155
|
+
{ type:'name', label:'Nama' },
|
|
156
|
+
{ type:'mobileNumber', label:'Nomor HP' },
|
|
157
|
+
{ type:'email', label:'Email' },
|
|
158
|
+
{ type:'remark', label:'Pertanyaan' },
|
|
159
|
+
{ type:'referralCode', label:'Kode Referral (optional)' },
|
|
160
|
+
{ type:'ktpNumber', label:'Nomor KTP' },
|
|
161
|
+
{ type:'birthDate', label:'Tanggal Lahir' },
|
|
162
|
+
{ type:'position', label:'Jabatan yang Dilamar' },
|
|
163
|
+
{ type:'provinceName', label:'Propinsi Domisili' },
|
|
164
|
+
{ type:'education', label:'Pendidikan Terakhir' },
|
|
165
|
+
{ type:'major', label:'Jurusan' },
|
|
166
|
+
{ type:'university', label:'Nama Sekolah/Institusi/Universitas' },
|
|
167
|
+
]
|
|
168
|
+
}
|
|
169
|
+
},
|
|
170
|
+
|
|
167
171
|
methods: {
|
|
168
172
|
|
|
169
173
|
addField(type){
|
package/src/widgets/IconList.vue
CHANGED
|
@@ -564,6 +564,7 @@ export default{
|
|
|
564
564
|
},
|
|
565
565
|
|
|
566
566
|
generateExtClass(props){
|
|
567
|
+
if(!props || typeof props !== 'object') return ''
|
|
567
568
|
|
|
568
569
|
return [
|
|
569
570
|
props.padding ? props.padding.join(' ') : '',
|
|
@@ -604,7 +605,6 @@ export default{
|
|
|
604
605
|
]
|
|
605
606
|
.filter(_ => _)
|
|
606
607
|
.join(' ')
|
|
607
|
-
|
|
608
608
|
},
|
|
609
609
|
|
|
610
610
|
setExtClass(components){
|
|
@@ -618,6 +618,14 @@ export default{
|
|
|
618
618
|
comp.items = this.setExtClass(comp.items)
|
|
619
619
|
}
|
|
620
620
|
|
|
621
|
+
if(comp.props && Array.isArray(comp.props.items)){
|
|
622
|
+
comp.props.items = this.setExtClass(comp.props.items)
|
|
623
|
+
}
|
|
624
|
+
|
|
625
|
+
if(comp.type === 'Carousel'){
|
|
626
|
+
console.log('Carousel', comp)
|
|
627
|
+
}
|
|
628
|
+
|
|
621
629
|
return comp
|
|
622
630
|
})
|
|
623
631
|
},
|
|
@@ -815,9 +823,9 @@ export default{
|
|
|
815
823
|
|
|
816
824
|
components: [
|
|
817
825
|
|
|
818
|
-
{ type:'Carousel', name:'Carousel', group:'Widgets', props:{
|
|
826
|
+
{ type:'Carousel', name:'Carousel', group:'Widgets', items:[], props:{
|
|
819
827
|
name: 'Untitled Carousel',
|
|
820
|
-
ratio:[ '4/3', '8/3' ]
|
|
828
|
+
ratio:[ '4/3', '8/3' ]
|
|
821
829
|
}},
|
|
822
830
|
|
|
823
831
|
{ type:'ContactForm', name:'Contact Form', group:'Widgets', props:{
|
|
@@ -864,6 +872,7 @@ export default{
|
|
|
864
872
|
src:[],
|
|
865
873
|
}},
|
|
866
874
|
|
|
875
|
+
{ type:'Article', name:'Article', group:'Components', props:{} },
|
|
867
876
|
|
|
868
877
|
{ type:'Paragraph', name:'Paragraph', group:'Components', props:{} },
|
|
869
878
|
|
|
@@ -0,0 +1,243 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
content: [
|
|
3
|
+
"./index.html",
|
|
4
|
+
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
|
5
|
+
"./node_modules/@mixd-id/web-scaffold/src/**/*.{vue,js,ts,jsx,tsx}",
|
|
6
|
+
],
|
|
7
|
+
plugins: [
|
|
8
|
+
/*require('@tailwindcss/line-clamp'),*/
|
|
9
|
+
/*require('@mixd-id/web-scaffold/themes/default'),*/
|
|
10
|
+
require('./src/views/themes')
|
|
11
|
+
],
|
|
12
|
+
darkMode: 'class',
|
|
13
|
+
important: true,
|
|
14
|
+
theme: {
|
|
15
|
+
extend: {
|
|
16
|
+
height: {
|
|
17
|
+
'10vh': '10vh',
|
|
18
|
+
'20vh': '20vh',
|
|
19
|
+
'30vh': '30vh',
|
|
20
|
+
'40vh': '40vh',
|
|
21
|
+
'50vh': '50vh',
|
|
22
|
+
'60vh': '60vh',
|
|
23
|
+
'70vh': '70vh',
|
|
24
|
+
'80vh': '80vh',
|
|
25
|
+
'90vh': '90vh',
|
|
26
|
+
'100vh': '100vh',
|
|
27
|
+
},
|
|
28
|
+
backgroundSize: {
|
|
29
|
+
'50%': '50%',
|
|
30
|
+
'40%' : '40%',
|
|
31
|
+
'30%' : '30%',
|
|
32
|
+
'20%' : '20%',
|
|
33
|
+
'10%' : '10%',
|
|
34
|
+
},
|
|
35
|
+
minWidth: {
|
|
36
|
+
'0': '0',
|
|
37
|
+
'1/12': '8%',
|
|
38
|
+
'2/12': '16%',
|
|
39
|
+
'3/12': '25%',
|
|
40
|
+
'4/12': '33%',
|
|
41
|
+
'5/12': '41%',
|
|
42
|
+
'6/12': '50%',
|
|
43
|
+
'7/12': '58%',
|
|
44
|
+
'8/12': '66%',
|
|
45
|
+
'9/12': '75%',
|
|
46
|
+
'10/12': '83%',
|
|
47
|
+
'11/12': '91%',
|
|
48
|
+
'full': '100%',
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
safelist: [
|
|
53
|
+
'rounded-l-none', 'rounded-r-none',
|
|
54
|
+
|
|
55
|
+
'p-1', 'p-2', 'p-3', 'p-4', 'p-5', 'p-6', 'p-7', 'p-8',
|
|
56
|
+
'md:p-1', 'md:p-2', 'md:p-3', 'md:p-4', 'md:p-5', 'md:p-6', 'md:p-7', 'md:p-8',
|
|
57
|
+
'px-1', 'px-2', 'px-3', 'px-4', 'px-5', 'px-6', 'px-7', 'px-8',
|
|
58
|
+
'md:px-1', 'md:px-2', 'md:px-3', 'md:px-4', 'md:px-5', 'md:px-6', 'md:px-7', 'md:px-8',
|
|
59
|
+
'py-1', 'py-2', 'py-3', 'py-4', 'py-5', 'py-6', 'py-7', 'py-8',
|
|
60
|
+
'md:py-1', 'md:py-2', 'md:py-3', 'md:py-4', 'md:py-5', 'md:py-6', 'md:py-7', 'md:py-8',
|
|
61
|
+
'pl-1', 'pl-2', 'pl-3', 'pl-4', 'pl-5', 'pl-6', 'pl-7', 'pl-8',
|
|
62
|
+
'md:pl-1', 'md:pl-2', 'md:pl-3', 'md:pl-4', 'md:pl-5', 'md:pl-6', 'md:pl-7', 'md:pl-8',
|
|
63
|
+
'pt-1', 'pt-2', 'pt-3', 'pt-4', 'pt-5', 'pt-6', 'pt-7', 'pt-8',
|
|
64
|
+
'md:pt-1', 'md:pt-2', 'md:pt-3', 'md:pt-4', 'md:pt-5', 'md:pt-6', 'md:pt-7', 'md:pt-8',
|
|
65
|
+
'pr-1', 'pr-2', 'pr-3', 'pr-4', 'pr-5', 'pr-6', 'pr-7', 'pr-8',
|
|
66
|
+
'md:pr-1', 'md:pr-2', 'md:pr-3', 'md:pr-4', 'md:pr-5', 'md:pr-6', 'md:pr-7', 'md:pr-8',
|
|
67
|
+
'pb-1', 'pb-2', 'pb-3', 'pb-4', 'pb-5', 'pb-6', 'pb-7', 'pb-8',
|
|
68
|
+
'md:pb-1', 'md:pb-2', 'md:pb-3', 'md:pb-4', 'md:pb-5', 'md:pb-6', 'md:pb-7', 'md:pb-8',
|
|
69
|
+
|
|
70
|
+
'block', 'grid', 'flex',
|
|
71
|
+
'md:block', 'md:grid', 'md:flex',
|
|
72
|
+
|
|
73
|
+
'm-1', 'm-2', 'm-3', 'm-4', 'm-5', 'm-6', 'm-7', 'm-8',
|
|
74
|
+
'md:m-1', 'md:m-2', 'md:m-3', 'md:m-4', 'md:m-5', 'md:m-6', 'md:m-7', 'md:m-8',
|
|
75
|
+
'mx-1', 'mx-2', 'mx-3', 'mx-4', 'mx-5', 'mx-6', 'mx-7', 'mx-8',
|
|
76
|
+
'md:mx-1', 'md:mx-2', 'md:mx-3', 'md:mx-4', 'md:mx-5', 'md:mx-6', 'md:mx-7', 'md:mx-8',
|
|
77
|
+
'my-1', 'my-2', 'my-3', 'my-4', 'my-5', 'my-6', 'my-7', 'my-8',
|
|
78
|
+
'md:my-1', 'md:my-2', 'md:my-3', 'md:my-4', 'md:my-5', 'md:my-6', 'md:my-7', 'md:my-8',
|
|
79
|
+
'ml-1', 'ml-2', 'ml-3', 'ml-4', 'ml-5', 'ml-6', 'ml-7', 'ml-8',
|
|
80
|
+
'md:ml-1', 'md:ml-2', 'md:ml-3', 'md:ml-4', 'md:ml-5', 'md:ml-6', 'md:ml-7', 'md:ml-8',
|
|
81
|
+
'mt-1', 'mt-2', 'mt-3', 'mt-4', 'mt-5', 'mt-6', 'mt-7', 'mt-8',
|
|
82
|
+
'md:mt-1', 'md:mt-2', 'md:mt-3', 'md:mt-4', 'md:mt-5', 'md:mt-6', 'md:mt-7', 'md:mt-8',
|
|
83
|
+
'mr-1', 'mr-2', 'mr-3', 'mr-4', 'mr-5', 'mr-6', 'mr-7', 'mr-8',
|
|
84
|
+
'md:mr-1', 'md:mr-2', 'md:mr-3', 'md:mr-4', 'md:mr-5', 'md:mr-6', 'md:mr-7', 'md:mr-8',
|
|
85
|
+
'mb-1', 'mb-2', 'mb-3', 'mb-4', 'mb-5', 'mb-6', 'mb-7', 'mb-8',
|
|
86
|
+
'md:mb-1', 'md:mb-2', 'md:mb-3', 'md:mb-4', 'md:mb-5', 'md:mb-6', 'md:mb-7', 'md:mb-8',
|
|
87
|
+
'mx-auto',
|
|
88
|
+
'md:mx-auto',
|
|
89
|
+
|
|
90
|
+
'grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4', 'grid-cols-5', 'grid-cols-6', 'grid-cols-7', 'grid-cols-8',
|
|
91
|
+
'md:grid-cols-1', 'md:grid-cols-2', 'md:grid-cols-3', 'md:grid-cols-4', 'md:grid-cols-5', 'md:grid-cols-6', 'md:grid-cols-7', 'md:grid-cols-8',
|
|
92
|
+
|
|
93
|
+
'aspect-[2/1]', 'aspect-[4/1]', 'aspect-[4/3]', 'aspect-[8/1]', 'aspect-[8/3]', 'aspect-[8/5.6]',
|
|
94
|
+
'md:aspect-[2/1]', 'md:aspect-[4/1]', 'md:aspect-[4/3]', 'md:aspect-[8/1]', 'md:aspect-[8/3]', 'md:aspect-[8/5.6]',
|
|
95
|
+
|
|
96
|
+
'gap-0', 'gap-1', 'gap-2', 'gap-3', 'gap-4', 'gap-5', 'gap-6', 'gap-7', 'gap-8',
|
|
97
|
+
'md:gap-0', 'md:gap-1', 'md:gap-2', 'md:gap-3', 'md:gap-4', 'md:gap-5', 'md:gap-6', 'md:gap-7', 'md:gap-8',
|
|
98
|
+
|
|
99
|
+
'justify-start', 'justify-center', 'justify-end',
|
|
100
|
+
'md:justify-start', 'md:justify-center', 'md:justify-end',
|
|
101
|
+
|
|
102
|
+
'max-w-none', 'max-w-0', 'max-w-xs', 'max-w-sm', 'max-w-md', 'max-w-lg', 'max-w-xl', 'max-w-2xl', 'max-w-3xl', 'max-w-4xl',
|
|
103
|
+
'max-w-screen-sm', 'max-w-screen-md', 'max-w-screen-lg', 'max-w-screen-xl', 'max-w-screen-2xl',
|
|
104
|
+
'md:max-w-none', 'md:max-w-0', 'md:max-w-xs', 'md:max-w-sm', 'md:max-w-md', 'md:max-w-lg', 'md:max-w-xl', 'md:max-w-2xl', 'md:max-w-3xl', 'md:max-w-4xl',
|
|
105
|
+
'md:max-w-screen-sm', 'md:max-w-screen-md', 'md:max-w-screen-lg', 'md:max-w-screen-xl', 'md:max-w-screen-2xl',
|
|
106
|
+
|
|
107
|
+
'bg-primary-50', 'bg-primary-100', 'bg-primary-200', 'bg-primary-300', 'bg-primary-400', 'bg-primary-500',
|
|
108
|
+
'bg-primary-600', 'bg-primary-700', 'bg-primary-800', 'bg-primary-900',
|
|
109
|
+
'md:bg-primary-50', 'md:bg-primary-100', 'md:bg-primary-200', 'md:bg-primary-300', 'md:bg-primary-400', 'md:bg-primary-500',
|
|
110
|
+
'md:bg-primary-600', 'md:bg-primary-700', 'md:bg-primary-800', 'md:bg-primary-900',
|
|
111
|
+
'border-primary-50', 'border-primary-100', 'border-primary-200', 'border-primary-300', 'border-primary-400', 'border-primary-500',
|
|
112
|
+
'border-primary-600', 'border-primary-700', 'border-primary-800', 'border-primary-900',
|
|
113
|
+
'md:border-primary-50', 'md:border-primary-100', 'md:border-primary-200', 'md:border-primary-300', 'md:border-primary-400', 'md:border-primary-500',
|
|
114
|
+
'md:border-primary-600', 'md:border-primary-700', 'md:border-primary-800', 'md:border-primary-900',
|
|
115
|
+
'text-primary-50', 'text-primary-100', 'text-primary-200', 'text-primary-300', 'text-primary-400', 'text-primary-500',
|
|
116
|
+
'text-primary-600', 'text-primary-700', 'text-primary-800', 'text-primary-900',
|
|
117
|
+
'md:text-primary-50', 'md:text-primary-100', 'md:text-primary-200', 'md:text-primary-300', 'md:text-primary-400', 'md:text-primary-500',
|
|
118
|
+
'md:text-primary-600', 'md:text-primary-700', 'md:text-primary-800', 'md:text-primary-900',
|
|
119
|
+
|
|
120
|
+
'bg-auto', 'bg-cover', 'bg-contain', 'bg-50%', 'bg-40%', 'bg-30%', 'bg-20%', 'bg-10%',
|
|
121
|
+
'md:bg-auto', 'md:bg-cover', 'md:bg-contain', 'md:bg-50%', 'md:bg-40%', 'md:bg-30%', 'md:bg-20%', 'md:bg-10%',
|
|
122
|
+
|
|
123
|
+
'bg-gray-50', 'bg-gray-100', 'bg-gray-200', 'bg-gray-300', 'bg-gray-400', 'bg-gray-500',
|
|
124
|
+
'bg-gray-600', 'bg-gray-700', 'bg-gray-800', 'bg-gray-900',
|
|
125
|
+
'md:bg-gray-50', 'md:bg-gray-100', 'md:bg-gray-200', 'md:bg-gray-300', 'md:bg-gray-400', 'md:bg-gray-500',
|
|
126
|
+
'md:bg-gray-600', 'md:bg-gray-700', 'md:bg-gray-800', 'md:bg-gray-900',
|
|
127
|
+
'border-gray-50', 'border-gray-100', 'border-gray-200', 'border-gray-300', 'border-gray-400', 'border-gray-500',
|
|
128
|
+
'border-gray-600', 'border-gray-700', 'border-gray-800', 'border-gray-900',
|
|
129
|
+
'md:border-gray-50', 'md:border-gray-100', 'md:border-gray-200', 'md:border-gray-300', 'md:border-gray-400', 'md:border-gray-500',
|
|
130
|
+
'md:border-gray-600', 'md:border-gray-700', 'md:border-gray-800', 'md:border-gray-900',
|
|
131
|
+
'text-gray-50', 'text-gray-100', 'text-gray-200', 'text-gray-300', 'text-gray-400', 'text-gray-500',
|
|
132
|
+
'text-gray-600', 'text-gray-700', 'text-gray-800', 'text-gray-900',
|
|
133
|
+
'md:text-gray-50', 'md:text-gray-100', 'md:text-gray-200', 'md:text-gray-300', 'md:text-gray-400', 'md:text-gray-500',
|
|
134
|
+
'md:text-gray-600', 'md:text-gray-700', 'md:text-gray-800', 'md:text-gray-900',
|
|
135
|
+
|
|
136
|
+
'bg-red-50', 'bg-red-100', 'bg-red-200', 'bg-red-300', 'bg-red-400', 'bg-red-500',
|
|
137
|
+
'bg-red-600', 'bg-red-700', 'bg-red-800', 'bg-red-900',
|
|
138
|
+
'md:bg-red-50', 'md:bg-red-100', 'md:bg-red-200', 'md:bg-red-300', 'md:bg-red-400', 'md:bg-red-500',
|
|
139
|
+
'md:bg-red-600', 'md:bg-red-700', 'md:bg-red-800', 'md:bg-red-900',
|
|
140
|
+
'border-red-50', 'border-red-100', 'border-red-200', 'border-red-300', 'border-red-400', 'border-red-500',
|
|
141
|
+
'border-red-600', 'border-red-700', 'border-red-800', 'border-red-900',
|
|
142
|
+
'md:border-red-50', 'md:border-red-100', 'md:border-red-200', 'md:border-red-300', 'md:border-red-400', 'md:border-red-500',
|
|
143
|
+
'md:border-red-600', 'md:border-red-700', 'md:border-red-800', 'md:border-red-900',
|
|
144
|
+
'text-red-50', 'text-red-100', 'text-red-200', 'text-red-300', 'text-red-400', 'text-red-500',
|
|
145
|
+
'text-red-600', 'text-red-700', 'text-red-800', 'text-red-900',
|
|
146
|
+
'md:text-red-50', 'md:text-red-100', 'md:text-red-200', 'md:text-red-300', 'md:text-red-400', 'md:text-red-500',
|
|
147
|
+
'md:text-red-600', 'md:text-red-700', 'md:text-red-800', 'md:text-red-900',
|
|
148
|
+
|
|
149
|
+
'bg-lime-50', 'bg-lime-100', 'bg-lime-200', 'bg-lime-300', 'bg-lime-400', 'bg-lime-500',
|
|
150
|
+
'bg-lime-600', 'bg-lime-700', 'bg-lime-800', 'bg-lime-900',
|
|
151
|
+
'md:bg-lime-50', 'md:bg-lime-100', 'md:bg-lime-200', 'md:bg-lime-300', 'md:bg-lime-400', 'md:bg-lime-500',
|
|
152
|
+
'md:bg-lime-600', 'md:bg-lime-700', 'md:bg-lime-800', 'md:bg-lime-900',
|
|
153
|
+
'border-lime-50', 'border-lime-100', 'border-lime-200', 'border-lime-300', 'border-lime-400', 'border-lime-500',
|
|
154
|
+
'border-lime-600', 'border-lime-700', 'border-lime-800', 'border-lime-900',
|
|
155
|
+
'md:border-lime-50', 'md:border-lime-100', 'md:border-lime-200', 'md:border-lime-300', 'md:border-lime-400', 'md:border-lime-500',
|
|
156
|
+
'md:border-lime-600', 'md:border-lime-700', 'md:border-lime-800', 'md:border-lime-900',
|
|
157
|
+
'text-lime-50', 'text-lime-100', 'text-lime-200', 'text-lime-300', 'text-lime-400', 'text-lime-500',
|
|
158
|
+
'text-lime-600', 'text-lime-700', 'text-lime-800', 'text-lime-900',
|
|
159
|
+
'md:text-lime-50', 'md:text-lime-100', 'md:text-lime-200', 'md:text-lime-300', 'md:text-lime-400', 'md:text-lime-500',
|
|
160
|
+
'md:text-lime-600', 'md:text-lime-700', 'md:text-lime-800', 'md:text-lime-900',
|
|
161
|
+
|
|
162
|
+
'bg-blue-50', 'bg-blue-100', 'bg-blue-200', 'bg-blue-300', 'bg-blue-400', 'bg-blue-500',
|
|
163
|
+
'bg-blue-600', 'bg-blue-700', 'bg-blue-800', 'bg-blue-900',
|
|
164
|
+
'md:bg-blue-50', 'md:bg-blue-100', 'md:bg-blue-200', 'md:bg-blue-300', 'md:bg-blue-400', 'md:bg-blue-500',
|
|
165
|
+
'md:bg-blue-600', 'md:bg-blue-700', 'md:bg-blue-800', 'md:bg-blue-900',
|
|
166
|
+
'border-blue-50', 'border-blue-100', 'border-blue-200', 'border-blue-300', 'border-blue-400', 'border-blue-500',
|
|
167
|
+
'border-blue-600', 'border-blue-700', 'border-blue-800', 'border-blue-900',
|
|
168
|
+
'md:border-blue-50', 'md:border-blue-100', 'md:border-blue-200', 'md:border-blue-300', 'md:border-blue-400', 'md:border-blue-500',
|
|
169
|
+
'md:border-blue-600', 'md:border-blue-700', 'md:border-blue-800', 'md:border-blue-900',
|
|
170
|
+
'text-blue-50', 'text-blue-100', 'text-blue-200', 'text-blue-300', 'text-blue-400', 'text-blue-500',
|
|
171
|
+
'text-blue-600', 'text-blue-700', 'text-blue-800', 'text-blue-900',
|
|
172
|
+
'md:text-blue-50', 'md:text-blue-100', 'md:text-blue-200', 'md:text-blue-300', 'md:text-blue-400', 'md:text-blue-500',
|
|
173
|
+
'md:text-blue-600', 'md:text-blue-700', 'md:text-blue-800', 'md:text-blue-900',
|
|
174
|
+
|
|
175
|
+
'bg-amber-50', 'bg-amber-100', 'bg-amber-200', 'bg-amber-300', 'bg-amber-400', 'bg-amber-500',
|
|
176
|
+
'bg-amber-600', 'bg-amber-700', 'bg-amber-800', 'bg-amber-900',
|
|
177
|
+
'md:bg-amber-50', 'md:bg-amber-100', 'md:bg-amber-200', 'md:bg-amber-300', 'md:bg-amber-400', 'md:bg-amber-500',
|
|
178
|
+
'md:bg-amber-600', 'md:bg-amber-700', 'md:bg-amber-800', 'md:bg-amber-900',
|
|
179
|
+
'border-amber-50', 'border-amber-100', 'border-amber-200', 'border-amber-300', 'border-amber-400', 'border-amber-500',
|
|
180
|
+
'border-amber-600', 'border-amber-700', 'border-amber-800', 'border-amber-900',
|
|
181
|
+
'md:border-amber-50', 'md:border-amber-100', 'md:border-amber-200', 'md:border-amber-300', 'md:border-amber-400', 'md:border-amber-500',
|
|
182
|
+
'md:border-amber-600', 'md:border-amber-700', 'md:border-amber-800', 'md:border-amber-900',
|
|
183
|
+
'text-amber-50', 'text-amber-100', 'text-amber-200', 'text-amber-300', 'text-amber-400', 'text-amber-500',
|
|
184
|
+
'text-amber-600', 'text-amber-700', 'text-amber-800', 'text-amber-900',
|
|
185
|
+
'md:text-amber-50', 'md:text-amber-100', 'md:text-amber-200', 'md:text-amber-300', 'md:text-amber-400', 'md:text-amber-500',
|
|
186
|
+
'md:text-amber-600', 'md:text-amber-700', 'md:text-amber-800', 'md:text-amber-900',
|
|
187
|
+
|
|
188
|
+
'basis-1/12', 'basis-2/12', 'basis-3/12', 'basis-4/12', 'basis-5/12', 'basis-6/12', 'basis-7/12',
|
|
189
|
+
'basis-8/12', 'basis-9/12', 'basis-10/12', 'basis-11/12', 'basis-full', 'flex-0', 'flex-1',
|
|
190
|
+
'md:basis-1/12', 'md:basis-2/12', 'md:basis-3/12', 'md:basis-4/12', 'md:basis-5/12', 'md:basis-6/12', 'md:basis-7/12',
|
|
191
|
+
'md:basis-8/12', 'md:basis-9/12', 'md:basis-10/12', 'md:basis-11/12', 'md:basis-full', 'md:flex-0', 'md:flex-1',
|
|
192
|
+
|
|
193
|
+
'min-w-1/12', 'min-w-2/12', 'min-w-3/12', 'min-w-4/12', 'min-w-5/12', 'min-w-6/12',
|
|
194
|
+
'min-w-7/12', 'min-w-8/12', 'min-w-9/12', 'min-w-10/12', 'min-w-11/12', 'min-w-full',
|
|
195
|
+
'md:min-w-1/12', 'md:min-w-2/12', 'md:min-w-3/12', 'md:min-w-4/12', 'md:min-w-5/12', 'md:min-w-6/12',
|
|
196
|
+
'md:min-w-7/12', 'md:min-w-8/12', 'md:min-w-9/12', 'md:min-w-10/12', 'md:min-w-11/12', 'md:min-w-full',
|
|
197
|
+
|
|
198
|
+
'w-1', 'w-2', 'w-3', 'w-4', 'w-5', 'w-20', 'w-24', 'w-28', 'w-32', 'w-36', 'w-48', 'w-screen', 'w-full',
|
|
199
|
+
'md:w-1', 'md:w-2', 'md:w-3', 'md:w-4', 'md:w-5', 'md:w-20', 'md:w-24', 'md:w-28', 'md:w-32', 'md:w-36', 'md:w-48', 'md:w-screen', 'md:w-full',
|
|
200
|
+
|
|
201
|
+
'font-sans', 'font-serif', 'font-mono',
|
|
202
|
+
'md:font-sans', 'md:font-serif', 'md:font-mono',
|
|
203
|
+
|
|
204
|
+
'font-thin', 'font-extralight', 'font-light', 'font-normal', 'font-medium', 'font-semibold', 'font-bold', 'font-extrabold', 'font-black',
|
|
205
|
+
'md:font-thin', 'md:font-extralight', 'md:font-light', 'md:font-normal', 'md:font-medium', 'md:font-semibold', 'md:font-bold', 'md:font-extrabold', 'md:font-black',
|
|
206
|
+
|
|
207
|
+
'text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl',
|
|
208
|
+
'text-4xl', 'text-5xl', 'text-6xl',
|
|
209
|
+
'md:text-xs', 'md:text-sm', 'md:text-base', 'md:text-lg', 'md:text-xl', 'md:text-2xl', 'md:text-3xl',
|
|
210
|
+
'md:text-4xl', 'md:text-5xl', 'md:text-6xl',
|
|
211
|
+
|
|
212
|
+
'h-1', 'h-2', 'h-3', 'h-4', 'h-5', 'h-6', 'h-7', 'h-8', 'h-1/4',
|
|
213
|
+
'h-10vh', 'h-20vh', 'h-30vh', 'h-40vh', 'h-50vh', 'h-60vh', 'h-70vh', 'h-80vh', 'h-90vh', 'h-100vh',
|
|
214
|
+
'md:h-1', 'md:h-2', 'md:h-3', 'md:h-4', 'md:h-5', 'md:h-6', 'md:h-7', 'md:h-8', 'md:h-1/4',
|
|
215
|
+
'md:h-10vh', 'md:h-20vh', 'md:h-30vh', 'md:h-40vh', 'md:h-50vh', 'md:h-60vh', 'md:h-70vh', 'md:h-80vh', 'md:h-90vh', 'md:h-100vh',
|
|
216
|
+
|
|
217
|
+
'min-h-0', 'min-h-full', 'min-h-screen', 'min-h-min', 'min-h-max', 'min-h-fit',
|
|
218
|
+
'md:min-h-0', 'md:min-h-full', 'md:min-h-screen', 'md:min-h-min', 'md:min-h-max', 'md:min-h-fit',
|
|
219
|
+
|
|
220
|
+
'max-h-0', 'max-h-1', 'max-h-2', 'max-h-3', 'max-h-4', 'max-h-5',
|
|
221
|
+
'md:max-h-0', 'md:max-h-1', 'md:max-h-2', 'md:max-h-3', 'md:max-h-4', 'md:max-h-5',
|
|
222
|
+
|
|
223
|
+
'leading-3', 'leading-4', 'leading-5', 'leading-6', 'leading-7', 'leading-8', 'leading-9',
|
|
224
|
+
'leading-10', 'leading-tight', 'leading-snug', 'leading-normal', 'leading-relaxed', 'leading-loose',
|
|
225
|
+
'md:leading-3', 'md:leading-4', 'md:leading-5', 'md:leading-6', 'md:leading-7', 'md:leading-8', 'md:leading-9',
|
|
226
|
+
'md:leading-10', 'md:leading-tight', 'md:leading-snug', 'md:leading-normal', 'md:leading-relaxed', 'md:leading-loose',
|
|
227
|
+
|
|
228
|
+
'overflow-auto', 'overflow-hidden', 'overflow-clip', 'overflow-visible', 'overflow-scroll', 'overflow-x-auto',
|
|
229
|
+
'overflow-y-auto', 'overflow-x-hidden', 'overflow-y-hidden', 'overflow-x-clip', 'overflow-y-clip',
|
|
230
|
+
'overflow-x-visible', 'overflow-y-visible', 'overflow-x-scroll', 'overflow-y-scroll',
|
|
231
|
+
'md:overflow-auto', 'md:overflow-hidden', 'md:overflow-clip', 'md:overflow-visible', 'md:overflow-scroll', 'md:overflow-x-auto',
|
|
232
|
+
'md:overflow-y-auto', 'md:overflow-x-hidden', 'md:overflow-y-hidden', 'md:overflow-x-clip', 'md:overflow-y-clip',
|
|
233
|
+
'md:overflow-x-visible', 'md:overflow-y-visible', 'md:overflow-x-scroll', 'md:overflow-y-scroll',
|
|
234
|
+
|
|
235
|
+
'shadow-none', 'shadow-xs', 'shadow-sm', 'shadow', 'shadow-md', 'shadow-lg', 'shadow-xl', 'shadow-2xl',
|
|
236
|
+
'md:shadow-none', 'md:shadow-xs', 'md:shadow-sm', 'shadow', 'md:shadow-md', 'md:shadow-lg', 'md:shadow-xl', 'md:shadow-2xl',
|
|
237
|
+
|
|
238
|
+
'opacity-0', 'opacity-10', 'opacity-20', 'opacity-30', 'opacity-40', 'opacity-50',
|
|
239
|
+
'opacity-60', 'opacity-70', 'opacity-75', 'opacity-80', 'opacity-90', 'opacity-100',
|
|
240
|
+
'md:opacity-0', 'md:opacity-10', 'md:opacity-20', 'md:opacity-30', 'md:opacity-40', 'md:opacity-50',
|
|
241
|
+
'md:opacity-60', 'md:opacity-70', 'md:opacity-75', 'md:opacity-80', 'md:opacity-90', 'md:opacity-100',
|
|
242
|
+
]
|
|
243
|
+
}
|