@dpa-id-components/dpa-shared-components 16.0.1 → 17.0.0

package/src/components/UiCheckBox/UiCheckBox.vue

@@ -0,0 +1,104 @@
+<template>
+  <label
+    class="text-small flex flex-col"
+    :class="
+      cn(
+        disabled ? 'text-gray-400' : 'cursor-pointer text-gray-900',
+        $attrs.class as HTMLAttributes['class'],
+      )
+    "
+    :data-testid="$attrs['data-testid']"
+  >
+    <input
+      :id="id"
+      class="peer relative size-0 appearance-none self-center focus:outline-none"
+      :class="size"
+      type="checkbox"
+      :checked="checked"
+      :aria-checked="checked"
+      :disabled="disabled"
+      :aria-invalid="'errors' in $slots || showError"
+      :aria-errormessage="
+        'errors' in $slots || showError ? `${id}-errors` : undefined
+      "
+      v-bind="{ ...$attrs, class: null, 'data-testid': null }"
+      @change="handleChange"
+    />
+    <span
+      class="flex items-center before:box-border before:inline-block before:shrink-0 before:border-2 before:transition-colors before:content-[''] after:absolute after:block peer-checked:opacity-100 peer-checked:after:content-[url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyMCAyMCcgZmlsbD0nbm9uZSc+PHJlY3QgLz48cGF0aCBmaWxsLXJ1bGU9J2V2ZW5vZGQnIGNsaXAtcnVsZT0nZXZlbm9kZCcgZD0nTTguMjE5NjUgMTVDNy45ODk2NSAxNSA3Ljc2OTY1IDE0LjkwNSA3LjYxMjE1IDE0LjczNzVMMy41NTk2NSAxMC40MjE3QzMuMjQzODEgMTAuMDg2NyAzLjI2MTMxIDkuNTU5MTggMy41OTYzMSA5LjI0NDE4QzMuOTMyMTUgOC45MjkxOCA0LjQ1OTY1IDguOTQ1ODUgNC43NzM4MSA5LjI4MDg1TDguMjExMzEgMTIuOTRMMTUuMjE4IDUuMjcxNjhDMTUuNTI5NiA0LjkzMDg1IDE2LjA1NjMgNC45MDgzNSAxNi4zOTYzIDUuMjE4MzVDMTYuNzM1NSA1LjUyODM1IDE2Ljc1ODggNi4wNTU4NSAxNi40NDg4IDYuMzk1MDFMOC44MzQ2NSAxNC43MjgzQzguNjc4ODEgMTQuOSA4LjQ1NzE1IDE0Ljk5ODMgOC4yMjU0OCAxNUg4LjIxOTY1WicgZmlsbD0nd2hpdGUnLz48L3N2Zz4=)]"
+      :class="{
+        'before:size-5 after:size-5': size === 'medium',
+        'before:size-4 after:size-4': size === 'small',
+        'before:border-blue-default peer-checked:before:bg-blue-default peer-hover:before:border-blue-dark peer-hover:peer-checked:before:bg-blue-dark':
+          color === 'blue',
+        'before:border-gray-800 peer-checked:before:bg-gray-800 peer-hover:before:border-gray-900 peer-hover:peer-checked:before:bg-gray-900':
+          color === 'gray',
+        'before:border-gray-500 peer-checked:before:bg-gray-500': disabled,
+        'before:mr-2': !!$slots.default,
+      }"
+    >
+      <slot />
+    </span>
+
+    <div
+      v-if="'errors' in $slots || showError"
+      :id="`${id}-errors`"
+      data-testid="errorMessage"
+      class="relative order-last mt-2 bg-alert-red-default px-4 py-1 text-xs font-medium leading-normal text-white transition-all duration-300 ease-in-out"
+    >
+      <slot v-if="'errors' in $slots" name="errors" />
+
+      <template v-else>
+        {{ errorMessage }}
+      </template>
+    </div>
+  </label>
+</template>
+
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from "vue";
+import { v4 as uuidv4 } from "uuid";
+
+import { cn } from "../../utils/cn.js";
+
+const emit = defineEmits<{
+  change: [boolean];
+}>();
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+defineSlots<{
+  default: () => any;
+  errors?: () => any;
+}>();
+
+const props = withDefaults(
+  defineProps<{
+    id?: string;
+    color?: "blue" | "gray";
+    size?: "small" | "medium";
+    disabled?: boolean;
+    checked?: boolean;
+    showError?: boolean;
+    errorMessage?: string;
+  }>(),
+  {
+    id: undefined,
+    color: "blue",
+    size: "medium",
+    disabled: false,
+    checked: false,
+    showError: false,
+    errorMessage: "",
+  },
+);
+
+const id = computed(() => props.id || `id-${uuidv4()}`);
+
+const handleChange = (e: Event) => {
+  const input = e.target as HTMLInputElement;
+  emit("change", input.checked);
+};
+</script>

package/src/components/UiCheckBoxGroup/README.md

@@ -0,0 +1,33 @@
+# @dpa-shared-components/UiCheckBoxGroup
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiCheckBoxGroup -->
+
+<template>
+  <UiCheckBoxGroup :item="checkboxes" :first-entry-checks-all="true" @item-checked="handleEvent"
+                   @checked-all="handleEvent" />
+</template>
+
+<script setup lang="ts">
+    import { UiCheckBoxGroup } from "@dpa-id-components/dpa-shared-components";
+</script>
+
+```
+### Props
+
+The "CheckboxItem"-Type is used. Consisting of "name", "isChecked" and "iconName"
+
+| Name                  | Type           | Default | Description                                                                                      |
+|-----------------------|----------------|---------|--------------------------------------------------------------------------------------------------|
+| `item`                | `CheckboxItem` | ``      | Adds the value to the checkbox, consiting of name, isChecked and iconName  ("CheckboxItem"-Type) |
+| `firstEntryChecksAll` | `Boolean`      | `false` | Wether the first item checks all the boxes                                                       |
+
+### Events
+
+| Name           | Type | Description                                  |
+|----------------|------|----------------------------------------------|
+| `checked-all`  | `boolean`        | Emitted when all items are selected          |
+| `input`        | `CheckboxItem[]` |  |
+| `item-checked` | `CheckboxItem`   | Emitted when each individual item is checked |

package/src/components/UiCheckBoxGroup/UiCheckBoxGroup.vue

@@ -0,0 +1,89 @@
+<template>
+  <ui-list class="grid grid-cols-2 flex-wrap border-none pt-2 lg:flex lg:pt-0">
+    <ui-list-item
+      v-for="(entry, index) in checkboxItems"
+      :key="entry.name"
+      :is-checked="entry.isChecked"
+      class="flex h-8 items-center border-none py-2 text-sm shadow-none lg:py-3"
+      check-box-menu
+      :label="entry.name"
+      :disabled="disabled"
+      :icon-name="entry.iconName"
+      @list-item-click="toggle(index)"
+      >{{ entry.name }}
+    </ui-list-item>
+  </ui-list>
+</template>
+
+<script setup lang="ts">
+import UiList from "../UiList/UiList.vue";
+import UiListItem from "../UiListItem/UiListItem.vue";
+import { computed, ref, watchEffect } from "vue";
+import type { UiIconName } from "../UiIcon/UiIcon.vue";
+
+const emit = defineEmits<{
+  "checked-all": [boolean];
+  input: [CheckboxItem[]];
+  "item-checked": [CheckboxItem];
+}>();
+
+export type CheckboxItem = {
+  name: string;
+  isChecked: boolean;
+  iconName?: UiIconName;
+};
+
+const props = withDefaults(
+  defineProps<{
+    item?: CheckboxItem[];
+    firstEntryChecksAll?: boolean;
+    disabled?: boolean;
+  }>(),
+  {
+    item: () => [],
+    firstEntryChecksAll: false,
+    disabled: false,
+  },
+);
+
+const checkboxItems = ref<CheckboxItem[]>(props.item);
+
+watchEffect(() => {
+  checkboxItems.value = props.item;
+});
+
+const areAllChecked = computed(() => {
+  const checkboxEntries = checkboxItems.value.slice(1);
+  return checkboxEntries.every((entry: CheckboxItem) => entry.isChecked);
+});
+
+const toggleAll = () => {
+  checkboxItems.value = checkboxItems.value.map((entry: CheckboxItem) => {
+    const isChecked = !checkboxItems.value[0].isChecked;
+    return {
+      ...entry,
+      isChecked,
+    };
+  });
+  emit("checked-all", checkboxItems.value[0].isChecked);
+  emit("input", checkboxItems.value);
+};
+
+const toggle = (index: number) => {
+  // With List Item Click we are overriding the normal checkbox `input` event, hence the disabled attribute has no effect
+  if (props.disabled) {
+    return;
+  }
+  if (index === 0 && props.firstEntryChecksAll) {
+    toggleAll();
+  } else {
+    checkboxItems.value[index].isChecked =
+      !checkboxItems.value[index].isChecked;
+    if (props.firstEntryChecksAll) {
+      checkboxItems.value[0].isChecked = areAllChecked.value;
+    }
+  }
+  emit("item-checked", checkboxItems.value[index]);
+  emit("input", checkboxItems.value);
+};
+</script>

package/src/components/UiChip/README.md

@@ -0,0 +1,30 @@
+# @dpa-shared-components/UiChip
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiChip -->
+<template>
+    <UiChip>Chip Content</UiChip>
+</template>
+
+<script>
+    import {UiChip} from "@dpa-id-components/dpa-shared-components";
+</script>
+```
+
+## API
+
+### Props
+
+| Name          | Type                                       | Default | Description                                         |
+|---------------|--------------------------------------------|---------|-----------------------------------------------------|
+| `cursorStyle` | `"default" &#124; "text" &#124; "pointer"` | `text`  | Determines the styling of the cursor while hovering |
+| `isVisible`   | `Boolean`                                  | `true`  | Sets display hidden if false, otherwise inline-flex |
+| `size`        | `"small" &#124; "medium" &#124; "big"`     | `big`   | Determines the height and font-size                 |
+
+### Slots
+
+| Name      | Description                               |
+|-----------|-------------------------------------------|
+| `default` | slot for the rendering the chip's content |

package/src/components/UiChip/UiChip.vue

@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="whitespace-no-wrap min-w-max items-center rounded-full bg-gray-300 align-middle leading-normal text-gray-900"
+    :class="[isVisible ? 'inline-flex' : 'hidden', sizeClass, cursorStyle]"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    cursorStyle?: "default" | "text" | "pointer";
+    isVisible?: boolean;
+    size?: "small" | "medium" | "big";
+  }>(),
+  {
+    cursorStyle: "text",
+    isVisible: true,
+    size: "big",
+  },
+);
+
+const cursorStyle = computed(() => {
+  const cursorStyles: Record<string, string> = {
+    default: "cursor-default",
+    text: "cursor-text",
+    pointer: "cursor-pointer",
+  };
+
+  return cursorStyles[props.cursorStyle];
+});
+
+const sizeClass = computed(() => {
+  const sizeClasses: Record<string, string> = {
+    small: "h-5 px-1 text-xs",
+    medium: "h-6 px-2 text-sm",
+    big: "h-8 px-2 text-sm",
+  };
+
+  return sizeClasses[props.size];
+});
+</script>

package/src/components/UiCollapseNavigation/README.md

@@ -0,0 +1,35 @@
+# @dpa-shared-components/UiCollapseNavigation
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiCollapseNavigation -->
+<template>
+  <UiCollapseNavigation headline="Menu eins">
+    <UiFilterBadgeButton label="test eins" />
+    <UiFilterBadgeButton label="test zwei" />
+    <UiFilterBadgeButton label="test drei" />
+  </UiCollapseNavigation>
+</template>
+
+<script>
+  import UiCollapseNavigation from "./UiCollapseNavigation.vue";
+</script>
+```
+
+## API
+
+### Props
+
+| Name            | Type    | Default | Description                       |
+|-----------------|---------|---------|-----------------------------------|
+| `headline`      | string  | ''      | Headline of the menu              |
+| `borderTop`     | boolean | true    | Has top border                    |
+| `openAsDefault` | boolean | true    | defines default state of the menu |
+
+
+### Slots
+
+| Name      | Description                |
+|-----------|----------------------------|
+| `default` | slot for the menus content |

package/src/components/UiCollapseNavigation/UiCollapseNavigation.vue

@@ -0,0 +1,59 @@
+<template>
+  <div :class="hasBorderTop ? 'border-t-[1px] border-t-gray-300' : ''" />
+  <UiButton
+    color="transparent"
+    class="flex w-full justify-between border-none"
+    @click="toggleMenuHandler"
+  >
+    <h3 class="text-xs font-semibold uppercase tracking-widest text-gray-700">
+      {{ headline }}
+    </h3>
+    <UiIcon
+      name="chevron-down"
+      class="rounded-full text-gray-700 transition-transform duration-500 hover:bg-gray-300"
+      :class="{ 'rotate-180': openMenu }"
+    />
+  </UiButton>
+  <transition
+    enter-active-class="duration-200"
+    enter-from-class="transform -translate-y-[20px] opacity-0"
+    enter-to-class="transform translate-y-0 opacity-1"
+    leave-active-class="duration-200"
+    leave-from-class="transform translate-y-0 opacity-1"
+    leave-to-class="transform -translate-y-[20px] opacity-0"
+  >
+    <div v-if="openMenu">
+      <slot />
+    </div>
+  </transition>
+</template>
+<script setup lang="ts">
+import UiIcon from "../UiIcon/UiIcon.vue";
+import UiButton from "../UiButton/UiButton.vue";
+import { ref, watchEffect } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    headline?: string;
+    hasBorderTop?: boolean;
+    openAsDefault?: boolean;
+  }>(),
+  {
+    headline: "",
+    hasBorderTop: true,
+    openAsDefault: true,
+  },
+);
+
+const openMenu = ref();
+
+watchEffect(() => {
+  openMenu.value = props.openAsDefault;
+});
+
+const toggleMenuHandler = () => {
+  openMenu.value = !openMenu.value;
+};
+
+defineExpose({ openMenu });
+</script>

package/src/components/UiColorPicker/README.md

@@ -0,0 +1,31 @@
+# @dpa-shared-components/UiColorPicker
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiColorPicker -->
+<template>
+    <label for="colorPicker">Farbe wählen</label>
+    <UiColorPicker id="colorPicker" v-model="colorValue" />
+</template>
+
+<script setup>
+import { UiColorPicker } from "@dpa-id-components/dpa-shared-components";
+
+const colorValue = ref("");
+</script>
+```
+
+## API
+
+### Props
+
+| Name          | Type        | Default                              | Description                                         |
+|---------------|-------------|--------------------------------------|-----------------------------------------------------|
+| `modelValue`  | `String`    | `"#e53935"` (see `./lib/colors.ts`)  | Color code in hexadecimal syntax                    |
+
+### Events
+
+| Name                | Type                                        | Description                                       |
+|---------------------|---------------------------------------------|---------------------------------------------------|
+| `update:modelValue` | `string` (color code in hexadecimal syntax) | Emitted when a color has been selected or entered |

package/src/components/UiColorPicker/UiColorPicker.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="flex">
+    <div
+      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}`);
+      "
+    >
+      <UiIcon
+        v-if="value === hexColor"
+        id="cp-checmark"
+        name="checkmark"
+        class="-rotate-45"
+        :class="checkmarkIconColor"
+        size="xs"
+      />
+    </div>
+    <div
+      class="UiColorPicker-inputWrapper flex size-4 rotate-45 items-center justify-center"
+      :style="{
+        backgroundColor: !COLORS.includes(value) ? customInputValue : '',
+      }"
+      :aria-checked="!COLORS.includes(value)"
+    >
+      <input
+        v-model="customInputValue"
+        type="color"
+        class="UiColorPicker-input absolute z-10 size-inherit cursor-pointer bg-gray-200 opacity-0"
+      />
+      <UiIcon
+        v-if="COLORS.includes(value)"
+        name="color-palette"
+        size="medium"
+        class="-rotate-45"
+      />
+      <UiIcon
+        v-else
+        id="cp-checmark"
+        name="checkmark"
+        class="-rotate-45"
+        :class="checkmarkIconColor"
+        size="xs"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import UiIcon from "../UiIcon/UiIcon.vue";
+import { watch } from "vue";
+import { COLORS } from "./lib/colors.js";
+import Color from "color";
+
+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 checkmarkIconColor = computed(() => {
+  const selectedColor = Color(`#${value.value}`);
+  const contrastGray = selectedColor.contrast(Color.rgb(77, 77, 77));
+  const contrastWhite = selectedColor.contrast(Color("white"));
+
+  if (contrastWhite >= contrastGray) {
+    return "text-white";
+  }
+  return "text-gray-800";
+});
+</script>

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

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

package/src/components/UiDatePicker/README.md

@@ -0,0 +1,67 @@
+# @dpa-shared-components/UiDatePicker
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiCard -->
+<template>
+    <UiDatePicker/>
+</template>
+
+<script setup lang="ts">
+    import {UiDatePicker} from "@dpa-id-components/dpa-shared-components";
+</script>
+```
+
+## API
+
+### 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                    |
+
+### Events
+
+| Name                         | Type                     | Description                                       |
+|------------------------------|--------------------------|---------------------------------------------------|
+| `date-changed`               | `Date` or `[Date, Date]` | Emitted when the a date or date range is selected |
+| `datepickerQuickfilterClick` | `string`                 |  |
+| `open`                       | none                     | Emitted when the datepicker opens                 |
+| `close`                      | none                     | Emitted when the datepicker closes                |
+| `reset`                      | none                     |  |
+
+### 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. |