@kizmann/nano-ui 0.9.10 → 1.0.0

package/.github/workflows/compile-deploy-publish.yml

@@ -0,0 +1,65 @@
+name: compile-deploy-publish
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  compile-deploy-publish:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '16'
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build package
+        run: yarn build
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Get current version
+        id: get_version
+        run: |
+          version=$(node -p "require('./package.json').version")
+          echo "PACKAGE_VERSION=$version" >> $GITHUB_ENV
+
+      - name: Fetch all tags
+        run: git fetch --tags
+
+      - name: Check if tag already exists
+        id: check_tag
+        run: |
+          if git rev-parse "v$PACKAGE_VERSION" >/dev/null 2>&1; then
+            echo "Tag v$PACKAGE_VERSION already exists."
+            echo "exists=true" >> $GITHUB_OUTPUT
+          else
+            echo "Tag v$PACKAGE_VERSION does not exist yet."
+            echo "exists=false" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Create and push tag
+        if: steps.check_tag.outputs.exists == 'false'
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git tag v$PACKAGE_VERSION
+          git push origin v$PACKAGE_VERSION
+
+      - name: Set up .npmrc
+        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc
+
+      - name: Create and push tag
+        if: steps.check_tag.outputs.exists == 'false'
+        run: yarn publish --new-version $(node -p "require('./package.json').version") --non-interactive

package/README.md

@@ -1,4 +1,4 @@
-<p align="center"><img width="170" src="https://github.com/vankizmann/nano-ui/blob/master/nano.svg?raw=true" alt="nano-ui"></p>
+<p align="center"><img width="170" src="https://github.com/vankizmann/nano-ui/blob/master/assets/nano-ui-dark.svg?raw=true" alt="nano-ui"></p>
 
 <p align="center">
   <a href="https://www.npmjs.org/package/@kizmann/nano-ui">

package/assets/nano-ui-dark.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 140">
+  <defs>
+    <style>
+      .b {
+        fill: #ffffff;
+      }
+
+      .c {
+        fill: #d31f9d;
+      }
+    </style>
+  </defs>
+  <path class="b" d="M296.5034,107.1878c-19.0781,0-34.5996-15.8745-34.5996-35.3877s15.5215-35.387,34.5996-35.387,34.5989,15.8745,34.5989,35.387-15.5208,35.3877-34.5989,35.3877ZM296.5034,50.6632c-11.2207,0-20.3496,9.4819-20.3496,21.137s9.1289,21.1377,20.3496,21.1377,20.3489-9.4827,20.3489-21.1377-9.1282-21.137-20.3489-21.137Z"/>
+  <path class="b" d="M62.8857,36.4278c-9.9966,0-17.8507,3.4847-23.4836,8.8643l-2.7956-4.3571h-7.669v28.2469c-.0254.5649-.0399,1.1302-.0399,1.6953v34.7805h15v-34.7805c0-14.3555,10.229-19.4495,18.988-19.4495,10.5366,0,16.5798,7.0891,16.5798,19.4495v34.7805h15v-34.7805c0-20.6052-12.6907-34.4495-31.5798-34.4495Z"/>
+  <path class="b" d="M173.2802,40.9351h-7.669l-3.3257,5.1835c-6.2037-6.0084-14.5682-9.7054-23.7662-9.7054-19.0781,0-34.5989,15.8745-34.5989,35.387s15.5208,35.3877,34.5989,35.3877c8.9164,0,17.0548-3.4688,23.1961-9.1544l3.8958,6.0721h7.669v-63.1704ZM138.5193,92.9378c-11.2207,0-20.3489-9.4827-20.3489-21.1377s9.1282-21.137,20.3489-21.137,20.3496,9.4819,20.3496,21.137-9.1289,21.1377-20.3496,21.1377Z"/>
+  <path class="b" d="M221.4214,36.4278c-10.0105,0-17.8723,3.4943-23.5068,8.8863l-2.8096-4.3791h-7.669v29.783c-.0002.0531-.0034.1061-.0034.1592v33.2805h15v-33.2805c0-14.3555,10.229-19.4495,18.9888-19.4495,10.5359,0,16.5791,7.0891,16.5791,19.4495v33.2805h15v-33.2805c0-20.6052-12.6907-34.4495-31.5791-34.4495Z"/>
+  <rect class="c" x="276.3458" y="117.7933" width="40.8201" height="12"/>
+</svg>

package/assets/nano-ui-light.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 140">
+  <defs>
+    <style>
+      .b {
+        fill: #111111;
+      }
+
+      .c {
+        fill: #d31f9d;
+      }
+    </style>
+  </defs>
+  <path class="b" d="M296.5034,107.1878c-19.0781,0-34.5996-15.8745-34.5996-35.3877s15.5215-35.387,34.5996-35.387,34.5989,15.8745,34.5989,35.387-15.5208,35.3877-34.5989,35.3877ZM296.5034,50.6632c-11.2207,0-20.3496,9.4819-20.3496,21.137s9.1289,21.1377,20.3496,21.1377,20.3489-9.4827,20.3489-21.1377-9.1282-21.137-20.3489-21.137Z"/>
+  <path class="b" d="M62.8857,36.4278c-9.9966,0-17.8507,3.4847-23.4836,8.8643l-2.7956-4.3571h-7.669v28.2469c-.0254.5649-.0399,1.1302-.0399,1.6953v34.7805h15v-34.7805c0-14.3555,10.229-19.4495,18.988-19.4495,10.5366,0,16.5798,7.0891,16.5798,19.4495v34.7805h15v-34.7805c0-20.6052-12.6907-34.4495-31.5798-34.4495Z"/>
+  <path class="b" d="M173.2802,40.9351h-7.669l-3.3257,5.1835c-6.2037-6.0084-14.5682-9.7054-23.7662-9.7054-19.0781,0-34.5989,15.8745-34.5989,35.387s15.5208,35.3877,34.5989,35.3877c8.9164,0,17.0548-3.4688,23.1961-9.1544l3.8958,6.0721h7.669v-63.1704ZM138.5193,92.9378c-11.2207,0-20.3489-9.4827-20.3489-21.1377s9.1282-21.137,20.3489-21.137,20.3496,9.4819,20.3496,21.137-9.1289,21.1377-20.3496,21.1377Z"/>
+  <path class="b" d="M221.4214,36.4278c-10.0105,0-17.8723,3.4943-23.5068,8.8863l-2.8096-4.3791h-7.669v29.783c-.0002.0531-.0034.1061-.0034.1592v33.2805h15v-33.2805c0-14.3555,10.229-19.4495,18.9888-19.4495,10.5359,0,16.5791,7.0891,16.5791,19.4495v33.2805h15v-33.2805c0-20.6052-12.6907-34.4495-31.5791-34.4495Z"/>
+  <rect class="c" x="276.3458" y="117.7933" width="40.8201" height="12"/>
+</svg>

package/assets/pico-js-dark.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 140">
+  <defs>
+    <style>
+      .b {
+        fill: #ffffff;
+      }
+
+      .c {
+        fill: #ecd408;
+      }
+    </style>
+  </defs>
+  <path class="b" d="M271.224,106.9426c-19.0781,0-34.5996-15.8745-34.5996-35.3877s15.5215-35.387,34.5996-35.387,34.5989,15.8745,34.5989,35.387-15.5208,35.3877-34.5989,35.3877ZM271.224,50.4179c-11.2207,0-20.3496,9.4819-20.3496,21.137s9.1289,21.1377,20.3496,21.1377,20.3489-9.4827,20.3489-21.1377-9.1282-21.137-20.3489-21.137Z"/>
+  <path class="b" d="M54.1858,129.9574h14.25v-29.608c5.7433,4.3386,12.8305,6.9182,20.5022,6.9182,19.0781,0,34.5989-15.8745,34.5989-35.3877s-15.5208-35.387-34.5989-35.387c-9.1979,0-17.5625,3.697-23.7662,9.7054l-3.3257-5.1835h-7.669l.0087,88.9426ZM88.9381,93.0176c-11.2207,0-20.3496-9.4827-20.3496-21.1377s9.1289-21.137,20.3496-21.137,20.3489,9.4819,20.3489,21.137-9.1282,21.1377-20.3489,21.1377Z"/>
+  <path class="b" d="M216.8944,84.305c-3.7149,5.1465-9.6156,8.4975-16.2708,8.4975-11.2207,0-20.3496-9.4827-20.3496-21.1377s9.1289-21.137,20.3496-21.137c5.742,0,10.9258,2.4932,14.629,6.4798,3.3409-2.1117,8.2575-5.2152,12.1845-7.6765-6.3495-7.9596-16.0095-13.0533-26.8135-13.0533-19.0781,0-34.5996,15.8745-34.5996,35.387s15.5215,35.3877,34.5996,35.3877c11.3617,0,21.4601-5.6315,27.7716-14.3073l-11.5008-8.4402Z"/>
+  <polygon class="b" points="142.1523 36.8857 136.9992 42.7734 136.9992 105.8322 153.4992 105.8322 153.4992 36.8857 142.1523 36.8857"/>
+  <rect class="c" x="251.148" y="117.8746" width="40.8201" height="12"/>
+</svg>

package/assets/pico-js-light.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 140">
+  <defs>
+    <style>
+      .b {
+        fill: #111111;
+      }
+
+      .c {
+        fill: #ecd408;
+      }
+    </style>
+  </defs>
+  <path class="b" d="M271.224,106.9426c-19.0781,0-34.5996-15.8745-34.5996-35.3877s15.5215-35.387,34.5996-35.387,34.5989,15.8745,34.5989,35.387-15.5208,35.3877-34.5989,35.3877ZM271.224,50.4179c-11.2207,0-20.3496,9.4819-20.3496,21.137s9.1289,21.1377,20.3496,21.1377,20.3489-9.4827,20.3489-21.1377-9.1282-21.137-20.3489-21.137Z"/>
+  <path class="b" d="M54.1858,129.9574h14.25v-29.608c5.7433,4.3386,12.8305,6.9182,20.5022,6.9182,19.0781,0,34.5989-15.8745,34.5989-35.3877s-15.5208-35.387-34.5989-35.387c-9.1979,0-17.5625,3.697-23.7662,9.7054l-3.3257-5.1835h-7.669l.0087,88.9426ZM88.9381,93.0176c-11.2207,0-20.3496-9.4827-20.3496-21.1377s9.1289-21.137,20.3496-21.137,20.3489,9.4819,20.3489,21.137-9.1282,21.1377-20.3489,21.1377Z"/>
+  <path class="b" d="M216.8944,84.305c-3.7149,5.1465-9.6156,8.4975-16.2708,8.4975-11.2207,0-20.3496-9.4827-20.3496-21.1377s9.1289-21.137,20.3496-21.137c5.742,0,10.9258,2.4932,14.629,6.4798,3.3409-2.1117,8.2575-5.2152,12.1845-7.6765-6.3495-7.9596-16.0095-13.0533-26.8135-13.0533-19.0781,0-34.5996,15.8745-34.5996,35.387s15.5215,35.3877,34.5996,35.3877c11.3617,0,21.4601-5.6315,27.7716-14.3073l-11.5008-8.4402Z"/>
+  <polygon class="b" points="142.1523 36.8857 136.9992 42.7734 136.9992 105.8322 153.4992 105.8322 153.4992 36.8857 142.1523 36.8857"/>
+  <rect class="c" x="251.148" y="117.8746" width="40.8201" height="12"/>
+</svg>

package/demos/form.html

@@ -0,0 +1,462 @@
+<!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 href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
+    <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 id="theme" rel="stylesheet" href="../dist/themes/light.css">
+
+    <link rel="stylesheet" href="../style.css">
+
+    <style>
+
+        div {
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Inter', 'Helvetica', 'Arial', sans-serif;
+            font-size: 14px;
+            height: 100%;
+            overflow-x: hidden;
+        }
+
+        #app {
+            overflow-x: hidden;
+        }
+
+        .app-container {
+            max-width: 1440px;
+            margin: 0 auto;
+            padding: 20px 30px 40px 30px;
+        }
+
+        .app-options {
+            border-bottom: 1px solid rgba(110, 110, 110, 0.15);
+            margin-bottom: 20px;
+        }
+
+        h2 {
+            font-size: 32px;
+            font-weight: bold;
+            padding-bottom: 10px;
+            margin: 50px 0 15px;
+            border-bottom: 1px solid rgba(110, 110, 110, 0.15);
+        }
+
+    </style>
+
+    <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>
+
+</head>
+<body class="n-demo">
+
+<div id="app">
+    <div class="app-container">
+        <n-form>
+            <n-frame style="height: 90vh;">
+                <n-frame-item :resize="true" :width="200">
+                    <n-form-menu></n-form-menu>
+                </n-frame-item>
+                <n-frameya-item :scrollbar="true">
+                    <n-form-group label="foobar 1">
+                        <n-form-item label="Test">
+                            <n-input></n-input>
+                        </n-form-item>
+                        <n-form-item label="Test">
+                            <n-input></n-input>
+                        </n-form-item>
+                        <n-form-item label="Test">
+                            <n-input></n-input>
+                        </n-form-item>
+                    </n-form-group>
+                    <n-form-group label="foobar 2">
+                        <n-form-item label="Test">
+                            <n-input></n-input>
+                        </n-form-item>
+                        <n-form-item label="Test">
+                            <n-input></n-input>
+                        </n-form-item>
+                        <n-form-item label="Test">
+                            <n-input></n-input>
+                        </n-form-item>
+                    </n-form-group>
+                    <n-form-group label="foobar 3">
+                        <n-form-item label="Test">
+                            <n-input></n-input>
+                        </n-form-item>
+                        <n-form-item label="Test">
+                            <n-input></n-input>
+                        </n-form-item>
+                        <n-form-item label="Test">
+                            <n-input></n-input>
+                        </n-form-item>
+                        <n-form-item label="Test">
+                            <n-input></n-input>
+                        </n-form-item>
+                        <n-form-item label="Test">
+                            <n-input></n-input>
+                        </n-form-item>
+                        <n-form-item label="Test">
+                            <n-input></n-input>
+                        </n-form-item>
+                    </n-form-group>
+                </n-frameya-item>
+            </n-frame>
+
+        </n-form>
+    </div>
+</div>
+
+<script>
+
+    (function (nano) {
+
+        'use strict';
+
+        pi.Locale.set('URL', "URL2");
+        pi.Locale.set('URX', "URX2");
+
+        pi.Dom.ready(function () {
+
+            let data = {};
+
+            data.demoModel = {
+                test: true,
+                label: 'foobar',
+                option: {
+                    url: 'http://', redirect: 'AHA'
+                }
+            };
+
+            data.demoScope = {
+                testme: () => {
+                    console.log('abc');
+                }
+            }
+
+            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',
+            };
+
+            pi.Obj.set(data, 'demoConfigNext.NFormGroup:root', {
+                vShow: [
+                    '$model.test'
+                ],
+                props: {
+                    label: '$model.label',
+                    icon: 'fa fa-directions'
+                }
+            });
+
+            pi.Obj.set(data, 'demoConfigNext.NFormGroup:root.content.NFormItem:url', {
+                props: {
+                    label: '\\@URX',
+                    test: function() {
+                        console.log(123);
+                    }
+                },
+                content: {
+                    'NInput': {
+                        binds: {
+                            modelValue: '$model.option.url'
+                        }
+                    }
+                }
+            });
+
+            pi.Obj.set(data, 'demoConfigNext.NFormGroup:root.content.NFormItem:menu', {
+                props: {
+                    label: pi.Locale.trans('Menu')
+                },
+                content: {
+                    'NSwitch': {
+                        binds: {
+                            modelValue: '$model.option.redirect'
+                        },
+                        props: {
+                            "foo": "@bar"
+                        },
+                        content: [
+                            "@123"
+                        ]
+                    }
+                }
+            });
+
+            data.demoConfig = {
+                'NFormGroup:00': {
+                    $props: {
+                        label: pi.Locale.trans('Redirect'),
+                        icon: 'fa fa-directions'
+                    },
+                    content: {
+                        'div:00': {
+                            class: 'grid grid--row grid--wrap grid--30',
+                            content: {
+                                'div:00': {
+                                    class: 'col--1-1 col--1-2@sm',
+                                    content: {
+                                        'NFormItem:00': {
+                                            $props: {
+                                                label: pi.Locale.trans('URL')
+                                            },
+                                            content: {
+                                                'NInput:00': {
+                                                    model: {
+                                                        path: 'option.url'
+                                                    }
+                                                }
+                                            }
+                                        },
+                                    }
+                                },
+                                'div:10': {
+                                    class: 'col--1-1 col--1-2@sm',
+                                    content: {
+                                        'NFormItem:00': {
+                                            $props: {
+                                                label: pi.Locale.trans('Menu')
+                                            },
+                                            content: {
+                                                'Nswitch:00': {
+                                                    model: {
+                                                        path: 'option.redirect'
+                                                    },
+                                                    content: [
+                                                        pi.Locale.trans("foobar")
+                                                    ]
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                },
+            };
+
+            data.configData = { label: 'asdasda' };
+
+            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/300/300.jpg?' + id,
+                        date: pi.Now.make('now').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(100), function (item) {
+                return pi.Obj.assign(item, { children: itemGenerator(10) });
+            });
+
+
+            data.virtualItem = null;
+
+            data.treeSelect = null;
+            data.treeMatrix = [data.virtualTree[3]];
+
+            data.foobar = 'huhu';
+
+            data.n_theme = pi.Cookie.get('theme', 'light', 'string');
+
+            pi.Dom.find('#theme').attr('href', '../dist/themes/' +
+                data.n_theme + '.css');
+
+            data.n_form = {
+                size: 'md', conditional: true, modelValue: false
+            };
+
+            data.n_tags = {
+                size: 'md',
+            };
+
+            data.n_rating = {
+                size: 'md', choice: 'No stars|:value star|:value stars', disabled: false
+            };
+
+            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 = {
+                test: '', value: 3, size: 'md', placeholder: '', disabled: false, minValue: 0, maxValue: 10
+            };
+
+            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_slider = {
+                size: 'md', disabled: false, temp_value: 30,
+            };
+
+            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_datetimepicker = {
+                size: 'md', type: 'primary', clearable: true, disabled: false
+            };
+
+            data.n_durationpicker = {
+                size: 'md', type: 'primary', clearable: true, disabled: false, modelValue: 124521
+            };
+
+            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_collapse = {
+                value: ['default'], size: 'md', type: 'primary', relative: false
+            };
+
+            data.n_paginator = {
+                size: 'md', type: 'primary'
+            };
+
+            data.n_draggable = {
+                count: 0
+            };
+
+            data.n_loader = {
+                size: 'md', type: 'primary', visible: true
+            };
+
+            data.n_map = {
+                lat: 53.55, lng: 9.99
+            };
+
+            data.n_preview = {
+                file: null
+            };
+
+            let methods = {};
+
+            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;
+                },
+                mounted: function () {
+                    let self = this;
+                },
+                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>