@volverjs/ui-vue 0.0.6-beta.6 → 0.0.6

package/src/stories/Combobox/ComboboxSlots.stories.mdx

@@ -1,153 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
-import VvIcon from '@/components/VvIcon/VvIcon.vue'
-import { Template } from './Combobox.stories.mdx'
-import { defaultTest } from './Combobox.test.ts'
-import { defaultArgs, argTypes } from './Combobox.settings'
-
-<Meta
-	title="Components/Combobox/Slots"
-	component={VvCombobox}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-<Canvas>
-	<Story
-		name="Before"
-		play={defaultTest}
-		args={{
-			before: '<div class="vv-badge vv-badge--sm vv-badge--gray vv-badge--outline uppercase">Before</div>',
-		}}
-		argTypes={{
-			before: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="After"
-		play={defaultTest}
-		args={{
-			after: '<div class="vv-badge vv-badge--sm vv-badge--gray vv-badge--outline uppercase">After</div>',
-		}}
-		argTypes={{
-			after: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Value"
-		play={defaultTest}
-		args={{
-			multiple: true,
-		}}
-		argTypes={{
-			value: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{(args) => ({
-			components: { VvCombobox },
-			setup() {
-				return { args }
-			},
-			data() {
-				return {
-					inputValue: undefined,
-				}
-			},
-			template: /*html*/ `
-				<vv-combobox v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
-					<template #before v-if="args.before"><div class="pl-sm flex" v-html="args.before"></div></template>
-					<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
-					<template #after v-if="args.after"><div class="pr-sm flex" v-html="args.after"></div></template>
-					<template #value="{ selectedOptions }">
-						<div v-for="(option, index) in selectedOptions" :key="index" class="vv-badge vv-badge--sm vv-badge--rounded vv-badge--outline uppercase">{{option}}</div>
-					</template>
-				</vv-combobox>
-				<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
-			`,
-		})}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Option"
-		play={defaultTest}
-		args={{
-			multiple: true,
-		}}
-		argTypes={{
-			option: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{(args) => ({
-			components: { VvCombobox, VvIcon },
-			setup() {
-				return { args }
-			},
-			data() {
-				return {
-					inputValue: undefined,
-				}
-			},
-			template: /*html*/ `
-				<vv-combobox v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
-					<template #before v-if="args.before"><div class="pl-sm flex" v-html="args.before"></div></template>
-					<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
-					<template #after v-if="args.after"><div class="pr-sm flex" v-html="args.after"></div></template>
-					<template #option="{ option, selected }">
-						<div class="flex flex-1 items-center">
-							<vv-icon :name="selected ? 'check-circle' : 'circle'" />
-							<div class="flex-1 pl-sm">{{ option }}</div>
-						</div>
-					</template>
-				</vv-combobox>
-				<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
-			`,
-		})}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Hint"
-		play={defaultTest}
-		args={{
-			hint: 'Hint <em class="italic">slot!</em>',
-		}}
-		argTypes={{
-			hint: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/Dialog/Dialog.stories.mdx

@@ -1,56 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvDialog from '@/components/VvDialog/VvDialog.vue'
-import { defaultTest } from './Dialog.test'
-import { defaultArgs, argTypes } from './Dialog.settings'
-
-<Meta
-	title="Components/Dialog"
-	component={VvDialog}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { VvDialog },
-	setup() {
-		return { args }
-	},
-	data: () => ({ open: false }),
-	methods: {
-		onClick() {
-			this.open = !this.open
-		},
-	},
-	template: /*html*/ `
-		<vv-dialog v-bind="args" v-model="open" data-testId="element">
-			<template #header v-if="args.header"><div v-html="args.header"></div></template>
-			<template #default v-if="args.default"><div v-html="args.default"></div></template>
-			<template #footer v-if="args.footer"><div v-html="args.footer"></div></template>
-		</vv-dialog>
-		<button class="vv-button" @click="onClick" data-testId="button">Toggle</button>
-    `,
-})
-
-<Canvas>
-	<Story name="Dialog" play={defaultTest}>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Auto close"
-		play={defaultTest}
-		args={{ autoClose: true }}
-		argTypes={{
-			autoClose: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/Dialog/DialogSlots.stories.mdx

@@ -1,63 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvDialog from '@/components/VvDialog/VvDialog.vue'
-import { defaultTest } from './Dialog.test'
-import { defaultArgs, argTypes } from './Dialog.settings'
-import { Template } from './Dialog.stories.mdx'
-
-<Meta
-	title="Components/Dialog/Slots"
-	component={VvDialog}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-<Canvas>
-	<Story
-		name="Default"
-		play={defaultTest}
-		args={{ default: 'Default <em class="italic">slot!</em>' }}
-		argTypes={{
-			default: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Header"
-		play={defaultTest}
-		args={{ header: 'Header <em class="italic">slot!</em>' }}
-		argTypes={{
-			header: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Footer"
-		play={defaultTest}
-		args={{ footer: 'Footer <em class="italic">slot!</em>' }}
-		argTypes={{
-			footer: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/Dropdown/Dropdown.stories.mdx

@@ -1,124 +0,0 @@
-import { ref } from 'vue'
-import { Meta, Story } from '@storybook/addon-docs'
-import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
-import VvDropdownAction from '@/components/VvDropdown/VvDropdownAction.vue'
-import VvIcon from '@/components/VvIcon/VvIcon.vue'
-import VvButton from '@/components/VvButton/VvButton.vue'
-import { defaultTest } from './Dropdown.test'
-import { defaultArgs, argTypes } from './Dropdown.settings'
-
-<Meta
-	title="Components/Dropdown"
-	component={VvDropdown}
-	argTypes={argTypes}
-	args={defaultArgs}
-/>
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { VvDropdown, VvDropdownAction, VvIcon, VvButton },
-	setup() {
-		const expanded = ref(false)
-		return { args, expanded }
-	},
-	watch: {
-		expanded(newValue) {
-			if (!newValue) {
-				return
-			}
-			setTimeout(() => {
-				this.centerWrapper()
-			}, 300)
-		},
-	},
-	methods: {
-		centerWrapper() {
-			this.$refs.toggle?.$el?.scrollIntoView({
-				inline: 'center',
-				block: 'center',
-			})
-		},
-	},
-	mounted() {
-		this.centerWrapper()
-	},
-	template: /* html */ `
-		<div class="absolute inset-0 overflow-auto" ref="container">
-			<div style="width: 200%; height: 200%" ref="wrapper" data-testId="wrapper">
-				<vv-dropdown v-model="expanded" v-bind="args">
-					<vv-button ref="toggle" class="absolute top-full left-full -translate-1/2" modifiers="full-bleed" data-testId="trigger">
-						Toggle dropdown
-					</vv-button>
-					<template #items>
-						<vv-dropdown-action>
-							<vv-icon name="add" /> Create
-						</vv-dropdown-action>
-						<vv-dropdown-action>
-							<vv-icon name="edit" /> Update
-						</vv-dropdown-action>
-						<vv-dropdown-action>
-							<vv-icon name="trash" /> Delete
-						</vv-dropdown-action>
-					</template>
-				</vv-dropdown>
-			</div>
-		</div>
-	`,
-})
-
-<Canvas>
-	<Story name="Default" play={defaultTest}>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Arrow"
-		args={{ arrow: true, offset: 10 }}
-		argTypes={{
-			arrow: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Auto placement"
-		args={{ flip: false, autoPlacement: true, arrow: true, offset: 10 }}
-		argTypes={{
-			autoPlacement: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Trigger width"
-		args={{ triggerWidth: true }}
-		argTypes={{
-			triggerWidth: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/Dropdown/DropdownContextmenuDirective.stories.mdx

@@ -1,41 +0,0 @@
-import { ref } from 'vue'
-import { Meta, Story, Canvas } from '@storybook/addon-docs'
-import { defaultArgs, argTypes } from './Dropdown.settings'
-import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
-import VvDropdownAction from '@/components/VvDropdown/VvDropdownAction.vue'
-import VvIcon from '@/components/VvIcon/VvIcon.vue'
-
-<Meta title="Directives/Contextmenu" args={defaultArgs} argTypes={argTypes} />
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { VvDropdown, VvDropdownAction, VvIcon },
-	setup() {
-		const dropdownEl = ref(null)
-		return { args, dropdownEl }
-	},
-	template: /* html */ `
-		<div v-contextmenu="dropdownEl" class="w-full h-320 bg-surface-1 flex items-center justify-center">
-			<div class="text-word-2 text-18 uppercase w-150 text-center">Right click context menu</div>
-		</div>
-		<vv-dropdown v-bind="args" ref="dropdownEl">
-			<template #items>
-				<vv-dropdown-action>
-					<vv-icon name="add" /> Create
-				</vv-dropdown-action>
-				<vv-dropdown-action>
-					<vv-icon name="edit" /> Update
-				</vv-dropdown-action>
-				<vv-dropdown-action>
-					<vv-icon name="trash" /> Delete
-				</vv-dropdown-action>
-			</template>
-		</vv-dropdown>
-	`,
-})
-
-<Canvas>
-	<Story name="Default" args={{ placement: 'bottom-start' }}>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/Dropdown/DropdownMultilevel.stories.mdx

@@ -1,56 +0,0 @@
-import { ref } from 'vue'
-import { Meta, Story } from '@storybook/addon-docs'
-import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
-import VvDropdownAction from '@/components/VvDropdown/VvDropdownAction.vue'
-import VvIcon from '@/components/VvIcon/VvIcon.vue'
-import VvButton from '@/components/VvButton/VvButton.vue'
-import { defaultTest } from './Dropdown.test'
-import { defaultArgs, argTypes } from './Dropdown.settings'
-
-<Meta
-	title="Components/Dropdown/Multilevel"
-	component={VvDropdown}
-	argTypes={argTypes}
-	args={defaultArgs}
-/>
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { VvDropdown, VvDropdownAction, VvIcon, VvButton },
-	setup() {
-		const expanded = ref(false)
-		return { args, expanded }
-	},
-	template: /* html */ `
-        <vv-dropdown v-model="expanded" v-bind="args">
-            <vv-button ref="toggle" class="absolute top-1/2 left-1/2 -translate-1/2" modifiers="full-bleed" data-testId="trigger">
-                Toggle dropdown
-            </vv-button>
-            <template #items>
-                <vv-dropdown-action>
-                    <vv-icon name="edit" /> Update
-                </vv-dropdown-action>
-                <vv-dropdown-action>
-                    <vv-icon name="trash" /> Delete
-                </vv-dropdown-action>
-                <vv-dropdown placement="right-start" offset="5" arrow>
-                    <vv-dropdown-action>
-                        <vv-icon name="more-vertical" /> More
-                    </vv-dropdown-action>
-                    <template #items>
-                        <vv-dropdown-action>
-                            <vv-icon name="add" /> Create
-                        </vv-dropdown-action>
-                        <vv-dropdown-action>
-                            <vv-icon name="eye-on" /> Publish
-                        </vv-dropdown-action>
-                    </template>
-                </vv-dropdown>
-            </template>
-        </vv-dropdown>
-	`,
-})
-
-<Canvas>
-	<Story name="Default">{Template.bind()}</Story>
-</Canvas>

package/src/stories/Dropdown/DropdownSlots.stories.mdx

@@ -1,114 +0,0 @@
-import { ref } from 'vue'
-import { Meta, Story } from '@storybook/addon-docs'
-import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
-import VvIcon from '@/components/VvIcon/VvIcon.vue'
-import VvDropdownAction from '@/components/VvDropdown/VvDropdownAction.vue'
-import { defaultTest } from './Dropdown.test'
-import { defaultArgs, argTypes } from './Dropdown.settings'
-
-<Meta
-	title="Components/Dropdown/Slots"
-	component={VvDropdown}
-	argTypes={argTypes}
-	args={defaultArgs}
-/>
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { VvDropdown, VvDropdownAction, VvIcon },
-	setup() {
-		const expanded = ref(false)
-		return { args, expanded }
-	},
-	watch: {
-		expanded(newValue) {
-			if (!newValue) {
-				return
-			}
-			setTimeout(() => {
-				this.centerWrapper()
-			}, 300)
-		},
-	},
-	methods: {
-		centerWrapper() {
-			document.getElementById('toggle-button').scrollIntoView({
-				inline: 'center',
-				block: 'center',
-			})
-		},
-	},
-	mounted() {
-		this.centerWrapper()
-	},
-	template: /* html */ `
-		<div class="absolute inset-0 overflow-auto" ref="container">
-			<div style="width: 200%; height: 200%" ref="wrapper" data-testId="wrapper">
-				<vv-dropdown v-model="expanded" v-bind="args">
-                    <template #before v-if="args.before"><div v-html="args.before"></div></template>
-                    <template #default="{ init, toggle, aria }">
-                        <button :ref="(e) => init(e)" v-bind="aria" id="toggle-button" class="absolute cursor-pointer bg-info p-lg text-center top-full left-full -translate-1/2" data-testId="trigger" @click="toggle">
-                            Toggle dropdown
-                        </button>
-                    </template>
-					<template #items>
-						<vv-dropdown-action>
-							<vv-icon name="add" /> Create
-						</vv-dropdown-action>
-						<vv-dropdown-action>
-							<vv-icon name="edit" /> Update
-						</vv-dropdown-action>
-						<vv-dropdown-action>
-							<vv-icon name="trash" /> Delete
-						</vv-dropdown-action>
-					</template>
-                    <template #after v-if="args.after"><div v-html="args.after"></div></template>
-				</vv-dropdown>
-			</div>
-		</div>
-	`,
-})
-
-<Canvas>
-	<Story name="Default" play={defaultTest}>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Before"
-		args={{
-			before: '<div class="bg-warning p-xs text-center">Before</div>',
-		}}
-		argTypes={{
-			before: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="After"
-		args={{
-			after: '<div class="bg-danger text-white p-xs text-center">After</div>',
-		}}
-		argTypes={{
-			after: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/Icon/Icon.stories.mdx

@@ -1,91 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvIcon from '@/components/VvIcon/VvIcon.vue'
-import { defaultArgs, argTypes } from './Icon.settings'
-import NormalIcons from '@/assets/icons/normal.json'
-
-<Meta
-	title="Components/Icon"
-	component={VvIcon}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { VvIcon },
-	setup() {
-		return { args }
-	},
-	template: /*html*/ `<vv-icon v-bind="args" />`,
-})
-
-<Canvas>
-	<Story
-		name="Default"
-		args={{
-			width: 48,
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Remote"
-		args={{
-			name: 'fingerprint',
-			width: 48,
-			src: 'https://raw.githubusercontent.com/google/material-design-icons/master/src/action/fingerprint/materialicons/24px.svg',
-		}}
-		argTypes={{
-			name: {
-				control: {
-					disable: true,
-				},
-			},
-			src: {
-				control: {
-					disable: true,
-				},
-			},
-			svg: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Inline"
-		args={{
-			name: 'bell-2',
-			width: 48,
-			svg: `<svg viewBox="0 0 24 24">${NormalIcons.icons.bell.body}</svg>`,
-		}}
-		argTypes={{
-			name: {
-				control: {
-					disable: true,
-				},
-			},
-			src: {
-				control: {
-					disable: true,
-				},
-			},
-			svg: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>