goodteditor-ui 1.0.84 → 1.0.86

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.84",
+    "version": "1.0.86",
     "main": "index.js",
     "homepage": "https://goodt-ui.netlify.app/",
     "scripts": {

package/src/components/ui/Datalist.vue

@@ -4,7 +4,7 @@
         @slot Dropdown header slot
         -->
         <slot name="header"></slot>
-        <ul ref="ul">
+        <ul ref="ul" class="list" :style="cssListStyle">
             <!--
             @slot Label slot for single mode
             @binding {Object} option             option
@@ -50,7 +50,16 @@
     max-height: calc(var(--item-height) * var(--item-count));
     outline: none;
 
-    ul {
+    --default-item-height: calc(var(--spacer3) * 2 + var(--line-height) * 1rem);
+    &&-small {
+        --default-item-height: calc(var(--spacer2) * 2 + var(--font-size-smaller) * var(--line-height) * 1.125);
+    }
+
+    .list {
+        --item-count: 5;
+        --item-height: var(--default-item-height);
+
+        max-height: calc(var(--item-height) * var(--item-count));
         scroll-behavior: smooth;
         max-height: inherit;
     }
@@ -92,14 +101,21 @@ export default {
          */
         maxHeight: {
             type: String,
-            default: ''
+            default: null
         },
         /**
          * Max visible items count
          */
         maxItems: {
             type: Number,
-            default: 4
+            default: 5
+        },
+        /**
+         * Item height count
+         */
+        itemHeight: {
+            type: String,
+            default: null
         },
         /**
          * The current cursor index position (.sync)
@@ -121,11 +137,20 @@ export default {
             return o;
         },
         cssStyle() {
-            const { maxHeight, maxItems } = this;
+            const { maxItems } = this;
+            return {
+                '--item-count': maxItems
+            };
+        },
+        cssListStyle() {
+            const { maxHeight, maxItems, itemHeight } = this;
             return {
                 ...(maxHeight && {
                     maxHeight
                 }),
+                ...(itemHeight && {
+                    '--item-height': itemHeight
+                }),
                 '--item-count': maxItems
             };
         }

package/src/components/ui/Select.vue

@@ -100,7 +100,7 @@
                 class="w-100 pull-left"
                 @click.native.stop
                 @select-option="onDatalistSelectOption"
-                v-bind="{ size, options, class: datalistCssClass }"
+                v-bind="{ size, options, class: datalistCssClass, maxHeight, maxItems, itemHeight }"
                 :cursorIndex.sync="dataListCursorIndex"
                 ref="datalist">
                 <template #header>
@@ -307,13 +307,6 @@ export default {
                 return [];
             }
         },
-        /**
-         * Datalist css classes (optional)
-         */
-        datalistCssClass: {
-            type: [String, Array],
-            default: ''
-        },
         /**
          * Allow multiple selection
          */
@@ -353,7 +346,36 @@ export default {
         valueOfOptionChecker: {
             type: Function,
             default: null
-        }
+        },
+        // DATALIST OPTIONS
+        /**
+         * Datalist css classes (optional)
+         */
+        datalistCssClass: {
+            type: [String, Array],
+            default: ''
+        },
+        /**
+         * Defines the max-height of the dropdown list (value may be any css unit/expression)
+         */
+        maxHeight: {
+            type: String,
+            default: null
+        },
+        /**
+         * Max visible items count
+         */
+        maxItems: {
+            type: Number,
+            default: 5
+        },
+        /**
+         * Item height count
+         */
+        itemHeight: {
+            type: String,
+            default: null
+        },
     },
     data() {
         return {