From c7730902d85c4e86a16699bf35913fb0da4b9cae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl=20G=C3=B6decken?=
 <carl.goedecken@digitalservice.bund.de>
Date: Fri, 29 Nov 2024 11:32:31 +0100
Subject: [PATCH] feat(RisAutoComplete): add clear button, change styles

---
 package-lock.json                             | 11 +++++
 package.json                                  |  1 +
 .../RisAutoComplete/RisAutoComplete.vue       | 45 ++++++++++++-------
 .../RisGhostButton/RisGhostButton.vue         |  9 ++++
 src/primevue/autocomplete/autocomplete.ts     |  9 ++--
 5 files changed, 56 insertions(+), 19 deletions(-)
 create mode 100644 src/components/RisGhostButton/RisGhostButton.vue

diff --git a/package-lock.json b/package-lock.json
index 6809573..696945c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@digitalservice4germany/style-dictionary": "~2.0.0",
         "@eslint/compat": "~1.2.2",
         "@eslint/js": "~9.14.0",
+        "@iconify-json/ic": "^1.2.1",
         "@iconify-json/material-symbols": "~1.2.6",
         "@iconify-json/mdi": "~1.2.1",
         "@iconify/vue": "~4.1.2",
@@ -924,6 +925,16 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@iconify-json/ic": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@iconify-json/ic/-/ic-1.2.1.tgz",
+      "integrity": "sha512-UjL/bjJP/T5EV881+hTzcfTKVo0KEUjhnMiJcLtPzNgPtU2KZZmRx8BSKKR61H4CN/5FTEbyawGyG0aEt3SwGQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/material-symbols": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/@iconify-json/material-symbols/-/material-symbols-1.2.7.tgz",
diff --git a/package.json b/package.json
index 2af2fe4..03f6119 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "@digitalservice4germany/style-dictionary": "~2.0.0",
     "@eslint/compat": "~1.2.2",
     "@eslint/js": "~9.14.0",
+    "@iconify-json/ic": "^1.2.1",
     "@iconify-json/material-symbols": "~1.2.6",
     "@iconify-json/mdi": "~1.2.1",
     "@iconify/vue": "~4.1.2",
diff --git a/src/components/RisAutoComplete/RisAutoComplete.vue b/src/components/RisAutoComplete/RisAutoComplete.vue
index 0816226..176e01c 100644
--- a/src/components/RisAutoComplete/RisAutoComplete.vue
+++ b/src/components/RisAutoComplete/RisAutoComplete.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import IconChevron from "~icons/mdi/chevron-down";
+import IcOutlineClear from "~icons/ic/outline-clear?height=16";
 import AutoComplete, { type AutoCompleteProps } from "primevue/autocomplete";
+import RisGhostButton from "@/components/RisGhostButton/RisGhostButton.vue";
 import ProgressSpinner from "primevue/progressspinner";
 import { ref } from "vue";
 
@@ -74,6 +76,8 @@ const onUpdateInnerValue = (
   }
 };
 
+const onClear = () => onUpdateInnerValue("");
+
 const autoCompleteRef = ref<typeof AutoComplete | null>(null);
 defineExpose({ autoCompleteRef });
 </script>
@@ -84,40 +88,51 @@ defineExpose({ autoCompleteRef });
     v-bind="$attrs"
     :suggestions="props.suggestions"
     :model-value="innerValue"
-    @update:model-value="onUpdateInnerValue"
-    @option-select="(e) => (model = e.value.id)"
     :dropdown="props.dropdown"
-    :dropdownMode="props.dropdownMode"
+    :dropdown-mode="props.dropdownMode"
     :disabled="props.disabled"
-    :forceSelection="props.forceSelection"
+    :force-selection="props.forceSelection"
     :placeholder="props.placeholder"
-    :ariaLabel="props.ariaLabel"
-    :ariaLabelledby="props.ariaLabelledby"
+    :aria-label="props.ariaLabel"
+    :aria-labelledby="props.ariaLabelledby"
     :delay="props.delay"
-    :completeOnFocus="props.completeOnFocus"
+    :complete-on-focus="props.completeOnFocus"
     :typeahead="props.typeahead"
-    :scrollHeight="props.scrollHeight"
+    :scroll-height="props.scrollHeight"
     :loading="props.loading"
     :invalid="props.invalid"
-    :autoOptionFocus="props.autoOptionFocus"
-    :selectOnFocus="props.selectOnFocus"
+    :auto-option-focus="props.autoOptionFocus"
+    :select-on-focus="props.selectOnFocus"
     :fluid="true"
-    :optionDisabled="props.optionDisabled"
+    :option-disabled="props.optionDisabled"
     option-label="label"
     data-key="value"
+    @update:model-value="onUpdateInnerValue"
+    @option-select="(e) => (model = e.value.id)"
   >
     <template #loader>
-      <ProgressSpinner class="absolute inset-y-0 right-12 my-auto mr-2" />
+      <ProgressSpinner class="absolute inset-y-0 right-8 my-auto mr-1" />
     </template>
-    <template #dropdownicon>
-      <IconChevron />
+    <template #dropdown="slotProps">
+      <RisGhostButton
+        v-if="innerValue"
+        aria-label="Entfernen"
+        @click="onClear"
+      >
+        <IcOutlineClear />
+      </RisGhostButton>
+      <RisGhostButton @click="slotProps.toggleCallback">
+        <IconChevron />
+      </RisGhostButton>
     </template>
     <template #option="slotProps: { option: AutoCompleteSuggestion }">
       <div
         :data-variant="isActiveOption(slotProps.option) && 'active'"
         class="flex min-h-48 flex-col justify-center gap-2 border-l-4 border-transparent px-12 py-10 data-[variant=active]:border-blue-800 data-[variant=active]:bg-blue-200"
       >
-        <div class="ris-label1-regular">{{ slotProps.option.label }}</div>
+        <div class="ris-label1-regular">
+          {{ slotProps.option.label }}
+        </div>
         <div
           v-if="slotProps.option.secondaryLabel"
           class="ris-label2-regular text-gray-900"
diff --git a/src/components/RisGhostButton/RisGhostButton.vue b/src/components/RisGhostButton/RisGhostButton.vue
new file mode 100644
index 0000000..5ac8e75
--- /dev/null
+++ b/src/components/RisGhostButton/RisGhostButton.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <button
+    class="p-8 hover:bg-blue-100 hover:text-blue-800 focus-visible:bg-blue-800 focus-visible:text-white focus-visible:outline-none"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/src/primevue/autocomplete/autocomplete.ts b/src/primevue/autocomplete/autocomplete.ts
index a2185f1..2a61438 100644
--- a/src/primevue/autocomplete/autocomplete.ts
+++ b/src/primevue/autocomplete/autocomplete.ts
@@ -1,26 +1,27 @@
 import { AutoCompletePassThroughOptions } from "primevue/autocomplete";
 import { tw } from "@/lib/tags.ts";
-import { base, small } from "../inputText/inputText";
 
 const fluid = tw`w-full`;
 
 const autocomplete: AutoCompletePassThroughOptions = {
   root: ({ props }) => {
-    const base = tw`relative`;
+    const base = tw`flex border-2 border-blue-800 bg-white outline-4 -outline-offset-4 outline-blue-800 placeholder:text-gray-800 focus-within:outline hover:outline disabled:border-blue-500 disabled:bg-white disabled:text-blue-500 disabled:outline-none`;
+    const small = tw`ris-body2-regular h-48 py-4 pl-16 pr-4`;
 
     return {
       class: {
         [base]: true,
+        [small]: true,
         [fluid]: !!props.fluid,
       },
     };
   },
   pcInput: {
     root: ({ props }) => {
+      const focus = tw`focus-visible:outline-none`;
       return {
         class: {
-          [base]: true,
-          [small]: true,
+          [focus]: true,
           [fluid]: !!props.fluid,
         },
       };