@kizmann/nano-ui 1.0.0 → 1.0.2

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,98 +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--1-1">
-                <h3>Default</h3>
-            </div>
-            <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--1-1">
-                <h3>With custom values</h3>
-            </div>
-            <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