@volverjs/ui-vue 0.0.1-beta.6 → 0.0.1

package/src/test/expect.ts

@@ -1,27 +1,48 @@
 import { expect } from '@storybook/jest'
 import { userEvent } from '@storybook/testing-library'
 import { axe } from 'jest-axe'
+import { sleep } from '@/test/sleep'
 
 declare global {
 	// eslint-disable-next-line @typescript-eslint/no-namespace
 	namespace jest {
+		// eslint-disable-next-line
+		interface Matchers<R> {
+			toBeChecked: (expected?: HTMLElement) => CustomMatcherResult
+		}
+		// eslint-disable-next-line
 		interface Matchers<R> {
 			toBeClicked: (expected?: HTMLElement) => CustomMatcherResult
 		}
+		// eslint-disable-next-line
 		interface Matchers<R> {
 			toHaveClass: (
 				className: string | string[],
-				expected?: HTMLElement
+				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"
+			message: () => "Click event don't works",
 		}
 		element.addEventListener('click', () => {
 			result.pass = true
@@ -34,19 +55,19 @@ expect.extend({
 		const results = await axe(element)
 		return {
 			pass: results.violations.length === 0,
-			message: () => 'Element has violations'
+			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)
+				element.classList.contains(cssClass),
 			),
 			message: () =>
-				`One of these clsses doesn't exist: ${classes.join(', ')}`
+				`One of these classes doesn't exist: ${classes.join(', ')}`,
 		}
-	}
+	},
 })
 
 export { expect }

package/src/test/options.ts

@@ -0,0 +1,17 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const getOptionValue = (args: any, index: number) => {
+	if (args.options && args.options.length > index) {
+		let value = args.options[index]
+		if (args.valueKey) {
+			if (typeof args.valueKey === 'function') {
+				value = args.valueKey(value)
+			} else if (typeof value === 'object') {
+				value = value[args.valueKey]
+			}
+		} else if (typeof value === 'object') {
+			value = value.value
+		}
+		return value
+	}
+	return undefined
+}

package/src/test/sleep.ts

@@ -0,0 +1,2 @@
+export const sleep = async (ms = 300) =>
+	await new Promise((resolve) => setTimeout(resolve, ms))

package/src/test/types.d.ts

@@ -1,3 +1,17 @@
 export interface PlayAttributes {
 	canvasElement: HTMLElement
+	// eslint-disable-next-line
+	args: Record<string, any>
+	name?: string
+}
+
+interface ComponentConfig {
+	isClickDisabled?: boolean
+	className?: string | string[] | null
+	slotContent?: string | null
+	customText?: string | null
+	customElement?: HTMLElement | HTMLOrSVGElement | null
+	isVertical?: boolean
+	child?: number
+	propName?: string
 }

package/src/types/generic.d.ts

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

package/src/utils/ObjectUtilities.ts

@@ -1,275 +1,284 @@
-export default {
-	/**
-	 * Compare objects, primitives, array, dates, regexp
-	 * @param {any} obj1 first literal
-	 * @param {any} obj2 second literal
-	 * @param {string} field optional field of obj1 and obj2 (also nested dotted field "prop1.prop12")
-	 * @returns {boolean}
-	 */
-	equals(obj1: any, obj2: any, field?: string) {
-		if (field)
-			return (
-				this.resolveFieldData(obj1, field) ===
-				this.resolveFieldData(obj2, field)
-			)
-		else return this.deepEquals(obj1, obj2)
-	},
-
-	/**
-	 * Compare objects, primitives, array, dates, regexp
-	 * @param {any} a first literal
-	 * @param {any} b second literal
-	 * @returns {boolean}
-	 */
-	deepEquals(a: any, b: any) {
-		if (a === b) return true
-
-		if (a && b && typeof a == 'object' && typeof b == 'object') {
-			const arrA = Array.isArray(a)
-			const arrB = Array.isArray(b)
-			let i, length, key
-
-			if (arrA && arrB) {
-				length = a.length
-				if (length != b.length) return false
-				for (i = length; i-- !== 0; )
-					if (!this.deepEquals(a[i], b[i])) return false
+import { unref, type Ref } from 'vue'
+
+/**
+ * Compare objects, primitives, array, dates, regexp
+ * @param {any} obj1 first literal
+ * @param {any} obj2 second literal
+ * @param {string} field optional field of obj1 and obj2 (also nested dotted field "prop1.prop12")
+ * @returns {boolean}
+ */
+// eslint-disable-next-line
+export function equals(obj1: any, obj2: any, field?: string) {
+	if (field)
+		return resolveFieldData(obj1, field) === resolveFieldData(obj2, field)
+	else return deepEquals(obj1, obj2)
+}
 
-				return true
-			}
+/**
+ * Compare objects, primitives, array, dates, regexp
+ * @param {any} a first literal
+ * @param {any} b second literal
+ * @returns {boolean}
+ */
+// eslint-disable-next-line
+export function deepEquals(a: any, b: any) {
+	if (a === b) return true
+
+	if (a && b && typeof a == 'object' && typeof b == 'object') {
+		const arrA = Array.isArray(a)
+		const arrB = Array.isArray(b)
+		let i, length, key
+
+		if (arrA && arrB) {
+			length = a.length
+			if (length != b.length) return false
+			for (i = length; i-- !== 0; )
+				if (!deepEquals(a[i], b[i])) return false
 
-			if (arrA != arrB) return false
+			return true
+		}
 
-			const dateA = a instanceof Date,
-				dateB = b instanceof Date
+		if (arrA != arrB) return false
 
-			if (dateA != dateB) return false
-			if (dateA && dateB) return a.getTime() == b.getTime()
+		const dateA = a instanceof Date,
+			dateB = b instanceof Date
 
-			const regexpA = a instanceof RegExp,
-				regexpB = b instanceof RegExp
+		if (dateA != dateB) return false
+		if (dateA && dateB) return a.getTime() == b.getTime()
 
-			if (regexpA != regexpB) return false
-			if (regexpA && regexpB) return a.toString() == b.toString()
+		const regexpA = a instanceof RegExp,
+			regexpB = b instanceof RegExp
 
-			const keys = Object.keys(a)
+		if (regexpA != regexpB) return false
+		if (regexpA && regexpB) return a.toString() == b.toString()
 
-			length = keys.length
+		const keys = Object.keys(a)
 
-			if (length !== Object.keys(b).length) return false
+		length = keys.length
 
-			for (i = length; i-- !== 0; )
-				if (!Object.prototype.hasOwnProperty.call(b, keys[i]))
-					return false
+		if (length !== Object.keys(b).length) return false
 
-			for (i = length; i-- !== 0; ) {
-				key = keys[i]
-				if (!this.deepEquals(a[key], b[key])) return false
-			}
+		for (i = length; i-- !== 0; )
+			if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false
 
-			return true
+		for (i = length; i-- !== 0; ) {
+			key = keys[i]
+			if (!deepEquals(a[key], b[key])) return false
 		}
 
-		return a !== a && b !== b
-	},
-
-	/**
-	 * Find and return field or nested field from object (also nested dotted field)
-	 * @param {object} data object that contains the field
-	 * @param {string} field ex: "prop1" or "prop1.prop12"
-	 * @returns {boolean}
-	 */
-	resolveFieldData(data: { [key: string]: any }, field: string) {
-		if (data && Object.keys(data).length && field) {
-			if (field.indexOf('.') === -1) {
-				return data[field]
-			} else {
-				const fields = field.split('.')
-				let value = data
-
-				for (let i = 0, len = fields.length; i < len; ++i) {
-					if (data == null) {
-						return null
-					}
-
-					value = value[fields[i]]
-				}
+		return true
+	}
 
-				return value
-			}
+	return a !== a && b !== b
+}
+
+/**
+ * Find and return field or nested field from object (also nested dotted field)
+ * @param {object} data object that contains the field
+ * @param {string} field ex: "prop1" or "prop1.prop12"
+ * @returns {boolean}
+ */
+export function resolveFieldData(data: Record<string, unknown>, field: string) {
+	if (data && Object.keys(data).length && field) {
+		if (field.indexOf('.') === -1) {
+			return data[field]
 		} else {
-			return null
-		}
-	},
-
-	/**
-	 * @param {any} obj data to check
-	 * @returns {boolean}
-	 */
-	isFunction(obj: any) {
-		return !!(obj && obj.constructor && obj.call && obj.apply)
-	},
-
-	/**
-	 * Return the index of value in list array
-	 * @param {any} value the element to find
-	 * @param {Array<any>} list array list
-	 * @returns {number} the index
-	 */
-	findIndexInList(value: any, list: Array<any>) {
-		let index = -1
-
-		if (list) {
-			for (let i = 0; i < list.length; i++) {
-				if (this.equals(list[i], value)) {
-					index = i
-					break
+			const fields = field.split('.')
+			let value = data
+
+			for (let i = 0, len = fields.length; i < len; ++i) {
+				if (data == null) {
+					return null
 				}
+
+				value = value[fields[i]] as Record<string, unknown>
 			}
+
+			return value
 		}
+	} else {
+		return null
+	}
+}
+
+/**
+ * @param {any} obj data to check
+ * @returns {boolean}
+ */
+// eslint-disable-next-line
+export function isFunction(obj: any) {
+	return !!(obj && obj.constructor && obj.call && obj.apply)
+}
 
-		return index
-	},
-
-	/**
-	 * Return the index of value in list array
-	 * @param {any} value the element to find
-	 * @param {Array<any>} list array list
-	 * @returns {boolean} the index
-	 */
-	contains(value: any, list: Array<any>) {
-		if (value != null && list && list.length) {
-			for (const val of list) {
-				if (this.equals(value, val)) return true
+/**
+ * Return the index of value in list array
+ * @param {any} value the element to find
+ * @param {Array<any>} list array list
+ * @returns {number} the index
+ */
+export function findIndexInList<Type = unknown>(value: Type, list: Type[]) {
+	let index = -1
+
+	if (list) {
+		for (let i = 0; i < list.length; i++) {
+			if (equals(list[i], value)) {
+				index = i
+				break
 			}
 		}
+	}
 
-		return false
-	},
-
-	/**
-	 * @param {string | null | undefined | number | Array<any> | object} value element to checj
-	 * @returns {boolean}
-	 */
-	isEmpty(value: string | null | undefined | number | Array<any> | object) {
-		return (
-			value === null ||
-			value === undefined ||
-			value === '' ||
-			(Array.isArray(value) && value.length === 0) ||
-			(!(value instanceof Date) &&
-				typeof value === 'object' &&
-				Object.keys(value).length === 0)
-		)
-	},
-
-	/**
-	 * @param {string | null | undefined | number | Array<any> | object} value element to checj
-	 * @returns {boolean}
-	 */
-	isNotEmpty(
-		value: string | null | undefined | number | Array<any> | object
-	) {
-		return !this.isEmpty(value)
-	},
-
-	/**
-	 * Return the object entries that match the predicate passed
-	 * @param {Object} value
-	 * @param {Function} predicate
-	 * @returns {Object}
-	 */
-	pickBy(value: { [key: string]: any }, predicate: (k: string) => boolean) {
-		return Object.fromEntries(
-			Object.entries(value).filter(([key]) => predicate(key))
-		)
-	},
-
-	/**
-	 * Remove a value from an Array
-	 * @param {any} value the element to remove
-	 * @param {Array<any>} list
-	 * @returns {Array<any>}
-	 */
-	removeFromList(value: any, list: Array<any>) {
-		//check off
-		const indexElToRemove = this.findIndexInList(value, list)
-		if (indexElToRemove > -1) {
-			return list.filter((el, elIndex) => elIndex !== indexElToRemove)
-		} else {
-			return list
+	return index
+}
+
+/**
+ * Return the index of value in list array
+ * @param {any} value the element to find
+ * @param {Array<any>} list array list
+ * @returns {boolean} the index
+ */
+export function contains<Type = unknown>(value: Type, list: Type[]) {
+	if (value != null && list && list.length) {
+		for (const val of list) {
+			if (equals(value, val)) {
+				return true
+			}
 		}
-	},
-
-	/**
-	 * @param {any} value
-	 * @returns {boolean}
-	 */
-	isString(value: any) {
-		return typeof value === 'string' || value instanceof String
-	},
-
-	/**
-	 * Convert props definition to object with "prop" as key and default as value
-	 * @param {ComponentObjectPropsOptions} props vue component props
-	 * @returns {Object}
-	 */
-	propsToObject(props: any) {
-		return Object.keys(props).reduce((initValue: any, value: any) => {
-			if (this.isFunction(props[value])) {
+	}
+	return false
+}
+
+/**
+ * @param {boolean | string | null | undefined | number | Array<unknown> | object} value element to checj
+ * @returns {boolean}
+ */
+export function isEmpty(
+	value:
+		| boolean
+		| string
+		| null
+		| undefined
+		| number
+		| unknown[]
+		| object
+		| Ref,
+) {
+	return ((value) =>
+		value === null ||
+		value === undefined ||
+		value === '' ||
+		(Array.isArray(value) && value.length === 0) ||
+		(!(value instanceof Date) &&
+			typeof value === 'object' &&
+			Object.keys(value).length === 0))(unref(value))
+}
+
+/**
+ * Return the object entries that match the predicate passed
+ * @param {Object} value
+ * @param {Function} predicate
+ * @returns {Object}
+ */
+export function pickBy(
+	value: Record<string, unknown>,
+	predicate: (k: string) => boolean,
+) {
+	return Object.fromEntries(
+		Object.entries(value).filter(([key]) => predicate(key)),
+	)
+}
+
+/**
+ * Remove a value from an Array
+ * @param {any} value the element to remove
+ * @param {Array<any>} list
+ * @returns {Array<any>}
+ */
+export function removeFromList<Type = unknown>(value: Type, list: Type[]) {
+	//check off
+	const indexElToRemove = findIndexInList(value, list)
+	if (indexElToRemove > -1) {
+		return list.filter((el, elIndex) => elIndex !== indexElToRemove)
+	} else {
+		return list
+	}
+}
+
+/**
+ * @param {any} value
+ * @returns {boolean}
+ */
+export function isString(value: unknown) {
+	return typeof value === 'string' || value instanceof String
+}
+
+/**
+ * Convert props definition to object with "prop" as key and default as value
+ * @param {ComponentObjectPropsOptions} props vue component props
+ * @returns {Object}
+ */
+// eslint-disable-next-line
+export function propsToObject(props: any) {
+	return Object.keys(props).reduce(
+		(accumulator: Record<string, unknown>, key: string) => {
+			if (key === 'modelValue') {
+				return accumulator
+			}
+			if ('default' in props[key]) {
+				accumulator[key] = props[key].default
+				return accumulator
+			}
+			if (isFunction(props[key])) {
 				// case prop1: String
-				initValue[value] = props[value]()
-			} else if (Array.isArray(props[value])) {
+				accumulator[key] = props[key]()
+				return accumulator
+			}
+			if (Array.isArray(props[key])) {
 				// case prop1: [ String, Array ]
-				initValue[value] = props[value][0]()
-			} else if (props[value]?.type) {
-				// case prop1: { type: ... }
-				if (Array.isArray(props[value].type)) {
-					// case prop1: { type: [ String, Array ] }
-					initValue[value] =
-						props[value]?.default || props[value]?.type[0]()
-				} else {
-					// case prop1: { type: String }
-					initValue[value] =
-						props[value]?.default || props[value]?.type()
-				}
+				accumulator[key] = props[key][0]()
+				return accumulator
+			}
+			// case prop1: { type: ... }
+			if (Array.isArray(props[key].type)) {
+				accumulator[key] = props[key]?.type[0]()
+				return accumulator
 			}
-			return initValue
-		}, {})
-	},
-
-	/**
-	 * Filter array objects by filter array
-	 * @param {object[]} list the listo to filter
-	 * @param {object[] | string[]} filter the filter list, array of string or array of object
-	 * @param {string} key
-	 * @return {object[]}
-	 */
-	filterArray<T = { [key: string]: any }>(
-		list: T[],
-		filter: T[] | string[],
-		key: string
-	): T[] {
-		return list.filter((el) => {
-			return filter.some((f) => {
-				return typeof f === 'string'
-					? el[key as keyof typeof el] == f
-					: this.equals(
-							el[key as keyof typeof el],
-							f[key as keyof typeof f]
-					  )
-			})
+			// case prop1: { type: String }
+			accumulator[key] = props[key]?.type()
+			return accumulator
+		},
+		{} as Record<string, unknown>,
+	)
+}
+
+/**
+ * Filter array objects by filter array
+ * @param {object[]} list the listo to filter
+ * @param {object[] | string[]} filter the filter list, array of string or array of object
+ * @param {string} key
+ * @return {object[]}
+ */
+export function filterArray<T = Record<string, unknown>>(
+	list: T[],
+	filter: T[] | string[],
+	key: string,
+): T[] {
+	return list.filter((el) => {
+		return filter.some((f) => {
+			return typeof f === 'string'
+				? el[key as keyof typeof el] == f
+				: equals(el[key as keyof typeof el], f[key as keyof typeof f])
 		})
-	},
+	})
+}
 
-	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()
-		}
+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/dist/components/VvAccordion/VvAccordion.d.ts

@@ -1,32 +0,0 @@
-import type { ExtractPropTypes } from 'vue';
-export declare const VvAccordionProps: {
-    /**
-     * Accordion header title
-     */
-    title: StringConstructor;
-    /**
-     * Accordion content description
-     */
-    content: StringConstructor;
-    /**
-     * (Optional) Defines if item is open. Event "update:open" is emitted on accordion header click
-     */
-    open: BooleanConstructor;
-    /**
-     * Change icon position to right side
-     */
-    iconRight: BooleanConstructor;
-    /**
-     * Add border to accordion item
-     */
-    bordered: BooleanConstructor;
-    /**
-     * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
-     */
-    modifiers: (StringConstructor | ArrayConstructor)[];
-    disabled: BooleanConstructor;
-};
-export declare const VvAccordionEvents: string[];
-declare type _VvAccordionPropsType = typeof VvAccordionProps;
-export declare type VvAccordionPropsTypes = ExtractPropTypes<_VvAccordionPropsType>;
-export {};