@coffic/cosy-ui 0.7.4 → 0.8.7

package/dist/src-astro/card/ECardWithImage.astro

@@ -0,0 +1,16 @@
+---
+/**
+ * @component Card.WithImage
+ *
+ * @description
+ * 带图片的Card组件示例，展示如何使用imageUrl属性。
+ */
+import { Card } from '../../index-astro';
+---
+
+<Card
+  title="带图片的卡片"
+  subtitle="这张卡片展示了如何添加顶部图片"
+  imageUrl="https://picsum.photos/400/200?random=1">
+  这是一个带有图片的卡片，图片会自动显示在卡片顶部，并适配卡片宽度。
+</Card>

package/dist/src-astro/card/ECardWithImageContainer.astro

@@ -0,0 +1,11 @@
+---
+import { CodeContainer } from '../../index-astro';
+import CardWithImage from './ECardWithImage.astro';
+import CardWithImageSourceCode from './ECardWithImage.astro?raw';
+---
+
+<CodeContainer codes={[CardWithImageSourceCode]}>
+  <div id="tab-1">
+    <CardWithImage />
+  </div>
+</CodeContainer>

package/dist/src-astro/card/ECardWithSubtitle.astro

@@ -0,0 +1,13 @@
+---
+/**
+ * @component Card.WithSubtitle
+ *
+ * @description
+ * 带副标题的Card组件示例，展示如何使用subtitle属性。
+ */
+import { Card } from '../../index-astro';
+---
+
+<Card title="带副标题的卡片" subtitle="这是卡片的副标题，用于提供更多描述信息">
+  卡片的主要内容区域，可以包含更详细的信息和其他元素。
+</Card>

package/dist/src-astro/card/ECardWithSubtitleContainer.astro

@@ -0,0 +1,11 @@
+---
+import { CodeContainer } from '../../index-astro';
+import CardWithSubtitle from './ECardWithSubtitle.astro';
+import CardWithSubtitleSourceCode from './ECardWithSubtitle.astro?raw';
+---
+
+<CodeContainer codes={[CardWithSubtitleSourceCode]}>
+  <div id="tab-1">
+    <CardWithSubtitle />
+  </div>
+</CodeContainer>

package/dist/src-astro/card/index.ts

@@ -0,0 +1,27 @@
+import Card from './Card.astro';
+import CardCourse from './CardCourse.astro';
+import CardBasic from './CardBasic.astro';
+
+// Container components
+import CardBasicContainer from './ECardBasicContainer.astro';
+import CardWithSubtitleContainer from './ECardWithSubtitleContainer.astro';
+import CardWithImageContainer from './ECardWithImageContainer.astro';
+import CardClickableContainer from './ECardClickableContainer.astro';
+import CardCompactContainer from './ECardCompactContainer.astro';
+import CardCustomStyleContainer from './ECardCustomStyleContainer.astro';
+
+export { Card };
+export { CardCourse };
+export { CardBasic };
+
+export const CardPackage = {
+  Card,
+  CardContainers: {
+    Basic: CardBasicContainer,
+    WithSubtitle: CardWithSubtitleContainer,
+    WithImage: CardWithImageContainer,
+    Clickable: CardClickableContainer,
+    Compact: CardCompactContainer,
+    CustomStyle: CardCustomStyleContainer,
+  },
+};

package/dist/src-astro/code-block/CodeBlock.astro

@@ -0,0 +1,155 @@
+---
+/**
+ * @component CodeBlock
+ *
+ * @description
+ * CodeBlock 组件用于在页面中展示格式化的代码片段，支持语法高亮、行号显示和代码复制功能。
+ * 组件设计简洁美观，提供良好的代码可读性和用户交互体验。
+ *
+ * @design
+ * 设计理念：
+ * 1. 可读性优先 - 清晰的字体、合适的间距和语法高亮，确保代码易于阅读
+ * 2. 功能完备 - 支持行号显示、代码复制等实用功能
+ * 3. 视觉一致性 - 与整体设计系统保持一致的视觉风格
+ * 4. 响应式设计 - 在不同屏幕尺寸下保持良好的可用性
+ *
+ * 视觉特点：
+ * - 语法高亮：使用北欧风格的配色方案，柔和且易于阅读
+ * - 行号显示：可选的行号显示，帮助定位代码位置
+ * - 标题栏：可选的标题栏，显示文件名或代码类型
+ * - 复制按钮：便捷的代码复制功能，带有状态反馈
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <CodeBlock code={`console.log('Hello, world!');`} lang="js" />
+ * ```
+ *
+ * 带标题和行号：
+ * ```astro
+ * <CodeBlock
+ *   code={`function greet(name) {\n  return 'Hello, ' + name + '!';\n}`}
+ *   lang="js"
+ *   title="greeting.js"
+ *   showLineNumbers={true}
+ * />
+ * ```
+ *
+ * @props
+ * @prop {string} code - 要显示的代码字符串
+ * @prop {string} [lang="plaintext"] - 代码语言，用于语法高亮
+ * @prop {string} [title] - 代码块的标题，通常是文件名
+ * @prop {boolean} [showLineNumbers=true] - 是否显示行号
+ *
+ * @accessibility
+ * - 使用语义化HTML结构
+ * - 复制按钮提供清晰的视觉反馈
+ * - 代码使用等宽字体，确保对齐和可读性
+ */
+
+import '../../style.ts';
+
+interface Props {
+  code: string;
+  title?: string;
+  showLineNumbers?: boolean;
+}
+
+const { code, title, showLineNumbers = true } = Astro.props;
+
+// 移除代码字符串开头和结尾的空行
+const trimmedCode = code.trim();
+
+// 生成行号
+const lines = trimmedCode.split('\n');
+const lineNumbers = Array.from({ length: lines.length }, (_, i) => i + 1);
+---
+
+<div
+  class="cosy:border cosy:border-base-300 cosy:rounded-lg cosy:overflow-hidden cosy:not-prose">
+  {/* 标题栏 */}
+  {
+    title && (
+      <div class="cosy:flex cosy:justify-between cosy:items-center cosy:bg-base-200 cosy:px-4 cosy:py-2 cosy:border-b cosy:border-base-300">
+        <span class="cosy:font-medium cosy:text-base-content">{title}</span>
+        <button
+          class="cosy:flex cosy:items-center cosy:gap-1 cosy:hover:bg-base-300 cosy:px-2 cosy:py-1 cosy:rounded-md cosy:text-sm cosy:text-base-content cosy:transition-colors"
+          data-code={trimmedCode}
+          title="复制代码">
+          <svg
+            class="cosy:w-4 cosy:h-4"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor">
+            <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+          </svg>
+          <span class="cosy:copy-text">复制</span>
+        </button>
+      </div>
+    )
+  }
+
+  {/* 代码区域 */}
+  <div class="cosy:flex cosy:overflow-auto">
+    {/* 行号 */}
+    {
+      showLineNumbers && (
+        <div class="cosy:flex cosy:flex-col cosy:bg-base-100 cosy:py-2 cosy:pr-2 cosy:pl-3 cosy:border-r cosy:border-base-300 cosy:text-base-content cosy:text-right cosy:text-opacity-50 cosy:select-none">
+          {lineNumbers.map((num) => (
+            <div class="cosy:font-mono cosy:text-xs cosy:leading-5">{num}</div>
+          ))}
+        </div>
+      )
+    }
+
+    {/* 代码内容 */}
+    <pre
+      class:list={[
+        'cosy:p-2 cosy:overflow-auto cosy:font-mono cosy:text-sm cosy:bg-base-100 cosy:text-base-content cosy:w-full',
+        { 'cosy:pl-0': showLineNumbers },
+      ]}>
+      <code class="cosy:block cosy:font-mono" set:html={trimmedCode} />
+    </pre>
+  </div>
+</div>
+
+<script>
+  function initializeCopyButtons() {
+    const copyButtons = document.querySelectorAll(
+      '.cosy\\:flex.cosy\\:items-center.cosy\\:gap-1'
+    );
+
+    copyButtons.forEach((button) => {
+      button.addEventListener('click', async () => {
+        const code = button.getAttribute('data-code') || '';
+        const copyText = button.querySelector('.cosy\\:copy-text');
+
+        try {
+          await navigator.clipboard.writeText(code);
+          if (copyText) {
+            copyText.textContent = '已复制！';
+            setTimeout(() => {
+              copyText.textContent = '复制';
+            }, 2000);
+          }
+        } catch (err) {
+          console.error('复制失败:', err);
+          if (copyText) {
+            copyText.textContent = '复制失败';
+            setTimeout(() => {
+              copyText.textContent = '复制';
+            }, 2000);
+          }
+        }
+      });
+    });
+  }
+
+  // 在页面加载时初始化
+  initializeCopyButtons();
+
+  // 在 Astro 页面切换时重新初始化
+  document.addEventListener('astro:page-load', initializeCopyButtons);
+</script>

package/dist/src-astro/code-block/index.ts

@@ -0,0 +1 @@
+export { default as CodeBlock } from './CodeBlock.astro';

package/dist/src-astro/code-container/CodeContainer.astro

@@ -0,0 +1,280 @@
+---
+/**
+ * @component CodeContainer
+ *
+ * @description
+ * 用于展示代码示例的容器组件。使用时只需在默认slot中传入内容，
+ * 并为每个示例设置对应的id (tab-1, tab-2等)
+ *
+ * @example
+ * ```astro
+ * <CodeContainer>
+ *   <div id="tab-1">
+ *     <Alert type="info">这是第一个示例</Alert>
+ *   </div>
+ *   <div id="tab-2">
+ *     <Alert type="success">这是第二个示例</Alert>
+ *   </div>
+ * </CodeContainer>
+ * ```
+ */
+
+import { ClipboardIcon, CheckIcon, InfoIcon } from '../../index-astro';
+import '../../style.ts';
+
+interface Props {
+  /**
+   * tab的标题，如果不提供则使用"示例 1"这样的默认标题
+   */
+  titles?: string[];
+  /**
+   * tab的描述文本
+   */
+  descriptions?: string[];
+  /**
+   * 每个示例对应的源代码
+   */
+  codes: string[];
+}
+
+const { titles = [], descriptions = [], codes } = Astro.props;
+---
+
+<div data-role="code-container" class="cosy:mb-8 cosy:card" ignore-heading>
+  <!-- 工具栏 -->
+  <div
+    class="cosy:flex cosy:justify-between cosy:items-center cosy:bg-base-200 cosy:px-4 cosy:rounded-t">
+    <!-- 标签 -->
+    <div class="cosy:flex cosy:items-center cosy:gap-4">
+      <div role="tablist" class="cosy:tabs cosy:tabs-box">
+        {
+          codes.map((_, index) => (
+            <button
+              role="tab"
+              class={`cosy:tab ${index === 0 ? 'cosy:tab-active' : ''}`}
+              data-tab={`tab-${index + 1}`}>
+              {titles[index] || `示例 ${index + 1}`}
+            </button>
+          ))
+        }
+      </div>
+    </div>
+
+    <!-- 工具按钮 -->
+    <div class="cosy:flex cosy:items-center cosy:gap-2">
+      <button
+        role="switch"
+        class="cosy:btn cosy:btn-ghost cosy:btn-sm"
+        aria-checked="false"
+        aria-label="切换代码/预览"
+        data-toggle="code">
+        <span class="cosy:code-icon"><InfoIcon /></span>
+      </button>
+      <button
+        class="cosy:gap-2 cosy:btn cosy:btn-ghost cosy:btn-sm"
+        aria-label="复制代码">
+        <span class="cosy:copy-icon"><ClipboardIcon /></span>
+        <span class="cosy:hidden cosy:check-icon"><CheckIcon /></span>
+      </button>
+    </div>
+  </div>
+
+  {
+    codes.map((code, index) => (
+      <div
+        class={`cosy:example-container ${index === 0 ? 'cosy:block' : 'cosy:hidden'}`}
+        data-example={`tab-${index + 1}`}>
+        {/* 描述 */}
+        {descriptions[index] && (
+          <p class="cosy:px-4 cosy:py-2 cosy:text-sm cosy:bg-gradient-to-b not-prose cosy:from-blue-100/50 cosy:to-blue-100/90 ">
+            {descriptions[index]}
+          </p>
+        )}
+
+        <div class="cosy:relative cosy:p-4 cosy:bg-gradient-to-br cosy:from-red-100 cosy:to-green-300 cosy:rounded-b">
+          <div class="cosy:block cosy:code-example-panel" data-panel="preview">
+            <slot />
+          </div>
+
+          <div class="cosy:hidden cosy:code-example-panel" data-panel="code">
+            <pre class="cosy:overflow-x-auto" style="margin:0">
+              <code class="cosy:language-astro">{code}</code>
+            </pre>
+          </div>
+        </div>
+      </div>
+    ))
+  }
+</div>
+
+<script>
+  function initializeCodeContainer() {
+    console.log('CodeContainer: 初始化代码容器');
+
+    // 示例切换功能
+    const exampleTabs = document.querySelectorAll(
+      '[role="tab"][data-tab^="tab-"]'
+    );
+    exampleTabs.forEach((tab) => {
+      tab.addEventListener('click', () => {
+        console.log('CodeContainer: 切换示例', tab.getAttribute('data-tab'));
+        const container = tab.closest('[data-role="code-container"]');
+        if (!container) return;
+
+        // 更新标签状态
+        container
+          .querySelectorAll('[role="tab"][data-tab^="tab-"]')
+          .forEach((t) => {
+            t.classList.remove('cosy:tab-active');
+          });
+        tab.classList.add('cosy:tab-active');
+
+        // 获取当前标签对应的内容 id
+        const targetId = tab.getAttribute('data-tab');
+        if (!targetId) return;
+
+        // 切换示例容器
+        container
+          .querySelectorAll('.cosy\\:example-container')
+          .forEach((example) => {
+            if (example.getAttribute('data-example') === targetId) {
+              example.classList.remove('cosy:hidden');
+              example.classList.add('cosy:block');
+            } else {
+              example.classList.add('cosy:hidden');
+              example.classList.remove('cosy:block');
+            }
+          });
+
+        // 更新对应内容的可见性
+        const allContent = container.querySelectorAll('[id^="tab-"]');
+        allContent.forEach((content) => {
+          if (content.id === targetId) {
+            content.classList.remove('cosy:hidden');
+            content.classList.add('cosy:block');
+          } else {
+            content.classList.add('cosy:hidden');
+            content.classList.remove('cosy:block');
+          }
+        });
+      });
+    });
+
+    // 代码开关功能
+    const codeToggles = document.querySelectorAll('[data-toggle="code"]');
+    codeToggles.forEach((toggle) => {
+      toggle.addEventListener('click', () => {
+        console.log('code toggle clicked', toggle);
+        const container = toggle.closest('[data-role="code-container"]');
+        if (!container) {
+          console.error('CodeContainer: 无法找到父容器');
+          return;
+        }
+
+        // 切换开关状态
+        const isChecked = toggle.getAttribute('aria-checked') === 'true';
+        console.log('代码按钮 isChecked:', isChecked);
+        toggle.setAttribute('aria-checked', !isChecked ? 'true' : 'false');
+        toggle.classList.toggle('cosy:btn-primary', !isChecked);
+        toggle.classList.toggle('cosy:btn-ghost', isChecked);
+
+        // 找到当前显示的示例
+        const activeExample = container.querySelector(
+          '.cosy\\:example-container:not(.cosy\\:hidden)'
+        );
+        if (!activeExample) {
+          console.error('CodeContainer: 无法找到活动示例');
+          return;
+        }
+
+        // 切换面板
+        activeExample
+          .querySelectorAll('.cosy\\:code-example-panel')
+          .forEach((panel) => {
+            if (panel.getAttribute('data-panel') === 'code') {
+              console.log(
+                '处理代码面板的展示/隐藏，此时的isChecked:',
+                isChecked
+              );
+              panel.classList.toggle('cosy:hidden', isChecked);
+              panel.classList.toggle('cosy:block', !isChecked);
+            } else {
+              console.log(
+                '处理预览面板的展示/隐藏，此时的isChecked:',
+                isChecked
+              );
+              panel.classList.toggle('cosy:hidden', !isChecked);
+              panel.classList.toggle('cosy:block', isChecked);
+            }
+          });
+      });
+    });
+
+    // 复制代码功能
+    const copyButtons = document.querySelectorAll('[aria-label="复制代码"]');
+    copyButtons.forEach((button) => {
+      button.addEventListener('click', () => {
+        const container = button.closest('[data-role="code-container"]');
+        if (!container) return;
+
+        // 确保代码面板是显示的
+        const codeToggle = container.querySelector('[data-toggle="code"]');
+        if (codeToggle?.getAttribute('aria-checked') !== 'true') {
+          (codeToggle as HTMLElement)?.click();
+        }
+
+        // 找到当前显示的示例
+        const activeExample = container.querySelector(
+          '.cosy\\:example-container:not(.cosy\\:hidden)'
+        );
+        if (!activeExample) return;
+
+        const codePanel = activeExample.querySelector('[data-panel="code"]');
+        if (!codePanel) return;
+
+        const codeElement = codePanel.querySelector('code');
+        if (!codeElement) return;
+
+        const code = codeElement.textContent || '';
+
+        // 复制到剪贴板
+        navigator.clipboard.writeText(code).then(() => {
+          button.classList.add('cosy:btn-success');
+          button
+            .querySelector('.cosy\\:copy-icon')
+            ?.classList.add('cosy:hidden');
+          button
+            .querySelector('.cosy\\:check-icon')
+            ?.classList.remove('cosy:hidden');
+
+          setTimeout(() => {
+            button.classList.remove('cosy:btn-success');
+            button
+              .querySelector('.cosy\\:copy-icon')
+              ?.classList.remove('cosy:hidden');
+            button
+              .querySelector('.cosy\\:check-icon')
+              ?.classList.add('cosy:hidden');
+          }, 3000);
+        });
+      });
+    });
+
+    // 初始化时隐藏除第一个以外的所有内容
+    document
+      .querySelectorAll('[data-role="code-container"]')
+      .forEach((container) => {
+        const contents = container.querySelectorAll('[id^="tab-"]');
+        contents.forEach((content, index) => {
+          if (index !== 0) {
+            content.classList.add('cosy:hidden');
+          }
+        });
+      });
+  }
+
+  document.addEventListener('astro:page-load', () => {
+    console.log('CodeContainer: 页面加载完成，初始化代码容器');
+    initializeCodeContainer();
+  });
+</script>

package/dist/src-astro/code-container/ECodeContainerBasic.astro

@@ -0,0 +1,19 @@
+---
+/**
+ * CodeContainerBasic - 基础代码容器示例组件
+ * 展示CodeContainer的基本用法
+ */
+
+import { CodeContainer } from './index';
+import { Alert } from '../alert';
+
+const code = `<Alert type="info">
+  这是一个基础示例
+</Alert>`;
+---
+
+<CodeContainer codes={[code]}>
+  <div id="tab-1">
+    <Alert type="info"> 这是一个基础示例 </Alert>
+  </div>
+</CodeContainer>

package/dist/src-astro/code-container/ECodeContainerMultiple.astro

@@ -0,0 +1,49 @@
+---
+/**
+ * CodeContainerMultiple - 多标签代码容器示例组件
+ * 展示CodeContainer的多标签用法
+ */
+
+import { CodeContainer } from './index';
+import { Alert } from '../alert';
+
+const infoCode = `<Alert type="info" title="信息提示">
+  这是一条信息提示
+</Alert>`;
+
+const successCode = `<Alert type="success" title="成功提示">
+  操作已成功完成
+</Alert>`;
+
+const warningCode = `<Alert type="warning" title="警告提示">
+  请注意可能的风险
+</Alert>`;
+
+const errorCode = `<Alert type="error" title="错误提示">
+  操作失败，请重试
+</Alert>`;
+
+const titles = ['信息', '成功', '警告', '错误'];
+const descriptions = [
+  '用于展示一般信息',
+  '用于展示成功状态',
+  '用于展示警告信息',
+  '用于展示错误信息',
+];
+const codes = [infoCode, successCode, warningCode, errorCode];
+---
+
+<CodeContainer titles={titles} descriptions={descriptions} codes={codes}>
+  <div id="tab-1">
+    <Alert type="info" title="信息提示"> 这是一条信息提示 </Alert>
+  </div>
+  <div id="tab-2">
+    <Alert type="success" title="成功提示"> 操作已成功完成 </Alert>
+  </div>
+  <div id="tab-3">
+    <Alert type="warning" title="警告提示"> 请注意可能的风险 </Alert>
+  </div>
+  <div id="tab-4">
+    <Alert type="error" title="错误提示"> 操作失败，请重试 </Alert>
+  </div>
+</CodeContainer>

package/dist/src-astro/code-container/index.ts

@@ -0,0 +1,14 @@
+import { default as CodeContainer } from './CodeContainer.astro';
+import { default as CodeContainerBasic } from './ECodeContainerBasic.astro';
+import { default as CodeContainerMultiple } from './ECodeContainerMultiple.astro';
+import BasicSourceCode from './ECodeContainerBasic.astro?raw';
+import MultipleSourceCode from './ECodeContainerMultiple.astro?raw';
+import { extractSimpleExample } from '../utils/component';
+
+export { CodeContainer, CodeContainerBasic, CodeContainerMultiple };
+
+// 导出示例源代码
+export const CodeContainerExampleCodes = {
+  Basic: extractSimpleExample(BasicSourceCode, 'CodeContainer'),
+  Multiple: extractSimpleExample(MultipleSourceCode, 'CodeContainer'),
+};