@kizmann/nano-ui 1.0.0 → 1.0.1

package/docs/README.md

@@ -1,34 +0,0 @@
-
-# Quick start
-
-### Done and reworked
-- [Draggable](/data/draggable)
-- [Scrollbar](/others/scrollbar)
-- [Virtualscroller](/data/virtualscroller)
-- [Button](/form/button)
-- [Input](/form/input)
-- [Textarea](/form/textarea)
-- [Switch](/form/switch)
-- [Checkbox](/form/checkbox)
-- [Radio](/form/radio)
-- [Select](/form/select)
-- [Cascader](/form/cascader)
-- [Timepicker](/form/timepicker)
-- [Datepicker](/form/datepicker)
-- [Transfer](/form/transfer)
-- [Form](/form/form)
-- [Tabs](/others/tabs)
-- [Loader](/others/loader)
-- [Popover](/others/popover)
-- [Modal](/others/modal)
-- [Confirm](/others/confirm)
-- [Table](/data/table)
-- [Paginator](/data/paginator)
-- [Map](/others/map)
-
-### Coming soon or in works
-- [Number](/number)
-- [WYSIWYG](/wysiwyg)
-- [Info](/info)
-- [File](/file)
-- [Filelist](/filelist)

package/docs/_sidebar.md

@@ -1,37 +0,0 @@
-- Getting started
-
-  - [Quick start](README.md)
-
-- Form
-
-  - [Form](files/form/form.md)
-  - [Button](files/form/button.md)
-  - [Switch](files/form/switch.md)
-  - [Input](files/form/input.md)
-  - [Textarea](files/form/textarea.md)
-  - [Radio](files/form/radio.md)
-  - [Checkbox](files/form/checkbox.md)
-  - [Select](files/form/select.md)
-  - [Cascader](files/form/cascader.md)
-  - [Datepicker](files/form/datepicker.md)
-  - [Timepicker](files/form/timepicker.md)
-  - [Transfer](files/form/transfer.md)
-
-- Data
-  - [Table](files/data/table.md)
-  - [Paginator](files/data/paginator.md)
-  - [Draggable](files/data/draggable.md)
-  - [Virtualscroller](files/data/virtualscroller.md)
-
-- Others
-  - [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/data/draggable.md

@@ -1,143 +0,0 @@
-# Draggable
-Drag and drop list or tree.
-
-```html
-/*vue*/
-<template>
-    <div>
-        <n-draggable class="demo-box" :items="items" :render-select="true" :viewport-height="260">
-            <div style="margin: auto 10px;" slot-scope="{ value }">{{ value.title }}</div>
-        </n-draggable>
-    </div>
-</template>
-<script>
-    export default {
-        data() {
-            return {
-                items: pi.Arr.make(200).map((index) => {
-                    return { id: pi.UUID(), title: 'foo-' + index };
-                })
-            }
-        }
-    }
-</script>
-```
-
-### Properties
-**items**  
-default: []  
-types: Array  
-_All items which will be draggable, needs to hold Objects_
-
-**use**  
-default: null  
-types: String  
-_Component which will be rendered instead of default scoped slot (Draggable)_
-
-**useBefore**  
-default: null  
-types: String  
-_Component which will be rendered instead of before scoped slot (Non draggable)_
-
-**useAfter**  
-default: null  
-types: String  
-_Component which will be rendered instead of after scoped slot (Non draggable)_
-
-**selected**  
-default: null  
-types: Array  
-_Array with all selected items can be passed with this prop aswell_
-
-**depth**  
-default: 0  
-types: Number  
-_Current level of depth (used in tree)_
-
-**group**  
-default: ['default']  
-types: Array  
-_Draggable group_
-
-**safezone**  
-default: ['default']  
-types: Number, Function  
-_Safezone for before and after_
-
-```javascript
-/* height: 40px; before: 0-10px; inner: 10-30px; after: 30-40px */
-(height) => height * 0.25;
-```
-
-**showEmpty**  
-default: true  
-types: Boolean  
-_Render empty field_
-
-**itemHeight**  
-default: 34  
-types: Number  
-_Used for render list (loads 25 items in chunks to improve browser reactivity)_
-
-**uniqueProp**  
-default: 'id'  
-types: String  
-_Unique prop for selected list_
-
-**childProp**  
-default: null  
-types: String  
-_Children property for tree_
-
-**transformDrop**  
-default: (item) => item  
-types: Function  
-_Transform property on drop_
-
-**insertNode**  
-default: true  
-types: Boolean, Function  
-_Determines if node will be added to list or just emits move_
-
-**removeNode**  
-default: true  
-types: Boolean, Function  
-_Determines if node will be removed from list or just emits move_
-
-**allowSelect**  
-default: (item, depth) => true  
-types: Boolean, Function  
-_Determines if node is selectable_
-
-**allowDrag**  
-default: (item, depth) => true  
-types: Boolean, Function  
-_Determines if node is draggable_
-
-**allowDrop**  
-default: (item, target, move, depth) => true  
-types: Boolean, Function  
-_Determines if node is droppable_
-
-**className**  
-default: ['n-draggable']  
-types: Array  
-_CSS classes for draggable list_
-
-### Events
-```javascript
-    /* Emits on data change */
-    NDraggable.$on('input', (input) => {
-        console.log(input);
-    });
-    
-    /* Emits on move change */
-    NDraggable.$on('input', (source, target, move) => {
-        console.log(source, target, move);
-    });
-    
-    /* Emits on selected change */
-    NDraggable.$on('update:selected', (selected) => {
-        console.log(selected);
-    });
-```

package/docs/files/data/map.md

@@ -1 +0,0 @@
-# Map

package/docs/files/data/paginator.md

@@ -1,23 +0,0 @@
-# Paginator
-Paginator for a list.
-
-```html
-/*vue*/
-<template>
-    <div>
-        <n-paginator :page="page" :limit="limit" :total="total" />
-    </div>
-</template>
-<script>
-    export default {
-        data() {
-            return {
-                total: 265, page: 1, limit: 25
-            };
-        }
-    }
-</script>
-```
-
-### Properties
-coming soon

package/docs/files/data/table.md

@@ -1,247 +0,0 @@
-# Table
-Draggable table with diffrent styles.
-
-```js [demo]
-pi.Obj.assign(window.VueData, {
-    tableBinds: {
-        draggable: true,
-    }
-});
-```
-
-## Demo
-
-```html [demo]
-<n-form>
-    <div class="demo-options">
-        <div class="grid grid--row grid--wrap grid--20-20">
-            <n-form-item label="Draggable" class="col--auto">
-                <n-switch v-model="tableBinds.draggable">Activate drag and drop</n-switch>
-            </n-form-item>
-        </div>
-    </div>
-    <div class="demo-display">
-        <n-table style="height: 600px;" v-model:items="itemsMini" :render-expand="true" :item-height="80" :use-keys="true" :threshold="101" v-bind="tableBinds">
-            <n-table-column label="Image" type="image" prop="image" :fixed-width="90"></n-table-column>
-            <n-table-column label="ID" type="string" prop="id" :filter="true">
-                <template v-slot="{ item }">
-                    {{ item.id.replace(/^([^\-]+\-[^\-]+)(.*?)$/i, '$1') + '-wow~' }}
-                </template>
-            </n-table-column>
-            <n-table-column label="Label" type="string" prop="label" :fluid="true" :sort="true" :filter="true"></n-table-column>
-            <n-table-column label="Date" type="datetime" prop="date" :filter="true"></n-table-column>
-        </n-table>
-    </div>
-</n-form>
-```
-
-## Example
-
-### Table
-
-```html
-/*vue*/
-
-<template>
-    <n-table :items="items" :render-expand="true" :item-height="100">
-        <n-table-column label="Label" type="string" prop="label" :fluid="true" :sort="true"></n-table-column>
-        <n-table-column label="Image" type="image" prop="image" :fixed-width="90"></n-table-column>
-        <n-table-column label="Date" type="datetime" prop="date" :filter="true"></n-table-column>
-    </n-table>
-</template>
-
-<script>
-    export default {
-        methods: {
-            
-            generator(count = 200, depth = 1)
-            {
-                if ( ! depth ) {
-                    return [];
-                }
-                
-                if ( ! this.total ) {
-                    this.total = 0;
-                }
-                
-                return pi.Arr.each(pi.Arr.make(count), (index) => {
-                    return {
-                        label: 'Item ' + index,
-                        id: 'value-a-' + index,
-                        image: 'https://picsum.photos/100/100?' + index,
-                        date: new Date,
-                        children: this.generator(count, depth - 1)
-                    };
-                });
-            }
-            
-        },
-        data()
-        {
-            return {
-                items: this.generator(10, 1)
-            };
-        }
-    } 
-</script>
-
-```
-
-### Table with adaptive height
-
-```html
-/*vue*/
-
-<template>
-    <div style="height: 300px; display: flex; flex-direction: column;">
-        <n-table style="flex: 1 1 auto;" :items="items" :viewport-height="true" :item-height="100">
-            <n-table-column label="Label" type="string" prop="label" :fluid="true" :sort="true" :filter="true"></n-table-column>
-            <n-table-column label="Image" type="image" prop="image" :fixed-width="90"></n-table-column>
-            <n-table-column label="Date" type="datetime" prop="date" :filter="true"></n-table-column>
-            <n-table-column label="ID" type="string" prop="id" :sort="true"></n-table-column>
-        </n-table>
-    </div>
-</template>
-
-<script>
-    export default {
-        methods: {
-            
-            generator(count = 200, depth = 1)
-            {
-                if ( ! depth ) {
-                    return [];
-                }
-                
-                if ( ! this.total ) {
-                    this.total = 0;
-                }
-                
-                return pi.Arr.each(pi.Arr.make(count), () => {
-                        
-                    this.total++;
-   
-                    return {
-                        label: 'Item ' + this.total,
-                        id: 'value-b-' + this.total,
-                        image: 'https://picsum.photos/100/100?' + this.total,
-                        date: new Date,
-                        children: this.generator(count, depth - 1)
-                    };
-                })
-            }
-            
-        },
-        data()
-        {
-            return {
-                items: this.generator(30, 1)
-            };
-        }
-    } 
-</script>
-
-```
-
-### Table with fixed height and virtual scrolling
-
-```html
-/*vue*/
-
-<template>
-    <n-table :items="items" :render-expand="true" :viewport-height="300" :item-height="100" :safe-zone="safeZone">
-        <n-table-column label="Label" type="string" prop="label" :fluid="true" :sort="true" :filter="true"></n-table-column>
-        <n-table-column label="Image" type="image" prop="image" :fixed-width="90"></n-table-column>
-        <n-table-column label="Date" type="datetime" prop="date" :filter="true"></n-table-column>
-        <n-table-column label="ID" type="string" prop="id" :sort="true"></n-table-column>
-    </n-table>
-</template>
-
-<script>
-    export default {
-        methods: {
-            
-            safeZone(height)
-            {
-                return height * 0.20;
-            },
-            
-            generator(count = 200, depth = 1)
-            {
-                if ( ! depth ) {
-                    return [];
-                }
-                
-                if ( ! this.total ) {
-                    this.total = 0;
-                }
-                
-                return pi.Arr.each(pi.Arr.make(count), () => {
-                        
-                    this.total++;
-   
-                    return {
-                        label: 'Item ' + this.total,
-                        id: 'value-c-' + this.total,
-                        image: 'https://picsum.photos/100/100?' + this.total,
-                        date: new Date,
-                        children: this.generator(count, depth - 1)
-                    };
-                })
-            }
-            
-        },
-        data()
-        {
-            return {
-                items: this.generator(120, 2)
-            };
-        }
-    } 
-</script>
-
-```
-
-### Properties
-**value**  
-default: null  
-types: String  
-_Input value_
-
-**size**  
-default: 'default'  
-types: String  
-_Button size (small, default, large)_
-
-**round**  
-default: false  
-types: Boolean  
-_If button is rounded_
-
-**disabled**  
-default: false  
-types: Boolean  
-_If button uses disabled style and mode_
-
-**icon**  
-default: ''  
-types: String  
-_Icon class (fa fa-times)_
-
-**iconDisabled**  
-default: false  
-types: Boolen  
-_If icon button will be disabled_
-
-**nativeType**  
-default: 'button'  
-types: String  
-_Native button type (a, button, div etc.)_
-
-### Events
-```javascript
-    /* Allows all types which are supported by native type, but overrides default input event */
-    NDraggable.$on('input', (value) => {
-        console.log(value);
-    });
-```

package/docs/files/data/virtualscroller.md

@@ -1,2 +0,0 @@
-# Virtualscroller
-Docs comming soon

package/docs/files/form/button.md

@@ -1,131 +0,0 @@
-# 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
-
-```js [demo]
-pi.Obj.assign(window.VueData, {
-    buttonBinds: {
-        size: 'md', icon: null, iconPosition: 'before', disabled: false,
-    },
-    positions: {
-        'before': 'Before', 'after': 'After'
-    }
-});
-```
-
-```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@md" label="Size">
-                <n-select v-model="buttonBinds.size" :options="sizes" />
-            </n-form-item>
-            <n-form-item class="col--1-1 col--6-12@sm col--3-12@md" label="Icon">
-                <n-select v-model="buttonBinds.icon" placeholder="Icon" :clearable="true" :options="icons" />
-            </n-form-item>
-            <n-form-item class="col--1-1 col--6-12@sm col--3-12@md" label="Position">
-                <n-select v-model="buttonBinds.iconPosition" :options="positions" />
-            </n-form-item>
-            <n-form-item class="col--1-1 col--6-12@sm col--3-12@md" label="Disabled">
-                <n-switch v-model="buttonBinds.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--1-1">
-                <h3>Default</h3>
-            </div>
-            <div class="col--auto">
-                <n-button v-bind="buttonBinds" type="primary">Primary</n-button>
-            </div>
-            <div class="col--auto">
-                <n-button v-bind="buttonBinds" type="secondary">Secondary</n-button>
-            </div>
-            <div class="col--auto">
-                <n-button v-bind="buttonBinds" type="success">Success</n-button>
-            </div>
-            <div class="col--auto">
-                <n-button v-bind="buttonBinds" type="warning">Warning</n-button>
-            </div>
-            <div class="col--auto">
-                <n-button v-bind="buttonBinds" type="danger">Danger</n-button>
-            </div>
-            <div class="col--auto">
-                <n-button v-bind="buttonBinds" type="info">Info</n-button>
-            </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>
-            <div class="col--auto">
-                <n-button v-bind="buttonBinds" :link="true" type="secondary">Secondary</n-button>
-            </div>
-            <div class="col--auto">
-                <n-button v-bind="buttonBinds" :link="true" type="success">Success</n-button>
-            </div>
-            <div class="col--auto">
-                <n-button v-bind="buttonBinds" :link="true" type="warning">Warning</n-button>
-            </div>
-            <div class="col--auto">
-                <n-button v-bind="buttonBinds" :link="true" type="danger">Danger</n-button>
-            </div>
-            <div class="col--auto">
-                <n-button v-bind="buttonBinds" :link="true" type="info">Info</n-button>
-            </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>
-            <div class="col--auto">
-                <n-button v-bind="buttonBinds" :square="true" icon="fa fa-envelope" type="secondary">Secondary</n-button>
-            </div>
-            <div class="col--auto">
-                <n-button v-bind="buttonBinds" :square="true" icon="fa fa-check" type="success">Success</n-button>
-            </div>
-            <div class="col--auto">
-                <n-button v-bind="buttonBinds" :square="true" icon="fa fa-star" type="warning">Warning</n-button>
-            </div>
-            <div class="col--auto">
-                <n-button v-bind="buttonBinds" :square="true" icon="fa fa-trash" type="danger">Danger</n-button>
-            </div>
-            <div class="col--auto">
-                <n-button v-bind="buttonBinds" :square="true" icon="fa fa-user" type="info">Info</n-button>
-            </div>
-        </div>
-    </div>
-</n-form>
-```
-
-## Example
-
-```vue
-<template>
-  <n-button type="primary" icon="fa fa-search" @click="window.alert('click event!')">
-    Button
-  </n-button>
-</template>
-```
-
-## Properties
-
-| **Prop**       | **Type**  | **Default** | **Description**                                                                                 |
-|----------------|-----------|-------------|-------------------------------------------------------------------------------------------------|
-| `type`         | `String`  | `'primary'` | Defines the button's style type (e.g., 'primary', 'secondary', 'success', 'warning', 'danger'). |
-| `size`         | `String`  | `'md'`      | Sets the size of the button (e.g., 'sm', 'md', 'lg').                                           |
-| `link`         | `Boolean` | `false`     | If true, styles the button as a link.                                                           |
-| `square`       | `Boolean` | `false`     | If true, makes the button square.                                                               |
-| `disabled`     | `Boolean` | `false`     | If true, disables the button.                                                                   |
-| `icon`         | `String`  | `null`      | The icon class name to be used within the button.                                               |
-| `iconPosition` | `String`  | `'before'`  | Sets the position of the icon relative to the button text (e.g., 'before', 'after').            |
-| `nativeType`   | `String`  | `'button'`  | Sets the native HTML element type (typically 'button').                                         |