@coffic/cosy-ui 0.8.23 → 0.8.25

package/dist/src-astro/list/ListItemRing.astro

@@ -0,0 +1,59 @@
+---
+/**
+ * @component ListItemRing
+ * @description ListItem Ring 外环脉冲动画子组件
+ */
+import '../../style.ts';
+const { loading = false, duration } = Astro.props;
+---
+
+<li
+  class:list={[
+    'cosy:mb-2 cosy:rounded-md cosy:bg-base-300 cosy:p-2 cosy:flex cosy:items-center cosy:gap-3 cosy:hover:bg-accent/10 cosy:relative cosy:overflow-hidden',
+    loading && !duration ? 'cosy:ring-2 cosy:ring-accent ring-pulse-anim' : '',
+  ]}
+  {...Astro.props}>
+  {
+    loading && duration && (
+      <div
+        class="cosy:absolute cosy:left-0 cosy:top-0 cosy:h-full cosy:bg-accent/40 cosy:z-0 loading-bar"
+        style={`animation-duration: ${duration}ms;`}
+      />
+    )
+  }
+  <div
+    class="cosy:relative cosy:z-10 cosy:w-full cosy:flex cosy:items-center cosy:gap-3">
+    <slot />
+  </div>
+</li>
+
+<style scoped>
+  /* Ring 外环脉冲动画 */
+  @keyframes ring-pulse {
+    0%,
+    100% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.02);
+    }
+  }
+  .ring-pulse-anim {
+    animation: ring-pulse 1.5s ease-in-out infinite;
+  }
+
+  /* 进度条动画 */
+  .loading-bar {
+    width: 0%;
+    height: 100%;
+    animation: loading-bar-anim linear forwards;
+  }
+  @keyframes loading-bar-anim {
+    0% {
+      width: 0%;
+    }
+    100% {
+      width: 100%;
+    }
+  }
+</style>

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

@@ -0,0 +1,7 @@
+export { default as ListItem } from './ListItem.astro';
+
+export type ListItemProps = {
+    loading?: boolean;
+    duration?: number; // 进度条动画时长，毫秒
+    animationType?: 'ring' | 'icon-left' | 'icon-right' | 'breath' | 'pulse' | 'glow'; // 无限动画类型，默认 'ring'
+}; 

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

@@ -36,7 +36,7 @@ Alert 组件用于向用户显示重要的提示信息，支持多种类型的
 -->
 
 <script setup lang="ts">
-import '../../style.ts';
+import '../../style';
 import { computed } from 'vue';
 import { InfoIcon, SuccessIcon, WarningIcon, ErrorIcon } from '../icons/index';
 

package/dist/src-vue/alert-dialog/Multilang.vue

@@ -11,7 +11,7 @@ AlertDialog 组件的多语言示例，展示如何使用不同语言的对话
 -->
 
 <script lang="ts">
-import '../../app.css';
+import '../../style';
 import { ref, defineComponent } from 'vue';
 import AlertDialog from './AlertDialog.vue';
 

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

@@ -1,20 +1,20 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import '../../style.ts';
+import '../../style';
 
 interface Props {
   variant?:
-  | 'primary'
-  | 'secondary'
-  | 'accent'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'error'
-  | 'ghost'
-  | 'link'
-  | 'outline'
-  | 'neutral';
+    | 'primary'
+    | 'secondary'
+    | 'accent'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error'
+    | 'ghost'
+    | 'link'
+    | 'outline'
+    | 'neutral';
   size?: 'lg' | 'md' | 'sm' | 'xs';
   shape?: 'circle' | 'square';
   wide?: boolean;
@@ -89,8 +89,14 @@ const buttonClasses = computed(() => {
 </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">
+  <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 />

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

@@ -77,7 +77,7 @@ Flex布局容器（按列排列）：
 -->
 
 <script setup lang="ts">
-import '../../style.ts';
+import '../../style';
 import { computed } from 'vue';
 
 interface Props {

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

@@ -24,98 +24,110 @@ StatusBarContent 组件显示 iPhone 状态栏的内容，包括时间、信号
 <script lang="ts">
 import { defineComponent, ref, onMounted, onUnmounted, computed } from 'vue';
 import { IPhoneSignalIcon, IPhoneWifiIcon, IPhoneBatteryIcon } from '../icons';
-import '../../style.ts';
+import '../../style';
 
 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,
-        };
+  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 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;
+  shape-rendering: geometricPrecision;
 }
 
 /* 时间文字基础样式 */
 .time-text {
-    line-height: 1;
-    transition: font-size 0.2s ease;
+  line-height: 1;
+  transition: font-size 0.2s ease;
 }
 </style>

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

@@ -63,8 +63,8 @@ iPhoneWindow 组件模拟 iPhone 设备的外观，包含状态栏、时间显
 @emits
 -->
 <script lang="ts">
-import '../../style.ts';
-import { AlertDialog } from '../../index-vue.ts';
+import '../../style';
+import { AlertDialog } from '../../index-vue';
 import { ref, defineComponent } from 'vue';
 import iphoneFrame from './assets/iPhone 14 Pro - Deep Purple - Portrait.png';
 import StatusBarContent from './StatusBarContent.vue';
@@ -83,148 +83,168 @@ const mainContentWidthAspectRatio = 1179 / iphoneFrameWidth;
 // 比例-总高度
 const mainContentHeightAspectRatio = 2556 / iphoneFrameHeight;
 // 比例-状态栏高度
-const iphoneFrameStatusBarHeightAspectRatio = iphoneFrameStatusBarHeight / iphoneFrameHeight;
+const iphoneFrameStatusBarHeightAspectRatio =
+  iphoneFrameStatusBarHeight / iphoneFrameHeight;
 // 比例-状态栏离上边框的距离
-const iphoneFrameStatusBarTopAspectRatio = iphoneFrameStatusBarTop / iphoneFrameHeight;
+const iphoneFrameStatusBarTopAspectRatio =
+  iphoneFrameStatusBarTop / iphoneFrameHeight;
 
 // 预定义的高度选项
 type HeightOption = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
 
 const heightClasses: Record<HeightOption, string> = {
-    sm: 'cosy:h-64',    // 256px
-    md: 'cosy:h-80',    // 320px
-    lg: 'cosy:h-96',    // 384px
-    xl: 'cosy:h-[480px]', // 480px
-    '2xl': 'cosy:h-[560px]', // 560px
-    '3xl': 'cosy:h-[640px]', // 640px
-    '4xl': 'cosy:h-[720px]', // 720px
-    '5xl': 'cosy:h-[800px]', // 800px
+  sm: 'cosy:h-64', // 256px
+  md: 'cosy:h-80', // 320px
+  lg: 'cosy:h-96', // 384px
+  xl: 'cosy:h-[480px]', // 480px
+  '2xl': 'cosy:h-[560px]', // 560px
+  '3xl': 'cosy:h-[640px]', // 640px
+  '4xl': 'cosy:h-[720px]', // 720px
+  '5xl': 'cosy:h-[800px]', // 800px
 };
 
 export default defineComponent({
-    name: 'iPhoneWindow',
-    components: {
-        AlertDialog,
-        StatusBarContent,
+  name: 'iPhoneWindow',
+  components: {
+    AlertDialog,
+    StatusBarContent,
+  },
+  props: {
+    height: {
+      type: String as () => HeightOption,
+      default: 'lg',
+      validator: (value: string) => {
+        return Object.keys(heightClasses).includes(value);
+      },
     },
-    props: {
-        height: {
-            type: String as () => HeightOption,
-            default: 'lg',
-            validator: (value: string) => {
-                return Object.keys(heightClasses).includes(value);
-            },
-        },
-        debug: {
-            type: Boolean,
-            default: false,
-        },
-        title: {
-            type: String,
-            default: '',
-        },
-        statusBarButtons: {
-            type: Array,
-            default: () => [],
-        },
-        withShadow: {
-            type: Boolean,
-            default: true,
-        },
-        showFrame: {
-            type: Boolean,
-            default: true,
-        },
-        backgroundColor: {
-            type: String,
-            default: '',
-        },
+    debug: {
+      type: Boolean,
+      default: false,
     },
-    setup(props) {
-        const showAlertDialog = ref(false);
-        const alertMessage = ref('');
-
-        // 计算当前高度的缩放比例
-        const getScaleRatio = () => {
-            const heightValues = {
-                sm: 256,
-                md: 320,
-                lg: 384,
-                xl: 480,
-                '2xl': 560,
-                '3xl': 640,
-                '4xl': 720,
-                '5xl': 800,
-            };
-            const currentHeight = heightValues[props.height];
-            // 基于特定高度计算缩放比例
-            return currentHeight / 500;
-        };
-
-        return {
-            showAlertDialog,
-            alertMessage,
-            iphoneFrame: (iphoneFrame as any).src || iphoneFrame,
-            heightClasses,
-            mainContentWidthAspectRatio,
-            mainContentHeightAspectRatio,
-            iphoneFrameWidth,
-            iphoneFrameHeight,
-            iphoneFrameStatusBarTop,
-            iphoneFrameStatusBarHeight,
-            iphoneFrameStatusBarHeightAspectRatio,
-            iphoneFrameStatusBarTopAspectRatio,
-            getScaleRatio,
-        };
+    title: {
+      type: String,
+      default: '',
     },
+    statusBarButtons: {
+      type: Array,
+      default: () => [],
+    },
+    withShadow: {
+      type: Boolean,
+      default: true,
+    },
+    showFrame: {
+      type: Boolean,
+      default: true,
+    },
+    backgroundColor: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props) {
+    const showAlertDialog = ref(false);
+    const alertMessage = ref('');
+
+    // 计算当前高度的缩放比例
+    const getScaleRatio = () => {
+      const heightValues = {
+        sm: 256,
+        md: 320,
+        lg: 384,
+        xl: 480,
+        '2xl': 560,
+        '3xl': 640,
+        '4xl': 720,
+        '5xl': 800,
+      };
+      const currentHeight = heightValues[props.height];
+      // 基于特定高度计算缩放比例
+      return currentHeight / 500;
+    };
+
+    return {
+      showAlertDialog,
+      alertMessage,
+      iphoneFrame: (iphoneFrame as any).src || iphoneFrame,
+      heightClasses,
+      mainContentWidthAspectRatio,
+      mainContentHeightAspectRatio,
+      iphoneFrameWidth,
+      iphoneFrameHeight,
+      iphoneFrameStatusBarTop,
+      iphoneFrameStatusBarHeight,
+      iphoneFrameStatusBarHeightAspectRatio,
+      iphoneFrameStatusBarTopAspectRatio,
+      getScaleRatio,
+    };
+  },
 });
 </script>
 
 <template>
-    <div :class="['cosy:relative', heightClasses[height]]" :style="{
-        aspectRatio: `${iphoneFrameWidth}/${iphoneFrameHeight}`,
-        // 调试模式，背景色为半透明的黄色
-        backgroundColor: debug ? 'rgba(255, 255, 0, 0.3)' : 'transparent',
-    }">
-        <!-- iPhone 边框 -->
-        <img v-if="showFrame" style="max-width: 100%; max-height: 100%;" :src="iphoneFrame" alt="iPhone frame" />
-
-        <!-- 顶部状态栏 -->
-        <div :style="{
-            position: 'absolute',
-            top: iphoneFrameStatusBarTopAspectRatio * 100 + '%',
-            height: iphoneFrameStatusBarHeightAspectRatio * 100 + '%',
-            width: mainContentWidthAspectRatio * 100 + '%',
-            left: '50%',
-            transform: 'translate(-50%, 0)',
-            paddingLeft: '5%',
-            paddingRight: '5%',
-            // 调试模式，背景色为半透明的红色
-            backgroundColor: debug ? 'rgba(255, 0, 0, 0.3)' : 'transparent',
-            zIndex: 10,
-        }">
-            <StatusBarContent :scaleRatio="getScaleRatio()" />
-        </div>
-
-        <!-- 内容区域 -->
-        <div class="cosy:inset-0 cosy:h-full" :style="{
-            width: mainContentWidthAspectRatio * 100 + '%',
-            height: mainContentHeightAspectRatio * 100 + '%',
-            // 水平居中
-            left: '50%',
-            // 垂直居中
-            top: '50%',
-            transform: 'translate(-50%, -50%)',
-            position: 'absolute',
-            // 调试模式，背景色为半透明的蓝色
-            backgroundColor: debug ? 'rgba(0, 0, 255, 0.3)' : 'transparent',
-            zIndex: 10,
-        }">
-            <div :class="[debug ? 'cosy:bg-green-300/50' : '', 'cosy:h-full cosy:w-full cosy:overflow-hidden']">
-                <slot />
-            </div>
-        </div>
+  <div
+    :class="['cosy:relative', heightClasses[height]]"
+    :style="{
+      aspectRatio: `${iphoneFrameWidth}/${iphoneFrameHeight}`,
+      // 调试模式，背景色为半透明的黄色
+      backgroundColor: debug ? 'rgba(255, 255, 0, 0.3)' : 'transparent',
+    }"
+  >
+    <!-- iPhone 边框 -->
+    <img
+      v-if="showFrame"
+      style="max-width: 100%; max-height: 100%"
+      :src="iphoneFrame"
+      alt="iPhone frame"
+    />
+
+    <!-- 顶部状态栏 -->
+    <div
+      :style="{
+        position: 'absolute',
+        top: iphoneFrameStatusBarTopAspectRatio * 100 + '%',
+        height: iphoneFrameStatusBarHeightAspectRatio * 100 + '%',
+        width: mainContentWidthAspectRatio * 100 + '%',
+        left: '50%',
+        transform: 'translate(-50%, 0)',
+        paddingLeft: '5%',
+        paddingRight: '5%',
+        // 调试模式，背景色为半透明的红色
+        backgroundColor: debug ? 'rgba(255, 0, 0, 0.3)' : 'transparent',
+        zIndex: 10,
+      }"
+    >
+      <StatusBarContent :scaleRatio="getScaleRatio()" />
+    </div>
+
+    <!-- 内容区域 -->
+    <div
+      class="cosy:inset-0 cosy:h-full"
+      :style="{
+        width: mainContentWidthAspectRatio * 100 + '%',
+        height: mainContentHeightAspectRatio * 100 + '%',
+        // 水平居中
+        left: '50%',
+        // 垂直居中
+        top: '50%',
+        transform: 'translate(-50%, -50%)',
+        position: 'absolute',
+        // 调试模式，背景色为半透明的蓝色
+        backgroundColor: debug ? 'rgba(0, 0, 255, 0.3)' : 'transparent',
+        zIndex: 10,
+      }"
+    >
+      <div
+        :class="[
+          debug ? 'cosy:bg-green-300/50' : '',
+          'cosy:h-full cosy:w-full cosy:overflow-hidden',
+        ]"
+      >
+        <slot />
+      </div>
     </div>
+  </div>
 
-    <AlertDialog v-model="showAlertDialog" :message="alertMessage" />
-</template>
+  <AlertDialog v-model="showAlertDialog" :message="alertMessage" />
+</template>