@coffic/cosy-ui 0.6.42 → 0.7.4

package/dist/contact/Contact.astro

@@ -0,0 +1,279 @@
+---
+/**
+ * @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/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/contact/EContactBasicContainer.astro

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

package/dist/contact/EContactCompact.astro

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

package/dist/contact/EContactCompactContainer.astro

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

package/dist/contact/EContactCustomStyle.astro

@@ -0,0 +1,22 @@
+---
+/**
+ * @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/contact/EContactCustomStyleContainer.astro

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

package/dist/contact/EContactSocial.astro

@@ -0,0 +1,21 @@
+---
+/**
+ * @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/contact/EContactSocialContainer.astro

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

package/dist/contact/EContactWithTitle.astro

@@ -0,0 +1,18 @@
+---
+/**
+ * @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/contact/EContactWithTitleContainer.astro

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

package/dist/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,
+    },
+}; 

package/dist/container/EContainerBasic.astro

@@ -0,0 +1,13 @@
+---
+/**
+ * @component Container.Basic
+ *
+ * @description
+ * 基础Container组件示例，展示最简单的容器用法。
+ */
+import { Container } from '../index';
+---
+
+<Container>
+	<p class="cosy:text-center">这是一个基础容器，内容会被限制在一个合理的宽度内并居中显示</p>
+</Container>

package/dist/container/EContainerBasicContainer.astro

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

package/dist/container/EContainerFlexBetween.astro

@@ -0,0 +1,16 @@
+---
+/**
+ * @component Container.FlexBetween
+ *
+ * @description
+ * 展示Container组件的两端对齐(justify="between")布局功能。
+ */
+import '../style.ts';
+import { Container } from '../index';
+---
+
+<Container flex="row" justify="between" border padding="md">
+	<div class="cosy:bg-primary cosy:text-primary-content cosy:p-4 cosy:rounded">左侧</div>
+	<div class="cosy:bg-secondary cosy:text-secondary-content cosy:p-4 cosy:rounded">中间</div>
+	<div class="cosy:bg-accent cosy:text-accent-content cosy:p-4 cosy:rounded">右侧</div>
+</Container>

package/dist/container/EContainerFlexCenter.astro

@@ -0,0 +1,23 @@
+---
+/**
+ * @component Container.FlexCenter
+ *
+ * @description
+ * 展示Container组件的居中对齐(items="center" justify="center")布局功能。
+ */
+import '../style.ts';
+import { Container } from '../index';
+---
+
+<Container
+	flex="row"
+	gap="md"
+	items="center"
+	justify="center"
+	border
+	padding="md"
+	class="cosy:h-32">
+	<div class="cosy:bg-primary cosy:text-primary-content cosy:p-4 cosy:rounded">居中项</div>
+	<div class="cosy:bg-secondary cosy:text-secondary-content cosy:p-6 cosy:rounded">较大项</div>
+	<div class="cosy:bg-accent cosy:text-accent-content cosy:p-2 cosy:rounded">较小项</div>
+</Container>

package/dist/container/EContainerFlexColumn.astro

@@ -0,0 +1,16 @@
+---
+/**
+ * @component Container.FlexColumn
+ *
+ * @description
+ * 展示Container组件的列排列(flex="col")布局功能。
+ */
+import '../style.ts';
+import { Container } from '../index';
+---
+
+<Container flex="col" gap="md" border padding="md">
+	<div class="cosy:bg-primary cosy:text-primary-content cosy:p-4 cosy:rounded">第一项</div>
+	<div class="cosy:bg-secondary cosy:text-secondary-content cosy:p-4 cosy:rounded">第二项</div>
+	<div class="cosy:bg-accent cosy:text-accent-content cosy:p-4 cosy:rounded">第三项</div>
+</Container>

package/dist/container/EContainerFlexContainer.astro

@@ -0,0 +1,34 @@
+---
+import { CodeContainer } from '../index';
+import ContainerFlexRow from './EContainerFlexRow.astro';
+import ContainerFlexColumn from './EContainerFlexColumn.astro';
+import ContainerFlexCenter from './EContainerFlexCenter.astro';
+import ContainerFlexBetween from './EContainerFlexBetween.astro';
+
+import ContainerFlexRowSourceCode from './EContainerFlexRow.astro?raw';
+import ContainerFlexColumnSourceCode from './EContainerFlexColumn.astro?raw';
+import ContainerFlexCenterSourceCode from './EContainerFlexCenter.astro?raw';
+import ContainerFlexBetweenSourceCode from './EContainerFlexBetween.astro?raw';
+---
+
+<CodeContainer
+	titles={['Row', 'Column', 'Center', 'Between']}
+	codes={[
+		ContainerFlexRowSourceCode,
+		ContainerFlexColumnSourceCode,
+		ContainerFlexCenterSourceCode,
+		ContainerFlexBetweenSourceCode,
+	]}>
+	<div id="tab-1">
+		<ContainerFlexRow />
+	</div>
+	<div id="tab-2">
+		<ContainerFlexColumn />
+	</div>
+	<div id="tab-3">
+		<ContainerFlexCenter />
+	</div>
+	<div id="tab-4">
+		<ContainerFlexBetween />
+	</div>
+</CodeContainer>

package/dist/container/EContainerFlexRow.astro

@@ -0,0 +1,16 @@
+---
+/**
+ * @component Container.FlexRow
+ *
+ * @description
+ * 展示Container组件的行排列(flex="row")布局功能。
+ */
+import '../style.ts';
+import { Container } from '../index';
+---
+
+<Container flex="row" gap="md" border padding="md">
+	<div class="cosy:bg-primary cosy:text-primary-content cosy:p-4 cosy:rounded">第一项</div>
+	<div class="cosy:bg-secondary cosy:text-secondary-content cosy:p-4 cosy:rounded">第二项</div>
+	<div class="cosy:bg-accent cosy:text-accent-content cosy:p-4 cosy:rounded">第三项</div>
+</Container>

package/dist/container/EContainerPadding.astro

@@ -0,0 +1,32 @@
+---
+/**
+ * @component Container.Padding
+ *
+ * @description
+ * 展示Container组件的不同内边距选项：none、sm、md、lg、xl。
+ */
+import '../style.ts';
+import { Container } from '../index';
+---
+
+<div class="cosy:space-y-4">
+	<Container padding="none" border>
+		<p class="cosy:text-center">无内边距 (none)</p>
+	</Container>
+
+	<Container padding="sm" border>
+		<p class="cosy:text-center">小内边距 (sm)</p>
+	</Container>
+
+	<Container padding="md" border>
+		<p class="cosy:text-center">中等内边距 (md) - 默认</p>
+	</Container>
+
+	<Container padding="lg" border>
+		<p class="cosy:text-center">大内边距 (lg)</p>
+	</Container>
+
+	<Container padding="xl" border>
+		<p class="cosy:text-center">超大内边距 (xl)</p>
+	</Container>
+</div>

package/dist/container/EContainerPaddingContainer.astro

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