feat(vue): dropdown wip

package.json

@@ -35,6 +35,10 @@
     "nr": "^0.1.0",
     "rimraf": "^6.0.1",
     "simple-git-hooks": "^2.11.1",
+    "stylelint": "^16.12.0",
+    "stylelint-config-property-sort-order-smacss": "^10.0.0",
+    "stylelint-config-standard-scss": "^14.0.0",
+    "stylelint-config-standard-vue": "^1.0.0",
     "tsup": "^8.3.5",
     "typescript": "^5.7.2"
   },

packages/celeste-vue/.styleci.yml

@@ -0,0 +1,13 @@
+php:
+  preset: laravel
+  disabled:
+    - unused_use
+  finder:
+    not-name:
+      - index.php
+      - server.php
+js:
+  finder:
+    not-name:
+      - webpack.mix.js
+css: true

packages/celeste-vue/.stylelintrc.cjs

@@ -0,0 +1,23 @@
+module.exports = {
+  extends: [
+    'stylelint-config-property-sort-order-smacss',
+    'stylelint-config-standard-vue',
+  ],
+  rules: {
+    'at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: [
+          'apply',
+          'config',
+          'layer',
+          'responsive',
+          'screen',
+          'tailwind',
+          'unocss',
+          'variants',
+        ],
+      },
+    ],
+  },
+};

packages/celeste-vue/package.json

@@ -21,7 +21,8 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@youcan/celeste-tokens": "workspace:*"
+    "@youcan/celeste-tokens": "workspace:*",
+    "radix-vue": "^1.9.12"
   },
   "devDependencies": {
     "@tsconfig/node20": "^20.1.4",

packages/celeste-vue/src/components/dropdown/dropdown-item.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue';
+import { ComboboxItem, useForwardPropsEmits } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<ComboboxItemEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ComboboxItem
+    v-bind="forwarded"
+    class="dropdown-item"
+  >
+    <slot />
+  </ComboboxItem>
+</template>
+
+<style>
+.dropdown-item {
+  padding: var(--spacing-8);
+  border-radius: var(--radius-8);
+  font: var(--typo-paragraph-latin-small);
+  color: var(--color-text-strong-950);
+  background: var(--color-bg-white-0);
+}
+
+.dropdown-item[data-highlighted] {
+  background: var(--color-bg-weak-50);
+}
+
+.dropdown-item[data-disabled] {
+  color: var(--color-icon-disabled-300);
+  pointer-events: none;
+}
+</style>

packages/celeste-vue/src/components/dropdown/dropdown-root.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue';
+import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+  open: true,
+  modelValue: '',
+});
+
+const emits = defineEmits<ComboboxRootEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ComboboxRoot
+    v-bind="forwarded"
+    class="bg-popover text-popover-foreground' h-full w-full flex flex-col overflow-hidden rounded-md"
+  >
+    <slot />
+  </ComboboxRoot>
+</template>
+
+<style>
+</style>

packages/celeste-vue/src/internal/dev.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
-
+import DropdownItem from '@/components/dropdown/dropdown-item.vue';
+import DropdownRoot from '@/components/dropdown/dropdown-root.vue';
 </script>
 
 <template>
   <div class="hi">
     hallo
+    <DropdownRoot>
+      <DropdownItem :value="1" />
+    </DropdownRoot>
   </div>
 </template>