{"id":19258933,"url":"https://github.com/lassehaslev/vue-fields","last_synced_at":"2026-02-28T02:33:52.469Z","repository":{"id":89976169,"uuid":"63075782","full_name":"LasseHaslev/vue-fields","owner":"LasseHaslev","description":null,"archived":false,"fork":false,"pushed_at":"2016-08-08T09:23:49.000Z","size":35,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-23T18:16:56.742Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LasseHaslev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2016-07-11T14:39:34.000Z","updated_at":"2016-07-12T14:08:14.000Z","dependencies_parsed_at":"2023-05-30T18:00:33.302Z","dependency_job_id":null,"html_url":"https://github.com/LasseHaslev/vue-fields","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/LasseHaslev/vue-fields","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LasseHaslev%2Fvue-fields","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LasseHaslev%2Fvue-fields/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LasseHaslev%2Fvue-fields/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LasseHaslev%2Fvue-fields/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LasseHaslev","download_url":"https://codeload.github.com/LasseHaslev/vue-fields/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LasseHaslev%2Fvue-fields/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29923408,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-27T19:37:42.220Z","status":"online","status_checked_at":"2026-02-28T02:00:07.010Z","response_time":90,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-09T19:14:49.820Z","updated_at":"2026-02-28T02:33:52.442Z","avatar_url":"https://github.com/LasseHaslev.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @lassehaslev/vue-fields\n\u003e Input fields to use with vuejs\n\nVue input fields contains special input fields to use width [ vuejs ]( http://vuejs.org/ ).\n\n## Installation\nRun ```npm install @lassehaslev/vue-fields --save``` in your project folder\n\nInstall component where register Vue\n``` html\nimport Vue from 'vue'\nimport { FieldsInstall } from '@lassehaslev/vue-fields'\nVue.use( FieldsInstall );\n```\n\n## Usage\n\n#### Styles\nStyles can be found compiled in ```dist/Fields.css```. Or you can compile your own from ```src/styles/*```. We use [Stylus](http://stylus-lang.com/) to compile the styles.\n\n#### Code\nTo start using the field make use of it in your components\n``` js\nimport InputField from '@lassehaslev/vue-fields';\nexport default {\n    template: '\u003cinput-field :model=\"\"\u003e\u003c/input-field\u003e',\n    components: {\n        InputField,\n    }\n}\n```\nThe input fields in this package should be used the same way as you would use normal inputfields with [vuejs](http://vuejs.org/).\nMain concept is that you give a :model=\"\" with the data the same way you would use v-model=\"\" on a normal input element.\n\nSome inputs like the image-picker needs extra options to be configured. For those objects we use the :options=\"\" attribute on the element with the settings to make the object work.\n\n``` html\n\u003cinput-field type=\"%inputType%\" :options=\"%options%\" :model.sync=\"%Value to be updated%\"\u003e\u003c/input-field\u003e\n```\n\n\n#### Color picker\n``` html\n\u003cinput-field type=\"color\" :model.sync=\"'#005599'\"\u003e\u003c/input-field\u003e\n```\n\n#### Grayscale picker\n``` html\n\u003cinput-field type=\"color\" :model.sync=\"'#555555'\"\u003e\u003c/input-field\u003e\n```\n\n#### Slug\nSlug creates sluggable string based on another string.\nSlug has two types ```case``` and ```dash```.\n``` html\n\u003cinput-field type=\"slug\" :options=\"{ type='case', from: anotherString }\" :model.sync=\"'#555555'\"\u003e\u003c/input-field\u003e\n```\n\n#### Coordinates\nCoordinates gets coordinates from -1 to 1 in both x and y axes.  \n``` html\n\u003cinput-field type=\"coordinates\" :model.sync=\"{ x:0,y:0 }\"\u003e\n    \u003cdiv style=\"height:200px;background-color:#CCC;\"\u003e\u003c/div\u003e\n\u003c/input-field\u003e\n```\n\n#### Image picker\nImage picker is based on [@lassehaslev/vue-imagepicker](https://github.com/lassehasleV/vue-imagepicker). All properties to the imagepicker goes through :options parameters.\n\nI strongly advice you to read [@lassehaslev/vue-imagepicker](https://github.com/lassehasleV/vue-imagepicker) documentation before starting using this input type.\n``` html\n\u003cinput-field type=\"image-picker\" :model.sync=\"image\" :options=\"{\n    'images': [\n        {\n            id: 1,\n            path: 'http://placehold.it/400x400',\n        },\n        {\n            id: 2,\n            path: 'http://placehold.it/800x400',\n        },\n    ]\n}\"\u003e\u003c/input-field\u003e\n```\n\n## Development\n#### Quick start\nClones repository and install dependencies\n``` bash\nbash -c \"$(curl -fsSL https://raw.githubusercontent.com/LasseHaslev/vue-fields/master/install.sh)\"\n```\n\n#### Next time\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\nFor more information see the [docs for vueify](https://github.com/vuejs/vueify).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flassehaslev%2Fvue-fields","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flassehaslev%2Fvue-fields","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flassehaslev%2Fvue-fields/lists"}