@kizmann/nano-ui 1.0.0 → 1.0.1

package/docs/src/js/backup.js

@@ -1,128 +0,0 @@
-
-var GenerateItems = function (count, loop) {
-    return pi.Arr.each(pi.Arr.make(count), (index) => {
-
-        var item = {
-            id: 'item-' + pi.UUID(), label: 'Item ' + index, image: 'https://picsum.photos/260/160.jpg?' + pi.UUID(), date: new Date,
-        }
-
-        if ( loop > 1 ) {
-            item.children = GenerateItems(10, loop-1)
-        }
-
-        return item;
-    });
-};
-
-let DemoPlugin = function (hook, vm) {
-
-    // Global vue data
-    window.VueData = window.DefaultVueData = {
-        itemsMini: GenerateItems(50, 1),
-        itemsMidi: GenerateItems(500, 1),
-        itemsMaxi: GenerateItems(1000, 2),
-    };
-
-    window.DefaultVueData.types = {
-        'primary': 'Primary',
-        'secondary': 'Secondary',
-        'success': 'Success',
-        'warning': 'Warning',
-        'danger': 'Danger',
-        'info': 'Info',
-    };
-
-    window.DefaultVueData.sizes = {
-        'xs': 'Mini',
-        'sm': 'Small',
-        'md': 'Medium',
-        'lg': 'Large'
-    };
-
-    window.DefaultVueData.icons = {
-        'fa fa-search': 'Search',
-        'fa fa-star': 'Star',
-        'fa fa-check': 'Check',
-        'fa fa-trash': 'Trash'
-    },
-
-        // Remote vue app
-        window.VueRemote = null;
-
-    hook.beforeEach(function (markdown) {
-
-        pi.Dom.find('#temp-script').each(function (el) {
-            el.remove();
-        });
-
-        if ( ! pi.Any.isEmpty(window.VueData) ) {
-            window.VueData = pi.Obj.assign({}, window.DefaultVueData);
-        }
-
-        if ( ! pi.Any.isEmpty(window.VueRemote) ) {
-            window.VueRemote.unmount();
-        }
-
-        let pattern = /```js\s\[demo]([^`]*)```/gm;
-
-        let globaljs = pi.Arr.each(markdown.match(pattern) || [], (text) => {
-            return text.replace(pattern, "$1");
-        });
-
-        pi.Dom.make('script', { id: "temp-script", innerHTML: globaljs.join("\n")})
-            .appendTo(document.body)
-
-        markdown = markdown.replace(/```html\s\[demo]([^`]*)```/gm,
-            '<div class="demo-wrapper">$1</div>');
-
-        return markdown.replace(/```[a-z]+\s\[demo][^`]*```/gm, '');
-    });
-
-    hook.afterEach(function (html) {
-
-        html = html.replace(/<code>(Mixed|Any|String|Boolean|Array|Object)<\/code>/gm,
-            '<code data-type="$1">$1</code>');
-
-        return '<div id="vue-remote">' + html + '</div>';
-    });
-
-    hook.doneEach(function () {
-
-        let options = {
-            data: function () {
-                return window.VueData;
-            }
-        };
-
-        // Create vue instance
-        window.VueRemote = window.Vue
-            .createApp(options);
-
-        window.VueRemote
-            .use(window.nano.Install);
-
-        window.VueRemote.mount('#main');
-    });
-
-    console.log('DemoPlugin done!');
-}
-
-let options = {
-    name: 'nano.ui', loadSidebar: true, search: 'auto',  depth: 1, subMaxLevel: 1, topMargin: 90
-};
-
-let PagetitlePlugin = function(hook, vm) {
-    hook.doneEach(function() {
-        document.title += ' | nano.ui';
-    });
-}
-
-options.plugins = [
-    DemoPlugin, PagetitlePlugin
-];
-
-if ( pi.Any.isEmpty(options) ) {
-    options.repo = 'https://github.com/vankizmann/nano-ui'
-}
-
-window.$docsify = options;

package/docs/src/js/index.js

@@ -1,21 +0,0 @@
-
-import * as Vue from "vue/dist/vue.esm-bundler";
-window.Vue = Vue;
-
-// docsify.js
-window.$docsify = require('docsify')
-
-// moment.js
-window.moment = require('moment');
-
-// pico.js
-window.pi = require('@kizmann/pico-js');
-
-
-window.pi.Dom.ready(() => {
-    require('./theme/basic.js');
-    require('./theme/docsify.js');
-
-    // docsify.js search plugin
-    require('docsify/lib/plugins/search');
-});

package/docs/src/js/plugin/vue-demo-plugin.js

@@ -1,97 +0,0 @@
-import { Dom, Obj, Arr, Any } from '@kizmann/pico-js';
-import { Install as NanoInstall } from '../../../../src/index.js';
-
-export const VueDemoPlugin = function (hook, vm) {
-
-    // Global vue data
-    window.VueData = window.DefaultVueData = {
-        // itemsMini: GenerateItems(50, 1),
-        // itemsMidi: GenerateItems(500, 1),
-        // itemsMaxi: GenerateItems(1000, 2),
-    };
-
-    window.DefaultVueData.types = {
-        'primary': 'Primary',
-        'secondary': 'Secondary',
-        'success': 'Success',
-        'warning': 'Warning',
-        'danger': 'Danger',
-        'info': 'Info',
-    };
-
-    window.DefaultVueData.sizes = {
-        'xs': 'Mini',
-        'sm': 'Small',
-        'md': 'Medium',
-        'lg': 'Large'
-    };
-
-    window.DefaultVueData.icons = {
-        'fa fa-search': 'Search',
-        'fa fa-star': 'Star',
-        'fa fa-check': 'Check',
-        'fa fa-trash': 'Trash'
-    },
-
-        // Remote vue app
-        window.VueRemote = null;
-
-    hook.beforeEach(function (markdown) {
-
-        Dom.find('#temp-script').each(function (el) {
-            el.remove();
-        });
-
-        if ( ! Any.isEmpty(window.VueData) ) {
-            window.VueData = Obj.assign({}, window.DefaultVueData);
-        }
-
-        if ( ! Any.isEmpty(window.VueRemote) ) {
-            window.VueRemote.unmount();
-        }
-
-        let pattern = /```js\s\[demo]([^`]*)```/gm;
-
-        let globaljs = Arr.each(markdown.match(pattern) || [], (text) => {
-            return text.replace(pattern, "$1");
-        });
-
-        Dom.make('script', { id: "temp-script", innerHTML: globaljs.join("\n")})
-            .appendTo(document.body)
-
-        markdown = markdown.replace(/```html\s\[demo]([^`]*)```/gm,
-            '<div class="demo-wrapper">$1</div>');
-
-        return markdown.replace(/```[a-z]+\s\[demo][^`]*```/gm, '');
-    });
-
-    hook.afterEach(function (html) {
-
-        html = html.replace(/<code>(Mixed|Any|String|Boolean|Array|Object)<\/code>/gm,
-            '<code data-type="$1">$1</code>');
-
-        return '<div id="vue-remote">' + html + '</div>';
-    });
-
-    hook.doneEach(function () {
-
-        let options = {
-            data: function () {
-                return Obj.clone(window.VueData);
-            }
-        };
-
-        // Create vue instance
-        window.VueRemote = window.Vue.createApp(options);
-
-        window.VueRemote.use((app) => {
-            NanoInstall(app)
-        });
-
-        window.VueRemote.mount('#main');
-    });
-
-    console.log('DemoPlugin done!');
-}
-
-export default VueDemoPlugin;

package/docs/src/js/theme/basic.js

@@ -1,31 +0,0 @@
-import { Dom, Cookie } from "@kizmann/pico-js";
-
-const theme = Cookie.get('theme', 'dark');
-
-Dom.find('[data-theme-' + theme + ']').addClass('active');
-
-Dom.find('[data-theme-light]').on('click', () => {
-    Cookie.set('theme', 'light'); window.location.reload();
-});
-
-Dom.find('[data-theme-dark]').on('click', () => {
-    Cookie.set('theme', 'dark'); window.location.reload();
-});
-
-Dom.find('[data-theme-src]').each((el) => {
-    el.src = Dom.find(el).attr('data-theme-src').replace('{theme}', theme);
-});
-
-Dom.find('[data-theme-href]').each((el) => {
-    el.href = Dom.find(el).attr('data-theme-href').replace('{theme}', theme);
-});
-
-Dom.find(document.body).live('click', '.matching-post', () => {
-    Dom.find('input[type="search"]').value('').fire('input');
-});
-
-Dom.find(document.body).on('keydown', (e) => {
-    if ( e.keyCode === 27 ) {
-        Dom.find('input[type="search"]').value('').fire('input');
-    }
-});

package/docs/src/js/theme/docsify.js

@@ -1,11 +0,0 @@
-import VueDemoPlugin from "../plugin/vue-demo-plugin.js";
-
-let options = {
-    name: 'nano.ui', loadSidebar: true, search: 'auto',  depth: 1, subMaxLevel: 1, topMargin: 90
-};
-
-options.plugins = [
-    VueDemoPlugin
-]
-
-window.$docsify = options;

package/docs/src/scss/index-dark.scss

@@ -1,3 +0,0 @@
-@import "./root/vars-dark";
-
-@import "./index";

package/docs/src/scss/index-light.scss

@@ -1,3 +0,0 @@
-@import "./root/vars-light";
-
-@import "./index";

package/docs/src/scss/index.scss

@@ -1,15 +0,0 @@
-@import "./mixins/base";
-@import "./mixins/media";
-@import "./mixins/grid";
-@import "./mixins/space";
-
-@import "./theme/default";
-@import "./theme/layout";
-@import "./theme/loader";
-@import "./theme/header";
-@import "./theme/search";
-@import "./theme/navigation";
-@import "./theme/markdown";
-@import "./theme/syntax";
-@import "./theme/table";
-@import "./theme/progress";

package/docs/src/scss/mixins/base.scss

@@ -1,14 +0,0 @@
-@function reverse($list) {
-
-    $result: ();
-
-    @for $i from length($list) * -1 through -1 {
-        $result: append($result, nth($list, abs($i)));
-    }
-
-    @return $result;
-}
-
-@function strip($number) {
-    @return $number / ($number * 0 + 1);
-}

package/docs/src/scss/mixins/grid.scss

@@ -1,213 +0,0 @@
-@use "sass:math";
-@import "./base";
-@import "./media";
-
-$--grid-steps: (
-    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
-) !default;
-
-$--grid-gutters: (
-    10px, 15px, 20px, 30px, 40px, 60px
-) !default;
-
-@mixin grid-container($suffix: '') {
-
-    .grid#{$suffix} {
-        display: flex;
-    }
-
-    .grid--row#{$suffix} {
-        flex-direction: row;
-    }
-
-    .grid--col#{$suffix} {
-        flex-direction: column;
-    }
-
-    .grid--wrap#{$suffix} {
-        flex-wrap: wrap;
-    }
-
-    .grid--row.grid--reverse#{$suffix},
-    .grid--row#{$suffix}.grid--reverse#{$suffix} {
-        flex-direction: row-reverse;
-    }
-
-    .grid--col.grid--reverse#{$suffix},
-    .grid--col#{$suffix}.grid--reverse#{$suffix} {
-        flex-direction: column-reverse;
-    }
-
-    .grid--row.grid--stretch#{$suffix},
-    .grid--row#{$suffix}.grid--stretch#{$suffix} {
-        justify-content: stretch;
-    }
-
-    .grid--col.grid--stretch#{$suffix},
-    .grid--col#{$suffix}.grid--stretch#{$suffix} {
-        align-items: stretch;
-    }
-
-    .grid--row.grid--top#{$suffix},
-    .grid--row#{$suffix}.grid--top#{$suffix},
-    .grid--col.grid--left#{$suffix},
-    .grid--col#{$suffix}.grid--left#{$suffix}{
-        align-items: flex-start;
-    }
-
-    .grid--row.grid--middle#{$suffix},
-    .grid--row#{$suffix}.grid--middle#{$suffix},
-    .grid--col.grid--center#{$suffix},
-    .grid--col#{$suffix}.grid--center#{$suffix}{
-        align-items: center;
-    }
-
-    .grid--row.grid--bottom#{$suffix},
-    .grid--row#{$suffix}.grid--bottom#{$suffix},
-    .grid--col.grid--right#{$suffix},
-    .grid--col#{$suffix}.grid--right#{$suffix} {
-        align-items: flex-end;
-    }
-
-    .grid--row.grid--left#{$suffix},
-    .grid--row#{$suffix}.grid--left#{$suffix},
-    .grid--col.grid--top#{$suffix},
-    .grid--col#{$suffix}.grid--top#{$suffix} {
-        justify-content: flex-start;
-    }
-
-    .grid--row.grid--center#{$suffix},
-    .grid--row#{$suffix}.grid--center#{$suffix},
-    .grid--col.grid--middle#{$suffix},
-    .grid--col#{$suffix}.grid--middle#{$suffix} {
-        justify-content: center;
-    }
-
-    .grid--row.grid--right#{$suffix},
-    .grid--row#{$suffix}.grid--right#{$suffix},
-    .grid--col.grid--bottom#{$suffix},
-    .grid--col#{$suffix}.grid--bottom#{$suffix} {
-        justify-content: flex-end;
-    }
-
-}
-
-@mixin grid-gutter($gutter, $suffix: '') {
-
-    .grid--#{strip($gutter)}#{$suffix} {
-        width: calc(100% + #{$gutter});
-        margin-left: -#{$gutter / 2};
-        margin-right: -#{$gutter / 2};
-    }
-
-    .grid--#{strip($gutter)}-#{strip($gutter)}#{$suffix} {
-        width: calc(100% + #{$gutter});
-        margin-left: -#{math.div($gutter, 2)};
-        margin-right: -#{math.div($gutter, 2)};
-        margin-top: -#{math.div($gutter, 2)};
-        margin-bottom: -#{math.div($gutter, 2)};
-    }
-
-    .grid--#{strip($gutter)}#{$suffix} > [class^="col"],
-    .grid--#{strip($gutter)}#{$suffix} > [class*="col"] {
-        padding-left: math.div($gutter, 2);
-        padding-right: math.div($gutter, 2);
-    }
-
-    .grid--#{strip($gutter)}-#{strip($gutter)}#{$suffix} > [class^="col"],
-    .grid--#{strip($gutter)}-#{strip($gutter)}#{$suffix} > [class*="col"] {
-        padding-left: math.div($gutter, 2);
-        padding-right: math.div($gutter, 2);
-        padding-top: math.div($gutter, 2);
-        padding-bottom: math.div($gutter, 2);
-    }
-
-}
-
-@mixin grid-columns($size, $suffix: '') {
-
-    .col#{$suffix},
-    .col--auto#{$suffix} {
-        width: auto;
-    }
-
-    .col--top#{$suffix} {
-        margin-bottom: auto;
-    }
-
-    .col--middle#{$suffix} {
-        margin-top: auto;
-        margin-bottom: auto;
-    }
-
-    .col--bottom#{$suffix} {
-        margin-top: auto;
-    }
-
-    .col--left#{$suffix} {
-        margin-right: auto;
-    }
-
-    .col--center#{$suffix} {
-        margin-right: auto;
-        margin-left: auto;
-    }
-
-    .col--right#{$suffix} {
-        margin-left: auto;
-    }
-
-    .col--flex-1#{$suffix},
-    .col--flex-1-0#{$suffix} {
-        flex: 1 0 auto;
-    }
-
-    .col--flex-0#{$suffix},
-    .col--flex-0-1#{$suffix}{
-        flex: 0 1 auto;
-    }
-
-    .col--flex-none#{$suffix},
-    .col--flex-0-0#{$suffix}{
-        flex: 0 0 auto;
-    }
-
-    .col--flex-auto#{$suffix},
-    .col--flex-1-1#{$suffix} {
-        flex: 1 1 auto;
-    }
-
-    .col--flex-fixed#{$suffix} {
-        flex: 1 1 auto;
-        min-height: 0;
-        max-height: 100%;
-    }
-
-    @for $i from 1 through 10 {
-        .col--order-#{$i}#{$suffix} {
-            order: $i;
-        }
-    }
-
-    @for $i from 1 through $size {
-        .col--#{$i}-#{$size}#{$suffix} {
-            width: #{(math.div(100%, $size) * $i) - 0.001};
-        }
-    }
-
-}
-
-@include media() {
-
-    @include grid-container($suffix);
-
-    @each $gutter in reverse($--grid-gutters) {
-        @include grid-gutter($gutter, $suffix);
-    }
-
-    @each $steps in reverse($--grid-steps) {
-        @include grid-columns($steps, $suffix);
-    }
-
-}
-

package/docs/src/scss/mixins/media.scss

@@ -1,35 +0,0 @@
-@use 'sass:map';
-@import "./base";
-
-$--media-steps: (
-    'xs': 'screen and (min-width: 576px)',
-    'sm': 'screen and (min-width: 768px)',
-    'md': 'screen and (min-width: 992px)',
-    'lg': 'screen and (min-width: 1200px)',
-    'xl': 'screen and (min-width: 1440px)'
-) !default;
-
-@mixin media($suffix: '') {
-
-    @if $suffix == '' {
-        $suffix: $suffix !global;
-        @content;
-    }
-
-    @if $suffix == '' {
-        @each $suffix, $breakpoint in $--media-steps {
-            @media #{$breakpoint} {
-                $suffix: \@ + $suffix !global;
-                @content;
-            }
-        }
-    }
-
-    @if $suffix != '' {
-        @media #{map.get($--media-steps, $suffix)} {
-            $suffix: \@ + $suffix !global;
-            @content;
-        }
-    }
-
-}

package/docs/src/scss/mixins/space.scss

@@ -1,61 +0,0 @@
-@import "./base";
-@import "./media";
-
-$--space-gutter: (
-    10px, 15px, 20px, 30px, 40px, 60px
-) !default;
-
-@mixin margin($gutter, $suffix: '') {
-
-    .margin-#{strip($gutter)}#{$suffix} {
-        margin: $gutter;
-    }
-
-    .margin-#{strip($gutter)}--top#{$suffix} {
-        margin-top: $gutter;
-    }
-
-    .margin-#{strip($gutter)}--bottom#{$suffix} {
-        margin-bottom: $gutter;
-    }
-
-    .margin-#{strip($gutter)}--left#{$suffix} {
-        margin-left: $gutter;
-    }
-
-    .margin-#{strip($gutter)}--right#{$suffix} {
-        margin-right: $gutter;
-    }
-
-}
-
-@mixin padding($gutter, $suffix: '') {
-
-    .padding-#{strip($gutter)}#{$suffix} {
-        padding: $gutter;
-    }
-
-    .padding-#{strip($gutter)}--top#{$suffix} {
-        padding-top: $gutter;
-    }
-
-    .padding-#{strip($gutter)}--bottom#{$suffix} {
-        padding-bottom: $gutter;
-    }
-
-    .padding-#{strip($gutter)}--left#{$suffix} {
-        padding-left: $gutter;
-    }
-
-    .padding-#{strip($gutter)}--right#{$suffix} {
-        padding-right: $gutter;
-    }
-
-}
-
-@include media() {
-    @each $gutter in reverse($--space-gutter) {
-        @include margin($gutter, $suffix);
-        @include padding($gutter, $suffix);
-    }
-}

package/docs/src/scss/root/vars-dark.scss

@@ -1,15 +0,0 @@
-@use "sass:color";
-
-$color-white:           #ffffff;
-$color-black:           #111111;
-
-$color-foreground-abs:       #ffffff;
-$color-background-abs:       #000000;
-
-$color-foreground:      $color-white;
-$color-background:      $color-black;
-
-$color-form:            color.mix($color-white, $color-black, 5%);
-$color-input:           color.mix($color-white, $color-black, 5%);
-
-@import "./vars";

package/docs/src/scss/root/vars-light.scss

@@ -1,15 +0,0 @@
-@use "sass:color";
-
-$color-white:           #ffffff;
-$color-black:           #111111;
-
-$color-foreground-abs:       #000000;
-$color-background-abs:       #ffffff;
-
-$color-foreground:      $color-black;
-$color-background:      $color-white;
-
-$color-form:            color.mix($color-black, $color-white, 5%);
-$color-input:           $color-white;
-
-@import "./vars";