@kizmann/nano-ui 2.0.2 → 3.0.0

package/src/info/src/info-column/info-column.jsx

@@ -1,171 +0,0 @@
-import { Hash, Obj, Locale, Str } from "@kizmann/pico-js";
-import { h, resolveComponent } from "vue";
-
-export default {
-
-    name: 'NInfoColumn',
-
-    inject: {
-
-        NInfo: {
-            default: undefined
-        }
-
-    },
-
-    props: {
-
-        modelValue: {
-            default()
-            {
-                return null;
-            }
-        },
-
-        prop: {
-            default()
-            {
-                return 'id';
-            },
-            type: [String]
-        },
-
-        label: {
-            default()
-            {
-                return '';
-            },
-            type: [String]
-        },
-
-        type: {
-            default()
-            {
-                return 'string';
-            },
-            type: [String]
-        },
-
-        previewProp: {
-            default()
-            {
-                return 'preview';
-            },
-            type: [String]
-        },
-
-        options: {
-            default()
-            {
-                return [];
-            },
-            type: [Object, Array, Function]
-        },
-
-        optionsValue: {
-            default()
-            {
-                return '$value';
-            },
-            type: [String]
-        },
-
-        optionsLabel: {
-            default()
-            {
-                return '$value';
-            },
-            type: [String]
-        },
-
-        emptyText: {
-            default()
-            {
-                return Locale.trans('-');
-            },
-            type: [String]
-        },
-
-        trueText: {
-            default()
-            {
-                return Locale.trans('Yes');
-            },
-            type: [String]
-        },
-
-        falseText: {
-            default()
-            {
-                return Locale.trans('No');
-            },
-            type: [String]
-        },
-
-        datetimeFormat: {
-            default()
-            {
-                return Locale.trans('YYYY-MM-DD HH:mm');
-            },
-            type: [String]
-        }
-
-    },
-
-    data()
-    {
-        return {
-            uid: Hash.uuid()
-        };
-    },
-
-    beforeMount()
-    {
-        this.NInfo.addColumn(this);
-    },
-
-    beforeUnmount()
-    {
-        this.NInfo.removeColumn(this);
-    },
-
-    renderLabel()
-    {
-        if ( this.$slots.label ) {
-            return this.$slots.label();
-        }
-        
-        return (
-            <div class="n-info-column">
-                <span>{this.label}</span>
-            </div>
-        );
-    },
-
-    renderBody(props)
-    {
-        let passed = Obj.except(props, [], {
-            column: this
-        });
-
-        let component = resolveComponent('NInfoField' + 
-            Str.ucfirst(this.type));
-
-        if ( ! component ) {
-            return null;
-        }
-
-        passed.class = [
-            'n-info-field',
-            'n-info-field--' + this.type
-        ];
-
-         return h(component, passed);
-    },
-
-    render()
-    {
-        return null;
-    }
-
-}

package/src/info/src/info-column/info-column.scss

@@ -1,5 +0,0 @@
-@use "../../../root/helpers" as *;
-
-.n-info-column {
-    font-size: size('base-fnt-label');
-}

package/src/info/src/info-field/info-field.jsx

@@ -1,43 +0,0 @@
-import { Obj } from "@kizmann/pico-js";
-
-export default {
-
-    inject: {
-
-        NInfo: {
-            default: undefined
-        }
-
-    },
-
-    props: {
-
-        column: {
-            required: true
-        },
-
-        item: {
-            required: true
-        },
-
-    },
-
-    computed: {
-
-        input()
-        {
-            return Obj.get(this.item, this.column.prop);
-        }
-
-    },
-
-    render()
-    {
-        return (
-            <div>
-                <span>{ this.input }</span>
-            </div>
-        );
-    }
-
-}

package/src/info/src/info-field/types/info-field-boolean.jsx

@@ -1,25 +0,0 @@
-import { Str } from "@kizmann/pico-js";
-import InfoField from "../info-field.jsx";
-
-export default {
-
-    name: 'NInfoFieldBoolean',
-
-    extends: InfoField,
-
-    render()
-    {
-        if ( this.column.cslo('default', this) ) {
-            return (
-                <div>{ this.column.$slots.default(this) }</div>
-            );
-        }
-
-        return (
-            <div>
-                <span>{ Str.boolean(this.input, this.column.trueText, this.column.falseText) }</span>
-            </div>
-        );
-    }
-
-}

package/src/info/src/info-field/types/info-field-datetime.jsx

@@ -1,25 +0,0 @@
-import { Str } from "@kizmann/pico-js";
-import InfoField from "../info-field.jsx";
-
-export default {
-
-    name: 'NInfoFieldDatetime',
-
-    extends: InfoField,
-
-    render()
-    {
-        if ( this.column.cslo('default', this) ) {
-            return (
-                <div>{ this.column.$slots.default(this) }</div>
-            );
-        }
-
-        return (
-            <div>
-                <span>{ Str.datetime(this.input, this.column.datetimeFormat, this.column.emptyText) }</span>
-            </div>
-        );
-    }
-
-}

package/src/info/src/info-field/types/info-field-image.jsx

@@ -1,38 +0,0 @@
-import InfoField from "../info-field.jsx";
-import { Obj } from "@kizmann/pico-js";
-
-export default {
-
-    name: 'NInfoFieldImage',
-
-    extends: InfoField,
-
-    computed: {
-
-        preview()
-        {
-            return Obj.get(this.item, this.column.previewProp);
-        }
-
-    },
-
-    render()
-    {
-        if ( this.column.cslo('default', this) ) {
-            return (
-                <div>{ this.column.$slots.default(this) }</div>
-            );
-        }
-
-        let props = {
-            fit: 'contain',
-        };
-
-        return (
-            <div>
-                <NPreview file={this.preview || this.input} thumb={this.input} {...props} />
-            </div>
-        );
-    }
-
-}

package/src/info/src/info-field/types/info-field-option.jsx

@@ -1,54 +0,0 @@
-import { Arr, Obj, Mix } from "@kizmann/pico-js";
-import InfoField from "../info-field.jsx";
-
-export default {
-
-    name: 'NInfoFieldOption',
-
-    extends: InfoField,
-
-    renderOption(value)
-    {
-        let options = this.column.options;
-
-        if ( Mix.isFunction(options) ) {
-            options = this.column.options(this);
-        }
-
-        let prop = this.column.optionsValue;
-
-        options = Arr.each(options, (value, index) => {
-            return { $value: value, $index: index };
-        });
-
-        let option = Arr.find(options, (item) => {
-            return Obj.get(item, prop) == value;
-        });
-
-        if ( ! option ) {
-            return [this.column.emptyText];
-        }
-
-        return Obj.get(option, this.column.optionsLabel,
-            this.column.undefinedText);
-    },
-
-    render()
-    {
-        if ( this.column.cslo('default', this) ) {
-            return (
-                <div>{ this.column.$slots.default(this) }</div>
-            );
-        }
-
-        let input = ! Mix.isRef(this.input) ?
-            [this.input] : this.input;
-
-        return (
-            <div>
-                <span>{ Arr.each(input, this.ctor('renderOption')) }</span>
-            </div>
-        );
-    }
-
-}

package/src/info/src/info-field/types/info-field-string.jsx

@@ -1,25 +0,0 @@
-import { Str } from "@kizmann/pico-js";
-import InfoField from "../info-field.jsx";
-
-export default {
-
-    name: 'NInfoFieldString',
-
-    extends: InfoField,
-
-    render()
-    {
-        if ( this.column.cslo('default', this) ) {
-            return (
-                <div>{ this.column.$slots.default(this) }</div>
-            );
-        }
-
-        return (
-            <div>
-                <span>{ Str.string(this.input, this.column.emptyText) }</span>
-            </div>
-        );
-    }
-
-}

package/src/input/index.js

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

package/src/input/src/input/input.jsx

@@ -1,257 +0,0 @@
-import { h } from "vue";
-import { Obj } from "@kizmann/pico-js";
-
-export default {
-
-    name: 'NInput',
-
-    inject: {
-
-        NForm: {
-            default: undefined
-        },
-
-        NFormItem: {
-            default: undefined
-        }
-
-    },
-
-    inheritAttrs: false,
-
-    props: {
-
-        modelValue: {
-            default()
-            {
-                return null;
-            }
-        },
-
-        type: {
-            default()
-            {
-                return 'primary';
-            },
-            type: [String]
-        },
-
-        icon: {
-            default()
-            {
-                return '';
-            },
-            type: [String]
-        },
-
-        iconPosition: {
-            default()
-            {
-                return 'after';
-            },
-            type: [String]
-        },
-
-        iconDisabled: {
-            default()
-            {
-                return null;
-            },
-            type: [Boolean]
-        },
-
-        size: {
-            default()
-            {
-                return 'md';
-            },
-            type: [String]
-        },
-
-        nativeType: {
-            default()
-            {
-                return 'text';
-            },
-            type: [String]
-        },
-
-        disabled: {
-            default()
-            {
-                return false;
-            },
-            type: [Boolean]
-        },
-
-        placeholder: {
-            default()
-            {
-                return '';
-            },
-            type: [String]
-        }
-
-    },
-
-    computed: {
-
-        deepDisabled() {
-            return this.NFormItem ? this.NFormItem.disabled(this.disabled) :
-                this.disabled;
-        }
-
-    },
-
-    data()
-    {
-        return {
-            focus: false, tempValue: this.modelValue || ''
-        };
-    },
-
-    watch: {
-
-        modelValue(value)
-        {
-            if ( value !== this.tempValue ) {
-                this.tempValue = value;
-            }
-        }
-
-    },
-
-    methods: {
-
-        onIconClick(event)
-        {
-            if ( event.clientX || event.clientY ) {
-                this.$emit('icon-click', event);
-            }
-        },
-
-        onInput(event)
-        {
-            this.$emit('update:modelValue',
-                this.tempValue = event.target.value);
-        },
-
-        onKeydown(event)
-        {
-            this.$emit('keydown', event);
-
-            if ( event.which !== 13 ) {
-                return;
-            }
-
-            event.preventDefault();
-
-            if ( ! this.NForm ) {
-                return;
-            }
-
-            this.NForm.onSubmit(event);
-        },
-
-        onFocus(event)
-        {
-            this.focus = true;
-            this.$emit('focus', event);
-        },
-
-        onBlur(event)
-        {
-            this.focus = false;
-            this.$emit('blur', event);
-        }
-
-    },
-
-    renderIcon()
-    {
-        if ( !this.icon ) {
-            return null;
-        }
-
-        let disabled = this.deepDisabled;
-
-        if ( this.iconDisabled !== null ) {
-            disabled = this.iconDisabled;
-        }
-
-        let props = {
-            type: 'reset',
-            icon: this.icon,
-            size: this.size,
-            square: true,
-            disabled: disabled,
-        };
-
-        if ( !disabled ) {
-            props.onClick = this.onIconClick;
-        }
-
-        return (<NButton {...props} />);
-    },
-
-    renderInput()
-    {
-        let props = Obj.except(this.$attrs, [
-            'class', 'style'
-        ]);
-
-        Obj.assign(props, {
-            value: this.tempValue,
-            type: this.nativeType,
-            disabled: this.deepDisabled,
-            placeholder: this.placeholder,
-            onInput: this.onInput,
-            onFocus: this.onFocus,
-            onBlur: this.onBlur,
-            onKeydown: this.onKeydown
-        });
-
-        return h('input', props);
-    },
-
-    render()
-    {
-        let classList = [
-            'n-input',
-            'n-input--' + this.size,
-            'n-input--' + this.type,
-        ];
-
-        if ( this.icon ) {
-            classList.push('n-input--icon');
-            classList.push('n-input--icon-' + this.iconPosition);
-        }
-
-        if ( this.deepDisabled ) {
-            classList.push('n-disabled');
-        }
-
-        if ( this.focus ) {
-            classList.push('n-focus');
-        }
-
-        let props = Obj.only(this.$attrs, ['style'], {
-            class: this.cmer(classList)
-        });
-
-        let innerHtml = [];
-
-        if ( this.iconPosition === 'before' ) {
-            innerHtml.push(this.ctor('renderIcon')());
-        }
-
-        innerHtml.push(this.ctor('renderInput')());
-
-        if ( this.iconPosition === 'after' ) {
-            innerHtml.push(this.ctor('renderIcon')());
-        }
-
-        return h('div', props, innerHtml);
-    }
-
-}

package/src/input-number/index.js

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

package/src/input-number/index.scss

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