@volverjs/ui-vue 0.0.10-beta.7 → 0.0.10-beta.70

package/src/stories/Dropdown/DropdownContextmenuDirective.stories.ts

@@ -1,49 +0,0 @@
-import { ref } from 'vue'
-import type { Meta, StoryObj } from '@storybook/vue3'
-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'
-
-const meta: Meta<typeof VvDropdown> = {
-	title: 'Directives/Contextmenu',
-	component: VvDropdown,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvDropdown>
-
-export const Default: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		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>
-		`,
-	}),
-}

package/src/stories/Dropdown/DropdownMultilevel.stories.ts

@@ -1,61 +0,0 @@
-import { ref } from 'vue'
-import type { Meta, StoryObj } from '@storybook/vue3'
-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'
-
-const meta: Meta<typeof VvDropdown> = {
-	title: 'Components/Dropdown/Multilevel',
-	component: VvDropdown,
-	args: defaultArgs,
-	argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvDropdown>
-
-export const Default: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvDropdown, VvDropdownAction, VvIcon, VvButton },
-		setup() {
-			const expanded = ref(false)
-			return { expanded, args }
-		},
-		template: /* html */ `
-            <vv-dropdown v-model="expanded" v-bind="args" data-testId="wrapper">
-                <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>
-        `,
-	}),
-	play: defaultTest,
-}

package/src/stories/Dropdown/DropdownSlots.stories.ts

@@ -1,95 +0,0 @@
-import { ref } from 'vue'
-import type { Meta, StoryObj } from '@storybook/vue3'
-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'
-
-const meta: Meta<typeof VvDropdown> = {
-	title: 'Components/Dropdown/Slots',
-	component: VvDropdown,
-	args: defaultArgs,
-	argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvDropdown>
-
-export const Default: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvDropdown, VvDropdownAction, VvIcon },
-		setup() {
-			const expanded = ref(false)
-			return { expanded, args }
-		},
-		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>
-		`,
-	}),
-	play: defaultTest,
-}
-
-export const Before: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		before: '<div class="bg-warning p-xs text-center">Before</div>',
-	},
-}
-
-export const After: Story = {
-	...Default,
-	args: {
-		...Default.args,
-		after: '<div class="bg-danger text-white p-xs text-center">After</div>',
-	},
-}

package/src/stories/Icon/Icon.settings.ts

@@ -1,72 +0,0 @@
-import { VvIconProps } from '@/components/VvIcon'
-import normal from '@/assets/icons/normal.json'
-import { ModifiersArgTypes } from '@/stories/argTypes'
-
-export const defaultArgs = {
-	...propsToObject(VvIconProps),
-	name: 'add-circle',
-	width: 48
-}
-
-export const argTypes = {
-	name: {
-		options: Object.keys(normal.icons),
-		control: {
-			type: 'select',
-		},
-	},
-	mode: {
-		options: ['style', 'bg', 'mask', 'svg'],
-		control: {
-			type: 'select',
-		},
-	},
-	src: {
-		description: 'Url remote SVG icon',
-		control: {
-			type: 'text',
-		},
-		table: {
-			type: {
-				summary: 'url',
-			},
-		},
-	},
-	svg: {
-		description: 'Svg icon string',
-		control: {
-			type: 'text',
-		},
-		table: {
-			type: {
-				summary: 'xml',
-			},
-		},
-	},
-	prefix: {
-		options: ['simple', 'normal', 'detailed'],
-		control: {
-			type: 'select',
-		},
-		table: {
-			defaultValue: {
-				summary: 'normal',
-			},
-		},
-	},
-	flip: {
-		options: ['', 'vertical', 'horizontal'],
-		control: {
-			type: 'radio',
-		},
-	},
-	onLoad: {
-		description: 'A callback that is called when icon data has been loaded',
-		table: {
-			type: {
-				summary: 'function',
-			},
-		},
-	},
-	...ModifiersArgTypes,
-}

package/src/stories/Icon/Icon.stories.ts

@@ -1,48 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvIcon from '@/components/VvIcon/VvIcon.vue'
-import { defaultArgs, argTypes } from './Icon.settings'
-import NormalIcons from '@/assets/icons/normal.json'
-
-const meta: Meta<typeof VvIcon> = {
-	title: 'Components/Icon',
-	component: VvIcon,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvIcon>
-
-export const Default: Story = {
-	args: {
-		...defaultArgs,
-	},
-	render: (args) => ({
-		components: { VvIcon },
-		setup() {
-			return { args }
-		},
-		template: /*html*/ `<vv-icon v-bind="args" />`,
-	}),
-}
-
-export const Remote: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		name: 'fingerprint',
-		src: 'https://raw.githubusercontent.com/google/material-design-icons/master/src/action/fingerprint/materialicons/24px.svg',
-	},
-}
-
-export const Inline: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		name: 'bell-2',
-		svg: `<svg viewBox="0 0 24 24">${NormalIcons.icons.bell.body}</svg>`,
-	},
-}
-

package/src/stories/Icon/IconsCollection.stories.ts

@@ -1,53 +0,0 @@
-import { ref, watch } from 'vue'
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvIcon from '@/components/VvIcon/VvIcon.vue'
-import { icons as NormalIcons } from '@/assets/icons/normal.json'
-import { defaultArgs, argTypes } from './Icon.settings'
-
-const meta: Meta<typeof VvIcon> = {
-	title: 'Components/Icon/Collection',
-	component: VvIcon,
-	args: defaultArgs,
-	argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvIcon>
-
-export const Default: Story = {
-	args: {
-		...defaultArgs,
-		width: 24,
-	},
-	render: (args) => ({
-		components: { VvIcon },
-		setup() {
-			const allIcons = Object.keys(NormalIcons)
-			const icons = ref(allIcons)
-			const search = ref('')
-			watch(search, (newValue) => {
-				icons.value = allIcons.filter((icon) => icon.includes(newValue))
-			})
-			return { args, search, icons }
-		},
-		template: /*html*/ `
-			<div class="absolute inset-0 overflow-y-auto p-16">
-				<div class="vv-input-text">
-					<div class="vv-input-text__wrapper">
-						<input v-model="search" type="search" placeholder="Search..." />
-					</div>
-				</div>
-				<div class="grid grid-cols-5 gap-16 mt-16">
-					<div
-						v-for="iconName in icons"
-						:key="iconName"
-						class="flex items-center gap-16">
-						<VvIcon v-bind="args" :name="iconName" />
-						{{ iconName }}
-					</div>
-				</div>
-			</div>
-		`,
-	}),
-}

package/src/stories/InputText/InputText.settings.ts

@@ -1,259 +0,0 @@
-import { HintArgTypes, InputTextareaArgTypes } from '@/stories/argTypes'
-import { VvInputTextProps } from '@/components/VvInputText'
-import normal from '@/assets/icons/normal.json'
-
-export const defaultArgs = {
-	...propsToObject(VvInputTextProps),
-	name: 'vv-input-text',
-	label: 'Input label',
-	placeholder: 'Input placeholder',
-	min: undefined,
-	max: undefined,
-	minlength: undefined,
-	maxlength: undefined,
-}
-
-export const argTypes = {
-	...InputTextareaArgTypes,
-	...HintArgTypes,
-	type: {
-		description: 'Type of form control',
-		options: [
-			'color',
-			'date',
-			'datetime-local',
-			'email',
-			'month',
-			'number',
-			'password',
-			'search',
-			'tel',
-			'text',
-			'time',
-			'url',
-			'week',
-		],
-		control: {
-			type: 'select',
-		},
-		table: {
-			defaultValue: {
-				summary: 'text',
-			},
-		},
-	},
-	min: {
-		description:
-			'Minimum value. Available for input types: date, month, week, time, datetime-local, number, range.',
-		control: {
-			type: 'text',
-		},
-	},
-	max: {
-		description:
-			'Maximum value. Available for input types: date, month, week, time, datetime-local, number, range.',
-		control: {
-			type: 'text',
-		},
-	},
-	step: {
-		description:
-			'Incremental values that are valid. Available for input types: date, month, week, time, datetime-local and number.',
-		table: {
-			defaultValue: {
-				summary: 1,
-			},
-		},
-	},
-	pattern: {
-		description:
-			'Pattern the value must match to be valid. Available for input types: text, search, url, tel, email and password.',
-		control: {
-			type: 'text',
-		},
-	},
-	multiple: {
-		description:
-			'Whether to allow multiple values. Available for input type email.',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-	iconShowPassword: {
-		description: 'VvIcon name for show password button',
-		options: ['', ...Object.keys(normal.icons)],
-		control: {
-			type: 'select',
-		},
-		table: {
-			defaultValue: {
-				summary: 'eye-on',
-			},
-		},
-	},
-	iconHidePassword: {
-		description: 'VvIcon name for hide password button',
-		options: ['', ...Object.keys(normal.icons)],
-		control: {
-			type: 'select',
-		},
-		table: {
-			defaultValue: {
-				summary: 'eye-off',
-			},
-		},
-	},
-	iconClear: {
-		description: 'VvIcon name for clear button',
-		options: ['', ...Object.keys(normal.icons)],
-		control: {
-			type: 'select',
-		},
-		table: {
-			defaultValue: {
-				summary: 'close',
-			},
-		},
-	},
-	labelStepUp: {
-		description: 'Label for step up button',
-		control: {
-			type: 'text',
-		},
-		table: {
-			defaultValue: {
-				summary: 'Increase value',
-			},
-		},
-	},
-	labelStepDown: {
-		description: 'Label for step down button',
-		control: {
-			type: 'text',
-		},
-		table: {
-			defaultValue: {
-				summary: 'Decrease value',
-			},
-		},
-	},
-	labelShowPassword: {
-		description: 'Label for show password button',
-		control: {
-			type: 'text',
-		},
-		table: {
-			defaultValue: {
-				summary: 'Show password',
-			},
-		},
-	},
-	labelHidePassword: {
-		description: 'Label for hide password button',
-
-		control: {
-			type: 'text',
-		},
-		table: {
-			defaultValue: {
-				summary: 'Hide password',
-			},
-		},
-	},
-	labelClear: {
-		description: 'Label for clear button',
-
-		control: {
-			type: 'text',
-		},
-		table: {
-			defaultValue: {
-				summary: 'Clear',
-			},
-		},
-	},
-	iMask: {
-		description: '[iMask](https://imask.js.org/guide.html) options',
-		control: {
-			type: 'object',
-		},
-	},
-	masked: {
-		description: 'Masked input',
-		control: {
-			type: 'text',
-		},
-	},
-	autoWidth: {
-		description: 'Adjust input width to content',
-		control: {
-			type: 'boolean',
-		},
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-			type: {
-				summary: 'boolean',
-			},
-		},
-	},
-	hideActions: {
-		description: 'Hide type number, password and search actions',
-		control: {
-			type: 'boolean',
-		},
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-			type: {
-				summary: 'boolean',
-			},
-		},
-	},
-	unit: {
-		description: 'Add unit label to input',
-		control: {
-			type: 'text',
-		},
-	},
-	selectOnFocus: {
-		description: 'Select input text on focus',
-		control: {
-			type: 'boolean',
-		},
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-			type: {
-				summary: 'boolean',
-			},
-		},
-	},
-	before: {
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	after: {
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-}