@coffic/cosy-ui 0.8.27 → 0.8.29

package/dist/src-astro/layout-dashboard/types.ts

@@ -159,8 +159,8 @@ export const mainBackgroundThemeMap: Record<MainBackgroundTheme, string> = {
  * @param theme 主内容区域背景主题
  * @returns 对应的样式类名
  */
-export function getMainBackgroundTheme(theme: MainBackgroundTheme = 'transparent'): string {
+export function getMainBackgroundTheme(theme: MainBackgroundTheme = 'base-100'): string {
     return mainBackgroundThemeMap[theme];
 }
 
-export { getIconFromHref, getNavItemIcon, getUserMenuItemIcon } from './tools'; 
+export { getIconFromHref, getNavItemIcon, getUserMenuItemIcon } from './tools'; 

package/dist/src-astro/{sidebar-nav → sidebar}/SidebarNav.astro

@@ -75,6 +75,11 @@ const debugClass = debug ? 'cosy:border cosy:border-red-500' : '';
                     debugClass,
                   ]}>
                   {item.text}
+                  {item.badge !== undefined && item.badge !== null && (
+                    <span class="cosy:badge cosy:badge-sm cosy:ml-2">
+                      {item.badge}
+                    </span>
+                  )}
                 </a>
                 {item.items && (
                   <ul class:list={[debugClass]}>
@@ -95,6 +100,12 @@ const debugClass = debug ? 'cosy:border cosy:border-red-500' : '';
                               debugClass,
                             ]}>
                             {subitem.text}
+                            {subitem.badge !== undefined &&
+                              subitem.badge !== null && (
+                                <span class="cosy:badge cosy:badge-xs cosy:ml-2">
+                                  {subitem.badge}
+                                </span>
+                              )}
                           </a>
                           {subitem.items && (
                             <ul class:list={[debugClass]}>
@@ -115,6 +126,12 @@ const debugClass = debug ? 'cosy:border cosy:border-red-500' : '';
                                         debugClass,
                                       ]}>
                                       {subsubitem.text}
+                                      {subsubitem.badge !== undefined &&
+                                        subsubitem.badge !== null && (
+                                          <span class="cosy:badge cosy:badge-xs cosy:ml-2">
+                                            {subsubitem.badge}
+                                          </span>
+                                        )}
                                     </a>
                                   </li>
                                 );

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

@@ -1,11 +1,4 @@
 import Sidebar from './Sidebar.astro';
-import SidebarBasic from './SidebarBasic.astro';
-import BasicSourceCode from './SidebarBasic.astro?raw';
-import { extractSimpleExample } from '../../src/utils/component';
+import SidebarNav from './SidebarNav.astro';
 
-export { Sidebar, SidebarBasic };
-
-// 导出示例源代码
-export const SidebarExampleCodes = {
-  Basic: extractSimpleExample(BasicSourceCode, 'Sidebar'),
-};
+export { Sidebar, SidebarNav };

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-astro/types/sidebar.ts

@@ -2,35 +2,39 @@
  * 侧边栏项目
  */
 export interface ISidebarItem {
-  href: string;
-  text: string;
-  items?: ISidebarItem[];
+    href: string;
+    text: string;
+    items?: ISidebarItem[];
+    /**
+     * 可选徽标内容
+     */
+    badge?: string | number;
 }
 
 /**
  * 侧边栏配置
  */
 export interface ISidebarProps {
-  /**
-   * 侧边栏项目
-   */
-  sidebarItems: ISidebarItem[];
+    /**
+     * 侧边栏项目
+     */
+    sidebarItems: ISidebarItem[];
 
-  /**
-   * 桌面端类名
-   */
-  class?: string;
+    /**
+     * 桌面端类名
+     */
+    class?: string;
 
-  /**
-   * 是否开启调试模式，显示边框
-   * @default false
-   */
-  debug?: boolean;
+    /**
+     * 是否开启调试模式，显示边框
+     * @default false
+     */
+    debug?: boolean;
 
-  /**
-   * 侧边栏顶部外边距
-   */
-  marginTop?:
+    /**
+     * 侧边栏顶部外边距
+     */
+    marginTop?:
     | 'xs'
     | 'sm'
     | 'md'
@@ -42,10 +46,10 @@ export interface ISidebarProps {
     | '5xl'
     | string;
 
-  /**
-   * 侧边栏底部外边距
-   */
-  marginBottom?:
+    /**
+     * 侧边栏底部外边距
+     */
+    marginBottom?:
     | 'xs'
     | 'sm'
     | 'md'

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coffic/cosy-ui",
-  "version": "0.8.27",
+  "version": "0.8.29",
   "description": "An astro component library",
   "author": {
     "name": "nookery",

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

@@ -1,14 +0,0 @@
----
-interface Props {
-  code: string;
-}
-const { code = '' } = Astro.props;
----
-
-<div class="cosy:hidden cosy:code-example-panel" data-panel="code">
-  <pre
-    class="cosy:overflow-x-auto"
-    style="margin:0">
-    <code class="cosy:language-astro">{code}</code>
-  </pre>
-</div>

package/dist/src-astro/sidebar-nav/SidebarNavBasic.astro

@@ -1,32 +0,0 @@
----
-import SidebarNav from './SidebarNav.astro';
-import type { ISidebarItem } from '../types/sidebar';
-
-const sidebarItems: ISidebarItem[] = [
-  {
-    text: '入门指南',
-    href: '/docs/getting-started',
-    items: [
-      { href: '/docs/getting-started/installation', text: '安装' },
-      { href: '/docs/getting-started/quick-start', text: '快速开始' },
-    ],
-  },
-  {
-    text: '基础组件',
-    href: '/docs/components',
-    items: [
-      { href: '/docs/components/button', text: 'Button 按钮' },
-      { href: '/docs/components/alert', text: 'Alert 提示' },
-      { href: '/docs/components/card', text: 'Card 卡片' },
-    ],
-  },
-];
----
-
-<div class="cosy:w-64 cosy:bg-base-100">
-  <SidebarNav
-    sidebarItems={sidebarItems}
-    currentPath="/docs/getting-started/installation"
-    debug={false}
-  />
-</div>

package/dist/src-astro/sidebar-nav/index.ts

@@ -1,11 +0,0 @@
-import SidebarNav from './SidebarNav.astro';
-import SidebarNavBasic from './SidebarNavBasic.astro';
-import BasicSourceCode from './SidebarNavBasic.astro?raw';
-import { extractSimpleExample } from '../../src/utils/component';
-
-export { SidebarNav, SidebarNavBasic };
-
-// 导出示例源代码
-export const SidebarNavExampleCodes = {
-  Basic: extractSimpleExample(BasicSourceCode, 'SidebarNav'),
-};

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

@@ -1,25 +0,0 @@
----
-/**
- * @component TeamMember.Basic
- *
- * @description
- * 基础的团队成员展示组件示例，展示最简单的成员信息展示方式。
- */
-import '../../style.ts';
-import TeamMember from './TeamMember.astro';
-import { getExampleImage } from '../../src/utils/image.ts';
-
-const avatar = getExampleImage({
-  width: 200,
-  height: 200,
-  provider: 'robohash',
-  randomSeed: 'member1',
-});
----
-
-<TeamMember
-  name="张三"
-  role="产品设计师"
-  avatar={avatar}
-  bio="专注于用户体验设计，拥有5年产品设计经验"
-/>

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

@@ -1,26 +0,0 @@
----
-/**
- * @component TeamMember.CustomStyle
- *
- * @description
- * 自定义样式的团队成员展示组件示例，展示如何使用class属性自定义样式。
- */
-import '../../style.ts';
-import TeamMember from './TeamMember.astro';
-import { getExampleImage } from '../../src/utils/image.ts';
-
-const avatar = getExampleImage({
-  width: 200,
-  height: 200,
-  provider: 'robohash',
-  randomSeed: 'member3',
-});
----
-
-<TeamMember
-  name="王五"
-  role="市场总监"
-  avatar={avatar}
-  bio="负责产品市场策略和品牌推广，拥有丰富的市场营销经验"
-  class="cosy:bg-gradient-to-r cosy:from-purple-100 cosy:to-pink-100 cosy:shadow-lg cosy:w-72"
-/>