@citizenplane/pimp 9.4.4 → 9.4.6

package/src/stories/CpDate.stories.ts

@@ -110,3 +110,44 @@ export const Disabled: Story = {
     disabled: true,
   },
 }
+
+export const NextToInput: Story = {
+  args: {
+    label: 'Date',
+    required: false,
+    disabled: false,
+    isInvalid: false,
+    displayErrorMessage: true,
+  },
+  render: (args) => ({
+    components: { CpDate },
+    setup() {
+      const date = ref('')
+      const textModel = ref('')
+      return { args, date, textModel }
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 10px; max-width: 245px; padding: 0px;">
+        <CpDate
+          v-model="date"
+          v-bind="args"
+          style="flex: 1; min-width: 0;"
+          @onValidation="(isValid) => console.log('Validation:', isValid)"
+        />
+        <CpInput
+          v-model="textModel"
+          label="Text input"
+          placeholder="Enter text here"
+          style="flex: 1; min-width: 0;"
+        >
+          <template #leading-icon>
+            <CpIcon type="key" />
+          </template>
+          <template #trailing-icon>
+            <CpIcon type="key" />
+          </template>
+        </CpInput>
+      </div>
+    `,
+  }),
+}

package/src/stories/CpInput.stories.ts

@@ -2,6 +2,7 @@ import { ref } from 'vue'
 
 import type { Meta, StoryObj } from '@storybook/vue3'
 
+import CpIcon from '@/components/CpIcon.vue'
 import CpInput from '@/components/CpInput.vue'
 
 import { Sizes } from '@/constants'
@@ -161,20 +162,13 @@ export const Mask: Story = {
     mask: '## ## ## ## ##',
   },
 }
+
 export const WithIcon: Story = {
   args: {
     ...Default.args,
-    required: false,
-    disabled: false,
-    autocomplete: 'off',
-    isInvalid: false,
-    errorMessage: '',
-    removeBorder: false,
-    isSearch: true,
-    help: '',
   },
   render: (args) => ({
-    components: { CpInput },
+    components: { CpInput, CpIcon },
     setup() {
       const value = ref('')
       return { args, value }
@@ -185,6 +179,54 @@ export const WithIcon: Story = {
           v-model="value"
           v-bind="args"
         >
+          <template #trailing-icon>
+            <CpIcon type="users" />
+          </template>
+          <template #leading-icon>
+            <CpIcon type="key" />
+          </template>
+        </CpInput>
+      </div>
+    `,
+  }),
+}
+
+export const WithUnits: Story = {
+  args: {
+    ...Default.args,
+  },
+  render: (args) => ({
+    components: { CpInput },
+    setup() {
+      const value = ref('')
+      return { args, value }
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 10px; max-width: 400px; padding: 20px;">
+        <CpInput
+          v-model="value"
+          mask="####"
+          v-bind="args"
+        >
+          <template #leading-icon>
+            €
+          </template>
+          <template #trailing-icon>
+            EUR
+          </template>
+        </CpInput>
+
+        <CpInput
+          v-model="value"
+          mask="####"
+          v-bind="args"
+        >
+          <template #leading-icon>
+            kg
+          </template>
+          <template #trailing-icon>
+            cm
+          </template>
         </CpInput>
       </div>
     `,

package/src/stories/CpMultiselect.stories.ts

@@ -186,7 +186,7 @@ export const Multiple: Story = {
       return { args, selectedAirlines, dynamicOptions, handleSearch, isLoading }
     },
     template: `
-      <div style="padding: 20px;">
+      <div>
         <CpMultiselect v-model="selectedAirlines" v-bind="args" :options="dynamicOptions" :is-loading="isLoading" @search="handleSearch">
           <template #prefix>
             <cp-partner-badge type="airline" size="sm" />