{"id":16440195,"url":"https://github.com/evodiaaut/vue-focuspoint-component","last_synced_at":"2026-03-17T11:03:57.940Z","repository":{"id":57395995,"uuid":"115663283","full_name":"EvodiaAut/vue-focuspoint-component","owner":"EvodiaAut","description":"Set focus point on elements","archived":false,"fork":false,"pushed_at":"2024-05-02T07:25:55.000Z","size":1100,"stargazers_count":33,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-12T01:46:23.898Z","etag":null,"topics":["component","focuspoint","javascript","vue","vue-component","vue2","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":"https://evodiaaut.github.io/vue-focuspoint-component","language":"JavaScript","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/EvodiaAut.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","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,"publiccode":null,"codemeta":null},"funding":{"custom":"https://liberapay.com/EvodiaAut"}},"created_at":"2017-12-28T22:09:02.000Z","updated_at":"2025-01-24T18:25:27.000Z","dependencies_parsed_at":"2024-05-02T08:37:49.322Z","dependency_job_id":"d89bab41-d07a-4e42-b7b2-b5cef8d732b7","html_url":"https://github.com/EvodiaAut/vue-focuspoint-component","commit_stats":{"total_commits":110,"total_committers":2,"mean_commits":55.0,"dds":0.009090909090909038,"last_synced_commit":"3b807ca61b47bd75c567946e0033930dd6646e59"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EvodiaAut%2Fvue-focuspoint-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EvodiaAut%2Fvue-focuspoint-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EvodiaAut%2Fvue-focuspoint-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EvodiaAut%2Fvue-focuspoint-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EvodiaAut","download_url":"https://codeload.github.com/EvodiaAut/vue-focuspoint-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243725020,"owners_count":20337660,"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","focuspoint","javascript","vue","vue-component","vue2","vuejs","vuejs2"],"created_at":"2024-10-11T09:11:26.149Z","updated_at":"2026-03-17T11:03:57.884Z","avatar_url":"https://github.com/EvodiaAut.png","language":"JavaScript","funding_links":["https://liberapay.com/EvodiaAut"],"categories":[],"sub_categories":[],"readme":"# vue-focuspoint-component\n\n\u003e Set focus point on elements\n\n[![npm](https://img.shields.io/npm/v/vue-focuspoint-component.svg?style=for-the-badge)](https://www.npmjs.com/package/vue-focuspoint-component)\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=for-the-badge)](https://github.com/EvodiaAut/vue-focuspoint-component/blob/master/LICENSE.md)\n[![npm](https://img.shields.io/npm/dt/vue-focuspoint-component.svg?style=for-the-badge)](https://www.npmjs.com/package/vue-focuspoint-component)\n\n## Demo\n\n[Demo here](https://evodiaaut.github.io/vue-focuspoint-component/)\n\n## Install\n\n`npm install vue-focuspoint-component` or `yarn add vue-focuspoint-component`\n\n## Usage\n\nThe most common use case is to register the component globally.\n\n```js\n// in your main.js or similar file\nimport Vue from 'vue'\nimport FocusPoint from 'vue-focuspoint-component'\n\nVue.component('focus-point', FocusPoint)\n```\n\nAlternatively you can do this to register the components:\n\n```js\n// HelloWorld.vue\nimport FocusPoint from 'vue-focuspoint-component'\n\nexport default {\n  name: 'HelloWorld',\n  components: {\n    FocusPoint\n  }\n}\n```\n\nOn your page you can now use html like this:\n\nImage element\n\n```html\n\u003c!-- set focus point in `focus` --\u003e\n\u003cfocus-point\n  v-model=\"focus\"\n\u003e\n  \u003cimg src=\"https://is.example.com/image.jpg\"\u003e\n\u003c/focus-point\u003e\n\n\u003c!-- after click `focus` shows like this --\u003e\nfocus: {\n  \"x\": 35,\n  \"y\": 62\n}\n\n\u003c!-- example to get image from image server --\u003e\n\u003cimg src=\"https://is.example.com/{focus.x}/{focus.y}/1024/768/image.jpg\"\u003e\n\u003c!-- output: we get from a 1920x1080 image the focus [35%:62% into 1024x768] --\u003e\n\u003cimg src=\"https://is.example.com/35/62/1024/768/image.jpg\"\u003e\n```\n\nOther elements (use careful element with text has not the same ratio by a resize)\n\n```html\n\u003cfocus-point\n  v-model=\"element\"\n\u003e\n  \u003cdiv\n    class=\"jumbotron\"\n  \u003e\n    \u003ch1\u003eHello, world!\u003c/h1\u003e\n    \u003cp\u003eLorem ipsum dolor sit amet, consetetur sadipscing elitr...\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/focus-point\u003e\n```\n\n## CSS\n\n```scss\n// required and to get updates\n@import \"./node_modules/vue-focuspoint-component/src/scss/focus-point\";\n// simple theme\n@import \"./node_modules/vue-focuspoint-component/src/scss/focus-point-theme\";\n```\n\nDo you like my theme but not the colors or paddings, ...?\n\n```scss\n@import \"./node_modules/vue-focuspoint-component/src/scss/focus-point\";\n\n// overwrite variables from the simple theme\n$focuspoint-background: blue;\n$focuspoint-border: 3px solid white;\n$focuspoint-radius: 2px;\n// find more variables in /src/scss/_focus-point-variables.scss\n\n@import \"./node_modules/vue-focuspoint-component/src/scss/focus-point-theme\";\n```\n\n## V-Model\n\n|Type|Required|Default|Description\n|-|-|-|-|\n|Object|false|`{ x: 50, y: 50 }`|Focus\n\n## Slots\n\n|Name|Description\n|-|-|\n|pin|Inner html from pin\n\n## Slots example\n\nCreate your own pin\n\n```html\n\u003cfocus-point\n  v-model=\"image\"\n\u003e\n  \u003ctemplate\n    slot=\"pin\"\n  \u003e\n    \u003ci class=\"cool-focus-icon\"/\u003e\n  \u003c/template\u003e\n  \u003cimg src=\"https://is.example.com/image.jpg\"\u003e\n\u003c/focus-point\u003e\n```\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n\n# run unit tests\nnpm run unit\n\n# run all tests\nnpm test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevodiaaut%2Fvue-focuspoint-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fevodiaaut%2Fvue-focuspoint-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevodiaaut%2Fvue-focuspoint-component/lists"}