@kizmann/nano-ui 0.8.36 → 0.9.0

package/docs/form/button.md

@@ -1,299 +0,0 @@
-# Button
-Button with diffrent styles.
-
-```vue
-<n-button @click="somevar = false">Button text</n-button>
-```
-
-### Basic buttons
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-button type="primary">Primary</n-button>
-            <n-button type="secondary">Secondary</n-button>
-            <n-button type="success">Success</n-button>
-            <n-button type="warning">Warning</n-button>
-            <n-button type="danger">Danger</n-button>
-            <n-button type="info">Info</n-button>
-        </div>
-        <div class="col--1-1">
-            <n-button type="primary" :disabled="true">Primary</n-button>
-            <n-button type="secondary" :disabled="true">Secondary</n-button>
-            <n-button type="success" :disabled="true">Success</n-button>
-            <n-button type="warning" :disabled="true">Warning</n-button>
-            <n-button type="danger" :disabled="true">Danger</n-button>
-            <n-button type="info" :disabled="true">Info</n-button>
-        </div>
-</template>
-
-<script>
-    export default {} 
-</script>
-
-```
-
-### Plain buttons
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-button type="primary" :plain="true">Primary</n-button>
-            <n-button type="secondary" :plain="true">Secondary</n-button>
-            <n-button type="success" :plain="true">Success</n-button>
-            <n-button type="warning" :plain="true">Warning</n-button>
-            <n-button type="danger" :plain="true">Danger</n-button>
-            <n-button type="info" :plain="true">Info</n-button>
-        </div>
-        <div class="col--1-1">
-            <n-button type="primary" :plain="true" :disabled="true">Primary</n-button>
-            <n-button type="secondary" :plain="true" :disabled="true">Secondary</n-button>
-            <n-button type="success" :plain="true" :disabled="true">Success</n-button>
-            <n-button type="warning" :plain="true" :disabled="true">Warning</n-button>
-            <n-button type="danger" :plain="true" :disabled="true">Danger</n-button>
-            <n-button type="info" :plain="true" :disabled="true">Info</n-button>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {} 
-</script>
-
-```
-
-### Rounded buttons
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-button type="primary" :round="true">Primary</n-button>
-            <n-button type="secondary" :round="true">Secondary</n-button>
-            <n-button type="success" :round="true">Success</n-button>
-            <n-button type="warning" :round="true">Warning</n-button>
-            <n-button type="danger" :round="true">Danger</n-button>
-            <n-button type="info" :round="true">Info</n-button>
-        </div>
-        <div class="col--1-1">
-            <n-button type="primary" :round="true" :plain="true">Primary</n-button>
-            <n-button type="secondary" :round="true" :plain="true">Secondary</n-button>
-            <n-button type="success" :round="true" :plain="true">Success</n-button>
-            <n-button type="warning" :round="true" :plain="true">Warning</n-button>
-            <n-button type="danger" :round="true" :plain="true">Danger</n-button>
-            <n-button type="info" :round="true" :plain="true">Info</n-button>
-        </div>
-</template>
-
-<script>
-    export default {} 
-</script>
-
-```
-
-### Link buttons
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-button type="primary" :link="true">Primary</n-button>
-            <n-button type="success" :link="true">Success</n-button>
-            <n-button type="warning" :link="true">Warning</n-button>
-            <n-button type="danger" :link="true">Danger</n-button>
-            <n-button type="info" :link="true">Info</n-button>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {} 
-</script>
-
-```
-
-### Buttons with icon
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-button type="primary" :icon="icons.primary" icon-position="before">Primary</n-button>
-            <n-button type="success" :icon="icons.success" icon-position="before">Success</n-button>
-            <n-button type="warning" :icon="icons.warning" icon-position="before">Warning</n-button>
-            <n-button type="danger" :icon="icons.danger" icon-position="before">Danger</n-button>
-            <n-button type="info" :icon="icons.info" icon-position="before">Info</n-button>
-        </div>
-        <div class="col--1-1">
-            <n-button type="primary" :plain="true" :icon="icons.primary" icon-position="after">Primary</n-button>
-            <n-button type="success" :plain="true" :icon="icons.success" icon-position="after">Success</n-button>
-            <n-button type="warning" :plain="true" :icon="icons.warning" icon-position="after">Warning</n-button>
-            <n-button type="danger" :plain="true" :icon="icons.danger" icon-position="after">Danger</n-button>
-            <n-button type="info" :plain="true" :icon="icons.info" icon-position="after">Info</n-button>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {} 
-</script>
-
-```
-
-### Buttons with only icon
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-button type="primary" :icon="icons.primary" :square="true"></n-button>
-            <n-button type="success" :icon="icons.success" :square="true" :round="true"></n-button>
-            <n-button type="warning" :icon="icons.warning" :square="true"></n-button>
-            <n-button type="danger" :icon="icons.danger" :square="true" :round="true"></n-button>
-            <n-button type="info" :icon="icons.info" :square="true"></n-button>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {} 
-</script>
-
-```
-
-### Button group
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-button-group>
-                <n-button type="primary" :icon="icons.angleLeft" icon-position="before">Previous</n-button>
-                <n-button type="primary" :icon="icons.angleRight" icon-position="after">Previous</n-button>
-            </n-button-group>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {} 
-</script>
-
-```
-
-### Button sizes
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-button type="primary" size="mini">Mini</n-button>
-            <n-button type="primary" size="small">Small</n-button>
-            <n-button type="primary">Default</n-button>
-            <n-button type="primary" size="large">Large</n-button>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {} 
-</script>
-
-```
-
-
-### Button native type
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-button type="primary" native-type="a" href="http://google.com" target="_blank">www.google.com</n-button>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {} 
-</script>
-
-```
-
-### Properties
-**type**  
-default: 'primary'  
-types: String  
-_Button type (primary, secondary, succes, warning, danger, info)_
-
-**type**  
-default: 'link'  
-types: Boolean  
-_Applies link styling for button_
-
-**size**  
-default: null  
-types: String  
-_Button size (mini, small, large)_
-
-**square**  
-default: false  
-types: Boolean  
-_If button is square, helpful for only icon buttons_
-
-**round**  
-default: false  
-types: Boolean  
-_If button is rounded_
-
-**plain**  
-default: false  
-types: Boolean  
-_If button uses plain style_
-
-**disabled**  
-default: false  
-types: Boolean  
-_If button uses disabled style and mode_
-
-**icon**  
-default: ''  
-types: String  
-_Icon class (fa fa-times)_
-
-**iconPosition**  
-default: 'before'  
-types: String  
-_Icon position (before, after)_
-
-**nativeType**  
-default: 'button'  
-types: String  
-_Native button type (a, button, div etc.)_
-
-### Events
-```javascript
-    /* Allows all types which are supported by native type */
-    NButton.$on('click', (event) => {
-        console.log(event);
-    });
-```

package/docs/form/input.md

@@ -1,205 +0,0 @@
-# Input
-Input with diffrent styles.
-
-```vue
-<n-input v-model="text"></n-input>
-```
-
-### Input
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-input v-model="text" placeholder="Enter text" />
-        </div>
-        <div class="col--1-1">
-            <n-input v-model="text" placeholder="Enter text" :disabled="true" />
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data()
-        {
-            return { text: '' };
-        }
-    } 
-</script>
-
-```
-
-### Round input
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-input v-model="text" placeholder="Enter text" :round="true" />
-        </div>
-        <div class="col--1-1">
-            <n-input v-model="text" placeholder="Enter text" :round="true" :disabled="true" />
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data()
-        {
-            return { text: '' };
-        }
-    } 
-</script>
-
-```
-
-### Input with icon
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--row grid--wrap grid--20-20">
-        <div class="col--1-1 col--1-2@md">
-            <n-input v-model="text" icon="fa fa-search" :icon-disabled="!canSearch" icon-position="before" @icon-click="search" />
-        </div>
-        <div class="col--1-1 col--1-2@md">
-            <n-input v-model="text" :native-type="type" :icon="eyeIcon" icon-position="after"  @icon-click="toggle" />
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data()
-        {
-            return { type: 'password', text: 'Top secret password' };
-        },
-        computed: {
-            canSearch()
-            {
-                return !! this.text;
-            },
-            eyeIcon()
-            {
-                return this.type === 'text' ?
-                    'fa fa-eye-slash' : 'fa fa-eye';
-            }
-        },
-        methods: {
-            toggle()
-            {
-                this.type = this.type === 'text' ?
-                    'password' : 'text';
-            },
-            search()
-            {
-                window.alert('Search for: ' + this.text);
-            }
-        }
-    } 
-</script>
-
-```
-
-### Input with icon
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-input value="Small" size="small" />
-        </div>
-        <div class="col--1-1">
-            <n-input value="Default" />
-        </div>
-        <div class="col--1-1">
-            <n-input value="Large" size="large" />
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {} 
-</script>
-
-```
-
-### Input group
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-button-group>
-                <n-input v-model="text" placeholder="Enter text"></n-input>
-                <n-button icon="fa fa-search">Search</n-button>
-            </n-button-group>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data()
-        {
-            return { text: '' };
-        }
-    } 
-</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/form/switch.md

@@ -1,166 +0,0 @@
-# Switch
-Checkbox with diffrent styles.
-
-```vue
-<n-switch v-model="value">Your label</n-switch>
-```
-
-### Switch
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-switch v-model="value">Accept something</n-switch>
-        </div>
-        <div class="col--1-1">
-            <n-switch v-model="value" :disabled="true">Can't accept me</n-switch>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data()
-        {
-            return {
-                value: true
-            };
-        }
-    } 
-</script>
-
-```
-
-### Switch with custom values
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-switch v-model="value" on-value="foo" off-value="bar">Accept foobar</n-switch>
-        </div>
-        <div class="col--1-1">
-            <pre class="pretty">{{ value }}</pre>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data()
-        {
-            return {
-                value: 'foo'
-            };
-        }
-    } 
-</script>
-
-```
-
-### Switch colors
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-switch v-model="value" on-type="success" off-type="danger">Accept me</n-switch>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data()
-        {
-            return {
-                value: true
-            };
-        }
-    } 
-</script>
-
-```
-
-### Switch sizes
-
-```html
-/*vue*/
-
-<template>
-    <div class="grid grid--col grid--20-20">
-        <div class="col--1-1">
-            <n-switch v-model="value" size="small">Accept me</n-switch>
-        </div>
-        <div class="col--1-1">
-            <n-switch v-model="value">Accept me</n-switch>
-        </div>
-        <div class="col--1-1">
-            <n-switch v-model="value" size="large">Accept me</n-switch>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data()
-        {
-            return {
-                value: 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);
-    });
-```