@kizmann/nano-ui 0.9.10 → 1.0.1

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