@coffic/cosy-ui 0.7.2 → 0.8.6

package/dist/vue/buttons-vue/ButtonWithIcons.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import VueButton from './Button.vue';
+</script>
+
+<template>
+  <div class="cosy:flex cosy:gap-2">
+    <VueButton>
+      <template #icon-left>👈</template>
+      左侧图标
+    </VueButton>
+    <VueButton>
+      右侧图标
+      <template #icon-right>👉</template>
+    </VueButton>
+    <VueButton>
+      <template #icon-left>👈</template>
+      两侧图标
+      <template #icon-right>👉</template>
+    </VueButton>
+  </div>
+</template>

package/dist/vue/buttons-vue/index.ts

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

package/dist/vue/confirm-dialog-vue/Basic.vue

@@ -0,0 +1,62 @@
+<!--
+@component ConfirmDialog.Basic
+
+@description
+ConfirmDialog 组件的基础示例，展示最基本的确认对话框用法。
+
+@usage
+```vue
+<ConfirmDialogExamples.Basic />
+```
+-->
+
+<script lang="ts">
+import '../../app.css';
+import { ref, defineComponent } from 'vue';
+import ConfirmDialog from './ConfirmDialog.vue';
+
+export default defineComponent({
+  name: 'ConfirmDialogBasicExample',
+  components: {
+    ConfirmDialog,
+  },
+  setup() {
+    const isShow = ref(false);
+    const result = ref('');
+
+    const handleConfirm = () => {
+      result.value = '用户已确认操作';
+
+      // 3秒后清除结果
+      setTimeout(() => {
+        result.value = '';
+      }, 3000);
+    };
+
+    return {
+      isShow,
+      result,
+      handleConfirm,
+    };
+  },
+});
+</script>
+
+<template>
+  <div class="cosy:flex cosy:flex-col cosy:gap-4">
+    <button @click="isShow = true" class="cosy:btn cosy:btn-primary">
+      显示确认对话框
+    </button>
+
+    <div v-if="result" class="cosy:alert cosy:alert-success cosy:shadow-lg">
+      <span>{{ result }}</span>
+    </div>
+  </div>
+
+  <ConfirmDialog
+    v-model="isShow"
+    title="确认操作"
+    message="您确定要执行此操作吗？此操作无法撤销。"
+    @confirm="handleConfirm"
+  />
+</template>

package/dist/vue/confirm-dialog-vue/ConfirmDialog.vue

@@ -0,0 +1,147 @@
+<!--
+@component ConfirmDialog
+
+@description
+ConfirmDialog 组件用于显示确认对话框，带有标题、消息内容和两个按钮（确认和取消），支持自定义按钮文本，并带有淡入淡出动画效果。
+
+@usage
+基本用法：
+```vue
+<ConfirmDialog v-model="showDialog" title="确认操作" message="您确定要执行此操作吗？" @confirm="handleConfirm" />
+```
+
+自定义按钮文本：
+```vue
+<ConfirmDialog 
+  v-model="showDialog" 
+  title="删除确认" 
+  message="您确定要删除此项目吗？此操作无法撤销。" 
+  cancel-text="取消" 
+  confirm-text="删除" 
+  @confirm="handleDelete" 
+/>
+```
+
+组合使用：
+```vue
+<template>
+  <button @click="showDialog = true">删除项目</button>
+  <ConfirmDialog v-model="showDialog" title="删除确认" message="此操作无法撤销" @confirm="handleDelete" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ConfirmDialog } from 'cosy-ui';
+
+const showDialog = ref(false);
+const handleDelete = () => {
+  // 处理确认删除逻辑
+};
+</script>
+```
+
+@props
+@prop {boolean} modelValue - 控制对话框显示状态，支持v-model双向绑定
+@prop {string} [title='Confirm'] - 对话框标题
+@prop {string} [message='Are you sure you want to confirm this action?'] - 对话框显示的消息内容
+@prop {string} [cancel-text='取消'] - 取消按钮的文本
+@prop {string} [confirm-text='确认'] - 确认按钮的文本
+
+@emits
+@emit {update:modelValue} - 当对话框关闭时触发，用于更新v-model绑定值
+@emit {confirm} - 当用户点击确认按钮时触发
+-->
+
+<template>
+  <Transition
+    name="fade"
+    class="cosy:transition-opacity cosy:duration-200 cosy:ease-in-out"
+  >
+    <div
+      v-if="modelValue"
+      class="cosy:fixed cosy:inset-0 cosy:z-50 cosy:flex cosy:items-center cosy:justify-center"
+    >
+      <!-- 背景遮罩 -->
+      <div
+        class="cosy:absolute cosy:inset-0 cosy:bg-base-200/80 cosy:backdrop-blur-sm"
+        @click="$emit('update:modelValue', false)"
+      />
+
+      <!-- 对话框 -->
+      <div
+        class="cosy:relative cosy:bg-base-100 cosy:rounded-xl cosy:shadow-xl cosy:w-[400px] cosy:transform cosy:transition-all"
+      >
+        <!-- 内容区域 -->
+        <div class="cosy:p-6">
+          <h3
+            class="cosy:text-lg cosy:font-medium cosy:text-base-content cosy:mb-2"
+          >
+            {{ title }}
+          </h3>
+          <p class="cosy:text-base-content/80">
+            {{ message }}
+          </p>
+        </div>
+
+        <!-- 按钮区域 -->
+        <div class="cosy:flex cosy:border-t cosy:border-base-300">
+          <button
+            class="cosy:flex-1 cosy:btn cosy:btn-ghost cosy:rounded-none cosy:rounded-bl-xl"
+            @click="$emit('update:modelValue', false)"
+          >
+            {{ cancelText }}
+          </button>
+          <button
+            class="cosy:flex-1 cosy:btn cosy:btn-ghost cosy:text-primary cosy:rounded-none cosy:rounded-br-xl cosy:border-l cosy:border-base-300"
+            @click="handleConfirm"
+          >
+            {{ confirmText }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import '../../style';
+
+defineProps({
+  modelValue: Boolean,
+  title: {
+    type: String,
+    default: 'Confirm',
+  },
+  message: {
+    type: String,
+    default: 'Are you sure you want to confirm this action?',
+  },
+  cancelText: {
+    type: String,
+    default: '取消',
+  },
+  confirmText: {
+    type: String,
+    default: '确认',
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'confirm']);
+
+const handleConfirm = () => {
+  emit('update:modelValue', false);
+  emit('confirm');
+};
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/dist/vue/confirm-dialog-vue/CustomButtons.vue

@@ -0,0 +1,81 @@
+<!--
+@component ConfirmDialog.CustomButtons
+
+@description
+展示如何自定义 ConfirmDialog 组件的按钮文本。
+
+@usage
+```vue
+<ConfirmDialogExamples.CustomButtons />
+```
+-->
+
+<script lang="ts">
+import '../../app.css';
+import { ref, defineComponent } from 'vue';
+import ConfirmDialog from './ConfirmDialog.vue';
+
+export default defineComponent({
+  name: 'ConfirmDialogCustomButtonsExample',
+  components: {
+    ConfirmDialog,
+  },
+  setup() {
+    const isShowDelete = ref(false);
+    const isShowSave = ref(false);
+    const result = ref('');
+
+    const handleConfirm = (action: string) => {
+      result.value = `用户已${action}`;
+
+      // 3秒后清除结果
+      setTimeout(() => {
+        result.value = '';
+      }, 3000);
+    };
+
+    return {
+      isShowDelete,
+      isShowSave,
+      result,
+      handleConfirm,
+    };
+  },
+});
+</script>
+
+<template>
+  <div class="cosy:flex cosy:flex-col cosy:gap-4">
+    <div class="cosy:flex cosy:gap-4">
+      <button @click="isShowDelete = true" class="cosy:btn cosy:btn-error">
+        删除文件
+      </button>
+
+      <button @click="isShowSave = true" class="cosy:btn cosy:btn-success">
+        保存更改
+      </button>
+    </div>
+
+    <div v-if="result" class="cosy:alert cosy:alert-info cosy:shadow-lg">
+      <span>{{ result }}</span>
+    </div>
+  </div>
+
+  <ConfirmDialog
+    v-model="isShowDelete"
+    title="警告"
+    message="您确定要删除这个文件吗？此操作无法撤销。"
+    cancel-text="取消"
+    confirm-text="删除"
+    @confirm="handleConfirm('删除了文件')"
+  />
+
+  <ConfirmDialog
+    v-model="isShowSave"
+    title="保存更改"
+    message="您的更改尚未保存，确定要保存吗？"
+    cancel-text="稍后再说"
+    confirm-text="保存"
+    @confirm="handleConfirm('保存了更改')"
+  />
+</template>

package/dist/vue/confirm-dialog-vue/index.ts

@@ -0,0 +1,20 @@
+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';
+
+// 导出主组件
+export { default as ConfirmDialog } from './ConfirmDialog.vue';
+
+// 导出示例组件
+export const ConfirmDialogExamples = {
+  Basic,
+  CustomButtons,
+};
+
+// 导出示例源代码
+export const ConfirmDialogExampleCodes = {
+  Basic: extractSimpleExample(BasicSource, 'ConfirmDialog'),
+  CustomButtons: extractSimpleExample(CustomButtonsSource, 'ConfirmDialog'),
+};

package/dist/vue/cosy.ts

@@ -0,0 +1,6 @@
+import { Logger } from './utils/logger';
+
+export const NAME = 'Cosy-UI';
+export const ERROR_PREFIX = 'Cosy-UI: ';
+
+export const cosyLogger = new Logger(NAME);

package/dist/vue/counter-vue/VueCounter.vue

@@ -0,0 +1,29 @@
+<!-- 简单的Vue计数器组件 -->
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const count = ref(0);
+
+const increment = () => {
+  count.value++;
+};
+
+const decrement = () => {
+  count.value--;
+};
+</script>
+
+<template>
+  <div
+    class="cosy:p-4 cosy:bg-base-200 cosy:rounded-lg cosy:shadow-md cosy:max-w-xs cosy:mx-auto"
+  >
+    <h2 class="cosy:text-xl cosy:font-bold cosy:mb-4 cosy:text-center">
+      Vue 计数器测试
+    </h2>
+    <div class="cosy:flex cosy:items-center cosy:justify-center cosy:gap-4">
+      <button @click="decrement" class="cosy:btn cosy:btn-primary">-</button>
+      <span class="cosy:text-2xl cosy:font-bold">{{ count }}</span>
+      <button @click="increment" class="cosy:btn cosy:btn-primary">+</button>
+    </div>
+  </div>
+</template>

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

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

package/dist/vue/iPhone-vue/Basic.vue

@@ -0,0 +1,33 @@
+<!--
+@component iPhoneWindow.Basic
+
+@description
+iPhoneWindow 组件的基础示例，展示最基本的 iPhone 窗口外观。
+
+@usage
+```vue
+<iPhoneWindowExamples.Basic />
+```
+-->
+
+<script lang="ts">
+import '../../app.css';
+import { defineComponent } from 'vue';
+import iPhoneWindow from './iPhoneWindow.vue';
+
+export default defineComponent({
+  name: 'iPhoneWindowBasicExample',
+  components: {
+    iPhoneWindow,
+  },
+});
+</script>
+
+<template>
+  <iPhoneWindow>
+    <div class="cosy:p-4 cosy:text-center">
+      <h2 class="cosy:text-xl cosy:font-bold cosy:mb-2">我的应用</h2>
+      <p>这是一个 iPhone 风格的应用界面</p>
+    </div>
+  </iPhoneWindow>
+</template>

package/dist/vue/iPhone-vue/CustomBackground.vue

@@ -0,0 +1,35 @@
+<!--
+@component iPhoneWindow.CustomBackground
+
+@description
+自定义背景色的 iPhone 窗口示例，展示如何设置不同的背景色。
+
+@usage
+```vue
+<iPhoneWindowExamples.CustomBackground />
+```
+-->
+
+<script lang="ts">
+import '../../app.css';
+import { defineComponent } from 'vue';
+import iPhoneWindow from './iPhoneWindow.vue';
+
+export default defineComponent({
+  name: 'iPhoneWindowCustomBackgroundExample',
+  components: {
+    iPhoneWindow,
+  },
+});
+</script>
+
+<template>
+  <iPhoneWindow backgroundColor="cosy:bg-blue-50">
+    <div class="cosy:p-4 cosy:text-center">
+      <h2 class="cosy:text-xl cosy:font-bold cosy:mb-2 cosy:text-blue-800">
+        蓝色主题
+      </h2>
+      <p class="cosy:text-blue-600">自定义背景色的应用界面</p>
+    </div>
+  </iPhoneWindow>
+</template>

package/dist/vue/iPhone-vue/NoFrame.vue

@@ -0,0 +1,33 @@
+<!--
+@component iPhoneWindow.NoFrame
+
+@description
+不显示边框的 iPhone 窗口示例，只展示内容区域。
+
+@usage
+```vue
+<iPhoneWindowExamples.NoFrame />
+```
+-->
+
+<script lang="ts">
+import '../../app.css';
+import { defineComponent } from 'vue';
+import iPhoneWindow from './iPhoneWindow.vue';
+
+export default defineComponent({
+  name: 'iPhoneWindowNoFrameExample',
+  components: {
+    iPhoneWindow,
+  },
+});
+</script>
+
+<template>
+  <iPhoneWindow :showFrame="false">
+    <div class="cosy:p-4 cosy:text-center">
+      <h2 class="cosy:text-xl cosy:font-bold cosy:mb-2">纯界面模式</h2>
+      <p>不显示 iPhone 边框，只展示内容</p>
+    </div>
+  </iPhoneWindow>
+</template>

package/dist/vue/iPhone-vue/WeatherApp.vue

@@ -0,0 +1,143 @@
+<!--
+@component iPhoneWindow.WeatherApp
+
+@description
+天气应用示例，展示一个更复杂的 iPhone 应用界面，包含标题栏、主内容区和底部导航。
+
+@usage
+```vue
+<iPhoneWindowExamples.WeatherApp />
+```
+-->
+
+<script lang="ts">
+import '../../app.css';
+import { defineComponent } from 'vue';
+import iPhoneWindow from './iPhoneWindow.vue';
+
+export default defineComponent({
+  name: 'iPhoneWindowWeatherAppExample',
+  components: {
+    iPhoneWindow,
+  },
+});
+</script>
+
+<template>
+  <iPhoneWindow>
+    <div class="cosy:flex cosy:flex-col cosy:h-full">
+      <!-- 应用标题栏 -->
+      <div
+        class="cosy:bg-primary cosy:text-white cosy:px-4 cosy:py-3 cosy:flex cosy:items-center cosy:justify-between"
+      >
+        <h2 class="cosy:font-medium">天气预报</h2>
+        <button class="cosy:btn cosy:btn-ghost cosy:btn-sm cosy:p-1">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="cosy:h-5 cosy:w-5"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
+
+      <!-- 主要内容 -->
+      <div
+        class="cosy:flex-1 cosy:p-4 cosy:bg-gradient-to-b cosy:from-blue-400 cosy:to-blue-600"
+      >
+        <div class="cosy:text-center cosy:text-white">
+          <div class="cosy:text-5xl cosy:font-light cosy:mb-2">23°</div>
+          <div class="cosy:text-xl cosy:mb-4">晴朗</div>
+          <div class="cosy:text-sm cosy:opacity-90">上海市，今天</div>
+        </div>
+
+        <div
+          class="cosy:mt-8 cosy:bg-white/20 cosy:backdrop-blur-sm cosy:rounded-xl cosy:p-4"
+        >
+          <div
+            class="cosy:grid cosy:grid-cols-3 cosy:gap-4 cosy:text-center cosy:text-white"
+          >
+            <div>
+              <div class="cosy:text-sm cosy:opacity-80">湿度</div>
+              <div class="cosy:font-medium">68%</div>
+            </div>
+            <div>
+              <div class="cosy:text-sm cosy:opacity-80">风速</div>
+              <div class="cosy:font-medium">8 km/h</div>
+            </div>
+            <div>
+              <div class="cosy:text-sm cosy:opacity-80">能见度</div>
+              <div class="cosy:font-medium">10 km</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 底部导航 -->
+      <div
+        class="cosy:bg-white cosy:border-t cosy:border-gray-200 cosy:flex cosy:justify-around cosy:py-2"
+      >
+        <button class="cosy:p-2 cosy:text-primary">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="cosy:h-6 cosy:w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+            />
+          </svg>
+        </button>
+        <button class="cosy:p-2">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="cosy:h-6 cosy:w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+        </button>
+        <button class="cosy:p-2">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="cosy:h-6 cosy:w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+            />
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </iPhoneWindow>
+</template>