@kizmann/nano-ui 0.9.10 → 1.0.1

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,122 +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--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--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--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').                                         |

package/docs/files/form/cascader.md

@@ -1,164 +0,0 @@
-# Cascader
-Drag and drop list or tree.
-
-```html
-/*vue*/
-<template>
-    <div>
-        <n-cascader v-model="value" :items="items" label-prop="label"></n-cascader>
-    </div>
-</template>
-<script>
-    export default {
-        methods: {
-                    
-            generator(count = 10, 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,
-                        value: 'value-' + this.total,
-                        children: this.generator(count, depth - 1)
-                    };
-                })
-            }
-            
-        },
-        data() {
-            return {
-                items: this.generator(10, 2), value: ['value-1']
-            }
-        }
-    }
-</script>
-```
-
-### Properties
-**items**  
-default: []  
-types: Array  
-_All items which will be cascader, needs to hold Objects_
-
-**use**  
-default: null  
-types: String  
-_Component which will be rendered instead of default scoped slot (Cascader)_
-
-**useBefore**  
-default: null  
-types: String  
-_Component which will be rendered instead of before scoped slot (Non cascader)_
-
-**useAfter**  
-default: null  
-types: String  
-_Component which will be rendered instead of after scoped slot (Non cascader)_
-
-**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  
-_Cascader 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 cascader_
-
-**allowDrop**  
-default: (item, target, move, depth) => true  
-types: Boolean, Function  
-_Determines if node is droppable_
-
-**className**  
-default: ['n-cascader']  
-types: Array  
-_CSS classes for cascader list_
-
-### Events
-```javascript
-    /* Emits on data change */
-    NCascader.$on('input', (input) => {
-        console.log(input);
-    });
-    
-    /* Emits on move change */
-    NCascader.$on('input', (source, target, move) => {
-        console.log(source, target, move);
-    });
-    
-    /* Emits on selected change */
-    NCascader.$on('update:selected', (selected) => {
-        console.log(selected);
-    });
-```