{"id":20754469,"url":"https://github.com/annotationsro/ember-mobile-inputs","last_synced_at":"2025-04-28T16:28:58.856Z","repository":{"id":7006298,"uuid":"55894382","full_name":"AnnotationSro/ember-mobile-inputs","owner":"AnnotationSro","description":"Mobile friendly input helpers http://annotationsro.github.io/ember-mobile-inputs/","archived":false,"fork":false,"pushed_at":"2022-05-12T10:08:42.000Z","size":2813,"stargazers_count":2,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-20T03:19:39.943Z","etag":null,"topics":["addon","ember","hacktoberfest","input"],"latest_commit_sha":null,"homepage":"","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/AnnotationSro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-10T11:08:34.000Z","updated_at":"2022-10-02T11:06:12.000Z","dependencies_parsed_at":"2022-08-09T01:30:15.672Z","dependency_job_id":null,"html_url":"https://github.com/AnnotationSro/ember-mobile-inputs","commit_stats":null,"previous_names":[],"tags_count":112,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnnotationSro%2Fember-mobile-inputs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnnotationSro%2Fember-mobile-inputs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnnotationSro%2Fember-mobile-inputs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnnotationSro%2Fember-mobile-inputs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AnnotationSro","download_url":"https://codeload.github.com/AnnotationSro/ember-mobile-inputs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251345292,"owners_count":21574686,"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":["addon","ember","hacktoberfest","input"],"created_at":"2024-11-17T09:17:55.917Z","updated_at":"2025-04-28T16:28:58.839Z","avatar_url":"https://github.com/AnnotationSro.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/AnnotationSro/ember-mobile-inputs.svg?branch=master)](https://travis-ci.org/AnnotationSro/ember-mobile-inputs)\n\nDEMO: http://annotationsro.github.io/ember-mobile-inputs/\n\n# Ember-mobile-inputs\n\n\nHTML 5 introduced input types that are really great for mobile devices, but not that great for the good old desktops.\nMainly because every browser implements it in a little bit different way (speaking of UI), which is sometimes not that great (e.g. number input in Firefox on Windows\nis simply disgusting...). And of course they are sometimes a little bit buggy (looking at you Firefox....)\nAlso, it would be sometimes nice to enhance or alter the way these inputs behave on desktop - give them a little bit more glamour, right?\n\nSo what this addon does? On mobile (touch) devices it makes use of HTML5 power (renders a simple HTML `\u003cinput type=\"whatever\"\u003e`) and on desktop it provides some extra fun:\n* input type **number** - decimal numbers only (pretty standard, but without the ugly stepper that I guess nobody uses anyway)\n* input type **text** - well just a simple input, nothing fancy here\n* input type **date** - masked input with the ability to customize the format + [Flatpickr](https://flatpickr.js.org) calendar popup + nice calendar button\n\n\n# Install\n\n```\nember install ember-mobile-inputs\n```\n\n**Since this addon depends on ember-auto-import 2, any app that uses ember-advanced-combobox also needs to depend on ember-auto-import 2.**\n\n# Usage\n\n### Number\n```\n{{mobile-input id=\"numberInput\" type='number' value=valueNumber disabled=isDisabled onValueChanged=(action 'callback')}}\n```\n\nYou can customize the decimal point mark - whether to use comma or dot or both. You can do this by setting `decimalMark` attribute to:\n* _comma_\n* _dot_\n* _both_\n* _none_\n\nYou can limit number to be positive only by parameter `allowNegative=false`.\n\n### Text\n```\n{{mobile-input id=\"textInput\" type='text' value=valueText disabled=isDisabled onValueChanged=(action 'callback')}}\n```\n\nYou can also define regex pattern for text input fields using `pattern` attribute. Note: regex must work also for intermediate states, not just final value.\n\n### Password\n```\n{{mobile-input id=\"passInput\" type='password' value=valuePass disabled=isDisabled onValueChanged=(action 'callback')}}\n```\n### Date\nWith default date format - dd.mm.yyyy\n```\n{{mobile-input id=\"dateInput\" type='date' value=valueDate disabled=isDisabled onValueChanged=(action 'callback')}}\n```\n\nWith custom format\n```\n{{mobile-input id=\"customDateInput\" type='date' value=valueDateFormat format='YYYY-MM-DD' disabled=isDisabled}}\n```\n\n**showOn** attribute with possible values:\n* _button_ - show Flatpickr calendar popup only when user clicks on the calendar button\n* _input_ - show Flatpickr whne you click on the input (calendar button is not visible)\n* _both_ - combination of the both options above\n* _none_ - no calendar popup at all\n\n# Configuration\n\nYou can add a global configuration into your _config/environment.js_ file:\n```\nENV['ember-mobile-inputs'] = {\n  date:{\n    calendarButtonClass: 'fa fa-calendar', // font icon CSS classes to be used in place of calendar button\n    format: 'd.m.Y', //see Flatpickr formatting\n    locale: 'en', //see Flatpickr i18n\n    showOn: 'both' //available options: 'both', 'input', 'button', 'none',\n  },\n  number:{\n    decimalMark: 'both', //available options: 'comma', 'dot', 'both'\n    selectOnClick: false, //selects the whole number on focus\n    formatOnDisabled: false //format numbers when input is disabled\n  },\n  text:{\n      selectOnClick: false //selects the whole text on focus\n  }\n}\n```\n\n\nFor more Flatpickr (calendar popup) configuration information, please have a look at the [Flatpickr guide](https://flatpickr.js.org/options/).\nYou can also pass `flatpickrOptions` parameter to the component - this is currently used only by _date_ input to customize Flatpickr calendar (content of `flatpickrOptions` is merged with Flatpickr config).\n\nYou can also configure other options for inputs in `options` attribute - list of supported options:\n* defaultDateOnOpen - date, to which Flatpickr calendar should open when no value is set\n\nThere is an option to add callback `onBlurChanged` that will be called on input blur, but only when value has changed since on-focus event.\nThere is a service `mobile-input-event-bus` where you can subscribe to input changes on input blur - don't forget to enable these events in the config:\n\n _config/enbironment.js_\n```\nENV['ember-mobile-inputs'] = {\n  eventOnBlurChanged: true\n}\n```\n_subscribe for events_\n```\nmobileInputEventBus: Ember.inject.service('mobile-input-event-bus'),\n\nthis.get('mobileInputEventBus').subscribe('blurChanged', (newValue, oldValue, element)=\u003e{\n  window.console.log(`EVENT: newValue: ${newValue}, oldValue: ${oldValue}`);\n});\n```\n\nYou can pass custom attributes to the element using `data-custom` attribute:\n```\n  {{mobile-input value=value data-custom=\"hello world\"}}\n```\n\nwhich will render:\n```\n\u003cspan data-custom=\"hello world\" class=\"ember-mobile-input ember-mobile-input-text ember-view\"\u003e\n \u003c!-- some more stuff here --\u003e\n\u003c/span\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fannotationsro%2Fember-mobile-inputs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fannotationsro%2Fember-mobile-inputs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fannotationsro%2Fember-mobile-inputs/lists"}