@volverjs/ui-vue 0.0.1-beta.8 → 0.0.2

package/src/components/VvIcon/VvIcon.vue

@@ -1,123 +1,138 @@
-<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 { IDesignSystem } from '../../DesignSystem'
-
-import { inject, toRefs } from 'vue'
-
-import { ref, computed } from 'vue'
-import { Icon, addIcon, iconExists } from '@iconify/vue'
-import { VvIconProps } from './VvIcon'
-
-//Composables
-import { useBemModifiers } from '@/composables/useModifiers'
+	import { inject, toRefs, ref, computed } from 'vue'
+	import { Icon, addIcon, iconExists, type IconifyJSON } from '@iconify/vue'
+	import { type IVolver, VOLVER_PREFIX } from '@/Volver'
+	import { VvIconProps } from '@/components/VvIcon'
+	import { useBemModifiers } from '@/composables/useModifiers'
 
-//Props,emits,slots
-const props = defineProps(VvIconProps)
+	// props
+	const props = defineProps(VvIconProps)
 
-//Data
-const show = ref(true)
-const { modifiers } = toRefs(props)
+	// data
+	const show = ref(true)
+	const { modifiers } = toRefs(props)
 
-//Inject
-const ds = inject<IDesignSystem>('ds')
+	// inject
+	const ds = inject<IVolver>(VOLVER_PREFIX)
 
-//Styles & bindings
-const { bemCssClasses: iconClass } = useBemModifiers('vv-icon', {
-	modifiers
-})
+	// classes
+	const { bemCssClasses } = useBemModifiers('vv-icon', {
+		modifiers,
+	})
 
-const currentProvider = computed(() => {
-	return props.provider || ds?.provider
-})
+	/**
+	 * Provider name
+	 */
+	const provider = computed(() => {
+		return props.provider || ds?.provider
+	})
 
-/**
- * Icon name
- */
-const icon = computed(() => {
-	const _name = props.name || ''
-	// compose Iconify icon name format
-	const iconName = `@${currentProvider.value}:${props.prefix}:${props.name}`
+	/**
+	 * Icon name
+	 */
+	const icon = computed(() => {
+		const _name = props.name ?? ''
+		// compose Iconify icon name format
+		const iconName = `@${provider.value}:${props.prefix}:${props.name}`
 
-	// Check first if icon with "name" exist
-	if (iconExists(_name)) {
-		return _name
-	} else if (iconExists(iconName)) {
-		// Check and return composed icon name if exist
-		return iconName
-	} else {
-		// Check into all collections and set "iconName" data
-		return (
-			ds?.iconsCollections.find((iconsCollection) => {
-				const icon = `@${currentProvider.value}:${iconsCollection.prefix}:${_name}`
-				if (iconExists(icon)) {
-					return icon
-				}
-			}) || _name
-		)
-	}
-})
+		// Check first if icon with "name" exist
+		if (iconExists(_name)) {
+			return _name
+		} else if (iconExists(iconName)) {
+			// Check and return composed icon name if exist
+			return iconName
+		} else {
+			// Check into all collections and set "iconName" data
+			return (
+				ds?.iconsCollections.find((iconsCollection: IconifyJSON) => {
+					const icon = `@${provider.value}:${iconsCollection.prefix}:${_name}`
+					if (iconExists(icon)) {
+						return icon
+					}
+				}) || _name
+			)
+		}
+	})
 
-/**
- * Get SVG content from SVG string
- * @param {string} svg
- * @return {SVGSVGElement | null} https://developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement
- */
-function getSvgContent(svg: string): SVGSVGElement | null {
-	let dom = null
-	if (typeof window === 'undefined') {
-		// SSR
-		// eslint-disable-next-line @typescript-eslint/no-var-requires, no-undef
-		const { JSDOM } = require('jsdom')
-		dom = new JSDOM().window
+	/**
+	 * Get SVG content from SVG string
+	 * @param {string} svg
+	 * @return {SVGSVGElement | null} https://developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement
+	 */
+	function getSvgContent(svg: string): SVGSVGElement | null {
+		let dom = null
+		if (typeof window === 'undefined') {
+			// SSR
+			// eslint-disable-next-line @typescript-eslint/no-var-requires, no-undef
+			const { JSDOM } = require('jsdom')
+			dom = new JSDOM().window
+		}
+		const domParser = dom ? new dom.DOMParser() : new window.DOMParser()
+		const svgDomString = domParser.parseFromString(svg, 'text/html')
+		const svgEl = svgDomString.querySelector('svg')
+		return svgEl
 	}
-	const domParser = dom ? new dom.DOMParser() : new window.DOMParser()
-	const svgDomString = domParser.parseFromString(svg, 'text/html')
-	const svgEl = svgDomString.querySelector('svg')
-	return svgEl
-}
 
-/**
- * Add icon to current Iconify provider
- * @param {string} svg
- */
-function addIconFromSvg(svg: string) {
-	const svgContentEl: SVGSVGElement | null = getSvgContent(svg)
-	const svgContent = svgContentEl?.innerHTML.trim() || ''
-	if (svgContentEl && svgContent) {
-		addIcon(`@${currentProvider.value}:${props.prefix}:${props.name}`, {
-			body: svgContent,
-			// Set height and width from svg content
-			height: svgContentEl.viewBox.baseVal.height,
-			width: svgContentEl.viewBox.baseVal.width
-		})
+	/**
+	 * Add icon to current Iconify provider
+	 * @param {string} svg
+	 */
+	function addIconFromSvg(svg: string) {
+		const svgContentEl: SVGSVGElement | null = getSvgContent(svg)
+		const svgContent = svgContentEl?.innerHTML.trim() || ''
+		if (svgContentEl && svgContent) {
+			addIcon(`@${provider.value}:${props.prefix}:${props.name}`, {
+				body: svgContent,
+				// Set height and width from svg content
+				height: svgContentEl.viewBox.baseVal.height,
+				width: svgContentEl.viewBox.baseVal.width,
+			})
+		}
 	}
-}
 
-if (ds) {
-	if (props.src) {
-		show.value = false
-		ds.fetchIcon(props.src)
-			.then((svg?: string) => {
-				if (svg) {
-					addIconFromSvg(svg)
-					show.value = true
-				}
-			})
-			.catch((e) => {
-				throw new Error(`During fetch icon: ${e?.message}`)
-			})
-	} else if (props.svg) {
-		addIconFromSvg(props.svg)
+	if (ds) {
+		if (
+			props.src &&
+			!iconExists(`@${provider.value}:${props.prefix}:${props.name}`)
+		) {
+			show.value = false
+			ds.fetchIcon(props.src)
+				.then((svg?: string) => {
+					if (svg) {
+						addIconFromSvg(svg)
+						show.value = true
+					}
+				})
+				.catch((e) => {
+					throw new Error(`During fetch icon: ${e?.message}`)
+				})
+		} else if (props.svg) {
+			addIconFromSvg(props.svg)
+		}
 	}
-}
 </script>
+
+<template>
+	<Icon
+		v-if="show"
+		:class="bemCssClasses"
+		v-bind="{
+			inline,
+			width,
+			height,
+			horizontalFlip,
+			verticalFlip,
+			flip,
+			rotate,
+			color,
+			onLoad,
+			icon,
+		}"
+	/>
+</template>

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

@@ -4,16 +4,25 @@ import type { IconifyRenderMode } from '@iconify/vue'
 export enum PREFIX {
 	simple = 'simple',
 	normal = 'normal',
-	detailed = 'detailed'
+	detailed = 'detailed',
 }
 
 export const VvIconProps = {
+	/**
+	 * Color
+	 */
 	color: String,
+	/**
+	 * Width
+	 */
 	width: {
-		type: [String, Number]
+		type: [String, Number],
 	},
+	/**
+	 * Height
+	 */
 	height: {
-		type: [String, Number]
+		type: [String, Number],
 	},
 	/**
 	 * Icon name
@@ -22,7 +31,7 @@ export const VvIconProps = {
 	 */
 	name: {
 		type: String,
-		required: true
+		required: true,
 	},
 	/**
 	 * By default 'vv'
@@ -30,7 +39,7 @@ export const VvIconProps = {
 	 * Icon provider: https://docs.iconify.design/api/providers.html#provider-in-icon-name
 	 */
 	provider: {
-		type: String
+		type: String,
 	},
 	/**
 	 * The name of icon set.
@@ -38,7 +47,7 @@ export const VvIconProps = {
 	 */
 	prefix: {
 		type: String as PropType<PREFIX>,
-		default: 'normal'
+		default: 'normal',
 	},
 	/**
 	 * Url remote SVG icon
@@ -89,6 +98,6 @@ export const VvIconProps = {
 	 * @values string | Array<string>
 	 */
 	modifiers: {
-		type: [String, Array] as PropType<string | string[]>
-	}
+		type: [String, Array] as PropType<string | string[]>,
+	},
 }

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,
+		})
+	},
+})