@kizmann/nano-ui 1.0.0 → 1.0.2

package/docs/files/others/config.md

@@ -1,261 +0,0 @@
-
-# pi.Arr Class
-
-A lightweight utility class for working with arrays.
-
-```js
-import { Arr } from "@kizmann/pico-js";
-```
-
-<hr>
-
-### Arr.make(count)
-Creates an array of a given count filled with incrementing integers starting from 1.
-
-```js
-Arr.make(3);
-// => [1, 2, 3]
-```
-
-**Arguments:**  
-count `Int`: The number of elements in the new array.
-
-**Returns:**  
-`Array<Int>`: An array of integers `[1, 2, ..., count]`.
-
-<hr>
-
-### Arr.all(arr)
-Ensures the input is always returned as an array.
-
-```js
-Arr.all(5);
-// => [5]
-
-Arr.all([1, 2]);
-// => [1, 2]
-```
-
-**Arguments:**  
-arr `Any`: The value to wrap in an array if it isn't already.
-
-**Returns:**  
-`Array`: The original array or a single-element array.
-
-<hr>
-
-### Arr.get(arr, index, fallback = null)
-Returns the value at a given index or a fallback if it doesn't exist.
-
-```js
-Arr.get([1, 2, 3], 1);
-// => 2
-
-Arr.get([1, 2, 3], 5, null);
-// => null
-```
-
-**Arguments:**  
-arr `Array`: The array to query.  
-index `Int`: The index to access.  
-fallback `Any`: Value returned if the index is out of bounds.  
-
-**Returns:**  
-`Any`: The element at the index or the fallback.
-
-<hr>
-
-### Arr.set(arr, index, value)
-Sets a value at the specified index of the array.
-
-```js
-Arr.set([0, 2, 44], 1, 42);
-// => [0, 42, 44]
-```
-
-**Arguments:**  
-arr `Array`: The array to modify.  
-index `Int`: The index to set.  
-value `Any`: The value to assign.  
-
-**Returns:**  
-`Any`: The assigned value.
-
-<hr>
-
-### Arr.first(arr, fallback = null)
-Gets the first element of the array or a fallback.
-
-```js
-Arr.first([10, 20]);
-// => 10
-
-Arr.first([], null);
-// => null
-```
-
-**Arguments:**  
-arr `Array`: The array to query.  
-fallback `Any`: Returned if array is empty or invalid.  
-
-**Returns:**  
-`Any`: First element or fallback.
-
-<hr>
-
-### Arr.second(arr, fallback = null)
-Gets the second element of the array, falling back to the first or a fallback.
-
-```js
-Arr.second([10, 20]);
-// => 20
-
-Arr.second([10], 'none');
-// => 10
-```
-
-**Arguments:**  
-arr `Array`: The array to query.  
-fallback `Any`: Returned if array is empty or invalid.
-
-**Returns:**  
-`Any`: Second element or fallback.
-
-<hr>
-
-### Arr.third(arr, fallback = null)
-Gets the third element, or falls back to second, first, or fallback.
-
-```js
-Arr.third([1, 2, 3]);
-// => 3
-
-Arr.third([1], 'none');
-// => 1
-```
-
-**Arguments:**  
-arr `Array`: The array to query.  
-fallback `Any`: Returned if array is empty or invalid.
-
-**Returns:**  
-`Any`: Third element or fallback.
-
-<hr>
-
-### Arr.last(arr, fallback = null)
-Gets the last element of the array.
-
-```js
-Arr.last([5, 6, 7]);
-// => 7
-```
-
-**Arguments:**  
-arr `Array`: The array to query.  
-fallback `Any`: Returned if array is empty or invalid.  
-
-**Returns:**  
-`Any`: Last element or fallback.
-
-<hr>
-
-### Arr.prepend(arr, val)
-Adds a value to the beginning of an array.
-
-```js
-Arr.prepend([2, 3], 1);
-// => [1, 2, 3]
-```
-
-**Arguments:**  
-arr `Array`: The array to modify.  
-val `Any`: The value to prepend.  
-
-**Returns:**  
-`Array`: The updated array.
-
-<hr>
-
-### Arr.append(arr, val)
-Adds a value to the end of an array.
-
-```js
-Arr.append([1, 2], 3);
-// => [1, 2, 3]
-```
-
-**Arguments:**  
-arr `Array`: The array to modify.  
-val `Any`: The value to append.  
-
-**Returns:**  
-`Array`: The updated array.
-
-<hr>
-
-### Arr.sort(obj, key)
-Sorts an object of keyed values by a key or a custom function.
-
-```js
-Arr.sort([{ val: 2 }, { val: 1 }], 'val');
-// => [{ val: 1, _key: 1 }, { val: 2, _key: 0 }]
-```
-
-**Arguments:**  
-obj `Object`: The object to sort.  
-key `String|Function`: A key to sort by or a custom comparison function.  
-
-**Returns:**  
-`Array`: Sorted array of values, each augmented with `_key`.
-
-<hr>
-
-### Arr.sortString(obj, key)
-Sorts an object’s values alphabetically by a string key.
-
-```js
-Arr.sortString([{ name: "Zoe" }, { name: "Anna" }], 'name');
-// => [{ name: "Anna", _key: 1 }, { name: "Zoe", _key: 0 }]
-```
-
-**Arguments:**  
-obj `Object`: The object to sort.  
-key `String`: Key to sort values by (case-insensitive).  
-
-**Returns:**  
-`Array`: Alphabetically sorted values.
-
-<hr>
-
-### Arr.filter(arr, filter)
-Filters array values by a function, object, or array.
-
-```js
-Arr.filter([1, 2, 3, 4], n => n > 2);
-// => [3, 4]
-```
-
-**Arguments:**  
-arr `Array`: The array to filter.  
-filter `Function|Object|Array`: Filter logic.  
-
-**Returns:**  
-`Array`: Filtered array.
-
-<hr>
-
-### Arr.filterIndex(arr, filter)
-Gets indexes of values matching a filter.
-
-```js
-Arr.filterIndex([1, 2, 3, 4], n => n > 2);
-// => ['2', '3']
-```
-
-**Arguments:**  
-arr `Array`: The array to filter.  
-filter `Function|Object|Array`: Filter logic.  
-
-**Returns:**  
-`Array<Number>`: Array of indexes matching the condition.

package/docs/files/others/confirm.md

@@ -1,51 +0,0 @@
-# Confirm
-Confirm y0.
-
-```html
-/*vue*/
-<template>
-    <div class="grid grid--row grid--wrap grid--20-20">
-            <n-button class="col--1-1" type="primary" :plain="true">Primary</n-button>
-            <n-confirm type="primary" @abort="abort" @confirm="confirm">
-                Confirmtext!
-            </n-confirm>
-            <n-button class="col--1-1" type="success" :plain="true">Success</n-button>
-            <n-confirm type="success" @abort="abort" @confirm="confirm">
-                Confirmtext!
-            </n-confirm>
-            <n-button class="col--1-1" type="warning" :plain="true">Warning</n-button>
-            <n-confirm type="warning" @abort="abort" @confirm="confirm">
-                Confirmtext!
-            </n-confirm>
-            <n-button class="col--1-1" type="danger" :plain="true">Danger</n-button>
-            <n-confirm type="danger" @abort="abort" @confirm="confirm">
-                Confirmtext!
-            </n-confirm>
-            <n-button class="col--1-1" type="info" :plain="true">Info</n-button>
-            <n-confirm type="info" @abort="abort" @confirm="confirm">
-                Confirmtext!
-            </n-confirm>
-
-    </div>
-</template>
-<script>
-    export default {
-        methods: {
-            abort()
-            {
-                window.alert('abort');
-            },
-            confirm()
-            {
-                window.alert('confirm');
-            }
-        }
-    }
-</script>
-```
-
-### Properties
-coming soon
-
-### Events
-coming soon

package/docs/files/others/drawer.md

@@ -1,32 +0,0 @@
-# Modal
-Modal you know.
-
-```html
-/*vue*/
-<template>
-    <div>
-        <n-button>Open</n-button>
-        <n-modal ref="modal">
-            <div slot="header">
-                <h3>Hi</h3>
-            </div>
-            <div>
-                <p>Im the content</p>
-            </div>
-            <div slot="footer">
-                <n-button @click="$refs.modal.close()">Ok!</n-button>
-            </div>
-        </n-modal>
-    </div>
-</template>
-<script>
-    export default {
-    }
-</script>
-```
-
-### Properties
-coming soon
-
-### Events
-coming soon

package/docs/files/others/loader.md

@@ -1,22 +0,0 @@
-# Loader
-Loader you know.
-
-```html
-/*vue*/
-<template>
-    <n-loader :visible="true" style="background: #eee; width: 100%; height: 500px; line-height: 500px; text-align: center; border-radius: 3px;">
-        Im the content
-    </n-loader>
-</template>
-<script>
-    export default {
-        //
-    }
-</script>
-```
-
-### Properties
-coming soon
-
-### Events
-coming soon

package/docs/files/others/map.md

@@ -1,32 +0,0 @@
-# Modal
-Modal you know.
-
-```html
-/*vue*/
-<template>
-    <div>
-        <n-button>Open</n-button>
-        <n-modal ref="modal">
-            <div slot="header">
-                <h3>Hi</h3>
-            </div>
-            <div>
-                <p>Im the content</p>
-            </div>
-            <div slot="footer">
-                <n-button @click="$refs.modal.close()">Ok!</n-button>
-            </div>
-        </n-modal>
-    </div>
-</template>
-<script>
-    export default {
-    }
-</script>
-```
-
-### Properties
-coming soon
-
-### Events
-coming soon

package/docs/files/others/modal.md

@@ -1,32 +0,0 @@
-# Modal
-Modal you know.
-
-```html
-/*vue*/
-<template>
-    <div>
-        <n-button>Open</n-button>
-        <n-modal ref="modal">
-            <div slot="header">
-                <h3>Hi</h3>
-            </div>
-            <div>
-                <p>Im the content</p>
-            </div>
-            <div slot="footer">
-                <n-button @click="$refs.modal.close()">Ok!</n-button>
-            </div>
-        </n-modal>
-    </div>
-</template>
-<script>
-    export default {
-    }
-</script>
-```
-
-### Properties
-coming soon
-
-### Events
-coming soon

package/docs/files/others/notification.md

@@ -1,52 +0,0 @@
-# Notification
-Notification pop up box.
-
-```html
-/*vue*/
-<template>
-    <div class="grid grid--row grid--wrap grid--20-20">
-            <n-button class="col--1-1" type="primary" :plain="true" @click="showPrimary">Primary</n-button>
-
-            <n-button class="col--1-1" type="success" :plain="true" @click="showSuccess">Success</n-button>
-
-            <n-button class="col--1-1" type="warning" :plain="true" @click="showWarning">Warning</n-button>
-
-            <n-button class="col--1-1" type="danger" :plain="true" @click="showDanger">Danger</n-button>
-
-            <n-button class="col--1-1" type="info" :plain="true" @click="showInfo">Info</n-button>
-
-    </div>
-</template>
-<script>
-    export default {
-        methods: {
-            showPrimary()
-            {
-                this.Notify('Im a primary message', 'primary');
-            },
-            showSuccess()
-            {
-                this.Notify('Im a success message', 'success');
-            },
-            showWarning()
-            {
-                this.Notify('Im a warning message', 'warning');
-            },
-            showDanger()
-            {
-                this.Notify('Im a danger message', 'danger');
-            },
-            showInfo()
-            {
-                this.Notify('Im a info message', 'info');
-            }
-        }
-    }
-</script>
-```
-
-### Properties
-coming soon
-
-### Events
-coming soon

package/docs/files/others/popover.md

@@ -1,36 +0,0 @@
-# Popover
-Popover you know.
-
-```html
-/*vue*/
-<template>
-    <div class="grid grid--row grid--wrap grid--20-20">
-        <n-button class="col--1-1" type="primary">Open on hover</n-button>
-        <n-popover trigger="hover" type="tooltip" :window="true">
-            Hello im the popover
-        </n-popover>
-        <n-button class="col--1-1" type="primary">Open on click</n-button>
-        <n-popover trigger="click" :window="true">
-            Hello im the popover
-        </n-popover>
-        <div class="col--1-1">
-            <div style="background: #eee; width: 100%; height: 500px; line-height: 500px; text-align: center; border-radius: 3px;">
-                Open on right click
-            </div>
-            <n-popover trigger="context" :window="true">
-                Hello im the popover
-            </n-popover>
-        </div>
-    </div>
-</template>
-<script>
-    export default {
-    }
-</script>
-```
-
-### Properties
-coming soon
-
-### Events
-coming soon

package/docs/files/others/resizer.md

@@ -1,8 +0,0 @@
----
-layout: default
-title: Resizer
-nav_order: 7
-parent: Others
----
-
-# Resizer

package/docs/files/others/scrollbar.md

@@ -1,8 +0,0 @@
----
-layout: default
-title: Scrollbar
-nav_order: 6
-parent: Others
----
-
-# Scrollbar

package/docs/files/others/tabs.md

@@ -1,32 +0,0 @@
-# Tabs
-Tabs you know.
-
-```html
-/*vue*/
-<template>
-    <div>
-        <n-tabs>
-            <n-tabs-item name="default" label="Start">
-                Hi im the starttext
-            </n-tabs-item>
-            <n-tabs-item name="keep" label="Keep" icon="fa fa-bug" :keep="true">
-                <n-input value="I will stay while editing"></n-input>
-            </n-tabs-item>
-            <n-tabs-item name="forget" label="Forget" icon="fa fa-clock">
-                <n-input value="I will reset while editing"></n-input>
-            </n-tabs-item>
-        </n-tabs>
-    </div>
-</template>
-<script>
-    export default {
-        //
-    }
-</script>
-```
-
-### Properties
-coming soon
-
-### Events
-coming soon

package/docs/index.template.html

@@ -1,76 +0,0 @@
-<!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="icon" type="image/png" href="<%= htmlWebpackPlugin.options.base %>/favicon/favicon-96x96.png" sizes="96x96" />
-    <link rel="icon" type="image/svg+xml" href="<%= htmlWebpackPlugin.options.base %>/favicon/favicon.svg" />
-    <link rel="shortcut icon" href="<%= htmlWebpackPlugin.options.base %>/favicon/favicon.ico" />
-    <link rel="apple-touch-icon" sizes="180x180" href="<%= htmlWebpackPlugin.options.base %>/favicon/apple-touch-icon.png" />
-    <meta name="apple-mobile-web-app-title" content="nano.ui" />
-    <link rel="manifest" href="<%= htmlWebpackPlugin.options.base %>/favicon/site.webmanifest" />
-
-    <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=Inter:ital,wght@0,400;0,500;0,700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&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="<%= htmlWebpackPlugin.options.base %>/dist/nano-ui.css">
-    <link rel="stylesheet" data-theme-href="<%= htmlWebpackPlugin.options.base %>/dist/themes/{theme}.css">
-    <link rel="stylesheet" data-theme-href="<%= htmlWebpackPlugin.options.base %>/docs/dist/{theme}.css">
-
-    <style>
-        <%= htmlWebpackPlugin.options.loaderCss %>
-    </style>
-</head>
-<body>
-<header>
-    <div class="wrapper">
-        <div class="logo">
-            <a href="<%= htmlWebpackPlugin.options.base %>/docs/#/README">
-                <img data-theme-src="<%= htmlWebpackPlugin.options.base %>/assets/nano-ui-{theme}.svg" alt="nano.ui">
-            </a>
-        </div>
-        <div class="logo logo-alt">
-            <a href="https://pico-js.vanki.de" target="_blank">
-                <img data-theme-src="<%= htmlWebpackPlugin.options.base %>/assets/pico-js-{theme}.svg" alt="pico.js">
-            </a>
-        </div>
-        <div class="spacer">
-            <!-- SPACER -->
-        </div>
-        <div class="theme">
-            <a href="javascript:void(0)" data-theme-light>Light</a>
-        </div>
-        <div class="theme last">
-            <a href="javascript:void(0)" data-theme-dark>Dark</a>
-        </div>
-        <div class="social black">
-            <a href="https://www.paypal.com/paypalme/vankizmann" target="_blank">
-                <i class="fab fa-paypal"></i> <span>Support</span>
-            </a>
-        </div>
-        <div class="social blue">
-            <a href="https://github.com/vankizmann/nano-ui" target="_blank">
-                <i class="fab fa-github"></i> <span>Github</span>
-            </a>
-        </div>
-    </div>
-</header>
-<div id="app">
-    <!-- Docs -->
-</div>
-<div class="loader">
-    <span>
-        <%= htmlWebpackPlugin.options.logoSvg %>
-    </span>
-</div>
-
-<script src="<%= htmlWebpackPlugin.options.base %>/docs/dist/docs.js" defer></script>
-</body>
-</html>