@volverjs/ui-vue 0.0.10-beta.7 → 0.0.10-beta.70

package/src/composables/useDefaults.ts

@@ -1,89 +0,0 @@
-import type { ExtractPropTypes, PropType } from 'vue'
-
-type VueProp =
-	| StringConstructor
-	| NumberConstructor
-	| ObjectConstructor
-	| FunctionConstructor
-	| SymbolConstructor
-	| ArrayConstructor
-	| BooleanConstructor
-	| PropType<unknown>
-
-export function useDefaults<Definition>(
-	componentName: string,
-	propsDefinition: Definition,
-	props: Readonly<ExtractPropTypes<Definition>>,
-) {
-	const volver = useVolver()
-
-	const volverComponentDefaults = computed(() => {
-		if (!volver || !volver.defaults.value?.[componentName]) {
-			return undefined
-		}
-		return volver.defaults.value[componentName]
-	})
-
-	return computed(() => {
-		if (volverComponentDefaults.value === undefined) {
-			return props
-		}
-		const componentDefaults = volverComponentDefaults.value
-		const simplifiedPropsDefinition = propsDefinition as {
-			[key: string]:
-				| VueProp
-				| VueProp[]
-				| { type: VueProp | VueProp[]; default?: unknown }
-		}
-		const simplifiedProps = props as Record<string, unknown>
-		return Object.keys(simplifiedPropsDefinition).reduce((acc, key) => {
-			const propValue = simplifiedProps[key]
-			acc[key] = propValue
-			if (key in componentDefaults) {
-				// array of types
-				if (Array.isArray(simplifiedPropsDefinition[key])) {
-					const typeArray = simplifiedPropsDefinition[
-						key
-					] as VueProp[]
-					if (typeArray.length) {
-						const typeFunction = typeArray[0] as <T>() => T
-						if (typeFunction === propValue) {
-							acc[key] = componentDefaults[key]
-						}
-					}
-				}
-				// single type
-				if (typeof simplifiedPropsDefinition[key] === 'function') {
-					const typeFunction = simplifiedPropsDefinition[key] as <
-						T,
-					>() => T
-					if (typeFunction() === propValue) {
-						acc[key] = componentDefaults[key]
-					}
-				}
-				// object with type and default
-				if (typeof simplifiedPropsDefinition[key] === 'object') {
-					let defaultValue = (
-						simplifiedPropsDefinition[key] as { default: unknown }
-					).default
-					if (typeof defaultValue === 'function') {
-						defaultValue = defaultValue()
-					}
-					if (typeof defaultValue === 'object') {
-						if (
-							JSON.stringify(defaultValue) ===
-							JSON.stringify(propValue)
-						) {
-							acc[key] = componentDefaults[key]
-						}
-					} else if (defaultValue === propValue) {
-						acc[key] = componentDefaults[key]
-					}
-				}
-			}
-			return acc
-		}, {} as Record<string, unknown>) as Readonly<
-			ExtractPropTypes<Definition>
-		>
-	})
-}

package/src/composables/useModifiers.ts

@@ -1,36 +0,0 @@
-import type { Ref } from 'vue'
-
-export function useModifiers(
-	prefix: string,
-	modifiers?: Ref<string | string[] | unknown | unknown[] | undefined>,
-	others?: Ref<Record<string, boolean>>,
-) {
-	return computed(() => {
-		const toReturn: Record<string, boolean> = {
-			[prefix]: true,
-		}
-		// props modifiers
-		const modifiersArray =
-			typeof modifiers?.value === 'string'
-				? modifiers.value.split(' ')
-				: modifiers?.value
-		if (modifiersArray) {
-			if (Array.isArray(modifiersArray)) {
-				modifiersArray.forEach((modifier) => {
-					if (modifier) {
-						toReturn[`${prefix}--${modifier}`] = true
-					}
-				})
-			}
-		}
-
-		// others modifiers
-		if (others) {
-			Object.keys(others.value).forEach((key) => {
-				toReturn[`${prefix}--${key}`] = unref(others.value[key])
-			})
-		}
-
-		return toReturn
-	})
-}

package/src/composables/useOptions.ts

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

package/src/composables/useTextCount.ts

@@ -1,57 +0,0 @@
-import 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' && options?.upperLimit) {
-			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/composables/useUniqueId.ts

@@ -1,5 +0,0 @@
-import { uid } from 'uid'
-import type { Ref } from 'vue'
-
-export const useUniqueId = (id?: Ref<string | number | undefined>) =>
-	computed(() => String(id?.value || uid()))

package/src/composables/useVolver.ts

@@ -1,5 +0,0 @@
-import { INJECTION_KEY_VOLVER } from '../constants'
-
-export function useVolver() {
-	return inject(INJECTION_KEY_VOLVER)
-}

package/src/constants.ts

@@ -1,138 +0,0 @@
-import type { InjectionKey, Ref } from 'vue'
-import type { Emitter } from 'mitt'
-import type { Volver } from './Volver'
-import type { AlertModifiers } from './types/alert'
-
-export const DEFAULT_ICONIFY_PROVIDER = 'vv'
-
-export enum Strategy {
-	absolute = 'absolute',
-	fixed = 'fixed',
-}
-
-export enum Side {
-	left = 'left',
-	right = 'right',
-	top = 'top',
-	bottom = 'bottom',
-}
-
-export enum Placement {
-	topStart = 'top-start',
-	topEnd = 'top-end',
-	bottomStart = 'bottom-start',
-	bottomEnd = 'bottom-end',
-	leftStart = 'left-start',
-	leftEnd = 'left-end',
-	rightStart = 'right-start',
-	rightEnd = 'right-end',
-}
-
-export enum Position {
-	before = 'before',
-	after = 'after',
-}
-
-export enum ButtonType {
-	button = 'button',
-	submit = 'submit',
-	reset = 'reset',
-}
-
-export enum ActionTag {
-	nuxtLink = 'nuxt-link',
-	routerLink = 'router-link',
-	a = 'a',
-	button = 'button',
-}
-
-export enum ActionRoles {
-	button = 'button',
-	link = 'link',
-	menuitem = 'menuitem',
-}
-
-export enum DropdownRole {
-	listbox = 'listbox',
-	menu = 'menu',
-}
-
-export enum DropdownItemRole {
-	option = 'option',
-	presentation = 'presentation',
-}
-
-export enum AnchorTarget {
-	_blank = '_blank',
-	_self = '_self',
-	_parent = '_parent',
-	_top = '_top',
-}
-
-// volver
-export const INJECTION_KEY_VOLVER = Symbol.for('volver') as InjectionKey<Volver>
-
-// groups
-export const INJECTION_KEY_BUTTON_GROUP = Symbol.for('buttonGroup')
-export const INJECTION_KEY_RADIO_GROUP = Symbol.for('radioGroup')
-export const INJECTION_KEY_CHECK_GROUP = Symbol.for('checkGroup')
-export const INJECTION_KEY_ACCORDION_GROUP = Symbol.for('accordionGroup')
-
-// dropdown
-export const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
-	'dropdownTrigger',
-) as InjectionKey<{
-	id?: Ref<string | number>
-	reference?: Ref<HTMLElement | null>
-	bus?: Emitter<{
-		click: Event
-		mouseover: Event
-		mouseleave: Event
-	}>
-	expanded?: Ref<boolean>
-	aria?: Ref<{
-		'aria-controls': string
-		'aria-haspopup': boolean
-		'aria-expanded': boolean
-	}>
-}>
-export const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for(
-	'dropdownItem',
-) as InjectionKey<{
-	role?: Ref<`${DropdownItemRole}`>
-	expanded?: Ref<boolean>
-}>
-export const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for(
-	'dropdownAction',
-) as InjectionKey<{
-	role?: Ref<`${ActionRoles}`>
-	expanded?: Ref<boolean>
-}>
-
-// alert
-export const INJECTION_KEY_ALERT_GROUP = Symbol.for(
-	'alertGroup',
-) as InjectionKey<{
-	name?: Ref<string | undefined>
-	bus?: Emitter<{ close: string }>
-}>
-export const DEFAULT_ALERT_AUTO_CLOSE = 10000
-export const DEFAULT_ALERT_MODIFIERS = 'info'
-export const DEFAULT_ALERT_DISMISSABLE = true
-export const DEFAULT_ALERT_GROUP = 'default'
-export const DEFAULT_ALERT_INFO_ICON = 'information'
-export const DEFAULT_ALERT_SUCCESS_ICON = 'check-circle'
-export const DEFAULT_ALERT_WARNING_ICON = 'warning'
-export const DEFAULT_ALERT_DANGER_ICON = 'error'
-export const DefaultAlertIconMap = new Map<AlertModifiers, string>([
-	['success', DEFAULT_ALERT_SUCCESS_ICON],
-	['info', DEFAULT_ALERT_INFO_ICON],
-	['warning', DEFAULT_ALERT_WARNING_ICON],
-	['danger', DEFAULT_ALERT_DANGER_ICON],
-])
-// {
-// 	success: DEFAULT_ALERT_SUCCESS_ICON,
-// 	info: DEFAULT_ALERT_INFO_ICON,
-// 	warning: DEFAULT_ALERT_WARNING_ICON,
-// 	danger: DEFAULT_ALERT_DANGER_ICON,
-// }

package/src/directives/index.ts

@@ -1,7 +0,0 @@
-import tooltip from '../directives/v-tooltip'
-import contextmenu from '../directives/v-contextmenu'
-
-export default {
-	tooltip,
-	contextmenu,
-}

package/src/directives/v-contextmenu.ts

@@ -1,40 +0,0 @@
-import type { Directive, DirectiveBinding } from 'vue'
-
-const contextmenu: Directive = {
-	beforeUpdate(el: HTMLElement, binding: DirectiveBinding) {
-		const clientX = ref(0)
-		const clientY = ref(0)
-		const virtualEl = {
-			getBoundingClientRect() {
-				return {
-					width: 0,
-					height: 0,
-					x: clientX.value,
-					y: clientY.value,
-					top: clientY.value,
-					left: clientX.value,
-					right: clientX.value,
-					bottom: clientY.value,
-				}
-			},
-		}
-		if (binding.value?.init) {
-			binding.value.init?.(virtualEl)
-		}
-		el.addEventListener(
-			'contextmenu',
-			function (ev) {
-				if (binding.value?.show) {
-					ev.preventDefault()
-					clientX.value = ev.clientX
-					clientY.value = ev.clientY
-					binding.value.show?.()
-					return false
-				}
-			},
-			false,
-		)
-	},
-}
-
-export default contextmenu

package/src/directives/v-tooltip.ts

@@ -1,15 +0,0 @@
-import { render, type Directive, type DirectiveBinding } from 'vue'
-import VvTooltip from '../components/VvTooltip/VvTooltip.vue'
-import type { Side } from '../constants'
-
-const tooltip: Directive = {
-	beforeMount(el: HTMLElement, binding: DirectiveBinding) {
-		const tooltip = h(VvTooltip, {
-			value: binding.value,
-			position: binding.arg as Side,
-		})
-		render(tooltip, el)
-	},
-}
-
-export default tooltip

package/src/icons.ts

@@ -1,7 +0,0 @@
-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, detailed, simple }

package/src/index.ts

@@ -1,12 +0,0 @@
-import VolverPlugin from './Volver'
-import type { Volver } from './Volver'
-
-export { VolverPlugin }
-
-// https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties
-// Add custom property and extend vue type definition
-declare module 'vue' {
-	interface ComponentCustomProperties {
-		$vv?: typeof Volver.prototype
-	}
-}