@coffic/cosy-ui 0.7.2 → 0.8.6

package/dist/{footer → src-astro/footer}/EFooterCompleteContainer.astro

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

package/dist/{footer → src-astro/footer}/EFooterFeaturesContainer.astro

@@ -1,5 +1,5 @@
 ---
-import { CodeContainer } from '../index';
+import { CodeContainer } from '../../index-astro';
 import FooterBasic from './EFooterBasic.astro';
 import FooterWithSocial from './EFooterWithSocial.astro';
 import FooterWithProducts from './EFooterWithProducts.astro';
@@ -14,27 +14,27 @@ import FooterWithNavigationSourceCode from './EFooterWithNavigation.astro?raw';
 ---
 
 <CodeContainer
-	titles={['基础', '社交媒体', '产品链接', 'Logo', '导航链接']}
-	codes={[
-		FooterBasicSourceCode,
-		FooterWithSocialSourceCode,
-		FooterWithProductsSourceCode,
-		FooterWithLogoSourceCode,
-		FooterWithNavigationSourceCode,
-	]}>
-	<div id="tab-1">
-		<FooterBasic />
-	</div>
-	<div id="tab-2">
-		<FooterWithSocial />
-	</div>
-	<div id="tab-3">
-		<FooterWithProducts />
-	</div>
-	<div id="tab-4">
-		<FooterWithLogo />
-	</div>
-	<div id="tab-5">
-		<FooterWithNavigation />
-	</div>
+  titles={['基础', '社交媒体', '产品链接', 'Logo', '导航链接']}
+  codes={[
+    FooterBasicSourceCode,
+    FooterWithSocialSourceCode,
+    FooterWithProductsSourceCode,
+    FooterWithLogoSourceCode,
+    FooterWithNavigationSourceCode,
+  ]}>
+  <div id="tab-1">
+    <FooterBasic />
+  </div>
+  <div id="tab-2">
+    <FooterWithSocial />
+  </div>
+  <div id="tab-3">
+    <FooterWithProducts />
+  </div>
+  <div id="tab-4">
+    <FooterWithLogo />
+  </div>
+  <div id="tab-5">
+    <FooterWithNavigation />
+  </div>
 </CodeContainer>

package/dist/src-astro/footer/EFooterWithLogo.astro

@@ -0,0 +1,28 @@
+---
+/**
+ * @component Footer.WithLogo
+ *
+ * @description
+ * 展示带有Logo的页脚示例。
+ */
+import { Footer } from '../../index-astro';
+import { getExampleImage } from '../utils/image';
+---
+
+<Footer
+  siteName="我的网站"
+  homeLink="/"
+  slogan="简单而强大"
+  company="我的公司"
+  copyright="保留所有权利"
+  inspirationalSlogan="构建美好的数字体验"
+  logo={{
+    src: getExampleImage({
+      width: 100,
+      height: 100,
+      provider: 'robohash',
+      tag: 'logo',
+    }),
+    alt: '网站Logo',
+  }}
+/>

package/dist/{footer → src-astro/footer}/EFooterWithLogoContainer.astro

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

package/dist/src-astro/footer/EFooterWithNavigation.astro

@@ -0,0 +1,24 @@
+---
+/**
+ * @component Footer.WithNavigation
+ *
+ * @description
+ * 展示带有导航链接的页脚示例。
+ */
+import { Footer } from '../../index-astro';
+---
+
+<Footer
+  siteName="我的网站"
+  homeLink="/"
+  slogan="简单而强大"
+  company="我的公司"
+  copyright="保留所有权利"
+  inspirationalSlogan="构建美好的数字体验"
+  aboutLink="/about"
+  contactLink="/contact"
+  termsLink="/terms"
+  privacyLink="/privacy"
+  blogLink="/blog"
+  faqLink="/faq"
+/>

package/dist/{footer → src-astro/footer}/EFooterWithNavigationContainer.astro

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

package/dist/src-astro/footer/EFooterWithProducts.astro

@@ -0,0 +1,24 @@
+---
+/**
+ * @component Footer.WithProducts
+ *
+ * @description
+ * 展示带有产品链接的页脚示例。
+ */
+import { Footer } from '../../index-astro';
+---
+
+<Footer
+  siteName="我的网站"
+  homeLink="/"
+  slogan="简单而强大"
+  company="我的公司"
+  copyright="保留所有权利"
+  inspirationalSlogan="构建美好的数字体验"
+  products={[
+    { name: '产品A', href: '/products/a' },
+    { name: '产品B', href: '/products/b' },
+    { name: '产品C', href: '/products/c' },
+    { name: '外部产品', href: 'https://example.com', external: true },
+  ]}
+/>

package/dist/{footer → src-astro/footer}/EFooterWithProductsContainer.astro

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

package/dist/src-astro/footer/EFooterWithSocial.astro

@@ -0,0 +1,24 @@
+---
+/**
+ * @component Footer.WithSocial
+ *
+ * @description
+ * 展示带有社交媒体链接的页脚示例。
+ */
+import { Footer } from '../../index-astro';
+---
+
+<Footer
+  siteName="我的网站"
+  homeLink="/"
+  slogan="简单而强大"
+  company="我的公司"
+  copyright="保留所有权利"
+  inspirationalSlogan="构建美好的数字体验"
+  socialLinks={[
+    'https://github.com/myusername',
+    'https://twitter.com/myusername',
+    'https://linkedin.com/in/myusername',
+    'https://facebook.com/myusername',
+  ]}
+/>

package/dist/{footer → src-astro/footer}/EFooterWithSocialContainer.astro

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

package/dist/{footer → src-astro/footer}/Footer.astro

@@ -145,36 +145,41 @@
  * - 社交媒体图标包含屏幕阅读器专用的文本说明
  */
 
-import { processSocialLink } from '../utils/social';
-import { SocialIcon, LanguageUtil, type IFooterProps, createTextGetter } from '../index';
+import { processSocialLink } from '../utils/social.ts';
+import {
+  SocialIcon,
+  LanguageUtil,
+  type IFooterProps,
+  createTextGetter,
+} from '../../index-astro';
 import FooterSection from './FooterSection.astro';
-import '../style.ts';
+import '../../style.ts';
 
 const {
-	siteName,
-	homeLink,
-	slogan,
-	company,
-	copyright,
-	inspirationalSlogan,
-	icp,
-	logo,
-	products = [],
-	aboutLink,
-	contactLink,
-	termsLink,
-	privacyLink,
-	socialLinks = [],
-	teamLink,
-	careersLink,
-	newsLink,
-	historyLink,
-	partnersLink,
-	blogLink,
-	faqLink,
-	mediaLink,
-	techStackLink,
-	debug = false,
+  siteName,
+  homeLink,
+  slogan,
+  company,
+  copyright,
+  inspirationalSlogan,
+  icp,
+  logo,
+  products = [],
+  aboutLink,
+  contactLink,
+  termsLink,
+  privacyLink,
+  socialLinks = [],
+  teamLink,
+  careersLink,
+  newsLink,
+  historyLink,
+  partnersLink,
+  blogLink,
+  faqLink,
+  mediaLink,
+  techStackLink,
+  debug = false,
 } = Astro.props as IFooterProps;
 
 // 获取当前语言
@@ -189,151 +194,158 @@ const processedSocialLinks = socialLinks.map((url) => processSocialLink(url));
 
 // 调试模式的样式类
 const debugClasses = debug
-	? {
-			footer: 'cosy:border-2 cosy:border-blue-500',
-			section: 'cosy:border-2 cosy:border-green-500',
-			nav: 'cosy:border-2 cosy:border-yellow-500',
-			aside: 'cosy:border-2 cosy:border-purple-500',
-		}
-	: {
-			footer: '',
-			section: '',
-			nav: '',
-			aside: '',
-		};
+  ? {
+      footer: 'cosy:border-2 cosy:border-blue-500',
+      section: 'cosy:border-2 cosy:border-green-500',
+      nav: 'cosy:border-2 cosy:border-yellow-500',
+      aside: 'cosy:border-2 cosy:border-purple-500',
+    }
+  : {
+      footer: '',
+      section: '',
+      nav: '',
+      aside: '',
+    };
 ---
 
 <footer
-	class:list={[
-		'cosy:footer cosy:z-50 cosy:sm:footer-horizontal cosy:bg-base-200 cosy:text-base-content cosy:p-10',
-		debugClasses.footer,
-	]}>
-	<div
-		class:list={[
-			'cosy:flex cosy:flex-col cosy:md:h-56 cosy:gap-8 cosy:container cosy:mx-auto cosy:items-center cosy:w-full cosy:md:flex-row cosy:md:justify-between',
-			debugClasses.section,
-		]}>
-		{/* 品牌区域 */}
-		<aside class:list={['cosy:max-w-xs cosy:text-center', debugClasses.aside]}>
-			<a href={homeLink} class="cosy:flex cosy:items-center cosy:gap-2 cosy:mb-4 cosy:no-underline">
-				{
-					logo && (
-						<img
-							src={logo.src}
-							alt={logo.alt}
-							class="cosy:w-12 cosy:h-12 cosy:mask cosy:mask-squircle"
-							width="48"
-							height="48"
-						/>
-					)
-				}
-				<div>
-					<h2 class="cosy:font-bold cosy:text-xl">{siteName}</h2>
-					<p class="cosy:text-base-content/70">{slogan}</p>
-				</div>
-			</a>
+  class:list={[
+    'cosy:footer cosy:z-50 cosy:sm:footer-horizontal cosy:bg-base-200 cosy:text-base-content cosy:p-10',
+    debugClasses.footer,
+  ]}>
+  <div
+    class:list={[
+      'cosy:flex cosy:flex-col cosy:md:h-56 cosy:gap-8 cosy:container cosy:mx-auto cosy:items-center cosy:w-full cosy:md:flex-row cosy:md:justify-between',
+      debugClasses.section,
+    ]}>
+    {/* 品牌区域 */}
+    <aside class:list={['cosy:max-w-xs cosy:text-center', debugClasses.aside]}>
+      <a
+        href={homeLink}
+        class="cosy:flex cosy:items-center cosy:gap-2 cosy:mb-4 cosy:no-underline">
+        {
+          logo && (
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              class="cosy:w-12 cosy:h-12 cosy:mask cosy:mask-squircle"
+              width="48"
+              height="48"
+            />
+          )
+        }
+        <div>
+          <h2 class="cosy:font-bold cosy:text-xl">{siteName}</h2>
+          <p class="cosy:text-base-content/70">{slogan}</p>
+        </div>
+      </a>
 
-			{/* 社交媒体链接 */}
-			{
-				processedSocialLinks.length > 0 && (
-					<div class="cosy:flex cosy:justify-center cosy:gap-2 cosy:mt-4">
-						{processedSocialLinks.map((link) => (
-							<a
-								href={link.url}
-								class="cosy:btn cosy:btn-circle cosy:btn-ghost cosy:btn-sm"
-								target="_blank"
-								rel="noopener noreferrer"
-								aria-label={link.name}>
-								<SocialIcon platform={link.platform} />
-							</a>
-						))}
-					</div>
-				)
-			}
-		</aside>
+      {/* 社交媒体链接 */}
+      {
+        processedSocialLinks.length > 0 && (
+          <div class="cosy:flex cosy:justify-center cosy:gap-2 cosy:mt-4">
+            {processedSocialLinks.map((link) => (
+              <a
+                href={link.url}
+                class="cosy:btn cosy:btn-circle cosy:btn-ghost cosy:btn-sm"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label={link.name}>
+                <SocialIcon platform={link.platform} />
+              </a>
+            ))}
+          </div>
+        )
+      }
+    </aside>
 
-		{/* 导航区域 */}
-		<div
-			class:list={[
-				'cosy:flex cosy:h-full cosy:flex-col cosy:justify-center cosy:gap-8 cosy:mx-auto cosy:max-w-xl cosy:text-center cosy:items-center cosy:w-full cosy:md:flex-row cosy:md:justify-between cosy:md:items-start',
-				debugClasses.section,
-			]}>
-			{/* 产品导航 */}
-			{products.length > 0 && <FooterSection title={t('products')} links={products} />}
+    {/* 导航区域 */}
+    <div
+      class:list={[
+        'cosy:flex cosy:h-full cosy:flex-col cosy:justify-center cosy:gap-8 cosy:mx-auto cosy:max-w-xl cosy:text-center cosy:items-center cosy:w-full cosy:md:flex-row cosy:md:justify-between cosy:md:items-start',
+        debugClasses.section,
+      ]}>
+      {/* 产品导航 */}
+      {
+        products.length > 0 && (
+          <FooterSection title={t('products')} links={products} />
+        )
+      }
 
-			{/* 关于导航 */}
-			{
-				(aboutLink || contactLink || teamLink || careersLink) && (
-					<FooterSection
-						title={t('about')}
-						links={[
-							{ name: t('aboutUs'), href: aboutLink },
-							{ name: t('team'), href: teamLink },
-							{ name: t('careers'), href: careersLink },
-							{ name: t('contactUs'), href: contactLink },
-						].filter((link) => link.href)}
-					/>
-				)
-			}
+      {/* 关于导航 */}
+      {
+        (aboutLink || contactLink || teamLink || careersLink) && (
+          <FooterSection
+            title={t('about')}
+            links={[
+              { name: t('aboutUs'), href: aboutLink },
+              { name: t('team'), href: teamLink },
+              { name: t('careers'), href: careersLink },
+              { name: t('contactUs'), href: contactLink },
+            ].filter((link) => link.href)}
+          />
+        )
+      }
 
-			{/* 资源导航 */}
-			{
-				(newsLink ||
-					historyLink ||
-					partnersLink ||
-					blogLink ||
-					faqLink ||
-					mediaLink ||
-					techStackLink) && (
-					<FooterSection
-						title={t('resources')}
-						links={[
-							{ name: t('news'), href: newsLink },
-							{ name: t('blog'), href: blogLink },
-							{ name: t('faq'), href: faqLink },
-							{ name: t('history'), href: historyLink },
-							{ name: t('techStack'), href: techStackLink },
-						].filter((link) => link.href)}
-					/>
-				)
-			}
+      {/* 资源导航 */}
+      {
+        (newsLink ||
+          historyLink ||
+          partnersLink ||
+          blogLink ||
+          faqLink ||
+          mediaLink ||
+          techStackLink) && (
+          <FooterSection
+            title={t('resources')}
+            links={[
+              { name: t('news'), href: newsLink },
+              { name: t('blog'), href: blogLink },
+              { name: t('faq'), href: faqLink },
+              { name: t('history'), href: historyLink },
+              { name: t('techStack'), href: techStackLink },
+            ].filter((link) => link.href)}
+          />
+        )
+      }
 
-			{/* 法律导航 */}
-			{
-				(termsLink || privacyLink) && (
-					<FooterSection
-						title={t('legal')}
-						links={[
-							{ name: t('terms'), href: termsLink },
-							{ name: t('privacy'), href: privacyLink },
-						].filter((link) => link.href)}
-					/>
-				)
-			}
-		</div>
-	</div>
+      {/* 法律导航 */}
+      {
+        (termsLink || privacyLink) && (
+          <FooterSection
+            title={t('legal')}
+            links={[
+              { name: t('terms'), href: termsLink },
+              { name: t('privacy'), href: privacyLink },
+            ].filter((link) => link.href)}
+          />
+        )
+      }
+    </div>
+  </div>
 </footer>
 
 {/* 横幅 */}
 {
-	inspirationalSlogan && (
-		<aside class:list={['cosy:p-4 cosy:w-full', debugClasses.aside]}>
-			<p class="cosy:text-center">{inspirationalSlogan}</p>
-		</aside>
-	)
+  inspirationalSlogan && (
+    <aside class:list={['cosy:p-4 cosy:w-full', debugClasses.aside]}>
+      <p class="cosy:text-center">{inspirationalSlogan}</p>
+    </aside>
+  )
 }
 
 {/* 底部版权信息 */}
 <div
-	class:list={[
-		'cosy:footer cosy:footer-center cosy:p-4 cosy:bg-base-300 cosy:text-base-content',
-		debugClasses.footer,
-	]}>
-	<aside class:list={['cosy:items-center cosy:grid-flow-col', debugClasses.aside]}>
-		<p class="cosy:opacity-70 cosy:text-sm">
-			© {currentYear}
-			{company} - {copyright || t('allRightsReserved')}
-		</p>
-		{icp && <p class="cosy:opacity-70 cosy:ml-4 cosy:text-sm">{icp}</p>}
-	</aside>
+  class:list={[
+    'cosy:footer cosy:footer-center cosy:p-4 cosy:bg-base-300 cosy:text-base-content',
+    debugClasses.footer,
+  ]}>
+  <aside
+    class:list={['cosy:items-center cosy:grid-flow-col', debugClasses.aside]}>
+    <p class="cosy:opacity-70 cosy:text-sm">
+      © {currentYear}
+      {company} - {copyright || t('allRightsReserved')}
+    </p>
+    {icp && <p class="cosy:opacity-70 cosy:ml-4 cosy:text-sm">{icp}</p>}
+  </aside>
 </div>

package/dist/src-astro/footer/FooterSection.astro

@@ -0,0 +1,49 @@
+---
+/**
+ * @component FooterSection
+ *
+ * @description
+ * FooterSection 组件用于在页脚中显示一组链接，通常用于导航、产品列表等。
+ */
+
+interface Link {
+  name: string;
+  href?: string;
+}
+
+interface Props {
+  /**
+   * 区块标题
+   */
+  title: string;
+
+  /**
+   * 链接列表
+   */
+  links: Link[];
+}
+
+const { title, links } = Astro.props;
+---
+
+<nav class="cosy:flex cosy:flex-col cosy:gap-2">
+  <h6 class="cosy:footer-title">{title}</h6>
+  <ul class="cosy:flex cosy:flex-col cosy:gap-2">
+    {
+      links.map((link) => (
+        <li class="cosy:list-none">
+          {link.href ? (
+            <a
+              href={link.href}
+              class="cosy:link cosy:link-hover cosy:no-underline cosy:hover:no-underline"
+            >
+              {link.name}
+            </a>
+          ) : (
+            <span class="cosy:opacity-50">{link.name}</span>
+          )}
+        </li>
+      ))
+    }
+  </ul>
+</nav>