unovue / shadcn-vue

Vue port of shadcn-ui
https://www.shadcn-vue.com/
MIT License
5.27k stars 316 forks source link

[Bug]: Fix a typo in Accordion component #800

Closed otabekoff closed 1 month ago

otabekoff commented 1 month ago

Reproduction

https://stackblitz.com/edit/vitejs-vite-xqfe5c?file=Reproduction.vue

Describe the bug

When I add Accordion component using npx shadcn-vue@latest add accordion to my project, it downloaded the component and when I use it, it gave the error of:

[plugin:vite:vue] Error parsing JavaScript expression: Unexpected token, expected "," (5:1)

/home/otabek/Projects/RealProjects/coursio/src/components/ui/accordion/AccordionTrigger.vue:24:15

23 |        v-bind="delegatedProps"
24 |        :class="
25 |  cn(
   |  ^
26 |    'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
27 |    props.class

When I open the /path/to/myproject/src/components/ui/accordion/AccordionTrigger.vue, I noticed a typo in class name function of cn. That code was:

<script setup>
import { computed } from 'vue'
import { AccordionHeader, AccordionTrigger } from 'radix-vue'
import { ChevronDown } from 'lucide-vue-next'
import { cn } from '@/lib/utils'

const props = defineProps({
  asChild: { type: Boolean, required: false },
  as: { type: null, required: false },
  class: { type: null, required: false }
})

const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props

  return delegated
})
</script>

<template>
  <AccordionHeader class="flex">
    <AccordionTrigger
      v-bind="delegatedProps"
      :class="
cn(
  'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
  props.class
)]"
    >
      <slot />
      <slot name="icon">
        <ChevronDown class="h-4 w-4 shrink-0 transition-transform duration-200" />
      </slot>
    </AccordionTrigger>
  </AccordionHeader>
</template>

And it is specifically this part:

<AccordionTrigger
      v-bind="delegatedProps"
      :class="
cn(
  'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
  props.class
)]"
    >

And I added the missing [ in in :class before cn() function and it is resolved. Pls, fix this tiny bug.

    <AccordionTrigger
      v-bind="delegatedProps"
      :class="
cn(
  'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
  props.class
)]"
    >

System Info

System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (8) x64 Intel(R) Core(TM) i7-8665U CPU @ 1.90GHz
    Memory: 9.72 GB / 15.27 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 22.9.0 - ~/.nvm/versions/node/v22.9.0/bin/node
    npm: 10.8.3 - ~/.nvm/versions/node/v22.9.0/bin/npm
  npmPackages:
    @vueuse/core: ^11.1.0 => 11.1.0 
    radix-vue: ^1.9.6 => 1.9.6 
    vue: ^3.4.29 => 3.5.11

Contributes

zernonia commented 1 month ago

Fixed in v0.11.0