feat(vue): add component accordion on vue (#221)

package.json

@@ -17,7 +17,7 @@
     "clean-jest": "jest --clearCache",
     "clean-lock": "rimraf ./pnpm-lock.yaml",
     "compile": "turbo compile --filter=!@openui-org/docs --filter=!@openui-org/storybook",
-    "build": "turbo build --filter=!@openui-org/docs --filter=!@openui-org/storybook --filter=!@openui-org/playground",
+    "build": "turbo build --filter=!@openui-org/docs --filter=!@openui-org/storybook --filter=!@openui-org/playground-next --filter=!@openui-org/playground-vue",
     "test": "jest --verbose --config ./jest.config.js",
     "postinstall": "husky install && pnpm --filter @openui-org/theme build",
     "release": "pnpm build && pnpm changeset version && pnpm changeset publish"

packages/components/vue/accordion/accordion-content.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { AccordionContent, type AccordionContentProps } from 'radix-vue'
+import { accordionContent, cn } from '@openui-org/theme'
+
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AccordionContent
+    v-bind="delegatedProps"
+    :class="cn(accordionContent())"
+  >
+    <div :class="cn('pb-4 pt-0', props.class)">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>

packages/components/vue/accordion/accordion-item.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'
+import { accordionItem, cn } from '@openui-org/theme'
+
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <AccordionItem
+    v-bind="forwardedProps"
+    :class="cn(accordionItem(), props.class)"
+  >
+    <slot />
+  </AccordionItem>
+</template>

packages/components/vue/accordion/accordion-trigger.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { AccordionTriggerProps } from 'radix-vue'
+import { computed } from 'vue'
+import { AccordionHeader, AccordionTrigger } from 'radix-vue'
+
+import { accordionTrigger, cn } from '@openui-org/theme'
+
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      v-bind="delegatedProps"
+      :class="cn(accordionTrigger(), props.class)"
+    >
+      <slot />
+      <slot name="icon">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"><path d="m6 9 6 6 6-6" /></svg>
+      </slot>
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>

packages/components/vue/accordion/accordion.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { AccordionRootEmits, AccordionRootProps } from 'radix-vue'
+import { AccordionRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<AccordionRootProps>()
+const emits = defineEmits<AccordionRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AccordionRoot v-bind="forwarded">
+    <slot />
+  </AccordionRoot>
+</template>

packages/components/vue/accordion/index.ts

@@ -0,0 +1,4 @@
+export { default as Accordion } from './accordion.vue'
+export { default as AccordionContent } from './accordion-content.vue'
+export { default as AccordionItem } from './accordion-item.vue'
+export { default as AccordionTrigger } from './accordion-trigger.vue'

packages/components/vue/index.ts

@@ -1 +1,2 @@
+export * from './accordion'
 export * from './button'

packages/components/vue/package.json

@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@openui-org/theme": "workspace:*",
+    "radix-vue": "^1.7.3",
     "vue": "^3.4.26"
   },
   "devDependencies": {

packages/components/vue/shims-vue.d.ts

@@ -0,0 +1,7 @@
+// shims-vue.d.ts
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, any >
+  export default component
+}

packages/components/vue/tsconfig.json

@@ -10,9 +10,6 @@
 
     /* Bundler mode */
     "moduleResolution": "bundler",
-    "paths": {
-      "~/*": ["src/*"]
-    },
     "resolveJsonModule": true,
     "allowImportingTsExtensions": true,