@kizmann/nano-ui 0.9.10 → 1.0.0

package/demos/overview.html

@@ -317,24 +317,24 @@
 
         <div class="grid grid--row grid--wrap grid--10-10">
             <div class="col--1-1 col--1-3@md">
-                <n-input-number v-model="n_number.test" :min="n_number.minValue" :max="n_number.maxValue" v-bind="n_number" format=":count USD" type="primary"  :precision="2" :clearable="true"></n-input-number>
-<!--                <n-input-number v-model="n_number.value" :min="n_number.minValue" :max="n_number.maxValue" v-bind="n_number" format=":count USD" type="primary"></n-input-number>-->
-            </div>
-<!--            <div class="col&#45;&#45;1-1 col&#45;&#45;1-3@md">-->
-<!--                <n-input-number v-model="n_number.value" :min="n_number.minValue" :max="n_number.maxValue" v-bind="n_number" format=":count €" :precision="2" :step-size="0.1" type="secondary"></n-input-number>-->
-<!--            </div>-->
-<!--            <div class="col&#45;&#45;1-1 col&#45;&#45;1-3@md">-->
-<!--                <n-input-number v-model="n_number.value" :min="n_number.minValue" :max="n_number.maxValue" v-bind="n_number" type="success" :clearable="true"></n-input-number>-->
-<!--            </div>-->
-<!--            <div class="col&#45;&#45;1-1 col&#45;&#45;1-3@md">-->
-<!--                <n-input-number v-model="n_number.value" :min="n_number.minValue" :max="n_number.maxValue" v-bind="n_number" type="warning"></n-input-number>-->
-<!--            </div>-->
-<!--            <div class="col&#45;&#45;1-1 col&#45;&#45;1-3@md">-->
-<!--                <n-input-number v-model="n_number.value" :min="n_number.minValue" :max="n_number.maxValue" v-bind="n_number" type="danger"></n-input-number>-->
-<!--            </div>-->
-<!--            <div class="col&#45;&#45;1-1 col&#45;&#45;1-3@md">-->
-<!--                <n-input-number v-model="n_number.value" :min="n_number.minValue" :max="n_number.maxValue" v-bind="n_number" type="info"></n-input-number>-->
-<!--            </div>-->
+                <n-input-number v-model="n_number.test" :min="n_number.minValue" :max="n_number.maxValue" v-bind="n_number" format=":count USD" type="primary" :precision="2" :clearable="true"></n-input-number>
+                <!--                <n-input-number v-model="n_number.value" :min="n_number.minValue" :max="n_number.maxValue" v-bind="n_number" format=":count USD" type="primary"></n-input-number>-->
+            </div>
+            <!--            <div class="col&#45;&#45;1-1 col&#45;&#45;1-3@md">-->
+            <!--                <n-input-number v-model="n_number.value" :min="n_number.minValue" :max="n_number.maxValue" v-bind="n_number" format=":count €" :precision="2" :step-size="0.1" type="secondary"></n-input-number>-->
+            <!--            </div>-->
+            <!--            <div class="col&#45;&#45;1-1 col&#45;&#45;1-3@md">-->
+            <!--                <n-input-number v-model="n_number.value" :min="n_number.minValue" :max="n_number.maxValue" v-bind="n_number" type="success" :clearable="true"></n-input-number>-->
+            <!--            </div>-->
+            <!--            <div class="col&#45;&#45;1-1 col&#45;&#45;1-3@md">-->
+            <!--                <n-input-number v-model="n_number.value" :min="n_number.minValue" :max="n_number.maxValue" v-bind="n_number" type="warning"></n-input-number>-->
+            <!--            </div>-->
+            <!--            <div class="col&#45;&#45;1-1 col&#45;&#45;1-3@md">-->
+            <!--                <n-input-number v-model="n_number.value" :min="n_number.minValue" :max="n_number.maxValue" v-bind="n_number" type="danger"></n-input-number>-->
+            <!--            </div>-->
+            <!--            <div class="col&#45;&#45;1-1 col&#45;&#45;1-3@md">-->
+            <!--                <n-input-number v-model="n_number.value" :min="n_number.minValue" :max="n_number.maxValue" v-bind="n_number" type="info"></n-input-number>-->
+            <!--            </div>-->
         </div>
 
         <h2>NTextarea</h2>
@@ -446,7 +446,7 @@
             <div class="col--1-1">
                 <n-button-group>
                     <n-input v-model="n_input.value" v-bind="n_input" type="primary"></n-input>
-                    <n-datepicker v-bind="n_datepicker" ></n-datepicker>
+                    <n-datepicker v-bind="n_datepicker"></n-datepicker>
                     <n-select v-bind="n_select" :multiple="true" type="primary" :options="icons"></n-select>
                     <n-button v-bind="n_button" type="primary">Button</n-button>
                 </n-button-group>
@@ -587,7 +587,7 @@
                 <n-datepicker-panel v-bind="n_datepicker" min-date="now" :month-panels="2" :range="true"></n-datepicker-panel>
             </div>
             <div class="col--1-1 col--1-3@md">
-                <n-datepicker v-bind="n_datepicker" ></n-datepicker>
+                <n-datepicker v-bind="n_datepicker"></n-datepicker>
             </div>
             <div class="col--1-1 col--1-3@md">
                 <n-datepicker v-bind="n_datepicker" :range="true" :month-panels="2"></n-datepicker>
@@ -616,7 +616,7 @@
                 <n-timepicker-panel v-bind="n_timepicker"></n-timepicker-panel>
             </div>
             <div class="col--1-1 col--1-3@md">
-                <n-timepicker v-bind="n_timepicker" ></n-timepicker>
+                <n-timepicker v-bind="n_timepicker"></n-timepicker>
             </div>
         </div>
 
@@ -639,7 +639,7 @@
 
         <div class="grid grid--row grid--wrap grid--10-10">
             <div class="col--1-1 col--1-3@md">
-                <n-datetimepicker v-bind="n_datetimepicker" ></n-datetimepicker>
+                <n-datetimepicker v-bind="n_datetimepicker"></n-datetimepicker>
             </div>
         </div>
 
@@ -662,10 +662,10 @@
 
         <div class="grid grid--row grid--wrap grid--10-10">
             <div class="col--1-1 col--1-3@md">
-                <n-durationpicker v-bind="n_durationpicker" ></n-durationpicker>
+                <n-durationpicker v-bind="n_durationpicker"></n-durationpicker>
             </div>
             <div class="col--1-1 col--1-3@md">
-                <n-durationpicker v-model="n_durationpicker.modelValue" v-bind="n_durationpicker" ></n-durationpicker>
+                <n-durationpicker v-model="n_durationpicker.modelValue" v-bind="n_durationpicker"></n-durationpicker>
             </div>
         </div>
 
@@ -730,6 +730,47 @@
             </div>
         </div>
 
+        <h2>NDrawer</h2>
+
+        <div class="app-options grid grid--row grid--wrap grid--30-30">
+            <div class="col--auto">
+                <n-select style="width: 100px;" v-model="n_drawer.size" :options="sizes"></n-select>
+            </div>
+            <div class="col--auto">
+                <n-select style="width: 210px;" v-model="n_drawer.position" :options="drawers"></n-select>
+            </div>
+            <div class="col--auto">
+                <n-checkbox v-model="n_drawer.disabled">Disabled</n-checkbox>
+            </div>
+        </div>
+
+        <div class="grid grid--row grid--wrap grid--10-10">
+            <div class="col--1-1 col--1-3@md">
+                <n-button>Open drawer</n-button>
+                <n-drawer v-bind="n_drawer">
+                    <template v-slot:header>
+                        Im the header
+                    </template>
+                    <div style="height: 2100px;">
+                        <n-form>
+                            <n-form-item label="Test">
+                                <n-input placeholder="Fill me"></n-input>
+                            </n-form-item>
+                            <n-form-item label="Test">
+                                <n-input placeholder="Fill me"></n-input>
+                            </n-form-item>
+                            <n-form-item label="Test">
+                                <n-input placeholder="Fill me"></n-input>
+                            </n-form-item>
+                        </n-form>
+                    </div>
+                    <template v-slot:footer>
+                        Im the footer
+                    </template>
+                </n-drawer>
+            </div>
+        </div>
+
         <h2>NConfirm</h2>
 
         <div class="app-options grid grid--row grid--wrap grid--30-30">
@@ -921,7 +962,9 @@
         <template v-for="index in Arr.make(n_draggable.count)">
             <n-draglist v-model:items="virtualTree" :render-expand="true" :render-select="true" style="height: 500px; margin-top: 30px; border: 2px solid rgba(110, 110, 110, 0.5); border-radius: 4px;">
                 <template v-slot:default="{ value, item }">
-                    <div style="padding: 0 5px; line-height: 34px;"><n-input v-model="item.label"></n-input></div>
+                    <div style="padding: 0 5px; line-height: 34px;">
+                        <n-input v-model="item.label"></n-input>
+                    </div>
                 </template>
             </n-draglist>
         </template>
@@ -930,7 +973,7 @@
 
         <n-dropzone v-model:item="virtualItem" style="height: 500px; margin-top: 30px; border: 2px solid rgba(110, 110, 110, 0.5); border-radius: 4px;">
             <template v-slot:default="item">
-                <div style="padding: 0 5px; line-height: 34px;">{{item.label}}</div>
+                <div style="padding: 0 5px; line-height: 34px;">{{ item.label }}</div>
             </template>
         </n-dropzone>
 
@@ -966,7 +1009,7 @@
 
         <n-table ref="table" v-model:items="virtualTree" :handle="true" :render-handle="true" :render-expand="true" :item-height="100" style="margin-top: 30px; min-height: 500px;">
             <n-table-column label="Label" type="string" prop="label" align="center" :sort="true" :filter="true">
-<!--                <template v-slot:default="{item}">{{ item.value }}</template>-->
+                <!--                <template v-slot:default="{item}">{{ item.value }}</template>-->
             </n-table-column>
             <n-table-column label="Image" type="image" prop="image" :fixed-width="130"></n-table-column>
             <n-table-column label="Date" type="datetime" prop="date" :disabled="true" :sort="true" :width="50" :filter="true"></n-table-column>
@@ -1082,24 +1125,29 @@
             let data = {};
 
             data.sizes = {
-                xs: 'XS', 
-                sm: 'SM', 
-                md: 'MD', 
+                xs: 'XS',
+                sm: 'SM',
+                md: 'MD',
                 lg: 'LG'
             };
 
             data.types = {
-                primary:    'Primary', 
-                secondary:  'Secondary', 
-                success:    'Success', 
-                warning:    'Warning', 
-                danger:     'Danger', 
-                info:       'Info'
+                primary: 'Primary',
+                secondary: 'Secondary',
+                success: 'Success',
+                warning: 'Warning',
+                danger: 'Danger',
+                info: 'Info'
             };
 
             data.modals = {
-                default:    'Default', 
-                preview:    'Preview',
+                default: 'Default',
+                preview: 'Preview',
+            };
+
+            data.drawers = {
+                left: 'Left',
+                right: 'Right',
             };
 
             pi.Obj.set(data, 'demoConfigNext.NFormGroup:root', {
@@ -1198,13 +1246,13 @@
                     let id = pi.UUID();
 
                     return {
-                        id:     id, 
-                        value:  id,
+                        id: id,
+                        value: id,
                         matrix: 10,
-                        label:  `Item ${index++}`, 
-                        image:  'https://picsum.photos/300/300.jpg?' + id,
+                        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)
+                        enabled: !!Math.floor(Math.random() * 2)
                     };
                 });
             };
@@ -1212,7 +1260,7 @@
 
             data.cascaderData = pi.Arr.each(itemGenerator(5), function (item) {
 
-                let children  = pi.Arr.each(itemGenerator(5), function (item) {
+                let children = pi.Arr.each(itemGenerator(5), function (item) {
                     return pi.Obj.assign(item, { children: itemGenerator(5) });
                 });
 
@@ -1314,6 +1362,10 @@
                 size: 'md', type: 'default', disabled: false
             };
 
+            data.n_drawer = {
+                size: 'md', position: 'right', disabled: false
+            };
+
             data.n_confirm = {
                 size: 'md', type: 'primary', disabled: false
             };
@@ -1348,7 +1400,7 @@
 
             let methods = {};
 
-            methods.changeTheme = function(value) {
+            methods.changeTheme = function (value) {
 
                 pi.Cookie.set('theme', this.n_theme = value);
 

package/docs/_sidebar.md

@@ -24,13 +24,14 @@
   - [Virtualscroller](files/data/virtualscroller.md)
 
 - Others
-  - [Notification](others/notification.md)
-  - [Loader](others/loader.md)
-  - [Tabs](others/tabs.md)
-  - [Popover](others/popover.md)
-  - [Modal](others/modal.md)
-  - [Map](data/map.md)
-  - [Confirm](others/confirm.md)
-  - [Scrollbar](others/scrollbar.md)
-  - [Resizer](others/resizer.md)
-  - [Config](others/config.md)
+  - [Notification](files/others/notification.md)
+  - [Loader](files/others/loader.md)
+  - [Tabs](files/others/tabs.md)
+  - [Popover](files/others/popover.md)
+  - [Modal](files/others/modal.md)
+  - [Drawer](files/others/drawer.md)
+  - [Map](files/others/map.md)
+  - [Confirm](files/others/confirm.md)
+  - [Scrollbar](files/others/scrollbar.md)
+  - [Resizer](files/others/resizer.md)
+  - [Config](files/others/config.md)

package/docs/files/form/button.md

@@ -1,5 +1,5 @@
 # Button
-
+ 
 The `<n-button>` component is a versatile and customizable button component, providing various styling options and functionalities. Below is a detailed description of its props, methods, and usage.
 
 ## Demo
@@ -35,6 +35,9 @@ pi.Obj.assign(window.VueData, {
     </div>
     <div class="demo-display">
         <div class="grid grid--row grid--wrap grid--40-40 grid--middle">
+            <div class="col--1-1">
+                <h3>Default</h3>
+            </div>
             <div class="col--auto">
                 <n-button v-bind="buttonBinds" type="primary">Primary</n-button>
             </div>
@@ -55,6 +58,9 @@ pi.Obj.assign(window.VueData, {
             </div>
         </div>
         <div class="grid grid--row grid--wrap grid--40-40 grid--middle">
+            <div class="col--1-1">
+                <h3>Link</h3>
+            </div>
             <div class="col--auto">
                 <n-button v-bind="buttonBinds" :link="true" type="primary">Primary</n-button>
             </div>
@@ -75,6 +81,9 @@ pi.Obj.assign(window.VueData, {
             </div>
         </div>
         <div class="grid grid--row grid--wrap grid--40-40 grid--middle">
+            <div class="col--1-1">
+                <h3>Square</h3>
+            </div>
             <div class="col--auto">
                 <n-button v-bind="buttonBinds" :square="true" icon="fa fa-search" type="primary">Primary</n-button>
             </div>

package/docs/files/form/switch.md

@@ -30,6 +30,9 @@ pi.Obj.assign(window.VueData, {
     </div>
     <div class="demo-display">
         <div class="grid grid--row grid--wrap grid--40-40 grid--middle">
+            <div class="col--1-1">
+                <h3>Default</h3>
+            </div>
             <div class="col--auto">
                 <n-switch :model-value="true" v-bind="switchBinds" on-type="primary">Primary</n-switch>
             </div>
@@ -50,6 +53,9 @@ pi.Obj.assign(window.VueData, {
             </div>
         </div>
         <div class="grid grid--row grid--wrap grid--40-40 grid--middle">
+            <div class="col--1-1">
+                <h3>With custom values</h3>
+            </div>
             <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>

package/docs/files/others/config.md

@@ -1,8 +1,261 @@
----
-layout: default
-title: Config
-nav_order: 5
-parent: Others
----
-
-# Config
+
+# 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/drawer.md

@@ -0,0 +1,32 @@
+# 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/map.md

@@ -0,0 +1,32 @@
+# 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