feat(components): stack

Signed-off-by: ZTL-UwU <[email protected]>
ZTL-UwU · Oct 13, 2024 · e45d3d4 · e45d3d4
1 parent 0d25207
commit e45d3d4
Show file tree

Hide file tree

Showing 9 changed files with 149 additions and 7 deletions.
diff --git a/components/content/Alert.vue b/components/content/Alert.vue
@@ -1,7 +1,11 @@
 <template>
   <UiAlert
     class="transition-all [&:not(:first-child)]:mt-5"
-    :class="[typeTwClass[type], to && 'cursor-pointer hover:bg-muted/50']"
+    :class="[
+      typeTwClass[type],
+      to && 'cursor-pointer hover:bg-muted/50',
+      inStack && 'm-0 rounded-none border-none',
+    ]"
     @click="alertClick"
   >
     <SmartIcon v-if="icon && title" :name="icon" :size="16" />
@@ -28,9 +32,11 @@ const props = withDefaults(defineProps<{
   to?: string;
   target?: string;
   external?: boolean;
+  inStack?: boolean;
 }>(), {
   type: 'default',
   external: undefined,
+  inStack: false,
 });
 
 const typeTwClass = {

diff --git a/components/content/Card.vue b/components/content/Card.vue
@@ -1,7 +1,13 @@
 <template>
   <div class="group-has-[div]:mt-0 [&:not(:first-child)]:mt-5">
     <NuxtLink :to="to" :target="target">
-      <UiCard class="relative h-full transition-all" :class="[to && 'hover:bg-muted']">
+      <UiCard
+        class="relative h-full transition-all"
+        :class="[
+          to && 'hover:bg-muted',
+          inStack && 'mb-0 rounded-none border-none shadow-none',
+        ]"
+      >
         <UiCardHeader v-if="icon || title || $slots.title || description || $slots.description">
           <SmartIcon v-if="icon" class="mb-2" :name="icon" :size="24" />
           <UiCardTitle v-if="title || $slots.title">
@@ -36,5 +42,6 @@ defineProps<{
   to?: string;
   target?: string;
   icon?: string;
+  inStack?: boolean;
 }>();
 </script>
diff --git a/components/content/CodeGroup.vue b/components/content/CodeGroup.vue
@@ -5,9 +5,20 @@
 <script setup lang="ts">
 import Tabs from './Tabs.vue';
 
+const { inStack = false } = defineProps<{
+  inStack?: boolean;
+}>();
+
 const _slots = useSlots();
 function render() {
   const slots = _slots?.default?.() || [];
-  return h(Tabs, { variant: 'card' }, () => slots);
+  return h(
+    Tabs,
+    {
+      variant: 'card',
+      inStack,
+    },
+    () => slots,
+  );
 }
 </script>
diff --git a/components/content/ProseCode.vue b/components/content/ProseCode.vue
@@ -1,7 +1,10 @@
 <template>
   <UiCard
     class="relative overflow-hidden [&:not(:first-child)]:mt-5 [&:not(:last-child)]:mb-5"
-    :class="[inGroup && 'mb-0 rounded-t-none border-none']"
+    :class="[
+      inGroup && 'mb-0 rounded-t-none border-none shadow-none',
+      inStack && 'mb-0 rounded-none border-none shadow-none',
+    ]"
   >
     <div v-if="!inGroup && filename" class="flex border-b p-3 font-mono text-sm">
       <SmartIcon v-if="icon" :name="icon" class="mr-1.5 self-center" />
@@ -47,6 +50,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  inStack: {
+    type: Boolean,
+    default: false,
+  },
   highlights: {
     type: Array as () => number[],
     default: () => [],

diff --git a/components/content/Stack.vue b/components/content/Stack.vue
@@ -0,0 +1,10 @@
+<template>
+  <UiCard class="divide-y overflow-hidden [&:not(:first-child)]:mt-5">
+    <div
+      v-for="(slot, i) in $slots.default?.() ?? []"
+      :key="i"
+    >
+      <component :is="slot" :in-stack="true" />
+    </div>
+  </UiCard>
+</template>
diff --git a/components/content/Tabs.vue b/components/content/Tabs.vue
@@ -28,7 +28,11 @@
     </UiTabsContent>
   </UiTabs>
 
-  <UiCard v-else-if="variant === 'card'" class="[&:not(:first-child)]:mt-5">
+  <UiCard
+    v-else-if="variant === 'card'"
+    class="[&:not(:first-child)]:mt-5"
+    :class="[inStack && 'mb-0 rounded-none border-none shadow-none']"
+  >
     <UiScrollArea>
       <div class="relative flex overflow-x-auto border-b p-0.5 text-sm">
         <div class="flex p-1">
@@ -76,9 +80,11 @@ import ScrollBar from '../ui/scroll-area/ScrollBar.vue';
 withDefaults(defineProps<{
   variant?: 'separate' | 'card';
   padded?: boolean;
+  inStack?: boolean;
 }>(), {
   variant: 'separate',
   padded: true,
+  inStack: false,
 });
 
 const activeTabIndex = ref(0);

diff --git a/content/1.getting-started/3.writing/2.components.md b/content/1.getting-started/3.writing/2.components.md
@@ -547,6 +547,7 @@ You can put iconify icons, emojis and urls in `smart-icon`. Smart icon will rend
 
 #### Multi-level headings
 :badge[0.4.6]{variant="outline"}
+
 ::code-group
   ::div{label="Preview" class="md:p-4"}
     ::steps{level=5}
@@ -773,6 +774,100 @@ The text `required` is configurable in [`main.fieldRequiredText`](/api/configura
   ```
 ::
 
+### Stack
+:badge[0.6.2]{variant="outline"}
+
+::code-group
+  ::div{label="Preview" class="md:p-4"}
+    ::stack
+      ::div{class="p-6 text-3xl font-bold"}
+      ✨ Introducing Inspira UI
+      ::
+      ```vue
+      <template>
+        <RadiantText
+          class="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400"
+          :duration="5"
+        >
+          <span class="text-3xl font-bold">✨ Introducing Inspira UI</span>
+        </RadiantText>
+      </template>
+      ```
+      ::code-group
+        ```bash [npm]
+        npm install -D @inspira-ui/plugins
+        ```
+        ```bash [pnpm]
+        pnpm install -D @inspira-ui/plugins
+        ```
+        ```bash [bun]
+        bun add -d @inspira-ui/plugins
+        ```
+        ```bash [yarn]
+        yarn add --dev @inspira-ui/plugins
+        ```
+      ::
+      :read-more{title="Inspira UI Docs" to="https://inspira-ui.com/components/radiant-text"}
+      ::card
+      ---
+      title: Commands
+      icon: lucide:square-terminal
+      ---
+      List of Nuxt CLI commands to init, analyze, build, and preview your application.
+      ::
+    ::
+  ::
+  ```mdc [Code]
+  ::stack
+    ::div{class="p-6 text-3xl font-bold"}
+    ✨ Introducing Inspira UI
+    ::
+    ```vue
+    <template>
+      <RadiantText
+        class="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400"
+        :duration="5"
+      >
+        <span class="text-3xl font-bold">✨ Introducing Inspira UI</span>
+      </RadiantText>
+    </template>
+    ```
+    ::code-group
+      ```bash [npm]
+      npm install -D @inspira-ui/plugins
+      ```
+      ```bash [pnpm]
+      pnpm install -D @inspira-ui/plugins
+      ```
+      ```bash [bun]
+      bun add -d @inspira-ui/plugins
+      ```
+      ```bash [yarn]
+      yarn add --dev @inspira-ui/plugins
+      ```
+    ::
+    :read-more{title="Inspira UI Docs" to="https://inspira-ui.com/components/radiant-text"}
+    ::card
+    ---
+    title: Commands
+    icon: lucide:square-terminal
+    ---
+    List of Nuxt CLI commands to init, analyze, build, and preview your application.
+    ::
+  ::
+  ```
+::
+
+Stackable components:
+
+- Code Blocks
+- `alert`
+- `callout`
+- `read-more`
+- `code-group`
+- `card`
+- `tabs`
+
 ## Page Components
 
 ### Hero

diff --git a/content/index.md b/content/index.md
@@ -6,7 +6,7 @@ navigation: false
 ::hero
 ---
 announcement:
-  title: 'Release v0.6.1'
+  title: 'Release v0.6.2'
   icon: '🎉'
   to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/releases
   target: _blank

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "shadcn-docs-nuxt",
   "type": "module",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Effortless and beautiful docs template built with Nuxt Content & shadcn-vue.",
   "author": "Tony Zhang <[email protected]>",
   "license": "MIT",