cleanup: Parameters Accordions

Author: DrJKL

src/components/rightSidePanel/layout/RightPanelSection.vue renamed to src/components/rightSidePanel/layout/PropertiesAccordionItem.vue

@@ -3,44 +3,44 @@ import { watch } from 'vue'
 
 import { cn } from '@/utils/tailwindUtil'
 
-const props = defineProps<{
+const { label, defaultCollapse } = defineProps<{
   label?: string
   defaultCollapse?: boolean
 }>()
 const isCollapse = defineModel<boolean>('collapse', { default: false })
 
-if (props.defaultCollapse) {
+if (defaultCollapse) {
   isCollapse.value = true
 }
 watch(
-  () => props.defaultCollapse,
+  () => defaultCollapse,
   (value) => (isCollapse.value = value)
 )
 </script>
 
 <template>
   <div class="flex flex-col">
     <div
-      class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl min-h-12"
+      class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl"
     >
       <button
         class="group min-h-12 bg-transparent border-0 outline-0 ring-0 w-full text-left flex items-center justify-between pl-4 pr-3 cursor-pointer"
         @click="isCollapse = !isCollapse"
       >
         <span class="text-sm font-semibold line-clamp-2">
           <slot name="label">
-            {{ props.label ?? '' }}
+            {{ label ?? '' }}
           </slot>
         </span>
 
         <i
           :class="
             cn(
-              'icon-[lucide--chevron-down] size-5 min-w-5 transition-all',
-              isCollapse && 'rotate-90'
+              'icon-[lucide--chevron-up] size-4 transition-all',
+              isCollapse && '-rotate-180'
             )
           "
-          class="relative top-px text-xs leading-none text-node-component-header-icon group-hover:text-base-foreground"
+          class="text-muted-foreground group-hover:text-base-foreground group-focus:text-base-foreground"
         />
       </button>
     </div>

src/components/rightSidePanel/parameters/SectionWidgets.vue

@@ -7,7 +7,7 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import WidgetLegacy from '@/renderer/extensions/vueNodes/widgets/components/WidgetLegacy.vue'
 import { getComponent } from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
 
-import RightPanelSection from '../layout/RightPanelSection.vue'
+import PropertiesAccordionItem from '../layout/PropertiesAccordionItem.vue'
 
 defineProps<{
   label?: string
@@ -34,7 +34,7 @@ function onWidgetValueChange(
 </script>
 
 <template>
-  <RightPanelSection>
+  <PropertiesAccordionItem>
     <template #label>
       <slot name="label">
         {{ label ?? $t('rightSidePanel.inputs') }}
@@ -66,5 +66,5 @@ function onWidgetValueChange(
         />
       </div>
     </div>
-  </RightPanelSection>
+  </PropertiesAccordionItem>
 </template>