@volverjs/ui-vue 0.0.10-beta.60 → 0.0.10-beta.62

package/src/stories/Tooltip/TooltipDirective.stories.ts

@@ -1,68 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import VvButton from '@/components/VvButton/VvButton.vue'
-import VvTooltip from '@/components/VvTooltip/VvTooltip.vue'
-import { argTypes, defaultArgs } from './Tooltip.settings'
-import { defaultTest } from './Tooltip.test'
-
-const meta: Meta<typeof VvTooltip> = {
-    title: 'Directives/Tooltip',
-    component: VvTooltip,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-type Story = StoryObj<typeof VvTooltip>
-
-export const DefaultDirective: Story = {
-    args: {
-        ...defaultArgs,
-    },
-    render: args => ({
-        components: { VvButton, VvTooltip },
-        setup() {
-            return { args }
-        },
-        template: /* html */ `
-			<div class="w-full h-150">
-				<vv-button v-tooltip:[args.position]="args.value" class="absolute left-1/2 top-1/2 -translate-1/2" data-testId="parent">
-					HOVER Me
-				</vv-button>
-			</div>
-		`,
-    }),
-    play: defaultTest,
-}
-
-export const Top: Story = {
-    ...DefaultDirective,
-    args: {
-        ...DefaultDirective.args,
-        position: 'top',
-    },
-}
-
-export const Bottom: Story = {
-    ...DefaultDirective,
-    args: {
-        ...DefaultDirective.args,
-        position: 'bottom',
-    },
-}
-
-export const Right: Story = {
-    ...DefaultDirective,
-    args: {
-        ...DefaultDirective.args,
-        position: 'right',
-    },
-}
-
-export const Left: Story = {
-    ...DefaultDirective,
-    args: {
-        ...DefaultDirective.args,
-        position: 'left',
-    },
-}

package/src/stories/argTypes.ts

@@ -1,563 +0,0 @@
-import type { ArgTypes } from '@storybook/vue3'
-import normal from '../assets/icons/normal.json'
-import { Placement, Position, Side } from '../constants'
-
-export const ValidArgTypes: ArgTypes = {
-    valid: {
-        description: 'Valid state',
-        table: {
-            defaultValue: {
-                summary: 'false',
-            },
-        },
-    },
-    validLabel: {
-        description: 'Valid hint label',
-        control: {
-            type: 'text',
-        },
-    },
-}
-
-export const InvalidArgTypes: ArgTypes = {
-    invalid: {
-        description: 'Invalid state',
-        table: {
-            defaultValue: {
-                summary: 'false',
-            },
-        },
-    },
-    invalidLabel: {
-        description: 'Invalid hint label',
-        control: {
-            type: 'text',
-        },
-    },
-}
-
-export const LoadingArgTypes: ArgTypes = {
-    loading: {
-        description: 'Loading state',
-        table: {
-            defaultValue: {
-                summary: 'false',
-            },
-        },
-    },
-    loadingLabel: {
-        description: 'Loading label',
-        control: {
-            type: 'text',
-        },
-    },
-}
-
-export const DisabledArgTypes: ArgTypes = {
-    disabled: {
-        control: 'boolean',
-        description: 'Whether the component is disabled',
-        table: {
-            defaultValue: {
-                summary: 'false',
-            },
-        },
-    },
-}
-
-export const ReadonlyArgTypes: ArgTypes = {
-    readonly: {
-        description: 'The value is not editable',
-        table: {
-            defaultValue: {
-                summary: 'false',
-            },
-        },
-    },
-}
-
-export const ModifiersArgTypes: ArgTypes = {
-    modifiers: {
-        description: 'Component BEM modifiers',
-        options: [],
-        control: {
-            type: 'check',
-        },
-    },
-}
-
-export const IconArgTypes: ArgTypes = {
-    icon: {
-        description: 'VvIcon name or props',
-        options: ['', ...Object.keys(normal.icons)],
-        control: {
-            type: 'select',
-        },
-    },
-    iconPosition: {
-        description: 'VvIcon position',
-        options: ['', ...Object.values(Position)],
-        control: {
-            type: 'select',
-        },
-        table: {
-            defaultValue: { summary: Position.before },
-        },
-    },
-}
-
-export const OptionsArgTypes: ArgTypes = {
-    options: {
-        description: 'List of options',
-        control: {
-            // @ts-expect-error to be fixed
-            type: 'array',
-        },
-    },
-    labelKey: {
-        description: 'Key of label in option object',
-        control: {
-            type: 'text',
-        },
-        table: {
-            defaultValue: {
-                summary: 'label',
-            },
-        },
-    },
-    valueKey: {
-        description: 'Key of value in option object',
-        control: {
-            type: 'text',
-        },
-        table: {
-            defaultValue: {
-                summary: 'value',
-            },
-        },
-    },
-    disabledKey: {
-        description: 'Key of disabled in option object',
-        control: {
-            type: 'text',
-        },
-        table: {
-            defaultValue: {
-                summary: 'disabled',
-            },
-        },
-    },
-}
-
-export const CountArgTypes: ArgTypes = {
-    count: {
-        description: 'Show character limit',
-        options: [true, false, 'limit', 'countdown'],
-        control: {
-            type: 'radio',
-        },
-        table: {
-            defaultValue: {
-                summary: 'false',
-            },
-            type: {
-                summary: 'boolean | string',
-            },
-        },
-    },
-}
-
-export const DebounceArgTypes: ArgTypes = {
-    debounce: {
-        description: 'Debounce milliseconds',
-        control: {
-            type: 'number',
-        },
-    },
-}
-
-export const DefaultSlotArgTypes: ArgTypes = {
-    default: {
-        description: 'The default slot',
-        control: {
-            type: 'text',
-        },
-        table: {
-            category: 'Slots',
-            type: {
-                summary: 'html',
-            },
-        },
-    },
-}
-
-export const HintArgTypes: ArgTypes = {
-    hintLabel: {
-        description: 'Hint label',
-        control: {
-            type: 'text',
-        },
-        table: {
-            type: {
-                summary: 'string',
-            },
-        },
-    },
-    hint: {
-        description: 'The hint slot',
-        control: {
-            type: 'text',
-        },
-        table: {
-            category: 'Slots',
-            type: {
-                summary: 'html',
-            },
-        },
-    },
-}
-
-export const TabindexArgTypes: ArgTypes = {
-    tabindex: {
-        description: 'Global attribute tabindex',
-        control: {
-            type: 'number',
-        },
-        table: {
-            defaultValue: {
-                summary: '0',
-            },
-        },
-    },
-}
-
-export const IdNameArgTypes: ArgTypes = {
-    id: {
-        description: 'Global attribute id.',
-        control: {
-            type: 'text',
-        },
-        table: {
-            defaultValue: {
-                summary: 'uid',
-            },
-        },
-    },
-    name: {
-        description:
-			'Name of the form control. Submitted with the form as part of a name/value pair.',
-        control: {
-            type: 'text',
-        },
-    },
-}
-
-export const DropdownArgTypes: ArgTypes = {
-    placement: {
-        description: 'Dropdown placement',
-        options: [...Object.values(Placement), ...Object.values(Side)],
-        control: {
-            type: 'select',
-        },
-        table: {
-            defaultValue: { summary: 'bottom' },
-        },
-    },
-    strategy: {
-        description: 'Dropdown strategy',
-        options: ['fixed', 'absolute'],
-        control: {
-            type: 'select',
-        },
-        table: {
-            defaultValue: { summary: 'absolute' },
-        },
-    },
-    transitionName: {
-        description: 'Dropdown show / hide transition name',
-        control: {
-            type: 'text',
-        },
-    },
-    offset: {
-        description: 'Offset of the dropdown from the trigger',
-        control: {
-            type: 'number',
-        },
-        table: {
-            defaultValue: {
-                summary: '0',
-            },
-            type: {
-                summary: 'number | string | object',
-            },
-        },
-    },
-    shift: {
-        description:
-			'Move dropdown to the side if there is no space in the default position',
-        control: {
-            type: 'boolean',
-        },
-        table: {
-            defaultValue: {
-                summary: 'true',
-            },
-            type: {
-                summary: 'boolean | object',
-            },
-        },
-    },
-    flip: {
-        description:
-			'Flip dropdown position if there is no space in the default position',
-        control: {
-            type: 'boolean',
-        },
-        table: {
-            defaultValue: {
-                summary: 'true',
-            },
-            type: {
-                summary: 'boolean | object',
-            },
-        },
-    },
-    size: {
-        description:
-			'Change the size of the dropdown to not overflow the viewport',
-        control: {
-            type: 'object',
-        },
-        table: {
-            defaultValue: {
-                summary: '{ "padding": 10 }',
-            },
-            type: {
-                summary: 'boolean | object',
-            },
-        },
-    },
-    autoPlacement: {
-        description: 'Automatically change the position of the dropdown',
-        control: {
-            type: 'boolean',
-        },
-        table: {
-            defaultValue: {
-                summary: 'false',
-            },
-            type: {
-                summary: 'boolean | object',
-            },
-        },
-    },
-    arrow: {
-        description: 'Add arrow to the dropdown',
-        control: {
-            type: 'boolean',
-        },
-        table: {
-            defaultValue: {
-                summary: 'false',
-            },
-            type: {
-                summary: 'boolean',
-            },
-        },
-    },
-    keepOpen: {
-        description: 'Keep open dropdown on click outside',
-        control: {
-            type: 'boolean',
-        },
-        table: {
-            defaultValue: {
-                summary: 'false',
-            },
-            type: {
-                summary: 'boolean',
-            },
-        },
-    },
-    triggerWidth: {
-        description: 'Set dropdown width to the same as the trigger',
-        control: {
-            type: 'boolean',
-        },
-        table: {
-            defaultValue: {
-                summary: 'false',
-            },
-            type: {
-                summary: 'boolean',
-            },
-        },
-    },
-}
-
-export const UnselectableArgTypes: ArgTypes = {
-    unselectable: {
-        description: 'If true the field will be unselectable',
-        table: {
-            defaultValue: {
-                summary: 'true',
-            },
-        },
-    },
-}
-
-export const FloatingLabelArgTypes: ArgTypes = {
-    floating: {
-        description: 'If true the label will be floating',
-        table: {
-            defaultValue: {
-                summary: 'false',
-            },
-        },
-    },
-}
-
-export const AutofocusArgTypes: ArgTypes = {
-    autofocus: {
-        description: 'Global attribute autofocus.',
-        table: {
-            defaultValue: {
-                summary: 'false',
-            },
-        },
-    },
-}
-
-export const AutocompleteArgTypes: ArgTypes = {
-    autocomplete: {
-        description: 'Hint for for autofill feature.',
-        control: {
-            type: 'text',
-        },
-        table: {
-            defaultValue: {
-                summary: 'off',
-            },
-        },
-    },
-}
-
-export const InputTextareaArgTypes = {
-    ...IdNameArgTypes,
-    ...AutofocusArgTypes,
-    ...AutocompleteArgTypes,
-    ...TabindexArgTypes,
-    ...DisabledArgTypes,
-    ...ReadonlyArgTypes,
-    ...ValidArgTypes,
-    ...InvalidArgTypes,
-    ...HintArgTypes,
-    ...LoadingArgTypes,
-    ...ModifiersArgTypes,
-    ...CountArgTypes,
-    ...DebounceArgTypes,
-    ...IconArgTypes,
-    ...FloatingLabelArgTypes,
-    minlength: {
-        description:
-			'Minimum length (number of characters) of value. Available for input types: text, search, url, tel, email, password.',
-        control: {
-            type: 'number',
-        },
-    },
-    maxlength: {
-        description:
-			'Maximum length (number of characters) of value. Available for input types: text, search, url, tel, email, password, number.',
-        control: {
-            type: 'number',
-        },
-    },
-    placeholder: {
-        description:
-			'Text that appears in the form control when it has no value set. Available for input types: text, search, url, tel, email, password, number.',
-        control: {
-            type: 'text',
-        },
-    },
-    required: {
-        description:
-			'A value is required or must be check for the form to be submittable. Available for all input types except color.',
-        table: {
-            defaultValue: {
-                summary: false,
-            },
-        },
-    },
-    label: {
-        description: 'Input label',
-        control: {
-            type: 'text',
-        },
-    },
-}
-
-export const CheckboxRadioArgTypes: ArgTypes = {
-    ...IdNameArgTypes,
-    ...TabindexArgTypes,
-    ...ValidArgTypes,
-    ...InvalidArgTypes,
-    ...HintArgTypes,
-    ...DisabledArgTypes,
-    ...ReadonlyArgTypes,
-    label: {
-        description: 'Input label',
-        control: {
-            type: 'text',
-        },
-    },
-    value: {
-        description: 'Input value',
-        control: {
-            type: 'text',
-        },
-    },
-}
-
-export const CheckboxRadioGroupArgTypes: ArgTypes = {
-    ...ValidArgTypes,
-    ...InvalidArgTypes,
-    ...OptionsArgTypes,
-    ...HintArgTypes,
-    ...DisabledArgTypes,
-    ...ReadonlyArgTypes,
-    label: {
-        description: 'Input label',
-        control: {
-            type: 'text',
-        },
-    },
-    name: {
-        description:
-			'Name of the form control. Submitted with the form as part of a name/value pair.',
-        control: {
-            type: 'text',
-        },
-    },
-    vertical: {
-        description:
-			'If true the options will be displayed vertically instead of horizontally',
-        table: {
-            defaultValue: {
-                summary: 'false',
-            },
-        },
-    },
-    default: {
-        description: 'Default slot for the options',
-        control: {
-            type: 'text',
-        },
-        table: {
-            category: 'Slots',
-            type: {
-                summary: 'html',
-            },
-        },
-    },
-}

package/src/test/expect.ts

@@ -1,83 +0,0 @@
-import { sleep } from '@/test/sleep'
-/* eslint-disable unused-imports/no-unused-vars */
-/* eslint-disable ts/no-namespace */
-import { expect, userEvent } from '@storybook/test'
-import { axe } from 'jest-axe'
-
-declare global {
-    namespace jest {
-        interface Matchers<R> {
-            toBeChecked: (expected?: HTMLElement) => CustomMatcherResult
-        }
-        interface Matchers<R> {
-            toBeClicked: (expected?: HTMLElement) => CustomMatcherResult
-        }
-        interface Matchers<R> {
-            toHaveClass: (
-                className: string | string[],
-                expected?: HTMLElement,
-            ) => CustomMatcherResult
-        }
-        interface Matchers<R> {
-            toHaveImgChild: (
-                imgTag: string,
-                expected?: HTMLElement,
-            ) => CustomMatcherResult
-        }
-    }
-}
-
-expect.extend({
-    async toBeChecked(checkbox: HTMLInputElement) {
-        await checkbox.click()
-        await sleep()
-        if (checkbox.checked) {
-            return {
-                pass: true,
-                message: () => `Checkbox is checked`,
-            }
-        }
-        return {
-            pass: false,
-            message: () => `Checkbox is not checked`,
-        }
-    },
-    async toBeClicked(element: HTMLElement) {
-        const result = {
-            pass: false,
-            message: () => 'Click event don\'t works',
-        }
-        element.addEventListener('click', () => {
-            result.pass = true
-            result.message = () => `Click event works`
-        })
-        await userEvent.click(element)
-        return result
-    },
-    async toHaveNoViolations(element: HTMLElement) {
-        const results = await axe(element)
-        return {
-            pass: results.violations.length === 0,
-            message: () => 'Element has violations',
-        }
-    },
-    async toHaveClass(element: HTMLElement, className: string | string[]) {
-        const classes = !Array.isArray(className) ? [className] : className
-        return {
-            pass: classes.every(cssClass =>
-                element.classList.contains(cssClass),
-            ),
-            message: () =>
-                `One of these classes doesn't exist: ${classes.join(', ')}`,
-        }
-    },
-    async toHaveImgChild(element: HTMLElement, imgTag: string) {
-        const img = element.getElementsByTagName(imgTag)
-        return {
-            pass: img.length === 1,
-            message: () => `${imgTag} not exist!`,
-        }
-    },
-})
-
-export { expect }