@coffic/cosy-ui 0.8.24 → 0.8.26

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