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

package/src/components/VvSelect/index.ts

@@ -1,69 +1,87 @@
+import type { MaybeElement } from '@vueuse/core'
 import {
-	ValidProps,
-	InvalidProps,
-	HintProps,
-	LoadingProps,
-	DisabledProps,
-	ReadonlyProps,
-	ModifiersProps,
-	TabindexProps,
-	OptionsProps,
-	IconProps,
-	IdNameProps,
-	FloatingLabelProps,
-	UnselectableProps,
-	AutofocusProps,
-	AutocompleteProps,
-	LabelProps,
+    ValidProps,
+    InvalidProps,
+    HintProps,
+    LoadingProps,
+    DisabledProps,
+    ReadonlyProps,
+    ModifiersProps,
+    TabindexProps,
+    OptionsProps,
+    IconProps,
+    IdNameProps,
+    FloatingLabelProps,
+    UnselectableProps,
+    AutofocusProps,
+    AutocompleteProps,
+    LabelProps,
 } from '../../props'
+import type { Option } from '../../types/generic'
+
+export type VvSelectEmits = {
+    'update:modelValue': [any]
+    'focus': [MaybeElement]
+    'blur': [MaybeElement]
+}
 
 export const VvSelectProps = {
-	...IdNameProps,
-	...AutofocusProps,
-	...AutocompleteProps,
-	...TabindexProps,
-	...ValidProps,
-	...InvalidProps,
-	...HintProps,
-	...LoadingProps,
-	...DisabledProps,
-	...ReadonlyProps,
-	...ModifiersProps,
-	...OptionsProps,
-	...IconProps,
-	...FloatingLabelProps,
-	...UnselectableProps,
-	...LabelProps,
-	/**
-	 * This Boolean attribute indicates that multiple options can be selected in the list.
-	 * If it is not specified, then only one option can be selected at a time.
-	 * When multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple
-	 */
-	multiple: Boolean,
-	/**
-	 * A Boolean attribute indicating that an option with a non-empty string value must be selected.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-required
-	 */
-	required: Boolean,
-	/**
-	 * If the control is presented as a scrolling list box (e.g. when multiple is specified),
-	 * this attribute represents the number of rows in the list that should be visible at one time.
-	 * Browsers are not required to present a select element as a scrolled list box. The default value is 0.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size
-	 */
-	size: [String, Number],
-	/**
-	 * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
-	 */
-	modelValue: {
-		type: [String, Number, Boolean, Object, Array],
-		default: undefined,
-	},
-	/**
-	 * Select placeholder
-	 */
-	placeholder: String,
+    ...IdNameProps,
+    ...AutofocusProps,
+    ...AutocompleteProps,
+    ...TabindexProps,
+    ...ValidProps,
+    ...InvalidProps,
+    ...HintProps,
+    ...LoadingProps,
+    ...DisabledProps,
+    ...ReadonlyProps,
+    ...ModifiersProps,
+    ...OptionsProps,
+    ...IconProps,
+    ...FloatingLabelProps,
+    ...UnselectableProps,
+    ...LabelProps,
+    /**
+     * This Boolean attribute indicates that multiple options can be selected in the list.
+     * If it is not specified, then only one option can be selected at a time.
+     * When multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple
+     */
+    multiple: Boolean,
+    /**
+     * A Boolean attribute indicating that an option with a non-empty string value must be selected.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-required
+     */
+    required: Boolean,
+    /**
+     * If the control is presented as a scrolling list box (e.g. when multiple is specified),
+     * this attribute represents the number of rows in the list that should be visible at one time.
+     * Browsers are not required to present a select element as a scrolled list box. The default value is 0.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size
+     */
+    size: [String, Number],
+    /**
+     * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
+     */
+    modelValue: {
+        type: [String, Number, Boolean, Object, Array],
+        default: undefined,
+    },
+    /**
+     * Select placeholder
+     */
+    placeholder: String,
 }
 
-export const VvSelectEmits = ['update:modelValue', 'focus', 'blur']
+// WARNING: This is a provisiaonal implementation, it may change in the future
+export function useVvSelectProps<T extends Option | string>() {
+    return {
+        ...VvSelectProps,
+        options: {
+            ...VvSelectProps.options,
+            type: Array as PropType<T[]>,
+            default: () => [],
+        },
+    }
+}

package/src/components/VvTab/VvTab.vue

@@ -1,77 +1,87 @@
 <script setup lang="ts">
-	import { VvTabProps, VvTabEvents } from '@/components/VvTab'
-	import VvNav from '@/components/VvNav/VvNav.vue'
-	import type { NavItemTab } from '@/types/nav'
+import { VvTabProps, VvTabEvents } from '@/components/VvTab'
+import VvNav from '@/components/VvNav/VvNav.vue'
+import type { NavItemTab } from '@/types/nav'
 
-	const props = defineProps(VvTabProps)
-	const emit = defineEmits(VvTabEvents)
-	const { modifiers, items } = toRefs(props)
-	const tabKeys = computed(() => {
-		return items.value.reduce<string[]>((acc, item) => {
-			if (item.tab) {
-				acc.push(item.tab)
-			}
-			return acc
-		}, [])
-	})
-	const localModelValue = ref<string | undefined>()
-	const activeTabKey = computed({
-		get: () => {
-			return (
-				props.modelValue || localModelValue.value || tabKeys.value?.[0]
-			)
-		},
-		set: (newValue) => {
-			localModelValue.value = newValue
-			emit('update:modelValue', newValue)
-		},
-	})
-	const hasNavModifiers = computed(() => {
-		return [
-			'tabs',
-			...(Array.isArray(props.navModifiers)
-				? props.navModifiers
-				: props.navModifiers?.split(' ') ?? []),
-		]
-	})
-	const onNavClick = (item: NavItemTab) => {
-		if (item.tab) {
-			activeTabKey.value = item.tab
-		}
-	}
-	const navItems = computed(() =>
-		props.items.map((item) => ({
-			current: item.tab === activeTabKey.value,
-			...item,
-		})),
-	)
+const props = defineProps(VvTabProps)
+const emit = defineEmits(VvTabEvents)
+const { modifiers, items } = toRefs(props)
+const tabKeys = computed(() => {
+    return items.value.reduce<string[]>((acc, item) => {
+        if (item.tab) {
+            acc.push(item.tab)
+        }
+        return acc
+    }, [])
+})
+const localModelValue = ref<string | undefined>()
+const activeTabKey = computed({
+    get: () => {
+        return (
+            props.modelValue || localModelValue.value || tabKeys.value?.[0]
+        )
+    },
+    set: (newValue) => {
+        localModelValue.value = newValue
+        emit('update:modelValue', newValue)
+    },
+})
+const hasNavModifiers = computed(() => {
+    return [
+        'tabs',
+        ...(Array.isArray(props.navModifiers)
+            ? props.navModifiers
+            : props.navModifiers?.split(' ') ?? []),
+    ]
+})
+function onNavClick(item: NavItemTab) {
+    if (item.tab) {
+        activeTabKey.value = item.tab
+    }
+}
+const navItems = computed(() =>
+    props.items.map(item => ({
+        current: item.tab === activeTabKey.value,
+        ...item,
+    })),
+)
 
-	// bem css classes
-	const bemCssClasses = useModifiers('vv-tab', modifiers)
+// bem css classes
+const bemCssClasses = useModifiers('vv-tab', modifiers)
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvTab',
+}
 </script>
 
 <template>
-	<div :class="bemCssClasses">
-		<!-- #region nav -->
-		<VvNav
-			v-bind="{
-				items: navItems,
-				modifiers: hasNavModifiers,
-			}"
-			@click="onNavClick"
-		/>
-		<!-- #endregion -->
+    <div :class="bemCssClasses">
+        <!-- #region nav -->
+        <VvNav
+            v-bind="{
+                items: navItems,
+                modifiers: hasNavModifiers,
+            }"
+            @click="onNavClick"
+        >
+            <template #item="{ item, data, index }">
+                <slot name="nav-item" v-bind="{ item, data, index }" />
+            </template>
+        </VvNav>
+        <!-- #endregion -->
 
-		<!-- #region panels -->
-		<template v-for="(item, index) in items" :key="index">
-			<article
-				v-if="item.tab"
-				:class="{ target: activeTabKey === item.tab }"
-				class="vv-tab__panel"
-			>
-				<slot :name="`panel::${item.tab}`" />
-			</article>
-		</template>
-		<!-- #endregion -->
-	</div>
+        <!-- #region panels -->
+        <template v-for="(item, index) in items" :key="index">
+            <article
+                v-if="item.tab"
+                :class="{ target: activeTabKey === item.tab }"
+                class="vv-tab__panel"
+            >
+                <slot :name="`panel::${item.tab}`" />
+            </article>
+        </template>
+        <!-- #endregion -->
+    </div>
 </template>

package/src/components/VvTab/index.ts

@@ -2,18 +2,18 @@ import { ModifiersProps } from '@/props'
 import type { NavItemTab } from '@/types/nav'
 
 export const VvTabProps = {
-	...ModifiersProps,
-	navModifiers: {
-		type: [String, Array] as PropType<string | string[]>,
-	},
-	modelValue: {
-		type: String,
-		default: '',
-	},
-	items: {
-		type: Array as PropType<NavItemTab[]>,
-		default: () => [],
-	},
+    ...ModifiersProps,
+    navModifiers: {
+        type: [String, Array] as PropType<string | string[]>,
+    },
+    modelValue: {
+        type: String,
+        default: '',
+    },
+    items: {
+        type: Array as PropType<NavItemTab[]>,
+        default: () => [],
+    },
 }
 
 export const VvTabEvents = ['update:modelValue']