refactor(NeExpandable): added styling support

src/components/NeExpandable.vue

@@ -1,45 +1,86 @@
 <!--
-  Copyright (C) 2023 Nethesis S.r.l.
+  Copyright (C) 2024 Nethesis S.r.l.
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 
 <script lang="ts" setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
+import { onMounted, ref, watch } from 'vue'
+import { NeButton } from '@/main'
 
 const props = defineProps({
-  title: {
+  label: {
     type: String,
-    required: true
+    default: ''
   },
-  expanded: {
+  isExpanded: {
+    type: Boolean,
+    default: false
+  },
+  fullWidth: {
     type: Boolean,
     default: false
   }
 })
 
 const emit = defineEmits(['setExpanded'])
 
+const internalIsExpanded = ref(false)
+
+onMounted(() => {
+  internalIsExpanded.value = props.isExpanded
+})
+
+watch(
+  () => props.isExpanded,
+  () => {
+    if (internalIsExpanded.value != props.isExpanded) {
+      internalIsExpanded.value = props.isExpanded
+    }
+  }
+)
+
 function toggleExpanded() {
-  emit('setExpanded', !props.expanded)
+  internalIsExpanded.value = !internalIsExpanded.value
+  emit('setExpanded', internalIsExpanded.value)
 }
 </script>
 
 <template>
-  <div>
-    <button
-      class="flex w-full items-center justify-between rounded border-b border-gray-300 px-2 py-1 text-sm font-medium text-gray-900 hover:bg-gray-200 dark:border-gray-500 dark:text-gray-50 dark:hover:bg-gray-700"
-      @click="toggleExpanded"
-    >
-      <span>{{ title }}</span>
-      <FontAwesomeIcon
-        :icon="expanded ? faChevronUp : faChevronDown"
-        aria-hidden="true"
-        class="h-4 w-4 shrink-0 text-gray-700 dark:text-gray-200"
-      />
-    </button>
+  <div class="text-sm">
+    <div :class="['cursor-pointer', fullWidth ? 'block' : 'inline-block']" @click="toggleExpanded">
+      <slot name="trigger">
+        <!-- inline button -->
+        <template v-if="!fullWidth">
+          <NeButton kind="tertiary" size="sm" class="-ml-2">
+            <template #suffix>
+              <font-awesome-icon
+                :icon="internalIsExpanded ? faChevronUp : faChevronDown"
+                class="h-3 w-3"
+                aria-hidden="true"
+              />
+            </template>
+            {{ label }}
+          </NeButton>
+        </template>
+        <template v-else>
+          <!-- full width button -->
+          <button
+            class="flex w-full items-center justify-between rounded border-b border-gray-300 px-2 py-1 text-sm font-medium text-gray-900 hover:bg-gray-200 dark:border-gray-500 dark:text-gray-50 dark:hover:bg-gray-700"
+          >
+            <span>{{ label }}</span>
+            <font-awesome-icon
+              :icon="internalIsExpanded ? faChevronUp : faChevronDown"
+              class="h-3 w-3"
+              aria-hidden="true"
+            />
+          </button>
+        </template>
+      </slot>
+    </div>
     <Transition name="slide-down">
-      <div v-show="expanded" class="text-sm text-gray-700 dark:text-gray-200">
+      <div v-show="internalIsExpanded" class="space-y-6">
         <slot></slot>
       </div>
     </Transition>

stories/NeExpandable.stories.ts

@@ -1,48 +1,90 @@
-//  Copyright (C) 2023 Nethesis S.r.l.
+//  Copyright (C) 2024 Nethesis S.r.l.
 //  SPDX-License-Identifier: GPL-3.0-or-later
 
-import type { Meta, StoryObj } from '@storybook/vue3'
+import { Meta, StoryObj } from '@storybook/vue3'
 import { NeExpandable } from '../src/main'
 
-const meta = {
+const meta: Meta<typeof NeExpandable> = {
   title: 'Utils/NeExpandable',
   component: NeExpandable,
   tags: ['autodocs'],
-  // default values
   args: {
-    title: 'Show more',
-    expanded: false
+    label: 'Label',
+    isExpanded: false,
+    fullWidth: false
   }
-} satisfies Meta<typeof NeExpandable>
-
+}
 export default meta
 type Story = StoryObj<typeof meta>
 
-const template =
-  '<NeExpandable v-bind="args">\
-    <div class="px-2 py-1">\
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\
-    </div>\
-  </NeExpandable>'
+const defaultTemplate = `<NeExpandable v-bind="args">
+  <div class="pt-4 pl-2 text-gray-700 dark:text-gray-300">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </div>
+</NeExpandable>`
 
-export const Collapsed: Story = {
+export const Default: Story = {
   render: (args) => ({
     components: { NeExpandable },
     setup() {
       return { args }
     },
-    template: template
+    template: defaultTemplate
   }),
   args: {}
 }
 
-export const Expanded: Story = {
+export const FullWidth: Story = {
+  render: (args) => ({
+    components: { NeExpandable },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: { fullWidth: true }
+}
+
+const customTriggerTemplate = `<NeExpandable v-bind="args">
+  <template #trigger>
+    <span class="underline text-gray-700 dark:text-gray-300">
+      Click here to show more
+    </span>
+  </template>
+  <div class="pt-4 pl-2 text-gray-700 dark:text-gray-300">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </div>
+</NeExpandable>`
+
+export const CustomTrigger: Story = {
+  render: (args) => ({
+    components: { NeExpandable },
+    setup() {
+      return { args }
+    },
+    template: customTriggerTemplate
+  }),
+  args: {}
+}
+
+const customTriggerFullWidthTemplate = `<NeExpandable v-bind="args">
+  <template #trigger>
+    <div class="p-1 rounded bg-sky-200 dark:bg-sky-800 text-gray-700 dark:text-gray-300">
+      Click here to show more
+    </div>
+  </template>
+  <div class="pt-4 pl-2 text-gray-700 dark:text-gray-300">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </div>
+</NeExpandable>`
+
+export const CustomTriggerFullWidth: Story = {
   render: (args) => ({
     components: { NeExpandable },
     setup() {
       return { args }
     },
-    template: template
+    template: customTriggerFullWidthTemplate
   }),
-  args: { expanded: true }
+  args: { fullWidth: true }
 }