feat: improved how attributes are passed to wrappers

BREAKING CHANGE: anything that previously used *Attrs properties to pass attributes
needs to be changed to *-property-name, so :wrapperAttrs="{class:``}" becomes wrapper-class.

BREAKING CHANGE: Font awesome wrapper no longer has fixed-width attribute by default.

Author: AlansCodeLog

README.md

@@ -33,9 +33,9 @@ Everything can just be done from the config. Nuxt will automatically import the
 In `main.ts` or where vue is mounted:
 
 ```ts
-// a global style import is required to get the component styles working if not using tailwind
-// import "@alanscodelog/vue-components/style.css" // currently broken, vite is not properly resolving css imports 
-import "../node_modules/@alanscodelog/vue-components/dist/style.css"
+// if NOT using tailwind a global style import is required to get the component styles working
+// import "../node_modules/@alanscodelog/vue-components/dist/style.css"
+// proper import is currently broken, vite is not properly resolving css imports 
 
 // import plugin
 import { MyLibPlugin } from "@alanscodelog/vue-components"
@@ -73,18 +73,25 @@ You should also be able to use tailwind directly instead of importing the styles
 You can use the exported config and merge it with your own if needed.
 
 ```ts
-import componentsConfig from "@alanscodelog/vue-components/tailwind/config.js"
-import { theme } from "./lib/general/theme.js"
 
-export default {
-	...componentsConfig,
-	// ... your config
+import { config } from "@alanscodelog/vue-components/tailwind/config.js"
+
+export default  {
+	...config,
+	content: [
+		...config.content,
+		"./index.html",
+		"./src/**/*.{vue,js,ts,jsx,tsx}",
+		// be sure to add this or tailwind will not include the classes in the component library
+		"./node_modules/@alanscodelog/vue-components/**/*.{vue,js,ts,jsx,tsx}",
+	],
 	plugins: [
-		// ...your plugins
-		...componentsConfig.plugins
+		...config.plugins
 	]
 }
 
+
+
 ```
 
 If you need to setup the config completely from scratch the package provides a plugin `@alanscodelog/vue-components/tailwind/plugin.js` that sets up a few utility classes\*. It also requires setting up the theming library. The options it uses are exported for easy re-use.
@@ -102,6 +109,7 @@ import {
 
 const config = {
 	darkMode: "class",
+	content: [/* ... */],
 	plugins: [
 		// integration with my theme library
 		createTailwindPlugin(theme, themePluginOpts),

src/components/LibButton/LibButton.stories.ts

@@ -24,20 +24,27 @@ export const Primary: Story = {
 		template: `
 		<div class="flex gap-4 justify-center">
 			<template v-for="type of [false, 'ok', 'warning', 'danger', 'primary', 'secondary' ]">
-				<lib-button v-bind="{...args, color: type, label: args.label + ' ' + capitalize(type || 'false')}">
+				<lib-button v-bind="{...args, color: type, label: !args.label ? undefined : args.label + ' ' + capitalize(type || 'false')}" icon-fixed-width>
 				</lib-button>
 			</template>
 		</div>
 		<div class="flex flex-col gap-4 pt-10">
 			<template v-for="type of [false, 'ok', 'warning', 'danger', 'primary', 'secondary']">
-				<lib-button v-bind="{...args, color: type , label: args.label + ' ' + capitalize(type || 'false') }">
+				<lib-button v-bind="{...args, color: type , label: !args.label ? undefined : args.label + ' ' + capitalize(type || 'false') }" icon-fixed-width>
 				</lib-button>
 			</template>
 		</div>
 		`,
 	}),
 }
 
+export const OnlyIcon: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		label: undefined,
+	},
+}
 export const Disabled: Story = {
 	...Primary,
 	args: {

src/components/LibButton/LibButton.vue

@@ -23,135 +23,135 @@
 			`,
 		!color && `active:text-neutral-800` /* todo for colors */,
 		border && `
-				transition-all
-				bg-neutral-100
-				shadow-[0_1px_1px_0]
-				shadow-neutral-950/20
-				hover:shadow-[0_1px_3px_0]
-				hover:shadow-neutral-950/30
-				hover:border-neutral-300
-
-				relative
-				after:absolute
-				after:rounded
-				after:inset-0
-				after:content
-				after:shadow-[0_1px_0_0_inset]
-				after:shadow-bg/20
-				hover:after:shadow-bg/60
-				dark:after:shadow-bg/10
-				dark:hover:after:shadow-bg/50
-				after:pointer-events-none
-				after:mix-blend-overlay
-
-				active:shadow-inner
-				active:shadow-fg/20
-				active:border-transparent
-				border
-				border-neutral-400
-				disabled:border-neutral-200
-				disabled:bg-neutral-50
-
-				dark:hover:shadow-accent-950/30
-				dark:active:shadow-fg/40
-				dark:active:border-neutral-900
-				dark:bg-neutral-800
-				dark:border-neutral-900
-				dark:disabled:border-neutral-800
-				dark:disabled:bg-neutral-900
-			`,
+			transition-all
+			bg-neutral-100
+			shadow-[0_1px_1px_0]
+			shadow-neutral-950/20
+			hover:shadow-[0_1px_3px_0]
+			hover:shadow-neutral-950/30
+			hover:border-neutral-300
+
+			relative
+			after:absolute
+			after:rounded
+			after:inset-0
+			after:content
+			after:shadow-[0_1px_0_0_inset]
+			after:shadow-bg/20
+			hover:after:shadow-bg/60
+			dark:after:shadow-bg/10
+			dark:hover:after:shadow-bg/50
+			after:pointer-events-none
+			after:mix-blend-overlay
+
+			active:shadow-inner
+			active:shadow-fg/20
+			active:border-transparent
+			border
+			border-neutral-400
+			disabled:border-neutral-200
+			disabled:bg-neutral-50
+
+			dark:hover:shadow-accent-950/30
+			dark:active:shadow-fg/40
+			dark:active:border-neutral-900
+			dark:bg-neutral-800
+			dark:border-neutral-900
+			dark:disabled:border-neutral-800
+			dark:disabled:bg-neutral-900
+		`,
 		border && ( !color || color === `secondary` ) && `
 			after:shadow-bg/90
 			hover:after:shadow-bg
 			dark:after:shadow-bg/20
 			dark:hover:after:shadow-bg/90
 		`,
 		!border && color === `primary` && `
-				font-bold
-				hover:text-accent-50
-			`,
+			font-bold
+			hover:text-accent-50
+		`,
 		!border && color === `ok` && `
-				text-ok-600 hover:text-ok-500
-				dark:text-ok-600 dark:hover:text-ok-500
-			`,
+			text-ok-600 hover:text-ok-500
+			dark:text-ok-600 dark:hover:text-ok-500
+		`,
 		!border && color === `warning` && `
 				text-warning-500 hover:text-warning-300
 				dark:text-warning-600 dark:hover:text-warning-400
 			`,
 		!border && color === `danger` && `
-				text-danger-500 hover:text-danger-300
-				dark:text-danger-600 dark:hover:text-danger-400
-			`,
+			text-danger-500 hover:text-danger-300
+			dark:text-danger-600 dark:hover:text-danger-400
+		`,
 		!border && color === `secondary` && `
-				text-accent-700 hover:text-accent-500
-				dark:text-accent-600 dark:hover:text-accent-400
-			`,
+			text-accent-700 hover:text-accent-500
+			dark:text-accent-600 dark:hover:text-accent-400
+		`,
 		!border && color === `primary` && `
-				text-accent-700 hover:text-accent-500
-				dark:text-accent-600 dark:hover:text-accent-400
-			`,
+			text-accent-700 hover:text-accent-500
+			dark:text-accent-600 dark:hover:text-accent-400
+		`,
 		border && color === `ok` && `
-				text-ok-950
-				hover:text-ok-800
-				bg-ok-400
-				border-ok-500
-				hover:border-ok-600
-				hover:shadow-ok-900/50
-
-				dark:text-ok-100
-				dark:hover:text-ok-200
-				dark:bg-ok-700
-				dark:border-ok-800
-				dark:hover:border-ok-900
-				dark:hover:shadow-ok-900/30
-				`,
+			text-ok-950
+			hover:text-ok-800
+			bg-ok-400
+			border-ok-500
+			hover:border-ok-600
+			hover:shadow-ok-900/50
+
+			dark:text-ok-100
+			dark:hover:text-ok-200
+			dark:bg-ok-700
+			dark:border-ok-800
+			dark:hover:border-ok-900
+			dark:hover:shadow-ok-900/30
+		`,
 		border && color === `warning` && `
-				text-warning-950
-				hover:text-warning-900
-				bg-warning-300
-				border-warning-400
-				hover:border-warning-400
-				hover:shadow-warning-900/50
-
-				dark:text-warning-100
-				dark:hover:text-warning-200
-				dark:bg-warning-700
-				dark:border-warning-700
-				dark:hover:shadow-warning-900/25
-			`,
+			text-warning-950
+			hover:text-warning-900
+			bg-warning-300
+			border-warning-400
+			hover:border-warning-400
+			hover:shadow-warning-900/50
+
+			dark:text-warning-100
+			dark:hover:text-warning-200
+			dark:bg-warning-700
+			dark:border-warning-700
+			dark:hover:shadow-warning-900/25
+		`,
 		border && color === `danger` && `
-				text-danger-950
-				hover:text-danger-900
-				bg-danger-400
-				border-danger-500
-				hover:border-danger-500
-				hover:shadow-red-900/50
-
-				dark:text-danger-100
-				dark:hover:text-danger-200
-				dark:bg-danger-900
-				dark:border-danger-950
-				dark:hover:shadow-red-500/10
-				`,
+			text-danger-950
+			hover:text-danger-900
+			bg-danger-400
+			border-danger-500
+			hover:border-danger-500
+			hover:shadow-red-900/50
+
+			dark:text-danger-100
+			dark:hover:text-danger-200
+			dark:bg-danger-900
+			dark:border-danger-950
+			dark:hover:shadow-red-500/10
+		`,
 		border && color === `secondary` && `
-				text-accent-800
-				dark:text-accent-400
-			`,
+			text-accent-800
+			dark:text-accent-400
+		`,
 		border && color === `primary` && `
-				text-bg
-				hover:text-bg
-				bg-accent-600
-				border-accent-700
-				hover:border-accent-800
-				hover:shadow-accent-950/30
-
-				dark:text-bg
-				dark:bg-accent-600
-				dark:hover:text-accent-200
-				dark:border-accent-800
-				dark:hover:border-accent-700
-				dark:hover:shadow-accent-900/50
-`,
+			text-bg
+			hover:text-bg
+			bg-accent-600
+			border-accent-700
+			hover:border-accent-800
+			hover:shadow-accent-950/30
+
+			dark:text-bg
+			dark:bg-accent-600
+			dark:hover:text-accent-200
+			dark:border-accent-800
+			dark:hover:border-accent-700
+			dark:hover:shadow-accent-900/50
+		`,
 		$attrs.class as any
 	)"
 	:type="$attrs.type ?? 'submit'"
@@ -160,18 +160,24 @@
 	:data-border="border"
 	:data-color="color"
 	:aria-disabled="disabled"
-	:aria-labelledby="label ? `label-${id}` : undefined"
-	v-bind="{ ...$attrs, class: undefined, ...listeners }"
+	v-bind="{
+		...autoTitle,
+		...$attrs,
+		class: undefined,
+		...listeners,
+		...ariaLabel,
+	}"
 >
-	<label :id="`label-${id}`" class="label pointer-events-none flex flex-1 items-center justify-center">
+	<label :id="`label-${id}`" class="label pointer-events-none flex flex-1 items-center justify-center gap-1">
 		<slot>
-			<slot name="icon">
+			<slot name="icon" v-bind="{icon, ...iconAttrs}">
 				<fa v-if="icon"
 					:icon="icon"
-					class="slot before:content-vertical-holder peer flex items-center justify-center"
+					v-bind="{...iconAttrs}"
+					class="slot before:content-vertical-holder flex items-center justify-center"
 				/>
 			</slot>
-			<span v-if="!isBlank(label)" class="peer-[.icon]:pl-2">
+			<span v-if="!isBlank(label)">
 				{{ label }}
 			</span>
 		</slot>
@@ -182,17 +188,20 @@
 import { isBlank, keys, pick } from "@alanscodelog/utils"
 import { computed, type PropType, useAttrs } from "vue"
 
+import { useAriaLabel } from "../../composables/useAriaLabel.js"
+import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
 import { twMerge } from "../../helpers/twMerge.js"
 import fa from "../fa/Fa.vue"
 import { baseInteractiveProps, fallthroughEventProps, labelProp, linkableByIdProps } from "../shared/props.js"
 
 
-const $attrs = useAttrs()
+const { $attrs, iconAttrs } = useDivideAttrs(useAttrs(), ["icon"])
 
 defineOptions({
 	name: "lib-button",
 })
 
+/** Attributes can be passed to the icon by prefixing with icon- */
 const props = defineProps({
 	...linkableByIdProps(),
 	...labelProp,
@@ -202,9 +211,17 @@ const props = defineProps({
 	icon: { type: String, required: false, default: undefined },
 	color: { type: [String, Boolean] as PropType<"warning" | "ok" | "danger" | "primary" | "secondary" | false>, required: false, default: false },
 	unstyle: { type: Boolean, required: false, default: false },
+	autoTitleFromAria: Boolean,
+	test: Boolean,
 })
 
 const listeners = computed(() => pick(props, keys(fallthroughEventProps) as any) as any)
 
+const ariaLabel = useAriaLabel(props)
+
+const autoTitle = computed(() => ({
+	title: props.autoTitleFromAria && ($attrs["aria-label"] ?? props.label),
+}))
+
 </script>