{"id":21268795,"url":"https://github.com/dmitrii1548/vue-image-input","last_synced_at":"2025-07-11T05:30:30.264Z","repository":{"id":184426360,"uuid":"657593942","full_name":"DMITRII1548/Vue-Image-Input","owner":"DMITRII1548","description":"This is a simple input for image. Created with vuejs","archived":false,"fork":false,"pushed_at":"2024-11-20T13:58:38.000Z","size":125,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-20T14:11:33.101Z","etag":null,"topics":["component","image","image-input","input","javascript","javascript-library","js","library","npm","npm-package","npmjs","package","picture","vue","vue-component","vue-component-library","vue3","vue3-picture-input","vuejs"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DMITRII1548.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-06-23T12:01:11.000Z","updated_at":"2024-11-20T13:58:43.000Z","dependencies_parsed_at":"2023-10-04T16:21:49.902Z","dependency_job_id":"d1626756-b077-40e0-979d-91a662d246db","html_url":"https://github.com/DMITRII1548/Vue-Image-Input","commit_stats":null,"previous_names":["dmitrii1548/vue-image-input"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DMITRII1548%2FVue-Image-Input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DMITRII1548%2FVue-Image-Input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DMITRII1548%2FVue-Image-Input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DMITRII1548%2FVue-Image-Input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DMITRII1548","download_url":"https://codeload.github.com/DMITRII1548/Vue-Image-Input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225693830,"owners_count":17509227,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","image","image-input","input","javascript","javascript-library","js","library","npm","npm-package","npmjs","package","picture","vue","vue-component","vue-component-library","vue3","vue3-picture-input","vuejs"],"created_at":"2024-11-21T08:06:27.354Z","updated_at":"2025-07-11T05:30:30.257Z","avatar_url":"https://github.com/DMITRII1548.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue3-picture-input\n\nThis is a simple input for image\n\n![screen](https://github.com/DMITRII1548/Vue-Image-Input/blob/master/assets/Screenshot_1.png)\n![screen](https://github.com/DMITRII1548/Vue-Image-Input/blob/master/assets/Screenshot_2.png)\n\n## We need your ideas for new updates\nIf you any idea for update.\nPlease, click [here](https://github.com/DMITRII1548/Vue-Image-Input/issues) and create a new issue.\n\n## Support project\nIf you like this project, please put a star on [GitHub](https://github.com/DMITRII1548/Vue-Image-Input)\n\n## What's new?\n1. Added imageSrc property\n\n## Installation\nNPM:\n```npm i vue3-picture-input ```\n\nYARN:\n``` yarn add vue3-picture-input ```\n\n## Getting starting \n\n## Usage\nImport the package into your component. And you will get your first program with this component.\n\n### Options API\n```html\n// src/App.vue\n\u003ctemplate\u003e\n  \u003cVueImageInput\n    size=\"size-72\"\n    title=\"Drop file here\"/\u003e\n  \u003cbutton\u003eShow\u003c/button\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { VueImageInput } from 'vue3-picture-input'\nimport \"vue3-picture-input/style.css\"\n\nexport default {\n  name: 'App',\n\n  components: {\n    VueImageInput,\n  },\n}\n\u003c/script\u003e\n\n\u003cstyle scoped\u003e\u003c/style\u003e\n```\n\n### Composition API\n```html\n\u003ctemplate\u003e\n  \u003cVueImageInput\n    size=\"size-72\"\n    title=\"Drop file here\"/\u003e\n  \u003cbutton\u003eShow\u003c/button\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { VueImageInput } from 'vue3-picture-input'\nimport \"vue3-picture-input/style.css\"\n\u003c/script\u003e\n\n\u003cstyle scoped\u003e\u003c/style\u003e\n```\n\nIn this code you have imported your component and have added his styles.\n\n### If you want to get your putted image as file use v-model:file:\nIn this code implemented getting putted file functionality.\n\n### Options API\n```html\n\u003ctemplate\u003e\n  \u003cVueImageInput\n    size=\"size-72\"\n    v-model:file=\"file\"\n    title=\"Drop file here\"/\u003e\n  \u003cbutton @click=\"showFile\"\u003eShow\u003c/button\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { VueImageInput } from 'vue3-picture-input'\nimport \"vue3-picture-input/style.css\"\n\nexport default {\n  name: 'App',\n\n  data() {\n    return {\n      file: []\n    }\n  },\n\n  methods: {\n    showFile() {\n      console.log(this.file)\n    },\n  },\n\n  components: {\n    VueImageInput,\n  },\n}\n\u003c/script\u003e\n\n\u003cstyle scoped\u003e\u003c/style\u003e\n```\n\n### Composition API\n```html\n\u003ctemplate\u003e\n  \u003cVueImageInput\n    size=\"size-72\"\n    v-model:file=\"file\"\n    title=\"Drop file here\"/\u003e\n  \u003cbutton @click=\"showFile\"\u003eShow\u003c/button\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { ref } from 'vue'\n\nimport { VueImageInput } from 'vue3-picture-input'\nimport \"vue3-picture-input/style.css\"\n\nconst file = ref([])\n\nconst showFile = () =\u003e {\n  console.log(file.value)\n}  \n\u003c/script\u003e\n\n\u003cstyle scoped\u003e\u003c/style\u003e\n```\n\n## Properties\n\n### size\nSize of this component\n\n### params\n\n| param       | value   | \n| ----------- |:-------:| \n| size-4      | 1rem    | \n| size-8      | 2rem    | \n| size-12     | 3rem    | \n| size-16     | 4rem    | \n| size-20     | 5rem    | \n| size-24     | 6rem    | \n| size-28     | 7rem    | \n| size-32     | 8rem    | \n| size-36     | 9rem    | \n| size-40     | 10rem   | \n| size-44     | 11rem   | \n| size-48     | 12rem   | \n| size-52     | 13rem   | \n| size-56     | 14rem   | \n| size-60     | 15rem   | \n| size-64     | 16rem   | \n| size-68     | 17rem   | \n| size-72     | 18rem   | \n| size-76     | 19rem   | \n\n### background\nBackground inside this component.\n\nExample usage:\n```html\n\u003cVueImageInput\n  size=\"size-72\n  background=\"#7a7a7a\"/\u003e\n```\n\n### textColor\nText color for title\n\nExample usage:\n```html\n\u003cVueImageInput\n  size=\"size-72\n  textColor=\"#7a7a7a\"\n  title=\"Drop file here\"/\u003e\n```\n\n### border\nBorder params: border-style, border-width, \n### params\n\n| param             | value                                                     | \n| ----------------- |:---------------------------------------------------------:| \n| border-none       | border: none                                              |\n| border            | border-width: 1px                                         |\n| border-2          | border-width: 2px                                         |\n| border-3          | border-width: 3px                                         |\n| border-4          | border-width: 4px                                         |\n| border-5          | border-width: 5px                                         |\n| border-6          | border-width: 6px                                         |\n| border-7          | border-width: 7px                                         |\n| border-8          | border-width: 8px                                         |\n| border-9          | border-width: 9px                                         |\n| border-10         | border-width: 10px                                        |\n| border-solid      | border-style: solid                                       |\n| border-dashed     | border-style: dashed                                      |\n| border-dotted     | border-style: dotted                                      |\n| border-double     | border-style: double                                      |\n\n### borderColor\nBorder color\n\nExample usage:\n```html\n\u003cVueImageInput\n  size=\"size-72\n  borderColor=\"#000\"/\u003e\n```\n### bgRounded\nRound background of this component.\n\nExample usage:\n```html\n\u003cVueImageInput\n  size=\"size-72\n  bgRounded=\"50%\"/\u003e\n```\n\n### imageRounded\nThank this prop you can round an image\n\nExample usage:\n```html\n\u003cVueImageInput\n  size=\"size-72\n  bgRounded=\"50%\"/\u003e\n```\n\n### closeBtn \nStyles for closeBtn\n\n### params \n\nWhen :hover\n\n| param             | value           | \n| ----------------- |:---------------:| \n| hover-opacity-10  | opacity: 10%    |\n| hover-opacity-20  | opacity: 20%    |\n| hover-opacity-30  | opacity: 30%    |\n| hover-opacity-40  | opacity: 40%    |\n| hover-opacity-50  | opacity: 50%    |\n| hover-opacity-60  | opacity: 60%    |\n| hover-opacity-70  | opacity: 70%    |\n| hover-opacity-80  | opacity: 80%    |\n| hover-opacity-90  | opacity: 90%    |\n| hover-opacity-100 | opacity: 100%   |\n\n### closeBtnColor\nColor for close button\n\n```html\n\u003cVueImageInput\n  size=\"size-72\n  closeBtnColor=\"blue\"/\u003e\n```\n### mimes\nAccepted types of files \u003cbr\u003e\n// default \".jpg,.png\"\n\nExample usage:\n```html\n\u003cVueImageInput\n  size=\"size-72\n  mimes=\".png,.jpg\"/\u003e\n```\n\n### required\nIs required field. Params true or false \u003cbr\u003e\n// default false\n\nExample usage:\n```html\n\u003cVueImageInput\n  size=\"size-72\n  :required=\"true\"/\u003e\n```\n\n### imageSrc\nAccept default imageSrc on preview. Params string \u003cbr\u003e\n// default false\n\nExample usage:\n```html\n\u003cVueImageInput\n  size=\"size-72\n  imageSrc=\"path/some.png\"/\u003e\n```\n\n\n### title \nThis is a text at your component \u003cbr\u003e\n// default \"Drop here\"\n\n### fontSize\nFont size of your title\n\nExample usage:\n```html\n\u003cVueImageInput\n  size=\"size-72\n  fontSize=\"16px\"/\u003e\n```\n\n### padding\nPadding of the container component\n\nExample usage:\n```html\n\u003cVueImageInput\n  size=\"size-72\n  padding=\"16px\"/\u003e\n```\n\n### paddingX\nPadding left and right of the container component\n\n### paddingY\nPadding top and bottom of the container component\n\n### paddingLeft\nPadding left of the container component\n\nExample usage:\n```html\n\u003cVueImageInput\n  size=\"size-72\n  paddingLeft=\"16px\"/\u003e\n```\n\n### paddingRight\nPadding right of the container component\n\nExample usage:\n```html\n\u003cVueImageInput\n  size=\"size-72\n  paddingRight=\"16px\"/\u003e\n```\n\n### paddingTop\nPadding top of the container component\n\nExample usage:\n\n```html\n\u003cVueImageInput\n  size=\"size-72\n  paddingTop=\"16px\"/\u003e\n```\n\n### paddingBottom\nPadding bottom of the container component\n\nExample usage:\n```html\n\u003cVueImageInput\n  size=\"size-72\n  paddingBottom=\"16px\"/\u003e\n```\n\n## Customize styles \n\nIf you want customize styles or add your own styles.\n\nYou need to make next: \n\n1. Delete styles of component. \n```js\n// import \"vue3-picture-input-test/style.css\"\n```\n\n2. Add your own slyles.\n```js \nimport 'url of your styles'\n```\n\nOr you can write styles in your style tag in your component.\n```html \n\u003cstyle scoped\u003e\n  /* Example styles */\n\n  .border-11 {\n    border-width: 11px;\n  }\n\u003c/style\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmitrii1548%2Fvue-image-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdmitrii1548%2Fvue-image-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmitrii1548%2Fvue-image-input/lists"}