@volverjs/ui-vue 0.0.1-beta.11 → 0.0.1-beta.12

package/src/components/VvBadge/VvBadge.ts

@@ -1,4 +1,6 @@
+import { ModifiersProps } from '@/props'
+
 export const VvBadgeProps = {
-	value: [String, Number],
-	color: String
+	...ModifiersProps,
+	value: [String, Number]
 }

package/src/components/VvBadge/VvBadge.vue

@@ -1,12 +1,17 @@
 <template>
-	<span class="vv-badge" :class="hasClass" role="status">{{ value }}</span>
+	<span :class="badgeClass" role="status">{{ value }}</span>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { useBemModifiers } from '@/composables/useModifiers'
+import { toRefs } from 'vue'
 import { VvBadgeProps } from './VvBadge'
 
 const props = defineProps(VvBadgeProps)
+const { modifiers } = toRefs(props)
 
-const hasClass = computed(() => (props.color ? `vv-badge--${props.color}` : ''))
+//Styles & bindings
+const { bemCssClasses: badgeClass } = useBemModifiers('vv-badge', {
+	modifiers
+})
 </script>

package/src/components/VvButton/VvButton.ts

@@ -1,3 +1,4 @@
+import { DisabledProps, ModifiersProps } from '@/props'
 import type { PropType, ExtractPropTypes } from 'vue'
 
 export enum ButtonIconPosition {
@@ -24,6 +25,8 @@ export enum ButtonTarget {
 export const VvButtonEvents = ['update:modelValue']
 
 export const VvButtonProps = {
+	...ModifiersProps,
+	...DisabledProps,
 	/**
 	 * Button icon
 	 */
@@ -73,44 +76,11 @@ export const VvButtonProps = {
 		type: String as PropType<ButtonTarget>,
 		validator: (value: string) => value in ButtonTarget
 	},
-	/**
-	 * Create block level button that span the full width of a parent.
-	 */
-	block: Boolean,
-	/**
-	 * Button active state.
-	 */
 	active: Boolean,
-	/**
-	 * Button rounded.
-	 */
-	rounded: Boolean,
-	/**
-	 * Button disabled
-	 */
-	disabled: Boolean,
-	/**
-	 * Button with min-width
-	 */
-	fullBleed: Boolean,
-	/**
-	 * Button action mode
-	 */
-	action: Boolean,
-	/**
-	 * Button action mode
-	 */
-	actionQuiet: Boolean,
 	/**
 	 * Button selected mode
 	 */
-	selected: Boolean,
-	/**
-	 * The variant of the button
-	 * @values
-	 * @defaultvalue default
-	 */
-	modifiers: [Array, String]
+	selected: Boolean
 }
 
 type _VvButtonPropsType = typeof VvButtonProps

package/src/components/VvButton/VvButton.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script setup lang="ts">
-import { useAttrs } from 'vue'
+import { useAttrs, useSlots } from 'vue'
 
 import { computed } from 'vue'
 import { v4 as uuidv4 } from 'uuid'
@@ -64,16 +64,12 @@ import { toButtonRefs } from './useButtonGroupProps'
 //Props, emits, attrs, slots
 const props = defineProps(VvButtonProps)
 const attrs = useAttrs()
+const slots = useSlots()
 
 //Data
 const btnName = attrs?.name || uuidv4()
 const {
 	modifiers,
-	action,
-	actionQuiet,
-	block,
-	rounded,
-	fullBleed,
 	iconPosition,
 	icon,
 	label,
@@ -128,12 +124,7 @@ const selected = computed(() => {
 const { bemCssClasses: btnClass } = useBemModifiers('vv-button', {
 	modifiers,
 	active,
-	action,
-	actionQuiet,
 	selected,
-	block,
-	rounded,
-	fullBleed,
 	disabled,
 	reverse: computed(() =>
 		[ButtonIconPosition.right, ButtonIconPosition.bottom].includes(
@@ -145,7 +136,7 @@ const { bemCssClasses: btnClass } = useBemModifiers('vv-button', {
 			iconPosition.value
 		)
 	),
-	iconOnly: computed(() => icon?.value && !label?.value)
+	iconOnly: computed(() => icon?.value && !label?.value && !slots['default'])
 })
 /**
  * Compute component properties

package/src/components/VvButton/useButtonGroupProps.ts

@@ -18,16 +18,13 @@ export function toButtonRefs(props: VvButtonPropsTypes) {
 		useInjectedGroupState<IButtonGroupState>(VV_BUTTON_GROUP)
 
 	//Local props
-	const { modifiers, fullBleed, iconPosition, icon, label, block, selected } =
-		toRefs(props)
+	const { iconPosition, icon, label, selected } = toRefs(props)
 
 	//Group based props
 	const modelValue = getGroupOrLocalRef('modelValue', props)
 	const disabled = getGroupOrLocalRef('disabled', props)
 	const toggle = getGroupOrLocalRef('toggle', props)
-	const rounded = getGroupOrLocalRef('rounded', props)
-	const action = getGroupOrLocalRef('action', props)
-	const actionQuiet = getGroupOrLocalRef('actionQuiet', props)
+	const modifiers = getGroupOrLocalRef('modifiers', props)
 
 	return {
 		//Group based props
@@ -36,14 +33,9 @@ export function toButtonRefs(props: VvButtonPropsTypes) {
 		toggle,
 		isInGroup,
 		group,
-		//Local props
 		modifiers,
-		action,
-		actionQuiet,
+		//Local props
 		selected,
-		block,
-		rounded,
-		fullBleed,
 		iconPosition,
 		icon,
 		label

package/src/components/VvButtonGroup/VvButtonGroup.ts

@@ -1,5 +1,8 @@
+import { DisabledProps, ModifiersProps } from '@/props'
+
 export const VvButtonGroupProps = {
-	disabled: { type: Boolean, default: false },
+	...ModifiersProps,
+	...DisabledProps,
 	/**
 	 * True = show buttons vertically
 	 */
@@ -12,22 +15,6 @@ export const VvButtonGroupProps = {
 	 * True = il button group si comporterà come un toggle, materrà attivo l'ultimo pulsante cliccato.
 	 */
 	toggle: { type: Boolean, default: false },
-	/**
-	 * True = display as block
-	 */
-	block: { type: Boolean, default: false },
-	/**
-	 * True = display btn-broup as rounded (first and last child .vv-button)
-	 */
-	rounded: { type: Boolean, default: false },
-	/**
-	 * Button action mode
-	 */
-	action: Boolean,
-	/**
-	 * Button action mode
-	 */
-	actionQuiet: Boolean,
 	/**
 	 * Active button (name)
 	 */

package/src/components/VvButtonGroup/VvButtonGroup.vue

@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import type IButtonGroupState from '@/composables/group/types/IButtonGroupState'
 
-import { toRefs } from 'vue'
+import { ref, toRefs } from 'vue'
 import { VvButtonGroupProps, VvButtonGroupEvents } from './VvButtonGroup'
 import { VV_BUTTON_GROUP } from '../../constants'
 
@@ -22,22 +22,13 @@ const props = defineProps(VvButtonGroupProps)
 
 //Data
 const modelValue = useVModel(props, 'modelValue', emit)
-const {
-	disabled,
-	vertical,
-	compact,
-	block,
-	rounded,
-	toggle,
-	action,
-	actionQuiet
-} = toRefs(props)
+const { disabled, vertical, compact, toggle, modifiers } = toRefs(props)
 
 //Computed
 const { bemCssClasses: btnGroupClass } = useBemModifiers('vv-button-group', {
+	modifiers,
 	vertical,
-	compact,
-	block
+	compact
 })
 
 // #region group
@@ -46,9 +37,7 @@ const groupState: IButtonGroupState = {
 	modelValue,
 	disabled,
 	toggle,
-	rounded,
-	action,
-	actionQuiet
+	modifiers: modifiers?.value ? modifiers : ref([])
 }
 useProvideGroupState(groupState)
 // #endregion group

package/src/components/VvSelect/VvSelect.ts

@@ -87,5 +87,9 @@ export const VvSelectProps = {
 	/**
 	 * Icon name of icon in right position
 	 */
-	iconRight: String
+	iconRight: String,
+	/**
+	 * Icon name of icon in right position
+	 */
+	native: Boolean
 }

package/src/components/VvSelect/VvSelect.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :id="id" :class="selectClasses">
+	<div v-if="!native" :id="id" :class="selectClasses">
 		<label v-if="label" for="select">{{ label }}</label>
 		<details
 			ref="dropdown"
@@ -35,6 +35,10 @@
 		</details>
 		<HintSlot class="vv-select__hint" />
 	</div>
+	<VvNativeSelect
+		v-else
+		v-bind="props"
+		@update:model-value="emit('update:modelValue', $event)" />
 </template>
 
 <script setup lang="ts">
@@ -47,9 +51,11 @@ import { VvSelectProps } from './VvSelect'
 import HintSlotFactory from '../common/HintSlot'
 import VvDropdown from '../VvDropdown/VvDropdown.vue'
 import { useBemModifiers } from '../../composables/useModifiers'
+import VvNativeSelect from '../VvNativeSelect/VvNativeSelect.vue'
 
 const props = defineProps(VvSelectProps)
 const slots = useSlots()
+
 const emit = defineEmits(['update:modelValue', 'change:search'])
 
 //Hint component

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

@@ -18,4 +18,8 @@ export default interface IButtonGroupState extends IGroupState {
 	 * True = gruppo di pulsanti è in modalità TOGGLE (come i radio buttons)
 	 */
 	toggle: Ref<boolean>
+	/**
+	 * add modifiers to buttons
+	 */
+	modifiers: Ref<Array<string> | string | undefined>
 }

package/src/props/index.ts

@@ -1,3 +1,5 @@
+import type { PropType } from 'vue'
+
 export const ValidProps = {
 	valid: Boolean,
 	validLabel: [String, Array]
@@ -22,7 +24,7 @@ export const ReadonlyProps = {
 }
 
 export const ModifiersProps = {
-	modifiers: [String, Array]
+	modifiers: [String, Array] as PropType<string | Array<string>>
 }
 
 export const HintProps = {

package/src/stories/Badge/BadgeColor.stories.mdx

@@ -14,7 +14,7 @@ By default color is `primary` and default options are: `black`, `danger`, `succe
 		{() => {
 			return {
 				components: { VvBadge },
-				template: `<vv-badge color="black" role="status" value="12" />`
+				template: `<vv-badge modifiers="black" role="status" value="12" />`
 			}
 		}}
 	</Story>
@@ -25,7 +25,7 @@ By default color is `primary` and default options are: `black`, `danger`, `succe
 		{() => {
 			return {
 				components: { VvBadge },
-				template: `<vv-badge color="danger" role="status" value="16" />`
+				template: `<vv-badge modifiers="danger" role="status" value="16" />`
 			}
 		}}
 	</Story>
@@ -36,7 +36,7 @@ By default color is `primary` and default options are: `black`, `danger`, `succe
 		{() => {
 			return {
 				components: { VvBadge },
-				template: `<vv-badge color="success" role="status" value="10" />`
+				template: `<vv-badge modifiers="success" role="status" value="10" />`
 			}
 		}}
 	</Story>
@@ -47,7 +47,7 @@ By default color is `primary` and default options are: `black`, `danger`, `succe
 		{() => {
 			return {
 				components: { VvBadge },
-				template: `<vv-badge color="warning" role="status" value="8" />`
+				template: `<vv-badge modifiers="warning" role="status" value="8" />`
 			}
 		}}
 	</Story>

package/src/stories/Badge/BadgeModifiers.stories.mdx

@@ -0,0 +1,65 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvBadge from '../../components/VvBadge/VvBadge.vue'
+import VvButton from '../../components/VvButton/VvButton.vue'
+
+<Meta title="Components/Badge/Props/modifiers" />
+
+# VvBadge rounded
+
+Let's define a story for our `rounded` badge.
+
+<Canvas>
+	<Story name="rounded">
+		{() => {
+			return {
+				components: { VvBadge, VvButton },
+				template: `<vv-badge modifiers="rounded" value="99+" />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+# VvBadge outline
+
+Let's define a story for our `outline` badge.
+
+<Canvas>
+	<Story name="outline">
+		{() => {
+			return {
+				components: { VvBadge, VvButton },
+				template: `<vv-badge modifiers="outline" value="99+" />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+# VvBadge ghost
+
+Let's define a story for our `ghost` badge.
+
+<Canvas>
+	<Story name="ghost">
+		{() => {
+			return {
+				components: { VvBadge, VvButton },
+				template: `<vv-badge modifiers="ghost" value="99+" />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+# VvBadge small
+
+Let's define a story for our `sm` badge.
+
+<Canvas>
+	<Story name="sm">
+		{() => {
+			return {
+				components: { VvBadge, VvButton },
+				template: `<vv-badge modifiers="sm" value="99+" />`
+			}
+		}}
+	</Story>
+</Canvas>

package/src/stories/Button/ButtonActive.stories.mdx

@@ -0,0 +1,27 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvButton from '../../components/VvButton/VvButton.vue'
+
+<Meta title="Components/Button/Props/active" />
+
+## Active
+
+Let's define a story for our `active` button.
+
+<Canvas>
+	<Story
+		name="active"
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: 'vv-button--active'
+			})
+		}}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Active" active />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source language="jsx" code={'<vv-button label="Active" active />'} />

package/src/stories/Button/ButtonDisabled.stories.mdx

@@ -0,0 +1,28 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvButton from '../../components/VvButton/VvButton.vue'
+import { testButton } from './Button.test'
+
+<Meta title="Components/Button/Props/disabled" />
+
+## Disabled
+
+Let's define a story for our `disabled` button.
+
+<Canvas>
+	<Story
+		name="disabled"
+		play={async (ctx) => {
+			testButton(ctx, {
+				isClickDisabled: true
+			})
+		}}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Disabled" disabled />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source language="jsx" code={'<vv-button label="Disabled" disabled />'} />

package/src/stories/Button/ButtonIconPosition.stories.mdx

@@ -1,7 +1,6 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
 import VvButton from '../../components/VvButton/VvButton.vue'
 import { within, userEvent } from '@storybook/testing-library'
-import { buttonTest, classTest } from './test.js'
 import { testButton } from './Button.test'
 
 <Meta title="Components/Button/Props/icon-position" />