comand-component-library 4.0.47 → 4.0.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "4.0.47",
+  "version": "4.0.49",
   "private": false,
   "type": "module",
   "license": "GPL-3.0-only",

package/src/ComponentLibrary.vue

@@ -1471,8 +1471,8 @@
                         Image-Zoom
                     </h2>
                     <CmdImageZoom
-                        :imageSmall="imageData[2]"
-                        :imageLarge="imageData[3]"
+                        :imageSmall="imageZoomData.imageSmall"
+                        :imageLarge="imageZoomData.imageLarge"
                     />
                 </CmdWidthLimitationWrapper>
                 <!-- end image-zoom ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -2046,6 +2046,7 @@ import fakeSelectFilterOptionsData from '@/assets/data/fake-select-filter-option
 import fakeSelectOptionsData from '@/assets/data/fake-select-options.json'
 import formElementsData from '@/assets/data/form-elements.json'
 import imageData from '@/assets/data/image.json'
+import imageZoomData from '@/assets/data/image-zoom.json'
 import imageGalleryData from '@/assets/data/image-gallery.json'
 import inputGroupRadiobuttonsData from '@/assets/data/input-group-radiobuttons.json'
 import inputGroupReplacedRadiobuttonsData from '@/assets/data/input-group-replaced-radiobuttons.json'
@@ -2218,6 +2219,7 @@ export default {
             fakeSelectOptionsData,
             formElementsData,
             imageData,
+            imageZoomData,
             imageGalleryData,
             inputGroupReplacedRadiobuttonsData,
             inputGroupToggleSwitchRadiobuttonsData,

package/src/assets/data/image-zoom.json

@@ -0,0 +1,28 @@
+{
+  "imageSmall": {
+    "image": {
+      "src": "media/images/demo-images/small/landscape-06.jpg",
+      "alt": "Alternative text",
+      "tooltip": "Tooltip"
+    },
+    "figcaption": {
+      "show": true,
+      "position": "top",
+      "text": "Figcaption above image (centered)",
+      "textAlign": "center"
+    }
+  },
+  "imageLarge": {
+    "image": {
+      "src": "media/images/demo-images/landscape-2x.jpg",
+      "alt": "Alternative text",
+      "tooltip": "Tooltip"
+    },
+    "figcaption": {
+      "show": true,
+      "position": "top",
+      "text": "Figcaption above image (centered)",
+      "textAlign": "center"
+    }
+  }
+}

package/src/components/CmdForm.vue

@@ -32,21 +32,24 @@
                 />
                 <!-- end loop for formElements -->
 
-                <!-- begin submit-button -->
-                <button v-if="submitButton && (submitButton.position === 'insideFieldset' || submitButton.position === null) " :class="['button', {primary: submitButton.primary}]" :type="submitButton.type">
-                    <span v-if="submitButton.iconClass" :class="submitButton.iconClass"></span>
-                    <span v-if="submitButton.text">{{ submitButton.text }}</span>
+                <!-- begin submit-button (inside fieldset) -->
+                <button v-if="submitButtonOptions && (submitButtonOptions.position === 'insideFieldset' || submitButtonOptions.position === null) "
+                        :class="['button', {primary: submitButtonOptions.primary}]"
+                        :type="submitButtonOptions.type"
+                >
+                    <span v-if="submitButtonOptions.iconClass" :class="submitButtonOptions.iconClass"></span>
+                    <span v-if="submitButtonOptions.text">{{ submitButtonOptions.text }}</span>
                 </button>
-                <!-- end submit-button -->
+                <!-- end submit-button (inside fieldset) -->
             </fieldset>
 
-            <div v-if="submitButton && submitButton.position === 'belowFieldset'" class="button-wrapper">
-                <!-- begin submit-button -->
-                <button :class="['button', {primary: submitButton.primary}]" :type="submitButton.type || 'submit'">
-                    <span v-if="submitButton.iconClass" :class="submitButton.iconClass"></span>
-                    <span v-if="submitButton.text">{{ submitButton.text }}</span>
+            <div v-if="submitButtonOptions && submitButtonOptions.position === 'belowFieldset'" class="button-wrapper">
+                <!-- begin submit-button (below fieldset) -->
+                <button :class="['button', {primary: submitButtonOptions.primary}]" :type="submitButtonOptions.type || 'submit'">
+                    <span v-if="submitButtonOptions.iconClass" :class="submitButtonOptions.iconClass"></span>
+                    <span v-if="submitButtonOptions.text">{{ submitButtonOptions.text }}</span>
                 </button>
-                <!-- end submit-button -->
+                <!-- end submit-button (below fieldset) -->
             </div>
 
             <!-- begin button-row-slot-content -->
@@ -140,14 +143,18 @@ export default {
          */
         submitButton: {
             type: Object,
-            default() {
-                return {
-                    iconClass: "icon-check",
-                    text: "Submit",
-                    type: "submit",
-                    position: "insideFieldset",
-                    primary: true
-                }
+            required: false
+        }
+    },
+    computed: {
+        submitButtonOptions() {
+            return {
+                iconClass: "icon-check",
+                text: "Submit",
+                type: "submit",
+                position: "insideFieldset",
+                primary: true,
+                ...submitButton
             }
         }
     },

package/src/components/CmdImage.vue

@@ -27,7 +27,7 @@
                         v-model="editableFigcaptionText"
                     />
                     <!-- end CmdFormElement -->
-                    <figcaption v-else-if="figcaption?.text" v-html="figcaption?.text" />
+                    <figcaption v-else-if="figcaption?.text" v-html="figcaption?.text"/>
                 </template>
                 <!-- end figcaption above image -->
 
@@ -77,7 +77,7 @@
                         placeholder="figcaption"
                     />
                     <!-- end CmdFormElement -->
-                    <figcaption v-else-if="figcaption?.text" v-html="figcaption?.text" />
+                    <figcaption v-else-if="figcaption?.text" v-html="figcaption?.text"/>
                 </template>
                 <!-- end figcaption below image -->
 
@@ -96,14 +96,19 @@
     <!-- end edit-mode -->
 
     <!-- begin default-view -->
-    <figure v-else :class="['cmd-image', textAlign]">
-        <figcaption v-if="figcaption?.show && figcaption?.position === 'top'" v-html="figcaption?.text" />
-        <img :src="imageSource" :alt="image?.alt" :title="image?.tooltip" @load="onImageLoaded" />
-        <figcaption v-if="figcaption?.show && figcaption?.position !== 'top'" v-html="figcaption?.text" />
+    <!-- begin image with figure/figcaption -->
+    <figure v-else-if="figcaption?.show" :class="['cmd-image', textAlign]">
+        <figcaption v-if="figcaption?.position === 'top'" v-html="figcaption?.text"/>
+        <img :src="imageSource" :alt="image?.alt" :title="image?.tooltip" @load="onImageLoaded"/>
+        <figcaption v-if="figcaption?.position !== 'top'" v-html="figcaption?.text"/>
     </figure>
+    <!-- end image with figure/figcaption -->
+
+    <!-- begin image without figure/figcaption -->
+    <img v-else :src="imageSource" :alt="image?.alt" :title="image?.tooltip" @load="onImageLoaded"/>
+    <!-- end image without figure/figcaption -->
     <!-- end default-view -->
 </template>
-
 <script>
 import {createUuid} from "../utils/common.js"
 import {checkAndUploadFile} from "../utils/checkAndUploadFile"

package/src/components/CmdImageZoom.vue

@@ -13,12 +13,12 @@
         <!-- end small image -->
 
         <!-- begin large image -->
-        <div v-if="showLargeImage" class="zoom-container">
+        <div  class="zoom-container">
             <!-- begin CmdImage for large image -->
             <CmdImage v-bind="imageLarge" :figcaption="{}" />
             <!-- end CmdImage for large image -->
         </div>
-        <div v-if="showLargeImage" class="zoom-overlay"></div>
+        <div class="zoom-overlay"></div>
         <!-- end large image -->
     </div>
 </template>

package/src/components/CmdLoginForm.vue

@@ -16,13 +16,8 @@
                 element="input"
                 type="text"
                 ref="username"
-                :name="cmdFormElementUsername.name"
-                :id="cmdFormElementUsername.id"
                 v-model="username"
-                :fieldIconClass="cmdFormElementUsername.innerIconClass"
-                :labelText="cmdFormElementUsername.labelText"
-                :placeholder="cmdFormElementUsername.placeholder"
-                :required="cmdFormElementUsername.required"
+                v-bind="cmdFormElementUsernameOptions"
                 @validationStatusChange="checkValidationStatus($event, 'username')"
             />
             <!-- end CmdFormElement -->
@@ -31,13 +26,8 @@
             <CmdFormElement
                 element="input"
                 type="password"
-                :name="cmdFormElementPassword.name"
-                :id="cmdFormElementPassword.id"
-                :fieldIconClass="cmdFormElementPassword.innerIconClass"
                 v-model="password"
-                :labelText="cmdFormElementPassword.labelText"
-                :placeholder="cmdFormElementPassword.placeholder"
-                :required="cmdFormElementPassword.required"
+                v-bind="cmdFormElementPasswordOptions"
                 @validationStatusChange="checkValidationStatus($event, 'password')"
             />
             <!-- end CmdFormElement -->
@@ -83,21 +73,21 @@
 
             <!-- begin link-type 'button' -->
             <button
-                v-if="buttons.login.linkType === 'button'"
-                :type="buttons.login.type === 'submit' ? 'submit' : 'button'"
-                :class="['button', { primary: buttons.login.primary }]"
+                v-if="buttonLoginOptions.linkType === 'button'"
+                :type="buttonLoginOptions.type === 'submit' ? 'submit' : 'button'"
+                :class="['button', { primary: buttonLoginOptions.primary }]"
                 @click="onClick"
                 :disabled="buttonLoginDisabled"
             >
                 <!-- begin CmdIcon -->
                 <CmdIcon
-                    v-if="buttons.login.icon.iconClass"
-                    :iconClass="buttons.login.icon.iconClass"
-                    :type="buttons.login.icon.iconType"
-                    :title="buttons.login.icon.tooltip"
+                    v-if="buttonLoginOptions.icon.iconClass"
+                    :iconClass="buttonLoginOptions.icon.iconClass"
+                    :type="buttonLoginOptions.icon.iconType"
+                    :title="buttonLoginOptions.icon.tooltip"
                 />
                 <!-- end CmdIcon -->
-                <span v-if="buttons.login.text">{{ buttons.login.text }}</span>
+                <span v-if="buttonLoginOptions.text">{{ buttonLoginOptions.text }}</span>
             </button>
             <!-- begin link-type 'button' -->
         </div>
@@ -119,14 +109,9 @@
             ref="sendPassword"
             element="input"
             type="email"
-            :fieldIconClass="cmdFormElementSendLogin.innerIconClass"
-            :labelText="cmdFormElementSendLogin.labelText"
-            :placeholder="cmdFormElementSendLogin.placeholder"
-            :name="cmdFormElementSendLogin.name"
-            :required="cmdFormElementSendLogin.required"
-            :id="cmdFormElementSendLogin.id"
             @validationStatusChange="checkValidationStatus($event, 'email')"
             v-model="sendLoginMail"
+            v-bind="cmdFormElementSendLoginOptions"
         />
         <!-- end CmdFormElement -->
 
@@ -151,19 +136,19 @@
 
             <!-- begin link-type 'button' -->
             <button
-                v-if="buttons.sendLogin?.linkType === 'button'"
-                :type="buttons.sendLogin?.type === 'submit' ? 'submit' : 'button'"
-                :class="['button', { primary: buttons.sendLogin?.primary }]"
+                v-if="buttonSendLoginOptions.linkType === 'button'"
+                :type="buttonSendLoginOptions.type === 'submit' ? 'submit' : 'button'"
+                :class="['button', { primary: buttonSendLoginOptions.primary }]"
                 :disabled="buttonSendLoginDisabled"
             >
                 <!-- begin CmdIcon -->
                 <CmdIcon
-                    v-if="buttons.sendLogin?.icon?.iconClass"
-                    :iconClass="buttons.sendLogin?.icon?.iconClass"
-                    :title="buttons.sendLogin?.icon?.tooltip"
+                    v-if="buttonSendLoginOptions.icon?.iconClass"
+                    :iconClass="buttonSendLoginOptions.icon?.iconClass"
+                    :title="buttonSendLoginOptions.icon?.tooltip"
                 />
                 <!-- end CmdIcon -->
-                <span v-if="buttons.sendLogin?.text">{{ buttons.sendLogin?.text }}</span>
+                <span v-if="buttonSendLoginOptions.text">{{ buttonSendLoginOptions.text }}</span>
             </button>
             <!-- end link-type 'button' -->
         </div>
@@ -269,16 +254,7 @@ export default {
          */
         cmdFormElementUsername: {
             type: Object,
-            default() {
-                return {
-                    labelText: "Username:",
-                    placeholder: "Type in username",
-                    innerIconClass: "icon-user-profile",
-                    name: "login-username",
-                    id: "login-username",
-                    required: true
-                }
-            }
+            required: false
         },
         /**
          * properties for CmdFormElement-component for password-field
@@ -287,16 +263,7 @@ export default {
          */
         cmdFormElementPassword: {
             type: Object,
-            default() {
-                return {
-                    labelText: "Password:",
-                    placeholder: "Type in password",
-                    innerIconClass: "icon-security-settings",
-                    name: "login-password",
-                    id: "login-password",
-                    required: true
-                }
-            }
+            required: false
         },
         /**
          * properties for CmdFormElement-component for email-address-field (to send login-data)
@@ -305,16 +272,7 @@ export default {
          */
         cmdFormElementSendLogin: {
             type: Object,
-            default() {
-                return {
-                    labelText: "Email-address:",
-                    placeholder: "Type in email-address you are registered with",
-                    innerIconClass: "icon-mail",
-                    name: "login-send-login",
-                    id: "login-send-login",
-                    required: true
-                }
-            }
+            required: false
         },
         /**
          * options to display
@@ -360,39 +318,84 @@ export default {
          *
          * @requiredForAccessibility: partial
          */
-        buttons: {
+        buttonLogin: {
             type: Object,
-            default() {
-                return {
-                    login: {
-                        linkType: "button", /* href, router, button */
-                        type: "submit", /* submit, button */
-                        path: "",
-                        text: "Login",
-                        primary: true,
-                        icon: {
-                            show: true,
-                            iconClass: "icon-logon",
-                            tooltip: ""
-                        }
-                    },
-                    sendLogin: {
-                        linkType: "button", /* href, router, button */
-                        type: "submit", /* submit, button */
-                        path: "",
-                        text: "Send login",
-                        primary: true,
-                        icon: {
-                            show: true,
-                            iconClass: "icon-mail",
-                            tooltip: ""
-                        }
-                    }
-                }
-            }
+            required: false
+        },
+        /**
+         * button to send-login-data
+         *
+         * @requiredForAccessibility: partial
+         */
+        buttonSendLogin: {
+            type: Object,
+            required: false
         }
     },
     computed: {
+        cmdFormElementUsernameOptions() {
+            return {
+                labelText: "Username:",
+                placeholder: "Type in username",
+                fieldIconClass: "icon-user-profile",
+                name: "login-username",
+                id: "login-username",
+                required: true,
+                ...this.cmdFormElementUsername
+            }
+        },
+        cmdFormElementPasswordOptions() {
+            return {
+                labelText: "Password:",
+                placeholder: "Type in password",
+                fieldIconClass: "icon-security-settings",
+                name: "login-password",
+                id: "login-password",
+                required: true,
+                ...this.cmdFormElementPassword
+            }
+        },
+        cmdFormElementSendLoginOptions() {
+            return {
+                labelText: "Email-address:",
+                placeholder: "Type in email-address you are registered with",
+                fieldIconClass: "icon-mail",
+                name: "login-send-login",
+                id: "login-send-login",
+                required: true,
+                ...this.cmdFormElementSendLogin
+            }
+        },
+        buttonLoginOptions() {
+            return {
+                linkType: "button", /* href, router, button */
+                type: "submit", /* submit, button */
+                path: "",
+                text: "Login",
+                primary: true,
+                icon: {
+                    show: true,
+                    iconClass: "icon-logon",
+                    tooltip: ""
+                },
+                ...this.buttonLogin
+            }
+        },
+        buttonSendLoginOptions() {
+            return {
+                linkType: "button", /* href, router, button */
+                type: "submit", /* submit, button */
+                path: "",
+                text: "Send login",
+                primary: true,
+                icon: {
+                    show: true,
+                    iconClass: "icon-mail",
+                    tooltip: ""
+                },
+                ...this.buttonSendLogin
+            }
+        },
         buttonLoginDisabled() {
             return !(this.usernameValidationStatus && this.passwordValidationStatus)
         },

package/src/components/CmdSiteSearch.vue

@@ -42,14 +42,11 @@
 
                 <!-- begin CmdFormElement for radius -->
                 <CmdFormElement
-                    v-if="cmdFormElementRadius.show"
+                    v-if="cmdFormElementRadiusOptions.show"
                     element="select"
                     class="no-flex"
                     v-model="radius"
-                    :show-label="cmdFormElementRadius.showLabel"
-                    :labelText="cmdFormElementRadius.labelText"
-                    :select-options="cmdFormElementRadius.selectOptions"
-                    :required="cmdFormElementRadius.required"
+                    v-bind="cmdFormElementRadiusOptions"
                 />
                 <!-- end CmdFormElement for radius -->
             </div>
@@ -226,40 +223,7 @@ export default {
          */
         cmdFormElementRadius: {
             type: Object,
-            default() {
-                return {
-                    show: true,
-                    showLabel: false,
-                    required: false,
-                    labelText: "Radius",
-                    selectOptions: [
-                        {
-                            text: "None",
-                            value: 0
-                        },
-                        {
-                            text: "5 Km",
-                            value: 5
-                        },
-                        {
-                            text: "10 Km",
-                            value: 10
-                        },
-                        {
-                            text: "15 Km",
-                            value: 15
-                        },
-                        {
-                            text: "50 Km",
-                            value: 50
-                        },
-                        {
-                            text: "100 Km",
-                            value: 100
-                        }
-                    ]
-                }
-            }
+            required: false
         },
         /**
          * properties for CmdFormElement-component for search-button
@@ -304,6 +268,41 @@ export default {
         }
     },
     computed: {
+        cmdFormElementRadiusOptions() {
+            return {
+                show: true,
+                showLabel: false,
+                required: false,
+                labelText: "Radius",
+                selectOptions: [
+                    {
+                        text: "None",
+                        value: 0
+                    },
+                    {
+                        text: "5 Km",
+                        value: 5
+                    },
+                    {
+                        text: "10 Km",
+                        value: 10
+                    },
+                    {
+                        text: "15 Km",
+                        value: 15
+                    },
+                    {
+                        text: "50 Km",
+                        value: 50
+                    },
+                    {
+                        text: "100 Km",
+                        value: 100
+                    }
+                ],
+                ...this.cmdFormElementRadius
+            }
+        },
         searchValue1: {
             get() {
                 return this.modelValueInput1

package/src/index.js

@@ -66,4 +66,7 @@ export { createUuid, createHtmlId } from '@/utils/common'
 export { getFileExtension } from '@/utils/getFileExtension'
 
 // export composables
-export { useSequence } from '@/composables/sequence'
+export { useSequence } from '@/composables/sequence'
+
+// export mixins
+export { default as I18n } from '@/mixins/I18n.js'