@kizmann/nano-ui 2.0.2 → 3.0.0

package/src/popover/src/popover/popover-helper.mjs

@@ -1,75 +0,0 @@
-
-export class PopoverHelper
-{
-    static alias = 'PopoverHelper';
-
-    static getTouchState() {
-        return !! ('ontouchstart' in window || navigator.msMaxTouchPoints);
-    }
-
-    static getScrollEvent()
-    {
-        return 'scroll';
-    }
-
-    static getHoverEvent()
-    {
-        if ( this.getTouchState() ) {
-            return 'touchstart';
-        }
-
-        return 'mousemove';
-    }
-
-    static getClickEvent()
-    {
-        if ( this.getTouchState() ) {
-            return 'touchstart';
-        }
-
-        return 'mousedown';
-    }
-
-    static getContextEvent()
-    {
-        if ( this.getTouchState() ) {
-            return 'contextmenu';
-        }
-
-        return 'contextmenu';
-    }
-
-    static getMouseDownEvent()
-    {
-        if ( this.getTouchState() ) {
-            return 'touchstart';
-        }
-
-        return 'mousedown';
-    }
-
-    static getMouseMoveEvent()
-    {
-        if ( this.getTouchState() ) {
-            return 'touchmove';
-        }
-
-        return 'mousemove';
-    }
-
-    static getMouseUpEvent()
-    {
-        if ( this.getTouchState() ) {
-            return 'touchend';
-        }
-
-        return 'mouseup';
-    }
-
-}
-
-if ( ! window[PopoverHelper.alias] ) {
-    window[PopoverHelper.alias] = PopoverHelper;
-}
-
-export default PopoverHelper;

package/src/popover/src/popover/popover.jsx

@@ -1,307 +0,0 @@
-import { Arr, Mix, Dom, Event, Hash } from "@kizmann/pico-js";
-
-
-export default {
-
-    name: 'NPopover',
-
-    provide()
-    {
-        return {
-            NPopover: this
-        };
-    },
-
-    inject: {
-
-        NPopover: {
-            default: undefined
-        }
-
-    },
-
-    props: {
-
-        modelValue: {
-            default()
-            {
-                return null;
-            }
-        },
-
-        width: {
-            default()
-            {
-                return 0;
-            },
-            type: [Number]
-        },
-
-        disabled: {
-            default()
-            {
-                return false;
-            },
-            type: [Boolean]
-        },
-
-        listen: {
-            default()
-            {
-                return true;
-            },
-            type: [Boolean]
-        },
-
-        window: {
-            default()
-            {
-                return true;
-            },
-            type: [Boolean]
-        },
-
-        trigger: {
-            default()
-            {
-                return 'hover';
-            },
-            type: [String]
-        },
-
-        type: {
-            default()
-            {
-                return 'default';
-            },
-            type: [String]
-        },
-
-        theme: {
-            default()
-            {
-                return 'dark';
-            },
-            type: [String]
-        },
-
-        size: {
-            default()
-            {
-                return 'md';
-            },
-            type: [String]
-        },
-
-        position: {
-            default()
-            {
-                return 'bottom-center';
-            },
-            type: [String]
-        },
-
-        toggle: {
-            default()
-            {
-                return false;
-            },
-            type: [Boolean]
-        },
-
-        scrollClose: {
-            default()
-            {
-                return true;
-            },
-            type: [Boolean]
-        },
-
-        multiClose: {
-            default()
-            {
-                return true;
-            },
-            type: [Boolean]
-        },
-
-        alwaysRender: {
-            default()
-            {
-                return false;
-            },
-            type: [Boolean]
-        },
-
-        framerate: {
-            default()
-            {
-                return 15;
-            },
-            type: [Number]
-        }
-
-    },
-
-    data()
-    {
-        return {
-            uid: Hash.uuid(),
-            tempValue: false,
-            clientX: 0,
-            clientY: 0,
-            target: null,
-            prevent: false,
-        };
-    },
-
-    watch: {
-
-        modelValue()
-        {
-            this.tempValue = this.modelValue;
-        },
-
-    },
-
-    beforeMount()
-    {
-        this.tempValue = this.modelValue;
-    },
-
-    mounted()
-    {
-        this.target = Dom.find(this.$el).prev().get(0);
-
-        if ( this.trigger === 'context' ) {
-            this.target = Dom.find(this.$el).parent().get(0);
-        }
-
-        let options = {
-            uid: this.uid,
-            target: this.target,
-            listen: this.listen,
-            position: this.position,
-            toggle: this.toggle,
-            trigger: this.trigger,
-            width: this.width,
-            scrollClose: this.scrollClose,
-            multiClose: this.multiClose,
-            disabled: () => this.disabled,
-        };
-
-        if ( this.NPopover ) {
-            options.parent = this.NPopover.popel;
-        }
-
-        this.popel = this.Popover.append(this.$el, options);
-
-        this.popel.on('open', () => {
-            if ( this.tempValue !== true ) {
-                this.$emit('update:modelValue', this.tempValue = true);
-            }
-        });
-
-        this.popel.on('close', () => {
-            if ( this.tempValue !== false ) {
-                this.$emit('update:modelValue', this.tempValue = false);
-            }
-        });
-
-        this.$watch('tempValue', () => {
-            this.tempValue ? this.popel.show() : this.popel.hide();
-        });
-
-        Dom.find(document.body).append(this.$el);
-    },
-
-    beforeUnmount()
-    {
-        this.Popover.remove({ uid: this.uid });
-
-        this.$el.remove();
-    },
-
-    methods: {
-
-        active()
-        {
-            return this.tempValue;
-        },
-
-        open()
-        {
-            this.popel.open();
-        },
-
-        close()
-        {
-            this.popel.hide();
-        },
-
-    },
-
-    renderBody()
-    {
-        if ( this.$slots.raw ) {
-            return this.$slots.raw();
-        }
-
-        return (
-            <div class="n-popover__frame">
-                {this.$slots.header &&
-                    <div class="n-popover__header">
-                        {this.$slots.header()}
-                    </div>
-                }
-                <div class="n-popover__body">
-                    {this.$slots.default()}
-                </div>
-                {this.$slots.footer &&
-                    <div class="n-popover__footer">
-                        {this.$slots.footer()}
-                    </div>
-                }
-            </div>
-        );
-    },
-
-    render()
-    {
-        let classList = [
-            'n-popover',
-            'n-popover--' + this.type,
-            'n-popover--' + this.size,
-            'n-popover--' + this.position,
-        ];
-
-        if ( !this.tempValue ) {
-            classList.push('n-hidden');
-        }
-
-        let viewBody = this.modelValue;
-
-        if ( Mix.isNull(this.modelValue) ) {
-            viewBody = this.tempValue;
-        }
-
-        if ( this.alwaysRender ) {
-            viewBody = true;
-        }
-
-        if ( viewBody ) {
-            classList.push('n-ready');
-        }
-
-        if ( this.theme ) {
-            classList.push('n-theme--' + this.theme);
-        }
-
-        return (
-            <div class={classList}>
-                {viewBody && this.ctor('renderBody')()}
-            </div>
-        );
-    }
-
-}

package/src/popover/src/popover-group/popover-group.jsx

@@ -1,51 +0,0 @@
-export default {
-
-    name: 'NPopoverGroup',
-
-    inject: {
-        NPopover: {
-            default: undefined
-        }
-    },
-
-    props: {
-
-        size: {
-            default()
-            {
-                return 'md';
-            },
-            type: [String]
-        },
-
-
-    },
-
-    computed: {
-
-        tempSize()
-        {
-            if ( this.NPopover ) {
-                return this.NPopover.size;
-            }
-
-            return this.size;
-        }
-
-    },
-
-    render()
-    {
-        let classList = [
-            'n-popover-group',
-            'n-popover-group--' + this.tempSize,
-        ];
-
-        return (
-            <label class={classList}>
-                <span>{ this.$slots.default() }</span>
-            </label>
-        );
-    }
-
-}

package/src/popover/src/popover-option/popover-option.jsx

@@ -1,204 +0,0 @@
-import { Obj, Arr, Mix, Dom } from "@kizmann/pico-js";
-
-export default {
-
-    name: 'NPopoverOption',
-
-    inject: {
-        NPopover: {
-            default: undefined
-        }
-    },
-
-    props: {
-
-        type: {
-            default()
-            {
-                return 'primary';
-            },
-            type: [String]
-        },
-
-        size: {
-            default()
-            {
-                return 'md';
-            },
-            type: [String]
-        },
-
-        focus: {
-            default()
-            {
-                return false;
-            },
-            type: [Boolean]
-        },
-
-        active: {
-            default()
-            {
-                return false;
-            },
-            type: [Boolean]
-        },
-
-        disabled: {
-            default()
-            {
-                return false;
-            },
-            type: [Boolean]
-        },
-
-        icon: {
-            default()
-            {
-                return '';
-            },
-            type: [String]
-        },
-
-        iconPosition: {
-            default()
-            {
-                return 'after';
-            },
-            type: [String]
-        },
-
-        image: {
-            default()
-            {
-                return '';
-            },
-            type: [String]
-        },
-
-        imagePosition: {
-            default()
-            {
-                return 'before';
-            },
-            type: [String]
-        },
-
-        clickClose: {
-            default()
-            {
-                return true;
-            },
-            type: [Boolean]
-        }
-
-
-    },
-
-    computed: {
-
-        tempSize()
-        {
-            if ( this.NPopover ) {
-                return this.NPopover.size;
-            }
-
-            return this.size;
-        }
-
-    },
-
-    methods: {
-
-        onClick(event)
-        {
-            if ( this.NPopover && this.clickClose ) {
-                this.NPopover.close();
-            }
-
-            this.$emit('fakeclick', event);
-        }
-
-    },
-
-    renderImage()
-    {
-        if ( ! this.image ) {
-            return null;
-        }
-
-        let classList = [
-            'n-image',
-            'n-image--' + this.imagePosition,
-        ];
-
-        return (<img class={classList} src={this.image} />);
-    },
-
-    renderIcon()
-    {
-        if ( ! this.icon ) {
-            return null;
-        }
-
-        let classList = [
-            'n-icon', 
-            'n-icon--' + this.iconPosition,
-        ];
-
-        classList.push(this.icon);
-
-        return (<i class={classList}></i>);
-    },
-
-    renderContent()
-    {
-        if ( this.$slots.raw ) {
-            return this.$slots.raw();
-        }
-
-        return (
-            <span>{ this.$slots.default() }</span>
-        );
-    },
-
-    render()
-    {
-        let classList = [
-            'n-popover-option',
-            'n-popover-option--' + this.type,
-            'n-popover-option--' + this.tempSize,
-        ];
-
-        if ( this.active ) {
-            classList.push('n-active');
-        }
-
-        if ( this.focus ) {
-            classList.push('n-focus');
-        }
-
-        if ( this.disabled ) {
-            classList.push('n-disabled');
-        }
-
-        let props = Obj.clone(this.$attrs);
-
-        if ( ! this.disabled ) {
-            props.onClick = this.onClick;
-        }
-
-        if ( this.disabled ) {
-            props.disabled = true;
-        }
-
-        return (
-            <a class={classList} href="javascript:void(0)" {...props}>
-                { this.ctor('renderImage')() }
-                { this.ctor('renderContent')() }
-                { this.ctor('renderIcon')() }
-            </a>
-        );
-    }
-
-}

package/src/preview/index.js

@@ -1,54 +0,0 @@
-import Preview from "./src/preview/preview.jsx";
-import PreviewPlain from "./src/preview-plain/preview-plain.jsx";
-import PreviewImage from "./src/preview-image/preview-image.jsx";
-import PreviewVideo from "./src/preview-video/preview-video.jsx";
-import PreviewModal from "./src/preview-modal/preview-modal.jsx";
-
-import PreviewHelper from "./src/preview/preview-helper.mjs";
-import PreviewHandler from "./src/preview/preview-handler.mjs";
-
-window.DefaultPreviewMimes = {
-    image: [
-        'jpg', 'jpeg', 'gif', 'svg', 'png', 'bmp'
-    ],
-    video: [
-        'mp4', 'webm', 'mov'
-    ],
-    audio: [
-        'mp3', 'aac',
-    ],
-    font: [
-        'woff', 'ttf', 'otf'
-    ],
-    text: [
-        'csv', 'txt', 'html'
-    ],
-    application: [
-        'pdf', 'doc', 'xls'
-    ]
-};
-
-export default function (App) {
-
-    if ( ! window.PreviewMimes ) {
-        window.PreviewMimes = pi.Obj.assign(window.DefaultPreviewMimes, window.PreviewMimes);
-    }
-
-    let directives = [
-        PreviewHelper, PreviewHandler
-    ];
-
-    pi.Arr.each(directives, (glob) => {
-        App.config.globalProperties[glob.alias] = glob;
-    });
-
-    let components = [
-        Preview, PreviewModal, PreviewPlain, PreviewImage, PreviewVideo
-    ];
-
-    pi.Arr.each(components, (comp) => {
-        App.component(comp.name, comp);
-    });
-
-}
-