feat(dateInput): add InputMask component for Date Input

RISDEV-4986

src/primevue/index.ts

@@ -15,6 +15,7 @@ import radioButton from "./radioButton/radioButton";
 import autocomplete from "./autocomplete/autocomplete";
 import textarea from "./textarea/textarea";
 import toast from "./toast/toast";
+import inputMask from "./inputMask/inputMask";
 
 import { deDE } from "@/config/locale";
 
@@ -34,6 +35,7 @@ export const RisUiTheme = {
   textarea,
   toast,
   autocomplete,
+  inputMask,
 };
 
 export const RisUiLocale = {

src/primevue/inputMask/inputMask.stories.ts

@@ -0,0 +1,189 @@
+import { Meta, StoryObj } from "@storybook/vue3";
+import InputMask from "primevue/inputmask";
+import { html } from "@/lib/tags";
+import Fluid from "primevue/fluid";
+import { ref } from "vue";
+import ErrorOutline from "~icons/material-symbols/error-outline";
+
+const meta: Meta<typeof InputMask> = {
+  component: InputMask,
+
+  tags: ["autodocs"],
+
+  args: {
+    disabled: false,
+    fluid: false,
+    placeholder: "TT.MM.JJJJ",
+    mask: "99.99.9999",
+    readOnly: false,
+    invalid: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: StoryObj<typeof meta> = {
+  args: {
+    modelValue: "12.12.2023",
+  },
+  render: (args) => ({
+    components: { InputMask },
+    setup() {
+      return { args };
+    },
+    template: html` <InputMask id="basic" v-bind="args" /> `,
+  }),
+};
+
+export const WithLabelAndHint: StoryObj<typeof meta> = {
+  render: (args) => ({
+    components: { InputMask },
+    setup() {
+      return { args };
+    },
+    template: html`<div class="flex w-2/5 flex-col gap-2">
+      <label class="ris-label2-regular" for="with-top-label">Date</label>
+      <InputMask id="with-top-label" v-bind="args" />
+      <small id="with-top-label-hint">Additional hint text</small>
+    </div>`,
+  }),
+};
+
+export const WithHorizontalLabel: StoryObj<typeof meta> = {
+  render: (args) => ({
+    components: { InputMask },
+    setup() {
+      return { args };
+    },
+    template: html`<div class="flex items-center gap-16">
+      <label class="ris-label2-regular" for="with-left-label">Label</label>
+      <InputMask id="with-left-label" v-bind="args" />
+    </div>`,
+  }),
+};
+
+export const Disabled: StoryObj<typeof meta> = {
+  args: {
+    disabled: true,
+  },
+
+  render: (args) => ({
+    components: { InputMask },
+    setup() {
+      return { args };
+    },
+    template: html`<InputMask id="basic" v-bind="args" />`,
+  }),
+};
+
+export const Readonly: StoryObj<typeof meta> = {
+  args: {
+    readonly: true,
+  },
+
+  render: (args) => ({
+    components: { InputMask },
+    setup() {
+      return { args };
+    },
+    template: html`<InputMask id="basic" v-bind="args" />`,
+  }),
+};
+
+export const Invalid: StoryObj<typeof meta> = {
+  args: {
+    invalid: true,
+  },
+
+  render: (args) => ({
+    components: { InputMask, ErrorOutline },
+    setup() {
+      return { args };
+    },
+    template: html`<div class="flex w-1/4 flex-col gap-2">
+      <InputMask id="invalid" aria-describedby="invalid-hint" v-bind="args" />
+      <small id="invalid-hint"> <ErrorOutline /> Invalid date </small>
+    </div>`,
+  }),
+};
+
+export const StartWithEndDate: Story = {
+  render: (args) => ({
+    components: { InputMask },
+    setup() {
+      const startDate = ref("");
+      const endDate = ref("");
+      return { args, startDate, endDate };
+    },
+    template: html`
+      <div class="flex items-center gap-4">
+        <div class="flex flex-col">
+          <InputMask id="start-date" v-model="startDate" v-bind="args" />
+        </div>
+        <span class="mx-2">–</span>
+        <div class="flex flex-col">
+          <InputMask id="end-date" v-model="endDate" v-bind="args" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const ThreeFields: StoryObj<typeof meta> = {
+  render: (args) => ({
+    components: { InputMask },
+    setup() {
+      const day = ref("");
+      const month = ref("");
+      const year = ref("");
+
+      return { args, day, month, year };
+    },
+    template: html`
+      <div class="flex flex-col gap-2">
+        <label for="date-input-group" class="mb-1 block">Datum</label>
+        <div id="date-input-group" class="flex items-center gap-2">
+          <div class="flex w-64 flex-col">
+            <InputMask
+              id="day-input"
+              v-model="day"
+              mask="99"
+              placeholder="TT"
+            />
+          </div>
+          <div class="flex w-64 flex-col">
+            <InputMask
+              id="month-input"
+              v-model="month"
+              mask="99"
+              placeholder="MM"
+            />
+          </div>
+
+          <div class="flex w-128 flex-col">
+            <InputMask
+              id="year-input"
+              v-model="year"
+              mask="9999"
+              placeholder="JJJJ"
+            />
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+export const FluidProp: StoryObj<typeof meta> = {
+  args: {
+    fluid: true,
+  },
+
+  render: (args) => ({
+    components: { InputMask, Fluid },
+    setup() {
+      return { args };
+    },
+    template: html`<InputMask id="basic" v-bind="args" />`,
+  }),
+};

src/primevue/inputMask/inputMask.ts

@@ -0,0 +1,21 @@
+import { InputMaskPassThroughOptions } from "primevue/inputmask";
+import { tw } from "@/lib/tags.ts";
+import { base, small } from "../inputText/inputText";
+
+const fluid = tw`w-full`;
+
+const inputMask: InputMaskPassThroughOptions = {
+  pcInputText: {
+    root: ({ props }) => {
+      return {
+        class: {
+          [base]: true,
+          [small]: true,
+          [fluid]: !!props.fluid,
+        },
+      };
+    },
+  },
+};
+
+export default inputMask;

src/primevue/inputText/inputText.ts

@@ -2,7 +2,7 @@ import { tw } from "@/lib/tags";
 import { InputTextPassThroughOptions } from "primevue/inputtext";
 import "./inputText.css";
 // Base
-export const base = tw`border-2 border-blue-800 bg-white outline-4 -outline-offset-4 outline-blue-800 placeholder:text-gray-900 read-only:cursor-not-allowed read-only:border-blue-300 read-only:bg-blue-300 hover:outline focus:outline disabled:border-blue-500 disabled:bg-white disabled:text-blue-500 disabled:outline-none aria-[invalid]:border-red-800 aria-[invalid]:bg-red-200 aria-[invalid]:outline-red-800 aria-[invalid]:disabled:outline-none`;
+export const base = tw`border-2 border-blue-800 bg-white outline-4 -outline-offset-4 outline-blue-800 placeholder:text-gray-600 read-only:cursor-not-allowed read-only:border-blue-300 read-only:bg-blue-300 hover:outline focus:outline disabled:border-blue-500 disabled:bg-white disabled:text-blue-500 disabled:outline-none aria-[invalid]:border-red-800 aria-[invalid]:bg-red-200 aria-[invalid]:outline-red-800 aria-[invalid]:disabled:outline-none`;
 
 // Sizes
 export const small = tw`ris-body2-regular h-48 px-16 py-4`;