@volverjs/ui-vue 0.0.10-beta.4 → 0.0.10-beta.41

package/src/components/VvTextarea/index.ts

@@ -2,49 +2,49 @@ import type { ExtractPropTypes } from 'vue'
 import { InputTextareaProps } from '../../props'
 
 export const WRAP = {
-	hard: 'hard',
-	soft: 'soft',
+    hard: 'hard',
+    soft: 'soft',
 }
 
 export const SPELLCHECK = {
-	true: true,
-	false: false,
-	default: 'default',
+    true: true,
+    false: false,
+    default: 'default',
 }
 
 export const VvTextareaEvents = ['update:modelValue', 'focus', 'blur', 'keyup']
 
 export const VvTextareaProps = {
-	...InputTextareaProps,
-	/**
-	 * Textarea value
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#value
-	 */
-	modelValue: String,
-	/**
-	 * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is 20.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#cols
-	 */
-	cols: { type: [String, Number], default: 20 },
-	/**
-	 * The number of visible text lines for the control. If it is specified, it must be a positive integer. If it is not specified, the default value is 2.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#rows
-	 */
-	rows: { type: [String, Number], default: 2 },
-	/**
-	 * Indicates how the control should wrap the value for form submission.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap
-	 */
-	wrap: { type: String, default: WRAP.soft },
-	/**
-	 * Specifies whether the <textarea> is subject to spell checking by the underlying browser/OS.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap
-	 */
-	spellcheck: { type: [Boolean, String], default: SPELLCHECK.default },
-	/**
-	 * If true, the textarea will be resizable
-	 */
-	resizable: Boolean,
+    ...InputTextareaProps,
+    /**
+     * Textarea value
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#value
+     */
+    modelValue: String,
+    /**
+     * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is 20.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#cols
+     */
+    cols: { type: [String, Number], default: 20 },
+    /**
+     * The number of visible text lines for the control. If it is specified, it must be a positive integer. If it is not specified, the default value is 2.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#rows
+     */
+    rows: { type: [String, Number], default: 2 },
+    /**
+     * Indicates how the control should wrap the value for form submission.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap
+     */
+    wrap: { type: String, default: WRAP.soft },
+    /**
+     * Specifies whether the <textarea> is subject to spell checking by the underlying browser/OS.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap
+     */
+    spellcheck: { type: [Boolean, String], default: SPELLCHECK.default },
+    /**
+     * If true, the textarea will be resizable
+     */
+    resizable: Boolean,
 }
 
 export type VvTextareaPropsTypes = ExtractPropTypes<typeof VvTextareaProps>

package/src/components/VvTooltip/VvTooltip.vue

@@ -1,23 +1,29 @@
 <script setup lang="ts">
-	import { VvTooltipProps } from '.'
+import { VvTooltipProps } from '.'
 
-	const props = defineProps(VvTooltipProps)
-	const { modifiers } = toRefs(props)
+const props = defineProps(VvTooltipProps)
+const { modifiers } = toRefs(props)
 
-	// styles
-	const bemCssClasses = useModifiers(
-		'vv-tooltip',
-		modifiers,
-		computed(() => ({
-			[props.position]: true,
-		})),
-	)
+// styles
+const bemCssClasses = useModifiers(
+    'vv-tooltip',
+    modifiers,
+    computed(() => ({
+        [props.position]: true,
+    })),
+)
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvTooltip',
+}
 </script>
 
 <template>
-	<span :class="bemCssClasses" role="tooltip" inert>
-		<slot>
-			{{ value }}
-		</slot>
-	</span>
+    <span :class="bemCssClasses" role="tooltip" inert>
+        <slot>
+            {{ value }}
+        </slot>
+    </span>
 </template>

package/src/components/VvTooltip/index.ts

@@ -3,16 +3,16 @@ import { Side } from '../../constants'
 import { ModifiersProps } from '../../props'
 
 export const VvTooltipProps = {
-	...ModifiersProps,
-	/**
-	 * Define the tooltip position
-	 * @default Side.bottom
-	 */
-	position: {
-		type: String as PropType<`${Side}`>,
-		default: Side.bottom,
-	},
-	value: {
-		type: String,
-	},
+    ...ModifiersProps,
+    /**
+     * Define the tooltip position
+     * @default Side.bottom
+     */
+    position: {
+        type: String as PropType<`${Side}`>,
+        default: Side.bottom,
+    },
+    value: {
+        type: String,
+    },
 }

package/src/components/common/HintSlot.ts

@@ -1,175 +1,174 @@
-import type { ExtractPropTypes, Slots } from 'vue'
-import type { Ref } from 'vue'
+import type { ExtractPropTypes, Slots, Ref } from 'vue'
 
 /**
  * Merge array of string
  * @param {string[] | string} items
- * @returns {string}
+ * @returns {string} merged string
  */
 function joinLines(items: string[] | string | unknown[] | undefined) {
-	if (Array.isArray(items)) {
-		return items.filter((item) => isString(item)).join(' ')
-	}
-	return items
+    if (Array.isArray(items)) {
+        return items.filter(item => isString(item)).join(' ')
+    }
+    return items
 }
 
 export type HintSlotProps = Readonly<
 	ExtractPropTypes<{
-		hintLabel: {
-			type: StringConstructor
-			default: ''
-			required: true
-		}
-		modelValue: unknown
-		valid: BooleanConstructor
-		validLabel: (StringConstructor | ArrayConstructor)[]
-		invalid: BooleanConstructor
-		invalidLabel: (StringConstructor | ArrayConstructor)[]
-		loading: BooleanConstructor
-		loadingLabel: StringConstructor
+	    hintLabel: {
+	        type: StringConstructor
+	        default: ''
+	        required: true
+	    }
+	    modelValue: unknown
+	    valid: BooleanConstructor
+	    validLabel: (StringConstructor | ArrayConstructor)[]
+	    invalid: BooleanConstructor
+	    invalidLabel: (StringConstructor | ArrayConstructor)[]
+	    loading: BooleanConstructor
+	    loadingLabel: StringConstructor
 	}>
 >
 
 /**
  * Return a vue component (HintSlot) to render and manage hint, errors, valid, loading state and messages
- * @param {HintSlotProps} parentProps vue props
- * @param {Slots} parentSlots vue slots
+ * @param {HintSlotProps} propsOrRef vue props
+ * @param {Slots} slots vue slots
  * @returns {Component} vue component
  */
 export function HintSlotFactory(
-	propsOrRef: HintSlotProps | Ref<HintSlotProps>,
-	slots: Slots,
+    propsOrRef: HintSlotProps | Ref<HintSlotProps>,
+    slots: Slots,
 ) {
-	const props = computed(() => {
-		if (isRef(propsOrRef)) {
-			return propsOrRef.value
-		}
-		return propsOrRef
-	})
+    const props = computed(() => {
+        if (isRef(propsOrRef)) {
+            return propsOrRef.value
+        }
+        return propsOrRef
+    })
 
-	// label
-	const invalidLabel = computed(() => joinLines(props.value.invalidLabel))
-	const validLabel = computed(() => joinLines(props.value.validLabel))
-	const loadingLabel = computed(() => props.value.loadingLabel)
-	const hintLabel = computed(() => props.value.hintLabel)
+    // label
+    const invalidLabel = computed(() => joinLines(props.value.invalidLabel))
+    const validLabel = computed(() => joinLines(props.value.validLabel))
+    const loadingLabel = computed(() => props.value.loadingLabel)
+    const hintLabel = computed(() => props.value.hintLabel)
 
-	// type
-	const hasLoadingLabelOrSlot = computed(() =>
-		Boolean(props.value.loading && (slots.loading || loadingLabel.value)),
-	)
-	const hasInvalidLabelOrSlot = computed(
-		() =>
-			!hasLoadingLabelOrSlot.value &&
-			Boolean(
-				props.value.invalid && (slots.invalid || invalidLabel.value),
-			),
-	)
-	const hasValidLabelOrSlot = computed(
-		() =>
-			!hasLoadingLabelOrSlot.value &&
-			!hasInvalidLabelOrSlot.value &&
-			Boolean(props.value.valid && (slots.valid || validLabel.value)),
-	)
-	const hasHintLabelOrSlot = computed(
-		() =>
-			!hasLoadingLabelOrSlot.value &&
-			!hasInvalidLabelOrSlot.value &&
-			!hasValidLabelOrSlot.value &&
-			Boolean(slots.hint || hintLabel.value),
-	)
-	const isVisible = computed(
-		() =>
-			hasInvalidLabelOrSlot.value ||
-			hasValidLabelOrSlot.value ||
-			hasLoadingLabelOrSlot.value ||
-			hasHintLabelOrSlot.value,
-	)
-	const hintSlotScope = computed(() => ({
-		modelValue: props.value.modelValue,
-		valid: props.value.valid,
-		invalid: props.value.invalid,
-		loading: props.value.loading,
-	}))
-	// component
-	const HintSlot = defineComponent({
-		name: 'HintSlot',
-		props: {
-			tag: {
-				type: String,
-				default: 'small',
-			},
-		},
-		setup() {
-			return {
-				isVisible,
-				invalidLabel,
-				validLabel,
-				loadingLabel,
-				hintLabel,
-				hasInvalidLabelOrSlot,
-				hasValidLabelOrSlot,
-				hasLoadingLabelOrSlot,
-				hasHintLabelOrSlot,
-			}
-		},
-		render() {
-			if (this.isVisible) {
-				let role
-				if (this.hasInvalidLabelOrSlot) {
-					role = 'alert'
-				}
-				if (this.hasValidLabelOrSlot) {
-					role = 'status'
-				}
-				if (this.hasLoadingLabelOrSlot) {
-					return h(
-						this.tag,
-						{
-							role,
-						},
-						this.$slots.loading?.() ?? this.loadingLabel,
-					)
-				}
-				if (this.hasInvalidLabelOrSlot) {
-					return h(
-						this.tag,
-						{
-							role,
-						},
-						this.$slots.invalid?.() ??
-							this.$slots.invalid ??
-							this.invalidLabel,
-					)
-				}
-				if (this.hasValidLabelOrSlot) {
-					return h(
-						this.tag,
-						{
-							role,
-						},
-						this.$slots.valid?.() ?? this.validLabel,
-					)
-				}
-				return h(
-					this.tag,
-					{
-						role,
-					},
-					this.$slots.hint?.() ?? this.$slots.hint ?? this.hintLabel,
-				)
-			}
-			return null
-		},
-	})
+    // type
+    const hasLoadingLabelOrSlot = computed(() =>
+        Boolean(props.value.loading && (slots.loading || loadingLabel.value)),
+    )
+    const hasInvalidLabelOrSlot = computed(
+        () =>
+            !hasLoadingLabelOrSlot.value
+            && Boolean(
+			    props.value.invalid && (slots.invalid || invalidLabel.value),
+            ),
+    )
+    const hasValidLabelOrSlot = computed(
+        () =>
+            !hasLoadingLabelOrSlot.value
+            && !hasInvalidLabelOrSlot.value
+            && Boolean(props.value.valid && (slots.valid || validLabel.value)),
+    )
+    const hasHintLabelOrSlot = computed(
+        () =>
+            !hasLoadingLabelOrSlot.value
+            && !hasInvalidLabelOrSlot.value
+            && !hasValidLabelOrSlot.value
+            && Boolean(slots.hint || hintLabel.value),
+    )
+    const isVisible = computed(
+        () =>
+            hasInvalidLabelOrSlot.value
+            || hasValidLabelOrSlot.value
+            || hasLoadingLabelOrSlot.value
+            || hasHintLabelOrSlot.value,
+    )
+    const hintSlotScope = computed(() => ({
+        modelValue: props.value.modelValue,
+        valid: props.value.valid,
+        invalid: props.value.invalid,
+        loading: props.value.loading,
+    }))
+    // component
+    const HintSlot = defineComponent({
+        name: 'HintSlot',
+        props: {
+            tag: {
+                type: String,
+                default: 'small',
+            },
+        },
+        setup() {
+            return {
+                isVisible,
+                invalidLabel,
+                validLabel,
+                loadingLabel,
+                hintLabel,
+                hasInvalidLabelOrSlot,
+                hasValidLabelOrSlot,
+                hasLoadingLabelOrSlot,
+                hasHintLabelOrSlot,
+            }
+        },
+        render() {
+            if (this.isVisible) {
+                let role
+                if (this.hasInvalidLabelOrSlot) {
+                    role = 'alert'
+                }
+                if (this.hasValidLabelOrSlot) {
+                    role = 'status'
+                }
+                if (this.hasLoadingLabelOrSlot) {
+                    return h(
+                        this.tag,
+                        {
+                            role,
+                        },
+                        this.$slots.loading?.() ?? this.loadingLabel,
+                    )
+                }
+                if (this.hasInvalidLabelOrSlot) {
+                    return h(
+                        this.tag,
+                        {
+                            role,
+                        },
+                        this.$slots.invalid?.()
+                        ?? this.$slots.invalid
+                        ?? this.invalidLabel,
+                    )
+                }
+                if (this.hasValidLabelOrSlot) {
+                    return h(
+                        this.tag,
+                        {
+                            role,
+                        },
+                        this.$slots.valid?.() ?? this.validLabel,
+                    )
+                }
+                return h(
+                    this.tag,
+                    {
+                        role,
+                    },
+                    this.$slots.hint?.() ?? this.$slots.hint ?? this.hintLabel,
+                )
+            }
+            return null
+        },
+    })
 
-	return {
-		hasInvalidLabelOrSlot,
-		hasHintLabelOrSlot,
-		hasValidLabelOrSlot,
-		hasLoadingLabelOrSlot,
-		hintSlotScope,
-		HintSlot,
-	}
+    return {
+        hasInvalidLabelOrSlot,
+        hasHintLabelOrSlot,
+        hasValidLabelOrSlot,
+        hasLoadingLabelOrSlot,
+        hintSlotScope,
+        HintSlot,
+    }
 }
 
 export default HintSlotFactory

package/src/components/index.ts

@@ -2,6 +2,9 @@ export { default as VvAccordion } from './VvAccordion/VvAccordion.vue'
 export { default as VvAccordionGroup } from './VvAccordionGroup/VvAccordionGroup.vue'
 export { default as VvAction } from './VvAction/VvAction.vue'
 export { default as VvAlert } from './VvAlert/VvAlert.vue'
+export { default as VvAlertGroup } from './VvAlertGroup/VvAlertGroup.vue'
+export { default as VvAvatar } from './VvAvatar/VvAvatar.vue'
+export { default as VvAvatarGroup } from './VvAvatarGroup/VvAvatarGroup.vue'
 export { default as VvBadge } from './VvBadge/VvBadge.vue'
 export { default as VvBreadcrumb } from './VvBreadcrumb/VvBreadcrumb.vue'
 export { default as VvButton } from './VvButton/VvButton.vue'
@@ -12,9 +15,15 @@ export { default as VvCheckboxGroup } from './VvCheckboxGroup/VvCheckboxGroup.vu
 export { default as VvCombobox } from './VvCombobox/VvCombobox.vue'
 export { default as VvDialog } from './VvDialog/VvDialog.vue'
 export { default as VvDropdown } from './VvDropdown/VvDropdown.vue'
+export { default as VvDropdownAction } from './VvDropdown/VvDropdownAction.vue'
+export { default as VvDropdownItem } from './VvDropdown/VvDropdownItem.vue'
+export { default as VvDropdownOptgroup } from './VvDropdown/VvDropdownOptgroup.vue'
+export { default as VvDropdownOption } from './VvDropdown/VvDropdownOption.vue'
 export { default as VvIcon } from './VvIcon/VvIcon.vue'
 export { default as VvInputText } from './VvInputText/VvInputText.vue'
 export { default as VvNav } from './VvNav/VvNav.vue'
+export { default as VvNavItem } from './VvNav/VvNavItem.vue'
+export { default as VvNavSeparator } from './VvNav/VvNavSeparator.vue'
 export { default as VvProgress } from './VvProgress/VvProgress.vue'
 export { default as VvRadio } from './VvRadio/VvRadio.vue'
 export { default as VvRadioGroup } from './VvRadioGroup/VvRadioGroup.vue'
@@ -22,3 +31,4 @@ export { default as VvSelect } from './VvSelect/VvSelect.vue'
 export { default as VvTab } from './VvTab/VvTab.vue'
 export { default as VvTextarea } from './VvTextarea/VvTextarea.vue'
 export { default as VvTooltip } from './VvTooltip/VvTooltip.vue'
+export { default as VvInputFile } from './VvInputFile/VvInputFile.vue'