{"_id":"@composy/color-picker-vue","name":"@composy/color-picker-vue","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@composy/color-picker-vue","version":"0.0.1","description":"Vue components for @composy/color-picker-core","keywords":["color-picker","vue","vue3","vue2","component"],"author":{"name":"LDesign Team"},"license":"MIT","type":"module","sideEffects":["*.vue","*.tsx","*.jsx","dist/*","es/**/style/**","esm/**/style/**"],"exports":{".":{"types":"./es/index.d.ts","import":"./es/index.js","require":"./lib/index.cjs","default":"./es/index.js"},"./components":{"types":"./es/components/index.d.ts","import":"./es/components/index.js","require":"./lib/components/index.cjs","default":"./es/components/index.js"},"./components/*":{"types":"./es/components/*.d.ts","import":"./es/components/*.js","require":"./lib/components/*.cjs","default":"./es/components/*.js"},"./composables":{"types":"./es/composables/index.d.ts","import":"./es/composables/index.js","require":"./lib/composables/index.cjs","default":"./es/composables/index.js"},"./composables/*":{"types":"./es/composables/*.d.ts","import":"./es/composables/*.js","require":"./lib/composables/*.cjs","default":"./es/composables/*.js"},"./plugins":{"types":"./es/plugins/index.d.ts","import":"./es/plugins/index.js","require":"./lib/plugins/index.cjs","default":"./es/plugins/index.js"},"./plugins/*":{"types":"./es/plugins/*.d.ts","import":"./es/plugins/*.js","require":"./lib/plugins/*.cjs","default":"./es/plugins/*.js"},"./types":{"types":"./es/types/index.d.ts","import":"./es/types/index.js","require":"./lib/types/index.cjs","default":"./es/types/index.js"},"./types/*":{"types":"./es/types/*.d.ts","import":"./es/types/*.js","require":"./lib/types/*.cjs","default":"./es/types/*.js"},"./index.css":"./dist/index.css","./index.min.css":"./dist/index.min.css","./style/index.css":"./lib/style/index.css","./style/index.less":"./es/style/index.less","./package.json":"./package.json"},"main":"./lib/index.cjs","module":"./es/index.js","types":"./es/index.d.ts","unpkg":"./dist/index.min.js","jsdelivr":"./dist/index.min.js","scripts":{"build":"ldesign-builder build","postbuild":"node --experimental-strip-types ../../../../scripts/index.ts workspace:ensure-package-outputs --cwd .. --target vue","dev":"ldesign-builder build --watch","lint":"eslint . --cache","lint:check":"eslint . --cache --max-warnings 0","lint:fix":"eslint . --cache --fix","type-check":"vue-tsc --noEmit -p tsconfig.typecheck.json","test":"ltesting run:unit","test:coverage":"ltesting run:unit --coverage","test:watch":"ltesting run:unit --watch","test:run":"ltesting run:unit","test:changed":"ltesting run:unit --changed","test:failed":"ltesting run:unit --failed","test:ui":"ltesting dashboard"},"dependencies":{"@composy/color-picker-core":"^0.0.1","vue-demi":"^0.14.10"},"peerDependencies":{"vue":"^2.7.0 || ^3.5.32"},"devDependencies":{"@antfu/eslint-config":"9.1.0","@composy/builder":"^0.0.1","@composy/testing":"^0.0.1","@vue/test-utils":"^2.4.11","eslint":"10.7.0","fast-check":"^4.9.0","jsdom":"29.1.1","typescript":"5.9.3","vite":"^8.1.4","vue":"3.5.39","vue-tsc":"^3.3.7"},"publishConfig":{"registry":"http://npm.longrise.cn:6286/"},"typings":"./es/index.d.ts","browser":"./dist/index.js","_id":"@composy/color-picker-vue@0.0.1","_nodeVersion":"23.11.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-99Sb+OuHhn0/o6KenW3wAz1lpawvNtPrYH8R1Pm+0PfazzZrKpV6AwssZhLE+YFWdxCFqeZZl2Y+OmEcioQcPQ==","shasum":"0ceaaf2340b032ceb340f4905516e75b4c1093ce","tarball":"https://registry.npmjs.org/@composy/color-picker-vue/-/color-picker-vue-0.0.1.tgz","fileCount":109,"unpackedSize":294865,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHBa7qGJic2Q4YNGRCXweju79XxEgU0WZ/CVXL1PQDNVAiEAoedwNxjG33TT0CbQNScyTj8FYQbBXvD3lYpRKVFJYY4="}]},"_npmUser":{"name":"swimly","email":"979741120@qq.com"},"directories":{},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/color-picker-vue_0.0.1_1786949039752_0.8257568441709586"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-17T06:43:59.580Z","0.0.1":"2026-08-17T06:43:59.924Z","modified":"2026-08-17T06:44:00.746Z"},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"description":"Vue components for @composy/color-picker-core","keywords":["color-picker","vue","vue3","vue2","component"],"author":{"name":"LDesign Team"},"license":"MIT","readme":"# @composy/color-picker-vue\n\nVue adapter for `@composy/color-picker-core`. It provides Vue components, composables, and plugins while reusing the framework-agnostic core.\n\n## Features\n\n- `<LColorPicker>` with `v-model`, format switching, presets, history, disabled/readonly state, and event forwarding.\n- `<LGradientPicker>` with `v-model` CSS output, gradient type, angle, stops, presets, and stop events.\n- `useColorPicker()` and `useGradientPicker()` composables for direct core-instance control.\n- Native Vue plugin and Engine plugin registration.\n- Core class names and token-backed CSS variables are reused; no separate Vue-only style contract.\n\n## Install\n\n```bash\npnpm add @composy/color-picker-core @composy/color-picker-vue\n```\n\nLoad LDesign color and size token CSS before use:\n\n```ts\nimport '@composy/color-core/styles'\nimport '@composy/size-core/styles'\n```\n\n## Component Usage\n\n```vue\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport {\n  ColorPicker as LColorPicker,\n  GradientPicker as LGradientPicker,\n} from '@composy/color-picker-vue'\nimport type { GradientStop } from '@composy/color-picker-vue'\n\nconst color = ref('#1677FF')\nconst gradientCss = ref('')\nconst stops = ref<GradientStop[]>([\n  { color: '#1677FF', position: 0 },\n  { color: '#22C55E', position: 100 },\n])\n</script>\n\n<template>\n  <LColorPicker\n    v-model=\"color\"\n    format=\"hex\"\n    :show-alpha=\"true\"\n    :history-max=\"12\"\n  />\n\n  <LGradientPicker\n    v-model=\"gradientCss\"\n    type=\"linear\"\n    :angle=\"90\"\n    :stops=\"stops\"\n  />\n</template>\n```\n\n## Composables\n\n```ts\nimport { ref } from 'vue'\nimport { useColorPicker } from '@composy/color-picker-vue'\n\nconst container = ref<HTMLElement | null>(null)\nconst { instance, colorString, setColor, setDisabled, updateOptions } = useColorPicker({\n  container,\n  options: {\n    defaultColor: '#1677FF',\n    showHistory: true,\n  },\n})\n\nsetColor('#22C55E')\nsetDisabled(false)\nupdateOptions({ themeVars: { primaryColor: 'var(--ld-success-default)' } })\n```\n\n## Plugin Usage\n\n```ts\nimport { createApp } from 'vue'\nimport { ColorPickerPlugin } from '@composy/color-picker-vue'\nimport App from './App.vue'\n\ncreateApp(App)\n  .use(ColorPickerPlugin, {\n    componentName: 'LColorPicker',\n    gradientComponentName: 'LGradientPicker',\n  })\n  .mount('#app')\n```\n\n## Props\n\n`LColorPicker` supports:\n\n- `modelValue`, `defaultColor`, `format`\n- `showAlpha`, `showEyeDropper`, `showInput`, `showPresets`, `showHistory`\n- `presets`, `history`, `historyMax`\n- `width`, `disabled`, `readonly`, `themeVars`\n- `containerClass`, `containerStyle`\n\n`LGradientPicker` supports:\n\n- `modelValue`, `type`, `angle`, `stops`\n- `width`, `showAngle`, `showTypeSwitch`, `showPresets`\n- `disabled`, `readonly`, `themeVars`\n- `containerClass`, `containerStyle`\n\n## Styling\n\nVue components mount the core DOM into a host element and use the same class names:\n\n- `ldesign-color-picker`\n- `ldesign-gradient-picker`\n- `ldesign-color-picker-vue-host`\n- `ldesign-gradient-picker-vue-host`\n\nUse `themeVars` for component-level CSS variable overrides:\n\n```vue\n<LColorPicker\n  v-model=\"color\"\n  :theme-vars=\"{ primaryColor: 'var(--ld-warning-default)' }\"\n/>\n```\n\n## Scripts\n\n```bash\npnpm run type-check\npnpm run build\n```\n\nExpected build outputs:\n\n- `dist/index.js`\n- `dist/index.min.js`\n- `es/index.js`\n- `esm/index.js`\n- `lib/index.cjs`\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-c74fe137de4f615318a35bb265cb03ce"}