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

package/src/components/VvDropdown/VvDropdown.vue

@@ -1,44 +1,25 @@
-<template>
-	<ul :class="dropdownClasses" role="listbox">
-		<li v-if="!options?.length">
-			<label>
-				{{ labelNoResult }}
-			</label>
-		</li>
-		<li v-for="(option, index) in options" :key="index">
-			<label :for="`dropdown-${index}-${id}`">
-				<input
-					:id="`dropdown-${index}-${id}`"
-					:type="multiple ? 'checkbox' : 'radio'"
-					:value="getValue(option)"
-					:checked="isSelected(option)"
-					:disabled="
-						typeof option === 'object'
-							? option.disabled ?? disabled
-							: disabled
-					"
-					@input="onInput" />
-				{{ getLabel(option) }}
-			</label>
-		</li>
-	</ul>
-</template>
+<script lang="ts">
+export default {
+	name: 'VvDropdown'
+}
+</script>
 
 <script setup lang="ts">
 import { toRefs } from 'vue'
-import { v4 as uuidv4 } from 'uuid'
-import { useBemModifiers } from '../../composables/useModifiers'
-import ObjectUtilities from '../../utils/ObjectUtilities'
-import { VvDropdownProps, type Option } from './VvDropdown'
+import { nanoid } from 'nanoid'
+import { useBemModifiers } from '@/composables/useModifiers'
+import { contains, equals, removeFromList } from '@/utils/ObjectUtilities'
+import { VvDropdownProps, type Option } from '@/components/VvDropdown'
 
+// props, emit
 const props = defineProps(VvDropdownProps)
 const emit = defineEmits(['update:modelValue'])
 
 // data
-const id = uuidv4()
+const id = nanoid()
 const { modifiers, disabled } = toRefs(props)
 
-//Styles & css classes modifiers
+// styles
 const { bemCssClasses: dropdownClasses } = useBemModifiers('vv-dropdown', {
 	modifiers,
 	disabled
@@ -48,18 +29,18 @@ const { bemCssClasses: dropdownClasses } = useBemModifiers('vv-dropdown', {
  * Check if an option exist into modelValue array (multiple) or is equal to modelValue (single)
  * @param {String | Option} option
  */
-function isSelected(option: string | Option) {
+function getChecked(option: string | Option) {
 	if (Array.isArray(props.modelValue)) {
 		// check if contain whole option or option value
 		return (
-			ObjectUtilities.contains(option, props.modelValue) ||
-			ObjectUtilities.contains(getValue(option), props.modelValue)
+			contains(option, props.modelValue) ||
+			contains(getValue(option), props.modelValue)
 		)
 	}
 	// check if modelValue is equal to option or option value
 	return (
-		ObjectUtilities.equals(option, props.modelValue) ||
-		ObjectUtilities.equals(getValue(option), props.modelValue)
+		equals(option, props.modelValue) ||
+		equals(getValue(option), props.modelValue)
 	)
 }
 
@@ -79,6 +60,17 @@ function getLabel(option: string | Option) {
 	return typeof option === 'string' ? option : option[props.labelKey]
 }
 
+/**
+ * Retrieve the disabled state of an option based on prop "disabled" or the disabled attribute
+ * @param {String | Option} option
+ */
+function getDisabled(option: string | Option): boolean {
+	if (typeof option === 'string' || option.disabled === undefined) {
+		return disabled.value
+	}
+	return option.disabled
+}
+
 /**
  * Function triggered on input of checkbox or radio (multple or single mode)
  * @param event on input event (checkbox or radio input)
@@ -105,11 +97,12 @@ function onInput(event: Event) {
 		if (
 			typeof props.maxValues !== 'undefined' &&
 			props.maxValues >= 0 &&
+			Array.isArray(props.modelValue) &&
 			props.modelValue?.length >= props.maxValues
 		) {
 			if (
 				(Array.isArray(props.modelValue) &&
-					!ObjectUtilities.contains(value, props.modelValue)) ||
+					!contains(value, props.modelValue)) ||
 				props.maxValues == 0
 			) {
 				target.checked = false
@@ -118,13 +111,41 @@ function onInput(event: Event) {
 			}
 		}
 		if (Array.isArray(props.modelValue)) {
-			value = ObjectUtilities.contains(value, props.modelValue)
-				? ObjectUtilities.removeFromList(value, props.modelValue)
+			value = contains(value, props.modelValue)
+				? removeFromList(value, props.modelValue)
 				: [...props.modelValue, value]
 		} else {
-			value = [value]
+			value = [value as Option]
 		}
 	}
 	emit('update:modelValue', value)
 }
 </script>
+
+<template>
+	<ul :class="dropdownClasses" role="listbox">
+		<li v-if="!options?.length" role="option">
+			<label>
+				{{ labelNoResult }}
+			</label>
+		</li>
+		<li
+			v-for="(option, index) in options"
+			:key="index"
+			role="option"
+			:aria-selected="getChecked(option)">
+			<label :for="`dropdown-${index}-${id}`">
+				<input
+					:id="`dropdown-${index}-${id}`"
+					:type="multiple ? 'checkbox' : 'radio'"
+					:value="getValue(option)"
+					:checked="getChecked(option)"
+					:disabled="getDisabled(option)"
+					tabindex="-1"
+					aria-hidden="true"
+					@input="onInput" />
+				{{ getLabel(option) }}
+			</label>
+		</li>
+	</ul>
+</template>

package/src/components/VvDropdown/{VvDropdown.ts → index.ts}

@@ -1,17 +1,21 @@
 import type { PropType } from 'vue'
-import { DisabledProps, ModifiersProps } from '../../props'
+import { DisabledProps, ModifiersProps } from '@/props'
 
 export interface Option {
-	[key: string]: any
+	[key: string]: unknown
+	disabled?: boolean
 }
 
 export const VvDropdownProps = {
 	...DisabledProps,
 	...ModifiersProps,
 	/**
-	 * modelValue can be an Object, a String or an Array of Object/String
+	 * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
 	 */
-	modelValue: [String, Array, Object],
+	modelValue: {
+		type: [String, Number, Boolean, Object, Array],
+		required: true
+	},
 	/**
 	 * Label of "no results" options
 	 */

package/src/components/VvIcon/VvIcon.vue

@@ -1,42 +1,34 @@
-<template>
-	<Icon
-		v-if="show"
-		:class="iconClass"
-		v-bind="{
-			...$props,
-			provider: currentProvider,
-			icon
-		}" />
-</template>
+<script lang="ts">
+export default {
+	name: 'VvIcon'
+}
+</script>
 
 <script setup lang="ts">
-import type { IVolver } from '../../Volver'
-import { VOLVER_PREFIX } from '../../Volver'
-
-import { inject, toRefs } from 'vue'
-
-import { ref, computed } from 'vue'
+import { inject, toRefs, ref, computed } from 'vue'
 import { Icon, addIcon, iconExists, type IconifyJSON } from '@iconify/vue'
-import { VvIconProps } from './VvIcon'
-
-//Composables
+import { type IVolver, VOLVER_PREFIX } from '@/Volver'
+import { VvIconProps } from '@/components/VvIcon'
 import { useBemModifiers } from '@/composables/useModifiers'
 
-//Props,emits,slots
+// props
 const props = defineProps(VvIconProps)
 
-//Data
+// data
 const show = ref(true)
 const { modifiers } = toRefs(props)
 
-//Inject
+// inject
 const ds = inject<IVolver>(VOLVER_PREFIX)
 
-//Styles & bindings
-const { bemCssClasses: iconClass } = useBemModifiers('vv-icon', {
+// classes
+const { bemCssClasses } = useBemModifiers('vv-icon', {
 	modifiers
 })
 
+/**
+ * Provider name
+ */
 const currentProvider = computed(() => {
 	return props.provider || ds?.provider
 })
@@ -105,7 +97,10 @@ function addIconFromSvg(svg: string) {
 }
 
 if (ds) {
-	if (props.src) {
+	if (
+		props.src &&
+		!iconExists(`@${currentProvider.value}:${props.prefix}:${props.name}`)
+	) {
 		show.value = false
 		ds.fetchIcon(props.src)
 			.then((svg?: string) => {
@@ -122,3 +117,14 @@ if (ds) {
 	}
 }
 </script>
+
+<template>
+	<Icon
+		v-if="show"
+		:class="bemCssClasses"
+		v-bind="{
+			...$props,
+			provider: currentProvider,
+			icon
+		}" />
+</template>

package/src/components/VvIcon/{VvIcon.ts → index.ts}

@@ -8,10 +8,19 @@ export enum PREFIX {
 }
 
 export const VvIconProps = {
+	/**
+	 * Color
+	 */
 	color: String,
+	/**
+	 * Width
+	 */
 	width: {
 		type: [String, Number]
 	},
+	/**
+	 * Height
+	 */
 	height: {
 		type: [String, Number]
 	},

package/src/components/VvInputText/VvInputClearAction.ts

@@ -0,0 +1,53 @@
+import { defineComponent, h } from 'vue'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+
+export default defineComponent({
+	components: {
+		VvIcon
+	},
+	props: {
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		label: {
+			type: String,
+			default: 'Clear'
+		},
+		icon: {
+			type: String,
+			default: 'close'
+		}
+	},
+	emits: ['clear'],
+	setup(props, { emit }) {
+		function onClick(e: Event) {
+			e?.stopPropagation()
+			if (!props.disabled) {
+				emit('clear')
+			}
+		}
+
+		return {
+			onClick
+		}
+	},
+	render() {
+		const icon = h(VvIcon, {
+			name: this.icon,
+			class: 'vv-input-text__action-icon'
+		})
+
+		return h(
+			'button',
+			{
+				disabled: this.disabled,
+				class: 'vv-input-text__action',
+				ariaLabel: this.label,
+				type: 'button',
+				onClick: this.onClick
+			},
+			icon
+		)
+	}
+})

package/src/components/VvInputText/VvInputPasswordAction.ts

@@ -0,0 +1,70 @@
+import { defineComponent, ref, computed, h } from 'vue'
+import { TYPES_ICON } from '@/components/VvInputText'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+
+export default defineComponent({
+	components: {
+		VvIcon
+	},
+	props: {
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		labelShow: {
+			type: String,
+			default: 'Show password'
+		},
+		labelHide: {
+			type: String,
+			default: 'Hide password'
+		},
+		iconShow: {
+			type: String,
+			default: TYPES_ICON.PASSWORD_SHOW
+		},
+		iconHide: {
+			type: String,
+			default: TYPES_ICON.PASSWORD_HIDE
+		}
+	},
+	emits: ['toggle-password'],
+	setup(props, { emit }) {
+		const active = ref(false)
+		const activeIcon = computed(() =>
+			active.value ? props.iconHide : props.iconShow
+		)
+
+		function onClick(e: Event) {
+			e?.stopPropagation()
+			if (!props.disabled) {
+				active.value = !active.value
+				emit('toggle-password', active.value)
+			}
+		}
+
+		return {
+			active,
+			activeIcon,
+			onClick
+		}
+	},
+	render() {
+		const icon = h(VvIcon, {
+			name: this.activeIcon,
+			class: 'vv-input-text__action-icon'
+		})
+
+		return h(
+			'button',
+			{
+				disabled: this.disabled,
+				class: 'vv-input-text__action',
+				ariaLabel: this.active ? this.labelHide : this.labelShow,
+				type: 'button',
+				onClick: this.onClick
+			},
+			icon
+		)
+	}
+})

package/src/components/VvInputText/VvInputStepAction.ts

@@ -0,0 +1,49 @@
+import { computed, defineComponent, h } from 'vue'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+
+export default defineComponent({
+	components: {
+		VvIcon
+	},
+	props: {
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		label: {
+			type: String
+		},
+		mode: {
+			type: String,
+			validator: (v: string) => ['up', 'down'].includes(v),
+			default: 'up'
+		}
+	},
+	emits: ['step-up', 'step-down'],
+	setup(props, { emit }) {
+		const isUp = computed(() => props.mode === 'up')
+
+		const onClick = (e: Event) => {
+			e?.stopPropagation()
+			if (!props.disabled) {
+				emit(isUp.value ? 'step-up' : 'step-down')
+			}
+		}
+
+		return {
+			isUp,
+			onClick
+		}
+	},
+	render() {
+		return h('button', {
+			class: [
+				'vv-input-text__action-chevron',
+				this.isUp && 'vv-input-text__action-chevron-up'
+			],
+			disabled: this.disabled,
+			ariaLabel: this.label,
+			onClick: this.onClick
+		})
+	}
+})