@kizmann/nano-ui 1.0.0 → 1.0.1

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);
-    });
-```

package/docs/files/form/checkbox.md

@@ -1,179 +0,0 @@
-# Checkbox
-Checkbox with diffrent styles.
-
-```vue
-<n-checbox v-model="checked">Your label</n-checbox>
-```
-
-### Checkbox
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-checkbox v-model="checked">Check me</n-checkbox>
-        </div>
-        <div class="col--1-1">
-            <n-checkbox v-model="checked" :disabled="true">Can't check me</n-checkbox>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data()
-        {
-            return {
-                checked: true
-            };
-        }
-    } 
-</script>
-
-```
-
-### Grouped checkboxes
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-checkbox-group v-model="checked">
-                <n-checkbox :global="true">Check all</n-checkbox>
-                <n-checkbox value="berlin">Berlin</n-checkbox>
-                <n-checkbox value="hamburg">Hamburg</n-checkbox>
-                <n-checkbox value="munich">Munich</n-checkbox>
-                <n-checkbox value="cologne">Cologne</n-checkbox>
-                <n-checkbox value="frankfurt">Frankfurt</n-checkbox>
-            </n-checkbox-group>
-        </div>
-        <div class="col--1-1">
-            <pre class="pretty">{{ checked }}</pre>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data()
-        {
-            return {
-                checked: ['berlin']
-            };
-        }
-    } 
-</script>
-
-```
-
-### Vertical grouped checkboxes
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-checkbox-group v-model="checked" align="vertical">
-                <n-checkbox :global="true">Check all</n-checkbox>
-                <n-checkbox value="berlin">Berlin</n-checkbox>
-                <n-checkbox value="hamburg">Hamburg</n-checkbox>
-                <n-checkbox value="munich">Munich</n-checkbox>
-                <n-checkbox value="cologne">Cologne</n-checkbox>
-                <n-checkbox value="frankfurt">Frankfurt</n-checkbox>
-            </n-checkbox-group>
-        </div>
-        <div class="col--1-1">
-            <pre class="pretty">{{ checked }}</pre>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data()
-        {
-            return {
-                checked: ['berlin']
-            };
-        }
-    } 
-</script>
-
-```
-
-### Checkbox sizes
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-checkbox v-model="checked" size="small">Small</n-checkbox>
-            <n-checkbox v-model="checked">Default</n-checkbox>
-            <n-checkbox v-model="checked" size="large">Large</n-checkbox>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data()
-        {
-            return {
-                checked: true
-            };
-        }
-    } 
-</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/form/datepicker.md

@@ -1,78 +0,0 @@
-# Datepicker
-Datepicker with diffrent styles.
-
-```vue
-<n-datepicker v-model="text"></n-datepicker>
-```
-
-### Datepicker
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-datepicker v-model="timestamp" placeholder="Select date" />
-        </div>
-        <div class="col--1-1">
-            <n-datepicker v-model="timestamp" placeholder="Select date" :disabled="true" />
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data()
-        {
-            return { timestamp: 'now+2days' };
-        }
-    } 
-</script>
-
-```
-
-
-### Properties
-**value**  
-default: null  
-types: String  
-_Datepicker 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 datepicker event */
-    NDraggable.$on('datepicker', (value) => {
-        console.log(value);
-    });
-```

package/docs/files/form/form.md

@@ -1,52 +0,0 @@
-# Form
-Form you know.
-
-```js [demo]
-    pi.Obj.assign(window.VueData, {
-        form: {
-            size: 'md', icon: null, square: false, link: false, disabled: false,
-        },
-        sizes: {
-            'sm': 'Small', 'md': 'Medium', 'lg': 'Large'
-        },
-        icons: {
-            'fa fa-ghost': 'Ghost', 'fa fa-plus': 'Plus', 'fa fa-minus': 'Minus'
-        }
-    });
-```
-
-```html
-/*vue*/
-<template>
-    <n-form :form="form" :errors="errors">
-    <n-form-item label="Value 01" prop="val1">
-        <n-input v-model="form.val1"></n-input>
-    </n-form-item>
-    <n-form-item label="Value 02" prop="val2">
-        <n-input v-model="form.val2"></n-input>
-    </n-form-item>
-    </n-form>
-</template>
-<script>
-    export default {
-        data()
-        {
-            let form = {
-                val1: '', val2: ''
-            };
-            
-            let errors = {
-                val1: 'Some random error'
-            };
-            
-            return { form: form,  errors: errors }
-        }
-    }
-</script>
-```
-
-### Properties
-coming soon
-
-### Events
-coming soon

package/docs/files/form/input.md

@@ -1,90 +0,0 @@
-# NInput
-
-The `<n-input>` component provides a customizable input field with optional icon support.
-
-## Demo
-
-```js [demo]
-pi.Obj.assign(window.VueData, {
-    inputBinds: {
-        size: 'md', type: 'primary', icon: null, iconPosition: 'after', disabled: false, placeholder: 'Enter your text'
-    },
-    inputReact: {
-        model: ''
-    },
-    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@lg" label="Type">
-                <n-select v-model="inputBinds.type" :options="types" />
-            </n-form-item>
-            <n-form-item class="col--1-1 col--6-12@sm col--3-12@lg" label="Size">
-                <n-select v-model="inputBinds.size" :options="sizes" />
-            </n-form-item>
-            <n-form-item class="col--1-1 col--6-12@sm col--3-12@lg" label="Icon">
-                <n-select v-model="inputBinds.icon" placeholder="Icon" :clearable="true" :options="icons" />
-            </n-form-item>
-            <n-form-item class="col--1-1 col--6-12@sm col--3-12@lg" label="Disabled">
-                <n-switch v-model="inputBinds.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-input v-model="inputReact.model" v-bind="inputBinds" placeholder="Enter your text" />
-            </div>
-            <div class="col--flex-1-1">
-                <code style="white-space: initial">{{ inputReact }}</code>
-            </div>
-        </div>
-    </div>
-</n-form>
-```
-
-## Example
-
-```vue
-<template>
-  <n-input v-model="modelValue" placeholder="Enter text" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      modelValue: 'foobar',
-    };
-  },
-};
-</script>
-```
-
-In this example, an `NInput` component is used to create an input field. The value of the input is bound to the `modelValue` data property using `v-model`.
-
-## Properties
-
-| Prop              | Type      | Default    | Description                                                                                          |
-|-------------------|-----------|------------|------------------------------------------------------------------------------------------------------|
-| `modelValue`      | `String`  | `null`     | The value of the input field.                                                                       |
-| `type`            | `String`  | `'primary'` | The type of the input field.                                                                        |
-| `size`            | `String`  | `'md'`     | The size of the input field. Can be `'sm'`, `'md'`, or `'lg'`.                                       |
-| `disabled`        | `Boolean` | `false`    | Whether the input field is disabled.                                                                 |
-| `placeholder`     | `String`  | `''`       | The placeholder text for the input field.                                                            |
-| `icon`            | `String`  | `''`     | The name of the icon to display.                                                                     |
-| `iconPosition`    | `String`  | `'after'`  | The position of the icon relative to the input field (`'before'` or `'after'`).                       |
-| `iconDisabled`    | `Boolean` | `null`     | Whether the icon is disabled. If `null`, it will use the input's disabled state.                      |
-| `nativeType`      | `String`  | `'text'`   | The native type of the input field (`'text'`, `'password'`, `'email'`, etc.).                         |
-
-## Events
-
-| Event Name      | Description                                                                                           |
-|----------------|-------------------------------------------------------------------------------------------------------|
-| `icon-click`   | Emitted when the icon is clicked.                                                                     |

package/docs/files/form/radio.md

@@ -1,150 +0,0 @@
-# Radio
-Radio with diffrent styles.
-
-```vue
-<n-radio-group v-model="checked">
-    <n-radio value="berlin">Berlin</n-radio>
-    <n-radio value="hamburg">Hamburg</n-radio>
-</n-radio-group>
-```
-
-### Radios
-
-```html
-/*vue*/
-
-    <template>
-        <div class="grid grid--col grid--20-20">
-            <div class="col--1-1">
-            <n-radio-group v-model="checked">
-                <n-radio value="berlin">Berlin</n-radio>
-                <n-radio value="hamburg">Hamburg</n-radio>
-            </n-radio-group>
-            </div>
-            <div class="col--1-1">
-                <pre class="pretty">{{ checked }}</pre>
-            </div>
-        </div>
-    </template>
-    
-    <script>
-        export default {
-            data()
-            {
-                return {
-                    checked: 'berlin'
-                };
-            }
-        } 
-    </script>
-
-```
-
-### Vertical radios
-
-```html
-/*vue*/
-
-    <template>
-        <div class="grid grid--col grid--20-20">
-            <div class="col--1-1">
-            <n-radio-group v-model="checked" align="vertical">
-                <n-radio value="berlin">Berlin</n-radio>
-                <n-radio value="hamburg">Hamburg</n-radio>
-            </n-radio-group>
-            </div>
-            <div class="col--1-1">
-                <pre class="pretty">{{ checked }}</pre>
-            </div>
-        </div>
-    </template>
-    
-    <script>
-        export default {
-            data()
-            {
-                return {
-                    checked: 'berlin'
-                };
-            }
-        } 
-    </script>
-
-```
-
-### Radio sizes
-
-```html
-/*vue*/
-
-    <template>
-        <div class="grid grid--col grid--20-20">
-            <div class="col--1-1">
-            <n-radio-group v-model="checked">
-                <n-radio value="berlin" size="small">Berlin</n-radio>
-                <n-radio value="hamburg">Hamburg</n-radio>
-                <n-radio value="munich" size="large">Munich</n-radio>
-            </n-radio-group>
-            </div>
-            <div class="col--1-1">
-                <pre class="pretty">{{ checked }}</pre>
-            </div>
-        </div>
-    </template>
-    
-    <script>
-        export default {
-            data()
-            {
-                return {
-                    checked: 'berlin'
-                };
-            }
-        } 
-    </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);
-    });
-```