@kizmann/nano-ui 0.8.37 → 0.9.0

package/docs/files/form/switch.md

@@ -0,0 +1,92 @@
+# Switch
+
+The `<n-switch>` component is a customizable switch component with various options to control its appearance and behavior. Below is a detailed description of its props, methods, and usage.
+
+
+## Demo
+
+```js [demo]
+pi.Obj.assign(window.VueData, {
+    switchBinds: {
+        size: 'md', disabled: false,
+    },
+    switchReact: {
+        model: 'foo'
+    }
+});
+```
+
+```html [demo]
+<n-form>
+    <div class="demo-options">
+        <div class="grid grid--row grid--wrap grid--20-20">
+            <n-form-item class="col--1-1 col--6-12@sm col--3-12@lg" label="Size">
+                <n-select v-model="switchBinds.size" :options="sizes" />
+            </n-form-item>
+            <n-form-item class="col--1-1 col--6-12@sm col--3-12@lg" label="Disabled">
+                <n-switch v-model="switchBinds.disabled">Activate disable state</n-switch>
+            </n-form-item>
+        </div>
+    </div>
+    <div class="demo-display">
+        <div class="grid grid--row grid--wrap grid--40-40 grid--middle">
+            <div class="col--auto">
+                <n-switch :model-value="true" v-bind="switchBinds" on-type="primary">Primary</n-switch>
+            </div>
+            <div class="col--auto">
+                <n-switch v-bind="switchBinds" on-type="secondary">Secondary</n-switch>
+            </div>
+            <div class="col--auto">
+                <n-switch :model-value="true" v-bind="switchBinds" on-type="success">Success</n-switch>
+            </div>
+            <div class="col--auto">
+                <n-switch v-bind="switchBinds" on-type="warning">Warning</n-switch>
+            </div>
+            <div class="col--auto">
+                <n-switch v-bind="switchBinds" on-type="danger">Danger</n-switch>
+            </div>
+            <div class="col--auto">
+                <n-switch v-bind="switchBinds" on-type="info">Info</n-switch>
+            </div>
+        </div>
+        <div class="grid grid--row grid--wrap grid--40-40 grid--middle">
+            <div class="col--auto">
+                <n-switch v-model="switchReact.model" v-bind="switchBinds" on-value="foo" off-value="bar">Switch between to strings</n-switch>
+            </div>
+            <div class="col--flex-1-1">
+                <code style="white-space: initial">{{ switchReact }}</code>
+            </div>
+        </div>
+    </div>
+</n-form>
+```
+
+## Example
+
+```vue
+<template>
+  <n-switch v-model="modelValue" on-value="yes" off-value="no" @click="window.alert('Switch toggled!')">
+    Toggle Switch
+  </n-switch>
+</template>
+<script>
+  export default {
+      data() {
+          return { modelValue: 'yes' };
+      }
+  }
+</script>
+
+```
+
+## Properties
+
+| **Prop**     | **Type**            | **Default** | **Description**                                                                                  |
+|--------------|---------------------|-------------|--------------------------------------------------------------------------------------------------|
+| `modelValue` | `Boolean`           | `false`     | The current value of the switch.                                                                 |
+| `onValue`    | `Any`               | `true`      | The value when the switch is turned on.                                                          |
+| `offValue`   | `Any`               | `false`     | The value when the switch is turned off.                                                         |
+| `onType`     | `String`            | `'primary'` | The style type when the switch is on (e.g., 'primary', 'secondary').                             |
+| `offType`    | `String`            | `'default'` | The style type when the switch is off.                                                           |
+| `size`       | `String`            | `'md'`      | Sets the size of the switch (e.g., 'sm', 'md', 'lg').                                            |
+| `disabled`   | `Boolean`           | `false`     | If true, disables the switch.                                                                    |

package/docs/index.html

@@ -1,57 +1,176 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <title>nano.ui</title>
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-  <meta name="description" content="Description">
-  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-  <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">
-  <link rel="stylesheet" href="//unpkg.com/backpack.css@2.0.0/lib/backpack.css">
-  <link rel="stylesheet" href="./dist/index.css">
-  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
-  <link rel="stylesheet" href="../dist/nano-ui.css">
+    <meta charset="UTF-8">
+    <title>nano.ui</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="description" content="Description">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="//unpkg.com/backpack.css@2.0.0/lib/backpack.css">
+    <link rel="stylesheet" href="//unpkg.com/@fortawesome/fontawesome-free/css/all.min.css">
+    <link rel="stylesheet" href="../dist/nano-ui.css">
+    <link rel="stylesheet" href="../dist/themes/light.css">
+    <link rel="stylesheet" href="./dist/docs.css">
 </head>
 <body>
-  <div id="app"></div>
-  <script src="//unpkg.com/babel-standalone@6/babel.min.js"></script>
-  <script src="//unpkg.com/vue/dist/vue.js"></script>
-  <script src="//vankizmann.github.io/@kizmann/pico-js/dist/@kizmann/pico-js.js"></script>
-  <script src="../dist/nano-ui.js"></script>
-
-  <script src="//unpkg.com/docsify-demo-box-vue@1.1.0/dist/docsify-demo-box-vue.min.js"></script>
-  <script>
-
-    var jsResources = [
-      '<scr' + 'ipt src="//unpkg.com/babel-standalone@6/babel.min.js"></scr' + 'ipt>',
-      '<scr' + 'ipt src="//unpkg.com/vue/dist/vue.js"></scr' + 'ipt>',
-      '<scr' + 'ipt src="//vankizmann.github.io/@kizmann/pico-js/dist/@kizmann/pico-js.js"></scr' + 'ipt>',
-      '<scr' + 'ipt src="//vankizmann.github.io/@kizmann/pico-js/dist/nano-ui.js"></scr' + 'ipt>'
-    ];
+<header>
+    <div class="wrapper">
+        <div class="logo">
+            <a href="./#/README">
+                <img src="../nano.svg" alt="nano-ui">
+            </a>
+        </div>
+        <div class="social">
+            <a href="https://www.paypal.com/paypalme/vankizmann" target="_blank">
+                <i class="fab fa-paypal"></i> Donate
+            </a>
+        </div>
+        <div class="social blue">
+            <a href="https://github.com/vankizmann/nano-ui" target="_blank">
+                <i class="fab fa-github"></i> Github
+            </a>
+        </div>
+    </div>
+</header>
+<div id="app">
+    <!-- Docs -->
+</div>
+
+<script src="//unpkg.com/vue@3/dist/vue.global.js"></script>
+<script src="//unpkg.com/babel-standalone@6/babel.min.js"></script>
+<script src="//unpkg.com/moment@2.30.1/min/moment.min.js"></script>
+<script src="//unpkg.com/@kizmann/pico-js/dist/pico-js.js"></script>
+<script src="../dist/nano-ui.js"></script>
+
+<script>
+
+    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();
+            });
 
-    jsResources = jsResources.join("\n");
+            if ( ! pi.Any.isEmpty(window.VueData) ) {
+                window.VueData = pi.Obj.assign({}, window.DefaultVueData);
+            }
 
+            if ( ! pi.Any.isEmpty(window.VueRemote) ) {
+                window.VueRemote.unmount();
+            }
 
-    var cssResources = '@import url("//cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css");';
-    var bootCode = "var foo = 'bar'";
+            let pattern = /```js\s\[demo]([^`]*)```/gm;
 
-    var basePath = window.location.href.match(/github/) ? '/nano-ui/docs/' : '/docs/';
+            let globaljs = pi.Arr.each(markdown.match(pattern) || [], (text) => {
+                return text.replace(pattern, "$1");
+            });
 
-    window.$docsify = {
-      name: 'nano.ui',
-      repo: 'https://github.com/vankizmann/nano-ui',
-      logo: 'https://vankizmann.github.io/nano-ui/nano.png',
-      basePath: basePath,
-      relativePath: false,
-      themeColor: '#2877FA',
-      autoHeader: true,
-      loadSidebar: true,
-      plugins: [
-        DemoBoxVue.create(jsResources, cssResources, bootCode)
-      ]
+            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>(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: 2, subMaxLevel: 2, topMargin: 90
     };
-  </script>
-  <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
-  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
+
+    options.plugins = [
+        DemoPlugin
+    ];
+
+    if ( pi.Any.isEmpty(options) ) {
+        options.repo = 'https://github.com/vankizmann/nano-ui'
+    }
+
+    window.$docsify = options;
+</script>
+<script src="//unpkg.com/docsify@4.12.1/lib/docsify.min.js"></script>
+<script src="//unpkg.com/docsify@4.12.1/lib/plugins/search.min.js"></script>
+<script src="//unpkg.com/docsify@4.12.1/lib/plugins/emoji.min.js"></script>
 </body>
 </html>

package/docs/src/scss/docsify/basic/_layout.sass

@@ -14,7 +14,6 @@ body:not(.ready)
 
 div#app
   font-size: 30px
-  font-weight: lighter
   margin: 40vh auto
   text-align: center
 
@@ -48,8 +47,6 @@ html, body
   height: 100%
 
 body
-  -moz-osx-font-smoothing: grayscale
-  -webkit-font-smoothing: antialiased
   color: $color-black
   font-family: $font-family
   font-size: 15px
@@ -295,7 +292,7 @@ main.hidden
 
 body.sticky
   .sidebar, .sidebar-toggle
-    position: fixed
+    //position: fixed
 
 /* main content */
 .content
@@ -310,7 +307,7 @@ body.sticky
 /* markdown content found on pages */
 .markdown-section
   margin: 0 auto
-  max-width: 80%
+  max-width: 960px
   padding: 30px 15px 40px 15px
   position: relative
 
@@ -410,7 +407,7 @@ body.close
 
 @media screen and (max-width: 768px)
   .github-corner, .sidebar-toggle, .sidebar
-    position: fixed
+    //position: fixed
 
   .app-nav
     margin-top: 16px

package/docs/src/scss/docsify/syntax.scss

@@ -0,0 +1,139 @@
+
+.markdown-section pre {
+    border-radius: $lg-radius;
+    background-color: $color-gray-90;
+    font-family: 'Roboto Mono', Monaco, courier, monospace;
+    overflow: auto;
+    padding: 0;
+    position: relative;
+    word-wrap: normal;
+    margin-bottom: 30px;
+}
+
+.markdown-section pre > code {
+    padding: 25px 30px !important;
+}
+
+.markdown-section pre,
+.markdown-section pre code {
+    font-size: 14px;
+    line-height: 1.6rem;
+}
+
+/* code highlight */
+.token.comment, .token.prolog, .token.doctype, .token.cdata {
+    color: $color-gray-55;
+}
+
+.token.namespace {
+    opacity: 0.7;
+}
+
+.token.boolean, .token.number {
+    color: #c76b29;
+}
+
+.token.punctuation {
+    color: $color-gray-40;
+}
+
+.token.property {
+    color: mix($color-gray-25, $color-warning, 15%);
+}
+
+.token.tag {
+    color: mix($color-gray-25, $color-primary, 15%);
+}
+
+.token.string {
+    color: mix($color-gray-25, $color-info, 15%);
+}
+
+.token.selector {
+    color: #6679cc;
+}
+
+.token.attr-name {
+    color: mix($color-gray-25, $color-success, 15%);
+}
+
+.token.entity, .token.url, .language-css .token.string, .style .token.string {
+    color: #22a2c9;
+}
+
+.token.attr-value, .token.control, .token.directive, .token.unit {
+    color: mix($color-gray-25, $color-danger, 15%);
+}
+
+.token.keyword, .token.function {
+    color: mix($color-gray-25, $color-warning, 15%);
+}
+
+.token.statement, .token.regex, .token.atrule {
+    color: #22a2c9;
+}
+
+.token.placeholder, .token.variable {
+    color: #3d8fd1;
+}
+
+.token.deleted {
+    text-decoration: line-through;
+}
+
+.token.inserted {
+    border-bottom: 1px dotted #202746;
+    text-decoration: none;
+}
+
+.token.italic {
+    font-style: italic;
+}
+
+.token.important, .token.bold {
+    font-weight: bold;
+}
+
+.token.important {
+    color: #c94922;
+}
+
+.token.entity {
+    cursor: help;
+}
+
+.markdown-section pre > code {
+    background-color: transparent;
+    color: $color-gray-10;
+    display: block;
+    line-height: inherit;
+    margin: 0 2px;
+    max-width: inherit;
+    overflow: inherit;
+    padding: 2.2em 5px;
+    white-space: inherit;
+}
+
+.markdown-section code::after, .markdown-section code::before {
+    letter-spacing: 0.05rem;
+}
+
+code .token {
+    min-height: 1.5rem;
+    position: relative;
+    left: auto;
+}
+
+pre::after {
+    color: $color-gray-50;
+    content: attr(data-lang);
+    font-size: 12px;
+    font-weight: 600;
+    height: 15px;
+    line-height: 15px;
+    padding: 5px 10px 0;
+    position: absolute;
+    right: 0;
+    text-align: right;
+    top: 0;
+}

package/docs/src/scss/docsify/vue.sass

@@ -1,22 +1,9 @@
 
-$font-family: 'Inter', 'Helvetica', 'Arial', sans-serif !default
+$font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !default
 $sidebar-width: 320px !default
 
 @import 'basic/_layout'
-//@import 'basic/_coverpage'
-
-.demo-block
-  border-color: $color-gray-10 !important
-  box-shadow: 0 1px 3px rgba($color-black, 0.05) !important
-
-  &:hover
-    box-shadow: 0 1px 10px rgba($color-black, 0.05) !important
-
-  .demo-block-control span
-    color: var(--theme-color, $color-primary) !important
-
-  .description button
-    background: var(--theme-color, $color-primary) !important
+@import 'basic/_coverpage'
 
 body
   background-color: $color-white