feat(playground): style the combobox

formwerkjs · Jan 17, 2025 · 8c03ef6 · 8c03ef6
1 parent 952f0d1
commit 8c03ef6
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 14 deletions.
diff --git a/packages/playground/index.html b/packages/playground/index.html
@@ -7,7 +7,7 @@
     <title>Vite + Vue + TS</title>
   </head>
   <body>
-    <div id="app" class="bg-gradient-to-t from-zinc-900 to-zinc-800 h-full w-full text-white"></div>
+    <div id="app" class="bg-black h-full w-full text-white flex items-center justify-center"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/packages/playground/src/components/ComboBox.vue b/packages/playground/src/components/ComboBox.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts" generic="TOption extends { label: string; value: string }, TValue">
+import { useId } from 'vue';
 import { useComboBox, ComboBoxProps, useDefaultFilter } from '@formwerk/core';
 import Option from './OptionItem.vue';
 
@@ -8,6 +9,8 @@ interface Props extends ComboBoxProps<TOption, TValue> {
 
 const props = defineProps<Props>();
 
+const anchorId = `--${useId()}`;
+
 const { contains } = useDefaultFilter({
   caseSensitive: false,
 });
@@ -21,23 +24,22 @@ const {
   errorMessage,
   descriptionProps,
   isListEmpty,
-  comboBoxGroupProps,
 } = useComboBox(props, {
   filter: contains,
 });
 </script>
 
 <template>
   <div class="select-field">
-    <p v-bind="labelProps">{{ label }}</p>
+    <label v-bind="labelProps">{{ label }}</label>
 
-    <div class="inline-flex items-center gap-2" v-bind="comboBoxGroupProps">
+    <div class="inline-flex items-center gap-2 trigger">
       <input v-bind="inputProps" type="text" />
 
       <button v-bind="buttonProps">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
           <path
-            d="M184.49,167.51a12,12,0,0,1,0,17l-48,48a12,12,0,0,1-17,0l-48-48a12,12,0,0,1,17-17L128,207l39.51-39.52A12,12,0,0,1,184.49,167.51Zm-96-79L128,49l39.51,39.52a12,12,0,0,0,17-17l-48-48a12,12,0,0,0-17,0l-48,48a12,12,0,0,0,17,17Z"
+            d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"
           ></path>
         </svg>
       </button>
@@ -57,19 +59,61 @@ const {
 </template>
 
 <style scoped>
+label {
+  @apply block mb-1 w-full font-semibold text-lg text-white;
+}
+
+.trigger {
+  @apply max-w-xs pr-4 rounded-md border-2 border-transparent w-full bg-zinc-800 focus-within:bg-zinc-900 focus-within:outline-none transition-colors duration-200 focus-within:border-emerald-500 disabled:cursor-not-allowed text-white font-medium;
+}
+
+input {
+  @apply h-full py-3 pl-4 bg-transparent focus:outline-none w-full;
+}
+
 button {
+  @apply text-white;
+
   svg {
-    width: 16px;
-    height: 16px;
-    margin-left: auto;
+    @apply w-5 h-5 text-white fill-current;
   }
 }
 
 [popover] {
+  @apply bg-zinc-800 rounded-md;
   position-area: bottom;
+  position-anchor: v-bind(anchorId);
   inset: 0;
   margin: 0;
-  margin-top: 2px;
-  background: black;
+  margin-top: 4px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 300px;
+  scrollbar-color: #333 #111;
+  scrollbar-width: thin;
+  width: anchor-size(width);
+
+  transition:
+    display 250ms allow-discrete,
+    overlay 250ms allow-discrete,
+    opacity 250ms ease-in-out,
+    transform 250ms ease-in-out;
+
+  opacity: 0;
+  transform: translateY(-10px) scale(0.95);
+
+  &:popover-open {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+
+    @starting-style {
+      opacity: 0;
+      transform: translateY(-10px) scale(0.95);
+    }
+  }
+}
+
+.trigger {
+  anchor-name: v-bind(anchorId);
 }
 </style>
diff --git a/packages/playground/src/components/OptionItem.vue b/packages/playground/src/components/OptionItem.vue
@@ -14,18 +14,22 @@ const { optionProps } = useOption(props);
 
 <style scoped>
 .option {
-  @apply border border-transparent select-none text-white font-normal cursor-pointer;
+  @apply border-2 border-transparent select-none text-white font-normal cursor-pointer;
 
   &:focus {
     @apply bg-emerald-500 outline-none text-red-500;
   }
 
   &[aria-selected='true'] {
-    @apply bg-emerald-500 text-white;
+    @apply border-emerald-500 text-white;
   }
 
   &[aria-checked='true'] {
-    @apply bg-purple-500 text-white;
+    @apply bg-emerald-500 text-white;
+
+    &[aria-selected='true'] {
+      @apply bg-purple-600 text-white;
+    }
   }
 }
 </style>
diff --git a/packages/playground/src/style.css b/packages/playground/src/style.css
@@ -10,7 +10,7 @@
 
 html,
 body {
-  font-family: 'Monaspace Neon Var';
+  /* font-family: 'Monaspace Neon Var'; */
   @apply h-full w-full;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,7 +10,7 @@ @@
     html,
     body {
-      font-family: 'Monaspace Neon Var';
+      /* font-family: 'Monaspace Neon Var'; */
       @apply h-full w-full;
     }
@@ Expand Down @@