comand-component-library 3.3.83 → 3.3.85
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/comand-component-library.js +5630 -3936
- package/dist/comand-component-library.umd.cjs +4 -4
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/App.vue +215 -112
- package/src/assets/data/component-structure.json +228 -0
- package/src/assets/data/form-elements.json +156 -0
- package/src/assets/data/opening-hours.json +79 -37
- package/src/components/CmdAddressData.vue +187 -201
- package/src/components/CmdAddressDataItem.vue +306 -0
- package/src/components/CmdBox.vue +1 -0
- package/src/components/CmdBoxWrapper.vue +53 -5
- package/src/components/CmdFancyBox.vue +31 -4
- package/src/components/CmdForm.vue +98 -4
- package/src/components/CmdFormElement.vue +5 -1
- package/src/components/CmdHeadline.vue +179 -52
- package/src/components/CmdImage.vue +150 -21
- package/src/components/CmdImageGallery.vue +88 -85
- package/src/components/CmdListOfLinks.vue +63 -43
- package/src/components/CmdListOfLinksItem.vue +97 -0
- package/src/components/CmdLoginForm.vue +3 -6
- package/src/components/CmdMultistepFormProgressBar.vue +37 -8
- package/src/components/CmdOpeningHours.vue +280 -63
- package/src/components/CmdOpeningHoursItem.vue +264 -0
- package/src/components/{CmdPager.vue → CmdPagination.vue} +2 -2
- package/src/components/CmdSlideshow.vue +137 -10
- package/src/components/CmdSocialNetworks.vue +115 -28
- package/src/components/CmdSocialNetworksItem.vue +184 -0
- package/src/components/CmdTable.vue +0 -1
- package/src/components/CmdTextImageBlock.vue +158 -0
- package/src/components/CmdThumbnailScroller.vue +132 -12
- package/src/components/CmdToggleDarkMode.vue +58 -1
- package/src/components/EditComponentWrapper.vue +553 -0
- package/src/index.js +2 -2
- package/src/mixins/EditMode.vue +28 -9
- package/src/utils/editmode.js +30 -5
- package/src/components/CmdTextBlock.vue +0 -73
- package/src/editmode/editModeContext.js +0 -50
@@ -1,73 +0,0 @@
|
|
1
|
-
<template>
|
2
|
-
<div class="cmd-text-block flex-container vertical">
|
3
|
-
<!-- begin cmd-headline -->
|
4
|
-
<CmdHeadline v-if="cmdHeadline" :headlineText="cmdHeadline.headlineText" :headlineLevel="cmdHeadline.headlineLevel" />
|
5
|
-
<!-- end cmd-headline -->
|
6
|
-
|
7
|
-
<!-- begin continuous text -->
|
8
|
-
<textarea v-if="editModeContext?.editing" class="edit-mode" v-model="editableHtmlContent"></textarea>
|
9
|
-
<div v-else-if="htmlContent" v-html="htmlContent"></div>
|
10
|
-
<!-- end continuous text -->
|
11
|
-
</div>
|
12
|
-
</template>
|
13
|
-
|
14
|
-
<script>
|
15
|
-
import {useEditModeContext} from "../editmode/editModeContext.js"
|
16
|
-
|
17
|
-
export default {
|
18
|
-
name: "CmdTextBlock",
|
19
|
-
provide() {
|
20
|
-
return {
|
21
|
-
editModeContext: this.context
|
22
|
-
}
|
23
|
-
},
|
24
|
-
inject: {
|
25
|
-
editModeContext: {
|
26
|
-
default: null
|
27
|
-
}
|
28
|
-
},
|
29
|
-
data() {
|
30
|
-
return {
|
31
|
-
context: useEditModeContext(this.editModeContext, {tb: true}, this.onPersist),
|
32
|
-
editableHtmlHeadline: this.cmdHeadline?.headlineText || "",
|
33
|
-
editableHtmlContent: this.htmlContent
|
34
|
-
}
|
35
|
-
},
|
36
|
-
props: {
|
37
|
-
editModeContextData: {
|
38
|
-
type: Object
|
39
|
-
},
|
40
|
-
/**
|
41
|
-
* properties for CmdHeadline-component
|
42
|
-
*/
|
43
|
-
cmdHeadline: {
|
44
|
-
type: Object,
|
45
|
-
required: false
|
46
|
-
},
|
47
|
-
/**
|
48
|
-
* content for continuous text (can contain html-tags)
|
49
|
-
*/
|
50
|
-
htmlContent: {
|
51
|
-
type: String,
|
52
|
-
required: true
|
53
|
-
}
|
54
|
-
},
|
55
|
-
methods: {
|
56
|
-
onPersist(data) {
|
57
|
-
const htmlContent = this.editableHtmlContent
|
58
|
-
return {
|
59
|
-
editModeContextData: {
|
60
|
-
...(this.editModeContextData || {})
|
61
|
-
},
|
62
|
-
update(props) {
|
63
|
-
props.cmdHeadline = {
|
64
|
-
...(props.cmdHeadline || {}),
|
65
|
-
}
|
66
|
-
props.cmdHeadline.headlineText = data[0].headlineText
|
67
|
-
props.htmlContent = htmlContent
|
68
|
-
}
|
69
|
-
}
|
70
|
-
}
|
71
|
-
}
|
72
|
-
}
|
73
|
-
</script>
|
@@ -1,50 +0,0 @@
|
|
1
|
-
import {ref, watchEffect} from "vue"
|
2
|
-
|
3
|
-
export function useEditModeContext(parentContext, props, persistHandler) {
|
4
|
-
const editing = ref(!!parentContext?.editing)
|
5
|
-
const saveHandlers = []
|
6
|
-
|
7
|
-
function save() {
|
8
|
-
const data = []
|
9
|
-
saveHandlers.forEach(saveHandler => {
|
10
|
-
const result = saveHandler();
|
11
|
-
if (result) {
|
12
|
-
data.push(result)
|
13
|
-
}
|
14
|
-
})
|
15
|
-
callPersistHandler(data)
|
16
|
-
}
|
17
|
-
|
18
|
-
function callPersistHandler(data) {
|
19
|
-
let processedData = data
|
20
|
-
if (persistHandler) {
|
21
|
-
processedData = persistHandler(data)
|
22
|
-
}
|
23
|
-
if (parentContext && processedData != null) {
|
24
|
-
parentContext.callPersistHandler(processedData)
|
25
|
-
}
|
26
|
-
}
|
27
|
-
|
28
|
-
function addSaveHandler(saveHandler) {
|
29
|
-
if (!saveHandlers.includes(saveHandler)) {
|
30
|
-
saveHandlers.push(saveHandler)
|
31
|
-
}
|
32
|
-
}
|
33
|
-
|
34
|
-
if (parentContext) {
|
35
|
-
parentContext.addSaveHandler(save)
|
36
|
-
}
|
37
|
-
|
38
|
-
watchEffect(() => editing.value = !!parentContext?.editing);
|
39
|
-
|
40
|
-
return {
|
41
|
-
editing,
|
42
|
-
props: {
|
43
|
-
...(parentContext?.props || {}),
|
44
|
-
...(props || {})
|
45
|
-
},
|
46
|
-
addSaveHandler,
|
47
|
-
save,
|
48
|
-
callPersistHandler
|
49
|
-
}
|
50
|
-
}
|