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

package/src/composables/useModifiers.ts

@@ -1,12 +1,21 @@
 import { computed, unref, type Ref } from 'vue'
-import ObjectUtilities from '@/utils/ObjectUtilities'
+import { kebabCase } from '@/utils/ObjectUtilities'
 
 interface IBemModifiers {
 	[key: string]:
 		| Ref<boolean>
 		| Ref<string | unknown[] | undefined>
+		| boolean
+		| string
+		| string[]
 		| undefined
-	modifiers?: Ref<string | unknown[] | undefined> | undefined
+		| unknown[]
+	modifiers?:
+		| Ref<string | unknown[] | undefined>
+		| undefined
+		| string[]
+		| string
+		| unknown[]
 }
 
 export function useBemModifiers(prefix: string, modifiers: IBemModifiers) {
@@ -14,34 +23,33 @@ export function useBemModifiers(prefix: string, modifiers: IBemModifiers) {
 
 	const bemCssClasses = computed(() => {
 		return (
-			Object.keys(modifiers).reduce((acc, k) => {
-				const _modifier = unref(modifiers[k] as Ref<any>) || false
+			Object.keys(modifiers).reduce((acc, item) => {
+				const _modifier =
+					unref(modifiers[item] as Ref<string | string[]>) || false
 
 				if (!_modifier) return acc
 
-				if (k === 'modifiers') {
+				if (item === 'modifiers') {
 					const _reduceModifiers = Array.isArray(_modifier)
 						? _modifier
-						: [_modifier]
+						: _modifier.split(' ')
 					return {
 						...acc,
 						..._reduceModifiers.reduce(
 							(accVariant: object, currentVariant: string) => {
 								return {
 									...accVariant,
-									[`${prefix}--${ObjectUtilities.kebabCase(
-										currentVariant
-									)}`]: true
+									[`${prefix}--${kebabCase(currentVariant)}`]:
+										true,
 								}
 							},
-							{}
-						)
+							{},
+						),
 					}
 				} else {
 					return {
 						...acc,
-						[`${prefix}--${ObjectUtilities.kebabCase(k)}`]:
-							_modifier
+						[`${prefix}--${kebabCase(item)}`]: _modifier,
 					}
 				}
 			}, baseCssClass) || {}
@@ -49,6 +57,42 @@ export function useBemModifiers(prefix: string, modifiers: IBemModifiers) {
 	})
 
 	return {
-		bemCssClasses
+		bemCssClasses,
 	}
 }
+
+export function toBem(prefix: string, modifiers: IBemModifiers) {
+	const baseCssClass: object = { [`${prefix}`]: true }
+
+	return (
+		Object.keys(modifiers).reduce((acc, k) => {
+			const _modifier = unref(modifiers[k] as Ref<unknown>) || false
+
+			if (!_modifier) return acc
+
+			if (k === 'modifiers') {
+				const _reduceModifiers = Array.isArray(_modifier)
+					? _modifier
+					: [_modifier]
+				return {
+					...acc,
+					..._reduceModifiers.reduce(
+						(accVariant: object, currentVariant: string) => {
+							return {
+								...accVariant,
+								[`${prefix}--${kebabCase(currentVariant)}`]:
+									true,
+							}
+						},
+						{},
+					),
+				}
+			} else {
+				return {
+					...acc,
+					[`${prefix}--${kebabCase(k)}`]: _modifier,
+				}
+			}
+		}, baseCssClass) || {}
+	)
+}

package/src/composables/useOptions.ts

@@ -0,0 +1,31 @@
+import { toRefs } from 'vue'
+import type { Option } from '@/types/generic'
+
+// eslint-disable-next-line
+export function useOptions(props: any) {
+	const { options, labelKey, valueKey } = toRefs(props)
+
+	// eslint-disable-next-line
+	const getOptionLabel = (option: string | Option) => {
+		if (typeof option !== 'object' && option !== null) return option
+
+		return typeof labelKey.value === 'function'
+			? labelKey.value(option)
+			: option[labelKey.value]
+	}
+
+	// eslint-disable-next-line
+	const getOptionValue = (option: any) => {
+		if (typeof option !== 'object' && option !== null) return option
+
+		return typeof valueKey.value === 'function'
+			? valueKey.value(option)
+			: option[valueKey.value]
+	}
+
+	return {
+		options,
+		getOptionLabel,
+		getOptionValue,
+	}
+}

package/src/composables/useTextCount.ts

@@ -0,0 +1,57 @@
+import { computed, unref, type Ref } from 'vue'
+
+export function useTextCount(
+	text: Ref<string | undefined | null> | string,
+	options?: {
+		mode?: string | boolean
+		upperLimit?: number
+		lowerLimit?: number
+	},
+) {
+	const length = computed(() => {
+		return (unref(text) ?? '').length
+	})
+
+	const gap = computed(() => {
+		if (
+			options?.lowerLimit !== undefined &&
+			length.value < options?.lowerLimit
+		) {
+			return length.value - options.lowerLimit
+		}
+		if (
+			options?.upperLimit !== undefined &&
+			length.value < options?.upperLimit
+		) {
+			return options.upperLimit - length.value
+		}
+		return 0
+	})
+
+	const formatted = computed(() => {
+		if (options?.mode === false) {
+			return ''
+		}
+
+		if (options?.mode === 'limit') {
+			return `${length.value} / ${
+				options.lowerLimit ? `${options.lowerLimit}-` : ''
+			}${options.upperLimit}`
+		}
+
+		if (options?.mode === 'countdown') {
+			if (gap.value === 0) {
+				return undefined
+			}
+			return gap
+		}
+
+		return length.value
+	})
+
+	return {
+		length,
+		gap,
+		formatted,
+	}
+}

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

@@ -1,7 +1,14 @@
+import VolverPlugin from './Volver'
+import type { Volver } from './Volver'
+
 // export all components as vue plugin
-export * from './components'
+export * from './components/index'
+export { VolverPlugin }
 
-// export IconifyJSON default icons
-export { default as iconsSimple } from './assets/icons/simple.json'
-export { default as iconsNormal } from './assets/icons/normal.json'
-export { default as iconsDetailed } from './assets/icons/detailed.json'
+// https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties
+// Add custom property and extend vue type definition
+declare module 'vue' {
+	interface ComponentCustomProperties {
+		$ds?: typeof Volver.prototype
+	}
+}

package/src/props/index.ts

@@ -1,45 +1,234 @@
+import type { PropType } from 'vue'
+import type { Option } from '@/types/generic'
+
 export const ValidProps = {
 	valid: Boolean,
-	validLabel: [String, Array]
+	validLabel: [String, Array],
 }
 
-export const ErrorProps = {
-	error: Boolean,
-	errorLabel: [String, Array]
+export const InvalidProps = {
+	invalid: Boolean,
+	invalidLabel: [String, Array],
 }
 
 export const LoadingProps = {
 	loading: Boolean,
-	loadingLabel: String
+	loadingLabel: String,
 }
 
 export const DisabledProps = {
-	disabled: Boolean
+	/**
+	 * Whether the form control is disabled
+	 */
+	disabled: Boolean,
 }
 
 export const ReadonlyProps = {
-	readonly: Boolean
+	/**
+	 * The value is not editable
+	 */
+	readonly: Boolean,
 }
 
 export const ModifiersProps = {
-	modifiers: [String, Array]
+	/**
+	 * Component BEM modifiers
+	 */
+	modifiers: [String, Array] as PropType<string | Array<string>>,
 }
 
 export const HintProps = {
-	hintLabel: { type: String, default: '' }
+	hintLabel: { type: String, default: '' },
 }
 
 export const OptionsProps = {
 	/**
-	 * Lista delle radio options
+	 * List of options, can be string[] or object[]
+	 */
+	options: {
+		type: Array as PropType<Array<Option | string>>,
+		default: () => [],
+	},
+	/**
+	 * Used when options are objects: key to use for option label
+	 */
+	labelKey: { type: [String, Function], default: 'label' },
+	/**
+	 * Used when options are objects: key to use for option label
+	 */
+	valueKey: { type: [String, Function], default: 'value' },
+}
+
+export const CountProps = {
+	/**
+	 * Show character limit
+	 */
+	count: {
+		type: [Boolean, String],
+		default: false,
+		validator: (value: string) =>
+			[true, false, 'limit', 'countdown'].includes(value),
+	},
+}
+
+export const DebounceProps = {
+	/**
+	 * Milliseconds to wait before emitting the input event
+	 */
+	debounce: [Number, String],
+}
+
+export const ICON_POSITIONS = {
+	LEFT: 'left',
+	RIGHT: 'right',
+} as const
+export type IconPosition = ValueOf<typeof ICON_POSITIONS>
+
+export const IconProps = {
+	/**
+	 * VvIcon name or props
+	 * @see VVIcon
+	 */
+	icon: { type: [String, Object] },
+	/**
+	 * VvIcon position
+	 */
+	iconPosition: {
+		type: String as PropType<IconPosition>,
+		validation: (value: IconPosition) =>
+			Object.values(ICON_POSITIONS).includes(value),
+		default: ICON_POSITIONS.RIGHT,
+	},
+}
+
+export const TabindexProps = {
+	/**
+	 * Global attribute tabindex
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+	 */
+	tabindex: { type: [String, Number], default: 0 },
+}
+
+export const IdNameProps = {
+	/**
+	 * Global attribute id
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+	 */
+	id: [String, Number],
+	/**
+	 * Input / Textarea name
+	 * Name of the form control. Submitted with the form as part of a name/value pair
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
+	 */
+	name: { type: String, required: true },
+}
+
+export const InputTextareaProps = {
+	...IdNameProps,
+	...TabindexProps,
+	...DisabledProps,
+	...ReadonlyProps,
+	...ValidProps,
+	...InvalidProps,
+	...HintProps,
+	...LoadingProps,
+	...ModifiersProps,
+	...CountProps,
+	...DebounceProps,
+	...IconProps,
+	/**
+	 * Global attribute autofocus
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
+	 */
+	autofocus: Boolean,
+	/**
+	 * Input / Textarea autocomplete
+	 * Hint for for autofill feature
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete
+	 */
+	autocomplete: { type: String, default: 'off' },
+	/**
+	 * Input / Textarea minlength
+	 * Minimum length (number of characters) of value
+	 * Available for input types: text, search, url, tel, email, password
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
+	 */
+	minlength: Number,
+	/**
+	 * Input / Textarea maxlength
+	 * Maximum length (number of characters) of value
+	 * Available for input types: text, search, url, tel, email, password
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
+	 */
+	maxlength: Number,
+	/**
+	 * Input / Textarea placeholder
+	 * Text that appears in the form control when it has no value set
+	 * Available for input types: text, search, url, tel, email, password, number
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder
+	 */
+	placeholder: String,
+	/**
+	 * Input / Textarea required
+	 * A value is required or must be check for the form to be submittable
+	 * Available for all input types except color
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required
+	 */
+	required: Boolean,
+	/**
+	 * <label> value for the Input / Textarea
+	 */
+	label: String,
+	/**
+	 * If true the label will be floating
+	 */
+	floating: Boolean,
+}
+
+export const CheckboxRadioProps = {
+	...IdNameProps,
+	...TabindexProps,
+	...ValidProps,
+	...InvalidProps,
+	...HintProps,
+	...DisabledProps,
+	...ReadonlyProps,
+	/**
+	 * Input value
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
+	 */
+	value: [String, Number, Boolean],
+	/**
+	 * Input value
+	 */
+	modelValue: [Object, Number, Boolean, String],
+	/**
+	 * <label> for input
+	 */
+	label: String,
+}
+
+export const CheckboxRadioGroupProps = {
+	...ValidProps,
+	...InvalidProps,
+	...OptionsProps,
+	...HintProps,
+	...DisabledProps,
+	...ReadonlyProps,
+	/**
+	 * Input value
+	 */
+	modelValue: [String, Array],
+	/**
+	 * Input label
 	 */
-	options: { type: Array, default: () => [] },
+	label: String,
 	/**
-	 * Se options è un array di oggetti, optionLabel = nome del campo da utilizzare come label oppure una funzione per ricavare la label
+	 * Input name
 	 */
-	optionLabel: { type: [String, Function], default: () => 'label' },
+	name: { type: String, required: true },
 	/**
-	 * Se options è un array di oggetti, optionValue = nome del campo da utilizzare come value oppure una funzione per ricavare il value
+	 * If true, the group will be displayed in a vertical column
 	 */
-	optionValue: { type: [String, Function], default: () => 'value' }
+	vertical: 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,13 @@
+// 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
+}
+
+type ValueOf<T> = T[keyof T]

package/src/stories/Accordion/Accordion.settings.ts

@@ -0,0 +1,46 @@
+import {
+	DefaultSlotArgTypes,
+	DisabledArgTypes,
+	ModifiersArgTypes,
+} from '@/stories/argTypes'
+
+export const defaultArgs = {
+	title: 'Lorem Ipsum',
+	content:
+		'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
+	modifiers: [],
+	disabled: false,
+}
+
+export const argTypes = {
+	summary: {
+		description: 'The title slot',
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	details: {
+		description: 'The content slot',
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	modifiers: {
+		...ModifiersArgTypes.modifiers,
+		options: ['marker-right', 'bordered'],
+	},
+	...DisabledArgTypes,
+	...DefaultSlotArgTypes,
+}