{"_id":"@coolita-os/vue-tv-components","_rev":"4-61d5d65003b1fb192a8b7436fc675f33","name":"@coolita-os/vue-tv-components","dist-tags":{"latest":"0.0.4"},"versions":{"0.0.1":{"name":"@coolita-os/vue-tv-components","version":"0.0.1","keywords":["vue","tv","components","vue-tv","tv-components"],"author":"","license":"MIT","_id":"@coolita-os/vue-tv-components@0.0.1","maintainers":[{"name":"coolita-os-developer","email":"1121898804@qq.com"},{"name":"xiao_yao_pai","email":"806620445@qq.com"}],"dist":{"shasum":"c1ac28ef2a0d25cee3952ce0d26ca6c83c89326e","tarball":"https://registry.npmjs.org/@coolita-os/vue-tv-components/-/vue-tv-components-0.0.1.tgz","fileCount":7,"integrity":"sha512-H0l8sSJMaY8bk0MQqGwtQjkHdR4Avc2r8BgIGntUtqw17Mbx56+aFTIhuBjR6YRSRu0ETgesI68UNKfSUGJPWA==","signatures":[{"sig":"MEQCIAEH73QuY6f5NtG55adXO2iGFSxd7B0MA5NSkJBJ1I+GAiA7X3ECS66aqhVVih+WfhRcaEkYBOfD0410oxksKQPHbA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":268418},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.es.js","gitHead":"1e09e741a1125c07b8e0b3f793a182d1ed392672","scripts":{"dev":"vite","demo":"vite --config vite.demo.config.ts","test":"vitest run","build":"vite build","prepare":"npm run build"},"_npmUser":{"name":"coolita-os-developer","email":"1121898804@qq.com"},"_npmVersion":"10.8.2","description":"Vue components for TV applications","directories":{},"_nodeVersion":"22.6.0","dependencies":{"vue-router":"^4.6.4"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.98.0","vite":"^4.0.0","vitest":"^0.30.0","vue-tsc":"^1.0.0","typescript":"^5.0.0","@vue/test-utils":"^2.4.6","@vitejs/plugin-vue":"^4.0.0"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-tv-components_0.0.1_1775808149473_0.7689226195938821","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@coolita-os/vue-tv-components","version":"0.0.2","keywords":["vue","tv","components","vue-tv","tv-components"],"author":"","license":"MIT","_id":"@coolita-os/vue-tv-components@0.0.2","maintainers":[{"name":"coolita-os-developer","email":"1121898804@qq.com"},{"name":"xiao_yao_pai","email":"806620445@qq.com"}],"dist":{"shasum":"9bbbcfd08069718a9471ad075cad9efa111c4083","tarball":"https://registry.npmjs.org/@coolita-os/vue-tv-components/-/vue-tv-components-0.0.2.tgz","fileCount":7,"integrity":"sha512-4CLdzwxzgeg4agH+USjFH8GD3V4xCqAtaMfe+d+iqUTot8XVV1Cj6FGvFOYoIWE028FN1oEkKCLNh4wJZfdpuw==","signatures":[{"sig":"MEQCICsM8xUMf3hRx5tS3C4MRY5JrzKQ4Z/O4HcQS9SOUYxdAiAca3DEk2yiTi0vX+kWrALjPLrFD9lhAupLV9ChC6+QGA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":268319},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.es.js","gitHead":"d490e70065e8750bf581b855df90bed7ac19151a","scripts":{"dev":"vite","demo":"vite --config vite.demo.config.ts","test":"vitest run","build":"vite build","prepare":"npm run build"},"_npmUser":{"name":"coolita-os-developer","email":"1121898804@qq.com"},"_npmVersion":"10.8.2","description":"Vue components for TV applications","directories":{},"_nodeVersion":"22.6.0","dependencies":{"vue-router":"^4.6.4"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.98.0","vite":"^4.0.0","vitest":"^0.30.0","vue-tsc":"^1.0.0","typescript":"^5.0.0","@vue/test-utils":"^2.4.6","@vitejs/plugin-vue":"^4.0.0","@coolita-os/vue-tv-components":"^0.0.2"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-tv-components_0.0.2_1775816959759_0.0851580072454492","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@coolita-os/vue-tv-components","version":"0.0.3","keywords":["vue","tv","components","vue-tv","tv-components"],"author":"","license":"MIT","_id":"@coolita-os/vue-tv-components@0.0.3","maintainers":[{"name":"coolita-os-developer","email":"1121898804@qq.com"},{"name":"xiao_yao_pai","email":"806620445@qq.com"}],"dist":{"shasum":"342ed275cdaaa1c1677c397a148497826c227e93","tarball":"https://registry.npmjs.org/@coolita-os/vue-tv-components/-/vue-tv-components-0.0.3.tgz","fileCount":7,"integrity":"sha512-ljAxR7T+dB+CwTXfCmdhol+fBiqGZF3hQavzx5NlOL/QMggVJ7t1Fslc4FvTwDnv2yjCaML25HSdKOu9f4rQWg==","signatures":[{"sig":"MEUCIE79mSVHqG275gq73A9t72lXTVUGECUN7fByMrWlZLSYAiEAvLZyzZjO0TRFi0fAyxMqA0XSl0flJmlISeqGb6yyuRI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":268382},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.es.js","gitHead":"52df8c76e9de4e4e52f444a301acb3c1589b2381","scripts":{"dev":"vite","demo":"vite --config vite.demo.config.ts","test":"vitest run","build":"vite build","prepare":"npm run build"},"_npmUser":{"name":"coolita-os-developer","email":"1121898804@qq.com"},"_npmVersion":"10.8.2","description":"Vue components for TV applications","directories":{},"_nodeVersion":"22.6.0","dependencies":{"vue-router":"^4.6.4"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.98.0","vite":"^4.0.0","vitest":"^0.30.0","vue-tsc":"^1.0.0","typescript":"^5.0.0","@vue/test-utils":"^2.4.6","@vitejs/plugin-vue":"^4.0.0","@coolita-os/vue-tv-components":"^0.0.3"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-tv-components_0.0.3_1776050662779_0.0862888176927803","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@coolita-os/vue-tv-components","version":"0.0.4","description":"Vue components for TV applications","main":"dist/index.js","module":"dist/index.es.js","types":"dist/index.d.ts","scripts":{"build":"vite build","test":"vitest run","dev":"vite","demo":"vite --config vite.demo.config.ts","prepare":"npm run build"},"keywords":["vue","tv","components","vue-tv","tv-components"],"author":"","license":"MIT","peerDependencies":{"vue":"^3.0.0"},"devDependencies":{"@vitejs/plugin-vue":"^4.0.0","@vue/test-utils":"^2.4.6","sass":"^1.98.0","typescript":"^5.0.0","vite":"^4.0.0","vitest":"^0.30.0","vue-tsc":"^1.0.0","@coolita-os/vue-tv-components":"^0.0.4"},"dependencies":{"vue-router":"^4.6.4"},"_id":"@coolita-os/vue-tv-components@0.0.4","gitHead":"ada0f79973d61f9f43ed61957c10d66180dcba65","_nodeVersion":"22.6.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-M5+CVz4wL+tL0TCV6f3eV7fRz8P/oGTt9rg9t894euZxqCvcmNRVBnqZJrz3UkeTfcyP9s/pzYnBTsHmTKMhQA==","shasum":"392f0bd7101a980392c8e7140aa1465b3a37c44f","tarball":"https://registry.npmjs.org/@coolita-os/vue-tv-components/-/vue-tv-components-0.0.4.tgz","fileCount":7,"unpackedSize":278395,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDIFlGPIOQE82+MzULotsvFYMQkvU/SHXSTeO2ybTZVlAIhANcrrPLVrPnqYY7m/FBM6O054jDXfZAXpDRU7VsaXmeQ"}]},"_npmUser":{"name":"coolita-os-developer","email":"1121898804@qq.com"},"directories":{},"maintainers":[{"name":"coolita-os-developer","email":"1121898804@qq.com"},{"name":"xiao_yao_pai","email":"806620445@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-tv-components_0.0.4_1776060942227_0.886752798601993"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-10T08:02:29.372Z","modified":"2026-04-13T06:15:42.537Z","0.0.1":"2026-04-10T08:02:29.609Z","0.0.2":"2026-04-10T10:29:19.912Z","0.0.3":"2026-04-13T03:24:22.920Z","0.0.4":"2026-04-13T06:15:42.400Z"},"license":"MIT","keywords":["vue","tv","components","vue-tv","tv-components"],"description":"Vue components for TV applications","maintainers":[{"name":"coolita-os-developer","email":"1121898804@qq.com"},{"name":"xiao_yao_pai","email":"806620445@qq.com"}],"readme":"# vue-tv-components\n\nVue TV 组件库，提供电视应用常用的 UI 组件，专为电视端操作和显示优化。\n\n## 特性\n\n- 🚀 **电视端优化** - 专为电视端操作和显示优化\n- 📦 **组件丰富** - 提供多种常用电视端 UI 组件\n- 🔧 **TypeScript 支持** - 提供完整的类型定义\n- 🎯 **易于集成** - 支持全局注册和按需导入\n- 🛠️ **自定义主题** - 支持主题定制\n- 🌍 **多语言支持** - 内置多语言键盘\n\n## 安装\n\n### 使用 npm 安装\n\n```bash\nnpm install vue-tv-components\n```\n\n### 使用 yarn 安装\n\n```bash\nyarn add vue-tv-components\n```\n\n## 快速开始\n\n### 全局注册\n\n```javascript\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport VueTvComponents from 'vue-tv-components'\n\nconst app = createApp(App)\napp.use(VueTvComponents)\napp.mount('#app')\n```\n\n### 按需导入\n\n```javascript\nimport { SkyDialog, SkyConfirm, SkyToast, SkyLoading, SkyKeyboard } from 'vue-tv-components'\n\n// 注册组件\nexport default {\n  components: {\n    SkyDialog,\n    SkyConfirm,\n    SkyToast,\n    SkyLoading,\n    SkyKeyboard\n  }\n}\n```\n\n## 组件文档\n\n### SkyKeyboard\n\n虚拟键盘组件，支持多语言输入。\n\n**属性：**\n\n| 属性 | 类型 | 描述 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | string | 绑定的输入值 | '' |\n| lang | string | 语言类型，如 'english', 'chinese' | 'english' |\n| type | string | 键盘类型，可选值：'letters', 'numbers', 'punctuations' | 'letters' |\n| maxLength | number | 最大输入长度 | Infinity |\n| placeholder | string | 占位符 | '' |\n| disabled | boolean | 是否禁用 | false |\n\n**事件：**\n\n| 事件 | 参数 | 描述 |\n| --- | --- | --- |\n| input | value | 输入值变化时触发 |\n| confirm | value | 确认输入时触发 |\n| cancel | - | 取消输入时触发 |\n\n**使用示例：**\n\n```vue\n<template>\n  <SkyKeyboard\n    v-model=\"inputValue\"\n    lang=\"chinese\"\n    type=\"letters\"\n    :maxLength=\"20\"\n    placeholder=\"请输入内容\"\n    @confirm=\"handleConfirm\"\n    @cancel=\"handleCancel\"\n  />\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport { SkyKeyboard } from 'vue-tv-components'\n\nconst inputValue = ref('')\n\nconst handleConfirm = (value) => {\n  console.log('确认输入:', value)\n}\n\nconst handleCancel = () => {\n  console.log('取消输入')\n}\n</script>\n```\n\n### SkyDialog\n\n对话框组件。\n\n**属性：**\n\n| 属性 | 类型 | 描述 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | boolean | 控制对话框显示/隐藏 | false |\n| title | string | 对话框标题 | '' |\n| width | string | 对话框宽度 | '500px' |\n| height | string | 对话框高度 | '300px' |\n| closeOnClickOutside | boolean | 点击外部是否关闭 | true |\n\n**插槽：**\n\n| 插槽 | 描述 |\n| --- | --- |\n| default | 对话框内容 |\n| footer | 对话框底部按钮区域 |\n\n**使用示例：**\n\n```vue\n<template>\n  <SkyDialog\n    v-model=\"dialogVisible\"\n    title=\"提示\"\n    width=\"400px\"\n    height=\"200px\"\n  >\n    <div>这是对话框内容</div>\n    <template #footer>\n      <button @click=\"dialogVisible = false\">取消</button>\n      <button @click=\"dialogVisible = false\">确定</button>\n    </template>\n  </SkyDialog>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport { SkyDialog } from 'vue-tv-components'\n\nconst dialogVisible = ref(false)\n</script>\n```\n\n### SkyConfirm\n\n确认对话框组件。\n\n**属性：**\n\n| 属性 | 类型 | 描述 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | boolean | 控制对话框显示/隐藏 | false |\n| title | string | 对话框标题 | '确认' |\n| message | string | 确认消息 | '' |\n| confirmText | string | 确认按钮文本 | '确定' |\n| cancelText | string | 取消按钮文本 | '取消' |\n\n**事件：**\n\n| 事件 | 参数 | 描述 |\n| --- | --- | --- |\n| confirm | - | 点击确认按钮时触发 |\n| cancel | - | 点击取消按钮时触发 |\n\n**使用示例：**\n\n```vue\n<template>\n  <SkyConfirm\n    v-model=\"confirmVisible\"\n    title=\"删除确认\"\n    message=\"确定要删除此项目吗？\"\n    confirmText=\"删除\"\n    cancelText=\"取消\"\n    @confirm=\"handleConfirm\"\n    @cancel=\"handleCancel\"\n  />\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport { SkyConfirm } from 'vue-tv-components'\n\nconst confirmVisible = ref(false)\n\nconst handleConfirm = () => {\n  console.log('确认删除')\n  confirmVisible.value = false\n}\n\nconst handleCancel = () => {\n  console.log('取消删除')\n  confirmVisible.value = false\n}\n</script>\n```\n\n### SkyLoading\n\n加载动画组件。\n\n**属性：**\n\n| 属性 | 类型 | 描述 | 默认值 |\n| --- | --- | --- | --- |\n| v-model | boolean | 控制加载动画显示/隐藏 | false |\n| text | string | 加载提示文本 | '加载中...' |\n| fullscreen | boolean | 是否全屏显示 | true |\n| background | string | 背景颜色 | 'rgba(0, 0, 0, 0.5)' |\n\n**使用示例：**\n\n```vue\n<template>\n  <SkyLoading\n    v-model=\"loadingVisible\"\n    text=\"加载中，请稍候...\"\n    :fullscreen=\"true\"\n  />\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport { SkyLoading } from 'vue-tv-components'\n\nconst loadingVisible = ref(true)\n\n// 模拟加载完成\nsetTimeout(() => {\n  loadingVisible.value = false\n}, 2000)\n</script>\n```\n\n### SkyToast\n\n提示框组件。\n\n**方法：**\n\n| 方法 | 参数 | 描述 |\n| --- | --- | --- |\n| show | options | 显示提示框 |\n| success | message, duration | 显示成功提示 |\n| error | message, duration | 显示错误提示 |\n| warning | message, duration | 显示警告提示 |\n| info | message, duration | 显示信息提示 |\n\n**options 参数：**\n\n| 参数 | 类型 | 描述 | 默认值 |\n| --- | --- | --- | --- |\n| message | string | 提示消息 | '' |\n| type | string | 提示类型，可选值：'success', 'error', 'warning', 'info' | 'info' |\n| duration | number | 显示时长（毫秒） | 3000 |\n| position | string | 显示位置，可选值：'top', 'bottom', 'center' | 'top' |\n\n**使用示例：**\n\n```vue\n<template>\n  <div>\n    <button @click=\"showSuccess\">成功提示</button>\n    <button @click=\"showError\">错误提示</button>\n    <button @click=\"showWarning\">警告提示</button>\n    <button @click=\"showInfo\">信息提示</button>\n  </div>\n</template>\n\n<script setup>\nimport { SkyToast } from 'vue-tv-components'\n\nconst showSuccess = () => {\n  SkyToast.success('操作成功')\n}\n\nconst showError = () => {\n  SkyToast.error('操作失败')\n}\n\nconst showWarning = () => {\n  SkyToast.warning('警告信息')\n}\n\nconst showInfo = () => {\n  SkyToast.info('提示信息')\n}\n</script>\n```\n\n### Ellipsis\n\n文本省略组件。\n\n**属性：**\n\n| 属性 | 类型 | 描述 | 默认值 |\n| --- | --- | --- | --- |\n| text | string | 要显示的文本 | '' |\n| line | number | 显示的行数 | 1 |\n| tooltip | boolean | 是否显示 tooltip | true |\n\n**使用示例：**\n\n```vue\n<template>\n  <Ellipsis\n    text=\"这是一段很长的文本，当文本长度超过指定行数时，会自动显示省略号\"\n    :line=\"2\"\n    :tooltip=\"true\"\n  />\n</template>\n\n<script setup>\nimport { Ellipsis } from 'vue-tv-components'\n</script>\n```\n\n### SkyText\n\n文本组件，支持电视端文本优化。\n\n**属性：**\n\n| 属性 | 类型 | 描述 | 默认值 |\n| --- | --- | --- | --- |\n| value | string | 文本内容 | '' |\n| size | string | 文本大小 | 'medium' |\n| color | string | 文本颜色 | '#333' |\n| bold | boolean | 是否加粗 | false |\n| align | string | 文本对齐方式 | 'left' |\n\n**使用示例：**\n\n```vue\n<template>\n  <SkyText\n    value=\"Hello, World!\"\n    size=\"large\"\n    color=\"#ff6600\"\n    :bold=\"true\"\n    align=\"center\"\n  />\n</template>\n\n<script setup>\nimport { SkyText } from 'vue-tv-components'\n</script>\n```\n\n### Loading\n\n加载组件，包含 LiveLoad 和 Spinner 两种样式。\n\n**属性：**\n\n| 属性 | 类型 | 描述 | 默认值 |\n| --- | --- | --- | --- |\n| type | string | 加载样式，可选值：'live', 'spinner' | 'spinner' |\n| size | string | 加载动画大小 | 'medium' |\n| color | string | 加载动画颜色 | '#ff6600' |\n\n**使用示例：**\n\n```vue\n<template>\n  <div>\n    <Loading type=\"live\" size=\"large\" color=\"#ff6600\" />\n    <Loading type=\"spinner\" size=\"medium\" color=\"#333\" />\n  </div>\n</template>\n\n<script setup>\nimport { Loading } from 'vue-tv-components'\n</script>\n```\n\n## 主题定制\n\n### 全局主题配置\n\n```javascript\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport VueTvComponents from 'vue-tv-components'\n\nconst app = createApp(App)\napp.use(VueTvComponents, {\n  theme: {\n    primaryColor: '#ff6600',\n    secondaryColor: '#333',\n    backgroundColor: '#fff',\n    textColor: '#333',\n    borderColor: '#e0e0e0'\n  }\n})\napp.mount('#app')\n```\n\n### 局部主题配置\n\n```vue\n<template>\n  <div class=\"custom-theme\">\n    <SkyButton>自定义主题按钮</SkyButton>\n  </div>\n</template>\n\n<style scoped>\n.custom-theme {\n  --primary-color: #ff6600;\n  --secondary-color: #333;\n  --background-color: #fff;\n  --text-color: #333;\n  --border-color: #e0e0e0;\n}\n</style>\n```\n\n## 开发\n\n### 构建项目\n\n```bash\n# 安装依赖\nnpm install\n\n# 构建项目\nnpm run build\n\n# 启动 demo 开发服务器\nnpm run dev:demo\n```\n\n### 运行测试\n\n```bash\n# 运行测试\nnpm test\n\n# 运行 lint 检查\nnpm run lint\n```\n\n## 项目结构\n\n```\ncomponents/          # 组件目录\n├── Loading/        # 加载组件\n├── SkyConfirm/     # 确认对话框组件\n├── SkyDialog/      # 对话框组件\n├── SkyKeyboard/    # 虚拟键盘组件\n├── SkyLoading/     # 加载动画组件\n├── SkyToast/       # 提示框组件\n├── assets/         # 资源文件\n├── mixins/         # 混入\n├── Ellipsis.vue    # 文本省略组件\n├── SkyText.vue     # 文本组件\n└── index.ts        # 组件导出\n\nsrc/                # 源码目录\n├── router/         # 路由\n├── utils/          # 工具函数\n└── views/          # 示例页面\n```\n\n## 许可证\n\nApache-2.0 License\n\n## 贡献\n\n欢迎提交 Issue 和 Pull Request 来改进这个项目。\n\n## 支持\n\n如果您在使用过程中遇到问题，请：\n\n1. 查看示例代码\n2. 检查浏览器控制台错误信息\n3. 提交 Issue 并提供复现步骤","readmeFilename":"README.md"}