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

package/src/components/VvCombobox/VvCombobox.vue

@@ -193,7 +193,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 +237,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 +296,7 @@
 		id: hasDropdownId.value,
 		reference: wrapperEl.value,
 		placement: props.placement,
+		strategy: props.strategy,
 		transitionName: props.transitionName,
 		offset: props.offset,
 		shift: props.shift,

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/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/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/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/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: {