@kizmann/nano-ui 2.0.2 → 3.0.0

package/src/cascader/src/cascader-panel/cascader-panel.jsx

@@ -1,362 +0,0 @@
-import { Arr, Obj, Mix, Str, Run } from "@kizmann/pico-js";
-
-export default {
-
-    name: 'NCascaderPanel',
-
-    props: {
-
-        modelValue: {
-            default()
-            {
-                return [];
-            },
-            type: [Array]
-        },
-
-        clearValue: {
-            default()
-            {
-                return [];
-            },
-            type: [Array]
-        },
-
-        hover: {
-            default()
-            {
-                return [];
-            },
-            type: [Array]
-        },
-
-        options: {
-            default()
-            {
-                return [];
-            },
-            type: [Array]
-        },
-
-        disabled: {
-            default()
-            {
-                return false;
-            },
-            type: [Boolean]
-        },
-
-        size: {
-            default()
-            {
-                return 'md';
-            },
-            type: [String]
-        },
-
-        type: {
-            default()
-            {
-                return 'primary';
-            },
-            type: [String]
-        },
-
-        trigger: {
-            default()
-            {
-                return 'hover';
-            },
-            type: [String]
-        },
-
-        labelProp: {
-            default()
-            {
-                return 'label';
-            },
-            type: [String]
-        },
-
-        valueProp: {
-            default()
-            {
-                return 'value';
-            },
-            type: [String]
-        },
-
-        childProp: {
-            default()
-            {
-                return 'children';
-            },
-            type: [String]
-        },
-
-        disabledProp: {
-            default()
-            {
-                return 'disabled';
-            },
-            type: [String]
-        },
-
-    },
-
-    computed: {
-
-        touch() {
-            return !! ('ontouchstart' in window || 
-                navigator.msMaxTouchPoints);
-        },
-
-        mousedown() {
-            return this.touch ? 'touchstart' :
-                'mousedown';
-        },
-
-        mousemove() {
-            return this.touch ? 'touchmove' :
-                'mousemove';
-        },
-
-        mouseup() {
-            return this.touch ? 'touchend' :
-                'mouseup';
-        }
-
-    },
-
-    data()
-    {
-        return {
-            tempValue: this.modelValue,
-            tempHover: this.hover,
-        };
-    },
-
-    watch: {
-
-        modelValue(value) {
-            if ( value !== this.tempValue ) {
-                this.tempValue = value;
-            }
-        },
-
-        hover(value) {
-            if ( value !== this.tempHover ) {
-                this.tempHover = value;
-            }
-        }
-
-    },
-
-    methods: {
-
-        clearCascader()
-        {
-            this.$emit('update:modelValue', this.tempHover = 
-                this.tempValue = this.clearValue);
-        },
-
-        onHover(cascade)
-        {
-            return (event) => this.hoverItem(cascade, event)
-        },
-
-        onSelect(cascade)
-        {
-            return (event) => this.selectItem(cascade, event)
-        },
-
-        hoverItem(cascade, event = null)
-        {
-            // Hover intend emulation
-            clearTimeout(this.delay);
-
-            let updateHover = () => {
-                this.$emit('update:hover', 
-                    this.tempHover = cascade);
-            };
-
-            this.delay = setTimeout(updateHover, 130);
-        },
-
-        selectItem(cascade, event = null)
-        {
-            clearTimeout(this.clickTimer);
-
-            if ( ! this.lastclick ) {
-                this.lastclick = 0;
-            }
-
-            this.lastclick++;
-
-            let trigger = this.touch ? 'click' : 
-                this.trigger ;
-            
-            this.clickTimer = setTimeout(() => 
-                this.lastclick = 0, 240);
-
-            this.hoverTimer = setTimeout(() => 
-                this.hoverItem(cascade), 240);
-
-            if ( this.lastclick === 1 && trigger === 'click' ) {
-                return this.hoverItem(cascade, event);
-            }
-
-            if ( event ) {
-                event.preventDefault();
-            }
-
-            this.clickTimer = setTimeout(() => 
-                this.fireSelectItem(cascade), 50);
-        },
-
-        fireSelectItem(cascade)
-        {
-            clearTimeout(this.hoverTimer);
-
-            this.lastclick = 0;
-
-            this.$emit('update:modelValue', 
-                this.tempValue = cascade);
-        }
-
-    },
-
-    renderDisplay()
-    {
-        let classList = [
-            'n-cascader-panel',
-            'n-cascader-panel--' + this.size
-        ];
-
-        return (
-            <div class={classList}>
-                { this.ctor('renderLabelClear')() }
-                { this.ctor('renderLabel')() }
-                { this.ctor('renderLabelAngle')() }
-            </div>
-        )
-    },
-
-    renderOption(item, cascade = [])
-    {
-        let value = Obj.get(item, this.valueProp);
-
-        let classList = [
-            'n-popover-option'
-        ];
-
-        if ( Arr.has(this.tempValue, item[this.valueProp]) ) {
-            classList.push('n-active');
-        }
-
-        let disabled = Obj.get(item, this.disabledProp, false);
-
-        if ( disabled ) {
-            classList.push('n-disabled');
-        }
-
-        let props = {
-            size: this.size,
-            type: this.type,
-            clickClose: false
-        };
-
-        if ( Arr.last(this.tempValue) === value ) {
-            props.icon = nano.Icons.checked;
-        }
-
-        let tempCascade = Arr.merge(Arr.clone(cascade), [value]);
-
-        if ( this.trigger === 'hover' ) {
-            props.onMousemove = Run.framerate(this.onHover(tempCascade), 30);
-        }
-
-        if ( ! disabled ) {
-            props['on' + Str.ucfirst(this.mousedown)] = this.onSelect(tempCascade);
-        }
-
-        let children = Obj.get(item, this.childProp);
-
-        if (  ! props.icon && ! Mix.isEmpty(children) ) {
-            props.icon = nano.Icons.angleRight;
-        }
-
-        return (
-            <NPopoverOption class={classList} {...props}>
-                { Obj.get(item, this.labelProp) }
-            </NPopoverOption>
-        );
-    },
-
-    renderOptions(items, cascade = [])
-    {
-        if ( Mix.isEmpty(items) ) {
-            return null;
-        }
-
-        return (
-            <div class="n-cascader-panel__items">
-                <NScrollbar relative={true}>
-                    {
-                        Arr.each(items, (item) => {
-                            return this.ctor('renderOption')(item, cascade);
-                        })
-                    }
-                </NScrollbar>
-            </div>
-        )
-    },
-
-    renderCascade()
-    {
-        let renderList = [
-            this.ctor('renderOptions')(this.options)
-        ];
-
-        let items = this.options, cascade = [];
-
-        Arr.each(this.tempHover, (value) => {
-
-            if ( ! items ) {
-                return;
-            }
-
-            cascade.push(value);
-
-            let item = Arr.find(items, {
-                [this.valueProp]: value
-            });
-
-            items = Obj.get(item, this.childProp);
-
-            let options = this.ctor('renderOptions')
-                (items, cascade);
-
-            renderList.push(options);
-        });
-
-        return renderList;
-    },
-
-    render()
-    {
-        let classList = [
-            'n-cascader-panel',
-            'n-cascader-panel--' + this.size
-        ];
-
-        if ( this.disabled ) {
-            classList.push('n-disabled');
-        }
-
-        return (
-            <div class={classList}>{ this.ctor('renderCascade')() }</div>
-        );
-    }
-
-}

package/src/chart/index.js

@@ -1,9 +0,0 @@
-import ChartItem from "./src/chart-item/chart-item.jsx";
-import ChartDonut from "./src/chart-donut/chart-donut.jsx";
-import ChartBar from "./src/chart-bar/chart-bar.jsx";
-
-export default function (App) {
-    App.component(ChartItem.name, ChartItem);
-    App.component(ChartDonut.name, ChartDonut);
-    App.component(ChartBar.name, ChartBar);
-}

package/src/chart/src/chart-bar/chart-bar.jsx

@@ -1,344 +0,0 @@
-import { Arr, Mix, Num, Locale } from "@kizmann/pico-js";
-
-export default {
-
-    name: 'NChartBar',
-
-    provide()
-    {
-        return {
-            NChart: this
-        };
-    },
-
-    props: {
-
-        sort: {
-            default()
-            {
-                return false;
-            },
-            type: [Boolean]
-        },
-
-        color: {
-            default()
-            {
-                return 10;
-            },
-            type: [Number]
-        },
-
-        colorLimit: {
-            default()
-            {
-                return 19;
-            },
-            type: [Number]
-        },
-
-        label: {
-            default()
-            {
-                return Locale.trans('Total');
-            },
-            type: [String]
-        },
-
-        otherLabel: {
-            default()
-            {
-                return Locale.trans('Other');
-            },
-            type: [String]
-        },
-
-        size: {
-            default()
-            {
-                return 'md';
-            },
-            type: [String]
-        },
-
-        limit: {
-            default()
-            {
-                return 4;
-            },
-            type: [Number]
-        },
-
-        minHeight: {
-            default()
-            {
-                return 5;
-            },
-            type: [Number]
-        },
-
-        renderLegend: {
-            default()
-            {
-                return true;
-            },
-            type: [Boolean]
-        }
-
-    },
-
-    computed: {
-
-        total()
-        {
-            let count = Arr.each(this.elements, (item) => {
-                return Num.float(item.value);
-            });
-
-            return Num.combine(count);
-        },
-
-        min()
-        {
-            let min = Number.MAX_VALUE;
-
-            Arr.each(this.elements, (item) => {
-                min = Math.min(min, Num.float(item.value));
-            });
-
-            return Num.float(min);
-        },
-
-        max()
-        {
-            let max = Number.MIN_VALUE;
-
-            Arr.each(this.elements, (item) => {
-                max = Math.max(max, Num.float(item.value));
-            });
-
-            return Num.float(max);
-        }
-
-    },
-
-    data()
-    {
-        return {
-            elements: []
-        };
-    },
-
-    methods: {
-
-        appendElement(element)
-        {
-            this.index = -1;
-
-            Arr.add(this.elements, element, {
-                uid: element.uid
-            });
-        },
-
-        removeElement(checkbox)
-        {
-            this.index = -1;
-
-            Arr.remove(this.elements, {
-                uid: checkbox.uid
-            });
-        },
-
-    },
-
-    renderBarItem(item, index)
-    {
-        let classList = [
-            'n-chart-item', item.getClass(index),
-        ];
-
-        let height = ((100 - this.minHeight) / this.max * item.value) + this.minHeight;
-
-        let style = {
-            '--n-chart-height': Num.int(height) + '%'
-        };
-
-        let html = [];
-
-        html.push(
-            <div class="n-chart-bar__bar">
-                {/* Chart bar */}
-            </div>
-        );
-
-        html.push(
-            <div class="n-chart-bar__dot">
-                {/* Chart dor */}
-            </div>
-        );
-
-        html.push(
-            <div class="n-chart-bar__value">
-                <span>{item.axis}</span>
-                <span>{item.value}</span>
-            </div>
-        );
-
-        return (
-            <div class={classList} style={style}>
-                {html}
-            </div>
-        );
-    },
-
-    renderBarOther(hidden, visible)
-    {
-        if ( Mix.isEmpty(hidden) ) {
-            return null;
-        }
-
-        let count = Arr.each(hidden, (item) => {
-            return Num.float(item.value);
-        });
-
-        let item = {
-            axis: this.otherLabel, value: Num.combine(count)
-        };
-
-        item['getClass'] = () => {
-            return 'n-chart-item--other';
-        };
-
-        return this.ctor('renderBarItem')(item, visible.length);
-    },
-
-    renderBars()
-    {
-        let [elements, sorted] = [
-            Arr.clone(this.elements), Arr.sort(this.elements, 'value').reverse()
-        ];
-
-        if ( this.sort ) {
-            elements = Arr.clone(sorted);
-        }
-
-        let temp = Arr.splice(sorted, 0, this.limit || elements.length);
-
-        let visible = Arr.filter(elements, (el) => {
-            return !! Arr.find(temp, { uid: el.uid});
-        });
-
-        let hidden = Arr.filter(elements, (el) => {
-            return ! Arr.find(temp, { uid: el.uid});
-        });
-
-        [this.vis, this.hid] = [
-            visible, hidden
-        ];
-
-        let items = Arr.each(visible, (item, index) => {
-            return this.ctor('renderBarItem')(item, index);
-        });
-
-        let othersHtml = this.ctor('renderBarOther')(...[
-            this.hid, this.vis
-        ]);
-
-        return (
-            <div class="n-chart-bar__bars">
-                {[...items, othersHtml]}
-            </div>
-        );
-    },
-
-    renderAxis()
-    {
-        return (
-            <div class="n-chart-bar__axis">
-                <span>{this.max}</span>
-                <span>{this.min}</span>
-            </div>
-        );
-    },
-
-    renderLegendOther(hidden, visible)
-    {
-        if ( Mix.isEmpty(hidden) ) {
-            return null;
-        }
-
-        let count = Arr.each(hidden, (item) => {
-            return Num.float(item.value);
-        });
-
-        let item = {
-            axis: this.otherLabel, value: Num.combine(count)
-        };
-
-        item['getClass'] = () => {
-            return 'n-chart-legend--other';
-        };
-
-        return this.ctor('renderLegendItem')(item, visible.length);
-    },
-
-    renderLegendItem(item, index)
-    {
-        let classList = [
-            'n-chart-legend',
-            item.getClass(index, 'n-chart-legend')
-        ];
-
-        return (
-            <div class={classList}>
-                <span>{item.axis}</span>
-                <span>{item.value}</span>
-            </div>
-        );
-    },
-
-    renderLegend()
-    {
-        if ( ! this.renderLegend ) {
-            return null;
-        }
-
-        let items = Arr.each(this.vis, (item, index) => {
-            return this.ctor('renderLegendItem')(item, index);
-        });
-
-        let othersHtml = this.ctor('renderLegendOther')(...[
-            this.hid, this.vis
-        ]);
-
-        return (
-            <div class="n-chart-bar__legend">
-                {[...items, othersHtml]}
-            </div>
-        )
-    },
-
-    render()
-    {
-        let classList = [
-            'n-chart-bar',
-            'n-chart-bar--' + this.size,
-        ];
-
-        let bodyHtml = [
-            this.ctor('renderBars')(),
-            this.ctor('renderLegend')(),
-        ];
-
-        if ( this.$slots.default ) {
-            bodyHtml.push(this.$slots.default());
-        }
-
-        return (
-            <div class={classList}>
-                {bodyHtml}
-            </div>
-        );
-    }
-
-}