comand-component-library 4.0.47 → 4.0.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "4.0.47",
+  "version": "4.0.48",
   "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/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/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'