comand-component-library 3.2.8 → 3.3.0

package/src/components/CmdIcon.vue

@@ -1,25 +1,39 @@
 <template>
-    <span v-if="fontSource === 'iconify'" :title="tooltip"></span>
-    <span v-if="fontSource === 'local'" :class="iconClass" :title="tooltip"></span>
+    <!-- begin iconify-icon -->
+    <Icon v-if="isIconify" :icon="iconClass" :title="tooltip"></Icon>
+    <!-- end iconify-icon -->
+
+    <!-- being icon from local iconfont -->
+    <span v-else :class="iconClass" :title="tooltip"></span>
+    <!-- end icon from local iconfont -->
 </template>
 
 <script>
+// import components
+import {Icon} from "@iconify/vue"
+
 export default {
     name: "CmdIcon",
+    components: {
+        Icon
+    },
     props: {
         /**
-         * font-source where to load the icons from
-         * 'local' is for using an implemented icon-fonts by using class 'icon-name'
-         * 'iconify' is for using icons from iconify-dependency (https://iconify.design/)
+         * type that defines where the icon is loaded from
+         * 'auto' is for letting the component check (by classname) if the icon should be loaded from the local iconfont (class="icon-'iconname'")
+         *  or if the icon should be loaded form iconify-api (class='fontprefix':'iconname') (https://iconify.design/)
+         * 'iconify' forces the component to load an iconfify icon (without api) from a local source (which must be defined)
          *
-         * @allowedValues: 'dependency', 'local'
+         * @allowedValues: 'auto', 'iconify'
          */
-        fontSource: {
+        type: {
             type: String,
-            default: 'local'
+            default: "auto"
         },
         /**
-         * icon-class for icon
+         * icon-class for icon from local iconfont
+         *
+         * type-property must be set to auto and classname must include icon-'iconname'
          */
         iconClass: {
             type: String,
@@ -34,6 +48,29 @@ export default {
             type: String,
             required: false
         }
+    },
+    computed: {
+        isIconify() {
+            if (this.type === "iconify") {
+                return true
+            }
+
+            if (this.type === "auto") {
+                return this.iconClass.includes(":")
+            }
+            return false
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.iconify {
+    font-size: var(--icon-size);
+    vertical-align: text-bottom;
+
+    & + span, span + &  {
+        margin-left: calc(var(--default-margin) / 2);
     }
 }
-</script>
+</style>

package/src/components/CmdListOfRequirements.vue

@@ -176,7 +176,6 @@ export default {
         }
 
         span[class*="icon"] {
-            font-size: 1.2rem;
             color: var(--status-color);
         }
 
@@ -186,10 +185,6 @@ export default {
             justify-content: center;
             text-align: center;
             text-decoration: none;
-
-            span[class*="icon"] {
-                font-size: 1.2rem;
-            }
         }
     }
 }

package/src/components/CmdLoginForm.vue

@@ -47,7 +47,7 @@
             <template v-if="options.forgotPassword || options.createAccount">
                 <!-- begin link for 'forgot password' -->
                 <a v-if="options.forgotPassword" href="#" @click.prevent="sendLogin = true">
-                    <span v-if="options.forgotPassword.icon && options.forgotPassword.icon.show && options.forgotPassword.icon.iconClass"
+                    <span v-if="options.forgotPassword.icon?.show && options.forgotPassword.icon?.iconClass"
                           :class="options.forgotPassword.icon.iconClass"
                           :title="options.forgotPassword.icon.tooltip">
                     </span>
@@ -57,7 +57,7 @@
 
                 <!-- begin link-type 'href' for 'create account' -->
                 <a v-if="options.createAccount && options.createAccount.linkType === 'href'" :href="options.createAccount.path">
-                    <span v-if="options.createAccount.icon && options.createAccount.icon.show && options.createAccount.icon.iconClass"
+                    <span v-if="options.createAccount.icon?.show && options.createAccount.icon?.iconClass"
                           :class="options.createAccount.icon.iconClass"
                           :title="options.forgotPassword.icon.tooltip">
                     </span>
@@ -294,20 +294,20 @@ export default {
                     forgotPassword: {
                         icon: {
                             show: true,
-                            iconClass: "icon-help",
+                            iconClass: "icon-questionmark-circle",
                             tooltip: ""
                         },
-                        text: "Forgot password?"
+                        text: "Forgot password"
                     },
                     createAccount: {
                         linkType: "href",
                         path: "#",
                         icon: {
-                        show: true,
-                        iconClass: "icon-register",
-                        tooltip: ""
-                    },
-                        text: "Create new account!"
+                            show: true,
+                            iconClass: "icon-register",
+                            tooltip: ""
+                        },
+                        text: "Create new account"
                     },
                     backToLoginForm: {
                         icon: {
@@ -428,7 +428,6 @@ export default {
             flex: none;
 
             span[class*="icon"] {
-                font-size: 1.3rem;
                 text-decoration: none;
             }
         }

package/src/components/CmdMainNavigation.vue

@@ -408,7 +408,7 @@ export default {
                                     font-weight: bold;
 
                                     &[class*="icon"] {
-                                        font-size: 1rem;
+                                        font-size: var(--font-size-small);
                                     }
                                 }
                             }

package/src/components/CmdMultistepFormProgressBar.vue

@@ -137,7 +137,7 @@ export default {
                         z-index: 1;
 
                         &::before {
-                            font-size: 1rem;
+                            font-size: var(--font-size-small);
                         }
                     }
                 }
@@ -179,7 +179,6 @@ export default {
 
         &.active {
             a {
-                font-weight: bold;
                 background: var(--primary-color);
 
                 span, span[class*='icon'] {
@@ -207,6 +206,7 @@ export default {
                         & + span[class*="icon"] {
                             &:last-child {
                                 border-color: var(--border-color);
+                                color: var(--pure-white);
                                 background: var(--secondary-color);
                             }
                         }

package/src/components/CmdPager.vue

@@ -148,7 +148,7 @@ export default {
             }
 
             > [class*="icon-"] {
-                font-size: 1rem;
+                font-size: var(--icon-size-small);
             }
         }
 

package/src/components/CmdSiteSearch.vue

@@ -373,7 +373,7 @@ export default {
 
     > a {
         [class*='icon'] {
-            font-size: 1rem;
+            font-size: var(--icon-size-small);
         }
     }
 

package/src/components/CmdTable.vue

@@ -199,7 +199,7 @@ export default {
             min-height: 2rem;
 
             span[class*="icon"] {
-                font-size: 1rem;
+                font-size: var(--icon-size-small);
             }
         }
     }
@@ -215,7 +215,7 @@ export default {
             th {
                 a[class*='icon-'] {
                     &, &:hover, &:active, &:focus {
-                        font-size: 1rem;
+                        font-size: var(--icon-size-small);
                         color: var(--pure-white);
                     }
                 }

package/src/components/CmdTabs.vue

@@ -2,8 +2,8 @@
     <div class="cmd-tabs">
         <ul :class="{'stretch-tabs' : stretchTabs}" role="tablist">
             <li v-for="(tab, index) in tabs" :key="index" role="tab">
-                <a :class="{active : showTab === index}" @click.prevent="setActiveTab(index)" :title="!tab.name ? tab.tooltip : false" href="#">
-                    <span v-if="tab.iconClass" :class="tab.iconClass"></span>
+                <a :class="{active : showTab === index}" @click.prevent="setActiveTab(index)" :title="!tab.name ? tab.tooltip : undefined" href="#">
+                    <CmdIcon v-if="tab.iconClass" :iconClass="tab.iconClass"></CmdIcon>
                     <span v-if="tab.name">{{ tab.name }}</span>
                 </a>
             </li>
@@ -32,13 +32,17 @@
 </template>
 
 <script>
+import {addCollection} from "@iconify/vue"
+import IconData from '@/assets/data/icon.json'
 // import components
 import CmdHeadline from "./CmdHeadline"
-
+import CmdIcon from "./CmdIcon"
+addCollection(IconData)
 export default {
     name: "CmdTabs",
     components: {
-        CmdHeadline
+        CmdHeadline,
+        CmdIcon
     },
     data() {
         return {
@@ -140,10 +144,10 @@ export default {
                 }
 
                 &.active {
-                   color: var(--pure-white);
+                    color: var(--pure-white);
 
                     &:hover, &:active, &:focus {
-                        color: var(--hyperlink-color);
+                        background: var(--hyperlink-color);
                     }
                 }
             }

package/src/components/CmdTooltip.vue

@@ -194,7 +194,7 @@ export default {
 
             span[class*="icon"] {
                 padding-left: 1rem;
-                font-size: 1.2rem;
+                font-size: 1.1rem;
             }
         }
     }

package/src/components/CmdUploadForm.vue

@@ -1046,10 +1046,9 @@ export default {
                     left: 50%;
                     transform: translateX(-50%);
                     z-index: 1;
-                    font-size: 1.2rem;
                     display: table;
-                    top: 0.2rem;
-                    padding: 0.1rem 0.2rem;
+                    top: .2rem;
+                    padding: .1rem .2rem;
                     line-height: 100%;
                     background: var(--color-scheme-background-color);
                 }

package/src/directives/focus.js

@@ -2,7 +2,7 @@ export default {
     // el = real dom-element
     mounted(el) {
         // check if element is native input-element
-        if(el.tagName === "INPUT" || el.tagName === "SELECT" || el.tagName === "TEXTAREA") {
+        if(el.tagName === "INPUT" || el.tagName === "SELECT" || el.tagName === "TEXTAREA" || el.tagName === "A") {
             el.focus()
         } else {
             // check if component is used, which contains a native input-element

package/src/documentation/generated/CmdFakeSelectPropertyDescriptions.json

@@ -80,5 +80,10 @@
         "comments": [
             "path to flag-files (will be combined with flag isoCode to load svg)"
         ]
+    },
+    "textPleaseSelect": {
+        "comments": [
+            "default text if no option is selected (and first option is not used)"
+        ]
     }
 }

package/src/documentation/generated/CmdIconPropertyDescriptions.json

@@ -0,0 +1,32 @@
+{
+    "type": {
+        "comments": [
+            "type that defines where the icon is loaded from",
+            "'auto' is for letting the component check (by classname) if the icon should be loaded from the local iconfont (class=\"icon-'iconname'\")",
+            " or if the icon should be loaded form iconify-api (class='fontprefix':'iconname') (https://iconify.design/)",
+            "'iconify' forces the component to load an iconfify icon (without api) from a local source (which must be defined)"
+        ],
+        "annotations": {
+            "allowedValues": [
+                "'auto', 'iconify'"
+            ]
+        }
+    },
+    "iconClass": {
+        "comments": [
+            "icon-class for icon from local iconfont",
+            "",
+            "type-property must be set to auto and classname must include icon-'iconname'"
+        ]
+    },
+    "tooltip": {
+        "comments": [
+            "tooltip text for icon"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "true"
+            ]
+        }
+    }
+}