@citizenplane/pimp 18.19.6 → 18.19.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.19.6",
+  "version": "18.19.7",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpInput.vue

@@ -95,9 +95,12 @@ defineOptions({ inheritAttrs: false })
 const attrs = useAttrs()
 
 // class is a reserved word, we can't remove 'class' property from attrs
-const { class: _class, id, ...restAttributes } = attrs
+const restAttributes = computed(() => {
+  const { class: _class, id, ...rest } = attrs
+  return rest
+})
 
-const inputIdentifier = ref<string>((id as string | undefined) || useId())
+const inputIdentifier = ref<string>((attrs.id as string | undefined) || useId())
 
 const helpMessageId = useId()
 const errorMessageId = useId()

package/src/stories/CpInput.stories.ts

@@ -1,4 +1,5 @@
 import type { ComponentPropsAndSlots, Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, userEvent, within } from 'storybook/test'
 import { ref } from 'vue'
 
 import CpIcon from '@/components/CpIcon.vue'
@@ -321,6 +322,40 @@ export const WithUnits: Story = {
   }),
 }
 
+/**
+ * A dynamically bound native attribute (e.g. `:placeholder`) must stay reactive
+ * instead of freezing at first render.
+ */
+export const ReactiveAttribute: Story = {
+  args: { ...Default.args },
+  render: (args: StoryArgs) => ({
+    components: { CpInput },
+    setup() {
+      const value = ref('')
+      const placeholder = ref('Initial placeholder')
+      const updatePlaceholder = () => {
+        placeholder.value = 'Updated placeholder'
+      }
+      return { args, value, placeholder, updatePlaceholder }
+    },
+    template: `
+      <div style="max-width: 400px; padding: 20px;">
+        <CpInput v-model="value" v-bind="args" :placeholder="placeholder" />
+        <button type="button" @click="updatePlaceholder">Update placeholder</button>
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    await expect(canvas.getByPlaceholderText('Initial placeholder')).toBeInTheDocument()
+
+    await userEvent.click(canvas.getByRole('button', { name: 'Update placeholder' }))
+
+    await expect(canvas.getByPlaceholderText('Updated placeholder')).toBeInTheDocument()
+  },
+}
+
 export const VisualTestingBetweenDisabledAndPlaceholder: Story = {
   args: {
     ...Default.args,