comand-component-library 3.1.52 → 3.1.55

Sign up to get free protection for your applications and to get access to all the features.
Files changed (145) hide show
  1. package/dist/comand-component-library.css +1 -1
  2. package/dist/comand-component-library.umd.min.js +1 -1
  3. package/package.json +2 -2
  4. package/src/App.vue +0 -55
  5. package/src/assets/data/breadcrumbs.json +2 -2
  6. package/src/components/CmdBox.vue +6 -3
  7. package/src/components/CmdCookieDisclaimer.vue +63 -65
  8. package/src/components/CmdUploadForm.vue +5 -0
  9. package/src/composables/sequence.js +4 -0
  10. package/src/index.js +0 -1
  11. package/src/mixins/GlobalCurrency.js +16 -0
  12. package/src/router/index.js +0 -57
  13. package/src/ComponentDocumentation.vue +0 -156
  14. package/src/ComponentLibraryHelp.vue +0 -20
  15. package/src/components/CmdAccordion.vue +0 -253
  16. package/src/documentation/commonProps.js +0 -6
  17. package/src/documentation/components/ComponentCode.vue +0 -50
  18. package/src/documentation/components/ComponentProperties.vue +0 -237
  19. package/src/documentation/components/ExampleSectionWrapper.vue +0 -46
  20. package/src/documentation/components/ViewCodeData.vue +0 -113
  21. package/src/documentation/data/CmdAccordionHelp.js +0 -22
  22. package/src/documentation/data/CmdAddressDataHelp.js +0 -17
  23. package/src/documentation/data/CmdBackToTopButtonHelp.js +0 -3
  24. package/src/documentation/data/CmdBankAccountDataHelp.js +0 -8
  25. package/src/documentation/data/CmdBoxHelp.js +0 -45
  26. package/src/documentation/data/CmdBoxSiteSearchHelp.js +0 -11
  27. package/src/documentation/data/CmdBreadcrumbsHelp.js +0 -6
  28. package/src/documentation/data/CmdCompanyLogoHelp.js +0 -8
  29. package/src/documentation/data/CmdCookieDisclaimerHelp.js +0 -9
  30. package/src/documentation/data/CmdCopyrightInformation.js +0 -2
  31. package/src/documentation/data/CmdCustomHeadlineHelp.js +0 -8
  32. package/src/documentation/data/CmdFakeSelectHelp.js +0 -60
  33. package/src/documentation/data/CmdFancyBoxHelp.js +0 -7
  34. package/src/documentation/data/CmdFooterNavigationHelp.js +0 -5
  35. package/src/documentation/data/CmdFormElementHelp.js +0 -189
  36. package/src/documentation/data/CmdFormFiltersHelp.js +0 -6
  37. package/src/documentation/data/CmdFormHelp.js +0 -10
  38. package/src/documentation/data/CmdGoogleMapsHelp.js +0 -5
  39. package/src/documentation/data/CmdImageGalleryHelp.js +0 -5
  40. package/src/documentation/data/CmdImageZoomHelp.js +0 -6
  41. package/src/documentation/data/CmdListOfLinksHelp.js +0 -24
  42. package/src/documentation/data/CmdLoginFormHelp.js +0 -6
  43. package/src/documentation/data/CmdMainNavigationHelp.js +0 -7
  44. package/src/documentation/data/CmdMultistepFormProgressBarHelp.js +0 -6
  45. package/src/documentation/data/CmdOpeningHoursHelp.js +0 -10
  46. package/src/documentation/data/CmdPagerHelp.js +0 -7
  47. package/src/documentation/data/CmdProgressBarHelp.js +0 -13
  48. package/src/documentation/data/CmdShareButtonsHelp.js +0 -13
  49. package/src/documentation/data/CmdSiteHeaderHelp.js +0 -21
  50. package/src/documentation/data/CmdSlideButtonHelp.js +0 -10
  51. package/src/documentation/data/CmdSlideshowHelp.js +0 -7
  52. package/src/documentation/data/CmdSwitchLanguageHelp.js +0 -6
  53. package/src/documentation/data/CmdSystemMessageHelp.js +0 -32
  54. package/src/documentation/data/CmdTableHelp.js +0 -14
  55. package/src/documentation/data/CmdTabsHelp.js +0 -10
  56. package/src/documentation/data/CmdThumbnailScrollerHelp.js +0 -5
  57. package/src/documentation/data/CmdTooltipHelp.js +0 -13
  58. package/src/documentation/data/CmdUploadFormHelp.js +0 -17
  59. package/src/documentation/data/CmdWidthLimitationWrapperHelp.js +0 -7
  60. package/src/documentation/data/componentsDescription.json +0 -158
  61. package/src/documentation/generated/CmdAccordionPropertyDescriptions.json +0 -57
  62. package/src/documentation/generated/CmdAddressDataPropertyDescriptions.json +0 -32
  63. package/src/documentation/generated/CmdBackToTopButtonPropertyDescriptions.json +0 -12
  64. package/src/documentation/generated/CmdBankAccountDataPropertyDescriptions.json +0 -34
  65. package/src/documentation/generated/CmdBoxPropertyDescriptions.json +0 -91
  66. package/src/documentation/generated/CmdBoxSiteSearchPropertyDescriptions.json +0 -46
  67. package/src/documentation/generated/CmdBoxWrapperPropertyDescriptions.json +0 -47
  68. package/src/documentation/generated/CmdBreadcrumbsPropertyDescriptions.json +0 -17
  69. package/src/documentation/generated/CmdCompanyLogoPropertyDescriptions.json +0 -27
  70. package/src/documentation/generated/CmdCookieDisclaimerPropertyDescriptions.json +0 -22
  71. package/src/documentation/generated/CmdCustomHeadlinePropertyDescriptions.json +0 -22
  72. package/src/documentation/generated/CmdFakeSelectPropertyDescriptions.json +0 -84
  73. package/src/documentation/generated/CmdFancyBoxPropertyDescriptions.json +0 -62
  74. package/src/documentation/generated/CmdFooterNavigationPropertyDescriptions.json +0 -17
  75. package/src/documentation/generated/CmdFormElementPropertyDescriptions.json +0 -178
  76. package/src/documentation/generated/CmdFormFiltersPropertyDescriptions.json +0 -32
  77. package/src/documentation/generated/CmdFormPropertyDescriptions.json +0 -40
  78. package/src/documentation/generated/CmdGoogleMapsPropertyDescriptions.json +0 -7
  79. package/src/documentation/generated/CmdImageGalleryPropertyDescriptions.json +0 -22
  80. package/src/documentation/generated/CmdImageZoomPropertyDescriptions.json +0 -12
  81. package/src/documentation/generated/CmdListOfLinksPropertyDescriptions.json +0 -60
  82. package/src/documentation/generated/CmdLoginFormPropertyDescriptions.json +0 -90
  83. package/src/documentation/generated/CmdMainNavigationPropertyDescriptions.json +0 -62
  84. package/src/documentation/generated/CmdMultipleSwitchPropertyDescriptions.json +0 -52
  85. package/src/documentation/generated/CmdMultistepFormProgressBarPropertyDescriptions.json +0 -17
  86. package/src/documentation/generated/CmdOpeningHoursPropertyDescriptions.json +0 -42
  87. package/src/documentation/generated/CmdPagerPropertyDescriptions.json +0 -37
  88. package/src/documentation/generated/CmdProgressBarPropertyDescriptions.json +0 -32
  89. package/src/documentation/generated/CmdShareButtonsPropertyDescriptions.json +0 -34
  90. package/src/documentation/generated/CmdSiteHeaderPropertyDescriptions.json +0 -27
  91. package/src/documentation/generated/CmdSlideButtonPropertyDescriptions.json +0 -25
  92. package/src/documentation/generated/CmdSlideshowPropertyDescriptions.json +0 -42
  93. package/src/documentation/generated/CmdSwitchButtonPropertyDescriptions.json +0 -79
  94. package/src/documentation/generated/CmdSwitchLanguagePropertyDescriptions.json +0 -7
  95. package/src/documentation/generated/CmdSystemMessagePropertyDescriptions.json +0 -40
  96. package/src/documentation/generated/CmdTablePropertyDescriptions.json +0 -62
  97. package/src/documentation/generated/CmdTabsPropertyDescriptions.json +0 -27
  98. package/src/documentation/generated/CmdThumbnailScrollerPropertyDescriptions.json +0 -32
  99. package/src/documentation/generated/CmdTooltipPropertyDescriptions.json +0 -17
  100. package/src/documentation/generated/CmdUploadFormPropertyDescriptions.json +0 -90
  101. package/src/documentation/generated/CmdWidthLimitationWrapperPropertyDescriptions.json +0 -41
  102. package/src/documentation/generated/frameworkIcons.json +0 -730
  103. package/src/documentation/generated/logosIcons.json +0 -110
  104. package/src/documentation/tabs.js +0 -46
  105. package/src/documentation/views/ContainerPage.vue +0 -237
  106. package/src/documentation/views/HelpHome.vue +0 -13
  107. package/src/documentation/views/IconFont.vue +0 -80
  108. package/src/documentation/views/components/CmdAccordionHelp.vue +0 -78
  109. package/src/documentation/views/components/CmdAddressDataHelp.vue +0 -65
  110. package/src/documentation/views/components/CmdBackToTopButtonHelp.vue +0 -62
  111. package/src/documentation/views/components/CmdBankAccountDataHelp.vue +0 -88
  112. package/src/documentation/views/components/CmdBoxHelp.vue +0 -137
  113. package/src/documentation/views/components/CmdBoxSiteSearchHelp.vue +0 -60
  114. package/src/documentation/views/components/CmdBoxWrapperHelp.vue +0 -111
  115. package/src/documentation/views/components/CmdBreadcrumbsHelp.vue +0 -51
  116. package/src/documentation/views/components/CmdCompanyLogoHelp.vue +0 -48
  117. package/src/documentation/views/components/CmdCookieDisclaimerHelp.vue +0 -105
  118. package/src/documentation/views/components/CmdCustomHeadlineHelp.vue +0 -53
  119. package/src/documentation/views/components/CmdFakeSelectHelp.vue +0 -175
  120. package/src/documentation/views/components/CmdFancyBoxHelp.vue +0 -79
  121. package/src/documentation/views/components/CmdFormElementHelp.vue +0 -412
  122. package/src/documentation/views/components/CmdFormFiltersHelp.vue +0 -69
  123. package/src/documentation/views/components/CmdFormHelp.vue +0 -41
  124. package/src/documentation/views/components/CmdGoogleMapsHelp.vue +0 -55
  125. package/src/documentation/views/components/CmdImageGalleryHelp.vue +0 -46
  126. package/src/documentation/views/components/CmdImageZoomHelp.vue +0 -34
  127. package/src/documentation/views/components/CmdListOfLinksHelp.vue +0 -64
  128. package/src/documentation/views/components/CmdLoginFormHelp.vue +0 -117
  129. package/src/documentation/views/components/CmdMainNavigationHelp.vue +0 -94
  130. package/src/documentation/views/components/CmdMultistepFormProgressBarHelp.vue +0 -49
  131. package/src/documentation/views/components/CmdOpeningHoursHelp.vue +0 -49
  132. package/src/documentation/views/components/CmdPagerHelp.vue +0 -57
  133. package/src/documentation/views/components/CmdProgressBarHelp.vue +0 -47
  134. package/src/documentation/views/components/CmdShareButtonsHelp.vue +0 -65
  135. package/src/documentation/views/components/CmdSiteHeaderHelp.vue +0 -72
  136. package/src/documentation/views/components/CmdSlideButtonHelp.vue +0 -90
  137. package/src/documentation/views/components/CmdSlideshowHelp.vue +0 -60
  138. package/src/documentation/views/components/CmdSwitchLanguageHelp.vue +0 -64
  139. package/src/documentation/views/components/CmdSystemMessageHelp.vue +0 -86
  140. package/src/documentation/views/components/CmdTableHelp.vue +0 -84
  141. package/src/documentation/views/components/CmdTabsHelp.vue +0 -52
  142. package/src/documentation/views/components/CmdThumbnailScrollerHelp.vue +0 -50
  143. package/src/documentation/views/components/CmdTooltipHelp.vue +0 -59
  144. package/src/documentation/views/components/CmdUploadFormHelp.vue +0 -59
  145. package/src/documentation/views/components/CmdWidthLimitationWrapperHelp.vue +0 -46
@@ -1,88 +0,0 @@
1
- <script setup>
2
- // import functions
3
- import {tabProps, tabHandlers} from "../../tabs"
4
- import {isFrameMode} from "../../../utils/common"
5
-
6
- // import component
7
- import CmdBankAccountData from "../../../components/CmdBankAccountData"
8
- import ComponentProperties from "../../components/ComponentProperties"
9
- import CmdTabs from "../../../components/CmdTabs"
10
- import ViewCodeData from "../../components/ViewCodeData"
11
- import ExampleSectionWrapper from "../../components/ExampleSectionWrapper"
12
-
13
- import * as componentPropertiesFunctions from "../../components/ComponentProperties"
14
-
15
- // import example-data
16
- import CmdCode from "../../data/CmdBankAccountDataHelp"
17
- import bankAccountData from "../../../assets/data/bank-account-data.json"
18
- import propertyDescriptions from "../../generated/CmdBankAccountDataPropertyDescriptions.json"
19
-
20
- const propertyStructures = {
21
- accountData: [
22
- {
23
- "text": "<string>",
24
- "value": "<string>",
25
- "allowCopy": "<boolean>"
26
- }
27
- ],
28
- cmdCustomHeadline: "Description for cmdCustomHeadline",
29
- iconCopy: {
30
- "iconClass": "<string>",
31
- "tooltip": "<string>"
32
- }
33
- }
34
- </script>
35
-
36
- <template>
37
- <CmdTabs v-show="!isFrameMode()" v-bind="tabProps" :active-tab="tabProps.activeTab" v-on="tabHandlers">
38
- <template v-slot:tab-content-0>
39
- <h2>Component</h2>
40
- <ExampleSectionWrapper componentName="CmdBankAccountData" headlineText="Band Account Data">
41
- <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]" :data="bankAccountData[0]">
42
- <teleport to="#frame-component-target" :disabled="!isFrameMode()">
43
- <CmdBankAccountData
44
- :account-data="bankAccountData"
45
- :allow-copy-by-click="true"
46
- :cmd-custom-headline="{ headlineText: 'Bank Account', headlineLevel: 5}"
47
- />
48
- </teleport>
49
- </ViewCodeData>
50
- </ExampleSectionWrapper>
51
- </template>
52
- <template v-slot:tab-content-1>
53
- <ComponentProperties :properties="CmdBankAccountData.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
54
- <a id="accountData"></a>
55
- <h4>accountData</h4>
56
- <dl>
57
- <dt>Type:</dt>
58
- <dd>{{ componentPropertiesFunctions.getPropertyTypeName(CmdBankAccountData.props.accountData.type) }}</dd>
59
- <dt>Default:</dt>
60
- <dd v-if="componentPropertiesFunctions.getPropertyDefault(CmdBankAccountData.props.accountData.default)">
61
- {{ componentPropertiesFunctions.getPropertyDefault(CmdBankAccountData.props.accountData.default) }}
62
- </dd>
63
- <dd v-else><em>(none)</em></dd>
64
- <dt>Required:</dt>
65
- <dd>
66
- <span :class="componentPropertiesFunctions.getIcon(CmdBankAccountData.props.accountData.required)"
67
- :title="componentPropertiesFunctions.getTooltip(CmdBankAccountData.props.accountData.required)">
68
- </span>
69
- </dd>
70
- <dt>Structure:</dt>
71
- <dd>
72
- <pre>{{ componentPropertiesFunctions.getPropertyStructure(propertyStructures, "accountData") }}</pre>
73
- </dd>
74
- <dt>Description:</dt>
75
- <dd>{{ componentPropertiesFunctions.getPropertyDescription(propertyDescriptions, "accountData") }}</dd>
76
- </dl>
77
- <h5>Description for structure</h5>
78
- <dl>
79
- <dt>text:</dt>
80
- <dd>Description for text</dd>
81
- <dt>value:</dt>
82
- <dd>Description for value</dd>
83
- <dt>allowCopy:</dt>
84
- <dd>Description for allowCopy</dd>
85
- </dl>
86
- </template>
87
- </CmdTabs>
88
- </template>
@@ -1,137 +0,0 @@
1
- <script setup>
2
- // import functions
3
- import {tabProps, tabHandlers} from "../../tabs"
4
- import {isFrameMode} from "../../../utils/common"
5
-
6
- // import components
7
- import CmdBox from "../../../components/CmdBox"
8
- import ComponentProperties from "../../components/ComponentProperties"
9
- import ViewCodeData from "../../components/ViewCodeData"
10
- import CmdTabs from "../../../components/CmdTabs"
11
- import ExampleSectionWrapper from "../../components/ExampleSectionWrapper"
12
-
13
- // import example-data
14
- import CmdCode from "../../data/CmdBoxHelp"
15
- import boxesProduct from "../../../assets/data/box-product.json"
16
- import boxesUser from "../../../assets/data/box-user.json"
17
- import propertyDescriptions from "../../generated/CmdBoxPropertyDescriptions.json"
18
-
19
- const propertyStructures = {
20
- product: {
21
- "name": "<string>",
22
- "img": {
23
- "src": "<string>",
24
- "alt": "<string>"
25
- },
26
- "articleNumber": "<string>",
27
- "price": "<number>",
28
- "description": "<string>",
29
- "new": "<boolean>",
30
- "discount": "<number>"
31
- },
32
- user: {
33
- "name": "<string>",
34
- "img": {
35
- "src": "<string>",
36
- "alt": "<string>"
37
- },
38
- "profession": "<string>",
39
- "position": "<string>",
40
- "description": "<string>",
41
- "links": [
42
- {
43
- "href": "<string>",
44
- "target": "<string>",
45
- "iconClass": "<string>",
46
- "title": "<string>"
47
- }
48
- ]
49
- }
50
- }
51
-
52
- function clickedOnProduct(event) {
53
- console.log("event", event)
54
- }
55
- </script>
56
-
57
- <template>
58
- <CmdTabs v-show="!isFrameMode()" v-bind="tabProps" :active-tab="tabProps.activeTab" v-on="tabHandlers">
59
- <template v-slot:tab-content-0>
60
- <h2>Component</h2>
61
- <ExampleSectionWrapper componentName="CmdBox" headlineText="Box 'content' (content given by property)">
62
- <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
63
- <teleport to="#frame-component-target" :disabled="!isFrameMode()">
64
- <CmdBox
65
- :cmdCustomHeadline="{
66
- headlineText: 'Headline given by property',
67
- headlineLevel: 5
68
- }"
69
- textBody="Content given by property"
70
- />
71
- </teleport>
72
- </ViewCodeData>
73
- </ExampleSectionWrapper>
74
- <hr/>
75
- <ExampleSectionWrapper componentName="CmdBox" headlineText="Box 'content' (collapsible)">
76
- <ViewCodeData :code="CmdCode[1]">
77
- <teleport to="#frame-component-target" :disabled="!isFrameMode()">
78
- <CmdBox
79
- :cmdCustomHeadline="{
80
- headlineText: 'Headline given by property',
81
- headlineLevel: 5
82
- }"
83
- textBody="Content given by property"
84
- :collapsible="true"
85
- />
86
- </teleport>
87
- </ViewCodeData>
88
- </ExampleSectionWrapper>
89
- <hr/>
90
- <ExampleSectionWrapper componentName="CmdBox" headlineText="Box 'content' (content given by slot)">
91
- <ViewCodeData :code="CmdCode[2]">
92
- <CmdBox :useSlots="['header', 'body', 'footer']">
93
- <template v-slot:header>
94
- <h5>
95
- Headline given by slot
96
- </h5>
97
- </template>
98
- <template v-slot:body>
99
- <p class="padding">
100
- Content given by slot
101
- </p>
102
- </template>
103
- <template v-slot:footer>
104
- <p>
105
- Footer given by slot
106
- </p>
107
- </template>
108
- </CmdBox>
109
- </ViewCodeData>
110
- </ExampleSectionWrapper>
111
- <hr/>
112
- <ExampleSectionWrapper componentName="CmdBox" headlineText="Box 'product'">
113
- <ViewCodeData :code="CmdCode[3]" :data="boxesProduct[0]">
114
- <CmdBox
115
- boxType="product"
116
- :product="boxesProduct[0]"
117
- :cmdCustomHeadline="{ headlineLevel: 5}"
118
- @click="clickedOnProduct"
119
- />
120
- </ViewCodeData>
121
- </ExampleSectionWrapper>
122
- <hr/>
123
- <ExampleSectionWrapper componentName="CmdBox" headlineText="Box 'user'">
124
- <ViewCodeData :code="CmdCode[4]" :data="boxesUser[2]">
125
- <CmdBox
126
- boxType="user"
127
- :user="boxesUser[2]"
128
- :cmdCustomHeadline="{ headlineLevel: 5}"
129
- />
130
- </ViewCodeData>
131
- </ExampleSectionWrapper>
132
- </template>
133
- <template v-slot:tab-content-1>
134
- <ComponentProperties :properties="CmdBox.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
135
- </template>
136
- </CmdTabs>
137
- </template>
@@ -1,60 +0,0 @@
1
- <script setup>
2
- // import function
3
- import {tabProps, tabHandlers} from "../../tabs"
4
- import {isFrameMode} from "../../../utils/common"
5
-
6
- // import components
7
- import CmdBoxSiteSearch from "../../../components/CmdBoxSiteSearch"
8
- import ComponentProperties from "../../components/ComponentProperties"
9
- import ViewCodeData from "../../components/ViewCodeData"
10
- import CmdTabs from "../../../components/CmdTabs"
11
- import ExampleSectionWrapper from "../../components/ExampleSectionWrapper"
12
-
13
- // import example-data
14
- import CmdCode from "../../data/CmdBoxSiteSearchHelp"
15
- import listOfFilters from '../../../assets/data/fake-select-filter-options.json'
16
- import propertyDescriptions from "../../generated/CmdBoxSiteSearchPropertyDescriptions.json"
17
-
18
- const propertyStructures = {
19
- cmdCustomHeadline: {
20
- "address": {
21
- "streetNo": "<string>",
22
- "zip": "<number>",
23
- "city": "<string>"
24
- },
25
- "telephone": "<string>",
26
- "mobilephone": "<string>",
27
- "fax": "<string>",
28
- "email": "<string>"
29
- },
30
- results: "-",
31
- showLegend: "-",
32
- textLegend: "-"
33
- }
34
- </script>
35
-
36
- <template>
37
- <CmdTabs v-show="!isFrameMode()" v-bind="tabProps" :active-tab="tabProps.activeTab" v-on="tabHandlers">
38
- <template v-slot:tab-content-0>
39
- <h2>Component</h2>
40
- <ExampleSectionWrapper componentName="CmdBoxSiteSearch" headlineText="Box Site Search">
41
- <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
42
- <teleport to="#frame-component-target" :disabled="!isFrameMode()">
43
- <CmdBoxSiteSearch
44
- text-legend="Legend"
45
- :results="420"
46
- :listOfFilters="listOfFilters"
47
- :cmdCustomHeadline="{
48
- headlineText: 'Search site',
49
- headlineLevel: 5
50
- }"
51
- />
52
- </teleport>
53
- </ViewCodeData>
54
- </ExampleSectionWrapper>
55
- </template>
56
- <template v-slot:tab-content-1>
57
- <ComponentProperties :properties="CmdBoxSiteSearch.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures" />
58
- </template>
59
- </CmdTabs>
60
- </template>
@@ -1,111 +0,0 @@
1
- <script setup>
2
- // import functions
3
- import {tabProps, tabHandlers} from "../../tabs"
4
- import {isFrameMode} from "../../../utils/common"
5
-
6
- // import components
7
- import CmdBox from "../../../components/CmdBox"
8
- import CmdBoxWrapper from "../../../components/CmdBoxWrapper"
9
- import CmdTabs from "../../../components/CmdTabs"
10
- import ComponentProperties from "../../components/ComponentProperties"
11
- import ViewCodeData from "../../components/ViewCodeData"
12
- import ExampleSectionWrapper from "../../components/ExampleSectionWrapper"
13
-
14
- // import example-data
15
- import CmdCode from "../../data/CmdAddressDataHelp"
16
- import boxProduct from '../../../assets/data/box-product.json'
17
- import boxUser from '../../../assets/data/box-user.json'
18
- import propertyDescriptions from "../../generated/CmdAddressDataPropertyDescriptions.json"
19
-
20
- const propertyStructures = {
21
- addressData: {
22
- "company": "<string>",
23
- "address": {
24
- "streetNo": "<string>",
25
- "zip": "<number>",
26
- "city": "<string>"
27
- },
28
- "telephone": "<string>",
29
- "mobilephone": "<string>",
30
- "fax": "<string>",
31
- "email": "<string>"
32
- }
33
- }
34
- </script>
35
-
36
- <template>
37
- <CmdTabs v-show="!isFrameMode()" v-bind="tabProps" :active-tab="tabProps.activeTab" v-on="tabHandlers">
38
- <template v-slot:tab-content-0>
39
- <h2>Component</h2>
40
- <ExampleSectionWrapper componentName="CmdBoxWrapper" headlineText="Box Wrapper with Box 'content' using Flexbox">
41
- <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
42
- <CmdBoxWrapper :useFlexbox="true">
43
- <CmdBox v-for="index in 14" :key="index" textBody="Content" :cmd-custom-headline="{headlineText: 'Headline ' + index, headlineLevel: 3}" />
44
- </CmdBoxWrapper>
45
- </ViewCodeData>
46
- </ExampleSectionWrapper>
47
- <hr />
48
- <ExampleSectionWrapper componentName="CmdBoxWrapper" headlineText="Box Wrapper with Box 'content (collapsible)' using the default grid">
49
- <ViewCodeData :code="CmdCode[0]">
50
- <CmdBoxWrapper :allowTogglingCollapsingBoxes="true" v-slot="slotprops">
51
- <CmdBox v-for="index in 7"
52
- :key="index"
53
- textBody="Content"
54
- :collapsible="true"
55
- :collapsingBoxesOpen="slotprops.collapsingBoxesOpen"
56
- :cmd-custom-headline="{
57
- headlineText: 'Headline ' + index,
58
- headlineLevel: 3
59
- }"
60
- />
61
- </CmdBoxWrapper>
62
- </ViewCodeData>
63
- </ExampleSectionWrapper>
64
- <hr />
65
- <ExampleSectionWrapper componentName="CmdBoxWrapper" headlineText="Box Wrapper with single box open at once using the default grid">
66
- <ViewCodeData :code="CmdCode[0]">
67
- <CmdBoxWrapper v-slot="slotprops">
68
- <CmdBox v-for="index in 7"
69
- :key="index"
70
- textBody="Content"
71
- :collapsible="true"
72
- :collapsingBoxesOpen="slotprops.currentOpenBox === index || (slotprops.currentOpenBox === 0 && index === 1)"
73
- :cmd-custom-headline="{
74
- headlineText: 'Headline ' + index,
75
- headlineLevel: 3
76
- }"
77
- @toggle-collapse="slotprops.boxToggled(index, $event)"
78
- />
79
- </CmdBoxWrapper>
80
- </ViewCodeData>
81
- </ExampleSectionWrapper>
82
- <hr />
83
- <ExampleSectionWrapper componentName="CmdBoxWrapper" headlineText="Box Wrapper with Box 'content' using a custom grid">
84
- <ViewCodeData :code="CmdCode[0]">
85
- <CmdBoxWrapper :boxesPerRow="[5, 2, 1]">
86
- <CmdBox v-for="index in 7" :key="index" textBody="Content" :cmd-custom-headline="{headlineText: 'Headline ' + index, headlineLevel: 3}" />
87
- </CmdBoxWrapper>
88
- </ViewCodeData>
89
- </ExampleSectionWrapper>
90
- <hr />
91
- <ExampleSectionWrapper componentName="CmdBoxWrapper" headlineText="Box Wrapper with Box 'product' using a custom grid">
92
- <ViewCodeData :code="CmdCode[0]" :data="boxProduct">
93
- <CmdBoxWrapper :boxesPerRow="[5, 2, 1]">
94
- <CmdBox v-for="index in boxProduct.length" :key="index" boxType="product" :product="boxProduct[index - 1]" :cmdCustomHeadline="{headlineLevel: 5}" />
95
- </CmdBoxWrapper>
96
- </ViewCodeData>
97
- </ExampleSectionWrapper>
98
- <hr />
99
- <ExampleSectionWrapper componentName="CmdBoxWrapper" headlineText="Box Wrapper with Box 'user' using a custom grid">
100
- <ViewCodeData :code="CmdCode[0]" :data="boxUser">
101
- <CmdBoxWrapper :boxesPerRow="[5, 2, 1]">
102
- <CmdBox v-for="index in boxUser.length" :key="index" boxType="user" :user="boxUser[index - 1]" :cmdCustomHeadline="{headlineLevel: 5}" />
103
- </CmdBoxWrapper>
104
- </ViewCodeData>
105
- </ExampleSectionWrapper>
106
- </template>
107
- <template v-slot:tab-content-1>
108
- <ComponentProperties :properties="CmdBoxWrapper.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures" />
109
- </template>
110
- </CmdTabs>
111
- </template>
@@ -1,51 +0,0 @@
1
- <script setup>
2
- // import functions
3
- import {tabProps, tabHandlers} from "../../tabs"
4
- import {isFrameMode} from "../../../utils/common"
5
-
6
- // import components
7
- import CmdBreadcrumbs from "../../../components/CmdBreadcrumbs"
8
- import ComponentProperties from "../../components/ComponentProperties"
9
- import ViewCodeData from "../../components/ViewCodeData"
10
- import CmdTabs from "../../../components/CmdTabs"
11
- import ExampleSectionWrapper from "../../components/ExampleSectionWrapper"
12
-
13
- // import example-data
14
- import breadcrumbs from '../../../assets/data/breadcrumbs.json'
15
- import CmdCode from "../../data/CmdBreadcrumbsHelp"
16
- import propertyDescriptions from "../../generated/CmdBreadcrumbsPropertyDescriptions.json"
17
-
18
- const propertyStructures = {
19
- breadcrumbLinks: {
20
- "text": "<string>",
21
- "type": "<string>",
22
- "path": "<string>",
23
- "route": {
24
- "params": {
25
- "lang": "<string>"
26
- }
27
- }
28
- }
29
- }
30
- </script>
31
-
32
- <template>
33
- <CmdTabs v-show="!isFrameMode()" v-bind="tabProps" :active-tab="tabProps.activeTab" v-on="tabHandlers">
34
- <template v-slot:tab-content-0>
35
- <h2>Component</h2>
36
- <ExampleSectionWrapper componentName="CmdBreadcrumbs" headlineText="Breadcrumbs">
37
- <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]" :data="breadcrumbs">
38
- <teleport to="#frame-component-target" :disabled="!isFrameMode()">
39
- <CmdBreadcrumbs
40
- :breadcrumbLinks="breadcrumbs"
41
- breadcrumbLabel="You are here:"
42
- />
43
- </teleport>
44
- </ViewCodeData>
45
- </ExampleSectionWrapper>
46
- </template>
47
- <template v-slot:tab-content-1>
48
- <ComponentProperties :properties="CmdBreadcrumbs.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
49
- </template>
50
- </CmdTabs>
51
- </template>
@@ -1,48 +0,0 @@
1
- <script setup>
2
- // import functions
3
- import {tabProps, tabHandlers} from "../../tabs"
4
- import {isFrameMode} from "../../../utils/common"
5
-
6
- // import components
7
- import CmdCompanyLogo from "../../../components/CmdCompanyLogo"
8
- import ComponentProperties from "../../components/ComponentProperties"
9
- import CmdTabs from "../../../components/CmdTabs"
10
- import ViewCodeData from "../../components/ViewCodeData"
11
- import ExampleSectionWrapper from "../../components/ExampleSectionWrapper"
12
-
13
- // import example-data
14
- import companyLogo from '../../../assets/data/company-logo.json'
15
- import CmdCode from "../../data/CmdCompanyLogoHelp"
16
- import propertyDescriptions from "../../generated/CmdCompanyLogoPropertyDescriptions.json"
17
-
18
- const propertyStructures = {
19
- link: {
20
- "type": "<string>",
21
- "path": "<string>",
22
- "tooltip": "<string>"
23
- }
24
- }
25
- </script>
26
-
27
- <template>
28
- <CmdTabs v-show="!isFrameMode()" v-bind="tabProps" :active-tab="tabProps.activeTab" v-on="tabHandlers">
29
- <template v-slot:tab-content-0>
30
- <h2>Component</h2>
31
- <ExampleSectionWrapper componentName="CmdCompanyLogo" headlineText="Company Logo">
32
- <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]" :data="companyLogo">
33
- <teleport to="#frame-component-target" :disabled="!isFrameMode()">
34
- <CmdCompanyLogo
35
- :link="companyLogo.link"
36
- altText="CoManD Logo"
37
- :pathDefaultLogo="require('@/assets/images/logo.svg')"
38
- :pathDarkmodeLogo="require('@/assets/images/logo-darkmode.svg')"
39
- />
40
- </teleport>
41
- </ViewCodeData>
42
- </ExampleSectionWrapper>
43
- </template>
44
- <template v-slot:tab-content-1>
45
- <ComponentProperties :properties="CmdCompanyLogo.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
46
- </template>
47
- </CmdTabs>
48
- </template>
@@ -1,105 +0,0 @@
1
- <script setup>
2
- // import functions
3
- import {tabProps, tabHandlers} from "../../tabs"
4
- import {isFrameMode} from "../../../utils/common"
5
-
6
- // import components
7
- import CmdCookieDisclaimer from "../../../components/CmdCookieDisclaimer"
8
- import ComponentProperties from "../../components/ComponentProperties"
9
- import ViewCodeData from "../../components/ViewCodeData"
10
- import CmdTabs from "../../../components/CmdTabs"
11
- import ExampleSectionWrapper from "../../components/ExampleSectionWrapper"
12
-
13
- // import example-data
14
- import cookieDisclaimer from '../../../assets/data/cookie-disclaimer.json'
15
- import CmdCode from "../../data/CmdCookieDisclaimerHelp"
16
- import propertyDescriptions from "../../generated/CmdCookieDisclaimerPropertyDescriptions.json"
17
-
18
- const propertyStructures = {
19
- cookieOptions: {
20
- "required": {
21
- "headline": "<string>",
22
- "cookies": [
23
- {
24
- "id": "<string>",
25
- "description": "<string>",
26
- "labelText": "<string>",
27
- "checked": "<boolean>",
28
- "status": "<string>",
29
- "linkDataPrivacy": {
30
- "label": "<string>",
31
- "link": "<string>",
32
- "linkText": "<string>"
33
- }
34
- },
35
- {
36
- "id": "<string>",
37
- "description": "<string>",
38
- "labelText": "<string>",
39
- "checked": "<boolean>",
40
- "status": "<string>",
41
- "linkDataPrivacy": {
42
- "label": "<string>",
43
- "link": "<string>",
44
- "target": "<string>",
45
- "linkText": "<string>"
46
- }
47
- }
48
- ]
49
- },
50
- "optional": {
51
- "headline": "Optional cookies",
52
- "cookies": [
53
- {
54
- "id": "<string>",
55
- "description": "<string>",
56
- "labelText": "<string>",
57
- "checked": "<boolean>",
58
- "linkDataPrivacy": {
59
- "label": "<string>",
60
- "link": "<string>",
61
- "target": "<string>",
62
- "linkText": "<string>"
63
- }
64
- },
65
- {
66
- "id": "<string>",
67
- "description": "<string>",
68
- "labelText": "<string>",
69
- "checked": "<boolean>",
70
- "linkDataPrivacy": {
71
- "label": "<string>",
72
- "link": "<string>",
73
- "target": "<string>",
74
- "linkText": "<string>"
75
- }
76
- }
77
- ]
78
- }
79
- }
80
- }
81
- </script>
82
-
83
- <template>
84
- <CmdTabs v-show="!isFrameMode()" v-bind="tabProps" :active-tab="tabProps.activeTab" v-on="tabHandlers">
85
- <template v-slot:tab-content-0>
86
- <h2>Component</h2>
87
- <ExampleSectionWrapper componentName="CmdCookieDisclaimer" headlineText="Cookie Disclaimer">
88
- <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]" :data="cookieDisclaimer">
89
- <teleport to="#frame-component-target" :disabled="!isFrameMode()">
90
- <CmdCookieDisclaimer
91
- :cmdCustomHeadline="{headlineText: 'Usage of cookies on this web site', headlineLevel: 3}"
92
- :cookieOptions="cookieDisclaimer"
93
- buttonLabelAcceptAllCookies="Accept all cookies"
94
- buttonLabelAcceptCurrentSettings="Accept current settings"
95
- @closeCookieDisclaimer="fancyBoxCookieDisclaimer = false"
96
- />
97
- </teleport>
98
- </ViewCodeData>
99
- </ExampleSectionWrapper>
100
- </template>
101
- <template v-slot:tab-content-1>
102
- <ComponentProperties :properties="CmdCookieDisclaimer.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
103
- </template>
104
- </CmdTabs>
105
- </template>
@@ -1,53 +0,0 @@
1
- <script setup>
2
- // import functions
3
- import {tabProps, tabHandlers} from "../../tabs"
4
- import {isFrameMode} from "../../../utils/common"
5
-
6
- // import components
7
- import CmdCustomHeadline from "../../../components/CmdCustomHeadline"
8
- import ComponentProperties from "../../components/ComponentProperties"
9
- import ViewCodeData from "../../components/ViewCodeData"
10
- import CmdTabs from "../../../components/CmdTabs"
11
- import ExampleSectionWrapper from "../../components/ExampleSectionWrapper"
12
-
13
- // import example-data
14
- import CmdCode from "../../data/CmdCustomHeadlineHelp"
15
- import propertyDescriptions from "../../generated/CmdCustomHeadlinePropertyDescriptions.json"
16
- </script>
17
-
18
- <template>
19
- <CmdTabs v-show="!isFrameMode()" v-bind="tabProps" :active-tab="tabProps.activeTab" v-on="tabHandlers">
20
- <template v-slot:tab-content-0>
21
- <h2>Component</h2>
22
- <ExampleSectionWrapper componentName="CmdCustomHeadline" headlineText="Headline level 1 (with icon and pre-headline)">
23
- <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
24
- <teleport to="#frame-component-target" :disabled="!isFrameMode()">
25
- <CmdCustomHeadline headlineText="Headline level 1" :headlineLevel="1" preHeadlineText="Pre-headline text" iconClass="icon-user-profile"/>
26
- <CmdCustomHeadline headlineText="Headline level 1" :headlineLevel="1"/>
27
- <CmdCustomHeadline headlineText="Headline level 2" :headlineLevel="2"/>
28
- <CmdCustomHeadline headlineText="Headline level 3" :headlineLevel="3"/>
29
- <CmdCustomHeadline headlineText="Headline level 4" :headlineLevel="4"/>
30
- <CmdCustomHeadline headlineText="Headline level 5" :headlineLevel="5"/>
31
- <CmdCustomHeadline headlineText="Headline level 6" :headlineLevel="6"/>
32
- </teleport>
33
- </ViewCodeData>
34
- </ExampleSectionWrapper>
35
- <hr />
36
- <ExampleSectionWrapper componentName="CmdCustomHeadline" headlineText="Headline level 1-6 (without icons and pre-headline">
37
- <ViewCodeData :isFirstComponent="true" :code="CmdCode[0]">
38
- <teleport to="#frame-component-target" :disabled="!isFrameMode()">
39
- <CmdCustomHeadline headlineText="Headline level 1" :headlineLevel="1"/>
40
- <CmdCustomHeadline headlineText="Headline level 2" :headlineLevel="2"/>
41
- <CmdCustomHeadline headlineText="Headline level 3" :headlineLevel="3"/>
42
- <CmdCustomHeadline headlineText="Headline level 4" :headlineLevel="4"/>
43
- <CmdCustomHeadline headlineText="Headline level 5" :headlineLevel="5"/>
44
- <CmdCustomHeadline headlineText="Headline level 6" :headlineLevel="6"/>
45
- </teleport>
46
- </ViewCodeData>
47
- </ExampleSectionWrapper>
48
- </template>
49
- <template v-slot:tab-content-1>
50
- <ComponentProperties :properties="CmdCustomHeadline.props" :propertyDescriptions="propertyDescriptions" :propertyStructures="propertyStructures"/>
51
- </template>
52
- </CmdTabs>
53
- </template>