quasar-ui-danx 0.3.45 → 0.3.46
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/dist/danx.es.js +886 -856
- package/dist/danx.es.js.map +1 -1
- package/dist/danx.umd.js +4 -4
- package/dist/danx.umd.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/ActionTable/Form/Fields/NoInputField.vue +65 -0
- package/src/components/ActionTable/Form/Fields/index.ts +1 -0
- package/src/components/ActionTable/Form/RenderedForm.vue +107 -105
package/package.json
CHANGED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="no-input-field pb-4">
|
|
3
|
+
<div class="font-bold mb-2">
|
|
4
|
+
{{ field.label }}
|
|
5
|
+
</div>
|
|
6
|
+
<!-- eslint-disable vue/no-v-html -->
|
|
7
|
+
<div
|
|
8
|
+
class="html-content"
|
|
9
|
+
v-html="content || field.description"
|
|
10
|
+
/>
|
|
11
|
+
<!--eslint-enable-->
|
|
12
|
+
</div>
|
|
13
|
+
</template>
|
|
14
|
+
|
|
15
|
+
<script setup lang="ts">
|
|
16
|
+
defineProps({
|
|
17
|
+
field: {
|
|
18
|
+
type: Object,
|
|
19
|
+
required: true
|
|
20
|
+
},
|
|
21
|
+
content: {
|
|
22
|
+
type: String,
|
|
23
|
+
default: null
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
</script>
|
|
27
|
+
<style scoped lang="scss">
|
|
28
|
+
:deep(.text-editor-renderer) {
|
|
29
|
+
font-size: 16px;
|
|
30
|
+
|
|
31
|
+
ul {
|
|
32
|
+
list-style: disc;
|
|
33
|
+
|
|
34
|
+
ul {
|
|
35
|
+
padding-left: 1em;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
& > li > ul {
|
|
39
|
+
list-style: circle;
|
|
40
|
+
|
|
41
|
+
& > li > ul {
|
|
42
|
+
list-style: square;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
ol {
|
|
48
|
+
ol {
|
|
49
|
+
padding-left: 1em;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
& > li > ol {
|
|
53
|
+
list-style: upper-roman;
|
|
54
|
+
|
|
55
|
+
& > li > ol {
|
|
56
|
+
list-style: lower-roman;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
li {
|
|
62
|
+
list-style-position: inside;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
</style>
|
|
@@ -14,6 +14,7 @@ export { default as LabelValueBlock } from "./LabelValueBlock.vue";
|
|
|
14
14
|
export { default as MultiFileField } from "./MultiFileField.vue";
|
|
15
15
|
export { default as MultiKeywordField } from "./MultiKeywordField.vue";
|
|
16
16
|
export { default as NewPasswordField } from "./NewPasswordField.vue";
|
|
17
|
+
export { default as NoInputField } from "./NoInputField.vue";
|
|
17
18
|
export { default as NumberField } from "./NumberField.vue";
|
|
18
19
|
export { default as NumberRangeField } from "./NumberRangeField.vue";
|
|
19
20
|
export { default as SelectDrawer } from "./SelectDrawer.vue";
|
|
@@ -1,109 +1,109 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
2
|
+
<div class="rendered-form">
|
|
3
|
+
<div
|
|
4
|
+
v-if="form.variations > 1"
|
|
5
|
+
class="mb-4"
|
|
6
|
+
>
|
|
7
|
+
<QTabs
|
|
8
|
+
v-model="currentVariation"
|
|
9
|
+
class="text-xs"
|
|
10
|
+
>
|
|
11
|
+
<QTab
|
|
12
|
+
v-for="(name, index) in variationNames"
|
|
13
|
+
:key="name"
|
|
14
|
+
:name="name"
|
|
15
|
+
class="p-0"
|
|
16
|
+
content-class="w-full"
|
|
17
|
+
>
|
|
18
|
+
<div class="flex flex-nowrap items-center text-sm w-full">
|
|
19
|
+
<div
|
|
20
|
+
v-if="!isVariationFormComplete(name)"
|
|
21
|
+
class="variation-missing-icon pl-1"
|
|
22
|
+
>
|
|
23
|
+
<MissingIcon class="text-red-400 w-4" />
|
|
24
|
+
<QTooltip>Creative Form Incomplete</QTooltip>
|
|
25
|
+
</div>
|
|
26
|
+
<div class="flex-grow">
|
|
27
|
+
{{ name || "1" }}
|
|
28
|
+
</div>
|
|
29
|
+
<div
|
|
30
|
+
v-if="!disable && !readonly && canModifyVariations"
|
|
31
|
+
class="flex flex-nowrap items-center mr-2"
|
|
32
|
+
>
|
|
33
|
+
<a
|
|
34
|
+
class="ml-1 p-1 hover:opacity-100 opacity-20 hover:bg-blue-200 rounded"
|
|
35
|
+
@click="() => (variationToEdit = name) && (newVariationName = name)"
|
|
36
|
+
>
|
|
37
|
+
<EditIcon class="w-3 text-blue-900" />
|
|
38
|
+
</a>
|
|
39
|
+
<a
|
|
40
|
+
v-if="index > 0"
|
|
41
|
+
class="ml-1 p-1 hover:opacity-100 opacity-20 hover:bg-red-200 rounded"
|
|
42
|
+
@click="variationToDelete = name"
|
|
43
|
+
>
|
|
44
|
+
<RemoveIcon class="w-3 text-red-900" />
|
|
45
|
+
</a>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
</QTab>
|
|
49
|
+
<QTab
|
|
50
|
+
v-if="canAddVariation"
|
|
51
|
+
key="add-new-variation"
|
|
52
|
+
name="add"
|
|
53
|
+
class="bg-blue-600 rounded-t-lg !text-white"
|
|
54
|
+
@click="onAddVariation"
|
|
55
|
+
>
|
|
56
|
+
<template v-if="saving">
|
|
57
|
+
<QSpinnerBall class="w-4" />
|
|
58
|
+
</template>
|
|
59
|
+
<template v-else>
|
|
60
|
+
+ Add Variation
|
|
61
|
+
</template>
|
|
62
|
+
</QTab>
|
|
63
|
+
</QTabs>
|
|
64
|
+
</div>
|
|
65
|
+
<div
|
|
66
|
+
v-for="(field, index) in mappedFields"
|
|
67
|
+
:key="field.id"
|
|
68
|
+
:class="{ 'mt-4': index > 0 }"
|
|
69
|
+
>
|
|
70
|
+
<Component
|
|
71
|
+
:is="field.component"
|
|
72
|
+
:key="field.name + '-' + currentVariation"
|
|
73
|
+
:model-value="getFieldValue(field.name)"
|
|
74
|
+
:field="field"
|
|
75
|
+
:label="field.label || undefined"
|
|
76
|
+
:no-label="noLabel"
|
|
77
|
+
:show-name="showName"
|
|
78
|
+
:clearable="field.clearable || clearable"
|
|
79
|
+
:disable="disable"
|
|
80
|
+
:readonly="readonly"
|
|
81
|
+
@update:model-value="onInput(field.name, $event)"
|
|
82
|
+
/>
|
|
83
|
+
</div>
|
|
84
|
+
<ConfirmDialog
|
|
85
|
+
v-if="variationToEdit !== false"
|
|
86
|
+
title="Change variation name"
|
|
87
|
+
@confirm="onChangeVariationName"
|
|
88
|
+
@close="variationToEdit = false"
|
|
89
|
+
>
|
|
90
|
+
<TextField
|
|
91
|
+
v-model="newVariationName"
|
|
92
|
+
label="Enter name"
|
|
93
|
+
placeholder="Variation Name"
|
|
94
|
+
input-class="bg-white"
|
|
95
|
+
/>
|
|
96
|
+
</ConfirmDialog>
|
|
97
|
+
<ConfirmDialog
|
|
98
|
+
v-if="variationToDelete"
|
|
99
|
+
:title="`Remove variation ${variationToDelete}?`"
|
|
100
|
+
content="You cannot undo this action. If there was any analytics collected for this variation, it will still be attributed to the ad."
|
|
101
|
+
confirm-class="bg-red-900 text-white"
|
|
102
|
+
content-class="w-96"
|
|
103
|
+
@confirm="onRemoveVariation(variationToDelete)"
|
|
104
|
+
@close="variationToDelete = ''"
|
|
105
|
+
/>
|
|
106
|
+
</div>
|
|
107
107
|
</template>
|
|
108
108
|
<script setup>
|
|
109
109
|
import { ExclamationCircleIcon as MissingIcon, PencilIcon as EditIcon } from "@heroicons/vue/solid";
|
|
@@ -117,6 +117,7 @@ import {
|
|
|
117
117
|
DateRangeField,
|
|
118
118
|
IntegerField,
|
|
119
119
|
MultiFileField,
|
|
120
|
+
NoInputField,
|
|
120
121
|
NumberField,
|
|
121
122
|
SingleFileField,
|
|
122
123
|
TextField,
|
|
@@ -153,6 +154,7 @@ const FORM_FIELD_MAP = {
|
|
|
153
154
|
INTEGER: IntegerField,
|
|
154
155
|
NUMBER: NumberField,
|
|
155
156
|
TEXT: TextField,
|
|
157
|
+
NO_INPUT: NoInputField,
|
|
156
158
|
SINGLE_FILE: SingleFileField,
|
|
157
159
|
MULTI_FILE: MultiFileField,
|
|
158
160
|
WYSIWYG: WysiwygField
|