@kizmann/nano-ui 2.0.2 → 3.0.0

package/src/datetime/js/datepicker/NDatepickerView.ts

@@ -0,0 +1,176 @@
+import { h } from "vue";
+import { Arr, Dom, Locale, Mix, Obj } from "@kizmann/pico-js";
+import { NDatepickerController } from "./NDatepickerController.ts";
+import { NPopoverPanelView } from "../../../popover/js/popover-panel/NPopoverPanelView.ts";
+import { NDatepickerPanelProps } from "../datepicker-panel/NDatepickerPanel.ts";
+
+export class NDatepickerView extends NPopoverPanelView
+{
+    /**
+     * @type {NDatepickerController}
+     */
+    declare scope : NDatepickerController;
+
+    /**
+     * @type {string}
+     */
+    bem : string = 'n-datepicker';
+
+    display() : any
+    {
+        return this.div('display', [
+            this.handle(),
+            this.input(),
+            this.range(),
+            this.clear(),
+            this.angle(),
+        ]);
+    }
+
+    input() : any
+    {
+        const { scope, data } = this.scope;
+
+        if ( data.range ) {
+            return null;
+        }
+
+        let props : any = {
+            ref: scope.ref('input'),
+            value: data.input,
+            placeholder: data.placeholder,
+        };
+
+        props.onInput = (e : any) => {
+            scope.set('input', e.target.value);
+        };
+
+        props.onFocus = () => {
+            scope.onFocus();
+        };
+
+        props.onKeydown = (e : any) => {
+            if ( e.which === 9 ) scope.onBlur();
+            if ( e.which === 13 ) scope.onInput();
+        };
+
+        return this.div('input', [
+            h('input', props)
+        ]);
+    }
+
+    range()
+    {
+        return [
+            this.arrive(), this.seperator(), this.depart()
+        ];
+    }
+
+    seperator()
+    {
+        const { data } = this.scope;
+
+        if ( ! data.range ) {
+            return null;
+        }
+
+        return this.div('seperator', [
+            data.rangeSeperator
+        ]);
+    }
+
+    arrive() : any
+    {
+        const { scope, data } = this.scope;
+
+        if ( ! data.range ) {
+            return null;
+        }
+
+        let props : any = {
+            ref: scope.ref('arrive'),
+            value: data.inputs[0],
+            placeholder: data.placeholderArrive,
+        };
+
+        props.onInput = (e : any) => {
+            scope.vals['inputs'].value[0] = e.target.value;
+        };
+
+        props.onFocus = () => {
+            scope.onFocus();
+        };
+
+        props.onKeydown = (e : any) => {
+            // if ( e.which === 9 ) scope.onBlur();
+            if ( e.which === 13 ) scope.onArrive();
+        };
+
+        return this.div('input', [
+            h('input', props)
+        ]);
+    }
+
+    depart() : any
+    {
+        const { scope, data } = this.scope;
+
+        if ( ! data.range ) {
+            return null;
+        }
+
+        let props : any = {
+            ref: scope.ref('depart'),
+            value: data.inputs[1],
+            placeholder: data.placeholderDepart,
+        };
+
+        props.onInput = (e : any) => {
+            scope.vals['inputs'].value[1] = e.target.value;
+        };
+
+        props.onFocus = () => {
+            scope.onFocus();
+        };
+
+        props.onKeydown = (e : any) => {
+            if ( e.which === 9 ) scope.onBlur();
+            if ( e.which === 13 ) scope.onDepart();
+        };
+
+        return this.div('input', [
+            h('input', props)
+        ]);
+    }
+
+    panel() : any
+    {
+        const { scope, data } = this.scope;
+
+        let props = {
+            ref: scope.ref('panel'),
+            class: ['n-popover-shadow']
+        };
+
+        props = scope.passProps(props, [
+            ...Mix.keys(NDatepickerPanelProps)
+        ]);
+
+        props['onUpdate:modelValue'] = (value : any) => {
+            scope.update('modelValue', value);
+        };
+
+        props['onUpdate:arrive'] = (value : any) => {
+            scope.update('arrive', value);
+        };
+
+        props['onUpdate:depart'] = (value : any) => {
+            scope.update('depart', value);
+        };
+
+        return this.comp('n-datepicker-panel', props);
+    }
+
+}
+
+export default NDatepickerView;

package/src/datetime/js/datepicker-panel/NDatepickerPanel.ts

@@ -0,0 +1,116 @@
+import { PropType, defineComponent } from "vue";
+import { Props } from "../../../root/index.ts";
+import { NDatepickerPanelController } from "./NDatepickerPanelController.ts";
+
+export const NDatepickerPanelProps = {
+
+    ...Props.Load,
+    ...Props.Size,
+    ...Props.Type,
+    ...Props.Disabled,
+
+    /**
+     * @type {PropType<array|string>}
+     */
+    modelValue: {
+        type: [Array, String], default: null
+    },
+
+    /**
+     * @type {PropType<string>}
+     */
+    arrive: {
+        type: [String], default: null
+    },
+
+    /**
+     * @type {PropType<any>}
+     */
+    clearArrive: {
+        default: null
+    },
+
+    /**
+     * @type {PropType<string>}
+     */
+    depart: {
+        type: [String], default: null
+    },
+
+    /**
+     * @type {PropType<any>}
+     */
+    clearDepart: {
+        default: null
+    },
+
+    /**
+     * @type {PropType<boolean>}
+     */
+    range: {
+        type: [Boolean], default: false
+    },
+
+    /**
+     * @type {PropType<number>}
+     */
+    panels: {
+        type: [Number], default: 1
+    },
+
+    /**
+     * @type {PropType<string>}
+     */
+    format: {
+        type: [String], default: 'YYYY-MM-DD HH:mm:ss'
+    },
+
+    /**
+     * @type {PropType<any>}
+     */
+    minDate: {
+        default: null
+    },
+
+    /**
+     * @type {PropType<any>}
+     */
+    maxDate: {
+        default: null
+    },
+
+};
+
+export default defineComponent({
+
+    /**
+     * @type {string}
+     */
+    name: 'NDatepickerPanel',
+
+    /**
+     * @type {typeof NDatepickerPanelProps}
+     */
+    props: NDatepickerPanelProps,
+
+    /**
+     * @type {string[]}
+     */
+    emits: [
+        'update:modelValue',
+        'update:arrive',
+        'update:depart',
+    ],
+
+    setup(props, context)
+    {
+        let ncx = new NDatepickerPanelController(props, context);
+
+        ncx.dispose(() => {
+            ncx = null;
+        });
+
+        return ncx.render();
+    }
+
+});

package/src/datetime/js/datepicker-panel/NDatepickerPanelController.ts

@@ -0,0 +1,254 @@
+import { SetupContext } from "vue";
+import { Arr, Mix, Now, Obj, Run } from "@kizmann/pico-js";
+import { GroupController } from "../../../root/index.ts";
+import { NDatepickerPanelView } from "./NDatepickerPanelView.ts";
+import { NDatepickerPanelData } from "./NDatepickerPanelData.ts";
+import { NDateHelper } from "../helper/NDateHelper.ts";
+
+
+export class NDatepickerPanelController extends GroupController
+{
+    /**
+     * @type {NDatepickerPanelController}
+     */
+    declare scope : NDatepickerPanelController;
+
+    /**
+     * @type {NDatepickerPanelData}
+     */
+    declare data : NDatepickerPanelData;
+
+    /**
+     * @type {NDatepickerPanelView}
+     */
+    declare view : NDatepickerPanelView;
+
+    constructor(props : any, context : SetupContext)
+    {
+        super(props, context);
+
+        [this.view, this.data] = [
+            new NDatepickerPanelView(this),
+            new NDatepickerPanelData(this),
+        ];
+
+        this.setup();
+    }
+
+    setup()
+    {
+        super.setup();
+
+        this
+            .cloneProp('modelValue')
+            .cloneProp('arrive')
+            .cloneProp('depart');
+
+        this.makeData('view', 'dates');
+        this.makeData('ranges', []);
+        this.makeData('hovers', []);
+
+        this.makeData('dates', ...[
+            NDateHelper.getDates(this)
+        ]);
+
+        this.makeData('displays', ...[
+            NDateHelper.getDisplays(this)
+        ]);
+
+        this.watchProp('modelValue', () => {
+            this.updateDates();
+        });
+
+        this.watchProp('arrive', () => {
+            this.updateDates();
+        });
+
+        this.watchProp('depart', () => {
+            this.updateDates();
+        });
+
+        return this;
+    }
+
+    updateDates()
+    {
+        this.set('dates', ...[
+            NDateHelper.getDates(this)
+        ]);
+
+        // this.set('displays', ...[
+        //     NDateHelper.getDisplays(this)
+        // ]);
+    }
+
+    setDisplayDates(date : Now = null)
+    {
+        const dates = NDateHelper.getDisplays(...[
+            this, date
+        ]);
+
+        this.set('displays', dates);
+    }
+
+    onPrev()
+    {
+        const { data } = this;
+
+        let date = Arr.first(data.displays).clone();
+
+        if ( data.view === 'dates' ) {
+            date.sub(1, 'months');
+        }
+
+        if ( data.view === 'months' ) {
+            date.sub(1, 'years');
+        }
+
+        if ( data.view === 'years' ) {
+            date.sub(10, 'years');
+        }
+
+        this.setDisplayDates(date);
+    }
+
+    onNext()
+    {
+        const { data } = this;
+
+        let date = Arr.first(data.displays).clone();
+
+        if ( data.view === 'dates' ) {
+            date.add(1, 'months');
+        }
+
+        if ( data.view === 'months' ) {
+            date.add(1, 'years');
+        }
+
+        if ( data.view === 'years' ) {
+            date.add(10, 'years');
+        }
+
+        this.setDisplayDates(date);
+    }
+
+    onRevert()
+    {
+        this.setDisplayDates();
+        this.set('view', 'dates');
+    }
+
+    onMousedown(item : Now)
+    {
+        const { data } = this;
+
+        this.update('modelValue', ...[
+            item.format(data.format)
+        ]);
+
+        this.set('dateValue', item);
+    }
+
+    setPanelDate(item : Now)
+    {
+        Run.frame(() => {
+            this.set('view', 'dates');
+        });
+
+        this.setDisplayDates(item);
+    }
+
+    setRangeDate(date : Now)
+    {
+        const { data } = this;
+
+        if ( ! data.range ) {
+            return this.setModelDate(date);
+        }
+
+        let [real, temp] = [
+            Arr.filter(data.ranges), data.ranges
+        ];
+
+        if ( real.length !== 1 ) {
+            temp = [null, null];
+        }
+
+        if ( real.length === 0 ) {
+            temp[0] = date.clone();
+        }
+
+        if ( real.length === 1 ) {
+            temp[1] = date.clone();
+        }
+
+        if ( date.before(temp[0]) ) {
+            temp = temp.reverse();
+        }
+
+        if ( real.length === 1 ) {
+            return this.setModelRange(temp);
+        }
+
+        this.set('hovers', [
+            date.clone(), date.clone()
+        ]);
+
+        this.set('ranges', temp);
+    }
+
+    setHoverDate(date : Now)
+    {
+        const { data } = this;
+
+        if ( ! data.ranges.length ) {
+            return;
+        }
+
+        let hovers = [
+            data.ranges[0], date.clone()
+        ];
+
+        if ( date.before(data.ranges[0]) ) {
+            hovers = hovers.reverse();
+        }
+
+        this.set('hovers', hovers);
+    }
+
+    setModelDate(date : Now)
+    {
+        const { data } = this;
+
+        let dates = [
+            date.clone(), date.clone()
+        ];
+
+        this.update('modelValue', ...[
+            date.format(data.format)
+        ]);
+
+        this.set('dates', dates);
+    }
+
+    setModelRange(dates : Now[])
+    {
+        const { data } = this;
+
+        let values = Arr.each(dates, (date : Now) => {
+            return date.format(data.format);
+        });
+
+        this.set('hovers', []);
+        this.set('ranges', []);
+        this.set('dates', dates);
+
+        this.update('arrive', values[0]);
+        this.update('depart', values[1]);
+        this.update('modelValue', values);
+    }
+
+}
+
+export default NDatepickerPanelController;

package/src/datetime/js/datepicker-panel/NDatepickerPanelData.ts

@@ -0,0 +1,159 @@
+import { ProtoData } from "../../../root/index.ts";
+import NDatepickerPanelController from "./NDatepickerPanelController.ts";
+import { Arr, Now } from "@kizmann/pico-js";
+
+export class NDatepickerPanelData extends ProtoData
+{
+    /**
+     * @type {NDatepickerPanelController}
+     */
+    declare scope : NDatepickerPanelController;
+
+    classDate(date: Now)
+    {
+        const valids = Arr.filter(this.dates, (date:Now) => {
+            return date.input;
+        });
+
+        if ( this.ranges.length ) {
+            return this.classDateHover(date);
+        }
+
+        if ( valids.length ) {
+            return this.classDateNormal(date)
+        }
+
+        return [];
+    }
+
+    classDateNormal(date: Now)
+    {
+        let classList = [];
+
+        if ( date.equalDate(this.dates[0]) ) {
+            classList.push('n-arrive');
+            classList.push('n-selected');
+        }
+
+        if ( date.equalDate(this.dates[1]) ) {
+            classList.push('n-depart');
+            classList.push('n-selected');
+        }
+
+        if ( date.between(...this.dates) ) {
+            classList.push('n-between');
+            classList.push('n-selected');
+        }
+
+        return Arr.unique(classList);
+    }
+
+    classDateHover(date: Now)
+    {
+        let classList = [];
+
+        if ( date.equalDate(this.hovers[0]) ) {
+            classList.push('n-arrive');
+        }
+
+        if ( date.equalDate(this.hovers[1]) ) {
+            classList.push('n-depart');
+        }
+
+        if ( date.between(...this.hovers) ) {
+            classList.push('n-between');
+        }
+
+        return classList;
+    }
+
+    get classList() : string[]
+    {
+        let classList = [];
+
+        return this.classRoot(classList);
+    }
+
+    get model() : string|string[]
+    {
+        return this.scope.get('modelValue');
+    }
+
+    get dates() : Now[]
+    {
+        return this.scope.get('dates');
+    }
+
+    get displays() : Now[]
+    {
+        return this.scope.get('displays');
+    }
+
+    get ranges() : Now[]
+    {
+        return this.scope.get('ranges');
+    }
+
+    get hovers() : Now[]
+    {
+        return this.scope.get('hovers');
+    }
+
+    get view() : string
+    {
+        return this.scope.get('view');
+    }
+
+    get arrive() : string
+    {
+        return this.scope.get('arrive');
+    }
+
+    get depart() : string
+    {
+        return this.scope.get('depart');
+    }
+
+    get range() : boolean
+    {
+        return this.scope.get('range');
+    }
+
+    get panels() : number
+    {
+        return this.scope.get('panels');
+    }
+
+    get format() : string
+    {
+        return this.scope.get('format');
+    }
+
+    get displayFormat() : string
+    {
+        return this.scope.get('displayFormat');
+    }
+
+    get minDate() : any
+    {
+        return this.scope.get('minDate');
+    }
+
+    get maxDate() : any
+    {
+        return this.scope.get('maxDate');
+    }
+
+    get yearsGrid() : Now[]
+    {
+        return Arr.first(this.displays).getYearsGrid();
+    }
+
+    get monthsGrid() : Now[]
+    {
+        return Arr.first(this.displays).getMonthsGrid();
+    }
+
+}
+
+export default NDatepickerPanelData;