npm - @kizmann/nano-ui - Versions diffs - 1.0.0 → 1.0.2 - Mend

@kizmann/nano-ui 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (139) hide show

package/README.md +1 -114
package/dist/nano-ui.css +1 -0
package/dist/nano-ui.js +4 -0
package/dist/nano-ui.js.map +1 -0
package/dist/themes/dark.css +1 -0
package/dist/themes/light.css +1 -0
package/package.json +12 -6
package/src/drawer/src/drawer/drawer.js +8 -8
package/src/drawer/src/drawer/drawer.scss +8 -2
package/src/form/src/form-item/form-item.scss +6 -1
package/src/map/src/map/map.scss +1 -0
package/src/map/src/map-marker/map-marker.js +1 -1
package/src/resizer/src/resizer/resizer.js +6 -4
package/src/root/vars.scss +1 -1
package/src/scrollbar/src/scrollbar/scrollbar.next.js +1 -1
package/src/scrollbar/src/scrollbar/scrollbar.scss +3 -2
package/src/select/src/select/select.js +1 -1
package/src/slider/src/slider/slider.js +5 -0
package/src/slider/src/slider/slider.scss +4 -0
package/src/table/src/table/table.scss +6 -2
package/src/table/src/table-column/table-column.scss +0 -1
package/themes/macos/button/src/button/button.scss +9 -0
package/themes/macos/radio/src/radio/radio.scss +1 -1
package/themes/macos/root/vars-dark.scss +1 -1
package/themes/macos/root/vars-light.scss +1 -1
package/themes/macos/root/vars.scss +0 -1
package/themes/macos/scrollbar/src/scrollbar/scrollbar.scss +1 -1
package/themes/macos/select/src/select/select.scss +1 -1
package/themes/macos/slider/src/slider/slider.scss +23 -3
package/themes/macos/tags/src/tags-item/tags-item.scss +4 -2
package/.github/workflows/compile-deploy-publish.yml +0 -65
package/assets/nano-ui-dark.svg +0 -19
package/assets/nano-ui-light.svg +0 -19
package/assets/pico-js-dark.svg +0 -19
package/assets/pico-js-light.svg +0 -19
package/babel.config.js +0 -17
package/demos/builder.html +0 -411
package/demos/button/index.html +0 -129
package/demos/cascader/index.html +0 -127
package/demos/chart/index.html +0 -53
package/demos/checkbox/index.html +0 -97
package/demos/config/index.html +0 -95
package/demos/confirm/index.html +0 -78
package/demos/datepicker/index.html +0 -69
package/demos/draggable/index.html +0 -127
package/demos/form/index.html +0 -83
package/demos/form.html +0 -462
package/demos/grid.html +0 -321
package/demos/input/index.html +0 -100
package/demos/map/index.html +0 -81
package/demos/matrix/index.html +0 -104
package/demos/modal/index.html +0 -98
package/demos/overview.html +0 -1468
package/demos/paginator/index.html +0 -58
package/demos/popover/index.html +0 -103
package/demos/radio/index.html +0 -71
package/demos/resizer/index.html +0 -106
package/demos/scrollbar.html +0 -328
package/demos/select/index.html +0 -174
package/demos/select.html +0 -164
package/demos/style.css +0 -50
package/demos/switch/index.html +0 -69
package/demos/table/index.html +0 -126
package/demos/tabs/index.html +0 -110
package/demos/tabs.html +0 -293
package/demos/textarea/index.html +0 -77
package/demos/timepicker/index.html +0 -66
package/demos/transfer/index.html +0 -88
package/demos/wysiwyg/index.html +0 -49
package/docs/README.md +0 -34
package/docs/_sidebar.md +0 -37
package/docs/files/data/draggable.md +0 -143
package/docs/files/data/map.md +0 -1
package/docs/files/data/paginator.md +0 -23
package/docs/files/data/table.md +0 -247
package/docs/files/data/virtualscroller.md +0 -2
package/docs/files/form/button.md +0 -131
package/docs/files/form/cascader.md +0 -164
package/docs/files/form/checkbox.md +0 -179
package/docs/files/form/datepicker.md +0 -78
package/docs/files/form/form.md +0 -52
package/docs/files/form/input.md +0 -90
package/docs/files/form/radio.md +0 -150
package/docs/files/form/select.md +0 -202
package/docs/files/form/switch.md +0 -98
package/docs/files/form/textarea.md +0 -102
package/docs/files/form/timepicker.md +0 -78
package/docs/files/form/transfer.md +0 -30
package/docs/files/others/config.md +0 -261
package/docs/files/others/confirm.md +0 -51
package/docs/files/others/drawer.md +0 -32
package/docs/files/others/loader.md +0 -22
package/docs/files/others/map.md +0 -32
package/docs/files/others/modal.md +0 -32
package/docs/files/others/notification.md +0 -52
package/docs/files/others/popover.md +0 -36
package/docs/files/others/resizer.md +0 -8
package/docs/files/others/scrollbar.md +0 -8
package/docs/files/others/tabs.md +0 -32
package/docs/index.template.html +0 -76
package/docs/src/js/backup.js +0 -128
package/docs/src/js/helper/item-helper.js +0 -0
package/docs/src/js/index.js +0 -21
package/docs/src/js/plugin/title-plugin.js +0 -0
package/docs/src/js/plugin/vue-demo-plugin.js +0 -97
package/docs/src/js/theme/basic.js +0 -31
package/docs/src/js/theme/docsify.js +0 -11
package/docs/src/scss/index-dark.scss +0 -3
package/docs/src/scss/index-light.scss +0 -3
package/docs/src/scss/index.scss +0 -15
package/docs/src/scss/mixins/base.scss +0 -14
package/docs/src/scss/mixins/grid.scss +0 -213
package/docs/src/scss/mixins/media.scss +0 -35
package/docs/src/scss/mixins/space.scss +0 -61
package/docs/src/scss/root/vars-dark.scss +0 -15
package/docs/src/scss/root/vars-light.scss +0 -15
package/docs/src/scss/root/vars.scss +0 -110
package/docs/src/scss/theme/default.scss +0 -123
package/docs/src/scss/theme/header.scss +0 -147
package/docs/src/scss/theme/layout.scss +0 -186
package/docs/src/scss/theme/loader.scss +0 -63
package/docs/src/scss/theme/markdown.scss +0 -79
package/docs/src/scss/theme/navigation.scss +0 -58
package/docs/src/scss/theme/progress.scss +0 -9
package/docs/src/scss/theme/search.scss +0 -119
package/docs/src/scss/theme/syntax.scss +0 -142
package/docs/src/scss/theme/table.scss +0 -63
package/favicon/apple-touch-icon.png +0 -0
package/favicon/favicon-96x96.png +0 -0
package/favicon/favicon.ico +0 -0
package/favicon/favicon.svg +0 -3
package/favicon/site.webmanifest +0 -21
package/favicon/web-app-manifest-192x192.png +0 -0
package/favicon/web-app-manifest-512x512.png +0 -0
package/mix-manifest.json +0 -4
package/postcss.config.js +0 -14
package/webpack.config.js +0 -211
package/webservy.json +0 -8
/package/{.nojekyll → dist/.ignore.js} +0 -0

package/demos/grid.html DELETED Viewed

@@ -1,321 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Nano UI</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
-    <link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
-    <link rel="stylesheet" href="../dist/nano-ui.css">
-    <script src="https://unpkg.com/moment"></script>
-    <script src="https://unpkg.com/vue@3.4.6"></script>
-    <script src="https://vankizmann.github.io/pico-js/dist/pico-js.js"></script>
-    <script src="../dist/nano-ui.js"></script>
-    <script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
-    <script src="https://maps.googleapis.com/maps/api/js"></script>
-    <link rel="stylesheet" href="../docs/dist/index.css">
-    <style>
-        body {
-            font-family: 'Helvetica', 'Roboto', 'Arial', sans-serif;
-            font-size: 14px;
-            height: 100%;
-            overflow-x: hidden;
-        }
-        #app {
-            overflow-x: hidden;
-        }
-        .app-scrollbar {
-            width: 100vw;
-            height: 100vh;
-        }
-        .app-container {
-            max-width: 1440px;
-            margin: 0 auto;
-            padding: 20px 30px 40px 30px;
-        }
-        .app-options {
-            border-bottom: 1px solid #eee;
-            margin-bottom: 20px;
-        }
-        h2 {
-            font-size: 32px;
-            font-weight: bold;
-            padding-bottom: 10px;
-            margin: 50px 0 15px;
-            border-bottom: 1px solid #eee;
-        }
-    </style>
-</head>
-<body>
-<div id="app">
-    <div class="app-container">
-        <h2>NVirtualscroller</h2>
-        <div class="grid grid--row grid--wrap grid--10-10">
-            <div class="col--auto">
-                <n-button type="primary" @click="virtualTree = virtualData">
-                    Swap items
-                </n-button>
-                <n-button type="primary" @click="$refs.virtualscroller.scrollIntoView(0)">
-                    Scroll to first item
-                </n-button>
-            </div>
-            <div class="col--auto">
-                <n-button type="primary" @click="$refs.virtualscroller.scrollIntoView(2000)">
-                    Scroll to item 2000
-                </n-button>
-            </div>
-            <div class="col--auto">
-                <n-button type="primary" @click="$refs.virtualscroller.scrollIntoView(7100)">
-                    Scroll to item 7100
-                </n-button>
-            </div>
-            <div class="col--auto">
-                <n-button type="primary" @click="$refs.virtualscroller.scrollIntoView(-1)">
-                    Scroll to last item
-                </n-button>
-            </div>
-        </div>
-        <n-virtualscroller ref="virtualscroller" :items="virtualData" :item-height="100" :item-width="200" style="height: 500px; margin-top: 30px; box-shadow: 0 0 2px 2px #dddedf; border-radius: 4px;">
-            <template v-slot:default="{ value }">
-                <div style="padding: 0 15px; line-height: 30px;">{{ value.label }}</div>
-            </template>
-        </n-virtualscroller>
-        <n-draggrid ref="draggrid" v-model:items="virtualTree" :item-height="100" :item-width="200" style="height: 500px; margin-top: 30px; box-shadow: 0 0 2px 2px #dddedf; border-radius: 4px;">
-            <template v-slot:default="{ item }">
-                <div style="width: 200px; height: 100px; padding: 0 15px; line-height: 30px;">{{ item.label }}</div>
-            </template>
-        </n-draggrid>
-        <n-draggrid ref="draggrid" v-model:items="testData" :item-height="100" :item-width="200" :threshold="0" style="height: 500px; margin-top: 30px; box-shadow: 0 0 2px 2px #dddedf; border-radius: 4px;">
-            <template v-slot:default="{ item }">
-                <div style="width: 200px; height: 100px; padding: 0 15px; line-height: 30px;">{{ item.label }}</div>
-            </template>
-        </n-draggrid>
-    </div>
-</div>
-<script>
-    (function (nano) {
-        'use strict';
-        pi.Dom.ready(function () {
-            let data = {};
-            data.sizes = {
-                xs: 'XS',
-                sm: 'SM',
-                md: 'MD',
-                lg: 'LG'
-            };
-            data.types = {
-                primary:    'Primary',
-                secondary:  'Secondary',
-                success:    'Success',
-                warning:    'Warning',
-                danger:     'Danger',
-                info:       'Info'
-            };
-            data.modals = {
-                default:    'Default',
-                preview:    'Preview',
-            };
-            data.demoConfig = {
-                'div': {
-                    class: [
-                        'foobar'
-                    ],
-                    content: {
-                        'NInput:page_id': {
-                            model: {
-                                path: 'page_id'
-                            }
-                        },
-                        'NInput:page_id2': {
-                            model: {
-                                path: 'page_id'
-                            }
-                        }
-                    }
-                }
-            };
-            data.configData = {};
-            data.testData = [];
-            let itemGenerator = function (count = 100, index = 0) {
-                return pi.Arr.each(pi.Arr.make(count), function (value) {
-                    let id = pi.UUID();
-                    return {
-                        id:     id,
-                        value:  id,
-                        matrix: 10,
-                        label:  `Item ${index++}`,
-                        image:  'https://picsum.photos/400/400?' + id,
-                        date: pi.Now.make().format('YYYY-MM-DD HH:mm:ss', true),
-                        enabled: !! Math.floor(Math.random() * 2)
-                    };
-                });
-            };
-            data.cascaderData = pi.Arr.each(itemGenerator(5), function (item) {
-                let children  = pi.Arr.each(itemGenerator(5), function (item) {
-                    return pi.Obj.assign(item, { children: itemGenerator(5) });
-                });
-                return pi.Obj.assign(item, { children: children });
-            });
-            data.virtualData = itemGenerator(10000);
-            data.virtualTree = pi.Arr.each(itemGenerator(50), function (item) {
-                return pi.Obj.assign(item, { children: itemGenerator(20) });
-            });
-            data.treeSelect = null;
-            data.treeMatrix = [data.virtualTree[3]];
-            data.n_button = {
-                icon: 'fa fa-ghost', size: 'md', square: false, link: false, disabled: false
-            };
-            data.n_textarea = {
-                size: 'md', placeholder: 'Placeholder', autoRows: false, disabled: false
-            };
-            data.n_input = {
-                value: 'Demo', icon: 'fa fa-ghost', size: 'md', placeholder: 'Placeholder', disabled: false
-            };
-            data.n_number = {
-                value: 3, size: 'md', placeholder: '', disabled: false
-            };
-            data.n_select = {
-                size: 'md', allowCreate: false, clearable: true, disabled: false
-            };
-            data.n_cascader = {
-                size: 'md', type: 'primary', clearable: true, disabled: false
-            };
-            data.n_checkbox = {
-                size: 'md', type: 'primary', disabled: false
-            };
-            data.n_radio = {
-                size: 'md', type: 'primary', disabled: false
-            };
-            data.n_switch = {
-                size: 'md', disabled: false
-            };
-            data.n_datepicker = {
-                size: 'md', type: 'primary', clearable: true, disabled: false
-            };
-            data.n_timepicker = {
-                size: 'md', type: 'primary', clearable: true, disabled: false
-            };
-            data.n_transfer = {
-                size: 'md', type: 'primary', disabled: false
-            };
-            data.n_modal = {
-                size: 'md', type: 'default', disabled: false
-            };
-            data.n_confirm = {
-                size: 'md', type: 'primary', disabled: false
-            };
-            data.n_tabs = {
-                value: 'default', size: 'md', type: 'primary'
-            };
-            data.n_paginator = {
-                size: 'md', type: 'primary'
-            };
-            data.n_draggable = {
-                count: 0
-            };
-            data.n_loader = {
-                size: 'md', type: 'primary', visible: true
-            };
-            let methods = {};
-            methods.log = function (val) {
-                console.log(val || 'Log fired');
-            };
-            methods.notify = function (type) {
-                this.Notify('Lorem ipsum dolore', type);
-            };
-            var config = {
-                data: function () {
-                    this.icons = pi.Obj.assign(nano.Icons, {
-                        ghost: 'fa fa-ghost'
-                    });
-                    data.demoIcons = pi.Arr.reduce(pi.Obj.values(nano.Icons), function (merge, icon) {
-                        return pi.Obj.assign(merge, { [icon]: icon });
-                    }, {});
-                    return data;
-                },
-                methods: methods
-            };
-            window.App = Vue.createApp(config);
-            window.App.config.devtools = true;
-            window.App.use(function (App) {
-                nano.Install(App);
-            });
-            window.App.mount('#app');
-        });
-    })(window.nano);
-</script>
-</body>
-</html>

package/demos/input/index.html DELETED Viewed

@@ -1,100 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Nano UI Input</title>
-    <link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
-    <link rel="stylesheet" href="../../dist/nano-ui.css">
-    <link rel="stylesheet" href="../style.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
-    <script src="https://vankizmann.github.io/@kizmann/pico-js/dist/@kizmann/pico-js.js"></script>
-    <script src="../../dist/nano-ui.js"></script>
-</head>
-<body>
-<div id="app">
-    <n-form :form="form" :class="{ 'n-inverse': inverse }">
-        <n-form-item label="Inverse">
-            <n-checkbox v-model="inverse">Inverse</n-checkbox>
-        </n-form-item>
-        <n-form-item label="Small">
-            <n-input :value="form.name" size="small" />
-        </n-form-item>
-        <n-form-item label="Default">
-            <n-input v-model="form.name" size="default" />
-        </n-form-item>
-        <n-form-item label="Large">
-            <n-input v-model="form.name" size="large" />
-        </n-form-item>
-        <n-form-item label="Disabled">
-            <n-input v-model="form.name" :disabled="true" />
-        </n-form-item>
-        <n-form-item label="Info">
-            <n-input v-model="form.name" icon="fa fa-times" :icon-disabled="form.name === ''" @icon-click="form.name = ''" />
-        </n-form-item>
-        <n-form-item label="Password">
-            <n-input v-model="form.name" :native-type="nativeType" :icon="icon" @icon-click="changeNative" />
-        </n-form-item>
-        <n-form-item label="Object">
-            <pre>{{ form }}</pre>
-        </n-form-item>
-    </n-form>
-</div>
-<script>
-    pi.Dom.ready(() => {
-        Vue.config.devtools = true;
-        var config = {
-            computed: {
-                icon: function() {
-                    return this.nativeType === 'text' ?
-                        'fa fa-eye-slash' : 'fa fa-eye';
-                }
-            },
-            methods: {
-                changeNative: function() {
-                    this.nativeType = this.nativeType === 'text' ?
-                        'password' : 'text';
-                }
-            },
-            data: function() {
-                var form = {
-                    name: ''
-                };
-                return {
-                    form: form, inverse: false, nativeType: 'password'
-                };
-            }
-        };
-        window.App = new Vue(config).$mount('#app');
-    })
-</script>
-</body>
-</html>

package/demos/map/index.html DELETED Viewed

@@ -1,81 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Nano UI Map</title>
-    <link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
-    <link rel="stylesheet" href="../../dist/nano-ui.css">
-    <link rel="stylesheet" href="../style.css">
-    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvJ7NNFrrSL13b3xEB07Itw0luJSHDTmE"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
-    <script src="https://vankizmann.github.io/@kizmann/pico-js/dist/@kizmann/pico-js.js"></script>
-    <script src="../../dist/nano-ui.js"></script>
-</head>
-<body>
-<div id="app">
-    <n-form :form="form">
-        <n-form-item :label="trans('Address')">
-            <n-button-group>
-                <n-input v-model="address"></n-input>
-                <n-button @click="setMarkerByAddress">{{ trans('Set marker') }}</n-button>
-            </n-button-group>
-        </n-form-item>
-        <n-form-item>
-            <n-map>
-                <n-map-marker ref="marker" :lat.sync="form.lat" :lng.sync="form.lng" :draggable="true">
-                    <div style="padding: 20px; background: yellow; color: red;">Huhu!</div>
-                </n-map-marker>
-            </n-map>
-        </n-form-item>
-        <n-form-item label="Object">
-            <pre>{{ form }}</pre>
-        </n-form-item>
-    </n-form>
-</div>
-<script>
-    pi.Dom.ready(() => {
-        Vue.config.devtools = true;
-        var config = {
-            data: function() {
-                var form = {
-                    lat: 53.565000, lng: 10.042280
-                };
-                return {
-                    form: form, address: ''
-                };
-            },
-            methods: {
-                setMarkerByAddress()
-                {
-                    this.$refs.marker.setMarkerByAddress(this.address);
-                }
-            }
-        };
-        window.App = new Vue(config).$mount('#app');
-    })
-</script>
-</body>
-</html>

package/demos/matrix/index.html DELETED Viewed

@@ -1,104 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Nano UI Matrix</title>
-    <link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
-    <link rel="stylesheet" href="../../dist/nano-ui.css">
-    <link rel="stylesheet" href="../style.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
-    <script src="https://vankizmann.github.io/@kizmann/pico-js/dist/@kizmann/pico-js.js"></script>
-    <script src="../../dist/nano-ui.js"></script>
-</head>
-<body>
-<div id="app">
-    <n-form :form="form" :class="{ 'n-inverse': inverse }">
-        <n-form-item label="Inverse">
-            <n-checkbox v-model="inverse">Inverse</n-checkbox>
-        </n-form-item>
-        <n-form-item label="Tree">
-            <n-matrix v-model="form.cascade" :items="form.value" title-prop="label" :multiple="false">
-                <n-matrix-column label="Test"></n-matrix-column>
-            </n-matrix>
-        </n-form-item>
-    </n-form>
-</div>
-<script>
-    (function (Nano) {
-        'use strict';
-        pi.Dom.ready(function () {
-            Vue.config.devtools = true;
-            var config = {
-                data: function() {
-                    let total = 0;
-                    let childGenerator = function(count, depth, current) {
-                        if ( count === undefined ) {
-                            count = 3;
-                        }
-                        if ( depth === undefined ) {
-                            depth = 3;
-                        }
-                        if ( current === undefined ) {
-                            current = 1;
-                        }
-                        let children = Array(
-                            Math.floor((Math.random() * count)  + 2)
-                        ).fill(null);
-                        pi.Arr.map(children, function (item) {
-                            total++;
-                            item = {
-                                label: 'Item ' + total,
-                                id: 'value-' + total,
-                                children: []
-                            };
-                            if ( current < depth ) {
-                                item.children = childGenerator(count, depth, current + 1);
-                            }
-                            return item;
-                        });
-                        return children;
-                    };
-                    var form = {
-                        value: childGenerator(), cascade: []
-                    };
-                    return { form: form, inverse: false };
-                }
-            };
-            window.App = new Vue(config).$mount('#app');
-        });
-    })(window.Nano);
-</script>
-</body>
-</html>