comand-component-library 4.2.52 → 4.2.54

package/src/ComponentLibrary.vue

@@ -20,7 +20,8 @@
                                     <span>Select template</span>
                                     <select id="select-template" v-model="selectedTemplate">
                                         <option value="blank">Blank/Unstyled</option>
-                                        <option value="dating">Material-Web</option>
+                                        <option value="material-web">Material-Web</option>
+                                        <option value="tailwind">Tailwind</option>
                                     </select>
                                 </label>
                                 <div>
@@ -1157,7 +1158,7 @@
             </CmdWidthLimitationWrapper>
             <!-- end link --------------------------------------------------------------------------------------------------->
 
-            <!-- begin list --------------------------------------------------------------------------------------------------->
+            <!-- begin lists --------------------------------------------------------------------------------------------------->
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage" id="section-list">
                     <span>List</span>
@@ -1165,7 +1166,7 @@
                         @click.prevent="openSettingsSidebar('CmdList')"></a>
                 </h2>
                 <CmdList :cmdHeadline="{ headlineText: 'List of links', headlineLevel: 3 }" ref="CmdList"
-                    v-bind="cmdListSettingsData" :items="listData" listType="links" @click="cmdLinkOutput" />
+                    v-bind="cmdListSettingsData" :items="listData" listContentType="links" @click="cmdLinkOutput" />
                 <dl class="output">
                     <dt>Event:</dt>
                     <dd>{{ outputCmdLink?.event?.originalEvent }}</dd>
@@ -1175,38 +1176,57 @@
                     <dd>{{ outputCmdLink?.event?.linkType }}</dd>
                 </dl>
                 <CmdList :cmdHeadline="{ headlineText: 'List of images', headlineLevel: 3 }" :items="imageGalleryData"
-                    orientation="horizontal" listType="images" />
+                    orientation="horizontal" listContentType="images" />
                 <div class="flex-container">    
                     <CmdList 
                         :cmdHeadline="{ headlineText: 'List of tags (default)', headlineLevel: 3 }" 
                         :items="listOfTagsData"
                         orientation="horizontal" 
-                        listType="tags" 
+                        listContentType="tags" 
                     />
                     <CmdList 
                         :cmdHeadline="{ headlineText: 'List of tags (primary)', headlineLevel: 3 }" 
                         :items="listOfTagsData"
                         orientation="horizontal" 
-                        listType="tags" 
+                        listContentType="tags" 
                         highlightLevel="primary"
                     />
                     <CmdList 
                         :cmdHeadline="{ headlineText: 'List of tags (secondary)', headlineLevel: 3 }" 
                         :items="listOfTagsData"
                         orientation="horizontal" 
-                        listType="tags" 
+                        listContentType="tags" 
                         highlightLevel="secondary"
                     />
                     <CmdList 
                         :cmdHeadline="{ headlineText: 'List of tags (tertiary)', headlineLevel: 3 }" 
                         :items="listOfTagsData"
                         orientation="horizontal" 
-                        listType="tags" 
+                        listContentType="tags" 
                         highlightLevel="tertiary"
                     />
                 </div>
+                <h3>Description Lists</h3>
+                <div class="flex-container">
+                    <CmdList
+                        listType="description"
+                        :cmdHeadline="{ headlineText: 'List with text', headlineLevel: 4 }" 
+                        :items="descriptionListData.text" 
+                    />
+                    <CmdList
+                        listType="description"
+                        :cmdHeadline="{ headlineText: 'List with text (term right aligned)', headlineLevel: 4 }" 
+                        :alignDescriptionTermRight="true"
+                        :items="descriptionListData.text" 
+                    />
+                    <CmdList
+                        listType="description"
+                        :cmdHeadline="{ headlineText: 'List with icons', headlineLevel: 4 }" 
+                        :items="descriptionListData.icons" 
+                    />
+                </div>
             </CmdWidthLimitationWrapper>
-            <!-- end list --------------------------------------------------------------------------------------------------->
+            <!-- end lists --------------------------------------------------------------------------------------------------->
 
             <!-- begin login-form --------------------------------------------------------------------------------------------------->
             <CmdWidthLimitationWrapper>
@@ -1340,6 +1360,17 @@
             </CmdWidthLimitationWrapper>
             <!-- end pagination --------------------------------------------------------------------------------------------------->
 
+            <!-- begin paragraph --------------------------------------------------------------------------------------------------->
+            <CmdWidthLimitationWrapper>
+                <h2 class="headline-demopage" id="section-paragraph">
+                    <span>Paragraph</span>
+                    <a href="#" class="button small icon-cog" title="Open Component Settings"
+                        @click.prevent="openSettingsSidebar('CmdParagraph')"></a>
+                </h2>
+                <CmdParagraph ref="CmdParagraph" v-bind="cmdParagraphSettingsData" />
+            </CmdWidthLimitationWrapper>
+            <!-- end paragraph --------------------------------------------------------------------------------------------------->
+
             <!-- begin section --------------------------------------------------------------------------------------------------->
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage" id="section-section">
@@ -1514,6 +1545,18 @@
             </CmdWidthLimitationWrapper>
             <!-- end tabs --------------------------------------------------------------------------------------------------->
 
+            <!-- begin tags --------------------------------------------------------------------------------------------------->
+            <CmdWidthLimitationWrapper>
+                <h2 class="headline-demopage" id="section-tag">
+                    <span>Tag</span>
+                    <a href="#" class="button small icon-cog" title="Open Component Settings"
+                        @click.prevent="openSettingsSidebar('CmdTag')">
+                    </a>
+                </h2>
+                <CmdTag ref="CmdTag" v-bind="cmdTagSettingsData" />
+            </CmdWidthLimitationWrapper>
+            <!-- end tags --------------------------------------------------------------------------------------------------->
+
             <!-- begin text-image-block --------------------------------------------------------------------------------------------------->
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage" id="section-text-image-block">
@@ -1711,6 +1754,7 @@ import inputGroupRadiobuttonsData from '@/assets/data/input-group-radiobuttons.j
 import inputGroupReplacedRadiobuttonsData from '@/assets/data/input-group-replaced-radiobuttons.json'
 import inputGroupToggleSwitchRadiobuttonsData from '@/assets/data/input-group-toggle-switch-radiobuttons.json'
 import listData from '@/assets/data/list.json'
+import descriptionListData from '@/assets/data/list-description-list.json'
 import listOfTagsData from '@/assets/data/list-of-tags.json'
 import switchLanguage from '@/assets/data/switch-language.json'
 import mailToolData from '@/assets/data/mail-tool.json'
@@ -1910,6 +1954,7 @@ export default {
             switchLanguage,
             listData,
             listOfTagsData,
+            descriptionListData,
             multistepsData,
             mailToolData,
             navigationData,
@@ -2191,7 +2236,7 @@ export default {
             }
 
             // change logo
-            if (this.selectedTemplate === "dating") {
+            if (this.selectedTemplate === "material-web") {
                 this.companyLogoData =
                 {
                     "link": {
@@ -2199,8 +2244,6 @@ export default {
                         "path": "./",
                         "tooltip": "Tooltip"
                     },
-                    "pathDefaultLogo": "/media/images/logos/logo-dating.svg",
-                    "pathDarkmodeLogo": "/media/images/logos/logo-dating-darkmode.svg",
                     "altText": "Company Logo"
                 }
 

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

@@ -63,6 +63,7 @@
     "description": "User with a long text as description that wraps over multiple lines",
     "links":  [
       {
+        "linkType": "href",
         "path": "mailto:",
         "icon": {
           "iconClass": "icon-mail",
@@ -70,6 +71,7 @@
         }
       },
       {
+        "linkType": "href",
         "path": "https://www.comand-ui.com",
         "target": "comand",
         "icon": {
@@ -78,6 +80,7 @@
         }
       },
       {
+        "linkType": "href",
         "path": "tel:",
         "icon": {
           "iconClass": "icon-phone",

package/src/assets/data/list-description-list.json

@@ -0,0 +1,74 @@
+{
+  "text": [
+    {
+      "descriptionTerm": {
+        "text": "Description Term #1"
+      },
+      "descriptionData": {
+        "text": "Description Data #1"
+      }
+    },
+    {
+      "descriptionTerm": {
+        "text": "Description Term #2"
+      },
+      "descriptionData": {
+        "text": "Description Data #2"
+      }
+    },
+    {
+      "descriptionTerm": {
+        "text": "Description Term #3"
+      },
+      "descriptionData": {
+        "text": "Description Data #3"
+      }
+    }
+  ],
+  "icons": [
+    {
+      "descriptionTerm": {
+        "cmdIcon": {
+          "show": true,
+          "iconClass": "icon-home",
+          "tooltip": "Href with anchor"
+        }
+      },
+      "descriptionData": {
+        "cmdLink": {
+          "linkType": "href",
+          "text": "Description data in link ",
+          "path": "#anchor-back-to-top"
+        }
+      }
+    },
+    {
+      "descriptionTerm": {
+        "cmdIcon": {
+          "show": true,
+          "iconClass": "icon-user-profile",
+          "tooltip": "Href with anchor"
+        }
+      },
+      "descriptionData": {
+        "text": "Data without link"
+      }
+    },
+    {
+      "descriptionTerm": {
+        "cmdIcon": {
+          "show": true,
+          "iconClass": "icon-phone",
+          "tooltip": "Href with anchor"
+        }
+      },
+      "descriptionData": {
+        "cmdLink": {
+          "linkType": "href",
+          "text": "Description data in link",
+          "path": "#anchor-back-to-top"
+        }
+      }
+    }
+  ]
+}

package/src/assets/data/listOfComponents.json

@@ -29,6 +29,7 @@
   "PageFooter",
   "PageHeader",
   "Pagination",
+  "Paragraph",
   "Section",
   "SiteFooter",
   "SiteHeader",
@@ -40,6 +41,7 @@
   "SystemMessage",
   "Tables",
   "Tabs",
+  "Tag",
   "TextImageBlock",
   "ThumbnailScroller",
   "ToggleDarkMode",

package/src/assets/styles/component-library-global-styles.scss

@@ -284,22 +284,8 @@ a img.flag {
         border-color: var(--status-color);
     }
 }
-
-.cmd-link.button {
-    &.router-link-active {
-        background: var(--button-primary-background-highlighted); /* set background for active router-links styled as buttons buttons */
-    }
-}
-
 /* end tooltip for cmd-form-element and cmd-fake-select -------------------------------------------------------------------------------------------------------------------- */
 
-/* begin cmd-link -------------------------------------------------------------------------------------------------------------------- */
-.cmd-link.button {
-    &.router-link-active {
-        background: var(--button-primary-background-highlighted); /* set background for active router-links styled as buttons */
-    }
-}
-/* end cmd-link -------------------------------------------------------------------------------------------------------------------- */
 /* ----------------------------------------------- END COMPONENTS AND GLOBAL STYLES --------------------------------------------------- */
 
 /* ---------------------------------------------- BEGIN MEDIA QUERIES AND BROWSER SPECIFIC STYLES -------------------------------------------------- */

package/src/componentSettingsDataAndControls.vue

@@ -651,6 +651,31 @@ data() {
                 }
             ]
         },
+        cmdParagraphSettingsData: {
+            content: "This is a paragraph with content provided per property with <dfn title='HyperText Markup Language'>HTML</dfn> inside. Its alignment can be adjusted with the <em>textAlign</em>-property. Additionally the number of columns (1-4) can be defined by <em>numberOfColumns</em>-property.",
+            numberOfColumns: 1,
+            textAlign: "left",
+        },
+        cmdParagraphSettingsControls: {
+            textAlign: [
+                {
+                    text: "left",
+                    value: "left"
+                },
+                {
+                    text: "center",
+                    value: "center"
+                },
+                {
+                    text: "right",
+                    value: "right"
+                },
+                {
+                    text: "justify",
+                    value: "justify"
+                }
+            ]
+        },
         cmdSiteHeaderSettingsData: {
             sticky: false,
             navigationInline: false,
@@ -775,6 +800,30 @@ data() {
                 }
             ]
         },
+        cmdTagSettingsData: {
+            tagText: "Text for Tag",
+            removeByClick: false
+        },
+        cmdTagSettingsControls: {
+            highlightLevel: [
+                {
+                    text: "none (default)",
+                    value: "none"
+                },
+                {
+                    text: "primary",
+                    value: "primary"
+                },
+                {
+                    text: "secondary",
+                    value: "secondary"
+                },
+                {
+                    text: "tertiary",
+                    value: "tertiary"
+                }
+            ]
+        },
         cmdTextImageBlockSettingsData: {
             htmlContent: "Text given as html-content",
             paragraphTextAlign: "left",

package/src/components/CmdBox.vue

@@ -159,7 +159,7 @@
        href="#"
        @click.prevent="clickOnProduct(product)">
         <div class="box-header flex-container vertical">
-            <CmdImage v-if="product.image?.src" v-bind="product.image" />
+            <CmdImage v-if="product.image?.src" v-bind="{image:{...product.image}}" />
 
             <!-- begin ribbons -->
             <div v-if="product.new" class="ribbon-new">
@@ -208,16 +208,23 @@
                 </figcaption>
             </figure>
             <!-- end no user-image -->
-
+            
             <!-- begin no user-image -->
-            <div v-else class="no-user-image">
-                <CmdIcon
-                  :iconClass="iconUserProfile.iconClass"
-                  :type="iconUserProfile.iconType"
-                  :title="user.name" 
-                />
-                <p v-if="!rowView" class="user-name">{{ user.name }}</p>
-            </div>
+            <template v-else>
+                <div class="no-user-image">
+                    <CmdIcon
+                    :iconClass="iconUserProfile.iconClass"
+                    :type="iconUserProfile.iconType"
+                    :title="user.name" 
+                    />
+                </div>
+                <p v-if="!rowView" class="user-name">
+                    {{ user.name }}
+                    <span v-if="user.age" class="user-age"> 
+                        ({{ user.age }})
+                    </span>
+                </p>
+            </template>
             <!-- end no user-image -->
         </div>
         <!-- end box-header -->
@@ -241,7 +248,7 @@
 
         <!-- begin box-footer -->
         <div v-if="user.links && user.links.length" class="box-footer">
-            <CmdList :links="user.links" orientation="horizontal" :useGap="false"/>
+            <CmdList :items="user.links" orientation="horizontal" :useGap="false"/>
         </div>
         <!-- end box-footer -->
     </div>
@@ -390,7 +397,7 @@ export default {
          *
          * @required: only available for boxtype===user
          *
-         * @allowedValues: 'business', 'influencer', 'dating'
+         * @allowedValues: 'business', 'influencer', 'material-web'
          */
         profileType: {
             type: String,
@@ -398,7 +405,7 @@ export default {
             validator(value) {
                 return value === "business" ||
                     value === "influencer" ||
-                    value === "dating"
+                    value === "material-web"
             }
         },
         /**
@@ -433,6 +440,10 @@ export default {
         /**
          * icon for user-profile if no user-image exists
          *
+         * {
+         *      iconClass: string,
+         *      iconType: string
+         * }
          * @requiredForAccessibility: partial
          */
          iconUserProfile: {
@@ -600,6 +611,8 @@ export default {
     }
 
     .box-header {
+        overflow: hidden; /* hide edges of optional badges */
+        
         .cmd-headline {
             margin-bottom: 0;
             text-decoration: none;
@@ -624,6 +637,7 @@ export default {
             justify-content: space-between;
             background: var(--box-header-background);
             border-radius: var(--box-border-radius);
+            border-bottom: 0;
 
             &:hover, &:active, &:focus {
                 background: var(--color-white);
@@ -633,6 +647,10 @@ export default {
                 }
             }
         }
+
+        .box-body {
+            border-top: var(--box-border);
+        }
     }
 
     > .box-body:first-child {
@@ -693,7 +711,6 @@ export default {
         .box-body {
             display: flex;
             flex-grow: 1;
-            border-top: var(--box-border);
 
             .box-body-padding {
                 padding: var(--box-body-padding);
@@ -855,12 +872,6 @@ export default {
                 border-bottom-left-radius: 0;
                 border-bottom-right-radius: 0;
             }
-
-            figcaption {
-                font-size: 2rem;
-                font-weight: bold;
-                padding: var(--default-padding);
-            }
         }
 
         .box-body {
@@ -888,13 +899,22 @@ export default {
         &:hover, &:active, &:focus {
             border-color: var(--hyperlink-color-highlighted);
         }
+
+        
+        &.row-view {
+            flex-direction: row;
+            align-items: center;
+        }
     }
 
     /* boxType === 'user' */
     &.user {
+        --box-header-padding: var(--default-padding);
+
         .user-name {
             color: var(--color-scheme-text-color);
             font-size: 2rem;
+            font-weight: bold;
         }
 
         .user-age {
@@ -906,15 +926,12 @@ export default {
             --box-header-text-color: var(--primary-color);
             
             background: none;
+            gap: calc(var(--default-gap) / 2);
 
             > div:first-child > [class*="icon-"] {
                 aspect-ratio: 1/1;
             }
 
-            &:has(img) {
-                --box-header-padding: var(--default-padding);
-            }
-
             img {
                 margin: 0 auto var(--default-margin) auto;
 
@@ -937,15 +954,19 @@ export default {
                 color: var(--color-white);
                 justify-content: center;
                 align-items: center;
-                margin: 0;
                 font-size: var(--default-icon-size);
             }
+
+            .no-user-image {
+                background: var(--default-background);
+            }
         }
 
         .box-body {
             flex-grow: 1;
             padding: var(--default-padding);
-            padding-top: 0;
+
+            border-bottom: 0;
 
             p {
                 text-align: center;
@@ -966,7 +987,7 @@ export default {
             padding: 0;
             border-top: var(--box-border);
 
-            .cmd-list-of-links {
+            .cmd-list {
                 ul {
                     width: 100%;
                     margin-bottom: 0;
@@ -1026,6 +1047,10 @@ export default {
         }
 
         &.row-view {
+            .box-header {
+                border: 0;
+            }
+
             .box-body {
                 padding: 0;
 

package/src/components/CmdBoxWrapper.vue

@@ -300,8 +300,6 @@ export default {
     }
 
     .row-view {
-        flex-direction: column;
-
         p.cutoff-text {
             height: auto;
 
@@ -332,8 +330,6 @@ export default {
             grid-template-columns: repeat(1, minmax(0, 1fr));
         }
     }
-
-
 }
 </style>
 

package/src/components/CmdCodeOutput.vue

@@ -25,8 +25,6 @@
 </template>
 
 <script>
-import { ref } from "vue"
-
 export default {
     name: "CmdCodeOutput",
     props: {

package/src/components/CmdFancyBox.vue

@@ -93,7 +93,6 @@
                 <!-- end slot-content -->
             </div>
         </div>
-
         <footer v-if="showSubmitButtons && fancyBoxOptionsProperties.submitButtons" class="flex-container flex-none">
             <!-- begin cancel-button -->
             <button
@@ -545,9 +544,10 @@ export default FancyBox
 
     > header {
         display: flex;
+        height: auto; /* overwrite possible overwrites by global header */
+        max-height: none; /* overwrite possible overwrites by global header */
     }
 
-
     > .grayscale {
         filter: grayscale(1);
     }

package/src/components/CmdForm.vue

@@ -68,7 +68,7 @@
                 <small v-if="mandatoryText" class="mandatory-text"><sup>*</sup>{{ mandatoryText }}</small>     
                 <!-- begin cancel-button (below fieldset) -->
                 <button 
-                    v-if="cancelButtonOptions !== undefined"
+                    v-if="cancelButtonOptions.show"
                     :class="['button', {'stretch-on-small-devices': cancelButtonOptions.stretchOnSmallDevices, disabled: cancelButtonOptions.disabled, cancel: cancelButtonOptions.useDefaultStyling}]" 
                     type="button"
                     @click="cancelFormSubmit"
@@ -79,7 +79,8 @@
                 <!-- end cancel-button (below fieldset) -->
 
                 <!-- begin submit-button (below fieldset) -->
-                <button :class="['button', {'stretch-on-small-devices': submitButtonOptions.stretchOnSmallDevices, primary: submitButtonOptions.primary, disabled: submitButtonOptions.disabled}]"
+                <button v-if="submitButtonOptions.show"
+                        :class="['button', {'stretch-on-small-devices': submitButtonOptions.stretchOnSmallDevices, primary: submitButtonOptions.primary, disabled: submitButtonOptions.disabled}]"
                         :type="submitButtonOptions.type || 'submit'">
                     <span v-if="submitButtonOptions.iconClass" :class="submitButtonOptions.iconClass"></span>
                     <span v-if="submitButtonOptions.text">{{ submitButtonOptions.text }}</span>
@@ -220,6 +221,7 @@ export default {
         },
         cancelButtonOptions() {
             return {
+                show: true,
                 iconClass: "icon-cancel-circle",
                 text: "Cancel",
                 useDefaultStyling: false,
@@ -230,6 +232,7 @@ export default {
         },
         submitButtonOptions() {
             return {
+                show: true,
                 iconClass: "icon-check-circle",
                 text: "Submit",
                 type: "submit",

package/src/components/CmdLink.vue

@@ -21,6 +21,7 @@
     <!-- begin router-link -->
     <router-link v-else-if="linkType === 'router'" 
         :to="!disabled ? path : {}" 
+        exact-active-class="router-link-exact-active active"
         :class="['cmd-link', highlightLevel, {'button': styleAsButton, 'disabled': disabled, 'box': styleAsBox, 'fancybox': fancybox}]" 
         @click="emitClick($event, 'router')" 
         :title="icon?.tooltip">
@@ -97,7 +98,7 @@ export default {
          */
         icon: {
             type: Object,
-            default: {}
+            default: null
         },
         /**
          * displayed text