@coffic/cosy-ui 0.8.25 → 0.8.27

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/alert/Alert.astro

@@ -27,13 +27,25 @@
  * </Alert>
  * ```
  *
+ * 自定义操作按钮：
+ * ```astro
+ * <Alert type="info">
+ *   这是带自定义操作的提示
+ *   <slot name="action">
+ *     <button>操作</button>
+ *   </slot>
+ * </Alert>
+ * ```
+ *
  * @props
  * @prop {('info'|'success'|'warning'|'error')} [type='info'] - 提示类型，影响颜色和图标
  * @prop {string} [title] - 提示标题，可选
  * @prop {string} [class] - 自定义 CSS 类名
+ * @prop {boolean} [closable=true] - 是否可关闭
  *
  * @slots
  * @slot default - 提示内容
+ * @slot action - 自定义操作按钮，显示在 alert 右侧
  */
 
 // 注意：
@@ -46,15 +58,22 @@ import {
   SuccessIcon,
   WarningIcon,
   ErrorIcon,
+  CloseIcon,
 } from '../../index-astro';
 
 interface Props {
   type?: 'info' | 'success' | 'warning' | 'error';
   title?: string;
   class?: string;
+  closable?: boolean;
 }
 
-const { type = 'info', title, class: className = '' } = Astro.props;
+const {
+  type = 'info',
+  title,
+  class: className = '',
+  closable = true,
+} = Astro.props;
 
 // 根据类型设置样式
 const alertClass = {
@@ -73,12 +92,17 @@ const IconComponent = {
 }[type as 'info' | 'success' | 'warning' | 'error'];
 ---
 
-<div class={`cosy:alert ${alertClass} ${className}`} role="alert">
+<div
+  class={`cosy:alert cosy:w-full cosy:flex ${alertClass} ${className}`}
+  role="alert">
   <div
-    class="cosy:flex cosy:flex-row cosy:items-center cosy:gap-4 cosy:alert-content">
-    <IconComponent />
+    class="cosy:flex cosy:flex-row cosy:items-center cosy:gap-4 cosy:justify-between cosy:w-full">
+    <IconComponent
+      class="cosy:btn cosy:btn-sm cosy:btn-ghost cosy:btn-circle"
+    />
 
-    <div class="cosy:flex cosy:flex-col cosy:items-center cosy:h-full">
+    <div
+      class="cosy:flex cosy:flex-col cosy:items-start cosy:h-full cosy:flex-1">
       {
         title && (
           <h3 class="cosy:font-bold" style="margin-top: 0 !important">
@@ -96,5 +120,21 @@ const IconComponent = {
 
       {!title && <slot />}
     </div>
+
+    <div
+      class="cosy:flex cosy:flex-row cosy:items-center cosy:gap-2"
+      data-role="actions">
+      <slot name="action" />
+
+      {
+        closable && (
+          <button
+            class="cosy:ml-auto cosy:btn cosy:btn-ghost cosy:btn-sm cosy:btn-circle"
+            onclick="this.parentElement.parentElement.style.display = 'none';">
+            <CloseIcon class="cosy:h-5 cosy:w-5" />
+          </button>
+        )
+      }
+    </div>
   </div>
 </div>

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-vue/alert/Alert.vue

@@ -26,75 +26,101 @@ Alert 组件用于向用户显示重要的提示信息，支持多种类型的
 </Alert>
 ```
 
+自定义操作按钮：
+```vue
+<Alert type="info">
+  这是带自定义操作的提示
+  <template #action>
+    <button @click="doSomething">操作</button>
+  </template>
+</Alert>
+```
+
 @props
 @prop {('info'|'success'|'warning'|'error')} [type='info'] - 提示类型，影响颜色和图标
 @prop {string} [title] - 提示标题，可选
 @prop {string} [class] - 自定义 CSS 类名
+@prop {boolean} [closable] - 是否可关闭，默认可关闭
 
 @slots
 @slot default - 提示内容
+@slot action - 自定义操作按钮，显示在 alert 右侧
 -->
 
 <script setup lang="ts">
 import '../../style';
 import { computed } from 'vue';
 import { InfoIcon, SuccessIcon, WarningIcon, ErrorIcon } from '../icons/index';
+import { RiCloseLine } from '@remixicon/vue';
 
 interface Props {
-  type?: 'info' | 'success' | 'warning' | 'error';
-  title?: string;
-  class?: string;
+    type?: 'info' | 'success' | 'warning' | 'error';
+    title?: string;
+    class?: string;
+    closable?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  type: 'info',
-  title: '',
-  class: '',
+    type: 'info',
+    title: '',
+    class: '',
+    closable: true,
 });
 
+const emit = defineEmits(['close']);
+
+const handleClose = () => {
+    emit('close');
+};
+
 // 根据类型设置样式
 const alertClass = computed(() => {
-  const alertClasses = {
-    info: 'cosy:alert-info',
-    success: 'cosy:alert-success',
-    warning: 'cosy:alert-warning',
-    error: 'cosy:alert-error',
-  };
-  return alertClasses[props.type];
+    const alertClasses = {
+        info: 'cosy:alert-info',
+        success: 'cosy:alert-success',
+        warning: 'cosy:alert-warning',
+        error: 'cosy:alert-error',
+    };
+    return alertClasses[props.type];
 });
 
 // 根据类型设置图标组件
 const IconComponent = computed(() => {
-  const iconComponents = {
-    info: InfoIcon,
-    success: SuccessIcon,
-    warning: WarningIcon,
-    error: ErrorIcon,
-  };
-  return iconComponents[props.type];
+    const iconComponents = {
+        info: InfoIcon,
+        success: SuccessIcon,
+        warning: WarningIcon,
+        error: ErrorIcon,
+    };
+    return iconComponents[props.type];
 });
 </script>
 
 <template>
-  <div :class="['cosy:alert', alertClass, props.class]" role="alert">
-    <div
-      class="cosy:flex cosy:flex-row cosy:items-center cosy:gap-4 cosy:alert-content"
-    >
-      <component :is="IconComponent" />
-
-      <div class="cosy:flex cosy:flex-col cosy:items-center cosy:h-full">
-        <h3
-          v-if="props.title"
-          class="cosy:font-bold"
-          style="margin-top: 0 !important"
-        >
-          {{ props.title }}
-        </h3>
-        <div v-if="props.title" class="cosy:text-xs">
-          <slot />
+    <div :class="['cosy:alert cosy:w-full cosy:flex', alertClass, props.class]" role="alert">
+        <div class="cosy:flex cosy:flex-row cosy:items-center cosy:gap-4 cosy:justify-between cosy:w-full">
+            <div class="cosy:flex cosy:items-center cosy:gap-4">
+                <component :is="IconComponent" class="cosy:btn cosy:btn-sm cosy:btn-ghost cosy:btn-circle" />
+
+                <div class="cosy:flex cosy:flex-col cosy:items-start cosy:h-full cosy:flex-1">
+                    <h3 v-if="props.title" class="cosy:font-bold" style="margin-top: 0 !important">
+                        {{ props.title }}
+                    </h3>
+                    <div v-if="props.title" class="cosy:text-xs">
+                        <slot />
+                    </div>
+                    <slot v-else />
+                </div>
+            </div>
+
+            <div class="cosy:flex cosy:flex-row cosy:items-center cosy:gap-2" data-role="actions">
+                <slot name="action" />
+
+                <button v-if="props.closable" @click="handleClose"
+                    class="cosy:btn cosy:btn-ghost cosy:btn-sm cosy:btn-circle">
+                    <RiCloseLine class="cosy:h-5 cosy:w-5" />
+                </button>
+            </div>
         </div>
-        <slot v-else />
-      </div>
     </div>
-  </div>
 </template>

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/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';

package/dist/src-vue/key-catcher/KeyCatcher.vue

@@ -0,0 +1,121 @@
+<!--
+@component KeyCatcher
+
+@description
+KeyCatcher 组件用于全局捕获键盘按键事件，并可通过自定义事件通知外部。支持可选的按键展示浮窗。
+
+@usage
+基本用法：
+```vue
+<KeyCatcher />
+```
+
+显示最近按下的按键：
+```vue
+<KeyCatcher :showKey="true" />
+```
+
+监听全局按键事件：
+```vue
+<KeyCatcher @globalKey="onGlobalKey" />
+```
+
+@props
+@prop {boolean} [showKey=false] - 是否显示最近按下的按键浮窗
+
+@events
+@event globalKey - 当捕获到全局按键时触发，参数为按键字符串
+
+@slots
+无
+-->
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+import '../../style';
+
+const lastKey = ref<string | null>(null);
+let timer: ReturnType<typeof setTimeout> | null = null;
+
+const props = defineProps<{ showKey?: boolean }>();
+const emit = defineEmits<{ (e: 'globalKey', key: string): void }>();
+
+const handleKeydown = (event: KeyboardEvent) => {
+    const tag = (event.target as HTMLElement)?.tagName?.toLowerCase();
+    const isEditable =
+        tag === 'input' ||
+        tag === 'textarea' ||
+        (event.target as HTMLElement)?.isContentEditable;
+    if (
+        event.key.length === 1 ||
+        [
+            'Enter',
+            'Escape',
+            'Backspace',
+            'Tab',
+            'Shift',
+            'Control',
+            'Alt',
+            'Meta',
+            'ArrowUp',
+            'ArrowDown',
+            'ArrowLeft',
+            'ArrowRight',
+            'CapsLock',
+            'Delete',
+            'Home',
+            'End',
+            'PageUp',
+            'PageDown',
+        ].includes(event.key)
+    ) {
+        // 只在不是输入框、textarea、contenteditable 时发事件
+        if (/^[a-zA-Z]$/.test(event.key) && !isEditable) {
+            emit('globalKey', event.key);
+        }
+        // 展示按键（如果允许）
+        if (props.showKey) {
+            let key = event.key;
+            if (key === ' ') key = 'Space';
+            lastKey.value = key;
+            if (timer) clearTimeout(timer);
+            timer = setTimeout(() => {
+                lastKey.value = null;
+            }, 3000);
+        }
+    }
+};
+
+onMounted(() => {
+    window.addEventListener('keydown', handleKeydown);
+});
+
+onUnmounted(() => {
+    window.removeEventListener('keydown', handleKeydown);
+    if (timer) clearTimeout(timer);
+});
+</script>
+
+<template>
+    <Transition name="key-fade">
+        <div v-if="props.showKey && lastKey"
+            class="cosy:fixed cosy:bottom-4 cosy:right-4 cosy:bg-accent cosy:shadow-lg cosy:rounded cosy:px-6 cosy:py-3 cosy:z-50 cosy:text-xl cosy:font-bold cosy:text-gray-800 cosy:select-none cosy:pointer-events-none cosy:border cosy:border-gray-200 cosy:backdrop-blur-sm">
+            <span class="cosy:text-blue-600">{{ lastKey }}</span>
+        </div>
+    </Transition>
+</template>
+
+<style scoped>
+.key-fade-enter-active,
+.key-fade-leave-active {
+    transition:
+        opacity 0.2s,
+        transform 0.2s;
+}
+
+.key-fade-enter-from,
+.key-fade-leave-to {
+    opacity: 0;
+    transform: translateY(20px);
+}
+</style>

package/dist/src-vue/key-catcher/index.ts

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