@coffic/cosy-ui 0.8.16 → 0.8.18

package/dist/index-vue.ts

@@ -1,17 +1,23 @@
 // AlertDialog
-export * from './src-vue/alert-dialog-vue/index';
+export * from './src-vue/alert-dialog/index';
+
+// Alert
+export * from './src-vue/alert/index';
 
 // Banner
-export * from './src-vue/banner-box-vue/index';
+export * from './src-vue/banner-box/index';
 
 // BlogList
-export * from './src-vue/blog-vue/index';
+export * from './src-vue/blog/index';
+
+// Container
+export * from './src-vue/container/index';
 
 // Counter
-export * from './src-vue/counter-vue/index';
+export * from './src-vue/counter/index';
 
 // ConfirmDialog
-export * from './src-vue/confirm-dialog-vue/index';
+export * from './src-vue/confirm-dialog/index';
 
 // Buttons
 export * from './src-vue/buttons/index';
@@ -20,11 +26,11 @@ export * from './src-vue/buttons/index';
 export * from './src-vue/icons/index';
 
 // List
-export * from './src-vue/list-vue/index';
+export * from './src-vue/list/index';
 
 // Windows
-// export { MacWindowExamples, MacWindowExampleCodes, MacWindow } from './vue/MacWindow';
-// export { iPhoneWindowExamples, iPhoneWindowExampleCodes, iPhoneWindow } from './vue/iPhone';
+export * from './src-vue/mac-window/index';
+export * from './src-vue/iPhone/index';
 
 // SmartLink
 // export { default as SmartLink } from './vue/SmartLink.vue';

package/dist/src-astro/header/Header.astro

@@ -23,7 +23,7 @@ import {
   Image,
   ThemeSwitcher,
 } from '@coffic/cosy-ui';
-import Logo from '../assets/logo-rounded.png';
+import Logo from '../../src/assets/logo-rounded.png';
 
 export interface Props extends IHeaderProps {
   debug?: boolean;

package/dist/src-astro/icons/AstroIcon.astro

@@ -1,5 +1,5 @@
 ---
-import { iconData } from '../assets/iconData';
+import { iconData } from '../../src/assets/iconData';
 
 interface Props {
   /**
@@ -54,8 +54,7 @@ const viewBox = icon?.viewBox || '0 0 24 24';
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class={className}
-    >
+      class={className}>
       <path d={icon.path} />
     </svg>
   )

package/dist/src-astro/module/ModuleBasic.astro

@@ -1,6 +1,6 @@
 ---
 import { Module } from '../../index-astro';
-import demoImage from '../assets/logo-rounded.png';
+import demoImage from '../../src/assets/logo-rounded.png';
 ---
 
 <div class="cosy:grid cosy:grid-cols-1 cosy:gap-8 cosy:max-w-xl">

package/dist/src-astro/module/ModuleCustom.astro

@@ -1,6 +1,6 @@
 ---
 import Module from './Module.astro';
-import customImage from '../assets/logo-rounded.png';
+import customImage from '../../src/assets/logo-rounded.png';
 ---
 
 <div class="cosy:bg-base-200 cosy:p-8 cosy:rounded-xl">

package/dist/src-astro/module/ModuleGrid.astro

@@ -1,8 +1,8 @@
 ---
 import { Module } from '../../index-astro';
-import featureImage1 from '../assets/logo-rounded.png';
-import featureImage2 from '../assets/logo-rounded.png';
-import featureImage3 from '../assets/logo-rounded.png';
+import featureImage1 from '../../src/assets/logo-rounded.png';
+import featureImage2 from '../../src/assets/logo-rounded.png';
+import featureImage3 from '../../src/assets/logo-rounded.png';
 ---
 
 <div

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

@@ -58,19 +58,19 @@ const debugClass = debug ? 'cosy:border cosy:border-red-500' : '';
         </h3>
         <ul
           class:list={[
-            'cosy:menu cosy:bg-base-200 cosy:rounded-box cosy:w-56',
+            'cosy:menu cosy:bg-base-200 cosy:rounded-box cosy:w-56 cosy:no-underline',
             debugClass,
           ]}>
           {section.items?.map((item: ISidebarItem) => {
             const isActive = isPathMatch(currentPath, item.href);
             return (
-              <li class:list={[debugClass]}>
+              <li class:list={[debugClass, 'cosy:no-underline']}>
                 <a
                   data-sidebar-item
                   data-current-path={currentPath}
                   href={item.href}
                   class:list={[
-                    'cosy:hover:bg-base-300',
+                    'cosy:hover:bg-base-300 cosy:no-underline',
                     { 'cosy:menu-active': isActive },
                     debugClass,
                   ]}>

package/dist/src-astro/speak/SpeakBasic.astro

@@ -1,6 +1,6 @@
 ---
 import { Speak } from '../../index-astro';
-import avatar from '../assets/logo-rounded.png';
+import avatar from '../../src/assets/logo-rounded.png';
 ---
 
 <div class="cosy:max-w-md">

package/dist/src-astro/speak/SpeakGrid.astro

@@ -1,8 +1,8 @@
 ---
 import { Speak } from '../../index-astro';
-import avatar1 from '../assets/logo-rounded.png';
-import avatar2 from '../assets/logo-rounded.png';
-import avatar3 from '../assets/logo-rounded.png';
+import avatar1 from '../../src/assets/logo-rounded.png';
+import avatar2 from '../../src/assets/logo-rounded.png';
+import avatar3 from '../../src/assets/logo-rounded.png';
 ---
 
 <div

package/dist/src-vue/SmartLink.vue

@@ -13,7 +13,6 @@ defineProps<{
     :rel="external ? 'noopener noreferrer' : undefined"
     :class="{
       'cosy:no-underline cosy:rounded-md cosy:p-1 cosy:transition-all cosy:duration-300 cosy:hover:text-primary/80': true,
-      [externalClass]: external,
     }"
   >
     <slot />

package/dist/src-vue/alert/Alert.vue

@@ -0,0 +1,100 @@
+<!--
+@component Alert
+
+@description
+Alert 组件用于向用户显示重要的提示信息，支持多种类型的提示样式和交互效果。
+
+@usage
+基本用法：
+```vue
+<Alert type="info">这是一条信息提示</Alert>
+```
+
+带标题：
+```vue
+<Alert type="success" title="操作成功">您的操作已成功完成</Alert>
+```
+
+组合使用：
+```vue
+<Alert
+  type="error"
+  title="提交失败"
+  class="my-custom-class"
+>
+  请检查表单并重新提交
+</Alert>
+```
+
+@props
+@prop {('info'|'success'|'warning'|'error')} [type='info'] - 提示类型，影响颜色和图标
+@prop {string} [title] - 提示标题，可选
+@prop {string} [class] - 自定义 CSS 类名
+
+@slots
+@slot default - 提示内容
+-->
+
+<script setup lang="ts">
+import '../../style.ts';
+import { computed } from 'vue';
+import { InfoIcon, SuccessIcon, WarningIcon, ErrorIcon } from '../icons/index';
+
+interface Props {
+  type?: 'info' | 'success' | 'warning' | 'error';
+  title?: string;
+  class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'info',
+  title: '',
+  class: '',
+});
+
+// 根据类型设置样式
+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 IconComponent = computed(() => {
+  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>
+        <slot v-else />
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,8 @@
+export { default as Alert } from './Alert.vue';
+
+// Export types
+export interface AlertProps {
+    type?: 'info' | 'success' | 'warning' | 'error';
+    title?: string;
+    class?: string;
+}

package/dist/src-vue/{alert-dialog-vue → alert-dialog}/index.ts

@@ -2,7 +2,7 @@ import Basic from './Basic.vue';
 import Multilang from './Multilang.vue';
 import BasicSource from './Basic.vue?raw';
 import MultilangSource from './Multilang.vue?raw';
-import { extractSimpleExample } from '../../utils/component';
+import { extractSimpleExample } from '../../src/utils/component';
 
 // 导出主组件
 export { default as AlertDialog } from './AlertDialog.vue';

package/dist/src-vue/{banner-box-vue → banner-box}/index.ts

@@ -14,7 +14,7 @@ import DisplayModeNeverSource from './ExampleDisplayModeNever.vue?raw';
 import SmartBannerSource from './SmartBanner.vue?raw';
 import SizePresetSource from './ExampleSizePreset.vue?raw';
 import ImageExportSource from './ExampleImageExport.vue?raw';
-import { extractSimpleExample } from '../../utils/component';
+import { extractSimpleExample } from '../../src/utils/component';
 
 // 获取 BannerBox 和 FeatureCard 组件
 export { default as BannerBox } from './BannerBox.vue';

package/dist/src-vue/{blog-vue → blog}/BlogList.vue

@@ -39,9 +39,9 @@ const currentLang = ref('zh');
 
 <script setup lang="ts">
 import '../../style';
-import InboxArchiveIcon from '../Icons/InboxArchiveIcon.vue';
+import InboxArchiveIcon from '../icons/InboxArchiveIcon.vue';
 import Link from '../SmartLink.vue';
-import ListItem from '../ListItem.vue';
+import ListItem from '../list/ListItem.vue';
 
 export interface IBlog {
   id: string;

package/dist/src-vue/{blog-vue → blog}/index.ts

@@ -6,7 +6,7 @@ import BasicSource from './Basic.vue?raw';
 import EmptySource from './Empty.vue?raw';
 import EnglishSource from './English.vue?raw';
 import EmptyEnglishSource from './EmptyEnglish.vue?raw';
-import { extractSimpleExample } from '../../utils/component';
+import { extractSimpleExample } from '../../src/utils/component';
 
 // 导出主组件
 export { default as BlogList } from './BlogList.vue';

package/dist/src-vue/{confirm-dialog-vue → confirm-dialog}/index.ts

@@ -2,7 +2,7 @@ import Basic from './Basic.vue';
 import CustomButtons from './CustomButtons.vue';
 import BasicSource from './Basic.vue?raw';
 import CustomButtonsSource from './CustomButtons.vue?raw';
-import { extractSimpleExample } from '../../utils/component';
+import { extractSimpleExample } from '../../src/utils/component';
 
 // 导出主组件
 export { default as ConfirmDialog } from './ConfirmDialog.vue';

package/dist/src-vue/container/Container.vue

@@ -0,0 +1,214 @@
+<!--
+@component Container
+
+@description
+Container 组件是一个基础的布局容器，用于限制内容宽度并居中显示。
+它提供了多种尺寸和内边距选项，适用于各种布局需求。
+
+@design
+设计理念：
+1. 内容约束 - 限制内容宽度，提高可读性和视觉美感
+2. 响应式设计 - 在不同屏幕尺寸下自动调整内边距
+3. 灵活配置 - 支持多种尺寸和内边距选项
+4. 简单易用 - 提供直观的API，易于集成到各种页面布局中
+
+@usage
+基本用法：
+```vue
+<Container>
+  <p>内容将被限制在一个合理的宽度内并居中显示</p>
+</Container>
+```
+
+自定义尺寸和内边距：
+```vue
+<Container size="sm" padding="lg">
+  <p>小尺寸容器，大内边距</p>
+</Container>
+```
+
+全宽容器：
+```vue
+<Container size="full" padding="none">
+  <p>全宽容器，无内边距</p>
+</Container>
+```
+
+不居中的容器：
+```vue
+<Container :centered="false">
+  <p>不居中的容器，靠左对齐</p>
+</Container>
+```
+
+带边框的容器：
+```vue
+<Container border>
+  <p>带有边框的容器</p>
+</Container>
+```
+
+Flex布局容器（按行排列）：
+```vue
+<Container flex="row" gap="md">
+  <div>第一项</div>
+  <div>第二项</div>
+</Container>
+```
+
+Flex布局容器（按列排列）：
+```vue
+<Container flex="col" gap="md" items="center" justify="between">
+  <div>第一项</div>
+  <div>第二项</div>
+</Container>
+```
+
+@props
+@prop {('xs'|'sm'|'md'|'lg'|'xl'|'full')} [size='md'] - 容器尺寸
+@prop {('none'|'sm'|'md'|'lg'|'xl')} [padding='md'] - 内边距大小
+@prop {boolean} [centered=true] - 是否居中显示
+@prop {boolean} [border=false] - 是否显示边框
+@prop {('row'|'col'|'row-reverse'|'col-reverse')} [flex] - flex布局方向
+@prop {('none'|'xs'|'sm'|'md'|'lg'|'xl')} [gap='none'] - flex项目间距
+@prop {('start'|'end'|'center'|'baseline'|'stretch')} [items] - flex项目水平对齐方式
+@prop {('start'|'end'|'center'|'between'|'around'|'evenly')} [justify] - flex项目垂直对齐方式
+@prop {string} [class=''] - 自定义类名
+-->
+
+<script setup lang="ts">
+import '../../style.ts';
+import { computed } from 'vue';
+
+interface Props {
+  /**
+   * 容器尺寸
+   * @default "md"
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+  /**
+   * 内边距大小
+   * @default "md"
+   */
+  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+
+  /**
+   * 是否居中显示
+   * @default true
+   */
+  centered?: boolean;
+
+  /**
+   * 是否显示边框
+   * @default false
+   */
+  border?: boolean;
+
+  /**
+   * flex布局方向，不设置则不启用flex布局
+   */
+  flex?: 'row' | 'col' | 'row-reverse' | 'col-reverse';
+
+  /**
+   * flex项目间距
+   * @default "none"
+   */
+  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+  /**
+   * flex项目水平对齐方式
+   */
+  items?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+
+  /**
+   * flex项目垂直对齐方式
+   */
+  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
+
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+  padding: 'md',
+  centered: true,
+  border: false,
+  gap: 'none',
+  class: '',
+});
+
+// 静态类名映射
+const sizeClasses = {
+  xs: 'cosy:max-w-xs',
+  sm: 'cosy:max-w-sm',
+  md: 'cosy:max-w-2xl',
+  lg: 'cosy:max-w-4xl',
+  xl: 'cosy:max-w-6xl',
+  full: 'cosy:w-full',
+} as const;
+
+const paddingClasses = {
+  none: 'cosy:p-0',
+  sm: 'cosy:p-2',
+  md: 'cosy:p-4',
+  lg: 'cosy:p-6',
+  xl: 'cosy:p-8',
+} as const;
+
+const flexClasses = {
+  row: 'cosy:flex cosy:flex-row',
+  col: 'cosy:flex cosy:flex-col',
+  'row-reverse': 'cosy:flex cosy:flex-row-reverse',
+  'col-reverse': 'cosy:flex cosy:flex-col-reverse',
+} as const;
+
+const gapClasses = {
+  none: 'cosy:gap-0',
+  xs: 'cosy:gap-1',
+  sm: 'cosy:gap-2',
+  md: 'cosy:gap-4',
+  lg: 'cosy:gap-6',
+  xl: 'cosy:gap-8',
+} as const;
+
+const itemsClasses = {
+  start: 'cosy:items-start',
+  end: 'cosy:items-end',
+  center: 'cosy:items-center',
+  baseline: 'cosy:items-baseline',
+  stretch: 'cosy:items-stretch',
+} as const;
+
+const justifyClasses = {
+  start: 'cosy:justify-start',
+  end: 'cosy:justify-end',
+  center: 'cosy:justify-center',
+  between: 'cosy:justify-between',
+  around: 'cosy:justify-around',
+  evenly: 'cosy:justify-evenly',
+} as const;
+
+// 构建CSS类名
+const containerClasses = computed(() => [
+  'cosy:w-full',
+  props.centered ? 'cosy:mx-auto' : '',
+  sizeClasses[props.size],
+  paddingClasses[props.padding],
+  props.border ? 'cosy:border cosy:rounded-lg' : '',
+  props.flex ? flexClasses[props.flex] : '',
+  props.flex ? gapClasses[props.gap] : '',
+  props.items && props.flex ? itemsClasses[props.items] : '',
+  props.justify && props.flex ? justifyClasses[props.justify] : '',
+  props.class,
+]);
+</script>
+
+<template>
+  <section :class="containerClasses">
+    <slot />
+  </section>
+</template>

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

@@ -0,0 +1,6 @@
+import Container from './Container.vue';
+
+export { default as Container } from './Container.vue';
+export const ContainerPackage = {
+    Container,
+};

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

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

package/dist/src-vue/iPhone/StatusBarContent.vue

@@ -0,0 +1,121 @@
+<!--
+@component StatusBarContent
+
+@description
+StatusBarContent 组件显示 iPhone 状态栏的内容，包括时间、信号、WiFi 和电池图标。
+组件会自动更新时间显示，并支持根据设备大小进行缩放。
+
+@usage
+基本用法：
+```vue
+<StatusBarContent />
+```
+
+带缩放比例：
+```vue
+<StatusBarContent :scaleRatio="1.5" />
+```
+
+@props
+@prop {Number} [scaleRatio=1] - 缩放比例，用于根据设备大小调整文字和图标大小
+@slots
+@emits
+-->
+<script lang="ts">
+import { defineComponent, ref, onMounted, onUnmounted, computed } from 'vue';
+import { IPhoneSignalIcon, IPhoneWifiIcon, IPhoneBatteryIcon } from '../icons';
+import '../../style.ts';
+
+export default defineComponent({
+    name: 'StatusBarContent',
+    components: {
+        IPhoneSignalIcon,
+        IPhoneWifiIcon,
+        IPhoneBatteryIcon,
+    },
+    props: {
+        scaleRatio: {
+            type: Number,
+            default: 1,
+        },
+    },
+    setup(props) {
+        const currentTime = ref('12:00');
+
+        // 更新时间的函数
+        const updateTime = () => {
+            const now = new Date();
+            const hours = now.getHours().toString().padStart(2, '0');
+            const minutes = now.getMinutes().toString().padStart(2, '0');
+            currentTime.value = `${hours}:${minutes}`;
+        };
+
+        // 计算缩放后的字体大小
+        const scaledFontSize = computed(() => {
+            const baseFontSize = 14; // 基础字体大小
+            return `${baseFontSize * props.scaleRatio}px`;
+        });
+
+        // 计算缩放后的图标尺寸
+        const scaledIconSize = computed(() => {
+            const baseIconSize = 15; // 基础图标宽度
+            return `${baseIconSize * props.scaleRatio}px`;
+        });
+
+        // 计算缩放后的图标高度百分比
+        const scaledIconHeight = computed(() => {
+            const baseHeight = 60; // 基础高度百分比
+            return `${baseHeight * props.scaleRatio}%`;
+        });
+
+        // 设置定时器更新时间
+        let timeInterval: number;
+        onMounted(() => {
+            updateTime();
+            timeInterval = window.setInterval(updateTime, 60000); // 每分钟更新一次
+        });
+
+        onUnmounted(() => {
+            if (timeInterval) {
+                clearInterval(timeInterval);
+            }
+        });
+
+        return {
+            currentTime,
+            scaledFontSize,
+            scaledIconSize,
+            scaledIconHeight,
+        };
+    },
+});
+</script>
+
+<template>
+    <div class="cosy:flex cosy:items-center cosy:h-full cosy:justify-between">
+        <!-- 左侧时间 -->
+        <span class="cosy:font-medium time-text" :style="{ fontSize: scaledFontSize }">
+            {{ currentTime }}
+        </span>
+
+        <!-- 右侧状态图标 -->
+        <div class="cosy:flex cosy:flex-row cosy:items-center cosy:space-x-1 cosy:h-full">
+            <div :style="{ width: scaledIconSize, height: scaledIconHeight, minWidth: 0, minHeight: 0 }">
+                <IPhoneBatteryIcon />
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+/* 确保图标渲染更平滑 */
+svg {
+    shape-rendering: geometricPrecision;
+}
+
+/* 时间文字基础样式 */
+.time-text {
+    line-height: 1;
+    transition: font-size 0.2s ease;
+}
+</style>