Merge pull request #850 from hit-pay/fix-accordion-item

Fix overlap text
hit-pay · Dec 6, 2024 · a77aee9 · a77aee9
2 parents 7788bf2 + e9d0f33
commit a77aee9
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 15 deletions.
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@orchidui/vue",
   "description": "Orchid UI , Dashboard Ui Library Vue 3 tailwind css",
-  "version": "0.5.530",
+  "version": "0.5.531",
   "type": "module",
   "scripts": {
     "build": "vite build",

diff --git a/packages/vue/src/DataDisplay/ListItem/components/OcAccordion.vue b/packages/vue/src/DataDisplay/ListItem/components/OcAccordion.vue
@@ -12,25 +12,25 @@ const props = defineProps({
   isDisabled: Boolean,
   hasActions: {
     type: Boolean,
-    default: true,
+    default: true
   },
   isTransparent: Boolean,
   isDraggable: Boolean,
-  isNoToggleForced: Boolean,
+  isNoToggleForced: Boolean
 })
 const emit = defineEmits(['edit', 'delete'])
 const isOpen = ref(false)
 
 const toggleAccordion = () => {
   if (props.isNoToggleForced) {
-    return;
+    return
   }
 
   isOpen.value = !isOpen.value
 }
 
 defineExpose({
-  toggleAccordion,
+  toggleAccordion
 })
 </script>
 
@@ -46,7 +46,7 @@ defineExpose({
       class="flex gap-4 items-stretch"
       :class="{
         'border-b': isOpen,
-        'pl-5': isNoToggleForced,
+        'pl-5': isNoToggleForced
       }"
     >
       <div
@@ -61,9 +61,9 @@ defineExpose({
           class="text-oc-text-400"
         />
       </div>
-      <div class="flex items-center gap-x-4 w-full p-5 pl-0">
+      <div class="flex items-center gap-x-4 w-full p-5 pl-0 overflow-hidden">
         <slot name="logo"></slot>
-        <div class="flex flex-col flex-1 gap-y-3">
+        <div class="flex flex-col flex-1 gap-y-3 overflow-hidden">
           <div class="flex items-center justify-between">
             <div class="flex text-sm text-oc-text-400 items-center gap-x-3 overflow-hidden">
               <span v-if="title" class="text-base text-oc-text font-medium truncate">
@@ -93,11 +93,7 @@ defineExpose({
           </slot>
         </div>
 
-        <slot
-          name="right"
-          :is-open="isOpen"
-          :toggle-accordion="toggleAccordion"
-        >
+        <slot name="right" :is-open="isOpen" :toggle-accordion="toggleAccordion">
           <div v-if="hasActions" class="flex items-center gap-4 opacity-0 group-hover:opacity-100">
             <div class="border border-oc-accent-1-100 rounded-sm p-1 flex gap-x-1">
               <Icon