@dpa-id-components/dpa-shared-components 22.1.0 → 22.2.0

package/dist/components/UiButton/UiButton.vue.d.ts

@@ -15,7 +15,6 @@ type __VLS_Props = {
     to?: RouteLocationRaw;
     size?: keyof typeof BUTTON_SIZE_CLASSES;
     appearance?: "fill-emphasis" | "fill-subtle" | "outline-emphasis" | "outline-subtle" | "ghost";
-    disabled?: boolean;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/dpa-shared-components.js

@@ -1983,11 +1983,7 @@ var an = { key: 0 }, on = /* @__PURE__ */ h({
 	props: {
 		to: { default: () => void 0 },
 		size: { default: "md" },
-		appearance: { default: "fill-emphasis" },
-		disabled: {
-			type: Boolean,
-			default: !1
-		}
+		appearance: { default: "fill-emphasis" }
 	},
 	setup(e) {
 		let t = {
@@ -1997,7 +1993,7 @@ var an = { key: 0 }, on = /* @__PURE__ */ h({
 			lg: "h-12 text-base [&:has(>svg:only-child)]:w-12 [&:not(:has(>svg:only-child))]:px-4 [&>svg]:size-5 [&:has(>svg:only-child)>svg]:size-6"
 		}, r = o(() => {
 			let t = {};
-			return typeof e.to == "string" ? t.href = e.to : e.to ? t.to = e.to : (t.disabled = e.disabled, t.type = "button"), t;
+			return typeof e.to == "string" ? t.href = e.to : e.to ? t.to = e.to : t.type = "button", t;
 		}), a = o(() => ({
 			"fill-emphasis": "border-transparent bg-primary text-neutral not-disabled:hover:bg-primary-hover disabled:bg-neutral-faint disabled:text-neutral-soft",
 			"outline-emphasis": "border-neutral-faint bg-transparent text-primary-emphasis not-disabled:hover:border-neutral-subtle not-disabled:hover:text-primary-hover disabled:text-neutral-faint",

package/dist/src/components/UiButton/README.md

@@ -39,13 +39,13 @@ import { UiButton } from "@dpa-id-components/dpa-shared-components";
 ## API
 
 ### Props
+Note: This component binds all non-prop attributes on its principal element (either a button or a element). This allows you to add arbitrary HTML attributes (and event listeners) on the principal element without them being explicitly supported by the component.
 
 | Name         | Type                                                                                       | Default     | Description                      |
 |--------------|--------------------------------------------------------------------------------------------|-------------|----------------------------------|
 | `to`         | `RouteLocationRaw`                                                                         | `undefined` | `RouterLink` `to` prop           |
 | `size`       | `"xs"`, `"sm"`, `"md"`, or `"lg"`                                                          | `"md"`      |                                  |
 | `appearance` | `"fill-emphasis"`, `"fill-subtle"`, `"outline-emphasis"`, `"outline-subtle"`, or `"ghost"` | `"primary"` |                                  |
-| `disabled`   | `boolean`                                                                                  | `false`     | Whether the `button` is disabled |
 
 ### Slots
 

package/dist/src/components/UiButton/UiButton.stories.ts

@@ -5,16 +5,24 @@ import UiIcon from "../UiIcon/UiIcon.vue";
 
 import UiButton from "./UiButton.vue";
 
+type UiButtonArgs = InstanceType<typeof UiButton>["$props"] & {
+  disabled?: boolean;
+};
 const meta = {
   title: "Ui/UiButton",
   component: UiButton,
   args: {
-    disabled: false,
     appearance: "fill-emphasis",
     size: "md",
     to: undefined,
   },
-} satisfies Meta<typeof UiButton>;
+  argTypes: {
+    disabled: {
+      control: "boolean",
+      description: "Native disabled attribute",
+    },
+  },
+} satisfies Meta<UiButtonArgs>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/src/components/UiButton/UiButton.vue

@@ -43,7 +43,6 @@ const {
   to = undefined,
   size = "md",
   appearance = "fill-emphasis",
-  disabled = false,
 } = defineProps<{
   to?: RouteLocationRaw;
   size?: keyof typeof BUTTON_SIZE_CLASSES;
@@ -53,18 +52,15 @@ const {
     | "outline-emphasis"
     | "outline-subtle"
     | "ghost";
-  disabled?: boolean;
 }>();
 
 const attributes = computed(() => {
   const attrs: Record<string, unknown> = {};
-
   if (typeof to === "string") {
     attrs.href = to;
   } else if (to) {
     attrs.to = to;
   } else {
-    attrs.disabled = disabled;
     attrs.type = "button";
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dpa-id-components/dpa-shared-components",
-  "version": "22.1.0",
+  "version": "22.2.0",
   "description": "Shared Vue components library for dpa projects",
   "files": [
     "src",

package/src/components/UiButton/README.md

@@ -39,13 +39,13 @@ import { UiButton } from "@dpa-id-components/dpa-shared-components";
 ## API
 
 ### Props
+Note: This component binds all non-prop attributes on its principal element (either a button or a element). This allows you to add arbitrary HTML attributes (and event listeners) on the principal element without them being explicitly supported by the component.
 
 | Name         | Type                                                                                       | Default     | Description                      |
 |--------------|--------------------------------------------------------------------------------------------|-------------|----------------------------------|
 | `to`         | `RouteLocationRaw`                                                                         | `undefined` | `RouterLink` `to` prop           |
 | `size`       | `"xs"`, `"sm"`, `"md"`, or `"lg"`                                                          | `"md"`      |                                  |
 | `appearance` | `"fill-emphasis"`, `"fill-subtle"`, `"outline-emphasis"`, `"outline-subtle"`, or `"ghost"` | `"primary"` |                                  |
-| `disabled`   | `boolean`                                                                                  | `false`     | Whether the `button` is disabled |
 
 ### Slots
 

package/src/components/UiButton/UiButton.vue

@@ -43,7 +43,6 @@ const {
   to = undefined,
   size = "md",
   appearance = "fill-emphasis",
-  disabled = false,
 } = defineProps<{
   to?: RouteLocationRaw;
   size?: keyof typeof BUTTON_SIZE_CLASSES;
@@ -53,18 +52,15 @@ const {
     | "outline-emphasis"
     | "outline-subtle"
     | "ghost";
-  disabled?: boolean;
 }>();
 
 const attributes = computed(() => {
   const attrs: Record<string, unknown> = {};
-
   if (typeof to === "string") {
     attrs.href = to;
   } else if (to) {
     attrs.to = to;
   } else {
-    attrs.disabled = disabled;
     attrs.type = "button";
   }