@kizmann/nano-ui 0.9.10 → 1.0.1

package/docs/files/form/select.md

@@ -1,202 +0,0 @@
-# Select
-Select with diffrent styles.
-
-```vue
-<n-select v-model="value">
-    <n-select-option value="foo">Foo</n-select-option>
-    <n-select-option value="bar">Bar</n-select-option>
-</n-select>
-```
-
-### Select
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-select v-model="value">
-                <n-select-option value="hamburg">Hamburg</n-select-option>
-                <n-select-option value="berlin">Berlin</n-select-option>
-                <n-select-option value="frankfurt" :disabled="true">Frankfurt</n-select-option>
-                <n-select-option value="munich">Munich</n-select-option>
-            </n-select>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data()
-        {
-            return { value: null };
-        }
-    } 
-</script>
-
-```
-
-
-### Clearable select
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-select v-model="value" :clearable="true">
-                <n-select-option value="hamburg">Hamburg</n-select-option>
-                <n-select-option value="berlin">Berlin</n-select-option>
-                <n-select-option value="frankfurt" :disabled="true">Frankfurt</n-select-option>
-                <n-select-option value="munich">Munich</n-select-option>
-            </n-select>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data()
-        {
-            return { value: null };
-        }
-    } 
-</script>
-
-```
-
-### Multiple select
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-select v-model="value" :multiple="true">
-                <n-select-option value="hamburg">Hamburg</n-select-option>
-                <n-select-option value="berlin">Berlin</n-select-option>
-                <n-select-option value="frankfurt" :disabled="true">Frankfurt</n-select-option>
-                <n-select-option value="munich">Munich</n-select-option>
-            </n-select>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data()
-        {
-            return { value: null };
-        }
-    } 
-</script>
-
-```
-
-### Create new options
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-select v-model="value" :allow-create="true">
-                <n-select-option value="hamburg">Hamburg</n-select-option>
-                <n-select-option value="berlin">Berlin</n-select-option>
-                <n-select-option value="frankfurt" :disabled="true">Frankfurt</n-select-option>
-                <n-select-option value="munich">Munich</n-select-option>
-            </n-select>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data()
-        {
-            return { value: null };
-        }
-    } 
-</script>
-
-```
-
-### Select group
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-button-group>
-                <n-select v-model="value">
-                    <n-select-option value="hamburg">Hamburg</n-select-option>
-                    <n-select-option value="berlin">Berlin</n-select-option>
-                    <n-select-option value="frankfurt" :disabled="true">Frankfurt</n-select-option>
-                    <n-select-option value="munich">Munich</n-select-option>
-                </n-select>
-                <n-button icon="fa fa-pen">Edit</n-button>
-            </n-button-group>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data()
-        {
-            return { value: null };
-        }
-    } 
-</script>
-
-```
-
-### Properties
-**value**  
-default: null  
-types: String  
-_Select 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/switch.md

@@ -1,92 +0,0 @@
-# Switch
-
-The `<n-switch>` component is a customizable switch component with various options to control its appearance and behavior. Below is a detailed description of its props, methods, and usage.
-
-
-## Demo
-
-```js [demo]
-pi.Obj.assign(window.VueData, {
-    switchBinds: {
-        size: 'md', disabled: false,
-    },
-    switchReact: {
-        model: 'foo'
-    }
-});
-```
-
-```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="Size">
-                <n-select v-model="switchBinds.size" :options="sizes" />
-            </n-form-item>
-            <n-form-item class="col--1-1 col--6-12@sm col--3-12@lg" label="Disabled">
-                <n-switch v-model="switchBinds.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-switch :model-value="true" v-bind="switchBinds" on-type="primary">Primary</n-switch>
-            </div>
-            <div class="col--auto">
-                <n-switch v-bind="switchBinds" on-type="secondary">Secondary</n-switch>
-            </div>
-            <div class="col--auto">
-                <n-switch :model-value="true" v-bind="switchBinds" on-type="success">Success</n-switch>
-            </div>
-            <div class="col--auto">
-                <n-switch v-bind="switchBinds" on-type="warning">Warning</n-switch>
-            </div>
-            <div class="col--auto">
-                <n-switch v-bind="switchBinds" on-type="danger">Danger</n-switch>
-            </div>
-            <div class="col--auto">
-                <n-switch v-bind="switchBinds" on-type="info">Info</n-switch>
-            </div>
-        </div>
-        <div class="grid grid--row grid--wrap grid--40-40 grid--middle">
-            <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>
-            <div class="col--flex-1-1">
-                <code style="white-space: initial">{{ switchReact }}</code>
-            </div>
-        </div>
-    </div>
-</n-form>
-```
-
-## Example
-
-```vue
-<template>
-  <n-switch v-model="modelValue" on-value="yes" off-value="no" @click="window.alert('Switch toggled!')">
-    Toggle Switch
-  </n-switch>
-</template>
-<script>
-  export default {
-      data() {
-          return { modelValue: 'yes' };
-      }
-  }
-</script>
-
-```
-
-## Properties
-
-| **Prop**     | **Type**            | **Default** | **Description**                                                                                  |
-|--------------|---------------------|-------------|--------------------------------------------------------------------------------------------------|
-| `modelValue` | `Boolean`           | `false`     | The current value of the switch.                                                                 |
-| `onValue`    | `Any`               | `true`      | The value when the switch is turned on.                                                          |
-| `offValue`   | `Any`               | `false`     | The value when the switch is turned off.                                                         |
-| `onType`     | `String`            | `'primary'` | The style type when the switch is on (e.g., 'primary', 'secondary').                             |
-| `offType`    | `String`            | `'default'` | The style type when the switch is off.                                                           |
-| `size`       | `String`            | `'md'`      | Sets the size of the switch (e.g., 'sm', 'md', 'lg').                                            |
-| `disabled`   | `Boolean`           | `false`     | If true, disables the switch.                                                                    |

package/docs/files/form/textarea.md

@@ -1,102 +0,0 @@
-# Textarea
-Textarea with diffrent styles.
-
-```vue
-<n-textarea v-model="text"></n-textarea>
-```
-
-### Textarea
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-textarea v-model="text" placeholder="Enter text" />
-        </div>
-        <div class="col--1-1">
-            <n-textarea v-model="text" placeholder="Enter text" :disabled="true" />
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data()
-        {
-            return { text: '' };
-        }
-    } 
-</script>
-
-```
-
-### Textarea with autorow
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-textarea v-model="text" placeholder="Enter text" :auto-rows="true" :min-rows="2" />
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data()
-        {
-            return { text: '' };
-        }
-    } 
-</script>
-
-```
-
-
-### Properties
-**value**  
-default: null  
-types: String  
-_Textarea 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 textarea event */
-    NDraggable.$on('textarea', (value) => {
-        console.log(value);
-    });
-```

package/docs/files/form/timepicker.md

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

package/docs/files/form/transfer.md

@@ -1,30 +0,0 @@
-# Transfer
-Drag and drop list or tree.
-
-```html
-/*vue*/
-<template>
-    <div>
-        <n-transfer v-model="value" :items="items" label-prop="title"></n-transfer>
-    </div>
-</template>
-<script>
-    export default {
-        data() {
-            
-            let items = pi.Arr.make(40).map((index) => {
-                return { id: pi.UUID(), title: 'foo-' + index };
-            });
-            
-            return {
-                items: items, value: items.slice(0, 10)
-            }
-        }
-    }
-</script>
-```
-
-### Properties
-
-
-### Events

package/docs/files/others/config.md

@@ -1,8 +0,0 @@
----
-layout: default
-title: Config
-nav_order: 5
-parent: Others
----
-
-# Config

package/docs/files/others/confirm.md

@@ -1,51 +0,0 @@
-# Confirm
-Confirm y0.
-
-```html
-/*vue*/
-<template>
-    <div class="grid grid--row grid--wrap grid--20-20">
-            <n-button class="col--1-1" type="primary" :plain="true">Primary</n-button>
-            <n-confirm type="primary" @abort="abort" @confirm="confirm">
-                Confirmtext!
-            </n-confirm>
-            <n-button class="col--1-1" type="success" :plain="true">Success</n-button>
-            <n-confirm type="success" @abort="abort" @confirm="confirm">
-                Confirmtext!
-            </n-confirm>
-            <n-button class="col--1-1" type="warning" :plain="true">Warning</n-button>
-            <n-confirm type="warning" @abort="abort" @confirm="confirm">
-                Confirmtext!
-            </n-confirm>
-            <n-button class="col--1-1" type="danger" :plain="true">Danger</n-button>
-            <n-confirm type="danger" @abort="abort" @confirm="confirm">
-                Confirmtext!
-            </n-confirm>
-            <n-button class="col--1-1" type="info" :plain="true">Info</n-button>
-            <n-confirm type="info" @abort="abort" @confirm="confirm">
-                Confirmtext!
-            </n-confirm>
-
-    </div>
-</template>
-<script>
-    export default {
-        methods: {
-            abort()
-            {
-                window.alert('abort');
-            },
-            confirm()
-            {
-                window.alert('confirm');
-            }
-        }
-    }
-</script>
-```
-
-### Properties
-coming soon
-
-### Events
-coming soon

package/docs/files/others/loader.md

@@ -1,22 +0,0 @@
-# Loader
-Loader you know.
-
-```html
-/*vue*/
-<template>
-    <n-loader :visible="true" style="background: #eee; width: 100%; height: 500px; line-height: 500px; text-align: center; border-radius: 3px;">
-        Im the content
-    </n-loader>
-</template>
-<script>
-    export default {
-        //
-    }
-</script>
-```
-
-### Properties
-coming soon
-
-### Events
-coming soon

package/docs/files/others/modal.md

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

@@ -1,52 +0,0 @@
-# Notification
-Notification pop up box.
-
-```html
-/*vue*/
-<template>
-    <div class="grid grid--row grid--wrap grid--20-20">
-            <n-button class="col--1-1" type="primary" :plain="true" @click="showPrimary">Primary</n-button>
-
-            <n-button class="col--1-1" type="success" :plain="true" @click="showSuccess">Success</n-button>
-
-            <n-button class="col--1-1" type="warning" :plain="true" @click="showWarning">Warning</n-button>
-
-            <n-button class="col--1-1" type="danger" :plain="true" @click="showDanger">Danger</n-button>
-
-            <n-button class="col--1-1" type="info" :plain="true" @click="showInfo">Info</n-button>
-
-    </div>
-</template>
-<script>
-    export default {
-        methods: {
-            showPrimary()
-            {
-                this.Notify('Im a primary message', 'primary');
-            },
-            showSuccess()
-            {
-                this.Notify('Im a success message', 'success');
-            },
-            showWarning()
-            {
-                this.Notify('Im a warning message', 'warning');
-            },
-            showDanger()
-            {
-                this.Notify('Im a danger message', 'danger');
-            },
-            showInfo()
-            {
-                this.Notify('Im a info message', 'info');
-            }
-        }
-    }
-</script>
-```
-
-### Properties
-coming soon
-
-### Events
-coming soon