@coffic/cosy-ui 0.6.10 → 0.6.14

package/dist/icons/InfoIcon.astro

@@ -0,0 +1,26 @@
+---
+import AstroIcon from './AstroIcon.astro';
+/**
+ * 信息图标组件
+ */
+interface Props {
+	/**
+	 * 图标的大小
+	 * @default "24px"
+	 */
+	size?: string;
+	/**
+	 * 图标的颜色
+	 * @default "currentColor"
+	 */
+	color?: string;
+	/**
+	 * 自定义类名
+	 */
+	class?: string;
+}
+
+const { size = '24px', color = 'currentColor', class: className = '' } = Astro.props;
+---
+
+<AstroIcon name="info" size={size} color={color} class={className} />

package/dist/icons/LinkIcon.astro

@@ -0,0 +1,27 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+/**
+ * 链接图标组件
+ */
+interface Props {
+	/**
+	 * 图标的大小
+	 * @default "24px"
+	 */
+	size?: string;
+	/**
+	 * 图标的颜色
+	 * @default "currentColor"
+	 */
+	color?: string;
+	/**
+	 * 自定义类名
+	 */
+	class?: string;
+}
+
+const { size = '24px', color = 'currentColor', class: className = '' } = Astro.props;
+---
+
+<AstroIcon name="link" size={size} color={color} class={className} />

package/dist/icons/LinkedinIcon.astro

@@ -0,0 +1,23 @@
+---
+import AstroIcon from './AstroIcon.astro';
+interface Props {
+	/**
+	 * 图标的大小
+	 * @default "24px"
+	 */
+	size?: string;
+	/**
+	 * 图标的颜色
+	 * @default "currentColor"
+	 */
+	color?: string;
+	/**
+	 * 自定义类名
+	 */
+	class?: string;
+}
+
+const { size = '24px', color = 'currentColor', class: className = '' } = Astro.props;
+---
+
+<AstroIcon name="linkedin" size={size} color={color} class={className} />

package/dist/icons/MenuIcon.astro

@@ -0,0 +1,27 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+/**
+ * 菜单图标组件
+ */
+interface Props {
+	/**
+	 * 图标的大小
+	 * @default "24px"
+	 */
+	size?: string;
+	/**
+	 * 图标的颜色
+	 * @default "currentColor"
+	 */
+	color?: string;
+	/**
+	 * 自定义类名
+	 */
+	class?: string;
+}
+
+const { size = '24px', color = 'currentColor', class: className = '' } = Astro.props;
+---
+
+<AstroIcon name="menu" size={size} color={color} class={className} />

package/dist/icons/SearchIcon.astro

@@ -0,0 +1,23 @@
+---
+import AstroIcon from './AstroIcon.astro';
+interface Props {
+	/**
+	 * 图标的大小
+	 * @default "24px"
+	 */
+	size?: string;
+	/**
+	 * 图标的颜色
+	 * @default "currentColor"
+	 */
+	color?: string;
+	/**
+	 * 自定义类名
+	 */
+	class?: string;
+}
+
+const { size = '24px', color = 'currentColor', class: className = '' } = Astro.props;
+---
+
+<AstroIcon name="search" size={size} color={color} class={className} />

package/dist/icons/SettingsIcon.astro

@@ -0,0 +1,18 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+interface Props {
+	class?: string;
+	width?: string;
+	height?: string;
+	stroke?: string;
+	fill?: string;
+	size?: string;
+	color?: string;
+	strokeWidth?: string;
+}
+
+const { class: className, size = '24', color = 'currentColor' } = Astro.props;
+---
+
+<AstroIcon name="settings" size={size} color={color} class={className} />

package/dist/{components/icons → icons}/SocialIcon.astro

@@ -1,18 +1,18 @@
 ---
 /**
  * @component SocialIcon
- * 
+ *
  * @description
  * SocialIcon 组件用于显示社交媒体平台的图标，支持多种常见的社交媒体平台。
  * 它提供了一致的样式和交互效果，同时支持自定义大小和颜色。
- * 
+ *
  * @design
  * 设计理念：
  * 1. 简洁明了 - 使用清晰易识别的图标表示社交媒体平台
  * 2. 一致性 - 保持统一的样式和交互效果
  * 3. 可定制性 - 支持自定义大小、颜色和样式
  * 4. 可访问性 - 提供适当的 aria 标签，确保屏幕阅读器可以识别
- * 
+ *
  * @usage
  * 基本用法：
  * ```astro
@@ -20,12 +20,12 @@
  * <SocialIcon platform="twitter" />
  * <SocialIcon platform="linkedin" />
  * ```
- * 
+ *
  * 自定义大小和颜色：
  * ```astro
  * <SocialIcon platform="github" size="32px" color="#333" />
  * ```
- * 
+ *
  * 使用自定义类名：
  * ```astro
  * <SocialIcon platform="twitter" class="my-custom-class" />
@@ -33,7 +33,7 @@
  */
 
 // 导入样式
-import '../../app.css';
+import '../app.css';
 
 import GithubIcon from './GithubIcon.astro';
 import TwitterIcon from './TwitterIcon.astro';
@@ -45,30 +45,30 @@ interface Props {
 	 * @default "default"
 	 */
 	platform: string;
-	
+
 	/**
 	 * 图标的大小
 	 * @default "24px"
 	 */
 	size?: string;
-	
+
 	/**
 	 * 图标的颜色
 	 * @default "currentColor"
 	 */
 	color?: string;
-	
+
 	/**
 	 * 自定义类名
 	 */
 	class?: string;
 }
 
-const { 
-	platform = 'default', 
-	size = '24px', 
-	color = 'currentColor', 
-	class: className = '' 
+const {
+	platform = 'default',
+	size = '24px',
+	color = 'currentColor',
+	class: className = '',
 } = Astro.props;
 
 // 获取平台名称的首字母大写版本，用于显示

package/dist/icons/SuccessIcon.astro

@@ -0,0 +1,24 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+interface Props {
+	/**
+	 * 图标的大小
+	 * @default "24px"
+	 */
+	size?: string;
+	/**
+	 * 图标的颜色
+	 * @default "currentColor"
+	 */
+	color?: string;
+	/**
+	 * 自定义类名
+	 */
+	class?: string;
+}
+
+const { size = '24px', color = 'currentColor', class: className = '' } = Astro.props;
+---
+
+<AstroIcon name="success" size={size} color={color} class={className} />

package/dist/icons/SunCloudyIcon.astro

@@ -0,0 +1,23 @@
+---
+import AstroIcon from './AstroIcon.astro';
+interface Props {
+	/**
+	 * 图标的大小
+	 * @default "24px"
+	 */
+	size?: string;
+	/**
+	 * 图标的颜色
+	 * @default "currentColor"
+	 */
+	color?: string;
+	/**
+	 * 自定义类名
+	 */
+	class?: string;
+}
+
+const { size = '24px', color = 'currentColor', class: className = '' } = Astro.props;
+---
+
+<AstroIcon name="sunCloudy" size={size} color={color} class={className} />

package/dist/icons/TwitterIcon.astro

@@ -0,0 +1,24 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+interface Props {
+	/**
+	 * 图标的大小
+	 * @default "24px"
+	 */
+	size?: string;
+	/**
+	 * 图标的颜色
+	 * @default "currentColor"
+	 */
+	color?: string;
+	/**
+	 * 自定义类名
+	 */
+	class?: string;
+}
+
+const { size = '24px', color = 'currentColor', class: className = '' } = Astro.props;
+---
+
+<AstroIcon name="twitter" size={size} color={color} class={className} />

package/dist/icons/UserIcon.astro

@@ -0,0 +1,24 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+interface Props {
+	/**
+	 * 图标的大小
+	 * @default "24px"
+	 */
+	size?: string;
+	/**
+	 * 图标的颜色
+	 * @default "currentColor"
+	 */
+	color?: string;
+	/**
+	 * 自定义类名
+	 */
+	class?: string;
+}
+
+const { size = '24px', color = 'currentColor', class: className = '' } = Astro.props;
+---
+
+<AstroIcon name="user" size={size} color={color} class={className} />

package/dist/icons/WarningIcon.astro

@@ -0,0 +1,27 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+/**
+ * 警告图标组件
+ */
+interface Props {
+	/**
+	 * 图标的大小
+	 * @default "24px"
+	 */
+	size?: string;
+	/**
+	 * 图标的颜色
+	 * @default "currentColor"
+	 */
+	color?: string;
+	/**
+	 * 自定义类名
+	 */
+	class?: string;
+}
+
+const { size = '24px', color = 'currentColor', class: className = '' } = Astro.props;
+---
+
+<AstroIcon name="warning" size={size} color={color} class={className} />

package/dist/icons/XCircle.astro

@@ -0,0 +1,24 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+interface Props {
+	/**
+	 * 图标的大小
+	 * @default "24px"
+	 */
+	size?: string;
+	/**
+	 * 图标的颜色
+	 * @default "currentColor"
+	 */
+	color?: string;
+	/**
+	 * 自定义类名
+	 */
+	class?: string;
+}
+
+const { size = '24px', color = 'currentColor', class: className = '' } = Astro.props;
+---
+
+<AstroIcon name="xCircle" size={size} color={color} class={className} />

package/dist/index.ts

@@ -46,7 +46,7 @@ export { default as Heading } from './components/typography/Heading.astro';
 export { default as ErrorPage404 } from './components/errors/404.astro';
 
 // Icons
-export * from './icons';
+export * from './index_icons';
 
 // Containers
 export { default as Container } from './components/containers/Container.astro';

package/dist/index_icons.ts

@@ -0,0 +1,23 @@
+export { default as SocialIcon } from './icons/SocialIcon.astro';
+export { default as TwitterIcon } from './icons/TwitterIcon.astro';
+export { default as UserIcon } from './icons/UserIcon.astro';
+export { default as WarningIcon } from './icons/WarningIcon.astro';
+export { default as XCircle } from './icons/XCircle.astro';
+export { default as InfoIcon } from './icons/InfoIcon.astro';
+export { default as LinkIcon } from './icons/LinkIcon.astro';
+export { default as LinkedinIcon } from './icons/LinkedinIcon.astro';
+export { default as MenuIcon } from './icons/MenuIcon.astro';
+export { default as SearchIcon } from './icons/SearchIcon.astro';
+export { default as SuccessIcon } from './icons/SuccessIcon.astro';
+export { default as SunCloudyIcon } from './icons/SunCloudyIcon.astro';
+export { default as AlertTriangle } from './icons/AlertTriangle.astro';
+export { default as CalendarIcon } from './icons/CalendarIcon.astro';
+export { default as CheckCircle } from './icons/CheckCircle.astro';
+export { default as CheckIcon } from './icons/CheckIcon.astro';
+export { default as ClipboardIcon } from './icons/ClipboardIcon.astro';
+export { default as CloseIcon } from './icons/CloseIcon.astro';
+export { default as ErrorIcon } from './icons/ErrorIcon.astro';
+export { default as GithubIcon } from './icons/GithubIcon.astro';
+export { default as InfoCircle } from './icons/InfoCircle.astro';
+export { default as SettingsIcon } from './icons/SettingsIcon.astro';
+export { default as ChevronDownIcon } from './icons/ChevronDownIcon.astro';

package/dist/index_vue.ts

@@ -0,0 +1,41 @@
+// AlertDialog
+export { AlertDialogExamples, AlertDialogExampleCodes, AlertDialog } from './vue/AlertDialog';
+
+// Banner
+export { BannerBoxExamples, BannerBoxExampleCodes, BannerBox } from './vue/BannerBox';
+
+// Counter
+export { default as VueCounter } from './vue/VueCounter.vue';
+
+// SmartHero
+export { default as SmartHero } from './vue/SmartHero.vue';
+
+// ConfirmDialog
+export { default as ConfirmDialog } from './vue/ConfirmDialog.vue';
+
+// FeatureButton
+export { default as FeatureButton } from './vue/FeatureButton.vue';
+export { default as FeatureCard } from './vue/BannerBox/FeatureCard.vue';
+
+// Icons
+export { default as SearchIcon } from './vue/Icons/SearchIcon.vue';
+export { default as SettingsIcon } from './vue/Icons/SettingsIcon.vue';
+export { default as InfoIcon } from './vue/Icons/InfoIcon.vue';
+export { default as InfoCircleIcon } from './vue/Icons/InfoCircleIcon.vue';
+export { default as LinkIcon } from './vue/Icons/LinkIcon.vue';
+export { default as MenuIcon } from './vue/Icons/MenuIcon.vue';
+export { default as UserIcon } from './vue/Icons/UserIcon.vue';
+export { default as XCircleIcon } from './vue/Icons/XCircleIcon.vue';
+
+// List
+export { default as ListItem } from './vue/ListItem.vue';
+
+// Windows
+export { MacWindowExamples, MacWindowExampleCodes, MacWindow } from './vue/MacWindow';
+export { iPhoneWindowExamples, iPhoneWindowExampleCodes, iPhoneWindow } from './vue/iPhone';
+
+// SmartLink
+export { default as SmartLink } from './vue/SmartLink.vue';
+
+// TagList
+export { default as TagList } from './vue/TagList.vue';

package/dist/vue/{AlertDialog.vue → AlertDialog/AlertDialog.vue}

@@ -40,7 +40,7 @@ const showDialog = ref(false);
 -->
 
 <script lang="ts">
-import '../app.css'
+import '../../style'
 import { defineComponent } from 'vue'
 
 type MessageKey = 'confirm';

package/dist/vue/AlertDialog/Basic.vue

@@ -0,0 +1,38 @@
+<!--
+@component AlertDialog.Basic
+
+@description
+AlertDialog 组件的基础示例，展示最基本的对话框用法。
+
+@usage
+```vue
+<AlertDialogExamples.Basic />
+```
+-->
+
+<script lang="ts">
+import '../../app.css'
+import { ref, defineComponent } from 'vue'
+import AlertDialog from './AlertDialog.vue'
+
+export default defineComponent({
+    name: 'AlertDialogBasicExample',
+    components: {
+        AlertDialog
+    },
+    setup() {
+        const isShow = ref(false)
+
+        return {
+            isShow
+        }
+    }
+})
+</script>
+
+<template>
+    <button @click="isShow = true" class="cosy:btn cosy:btn-primary">
+        显示对话框
+    </button>
+    <AlertDialog v-model="isShow" message="这是一条重要信息" />
+</template>

package/dist/vue/AlertDialog/Multilang.vue

@@ -0,0 +1,48 @@
+<!--
+@component AlertDialog.Multilang
+
+@description
+AlertDialog 组件的多语言示例，展示如何使用不同语言的对话框。
+
+@usage
+```vue
+<AlertDialogExamples.Multilang />
+```
+-->
+
+<script lang="ts">
+import '../../app.css'
+import { ref, defineComponent } from 'vue'
+import AlertDialog from './AlertDialog.vue'
+
+export default defineComponent({
+    name: 'AlertDialogMultilangExample',
+    components: {
+        AlertDialog
+    },
+    setup() {
+        const isShowEn = ref(false)
+        const isShowJa = ref(false)
+
+        return {
+            isShowEn,
+            isShowJa
+        }
+    }
+})
+</script>
+
+<template>
+    <div class="flex gap-2">
+        <button @click="isShowEn = true" class="cosy:btn cosy:btn-primary">
+            English
+        </button>
+        <button @click="isShowJa = true" class="cosy:btn cosy:btn-primary">
+            日本語
+        </button>
+    </div>
+
+    <AlertDialog v-model="isShowEn" message="Important information" ok-text="OK" cancel-text="Cancel" />
+
+    <AlertDialog v-model="isShowJa" message="重要なお知らせ" ok-text="確認" cancel-text="キャンセル" />
+</template>

package/dist/vue/AlertDialog/index.ts

@@ -0,0 +1,58 @@
+import Basic from './Basic.vue';
+import Multilang from './Multilang.vue';
+import BasicSource from './Basic.vue?raw';
+import MultilangSource from './Multilang.vue?raw';
+
+// 提取简单示例源代码函数
+function extractSimpleExample(source: string): string {
+	// 提取模板部分
+	const templateMatch = source.match(/<template>([\s\S]*)<\/template>/m);
+	const scriptMatch = source.match(/<script[\s\S]*?>([\s\S]*)<\/script>/m);
+
+	if (!templateMatch) {
+		return source;
+	}
+
+	let importSection = `<script setup lang="ts">
+import { ref } from 'vue'
+import { AlertDialog } from '@cosy/index_vue'
+`;
+
+	// 从源码中提取导入语句（除了组件的导入和app.css）
+	if (scriptMatch && scriptMatch[1]) {
+		const importLines = scriptMatch[1]
+			.split('\n')
+			.filter(
+				(line) =>
+					line.includes('import') &&
+					!line.includes('../../app.css') &&
+					!line.includes('AlertDialog')
+			);
+
+		if (importLines.length > 0) {
+			importSection += importLines.join('\n') + '\n';
+		}
+	}
+
+	importSection += '</script>\n\n';
+
+	// 提取模板内容，并替换组件路径
+	const templateContent = templateMatch[1].replace('../AlertDialog.vue', 'AlertDialog');
+
+	return importSection + '<template>' + templateContent + '</template>';
+}
+
+// 导出主组件
+export { default as AlertDialog } from './AlertDialog.vue';
+
+// 导出示例组件
+export const AlertDialogExamples = {
+	Basic,
+	Multilang,
+};
+
+// 导出示例源代码
+export const AlertDialogExampleCodes = {
+	Basic: extractSimpleExample(BasicSource),
+	Multilang: extractSimpleExample(MultilangSource),
+};