@volverjs/ui-vue 0.0.1-beta.8 → 0.0.2

package/src/composables/textLimit/useTextLimit.ts

@@ -1,44 +0,0 @@
-import { isString } from '@vueuse/core'
-import { computed, unref, type Ref } from 'vue'
-
-interface useTextOptions {
-	mode: string | boolean
-	upperLimit: number
-}
-
-/**
- *
- */
-export function useTextLimit(inputText: Ref<string>, options: useTextOptions) {
-	const textLength = computed(() => {
-		const _text = unref(inputText)
-		return isString(_text) ? _text.length : 0
-	})
-
-	const textLimitLength = computed(() => {
-		const _text = unref(inputText) || ''
-
-		if (!isString(_text) || options.mode === false) return 0
-
-		if (options.mode === true) return _text.length
-		else return unref(options.upperLimit) - _text.length
-	})
-
-	const formattedTextLimitLength = computed(() => {
-		if (options.mode === false) return ''
-
-		if (
-			options.mode === true &&
-			options.upperLimit &&
-			options.upperLimit > 0
-		)
-			return `${textLimitLength.value}/${unref(options.upperLimit)}`
-		else return textLimitLength.value
-	})
-
-	return {
-		textLength,
-		textLimitLength,
-		formattedTextLimitLength
-	}
-}

package/src/stories/Accordion/AccordionBordered.stories.mdx

@@ -1,26 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-import VvAccordion from '../../components/VvAccordion/VvAccordion.vue'
-import { Template } from './Accordion.stories.mdx'
-import { propsTest } from './accordionTest.js'
-
-<Meta title="Components/Accordion/Props/bordered" />
-
-# VvAccordion bordered
-
-Let's define a story for our `bordered` accordion.
-
-<Canvas>
-	<Story
-		name="bordered"
-		play={async ({ canvasElement }) => {
-			propsTest({ canvasElement }, 'bordered')
-		}}
-		args={{
-			bordered: true,
-			title: 'Accoridon with borders',
-			content:
-				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/Accordion/AccordionIconRight.stories.mdx

@@ -1,32 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvAccordion from '../../components/VvAccordion/VvAccordion.vue'
-import { propsTest } from './accordionTest.js'
-
-<Meta title="Components/Accordion/Props/icon-right" />
-
-# VvAccordion icon-right
-
-Let's define a story for our `icon-right` accordion.
-
-<Canvas>
-	<Story
-		name="icon-right"
-		play={async ({ canvasElement }) => {
-			propsTest({ canvasElement }, 'marker-right')
-		}}>
-		{() => {
-			return {
-				components: { VvAccordion },
-				data() {
-					return {
-						content:
-							'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
-					}
-				},
-				template: `<div class="w-1/2">
-						<vv-accordion data-testid="accordion" title="Icon right" :content="content" icon-right />
-					</div>`
-			}
-		}}
-	</Story>
-</Canvas>

package/src/stories/Accordion/accordionTest.js

@@ -1,36 +0,0 @@
-import { expect } from '@storybook/jest'
-import { within } from '@storybook/testing-library'
-import { toHaveNoViolations, axe } from 'jest-axe'
-
-async function accordionTest({ canvasElement, ...data }) {
-	const accordion = await within(canvasElement).findByTestId('accordion')
-	const title = accordion.firstChild
-	expect(accordion).toHaveClass('vv-accordion')
-	expect(title.innerText).toEqual(data.args.title)
-	expect(title).toHaveClass('vv-collapse__summary')
-	expect(accordion.open).toBe(false)
-	title.click()
-	expect(accordion.open).toBeTruthy()
-	const content = accordion.lastChild
-	expect(content).toHaveClass('vv-collapse__content')
-	expect(content.innerText).toEqual(data.args.content)
-	accessibilityTest(accordion)
-}
-
-async function propsTest({ canvasElement }, className) {
-	const accordion = await within(canvasElement).findByTestId('accordion')
-	expect(accordion).toHaveClass(`vv-accordion--${className}`)
-	accessibilityTest(accordion)
-}
-
-async function slotsTest({ canvasElement }) {
-	const slot = await within(canvasElement).findByTestId('slot')
-	expect(slot.innerHTML).toBeTruthy
-}
-
-async function accessibilityTest(element) {
-	expect.extend(toHaveNoViolations)
-	expect(await axe(element)).toHaveNoViolations()
-}
-
-export { accordionTest, propsTest, slotsTest }

package/src/stories/AccordionGroup/Accordion.stories.mdx

@@ -1,42 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvAccordionGroup from '../../components/VvAccordionGroup/VvAccordionGroup.vue'
-import VvAccordion from '../../components/VvAccordion/VvAccordion.vue'
-import { accordionTest } from './accordionGroupTest.js'
-
-<Meta title="Components/AccordionGroup/Props/accordion" />
-
-# VvAccordionGroup accordion
-
-Stories of `VvAccordionGroup` with `accordion`.
-
-<Canvas>
-	<Story name="accordion" play={accordionTest}>
-		{(args) => ({
-			components: { VvAccordionGroup, VvAccordion },
-			data() {
-				return {
-					selected: '',
-					content:
-						'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
-				}
-			},
-			template: `<div class="flex">
-					<div class="w-1/2">
-						<vv-accordion-group v-model:modelValue="selected" icon-right bordered accordion>
-							<vv-accordion data-testId="accordion-1" name="accordion 1" title="Details 1" :content="content" />
-							<vv-accordion name="accordion 2" title="Details 2" :content="content" />
-							<vv-accordion name="accordion 3" title="Details 3" :content="content" />
-						</vv-accordion-group>
-					</div>
-					<div data-testId="selected" v-if="selected" class="w-1/2 flex justify-end" >
-						selected: {{ selected }}
-					</div>
-				</div>`
-		})}
-	</Story>
-</Canvas>
-
-<Source
-	language="jsx"
-	code={`<vv-accordion-group v-model:modelValue="accordion" :items="items" icon-right bordered />`}
-/>

package/src/stories/AccordionGroup/AccordionItems.stories.mdx

@@ -1,51 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvAccordionGroup from '../../components/VvAccordionGroup/VvAccordionGroup.vue'
-import { itemsTest } from './accordionGroupTest.js'
-
-<Meta title="Components/AccordionGroup/Props/items" />
-
-# VvAccordionGroup items
-
-Stories of `VvAccordionGroup` with `items`.
-
-<Canvas>
-	<Story name="items" args={{}} play={itemsTest}>
-		{(args) => ({
-			components: { VvAccordionGroup },
-			data() {
-				return {
-					selected: [],
-					content:
-						'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
-					items: [
-						{
-							name: 'a-1',
-							title: 'Details 1',
-							content:
-								'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
-						},
-						{
-							name: 'a-2',
-							title: 'Details 2',
-							content:
-								'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
-						}
-					]
-				}
-			},
-			template: `<div class="flex">
-					<div class="w-1/2">
-						<vv-accordion-group data-testId="accordion-group" v-model:modelValue="selected" :items="items" icon-right bordered />
-					</div>
-					<div data-testId="selected" v-if="selected" class="w-1/2 flex justify-end">
-						selected: {{ selected }}
-					</div>
-				</div>`
-		})}
-	</Story>
-</Canvas>
-
-<Source
-	language="jsx"
-	code={`<vv-accordion-group v-model:modelValue="accordion" :items="items" icon-right bordered />`}
-/>

package/src/stories/AccordionGroup/accordionGroupTest.js

@@ -1,51 +0,0 @@
-import { expect } from '@storybook/jest'
-import { within } from '@storybook/testing-library'
-import { toHaveNoViolations, axe } from 'jest-axe'
-
-async function accordionGroupTest({ canvasElement }) {
-	const accordionGroup = await within(canvasElement).findByTestId(
-		'accordion-group'
-	)
-	const accordion1 = await within(canvasElement).findByTestId('accordion-1')
-	await accordion1.firstChild.click()
-	const accordions = accordionGroup.children
-	Array.from(accordions).forEach((accordion, index) => {
-		const title = accordion.firstChild
-		const content = accordion.lastChild
-		if (index == 0) {
-			expect(title.ariaExpanded).toBe('true')
-			expect(content.ariaHidden).toBe('false')
-		} else {
-			expect(title.ariaExpanded).toBe('false')
-			expect(content.ariaHidden).toBe('true')
-		}
-	})
-	accessibilityTest(accordionGroup)
-}
-
-async function itemsTest({ canvasElement }) {
-	const accordionGroup = await within(canvasElement).findByTestId(
-		'accordion-group'
-	)
-	accordionGroup.children[0].click()
-	const selected = await within(canvasElement).findByTestId('selected')
-	expect(selected.innerText).toBe('selected: [ "a-1" ]')
-	await accordionGroup.children[1].click()
-	expect(selected.innerText).toBe('selected: [ "a-1", "a-2" ]')
-	accessibilityTest(accordionGroup)
-}
-
-async function accordionTest({ canvasElement }) {
-	const accordion1 = await within(canvasElement).findByTestId('accordion-1')
-	accordion1.firstChild.click()
-	const selected = await within(canvasElement).findByTestId('selected')
-	expect(selected.innerText).toBe('selected: accordion 1')
-	accessibilityTest(accordion1)
-}
-
-async function accessibilityTest(element) {
-	expect.extend(toHaveNoViolations)
-	expect(await axe(element)).toHaveNoViolations()
-}
-
-export { accordionGroupTest, itemsTest, accordionTest }

package/src/stories/Badge/BadgeColor.stories.mdx

@@ -1,54 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvBadge from '../../components/VvBadge/VvBadge.vue'
-import testBadgeVariant from './BadgeTest.js'
-import testDangerBadge from './BadgeTest.js'
-
-<Meta title="Components/Badge/Props/color" />
-
-# VvBadge color
-
-By default color is `primary` and default options are: `black`, `danger`, `success`, `warning`
-
-<Canvas>
-	<Story name="black" play={testBadgeVariant}>
-		{() => {
-			return {
-				components: { VvBadge },
-				template: `<vv-badge color="black" role="status" value="12" />`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story name="danger" play={testBadgeVariant}>
-		{() => {
-			return {
-				components: { VvBadge },
-				template: `<vv-badge color="danger" role="status" value="16" />`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story name="success" play={testBadgeVariant}>
-		{() => {
-			return {
-				components: { VvBadge },
-				template: `<vv-badge color="success" role="status" value="10" />`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story name="warning" play={testBadgeVariant}>
-		{() => {
-			return {
-				components: { VvBadge },
-				template: `<vv-badge color="warning" role="status" value="8" />`
-			}
-		}}
-	</Story>
-</Canvas>

package/src/stories/Badge/BadgeDot.stories.mdx

@@ -1,20 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvBadge from '../../components/VvBadge/VvBadge.vue'
-import VvButton from '../../components/VvButton/VvButton.vue'
-
-<Meta title="Components/Badge/dot" />
-
-# VvBadge dot
-
-Without a value, the badge is a dot
-
-<Canvas>
-	<Story name="dot">
-		{() => {
-			return {
-				components: { VvBadge, VvButton },
-				template: `<vv-badge />`
-			}
-		}}
-	</Story>
-</Canvas>

package/src/stories/Badge/BadgeTest.js

@@ -1,21 +0,0 @@
-import { axe, toHaveNoViolations } from 'jest-axe'
-import { within } from '@storybook/testing-library'
-import { expect } from '@storybook/jest'
-
-export const variantTest = async ({ badge, color }) => {
-	expect(badge).toHaveClass(`vv-badge--${color}`)
-}
-
-export const accessibilityTest = async (badge) => {
-	expect.extend(toHaveNoViolations)
-	expect(await axe(badge)).toHaveNoViolations()
-}
-
-// Test Variants function
-export const testBadgeVariant = async ({ canvasElement, name }) => {
-	const badge = await within(canvasElement).findByRole('status')
-	await accessibilityTest(badge)
-	await variantTest({ badge, color: name })
-}
-
-export default testBadgeVariant

package/src/stories/Breadcrumb/BreadcrumbMultiline.stories.mdx

@@ -1,41 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import ObjectUtilities from '../../utils/ObjectUtilities'
-import VvBreadcrumb from '../../components/VvBreadcrumb/VvBreadcrumb.vue'
-import { VvBreadcrumbProps } from '../../components/VvBreadcrumb/VvBreadcrumb'
-import { Template } from './Breadcrumb.stories.mdx'
-
-<Meta
-	title="Components/Breadcrumb/Props/multiline"
-	component={VvBreadcrumb}
-	args={{
-		...ObjectUtilities.propsToObject(VvBreadcrumbProps),
-		multiline: true,
-		routes: [
-			{
-				label: 'Home',
-				title: 'Home',
-				to: '/'
-			},
-			{
-				label: 'Library',
-				title: 'Library',
-				to: '/library'
-			},
-			{
-				label: 'Book 1',
-				title: 'Book 1'
-			}
-		]
-	}}
-/>
-
-# VvBreadcrumb
-
-Stories of `VvBreadcrumb`.
-Let's define a story for our `multiline` `breadcrumb`:
-
-<Canvas>
-	<Story name="multiline" args={{}}>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/Button/ButtonBadge.stories.mdx

@@ -1,34 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvButton from '../../components/VvButton/VvButton.vue'
-import VvBadge from '../../components/VvBadge/VvBadge.vue'
-import { testButtonWithBadge } from './Button.test'
-
-<Meta title="Components/Button/badge" />
-
-# VvButton badge
-
-Stories of `VvButton` with `badge`.
-
-<Canvas>
-	<Story name="badge" play={testButtonWithBadge}>
-		{() => {
-			return {
-				components: { VvButton, VvBadge },
-				template: `<vv-button label="Badge">
-						<template #after>
-							<vv-badge value="12" color="danger" />
-						</template>
-					</vv-button>`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Source
-	language="jsx"
-	code={`<vv-button label="Badge">
-	<template #after>
-		<vv-badge value="12" color="danger" />
-	</template>
-</vv-button>`}
-/>

package/src/stories/Button/ButtonIconPosition.stories.mdx

@@ -1,106 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvButton from '../../components/VvButton/VvButton.vue'
-import { within, userEvent } from '@storybook/testing-library'
-import { buttonTest, classTest } from './test.js'
-import { testButton } from './Button.test'
-
-<Meta title="Components/Button/Props/icon-position" />
-
-# VvButton icon-position
-
-Stories of `VvButton` with `icon`.
-
-## Icon left (default)
-
-Let's define a story for our text `icon` button.
-
-<Canvas>
-	<Story name="icon-left" play={testButton}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Like" icon="heart" />`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Source language="jsx" code={'<vv-button label="Icon left" icon="heart" />'} />
-
-## Icon right
-
-Let's define a story for our right `icon` button.
-
-<Canvas>
-	<Story
-		name="icon-right"
-		play={async (ctx) => {
-			testButton(ctx, {
-				className: 'vv-button--reverse'
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Icon right" icon="heart" icon-position="right" />`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Source
-	language="jsx"
-	code={'<vv-button label="Icon right" icon="heart" icon-position="right" />'}
-/>
-
-## Icon top
-
-Let's define a story for our top `icon` button.
-
-<Canvas>
-	<Story
-		name="icon-top"
-		play={async (ctx) => {
-			testButton(ctx, {
-				className: 'vv-button--column'
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Icon top" icon="heart" icon-position="top" />`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Source
-	language="jsx"
-	code={'<vv-button label="Icon top" icon="heart" icon-position="top" />'}
-/>
-
-## Icon bottom
-
-Let's define a story for our bottom `icon` button.
-
-<Canvas>
-	<Story
-		name="icon-bottom"
-		play={async (ctx) => {
-			testButton(ctx, {
-				className: ['vv-button--column', 'vv-button--reverse']
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Icon bottom" icon="heart" icon-position="bottom" />`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Source
-	language="jsx"
-	code={'<vv-button label="Icon top" icon="heart" icon-position="bottom" />'}
-/>