{"_id":"@baihuiru/yjob-web-components","name":"@baihuiru/yjob-web-components","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@baihuiru/yjob-web-components","version":"1.0.0","description":"Enterprise-grade Web Components converted from React components - DebounceSelect and more","main":"index.js","module":"index.js","types":"index.d.ts","keywords":["web-components","react","antd","debounce-select","cross-framework","ui-components","enterprise"],"author":{"name":"baihuiru"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/baihuiru/yjob-web-components.git"},"homepage":"https://github.com/baihuiru/yjob-web-components#readme","bugs":{"url":"https://github.com/baihuiru/yjob-web-components/issues"},"scripts":{"serve":"serve .","demo":"serve . --port 3000"},"dependencies":{"@baihuiru/trans-components":"^1.0.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","antd":">=4.0.0"},"engines":{"node":">=14.0.0","npm":">=6.0.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"browserslist":["> 1%","last 2 versions","not dead"],"_id":"@baihuiru/yjob-web-components@1.0.0","gitHead":"6718413b8f064e53978104f5fb86df7d0d3270d0","_nodeVersion":"18.20.8","_npmVersion":"10.8.2","dist":{"integrity":"sha512-+KC1G8TMxjuOTfwhyq9G7Zx8459q37jtW9Qi4eveijb9N4iBGZkC+GisJi46Y1wtbZhcYWH/EqzgRhiKJF1rpw==","shasum":"7e6c2f6752702b7e80231c916fa3a03f47add8c8","tarball":"https://registry.npmjs.org/@baihuiru/yjob-web-components/-/yjob-web-components-1.0.0.tgz","fileCount":6,"unpackedSize":15264,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICWq9HSCpIqhPjJxA4hgvJZkFzJOHTN7LoC7FOxhf5S2AiEAlFkGFiPNszLbynvn7WD0vBhCfXRDkd50o+q+KFeQ2BY="}]},"_npmUser":{"name":"baihuiru","email":"bhremail@163.com"},"directories":{},"maintainers":[{"name":"baihuiru","email":"bhremail@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/yjob-web-components_1.0.0_1756380325168_0.9255141653811048"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-28T11:25:25.069Z","1.0.0":"2025-08-28T11:25:25.347Z","modified":"2025-08-28T11:25:25.633Z"},"maintainers":[{"name":"baihuiru","email":"bhremail@163.com"}],"description":"Enterprise-grade Web Components converted from React components - DebounceSelect and more","homepage":"https://github.com/baihuiru/yjob-web-components#readme","keywords":["web-components","react","antd","debounce-select","cross-framework","ui-components","enterprise"],"repository":{"type":"git","url":"git+https://github.com/baihuiru/yjob-web-components.git"},"author":{"name":"baihuiru"},"bugs":{"url":"https://github.com/baihuiru/yjob-web-components/issues"},"license":"MIT","readme":"# @baihuiru/yjob-web-components\n\n企业级 Web Components 组件库，基于 React 组件转换而来，支持跨框架使用。\n\n## 📦 安装\n\n```bash\n# 使用 npm\nnpm install @baihuiru/yjob-web-components\n\n# 使用 pnpm\npnpm add @baihuiru/yjob-web-components\n\n# 使用 yarn\nyarn add @baihuiru/yjob-web-components\n```\n\n## 🚀 快速开始\n\n### 在 HTML 中使用\n\n```html\n<!DOCTYPE html>\n<html>\n<head>\n    <script type=\"module\">\n        import '@baihuiru/yjob-web-components';\n    </script>\n</head>\n<body>\n    <debounce-select \n        placeholder=\"请选择用户...\"\n        debounce-timeout=\"300\"\n        allow-clear=\"true\">\n    </debounce-select>\n    \n    <script>\n        // 设置数据获取函数\n        const select = document.querySelector('debounce-select');\n        select.fetchOptions = async (search) => {\n            const response = await fetch(`/api/users?search=${search}`);\n            const users = await response.json();\n            return users.map(user => ({\n                label: user.name,\n                value: user.id,\n                key: user.id\n            }));\n        };\n        \n        // 监听选择变化\n        select.addEventListener('change', (e) => {\n            console.log('Selected:', e.detail);\n        });\n    </script>\n</body>\n</html>\n```\n\n### 在 React 中使用\n\n```tsx\nimport React, { useRef, useEffect } from 'react';\nimport '@baihuiru/yjob-web-components';\n\nfunction MyComponent() {\n  const selectRef = useRef<any>(null);\n  \n  useEffect(() => {\n    if (selectRef.current) {\n      selectRef.current.fetchOptions = async (search: string) => {\n        // 你的数据获取逻辑\n        return mockUsers.filter(user => \n          user.name.toLowerCase().includes(search.toLowerCase())\n        ).map(user => ({\n          label: user.name,\n          value: user.id,\n          key: user.id\n        }));\n      };\n    }\n  }, []);\n  \n  return (\n    <debounce-select\n      ref={selectRef}\n      placeholder=\"请选择...\"\n      onChange={(e: any) => console.log(e.detail)}\n    />\n  );\n}\n```\n\n### 在 Vue 中使用\n\n```vue\n<template>\n  <debounce-select\n    ref=\"selectRef\"\n    placeholder=\"请选择...\"\n    @change=\"handleChange\"\n  />\n</template>\n\n<script setup>\nimport { ref, onMounted } from 'vue';\nimport '@baihuiru/yjob-web-components';\n\nconst selectRef = ref(null);\n\nconst handleChange = (e) => {\n  console.log('Selected:', e.detail);\n};\n\nonMounted(() => {\n  if (selectRef.value) {\n    selectRef.value.fetchOptions = async (search) => {\n      // 你的数据获取逻辑\n      return [];\n    };\n  }\n});\n</script>\n```\n\n### 在 Angular 中使用\n\n```typescript\n// app.module.ts\nimport { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\n@NgModule({\n  schemas: [CUSTOM_ELEMENTS_SCHEMA]\n})\nexport class AppModule {}\n```\n\n```typescript\n// app.component.ts\nimport { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';\nimport '@baihuiru/yjob-web-components';\n\n@Component({\n  selector: 'app-root',\n  template: '<debounce-select #selectElement placeholder=\"请选择...\"></debounce-select>'\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild('selectElement') selectElement!: ElementRef;\n\n  ngAfterViewInit() {\n    this.selectElement.nativeElement.fetchOptions = async (search: string) => {\n      // 你的数据获取逻辑\n      return [];\n    };\n  }\n}\n```\n\n## 📚 组件列表\n\n### DebounceSelect\n\n防抖选择器组件，支持远程搜索和本地过滤。\n\n#### 属性\n\n| 属性 | 类型 | 默认值 | 描述 |\n|------|------|--------|------|\n| `placeholder` | string | 'Please select...' | 占位符文本 |\n| `debounce-timeout` | number | 200 | 防抖延迟时间(ms) |\n| `search-origin` | boolean | false | 是否在服务端搜索 |\n| `auto-fetch` | boolean | false | 是否自动获取数据 |\n| `allow-clear` | boolean | true | 是否显示清除按钮 |\n| `size` | 'small' \\| 'middle' \\| 'large' | 'middle' | 组件大小 |\n| `disabled` | boolean | false | 是否禁用 |\n| `loading` | boolean | false | 是否加载中 |\n| `mode` | 'multiple' \\| 'tags' | undefined | 选择模式 |\n\n#### 事件\n\n| 事件 | 详情类型 | 描述 |\n|------|----------|------|\n| `change` | `{ value, option }` | 选择变化时触发 |\n| `select` | `{ value, option }` | 选择选项时触发 |\n| `deselect` | `{ value, option }` | 取消选择时触发 |\n| `search` | `{ value }` | 搜索时触发 |\n| `focus` | `{ event }` | 获得焦点时触发 |\n| `blur` | `{ event }` | 失去焦点时触发 |\n| `clear` | `{}` | 清除时触发 |\n| `dropdown-visible-change` | `{ open }` | 下拉框显示状态变化 |\n\n#### 方法\n\n```javascript\n// 设置数据获取函数（必需）\nselectElement.fetchOptions = async (search) => {\n  // 返回格式: [{ label, value, key }]\n  return [];\n};\n```\n\n## 🔧 开发\n\n### 本地预览\n\n```bash\ncd node_modules/@baihuiru/yjob-web-components\nnpm run demo\n```\n\n然后访问 `http://localhost:3000/example.html` 查看示例。\n\n## 📄 许可证\n\nMIT License\n\n## 🤝 贡献\n\n欢迎提交 Issue 和 Pull Request！\n\n## 📮 联系\n\n- 作者: baihuiru\n- 仓库: https://github.com/baihuiru/yjob-web-components\n\n---\n\n## 更新日志\n\n### v1.0.0\n\n- ✨ 首次发布\n- 🎯 支持 DebounceSelect 组件\n- 🚀 跨框架兼容 (React/Vue/Angular/原生JS)\n- 📦 完整的 TypeScript 类型支持\n","readmeFilename":"README.md","_rev":"1-bafbd930fb92333ca0b75303962afcec"}