@volverjs/ui-vue 0.0.1-beta.11 → 0.0.1-beta.16

package/src/constants.ts

@@ -1,7 +1,5 @@
-export const VV_BUTTON_GROUP = Symbol('VV_BUTTON_GROUP')
-
-export const VV_RADIO_GROUP = Symbol('VV_RADIO_GROUP')
-
-export const VV_CHECK_GROUP = Symbol('VV_CHECK_GROUP')
-
-export const VV_ACCORDION_GROUP = Symbol('VV_ACCORDION_GROUP')
+// Symbol not working after transpiling
+export const VV_BUTTON_GROUP = 'VV_BUTTON_GROUP'
+export const VV_RADIO_GROUP = 'VV_RADIO_GROUP'
+export const VV_CHECK_GROUP = 'VV_CHECK_GROUP'
+export const VV_ACCORDION_GROUP = 'VV_ACCORDION_GROUP'

package/src/icons.ts

@@ -0,0 +1,7 @@
+import normal from './assets/icons/normal.json'
+import detailed from './assets/icons/detailed.json'
+import simple from './assets/icons/simple.json'
+
+export default [normal, detailed, simple]
+
+export { normal }

package/src/index.ts

@@ -3,7 +3,6 @@ import type { Volver } from './Volver'
 
 // export all components as vue plugin
 export * from './components/index'
-
 export { VolverPlugin }
 
 // https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties

package/src/props/index.ts

@@ -1,3 +1,5 @@
+import type { PropType } from 'vue'
+
 export const ValidProps = {
 	valid: Boolean,
 	validLabel: [String, Array]
@@ -22,7 +24,7 @@ export const ReadonlyProps = {
 }
 
 export const ModifiersProps = {
-	modifiers: [String, Array]
+	modifiers: [String, Array] as PropType<string | Array<string>>
 }
 
 export const HintProps = {
@@ -61,7 +63,13 @@ export const LimitProps = {
 }
 
 export const InputProps = {
-	id: String,
+	/**
+	 * Input id
+	 */
+	id: [String, Number],
+	/**
+	 * Input name
+	 */
 	name: { type: String, required: true },
 	autocomplete: { type: String, default: 'off' },
 	autofocus: Boolean,

package/src/resolvers/unplugin.ts

@@ -0,0 +1,103 @@
+import type {
+	ComponentResolver,
+	SideEffectsInfo
+} from 'unplugin-vue-components/types'
+
+function kebabCase(str: string, options?: { condense: boolean }) {
+	if (typeof str !== 'string') throw new TypeError('expected a string')
+	return str
+		.trim()
+		.replace(/([a-z])([A-Z])/g, '$1-$2')
+		.replace(/\W/g, (m) => (/[À-ž]/.test(m) ? m : '-'))
+		.replace(/^-+|-+$/g, '')
+		.replace(/-{2,}/g, (m) => (options?.condense ? '-' : m))
+		.toLowerCase()
+}
+
+export interface VolverResolverOptions {
+	/**
+	 * import style along with components
+	 *
+	 * @default 'css'
+	 */
+	importStyle?: boolean | 'css' | 'scss'
+	/**
+	 * import custom style path
+	 *
+	 * @default ''
+	 */
+	customStylePath?: string
+	/**
+	 * prefix for components (e.g. 'vv' to resolve Button from VvButton)
+	 *
+	 * @default 'vv'
+	 */
+	prefix?: string
+}
+
+const STYLE_EXCLUDE = ['vv-icon']
+const VOLVER_PREFIX = 'vv'
+
+const getStyleName = function (kebabName: string) {
+	if (STYLE_EXCLUDE.includes(kebabName)) {
+		return undefined
+	}
+	if (kebabName === 'vv-native-select') {
+		return 'vv-select'
+	}
+	if (kebabName === 'vv-accordion-group') {
+		return 'vv-accordion'
+	}
+	return kebabName
+}
+
+/**
+ * Resolver for @volverjs/ui-vue
+ *
+ * @link https://github.com/volverjs/ui-vue
+ */
+export function VolverResolver({
+	prefix = VOLVER_PREFIX,
+	importStyle,
+	customStylePath
+}: VolverResolverOptions = {}): ComponentResolver {
+	return {
+		type: 'component',
+		resolve: (name: string) => {
+			if (
+				!prefix ||
+				!name.toLowerCase().startsWith(prefix.toLowerCase())
+			) {
+				return
+			}
+
+			const sideEffects: SideEffectsInfo = []
+			const kebabName = kebabCase(name).replace(
+				`${prefix}-`,
+				`${VOLVER_PREFIX}-`
+			)
+
+			if (importStyle) {
+				// import custom style
+				if (customStylePath) {
+					sideEffects.push(customStylePath)
+				}
+
+				const styleName = getStyleName(kebabName)
+				if (styleName) {
+					// import component
+					sideEffects.push(
+						`@volverjs/style/${
+							importStyle === 'scss' ? 'scss/' : ''
+						}components/${styleName}`
+					)
+				}
+			}
+
+			return {
+				from: `@volverjs/ui-vue/${kebabName}`,
+				sideEffects
+			}
+		}
+	}
+}

package/src/shims.d.ts

@@ -0,0 +1,11 @@
+// eslint-disable-next-line
+declare interface Window {
+	// extend the window
+}
+
+declare module '*.vue' {
+	import { type DefineComponent } from 'vue'
+	// eslint-disable-next-line
+	const component: DefineComponent<{}, {}, any>
+	export default component
+}

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

@@ -1,28 +1,29 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvAccordion from '../../components/VvAccordion/VvAccordion.vue'
-
-import { accordionTest } from './accordionTest.js'
+import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
+import { accordionTest } from './Accordion.test'
 
 <Meta
 	title="Components/Accordion"
 	component={VvAccordion}
 	args={{
-		open: false,
 		title: 'Lorem Ipsum',
 		content:
 			'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
 	}}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvAccordion },
 	setup() {
 		return { args }
 	},
-	template: `<div class="w-1/2">
-            <vv-accordion data-testId="accordion" v-bind="args" v-model:open="args.open" />
-        </div>
-        `
+	data() {
+		return {
+			open: false
+		}
+	},
+	template: `<vv-accordion data-testId="accordion" v-bind="args" v-model="open" />`
 })
 
 # VvAccordion

package/src/stories/Accordion/Accordion.test.ts

@@ -0,0 +1,37 @@
+import type { PlayAttributes, ComponentConfig } from '@/test/types'
+import { expect } from '@/test/expect'
+import { sleep } from '@/test/sleep'
+import { within } from '@storybook/testing-library'
+
+async function accordionTest(
+	{ canvasElement, ...data }: PlayAttributes,
+	{ className = null }: ComponentConfig = {}
+) {
+	const accordion = (await within(canvasElement).findByTestId(
+		'accordion'
+	)) as HTMLDetailsElement
+	expect(accordion).toHaveClass('vv-accordion')
+	className && expect(accordion).toHaveClass(className)
+	const title = accordion.firstChild as HTMLElement
+	expect(title.innerText).toEqual(data.args.title)
+	expect(title).toHaveClass('vv-collapse__summary')
+	expect(accordion.open).toBe(false)
+	expect(title).toBeClicked()
+	await sleep()
+	expect(accordion.open).toBeTruthy()
+	const content = accordion.lastChild as HTMLElement
+	expect(content).toHaveClass('vv-collapse__content')
+	expect(content.innerText).toEqual(data.args.content)
+	expect(accordion).toHaveNoViolations()
+}
+
+async function slotsTest({ canvasElement, ...data }: PlayAttributes) {
+	const accordion = await within(canvasElement).findByTestId('slot')
+	data.args.slotName == 'details' &&
+		expect(accordion.innerHTML).toEqual(data.args.details)
+
+	data.args.slotName == 'header' &&
+		expect(accordion.innerHTML).toEqual(data.args.title)
+}
+
+export { accordionTest, slotsTest }

package/src/stories/Accordion/AccordionSlots.stories.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvAccordion from '../../components/VvAccordion/VvAccordion.vue'
-import { slotsTest } from './accordionTest.js'
+import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
+import { slotsTest } from './Accordion.test'
 
 <Meta title="Components/Accordion/Slots" />
 
@@ -13,7 +13,15 @@ Stories of `VvAccordion` with `slot`.
 Let's define a story for our accordion with `header` slot.
 
 <Canvas>
-	<Story name="slot-header" play={slotsTest}>
+	<Story
+		name="slot-header"
+		play={slotsTest}
+		args={{
+			slotName: 'header',
+			title: 'Slot title',
+			details:
+				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
+		}}>
 		{() => {
 			return {
 				components: { VvAccordion },
@@ -24,13 +32,11 @@ Let's define a story for our accordion with `header` slot.
 							'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 :content="content"  bordered icon-right>
-							<template #header>
-								<p data-testId="slot" class="text-word-3">{{ title }}</p>
-							</template>
-						</vv-accordion>
-					</div>`
+				template: `<vv-accordion :content="content">
+								<template #header>
+									<strong data-testId="slot" class="font-bold text-brand">{{ title }}</strong>
+								</template>
+							</vv-accordion>`
 			}
 		}}
 	</Story>
@@ -38,10 +44,11 @@ Let's define a story for our accordion with `header` slot.
 
 <Source
 	language="jsx"
-	code={`<vv-accordion :content="content" bordered icon-right>
-	<template #header>
-		<p class="text-word-3">Slot title</p>
-	</template>
+	code={`
+<vv-accordion :content="content">
+  <template #header>
+    <strong class="font-bold text-brand">Slot title</strong>
+  </template>
 </vv-accordion>`}
 />
 
@@ -50,7 +57,14 @@ Let's define a story for our accordion with `header` slot.
 Let's define a story for our accordion with `details` slot.
 
 <Canvas>
-	<Story name="slot-details" play={slotsTest}>
+	<Story
+		name="slot-details"
+		play={slotsTest}
+		args={{
+			slotName: 'details',
+			details:
+				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
+		}}>
 		{() => {
 			return {
 				components: { VvAccordion },
@@ -61,12 +75,12 @@ Let's define a story for our accordion with `details` slot.
 					}
 				},
 				template: `<div class="w-1/2">
-						<vv-accordion title="Slot details" bordered icon-right>
-							<template #details>
-								<p data-testId="slot" class='font-light text-word-3'>{{ details }}</p>
-							</template>
-						</vv-accordion>
-					</div>`
+								<vv-accordion title="Slot details" model-value>
+									<template #details>
+										<strong data-testId="slot" class='font-bold text-brand'>{{ details }}</strong>
+									</template>
+								</vv-accordion>
+							</div>`
 			}
 		}}
 	</Story>
@@ -74,9 +88,10 @@ Let's define a story for our accordion with `details` slot.
 
 <Source
 	language="jsx"
-	code={`<vv-accordion title="Slot details" bordered icon-right>
-	<template #details>
-		<p class='font-light text-word-3'>{{ details }}</p>
-	</template>
+	code={`
+<vv-accordion title="Slot details" model-value>
+  <template #details>
+    <strong class='font-bold text-brand'>{{ details }}</strong>
+  </template>
 </vv-accordion>`}
 />

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

@@ -1,20 +1,16 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvAccordionGroup from '../../components/VvAccordionGroup/VvAccordionGroup.vue'
-import VvAccordion from '../../components/VvAccordion/VvAccordion.vue'
-import { accordionGroupTest } from './accordionGroupTest.js'
+import VvAccordionGroup from '@/components/VvAccordionGroup/VvAccordionGroup.vue'
+import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
+import { accordionGroupTest } from './AccordionGroup.test'
 
-<Meta
-	title="Components/AccordionGroup"
-	component={VvAccordionGroup}
-	args={{}}
-/>
+<Meta title="Components/AccordionGroup" component={VvAccordionGroup} />
 
 export const Template = (args) => ({
 	components: { VvAccordionGroup, VvAccordion },
 	data() {
 		return {
 			disabled: false,
-			accordion: '',
+			openedId: '',
 			content:
 				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
 		}
@@ -22,13 +18,11 @@ export const Template = (args) => ({
 	setup() {
 		return { args }
 	},
-	template: `<div class="w-1/2">
-			<vv-accordion-group data-testId="accordion-group" v-bind="args" :disabled="disabled" v-model:modelValue="accordion">
-				<vv-accordion data-testId="accordion-1" title="Details 1" :content="content" />
-				<vv-accordion title="Details 2" :content="content" />
-				<vv-accordion title="Details 3" :content="content" />
-			</vv-accordion-group>
-        </div>`
+	template: `<vv-accordion-group data-testId="accordion-group" v-bind="args" :disabled="disabled" v-model="openedId">
+					<vv-accordion data-testId="accordion-1" title="Details 1" :content="content" />
+					<vv-accordion title="Details 2" :content="content" />
+					<vv-accordion title="Details 3" :content="content" />
+				</vv-accordion-group>`
 })
 
 # VvAccordionGroup

package/src/stories/AccordionGroup/{accordionGroupTest.js → AccordionGroup.test.js}

@@ -1,6 +1,5 @@
-import { expect } from '@storybook/jest'
+import { expect } from '@/test/expect'
 import { within } from '@storybook/testing-library'
-import { toHaveNoViolations, axe } from 'jest-axe'
 
 async function accordionGroupTest({ canvasElement }) {
 	const accordionGroup = await within(canvasElement).findByTestId(
@@ -20,7 +19,7 @@ async function accordionGroupTest({ canvasElement }) {
 			expect(content.ariaHidden).toBe('true')
 		}
 	})
-	accessibilityTest(accordionGroup)
+	await expect(accordionGroup).toHaveNoViolations()
 }
 
 async function itemsTest({ canvasElement }) {
@@ -29,23 +28,22 @@ async function itemsTest({ canvasElement }) {
 	)
 	accordionGroup.children[0].click()
 	const selected = await within(canvasElement).findByTestId('selected')
-	expect(selected.innerText).toBe('selected: [ "a-1" ]')
+	expect(selected.innerText).toBe('selected: a-1')
 	await accordionGroup.children[1].click()
-	expect(selected.innerText).toBe('selected: [ "a-1", "a-2" ]')
-	accessibilityTest(accordionGroup)
+	expect(selected.innerText).toBe('selected: a-2')
+	await expect(accordionGroup).toHaveNoViolations()
 }
 
-async function accordionTest({ canvasElement }) {
-	const accordion1 = await within(canvasElement).findByTestId('accordion-1')
-	accordion1.firstChild.click()
+async function collapseTest({ 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: accordion 1')
-	accessibilityTest(accordion1)
-}
-
-async function accessibilityTest(element) {
-	expect.extend(toHaveNoViolations)
-	expect(await axe(element)).toHaveNoViolations()
+	expect(selected.innerText).toBe('selected: [ "a-1" ]')
+	await accordionGroup.children[1].click()
+	expect(selected.innerText).toBe('selected: [ "a-1", "a-2" ]')
+	await expect(accordionGroup).toHaveNoViolations()
 }
 
-export { accordionGroupTest, itemsTest, accordionTest }
+export { accordionGroupTest, itemsTest, collapseTest }

package/src/stories/AccordionGroup/AccordionGroupCollapse.stories.mdx

@@ -0,0 +1,38 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvAccordionGroup from '@/components/VvAccordionGroup/VvAccordionGroup.vue'
+import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
+import { collapseTest } from './AccordionGroup.test'
+
+<Meta title="Components/AccordionGroup/Props/collapse" />
+
+# VvAccordionGroup accordion
+
+Stories of `VvAccordionGroup` with `collapse`.
+
+<Canvas>
+	<Story name="collapse" play={collapseTest}>
+		{(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: `<vv-accordion-group data-testId="accordion-group"  v-model="selected" collapse>
+							<vv-accordion name="a-1" title="Details 1" :content="content" />
+							<vv-accordion name="a-2" title="Details 2" :content="content" />
+							<vv-accordion name="a-3" title="Details 3" :content="content" />
+						</vv-accordion-group>
+						<div v-if="selected" class="mt-24" data-testId="selected" >
+							selected: {{ selected }}
+						</div>`
+		})}
+	</Story>
+</Canvas>
+
+<Source
+	language="jsx"
+	code={`<vv-accordion-group v-model="accordion" :items="items" collapse />`}
+/>

package/src/stories/AccordionGroup/{AccordionItems.stories.mdx → AccordionGroupItems.stories.mdx}

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvAccordionGroup from '../../components/VvAccordionGroup/VvAccordionGroup.vue'
-import { itemsTest } from './accordionGroupTest.js'
+import VvAccordionGroup from '@/components/VvAccordionGroup/VvAccordionGroup.vue'
+import { itemsTest } from './AccordionGroup.test'
 
 <Meta title="Components/AccordionGroup/Props/items" />
 
@@ -15,8 +15,6 @@ Stories of `VvAccordionGroup` with `items`.
 			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',
@@ -33,19 +31,15 @@ Stories of `VvAccordionGroup` with `items`.
 					]
 				}
 			},
-			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>`
+			template: `<vv-accordion-group data-testId="accordion-group" v-model="selected" :items="items" />
+					   <div data-testId="selected" v-if="selected" class="mt-24">
+					   		selected: {{ selected }}
+					   </div>`
 		})}
 	</Story>
 </Canvas>
 
 <Source
 	language="jsx"
-	code={`<vv-accordion-group v-model:modelValue="accordion" :items="items" icon-right bordered />`}
+	code={`<vv-accordion-group v-model="accordion" :items="items" />`}
 />

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

@@ -1,7 +1,6 @@
 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'
+import VvBadge from '@/components/VvBadge/VvBadge.vue'
+import { badgeTest } from './Badge.test'
 
 <Meta
 	title="Components/Badge"
@@ -11,16 +10,17 @@ import testDangerBadge from './BadgeTest.js'
 			defaultValue: '14',
 			control: { type: 'text' }
 		},
-		color: {
+		modifiers: {
+			options: ['black', 'danger', 'success', 'warning'],
 			control: {
-				type: 'select',
-				options: ['', 'black', 'danger', 'success', 'warning']
+				type: 'select'
 			}
 		}
 	}}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvBadge },
 	setup() {
 		return { args }
@@ -33,6 +33,6 @@ export const Template = (args) => ({
 Stories of `VvBadge`.
 Let's define a story for our playground `badge`:
 
-<Story name="vv-badge" args={{}}>
+<Story name="vv-badge" args={{}} play={badgeTest}>
 	{Template.bind({})}
 </Story>

package/src/stories/Badge/Badge.test.ts

@@ -0,0 +1,16 @@
+import type { PlayAttributes } from '@/test/types'
+import { within } from '@storybook/testing-library'
+import { expect } from '@/test/expect'
+
+export const badgeTest = async ({
+	canvasElement,
+	name,
+	args
+}: PlayAttributes) => {
+	const badge = await within(canvasElement).findByRole('status')
+	expect(badge).toHaveClass('vv-badge')
+	name != 'dot' &&
+		args.modifiers &&
+		expect(badge).toHaveClass(`vv-badge--${args.modifiers}`)
+	await expect(badge).toHaveNoViolations()
+}

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

@@ -1,7 +1,6 @@
 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'
+import VvBadge from '@/components/VvBadge/VvBadge.vue'
+import { badgeTest } from './Badge.test'
 
 <Meta title="Components/Badge/Props/color" />
 
@@ -10,44 +9,44 @@ import testDangerBadge from './BadgeTest.js'
 By default color is `primary` and default options are: `black`, `danger`, `success`, `warning`
 
 <Canvas>
-	<Story name="black" play={testBadgeVariant}>
+	<Story name="black" play={badgeTest}>
 		{() => {
 			return {
 				components: { VvBadge },
-				template: `<vv-badge color="black" role="status" value="12" />`
+				template: `<vv-badge modifiers="black" role="status" value="12" />`
 			}
 		}}
 	</Story>
 </Canvas>
 
 <Canvas>
-	<Story name="danger" play={testBadgeVariant}>
+	<Story name="danger" play={badgeTest}>
 		{() => {
 			return {
 				components: { VvBadge },
-				template: `<vv-badge color="danger" role="status" value="16" />`
+				template: `<vv-badge modifiers="danger" role="status" value="16" />`
 			}
 		}}
 	</Story>
 </Canvas>
 
 <Canvas>
-	<Story name="success" play={testBadgeVariant}>
+	<Story name="success" play={badgeTest}>
 		{() => {
 			return {
 				components: { VvBadge },
-				template: `<vv-badge color="success" role="status" value="10" />`
+				template: `<vv-badge modifiers="success" role="status" value="10" />`
 			}
 		}}
 	</Story>
 </Canvas>
 
 <Canvas>
-	<Story name="warning" play={testBadgeVariant}>
+	<Story name="warning" play={badgeTest}>
 		{() => {
 			return {
 				components: { VvBadge },
-				template: `<vv-badge color="warning" role="status" value="8" />`
+				template: `<vv-badge modifiers="warning" role="status" value="8" />`
 			}
 		}}
 	</Story>