@volverjs/ui-vue 0.0.5-beta.1 → 0.0.5-beta.3

package/src/components/VvCombobox/VvCombobox.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 	export default {
 		name: 'VvCombobox',
-		components: { VvDropdown, VvDropdownOption },
+		components: { VvDropdown, VvDropdownOption, VvDropdownOptgroup },
 	}
 </script>
 
@@ -11,6 +11,7 @@
 	import VvIcon from '../VvIcon/VvIcon.vue'
 	import VvDropdown from '../VvDropdown/VvDropdown.vue'
 	import VvDropdownOption from '../VvDropdown/VvDropdownOption.vue'
+	import VvDropdownOptgroup from '../VvDropdown/VvDropdownOptgroup.vue'
 	import VvSelect from '../VvSelect/VvSelect.vue'
 	import VvBadge from '../VvBadge/VvBadge.vue'
 	import HintSlotFactory from '../common/HintSlot'
@@ -155,8 +156,12 @@
 		props.searchable ? filteredOptions.value : props.options,
 	)
 
-	const { getOptionLabel, getOptionValue, getOptionDisabled } =
-		useOptions(props)
+	const {
+		getOptionLabel,
+		getOptionValue,
+		getOptionDisabled,
+		getOptionGrouped,
+	} = useOptions(props)
 
 	// options filtered by search text
 	const filteredOptions = computed(() => {
@@ -193,7 +198,7 @@
 	const selectedOptions = computed(() => {
 		let selectedValues: Array<typeof props.modelValue> = []
 		if (Array.isArray(props.modelValue)) {
-			selectedValues = props.modelValue
+			selectedValues = props.modelValue as Array<typeof props.modelValue>
 		} else if (props.modelValue) {
 			selectedValues = [props.modelValue]
 		}
@@ -237,10 +242,11 @@
 		if (props.multiple) {
 			// check maxValues prop and block check new values
 			if (Array.isArray(props.modelValue)) {
+				const maxValues = Number(props.maxValues)
 				if (
 					props.maxValues !== undefined &&
-					props.maxValues >= 0 &&
-					props.modelValue?.length >= props.maxValues
+					maxValues >= 0 &&
+					props.modelValue?.length >= maxValues
 				) {
 					if (!contains(value, props.modelValue)) {
 						// maxValues reached
@@ -295,6 +301,7 @@
 		id: hasDropdownId.value,
 		reference: wrapperEl.value,
 		placement: props.placement,
+		strategy: props.strategy,
 		transitionName: props.transitionName,
 		offset: props.offset,
 		shift: props.shift,
@@ -325,6 +332,14 @@
 			toggleExpanded()
 		}
 	})
+
+	// Grouped options
+	const isGroup = (option: string | Option) => {
+		if (typeof option === 'string') {
+			return false
+		}
+		return option.options && option.options.length > 0
+	}
 </script>
 
 <template>
@@ -437,35 +452,77 @@
 				</template>
 				<template #items>
 					<template v-if="filteredOptions.length">
-						<VvDropdownOption
+						<template
 							v-for="(option, index) in filteredOptions"
-							v-bind="{
-								disabled: getOptionDisabled(option),
-								selected: getOptionSelected(option),
-								unselectable,
-								deselectHintLabel:
-									propsDefaults.deselectHintLabel,
-								selectHintLabel: propsDefaults.selectHintLabel,
-								selectedHintLabel:
-									propsDefaults.selectedHintLabel,
-							}"
 							:key="index"
-							class="vv-dropdown-option"
-							@click.passive="onInput(option)"
 						>
-							<!-- @slot Slot for option customization -->
-							<slot
-								name="option"
+							<template v-if="isGroup(option)">
+								<VvDropdownOptgroup
+									:label="getOptionLabel(option)"
+								/>
+								<VvDropdownOption
+									v-for="(item, i) in getOptionGrouped(
+										option,
+									)"
+									v-bind="{
+										disabled: getOptionDisabled(item),
+										selected: getOptionSelected(item),
+										unselectable,
+										deselectHintLabel:
+											propsDefaults.deselectHintLabel,
+										selectHintLabel:
+											propsDefaults.selectHintLabel,
+										selectedHintLabel:
+											propsDefaults.selectedHintLabel,
+									}"
+									:key="i"
+									class="vv-dropdown-option"
+									@click.passive="onInput(item)"
+								>
+									<!-- @slot Slot for option customization -->
+									<slot
+										name="option"
+										v-bind="{
+											option,
+											selectedOptions,
+											selected: getOptionSelected(item),
+											disabled: getOptionDisabled(item),
+										}"
+									>
+										{{ getOptionLabel(item) }}
+									</slot>
+								</VvDropdownOption>
+							</template>
+							<VvDropdownOption
+								v-else
 								v-bind="{
-									option,
-									selectedOptions,
-									selected: getOptionSelected(option),
 									disabled: getOptionDisabled(option),
+									selected: getOptionSelected(option),
+									unselectable,
+									deselectHintLabel:
+										propsDefaults.deselectHintLabel,
+									selectHintLabel:
+										propsDefaults.selectHintLabel,
+									selectedHintLabel:
+										propsDefaults.selectedHintLabel,
 								}"
+								class="vv-dropdown-option"
+								@click.passive="onInput(option)"
 							>
-								{{ getOptionLabel(option) }}
-							</slot>
-						</VvDropdownOption>
+								<!-- @slot Slot for option customization -->
+								<slot
+									name="option"
+									v-bind="{
+										option,
+										selectedOptions,
+										selected: getOptionSelected(option),
+										disabled: getOptionDisabled(option),
+									}"
+								>
+									{{ getOptionLabel(option) }}
+								</slot>
+							</VvDropdownOption>
+						</template>
 					</template>
 					<VvDropdownOption
 						v-else-if="!options.length"

package/src/components/VvDropdown/VvDropdown.vue

@@ -25,7 +25,6 @@
 		ShiftOptions,
 		SizeOptions,
 	} from '../../types/floating-ui'
-	import type { Placement } from '@/constants'
 
 	// props, emit and attrs
 	const props = defineProps(VvDropdownProps)
@@ -128,7 +127,8 @@
 		floatingEl,
 		{
 			whileElementsMounted: autoUpdate,
-			placement: props.placement as Placement,
+			placement: computed(() => props.placement),
+			strategy: computed(() => props.strategy),
 			middleware,
 		},
 	)
@@ -195,6 +195,7 @@
 	const init = (el: HTMLElement) => {
 		referenceEl.value = el
 	}
+	defineExpose({ toggle, show, hide, init })
 	watch(expanded, (newValue) => {
 		if (newValue && props.autofocusFirst) {
 			nextTick(() => {

package/src/components/VvDropdown/VvDropdownOptgroup.vue

@@ -0,0 +1,18 @@
+<script lang="ts">
+	export default {
+		name: 'VvDropdownOptgroup',
+	}
+</script>
+
+<script setup lang="ts">
+	import { LabelProps } from '../../props'
+	const props = defineProps({
+		...LabelProps,
+	})
+</script>
+
+<template>
+	<li class="vv-dropdown-optgroup" role="presentation" tabindex="-1">
+		{{ props.label }}
+	</li>
+</template>

package/src/components/VvInputText/VvInputText.vue

@@ -147,8 +147,8 @@
 	// count
 	const { formatted: countFormatted } = useTextCount(localModelValue, {
 		mode: props.count,
-		upperLimit: props.maxlength,
-		lowerLimit: props.minlength,
+		upperLimit: Number(props.maxlength),
+		lowerLimit: Number(props.minlength),
 	})
 
 	// tabindex

package/src/components/VvSelect/VvSelect.vue

@@ -9,6 +9,7 @@
 	import VvIcon from '../VvIcon/VvIcon.vue'
 	import HintSlotFactory from '../common/HintSlot'
 	import { VvSelectProps, VvSelectEmits } from '.'
+	import type { Option } from '@/types/generic'
 
 	// props, emit and slots
 	const props = defineProps(VvSelectProps)
@@ -124,8 +125,12 @@
 		modelValue: props.modelValue,
 	}))
 
-	const { getOptionLabel, getOptionValue, getOptionDisabled } =
-		useOptions(props)
+	const {
+		getOptionLabel,
+		getOptionValue,
+		getOptionDisabled,
+		getOptionGrouped,
+	} = useOptions(props)
 
 	const localModelValue = computed({
 		get: () => {
@@ -138,6 +143,12 @@
 			emit('update:modelValue', newValue)
 		},
 	})
+
+	// Grouped options
+	const isGroup = (option: string | Option) => {
+		if (typeof option === 'string') return false
+		return option && option.options && option.options.length > 0
+	}
 </script>
 
 <template>
@@ -169,14 +180,31 @@
 					>
 						{{ placeholder }}
 					</option>
-					<option
-						v-for="(option, index) in options"
-						:key="index"
-						:disabled="getOptionDisabled(option)"
-						:value="getOptionValue(option)"
-					>
-						{{ getOptionLabel(option) }}
-					</option>
+					<template v-for="(option, index) in options">
+						<option
+							v-if="!isGroup(option)"
+							:key="index"
+							:disabled="getOptionDisabled(option)"
+							:value="getOptionValue(option)"
+						>
+							{{ getOptionLabel(option) }}
+						</option>
+						<optgroup
+							v-else
+							:key="`group-${index}`"
+							:disabled="getOptionDisabled(option)"
+							:label="getOptionLabel(option)"
+						>
+							<option
+								v-for="(item, i) in getOptionGrouped(option)"
+								:key="`group-${index}-item-${i}`"
+								:disabled="getOptionDisabled(item)"
+								:value="getOptionValue(item)"
+							>
+								{{ getOptionLabel(item) }}
+							</option>
+						</optgroup>
+					</template>
 				</select>
 				<VvIcon
 					v-if="hasIconAfter"

package/src/components/VvTextarea/VvTextarea.vue

@@ -61,8 +61,8 @@
 	// count
 	const { formatted: countFormatted } = useTextCount(localModelValue, {
 		mode: props.count,
-		upperLimit: props.maxlength,
-		lowerLimit: props.minlength,
+		upperLimit: Number(props.maxlength),
+		lowerLimit: Number(props.minlength),
 	})
 
 	// tabindex

package/src/composables/useOptions.ts

@@ -29,10 +29,16 @@ export function useOptions(props: any) {
 			: option[disabledKey.value]
 	}
 
+	const getOptionGrouped = (option: string | Option) => {
+	if (typeof option !== 'object' && option !== null) return []
+		return option.options
+	}
+
 	return {
 		options,
 		getOptionLabel,
 		getOptionValue,
 		getOptionDisabled,
+		getOptionGrouped
 	}
 }

package/src/directives/index.ts

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

package/src/directives/v-contextmenu.ts

@@ -0,0 +1,40 @@
+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/icons.ts

@@ -4,4 +4,4 @@ import simple from './assets/icons/simple.json'
 
 export default [normal, detailed, simple]
 
-export { normal }
+export { normal, detailed, simple }

package/src/props/index.ts

@@ -235,6 +235,16 @@ export const DropdownProps = {
 			)
 		},
 	},
+	/**
+	 * Dropdown strategy
+	 */
+	strategy: {
+		type: String as PropType<'fixed' | 'absolute'>,
+		default: 'absolute',
+		validator: (value: 'fixed' | 'absolute') => {
+			return ['fixed', 'absolute'].includes(value)
+		},
+	},
 	/**
 	 * Dropdown show / hide transition name
 	 */
@@ -362,14 +372,14 @@ export const InputTextareaProps = {
 	 * 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,
+	minlength: [String, 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,
+	maxlength: [String, Number],
 	/**
 	 * Input / Textarea placeholder
 	 * Text that appears in the form control when it has no value set

package/src/resolvers/unplugin.ts

@@ -54,8 +54,9 @@ export const getStyleNames = function (kebabName: string) {
 	if (kebabName === 'vv-combobox') {
 		return [
 			'vv-select',
-			'vv-dropdown',
 			'vv-dropdown-option',
+			'vv-dropdown-optgroup',
+			'vv-dropdown',
 			'vv-dropdown-action',
 		]
 	}

package/src/stories/Dropdown/DropdownContextmenuDirective.stories.mdx

@@ -0,0 +1,41 @@
+import { ref } from 'vue'
+import { Meta, Story, Canvas } from '@storybook/addon-docs'
+import { defaultArgs, argTypes } from './Dropdown.settings'
+import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
+import VvDropdownAction from '@/components/VvDropdown/VvDropdownAction.vue'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+
+<Meta title="Directives/Contextmenu" args={defaultArgs} argTypes={argTypes} />
+
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { VvDropdown, VvDropdownAction, VvIcon },
+	setup() {
+		const dropdownEl = ref(null)
+		return { args, dropdownEl }
+	},
+	template: /* html */ `
+		<div v-contextmenu="dropdownEl" class="w-full h-320 bg-surface-1 flex items-center justify-center">
+			<div class="text-word-2 text-18 uppercase w-150 text-center">Right click context menu</div>
+		</div>
+		<vv-dropdown v-bind="args" ref="dropdownEl">
+			<template #items>
+				<vv-dropdown-action>
+					<vv-icon name="add" /> Create
+				</vv-dropdown-action>
+				<vv-dropdown-action>
+					<vv-icon name="edit" /> Update
+				</vv-dropdown-action>
+				<vv-dropdown-action>
+					<vv-icon name="trash" /> Delete
+				</vv-dropdown-action>
+			</template>
+		</vv-dropdown>
+	`,
+})
+
+<Canvas>
+	<Story name="Default" args={{ placement: 'bottom-start' }}>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/Tooltip/TooltipDirective.stories.mdx

@@ -5,7 +5,7 @@ import { defaultArgs, argTypes } from './Tooltip.settings'
 import { defaultTest } from './Tooltip.test'
 
 <Meta
-	title="Components/Tooltip/Directive"
+	title="Directives/Tooltip"
 	component={VvTooltip}
 	args={defaultArgs}
 	argTypes={argTypes}

package/src/stories/argTypes.ts

@@ -298,6 +298,16 @@ export const DropdownArgTypes = {
 			defaultValue: { summary: 'bottom' },
 		},
 	},
+	strategy: {
+		description: 'Dropdown strategy',
+		options: ['fixed', 'absolute'],
+		control: {
+			type: 'select',
+		},
+		table: {
+			defaultValue: { summary: 'absolute' },
+		},
+	},
 	transitionName: {
 		description: 'Dropdown show / hide transition name',
 		control: {

package/src/types/generic.d.ts

@@ -1,5 +1,6 @@
 export type Nullable<T> = T | null | undefined
 
 export type Option = {
-	[key: string]: unknown
+	options?: Option[],
+	[key: string]: unknown,
 }