@coffic/cosy-ui 0.7.2 → 0.8.6

package/dist/src-astro/code-example/CodeExample.astro

@@ -0,0 +1,185 @@
+---
+/**
+ * @component CodeExample
+ *
+ * @description
+ * 用于展示组件示例及其源代码的组件。
+ * 采用标签形式，默认显示预览，用户可以点击标签切换到源代码视图。
+ * 支持亮色和暗黑模式，会根据系统设置自动切换主题。
+ *
+ * @usage
+ * ```astro
+ * <CodeExample
+ *   title="示例标题"
+ *   description="示例描述"
+ *   code={`<Alert type="info">这是一个示例</Alert>`}
+ * >
+ *   <Alert type="info">这是一个示例</Alert>
+ * </CodeExample>
+ * ```
+ *
+ * @props
+ * @prop {string} [title] - 示例标题
+ * @prop {string} [description] - 示例描述
+ * @prop {string} code - 要展示的源代码
+ *
+ * @slots
+ * @slot default - 组件的实际渲染内容
+ */
+
+import { ClipboardIcon, CheckIcon } from '../../index-astro';
+import '../../style.ts';
+
+interface Props {
+  title?: string;
+  description?: string;
+  code: string;
+}
+
+const { title, description, code } = Astro.props;
+---
+
+<div data-role="code-example" class="cosy:mb-8 cosy:card" ignore-heading>
+  {
+    title && (
+      <h3 class="cosy:p-4 cosy:border-b cosy:border-base-300 cosy:card-title">
+        {title}
+      </h3>
+    )
+  }
+  {
+    description && (
+      <p class="cosy:px-4 cosy:pt-4 cosy:text-base-content/70">{description}</p>
+    )
+  }
+
+  <div
+    class="cosy:flex cosy:justify-between cosy:items-center cosy:bg-base-200 cosy:px-4 cosy:rounded-t">
+    <div role="tablist" class="cosy:tabs cosy:tabs-box">
+      <button role="tab" class="cosy:tab cosy:tab-active" data-tab="preview"
+        >预览</button
+      >
+      <button role="tab" class="cosy:tab" data-tab="code">代码</button>
+    </div>
+    <div class="cosy:flex cosy:items-center cosy:gap-2">
+      <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:text-success cosy:check-icon"
+          ><CheckIcon /></span
+        >
+        <span class="cosy:copy-text">复制代码</span>
+      </button>
+    </div>
+  </div>
+
+  <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>
+
+<script>
+  function initializeCodeExample() {
+    // 标签切换功能
+    const tabs = document.querySelectorAll('.cosy\\:tab');
+
+    tabs.forEach((tab) => {
+      tab.addEventListener('click', () => {
+        // 获取当前标签组
+        const tabGroup = tab.closest('.cosy\\:tabs');
+        if (!tabGroup) return;
+
+        const codeExample = tab.closest('.cosy\\:card');
+        if (!codeExample) return;
+
+        const contentContainer = codeExample.querySelector('.cosy\\:relative');
+        if (!contentContainer) return;
+
+        // 获取目标面板
+        const targetTab = tab.getAttribute('data-tab');
+        if (!targetTab) return;
+
+        // 更新标签状态
+        tabGroup.querySelectorAll('.cosy\\:tab').forEach((t) => {
+          t.classList.remove('cosy:tab-active');
+        });
+        tab.classList.add('cosy:tab-active');
+
+        // 更新面板状态
+        const panels = contentContainer.querySelectorAll('[data-panel]');
+        panels.forEach((panel) => {
+          if (panel.getAttribute('data-panel') === targetTab) {
+            panel.classList.remove('cosy:hidden');
+            panel.classList.add('cosy:block');
+          } else {
+            panel.classList.add('cosy:hidden');
+            panel.classList.remove('cosy:block');
+          }
+        });
+      });
+    });
+
+    // 复制代码功能
+    const copyButtons = document.querySelectorAll('.cosy\\:btn-ghost');
+
+    copyButtons.forEach((button) => {
+      button.addEventListener('click', () => {
+        const codeExample = button.closest('.cosy\\:card');
+        if (!codeExample) return;
+
+        const codePanel = codeExample.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');
+          button
+            .querySelector('.cosy\\:copy-text')
+            ?.classList.add('cosy:text-success');
+
+          // 3秒后恢复原状
+          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');
+            button
+              .querySelector('.cosy\\:copy-text')
+              ?.classList.remove('cosy:text-success');
+          }, 3000);
+        });
+      });
+    });
+  }
+
+  // 初始化
+  initializeCodeExample();
+
+  // Astro 页面切换时重新初始化
+  document.addEventListener('astro:page-load', initializeCodeExample);
+</script>

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

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

package/dist/src-astro/contact/Contact.astro

@@ -0,0 +1,321 @@
+---
+/**
+ * @component Contact
+ *
+ * @description
+ * Contact 组件用于展示企业或个人的联系信息，支持多种联系方式（邮件、电话、地址）和社交媒体链接。
+ * 组件设计简洁专业，适合在企业网站的联系页面、页脚或关于我们页面中使用。
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Contact
+ *   email="contact@company.com"
+ *   phone="+1 (555) 123-4567"
+ *   address="123 Business St, City, State 12345"
+ * />
+ * ```
+ *
+ * 带社交媒体链接：
+ * ```astro
+ * <Contact
+ *   email="contact@company.com"
+ *   phone="+1 (555) 123-4567"
+ *   address="123 Business St, City, State 12345"
+ *   github="https://github.com/company"
+ *   twitter="https://twitter.com/company"
+ *   facebook="https://facebook.com/company"
+ * />
+ * ```
+ *
+ * 带标题和描述：
+ * ```astro
+ * <Contact
+ *   title="联系我们"
+ *   description="欢迎随时与我们取得联系"
+ *   email="contact@company.com"
+ *   phone="+1 (555) 123-4567"
+ * />
+ * ```
+ *
+ * 紧凑模式：
+ * ```astro
+ * <Contact
+ *   email="contact@company.com"
+ *   phone="+1 (555) 123-4567"
+ *   compact
+ * />
+ * ```
+ *
+ * @props
+ * @prop {string} [title] - 联系信息标题
+ * @prop {string} [description] - 联系信息描述
+ * @prop {string} [email] - 电子邮件地址
+ * @prop {string} [phone] - 电话号码
+ * @prop {string} [address] - 地址信息
+ * @prop {string} [website] - 网站链接
+ * @prop {string} [github] - GitHub链接
+ * @prop {string} [twitter] - Twitter链接
+ * @prop {string} [facebook] - Facebook链接
+ * @prop {string} [linkedin] - LinkedIn链接
+ * @prop {boolean} [compact] - 是否使用紧凑模式
+ * @prop {string} [class] - 自定义CSS类，可用于覆盖默认样式
+ *
+ * @slots
+ * @slot default - 额外的联系信息内容
+ */
+
+import '../../style.ts';
+
+interface Props {
+  title?: string;
+  description?: string;
+  email?: string;
+  phone?: string;
+  address?: string;
+  website?: string;
+  github?: string;
+  twitter?: string;
+  facebook?: string;
+  linkedin?: string;
+  compact?: boolean;
+  class?: string;
+}
+
+const {
+  title,
+  description,
+  email,
+  phone,
+  address,
+  website,
+  github,
+  twitter,
+  facebook,
+  linkedin,
+  compact,
+  class: className = '',
+} = Astro.props;
+
+// 构建联系信息容器样式
+const contactClasses = [
+  'cosy:card',
+  'cosy:w-full',
+  'cosy:bg-base-100',
+  'cosy:shadow-lg',
+  compact ? 'cosy:card-compact' : '',
+  className,
+]
+  .filter(Boolean)
+  .join(' ');
+
+// 内容区域的padding
+const contentPadding = compact ? 'cosy:p-4' : 'cosy:p-6';
+
+// 联系信息项的样式
+const contactItemClass =
+  'cosy:flex cosy:items-center cosy:gap-3 cosy:mb-4 last:cosy:mb-0';
+const iconClass = 'cosy:w-5 cosy:h-5 cosy:text-primary cosy:flex-shrink-0';
+const linkClass =
+  'cosy:link cosy:link-hover cosy:text-base-content cosy:no-underline hover:cosy:text-primary cosy:transition-colors';
+
+// 社交媒体链接样式
+const socialLinksClass =
+  'cosy:flex cosy:gap-4 cosy:mt-6 cosy:pt-4 cosy:border-t cosy:border-base-300';
+const socialLinkClass =
+  'cosy:btn cosy:btn-ghost cosy:btn-circle cosy:btn-sm cosy:text-base-content hover:cosy:text-primary hover:cosy:bg-primary/10';
+---
+
+<div class={contactClasses}>
+  <div class={`cosy:card-body ${contentPadding}`}>
+    {
+      title && (
+        <h2 class="cosy:card-title cosy:text-2xl cosy:font-bold cosy:mb-2">
+          {title}
+        </h2>
+      )
+    }
+
+    {
+      description && (
+        <p class="cosy:text-base-content/70 cosy:mb-6">{description}</p>
+      )
+    }
+
+    <div class="cosy:space-y-0">
+      {
+        email && (
+          <div class={contactItemClass}>
+            <svg
+              class={iconClass}
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+              />
+            </svg>
+            <a href={`mailto:${email}`} class={linkClass}>
+              {email}
+            </a>
+          </div>
+        )
+      }
+
+      {
+        phone && (
+          <div class={contactItemClass}>
+            <svg
+              class={iconClass}
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
+              />
+            </svg>
+            <a href={`tel:${phone}`} class={linkClass}>
+              {phone}
+            </a>
+          </div>
+        )
+      }
+
+      {
+        address && (
+          <div class={contactItemClass}>
+            <svg
+              class={iconClass}
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+              />
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+              />
+            </svg>
+            <span class="cosy:text-base-content">{address}</span>
+          </div>
+        )
+      }
+
+      {
+        website && (
+          <div class={contactItemClass}>
+            <svg
+              class={iconClass}
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
+              />
+            </svg>
+            <a
+              href={website}
+              target="_blank"
+              rel="noopener noreferrer"
+              class={linkClass}>
+              {website.replace(/^https?:\/\//, '')}
+            </a>
+          </div>
+        )
+      }
+    </div>
+
+    {
+      Astro.slots.has('default') && (
+        <div class="cosy:mt-4">
+          <slot />
+        </div>
+      )
+    }
+
+    {
+      (github || twitter || facebook || linkedin) && (
+        <div class={socialLinksClass}>
+          {github && (
+            <a
+              href={github}
+              target="_blank"
+              rel="noopener noreferrer"
+              class={socialLinkClass}
+              title="GitHub">
+              <svg
+                class="cosy:w-5 cosy:h-5"
+                fill="currentColor"
+                viewBox="0 0 24 24">
+                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+              </svg>
+            </a>
+          )}
+
+          {twitter && (
+            <a
+              href={twitter}
+              target="_blank"
+              rel="noopener noreferrer"
+              class={socialLinkClass}
+              title="Twitter">
+              <svg
+                class="cosy:w-5 cosy:h-5"
+                fill="currentColor"
+                viewBox="0 0 24 24">
+                <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
+              </svg>
+            </a>
+          )}
+
+          {facebook && (
+            <a
+              href={facebook}
+              target="_blank"
+              rel="noopener noreferrer"
+              class={socialLinkClass}
+              title="Facebook">
+              <svg
+                class="cosy:w-5 cosy:h-5"
+                fill="currentColor"
+                viewBox="0 0 24 24">
+                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
+              </svg>
+            </a>
+          )}
+
+          {linkedin && (
+            <a
+              href={linkedin}
+              target="_blank"
+              rel="noopener noreferrer"
+              class={socialLinkClass}
+              title="LinkedIn">
+              <svg
+                class="cosy:w-5 cosy:h-5"
+                fill="currentColor"
+                viewBox="0 0 24 24">
+                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
+              </svg>
+            </a>
+          )}
+        </div>
+      )
+    }
+  </div>
+</div>

package/dist/src-astro/contact/EContactBasic.astro

@@ -0,0 +1,15 @@
+---
+/**
+ * @component Contact.Basic
+ *
+ * @description
+ * 基础Contact组件示例，展示最简单的联系信息用法。
+ */
+import Contact from './Contact.astro';
+---
+
+<Contact
+  email="contact@company.com"
+  phone="+1 (555) 123-4567"
+  address="123 Business St, City, State 12345"
+/>

package/dist/src-astro/contact/EContactBasicContainer.astro

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

package/dist/src-astro/contact/EContactCompact.astro

@@ -0,0 +1,11 @@
+---
+/**
+ * @component Contact.Compact
+ *
+ * @description
+ * 紧凑模式的Contact组件示例。
+ */
+import Contact from './Contact.astro';
+---
+
+<Contact email="contact@company.com" phone="+1 (555) 123-4567" compact />

package/dist/src-astro/contact/EContactCompactContainer.astro

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

package/dist/src-astro/contact/EContactCustomStyle.astro

@@ -0,0 +1,21 @@
+---
+/**
+ * @component Contact.CustomStyle
+ *
+ * @description
+ * 展示如何使用class属性自定义Contact组件的样式。
+ */
+import '../../style.ts';
+import Contact from './Contact.astro';
+---
+
+<Contact
+  title="联系我们"
+  description="自定义样式的联系信息卡片"
+  email="contact@company.com"
+  phone="+1 (555) 123-4567"
+  address="123 Business St, City, State 12345"
+  github="https://github.com/company"
+  twitter="https://twitter.com/company"
+  class="cosy:bg-gradient-to-br cosy:from-blue-50 cosy:to-purple-50 cosy:border-2 cosy:border-blue-200 cosy:shadow-2xl"
+/>

package/dist/src-astro/contact/EContactCustomStyleContainer.astro

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

package/dist/src-astro/contact/EContactSocial.astro

@@ -0,0 +1,20 @@
+---
+/**
+ * @component Contact.Social
+ *
+ * @description
+ * 带社交媒体链接的Contact组件示例。
+ */
+import Contact from './Contact.astro';
+---
+
+<Contact
+  title="联系我们"
+  email="contact@company.com"
+  phone="+1 (555) 123-4567"
+  website="https://www.company.com"
+  github="https://github.com/company"
+  twitter="https://twitter.com/company"
+  facebook="https://facebook.com/company"
+  linkedin="https://linkedin.com/company/company"
+/>

package/dist/src-astro/contact/EContactSocialContainer.astro

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

package/dist/src-astro/contact/EContactWithTitle.astro

@@ -0,0 +1,17 @@
+---
+/**
+ * @component Contact.WithTitle
+ *
+ * @description
+ * 带标题和描述的Contact组件示例。
+ */
+import Contact from './Contact.astro';
+---
+
+<Contact
+  title="联系我们"
+  description="欢迎随时与我们取得联系，我们将尽快回复您"
+  email="contact@company.com"
+  phone="+1 (555) 123-4567"
+  address="123 Business St, City, State 12345"
+/>

package/dist/src-astro/contact/EContactWithTitleContainer.astro

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

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

@@ -0,0 +1,21 @@
+import Contact from './Contact.astro';
+
+// Container components
+import ContactBasicContainer from './EContactBasicContainer.astro';
+import ContactWithTitleContainer from './EContactWithTitleContainer.astro';
+import ContactSocialContainer from './EContactSocialContainer.astro';
+import ContactCompactContainer from './EContactCompactContainer.astro';
+import ContactCustomStyleContainer from './EContactCustomStyleContainer.astro';
+
+export { Contact };
+
+export const ContactPackage = {
+  Contact,
+  ContactContainers: {
+    Basic: ContactBasicContainer,
+    WithTitle: ContactWithTitleContainer,
+    Social: ContactSocialContainer,
+    Compact: ContactCompactContainer,
+    CustomStyle: ContactCustomStyleContainer,
+  },
+};