feat(docs): Add button color examples and update preview components t…

docs/.vitepress/plugins/previewer.ts

@@ -12,10 +12,20 @@ function ComponentPreview(md: MarkdownRenderer) {
         return defaultRender!(tokens, idx, options, env, self);
 
       const props = parseProps(content);
+      const demo = props.demo;
 
-      const componentName = pascalCase(`Demo${props.name}`);
+      let componentName;
+      if (demo) {
+        // if demo is a string, use it as the component name
+        componentName = pascalCase(`Demo${props.name}${demo}`);
+      } else {
+        // otherwise, use the original component naming method
+        componentName = pascalCase(`Demo${props.name}`);
+      }
+
+      const demoAttr = demo ? ` demo="${demo}"` : '';
+      const demoScripts = `<ComponentPreview name="${props.name}"${demoAttr}><${componentName} /></ComponentPreview>`;
 
-      const demoScripts = `<ComponentPreview name="${props.name}"><${componentName} /></ComponentPreview>`;
       return demoScripts;
     };
   }

docs/.vitepress/theme/components/component-preview.vue

@@ -13,23 +13,32 @@ defineOptions({
 
 interface Props {
   name: string;
+  demo?: string;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  demo: undefined
+});
 
 const instance = getCurrentInstance();
 const { copy, copied } = useClipboard();
 
-function getCode(name: string) {
-  const pathName = kebabCase(name);
+function getCode(name: string, demo?: string) {
+  let pathName;
+
+  if (demo) {
+    pathName = kebabCase(`${name}-${demo}`);
+  } else {
+    pathName = kebabCase(name);
+  }
 
   const codeRecord = instance?.appContext?.config?.globalProperties?.$code as Record<string, string>;
 
   if (!codeRecord) {
     return '';
   }
 
-  return codeRecord[pathName];
+  return codeRecord[pathName] || '';
 }
 
 const items = [
@@ -45,7 +54,7 @@ const items = [
 
 const active = ref('preview');
 
-const code = computed(() => getCode(props.name));
+const code = computed(() => getCode(props.name, props.demo));
 
 const codeHtml = computed(() => highlight(code.value, 'vue'));
 </script>

docs/docs/components/button.md

@@ -1,4 +1,3 @@
 # Button
 
-<ComponentPreview name="Button" />
-
+<ComponentPreview name="Button" demo="Color" />

examples/src/index.ts

@@ -49,6 +49,8 @@ import DemoToggle from './ui/toggle.vue';
 import DemoToggleGroup from './ui/toggle-group.vue';
 import DemoTooltip from './ui/tooltip.vue';
 
+export * from './ui/button/index';
+
 export {
   ThemeCustomizer,
   DemoAccordion,

examples/src/ui/button/color.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { SButton, SCard } from 'soy-ui';
+import type { ThemeColor } from 'soy-ui';
+
+defineOptions({
+  name: 'DemoButtonColor'
+});
+
+const colors: ThemeColor[] = ['primary', 'destructive', 'success', 'warning', 'info', 'carbon', 'secondary', 'accent'];
+</script>
+
+<template>
+  <SCard title="Color" split>
+    <div class="flex flex-wrap gap-12px">
+      <SButton v-for="color in colors" :key="color" :color="color">{{ color }}</SButton>
+    </div>
+  </SCard>
+</template>

examples/src/ui/button/index.ts

@@ -0,0 +1,3 @@
+import DemoButtonColor from './color.vue';
+
+export { DemoButtonColor };

package.json

@@ -29,6 +29,7 @@
     "preview": "vite preview",
     "preview:docs": "pnpm -r --filter='./docs' run preview",
     "publish-pkg": "pnpm -r publish --access public",
+    "rebuild-code": "tsx scripts/code.ts",
     "release": "soy release",
     "restore": "tsx scripts/restore.ts",
     "stub": "tsx scripts/stub.ts",