@darkchest/wck 0.0.1

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright 2025 @darkchest
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/demo/Todo.vue

@@ -0,0 +1,664 @@
+<template>
+  <div id="app">
+    <div class="todo-container">
+      <!-- Header Slot -->
+      <header>
+        <slot name="header">
+          <h1 class="app-title">{{ appTitle }}</h1>
+          <p class="app-description">使用 Vue2 实现的 Todo List 应用</p>
+        </slot>
+      </header>
+
+      <!-- Add Todo Form -->
+      <div class="add-todo">
+        <input
+          type="text"
+          v-model="newTodo"
+          placeholder="请输入待办事项..."
+          @keyup.enter="addTodo"
+          class="todo-input"
+        />
+        <button @click="addTodo" class="add-btn">添加</button>
+        <button @click="clearCompleted" class="clear-btn">清除已完成</button>
+      </div>
+
+      <!-- Filter Controls -->
+      <div class="filter-controls">
+        <button 
+          @click="filter = 'all'"
+          :class="{ active: filter === 'all' }"
+          class="filter-btn"
+        >
+          全部 ({{ totalTodos }})
+        </button>
+        <button 
+          @click="filter = 'active'"
+          :class="{ active: filter === 'active' }"
+          class="filter-btn"
+        >
+          未完成 ({{ activeTodosCount }})
+        </button>
+        <button 
+          @click="filter = 'completed'"
+          :class="{ active: filter === 'completed' }"
+          class="filter-btn"
+        >
+          已完成 ({{ completedTodosCount }})
+        </button>
+      </div>
+
+      <!-- Todo List -->
+      <div class="todo-list">
+        <div v-if="filteredTodos.length === 0" class="empty-state">
+          <p v-if="todos.length === 0">暂无待办事项，请添加一个吧！</p>
+          <p v-else>没有{{ filter === 'active' ? '未完成' : '已完成' }}的事项</p>
+        </div>
+        
+        <div 
+          v-for="todo in filteredTodos" 
+          :key="todo.id"
+          class="todo-item"
+          :class="{ completed: todo.completed }"
+        >
+          <div class="todo-content">
+            <input 
+              type="checkbox" 
+              v-model="todo.completed"
+              class="todo-checkbox"
+              :id="'todo-' + todo.id"
+            />
+            <label :for="'todo-' + todo.id" class="todo-text">
+              <span>{{ todo.text }}</span>
+              <span class="todo-date">{{ formatDate(todo.createdAt) }}</span>
+            </label>
+          </div>
+          <div class="todo-actions">
+            <button @click="editTodo(todo)" class="edit-btn">编辑</button>
+            <button @click="deleteTodo(todo.id)" class="delete-btn">删除</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Stats -->
+      <div class="stats">
+        <p v-if="todos.length > 0">
+          已完成 {{ completedTodosCount }} / 总共 {{ totalTodos }} 个待办事项
+          <span v-if="hasCompletedTodos" class="completion-rate">
+            (完成率: {{ completionRate }}%)
+          </span>
+        </p>
+        
+        <!-- Progress Bar Slot -->
+        <slot name="progress">
+          <div class="progress-container">
+            <div class="progress-bar" :style="{ width: completionRate + '%' }"></div>
+          </div>
+        </slot>
+      </div>
+
+      <!-- Footer Slot -->
+      <footer>
+        <slot name="footer">
+          <p class="footer-text">双击事项可标记为完成/未完成</p>
+          <p class="footer-text">使用 Vue2 实现 - 包含 Props, Data, Methods, Slots, Watch, Computed, 生命周期</p>
+        </slot>
+      </footer>
+    </div>
+
+    <!-- Edit Modal -->
+    <div v-if="editingTodo" class="modal-overlay" @click="cancelEdit">
+      <div class="modal" @click.stop>
+        <h3>编辑待办事项</h3>
+        <input 
+          type="text" 
+          v-model="editingTodo.text" 
+          @keyup.enter="saveEdit"
+          class="edit-input"
+        />
+        <div class="modal-actions">
+          <button @click="saveEdit" class="save-btn">保存</button>
+          <button @click="cancelEdit" class="cancel-btn">取消</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TodoApp',
+  
+  // Props 示例
+  props: {
+    initialTodos: {
+      type: [Array, Object],
+      default: () => []
+    },
+    appTitle: {
+      type: String,
+      default: '我的待办清单'
+    },
+    enableLocalStorage: {
+      type: Boolean,
+      default: true
+    }
+  },
+  
+  // Data 示例
+  data() {
+    return {
+      newTodo: '',
+      todos: [],
+      filter: 'all',
+      editingTodo: null,
+      lastTodoId: 0
+    };
+  },
+  
+  // Computed 示例
+  computed: {
+    // 计算过滤后的待办事项
+    filteredTodos() {
+      switch (this.filter) {
+        case 'active':
+          return this.todos.filter(todo => !todo.completed);
+        case 'completed':
+          return this.todos.filter(todo => todo.completed);
+        default:
+          return this.todos;
+      }
+    },
+    
+    // 计算未完成事项数量
+    activeTodosCount() {
+      return this.todos.filter(todo => !todo.completed).length;
+    },
+    
+    // 计算已完成事项数量
+    completedTodosCount() {
+      return this.todos.filter(todo => todo.completed).length;
+    },
+    
+    // 计算总事项数量
+    totalTodos() {
+      return this.todos.length;
+    },
+    
+    // 计算完成率
+    completionRate() {
+      if (this.totalTodos === 0) return 0;
+      return Math.round((this.completedTodosCount / this.totalTodos) * 100);
+    },
+    
+    // 检查是否有已完成事项
+    hasCompletedTodos() {
+      return this.completedTodosCount > 0;
+    }
+  },
+  
+  // Watch 示例
+  watch: {
+    // 监听 todos 变化并保存到 localStorage
+    todos: {
+      handler(newTodos, oldTodos) {
+        if (this.enableLocalStorage) {
+          localStorage.setItem('vue-todos', JSON.stringify(newTodos));
+        }
+        
+        // 发送事件给父组件（如果需要）
+        this.$emit('todos-updated', newTodos);
+      },
+      deep: true
+    },
+    
+    // 监听 filter 变化
+    filter(newFilter, oldFilter) {
+      console.log('过滤器已更改为: '+newFilter);
+    }
+  },
+  
+  // Methods 示例
+  methods: {
+    // 添加新的待办事项
+    addTodo() {
+      if (this.newTodo.trim() === '') return;
+      
+      this.todos.push({
+        id: ++this.lastTodoId,
+        text: this.newTodo.trim(),
+        completed: false,
+        createdAt: new Date()
+      });
+      
+      this.newTodo = '';
+      console.log('已添加新的待办事项');
+    },
+    
+    // 删除待办事项
+    deleteTodo(id) {
+      const index = this.todos.findIndex(todo => todo.id === id);
+      if (index !== -1) {
+        this.todos.splice(index, 1);
+        console.log('已删除待办事项 ID: '+id);
+      }
+    },
+    
+    // 编辑待办事项
+    editTodo(todo) {
+      this.editingTodo = { ...todo };
+    },
+    
+    // 保存编辑
+    saveEdit() {
+      if (this.editingTodo && this.editingTodo.text.trim() !== '') {
+        const index = this.todos.findIndex(todo => todo.id === this.editingTodo.id);
+        if (index !== -1) {
+          this.$set(this.todos, index, { ...this.editingTodo });
+          console.log('已更新待办事项 ID: '+this.editingTodo.id);
+        }
+      }
+      this.editingTodo = null;
+      // 已知这里会报错, 这是petite-vue内部的bug, 因为并不影响使用, 所以我不打算修复(没有petite-vue源码).
+      // 感觉这是因为v-if的优先级没有v-model高导致的, 所以我们可以通过额外设置一个开关变量来绕开这个报错, 只要不设置对象为null就行.
+    },
+    
+    // 取消编辑
+    cancelEdit() {
+      this.editingTodo = null;
+      // 已知这里会报错, 这是petite-vue内部的bug, 因为并不影响使用, 所以我不打算修复(没有petite-vue源码).
+      // 感觉这是因为v-if的优先级没有v-model高导致的, 所以我们可以通过额外设置一个开关变量来绕开这个报错, 只要不设置对象为null就行.
+    },
+    
+    // 清除已完成事项
+    clearCompleted() {
+      const originalLength = this.todos.length;
+      this.todos = this.todos.filter(todo => !todo.completed);
+      const clearedCount = originalLength - this.todos.length;
+      console.log('已清除 '+clearedCount+' 个已完成事项');
+    },
+    
+    // 格式化日期
+    formatDate(date) {
+      return new Date(date).toLocaleDateString('zh-CN', {
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+      });
+    }
+  },
+  
+  // 生命周期钩子示例
+  created() {
+    console.log('TodoApp 组件已创建');
+    
+    // 从 props 或 localStorage 初始化 todos
+    if (this.initialTodos && this.initialTodos.length > 0) {
+      this.todos = [...this.initialTodos];
+      this.lastTodoId = Math.max(...this.initialTodos.map(todo => todo.id), 0);
+    } else if (this.enableLocalStorage) {
+      const savedTodos = localStorage.getItem('vue-todos');
+      if (savedTodos) {
+        try {
+          this.todos = JSON.parse(savedTodos);
+          this.lastTodoId = Math.max(...this.todos.map(todo => todo.id), 0);
+          console.log('从 localStorage 加载待办事项');
+        } catch (e) {
+          console.error('解析保存的待办事项失败:', e);
+        }
+      }
+    }
+  },
+  
+  mounted() {
+    console.log('TodoApp 组件已挂载到 DOM');
+    
+    // 为每个待办事项添加双击切换完成状态的功能
+    this.$nextTick(() => {
+      const todoItems = document.querySelectorAll('.todo-item');
+      todoItems.forEach(item => {
+        item.addEventListener('dblclick', () => {
+          const todoId = parseInt(item.dataset.id);
+          const todoIndex = this.todos.findIndex(todo => todo.id === todoId);
+          if (todoIndex !== -1) {
+            this.todos[todoIndex].completed = !this.todos[todoIndex].completed;
+            console.log('双击切换待办事项状态 ID: '+todoId);
+          }
+        });
+      });
+    });
+  },
+  
+  beforeUpdate() {
+    console.log('TodoApp 组件即将更新');
+  },
+  
+  updated() {
+    console.log('TodoApp 组件已更新');
+  },
+  
+  beforeDestroy() {
+    console.log('TodoApp 组件即将销毁');
+  },
+  
+  destroyed() {
+    console.log('TodoApp 组件已销毁');
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.todo-container {
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  padding: 30px;
+}
+
+header {
+  text-align: center;
+  margin-bottom: 30px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 20px;
+}
+
+.app-title {
+  color: #42b983;
+  font-size: 2.5rem;
+  margin-bottom: 10px;
+}
+
+.app-description {
+  color: #7f8c8d;
+  font-size: 1rem;
+}
+
+.add-todo {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.todo-input {
+  flex: 1;
+  padding: 12px 15px;
+  border: 2px solid #e0e0e0;
+  border-radius: 6px;
+  font-size: 16px;
+  transition: border-color 0.3s;
+}
+
+.todo-input:focus {
+  border-color: #42b983;
+  outline: none;
+}
+
+.add-btn, .clear-btn {
+  padding: 12px 20px;
+  border: none;
+  border-radius: 6px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.add-btn {
+  background-color: #42b983;
+  color: white;
+}
+
+.add-btn:hover {
+  background-color: #3aa876;
+}
+
+.clear-btn {
+  background-color: #f0f0f0;
+  color: #333;
+}
+
+.clear-btn:hover {
+  background-color: #e0e0e0;
+}
+
+.filter-controls {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 25px;
+}
+
+.filter-btn {
+  flex: 1;
+  padding: 10px;
+  background-color: #f8f9fa;
+  border: 1px solid #dee2e6;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.filter-btn.active {
+  background-color: #42b983;
+  color: white;
+  border-color: #42b983;
+}
+
+.filter-btn:hover:not(.active) {
+  background-color: #e9ecef;
+}
+
+.todo-list {
+  margin-bottom: 25px;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 40px 20px;
+  color: #95a5a6;
+  font-style: italic;
+}
+
+.todo-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px;
+  border-bottom: 1px solid #f0f0f0;
+  transition: all 0.3s;
+  border-radius: 6px;
+  margin-bottom: 8px;
+  background-color: #f9f9f9;
+}
+
+.todo-item:hover {
+  background-color: #f0f0f0;
+  transform: translateY(-2px);
+}
+
+.todo-item.completed {
+  opacity: 0.8;
+  background-color: #f0f9f0;
+}
+
+.todo-content {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  flex: 1;
+}
+
+.todo-checkbox {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+}
+
+.todo-text {
+  flex: 1;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.todo-item.completed .todo-text span:first-child {
+  text-decoration: line-through;
+  color: #95a5a6;
+}
+
+.todo-date {
+  font-size: 0.8rem;
+  color: #95a5a6;
+}
+
+.todo-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.edit-btn, .delete-btn {
+  padding: 6px 12px;
+  border: none;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.edit-btn {
+  background-color: #f0f0f0;
+  color: #333;
+}
+
+.edit-btn:hover {
+  background-color: #e0e0e0;
+}
+
+.delete-btn {
+  background-color: #ff6b6b;
+  color: white;
+}
+
+.delete-btn:hover {
+  background-color: #ff5252;
+}
+
+.stats {
+  margin-top: 25px;
+  padding-top: 20px;
+  border-top: 1px solid #eee;
+  color: #7f8c8d;
+}
+
+.completion-rate {
+  color: #42b983;
+  font-weight: bold;
+}
+
+.progress-container {
+  height: 10px;
+  background-color: #f0f0f0;
+  border-radius: 5px;
+  margin-top: 10px;
+  overflow: hidden;
+}
+
+.progress-bar {
+  height: 100%;
+  background-color: #42b983;
+  border-radius: 5px;
+  transition: width 0.5s ease;
+}
+
+footer {
+  margin-top: 30px;
+  padding-top: 20px;
+  border-top: 1px solid #eee;
+  text-align: center;
+  color: #95a5a6;
+  font-size: 0.9rem;
+}
+
+.footer-text {
+  margin: 5px 0;
+}
+
+/* 编辑模态框样式 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal {
+  background-color: white;
+  padding: 30px;
+  border-radius: 10px;
+  width: 90%;
+  max-width: 500px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+
+.modal h3 {
+  margin-top: 0;
+  margin-bottom: 20px;
+  color: #2c3e50;
+}
+
+.edit-input {
+  width: 100%;
+  padding: 12px 15px;
+  border: 2px solid #42b983;
+  border-radius: 6px;
+  font-size: 16px;
+  margin-bottom: 20px;
+}
+
+.modal-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+}
+
+.save-btn, .cancel-btn {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 6px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.save-btn {
+  background-color: #42b983;
+  color: white;
+}
+
+.save-btn:hover {
+  background-color: #3aa876;
+}
+
+.cancel-btn {
+  background-color: #f0f0f0;
+  color: #333;
+}
+
+.cancel-btn:hover {
+  background-color: #e0e0e0;
+}
+</style>

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@darkchest/wck",
+  "version": "0.0.1",
+  "description": "@darkchest/wck是一个通过包装 Vue 单文件组件 (SFC) 并将它转换为通用的web-component组件的解决方案。",
+  "private": false,
+  "main": "src/index.js",
+  "type": "module",
+  "exports": {
+    ".": "src/index.js",
+    "./component": "src/component.js"
+  },
+  "keywords": [
+    "vue2",
+    "web-component"
+  ],
+  "author": "destiny.michael",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@babel/core": "^7.28.5",
+    "@babel/generator": "^7.28.5",
+    "@babel/parser": "^7.28.5",
+    "@babel/traverse": "^7.28.5",
+    "@babel/types": "^7.28.5",
+    "@vue/compiler-sfc": "^3.5.26",
+    "sass": "^1.94.2"
+  },
+  "scripts": {
+    "dev": "node src/vite.js",
+    "serve": "npm run dev",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}