@kizmann/nano-ui 2.0.2 → 3.0.0

package/src/timepicker/src/timepicker/timepicker.jsx

@@ -1,335 +0,0 @@
-import { Arr, Obj, Now, Mix, Locale } from "@kizmann/pico-js";
-
-export default {
-
-    name: 'NTimepicker',
-
-    props: {
-
-        modelValue: {
-            default()
-            {
-                return null;
-            }
-        },
-
-        clearValue: {
-            default()
-            {
-                return null;
-            }
-        },
-
-        placeholder: {
-            default()
-            {
-                return 'Select time';
-            },
-            type: [String]
-        },
-
-        size: {
-            default()
-            {
-                return 'md';
-            },
-            type: [String]
-        },
-
-        type: {
-            default()
-            {
-                return 'primary';
-            },
-            type: [String]
-        },
-
-        position: {
-            default()
-            {
-                return 'bottom-start';
-            },
-            type: [String]
-        },
-
-        disabled: {
-            default()
-            {
-                return false;
-            },
-            type: [Boolean]
-        },
-
-        clearable: {
-            default()
-            {
-                return false;
-            },
-            type: [Boolean]
-        },
-
-        format: {
-            default()
-            {
-                return 'YYYY-MM-DD HH:mm:ss';
-            },
-            type: [String]
-        },
-
-        displayFormat: {
-            default()
-            {
-                return Locale.trans('HH:mm:ss');
-            },
-            type: [String]
-        },
-
-        hoursInterval: {
-            default()
-            {
-                return 1;
-            },
-            type: [Number]
-        },
-
-        minutesInterval: {
-            default()
-            {
-                return 1;
-            },
-            type: [Number]
-        },
-
-        secondsInterval: {
-            default()
-            {
-                return 1;
-            },
-            type: [Number]
-        }
-
-    },
-
-    computed: {
-
-        hoursGrid()
-        {
-            return this.tempValue.getHoursGrid(this.hoursInterval);
-        },
-
-        minutesGrid()
-        {
-            return this.tempValue.getMinutesGrid(this.minutesInterval);
-        },
-
-        secondsGrid()
-        {
-            return this.tempValue.getSecondsGrid(this.secondsInterval);
-        }
-
-    },
-
-    watch: {
-
-        modelValue(value)
-        {
-            if ( value !== this.tempValue.format(this.format) ) {
-                this.tempValue = Now.make(value);
-            }
-        }
-
-    },
-
-    data()
-    {
-        return {
-            focus: false,
-            tempValue: Now.make(this.modelValue),
-        }
-    },
-
-    methods: {
-
-        clearTimepicker()
-        {
-            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({
-                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));
-        },
-
-        onTimepickerInput(value)
-        {
-            this.tempValue = Now.make(value, 
-                this.format);
-
-            this.$emit('update:modelValue', value);
-        },
-
-    },
-
-    renderLabelClear()
-    {
-        if ( ! this.clearable || ! this.tempValue.valid() ) {
-            return null;
-        }
-
-        let props = {};
-
-        if ( ! this.disabled ) {
-            props.onMousedown = this.clearTimepicker;
-        }
-
-        return (
-            <div class="n-timepicker__clear n-form-clear" {...props}>
-                <i class={ nano.Icons.times }></i>
-            </div>
-        );
-    },
-
-    renderLabelAngle()
-    {
-        return (
-            <div class="n-timepicker__angle n-form-angle">
-                <i class={ nano.Icons.angleDown }></i>
-            </div>
-        );
-    },
-
-    renderSingle()
-    {
-        let props = {
-            value: '',
-            disabled: this.disabled,
-            placeholder: this.trans(this.placeholder),
-            onInput: this.onValueInput,
-        };
-
-        if ( this.tempValue.valid() ) {
-            props.value = this.tempValue.format(
-                this.displayFormat, true);
-        }
-
-        return (
-            <div class="n-timepicker__input">
-                <input {...props}/>
-            </div>
-        );
-    },
-
-    renderDisplay()
-    {
-        let classList = [
-            'n-timepicker__display'
-        ];
-
-        return (
-            <div class={classList}>
-                { this.ctor('renderLabelClear')() }
-                { this.ctor('renderSingle')() }
-                { this.ctor('renderLabelAngle')() }
-            </div>
-        );
-    },
-
-    renderPanel()
-    {
-        let classList = [
-            'n-popover-shadow',
-        ];
-        
-        let props = Obj.except(this.$props, ['modelValue'], {
-            modelValue: this.tempValue.format(this.format) || null,
-        });
-
-        props['onUpdate:modelValue'] = this.onTimepickerInput;
-
-        return (
-            <NTimepickerPanel class={classList} {...props}></NTimepickerPanel>
-        );
-    },
-
-    renderPopover()
-    {
-        let props = {
-            trigger: 'click',
-            width: 0,
-            size: this.size,
-            position: this.position,
-            scrollClose: true,
-            disabled: this.disabled
-        };
-
-        return (
-            <NPopover ref="popover" vModel={this.focus} {...props}>
-                { { raw: this.ctor('renderPanel') } }
-            </NPopover>
-        );
-    },
-
-    render()
-    {
-        let classList = [
-            'n-timepicker',
-            'n-timepicker--' + this.type,
-            'n-timepicker--' + this.size,
-        ];
-
-        if ( ! this.tempValue.valid() ) {
-            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/timepicker/src/timepicker-panel/timepicker-panel.jsx

@@ -1,317 +0,0 @@
-import { Arr, Obj, Now, Mix } from "@kizmann/pico-js";
-
-export default {
-
-    name: 'NTimepickerPanel',
-
-    props: {
-
-        modelValue: {
-            default()
-            {
-                return null;
-            }
-        },
-
-        clearValue: {
-            default()
-            {
-                return null;
-            }
-        },
-
-        placeholder: {
-            default()
-            {
-                return 'Select time';
-            },
-            type: [String]
-        },
-
-        size: {
-            default()
-            {
-                return 'md';
-            }
-        },
-
-        type: {
-            default()
-            {
-                return 'primary';
-            }
-        },
-
-        disabled: {
-            default()
-            {
-                return false;
-            },
-            type: [Boolean]
-        },
-
-        format: {
-            default()
-            {
-                return 'YYYY-MM-DD HH:mm:ss';
-            },
-            type: [String]
-        },
-
-        displayFormat: {
-            default()
-            {
-                return 'HH:mm:ss';
-            },
-            type: [String]
-        },
-
-        hoursInterval: {
-            default()
-            {
-                return 1;
-            },
-            type: [Number]
-        },
-
-        minutesInterval: {
-            default()
-            {
-                return 1;
-            },
-            type: [Number]
-        },
-
-        secondsInterval: {
-            default()
-            {
-                return 1;
-            },
-            type: [Number]
-        }
-
-    },
-
-    computed: {
-
-        hoursGrid()
-        {
-            return this.tempValue.getHoursGrid(this.hoursInterval);
-        },
-
-        minutesGrid()
-        {
-            return this.tempValue.getMinutesGrid(this.minutesInterval);
-        },
-
-        secondsGrid()
-        {
-            return this.tempValue.getSecondsGrid(this.secondsInterval);
-        }
-
-    },
-
-    watch: {
-
-        modelValue(value)
-        {
-            if ( value !== this.tempValue.format(this.format) ) {
-                this.tempValue = Now.make(value);
-            }
-        }
-
-    },
-
-    data()
-    {
-        let modelValue = Now.make(this.modelValue);
-
-        if ( Mix.isEmpty(this.modelValue) ) {
-            modelValue = modelValue.reset({ time: true });
-        }
-
-        return {
-            tempValue: modelValue,
-        }
-    },
-
-    mounted()
-    {
-        this.scrollTo();
-    },
-
-    methods: {
-
-        eventSelect(now)
-        {
-            this.$emit('update:modelValue',
-                (this.tempValue = now.clone()).format(this.format));
-        },
-
-        scrollTo()
-        {
-            let scrollbars = Obj.only(this.$refs, [
-                'hour', 'minute', 'second'
-            ]);
-
-            Arr.each(scrollbars, (ref, key) => {
-                ref.scrollIntoView(`[data-index="${this.tempValue[key]()}"]`);
-            });
-        }
-
-    },
-
-    renderToolbar()
-    {
-        return (
-            <div class="n-timepicker-panel__toolbar">
-                <div class="n-timepicker-panel__display">
-                    <span class="n-timepicker-panel__time">
-                        {this.tempValue.format(this.displayFormat) || this.placeholder}
-                    </span>
-                </div>
-            </div>
-        )
-    },
-
-    renderHourItem(now)
-    {
-        let classList = [
-            'n-timepicker-panel__item'
-        ];
-
-        if ( this.tempValue.valid() && now.hour() === this.tempValue.hour() ) {
-            classList.push('n-selected');
-        }
-
-        let props = {
-            onMousedown: () => this.eventSelect(now)
-        };
-
-        return (
-            <div class={classList} {...props} data-index={now.hour()}>
-                <span>{now.format('HH')}</span>
-            </div>
-        );
-    },
-
-    renderHourPanel()
-    {
-        if ( !this.displayFormat.match('HH') ) {
-            return null;
-        }
-
-        let scrollbarProps = {
-            offsetY: 0, wrapClass: 'n-timepicker-panel__wrap'
-        };
-
-        return (
-            <NScrollbar ref="hour" class="n-timepicker-panel__panel" {...scrollbarProps}>
-                {Arr.each(this.hoursGrid, this.ctor('renderHourItem'))}
-            </NScrollbar>
-        );
-    },
-
-    renderMinuteItem(now)
-    {
-        let classList = [
-            'n-timepicker-panel__item'
-        ];
-
-        if ( this.tempValue.valid() && now.minute() === this.tempValue.minute() ) {
-            classList.push('n-selected');
-        }
-
-        let props = {
-            onMousedown: () => this.eventSelect(now)
-        };
-
-        return (
-            <div class={classList} {...props} data-index={now.minute()}>
-                <span>{now.format('mm')}</span>
-            </div>
-        );
-    },
-
-    renderMinutePanel()
-    {
-        if ( !this.displayFormat.match('mm') ) {
-            return null;
-        }
-
-        let scrollbarProps = {
-            offsetY: 0, wrapClass: 'n-timepicker-panel__wrap'
-        };
-
-        return (
-            <NScrollbar ref="minute" class="n-timepicker-panel__panel" {...scrollbarProps}>
-                {Arr.each(this.minutesGrid, this.ctor('renderMinuteItem'))}
-            </NScrollbar>
-        );
-    },
-
-    renderSecondItem(now)
-    {
-        let classList = [
-            'n-timepicker-panel__item'
-        ];
-
-        if ( this.tempValue.valid() && now.second() === this.tempValue.second() ) {
-            classList.push('n-selected');
-        }
-
-        let props = {
-            onMousedown: () => this.eventSelect(now)
-        };
-
-        return (
-            <div class={classList} {...props} data-index={now.second()}>
-                <span>{now.format('ss')}</span>
-            </div>
-        );
-    },
-
-    renderSecondPanel()
-    {
-        if ( !this.displayFormat.match('ss') ) {
-            return null;
-        }
-
-        let scrollbarProps = {
-            offsetY: 0, wrapClass: 'n-timepicker-panel__wrap'
-        };
-
-        return (
-            <NScrollbar ref="second" class="n-timepicker-panel__panel" {...scrollbarProps}>
-                {Arr.each(this.secondsGrid, this.ctor('renderSecondItem'))}
-            </NScrollbar>
-        );
-    },
-
-    render()
-    {
-        let classList = [
-            'n-timepicker-panel',
-            'n-timepicker-panel--' + this.size,
-            'n-timepicker-panel--' + this.type,
-        ];
-
-        if ( this.disabled ) {
-            classList.push('n-disabled');
-        }
-
-        return (
-            <div class={classList}>
-                <div class="n-timepicker-panel__header">
-                    {this.ctor('renderToolbar')()}
-                </div>
-                <div class="n-timepicker-panel__body">
-                    {this.ctor('renderHourPanel')()}
-                    {this.ctor('renderMinutePanel')()}
-                    {this.ctor('renderSecondPanel')()}
-                </div>
-            </div>
-        );
-    }
-
-}

package/src/tooltip/index.scss

@@ -1 +0,0 @@
-@forward "./src/tooltip/tooltip";

package/src/transfer/index.js

@@ -1,5 +0,0 @@
-import Transfer from "./src/transfer/transfer.jsx";
-
-export default function (App) {
-    App.component(Transfer.name, Transfer);
-}