comand-component-library 3.1.66 → 3.1.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.66",
+  "version": "3.1.69",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -18,7 +18,7 @@
   ],
   "dependencies": {
     "clickout-event": "^1.1.2",
-    "comand-frontend-framework": "^3.2.48",
+    "comand-frontend-framework": "^3.2.53",
     "core-js": "^3.20.1",
     "prismjs": "^1.27.0",
     "vue": "^3.2.31",

package/src/App.vue

@@ -2,6 +2,13 @@
 <template>
     <a id="anchor-back-to-top"></a>
     <CmdSiteHeader :cmdMainNavigation="navigationData" :sticky="true">
+        <template v-slot:top-header>
+            <CmdListOfLinks
+                :links="listOfLinksData"
+                orientation="horizontal"
+                align="right"
+            />
+        </template>
         <template v-slot:logo>
             <CmdCompanyLogo :link="companyLogoData.link"
                             altText="CoManD Logo"
@@ -77,6 +84,7 @@
                 <fieldset class="grid-container-create-columns">
                     <legend>Legend</legend>
                     <h2>Form Element-Component</h2>
+                    <CmdToggleDarkMode :showLabel="true" />
                     <div class="flex-container">
                         <CmdFormElement labelText="Input (type text):"
                                         element="input"
@@ -102,6 +110,23 @@
                                         tooltipText="This is a tooltip"
                         />
                     </div>
+                    <CmdFormElement labelText="Input (type search (without search-button)):"
+                                    element="input"
+                                    type="search"
+                                    :status="formElementStatus"
+                                    :showSearchButton="false"
+                                    placeholder="Search"
+                                    tooltipText="This is a tooltip"
+                                    v-bind="{useCustomTooltip: false}"
+                    />
+                    <CmdFormElement labelText="Input (type search (with search-button)):"
+                                    element="input"
+                                    type="search"
+                                    :status="formElementStatus"
+                                    placeholder="Search"
+                                    tooltipText="This is a tooltip"
+                                    v-bind="{useCustomTooltip: false}"
+                    />
                     <h2>Fake Selects</h2>
                     <div class="flex-container">
                         <!-- type === default: normal selectbox (with optional icons) -->
@@ -178,111 +203,59 @@
                     <label for="range-slider" :class="formElementStatus">
                         <span>Single-Slider (with in- and output):</span>
                         <span class="flex-container no-flex">
-                        <input type="number" :class="formElementStatus" v-model="rangeValue"
-                                 :disabled="formElementStatus === 'disabled'" min="0" max="100"/>
-                        <input type="range"
-                                 class="range-slider"
-                                 :class="{'disabled': formElementStatus === 'disabled'}"
-                                 id="range-slider"
-                                 v-model="rangeValue"
-                                 :disabled="formElementStatus === 'disabled'"
-                                 min="0"
-                                 max="100"/>
+                            <input
+                                type="number"
+                                :class="formElementStatus"
+                                v-model="rangeValue"
+                                :disabled="formElementStatus === 'disabled'"
+                                min="0"
+                                max="100"
+                            />
+                            <input
+                                type="range"
+                                class="range-slider"
+                                :class="{'disabled': formElementStatus === 'disabled'}"
+                                id="range-slider"
+                                v-model="rangeValue"
+                                :disabled="formElementStatus === 'disabled'"
+                                min="0"
+                                max="100"
+                            />
                         </span>
                     </label>
                     <!-- end slider -->
 
                     <hr/>
 
-                    <!-- begin toggle-switch-radio with switch-label -->
-                    <h2>Toggle-Switches (Radio and Checkbox) with Switch-Label</h2>
-                    <div class="label inline">
-                        <span>Label for Toggle-Switch-Checkbox with Switch-Label:</span>
-                        <span class="flex-container no-flex">
-                            <CmdSwitchButton
-                              type="checkbox"
-                              id="checkbox1"
-                              name="checkbox1"
-                              onLabel="Label on"
-                              offLabel="Label off"
-                              inputValue="checkbox1"
-                              :disabled="formElementStatus === 'disabled'"
-                              v-model="switchButtonCheckbox"/>
-                            <CmdSwitchButton
-                              type="checkbox"
-                              id="checkbox2"
-                              name="checkbox2"
-                              onLabel="Label on"
-                              offLabel="Label off"
-                              labelText="Labeltext"
-                              inputValue="checkbox2"
-                              :disabled="formElementStatus === 'disabled'"
-                              v-model="switchButtonCheckbox"/>
-                            <CmdSwitchButton
-                                type="checkbox"
-                                id="checkbox3"
-                                name="checkbox3"
-                                inputValue="checkbox3"
-                                labelText="Labeltext"
-                                :disabled="formElementStatus === 'disabled'"
-                                v-model="switchButtonCheckbox"/>
-                        </span>
-                        <span>Current value: {{ switchButtonCheckbox }}</span>
-                    </div>
-                    <!-- end toggle-switch-radio with switch-label -->
-
-                    <div class="label inline">
-                        <span>Label for Toggle-Switch-Checkbox with Switch-Label (colored):</span>
-                        <span class="flex-container no-flex">
-                            <CmdSwitchButton
-                              type="checkbox"
-                              id="checkbox4"
-                              name="checkbox4"
-                              onLabel="Label on"
-                              offLabel="Label off"
-                              :colored="true"
-                              inputValue="checkbox3"
-                              :disabled="formElementStatus === 'disabled'"
-                              v-model="switchButtonCheckboxColored"/>
-                        </span>
-                        <span>Current value: {{ switchButtonCheckboxColored }}</span>
-                    </div>
-                    <!-- end toggle-switch-radio with switch-label -->
+                    <h2>Group of checkboxes with CmdInputGroup</h2>
+                    <CmdInputGroup label-text="Group-label:" :label-inline="true">
+                        <CmdFormElement
+                            element="input"
+                            type="checkbox"
+                            id="input-group-checkbox"
+                            labelText="Checkbox-label #1"
+                        />
+                        <CmdFormElement
+                            element="input"
+                            type="checkbox"
+                            id="input-group-checkbox"
+                            labelText="Checkbox-label #2"
+                        />
+                        <CmdFormElement
+                            element="input"
+                            type="checkbox"
+                            id="input-group-checkbox"
+                            labelText="Checkbox-label #3"
+                        />
+                    </CmdInputGroup>
 
                     <!-- begin toggle-switch-radio with switch-label (colored) -->
-                    <div class="label inline">
-                        <span>Label for Toggle-Switch-Radio with Switch-Label (colored):</span>
-                        <span class="flex-container no-flex">
-                  <CmdSwitchButton
-                      type="radio"
-                      id="radio1"
-                      name="radiogroup"
-                      onLabel="Label on"
-                      offLabel="Label off"
-                      :colored="true"
-                      inputValue="radio1"
-                      :disabled="formElementStatus === 'disabled'"
-                      v-model="switchButtonRadio"/>
-                  <CmdSwitchButton
-                      type="radio"
-                      id="radio2"
-                      name="radiogroup"
-                      onLabel="Label on"
-                      offLabel="Label off"
-                      :colored="true"
-                      inputValue="radio2"
-                      :disabled="formElementStatus === 'disabled'"
-                      v-model="switchButtonRadio"/>
-                </span>
-                    </div>
-                    <hr />
-                    <h3>Toggle Switches with CmdFormElement</h3>
+                    <h2>Toggle Switches with CmdFormElement</h2>
                     <CmdFormElement element="input"
                                     type="checkbox"
                                     id="toggle-switch-checkbox"
                                     v-model="switchButtonCheckbox"
-                                    :displayLabelInline="true"
-                                    labelText="Labeltext for Single-SwitchButton (Checkbox)"
+                                    labelText="Labeltext for Switch-Button without Switch-Label"
                                     :toggleSwitch="true"
                                     :status="formElementStatus"
                     />
@@ -290,8 +263,7 @@
                                     type="checkbox"
                                     id="toggle-switch-checkbox"
                                     v-model="switchButtonCheckbox"
-                                    :displayLabelInline="true"
-                                    labelText="Labeltext for SwitchButton (Checkbox)"
+                                    labelText="Labeltext for Switch-Button with Switch-Label"
                                     onLabel="Label on"
                                     offLabel="Label off"
                                     :toggleSwitch="true"
@@ -301,7 +273,7 @@
                                     type="checkbox"
                                     id="toggle-switch-checkbox-colored"
                                     v-model="switchButtonCheckbox"
-                                    labelText="Labeltext for SwitchButton (Checkbox, colored)"
+                                    labelText="Labeltext for Switch-Button (Checkbox, colored)"
                                     onLabel="Label on"
                                     offLabel="Label off"
                                     :colored="true"
@@ -319,6 +291,7 @@
                                     :toggleSwitch="true"
                                     :status="formElementStatus"
                                     inputValue="radio1"
+                                    labelText="Labeltext for Switch-Button (Radio, colored) #1"
                     />
                     <CmdFormElement element="input"
                                     type="radio"
@@ -331,6 +304,7 @@
                                     :toggleSwitch="true"
                                     :status="formElementStatus"
                                     inputValue="radio2"
+                                    labelText="Labeltext for Switch-Button (Radio, colored) #2"
                     />
                     <!-- end toggle-switch-radio with switch-label (colored) -->
 
@@ -418,7 +392,7 @@
                                     labelText="Label (inline) for inputfield (search) without search-button:"
                                     :displayLabelInline="true"
                                     type="search"
-                                    id="inputfield-search"
+                                    id="inputfield-search-without-searchbutton"
                                     placeholder="Keyword(s)"
                                     v-model="inputSearch"
                                     :showSearchButton="false"
@@ -427,7 +401,7 @@
                                     labelText="Label (inline) for inputfield (search):"
                                     :displayLabelInline="true"
                                     type="search"
-                                    id="inputfield-search"
+                                    id="inputfield-search-with-searchbutton"
                                     placeholder="Keyword(s)"
                                     v-model="inputSearch"
                                     :status="formElementStatus"/>
@@ -544,6 +518,24 @@
                                             :status="formElementStatus"/>
                         </div>
                     </div>
+                    <CmdInputGroup labelText="Group label for radio group">
+                        <CmdFormElement element="input"
+                                        labelText="Label for radiobutton"
+                                        type="radio"
+                                        id="input-group-radiobutton"
+                                        name="radiogroup2"
+                                        inputValue="radiobuttonValue1"
+                                        v-model="radiobuttonValue"
+                                        :status="formElementStatus"/>
+                        <CmdFormElement element="input"
+                                        labelText="Label for radiobutton"
+                                        type="radio"
+                                        id="input-group-radiobutton"
+                                        name="radiogroup2"
+                                        inputValue="radiobuttonValue2"
+                                        v-model="radiobuttonValue"
+                                        :status="formElementStatus"/>
+                    </CmdInputGroup>
                     <CmdMultipleSwitch labelText="Label for multiple-switch with checkboxes:"
                                        :multipleSwitches="multipleSwitchCheckboxData"
                                        switchTypes="checkbox"
@@ -687,17 +679,30 @@
             <h3>Product boxes</h3>
             <div class="grid-container-create-columns">
                 <div class="grid-small-item" v-for="(product, index) in boxProductData" :key="index">
-                    <CmdBox boxType="product" :product="product"/>
+                    <CmdBox boxType="product" :product="product" :cmdCustomHeadline="{headlineLevel: 4}" />
                 </div>
             </div>
             <h3>User boxes</h3>
             <div class="grid-container-create-columns">
                 <div class="grid-small-item" v-for="(user, index) in boxUserData" :key="index">
-                    <CmdBox boxType="user" :user="user"/>
+                    <CmdBox boxType="user" :user="user" :cmdCustomHeadline="{headlineLevel: 4}" />
                 </div>
             </div>
             <h3>Box Site Search</h3>
-            <CmdBoxSiteSearch :results="executeSearch()" @click="executeSearch($event)"/>
+            <CmdBoxSiteSearch
+                v-model:modelValueInput1="siteSearchInput1"
+                v-model:modelValueInput2="siteSearchInput2"
+                v-model:modelValueRadius="radius"
+                v-model:modelValueSearchFilters="filters"
+                @search="siteSearchOutput"
+                textLegend="Search"
+                :cmdFakeSelect="siteSearchFilters" />
+            <dl>
+                <dt>siteSearchInput1:</dt><dd>{{ siteSearchInput1 }}</dd>
+                <dt>siteSearchInput2:</dt><dd>{{ siteSearchInput2 }}</dd>
+                <dt>Radius:</dt><dd>{{ radius }}</dd>
+                <dt>Filters:</dt><dd>{{ filters }}</dd>
+            </dl>
         </CmdWidthLimitationWrapper>
         <!-- end boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
@@ -771,6 +776,21 @@
             <p>LoginData: {{loginData}}</p>
         </CmdWidthLimitationWrapper>
 
+        <!-- begin list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
+        <a id="section-list-of-links"></a>
+        <CmdWidthLimitationWrapper>
+            <h2 class="headline-demopage">List Of Links</h2>
+            <h3>Vertical</h3>
+            <CmdListOfLinks :links="listOfLinksData" />
+            <h3>Horizontal (aligned left)</h3>
+            <CmdListOfLinks orientation="horizontal" align="left" :links="listOfLinksData" />
+            <h3>Horizontal (aligned center)</h3>
+            <CmdListOfLinks orientation="horizontal" align="center" :links="listOfLinksData" />
+            <h3>Horizontal (aligned right)</h3>
+            <CmdListOfLinks orientation="horizontal" align="right" :links="listOfLinksData" />
+        </CmdWidthLimitationWrapper>
+        <!-- end list-of-links  ------------------------------------------------------------------------------------------------------------------------------------------------------->
+
         <a id="section-main-navigation"></a>
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Main Navigation</h2>
@@ -863,19 +883,19 @@
             <h2 class="headline-demopage">Tabs</h2>
             <h3>Tabs with content from json-file</h3>
             <CmdTabs :stretchTabs="false" :tabs="tabsData"/>
-            <h3>Tabs with HTML-content from used component</h3>
+            <h3>Tabs with HTML-content (given by slot))</h3>
             <CmdTabs :stretchTabs="true" :tabs="[{name: 'Tab 1'}, {name: 'Tab 2'}, {name: 'Tab 3'}]" :useSlot="true">
                 <template v-slot:tab-content-0>
-                    <h3>Tab 1</h3>
+                    <h4>Tab 1 headline</h4>
                     <p>Content</p>
                 </template>
                 <template v-slot:tab-content-1>
-                    <h3>Tab 2</h3>
+                    <h4>Tab 2</h4>
                     <p>Content</p>
                     <p>Content</p>
                 </template>
                 <template v-slot:tab-content-2>
-                    <h3>Tab 3</h3>
+                    <h4>Tab 3</h4>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
@@ -908,8 +928,7 @@
         <CmdWidthLimitationWrapper>
             <h2 class="headline-demopage">Upload-Form</h2>
             <h3>Simple mode</h3>
-            <CmdUploadForm :cmdCustomHeadlineFieldset="{headlineText: 'Select files to upload', headlineLevel: 3}"
-                           :enableDragAndDrop="true"
+            <CmdUploadForm :enableDragAndDrop="true"
                            :allowedFileExtensions="['jpg', 'png']"
                            :allowMultipleFileUploads="true"
                            :advancedMode="false"
@@ -918,7 +937,7 @@
                            :uploadOptions="{url: 'http://localhost:8888'}"
             />
             <h3>Advanced mode</h3>
-            <CmdUploadForm headline="Select files to upload"
+            <CmdUploadForm :cmdCustomHeadlineFieldset="{headlineText: 'Select files to upload', headlineLevel: 3}"
                            :enableDragAndDrop="true"
                            :allowedFileExtensions="['jpg', 'png']"
                            :allowMultipleFileUploads="true"
@@ -930,7 +949,7 @@
 
     <CmdWidthLimitationWrapper id="site-footer" inner-component="footer">
         <CmdSwitchLanguage :languages="languagesData" @click="doSomething"/>
-        <CmdListOfLinks :links="footerNavigationData"
+        <CmdListOfLinks :links="listOfLinksData"
                         :cmdCustomHeadline="{headlineText: 'List of links', headlineLevel: 6}"
         />
         <CmdOpeningHours :openingHours="openingHoursData"
@@ -980,7 +999,7 @@ import fakeSelectCountriesData from '@/assets/data/fake-select-countries.json'
 import fakeSelectFilterOptionsData from '@/assets/data/fake-select-filter-options.json'
 import fakeSelectOptionsData from '@/assets/data/fake-select-options.json'
 import fakeSelectOptionsWithIconsData from '@/assets/data/fake-select-options-with-icons.json'
-import footerNavigationData from '@/assets/data/list-of-links.json'
+import listOfLinksData from '@/assets/data/list-of-links.json'
 import imageGalleryData from '@/assets/data/image-gallery.json'
 import languagesData from '@/assets/data/switch-language.json'
 import multistepsData from '@/assets/data/multistep-form-progress-bar.json'
@@ -1015,7 +1034,9 @@ import CmdFormFilters from "@/components/CmdFormFilters.vue"
 import CmdGoogleMaps from "./components/CmdGoogleMaps"
 import CmdImageGallery from "@/components/CmdImageGallery.vue"
 import CmdImageZoom from "@/components/CmdImageZoom.vue"
+import CmdInputGroup from "./components/CmdInputGroup"
 import CmdLoginForm from "@/components/CmdLoginForm.vue"
+import CmdListOfLinks from "./components/CmdListOfLinks"
 import CmdMainNavigation from "@/components/CmdMainNavigation.vue"
 import CmdMultipleSwitch from "@/components/CmdMultipleSwitch.vue"
 import CmdMultistepFormProgressBar from "@/components/CmdMultistepFormProgressBar.vue"
@@ -1025,12 +1046,12 @@ import CmdProgressBar from "@/components/CmdProgressBar.vue"
 import CmdShareButtons from "@/components/CmdShareButtons.vue"
 import CmdSiteHeader from "./components/CmdSiteHeader"
 import CmdSlideshow from "@/components/CmdSlideshow.vue"
-import CmdSwitchButton from "@/components/CmdSwitchButton.vue"
 import CmdSwitchLanguage from "@/components/CmdSwitchLanguage.vue"
 import CmdSystemMessage from "@/components/CmdSystemMessage.vue"
 import CmdTabs from "@/components/CmdTabs.vue"
 import CmdTable from "@/components/CmdTable.vue"
 import CmdThumbnailScroller from "@/components/CmdThumbnailScroller.vue"
+import CmdToggleDarkMode from "@/components/CmdToggleDarkMode.vue"
 import CmdTooltip from "@/components/CmdTooltip.vue"
 import CmdUploadForm from "@/components/CmdUploadForm.vue"
 import CmdWidthLimitationWrapper from "@/components/CmdWidthLimitationWrapper"
@@ -1038,7 +1059,6 @@ import {openFancyBox} from "@/components/CmdFancyBox"
 
 // import external functions
 import * as functions from "@/mixins/FieldValidation.js"
-import CmdListOfLinks from "./components/CmdListOfLinks";
 
 export default {
     name: "App",
@@ -1062,6 +1082,7 @@ export default {
         CmdGoogleMaps,
         CmdImageGallery,
         CmdImageZoom,
+        CmdInputGroup,
         CmdLoginForm,
         CmdMainNavigation,
         CmdMultistepFormProgressBar,
@@ -1072,12 +1093,12 @@ export default {
         CmdShareButtons,
         CmdSiteHeader,
         CmdSlideshow,
-        CmdSwitchButton,
         CmdSwitchLanguage,
         CmdSystemMessage,
         CmdTabs,
         CmdTable,
         CmdThumbnailScroller,
+        CmdToggleDarkMode,
         CmdTooltip,
         CmdUploadForm,
         CmdWidthLimitationWrapper
@@ -1100,7 +1121,18 @@ export default {
             selectedColor: "",
             rangeValue: 50,
             loginData: {},
+            siteSearchFilters: {
+                show: true,
+                selectData: fakeSelectFilterOptionsData,
+                defaultOptionName: "Select filters:",
+                labelText: "Filters:",
+                type: "checkboxOptions"
+            },
             formElementStatus: "",
+            siteSearchInput1: "Doctor",
+            siteSearchInput2: "New York",
+            radius: 10,
+            filters: ["2"],
             switchButtonRadio: "radio1",
             switchButtonCheckbox: ["checkbox1"],
             switchButtonCheckboxColored: false,
@@ -1151,7 +1183,7 @@ export default {
             fakeSelectFilterOptionsData,
             fakeSelectOptionsData,
             fakeSelectOptionsWithIconsData,
-            footerNavigationData,
+            listOfLinksData,
             imageGalleryData,
             languagesData,
             multistepsData,
@@ -1168,7 +1200,13 @@ export default {
             thumbnailScrollerData
         }
     },
+    mounted() {
+      document.querySelector('html').addEventListener('toggle-color-scheme', (event) => console.log('colorScheme:', event.detail))
+    },
     methods: {
+        siteSearchOutput(event) {
+            console.log(event)
+        },
         showError(event) {
             console.log("EventMessages", event.messages)
             alert("Error")

package/src/assets/data/box-user.json

@@ -8,7 +8,6 @@
     "links": [
         {
         "path": "mailto:",
-        "target": "",
         "iconClass": "icon-mail",
         "tooltip": "Send mail"
       }
@@ -22,7 +21,6 @@
     "links": [
       {
         "path": "mailto:",
-        "target": "",
         "iconClass": "icon-mail",
         "tooltip": "Send mail"
       },
@@ -42,7 +40,6 @@
     "links":  [
       {
         "path": "mailto:",
-        "target": "",
         "iconClass": "icon-mail",
         "tooltip": "Send mail"
       },
@@ -54,7 +51,6 @@
       },
       {
         "path": "tel:",
-        "target": "",
         "iconClass": "icon-phone",
         "tooltip": "Make call"
       }
@@ -68,7 +64,6 @@
     "links":  [
       {
         "path": "mailto:",
-        "target": "",
         "iconClass": "icon-mail",
         "tooltip": "Send mail"
       },
@@ -80,7 +75,6 @@
       },
       {
         "path": "tel:",
-        "target": "",
         "iconClass": "icon-phone",
         "tooltip": "Make call"
       }
@@ -94,7 +88,6 @@
     "links":  [
       {
         "path": "mailto:",
-        "target": "",
         "iconClass": "icon-mail",
         "tooltip": "Send mail"
       },
@@ -106,7 +99,6 @@
       },
       {
         "path": "tel:",
-        "target": "",
         "iconClass": "icon-phone",
         "tooltip": "Make call"
       }

package/src/assets/data/tabs.json

@@ -1,17 +1,20 @@
 [
   {
     "name": "Tab 1",
-    "headline": "Tab 1 Headline",
+    "headlineText": "Tab 1 Headline",
+    "headlineLevel": 4,
     "htmlContent": "<p>Inhalt 1</p>"
   },
   {
     "name": "Tab 2",
-    "headline": "Tab 2 Headline",
+    "headlineText": "Tab 2 Headline",
+    "headlineLevel": 4,
     "htmlContent": "<p>Inhalt 2</p>"
   },
   {
     "name": "Tab 3",
-    "headline": "Tab 3 Headline",
+    "headlineText": "Tab 3 Headline",
+    "headlineLevel": 4,
     "htmlContent": "<p>Inhalt 3</p>"
   }
 ]