comand-component-library 4.2.51 → 4.2.52

package/src/ComponentLibrary.vue

@@ -20,10 +20,7 @@
                                     <span>Select template</span>
                                     <select id="select-template" v-model="selectedTemplate">
                                         <option value="blank">Blank/Unstyled</option>
-                                        <option value="business">Business</option>
-                                        <option value="casual">Casual</option>
-                                        <option value="dating">Dating</option>
-                                        <option value="influencer">Influencer</option>
+                                        <option value="dating">Material-Web</option>
                                     </select>
                                 </label>
                                 <div>
@@ -780,25 +777,44 @@
                         headlinePosition="body" :cmdIcon="{ iconClass: 'icon-home', type: 'auto' }"
                         textBody="Box with large icon, headline in body and content all given by properties." />
                 </CmdBoxWrapper>
+
+                <!-- begin product boxes -->
                 <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" :cmdHeadline="{ headlineLevel: 4 }" />
-                    </div>
-                </div>
+                <CmdBoxWrapper :boxesPerRow="[5, 2, 1]" :useRowViewAsDefault="true" :useGap="true">
+                    <template v-slot="slotProps">
+                        <CmdBox 
+                            v-for="(product, index) in boxProductData" 
+                            :key="index" 
+                            boxType="product" 
+                            :product="product" 
+                            :cmdHeadline="{ headlineLevel: 4 }"
+                            :rowView="slotProps.rowView" 
+                        />
+                    </template>
+                </CmdBoxWrapper>
+                <!-- end product boxes -->
+
+                <!-- begin user boxes -->
                 <h3>User boxes</h3>
                 <CmdBoxWrapper :boxesPerRow="[5, 2, 1]" :useRowViewAsDefault="true" :useGap="true">
                     <template v-slot="slotProps">
-                        <CmdBox v-for="index in boxUserData.length" :key="index" boxType="user"
-                            :user="boxUserData[index - 1]" :cmdHeadline="{ headlineLevel: 5 }"
-                            :rowView="slotProps.rowView" />
+                        <CmdBox 
+                            v-for="index in boxUserData.length" 
+                            :key="index" 
+                            boxType="user"
+                            :user="boxUserData[index - 1]" 
+                            :cmdHeadline="{ headlineLevel: 5 }"
+                            :rowView="slotProps.rowView" 
+                        />
                     </template>
                 </CmdBoxWrapper>
+                <!-- end user boxes -->
+
                 <h3><span>Boxes in BoxWrapper (collapsible)</span>
                     <a href="#" class="button small icon-cog" title="Open Component Settings"
                         @click.prevent="openSettingsSidebar('CmdBoxWrapper')"></a>
                 </h3>
-                <CmdBoxWrapper ref="CmdBoxWrapper" :boxesPerRow="[5, 2, 1]" :openBoxesByDefault="[2]"
+                <CmdBoxWrapper ref="CmdBoxWrapper" :boxesPerRow="[4, 1]" :openBoxesByDefault="[2]"
                     :useRowViewAsDefault="true" :allowMultipleExpandedBoxes="false" :stretch-boxes-vertically="true"
                     :useGap="true">
                     <template v-slot="slotProps">
@@ -854,26 +870,57 @@
             <!-- begin container --------------------------------------------------------------------------------------------------->
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage" id="section-container">
-                    <span>Container</span>
+                    <span>Containers</span>
                     <a href="#" class="button small icon-cog" title="Open Component Settings"
                         @click.prevent="openSettingsSidebar('CmdContainer')"></a>
                 </h2>
-                <h3>Default Container</h3>
-                <CmdContainer style="border: 1px dotted gray" ref="CmdContainer" v-bind="cmdContainerSettingsData" />
-                <h3>Container with default-text</h3>
-                <CmdContainer style="border: 1px dotted gray" ref="CmdContainer" innerText="Some inner text"
-                    containerType="flex" contentOrientation="horizontal" />
-                <h3>Container with vertical slots</h3>
-                <CmdContainer style="border: 1px dotted gray" ref="CmdContainer" v-bind="cmdContainerSettingsData">
+                <h3>Container (type "default")</h3>
+                <CmdContainer 
+                    style="border: 1px dashed var(--color-gray-30)" 
+                    ref="CmdContainer" 
+                    v-bind="cmdContainerSettingsData"
+                >
+                    <p>Slot-content</p>
+                    <p>Slot-content</p>
+                    <p>Slot-content</p>      
+                </CmdContainer>
+                <h3>Container (type "flex", horizontal)</h3>
+                <CmdContainer 
+                    style="border: 1px  dashed var(--color-gray-30)" 
+                    ref="CmdContainer"
+                    v-bind="cmdContainerSettingsData"
+                    containerType="flex" 
+                    contentOrientation="horizontal"
+                >
+                    <p>Slot-content</p>
+                    <p>Slot-content</p>
+                    <p>Slot-content</p>    
+                </CmdContainer>
+                <h3>Container (type "flex", vertical)</h3>
+                <CmdContainer 
+                    style="border: 1px  dashed var(--color-gray-30)" 
+                    ref="CmdContainer" 
+                    v-bind="cmdContainerSettingsData"
+                    containerType="flex"
+                    contentOrientation="vertical"
+                >
                     <p>Slot-content</p>
                     <p>Slot-content</p>
                     <p>Slot-content</p>
                 </CmdContainer>
                 <h3>Container with horizontal slots</h3>
-                <CmdContainer style="border: 1px dotted gray" ref="CmdContainer" v-bind="cmdContainerSettingsData"
-                    contentOrientation="horizontal" innerClass="inner-class">
-                    <component :is="componentNameForContainer" headlineText="Headline 1" headlineLevel="6" />
-                    <component :is="componentNameForContainer" headlineText="Headline 2" headlineLevel="6" />
+                <CmdContainer 
+                    style="border: 1px  dashed var(--color-gray-30)" 
+                    ref="CmdContainer" 
+                    v-bind="cmdContainerSettingsData"
+                    containerType="grid"
+                >
+                    <p>Slot-content</p>
+                    <p>Slot-content</p>
+                    <p>Slot-content</p>
+                    <p>Slot-content</p>
+                    <p>Slot-content</p>
+                    <p>Slot-content</p>
                 </CmdContainer>
             </CmdWidthLimitationWrapper>
             <!-- end container --------------------------------------------------------------------------------------------------->
@@ -940,14 +987,14 @@
             <!-- begin flexible-scroll-container --------------------------------------------------------------------------------------------------->
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage" id="section-flexible-scroll-container">Flexible Scroll-Container</h2>
-                <CmdFlexibleScrollContainer style="border: 1px dotted gray">
+                <CmdFlexibleScrollContainer style="border: 1px  dashed var(--color-gray-30)">
                     <template v-slot:fixed-wrapper>
-                        <div class="default-padding" style="border: 1px dotted gray">
+                        <div class="default-padding" style="border: 1px  dashed var(--color-gray-30)">
                             Fixed content
                         </div>
                     </template>
                     <template v-slot:scroll-wrapper>
-                        <div class="default-padding" style="border: 1px dotted gray">
+                        <div class="default-padding" style="border: 1px  dashed var(--color-gray-30)">
                             <ul>
                                 <li>Dynamic Content</li>
                                 <li>Dynamic Content</li>
@@ -1129,8 +1176,35 @@
                 </dl>
                 <CmdList :cmdHeadline="{ headlineText: 'List of images', headlineLevel: 3 }" :items="imageGalleryData"
                     orientation="horizontal" listType="images" />
-                <CmdList :cmdHeadline="{ headlineText: 'List of tags', headlineLevel: 3 }" :items="listOfTagsData"
-                    orientation="horizontal" listType="tags" />
+                <div class="flex-container">    
+                    <CmdList 
+                        :cmdHeadline="{ headlineText: 'List of tags (default)', headlineLevel: 3 }" 
+                        :items="listOfTagsData"
+                        orientation="horizontal" 
+                        listType="tags" 
+                    />
+                    <CmdList 
+                        :cmdHeadline="{ headlineText: 'List of tags (primary)', headlineLevel: 3 }" 
+                        :items="listOfTagsData"
+                        orientation="horizontal" 
+                        listType="tags" 
+                        highlightLevel="primary"
+                    />
+                    <CmdList 
+                        :cmdHeadline="{ headlineText: 'List of tags (secondary)', headlineLevel: 3 }" 
+                        :items="listOfTagsData"
+                        orientation="horizontal" 
+                        listType="tags" 
+                        highlightLevel="secondary"
+                    />
+                    <CmdList 
+                        :cmdHeadline="{ headlineText: 'List of tags (tertiary)', headlineLevel: 3 }" 
+                        :items="listOfTagsData"
+                        orientation="horizontal" 
+                        listType="tags" 
+                        highlightLevel="tertiary"
+                    />
+                </div>
             </CmdWidthLimitationWrapper>
             <!-- end list --------------------------------------------------------------------------------------------------->
 
@@ -1342,6 +1416,31 @@
             </CmdWidthLimitationWrapper>
             <!-- end slideshow --------------------------------------------------------------------------------------------------->
 
+            
+            <!-- begin smart-search --------------------------------------------------------------------------------------------------->
+            <CmdWidthLimitationWrapper>
+                <h2 class="headline-demopage" id="section-smart-search">
+                    <span>Smart Search</span>
+                    <a href="#" class="button small icon-cog" title="Open Component Settings"
+                        @click.prevent="openSettingsSidebar('CmdSmartSearch')"></a>
+                </h2>
+                smartSearchString: {{ smartSearchString }}
+                <CmdSmartSearch 
+                    ref="CmdSmartSearch" 
+                    v-bind="smartSearchSettingsData" 
+                    :listOfRecommendations="smartSearchData.listOfRecommendations"
+                    v-model="smartSearchString" 
+                />
+                smartSearchObject: {{ smartSearchObject }}
+                <CmdSmartSearch 
+                    ref="CmdSmartSearch" 
+                    v-bind="smartSearchSettingsData" 
+                    :listOfRecommendations="smartSearchData.listOfRecommendations"
+                    v-model="smartSearchObject" 
+                />
+            </CmdWidthLimitationWrapper>
+            <!-- end smart-search --------------------------------------------------------------------------------------------------->
+
             <!-- begin social-networks --------------------------------------------------------------------------------------------------->
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage" id="section-social-networks">
@@ -1372,11 +1471,6 @@
                 </h2>
                 <CmdSystemMessage ref="CmdSystemMessage" v-bind="cmdSystemMessageSettingsData"
                     :iconMessage="{ iconClass: 'icon-error-circle', show: true }">
-                    <ul>
-                        <li>Error #1</li>
-                        <li>Error #2</li>
-                        <li>Error #3</li>
-                    </ul>
                 </CmdSystemMessage>
             </CmdWidthLimitationWrapper>
             <!-- end system-message --------------------------------------------------------------------------------------------------->
@@ -1537,7 +1631,7 @@
                     <a href="#" class="button small icon-cog" title="Open Component Settings"
                         @click.prevent="openSettingsSidebar('CmdWidthLimitationWrapper')"></a>
                 </h2>
-                <CmdWidthLimitationWrapper style="border: 1px dotted gray" ref="CmdWidthLimitationWrapper"
+                <CmdWidthLimitationWrapper style="border: 1px  dashed var(--color-gray-30)" ref="CmdWidthLimitationWrapper"
                     v-bind="cmdWidthLimitationWrapperSettingsData">
                     <p>Slot-content</p>
                     <p>Slot-content</p>
@@ -1664,7 +1758,7 @@ export default {
     },
     data() {
         return {
-            smartSearchObject: {},
+            smartSearchObject: {id: 3, displayValue: "smartSearchDisplayValue"},
             smartSearchString: "",
             selectedLanguage: "none",
             fancyBoxCookieDisclaimer: false,

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

@@ -2,8 +2,9 @@
   {
     "name": "Product name 1",
     "image": {
-      "src": "media/images/demo-images/medium/landscape-01.jpg",
-      "alt": "Alternative text"
+      "src": "/media/images/demo-images/medium/landscape-01.jpg",
+      "alt": "Alternative text",
+      "figcaption": "Product name 1"
     },
     "articleNumber": "AB12345",
     "price": 123.45,
@@ -14,8 +15,9 @@
   {
     "name": "Product name 2",
     "image": {
-      "src": "media/images/demo-images/medium/landscape-02.jpg",
-      "alt": "Alternative text"
+      "src": "/media/images/demo-images/medium/landscape-02.jpg",
+      "alt": "Alternative text",
+      "figcaption": "Product name 2"
     },
     "articleNumber": "AB12346",
     "price": 123.46,
@@ -26,8 +28,9 @@
   {
     "name": "Product name 3",
     "image": {
-      "src": "media/images/demo-images/medium/landscape-03.jpg",
-      "alt": "Alternative text"
+      "src": "/media/images/demo-images/medium/landscape-03.jpg",
+      "alt": "Alternative text",
+      "figcaption": "Product name 3"
     },
     "articleNumber": "AB12347",
     "price": 123.47,
@@ -38,8 +41,9 @@
   {
     "name": "Product name 4",
     "image": {
-      "src": "media/images/demo-images/medium/landscape-04.jpg",
-      "alt": "Alternative text"
+      "src": "/media/images/demo-images/medium/landscape-04.jpg",
+      "alt": "Alternative text",
+      "figcaption": "Product name 4"
     },
     "articleNumber": "AB12348",
     "price": 123.48,
@@ -50,8 +54,9 @@
   {
     "name": "Product name 5",
     "image": {
-      "src": "media/images/demo-images/medium/landscape-05.jpg",
-      "alt": "Alternative text"
+      "src": "/media/images/demo-images/medium/landscape-05.jpg",
+      "alt": "Alternative text",
+      "figcaption": "Product name 5"
     },
     "articleNumber": "AB12349",
     "price": 123.49,

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

@@ -5,7 +5,7 @@
     "gender": "m",
     "image": {
       "src": "/media/images/user-images/fake-user-1.jpg",
-      "altText": "Alt text"
+      "alt": "Alt text"
     },
     "profession": "User profession",
     "position": "User position",
@@ -41,7 +41,7 @@
         }
       },
       {
-        "path": "https://www.comand-cms.com",
+        "path": "https://www.comand-ui.com",
         "target": "comand",
         "icon": {
           "iconClass": "icon-globe",
@@ -56,7 +56,7 @@
     "gender": "m",
     "image": {
       "src": "/media/images/user-images/fake-user-3.jpg",
-      "altText": "Alt text"
+      "alt": "Alt text"
     },
     "profession": "User profession",
     "position": "User position",
@@ -70,7 +70,7 @@
         }
       },
       {
-        "path": "https://www.comand-cms.com",
+        "path": "https://www.comand-ui.com",
         "target": "comand",
         "icon": {
           "iconClass": "icon-globe",
@@ -92,7 +92,7 @@
     "gender": "m",
     "image": {
       "src": "/media/images/user-images/fake-user-4.jpg",
-      "altText": "Alt text"
+      "alt": "Alt text"
     },
     "profession": "User profession",
     "position": "User position",
@@ -106,7 +106,7 @@
         }
       },
       {
-        "path": "https://www.comand-cms.com",
+        "path": "https://www.comand-ui.com",
         "target": "comand",
         "icon": {
           "iconClass": "icon-globe",
@@ -128,7 +128,7 @@
     "gender": "m",
     "image": {
       "src": "/media/images/user-images/fake-user-5.jpg",
-      "altText": "Alt text"
+      "alt": "Alt text"
     },
     "profession": "User profession",
     "position": "User position",
@@ -142,7 +142,7 @@
         }
       },
       {
-        "path": "https://www.comand-cms.com",
+        "path": "https://www.comand-ui.com",
         "target": "comand",
         "icon": {
           "iconClass": "icon-globe",

package/src/assets/data/listOfComponents.json

@@ -39,7 +39,7 @@
   "SwitchLanguage",
   "SystemMessage",
   "Tables",
-  "Tags",
+  "Tabs",
   "TextImageBlock",
   "ThumbnailScroller",
   "ToggleDarkMode",

package/src/assets/data/pages/boxes-team-overview.json

@@ -49,7 +49,7 @@
               "tooltip": "Send mail"
             },
             {
-              "path": "https://www.comand-cms.com",
+              "path": "https://www.comand-ui.com",
               "target": "comand",
               "iconClass": "icon-globe",
               "tooltip": "Visit website"
@@ -74,7 +74,7 @@
               "tooltip": "Send mail"
             },
             {
-              "path": "https://www.comand-cms.com",
+              "path": "https://www.comand-ui.com",
               "target": "comand",
               "iconClass": "icon-globe",
               "tooltip": "Visit website"
@@ -104,7 +104,7 @@
               "tooltip": "Send mail"
             },
             {
-              "path": "https://www.comand-cms.com",
+              "path": "https://www.comand-ui.com",
               "target": "comand",
               "iconClass": "icon-globe",
               "tooltip": "Visit website"
@@ -134,7 +134,7 @@
               "tooltip": "Send mail"
             },
             {
-              "path": "https://www.comand-cms.com",
+              "path": "https://www.comand-ui.com",
               "target": "comand",
               "iconClass": "icon-globe",
               "tooltip": "Visit website"
@@ -199,7 +199,7 @@
               "tooltip": "Send mail"
             },
             {
-              "path": "https://www.comand-cms.com",
+              "path": "https://www.comand-ui.com",
               "target": "comand",
               "iconClass": "icon-globe",
               "tooltip": "Visit website"
@@ -224,7 +224,7 @@
               "tooltip": "Send mail"
             },
             {
-              "path": "https://www.comand-cms.com",
+              "path": "https://www.comand-ui.com",
               "target": "comand",
               "iconClass": "icon-globe",
               "tooltip": "Visit website"
@@ -254,7 +254,7 @@
               "tooltip": "Send mail"
             },
             {
-              "path": "https://www.comand-cms.com",
+              "path": "https://www.comand-ui.com",
               "target": "comand",
               "iconClass": "icon-globe",
               "tooltip": "Visit website"
@@ -284,7 +284,7 @@
               "tooltip": "Send mail"
             },
             {
-              "path": "https://www.comand-cms.com",
+              "path": "https://www.comand-ui.com",
               "target": "comand",
               "iconClass": "icon-globe",
               "tooltip": "Visit website"

package/src/componentSettingsDataAndControls.vue

@@ -104,24 +104,22 @@ data() {
                 headlineText: "Container Headline",
                 headlineLevel: 3
             },
-            contentAboveSlot: "<p>Content above slot</p>",
-            contentBelowSlot: "<p>Content below slot</p>",
-            containerType: "flex"
+            containerType: "default"
         },
         cmdContainerSettingsControls: {
             containerType: [
                 {
-                    text: "flex (default)",
+                    text: "default (default)",
+                    text: "default",
+                },
+                {
+                    text: "flex",
                     value: "flex"
                 },
                 {
                     text: "grid",
                     value: "grid"
-                },
-                {
-                    text: "none",
-                    value: ""
-                },
+                }
             ],
             contentOrientation: [
                 {
@@ -334,6 +332,24 @@ data() {
                     text: "Right",
                     value: "right"
                 }
+            ],
+            highlightLevel: [
+                {
+                    text: "none (default)",
+                    value: "none"
+                },
+                {
+                    text: "primary",
+                    value: "primary"
+                },
+                {
+                    text: "secondary",
+                    value: "secondary"
+                },
+                {
+                    text: "tertiary",
+                    value: "tertiary"
+                }
             ]
         },
         cmdInputGroupSettingsData: {
@@ -401,6 +417,24 @@ data() {
                     text: "button",
                     value: "button"
                 }
+            ],
+            highlightLevel: [
+                {
+                    text: "none",
+                    value: "none"
+                },
+                {
+                    text: "primary (default)",
+                    value: "primary"
+                },
+                {
+                    text: "secondary",
+                    value: "secondary"
+                },
+                {
+                    text: "tertiary",
+                    value: "tertiary"
+                }
             ]
         },
         cmdListSettingsData: {
@@ -508,6 +542,24 @@ data() {
                     text: "icon-chevron-two-stripes-right",
                     value: "icon-chevron-two-stripes-right"
                 }
+            ],
+            highlightLevel: [
+                {
+                    text: "none",
+                    value: "none"
+                },
+                {
+                    text: "primary (default)",
+                    value: "primary"
+                },
+                {
+                    text: "secondary",
+                    value: "secondary"
+                },
+                {
+                    text: "tertiary",
+                    value: "tertiary"
+                }
             ]
         },
         cmdNewsletterSubscriptionSettingsData: {
@@ -669,7 +721,7 @@ data() {
         cmdSystemMessageSettingsData: {
             validationStatus: "error",
             fullWidth: true,
-            systemMessage: "This is an error message!",
+            systemMessage: "This is an system message!",
             messageHeadlineLevel: 4
         },
         cmdSystemMessageSettingsControls: {
@@ -703,6 +755,26 @@ data() {
             useSlot: false,
             activeTab: 0
         },
+        cmdTabsSettingsControls: {
+            highlightLevel: [
+                {
+                    text: "none",
+                    value: "none"
+                },
+                {
+                    text: "primary (default)",
+                    value: "primary"
+                },
+                {
+                    text: "secondary",
+                    value: "secondary"
+                },
+                {
+                    text: "tertiary",
+                    value: "tertiary"
+                }
+            ]
+        },
         cmdTextImageBlockSettingsData: {
             htmlContent: "Text given as html-content",
             paragraphTextAlign: "left",

package/src/components/CmdAddressData.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdAddressData ---------------------------------------------------------------------------------------- -->
     <div class="cmd-address-data vcard">
         <!-- begin slot -->
         <template v-if="useSlot">
@@ -169,6 +170,7 @@
             <!-- end address-data in vCard microformat -->
         </template>
     </div>
+    <!-- end CmdAddressData ---------------------------------------------------------------------------------------- -->
 </template>
 
 <script>

package/src/components/CmdAddressDataItem.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- begin CmdAddressDataItem ---------------------------------------------------------------------------------------- -->
     <dt :class="['cmd-address-data-item', {'address': addressEntry.name === 'address'}]" :id="addressEntry.id">
         <!-- begin CmdIcon -->
         <CmdIcon
@@ -165,7 +166,7 @@
         <!-- end unlinked address -->
     </dd>
     <!-- end data for address -->
-
+    <!-- end CmdAddressDataItem ---------------------------------------------------------------------------------------- -->
 </template>
 <!-- end data (except for address) -->
 <script>