@volverjs/ui-vue 0.0.10-beta.2 → 0.0.10-beta.21

package/src/props/index.ts

@@ -1,12 +1,13 @@
 import type { PropType } from 'vue'
-import type { Option } from '../types/generic'
+import type { Option } from '@/types/generic'
+import type { NavItem } from '@/types/nav'
 import type {
 	AutoPlacementOptions,
 	FlipOptions,
 	OffsetOptions,
 	ShiftOptions,
 	SizeOptions,
-} from '../types/floating-ui'
+} from '@/types/floating-ui'
 import {
 	Placement,
 	Strategy,
@@ -14,7 +15,9 @@ import {
 	Side,
 	AnchorTarget,
 	ButtonType,
-} from '../constants'
+	ActionTag,
+} from '@/constants'
+import type { VvIconProps } from '@/components/VvIcon'
 
 export const LinkProps = {
 	/**
@@ -33,6 +36,7 @@ export const LinkProps = {
 	 */
 	target: {
 		type: String as PropType<`${AnchorTarget}`>,
+		default: undefined,
 		validator: (value: AnchorTarget) =>
 			Object.values(AnchorTarget).includes(value),
 	},
@@ -49,29 +53,35 @@ export const ValidProps = {
 	/**
 	 * Valid status
 	 */
-	valid: Boolean,
+	valid: { type: Boolean, default: false },
 	/**
 	 * Valid label
 	 */
-	validLabel: [String, Array],
+	validLabel: { type: [String, Array], default: undefined },
 }
 
 export const InvalidProps = {
 	/**
 	 * Invalid status
 	 */
-	invalid: Boolean,
+	invalid: {
+		type: Boolean,
+		default: false,
+	},
 	/**
 	 * Invalid label
 	 */
-	invalidLabel: [String, Array],
+	invalidLabel: { type: [String, Array], default: undefined },
 }
 
 export const LoadingProps = {
 	/**
 	 * Loading status
 	 */
-	loading: Boolean,
+	loading: {
+		type: Boolean,
+		default: false,
+	},
 	/**
 	 * Loading label
 	 */
@@ -85,49 +95,80 @@ export const DisabledProps = {
 	/**
 	 * Whether the form control is disabled
 	 */
-	disabled: Boolean,
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
 }
 
 export const SelectedProps = {
 	/**
 	 * Whether the item is selected
 	 */
-	selected: Boolean,
+	selected: {
+		type: Boolean,
+		default: false,
+	},
 }
 
 export const ActiveProps = {
 	/**
 	 * Whether the item is active
 	 */
-	active: Boolean,
+	active: {
+		type: Boolean,
+		default: false,
+	},
+}
+
+export const CurrentProps = {
+	/**
+	 * Whether the item is current
+	 */
+	current: {
+		type: Boolean,
+		default: false,
+	},
 }
 
 export const PressedProps = {
 	/**
 	 * Whether the item is pressed
 	 */
-	pressed: Boolean,
+	pressed: {
+		type: Boolean,
+		default: false,
+	},
 }
 
 export const LabelProps = {
 	/**
 	 * The item label
 	 */
-	label: [String, Number],
+	label: {
+		type: [String, Number],
+		default: undefined,
+	},
 }
 
 export const ReadonlyProps = {
 	/**
 	 * The value is not editable
 	 */
-	readonly: Boolean,
+	readonly: {
+		type: Boolean,
+		default: false,
+	},
 }
 
 export const ModifiersProps = {
 	/**
 	 * Component BEM modifiers
 	 */
-	modifiers: [String, Array] as PropType<string | string[]>,
+	modifiers: {
+		type: [String, Array] as PropType<string | string[]>,
+		default: undefined,
+	},
 }
 
 export const HintProps = {
@@ -172,7 +213,10 @@ export const DebounceProps = {
 	/**
 	 * Milliseconds to wait before emitting the input event
 	 */
-	debounce: [Number, String],
+	debounce: {
+		type: [Number, String],
+		default: undefined,
+	},
 }
 
 export const IconProps = {
@@ -180,7 +224,10 @@ export const IconProps = {
 	 * VvIcon name or props
 	 * @see VVIcon
 	 */
-	icon: { type: [String, Object] },
+	icon: {
+		type: [String, Object] as PropType<string | VvIconProps>,
+		default: undefined,
+	},
 	/**
 	 * VvIcon position
 	 */
@@ -204,7 +251,10 @@ export const FloatingLabelProps = {
 	/**
 	 * If true the label will be floating
 	 */
-	floating: Boolean,
+	floating: {
+		type: Boolean,
+		default: false,
+	},
 }
 
 export const UnselectableProps = {
@@ -246,6 +296,7 @@ export const DropdownProps = {
 	 */
 	transitionName: {
 		type: String,
+		default: undefined,
 	},
 	/**
 	 * Offset of the dropdown from the trigger
@@ -316,6 +367,7 @@ export const DropdownProps = {
 	 */
 	triggerWidth: {
 		type: Boolean,
+		default: false,
 	},
 }
 
@@ -334,7 +386,10 @@ export const AutofocusProps = {
 	 * Global attribute autofocus
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
 	 */
-	autofocus: Boolean,
+	autofocus: {
+		type: Boolean,
+		default: false,
+	},
 }
 
 export const AutocompleteProps = {
@@ -368,28 +423,34 @@ export const InputTextareaProps = {
 	 * Available for input types: text, search, url, tel, email, password
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
 	 */
-	minlength: [String, Number],
+	minlength: { type: [String, Number], default: undefined },
 	/**
 	 * Input / Textarea maxlength
 	 * Maximum length (number of characters) of value
 	 * Available for input types: text, search, url, tel, email, password
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
 	 */
-	maxlength: [String, Number],
+	maxlength: { type: [String, Number], default: undefined },
 	/**
 	 * Input / Textarea placeholder
 	 * Text that appears in the form control when it has no value set
 	 * Available for input types: text, search, url, tel, email, password, number
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder
 	 */
-	placeholder: String,
+	placeholder: {
+		type: String,
+		default: undefined,
+	},
 	/**
 	 * Input / Textarea required
 	 * A value is required or must be check for the form to be submittable
 	 * Available for all input types except color
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required
 	 */
-	required: Boolean,
+	required: {
+		type: Boolean,
+		default: false,
+	},
 }
 
 export const CheckboxRadioProps = {
@@ -407,11 +468,17 @@ export const CheckboxRadioProps = {
 	 * Input value
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
 	 */
-	value: [String, Number, Boolean],
+	value: {
+		type: [String, Number, Boolean],
+		default: undefined,
+	},
 	/**
 	 * Input value
 	 */
-	modelValue: [Object, Number, Boolean, String],
+	modelValue: {
+		type: [Object, Number, Boolean, String],
+		default: undefined,
+	},
 }
 
 export const CheckboxRadioGroupProps = {
@@ -427,7 +494,10 @@ export const CheckboxRadioGroupProps = {
 	/**
 	 * Input value
 	 */
-	modelValue: [String, Array, Boolean, Number, Symbol],
+	modelValue: {
+		type: [String, Array, Boolean, Number, Symbol],
+		default: undefined,
+	},
 	/**
 	 * Input name
 	 */
@@ -435,7 +505,10 @@ export const CheckboxRadioGroupProps = {
 	/**
 	 * If true, the group will be displayed in a vertical column
 	 */
-	vertical: Boolean,
+	vertical: {
+		type: Boolean,
+		default: false,
+	},
 }
 
 export const ActionProps = {
@@ -443,6 +516,7 @@ export const ActionProps = {
 	...LabelProps,
 	...PressedProps,
 	...ActiveProps,
+	...CurrentProps,
 	...LinkProps,
 	/**
 	 * Button type
@@ -460,4 +534,18 @@ export const ActionProps = {
 		type: String,
 		default: undefined,
 	},
+	/**
+	 * Default tag for the action
+	 */
+	defaultTag: {
+		type: String,
+		default: ActionTag.button,
+	},
+}
+
+export const NavProps = {
+	items: {
+		type: Array as PropType<NavItem[]>,
+		default: () => [],
+	},
 }

package/src/resolvers/unplugin.ts

@@ -2,17 +2,7 @@ import type {
 	ComponentResolver,
 	SideEffectsInfo,
 } from 'unplugin-vue-components/types'
-
-function kebabCase(str: string, options?: { condense: boolean }) {
-	if (typeof str !== 'string') throw new TypeError('expected a string')
-	return str
-		.trim()
-		.replace(/([a-z])([A-Z])/g, '$1-$2')
-		.replace(/\W/g, (m) => (/[À-ž]/.test(m) ? m : '-'))
-		.replace(/^-+|-+$/g, '')
-		.replace(/-{2,}/g, (m) => (options?.condense ? '-' : m))
-		.toLowerCase()
-}
+import { kebabCase } from 'change-case'
 
 type ImportStyle = boolean | 'css' | 'scss'
 
@@ -38,11 +28,16 @@ export interface VolverResolverOptions {
 	 * @default undefined
 	 */
 	ignore?: string[]
+	/**
+	 * cherry pick components from named exports
+	 * @default undefined
+	 */
+	cherryPick?: boolean
 }
 
 const STYLE_EXCLUDE = ['vv-icon', 'vv-action']
 const VOLVER_PREFIX = 'vv'
-const DIRECTIVES = ['v-tooltip']
+const DIRECTIVES = ['v-tooltip', 'v-contextmenu']
 
 export const getStyleNames = function (kebabName: string) {
 	if (STYLE_EXCLUDE.includes(kebabName)) {
@@ -113,6 +108,7 @@ export function VolverResolver({
 	importStyle,
 	directives,
 	ignore,
+	cherryPick,
 }: VolverResolverOptions = {}): ComponentResolver[] {
 	return [
 		{
@@ -134,9 +130,16 @@ export function VolverResolver({
 				}
 
 				// import component
+				if (cherryPick) {
+					return {
+						from: `@volverjs/ui-vue/${kebabName}`,
+						sideEffects: getSideEffects(kebabName, importStyle),
+					}
+				}
 				return {
-					from: `@volverjs/ui-vue/${kebabName}`,
+					from: '@volverjs/ui-vue/components',
 					sideEffects: getSideEffects(kebabName, importStyle),
+					name,
 				}
 			},
 		},
@@ -159,9 +162,16 @@ export function VolverResolver({
 				}
 
 				// import directive
+				if (cherryPick) {
+					return {
+						from: `@volverjs/ui-vue/${kebabName}`,
+						sideEffects: getSideEffects(kebabName, importStyle),
+					}
+				}
 				return {
-					from: `@volverjs/ui-vue/${kebabName}`,
+					from: '@volverjs/ui-vue/directives',
 					sideEffects: getSideEffects(kebabName, importStyle),
+					name: `v${name}`,
 				}
 			},
 		},

package/src/stories/AlertGroup/AlertGroupWithComposable.stories.ts

@@ -6,7 +6,7 @@ import { Default as DefaultStory, type Story } from './AlertGroup.stories'
 import { useAlert } from '@/composables/alert/useAlert'
 
 const meta: Meta<typeof VvAlertGroup> = {
-	title: 'Components/AlertGroup/UseComposable',
+	title: 'Composables/useAlert',
 	component: VvAlertGroup,
 	args: defaultArgs,
 	argTypes,
@@ -15,7 +15,7 @@ const meta: Meta<typeof VvAlertGroup> = {
 
 export default meta
 
-export const UseComposable: Story = {
+export const Default: Story = {
 	...DefaultStory,
 	parameters: {
 		docs: {

package/src/stories/Blurhash/BlurhashComposable.stories.ts

@@ -0,0 +1,195 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import VvInputFile from '@/components/VvInputFile/VvInputFile.vue'
+import { useBlurhash } from '@/composables/useBlurhash'
+
+const meta: Meta = {
+	title: 'Composables/useBlurhash',
+	tags: ['autodocs'],
+}
+
+export default meta
+
+export const Default: StoryObj = {
+	render: (args) => ({
+		components: { VvInputFile },
+		setup() {
+			const isLoading = ref(false)
+			const { encode, decode, loadImage } = useBlurhash()
+			const file = ref({})
+			const canvas = ref()
+			const isImgLoaded = ref(false)
+			const blurhash = ref('')
+			const imageUrl = ref('')
+			const image = ref()
+
+			return {
+				args,
+				isLoading,
+				canvas,
+				encode,
+				decode,
+				file,
+				blurhash,
+				isImgLoaded,
+				loadImage,
+				image,
+				imageUrl,
+			}
+		},
+		watch: {
+			file: {
+				immediate: true,
+				async handler(newValue) {
+					if (newValue?.size) {
+						this.imageUrl = URL.createObjectURL(newValue)
+						this.image = await this.loadImage(this.imageUrl)
+						this.blurhash = await this.encode(newValue)
+					} else {
+						this.image = null
+						this.imageUrl = ''
+						this.blurhash = ''
+					}
+				},
+			},
+			blurhash: {
+				async handler(newValue) {
+					if (this.image) {
+						const blurhashDecoded = await this.decode(
+							newValue,
+							this.image.width,
+							this.image.height,
+						)
+
+						if (this.canvas) {
+							this.canvas.width = this.image.width
+							this.canvas.height = this.image.height
+							const ctx = this.canvas.getContext('2d')
+							const imageData = ctx.createImageData(
+								this.canvas.width,
+								this.canvas.height,
+							)
+							imageData.data.set(blurhashDecoded)
+							ctx.putImageData(imageData, 0, 0)
+						}
+					}
+				},
+			},
+		},
+		template: /* html */ `
+			<div class="w-full grid gap-md grid-cols-3 h-150" :class="{ 'vv-skeleton': isLoading }">
+				<div class="w-150 h-150 col-span-1">
+					<div class="text-20 font-semibold mb-md">Upload image</div>
+					<vv-input-file v-model="file" name="input-file" modifiers="drop-area square hidden" accept=".gif,.jpg,.jpeg,.png,image/gif,image/jpeg,image/png" />
+				</div>
+				<div v-show="blurhash" class="h-150 col-span-2">
+					<picture class="flex gap-md justify-center">
+						<div>
+							<div class="text-20 font-semibold mb-md">Blurhash</div>
+							<canvas
+								ref="canvas"
+								class="w-150 h-150 block object-cover" />
+						</div>
+						<div>
+							<div class="text-20 font-semibold mb-md">Image</div>
+							<img
+								v-if="image"
+								class="w-150 h-150 block object-cover"
+								:class="{ 'vv-skeleton__item': isLoading }"
+								:src="imageUrl"
+								alt="image"
+								:width="image.width"
+								:height="image.height" />
+						</div>
+					</picture>
+				</div>
+			</div>
+		`,
+	}),
+
+	parameters: {
+		docs: {
+			source: {
+				type: 'code',
+				language: 'html',
+				code: /* html */ `
+<div class="w-full grid gap-md grid-cols-3 h-150" :class="{ 'vv-skeleton': isLoading }">
+	<div class="w-150 h-150 col-span-1">
+		<div class="text-20 font-semibold mb-md">Upload image</div>
+		<vv-input-file v-model="file" name="input-file" modifiers="drop-area square hidden" accept=".gif,.jpg,.jpeg,.png,image/gif,image/jpeg,image/png" />
+	</div>
+	<div v-show="blurhash" class="h-150 col-span-2">
+		<picture class="flex gap-md justify-center">
+			<div>
+				<div class="text-20 font-semibold mb-md">Blurhash</div>
+				<canvas
+					ref="canvas"
+					class="w-150 h-150 block object-cover" />
+			</div>
+			<div>
+				<div class="text-20 font-semibold mb-md">Image</div>
+				<img
+					v-if="image"
+					class="w-150 h-150 block object-cover"
+					:class="{ 'vv-skeleton__item': isLoading }"
+					:src="imageUrl"
+					alt="image"
+					:width="image.width"
+					:height="image.height" />
+			</div>
+		</picture>
+	</div>
+</div>
+
+<script setup lang='ts'>
+	import { useBlurhash } from '@volverjs/ui-vue/composables'
+
+	const { encode, decode, loadImage } = useBlurhash()
+
+	const isLoading = ref(false)
+	const file = ref({})
+	const canvas = ref()
+	const isImgLoaded = ref(false)
+	const blurhash = ref('')
+	const imageUrl = ref('')
+	const image = ref()
+
+	watch(file, async (newValue) => {
+		if (newValue?.size) {
+			this.imageUrl = URL.createObjectURL(newValue)
+			this.image = await this.loadImage(this.imageUrl)
+			this.blurhash = await this.encode(newValue)
+		} else {
+			this.image = null
+			this.imageUrl = ''
+			this.blurhash = ''
+		}
+	}, { immediate: true })
+
+	watch(blurhash, async (newValue) => {
+		if (this.image) {
+			const blurhashDecoded = await this.decode(
+				newValue,
+				this.image.width,
+				this.image.height,
+			)
+
+			if (this.canvas) {
+				this.canvas.width = this.image.width
+				this.canvas.height = this.image.height
+				const ctx = this.canvas.getContext('2d')
+				const imageData = ctx.createImageData(
+					this.canvas.width,
+					this.canvas.height,
+				)
+				imageData.data.set(blurhashDecoded)
+				ctx.putImageData(imageData, 0, 0)
+			}
+		}
+	})
+</script>
+				`,
+			},
+		},
+	},
+}

package/src/stories/Combobox/Combobox.settings.ts

@@ -392,4 +392,12 @@ export const argTypes = {
 			},
 		},
 	},
+	'update:search': {
+		table: {
+			category: 'Events',
+			type: {
+				summary: 'string',
+			},
+		},
+	},
 }

package/src/stories/Icon/Icon.settings.ts

@@ -1,11 +1,11 @@
-import { VvIconProps } from '@/components/VvIcon'
+import { VvIconPropsDefaults } from '@/components/VvIcon'
 import normal from '@/assets/icons/normal.json'
 import { ModifiersArgTypes } from '@/stories/argTypes'
 
 export const defaultArgs = {
-	...propsToObject(VvIconProps),
+	...VvIconPropsDefaults,
 	name: 'add-circle',
-	width: 48
+	width: 48,
 }
 
 export const argTypes = {

package/src/stories/InputFile/InputFile.settings.ts

@@ -0,0 +1,36 @@
+import { HintArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
+import { VvInputFileProps } from '@/components/VvInputFile'
+
+export const defaultArgs = {
+	...propsToObject(VvInputFileProps),
+	name: 'vv-input-file',
+	label: 'Upload file',
+}
+
+export const argTypes = {
+	...HintArgTypes,
+	modifiers: {
+		...ModifiersArgTypes.modifiers,
+		options: ['hidden', 'square', 'circle'],
+	},
+	'drop-area': {
+		description: 'Drop area slot',
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	'update:model-value': {
+		table: {
+			category: 'Events',
+			type: {
+				summary: 'File | File[]',
+			},
+		},
+	},
+}