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

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>