comand-component-library 3.1.68 → 3.1.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "3.1.68",
+  "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) -->
 
@@ -715,7 +689,20 @@
                 </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 ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
@@ -1059,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"
@@ -1106,12 +1093,12 @@ export default {
         CmdShareButtons,
         CmdSiteHeader,
         CmdSlideshow,
-        CmdSwitchButton,
         CmdSwitchLanguage,
         CmdSystemMessage,
         CmdTabs,
         CmdTable,
         CmdThumbnailScroller,
+        CmdToggleDarkMode,
         CmdTooltip,
         CmdUploadForm,
         CmdWidthLimitationWrapper
@@ -1134,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,
@@ -1202,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/styles/global-styles.scss

@@ -1,4 +1,4 @@
-/* global-styles.scss - last update: 2021/08/10 by Raphael Biock - IT IS NOT RECOMMENDED TO EDIT THIS FILE (TO AVOID TROUBLESHOOTING AFTER UPDATING) - DO CHANGES IN template.css ONLY */
+/* global-styles.scss - last update: 2022/06/11 - IT IS NOT RECOMMENDED TO EDIT THIS FILE (TO AVOID TROUBLESHOOTING AFTER UPDATING) - DO CHANGES IN template.css ONLY */
 
 /* begin table of contents --------------------------------------------------------------------------------------------------------------------------------------------------- */
 /*
@@ -16,11 +16,16 @@
   P ------------------------
     - product-listing
 
+  T ------------------------
+    - tooltip
+
 - MEDIA QUERIES ------------------------
   - styles for medium screens
   - styles for small screens
 
-- DARK MODE ------------------------
+- COLOR SCHEMES ------------------------
+  - custom light-mode
+  - custom dark-mode
 */
 /* end table of contents --------------------------------------------------------------------------------------------------------------------------------------------------- */
 
@@ -98,13 +103,13 @@ body.avoid-scrolling {
 
   &.products-squares  {
     > a {
-      grid-column: span 6;
+      grid-column: span calc(var(--grid-columns) / 2);
     }
   }
 
   &.products-lines {
     > a {
-      grid-column: span 12;
+      grid-column: span var(--grid-columns);
       flex-direction: unset;
 
       img {
@@ -166,6 +171,8 @@ body.avoid-scrolling {
   }
 }
 /* end product-listing --------------------------------------------------------------------------------------------------------------------------------------------------- */
+
+/* begin tooltip for cmd-form-element and cmd-fake-select ---------------------------------------------------------------------------------------------------------------- */
 .cmd-form-element, .cmd-fake-select {
   & + .cmd-tooltip {
     border-color: var(--status-color);
@@ -209,6 +216,7 @@ body.avoid-scrolling {
     }
   }
 }
+/* end tooltip for cmd-form-element and cmd-fake-select ------------------------------------------------------------------------------------------------------------------ */
 /* ---------------------------------------------- END COMPONENTS AND GLOBAL STYLES -------------------------------------------------- */
 
 /* ---------------------------------------------- BEGIN MEDIA QUERIES AND BROWSER SPECIFIC STYLES -------------------------------------------------- */
@@ -261,51 +269,25 @@ body.avoid-scrolling {
 /* end styles for small screens --------------------------------------------------------------------------------------------------------------------------------------------------- */
 /* ---------------------------------------------- END MEDIA QUERIES AND BROWSER SPECIFIC STYLES -------------------------------------------------- */
 
-/* ---------------------------------------------- BEGIN DARK-MODE -------------------------------------------------- */
-@media (prefers-color-scheme: dark) {
-  html {
-    --dark-mode-background-color: rgb(50, 50, 50);
-    scrollbar-color: var(--primary-color) var(--dark-gray); /* firefox only */
-  }
-
-  /* webkit only */
-  html::-webkit-scrollbar-track {
-    background-color: var(--dark-gray);
+/* ---------------------------------------------- BEGIN COLORS-SCHEMES (LIGHT-/DARK-MODE) -------------------------------------------------- */
+html {
+  &.light-mode {
+    /* assign default colors for custom light-mode set by class */
+    --color-scheme-text-color: var(--light-mode-text-color);
+    --color-scheme-background-color: var(--light-mode-background-color);
+    --color-scheme-text-color-inverted: var(--dark-mode-text-color);
+    --color-scheme-background-inverted: var(--dark-mode-background-color);
+    --default-background-color-lightness: 97%;
   }
 
-  html, body,
-  .cmd-site-header,
-  .cmd-width-limitation-wrapper#site-footer {
-    background:  var(--dark-mode-background-color);
-    color: var(--pure-white);
-  }
-
-  legend {
-    background: var(--default-background-color);
-    border: var(--default-border);
-  }
-
-  .cmd-breadcrumbs,
-  .cmd-breadcrumbs > *,
-  .cmd-top-header-navigation a,
-  .cmd-pager > p, main {
-    color: var(--pure-white);
-  }
-
-  hr {
-    border-color: var(--pure-white);
-  }
-
-  .cmd-accordion,
-  .cmd-tabs,
-  fieldset, table, .box, {
-    color: var(--text-color);
-  }
-
-  .cmd-accordion hr,
-  .cmd-tabs hr,
-  fieldset hr, table hr, .box hr {
-    border-color: var(--text-color);
+  &.dark-mode {
+    /* assign default colors for custom dark-mode set by class */
+    --color-scheme-text-color: var(--dark-mode-text-color);
+    --color-scheme-background-color: var(--dark-mode-background-color);
+    --color-scheme-text-color-inverted: var(--light-mode-text-color);
+    --color-scheme-background-inverted: var(--light-mode-background-color);
+    --default-background-color-lightness: 20%;
   }
 }
-/* ---------------------------------------------- END DARK-MODE -------------------------------------------------- */
+
+/* ---------------------------------------------- END COLORS-SCHEMES (LIGHT-/DARK-MODE)  -------------------------------------------------- */

package/src/components/CmdBackToTopButton.vue

@@ -70,7 +70,7 @@ export default {
     text-decoration: none;
     z-index: 1000;
     border: var(--default-border);
-    background: var(--pure-white);
+    background: var(--color-scheme-background-color);
     border-radius: var(--full-circle);
 
     &:hover, &:active, &:focus {