@volverjs/ui-vue 0.0.3-beta.4 → 0.0.4

package/src/stories/argTypes.ts

@@ -1,4 +1,5 @@
 import normal from '@/assets/icons/normal.json'
+import { Placement, Position, Side } from '@/constants'
 
 export const ValidArgTypes = {
 	valid: {
@@ -110,12 +111,12 @@ export const IconArgTypes = {
 	},
 	iconPosition: {
 		description: 'VvIcon position',
-		options: ['', 'left', 'right'],
+		options: ['', ...Object.values(Position)],
 		control: {
 			type: 'select',
 		},
 		table: {
-			defaultValue: { summary: 'right' },
+			defaultValue: { summary: Position.before },
 		},
 	},
 }
@@ -158,6 +159,20 @@ export const OptionsArgTypes = {
 			},
 		},
 	},
+	disabledKey: {
+		type: {
+			summary: ['string', 'function'],
+		},
+		description: 'Key of disabled in option object',
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'disabled',
+			},
+		},
+	},
 }
 
 export const CountArgTypes = {
@@ -272,6 +287,140 @@ export const IdNameArgTypes = {
 	},
 }
 
+export const DropdownArgTypes = {
+	placement: {
+		description: 'Dropdown placement',
+		options: [...Object.values(Placement), ...Object.values(Side)],
+		control: {
+			type: 'select',
+		},
+		table: {
+			defaultValue: { summary: 'bottom' },
+		},
+	},
+	transitionName: {
+		description: 'Dropdown show / hide transition name',
+		control: {
+			type: 'text',
+		},
+	},
+	offset: {
+		description: 'Offset of the dropdown from the trigger',
+		control: {
+			type: 'number',
+		},
+		table: {
+			defaultValue: {
+				summary: 0,
+			},
+			type: {
+				summary: ['number', 'string', 'object'],
+			},
+		},
+	},
+	shift: {
+		description:
+			'Move dropdown to the side if there is no space in the default position',
+		control: {
+			type: 'boolean',
+		},
+		table: {
+			defaultValue: {
+				summary: true,
+			},
+			type: {
+				summary: ['boolean', 'object'],
+			},
+		},
+	},
+	flip: {
+		description:
+			'Flip dropdown position if there is no space in the default position',
+		control: {
+			type: 'boolean',
+		},
+		table: {
+			defaultValue: {
+				summary: true,
+			},
+			type: {
+				summary: ['boolean', 'object'],
+			},
+		},
+	},
+	size: {
+		description:
+			'Change the size of the dropdown to not overflow the viewport',
+		control: {
+			type: 'object',
+		},
+		table: {
+			defaultValue: {
+				summary: '{ "padding": 10 }',
+			},
+			type: {
+				summary: ['boolean', 'object'],
+			},
+		},
+	},
+	autoPlacement: {
+		description: 'Automatically change the position of the dropdown',
+		control: {
+			type: 'boolean',
+		},
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+			type: {
+				summary: ['boolean', 'object'],
+			},
+		},
+	},
+	arrow: {
+		description: 'Add arrow to the dropdown',
+		control: {
+			type: 'boolean',
+		},
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+			type: {
+				summary: 'boolean',
+			},
+		},
+	},
+	autoClose: {
+		description: 'Close dropdown on click outside',
+		control: {
+			type: 'boolean',
+		},
+		table: {
+			defaultValue: {
+				summary: true,
+			},
+			type: {
+				summary: 'boolean',
+			},
+		},
+	},
+	triggerWidth: {
+		description: 'Set dropdown width to the same as the trigger',
+		control: {
+			type: 'boolean',
+		},
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+			type: {
+				summary: 'boolean',
+			},
+		},
+	},
+}
+
 export const UnselectableArgTypes = {
 	unselectable: {
 		type: 'boolean',
@@ -284,7 +433,7 @@ export const UnselectableArgTypes = {
 	},
 }
 
-export const FloatingArgTypes = {
+export const FloatingLabelArgTypes = {
 	floating: {
 		type: 'boolean',
 		description: 'If true the label will be floating',
@@ -340,7 +489,7 @@ export const InputTextareaArgTypes = {
 	...CountArgTypes,
 	...DebounceArgTypes,
 	...IconArgTypes,
-	...FloatingArgTypes,
+	...FloatingLabelArgTypes,
 	minlength: {
 		type: 'number',
 		description:

package/src/types/floating-ui.d.ts

@@ -0,0 +1,7 @@
+import type { flip, autoPlacement, shift, offset, size } from '@floating-ui/vue'
+
+export type AutoPlacementOptions = Parameters<typeof autoPlacement>[0]
+export type FlipOptions = Parameters<typeof flip>[0]
+export type ShiftOptions = Parameters<typeof shift>[0]
+export type OffsetOptions = Parameters<typeof offset>[0]
+export type SizeOptions = Parameters<typeof size>[0]

package/src/types/generic.d.ts

@@ -2,5 +2,4 @@ export type Nullable<T> = T | null | undefined
 
 export type Option = {
 	[key: string]: unknown
-	disabled?: boolean
 }

package/src/types/group.d.ts

@@ -0,0 +1,37 @@
+import type { Ref } from 'vue'
+
+/**
+ * State shared for a group of elements
+ */
+export default interface GroupState {
+	// The key of the group
+	[itemKey: string]: Ref<unknown> | unknown | undefined
+	key: string | number | symbol
+}
+
+/**
+ * State shared in a group of inputs
+ */
+export interface InputGroupState extends GroupState {
+	readonly: Ref<boolean>
+}
+
+/**
+ * State shared in a group of buttons
+ */
+export interface ButtonGroupState extends GroupState {
+	modelValue: Ref<string | Array<string> | undefined>
+	disabled: Ref<boolean>
+	toggle: Ref<boolean>
+	multiple: Ref<boolean>
+	unselectable: Ref<boolean>
+	itemModifiers?: Ref<string | Array<string> | undefined>
+}
+
+/**
+ * State shared in a group of accordions
+ */
+export interface AccordionGroupState extends GroupState {
+	collapse: Ref<boolean>
+	modifiers: Ref<Array<string> | string | undefined>
+}

package/src/utils/ObjectUtilities.ts

@@ -225,7 +225,10 @@ export function propsToObject(props: any) {
 				return accumulator
 			}
 			if ('default' in props[key]) {
-				accumulator[key] = props[key].default
+				accumulator[key] =
+					typeof props[key].default === 'function'
+						? props[key].default()
+						: props[key].default
 				return accumulator
 			}
 			if (isFunction(props[key])) {

package/dist/composables/group/types/IAccordionGroupState.d.ts

@@ -1,9 +0,0 @@
-import type { Ref } from 'vue';
-import type IGroupState from './IGroupState';
-/**
- * State shared in a group of accordions
- */
-export default interface IAccordionGroupState extends IGroupState {
-    collapse: Ref<boolean>;
-    modifiers: Ref<Array<string> | string | undefined>;
-}

package/dist/composables/group/types/IButtonGroupState.d.ts

@@ -1,13 +0,0 @@
-import type { Ref } from 'vue';
-import type IGroupState from './IGroupState';
-/**
- * State shared in a group of buttons
- */
-export default interface IButtonGroupState extends IGroupState {
-    modelValue: Ref<string | Array<string> | undefined>;
-    disabled: Ref<boolean>;
-    toggle: Ref<boolean>;
-    multiple: Ref<boolean>;
-    unselectable: Ref<boolean>;
-    itemModifiers?: Ref<string | Array<string> | undefined>;
-}

package/dist/composables/group/types/IGroupState.d.ts

@@ -1,8 +0,0 @@
-import type { Ref } from 'vue';
-/**
- * State shared for a group of elements
- */
-export default interface IGroupState {
-    [itemKey: string]: Ref<unknown> | string | undefined;
-    key: string;
-}

package/dist/composables/group/types/IInputGroup.d.ts

@@ -1,8 +0,0 @@
-import type { Ref } from 'vue';
-import type IGroupState from './IGroupState';
-/**
- * State shared in a group of inputs
- */
-export interface IInputGroupState extends IGroupState {
-    readonly: Ref<boolean>;
-}

package/dist/composables/useComponentIcons.d.ts

@@ -1,27 +0,0 @@
-import type { Slot, Ref } from 'vue';
-interface ComponentIconProps {
-    icon: Ref<string>;
-    iconPosition: Ref<string>;
-}
-interface ComponentIconSlots {
-    iconLeft?: Slot | undefined;
-    iconRight?: Slot | undefined;
-    iconTop?: Slot | undefined;
-    iconBottom?: Slot | undefined;
-}
-export declare function useComponentIcons(props: ComponentIconProps, slots: ComponentIconSlots): {
-    icon: Ref<string>;
-    iconPosition: Ref<string>;
-    hasIconLeft: import("vue").ComputedRef<boolean>;
-    hasIconRight: import("vue").ComputedRef<boolean>;
-    hasIconTop: import("vue").ComputedRef<boolean>;
-    hasIconBottom: import("vue").ComputedRef<boolean>;
-};
-export declare function useComponentIcon(icon: Ref<string | object | undefined> | undefined, iconPosition: Ref<string>, slots?: ComponentIconSlots): {
-    hasIcon: import("vue").ComputedRef<object | undefined>;
-    hasIconLeft: import("vue").ComputedRef<boolean>;
-    hasIconRight: import("vue").ComputedRef<boolean>;
-    hasIconTop: import("vue").ComputedRef<boolean>;
-    hasIconBottom: import("vue").ComputedRef<boolean>;
-};
-export {};

package/src/composables/group/types/IAccordionGroupState.ts

@@ -1,10 +0,0 @@
-import type { Ref } from 'vue'
-import type IGroupState from './IGroupState'
-
-/**
- * State shared in a group of accordions
- */
-export default interface IAccordionGroupState extends IGroupState {
-	collapse: Ref<boolean>
-	modifiers: Ref<Array<string> | string | undefined>
-}

package/src/composables/group/types/IButtonGroupState.ts

@@ -1,14 +0,0 @@
-import type { Ref } from 'vue'
-import type IGroupState from './IGroupState'
-
-/**
- * State shared in a group of buttons
- */
-export default interface IButtonGroupState extends IGroupState {
-	modelValue: Ref<string | Array<string> | undefined>
-	disabled: Ref<boolean>
-	toggle: Ref<boolean>
-	multiple: Ref<boolean>
-	unselectable: Ref<boolean>
-	itemModifiers?: Ref<string | Array<string> | undefined>
-}

package/src/composables/group/types/IGroupState.ts

@@ -1,10 +0,0 @@
-import type { Ref } from 'vue'
-
-/**
- * State shared for a group of elements
- */
-export default interface IGroupState {
-	[itemKey: string]: Ref<unknown> | string | undefined
-	// The key of the group
-	key: string
-}

package/src/composables/group/types/IInputGroup.ts

@@ -1,9 +0,0 @@
-import type { Ref } from 'vue'
-import type IGroupState from './IGroupState'
-
-/**
- * State shared in a group of inputs
- */
-export interface IInputGroupState extends IGroupState {
-	readonly: Ref<boolean>
-}

package/src/composables/useComponentIcons.ts

@@ -1,96 +0,0 @@
-import type { Slot, Ref } from 'vue'
-
-interface ComponentIconProps {
-	icon: Ref<string>
-	iconPosition: Ref<string>
-}
-
-interface ComponentIconSlots {
-	iconLeft?: Slot | undefined
-	iconRight?: Slot | undefined
-	iconTop?: Slot | undefined
-	iconBottom?: Slot | undefined
-}
-
-export function useComponentIcons(
-	props: ComponentIconProps,
-	slots: ComponentIconSlots,
-) {
-	const { icon, iconPosition } = props
-
-	const hasIconLeft = computed(
-		() =>
-			!!((icon.value && iconPosition.value === 'left') || slots.iconLeft),
-	)
-	const hasIconRight = computed(
-		() =>
-			!!(
-				(icon.value && iconPosition.value === 'right') ||
-				slots.iconRight
-			),
-	)
-	const hasIconTop = computed(
-		() => !!((icon.value && iconPosition.value === 'top') || slots.iconTop),
-	)
-	const hasIconBottom = computed(
-		() =>
-			!!(
-				(icon.value && iconPosition.value === 'bottom') ||
-				slots.iconBottom
-			),
-	)
-
-	return {
-		icon,
-		iconPosition,
-		hasIconLeft,
-		hasIconRight,
-		hasIconTop,
-		hasIconBottom,
-	}
-}
-
-export function useComponentIcon(
-	icon: Ref<string | object | undefined> | undefined,
-	iconPosition: Ref<string>,
-	slots?: ComponentIconSlots,
-) {
-	const hasIconLeft = computed(
-		() =>
-			!!(
-				(icon?.value && iconPosition.value === 'left') ||
-				slots?.iconLeft
-			),
-	)
-	const hasIconRight = computed(
-		() =>
-			!!(
-				(icon?.value && iconPosition.value === 'right') ||
-				slots?.iconRight
-			),
-	)
-	const hasIconTop = computed(
-		() =>
-			!!((icon?.value && iconPosition.value === 'top') || slots?.iconTop),
-	)
-	const hasIconBottom = computed(
-		() =>
-			!!(
-				(icon?.value && iconPosition.value === 'bottom') ||
-				slots?.iconBottom
-			),
-	)
-	const hasIcon = computed(() => {
-		if (typeof icon?.value === 'string') {
-			return { name: icon?.value }
-		}
-		return icon?.value
-	})
-	return {
-		hasIcon,
-		hasIconLeft,
-		hasIconRight,
-		hasIconTop,
-		hasIconBottom,
-	}
-}

package/src/stories/Dropdown/DropdownOptions.stories.mdx

@@ -1,96 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
-import { Template } from './Dropdown.stories.mdx'
-import { defaultArgs, argTypes } from './Dropdown.settings'
-import { defaultTest } from './Dropdown.test'
-
-<Meta
-	title="Components/Dropdown/Options"
-	component={VvDropdown}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-<Canvas>
-	<Story
-		name="Array of Objects"
-		play={defaultTest}
-		argTypes={{
-			options: {
-				...argTypes.options,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		args={{
-			options: [
-				{ value: 'first', label: 'First' },
-				{ value: 'second', label: 'Second' },
-				{ value: 'third', label: 'Third' },
-			],
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Option label key"
-		play={defaultTest}
-		args={{
-			labelKey: 'name',
-			options: [
-				{ value: 'first', name: 'First' },
-				{ value: 'second', name: 'Second' },
-				{ value: 'third', name: 'Third' },
-			],
-		}}
-		argTypes={{
-			options: {
-				...argTypes.options,
-				control: {
-					disable: true,
-				},
-			},
-			labelKey: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Option value key"
-		play={defaultTest}
-		args={{
-			valueKey: 'id',
-			options: [
-				{ id: 'first', label: 'First' },
-				{ id: 'second', label: 'Second' },
-				{ id: 'third', label: 'Third' },
-			],
-		}}
-		argTypes={{
-			options: {
-				...argTypes.options,
-				control: {
-					disable: true,
-				},
-			},
-			valueKey: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>