@kizmann/nano-ui 0.8.15 → 0.8.16

package/src/datetimepicker/src/datetimepicker/datetimepicker.js

@@ -0,0 +1,400 @@
+import { Obj, Now, Any, Locale } from "@kizmann/pico-js";
+
+export default {
+
+    name: 'NDatetimepicker',
+
+    props: {
+
+        modelValue: {
+            default()
+            {
+                return null;
+            }
+        },
+
+        clearValue: {
+            default()
+            {
+                return null;
+            }
+        },
+
+        minDate: {
+            default()
+            {
+                return null;
+            }
+        },
+
+        maxDate: {
+            default()
+            {
+                return null;
+            }
+        },
+
+        size: {
+            default()
+            {
+                return 'md';
+            },
+            type: [String]
+        },
+
+        type: {
+            default()
+            {
+                return 'primary';
+            },
+            type: [String]
+        },
+
+        placeholder: {
+            default()
+            {
+                return Locale.trans('Select datetime');
+            },
+            type: [String]
+        },
+
+        monthPanels: {
+            default()
+            {
+                return 1;
+            },
+            type: [Number]
+        },
+
+        boundary: {
+            default()
+            {
+                return null;
+            }
+        },
+
+        position: {
+            default()
+            {
+                return 'bottom-start';
+            },
+            type: [String]
+        },
+
+        disabled: {
+            default()
+            {
+                return false;
+            },
+            type: [Boolean]
+        },
+
+        clearable: {
+            default()
+            {
+                return false;
+            },
+            type: [Boolean]
+        },
+
+        format: {
+            default()
+            {
+                return Locale.trans('YYYY-MM-DD HH:mm:ss');
+            },
+            type: [String]
+        },
+
+        displayFormat: {
+            default()
+            {
+                return Locale.trans('YYYY-MM-DD HH:mm:ss');
+            },
+            type: [String]
+        },
+
+        weekdays: {
+            default()
+            {
+                return [
+                    Locale.trans('Mo'),
+                    Locale.trans('Tu'),
+                    Locale.trans('We'),
+                    Locale.trans('Th'),
+                    Locale.trans('Fr'),
+                    Locale.trans('Sa'),
+                    Locale.trans('Su'),
+                ];
+            },
+            type: [Array]
+        },
+
+        months: {
+            default()
+            {
+                return [
+                    Locale.trans('Jan'),
+                    Locale.trans('Feb'),
+                    Locale.trans('Mar'),
+                    Locale.trans('Apr'),
+                    Locale.trans('May'),
+                    Locale.trans('Jun'),
+                    Locale.trans('Jul'),
+                    Locale.trans('Aug'),
+                    Locale.trans('Sep'),
+                    Locale.trans('Oct'),
+                    Locale.trans('Nov'),
+                    Locale.trans('Dec'),
+                ];
+            },
+            type: [Array]
+        }
+
+    },
+
+
+    watch: {
+
+        modelValue(value)
+        {
+            if ( value !== this.tempValue.format(this.format) ) {
+                this.tempValue = Now.make(value);
+            }
+        },
+
+    },
+
+    data()
+    {
+        return {
+            focus: false, tempValue: Now.make(this.modelValue, this.format),
+        };
+    },
+
+    methods: {
+
+        clearDatetimepicker()
+        {
+            this.tempValue = Now.make(this.clearValue, 
+                this.format);
+
+            this.$emit('update:modelValue', this.clearValue);
+        },
+
+        onPopoverInput(value)
+        {
+            this.focus = value;
+        },
+
+        onValueInput(event)
+        {
+            let isNotSameLength = this.displayFormat.length !==
+                event.target.value.length;
+
+            if ( isNotSameLength ) {
+                return;
+            }
+
+            let value = Now.make(event.target.value, 
+                this.displayFormat);
+
+            if ( ! value.moment.isValid() ) {
+                return;
+            }
+
+            let moment = this.tempValue.moment.set({
+                year: value.moment.year(),
+                month: value.moment.month(),
+                date: value.moment.date(),
+                hour: value.moment.hour(),
+                minute: value.moment.minute(),
+                second: value.moment.second(),
+            });
+
+            this.tempValue = Now.make(moment);
+
+            this.$emit('update:modelValue', 
+                this.tempValue.format(this.format));
+        },
+
+        onDatepickerInput(value)
+        {
+            this.tempValue = Now.make(value, 
+                this.format);
+
+            this.$emit('update:modelValue', value);
+        },
+
+        onTimepickerInput(value)
+        {
+            this.tempValue = Now.make(value,
+                this.format);
+
+            this.$emit('update:modelValue', value);
+        },
+
+    },
+
+
+    renderLabelClear()
+    {
+        let isEmpty = ! this.tempValue.initialDate;
+
+        if ( ! this.clearable || isEmpty ) {
+            return null;
+        }
+
+        let props = {};
+
+        if ( ! this.disabled ) {
+            props.onMousedown = this.clearDatetimepicker;
+        }
+
+        return (
+            <div class="n-datetimepicker__clear" {...props}>
+                <i class={ nano.Icons.times }></i>
+            </div>
+        );
+    },
+
+    renderLabelAngle()
+    {
+        return (
+            <div class="n-datetimepicker__angle">
+                <i class={ nano.Icons.angleDown }></i>
+            </div>
+        );
+    },
+
+    renderSingle()
+    {
+        let props = {
+            value: '',
+            disabled: this.disabled,
+            placeholder: this.placeholder,
+            onInput: this.onValueInput,
+        };
+
+        if ( this.tempValue.valid() ) {
+            props.value = this.tempValue.format(
+                this.displayFormat, true);
+        }
+
+        return (
+            <div class="n-datetimepicker__input">
+                <input {...props}/>
+            </div>
+        );
+    },
+
+    renderDisplay()
+    {
+        let classList = [
+            'n-datetimepicker__display'
+        ];
+
+        if ( this.range ) {
+            classList.push('n-range');
+        }
+
+        return (
+            <div class={classList}>
+                { this.ctor('renderLabelClear')() }
+                { this.ctor('renderSingle')() }
+                { this.ctor('renderLabelAngle')() }
+            </div>
+        );
+    },
+
+    renderPanels()
+    {
+        return (
+            <div class="n-datetimepicker__body">
+                {[this.ctor('renderDatePanel')(), this.ctor('renderTimePanel')()]}
+            </div>
+        );
+    },
+
+    renderDatePanel()
+    {
+        
+        let props = Obj.except(this.$props, ['modelValue'], {
+            modelValue: this.tempValue.format(this.format) || null,
+        });
+
+        props['onUpdate:modelValue'] = this.onDatepickerInput;
+
+        return (
+            <NDatepickerPanel class="n-datetimepicker__date-panel" {...props}></NDatepickerPanel>
+        );
+    },
+
+    renderTimePanel()
+    {
+
+        let props = Obj.except(this.$props, ['modelValue'], {
+            modelValue: this.tempValue.format(this.format) || null,
+        });
+
+        props['onUpdate:modelValue'] = this.onTimepickerInput;
+
+        return (
+            <NTimepickerPanel class="n-datetimepicker__time-panel" {...props}></NTimepickerPanel>
+        );
+    },
+
+    renderPopover()
+    {
+        let props = {
+            trigger: 'click',
+            width: 0,
+            size: this.size,
+            position: this.position,
+            scrollClose: true,
+            disabled: this.disabled
+        };
+
+        let slots = {
+            raw: this.ctor('renderPanels')
+        };
+
+        return (
+            <NPopover ref="popover" vModel={this.focus} {...props} v-slots={slots} />
+        );
+    },
+
+    render()
+    {
+        let classList = [
+            'n-datetimepicker',
+            'n-datetimepicker--' + this.type,
+            'n-datetimepicker--' + this.size,
+        ];
+
+        let isEmpty = ! this.tempValue.initialDate;
+
+        if ( isEmpty ) {
+            classList.push('n-empty');
+        }
+
+        if ( this.clearable ) {
+            classList.push('n-clearable');
+        }
+
+        if ( this.focus ) {
+            classList.push('n-focus');
+        }
+
+        if ( this.disabled ) {
+            classList.push('n-disabled');
+        }
+
+        return (
+            <div class={classList}>
+                { this.ctor('renderDisplay')() }
+                { this.ctor('renderPopover')() }
+            </div>
+        );
+    }
+
+}

package/src/datetimepicker/src/datetimepicker/datetimepicker.scss

@@ -0,0 +1,188 @@
+@import "../../../root/vars";
+
+.n-datetimepicker {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: stretch;
+    width: 100%;
+    border: 1px solid transparent;
+}
+
+.n-datetimepicker.n-disabled {
+    cursor: not-allowed;
+    opacity: 0.7;
+}
+
+.n-datetimepicker__display {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: stretch;
+    width: 100%;
+}
+
+.n-datetimepicker__seperator {
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.n-datetimepicker__input {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: stretch;
+    width: 50%;
+}
+
+.n-datetimepicker__input input {
+    cursor: default;
+    appearance: none;
+    display: block;
+    width: 100%;
+    white-space: nowrap;
+    text-decoration: none;
+    line-height: 1.2;
+    border: none;
+    background: transparent;
+    box-shadow: none;
+}
+
+.n-disabled .n-datetimepicker__input input {
+    cursor: not-allowed;
+}
+
+.n-datetimepicker__clear,
+.n-datetimepicker__angle {
+    order: 100;
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.n-datetimepicker__clear {
+    display: none;
+}
+
+.n-datetimepicker:hover.n-clearable:not(.n-empty) .n-datetimepicker__clear,
+.n-datetimepicker.n-focus.n-clearable:not(.n-empty) .n-datetimepicker__clear {
+    display: flex;
+}
+
+.n-datetimepicker:hover.n-clearable:not(.n-empty) .n-datetimepicker__angle,
+.n-datetimepicker.n-focus.n-clearable:not(.n-empty) .n-datetimepicker__angle {
+    display: none;
+}
+
+.n-datetimepicker__angle {
+    transition: transform 0.25s;
+}
+
+.n-datetimepicker.n-focus .n-datetimepicker__angle {
+    transform: scaleY(-1);
+}
+
+.n-datetimepicker__clear i,
+.n-datetimepicker__angle i {
+    text-align: center;
+}
+
+.n-datetimepicker__clear i {
+    border-radius: 500px;
+}
+
+.n-datetimepicker__placeholder {
+    flex: 1 1 auto;
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+}
+
+.n-datetimepicker__body,
+.n-datetimepicker__empty {
+     overflow: hidden;
+     margin: 1px 0;
+     border: 0;
+}
+
+.n-datetimepicker__body {
+    display: flex;
+    flex-direction: row;
+    justify-content: stretch;
+    align-items: stretch;
+}
+
+.n-datetimepicker__date-panel.n-datepicker-panel {
+    border: none;
+}
+
+.n-datetimepicker__time-panel.n-timepicker-panel {
+    border: none;
+    border-left: 1px solid $color-gray-10;
+    background: rgba($color-gray-05, 0.5);
+}
+
+.n-datetimepicker__empty {
+     text-align: center;
+}
+
+@each $suffix, $values in $form {
+
+    $-datepicker-font: map-get($values, 'font');
+    $-datepicker-size: map-get($values, 'size');
+    $-datepicker-radius: map-get($values, 'radius');
+    $-datepicker-ratio: map-get($values, 'ratio');
+
+    .n-datetimepicker--#{$suffix} {
+        min-height: $-datepicker-size;
+        font-size: $-datepicker-font;
+        border-radius: $-datepicker-radius;
+    }
+
+    $-datepicker-padding: $-datepicker-size * $-datepicker-ratio * 0.5;
+
+    .n-datetimepicker--#{$suffix} .n-datetimepicker__display,
+    .n-datetimepicker--#{$suffix} .n-datetimepicker__seperator,
+    .n-datetimepicker--#{$suffix} .n-datetimepicker__input input {
+        padding: 0 $-datepicker-padding;
+    }
+
+    .n-datetimepicker--#{$suffix} .n-datetimepicker__clear,
+    .n-datetimepicker--#{$suffix} .n-datetimepicker__angle {
+        width: $-datepicker-size;
+        margin: 0 -#{$-datepicker-padding} 0 -#{$-datepicker-padding};
+    }
+    .n-datetimepicker--#{$suffix} .n-datetimepicker__clear i,
+    .n-datetimepicker--#{$suffix} .n-datetimepicker__angle i {
+        width: $-datepicker-size - 14;
+        height: $-datepicker-size - 14;
+        line-height: $-datepicker-size - 14;
+    }
+
+    .n-datetimepicker--#{$suffix} .n-datetimepicker__angle i {
+        font-size: $-datepicker-font - 2;
+    }
+
+    .n-datetimepicker--#{$suffix} .n-datetimepicker__clear i {
+        font-size: $-datepicker-font - 4;
+    }
+
+    .n-popover--#{$suffix} .n-datetimepicker__body,
+    .n-popover--#{$suffix} .n-datetimepicker__empty {
+        border-radius: $-datepicker-radius;
+    }
+
+    .n-popover--#{$suffix} .n-datetimepicker__empty {
+        padding: $-datepicker-padding;
+    }
+
+}

package/src/index.js

@@ -79,7 +79,7 @@ export function Install(App, Icons = {}, Styles = {})
     require('./cascader/index').default(App);
     require('./datepicker/index').default(App);
     require('./timepicker/index').default(App);
-    // require('./datetimepicker/index'); 18.1
+    require('./datetimepicker/index').default(App);
     require('./transfer/index').default(App);
     require('./form/index').default(App); // check
     require('./tabs/index').default(App);
@@ -93,9 +93,6 @@ export function Install(App, Icons = {}, Styles = {})
     require('./file/index').default(App);
     require('./rating/index').default(App);
 
-    // SX only ez 17.1
-    // require('./file-list/index'); // SX only 17.1
-
     // require('./chart/index'); // Ignore
     // require('./wysiwyg/index'); // Ignore
 }

package/src/index.scss

@@ -19,6 +19,7 @@
 @import "./cascader/index";
 @import "./datepicker/index";
 @import "./timepicker/index";
+@import "./datetimepicker/index";
 @import "./transfer/index";
 @import "./file/index";
 @import "./popover/index";

package/src/timepicker/src/timepicker-panel/timepicker-panel.js

@@ -143,7 +143,7 @@ export default {
     {
         return (
             <div class="n-timepicker-panel__toolbar">
-                <div class="n-timepicker-panel-display">
+                <div class="n-timepicker-panel__display">
                     <span class="n-timepicker-panel__time">
                         { this.tempValue.format(this.displayFormat) || this.placeholder }
                     </span>

package/src/timepicker/src/timepicker-panel/timepicker-panel.scss

@@ -10,13 +10,19 @@
 }
 
 .n-timepicker-panel__body {
+    flex: 1 0 auto;
     display: flex;
     flex-direction: row;
     align-items: stretch;
     justify-content: stretch;
 }
 
-.n-timepicker-panel-display,
+.n-timepicker-panel__panel {
+flex: 1 0 auto;
+    min-height: 0;
+}
+
+.n-timepicker-panel__display,
 .n-timepicker-panel__item {
     display: flex;
     flex-direction: row;
@@ -42,7 +48,11 @@
 
     .n-timepicker-panel--#{$suffix} .n-timepicker-panel__panel {
         width: $-timepicker-panel-size * 2;
-        height: $-timepicker-panel-size * 5;
+        min-height: $-timepicker-panel-size * 5;
+    }
+
+    .n-timepicker-panel--#{$suffix} .n-timepicker-panel__display {
+        height: $-timepicker-panel-size - 4;
     }
 
     $-timepicker-panel-padding: $-timepicker-panel-size * $-timepicker-panel-ratio;

package/themes/light/datetimepicker/index.scss

@@ -0,0 +1 @@
+@import "./src/datetimepicker/datetimepicker";

package/themes/light/datetimepicker/src/datetimepicker/datetimepicker.scss

@@ -0,0 +1,49 @@
+@import "../../../root/vars";
+
+.n-datetimepicker {
+    border: 1px solid $color-gray-15;
+}
+
+.n-datetimepicker.n-disabled {
+    background: rgba($color-gray-15, 0.3);
+}
+
+.n-datetimepicker__seperator {
+    color: $color-gray-60;
+}
+
+.n-datetimepicker__clear,
+.n-datetimepicker__angle {
+    color: $color-gray-60;
+}
+
+.n-datetimepicker__clear i {
+    background: rgba($color-gray-15, 0.6);
+}
+
+.n-datetimepicker__placeholder {
+    color: rgba($color-black, 0.5);
+}
+
+.n-datetimepicker__body,
+.n-datetimepicker__empty {
+     background: $color-white;
+     box-shadow: 0 1px 3px 1px rgba($color-shadow, 0.15);
+}
+
+.n-datetimepicker__empty {
+     color: $color-gray-60;
+}
+
+@each $color, $values in $colors {
+
+    $-color-base: map_get($values, 'base');
+    $-color-light: map_get($values, 'light');
+    $-color-dark: map_get($values, 'dark');
+
+     .n-datetimepicker--#{$color}:not(.n-disabled):hover,
+     .n-datetimepicker--#{$color}:not(.n-disabled).n-focus {
+        border-color: $-color-base;
+    }
+
+}

package/themes/light/index.scss

@@ -19,6 +19,7 @@
 @import "./cascader/index";
 @import "./datepicker/index";
 @import "./timepicker/index";
+@import "./datetimepicker/index";
 @import "./transfer/index";
 @import "./popover/index";
 @import "./modal/index";