comand-component-library 3.1.68 → 3.1.69

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.
Files changed (24) 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 +103 -99
  5. package/src/assets/styles/global-styles.scss +30 -48
  6. package/src/components/CmdBackToTopButton.vue +1 -1
  7. package/src/components/CmdBox.vue +40 -24
  8. package/src/components/CmdBoxSiteSearch.vue +228 -46
  9. package/src/components/CmdCompanyLogo.vue +34 -9
  10. package/src/components/CmdCookieDisclaimer.vue +0 -17
  11. package/src/components/CmdCustomHeadline.vue +1 -1
  12. package/src/components/CmdFakeSelect.vue +5 -5
  13. package/src/components/CmdFormElement.vue +76 -67
  14. package/src/components/CmdInputGroup.vue +12 -3
  15. package/src/components/CmdLoginForm.vue +4 -2
  16. package/src/components/CmdMultipleSwitch.vue +14 -2
  17. package/src/components/CmdMultistepFormProgressBar.vue +3 -3
  18. package/src/components/CmdSiteHeader.vue +12 -3
  19. package/src/components/CmdTabs.vue +3 -3
  20. package/src/components/CmdThumbnailScroller.vue +1 -1
  21. package/src/components/CmdToggleDarkMode.vue +66 -0
  22. package/src/components/CmdUploadForm.vue +4 -5
  23. package/src/index.js +0 -1
  24. package/src/components/CmdSwitchButton.vue +0 -181
package/src/components/CmdSwitchButton.vue DELETED
@@ -1,181 +0,0 @@
1
- <template>
2
- <label :class="['cmd-switch-button', 'toggle-switch',
3
- {'switch-label': onLabel && offLabel && !labelText,
4
- 'colored' : colored, 'on' : colored && isChecked,
5
- 'off' : colored && !isChecked, 'disabled': $attrs.disabled
6
- }
7
- ]"
8
- :for="id"
9
- :title="$attrs.title"
10
- >
11
- <input :type="type" :id="id" :name="name" :value="inputValue" :checked="isChecked" @change="onChange" v-bind="$attrs"/>
12
- <span class="label" v-if="onLabel && offLabel && !labelText">{{ onLabel }}</span>
13
- <span class="label" v-if="onLabel && offLabel && !labelText">{{ offLabel }}</span>
14
- <span class="label" v-if="!onLabel && !offLabel && labelText">{{ labelText }}</span>
15
- </label>
16
- </template>
17
-
18
- <script>
19
- export default {
20
- inheritAttrs: false,
21
- name: "CmdSwitchButton",
22
- emits: ["update:value"],
23
- props: {
24
- /**
25
- * set type for input
26
- *
27
- * values: checkbox, radio
28
- */
29
- type: {
30
- type: String,
31
- required: true
32
- },
33
- /**
34
- * set id for input
35
- *
36
- * @requiredForAccessibility: true
37
- */
38
- id: {
39
- type: String,
40
- required: true
41
- },
42
- /**
43
- * set name for input
44
- *
45
- * required for radio-buttons (and form-submit by browser)
46
- */
47
- name: {
48
- type: String,
49
- required: false
50
- },
51
- /**
52
- * value for v-model
53
- */
54
- value: {
55
- type: [String, Array, Boolean],
56
- required: false
57
- },
58
- /**
59
- * set value to pre-check toggle-switch
60
- */
61
- inputValue: {
62
- type: String,
63
- required: false
64
- },
65
- /**
66
- * text for label
67
- *
68
- * required if onLabel/offLabel are not set
69
- *
70
- * @requiredForAccessibility: true
71
- */
72
- labelText: {
73
- type: String,
74
- required: false
75
- },
76
- /**
77
- * text for on-label
78
- *
79
- * set to activate switch-label (=label is placed on toggle-switch (not behind))
80
- *
81
- * @requiredForAccessibility: true
82
- */
83
- onLabel: {
84
- type: String,
85
- required: false
86
- },
87
- /**
88
- * text for off-label
89
- *
90
- * set to activate switch-label (=label is placed on toggle-switch (not behind))
91
- *
92
- * @requiredForAccessibility: true
93
- */
94
- offLabel: {
95
- type: String,
96
- required: false
97
- },
98
- /**
99
- * set to true, if checkbox/radio-buttons should have green/checked and red/unchecked color-coding
100
- *
101
- * @affectsStyling: true
102
- */
103
- colored: {
104
- type: Boolean,
105
- required: false
106
- }
107
- },
108
- computed: {
109
- isChecked() {
110
- if (typeof this.value === 'boolean') {
111
- return this.value
112
- }
113
- if (typeof this.value === 'string') {
114
- return this.value === this.inputValue
115
- }
116
- if(this.value !== undefined) {
117
- return this.value.includes(this.inputValue)
118
- }
119
- return false
120
- }
121
- },
122
- methods: {
123
- onChange(e) {
124
- if (typeof this.value === 'boolean') {
125
- this.$emit('update:value', e.target.checked)
126
- } else if (typeof this.value === 'string') {
127
- this.$emit('update:value', e.target.value)
128
- } else {
129
- let values = [...this.value]
130
- if (e.target.checked) {
131
- values.push(e.target.value)
132
- } else {
133
- values = values.filter(value => value !== e.target.value)
134
- }
135
- this.$emit('update:value', values)
136
- }
137
- }
138
- }
139
- }
140
- </script>
141
-
142
- <style lang="scss">
143
- /* begin cmd-switch-button ------------------------------------------------------------------------------------------ */
144
- /* no cmd-prefix-styling (class based on frontend-framework */
145
- .toggle-switch {
146
- &.switch-label {
147
- &.colored {
148
- &.off {
149
- border-color: var(--error-color);
150
-
151
- span {
152
- &.label {
153
- color: var(--error-color);
154
-
155
- &::before {
156
- border-color: var(--error-color);
157
- background-color: var(--pure-white);
158
- }
159
- }
160
- }
161
- }
162
-
163
- &.on {
164
- border-color: var(--success-color);
165
-
166
- span {
167
- &.label {
168
- color: var(--success-color);
169
-
170
- &::before {
171
- border-color: var(--success-color);
172
- background-color: var(--success-color);
173
- }
174
- }
175
- }
176
- }
177
- }
178
- }
179
- }
180
- /* end cmd-switch-button ------------------------------------------------------------------------------------------ */
181
- </style>