goodteditor-ui 1.0.82 → 1.0.84

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.82",
+    "version": "1.0.84",
     "main": "index.js",
     "homepage": "https://goodt-ui.netlify.app/",
     "scripts": {
@@ -40,7 +40,8 @@
         "vue-cli-plugin-styleguidist": "~4.72.4",
         "vue-styleguidist": "^4.72.4",
         "vue-template-compiler": "^2.6.12",
-        "webpack": "^5.91.0"
+        "webpack": "^5.91.0",
+        "postcss": "^8.1.0"
     },
     "peerDependencies": {
         "vue": "^2.6.12",

package/src/components/ui/Datalist.vue

@@ -1,11 +1,11 @@
 <template>
-    <div class="ui-datalist dropdown" :class="cssClass">
-        <!-- 
+    <div class="ui-datalist dropdown" :class="cssClass" :style="cssStyle">
+        <!--
         @slot Dropdown header slot
         -->
         <slot name="header"></slot>
-        <ul ref="ul" :style="{ maxHeight }">
-            <!-- 
+        <ul ref="ul">
+            <!--
             @slot Label slot for single mode
             @binding {Object} option             option
             @binding {Number} index              option's index
@@ -19,7 +19,8 @@
                     option,
                     index,
                     cursorIndex,
-                    setCursorIndex
+                    setCursorIndex,
+                    select: () => onOptionClick(option, index)
                 }">
                 <li :class="{ active: index == cursorIndex }" :key="index" @click="onOptionClick(option, index)">
                     <div class="text-truncate" style="min-height: calc(var(--line-height) * 1rem)">
@@ -37,18 +38,21 @@
                 </li>
             </slot>
         </ul>
-        <!-- 
+        <!--
         @slot Dropdown footer slot
         -->
         <slot name="footer"></slot>
     </div>
 </template>
-<style lang="less" scoped>
+<style lang="pcss" scoped>
 .dropdown {
+    --item-height: var(--datalist-item-height, calc(var(--spacer3) * 2 + var(--line-height) * 1rem));
+    max-height: calc(var(--item-height) * var(--item-count));
     outline: none;
 
     ul {
         scroll-behavior: smooth;
+        max-height: inherit;
     }
 
     &.no-scroll-animation {
@@ -90,6 +94,13 @@ export default {
             type: String,
             default: ''
         },
+        /**
+         * Max visible items count
+         */
+        maxItems: {
+            type: Number,
+            default: 4
+        },
         /**
          * The current cursor index position (.sync)
          */
@@ -108,6 +119,15 @@ export default {
             size && o.push(`dropdown-${this.size}`);
             !useScrollAnimation && o.push('no-scroll-animation');
             return o;
+        },
+        cssStyle() {
+            const { maxHeight, maxItems } = this;
+            return {
+                ...(maxHeight && {
+                    maxHeight
+                }),
+                '--item-count': maxItems
+            };
         }
     },
     watch: {

package/src/components/ui/DatePicker.vue

@@ -34,12 +34,9 @@
                             setToday,
                             month,
                             monthName: monthNames[month],
-                            year,
-                        }"
-                    >
-                        <div
-                            class="ui-date-picker-header text-small mar-bot-3 bg-primary color-white pad-3"
-                        >
+                            year
+                        }">
+                        <div class="ui-date-picker-header text-small mar-bot-3 bg-primary color-white pad-3">
                             <div class="flex-shrink nobr">
                                 <div class="icon cursor-pointer" @click="prevYear">
                                     <i class="mdi mdi-chevron-double-left"></i>
@@ -66,8 +63,7 @@
                         <div
                             class="ui-date-picker-day-cell text-small"
                             v-for="dayIndex of dayNamesIndexes"
-                            :key="`day-${dayIndex}`"
-                        >
+                            :key="`day-${dayIndex}`">
                             <!-- 
                             @slot Custom day content
                             @binding {Number} dayIndex      day index (0 = sunday)
@@ -79,9 +75,8 @@
                                 v-bind="{
                                     dayIndex,
                                     dayName: dayNames[dayIndex],
-                                    isWeekend: isWeekendDay(dayIndex),
-                                }"
-                            >
+                                    isWeekend: isWeekendDay(dayIndex)
+                                }">
                                 <div class="color-grey-dark">
                                     {{ dayNames[dayIndex] }}
                                 </div>
@@ -90,8 +85,7 @@
                         <div
                             class="ui-date-picker-date-cell text-small"
                             v-for="n in currentMonthDates"
-                            :key="`${n.getMonth()}-${n.getDate()}`"
-                        >
+                            :key="`${n.getMonth()}-${n.getDate()}`">
                             <!-- 
                             @slot Custom date content
                             @binding {Date} date            date
@@ -125,25 +119,18 @@
                                     isSelected: isSelectedDate(n),
                                     isToday: isTodayDate(n),
                                     isWeekend: isWeekendDate(n),
-                                    setDate,
-                                }"
-                            >
+                                    setDate
+                                }">
                                 <div
                                     class="btn btn-icon btn-small"
                                     :class="{
                                         'btn-primary': isSelectedDate(n) || isRangeDate(n),
-                                        'radius-right-none':
-                                            isRangeStartDate(n) && !isRangeEndDate(n) && dateEnd,
-                                        'radius-left-none':
-                                            !isRangeStartDate(n) && isRangeEndDate(n),
-                                        'radius-none':
-                                            isRangeDate(n) &&
-                                            !isRangeStartDate(n) &&
-                                            !isRangeEndDate(n),
-                                        'disabled radius-none': isDisabledDate(n),
+                                        'radius-right-none': isRangeStartDate(n) && !isRangeEndDate(n) && dateEnd,
+                                        'radius-left-none': !isRangeStartDate(n) && isRangeEndDate(n),
+                                        'radius-none': isRangeDate(n) && !isRangeStartDate(n) && !isRangeEndDate(n),
+                                        'disabled radius-none': isDisabledDate(n)
                                     }"
-                                    @click="setDate(n)"
-                                >
+                                    @click="setDate(n)">
                                     <template v-if="isSelectedDate(n) || isRangeDate(n)">
                                         <div>{{ n.getDate() }}</div>
                                     </template>
@@ -160,6 +147,33 @@
                             </slot>
                         </div>
                     </div>
+                    <!-- 
+                    @slot Custom footer content
+                    @binding {Function} prevYear    select previous year
+                    @binding {Function} prevMonth   select previous month
+                    @binding {Function} nextYear    select next year
+                    @binding {Function} nextMonth   select next month
+                    @binding {Function} setMonth    set month by index (0 = january)
+                    @binding {Function} setYear     set year (4-digit)
+                    @binding {Function} setToday    set today's date
+                    @binding {Number} month         current month index (0 = january)
+                    @binding {String} monthName     current month name
+                    @binding {Number} year          current year (4-digit)
+                    -->
+                    <slot
+                        name="footer"
+                        v-bind="{
+                            prevYear,
+                            prevMonth,
+                            nextYear,
+                            nextMonth,
+                            setMonth,
+                            setYear,
+                            setToday,
+                            month,
+                            monthName: monthNames[month],
+                            year
+                        }"></slot>
                 </div>
                 <div class="col col-auto" v-if="$scopedSlots.right">
                     <!-- 
@@ -234,39 +248,39 @@ export default {
             default: null,
             validation(val) {
                 if (Array.isArray(val)) {
-                    return val.find(el => !this.isValid(el)) == null;
+                    return val.find((el) => !this.isValid(el)) == null;
                 } else {
                     return this.isValid(val);
                 }
-            },
+            }
         },
         /**
          * Min date (inclusive)
          */
         min: {
             type: Date,
-            default: null,
+            default: null
         },
         /**
          * Max date (inclusive)
          */
         max: {
             type: Date,
-            default: null,
+            default: null
         },
         /**
          * Allowed date filter function(date:Date):Boolean
          */
         allowed: {
             type: Function,
-            default: () => true,
+            default: () => true
         },
         /**
          * Range mode
          */
         range: {
             type: Boolean,
-            default: false,
+            default: false
         },
         /**
          * Day names starting from 'Sunday'
@@ -275,7 +289,7 @@ export default {
             type: Array,
             default() {
                 return ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];
-            },
+            }
         },
         /**
          * Weekend day indexes (0 = Sunday; 6 = Saturday)
@@ -284,7 +298,7 @@ export default {
             type: Array,
             default() {
                 return [0, 6];
-            },
+            }
         },
         /**
          * Month names starting from 'January'
@@ -304,9 +318,9 @@ export default {
                     'Сентябрь',
                     'Октябрь',
                     'Ноябрь',
-                    'Декабрь',
+                    'Декабрь'
                 ];
-            },
+            }
         },
         /**
          * Which day is the first day of the week (0 = Sunday; 6 = Saturday)
@@ -316,8 +330,8 @@ export default {
             default: 1,
             validation(val) {
                 return val >= 0 && val < 7;
-            },
-        },
+            }
+        }
     },
     data() {
         return {
@@ -326,7 +340,7 @@ export default {
             dateEnd: null,
             month: null,
             year: null,
-            syncMonthYear: true,
+            syncMonthYear: true
         };
     },
     computed: {
@@ -349,22 +363,18 @@ export default {
             return new Date(this.year, this.month + 1, 0).getDate();
         },
         currentMonthDates() {
-            let dates = [...new Array(this.daysInMonth)].map(
-                (v, i) => new Date(this.year, this.month, i + 1)
-            );
+            let dates = [...new Array(this.daysInMonth)].map((v, i) => new Date(this.year, this.month, i + 1));
             return [...this.prevMonthDates, ...dates, ...this.nextMonthDates];
         },
         prevMonthDates() {
             let n = this.firstDayOfMonth;
             let pmd = new Date(this.year, this.month, 0).getDate();
-            return [...new Array(n)]
-                .map((v, i) => new Date(this.year, this.month - 1, pmd - i))
-                .reverse();
+            return [...new Array(n)].map((v, i) => new Date(this.year, this.month - 1, pmd - i)).reverse();
         },
         nextMonthDates() {
             let n = 6 - this.lastDayOfMonth;
             return [...new Array(n)].map((v, i) => new Date(this.year, this.month + 1, i + 1));
-        },
+        }
     },
     watch: {
         value: {
@@ -385,14 +395,14 @@ export default {
                 }
                 this.syncMonthYear = true;
             },
-            immediate: true,
+            immediate: true
         },
         range() {
             this.date = null;
             this.dateStart = null;
             this.dateEnd = null;
             this._triggerChange();
-        },
+        }
     },
     methods: {
         isValid(date) {
@@ -521,7 +531,7 @@ export default {
              * @property {Date} date
              */
             this.$emit('change', val);
-        },
-    },
+        }
+    }
 };
 </script>

package/src/components/ui/InputDatePicker.vue

@@ -4,8 +4,7 @@
         :class="cssClass"
         @focus="onRootFocus"
         tabindex="0"
-        :data-popover="popoverTargetId"
-    >
+        :data-popover="popoverTargetId">
         <div class="ui-input-date-picker-wrapper d-flex flex-v-center w-100">
             <div style="flex: 1 0 0">
                 <!--
@@ -16,18 +15,14 @@
                 @binding {Object} inputBinds    input props (use v-bind)
                 @binding {Object} inputEvents    input events (use v-on)
                 -->
-                <slot
-                    name="input"
-                    v-bind="{ id: inputId, value, valueLabel, inputBinds, inputEvents }"
-                >
+                <slot name="input" v-bind="{ id: inputId, value, valueLabel, inputBinds, inputEvents }">
                     <input
                         :id="inputId"
                         class="ui-input-date-picker-input w-100"
                         type="text"
                         :value="valueLabel"
                         v-bind="inputBinds"
-                        v-on="inputEvents"
-                    />
+                        v-on="inputEvents" />
                 </slot>
             </div>
             <!--
@@ -54,8 +49,7 @@
                 class="ui-input-date-picker-dp pull-left"
                 @change="onDpChange"
                 @set-date="onDpSetDate"
-                v-bind="{ value: date, ...datepicker }"
-            >
+                v-bind="{ value: date, ...datepicker }">
                 <template #header="scope">
                     <!--
                     @slot @see [DatePicker.slots.header](#datepicker)
@@ -86,6 +80,12 @@
                     -->
                     <slot name="dp-right"></slot>
                 </template>
+                <template #footer="scope">
+                    <!--
+                    @slot @see [DatePicker.slots.footer](#datepicker)
+                    -->
+                    <slot name="dp-footer" v-bind="scope"></slot>
+                </template>
             </date-picker>
         </ui-popover>
     </div>
@@ -111,7 +111,7 @@ import FormComponent from './utils/FormComponent';
 import WithPopover from './utils/WithPopover';
 import { isDateValid } from './utils/Helpers';
 
-let lz = n => (n < 10 ? `0${n}` : `${n}`);
+let lz = (n) => (n < 10 ? `0${n}` : `${n}`);
 export default {
     mixins: [FormComponent, WithPopover],
     components: { DatePicker, UiPopover },
@@ -121,21 +121,21 @@ export default {
          */
         value: {
             type: [String, Array],
-            default: '',
+            default: ''
         },
         /**
          * Whether the input is editable
          */
         editable: {
             type: Boolean,
-            default: true,
+            default: true
         },
         /**
          * Allow clearing the date
          */
         allowClear: {
             type: Boolean,
-            default: true,
+            default: true
         },
         /**
          * Datepicker options
@@ -145,14 +145,14 @@ export default {
             type: Object,
             default() {
                 return {};
-            },
+            }
         },
         /**
          * Date range delimiter (only if datepicker.range = true)
          */
         delimiter: {
             type: String,
-            default: ' – ',
+            default: ' – '
         },
         /**
          * Function which parses date String -> Date
@@ -167,13 +167,13 @@ export default {
                 let mt = str.match(/^(\d{1,}).(\d{1,}).(\d{1,})$/);
                 if (mt) {
                     mt.shift();
-                    let [d, m, y] = mt.map(v => parseInt(v));
+                    let [d, m, y] = mt.map((v) => parseInt(v));
                     if (d > 0 && m > 0 && y >= 0) {
                         return new Date(y, m - 1, d);
                     }
                 }
                 return null;
-            },
+            }
         },
         /**
          * Function which formats date Date -> String
@@ -186,8 +186,8 @@ export default {
                     return '';
                 }
                 return `${lz(date.getDate())}.${lz(date.getMonth() + 1)}.${lz(date.getFullYear())}`;
-            },
-        },
+            }
+        }
     },
     data() {
         return {
@@ -196,10 +196,10 @@ export default {
                 input: this.onInputInput,
                 change: this.onInputChange,
                 focus: this.onInputFocus,
-                blur: this.onInputBlur,
+                blur: this.onInputBlur
             },
             inputValue: '',
-            inputValueRaw: '',
+            inputValueRaw: ''
         };
     },
     computed: {
@@ -214,7 +214,7 @@ export default {
             return {
                 placeholder,
                 readonly: readonly || !editable
-            }
+            };
         }
     },
     watch: {
@@ -235,7 +235,7 @@ export default {
                     this.date = isDateValid(d) ? d : null;
                 }
             },
-            immediate: true,
+            immediate: true
         },
         isRange(val) {
             /**
@@ -320,7 +320,7 @@ export default {
              * @property {String|Array} value
              */
             this.$emit('change', model);
-        },
-    },
+        }
+    }
 };
 </script>

package/src/components/ui/Select.vue

@@ -42,7 +42,7 @@
                     @slot Placeholder slot
                     -->
                     <slot name="placeholder">
-                        <input class="w-100" :placeholder="placeholder" />
+                        <input class="ui-select-placeholder-input input w-100" :placeholder="placeholder" />
                     </slot>
                 </div>
             </template>
@@ -70,7 +70,7 @@
                     @slot Placeholder slot
                     -->
                     <slot name="placeholder">
-                        <input class="w-100" :placeholder="placeholder" />
+                        <input class="ui-select-placeholder-input input w-100" :placeholder="placeholder" />
                     </slot>
                 </div>
             </template>
@@ -79,17 +79,20 @@
         @slot Open state icon slot
         -->
         <slot name="icon-open" v-if="popoverShow">
-            <div class="icon w-auto h-auto mar-left-2 events-none">
-                <i class="mdi mdi-chevron-up"></i>
-            </div>
+            <i class="icon mdi mdi-chevron-up" :class="{
+                'mdi-18px': size === '',
+                'h-auto w-auto': size === 'small'
+               }">
+            </i>
         </slot>
         <!--
         @slot Close state icon slot
         -->
         <slot name="icon-close" v-else>
-            <div class="icon w-auto h-auto mar-left-2 events-none">
-                <i class="mdi mdi-chevron-down"></i>
-            </div>
+            <i class="icon mdi mdi-chevron-down" :class="{
+                'mdi-18px': size === '',
+                'h-auto w-auto': size === 'small'
+            }"></i>
         </slot>
 
         <ui-popover :show.sync="popoverShow" v-bind="popoverOptions">
@@ -259,12 +262,14 @@
     }
 
     &-placeholder {
-        input {
+        &-input {
+            font-size: inherit;
+            min-height: initial;
             border: none;
-            margin: 0;
             padding: 0;
-            color: inherit;
             background: transparent;
+            outline: none;
+            color: inherit;
         }
     }
 }