@kizmann/nano-ui 2.0.2 → 3.0.0

package/src/preview/src/preview-modal/preview-modal.jsx

@@ -1,126 +0,0 @@
-import { Mix, Event, Obj, Hash } from "@kizmann/pico-js";
-
-export default {
-
-    name: 'NPreviewModal',
-
-    inject: {
-
-        NPreview: {
-            default: undefined
-        }
-
-    },
-
-    props: {
-
-        file: {
-            default()
-            {
-                return null;
-            }
-        },
-
-        index: {
-            default()
-            {
-                return 0;
-            },
-            type: [Number, String]
-        },
-
-        group: {
-            default()
-            {
-                return Hash.uuid();
-            },
-            type: [String]
-        },
-
-    },
-
-    data()
-    {
-        return { uid: Hash.uuid(), visible: false };
-    },
-
-    computed: {
-
-        tempFile() {
-            return Obj.get(this.file, 'name', this.file);
-        }
-
-    },
-
-    watch: {
-
-        visible: function (value) {
-            if ( value ) {
-                this.NPreview.$emit('slide');
-            }
-        }
-
-    },
-
-    mounted()
-    {
-        this.PreviewHandler.create()
-            .append(this.$el);
-
-        this.PreviewHandler.append(this);
-    },
-
-    beforeUnmount()
-    {
-        this.$el.remove();
-
-        this.PreviewHandler.remove(this);
-    },
-
-    methods: {
-
-        openBox()
-        {
-            this.PreviewHandler.open(this);
-        },
-
-        closeBox()
-        {
-            this.PreviewHandler.close();
-        }
-
-    },
-
-    renderFull()
-    {
-        let classList = [
-            'n-preview-frame'
-        ];
-
-        let mime = this.PreviewHelper.getType(this.tempFile);
-
-        if ( mime === 'image' ) {
-            return (<NPreviewImage class={classList} src={this.file} />);
-        }
-
-        if ( mime === 'video' ) {
-            return (<NPreviewVideo class={classList} src={this.file} />);
-        }
-
-        let props = {
-            showSrc: this.NPreview ? this.NPreview.showSrc : false,
-        };
-
-        return (<NPreviewPlain class={classList} src={this.file} {...props} />);
-    },
-
-    render()
-    {
-        if ( ! this.visible ) {
-            return null;
-        }
-
-        return this.ctor('renderFull')();
-    },
-
-}

package/src/preview/src/preview-modal/preview-modal.scss

@@ -1,69 +0,0 @@
-@use "../../../root/helpers" as *;
-
-.n-preview-modal {
-    z-index: 999999997;
-    overflow: hidden;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    padding: size('base-hgt') size('base-hgt', 'calc($ * 2.4)');
-}
-
-.n-preview-modal i {
-    font-size: 1.2em;
-}
-
-.n-preview-modal:not(.n-ready) {
-    pointer-events: none;
-    opacity: 0;
-}
-
-.n-preview-modal__close,
-.n-preview-modal__prev,
-.n-preview-modal__next {
-    width: size('base-hgt', 'calc($ * 1.2)');
-    height: size('base-hgt', 'calc($ * 1.2)');
-}
-
-.n-preview-modal__close {
-    cursor: pointer;
-    z-index: 100;
-    position: absolute;
-    top: size('base-hgt', 'calc($ * 0.5)');
-    right: size('base-hgt', 'calc($ * 0.5)');
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.n-preview-modal .n-preview-frame {
-    background: transparent !important;
-}
-
-.n-preview-modal__prev,
-.n-preview-modal__next {
-    cursor: pointer;
-    z-index: 500;
-    position: absolute;
-    top: 50%;
-    display: none;
-    align-items: center;
-    justify-content: center;
-    transform: translateY(-50%);
-}
-
-.n-preview-modal.n-multi .n-preview-modal__prev,
-.n-preview-modal.n-multi .n-preview-modal__next {
-    display: flex;
-}
-
-.n-preview-modal__prev {
-    left: size('base-hgt', 'calc($ * 0.5)');
-}
-
-.n-preview-modal__next {
-    right: size('base-hgt', 'calc($ * 0.5)');
-}

package/src/preview/src/preview-plain/preview-plain.jsx

@@ -1,87 +0,0 @@
-import { Mix, Obj, Locale } from "@kizmann/pico-js";
-
-export default {
-
-    name: 'NPreviewPlain',
-
-    props: {
-
-        src: {
-            default()
-            {
-                return null;
-            }
-        },
-
-        showSrc: {
-            default()
-            {
-                return true;
-            },
-            type:  [Boolean]
-        },
-
-        buttonText: {
-            default()
-            {
-                return Locale.trans('Download file');
-            },
-            type: [String]
-        },
-
-        renderButton: {
-            default()
-            {
-                return true;
-            },
-            type:  [Boolean]
-        }
-
-    },
-
-    computed: {
-
-        file() {
-            return Obj.get(this.src, 'name', this.src);
-        }
-
-    },
-
-    render()
-    {
-        let classList = [
-            'n-preview-plain'
-        ];
-
-        let slots = [];
-
-        slots[0] = (
-            <li>{ this.PreviewHelper.getMime(this.file) }</li>
-        );
-
-        if ( this.showSrc ) {
-            slots.push(<li class="np-file">{ this.file }</li>);
-        }
-
-        let buttonProps = {
-            nativeType: 'a', href: this.file, target: '_blank'
-        };
-
-        let buttonHtml = (
-            <li class="np-button">
-                <NButton {...buttonProps}>{ this.buttonText }</NButton>
-            </li>
-        );
-
-        if ( this.renderButton ) {
-            slots.push(buttonHtml);
-        }
-
-        return (
-            <div class={classList}>
-                <ul>{ slots }</ul>
-            </div>
-        );
-    }
-
-}

package/src/preview/src/preview-plain/preview-plain.scss

@@ -1,44 +0,0 @@
-@use "../../../root/helpers" as *;
-
-.n-preview-plain {
-    position: relative;
-    width: 100%;
-}
-
-.n-modal__frame > .n-preview-plain {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    overflow: hidden;
-}
-
-.n-preview-plain:before {
-    content: '\00a0';
-    display: block;
-    width: 100%;
-    height: 0;
-    padding-bottom: 100%;
-    max-height: 100%;
-}
-
-.n-preview-plain ul {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    display: inline-block;
-    max-width: 100%;
-    text-align: center;
-    transform: translate(-50%, -50%);
-}
-
-.n-preview-plain ul li {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.n-preview-plain .np-button {
-    margin-top: size('base-pad');
-}

package/src/preview/src/preview-video/preview-video.jsx

@@ -1,142 +0,0 @@
-import { Obj, Arr, Str, Mix, Dom } from "@kizmann/pico-js";
-
-export default {
-
-    name: 'NPreviewVideo',
-
-    props: {
-
-        src: {
-            default()
-            {
-                return null;
-            }
-        },
-
-    },
-
-    data()
-    {
-        return {
-            provider: 'plain', unique: null, tempSrc: null
-        };
-    },
-
-    mounted()
-    {
-        this.resolveType();
-    },
-
-    watch: {
-
-        'src': function () {
-            this.resolveType();
-        }
-
-    },
-
-    methods: {
-
-        resolveType()
-        {
-            this.tempSrc = null;
-
-            if ( this.resolveYoutube() ) {
-                return;
-            }
-
-            if ( this.resolveVimeo() ) {
-                return;
-            }
-
-            if ( Mix.isRef(this.src) ) {
-                this.resolveData();
-            }
-
-            this.provider = 'plain';
-        },
-
-        resolveData()
-        {
-            console.log('Coming at some point (blob stream)....');
-        },
-
-        resolveYoutube()
-        {
-            let youtube = this.PreviewHelper.getYoutubeKey(this.src);
-
-            if ( ! youtube ) {
-                return false;
-            }
-
-            this.provider = 'youtube';
-
-            this.$emit('resolve:youtube', this.unique = youtube);
-
-            return true;
-        },
-
-        resolveVimeo()
-        {
-            let vimeo = this.PreviewHelper.getVimeoKey(this.src);
-
-            if ( ! vimeo ) {
-                return false;
-            }
-
-            this.provider = 'vimeo';
-
-            this.$emit('resolve:vimeo', this.unique = vimeo);
-
-            return true;
-        }
-
-    },
-
-    renderYoutube()
-    {
-        let props = {
-            src: `https://www.youtube.com/embed/${this.unique}`
-        };
-
-        return (
-            <iframe {...props}></iframe>
-        );
-    },
-
-    renderVimeo()
-    {
-        let props = {
-            src: `https://player.vimeo.com/video/${this.unique}`
-        };
-
-        return (
-            <iframe {...props}></iframe>
-        );
-    },
-
-    renderPlain()
-    {
-        let src = Obj.get(this.src, 'name', this.src);
-
-        return (
-            <video width="320" height="240" controls>
-                <source src={this.tempSrc || this.src} type={this.PreviewHelper.getMime(src)} />
-            </video>
-        );
-    },
-
-    render()
-    {
-        let classList = [
-            'n-preview-video'
-        ];
-
-        return (
-            <div class={classList}>
-                { this.ctor('render' + Str.ucfirst(this.provider))() }
-            </div>
-        );
-    }
-
-}

package/src/preview/src/preview-video/preview-video.scss

@@ -1,33 +0,0 @@
-@use "../../../root/helpers" as *;
-
-.n-preview-video {
-    position: relative;
-    width: 100%;
-}
-
-.n-modal__frame > .n-preview-video {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    overflow: hidden;
-}
-
-.n-preview-video:before {
-    content: '\00a0';
-    display: block;
-    width: 100%;
-    height: 0;
-    padding-bottom: 56.6%;
-}
-
-.n-preview-video video,
-.n-preview-video iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: block;
-    width: 100%;
-    height: 100%;
-}

package/src/radio/index.js

@@ -1,7 +0,0 @@
-import NRadio from "./src/radio/radio.jsx";
-import NRadioGroup from "./src/radio-group/radio-group.jsx";
-
-export default function (App) {
-    App.component(NRadio.name, NRadio);
-    App.component(NRadioGroup.name, NRadioGroup);
-}

package/src/radio/src/radio/radio.jsx

@@ -1,186 +0,0 @@
-import { Arr, Obj, Mix } from "@kizmann/pico-js";
-
-export default {
-
-    name: 'NRadio',
-
-    model: {
-        prop: 'checked'
-    },
-
-    inject: {
-
-        NRadioGroup: {
-            default: undefined
-        }
-
-    },
-
-    props: {
-
-        value: {
-            default()
-            {
-                return null;
-            }
-        },
-
-        checked: {
-            default()
-            {
-                return false;
-            },
-            type: [Boolean]
-        },
-
-        disabled: {
-            default()
-            {
-                return false;
-            },
-            type: [Boolean]
-        },
-
-        size: {
-            default()
-            {
-                return 'md';
-            },
-            type: [String]
-        },
-
-        type: {
-            default()
-            {
-                return 'primary';
-            },
-            type: [String]
-        },
-
-    },
-
-    computed: {
-
-        uid()
-        {
-            return this._.uid;
-        }
-
-    },
-
-    data()
-    {
-        return {
-            tempChecked: this.checked
-        };
-    },
-
-    watch: {
-
-        checked()
-        {
-            if ( this.checked !== this.tempChecked ) {
-                this.tempChecked = this.checked;
-            }
-        }
-
-    },
-
-    beforeMount()
-    {
-        if ( this.NRadioGroup ) {
-            this.tempChecked = this.NRadioGroup.isChecked(this.value);
-        }
-    },
-
-    mounted()
-    {
-        if ( this.NRadioGroup ) {
-            this.NRadioGroup.addRadio(this);
-        }
-    },
-
-    beforeUnmount()
-    {
-        if ( this.NRadioGroup ) {
-            this.NRadioGroup.removeRadio(this);
-        }
-    },
-
-    methods: {
-
-        check()
-        {
-            if ( this.NRadioGroup ) {
-                this.NRadioGroup.checkRadio(this);
-            }
-
-            this.$emit('update:modelValue', this.tempChecked = true);
-        },
-
-        updateFromGroup()
-        {
-            let checked = this.NRadioGroup.isChecked(this.value);
-
-            if ( this.tempChecked === checked ) {
-                return;
-            }
-            
-            this.$emit('update:modelValue', this.tempChecked = checked);
-        }
-
-    },
-
-    renderRadio()
-    {
-        return (
-            <div class="n-radio__radio">
-                <span></span>
-            </div>
-        );
-    },
-
-    renderLabel()
-    {
-        if ( ! this.$slots.default && ! this.$slots.label ) {
-            return null;
-        }
-
-        return (
-            <div class="n-radio__label">
-                { this.$slots.default() || this.$slots.label() }
-            </div>
-        );
-    },
-
-    render()
-    {
-        let classList = [
-            'n-radio',
-            'n-radio--' + this.size,
-            'n-radio--' + this.type,
-        ];
-
-        if ( this.tempChecked ) {
-            classList.push('n-checked');
-        }
-
-        if ( this.disabled ) {
-            classList.push('n-disabled');
-        }
-
-        let props = Obj.clone(this.$attrs);
-
-        if ( ! this.disabled ) {
-            props.onMousedown = this.check;
-        }
-
-        return (
-            <div class={classList} {...props}>
-                { this.ctor('renderRadio')() }
-                { this.ctor('renderLabel')() }
-            </div>
-        );
-    }
-
-}