Show More

Copy<script setup lang="ts">
import { ref } from 'vue'
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable'
import { ShowMore, ShowMoreItem, ShowMoreButton, ShowMoreContent } from '@/components/ui/show-more'
import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
import { ChevronDown, ChevronUp } from 'lucide-vue-next'

// This is only for demonstration purposes to show the text on mobile and adjust the size to show or hide it.
const breakpoints = useBreakpoints(breakpointsTailwind)
const isMobile = breakpoints.smaller('sm')
// This is only for demonstration purposes to show the text on mobile and adjust the size to show or hide it.

const openItem = ref('none')
const shortText = {
  preview: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit.',
  expanded:
    'Minus quisquam assumenda eligendi provident magni. error voluptatibus obcaecati ab qui necessitatibus.',
}
</script>

<template>
  <ResizablePanelGroup direction="horizontal" class="rounded-lg border">
    <!-- LEFT PANEL (CONTENT) -->
    <ResizablePanel :default-size="60">
      <!-- ShowMore Demo Content -->
      <div class="size-full">
        <ShowMore
          :threshold="3"
          type="single"
          collapsible
          v-model="openItem"
          fade
          :animation="{
            duration: 0.5,
            ease: 'backOut',
          }"
        >
          <ShowMoreItem value="demo" v-slot="{ isTruncated }">
            <div class="p-6">
              <ShowMoreContent class="text-muted-foreground">
                <!-- This is only for demonstration purposes to show the text on mobile and adjust the size to show or hide it.  -->
                <p v-if="isMobile">{{ shortText.preview }}</p>
                <p v-else>{{ shortText.preview }} {{ shortText.expanded }}</p>
              </ShowMoreContent>

              <div v-if="isTruncated" class="flex items-center gap-4 mt-4">
                <div class="flex-1 h-px bg-border"></div>

                <ShowMoreButton
                  class="group h-8 px-4 text-xs font-semibold uppercase tracking-wide rounded-full border border-border flex items-center gap-2 [&>svg]:hidden"
                >
                  <span v-if="openItem !== 'demo'" class="flex items-center gap-2">
                    Show More
                    <ChevronDown class="w-3 h-3" />
                  </span>
                  <span v-else class="flex items-center gap-2">
                    Show Less
                    <ChevronUp class="w-3 h-3" />
                  </span>
                </ShowMoreButton>

                <div class="flex-1 h-px bg-border"></div>
              </div>
            </div>
          </ShowMoreItem>
        </ShowMore>
      </div>
    </ResizablePanel>

    <!-- HANDLE -->
    <ResizableHandle />

    <!-- RIGHT PANEL -->
    <ResizablePanel :default-size="40">
      <div class="h-full flex items-center justify-center text-xs text-muted-foreground">
        horizontal Resize
      </div>
    </ResizablePanel>
  </ResizablePanelGroup>
</template>

Copy<script setup lang="ts">
import { ref } from 'vue'
import { ShowMore, ShowMoreItem, ShowMoreButton, ShowMoreContent } from '@/components/ui/show-more'
import { ChevronDown, ChevronUp } from 'lucide-vue-next'

const openItems = ref<string[]>([])

const longText = `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.`

const items = [
  {
    value: 'item-1',
    title: 'First Section',
    content: longText,
  },
  {
    value: 'item-2',
    title: 'Second Section',
    content: longText.repeat(2),
  },
  {
    value: 'item-3',
    title: 'Third Section',
    content: longText.repeat(3),
  },
]
</script>

<template>
  <div class="w-full max-w-xl space-y-4">
    <ShowMore :threshold="3" type="multiple" v-model="openItems" collapsible fade>
      <ShowMoreItem
        v-for="item in items"
        :key="item.value"
        :value="item.value"
        v-slot="{ isTruncated }"
      >
        <h3 class="font-semibold text-lg mb-2">{{ item.title }}</h3>
        <ShowMoreContent class="text-muted-foreground">
          <p>{{ item.content }}</p>
        </ShowMoreContent>
        <div v-if="isTruncated" class="flex items-center gap-4 mt-4">
          <div class="flex-1 h-px bg-border"></div>
          <ShowMoreButton
            class="group h-8 px-4 text-xs font-semibold uppercase tracking-wide rounded-full border border-border flex items-center gap-2 [&>svg]:hidden"
          >
            <span v-if="!openItems.includes(item.value)" class="flex items-center gap-2">
              Show More
              <ChevronDown class="w-3 h-3" />
            </span>
            <span v-else class="flex items-center gap-2">
              Show Less
              <ChevronUp class="w-3 h-3" />
            </span>
          </ShowMoreButton>
          <div class="flex-1 h-px bg-border"></div>
        </div>
      </ShowMoreItem>
    </ShowMore>
  </div>
</template>

Copy<script setup lang="ts">
import { ref } from 'vue'
import { ShowMore, ShowMoreItem, ShowMoreButton, ShowMoreContent } from '@/components/ui/show-more'
import { Button } from '@/components/ui/button'
import { ChevronDown, ChevronUp } from 'lucide-vue-next'

const isShowMoreOpen = ref(false)

const longText = `This is some very long content that demonstrates how the ShowMore component can be controlled externally. By binding a boolean ref to the 'v-model:open' prop, you can programmatically toggle the expanded state of the content. This is useful for scenarios where you might want to open or close the content based on user actions outside of the ShowMore component itself, or based on application logic. The text will expand and collapse smoothly with the configured animation.`
</script>

<template>
  <div class="w-full max-w-xl space-y-4">
    <ShowMore :threshold="3" v-model:open="isShowMoreOpen" collapsible fade>
      <ShowMoreItem value="controlled-item" v-slot="{ isTruncated }">
        <h3 class="font-semibold text-lg mb-2">Controlled ShowMore</h3>
        <ShowMoreContent class="text-muted-foreground">
          <p>{{ longText }}</p>
        </ShowMoreContent>
        <div class="flex items-center gap-4 mt-4">
          <div class="flex-1 h-px bg-border"></div>
          <ShowMoreButton
            class="group h-8 px-4 text-xs font-semibold uppercase tracking-wide rounded-full border border-border flex items-center gap-2 [&>svg]:hidden"
          >
            <span v-if="!isShowMoreOpen" class="flex items-center gap-2">
              Show More
              <ChevronDown class="w-3 h-3" />
            </span>
            <span v-else class="flex items-center gap-2">
              Show Less
              <ChevronUp class="w-3 h-3" />
            </span>
          </ShowMoreButton>
          <div class="flex-1 h-px bg-border"></div>
        </div>
      </ShowMoreItem>
    </ShowMore>

    <Button @click="isShowMoreOpen = !isShowMoreOpen">
      Toggle from outside (Currently: {{ isShowMoreOpen ? 'Open' : 'Closed' }})
    </Button>
  </div>
</template>