quasar-ui-danx 0.3.45 → 0.3.47
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 +4465 -4293
- package/dist/danx.es.js.map +1 -1
- package/dist/danx.umd.js +8 -8
- 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/TextField.vue +4 -3
- package/src/components/ActionTable/Form/Fields/index.ts +1 -0
- package/src/components/ActionTable/Form/RenderedForm.vue +109 -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>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div>
|
|
2
|
+
<div class="dx-text-field">
|
|
3
3
|
<QInput
|
|
4
4
|
v-if="!readonly"
|
|
5
5
|
:data-dusk="'text-field-' + field?.id"
|
|
@@ -12,8 +12,9 @@
|
|
|
12
12
|
:input-class="inputClass"
|
|
13
13
|
:class="parentClass"
|
|
14
14
|
stack-label
|
|
15
|
-
:
|
|
16
|
-
:type="type"
|
|
15
|
+
:autogrow="rows > 1"
|
|
16
|
+
:type="rows > 1 ? 'textarea' : type"
|
|
17
|
+
:input-style="rows ? {minHeight: rows * 1.5 + 'rem'} : {}"
|
|
17
18
|
:model-value="modelValue"
|
|
18
19
|
:debounce="debounce"
|
|
19
20
|
@keydown.enter="$emit('submit')"
|
|
@@ -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,110 @@
|
|
|
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
|
+
:rows="field.type === 'TEXTAREA' ? 5 : 1"
|
|
79
|
+
:clearable="field.clearable || clearable"
|
|
80
|
+
:disable="disable"
|
|
81
|
+
:readonly="readonly"
|
|
82
|
+
@update:model-value="onInput(field.name, $event)"
|
|
83
|
+
/>
|
|
84
|
+
</div>
|
|
85
|
+
<ConfirmDialog
|
|
86
|
+
v-if="variationToEdit !== false"
|
|
87
|
+
title="Change variation name"
|
|
88
|
+
@confirm="onChangeVariationName"
|
|
89
|
+
@close="variationToEdit = false"
|
|
90
|
+
>
|
|
91
|
+
<TextField
|
|
92
|
+
v-model="newVariationName"
|
|
93
|
+
label="Enter name"
|
|
94
|
+
placeholder="Variation Name"
|
|
95
|
+
input-class="bg-white"
|
|
96
|
+
/>
|
|
97
|
+
</ConfirmDialog>
|
|
98
|
+
<ConfirmDialog
|
|
99
|
+
v-if="variationToDelete"
|
|
100
|
+
:title="`Remove variation ${variationToDelete}?`"
|
|
101
|
+
content="You cannot undo this action. If there was any analytics collected for this variation, it will still be attributed to the ad."
|
|
102
|
+
confirm-class="bg-red-900 text-white"
|
|
103
|
+
content-class="w-96"
|
|
104
|
+
@confirm="onRemoveVariation(variationToDelete)"
|
|
105
|
+
@close="variationToDelete = ''"
|
|
106
|
+
/>
|
|
107
|
+
</div>
|
|
107
108
|
</template>
|
|
108
109
|
<script setup>
|
|
109
110
|
import { ExclamationCircleIcon as MissingIcon, PencilIcon as EditIcon } from "@heroicons/vue/solid";
|
|
@@ -117,6 +118,7 @@ import {
|
|
|
117
118
|
DateRangeField,
|
|
118
119
|
IntegerField,
|
|
119
120
|
MultiFileField,
|
|
121
|
+
NoInputField,
|
|
120
122
|
NumberField,
|
|
121
123
|
SingleFileField,
|
|
122
124
|
TextField,
|
|
@@ -153,6 +155,8 @@ const FORM_FIELD_MAP = {
|
|
|
153
155
|
INTEGER: IntegerField,
|
|
154
156
|
NUMBER: NumberField,
|
|
155
157
|
TEXT: TextField,
|
|
158
|
+
TEXTAREA: TextField,
|
|
159
|
+
NO_INPUT: NoInputField,
|
|
156
160
|
SINGLE_FILE: SingleFileField,
|
|
157
161
|
MULTI_FILE: MultiFileField,
|
|
158
162
|
WYSIWYG: WysiwygField
|