@dpa-id-components/dpa-shared-components 21.1.1 → 22.0.0-next.1

package/src/components/UiColorPicker/UiColorPicker.vue

@@ -1,47 +1,42 @@
 <template>
-  <div class="flex">
-    <div
+  <div class="flex gap-3">
+    <button
       v-for="(hexColor, index) of COLORS"
-      :id="`color-${hexColor}`"
       :key="`ui-cp-${index}`"
-      class="mr-3 flex size-4 rotate-45 cursor-pointer items-center justify-center"
-      :style="{ backgroundColor: `#${hexColor}` }"
-      :aria-checked="value === hexColor"
-      @click="
-        value = hexColor;
-        emit('update:modelValue', `#${hexColor}`);
-      "
+      :data-testid="`color-btn-${hexColor.substring(1)}`"
+      class="flex size-4 flex-none rotate-45 items-center justify-center"
+      :style="{ backgroundColor: hexColor }"
+      @click="model = hexColor"
     >
       <UiIcon
-        v-if="value === hexColor"
-        id="cp-checmark"
+        v-if="model === hexColor"
+        id="cp-checkmark"
         name="checkmark"
         class="-rotate-45"
         :class="checkmarkIconColor"
         size="xs"
       />
-    </div>
+    </button>
     <div
-      class="UiColorPicker-inputWrapper flex size-4 rotate-45 items-center justify-center"
+      class="UiColorPicker-inputWrapper flex size-4 flex-none rotate-45 items-center justify-center"
       :style="{
-        backgroundColor: !COLORS.includes(value) ? customInputValue : '',
+        backgroundColor: !COLORS.includes(model) ? model : '',
       }"
-      :aria-checked="!COLORS.includes(value)"
     >
       <input
-        v-model="customInputValue"
+        v-model="model"
         type="color"
-        class="UiColorPicker-input absolute z-10 size-inherit cursor-pointer bg-gray-200 opacity-0"
+        class="UiColorPicker-input absolute z-10 size-inherit cursor-pointer opacity-0"
       />
       <UiIcon
-        v-if="COLORS.includes(value)"
+        v-if="COLORS.includes(model)"
         name="color-palette"
-        size="medium"
+        size="md"
         class="-rotate-45"
       />
       <UiIcon
         v-else
-        id="cp-checmark"
+        id="cp-checkmark"
         name="checkmark"
         class="-rotate-45"
         :class="checkmarkIconColor"
@@ -53,56 +48,22 @@
 
 <script setup lang="ts">
 import Color from "color";
-import { computed, ref, watch } from "vue";
+import { computed } from "vue";
 
 import UiIcon from "../UiIcon/UiIcon.vue";
 
 import { COLORS } from "./lib/colors.ts";
 
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string;
-  }>(),
-  {
-    modelValue: `#${COLORS[0]}`,
-  },
-);
-
-const emit = defineEmits<{
-  "update:modelValue": [string];
-}>();
-
-const value = ref(COLORS[0]);
-watch(
-  () => props.modelValue,
-  () => {
-    const unHexed = props.modelValue?.substring(1);
-    value.value = unHexed || COLORS[0];
-    if (!unHexed) {
-      emit("update:modelValue", `#${value.value}`);
-    }
-  },
-  { immediate: true },
-);
-
-const customInputValue = computed({
-  get() {
-    return `#${value.value}`;
-  },
-  set(hexColor) {
-    value.value = hexColor.substring(1);
-    emit("update:modelValue", `#${value.value}`);
-  },
-});
+const model = defineModel<string>({ default: COLORS[0] });
 
 const checkmarkIconColor = computed(() => {
-  const selectedColor = Color(`#${value.value}`);
+  const selectedColor = Color(model.value);
   const contrastGray = selectedColor.contrast(Color.rgb(77, 77, 77));
   const contrastWhite = selectedColor.contrast(Color("white"));
 
   if (contrastWhite >= contrastGray) {
-    return "text-white";
+    return "text-neutral";
   }
-  return "text-gray-800";
+  return "text-neutral-emphasis";
 });
 </script>

package/src/components/UiColorPicker/lib/colors.ts

@@ -1,11 +1,11 @@
 export const COLORS = [
-  "e53935",
-  "f50057",
-  "8e24aa",
-  "2196f3",
-  "00acc1",
-  "00897b",
-  "00e676",
-  "ffff00",
-  "ffb300",
+  "#e53935",
+  "#f5138d",
+  "#8e24aa",
+  "#2196f3",
+  "#00acc1",
+  "#00897b",
+  "#00e281",
+  "#f9f500",
+  "#ffb300",
 ];

package/src/components/UiDatePicker/README.md

@@ -2,14 +2,17 @@
 
 ## Usage
 
-```html
-<!-- SomeComponent.vue using UiCard -->
+```vue
 <template>
-    <UiDatePicker/>
+  <UiDatePicker v-model="date" />
 </template>
 
 <script setup lang="ts">
-    import {UiDatePicker} from "@dpa-id-components/dpa-shared-components";
+  import { ref } from "vue";
+  import { UiDatePicker } from "@dpa-id-components/dpa-shared-components";
+  import type { DateType } from "@dpa-id-components/dpa-shared-components";
+
+  const date = ref<DateType>();
 </script>
 ```
 
@@ -17,51 +20,70 @@
 
 ### Props
 
-| Name                      | Type                                      | Default                  | Description                                                                                                         |
-|---------------------------|-------------------------------------------|--------------------------|---------------------------------------------------------------------------------------------------------------------|
-| `quickFilterRanges`       | `PresetRange[]`                           | ``                       | Adds buttons for the quick filter area                                                                              |
-| `enableQuickfilterToggle` | `Boolean`                                 | `false`                  | Enable Quickfilter Menu toggle for mobile - should be set to false for desktop views                                |                                                                              |
-| `leftSidebar`             | `Boolean`                                 | `true`                   | Enebles quick filter area / side menu                                                                               |
-| `quickFilterHeadline`     | `String`                                  | `SCHNELLFILTER`          | Headline for quickfilter menu                                                                                       |
-| `roundedBorder`           | `Boolean`                                 | `true`                   | Rounds the edges of the Dialog                                                                                      |
-| `enableTimePicker`        | `Boolean`                                 | `false`                  | Enables a time picker                                                                                               |
-| `multiCalendars`          | `Boolean`                                 | `true`                   | Shows just one or more months                                                                                       |
-| `inputLabel`              | `String`                                  | `Zeitraum`               | placeholder in the input                                                                                            |
-| `selectedDate`            | `date[] or null`                          | null                     | predefined date has to have the right value coresponding to datae range or single date picker!                      |
-| `actionArea`              | `Boolean`                                 | `false`                  | enebles cta area                                                                                                    |
-| `cancel`                  | `string`                                  | `Abbrechen`              | cancel cta label                                                                                                    |
-| `closeOnScroll`           | `boolean`                                 | `false`                  | Close datepicker Menu on scroll                                                                                     |
-| `submit`                  | `string`                                  | `Hinzufügen`             | submit cta label                                                                                                    |
-| `definesRange`            | `Boolean`                                 | `true`                   | enables range picker mode                                                                                           |
-| `autoApply`               | `Boolean`                                 | `true`                   | clicking date becomes selecting date                                                                                |
-| `closeOnAutoApply`        | `Boolean`                                 | `true`                   | Close datepicker menu on page scroll                                                                                |
-| `autoPosition`            | `Boolean`                                 | `false`                  | will position based on viewport                                                                                     |
-| `dateRangeStart`          | `Number`                                  | `1948`                   | defines the startyear of the daterange                                                                              |
-| `minDate`                 | `Boolean`                                 | `new Date("1949-01-01")` | defined the start of the datepicker range                                                                           |
-| `maxDate`                 | `Date`                                    | `null`                   | defines the end of the datepicker range                                                                             |
-| `autoRange`               | `number or Null`                          | `Null`                   | defines dayrange / amount of selected dates                                                                         |
-| `maxRange`                | `number`                                  | `null`                   | defined the maximum of the selectable date range                                                                    |
-| `activeState`             | `Boolean`                                 | `false`                  | delivers our trusty blue button when activated (like filter button)                                                 |
-| `disabledState`           | `Boolean`                                 | `false`                  | disables date picker and adds disabled stylings                                                                     |
-| `customFormatCallback`    | `(value: Date or [Date, Date]) => string` | `() => null`             | optional callback function that must returns a formatted date string or null to use default formatting              |
-| `inputLabel`              | `String`                                  | `""`                     | label text for square input boxes                                                                                   |
-| `actionAreaExtraContent`  | `String`                                  | `""`                     | optional text content to display on the bottom of the DatePicker. Will be overridden when slot `actionArea` is used |
-| `iconLeft`                | `UiIconName`                              | `null`                   | If you want an icon left of the title put in icon name here.                                                        |
-| `utc`                     | `Boolean`                                 | `true`                   | Set if output dates should be converted to UTC ot local timezone.                                                   |
-| `teleport`                | `boolean or string`                       | `null`                   | Teleports the datepicker to the body or provided selector, can solve issues with hidden overflow                    |
+
+| Name                     | Type                                     | Default                  | Description                                                                                                 |
+|--------------------------|------------------------------------------|--------------------------|-------------------------------------------------------------------------------------------------------------|
+| `autoApply`              | `boolean`                                | `true`                   | Clicking a date immediately selects it without requiring confirmation                                       |
+| `closeOnAutoApply`       | `boolean`                                | `true`                   | Close the datepicker menu after auto-applying a selection                                                   |
+| `inline`                 | `boolean`                                | `false`                  | Renders the datepicker inline instead of as a popup                                                         |
+| `disabled`               | `boolean`                                | `false`                  | Disables the datepicker and applies disabled styling                                                        |
+| `locale`                 | `Locale`                                 | `de`                     | date-fns locale used for formatting and translations                                                        |
+| `utc`                    | `boolean`                                | `false`                  | Sets Timezone to utc or not                                                                                 |
+| `teleport`               | `boolean \| string \| HTMLElement`       | `false`                  | Teleports the datepicker menu to the body or a provided selector. Useful for solving hidden overflow issues |
+| `minDate`                | `Date \| string \| number`               | `new Date("1948-01-01")` | Minimum selectable date                                                                                     |
+| `maxDate`                | `Date \| string \| number`               | `undefined`              | Maximum selectable date                                                                                     |
+| `multiCalendars`         | `boolean`                                | `false`                  | Shows multiple calendar months side by side                                                                 |
+| `monthPicker`            | `boolean`                                | `false`                  | Switches to month-only picker mode. Disables range selection                                                |
+| `enableTimePicker`       | `boolean`                                | `false`                  | Enables a time picker alongside the date picker                                                             |
+| `autoPosition`           | `boolean`                                | `true`                   | Automatically repositions the menu based on viewport (flip & shift)                                         |
+| `autoRange`              | `string \| number`                       | `undefined`              | Automatically selects a range of N days from the clicked date                                               |
+| `maxRange`               | `string \| number`                       | `undefined`              | Maximum number of days allowed in a selected range                                                          |
+| `triggerWidth`           | `full \| fit`                            | `full`                   | Trigger button has either w-full applied ot w-fit                                                           |
+| `triggerPlaceholderText` | `string`                                 | `undefined`              | Placeholder text shown in the trigger button when no date is selected                                       |
+| `customFormatCallback`   | `(date: Date \| [Date, Date]) => string` | `undefined`              | Custom callback for formatting the displayed date string in the input                                       |
+| `leftTriggerIcon`        | `UiIconName`                             | `undefined`              | Icon displayed to the left of the label in the trigger button                                               |
+| `leftSidebar`            | `boolean`                                | `false`                  | Enables the quick filter sidebar                                                                            |
+| `quickFilterHeadline`    | `string`                                 | `undefined`              | Headline text for the quick filter sidebar                                                                  |
+| `quickFilterRanges`      | `PresetRange[]`                          | `[]`                     | Preset date ranges displayed as buttons in the quick filter sidebar                                         |
+| `actionExtraContent`     | `string`                                 | `undefined`              | Text content displayed at the bottom of the datepicker. Overridden when the `action-extra` slot is used     |
+
+### Model
+
+| Name         | Type       | Description                                                                                        |
+|--------------|------------|----------------------------------------------------------------------------------------------------|
+| `modelValue` | `DateType` | The selected date. Supports `Date`, `[Date, Date]`, `string`, or `{ month: number; year: number }` |
 
 ### Events
 
-| Name                  | Type                     | Description                                                         |
-|-----------------------|--------------------------|---------------------------------------------------------------------|
-| `date-changed`        | `Date` or `[Date, Date]` | Emitted when the a date or date range is selected from the calendar |
-| `quickfilter-changed` | `PresetRange`            | Emitted when a quickFilter is selected                              |
-| `open`                | none                     | Emitted when the datepicker opens                                   |
-| `close`               | none                     | Emitted when the datepicker closes                                  |
-| `reset`               | none                     |                                                                     |
+| Name                   | Payload       | Description                                    |
+|------------------------|---------------|------------------------------------------------|
+| `update:modelValue`    | `DateType`    | Emitted when a date or date range is selected  |
+| `quick-filter-changed` | `PresetRange` | Emitted when a quick filter preset is selected |
+| `open`                 | —             | Emitted when the datepicker menu opens         |
+| `closed`               | —             | Emitted when the datepicker menu closes        |
+| `start-range`          | `Date`        | Emitted when first date of range is selected   |
+| `end-range`            | `Date`        | Emitted when last date of range is selected    |
 
 ### Slots
 
-| Name         | Description                                                                                                                          |
-|--------------|--------------------------------------------------------------------------------------------------------------------------------------|
-| `actionArea` | When you need more then the string you can set via the prop `actionAreaExtraContent` you can use this slot to add whatever you like. |
+| Name           | Slot Props                                             | Description                                                                                      |
+|----------------|--------------------------------------------------------|--------------------------------------------------------------------------------------------------|
+| `action-row`   | `ActionRowSlotProps`                                   | Custom action row at the bottom of the datepicker (e.g. confirm/cancel buttons)                  |
+| `action-extra` | `{ selectCurrentDate: () => void, reset: () => void }` | Additional content above the action row. Falls back to `actionExtraContent` prop if not provided |
+
+
+### Types
+
+```typescript
+export interface PresetRange {
+  label: string;
+  range: [Date, Date] | { year: number; month: number };
+  name?: string;
+}
+
+export type DateType =
+  | Date
+  | [Date, Date]
+  | string
+  | { month: number; year: number };
+```