comand-component-library 4.0.47 → 4.0.49

Sign up to get free protection for your applications and to get access to all the features.
Files changed (11) hide show
  1. package/dist/comand-component-library.js +1547 -1542
  2. package/dist/comand-component-library.umd.cjs +6 -6
  3. package/package.json +1 -1
  4. package/src/ComponentLibrary.vue +4 -2
  5. package/src/assets/data/image-zoom.json +28 -0
  6. package/src/components/CmdForm.vue +26 -19
  7. package/src/components/CmdImage.vue +12 -7
  8. package/src/components/CmdImageZoom.vue +2 -2
  9. package/src/components/CmdLoginForm.vue +95 -92
  10. package/src/components/CmdSiteSearch.vue +38 -39
  11. package/src/index.js +4 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "comand-component-library",
3
- "version": "4.0.47",
3
+ "version": "4.0.49",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "license": "GPL-3.0-only",
package/src/ComponentLibrary.vue CHANGED
@@ -1471,8 +1471,8 @@
1471
1471
  Image-Zoom
1472
1472
  </h2>
1473
1473
  <CmdImageZoom
1474
- :imageSmall="imageData[2]"
1475
- :imageLarge="imageData[3]"
1474
+ :imageSmall="imageZoomData.imageSmall"
1475
+ :imageLarge="imageZoomData.imageLarge"
1476
1476
  />
1477
1477
  </CmdWidthLimitationWrapper>
1478
1478
  <!-- end image-zoom ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -2046,6 +2046,7 @@ import fakeSelectFilterOptionsData from '@/assets/data/fake-select-filter-option
2046
2046
  import fakeSelectOptionsData from '@/assets/data/fake-select-options.json'
2047
2047
  import formElementsData from '@/assets/data/form-elements.json'
2048
2048
  import imageData from '@/assets/data/image.json'
2049
+ import imageZoomData from '@/assets/data/image-zoom.json'
2049
2050
  import imageGalleryData from '@/assets/data/image-gallery.json'
2050
2051
  import inputGroupRadiobuttonsData from '@/assets/data/input-group-radiobuttons.json'
2051
2052
  import inputGroupReplacedRadiobuttonsData from '@/assets/data/input-group-replaced-radiobuttons.json'
@@ -2218,6 +2219,7 @@ export default {
2218
2219
  fakeSelectOptionsData,
2219
2220
  formElementsData,
2220
2221
  imageData,
2222
+ imageZoomData,
2221
2223
  imageGalleryData,
2222
2224
  inputGroupReplacedRadiobuttonsData,
2223
2225
  inputGroupToggleSwitchRadiobuttonsData,
package/src/assets/data/image-zoom.json ADDED
@@ -0,0 +1,28 @@
1
+ {
2
+ "imageSmall": {
3
+ "image": {
4
+ "src": "media/images/demo-images/small/landscape-06.jpg",
5
+ "alt": "Alternative text",
6
+ "tooltip": "Tooltip"
7
+ },
8
+ "figcaption": {
9
+ "show": true,
10
+ "position": "top",
11
+ "text": "Figcaption above image (centered)",
12
+ "textAlign": "center"
13
+ }
14
+ },
15
+ "imageLarge": {
16
+ "image": {
17
+ "src": "media/images/demo-images/landscape-2x.jpg",
18
+ "alt": "Alternative text",
19
+ "tooltip": "Tooltip"
20
+ },
21
+ "figcaption": {
22
+ "show": true,
23
+ "position": "top",
24
+ "text": "Figcaption above image (centered)",
25
+ "textAlign": "center"
26
+ }
27
+ }
28
+ }
package/src/components/CmdForm.vue CHANGED
@@ -32,21 +32,24 @@
32
32
  />
33
33
  <!-- end loop for formElements -->
34
34
 
35
- <!-- begin submit-button -->
36
- <button v-if="submitButton && (submitButton.position === 'insideFieldset' || submitButton.position === null) " :class="['button', {primary: submitButton.primary}]" :type="submitButton.type">
37
- <span v-if="submitButton.iconClass" :class="submitButton.iconClass"></span>
38
- <span v-if="submitButton.text">{{ submitButton.text }}</span>
35
+ <!-- begin submit-button (inside fieldset) -->
36
+ <button v-if="submitButtonOptions && (submitButtonOptions.position === 'insideFieldset' || submitButtonOptions.position === null) "
37
+ :class="['button', {primary: submitButtonOptions.primary}]"
38
+ :type="submitButtonOptions.type"
39
+ >
40
+ <span v-if="submitButtonOptions.iconClass" :class="submitButtonOptions.iconClass"></span>
41
+ <span v-if="submitButtonOptions.text">{{ submitButtonOptions.text }}</span>
39
42
  </button>
40
- <!-- end submit-button -->
43
+ <!-- end submit-button (inside fieldset) -->
41
44
  </fieldset>
42
45
 
43
- <div v-if="submitButton && submitButton.position === 'belowFieldset'" class="button-wrapper">
44
- <!-- begin submit-button -->
45
- <button :class="['button', {primary: submitButton.primary}]" :type="submitButton.type || 'submit'">
46
- <span v-if="submitButton.iconClass" :class="submitButton.iconClass"></span>
47
- <span v-if="submitButton.text">{{ submitButton.text }}</span>
46
+ <div v-if="submitButtonOptions && submitButtonOptions.position === 'belowFieldset'" class="button-wrapper">
47
+ <!-- begin submit-button (below fieldset) -->
48
+ <button :class="['button', {primary: submitButtonOptions.primary}]" :type="submitButtonOptions.type || 'submit'">
49
+ <span v-if="submitButtonOptions.iconClass" :class="submitButtonOptions.iconClass"></span>
50
+ <span v-if="submitButtonOptions.text">{{ submitButtonOptions.text }}</span>
48
51
  </button>
49
- <!-- end submit-button -->
52
+ <!-- end submit-button (below fieldset) -->
50
53
  </div>
51
54
 
52
55
  <!-- begin button-row-slot-content -->
@@ -140,14 +143,18 @@ export default {
140
143
  */
141
144
  submitButton: {
142
145
  type: Object,
143
- default() {
144
- return {
145
- iconClass: "icon-check",
146
- text: "Submit",
147
- type: "submit",
148
- position: "insideFieldset",
149
- primary: true
150
- }
146
+ required: false
147
+ }
148
+ },
149
+ computed: {
150
+ submitButtonOptions() {
151
+ return {
152
+ iconClass: "icon-check",
153
+ text: "Submit",
154
+ type: "submit",
155
+ position: "insideFieldset",
156
+ primary: true,
157
+ ...submitButton
151
158
  }
152
159
  }
153
160
  },
package/src/components/CmdImage.vue CHANGED
@@ -27,7 +27,7 @@
27
27
  v-model="editableFigcaptionText"
28
28
  />
29
29
  <!-- end CmdFormElement -->
30
- <figcaption v-else-if="figcaption?.text" v-html="figcaption?.text" />
30
+ <figcaption v-else-if="figcaption?.text" v-html="figcaption?.text"/>
31
31
  </template>
32
32
  <!-- end figcaption above image -->
33
33
 
@@ -77,7 +77,7 @@
77
77
  placeholder="figcaption"
78
78
  />
79
79
  <!-- end CmdFormElement -->
80
- <figcaption v-else-if="figcaption?.text" v-html="figcaption?.text" />
80
+ <figcaption v-else-if="figcaption?.text" v-html="figcaption?.text"/>
81
81
  </template>
82
82
  <!-- end figcaption below image -->
83
83
 
@@ -96,14 +96,19 @@
96
96
  <!-- end edit-mode -->
97
97
 
98
98
  <!-- begin default-view -->
99
- <figure v-else :class="['cmd-image', textAlign]">
100
- <figcaption v-if="figcaption?.show && figcaption?.position === 'top'" v-html="figcaption?.text" />
101
- <img :src="imageSource" :alt="image?.alt" :title="image?.tooltip" @load="onImageLoaded" />
102
- <figcaption v-if="figcaption?.show && figcaption?.position !== 'top'" v-html="figcaption?.text" />
99
+ <!-- begin image with figure/figcaption -->
100
+ <figure v-else-if="figcaption?.show" :class="['cmd-image', textAlign]">
101
+ <figcaption v-if="figcaption?.position === 'top'" v-html="figcaption?.text"/>
102
+ <img :src="imageSource" :alt="image?.alt" :title="image?.tooltip" @load="onImageLoaded"/>
103
+ <figcaption v-if="figcaption?.position !== 'top'" v-html="figcaption?.text"/>
103
104
  </figure>
105
+ <!-- end image with figure/figcaption -->
106
+
107
+ <!-- begin image without figure/figcaption -->
108
+ <img v-else :src="imageSource" :alt="image?.alt" :title="image?.tooltip" @load="onImageLoaded"/>
109
+ <!-- end image without figure/figcaption -->
104
110
  <!-- end default-view -->
105
111
  </template>
106
-
107
112
  <script>
108
113
  import {createUuid} from "../utils/common.js"
109
114
  import {checkAndUploadFile} from "../utils/checkAndUploadFile"
package/src/components/CmdImageZoom.vue CHANGED
@@ -13,12 +13,12 @@
13
13
  <!-- end small image -->
14
14
 
15
15
  <!-- begin large image -->
16
- <div v-if="showLargeImage" class="zoom-container">
16
+ <div class="zoom-container">
17
17
  <!-- begin CmdImage for large image -->
18
18
  <CmdImage v-bind="imageLarge" :figcaption="{}" />
19
19
  <!-- end CmdImage for large image -->
20
20
  </div>
21
- <div v-if="showLargeImage" class="zoom-overlay"></div>
21
+ <div class="zoom-overlay"></div>
22
22
  <!-- end large image -->
23
23
  </div>
24
24
  </template>
package/src/components/CmdLoginForm.vue CHANGED
@@ -16,13 +16,8 @@
16
16
  element="input"
17
17
  type="text"
18
18
  ref="username"
19
- :name="cmdFormElementUsername.name"
20
- :id="cmdFormElementUsername.id"
21
19
  v-model="username"
22
- :fieldIconClass="cmdFormElementUsername.innerIconClass"
23
- :labelText="cmdFormElementUsername.labelText"
24
- :placeholder="cmdFormElementUsername.placeholder"
25
- :required="cmdFormElementUsername.required"
20
+ v-bind="cmdFormElementUsernameOptions"
26
21
  @validationStatusChange="checkValidationStatus($event, 'username')"
27
22
  />
28
23
  <!-- end CmdFormElement -->
@@ -31,13 +26,8 @@
31
26
  <CmdFormElement
32
27
  element="input"
33
28
  type="password"
34
- :name="cmdFormElementPassword.name"
35
- :id="cmdFormElementPassword.id"
36
- :fieldIconClass="cmdFormElementPassword.innerIconClass"
37
29
  v-model="password"
38
- :labelText="cmdFormElementPassword.labelText"
39
- :placeholder="cmdFormElementPassword.placeholder"
40
- :required="cmdFormElementPassword.required"
30
+ v-bind="cmdFormElementPasswordOptions"
41
31
  @validationStatusChange="checkValidationStatus($event, 'password')"
42
32
  />
43
33
  <!-- end CmdFormElement -->
@@ -83,21 +73,21 @@
83
73
 
84
74
  <!-- begin link-type 'button' -->
85
75
  <button
86
- v-if="buttons.login.linkType === 'button'"
87
- :type="buttons.login.type === 'submit' ? 'submit' : 'button'"
88
- :class="['button', { primary: buttons.login.primary }]"
76
+ v-if="buttonLoginOptions.linkType === 'button'"
77
+ :type="buttonLoginOptions.type === 'submit' ? 'submit' : 'button'"
78
+ :class="['button', { primary: buttonLoginOptions.primary }]"
89
79
  @click="onClick"
90
80
  :disabled="buttonLoginDisabled"
91
81
  >
92
82
  <!-- begin CmdIcon -->
93
83
  <CmdIcon
94
- v-if="buttons.login.icon.iconClass"
95
- :iconClass="buttons.login.icon.iconClass"
96
- :type="buttons.login.icon.iconType"
97
- :title="buttons.login.icon.tooltip"
84
+ v-if="buttonLoginOptions.icon.iconClass"
85
+ :iconClass="buttonLoginOptions.icon.iconClass"
86
+ :type="buttonLoginOptions.icon.iconType"
87
+ :title="buttonLoginOptions.icon.tooltip"
98
88
  />
99
89
  <!-- end CmdIcon -->
100
- <span v-if="buttons.login.text">{{ buttons.login.text }}</span>
90
+ <span v-if="buttonLoginOptions.text">{{ buttonLoginOptions.text }}</span>
101
91
  </button>
102
92
  <!-- begin link-type 'button' -->
103
93
  </div>
@@ -119,14 +109,9 @@
119
109
  ref="sendPassword"
120
110
  element="input"
121
111
  type="email"
122
- :fieldIconClass="cmdFormElementSendLogin.innerIconClass"
123
- :labelText="cmdFormElementSendLogin.labelText"
124
- :placeholder="cmdFormElementSendLogin.placeholder"
125
- :name="cmdFormElementSendLogin.name"
126
- :required="cmdFormElementSendLogin.required"
127
- :id="cmdFormElementSendLogin.id"
128
112
  @validationStatusChange="checkValidationStatus($event, 'email')"
129
113
  v-model="sendLoginMail"
114
+ v-bind="cmdFormElementSendLoginOptions"
130
115
  />
131
116
  <!-- end CmdFormElement -->
132
117
 
@@ -151,19 +136,19 @@
151
136
 
152
137
  <!-- begin link-type 'button' -->
153
138
  <button
154
- v-if="buttons.sendLogin?.linkType === 'button'"
155
- :type="buttons.sendLogin?.type === 'submit' ? 'submit' : 'button'"
156
- :class="['button', { primary: buttons.sendLogin?.primary }]"
139
+ v-if="buttonSendLoginOptions.linkType === 'button'"
140
+ :type="buttonSendLoginOptions.type === 'submit' ? 'submit' : 'button'"
141
+ :class="['button', { primary: buttonSendLoginOptions.primary }]"
157
142
  :disabled="buttonSendLoginDisabled"
158
143
  >
159
144
  <!-- begin CmdIcon -->
160
145
  <CmdIcon
161
- v-if="buttons.sendLogin?.icon?.iconClass"
162
- :iconClass="buttons.sendLogin?.icon?.iconClass"
163
- :title="buttons.sendLogin?.icon?.tooltip"
146
+ v-if="buttonSendLoginOptions.icon?.iconClass"
147
+ :iconClass="buttonSendLoginOptions.icon?.iconClass"
148
+ :title="buttonSendLoginOptions.icon?.tooltip"
164
149
  />
165
150
  <!-- end CmdIcon -->
166
- <span v-if="buttons.sendLogin?.text">{{ buttons.sendLogin?.text }}</span>
151
+ <span v-if="buttonSendLoginOptions.text">{{ buttonSendLoginOptions.text }}</span>
167
152
  </button>
168
153
  <!-- end link-type 'button' -->
169
154
  </div>
@@ -269,16 +254,7 @@ export default {
269
254
  */
270
255
  cmdFormElementUsername: {
271
256
  type: Object,
272
- default() {
273
- return {
274
- labelText: "Username:",
275
- placeholder: "Type in username",
276
- innerIconClass: "icon-user-profile",
277
- name: "login-username",
278
- id: "login-username",
279
- required: true
280
- }
281
- }
257
+ required: false
282
258
  },
283
259
  /**
284
260
  * properties for CmdFormElement-component for password-field
@@ -287,16 +263,7 @@ export default {
287
263
  */
288
264
  cmdFormElementPassword: {
289
265
  type: Object,
290
- default() {
291
- return {
292
- labelText: "Password:",
293
- placeholder: "Type in password",
294
- innerIconClass: "icon-security-settings",
295
- name: "login-password",
296
- id: "login-password",
297
- required: true
298
- }
299
- }
266
+ required: false
300
267
  },
301
268
  /**
302
269
  * properties for CmdFormElement-component for email-address-field (to send login-data)
@@ -305,16 +272,7 @@ export default {
305
272
  */
306
273
  cmdFormElementSendLogin: {
307
274
  type: Object,
308
- default() {
309
- return {
310
- labelText: "Email-address:",
311
- placeholder: "Type in email-address you are registered with",
312
- innerIconClass: "icon-mail",
313
- name: "login-send-login",
314
- id: "login-send-login",
315
- required: true
316
- }
317
- }
275
+ required: false
318
276
  },
319
277
  /**
320
278
  * options to display
@@ -360,39 +318,84 @@ export default {
360
318
  *
361
319
  * @requiredForAccessibility: partial
362
320
  */
363
- buttons: {
321
+ buttonLogin: {
364
322
  type: Object,
365
- default() {
366
- return {
367
- login: {
368
- linkType: "button", /* href, router, button */
369
- type: "submit", /* submit, button */
370
- path: "",
371
- text: "Login",
372
- primary: true,
373
- icon: {
374
- show: true,
375
- iconClass: "icon-logon",
376
- tooltip: ""
377
- }
378
- },
379
- sendLogin: {
380
- linkType: "button", /* href, router, button */
381
- type: "submit", /* submit, button */
382
- path: "",
383
- text: "Send login",
384
- primary: true,
385
- icon: {
386
- show: true,
387
- iconClass: "icon-mail",
388
- tooltip: ""
389
- }
390
- }
391
- }
392
- }
323
+ required: false
324
+ },
325
+ /**
326
+ * button to send-login-data
327
+ *
328
+ * @requiredForAccessibility: partial
329
+ */
330
+ buttonSendLogin: {
331
+ type: Object,
332
+ required: false
393
333
  }
394
334
  },
395
335
  computed: {
336
+ cmdFormElementUsernameOptions() {
337
+ return {
338
+ labelText: "Username:",
339
+ placeholder: "Type in username",
340
+ fieldIconClass: "icon-user-profile",
341
+ name: "login-username",
342
+ id: "login-username",
343
+ required: true,
344
+ ...this.cmdFormElementUsername
345
+ }
346
+ },
347
+ cmdFormElementPasswordOptions() {
348
+ return {
349
+ labelText: "Password:",
350
+ placeholder: "Type in password",
351
+ fieldIconClass: "icon-security-settings",
352
+ name: "login-password",
353
+ id: "login-password",
354
+ required: true,
355
+ ...this.cmdFormElementPassword
356
+ }
357
+ },
358
+ cmdFormElementSendLoginOptions() {
359
+ return {
360
+ labelText: "Email-address:",
361
+ placeholder: "Type in email-address you are registered with",
362
+ fieldIconClass: "icon-mail",
363
+ name: "login-send-login",
364
+ id: "login-send-login",
365
+ required: true,
366
+ ...this.cmdFormElementSendLogin
367
+ }
368
+ },
369
+ buttonLoginOptions() {
370
+ return {
371
+ linkType: "button", /* href, router, button */
372
+ type: "submit", /* submit, button */
373
+ path: "",
374
+ text: "Login",
375
+ primary: true,
376
+ icon: {
377
+ show: true,
378
+ iconClass: "icon-logon",
379
+ tooltip: ""
380
+ },
381
+ ...this.buttonLogin
382
+ }
383
+ },
384
+ buttonSendLoginOptions() {
385
+ return {
386
+ linkType: "button", /* href, router, button */
387
+ type: "submit", /* submit, button */
388
+ path: "",
389
+ text: "Send login",
390
+ primary: true,
391
+ icon: {
392
+ show: true,
393
+ iconClass: "icon-mail",
394
+ tooltip: ""
395
+ },
396
+ ...this.buttonSendLogin
397
+ }
398
+ },
396
399
  buttonLoginDisabled() {
397
400
  return !(this.usernameValidationStatus && this.passwordValidationStatus)
398
401
  },
package/src/components/CmdSiteSearch.vue CHANGED
@@ -42,14 +42,11 @@
42
42
 
43
43
  <!-- begin CmdFormElement for radius -->
44
44
  <CmdFormElement
45
- v-if="cmdFormElementRadius.show"
45
+ v-if="cmdFormElementRadiusOptions.show"
46
46
  element="select"
47
47
  class="no-flex"
48
48
  v-model="radius"
49
- :show-label="cmdFormElementRadius.showLabel"
50
- :labelText="cmdFormElementRadius.labelText"
51
- :select-options="cmdFormElementRadius.selectOptions"
52
- :required="cmdFormElementRadius.required"
49
+ v-bind="cmdFormElementRadiusOptions"
53
50
  />
54
51
  <!-- end CmdFormElement for radius -->
55
52
  </div>
@@ -226,40 +223,7 @@ export default {
226
223
  */
227
224
  cmdFormElementRadius: {
228
225
  type: Object,
229
- default() {
230
- return {
231
- show: true,
232
- showLabel: false,
233
- required: false,
234
- labelText: "Radius",
235
- selectOptions: [
236
- {
237
- text: "None",
238
- value: 0
239
- },
240
- {
241
- text: "5 Km",
242
- value: 5
243
- },
244
- {
245
- text: "10 Km",
246
- value: 10
247
- },
248
- {
249
- text: "15 Km",
250
- value: 15
251
- },
252
- {
253
- text: "50 Km",
254
- value: 50
255
- },
256
- {
257
- text: "100 Km",
258
- value: 100
259
- }
260
- ]
261
- }
262
- }
226
+ required: false
263
227
  },
264
228
  /**
265
229
  * properties for CmdFormElement-component for search-button
@@ -304,6 +268,41 @@ export default {
304
268
  }
305
269
  },
306
270
  computed: {
271
+ cmdFormElementRadiusOptions() {
272
+ return {
273
+ show: true,
274
+ showLabel: false,
275
+ required: false,
276
+ labelText: "Radius",
277
+ selectOptions: [
278
+ {
279
+ text: "None",
280
+ value: 0
281
+ },
282
+ {
283
+ text: "5 Km",
284
+ value: 5
285
+ },
286
+ {
287
+ text: "10 Km",
288
+ value: 10
289
+ },
290
+ {
291
+ text: "15 Km",
292
+ value: 15
293
+ },
294
+ {
295
+ text: "50 Km",
296
+ value: 50
297
+ },
298
+ {
299
+ text: "100 Km",
300
+ value: 100
301
+ }
302
+ ],
303
+ ...this.cmdFormElementRadius
304
+ }
305
+ },
307
306
  searchValue1: {
308
307
  get() {
309
308
  return this.modelValueInput1
package/src/index.js CHANGED
@@ -66,4 +66,7 @@ export { createUuid, createHtmlId } from '@/utils/common'
66
66
  export { getFileExtension } from '@/utils/getFileExtension'
67
67
 
68
68
  // export composables
69
- export { useSequence } from '@/composables/sequence'
69
+ export { useSequence } from '@/composables/sequence'
70
+
71
+ // export mixins
72
+ export { default as I18n } from '@/mixins/I18n.js'