@coffic/cosy-ui 0.7.2 → 0.7.4

package/dist/buttons-vue/Button.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  variant?: 
+    | 'primary'
+    | 'secondary'
+    | 'accent'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error'
+    | 'ghost'
+    | 'link'
+    | 'outline'
+    | 'neutral'
+  size?: 'lg' | 'md' | 'sm' | 'xs'
+  shape?: 'circle' | 'square'
+  wide?: boolean
+  block?: boolean
+  loading?: boolean
+  disabled?: boolean
+  type?: 'button' | 'submit' | 'reset'
+  href?: string
+  target?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+  size: 'md',
+  wide: false,
+  block: false,
+  loading: false,
+  disabled: false,
+  type: 'button'
+})
+
+const buttonClasses = computed(() => {
+  const classes = ['cosy:btn']
+
+  // Variant classes
+  const variantClasses = {
+    primary: 'cosy:btn-primary',
+    secondary: 'cosy:btn-secondary',
+    accent: 'cosy:btn-accent',
+    info: 'cosy:btn-info',
+    success: 'cosy:btn-success',
+    warning: 'cosy:btn-warning',
+    error: 'cosy:btn-error',
+    ghost: 'cosy:btn-ghost',
+    link: 'cosy:btn-link',
+    outline: 'cosy:btn-outline',
+    neutral: 'cosy:btn-neutral',
+  }
+
+  // Size classes
+  const sizeClasses = {
+    lg: 'cosy:btn-lg',
+    md: 'cosy:btn-md',
+    sm: 'cosy:btn-sm',
+    xs: 'cosy:btn-xs',
+  }
+
+  // Shape classes
+  const shapeClasses = {
+    circle: 'cosy:btn-circle',
+    square: 'cosy:btn-square',
+  }
+
+  if (variantClasses[props.variant]) {
+    classes.push(variantClasses[props.variant])
+  }
+
+  if (sizeClasses[props.size]) {
+    classes.push(sizeClasses[props.size])
+  }
+
+  if (props.shape && shapeClasses[props.shape]) {
+    classes.push(shapeClasses[props.shape])
+  }
+
+  if (props.wide) classes.push('cosy:btn-wide')
+  if (props.block) classes.push('cosy:btn-block')
+  if (props.loading) classes.push('cosy:loading')
+
+  return classes
+})
+</script>
+
+<template>
+  <component
+    :is="props.href ? 'a' : 'button'"
+    :class="buttonClasses"
+    :type="props.href ? undefined : props.type"
+    :disabled="props.disabled"
+    :href="props.href"
+    :target="props.target"
+  >
+    <span class="cosy:flex cosy:items-center cosy:gap-2">
+      <slot name="icon-left" />
+      <slot />
+      <slot name="icon-right" />
+    </span>
+  </component>
+</template>

package/dist/buttons-vue/ButtonBasic.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import Button from './Button.vue'
+</script>
+
+<template>
+  <div class="cosy:flex cosy:gap-2">
+    <Button>默认按钮</Button>
+    <Button variant="primary">主要按钮</Button>
+    <Button variant="secondary">次要按钮</Button>
+  </div>
+</template>

package/dist/buttons-vue/ButtonFeature.vue

@@ -0,0 +1,91 @@
+
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps({
+    title: {
+        type: String,
+        required: false,
+        default: 'Feature Button'
+    },
+    size: {
+        type: String,
+        default: 'w-64',
+        validator: (value: string) => ['w-64', 'w-32', 'w-16', 'w-12', 'w-8'].includes(value)
+    },
+    lang: {
+        type: String,
+        default: 'en',
+        validator: (value: string) => ['en', 'zh'].includes(value)
+    },
+    showTips: {
+        type: Boolean,
+        default: false
+    }
+})
+
+const isPopupVisible = ref(false)
+
+const showPopup = () => {
+    if (props.showTips) {
+        isPopupVisible.value = true
+        setTimeout(hidePopup, 2000) // Auto-hide after 2 seconds
+    }
+}
+
+const hidePopup = () => {
+    isPopupVisible.value = false
+}
+</script>
+<template>
+    <div>
+        <!-- Button with hover effects -->
+        <button :class="[
+            'cosy:bg-cyan-500/20 cosy:text-cyan-500 cosy:border-cyan-500 cosy:border-2 cosy:hover:bg-cyan-500/30 cosy:hover:text-white cosy:hover:border-cyan-500/30 cosy:hover:scale-105 cosy:transition-all cosy:duration-300 cosy:rounded-2xl cosy:text-center cosy:backdrop-blur-lg cosy:text-2xl',
+            props.size
+        ]" @click="showPopup">
+            <slot />
+            {{ props.title }}
+        </button>
+
+        <!-- Popup message -->
+        <Transition name="fade">
+            <div v-if="isPopupVisible"
+                class="cosy:fixed cosy:inset-0 cosy:flex cosy:items-center cosy:justify-center cosy:z-50"
+                @click="hidePopup">
+                <div
+                    class="cosy:bg-black/80 cosy:backdrop-blur-sm cosy:p-6 cosy:rounded-xl cosy:text-white cosy:animate-popup">
+                    {{ lang === 'zh' ? '这是展示图，不支持操作' : 'This is a preview image, no operation is supported' }}
+                </div>
+            </div>
+        </Transition>
+    </div>
+</template>
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+
+.animate-popup {
+    animation: popup 0.3s ease-out;
+}
+
+@keyframes popup {
+    from {
+        transform: scale(0.95);
+        opacity: 0;
+    }
+
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+</style>

package/dist/buttons-vue/ButtonFeatureBasic.vue

@@ -0,0 +1,8 @@
+<template>
+    <FeatureButton title="特性按钮" />
+</template>
+
+<script setup lang="ts">
+import '../style';
+import FeatureButton from './ButtonFeature.vue';
+</script>

package/dist/buttons-vue/ButtonFeatureWithTips.vue

@@ -0,0 +1,7 @@
+<template>
+    <FeatureButton title="带提示特性" showTips />
+</template>
+
+<script setup lang="ts">
+import FeatureButton from './ButtonFeature.vue';
+</script>

package/dist/buttons-vue/ButtonLink.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import VueButton from './Button.vue'
+</script>
+
+<template>
+  <div class="cosy:flex cosy:gap-2">
+    <VueButton href="#" variant="primary">内部链接</VueButton>
+    <VueButton href="https://example.com" target="_blank" variant="primary">
+      外部链接
+      <template #icon-right>↗</template>
+    </VueButton>
+  </div>
+</template>

package/dist/buttons-vue/ButtonSizes.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import VueButton from './Button.vue'
+</script>
+
+<template>
+  <div class="cosy:flex cosy:items-center cosy:gap-2">
+    <VueButton size="xs">超小按钮</VueButton>
+    <VueButton size="sm">小型按钮</VueButton>
+    <VueButton size="md">中等按钮</VueButton>
+    <VueButton size="lg">大型按钮</VueButton>
+  </div>
+</template>

package/dist/buttons-vue/ButtonWithIcons.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import VueButton from './Button.vue'
+</script>
+
+<template>
+  <div class="cosy:flex cosy:gap-2">
+    <VueButton>
+      <template #icon-left>👈</template>
+      左侧图标
+    </VueButton>
+    <VueButton>
+      右侧图标
+      <template #icon-right>👉</template>
+    </VueButton>
+    <VueButton>
+      <template #icon-left>👈</template>
+      两侧图标
+      <template #icon-right>👉</template>
+    </VueButton>
+  </div>
+</template>

package/dist/buttons-vue/index.ts

@@ -0,0 +1 @@
+export { default as Button } from './Button.vue'

package/dist/card/Card.astro

@@ -57,7 +57,7 @@
  * ```
  *
  * @props
- * @prop {string} [title] - 卡片标题
+ * @prop {string} title - 卡片标题
  * @prop {string} [subtitle] - 卡片副标题或描述
  * @prop {string} [imageUrl] - 卡片顶部图片的URL
  * @prop {string} [href] - 如果提供，卡片将变成可点击的链接
@@ -73,19 +73,68 @@ import '../style.ts';
 interface Props {
 	title: string;
 	subtitle?: string;
+	imageUrl?: string;
+	href?: string;
+	compact?: boolean;
 	class?: string;
 }
 
-const { title, subtitle, class: className } = Astro.props;
+const { title, subtitle, imageUrl, href, compact, class: className = '' } = Astro.props;
+
+// 构建卡片样式类
+const cardClasses = [
+	'cosy:card',
+	'cosy:w-full',
+	'cosy:bg-base-100',
+	'cosy:shadow-xl',
+	'cosy:hover:shadow-2xl',
+	'cosy:transition-all',
+	'cosy:duration-300',
+	'cosy:ease-in-out',
+	compact ? 'cosy:card-compact' : '',
+	href ? 'cosy:cursor-pointer cosy:hover:scale-105 cosy:transform cosy:no-underline' : '',
+	className,
+]
+	.filter(Boolean)
+	.join(' ');
+
+// 内容区域的padding类
+const contentPadding = compact ? 'cosy:p-4' : 'cosy:p-6';
+
+// 如果是链接卡片，使用a标签，否则使用article标签
+const Tag = href ? 'a' : 'article';
 ---
 
-<article class={`cosy-card ${className || ''}`}>
-	<header class="cosy-card__header">
-		<h3 class="cosy-card__title">{title}</h3>
-		{subtitle && <p class="cosy-card__subtitle">{subtitle}</p>}
-	</header>
+<Tag class={cardClasses} href={href} {...href && { target: '_self' }}>
+	{
+		imageUrl && (
+			<figure class="not-prose cosy:m-0 cosy:p-0">
+				<img
+					src={imageUrl}
+					alt={title}
+					class="cosy:w-full cosy:h-48 cosy:object-cover cosy:rounded-t-lg"
+				/>
+			</figure>
+		)
+	}
+
+	<div class={`cosy:card-body ${contentPadding}`}>
+		<h2 class="cosy:card-title cosy:text-xl cosy:font-bold">
+			{title}
+		</h2>
+
+		{
+			subtitle && (
+				<p class="cosy:text-base-content/70 cosy:text-sm cosy:leading-relaxed">{subtitle}</p>
+			)
+		}
 
-	<div class="cosy-card__content">
-		<slot />
+		{
+			Astro.slots.has('default') && (
+				<div class="cosy:mt-4">
+					<slot />
+				</div>
+			)
+		}
 	</div>
-</article>
+</Tag>

package/dist/card/ECardBasic.astro

@@ -0,0 +1,11 @@
+---
+/**
+ * @component Card.Basic
+ *
+ * @description
+ * 基础Card组件示例，展示最简单的卡片用法。
+ */
+import { Card } from '../index';
+---
+
+<Card title="基础卡片"> 这是一个基础的卡片内容，展示了Card组件的最简单用法。 </Card>

package/dist/card/ECardBasicContainer.astro

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

package/dist/card/ECardClickable.astro

@@ -0,0 +1,13 @@
+---
+/**
+ * @component Card.Clickable
+ *
+ * @description
+ * 可点击的Card组件示例，展示如何使用href属性创建链接卡片。
+ */
+import { Card } from '../index';
+---
+
+<Card title="可点击的卡片" subtitle="点击整个卡片区域可以跳转到指定链接" href="#">
+	这是一个可点击的卡片，鼠标悬停时会有缩放效果，点击可以跳转到指定页面。
+</Card>

package/dist/card/ECardClickableContainer.astro

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

package/dist/card/ECardCompact.astro

@@ -0,0 +1,13 @@
+---
+/**
+ * @component Card.Compact
+ *
+ * @description
+ * 紧凑模式的Card组件示例，展示如何使用compact属性。
+ */
+import { Card } from '../index';
+---
+
+<Card title="紧凑卡片" subtitle="使用compact模式可以减少内边距" compact>
+	这是一个紧凑模式的卡片，适合在空间有限的情况下使用。
+</Card>

package/dist/card/ECardCompactContainer.astro

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

package/dist/card/ECardCustomStyle.astro

@@ -0,0 +1,17 @@
+---
+/**
+ * @component Card.CustomStyle
+ *
+ * @description
+ * 展示如何使用class属性自定义Card组件的样式。
+ */
+import '../style.ts';
+import { Card } from '../index';
+---
+
+<Card
+	title="自定义样式卡片"
+	subtitle="这个卡片使用了自定义的背景色和边框"
+	class="cosy:bg-gradient-to-r cosy:from-blue-50 cosy:to-indigo-100 cosy:border-2 cosy:border-blue-200">
+	这是一个自定义样式的卡片，展示了如何通过class属性来覆盖默认样式。
+</Card>

package/dist/card/ECardCustomStyleContainer.astro

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

package/dist/card/ECardWithImage.astro

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

package/dist/card/ECardWithImageContainer.astro

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

package/dist/card/ECardWithSubtitle.astro

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

package/dist/card/ECardWithSubtitleContainer.astro

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

package/dist/card/index.ts

@@ -1,7 +1,33 @@
+import Card from './Card.astro';
+import CardCourse from './CardCourse.astro';
+import CardBasic from './CardBasic.astro';
+import CardWithImage from './CardWithImage.astro';
+import CardLink from './CardLink.astro';
+import CardCompact from './CardCompact.astro';
 
-export { default as Card } from './Card.astro';
-export { default as CardCourse } from './CardCourse.astro';
-export { default as CardBasic } from './CardBasic.astro';
-export { default as CardWithImage } from './CardWithImage.astro';
-export { default as CardLink } from './CardLink.astro';
-export { default as CardCompact } from './CardCompact.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 { CardWithImage };
+export { CardLink };
+export { CardCompact };
+
+export const CardPackage = {
+    Card,
+    CardContainers: {
+        Basic: CardBasicContainer,
+        WithSubtitle: CardWithSubtitleContainer,
+        WithImage: CardWithImageContainer,
+        Clickable: CardClickableContainer,
+        Compact: CardCompactContainer,
+        CustomStyle: CardCustomStyleContainer,
+    },
+};

package/dist/confirm-dialog-vue/Basic.vue

@@ -0,0 +1,57 @@
+<!--
+@component ConfirmDialog.Basic
+
+@description
+ConfirmDialog 组件的基础示例，展示最基本的确认对话框用法。
+
+@usage
+```vue
+<ConfirmDialogExamples.Basic />
+```
+-->
+
+<script lang="ts">
+import '../../app.css'
+import { ref, defineComponent } from 'vue'
+import ConfirmDialog from './ConfirmDialog.vue'
+
+export default defineComponent({
+    name: 'ConfirmDialogBasicExample',
+    components: {
+        ConfirmDialog
+    },
+    setup() {
+        const isShow = ref(false)
+        const result = ref('')
+
+        const handleConfirm = () => {
+            result.value = '用户已确认操作'
+
+            // 3秒后清除结果
+            setTimeout(() => {
+                result.value = ''
+            }, 3000)
+        }
+
+        return {
+            isShow,
+            result,
+            handleConfirm
+        }
+    }
+})
+</script>
+
+<template>
+    <div class="cosy:flex cosy:flex-col cosy:gap-4">
+        <button @click="isShow = true" class="cosy:btn cosy:btn-primary">
+            显示确认对话框
+        </button>
+
+        <div v-if="result" class="cosy:alert cosy:alert-success cosy:shadow-lg">
+            <span>{{ result }}</span>
+        </div>
+    </div>
+
+    <ConfirmDialog v-model="isShow" title="确认操作" message="您确定要执行此操作吗？此操作无法撤销。" @confirm="handleConfirm" />
+</template>