@coffic/cosy-ui 0.8.26 → 0.8.28

package/dist/index-astro.ts

@@ -2,6 +2,7 @@
 export * from './src-astro/alert';
 export * from './src-astro/article';
 export * from './src-astro/banner';
+export * from './src-astro/badge';
 export * from './src-astro/button/index_astro';
 export * from './src-astro/card';
 export * from './src-astro/code-block';

package/dist/index-vue.ts

@@ -4,12 +4,18 @@ export * from './src-vue/alert-dialog/index';
 // Alert
 export * from './src-vue/alert/index';
 
+// Badge
+export * from './src-vue/badge/index';
+
 // Banner
 export * from './src-vue/banner-box/index';
 
 // BlogList
 export * from './src-vue/blog/index';
 
+// Card
+export * from './src-vue/card/index';
+
 // Container
 export * from './src-vue/container/index';
 
@@ -25,9 +31,21 @@ export * from './src-vue/buttons/index';
 // Icons
 export * from './src-vue/icons/index';
 
+// KeyCatcher
+export * from './src-vue/key-catcher/index';
+
 // List
 export * from './src-vue/list/index';
 
+// Progress
+export * from './src-vue/progress/index';
+
+// StatusBar
+export * from './src-vue/status-bar/index';
+
+// ToolBar
+export * from './src-vue/tool-bar/index';
+
 // Windows
 export * from './src-vue/mac-window/index';
 export * from './src-vue/iPhone/index';

package/dist/src-astro/badge/Badge.astro

@@ -0,0 +1,67 @@
+---
+/**
+ * @component Badge
+ * @description 一个用于高亮信息的小组件。
+ * @usage
+ * ```astro
+ * <Badge>默认</Badge>
+ * <Badge variant="primary">Primary</Badge>
+ * ```
+ * @props
+ * @prop {('primary'|'secondary'|'accent'|'ghost'|'info'|'success'|'warning'|'error')} [variant] - 徽章的颜色变体。
+ * @prop {('xs'|'sm'|'md'|'lg')} [size] - 徽章的尺寸。
+ * @prop {boolean} [outline=false] - 徽章是否为描边样式。
+ * @prop {string} [class] - 自定义 CSS 类。
+ * @slots
+ * @slot default - 徽章内容。
+ */
+import '../../style.ts';
+
+interface Props {
+  variant?:
+    | 'primary'
+    | 'secondary'
+    | 'accent'
+    | 'ghost'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error';
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  outline?: boolean;
+  class?: string;
+}
+
+const { variant, size, outline = false, class: className } = Astro.props;
+
+function getVariantClass(variant: Props['variant']) {
+  if (variant === 'primary') return 'cosy:badge-primary';
+  if (variant === 'secondary') return 'cosy:badge-secondary';
+  if (variant === 'accent') return 'cosy:badge-accent';
+  if (variant === 'ghost') return 'cosy:badge-ghost';
+  if (variant === 'info') return 'cosy:badge-info';
+  if (variant === 'success') return 'cosy:badge-success';
+  if (variant === 'warning') return 'cosy:badge-warning';
+  if (variant === 'error') return 'cosy:badge-error';
+  return '';
+}
+
+function getSizeClass(size: Props['size']) {
+  if (size === 'xs') return 'cosy:badge-xs';
+  if (size === 'sm') return 'cosy:badge-sm';
+  if (size === 'md') return 'cosy:badge-md';
+  if (size === 'lg') return 'cosy:badge-lg';
+  return '';
+}
+---
+
+<div
+  class:list={[
+    'cosy:badge',
+    getVariantClass(variant),
+    getSizeClass(size),
+    outline ? 'cosy:badge-outline' : '',
+    className,
+  ]}>
+  <slot />
+</div>

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

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

package/dist/src-astro/code-container/CodeContainer.astro

@@ -37,7 +37,7 @@
 import CodeToolbar from './CodeToolbar.astro';
 import Description from './Description.astro';
 import Preview from './Preview.astro';
-import CodePanel from './CodePanel.astro';
+import { CodePanel } from '../../index-astro';
 import '../../style.ts';
 
 interface Props {
@@ -92,7 +92,9 @@ const {
             </div>
           </Preview>
 
-          <CodePanel code={code} />
+          <div class="cosy:hidden cosy:code-example-panel" data-panel="code">
+            <CodePanel code={code} />
+          </div>
         </div>
       </div>
     ))

package/dist/src-astro/team-member/TeamMember.astro

@@ -19,7 +19,7 @@
  * <TeamMember
  *   name="张三"
  *   role="前端开发工程师"
- *   avatar="/images/avatars/zhangsan.jpg"
+ *   avatar="/images/avatars/jack.jpg"
  *   bio="拥有5年前端开发经验，专注于React和Vue生态系统。"
  * />
  * ```
@@ -29,7 +29,7 @@
  * <TeamMember
  *   name="李四"
  *   role="UI设计师"
- *   avatar="/images/avatars/lisi.jpg"
+ *   avatar="/images/avatars/mary.jpg"
  *   bio="专注于用户体验和界面设计，热爱创造直观易用的产品。"
  *   socialLinks={[
  *     { platform: 'github', url: 'https://github.com/lisi' },
@@ -80,6 +80,16 @@ export interface Props {
    * 自定义类名
    */
   class?: string;
+  /**
+   * 卡片阴影强度
+   * @default 'md'
+   */
+  shadow?: 'sm' | 'md' | 'lg' | 'xl';
+  /**
+   * 悬停时卡片阴影强度
+   * @default 'lg'
+   */
+  hoverShadow?: 'sm' | 'md' | 'lg' | 'xl';
 }
 
 const {
@@ -89,13 +99,35 @@ const {
   bio,
   socialLinks,
   class: className = '',
+  shadow = 'md',
+  hoverShadow = 'lg',
 } = Astro.props;
+
+const shadowMap = {
+  sm: 'cosy:shadow-sm',
+  md: 'cosy:shadow-md',
+  lg: 'cosy:shadow-lg',
+  xl: 'cosy:shadow-xl',
+};
+const hoverShadowMap = {
+  sm: 'cosy:hover:shadow-sm',
+  md: 'cosy:hover:shadow-md',
+  lg: 'cosy:hover:shadow-lg',
+  xl: 'cosy:hover:shadow-xl',
+};
+
+const shadowClass = shadowMap[shadow] || shadowMap['md'];
+const hoverShadowClass = hoverShadowMap[hoverShadow] || hoverShadowMap['lg'];
 ---
 
 <div
   class:list={[
-    'cosy:card cosy:bg-base-100 cosy:shadow-md cosy:hover:shadow-lg cosy:transition-shadow cosy:duration-300',
-    className,
+    [
+      'cosy:card cosy:bg-base-100 cosy:transition-shadow cosy:duration-300',
+      shadowClass,
+      hoverShadowClass,
+      className,
+    ],
   ]}>
   <figure class="cosy:flex cosy:justify-center cosy:p-4">
     <Image

package/dist/src-astro/team-member/index.ts

@@ -1,30 +1,7 @@
 import TeamMember from './TeamMember.astro';
-import TeamMemberBasic from './TeamMemberBasic.astro';
-import TeamMemberWithSocial from './TeamMemberWithSocial.astro';
-import TeamMemberCustomStyle from './TeamMemberCustomStyle.astro';
-import TeamMemberGroup from './TeamMemberGroup.astro';
-import TeamMemebrs from './TeamMembers.astro';
-
-import BasicSourceCode from './TeamMemberBasic.astro?raw';
-import WithSocialSourceCode from './TeamMemberWithSocial.astro?raw';
-import CustomStyleSourceCode from './TeamMemberCustomStyle.astro?raw';
-import GroupSourceCode from './TeamMemberGroup.astro?raw';
-
-import { extractSimpleExample } from '../../src/utils/component';
+import TeamMembers from './TeamMembers.astro';
 
 export {
-  TeamMember,
-  TeamMemberBasic,
-  TeamMemberWithSocial,
-  TeamMemberCustomStyle,
-  TeamMemberGroup,
-  TeamMemebrs,
-};
-
-// Export example codes
-export const TeamMemberExampleCodes = {
-  Basic: extractSimpleExample(BasicSourceCode, 'TeamMember'),
-  WithSocial: extractSimpleExample(WithSocialSourceCode, 'TeamMember'),
-  CustomStyle: extractSimpleExample(CustomStyleSourceCode, 'TeamMember'),
-  Group: extractSimpleExample(GroupSourceCode, 'TeamMember'),
+    TeamMember,
+    TeamMembers,
 };

package/dist/src-vue/badge/Badge.vue

@@ -0,0 +1,66 @@
+<!--
+@component Badge
+@description 一个用于高亮信息的小组件。
+@usage
+```vue
+<Badge>默认</Badge>
+<Badge variant="primary">Primary</Badge>
+```
+@props
+@prop {('primary'|'secondary'|'accent'|'ghost'|'info'|'success'|'warning'|'error')} [variant] - 徽章的颜色变体。
+@prop {('xs'|'sm'|'md'|'lg')} [size] - 徽章的尺寸。
+@prop {boolean} [outline=false] - 徽章是否为描边样式。
+@prop {string} [class] - 自定义 CSS 类。
+@slots
+@slot default - 徽章内容。
+-->
+<script setup lang="ts">
+import '../../style';
+import { computed } from 'vue';
+
+const props = defineProps({
+    variant: {
+        type: String,
+        default: undefined,
+        validator: (v: string) => ['primary', 'secondary', 'accent', 'ghost', 'info', 'success', 'warning', 'error'].includes(v)
+    },
+    size: {
+        type: String,
+        default: undefined,
+        validator: (v: string) => ['xs', 'sm', 'md', 'lg'].includes(v)
+    },
+    outline: Boolean,
+    class: String
+});
+
+const variantClass = computed(() => {
+    if (props.variant === 'primary') return 'cosy:badge-primary';
+    if (props.variant === 'secondary') return 'cosy:badge-secondary';
+    if (props.variant === 'accent') return 'cosy:badge-accent';
+    if (props.variant === 'ghost') return 'cosy:badge-ghost';
+    if (props.variant === 'info') return 'cosy:badge-info';
+    if (props.variant === 'success') return 'cosy:badge-success';
+    if (props.variant === 'warning') return 'cosy:badge-warning';
+    if (props.variant === 'error') return 'cosy:badge-error';
+    return '';
+});
+const sizeClass = computed(() => {
+    if (props.size === 'xs') return 'cosy:badge-xs';
+    if (props.size === 'sm') return 'cosy:badge-sm';
+    if (props.size === 'md') return 'cosy:badge-md';
+    if (props.size === 'lg') return 'cosy:badge-lg';
+    return '';
+});
+</script>
+
+<template>
+    <span :class="[
+        'cosy:badge',
+        variantClass,
+        sizeClass,
+        props.outline ? 'cosy:badge-outline' : '',
+        props.class
+    ]">
+        <slot />
+    </span>
+</template>

package/dist/src-vue/badge/index.ts

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

package/dist/src-vue/buttons/ButtonFolder.vue

@@ -0,0 +1,98 @@
+<!--
+ButtonFolder 组件
+
+一个专门用于文件夹操作的按钮组件，封装了 Button 组件，并添加了文件夹图标。
+
+使用示例：
+```vue
+<ButtonFolder @click="openFolder" />
+<ButtonFolder style="ghost" size="sm" @click="openFolder" tooltip="打开文件夹" />
+```
+
+属性：
+- 继承 Button 组件的所有属性
+- 默认使用 ghost 样式
+
+事件：
+- click: 点击按钮时触发（disabled状态下不触发）
+-->
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Button } from '@coffic/cosy-ui/vue';
+import { RiFolderOpenLine } from '@remixicon/vue';
+
+interface Props {
+  // 按钮颜色
+  color?:
+    | 'neutral'
+    | 'primary'
+    | 'secondary'
+    | 'accent'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error';
+  // 按钮样式
+  style?: 'outline' | 'dash' | 'soft' | 'ghost' | 'link';
+  // 按钮大小
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  // 按钮形状
+  shape?: 'square' | 'circle';
+  // 是否禁用
+  disabled?: boolean;
+  // 是否激活
+  active?: boolean;
+  // 提示文本
+  tooltip?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  style: 'ghost',
+  size: 'md',
+  disabled: false,
+  active: false,
+});
+
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent): void;
+}>();
+
+// 处理点击事件
+const handleClick = (event: MouseEvent) => {
+  // 如果按钮已经处于禁用状态，不触发事件
+  if (props.disabled) return;
+
+  // 触发点击事件
+  emit('click', event);
+};
+
+// 计算图标大小类名
+const iconSizeClass = computed(() => {
+  if (props.size === 'xs' || props.size === 'sm') return 'cosy:w-4 cosy:h-4';
+  if (props.size === 'lg' || props.size === 'xl') return 'cosy:w-6 cosy:h-6';
+  return 'cosy:w-5 cosy:h-5'; // 默认中等大小
+});
+</script>
+
+<template>
+  <div
+    class="cosy:relative cosy:inline-block"
+    :data-tip="tooltip"
+    :class="{ tooltip: tooltip }"
+  >
+    <Button
+      :color="color"
+      :style="style"
+      :shape="shape"
+      :disabled="disabled"
+      :active="active"
+      @click="handleClick"
+    >
+      <RiFolderOpenLine
+        :class="[iconSizeClass, 'cosy:transition-all cosy:duration-300']"
+      />
+      <slot></slot>
+    </Button>
+  </div>
+</template>

package/dist/src-vue/buttons/ButtonRefresh.vue

@@ -0,0 +1,163 @@
+<!--
+ButtonRefresh 组件
+
+一个专门用于刷新操作的按钮组件，封装了 Button 组件，并添加了动画效果。
+当处于加载状态时，图标会旋转，提供视觉反馈。
+
+使用示例：
+```vue
+<ButtonRefresh @click="refreshData" :loading="isLoading" />
+<ButtonRefresh style="ghost" size="sm" @click="refreshData" />
+```
+
+属性：
+- 继承 Button 组件的所有属性
+- 默认使用 ghost 样式
+
+事件：
+- click: 点击按钮时触发（disabled或loading状态下不触发）
+-->
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { Button } from '@coffic/cosy-ui/vue';
+import { RiRefreshLine } from '@remixicon/vue';
+
+interface Props {
+  // 按钮颜色
+  color?:
+    | 'neutral'
+    | 'primary'
+    | 'secondary'
+    | 'accent'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error';
+  // 按钮样式
+  style?: 'outline' | 'dash' | 'soft' | 'ghost' | 'link';
+  // 按钮大小
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  // 按钮形状
+  shape?: 'square' | 'circle';
+  // 是否显示加载状态
+  loading?: boolean;
+  // 是否禁用
+  disabled?: boolean;
+  // 是否激活
+  active?: boolean;
+  // 提示文本
+  tooltip?: string;
+  // 最小动画时间（毫秒）
+  minAnimationTime?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  style: 'ghost',
+  size: 'md',
+  loading: false,
+  disabled: false,
+  active: false,
+  minAnimationTime: 800, // 默认最小动画时间为 800 毫秒
+});
+
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent): void;
+}>();
+
+// 处理点击事件
+const handleClick = async (event: MouseEvent) => {
+  // 如果按钮已经处于加载或禁用状态，不触发事件
+  if (props.disabled || internalLoading.value) return;
+
+  // 触发点击事件
+  emit('click', event);
+};
+
+// 内部加载状态
+const internalLoading = ref(false);
+
+// 记录动画开始时间
+const animationStartTime = ref(0);
+
+// 监听外部加载状态
+watch(
+  () => props.loading,
+  (newVal, oldVal) => {
+    if (newVal === true) {
+      // 开始加载，记录当前时间
+      animationStartTime.value = Date.now();
+      internalLoading.value = true;
+    } else if (oldVal === true && newVal === false) {
+      // 加载结束，计算已经经过的时间
+      const elapsedTime = Date.now() - animationStartTime.value;
+      const remainingTime = Math.max(0, props.minAnimationTime - elapsedTime);
+
+      if (remainingTime > 0) {
+        // 如果还没有达到最小动画时间，延迟关闭加载状态
+        setTimeout(() => {
+          internalLoading.value = false;
+        }, remainingTime);
+      } else {
+        // 已经超过最小动画时间，直接关闭
+        internalLoading.value = false;
+      }
+    }
+  },
+  { immediate: true }
+);
+
+// 计算内容类名
+const contentClass = computed(() => {
+  return {
+    hidden: internalLoading.value,
+  };
+});
+
+// 计算图标大小类名
+const iconSizeClass = computed(() => {
+  if (props.size === 'xs' || props.size === 'sm') return 'cosy:w-4 cosy:h-4';
+  if (props.size === 'lg' || props.size === 'xl') return 'cosy:w-6 cosy:h-6';
+  return 'cosy:w-5 cosy:h-5'; // 默认中等大小
+});
+
+// 计算加载器类名
+const loadingClass = computed(() => {
+  return [
+    'loading',
+    'loading-spinner',
+    props.size === 'xs' || props.size === 'sm'
+      ? 'loading-xs'
+      : props.size === 'lg' || props.size === 'xl'
+        ? 'loading-lg'
+        : 'loading-md',
+    iconSizeClass.value, // 使用相同的大小类
+    { hidden: !internalLoading.value },
+  ];
+});
+</script>
+
+<template>
+  <div
+    class="cosy:relative cosy:inline-block"
+    :data-tip="tooltip"
+    :class="{ tooltip: tooltip }"
+  >
+    <Button
+      :color="color"
+      :style="style"
+      :shape="shape"
+      :disabled="disabled || internalLoading"
+      :active="active"
+      @click="handleClick"
+    >
+      <span :class="loadingClass"></span>
+      <span :class="contentClass">
+        <RiRefreshLine
+          :class="[iconSizeClass, 'cosy:transition-all cosy:duration-300']"
+        />
+        <slot></slot>
+      </span>
+    </Button>
+  </div>
+</template>

package/dist/src-vue/buttons/index.ts

@@ -1 +1,3 @@
 export { default as Button } from './Button.vue';
+export { default as ButtonFolder } from './ButtonFolder.vue';
+export { default as ButtonRefresh } from './ButtonRefresh.vue';

package/dist/src-vue/card/Card.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+defineOptions({
+    name: 'Card',
+});
+
+const props = defineProps({
+    title: { type: String, required: true },
+    subtitle: String,
+    imageUrl: String,
+    href: String,
+    compact: Boolean,
+    class: String,
+});
+
+const cardClasses = computed(() => [
+    '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',
+    props.compact ? 'cosy:card-compact' : '',
+    props.href ? 'cosy:cursor-pointer cosy:hover:scale-105 cosy:transform cosy:no-underline' : '',
+    props.class,
+].filter(Boolean).join(' '));
+
+const contentPadding = computed(() => props.compact ? 'cosy:p-4' : 'cosy:p-6');
+</script>
+
+<template>
+    <component :is="props.href ? 'a' : 'article'" :href="props.href" :class="cardClasses">
+        <template v-if="props.imageUrl">
+            <figure class="not-prose cosy:m-0 cosy:p-0">
+                <img :src="props.imageUrl" :alt="props.title"
+                    class="cosy:w-full cosy:h-48 cosy:object-cover cosy:rounded-t-lg" />
+            </figure>
+        </template>
+        <div :class="['cosy:card-body', contentPadding]">
+            <h2 class="cosy:card-title cosy:text-xl cosy:font-bold">{{ props.title }}</h2>
+            <p v-if="props.subtitle" class="cosy:text-base-content/70 cosy:text-sm cosy:leading-relaxed">{{
+                props.subtitle }}
+            </p>
+            <div v-if="$slots.default" class="cosy:mt-4">
+                <slot />
+            </div>
+        </div>
+    </component>
+</template>

package/dist/src-vue/card/CardCourse.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+defineOptions({
+    name: 'CardCourse',
+});
+
+const props = defineProps({
+    title: { type: String, required: true },
+    link: { type: String, required: true },
+});
+</script>
+
+<template>
+    <div>
+        <a :href="props.link" class="cosy:justify-center cosy:flex cosy:no-underline cosy:text-base-content">
+            <div class="cosy:w-56 cosy:h-80">
+                <div
+                    class="cosy:bg-gradient-to-br cosy:w-full cosy:h-full cosy:from-accent/50 cosy:to-primary/30 cosy:rounded-3xl cosy:shadow-lg cosy:backdrop-blur-sm">
+                    <div
+                        class="cosy:bg-base-100/60 cosy:w-full cosy:h-full cosy:rounded-3xl cosy:border cosy:border-base-content/30 hover:cosy:scale-105 hover:cosy:shadow-2xl cosy:transform cosy:duration-200 cosy:backdrop-filter cosy:backdrop-blur-sm">
+                        <div class="card-body cosy:p-1 cosy:h-full">
+                            <div
+                                class="cosy:h-3/5 cosy:w-full cosy:flex cosy:items-center cosy:justify-center cosy:text-6xl cosy:text-primary">
+                                📚
+                            </div>
+                            <div>
+                                <h2 class="cosy:text-lg cosy:text-center cosy:font-medium">{{ props.title }}</h2>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </a>
+    </div>
+</template>

package/dist/src-vue/card/index.ts

@@ -0,0 +1,2 @@
+export { default as Card } from './Card.vue';
+export { default as CardCourse } from './CardCourse.vue';