{"_id":"vue3-picture-input","_rev":"33-9d8f2c419d969beb4f44ccbd21713ac0","name":"vue3-picture-input","dist-tags":{"latest":"3.4.1"},"versions":{"0.1.0":{"name":"vue3-picture-input","version":"0.1.0","_id":"vue3-picture-input@0.1.0","maintainers":[{"name":"dmitrii1548","email":"korsunov2006@list.ru"}],"dist":{"shasum":"c4b9d266cc804f6563b63ae8a24616cfc40d5877","tarball":"https://registry.npmjs.org/vue3-picture-input/-/vue3-picture-input-0.1.0.tgz","fileCount":6,"integrity":"sha512-/+/vG0Zr3yvQzWZUSJ8ZQCkA4gXWFXXQ5jWGCVJ3ONHnl5twMO7ZEYJFZQTotiqnAcsif+gcqNKLNGOffEY6SA==","signatures":[{"sig":"MEYCIQDCYAcPInFb+FC3EfmR20K25gFPPknK+Hi/lvlDDowacgIhAIUnx1Xd+hz5q/dYktgSFxkTiJ1I19aAeT5XhbEath3f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10825},"main":"./dist/vue3-picture-input.umd.js","module":"./dist/vue3-picture-input.es.js","exports":{".":{"import":"./dist/vue3-picture-input.es.js","require":"./dist/vue3-picture-input.umd.js"}},"gitHead":"9810e70ab283b76a79c3515d7ac823845b82a7d3","scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"dmitrii1548","email":"korsunov2006@list.ru"},"_npmVersion":"8.19.2","description":"This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `\r\n\r\n\r\n```\r\n\r\n### Composition API\r\n```html\r\n\r\n \r\n \r\n\r\n\r\n\r\n\r\n\r\n```\r\n\r\nIn this code you have imported your component and have added his styles.\r\n\r\n### If you want to get your putted image as file use v-model:file:\r\nIn this code implemented getting putted file functionality.\r\n\r\n### Options API\r\n```html\r\n\r\n \r\n \r\n\r\n\r\n\r\n\r\n\r\n```\r\n\r\n### Composition API\r\n```html\r\n\r\n \r\n \r\n\r\n\r\n\r\n\r\n\r\n```\r\n\r\n## Properties\r\n\r\n### size\r\nSize of this component\r\n\r\n### params\r\n\r\n| param | value | \r\n| ----------- |:-------:| \r\n| size-4 | 1rem | \r\n| size-8 | 2rem | \r\n| size-12 | 3rem | \r\n| size-16 | 4rem | \r\n| size-20 | 5rem | \r\n| size-24 | 6rem | \r\n| size-28 | 7rem | \r\n| size-32 | 8rem | \r\n| size-36 | 9rem | \r\n| size-40 | 10rem | \r\n| size-44 | 11rem | \r\n| size-48 | 12rem | \r\n| size-52 | 13rem | \r\n| size-56 | 14rem | \r\n| size-60 | 15rem | \r\n| size-64 | 16rem | \r\n| size-68 | 17rem | \r\n| size-72 | 18rem | \r\n| size-76 | 19rem | \r\n\r\n### background\r\nBackground inside this component.\r\n\r\nExample usage:\r\n```html\r\n\r\n```\r\n\r\n### textColor\r\nText color for title\r\n\r\nExample usage:\r\n```html\r\n\r\n```\r\n\r\n### border\r\nBorder params: border-style, border-width, \r\n### params\r\n\r\n| param | value | \r\n| ----------------- |:---------------------------------------------------------:| \r\n| border-none | border: none |\r\n| border | border-width: 1px |\r\n| border-2 | border-width: 2px |\r\n| border-3 | border-width: 3px |\r\n| border-4 | border-width: 4px |\r\n| border-5 | border-width: 5px |\r\n| border-6 | border-width: 6px |\r\n| border-7 | border-width: 7px |\r\n| border-8 | border-width: 8px |\r\n| border-9 | border-width: 9px |\r\n| border-10 | border-width: 10px |\r\n| border-solid | border-style: solid |\r\n| border-dashed | border-style: dashed |\r\n| border-dotted | border-style: dotted |\r\n| border-double | border-style: double |\r\n\r\n### borderColor\r\nBorder color\r\n\r\nExample usage:\r\n```html\r\n\r\n```\r\n### bgRounded\r\nRound background of this component.\r\n\r\nExample usage:\r\n```html\r\n\r\n```\r\n\r\n### imageRounded\r\nThank this prop you can round an image\r\n\r\nExample usage:\r\n```html\r\n\r\n```\r\n\r\n### closeBtn \r\nStyles for closeBtn\r\n\r\n### params \r\n\r\nWhen :hover\r\n\r\n| param | value | \r\n| ----------------- |:---------------:| \r\n| hover-opacity-10 | opacity: 10% |\r\n| hover-opacity-20 | opacity: 20% |\r\n| hover-opacity-30 | opacity: 30% |\r\n| hover-opacity-40 | opacity: 40% |\r\n| hover-opacity-50 | opacity: 50% |\r\n| hover-opacity-60 | opacity: 60% |\r\n| hover-opacity-70 | opacity: 70% |\r\n| hover-opacity-80 | opacity: 80% |\r\n| hover-opacity-90 | opacity: 90% |\r\n| hover-opacity-100 | opacity: 100% |\r\n\r\n### closeBtnColor\r\nColor for close button\r\n\r\n```html\r\n\r\n```\r\n### mimes\r\nAccepted types of files
\r\n// default \".jpg,.png\"\r\n\r\nExample usage:\r\n```html\r\n\r\n```\r\n\r\n### required\r\nIs required field. Params true or false
\r\n// default false\r\n\r\nExample usage:\r\n```html\r\n\r\n```\r\n\r\n### imageSrc\r\nAccept default imageSrc on preview. Params string
\r\n// default false\r\n\r\nExample usage:\r\n```html\r\n\r\n```\r\n\r\n\r\n### title \r\nThis is a text at your component
\r\n// default \"Drop here\"\r\n\r\n### fontSize\r\nFont size of your title\r\n\r\nExample usage:\r\n```html\r\n\r\n```\r\n\r\n### padding\r\nPadding of the container component\r\n\r\nExample usage:\r\n```html\r\n\r\n```\r\n\r\n### paddingX\r\nPadding left and right of the container component\r\n\r\n### paddingY\r\nPadding top and bottom of the container component\r\n\r\n### paddingLeft\r\nPadding left of the container component\r\n\r\nExample usage:\r\n```html\r\n\r\n```\r\n\r\n### paddingRight\r\nPadding right of the container component\r\n\r\nExample usage:\r\n```html\r\n\r\n```\r\n\r\n### paddingTop\r\nPadding top of the container component\r\n\r\nExample usage:\r\n\r\n```html\r\n\r\n```\r\n\r\n### paddingBottom\r\nPadding bottom of the container component\r\n\r\nExample usage:\r\n```html\r\n\r\n```\r\n\r\n## Customize styles \r\n\r\nIf you want customize styles or add your own styles.\r\n\r\nYou need to make next: \r\n\r\n1. Delete styles of component. \r\n```js\r\n// import \"vue3-picture-input-test/style.css\"\r\n```\r\n\r\n2. Add your own slyles.\r\n```js \r\nimport 'url of your styles'\r\n```\r\n\r\nOr you can write styles in your style tag in your component.\r\n```html \r\n\r\n```\r\n","readmeFilename":"README.md"}