@citizenplane/pimp 9.6.1 → 9.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "9.6.1",
+  "version": "9.6.3",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpInput.vue

@@ -99,7 +99,7 @@ const attrs = useAttrs()
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const { ['class']: value, id, ...restAttributes } = attrs
 
-const inputIdentifier = ref(id || useId())
+const inputIdentifier = ref<string>((id as string | undefined) || useId())
 
 const helpMessageId = useId()
 const errorMessageId = useId()
@@ -120,7 +120,7 @@ const inputModel = defineModel<string | number | boolean>({
 })
 
 const isDOMElementValid = ref(true)
-const cpInputContainer = ref()
+const cpInputContainer = ref<HTMLDivElement | null>(null)
 
 const isDisabled = computed(() => checkAttribute('disabled'))
 const isRequired = computed(() => checkAttribute('required'))
@@ -147,7 +147,9 @@ const hasAfterIconSlot = computed(() => !!slots['trailing-icon'])
 const hasAfterIcon = computed(() => hasAfterIconSlot.value || props.isSearch)
 const displayAfterIcon = computed(() => hasAfterIcon.value && !props.isSearch)
 
-const DOMElement = computed(() => cpInputContainer.value.children.namedItem(inputIdentifier.value))
+const DOMElement = computed(
+  () => cpInputContainer.value?.children.namedItem(inputIdentifier.value) as HTMLInputElement | null,
+)
 
 const displayErrorMessage = computed(() => isInputInvalid.value && props.errorMessage.length)
 const isClearButtonVisible = computed(() => props.isSearch && inputModel.value.toString().length && !isDisabled.value)

package/src/components/CpTooltip.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-tooltip :aria-id="ariaId" class="cpTooltip" :distance :container="false">
+  <v-tooltip :aria-id="ariaId" class="cpTooltip" :container="false" :disabled :distance>
     <slot />
     <template #popper>
       <span v-if="content">
@@ -16,6 +16,7 @@ import { useId } from 'vue'
 
 interface Props {
   content?: string
+  disabled?: boolean
   distance?: number
 }
 

package/src/stories/CpTooltip.stories.ts

@@ -100,3 +100,22 @@ export const WithHTMLContent: Story = {
     `,
   }),
 }
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  render: (args) => ({
+    components: { CpTooltip },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="padding: 100px; text-align: center;">
+        <CpTooltip v-bind="args" content="You should not see me">
+          <div type="button">Disabled</div>
+        </CpTooltip>
+      </div>
+    `,
+  }),
+}