py-test-component 2.0.6 → 2.0.8

package/dist/vue.js.LICENSE.txt

@@ -0,0 +1,7 @@
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
+
+/**
+  * vue-custom-element v3.3.0
+  * (c) 2021 Karol Fabjańczuk
+  * @license MIT
+  */

package/package.json

@@ -1,59 +1,61 @@
-{
-  "name": "py-test-component",
-  "version": "2.0.6",
-  "description": "Vue2 + ElementUI 组件库，支持 React 使用",
-  "main": "dist/py-component.js",
-  "module": "dist/py-component.esm.js",
-  "exports": {
-    ".": {
-      "import": "./dist/py-component.esm.js",
-      "require": "./dist/py-component.js"
-    },
-    "./vue": {
-      "import": "./src/vue/index.js",
-      "require": "./src/vue/index.js"
-    },
-    "./react": {
-      "import": "./src/react/index.js",
-      "require": "./src/react/index.js"
-    }
-  },
-  "files": [
-    "dist",
-    "src",
-    "README.md"
-  ],
-  "scripts": {
-    "build": "webpack --mode production",
-    "dev": "webpack --mode development --watch"
-  },
-  "dependencies": {
-    "element-ui": "^2.15.0",
-    "vue": "^2.7.0",
-    "vue-custom-element": "^3.3.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.22.0",
-    "@babel/preset-env": "^7.22.0",
-    "@vue/web-component-wrapper": "^1.3.0",
-    "babel-loader": "^9.1.2",
-    "css-loader": "^6.8.1",
-    "style-loader": "^1.3.0",
-    "vue-loader": "^15.10.1",
-    "vue-template-compiler": "^2.7.14",
-    "webpack": "^5.88.0",
-    "webpack-cli": "^5.1.0"
-  },
-  "peerDependencies": {
-    "element-ui": "^2.15.0",
-    "vue": "^2.7.0"
-  },
-  "peerDependenciesMeta": {
-    "vue": {
-      "optional": true
-    },
-    "element-ui": {
-      "optional": true
-    }
-  }
-}
+{
+  "name": "py-test-component",
+  "version": "2.0.8",
+  "description": "Vue2 + ElementUI 组件库，支持 React 使用",
+  "main": "dist/py-component.js",
+  "module": "dist/py-component.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/py-component.esm.js",
+      "require": "./dist/py-component.js"
+    },
+    "./vue": {
+      "import": "./dist/vue.esm.js",
+      "require": "./dist/vue.js"
+    },
+    "./react": {
+      "import": "./dist/react.esm.js",
+      "require": "./dist/react.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "USAGE.md",
+    "DEVELOPER.md"
+  ],
+  "scripts": {
+    "build": "webpack --mode production",
+    "dev": "webpack --mode development --watch"
+  },
+  "dependencies": {
+    "element-ui": "^2.15.0",
+    "vue": "^2.7.0",
+    "vue-custom-element": "^3.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.0",
+    "@babel/preset-env": "^7.22.0",
+    "@babel/preset-react": "^7.28.5",
+    "@vue/web-component-wrapper": "^1.3.0",
+    "babel-loader": "^9.1.2",
+    "css-loader": "^6.8.1",
+    "style-loader": "^1.3.0",
+    "vue-loader": "^15.10.1",
+    "vue-template-compiler": "^2.7.14",
+    "webpack": "^5.88.0",
+    "webpack-cli": "^5.1.0"
+  },
+  "peerDependencies": {
+    "element-ui": "^2.15.0",
+    "vue": "^2.7.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    },
+    "element-ui": {
+      "optional": true
+    }
+  }
+}

package/src/components/PyTable.vue

@@ -1,43 +0,0 @@
-  <template>
-    <el-table
-      :data="tableData"
-      style="width: 100%">
-      <el-table-column
-        prop="date"
-        label="日期"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="name"
-        label="姓名"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label="地址">
-      </el-table-column>
-    </el-table>
-  </template>
-
-<script>
-export default {
-  name: 'PyTable',
-  props: {
-    propData: {
-      default: null
-    }
-  },
-  computed: {
-    tableData() {
-      // el-table 需要数组，如果不是数组则返回空数组
-      return Array.isArray(this.propData) ? this.propData : []
-    }
-  }
-};
-</script>
-
-<style scoped>
-.py-table-wrapper {
-  padding: 10px;
-}
-</style>

package/src/components/PyWeather.vue

@@ -1,109 +0,0 @@
-<template>
-  <div class="py-weather">
-    <div class="search-box">
-      <el-input
-        v-model="city"
-        placeholder="请输入城市名称"
-        @keyup.enter.native="handleSearch"
-        clearable
-      />
-      <el-button type="primary" @click="handleSearch" :loading="loading">
-        查询
-      </el-button>
-    </div>
-
-    <div v-if="weatherData" class="weather-info">
-      <h3>{{ weatherData.location.name }}</h3>
-      <div class="weather-detail">
-        <span class="temperature">{{ weatherData.now.temperature }}°C</span>
-        <span class="weather-text">{{ weatherData.now.text }}</span>
-      </div>
-    </div>
-
-    <div v-if="error" class="error-message">
-      {{ error }}
-    </div>
-  </div>
-</template>
-
-<script>
-import { queryWeather } from '../utils/api';
-
-export default {
-  name: 'PyWeather',
-  data() {
-    return {
-      city: '',
-      loading: false,
-      weatherData: null,
-      error: null
-    };
-  },
-  methods: {
-    async handleSearch() {
-      if (!this.city.trim()) {
-        this.$message?.warning?.('请输入城市名称') || alert('请输入城市名称');
-        return;
-      }
-
-      this.loading = true;
-      this.error = null;
-
-      try {
-        const response = await queryWeather(this.city.trim());
-        if (response.results && response.results[0]) {
-          this.weatherData = response.results[0];
-        } else {
-          this.error = '未找到该城市的天气信息';
-          this.weatherData = null;
-        }
-      } catch (err) {
-        this.error = '查询失败，请稍后重试';
-        this.weatherData = null;
-      } finally {
-        this.loading = false;
-      }
-    }
-  }
-};
-</script>
-
-<style scoped>
-.py-weather {
-  padding: 20px;
-  max-width: 400px;
-}
-.search-box {
-  display: flex;
-  gap: 10px;
-}
-.weather-info {
-  margin-top: 20px;
-  padding: 20px;
-  background: #f5f7fa;
-  border-radius: 8px;
-}
-.weather-info h3 {
-  margin: 0 0 15px 0;
-  color: #303133;
-}
-.weather-detail {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-}
-.temperature {
-  font-size: 36px;
-  font-weight: bold;
-  color: #409EFF;
-}
-.weather-text {
-  font-size: 18px;
-  color: #606266;
-}
-.error-message {
-  margin-top: 15px;
-  color: #f56c6c;
-  font-size: 14px;
-}
-</style>

package/src/index.js

@@ -1,38 +0,0 @@
-import Vue from 'vue';
-import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
-import vueCustomElement from 'vue-custom-element';
-
-import PyTable from './components/PyTable.vue';
-import PyWeather from './components/PyWeather.vue';
-import store from './store';
-
-Vue.use(ElementUI);
-Vue.use(vueCustomElement);
-
-// 使用 vue-custom-element 创建 Web Components（禁用 Shadow DOM）
-Vue.customElement('py-table', PyTable, {
-  shadow: false,
-  props: {
-    propData: {
-      default: null
-    }
-  }
-});
-
-Vue.customElement('py-weather', PyWeather, {
-  shadow: false
-});
-
-// 初始化 store（唯一暴露给外部的 store 方法）
-function initStore(config = {}) {
-  store.set(config);
-}
-
-// 导出
-export { PyTable, PyWeather, initStore };
-export default { initStore };
-
-if (typeof window !== 'undefined') {
-  window.PyComponent = { initStore };
-}

package/src/react/index.js

@@ -1,55 +0,0 @@
-import React, { useEffect, useRef, useState, forwardRef } from 'react';
-
-// 注入 ElementUI CSS（只执行一次）
-let cssInjected = false;
-function injectElementUICSS() {
-  if (cssInjected || typeof document === 'undefined') return;
-  cssInjected = true;
-  const link = document.createElement('link');
-  link.rel = 'stylesheet';
-  link.href = 'https://unpkg.com/element-ui/lib/theme-chalk/index.css';
-  document.head.appendChild(link);
-}
-
-// 加载组件库
-function usePyComponent() {
-  const [loaded, setLoaded] = useState(false);
-  useEffect(() => {
-    injectElementUICSS();
-    import('py-test-component').then(() => setLoaded(true));
-  }, []);
-  return loaded;
-}
-
-// 通用包装函数：动态创建 React 组件
-function wrapVueComponent(tagName, dataProp = null) {
-  return forwardRef(function WrappedComponent({ propData, loading, ...props }, ref) {
-    const elRef = useRef(null);
-    const loaded = usePyComponent();
-
-    useEffect(() => {
-      if (elRef.current && propData !== undefined && dataProp) {
-        elRef.current[dataProp] = propData;
-      }
-    }, [propData]);
-
-    if (!loaded && loading) {
-      return <div style={{ padding: '20px', textAlign: 'center' }}>{loading}</div>;
-    }
-
-    // 使用 createElement 避免 JSX 标签名大小写警告
-    return React.createElement(tagName, { ref: ref || elRef, ...props });
-  });
-}
-
-// 一键注册所有组件
-export const PyTable = wrapVueComponent('py-table', 'propData');
-export const PyWeather = wrapVueComponent('py-weather', 'propData');
-
-// 初始化 store（仅设置，不暴露 store 给外部）
-export function initStore(config) {
-  return import('py-test-component').then((m) => {
-    const PyComponent = m.default || m;
-    PyComponent?.initStore?.(config);
-  });
-}

package/src/store/index.js

@@ -1,75 +0,0 @@
-import Vue from 'vue';
-
-// 使用 Vue.observable 创建响应式全局状态
-const state = Vue.observable({
-  config: {}
-});
-
-// 订阅者列表（用于非 Vue 环境，如 React）
-const subscribers = new Set();
-
-function notifySubscribers(key, value) {
-  subscribers.forEach(fn => fn(key, value, state.config));
-}
-
-const store = {
-  /**
-   * 获取 store 中的值
-   * @param {string} key - 键名，支持点号路径如 'user.name'
-   * @returns {any} 值
-   */
-  get(key) {
-    if (!key) return state.config;
-    const keys = key.split('.');
-    let value = state.config;
-    for (const k of keys) {
-      if (value === undefined || value === null) return undefined;
-      value = value[k];
-    }
-    return value;
-  },
-
-  /**
-   * 设置 store 中的值
-   * @param {string} key - 键名
-   * @param {any} value - 值
-   */
-  set(key, value) {
-    if (typeof key === 'object') {
-      Object.assign(state.config, key);
-      notifySubscribers(null, state.config);
-    } else {
-      const keys = key.split('.');
-      let target = state.config;
-      for (let i = 0; i < keys.length - 1; i++) {
-        const k = keys[i];
-        if (!(k in target) || typeof target[k] !== 'object') {
-          target[k] = {};
-        }
-        target = target[k];
-      }
-      target[keys[keys.length - 1]] = value;
-      notifySubscribers(key, value);
-    }
-  },
-
-  /**
-   * 订阅 store 变化（供 React 等使用）
-   * @param {function} callback - (key, value, config) => void
-   * @returns {function} 取消订阅函数
-   */
-  subscribe(callback) {
-    subscribers.add(callback);
-    return () => subscribers.delete(callback);
-  },
-
-  /**
-   * 获取整个状态对象（供内部组件使用）
-   * @returns {object}
-   */
-  getState() {
-    return state;
-  }
-};
-
-export default store;

package/src/utils/api.js

@@ -1,35 +0,0 @@
-import { get, post } from './request';
-
-/**
- * 查询天气
- * @param {string} city - 城市名称
- * @returns {Promise<object>}
- */
-export function queryWeather(city) {
-  // 使用免费的天气 API（心知天气或 OpenWeatherMap 等）
-  // 这里使用一个示例 API，实际使用时可以替换为真实的天气 API
-  const apiKey = 'demo'; // 实际使用时替换为真实的 API Key
-  const url = `https://api.seniverse.com/v3/weather/now.json`;
-
-  // 如果没有真实 API，返回模拟数据
-  if (apiKey === 'demo') {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve({
-          results: [{
-            location: { name: city },
-            now: {
-              temperature: Math.floor(Math.random() * 30) + 5,
-              text: ['晴', '多云', '阴', '小雨', '大雨'][Math.floor(Math.random() * 5)]
-            }
-          }]
-        });
-      }, 500);
-    });
-  }
-
-  return get(url, {
-    key: apiKey,
-    location: city
-  });
-}

package/src/utils/request.js

@@ -1,68 +0,0 @@
-/**
- * 封装 fetch POST 请求
- * @param {string} url - 请求地址
- * @param {object} data - 请求数据
- * @param {object} options - 其他配置
- * @returns {Promise}
- */
-export function post(url, data = {}, options = {}) {
-  const defaultOptions = {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json'
-    },
-    ...options
-  };
-
-  // 如果 data 是 FormData，不设置 Content-Type
-  if (data instanceof FormData) {
-    delete defaultOptions.headers['Content-Type'];
-  } else {
-    defaultOptions.body = JSON.stringify(data);
-  }
-
-  return fetch(url, defaultOptions)
-    .then(response => {
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-      return response.json();
-    })
-    .catch(error => {
-      console.error('Request failed:', error);
-      throw error;
-    });
-}
-
-/**
- * 封装 fetch GET 请求
- * @param {string} url - 请求地址
- * @param {object} params - URL 参数
- * @param {object} options - 其他配置
- * @returns {Promise}
- */
-export function get(url, params = {}, options = {}) {
-  const queryString = Object.keys(params)
-    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
-    .join('&');
-
-  const fullUrl = queryString ? `${url}?${queryString}` : url;
-
-  return fetch(fullUrl, {
-    method: 'GET',
-    headers: {
-      'Content-Type': 'application/json'
-    },
-    ...options
-  })
-    .then(response => {
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-      return response.json();
-    })
-    .catch(error => {
-      console.error('Request failed:', error);
-      throw error;
-    });
-}

package/src/vue/index.js

@@ -1,12 +0,0 @@
-// Vue 项目专用入口 - 直接导出 Vue 组件
-import PyTable from '../components/PyTable.vue';
-import PyWeather from '../components/PyWeather.vue';
-import store from '../store';
-
-// 初始化 store（统一的方法）
-function initStore(config) {
-  store.set(config);
-}
-
-export { PyTable, PyWeather, initStore };
-export default { PyTable, PyWeather, initStore };