@volverjs/ui-vue 0.0.10-beta.2 → 0.0.10-beta.21

package/src/stories/InputFile/InputFile.stories.ts

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvInputFile from '@/components/VvInputFile/VvInputFile.vue'
+import { defaultArgs, argTypes } from './InputFile.settings'
+
+const meta: Meta = {
+	title: 'Components/InputFile',
+	component: VvInputFile,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputFile>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvInputFile },
+		setup() {
+			const files = ref([])
+			return {
+				args,
+				files,
+			}
+		},
+		template: /* html */ `
+			<vv-input-file v-bind="args" v-model="files">
+				<template #drop-area v-if="args['drop-area']"><div v-html="args['drop-area']"></div></template>
+				<template #hint v-if="args['hint']"><div v-html="args['hint']"></div></template>
+			</vv-input-file>
+		`,
+	}),
+}
+
+export const Readonly: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		readonly: true,
+	},
+}
+
+export const Valid: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		valid: true,
+		validLabel: 'The field is valid.',
+	},
+}
+
+export const Invalid: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		invalid: true,
+		invalidLabel: 'The field is required.',
+	},
+}
+
+export const Hint: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		hintLabel: 'Please upload a file.',
+	},
+}
+
+export const Loading: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		loading: true,
+		loadingLabel: 'Loading...',
+	},
+}
+
+export const Progress: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		progress: 30,
+		hintLabel: '30%',
+	},
+}

package/src/stories/InputFile/InputFileDropArea.stories.ts

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvInputFile from '@/components/VvInputFile/VvInputFile.vue'
+import { Default as DefaultStory } from './InputFile.stories'
+import { argTypes, defaultArgs } from './InputFile.settings'
+
+const meta: Meta<typeof VvInputFile> = {
+	title: 'Components/InputFile/DropArea',
+	component: VvInputFile,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputFile>
+
+export const Default: Story = {
+	...DefaultStory,
+	args: {
+		...DefaultStory.args,
+		label: 'Drop area',
+		dropArea: true,
+	},
+}
+
+export const InputHidden: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Drop area hidden input',
+		dropArea: true,
+		modifiers: 'hidden',
+	},
+}
+
+export const Square: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		class: 'max-w-192',
+		label: 'Drop area square',
+		dropArea: true,
+		modifiers: 'square hidden',
+	},
+}
+
+export const Circle: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		class: 'max-w-192',
+		label: 'Drop area circle',
+		dropArea: true,
+		modifiers: 'circle hidden',
+	},
+}

package/src/stories/InputFile/InputFileIconPosition.stories.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvInputFile from '@/components/VvInputFile/VvInputFile.vue'
+import { Default } from './InputFile.stories'
+import { defaultArgs, argTypes } from './InputFile.settings'
+
+const meta: Meta<typeof VvInputFile> = {
+	title: 'Components/InputFile/Icon',
+	component: VvInputFile,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputFile>
+
+export const DefaultPosition: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		icon: 'heart',
+	},
+}
+
+export const After: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		icon: 'heart',
+		iconPosition: 'after',
+	},
+}
+
+export const Src: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		icon: {
+			name: 'engineering',
+			src: 'https://raw.githubusercontent.com/google/material-design-icons/master/src/social/engineering/materialicons/24px.svg',
+		},
+	},
+}

package/src/stories/InputFile/InputFileSlots.stories.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvInputFile from '@/components/VvInputFile/VvInputFile.vue'
+import { Default as DefaultStory } from './InputFile.stories'
+import { argTypes, defaultArgs } from './InputFile.settings'
+
+const meta: Meta<typeof VvInputFile> = {
+	title: 'Components/InputFile/Slots',
+	component: VvInputFile,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputFile>
+
+export const DropArea: Story = {
+	...DefaultStory,
+	args: {
+		...DefaultStory.args,
+		class: 'max-w-320',
+		'drop-area': 'Drag one or more files to this drop zone.',
+		dropArea: true,
+	},
+}
+
+export const Hint: Story = {
+	...DefaultStory,
+	args: {
+		...DefaultStory.args,
+		hint: 'Hint <em class="italic">slot!</em>',
+	},
+}

package/src/stories/Nav/Nav.settings.ts

@@ -7,16 +7,15 @@ export const defaultArgs: Meta<typeof VvNav>['args'] = {
 	...propsToObject(VvNavProps),
 	items: [
 		{
-			title: 'Item 1',
+			label: 'Item 1',
 			href: 'javascript:void(0)',
 		},
 		{
-			title: 'Item 2',
+			label: 'Item 2',
 			to: 'about',
 		},
 		{
-			title: 'Item 3',
-			to: 'contacts',
+			label: 'Item 3',
 			on: {
 				click: () => {
 					// eslint-disable-next-line no-console

package/src/stories/Nav/Nav.test.ts

@@ -1,31 +1,20 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within, userEvent } from '@storybook/testing-library'
+import { within } from '@storybook/testing-library'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(
 		'element',
 	)) as HTMLElement
 
+	const menuEl = element.getElementsByClassName('vv-nav__menu')[0]
+
 	if (!args.items || !args.items?.length) {
 		throw new Error('No items passed')
 	}
 
 	// check children number the same of items prop
-	expect(element.children?.[0].children.length).toEqual(args.items?.length)
-
-	// take firse and second elements
-	const firstEl = await element.getElementsByTagName('a')?.[0]
-	const secondEl = await element.getElementsByTagName('router-link')?.[1]
-	// check they have not current class
-	const secondElHasCurrentClass = secondEl.classList.contains('current')
-	const firstElHasCurrentClass = firstEl.classList.contains('current')
-
-	await expect(firstElHasCurrentClass).toBe(false)
-	await expect(secondElHasCurrentClass).toBe(false)
-	// click first item and check "current" css class
-	await userEvent.click(firstEl)
-	await expect(firstEl).toHaveClass('current')
+	expect(menuEl.children.length).toEqual(args.items?.length)
 
 	// check accessibility
 	await expect(element).toHaveNoViolations()

package/src/stories/Tab/Tab.settings.ts

@@ -1,20 +1,20 @@
+import type { ArgTypes, Meta } from '@storybook/vue3'
+import type { VvTab } from '@/components'
 import { VvTabProps } from '@/components/VvTab'
 
-export const defaultArgs = {
+export const defaultArgs: Meta<typeof VvTab>['args'] = {
 	...propsToObject(VvTabProps),
 	items: [
 		{
-			title: 'Item 1',
-			href: 'javascript:void(0)',
+			tab: 'tab-1',
+			label: 'Item 1',
 		},
 		{
-			title: 'Item 2',
-			to: 'about',
+			tab: 'tab-2',
+			label: 'Item 2',
 		},
 		{
-			id: 'tab-3',
-			title: 'Item 3',
-			to: 'contacts',
+			label: 'Item 3',
 			on: {
 				click: () => {
 					// eslint-disable-next-line no-console
@@ -25,7 +25,7 @@ export const defaultArgs = {
 	],
 }
 
-export const defaultArgTypes = {
+export const defaultArgTypes: ArgTypes = {
 	tabId: {
 		description: 'Slot by tab-id',
 		control: {

package/src/stories/Tab/Tab.stories.ts

@@ -27,7 +27,7 @@ export const Default: Story = {
 		template: /* html */ `
 			<div class="m-md w-1/2">
 				<vv-tab v-bind="args" data-testId="element">
-					<template #tab-item_0>
+					<template #panel::tab-1>
 						<span class="text-20 font-semibold">Tab 1</span>
 						<p>
 							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
@@ -39,7 +39,7 @@ export const Default: Story = {
 							elit libero, a pharetra augue.
 						</p>
 					</template>
-					<template #tab-item_1>
+					<template #panel::tab-2>
 						<span class="text-20 font-semibold">Tab 2</span>
 						<p>
 							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla

package/src/stories/Tab/Tab.test.ts

@@ -1,6 +1,6 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within, userEvent } from '@storybook/testing-library'
+import { within } from '@storybook/testing-library'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(
@@ -16,21 +16,13 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	expect(childrenEls?.children[0].children.length).toEqual(args.items?.length)
 
 	// take firse and second elements
-	const firstEl = await element.getElementsByTagName('a')?.[0]
-	const secondEl = await element.getElementsByTagName('router-link')?.[1]
-	// check they have not current class
-	const secondElHasCurrentClass = secondEl.classList.contains('current')
-	const firstElHasCurrentClass = firstEl.classList.contains('current')
-
-	await expect(firstElHasCurrentClass).toBe(false)
-	await expect(secondElHasCurrentClass).toBe(false)
-	// click first item and check "current" css class
-	await userEvent.click(firstEl)
-	await expect(firstEl).toHaveClass('current')
+	const firstNavItemLabelEl =
+		await element.getElementsByClassName('vv-nav__item-label')?.[0]
+	await expect(firstNavItemLabelEl.classList.contains('current')).toBe(true)
 
 	// check tab content to include "Tab 1"
-	const tabPanelEl = element.getElementsByClassName('vv-tab__panel')?.[0]
-	await expect(tabPanelEl.innerHTML.includes('Tab 1')).toBe(true)
+	const firstTabPanelEl = element.getElementsByClassName('vv-tab__panel')?.[0]
+	await expect(firstTabPanelEl.classList.contains('target')).toBe(true)
 
 	// check accessibility
 	await expect(element).toHaveNoViolations()

package/src/stories/argTypes.ts

@@ -238,7 +238,7 @@ export const IdNameArgTypes = {
 		},
 		table: {
 			defaultValue: {
-				summary: 'nanoid',
+				summary: 'uid',
 			},
 		},
 	},

package/src/types/blurhash.ts

@@ -0,0 +1,21 @@
+class ValidationError extends Error {}
+export type BlurhashWorkerType = {
+	encode: (
+		pixels: Uint8ClampedArray,
+		width: number,
+		height: number,
+		componentX: number,
+		componentY: number,
+	) => string
+	decode: (
+		blurhash: string,
+		width: number,
+		height: number,
+		punch?: number,
+	) => Uint8ClampedArray
+	isBlurhashValid: (blurhash: string) => {
+		result: boolean
+		errorReason?: string
+	}
+	ValidationError: ValidationError
+}

package/src/types/generic.ts

@@ -0,0 +1,6 @@
+export type Nullable<T> = T | null | undefined
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type Option = Record<string | number | symbol, any> & {
+	options?: Option[]
+}

package/src/types/index.ts

@@ -0,0 +1,7 @@
+export * from './alert'
+export * from './floating-ui'
+export * from './generic'
+export * from './group'
+export * from './nav'
+export * from './blurhash'
+export * from './input-file'

package/src/types/input-file.ts

@@ -0,0 +1,18 @@
+export type UploadedFile<Source = undefined> = Source extends undefined
+	? {
+			name: string
+			size: number
+			type: string
+			url: string
+			thumbnailUrl?: string
+			lastModified?: number
+		}
+	: {
+			name: string
+			size: number
+			type: string
+			url: string
+			thumbnailUrl?: string
+			lastModified?: number
+			source: Source
+		}

package/src/types/nav.ts

@@ -0,0 +1,20 @@
+import type { AnchorTarget } from '@/constants'
+
+export type NavItem = {
+	label: string
+	ariaLabel?: string
+	title?: string
+	to?: string | Record<string, unknown>
+	href?: string
+	target?: `${AnchorTarget}`
+	rel?: string
+	disabled?: boolean
+	current?: boolean
+	class?: string | string[]
+	on?: Record<'click' | string, () => void>
+	data?: Record<string, unknown>
+}
+
+export type NavItemTab = NavItem & {
+	tab?: string
+}

package/src/utils/ObjectUtilities.ts

@@ -275,14 +275,3 @@ export function filterArray<T = Record<string, unknown>>(
 		})
 	})
 }
-
-export function kebabCase(value: string) {
-	if (value) {
-		return value
-			.match(
-				/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g,
-			)
-			?.join('-')
-			?.toLowerCase()
-	}
-}

package/src/workers/blurhash.ts

@@ -0,0 +1,9 @@
+import { expose } from 'comlink'
+import { ValidationError, encode, decode, isBlurhashValid } from 'blurhash'
+
+expose({
+    ValidationError,
+    encode,
+    decode,
+    isBlurhashValid,
+})

package/dist/components/VvNav/VvNavItemTitle.vue.d.ts

@@ -1,6 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    title: StringConstructor;
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    title: StringConstructor;
-}>>, {}, {}>;
-export default _default;

package/dist/components/VvNav/VvNavSeparator.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
-export default _default;

package/dist/components/VvNavItemTitle/VvNavItemTitle.es.js

@@ -1,19 +0,0 @@
-import { defineComponent, openBlock, createElementBlock, toDisplayString } from "vue";
-const _hoisted_1 = {
-  class: "vv-nav__heading-label",
-  "aria-hidden": "true"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "VvNavItemTitle",
-  props: {
-    title: String
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(__props.title), 1);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};

package/dist/components/VvNavItemTitle/VvNavItemTitle.umd.js

@@ -1 +0,0 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvNavItemTitle=t(e.vue)}(this,(function(e){"use strict";const t={class:"vv-nav__heading-label","aria-hidden":"true"};return e.defineComponent({__name:"VvNavItemTitle",props:{title:String},setup:n=>(i,o)=>(e.openBlock(),e.createElementBlock("span",t,e.toDisplayString(n.title),1))})}));

package/src/components/VvNav/VvNavItemTitle.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-	defineProps({
-		title: String,
-	})
-</script>
-
-<template>
-	<span class="vv-nav__heading-label" aria-hidden="true">
-		{{ title }}
-	</span>
-</template>

package/src/components/VvNav/VvNavSeparator.ts

@@ -1,8 +0,0 @@
-export default defineComponent({
-	render() {
-		return h('li', {
-			class: 'vv-nav__divider',
-			role: 'separator',
-		})
-	},
-})

package/src/types/generic.d.ts

@@ -1,6 +0,0 @@
-export type Nullable<T> = T | null | undefined
-
-export type Option = {
-	options?: Option[],
-	[key: string]: unknown,
-}