{"_id":"@admin-core/preferences-vue","_rev":"3-0164ac7f525c398c8d06bf64fc0ef184","name":"@admin-core/preferences-vue","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@admin-core/preferences-vue","version":"1.0.0","keywords":["admin","preferences","vue","vue3","composables"],"author":"","license":"MIT","_id":"@admin-core/preferences-vue@1.0.0","maintainers":[{"name":"jackbo_vip","email":"jackbovip@163.com"}],"dist":{"shasum":"1ceaf35ce8f1220d5ba2bc5f9bca1f06ab413452","tarball":"https://registry.npmjs.org/@admin-core/preferences-vue/-/preferences-vue-1.0.0.tgz","fileCount":121,"integrity":"sha512-81SHrkIvCR7l9oUKT0b2ajvTZ5Pm7N8EEFglXjdyYW4AA13IoedNf8n2rpduAjhC4Li5J292bUWpneM+O/PG+Q==","signatures":[{"sig":"MEYCIQDKBp8QEAfaZFeu94UkIDDPNS7GOziNpH06TObxuNemWAIhAJe0mtq/UqMLfby1j0dzritAqOfaPslsEE2UfZspzWEH","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14314063},"main":"./dist/index.cjs","type":"module","_from":"file:admin-core-preferences-vue-1.0.0.tgz","types":"./dist/index.d.ts","unpkg":"./dist/index.global.js","module":"./dist/index.js","browser":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs"}},"./styles":"./dist/preferences-vue.css","./style.css":"./dist/preferences-vue.css"},"scripts":{"dev":"vite build --watch","lint":"eslint -c ../../../internal/build-config/configs/eslint/preferences-vue.config.js src --max-warnings=0","test":"vitest","build":"vite build && vite build --config vite.cdn.config.ts --mode production && vite build --config vite.cdn.config.ts --mode development","test:run":"vitest run","typecheck":"vue-tsc --noEmit"},"_npmUser":{"name":"jackbo_vip","email":"jackbovip@163.com"},"jsdelivr":"./dist/index.global.js","_resolved":"/private/var/folders/3p/zv0xm6450s12v1tvvxvxwr_80000gn/T/f7b1b8ac4a1398d96d6184c3daa8503e/admin-core-preferences-vue-1.0.0.tgz","_integrity":"sha512-81SHrkIvCR7l9oUKT0b2ajvTZ5Pm7N8EEFglXjdyYW4AA13IoedNf8n2rpduAjhC4Li5J292bUWpneM+O/PG+Q==","repository":{"url":"","type":"git","directory":"packages/preferences/vue"},"_npmVersion":"11.6.2","description":"Vue 3 偏好设置集成，提供响应式状态和组件","directories":{},"sideEffects":false,"_nodeVersion":"24.13.0","dependencies":{"@admin-core/preferences":"1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.27","vite":"^7.3.1","eslint":"^9.39.2","vitest":"^4.0.17","vue-tsc":"^3.2.3","typescript":"^5.9.3","@types/node":"^25.0.9","vite-plugin-dts":"^4.5.4","@vitejs/plugin-vue":"^6.0.3","@admin-core/tsconfig":"1.0.0"},"peerDependencies":{"vue":">=3.3.0"},"bundleDependencies":["@admin-core/preferences"],"_npmOperationalInternal":{"tmp":"tmp/preferences-vue_1.0.0_1772271797360_0.5912173486015087","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@admin-core/preferences-vue","version":"1.0.1","keywords":["admin","preferences","vue","vue3","composables"],"author":"","license":"MIT","_id":"@admin-core/preferences-vue@1.0.1","maintainers":[{"name":"jackbo_vip","email":"jackbovip@163.com"}],"dist":{"shasum":"112ef0c07bd95445b29d59e515a2fbd2f1e7f28c","tarball":"https://registry.npmjs.org/@admin-core/preferences-vue/-/preferences-vue-1.0.1.tgz","fileCount":121,"integrity":"sha512-oljyrDhPI+58MEApKeIBICOBqnXLn7lETdm+5KflDE4TutFYgodZBc0J2L9PuHInTrkcJ9DN3suKO7ed04069Q==","signatures":[{"sig":"MEUCIQChVxts/Rkstu2Vk6Cst18tDAntvLCKpKcBwIxIJuSwKgIgNzPull8368DdCZXWFRk4Pzd1bzCETD9SMT7iCAHLy/0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14314063},"main":"./dist/index.cjs","type":"module","_from":"file:admin-core-preferences-vue-1.0.1.tgz","types":"./dist/index.d.ts","unpkg":"./dist/index.global.js","module":"./dist/index.js","browser":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs"}},"./styles":"./dist/preferences-vue.css","./style.css":"./dist/preferences-vue.css"},"scripts":{"dev":"vite build --watch","lint":"eslint -c ../../../internal/build-config/configs/eslint/preferences-vue.config.js src --max-warnings=0","test":"vitest","build":"vite build && vite build --config vite.cdn.config.ts --mode production && vite build --config vite.cdn.config.ts --mode development","test:run":"vitest run","typecheck":"vue-tsc --noEmit"},"_npmUser":{"name":"jackbo_vip","email":"jackbovip@163.com"},"jsdelivr":"./dist/index.global.js","_resolved":"/private/var/folders/3p/zv0xm6450s12v1tvvxvxwr_80000gn/T/1bdf6d8309d64836b83f494693434eda/admin-core-preferences-vue-1.0.1.tgz","_integrity":"sha512-oljyrDhPI+58MEApKeIBICOBqnXLn7lETdm+5KflDE4TutFYgodZBc0J2L9PuHInTrkcJ9DN3suKO7ed04069Q==","repository":{"url":"","type":"git","directory":"packages/preferences/vue"},"_npmVersion":"11.6.2","description":"Vue 3 偏好设置集成，提供响应式状态和组件","directories":{},"sideEffects":false,"_nodeVersion":"24.13.0","dependencies":{"@admin-core/preferences":"1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.27","vite":"^7.3.1","eslint":"^9.39.2","vitest":"^4.0.17","vue-tsc":"^3.2.3","typescript":"^5.9.3","@types/node":"^25.0.9","vite-plugin-dts":"^4.5.4","@vitejs/plugin-vue":"^6.0.3","@admin-core/tsconfig":"1.0.1"},"peerDependencies":{"vue":">=3.3.0"},"bundleDependencies":["@admin-core/preferences"],"_npmOperationalInternal":{"tmp":"tmp/preferences-vue_1.0.1_1772288454810_0.25340362653267445","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@admin-core/preferences-vue","version":"1.0.2","description":"Vue 3 偏好设置集成，提供响应式状态和组件","type":"module","sideEffects":false,"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","browser":"./dist/index.js","unpkg":"./dist/index.global.js","jsdelivr":"./dist/index.global.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs"}},"./styles":"./dist/preferences-vue.css","./style.css":"./dist/preferences-vue.css"},"dependencies":{"@admin-core/preferences":"1.0.2"},"devDependencies":{"@admin-core/tsconfig":"1.0.1","@types/node":"^25.0.9","@vitejs/plugin-vue":"^6.0.3","eslint":"^9.39.2","typescript":"^5.9.3","vite":"^7.3.1","vite-plugin-dts":"^4.5.4","vitest":"^4.0.17","vue":"^3.5.27","vue-tsc":"^3.2.3"},"peerDependencies":{"vue":">=3.3.0"},"keywords":["admin","preferences","vue","vue3","composables"],"author":"","license":"MIT","repository":{"type":"git","url":"","directory":"packages/preferences/vue"},"publishConfig":{"access":"public"},"scripts":{"build":"vite build && vite build --config vite.cdn.config.ts --mode production && vite build --config vite.cdn.config.ts --mode development","dev":"vite build --watch","test":"vitest","test:run":"vitest run","lint":"eslint -c ../../../internal/build-config/configs/eslint/preferences-vue.config.js src --max-warnings=0","typecheck":"vue-tsc --noEmit"},"_id":"@admin-core/preferences-vue@1.0.2","bundleDependencies":["@admin-core/preferences"],"_integrity":"sha512-uJspjuyaXTthfSaHB1eKi3vizgfI7v5OKod5X0I93VRTyXYLvUNPiSpSYuOr8CgNBepisE4/lQKIvHG+/Y9c8w==","_resolved":"/private/var/folders/3p/zv0xm6450s12v1tvvxvxwr_80000gn/T/0eb213636763af8479cf8a587a49b5e6/admin-core-preferences-vue-1.0.2.tgz","_from":"file:admin-core-preferences-vue-1.0.2.tgz","_nodeVersion":"24.13.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-uJspjuyaXTthfSaHB1eKi3vizgfI7v5OKod5X0I93VRTyXYLvUNPiSpSYuOr8CgNBepisE4/lQKIvHG+/Y9c8w==","shasum":"11caa7754452b3705d804c0b031e4322b03916ff","tarball":"https://registry.npmjs.org/@admin-core/preferences-vue/-/preferences-vue-1.0.2.tgz","fileCount":121,"unpackedSize":14314063,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDZMYFViKHDNm+3OLKuX3/X5cBjhU6sUxE4ZWfCZby5ewIgZeey1/qULHkea/Q6g0q+oXZlVunVA4rITbHCNCBcgD0="}]},"_npmUser":{"name":"jackbo_vip","email":"jackbovip@163.com"},"directories":{},"maintainers":[{"name":"jackbo_vip","email":"jackbovip@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/preferences-vue_1.0.2_1772361720108_0.7472394650776273"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-28T09:43:17.266Z","modified":"2026-03-01T10:42:00.600Z","1.0.0":"2026-02-28T09:43:17.727Z","1.0.1":"2026-02-28T14:20:55.238Z","1.0.2":"2026-03-01T10:42:00.486Z"},"license":"MIT","keywords":["admin","preferences","vue","vue3","composables"],"repository":{"type":"git","url":"","directory":"packages/preferences/vue"},"description":"Vue 3 偏好设置集成，提供响应式状态和组件","maintainers":[{"name":"jackbo_vip","email":"jackbovip@163.com"}],"readme":"# @admin-core/preferences-vue\n\n简体中文 | [English](./README.en.md)\n\n> Vue 3 偏好设置集成，提供 Composables 和组件。\n\n## 特性\n\n- **Vue 3 支持**: 基于 Vue 3 Composition API 构建\n- **Composables API**: 使用 Vue Composables 实现响应式状态管理\n- **开箱即用组件**: 预构建的抽屉、标签页和表单组件\n- **TypeScript**: 完整的类型定义，类型安全\n- **响应式优化**: 使用 shallowRef 实现高效的订阅管理\n\n## 对外导出\n\n- **初始化**：`initPreferences`、`destroyPreferences`、`getPreferencesManager`\n- **Provider / 组件**：`PreferencesProvider`、`PreferencesDrawer`、`PreferencesTrigger`、各类 Tab 与表单项\n- **组合式 API**：`usePreferences`、`usePreferencesContext`、`usePreferencesCategory`、`useLayout`、`useTheme`、`useDebouncedValue`\n- **再导出**：`@admin-core/preferences` 的类型、常量、语言包与图标\n\n## 导出索引（入口对齐）\n\n说明：\n- 入口文件：`src/index.ts`\n- 发布类型：`dist/index.d.ts`\n- 完整符号列表以 `src/index.ts`/`dist/index.d.ts` 为准\n\n入口分组：\n1. 初始化：`initPreferences`、`destroyPreferences`、`getPreferencesManager`\n2. Composables：`usePreferences`、`usePreferencesContext`、`usePreferencesCategory`、`useLayout`、`useTheme`、`useDebouncedValue`\n3. 组件：`PreferencesProvider`、`PreferencesDrawer`、`PreferencesTrigger`、`AppearanceTab`、`LayoutTab`、`ShortcutKeysTab`、`GeneralTab`、`PreferencesBlock`、`PreferencesSwitchItem`、`PreferencesSelectItem`、`PreferencesSliderItem`\n4. 图标组件：`Icon`、`AdminIcon`、`LayoutIcon`、`AdminLayoutIcon`\n5. 资源导出：`defaultLockScreenBg`\n6. Core 再导出：偏好设置类型、常量、语言包（来自 `@admin-core/preferences`）\n\n## 安装\n\n```bash\n# npm\nnpm install @admin-core/preferences-vue\n\n# pnpm\npnpm add @admin-core/preferences-vue\n\n# yarn\nyarn add @admin-core/preferences-vue\n```\n\n**对等依赖:**\n- `vue >= 3.3.0`\n\n\n### CDN（生产/开发）\n\n```html\n<!-- jsDelivr（推荐） -->\n<script src=\"https://cdn.jsdelivr.net/npm/@admin-core/preferences-vue/dist/index.global.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/@admin-core/preferences-vue/dist/index.global.dev.js\"></script>\n\n<!-- unpkg -->\n<script src=\"https://unpkg.com/@admin-core/preferences-vue/dist/index.global.js\"></script>\n<script src=\"https://unpkg.com/@admin-core/preferences-vue/dist/index.global.dev.js\"></script>\n```\n\n## 快速开始\n\n### 1. 初始化偏好设置\n\n```typescript\n// main.ts\nimport { createApp } from 'vue';\nimport { initPreferences } from '@admin-core/preferences-vue';\nimport '@admin-core/preferences/styles';\nimport App from './App.vue';\n\n// 应用启动时初始化一次\ninitPreferences({\n  namespace: 'my-app',\n  overrides: {\n    theme: { colorPrimary: 'oklch(0.6 0.2 250)' },\n    app: { locale: 'zh-CN' },\n  },\n});\n\ncreateApp(App).mount('#app');\n```\n\n### 2. 使用 PreferencesProvider（推荐）\n\n`PreferencesProvider` 组件自动集成锁屏、快捷键和偏好设置抽屉功能。\n\n```vue\n<!-- App.vue -->\n<script setup lang=\"ts\">\nimport { PreferencesProvider } from '@admin-core/preferences-vue';\n\nconst handleLogout = () => {\n  // 处理登出\n};\n\nconst handleSearch = () => {\n  // 处理全局搜索\n};\n</script>\n\n<template>\n  <PreferencesProvider @logout=\"handleLogout\" @search=\"handleSearch\">\n    <YourAppContent />\n  </PreferencesProvider>\n</template>\n```\n\n### 3. 在组件中使用 Composables\n\n```vue\n<script setup lang=\"ts\">\nimport { usePreferences, usePreferencesContext } from '@admin-core/preferences-vue';\n\n// 访问偏好设置状态\nconst { preferences, setPreferences, isDark, toggleTheme } = usePreferences();\n\n// 访问 Provider 上下文（锁屏、抽屉控制）\nconst { lock, togglePreferences, isPreferencesOpen } = usePreferencesContext();\n</script>\n\n<template>\n  <div>\n    <p>当前主题: {{ isDark ? '深色' : '浅色' }}</p>\n    <button @click=\"toggleTheme\">切换主题</button>\n    <button @click=\"togglePreferences\">打开设置</button>\n    <button @click=\"lock\">锁定屏幕</button>\n  </div>\n</template>\n```\n\n## 进阶用法\n\n### 使用独立 Composables\n\n```vue\n<script setup lang=\"ts\">\nimport { useTheme, useLayout } from '@admin-core/preferences-vue';\n\nconst { isDark, toggleTheme, setPrimaryColor } = useTheme();\nconst { isSidebarCollapsed, toggleSidebar, setLayout } = useLayout();\n</script>\n\n<template>\n  <div>\n    <button @click=\"toggleTheme\">\n      {{ isDark ? '🌙' : '☀️' }}\n    </button>\n    <button @click=\"() => setPrimaryColor('oklch(0.6 0.2 150)')\">\n      绿色主题\n    </button>\n    <button @click=\"toggleSidebar\">\n      {{ isSidebarCollapsed ? '展开' : '折叠' }}\n    </button>\n    <button @click=\"() => setLayout('header-nav')\">\n      使用顶部导航\n    </button>\n  </div>\n</template>\n```\n\n### 使用分类 Composable\n\n```vue\n<script setup lang=\"ts\">\nimport { usePreferencesCategory } from '@admin-core/preferences-vue';\n\nconst { value, setValue, reset } = usePreferencesCategory('tabbar');\n</script>\n\n<template>\n  <div>\n    <label>\n      <input\n        type=\"checkbox\"\n        :checked=\"value?.enable\"\n        @change=\"(e) => setValue({ enable: (e.target as HTMLInputElement).checked })\"\n      />\n      启用标签栏\n    </label>\n    <button @click=\"reset\">重置为默认</button>\n  </div>\n</template>\n```\n\n### 单独使用组件\n\n```vue\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport {\n  PreferencesDrawer,\n  PreferencesTrigger,\n} from '@admin-core/preferences-vue';\n\nconst open = ref(false);\n</script>\n\n<template>\n  <PreferencesTrigger @click=\"open = true\" />\n  \n  <PreferencesDrawer\n    v-model:open=\"open\"\n    default-tab=\"appearance\"\n  />\n</template>\n```\n\n## 组件\n\n### PreferencesProvider\n\n主要包装组件，提供上下文并集成各项功能。\n\n```vue\n<PreferencesProvider\n  @logout=\"handleLogout\"\n  @search=\"handleSearch\"\n  lock-screen-background=\"url\"\n  :enable-shortcuts=\"true\"\n  :enable-lock-screen=\"true\"\n>\n  <slot />\n</PreferencesProvider>\n```\n\n### PreferencesDrawer\n\n带有标签页导航的设置抽屉。\n\n```vue\n<PreferencesDrawer\n  v-model:open=\"open\"\n  default-tab=\"appearance\"\n  :tabs=\"['appearance', 'layout', 'general', 'shortcuts']\"\n/>\n```\n\n### 标签页组件\n\n可独立使用的各个标签页组件：\n\n- `AppearanceTab` - 主题、颜色、模式设置\n- `LayoutTab` - 布局类型、侧边栏、顶栏设置\n- `GeneralTab` - 语言、快捷键、水印设置\n- `ShortcutKeysTab` - 键盘快捷键配置\n\n### 表单组件\n\n用于自定义设置 UI 的构建块：\n\n- `PreferencesBlock` - 带标题的区块容器\n- `PreferencesSwitchItem` - 开关切换\n- `PreferencesSelectItem` - 下拉选择\n- `PreferencesSliderItem` - 范围滑块\n\n## API 参考\n\n完整的 API 参考请参见 [API 文档](./API.md)。\n\n## 相关链接\n\n- [@admin-core/preferences](../core/README.md) - 核心包\n- [@admin-core/preferences-react](../react/README.md) - React 集成\n\n## 许可证\n\nMIT\n","readmeFilename":"README.md"}