@coffic/cosy-ui 0.8.24 → 0.8.25

package/dist/src-vue/list/ListItemGlow.vue

@@ -0,0 +1,75 @@
+<template>
+  <li
+    :class="[
+      '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 ? 'glow-anim' : '',
+    ]"
+    @click="$emit('click')"
+  >
+    <div v-if="loading">
+      <template v-if="duration">
+        <div
+          class="cosy:absolute cosy:left-0 cosy:top-0 cosy:h-full cosy:bg-accent/40 cosy:z-0 loading-bar"
+          :style="{ animationDuration: duration + 'ms' }"
+        ></div>
+      </template>
+    </div>
+    <div
+      class="cosy:relative cosy:z-10 cosy:w-full cosy:flex cosy:items-center cosy:gap-3"
+    >
+      <slot />
+    </div>
+  </li>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    loading?: boolean;
+    duration?: number;
+  }>(),
+  {
+    loading: false,
+    duration: undefined,
+  }
+);
+
+defineEmits(['click']);
+</script>
+
+<style scoped>
+/* 发光边框动画 */
+@keyframes glow {
+  0%,
+  100% {
+    border: 1px solid rgb(139 92 246 / 0.3);
+    box-shadow: 0 0 5px rgb(139 92 246 / 0.3);
+  }
+  50% {
+    border: 1px solid rgb(139 92 246 / 0.8);
+    box-shadow:
+      0 0 20px rgb(139 92 246 / 0.6),
+      0 0 30px rgb(139 92 246 / 0.4),
+      inset 0 0 10px rgb(139 92 246 / 0.2);
+  }
+}
+.glow-anim {
+  animation: glow 2s ease-in-out infinite;
+  border: 1px solid rgb(139 92 246 / 0.3); /* 确保有初始边框 */
+}
+
+/* 进度条动画 */
+.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-vue/list/ListItemIconLeft.vue

@@ -0,0 +1,63 @@
+<template>
+  <li
+    class="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"
+    @click="$emit('click')"
+  >
+    <div v-if="loading">
+      <template v-if="duration">
+        <div
+          class="cosy:absolute cosy:left-0 cosy:top-0 cosy:h-full cosy:bg-accent/40 cosy:z-0 loading-bar"
+          :style="{ animationDuration: duration + 'ms' }"
+        ></div>
+      </template>
+    </div>
+    <div
+      class="cosy:relative cosy:z-10 cosy:w-full cosy:flex cosy:items-center cosy:gap-3"
+    >
+      <!-- 前置 loading 图标 -->
+      <div
+        v-if="loading && !duration"
+        class="cosy:flex-shrink-0 cosy:transform-none"
+        style="transform: none !important"
+      >
+        <div
+          class="cosy:loading cosy:loading-spinner cosy:loading-sm cosy:text-accent"
+        ></div>
+      </div>
+
+      <slot />
+    </div>
+  </li>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    loading?: boolean;
+    duration?: number;
+  }>(),
+  {
+    loading: false,
+    duration: undefined,
+  }
+);
+
+defineEmits(['click']);
+</script>
+
+<style scoped>
+/* 进度条动画 */
+.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-vue/list/ListItemIconRight.vue

@@ -0,0 +1,63 @@
+<template>
+  <li
+    class="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"
+    @click="$emit('click')"
+  >
+    <div v-if="loading">
+      <template v-if="duration">
+        <div
+          class="cosy:absolute cosy:left-0 cosy:top-0 cosy:h-full cosy:bg-accent/40 cosy:z-0 loading-bar"
+          :style="{ animationDuration: duration + 'ms' }"
+        ></div>
+      </template>
+    </div>
+    <div
+      class="cosy:relative cosy:z-10 cosy:w-full cosy:flex cosy:items-center cosy:gap-3"
+    >
+      <slot />
+
+      <!-- 后置 loading 图标 -->
+      <div
+        v-if="loading && !duration"
+        class="cosy:flex-shrink-0 cosy:ml-auto cosy:transform-none"
+        style="transform: none !important"
+      >
+        <div
+          class="cosy:loading cosy:loading-dots cosy:loading-sm cosy:text-accent"
+        ></div>
+      </div>
+    </div>
+  </li>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    loading?: boolean;
+    duration?: number;
+  }>(),
+  {
+    loading: false,
+    duration: undefined,
+  }
+);
+
+defineEmits(['click']);
+</script>
+
+<style scoped>
+/* 进度条动画 */
+.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-vue/list/ListItemPulse.vue

@@ -0,0 +1,71 @@
+<template>
+  <li
+    :class="[
+      '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 ? 'pulse-anim' : '',
+    ]"
+    @click="$emit('click')"
+  >
+    <div v-if="loading">
+      <template v-if="duration">
+        <div
+          class="cosy:absolute cosy:left-0 cosy:top-0 cosy:h-full cosy:bg-accent/40 cosy:z-0 loading-bar"
+          :style="{ animationDuration: duration + 'ms' }"
+        ></div>
+      </template>
+    </div>
+    <div
+      class="cosy:relative cosy:z-10 cosy:w-full cosy:flex cosy:items-center cosy:gap-3"
+    >
+      <slot />
+    </div>
+  </li>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    loading?: boolean;
+    duration?: number;
+  }>(),
+  {
+    loading: false,
+    duration: undefined,
+  }
+);
+
+defineEmits(['click']);
+</script>
+
+<style scoped>
+/* 整体脉冲动画 */
+@keyframes pulse-scale {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.01);
+    opacity: 0.9;
+  }
+}
+.pulse-anim {
+  animation: pulse-scale 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-vue/list/ListItemRing.vue

@@ -0,0 +1,71 @@
+<template>
+  <li
+    :class="[
+      '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'
+        : '',
+    ]"
+    @click="$emit('click')"
+  >
+    <div v-if="loading">
+      <template v-if="duration">
+        <div
+          class="cosy:absolute cosy:left-0 cosy:top-0 cosy:h-full cosy:bg-accent/40 cosy:z-0 loading-bar"
+          :style="{ animationDuration: duration + 'ms' }"
+        ></div>
+      </template>
+    </div>
+    <div
+      class="cosy:relative cosy:z-10 cosy:w-full cosy:flex cosy:items-center cosy:gap-3"
+    >
+      <slot />
+    </div>
+  </li>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    loading?: boolean;
+    duration?: number;
+  }>(),
+  {
+    loading: false,
+    duration: undefined,
+  }
+);
+
+defineEmits(['click']);
+</script>
+
+<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-vue/mac-window/MacWindow.vue

@@ -95,168 +95,189 @@ const activeTab = ref('外观');
 -->
 
 <script lang="ts">
-import '../../style.ts';
+import '../../style';
 import AlertDialog from '../alert-dialog/AlertDialog.vue';
 import { ref, defineComponent, type PropType } from 'vue';
 
 export default defineComponent({
-    name: 'MacWindow',
-    components: {
-        AlertDialog,
+  name: 'MacWindow',
+  components: {
+    AlertDialog,
+  },
+  props: {
+    height: {
+      type: String,
+      default: 'h-96',
     },
-    props: {
-        height: {
-            type: String,
-            default: 'h-96',
-        },
-        title: {
-            type: String,
-            default: '',
-        },
-        withShadow: {
-            type: Boolean,
-            default: true,
-        },
-        tabs: {
-            type: Array as PropType<string[]>,
-            default: () => [],
-        },
-        defaultTab: {
-            type: String,
-            default: '',
-        },
-        onCloseWindow: {
-            type: Function,
-            default: null,
-        },
-        onMinimizeWindow: {
-            type: Function,
-            default: null,
-        },
-        onMaximizeWindow: {
-            type: Function,
-            default: null,
-        },
-        onTabClick: {
-            type: Function,
-            default: null,
-        },
+    title: {
+      type: String,
+      default: '',
     },
-    setup(props) {
-        const showAlertDialog = ref(false);
-        const alertMessage = ref('');
-        const activeTab = ref(props.defaultTab);
+    withShadow: {
+      type: Boolean,
+      default: true,
+    },
+    tabs: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+    defaultTab: {
+      type: String,
+      default: '',
+    },
+    onCloseWindow: {
+      type: Function,
+      default: null,
+    },
+    onMinimizeWindow: {
+      type: Function,
+      default: null,
+    },
+    onMaximizeWindow: {
+      type: Function,
+      default: null,
+    },
+    onTabClick: {
+      type: Function,
+      default: null,
+    },
+  },
+  setup(props) {
+    const showAlertDialog = ref(false);
+    const alertMessage = ref('');
+    const activeTab = ref(props.defaultTab);
 
-        // 如果没有设置默认标签或默认标签不在tabs中，则选择第一个标签
-        if (
-            (!activeTab.value || !props.tabs.includes(activeTab.value)) &&
-            props.tabs.length > 0
-        ) {
-            activeTab.value = props.tabs[0] as string;
-        }
+    // 如果没有设置默认标签或默认标签不在tabs中，则选择第一个标签
+    if (
+      (!activeTab.value || !props.tabs.includes(activeTab.value)) &&
+      props.tabs.length > 0
+    ) {
+      activeTab.value = props.tabs[0] as string;
+    }
 
-        const handleCloseWindow = () => {
-            alertMessage.value = '关闭APP窗口（这是演示，不会真实操作）';
-            showAlertDialog.value = true;
-            if (props.onCloseWindow) {
-                props.onCloseWindow();
-            }
-        };
+    const handleCloseWindow = () => {
+      alertMessage.value = '关闭APP窗口（这是演示，不会真实操作）';
+      showAlertDialog.value = true;
+      if (props.onCloseWindow) {
+        props.onCloseWindow();
+      }
+    };
 
-        const handleMinimizeWindow = () => {
-            alertMessage.value = '最小化窗口（这是演示，不会真实操作）';
-            showAlertDialog.value = true;
-            if (props.onMinimizeWindow) {
-                props.onMinimizeWindow();
-            }
-        };
+    const handleMinimizeWindow = () => {
+      alertMessage.value = '最小化窗口（这是演示，不会真实操作）';
+      showAlertDialog.value = true;
+      if (props.onMinimizeWindow) {
+        props.onMinimizeWindow();
+      }
+    };
 
-        const handleMaximizeWindow = () => {
-            alertMessage.value = '最大化窗口（这是演示，不会真实操作）';
-            showAlertDialog.value = true;
-            if (props.onMaximizeWindow) {
-                props.onMaximizeWindow();
-            }
-        };
+    const handleMaximizeWindow = () => {
+      alertMessage.value = '最大化窗口（这是演示，不会真实操作）';
+      showAlertDialog.value = true;
+      if (props.onMaximizeWindow) {
+        props.onMaximizeWindow();
+      }
+    };
 
-        const handleTabClick = (tab: string) => {
-            activeTab.value = tab;
-            if (props.onTabClick) {
-                props.onTabClick(tab);
-            }
-        };
+    const handleTabClick = (tab: string) => {
+      activeTab.value = tab;
+      if (props.onTabClick) {
+        props.onTabClick(tab);
+      }
+    };
 
-        return {
-            showAlertDialog,
-            alertMessage,
-            activeTab,
-            handleCloseWindow,
-            handleMinimizeWindow,
-            handleMaximizeWindow,
-            handleTabClick,
-        };
-    },
+    return {
+      showAlertDialog,
+      alertMessage,
+      activeTab,
+      handleCloseWindow,
+      handleMinimizeWindow,
+      handleMaximizeWindow,
+      handleTabClick,
+    };
+  },
 });
 </script>
 
 <template>
-    <div class="cosy:flex cosy:max-w-5xl cosy:mx-auto cosy:bg-base-100 cosy:relative cosy:rounded-2xl cosy:overflow-hidden"
-        :class="[height, withShadow ? 'cosy:shadow-lg' : '']">
-        <!-- 窗口控制按钮 -->
+  <div
+    class="cosy:flex cosy:max-w-5xl cosy:mx-auto cosy:bg-base-100 cosy:relative cosy:rounded-2xl cosy:overflow-hidden"
+    :class="[height, withShadow ? 'cosy:shadow-lg' : '']"
+  >
+    <!-- 窗口控制按钮 -->
+    <div
+      class="cosy:absolute cosy:top-0 cosy:left-0 cosy:right-0 cosy:flex cosy:items-center cosy:h-12 cosy:px-4 cosy:bg-base-200 cosy:border-b cosy:border-base-300"
+    >
+      <div class="cosy:flex cosy:items-center cosy:space-x-2">
         <div
-            class="cosy:absolute cosy:top-0 cosy:left-0 cosy:right-0 cosy:flex cosy:items-center cosy:h-12 cosy:px-4 cosy:bg-base-200 cosy:border-b cosy:border-base-300">
-            <div class="cosy:flex cosy:items-center cosy:space-x-2">
-                <div class="cosy:w-3 cosy:h-3 cosy:rounded-full cosy:bg-error cosy:cursor-pointer hover:cosy:opacity-80 cosy:transition-opacity"
-                    @click="handleCloseWindow" />
-                <div class="cosy:w-3 cosy:h-3 cosy:rounded-full cosy:bg-warning cosy:cursor-pointer hover:cosy:opacity-80 cosy:transition-opacity"
-                    @click="handleMinimizeWindow" />
-                <div class="cosy:w-3 cosy:h-3 cosy:rounded-full cosy:bg-success cosy:cursor-pointer hover:cosy:opacity-80 cosy:transition-opacity"
-                    @click="handleMaximizeWindow" />
-            </div>
-            <div class="cosy:ml-6 cosy:text-sm cosy:font-medium cosy:text-base-content">
-                {{ title }}
-            </div>
-
-            <!-- 标签选择器 -->
-            <div v-if="tabs?.length" class="cosy:flex-1 cosy:flex cosy:justify-center">
-                <div class="cosy:inline-flex cosy:rounded-lg cosy:bg-base-300 cosy:p-1">
-                    <button v-for="(tab, index) in tabs" :key="index" :class="[
-                        'cosy:px-3 cosy:py-1 cosy:text-sm cosy:rounded-md cosy:transition-colors',
-                        activeTab === tab
-                            ? 'cosy:bg-base-100 cosy:text-base-content cosy:shadow'
-                            : 'cosy:text-base-content/70 hover:cosy:text-base-content',
-                    ]" @click="handleTabClick(tab)">
-                        {{ tab }}
-                    </button>
-                </div>
-            </div>
+          class="cosy:w-3 cosy:h-3 cosy:rounded-full cosy:bg-error cosy:cursor-pointer hover:cosy:opacity-80 cosy:transition-opacity"
+          @click="handleCloseWindow"
+        />
+        <div
+          class="cosy:w-3 cosy:h-3 cosy:rounded-full cosy:bg-warning cosy:cursor-pointer hover:cosy:opacity-80 cosy:transition-opacity"
+          @click="handleMinimizeWindow"
+        />
+        <div
+          class="cosy:w-3 cosy:h-3 cosy:rounded-full cosy:bg-success cosy:cursor-pointer hover:cosy:opacity-80 cosy:transition-opacity"
+          @click="handleMaximizeWindow"
+        />
+      </div>
+      <div
+        class="cosy:ml-6 cosy:text-sm cosy:font-medium cosy:text-base-content"
+      >
+        {{ title }}
+      </div>
 
-            <!-- 工具栏插槽 -->
-            <div class="cosy:ml-auto cosy:flex cosy:items-center cosy:space-x-2">
-                <slot name="toolbar"></slot>
-            </div>
+      <!-- 标签选择器 -->
+      <div
+        v-if="tabs?.length"
+        class="cosy:flex-1 cosy:flex cosy:justify-center"
+      >
+        <div class="cosy:inline-flex cosy:rounded-lg cosy:bg-base-300 cosy:p-1">
+          <button
+            v-for="(tab, index) in tabs"
+            :key="index"
+            :class="[
+              'cosy:px-3 cosy:py-1 cosy:text-sm cosy:rounded-md cosy:transition-colors',
+              activeTab === tab
+                ? 'cosy:bg-base-100 cosy:text-base-content cosy:shadow'
+                : 'cosy:text-base-content/70 hover:cosy:text-base-content',
+            ]"
+            @click="handleTabClick(tab)"
+          >
+            {{ tab }}
+          </button>
         </div>
+      </div>
+
+      <!-- 工具栏插槽 -->
+      <div class="cosy:ml-auto cosy:flex cosy:items-center cosy:space-x-2">
+        <slot name="toolbar"></slot>
+      </div>
+    </div>
 
-        <!-- 主要内容区域 -->
-        <div class="cosy:flex-1 cosy:flex cosy:flex-col cosy:pt-12 cosy:h-full">
-            <div class="cosy:flex cosy:flex-1 cosy:h-full cosy:overflow-hidden">
-                <!-- 左侧栏插槽 -->
-                <slot name="sidebar" />
+    <!-- 主要内容区域 -->
+    <div class="cosy:flex-1 cosy:flex cosy:flex-col cosy:pt-12 cosy:h-full">
+      <div class="cosy:flex cosy:flex-1 cosy:h-full cosy:overflow-hidden">
+        <!-- 左侧栏插槽 -->
+        <slot name="sidebar" />
 
-                <!-- 主内容插槽 -->
-                <slot />
-            </div>
+        <!-- 主内容插槽 -->
+        <slot />
+      </div>
 
-            <!-- 底部状态栏 -->
-            <div v-if="$slots.status"
-                class="cosy:h-6 cosy:bg-base-200/95 cosy:border-t cosy:border-base-300 cosy:flex cosy:items-center cosy:justify-end cosy:px-4 cosy:text-sm">
-                <div class="cosy:flex cosy:items-center cosy:space-x-2">
-                    <slot name="status"></slot>
-                </div>
-            </div>
+      <!-- 底部状态栏 -->
+      <div
+        v-if="$slots.status"
+        class="cosy:h-6 cosy:bg-base-200/95 cosy:border-t cosy:border-base-300 cosy:flex cosy:items-center cosy:justify-end cosy:px-4 cosy:text-sm"
+      >
+        <div class="cosy:flex cosy:items-center cosy:space-x-2">
+          <slot name="status"></slot>
         </div>
+      </div>
     </div>
+  </div>
 
-    <!-- AlertDialog 组件 -->
-    <AlertDialog v-model="showAlertDialog" :message="alertMessage" />
+  <!-- AlertDialog 组件 -->
+  <AlertDialog v-model="showAlertDialog" :message="alertMessage" />
 </template>

package/package.json

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