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

package/src/components/VvCombobox/index.ts

@@ -0,0 +1,88 @@
+import {
+	ValidProps,
+	InvalidProps,
+	HintProps,
+	LoadingProps,
+	DisabledProps,
+	ReadonlyProps,
+	ModifiersProps,
+	OptionsProps,
+	IconProps,
+	TabindexProps,
+	FloatingProps,
+	UnselectableProps,
+	IdNameProps,
+} from '@/props'
+
+export const VvComboboxEvents = [
+	'update:modelValue',
+	'change:search',
+	'focus',
+	'blur',
+]
+
+export const VvComboboxProps = {
+	...IdNameProps,
+	...TabindexProps,
+	...ValidProps,
+	...InvalidProps,
+	...HintProps,
+	...LoadingProps,
+	...DisabledProps,
+	...ReadonlyProps,
+	...ModifiersProps,
+	...OptionsProps,
+	...IconProps,
+	...FloatingProps,
+	...UnselectableProps,
+	/**
+	 * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
+	 */
+	modelValue: {
+		type: [String, Number, Boolean, Object, Array],
+		default: undefined,
+	},
+	/**
+	 * Select input label
+	 */
+	label: String,
+	/**
+	 * Label of "no results" options
+	 */
+	labelNoResults: { type: String, default: 'No results' },
+	/**
+	 * Select input placeholder
+	 */
+	placeholder: String,
+	/**
+	 * Use input text to search on options
+	 */
+	searchable: Boolean,
+	/**
+	 * On searchable select is the input search placeholder
+	 */
+	searchPlaceholder: String,
+	/**
+	 * The input search debounce time in ms
+	 */
+	debounceSearch: {
+		type: [Number, String],
+		default: 0,
+	},
+	/**
+	 * Manage modelValue as string[] or object[]
+	 */
+	multiple: Boolean,
+	/**
+	 * The max number of selected values
+	 */
+	maxValues: [Number, String],
+	/**
+	 * The select label separator visible to the user
+	 */
+	separator: { type: String, default: ', ' },
+	/**
+	 * Show native select
+	 */
+	native: Boolean,
+}

package/src/components/VvDialog/VvDialog.vue

@@ -1,91 +1,93 @@
+<script lang="ts">
+	export default {
+		name: 'VvDialog',
+	}
+</script>
+
+<script setup lang="ts">
+	import { type DialogHTMLAttributes, computed, ref } from 'vue'
+	import { useVModel, onClickOutside } from '@vueuse/core'
+	import VvIcon from '@/components/VvIcon/VvIcon.vue'
+	import { VvDialogEvents, VvDialogProps } from '@/components/VvDialog'
+
+	// props, emit
+	const props = defineProps(VvDialogProps)
+	const emit = defineEmits(VvDialogEvents)
+
+	// data
+	const show = useVModel(props, 'modelValue', emit)
+	const htmlAttrIsOpen = ref(true)
+
+	// template ref
+	const modalWrapper = ref(null)
+
+	// styles
+	const dialogAttrs = computed(() => {
+		const { id } = props
+		return {
+			id,
+			open: htmlAttrIsOpen.value,
+		} as DialogHTMLAttributes
+	})
+	const dialogClass = computed(() => {
+		if (!props.size) {
+			return 'vv-dialog'
+		}
+		return ['vv-dialog', `vv-dialog--${props.size}`]
+	})
+
+	// transitions
+	const transitioName = computed(() => `vv-dialog--${props.transition}`)
+	const dialogTransitionHandlers = {
+		'before-enter': () => {
+			htmlAttrIsOpen.value = true
+			emit('open')
+		},
+		'after-leave': () => {
+			htmlAttrIsOpen.value = false
+			emit('close')
+		},
+	}
+
+	// methods
+	onClickOutside(modalWrapper, () => {
+		if (props.autoClose) {
+			show.value = false
+		}
+	})
+
+	function closeDialog() {
+		show.value = false
+	}
+</script>
+
 <template>
 	<Transition :name="transitioName" v-on="dialogTransitionHandlers">
-		<dialog v-show="openDialog" v-bind="dialogAttrs" :class="dialogClass">
+		<dialog v-show="show" v-bind="dialogAttrs" :class="dialogClass">
 			<article ref="modalWrapper" class="vv-dialog__wrapper">
 				<header v-if="$slots.header || title" class="vv-dialog__header">
+					<!-- @slot Header slot -->
 					<slot name="header">
 						{{ title }}
 						<button
 							type="button"
 							aria-label="Close"
 							class="vv-dialog__close"
-							@click.prevent="closeDialog">
+							@click.prevent="closeDialog"
+						>
 							<vv-icon name="close" />
 						</button>
 					</slot>
 				</header>
 				<div class="vv-dialog__content">
-					<!-- @slot default -->
+					<!-- @slot Content slot -->
 					<slot />
 				</div>
 				<footer v-if="$slots.footer" class="vv-dialog__footer">
+					<!-- @slot Footer slot -->
 					<slot name="footer" />
 				</footer>
 			</article>
 		</dialog>
 	</Transition>
 </template>
-
-<script setup lang="ts">
-import type { DialogHTMLAttributes } from 'vue'
-
-import { computed, ref } from 'vue'
-import { useVModel, onClickOutside } from '@vueuse/core'
-import { VvDialogEvents, VvDialogProps } from './VvDialog'
-
-//Components
-import VvIcon from '../VvIcon/VvIcon.vue'
-
-//Constants
-import { VV_DIALOG_SIZES } from './constants'
-
-//Props, emits, slots, attrs
-const props = defineProps(VvDialogProps)
-const emit = defineEmits(VvDialogEvents)
-
-//Data
-const openDialog = useVModel(props, 'open', emit)
-const htmlAttrIsOpen = ref(true)
-
-//Template reference
-const modalWrapper = ref(null)
-
-//Style e binding
-const dialogAttrs = computed(() => {
-	const { id } = props
-	return {
-		id,
-		open: htmlAttrIsOpen.value
-	} as DialogHTMLAttributes
-})
-const dialogClass = computed(() => {
-	return {
-		'vv-dialog': true,
-		'vv-dialog--small': props.size === VV_DIALOG_SIZES.small,
-		'vv-dialog--fullscreen': props.size === VV_DIALOG_SIZES.fullscreen
-	}
-})
-
-//Transitions
-const transitioName = computed(() => `vv-dialog--${props.transition}`)
-const dialogTransitionHandlers = {
-	'after-enter': () => {
-		htmlAttrIsOpen.value = true
-		emit('open')
-	},
-	'after-leave': () => {
-		htmlAttrIsOpen.value = false
-		emit('close')
-	}
-}
-
-//Click outside
-onClickOutside(modalWrapper, () => {
-	if (props.autoClose) openDialog.value = false
-})
-
-//Methods
-function closeDialog() {
-	openDialog.value = false
-}
-</script>

package/src/components/VvDialog/index.ts

@@ -0,0 +1,10 @@
+export const VvDialogEvents = ['open', 'close', 'update:modelValue']
+
+export const VvDialogProps = {
+	id: { type: String, required: true },
+	title: String,
+	modelValue: Boolean,
+	transition: { type: String, default: 'fade-block' },
+	size: String,
+	autoClose: { type: Boolean, default: true },
+}

package/src/components/VvDropdown/VvDropdown.vue

@@ -1,130 +1,131 @@
-<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 { computed, toRefs } from 'vue'
+	import { nanoid } from 'nanoid'
+	import { useBemModifiers } from '@/composables/useModifiers'
+	import { useOptions } from '@/composables/useOptions'
+	import { contains, equals, removeFromList } from '@/utils/ObjectUtilities'
+	import { VvDropdownProps } from '@/components/VvDropdown'
+	import type { Option } from '@/types/generic'
+
+	// props, emit
+	const props = defineProps(VvDropdownProps)
+	const emit = defineEmits(['update:modelValue'])
 
-const props = defineProps(VvDropdownProps)
-const emit = defineEmits(['update:modelValue'])
+	// data
+	const hasId = computed(() => String(props.id || nanoid()))
+	const { modifiers, disabled } = toRefs(props)
 
-// data
-const id = uuidv4()
-const { modifiers, disabled } = toRefs(props)
+	// options
+	const { getOptionLabel, getOptionValue } = useOptions(props)
 
-//Styles & css classes modifiers
-const { bemCssClasses: dropdownClasses } = useBemModifiers('vv-dropdown', {
-	modifiers,
-	disabled
-})
+	// styles
+	const { bemCssClasses: dropdownClasses } = useBemModifiers('vv-dropdown', {
+		modifiers,
+		disabled,
+	})
 
-/**
- * Check if an option exist into modelValue array (multiple) or is equal to modelValue (single)
- * @param {String | Option} option
- */
-function isSelected(option: string | Option) {
-	if (Array.isArray(props.modelValue)) {
-		// check if contain whole option or option value
+	/**
+	 * Check if an option exist into modelValue array (multiple) or is equal to modelValue (single)
+	 * @param {String | Option} option
+	 */
+	function getChecked(option: string | Option) {
+		if (Array.isArray(props.modelValue)) {
+			// check if contain whole option or option value
+			return (
+				contains(option, props.modelValue) ||
+				contains(getOptionValue(option), props.modelValue)
+			)
+		}
+		// check if modelValue is equal to option or option value
 		return (
-			ObjectUtilities.contains(option, props.modelValue) ||
-			ObjectUtilities.contains(getValue(option), props.modelValue)
+			equals(option, props.modelValue) ||
+			equals(getOptionValue(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)
-	)
-}
-
-/**
- * Retrieve the option value based on prop "valueKey" or the option if it is a string
- * @param {String | Option} option
- */
-function getValue(option: string | Option) {
-	return typeof option === 'string' ? option : String(option[props.valueKey])
-}
-
-/**
- * Retrieve the option label based on prop "labelKey" or the option if it is a string
- * @param {String | Option} option
- */
-function getLabel(option: string | Option) {
-	return typeof option === 'string' ? option : option[props.labelKey]
-}
 
-/**
- * Function triggered on input of checkbox or radio (multple or single mode)
- * @param event on input event (checkbox or radio input)
- */
-function onInput(event: Event) {
-	const target = event.target as HTMLInputElement
-
-	// Value initialized with string input value
-	// Can be an Array of string or an Option or Array of Options
-	let value: string | string[] | Option | Option[] = target.value
-	// Find option object if useObject prop is true and options are objects
-	const valueObject = props.useObject
-		? props.options?.find(
-				(option) => (option as Option)[props.valueKey] == value
-		  )
-		: null
+	/**
+	 * 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
+	}
 
-	// use valueObject if exist or the target value
-	value = valueObject || value
+	/**
+	 * Function triggered on input of checkbox or radio (multple or single mode)
+	 * @param event on input event (checkbox or radio input)
+	 */
+	function onInput(value: string | Option) {
+		if (props.disabled) {
+			return
+		}
 
-	// Check multiple prop, override value with array and remove or add the value
-	if (props.multiple) {
-		// check maxValues prop and block check new values
-		if (
-			typeof props.maxValues !== 'undefined' &&
-			props.maxValues >= 0 &&
-			props.modelValue?.length >= props.maxValues
-		) {
-			if (
-				(Array.isArray(props.modelValue) &&
-					!ObjectUtilities.contains(value, props.modelValue)) ||
-				props.maxValues == 0
-			) {
-				target.checked = false
-				// maxValues reached
-				return
+		let toReturn: string | string[] | Option | Option[] | undefined = value
+		// Check multiple prop, override value with array and remove or add the value
+		if (props.multiple) {
+			// check maxValues prop and block check new values
+			if (Array.isArray(props.modelValue)) {
+				if (
+					props.maxValues !== undefined &&
+					props.maxValues >= 0 &&
+					props.modelValue?.length >= props.maxValues
+				) {
+					if (!contains(value, props.modelValue)) {
+						// maxValues reached
+						return
+					}
+				}
+				toReturn = contains(value, props.modelValue)
+					? removeFromList(value, props.modelValue)
+					: [...props.modelValue, value]
+			} else {
+				toReturn = [value as Option]
 			}
+		} else if (props.unselectable && value === props.modelValue) {
+			toReturn = undefined
 		}
-		if (Array.isArray(props.modelValue)) {
-			value = ObjectUtilities.contains(value, props.modelValue)
-				? ObjectUtilities.removeFromList(value, props.modelValue)
-				: [...props.modelValue, value]
-		} else {
-			value = [value]
-		}
+		emit('update:modelValue', toReturn)
 	}
-	emit('update:modelValue', value)
-}
 </script>
+
+<template>
+	<ul :id="hasId" :class="dropdownClasses" role="listbox">
+		<li v-if="!options?.length" role="option">
+			<label>
+				{{ labelNoResults }}
+			</label>
+		</li>
+		<li
+			v-for="(option, index) in options"
+			:key="index"
+			role="option"
+			:aria-selected="getChecked(option)"
+		>
+			<label
+				:for="`dropdown-${index}-${hasId}`"
+				@click.prevent="onInput(getOptionValue(option))"
+			>
+				<input
+					:id="`dropdown-${index}-${hasId}`"
+					:type="multiple ? 'checkbox' : 'radio'"
+					:value="getOptionValue(option)"
+					:checked="getChecked(option)"
+					:disabled="getDisabled(option)"
+					:name="name"
+					tabindex="-1"
+					aria-hidden="true"
+				/>
+				{{ getOptionLabel(option) }}
+			</label>
+		</li>
+	</ul>
+</template>

package/src/components/VvDropdown/index.ts

@@ -0,0 +1,35 @@
+import {
+	DisabledProps,
+	IdNameProps,
+	ModifiersProps,
+	OptionsProps,
+} from '@/props'
+
+export const VvDropdownProps = {
+	...IdNameProps,
+	...OptionsProps,
+	...DisabledProps,
+	...ModifiersProps,
+	/**
+	 * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
+	 */
+	modelValue: {
+		type: [String, Number, Boolean, Object, Array],
+	},
+	/**
+	 * Label of "no results" options
+	 */
+	labelNoResults: { type: String, default: 'No results' },
+	/**
+	 * Manage modelValue as string[] or object[]
+	 */
+	multiple: Boolean,
+	/**
+	 * The max number of selected values
+	 */
+	maxValues: [Number, String],
+	/**
+	 * If true the input will be unselectable
+	 */
+	unselectable: { type: Boolean, default: true },
+}

package/src/components/VvIcon/README.md

@@ -0,0 +1,64 @@
+# VvIcon
+
+VvIcon use [Iconify](https://iconify.design/) library and [Iconify Vue Component](https://docs.iconify.design/icon-components/vue/) under the hood.
+
+## Props
+
+`VvIcon` provide `name`, `provider` and `prefix` props.
+Only `name` is required because the default provider is `vv` and the default `prefix` is `normal`.
+
+## Custom icons
+
+`@volverjs/ui-vue` has the node bin script `generate-icons` to create the [IconifyJSON](https://docs.iconify.design/types/iconify-json.html) objects.
+This function for input params has the source path to the icons folder and the destination path for output json files.
+
+```bash
+generate-icons --srcPath=assets/icons  --destPath=src/assets/icons
+```
+
+The source path can have subfolders. In this case the folder name will be the iconify [prefix](https://docs.iconify.design/icon-components/vue/#icon) and all the children SVG icons will be the icons `name`.
+The `api-provider` is `@vv` by default, you can change it in plugin options.
+
+![iconify name structure](../../../.storybook/static/iconify-name-structure.png)
+
+For example, if you have the following folders:
+
+```
+assets/icons/simple/*.svg
+assets/icons/normal/*.svg
+assets/icons/detailed/*.svg
+```
+
+The script `generate-icons --srcPath=assets/icons` will generate three json files: `simple.json`, `normal.json` and `detailed.json`.
+Each file contains the icons with the `@vv` provider and the prefix `simple`, `normal` and `detailed` respectively.
+
+```
+@vv:simple:{fileName}
+@vv:normal:{fileName}
+@vv:detailed:{fileName}
+```
+
+### Example
+
+Put the SVG files inside a folder (ex. `assets/icons/custom/*.svg`).
+Launch the script `generate-icons --srcPath=assets/icons/custom` to generate the `custom.json` file. Import the `custom.json` file in your `main.ts` file and add it to the `iconsCollections` array.
+
+```typescript
+import customIcons from '@/assets/icons/custom.json'
+
+app.use(VolverPlugin, {
+  iconsCollections: [customIcons]
+})
+```
+
+Now you can use the icons in your templates with the `prefix` prop.
+
+```html
+<vv-icon name="iconName" prefix="custom" />
+```
+
+Or using the `@vv:custom:{iconName}` syntax.
+
+```html
+<vv-icon name="custom:{iconName}" />
+```