{"id":13776445,"url":"https://github.com/mozfet/meteor-autoform-materialize","last_synced_at":"2025-05-11T10:31:02.526Z","repository":{"id":57295796,"uuid":"85462590","full_name":"mozfet/meteor-autoform-materialize","owner":"mozfet","description":"Meteor AutoForm Materialize templates","archived":false,"fork":true,"pushed_at":"2021-02-26T07:47:58.000Z","size":375,"stargazers_count":10,"open_issues_count":13,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-16T09:30:10.553Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://atmospherejs.com/mozfet/autoform-materialize","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"djhi/meteor-autoform-materialize","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mozfet.png","metadata":{"files":{"readme":"README.md","changelog":"history.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-19T08:51:44.000Z","updated_at":"2021-10-17T12:53:13.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/mozfet/meteor-autoform-materialize","commit_stats":null,"previous_names":[],"tags_count":73,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mozfet%2Fmeteor-autoform-materialize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mozfet%2Fmeteor-autoform-materialize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mozfet%2Fmeteor-autoform-materialize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mozfet%2Fmeteor-autoform-materialize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mozfet","download_url":"https://codeload.github.com/mozfet/meteor-autoform-materialize/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253254616,"owners_count":21879097,"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":[],"created_at":"2024-08-03T18:00:26.021Z","updated_at":"2025-05-11T10:31:01.388Z","avatar_url":"https://github.com/mozfet.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# Meteor Autoform Materialize templates\n\n[Materialize-css](http://materializecss.com/) styled forms for use with [aldeed:autoform](https://github.com/aldeed/meteor-autoform).\n\n\u003e **Important** Due to [open pull request 6014](https://github.com/Dogfalo/materialize/pull/6014) which solves a bug with multiple select in MaterializeCSS V1.0.0, it is not recommended to install Materialize V1.0.0 using npm, but to use git to clone and merge the pull request manually instead.\n\nTo fix multiple select, remove \"materialize-css\": \"^1.0.0\" dependancy from package.json, navigate to node_modules folder of your project\n```\n$ rm -rf materialize-css\n$ git clone https://github.com/Dogfalo/materialize.git\n$ mv materialize materialize-css\n$ cd materialize-css\n$ git fetch origin +refs/pull/6014/merge\n$ git checkout FETCH_HEAD\n```\n\n\u003e **Thank You** This suite of packages is maintained by [ExpertBox.com](https://www.ExpertBox.com/home) as a thank you to the Open Source community.\n\n\u003e **Drag and Drop Sortable Arrays** Demonstrate your organizational skills by drag and drop sorting arrays!\n\n\u003e **Whats New(ish)** MaterializeCSS v1 support, File Uploads with Meteor-Files, Auto Complete, Easy Defaults, Responsive Text, Timepicker\n\n\u003e **Cash for Issues** We will pay you cash to close issues on this suite of projects! See contributions section below for info.\n\n\u003e **Shiny Modals** Want forms in modals? See [mozfet:meteor-autoform-materialize-modals](https://github.com/mozfet/meteor-autoform-materialize-modals).\n\n## History\nVersion 5.0.0 contains breaking changes to DatePicker and TimePicker. Please see []()\n\nSee [history.md](/history.md) for an overview of changes per version.\n\n## Compatability\nVersion 5.0.1 of this package was manual smoke tested in Playground 5.1.2 with:\n+ macOS Majave v10.14.1\n+ Chrome v62.0.3497.81 (Official Build) (64-bit)\n+ Meteor v1.8.1\n+ Simple Schema v1.4.3 (NPM Package)\n+ Materialize CSS v1.0.0 (NPM Package)\n+ Hammerjs v2.0.8 (NPM Package)\n+ Aldeed Autoform v6.3.0 (Atmosphere Package)\n+ Aldeed Collection2 v2.1.2 (Atmosphere Package)\n+ Mozfet Autoform Materialize Modals v4.0.2 (Atmosphere Package)\n+ Mozfet Autoform Materialize Files v2.1.0 (Atmosphere Package)\n+ Mozfet Autoform Medium v2.0.4 (Atmosphere Package)\n+ Mozfet Material Icons v1.1.0 (Atmosphere Package)\n+ Ostrio Files 1.10.2 (Atmosphere Package)\n+ FourSeven SCSS 4.9.0 (Atmosphere Package)\n+ NoUiSlider 9.2.0 (NPM Package)\n+ Wnumb 1.1.0 (GIT Repo)\n+ Material Design Icons Fonts 3.0.1 (Atmosphere)\n\n# Installation\n\n## Install Materialize CSS (CSS \u0026 SASS) using NPM ##\n\n1. install required dependancies\n```\n$ meteor npm install hammerjs --save\n$ meteor npm install materialize-css --save\n$ meteor add fourseven:scss\n```\n\n2. create init script to import JavaScript in file `/imports/startup/client/materialize.js`\n```\n\u003c\u003c\u003c\u003c\u003c\u003c\u003c Updated upstream\nimport 'hammerjs';\n=======\n\u003e\u003e\u003e\u003e\u003e\u003e\u003e Stashed changes\nimport 'materialize-css/dist/js/materialize.js';\n```\n\n3. create scss include paths in file '/scss-config.json'\n```json\n{\n  \"includePaths\": [\n    \"{}/node_modules/materialize-css/sass/\"\n  ]\n}\n```\n4. import init script in file `/imports/startup/client/index.js`\n```javascript\nimport 'materialize.js';\n```\n5. import SASS in file `/client/main.scss`\n```\n@import \"../node_modules/materialize-css/sass/materialize.scss\";\n@import \"{mozfet:autoform-materialize}/style.scss\";\n```\n\n## Install Autoform Materialize\nUsing the command line in the project folder:\n```\n$ meteor add mozfet:autoform-materialize\n```\n\nOptionally add the extras (as needed)\n```\n$ meteor add mozfet:autoform-materialize-modals\n$ meteor add mozfet:autoform-medium\n$ meteor add mozfet:autoform-materialize-nouislider\n$ meteor add mozfet:autoform-materialize-nouislider2\n$ meteor add mozfet:autoform-materialize-files\n```\n\nIn client startup code, e.g. project/imports/startup/client/autoform.js\n```js\n\u003c\u003c\u003c\u003c\u003c\u003c\u003c Updated upstream\nimport { AutoForm } from 'meteor/aldeed:autoform';\nAutoForm.setDefaultTemplate('materialize');\n=======\nimport { AutoForm } from 'meteor/aldeed:autoform'\nAutoForm.setDefaultTemplate('materialize')\n\u003e\u003e\u003e\u003e\u003e\u003e\u003e Stashed changes\n```\n\nIn client view js, e.g. project/imports/gui/views/insertBook.js\n```js\nBooks = new Mongo.Collection(\"books\");\nBooks.attachSchema(new SimpleSchema({\n  title: {\n    type: String,\n    label: \"Title\",\n    max: 200\n  },\n  author: {\n    type: String,\n    label: \"Author\"\n  }\n}, { tracker: Tracker }));\n```\n\nIn client view html, e.g. project/imports/gui/views/insertBook.html\n```html\n\u003ctemplate name=\"insertBookForm\"\u003e\n  {{\u003e quickForm collection=\"Books\" id=\"insertBookForm\" type=\"insert\"}}\n\u003c/template\u003e\n```\n\nSee [Autoform documentation](https://github.com/aldeed/meteor-autoform) for more form examples.\n\n## This package is part of a suite ##\n- [mozfet:meteor-autoform-materialize](https://github.com/mozfet/meteor-autoform-materialize)\n- [mozfet:meteor-autoform-materialize-modals](https://github.com/mozfet/meteor-autoform-materialize-modals)\n- [mozfet:meteor-autoform-nouislider](https://github.com/mozfet/meteor-autoform-nouislider)\n- [mozfet:meteor-autoform-nouislider2](https://github.com/mozfet/meteor-autoform-nouislider2)\n- [mozfet:meteor-autoform-medium](https://github.com/mozfet/meteor-autoform-medium)\n- [mozfet:meteor-autoform-file](https://github.com/mozfet/meteor-autoform-file)\n- [mozfet:materialize-icons](https://github.com/mozfet/meteor-materialize-icons)\n- [mozfet:meteor-autoform-materialize-playground](https://github.com/mozfet/meteor-autoform-materialize-playground)\n\n## Demo, Examples, Detailed Usage and Smoke Testing ##\nHave a look at the [playground](https://github.com/mozfet/meteor-autoform-materialize-playground) for demo, examples, detailed usage and smoke testing.\n\n## Additional types ##\n\n### Auto Complete ###\n\nMaterializeCSS is busy adding support for Auto Complete in V1, however at the time of writing this is not yet supported in a stable release and does not yet support multiple entries in an autocomplete. For this reason this package makes use of a modified hard fork of [materialize-autocomplete](https://github.com/icefox0801/materialize-autocomplete), and will do so until the build in MaterializeCSS support for this feature is more mature.\n\nIn your schema definition (see playground for extensive list of examples):\n```js\nautoCompleteSingular: {\n  type: String,\n  optional: true,\n  label: 'Auto Complete Singular',\n  allowedValues:  ['Alpha', 'Animal', 'Brave', 'Butter', 'Better', 'Charlie'],\n  autoform: {\n    type: 'autocomplete'\n  }\n},\n\nautoCompleteSingularDisplayLimit: {\n type: String,\n optional: true,\n label: 'Auto Complete With Placeholder and Display Limit of 3',\n allowedValues: ['Alpha', 'Animal', 'Always', 'Anytime'],\n autoform: {\n   type: 'autocomplete',\n   placeholder: 'Type something',\n   displayLimit: 3\n }\n},\n\nautoCompleteMultipleMinMaxDefault: {\n  type: Array,\n  label: 'Auto Complete Multiple with count between 1 and 3',\n  minCount: 1,\n  maxCount: 3,\n  autoform: {\n    type: 'autocomplete',\n    multiple: true,\n    options: () =\u003e {\n      return [\n        {\n          label: 'Alpha',\n          value: 'ALPHA'\n        },\n        {\n          label: 'Animal',\n          value: 'ANIMAL'\n        },\n        {\n          label: 'Always',\n          value: 'ALWAYS'\n        },\n        {\n          label: 'Anytime',\n          value: 'ANYTIME'\n        },\n        {\n          label: 'Bravo',\n          value: 'BRAVO'\n        },\n        {\n          label: 'Bedtime',\n          value: 'BEDTIME'\n        }\n      ];\n    },\n    displayLimit: 3,\n    default: ['ALPHA', 'ANIMAL']\n  }\n},\n'autoCompleteMultipleMinMax.$': {\n    type: String,\n    allowedValues: ['ALPHA', 'ANIMAL', 'ALWAYS', 'ANYTIME', 'BRAVO', 'BEDTIME']\n}\n```\n\n### NoUiSlider ##\n\nThere are two stylings of nouislider because the styling provided by Materialize does not work well with larger tooltips. In general the first styling is good enough, but the second styling works better with large tooltips. Both styles can be used within the same project.\n\nFor examples see [the playground](https://github.com/mozfet/meteor-autoform-materialize-playground/tree/master/imports/ui/components/slidersExample)). For more information on\n\nSo far the focus was on getting horizontal sliders to work, no attention was given to vertical sliders as form components... See the [noUiSlider docs](https://refreshless.com/nouislider/) for more information on the options.\n\nNoUiSlider is an optional extension of this package. To add NoUiSlider:\n```\n$ meteor add mozfet:autoform-materialize-nouislider\n$ meteor add mozfet:autoform-materialize-nouislider2\n```\n\nmozfet:autoform-materialize-nouislider is as close as possible to that published by MaterializeCSS; however this includes an out of date version of noUiSlider and also includes wNumb.\n\nmozfet:autoform-materialize-nouislider2 makes use of SASS styling and the latest version of noUiSlider and does no include wNumb; import the style in your package in a ```.sass``` or ```.scss``` file for it to work.\n```\n@import \"{mozfet:autoform-materialize-nouislider2}/style.scss\";\n```\n\nAt the schema level:\n```js\nconst schema = new SimpleSchema({\n  'basic': {\n    type: Number,\n    min: 10,\n    max: 26,\n    autoform: {\n      type: 'noUiSlider',\n      noUiSliderOptions: {\n        format: wNumb({\n          decimals: 0\n        })\n      }\n    }\n  },\n  'rangeArrayPips': {\n    type: Array,\n    optional: true,\n    autoform: {\n      type: 'noUiSlider',\n      step: 2,\n      noUiSliderOptions: {\n        start: [700,8000],\n        connect: true,\n        range: {\n          'min': [0],\n        \t'10%': [500,500],\n        \t'50%': [4000,1000],\n        \t'max': [10000]\n        },\n        pips: {\n          mode: 'range',\n          density: 3\n        }\n      }\n    }\n  },\n  'rangeArrayPips.$': {\n    type: Number\n  },\n  'formattedTooltips': {\n    type: String,\n    optional: true,\n    label: 'Large tooltip with custom formatting',\n    autoform: {\n      type: 'noUiSlider2',\n      // labelLeft: 'LeftLabel',\n      // labelRight: 'RightLabel',\n      noUiSliderOptions: {\n        start: '45m',\n        step: 5,\n        tooltips: true,\n        orientation: 'horizontal',\n        range: {\n          min: 0,\n          max: 12*60\n        },\n        format: {\n          to: function ( value ) {\n            const minutes = Math.round(value)\n            const human = moment.duration(minutes, 'minutes')\n                .format('h[h]mm[m]')\n            // console.log(`to ${value} human ${human}`)\n            return human\n          },\n          from: function ( value ) {\n            let hours = value.match(/^\\d{1,2}h/g)\n            hours = Number(hours?hours[0].slice(0, -1):'0')\n            let mins = value.match(/\\d{1,2}m$/g)\n            mins = Number(mins?mins[0].slice(0, -1):'0')\n            const result = hours*60 + mins\n            // console.log(`from ${value} to ${result}`)\n            return result\n          }\n        }\n      }\n    }\n  }\n}, {tracker: Tracker})\n```\n\n### PickADate ##\n\nMaterialize uses [pickadate](https://github.com/amsul/pickadate.js) for date inputs.\n\nYou can apply it directly in your template:\n\n```html\n{{\u003e afFieldInput name=\"dateField\" type=\"pickadate\"}}\n```\n\nYou can also specify it at the schema level:\n```js\nMySchema = new SimpleSchema({\n  dateField: {\n    type: Date,\n    label: 'Pick a date with options',\n    autoform: {\n      type: 'pickadate',\n      pickerOptions: {\n        container: '#modalContainer'\n      }\n    }\n  },\n  dateField: {\n    type: String,\n    label: 'Pick a string date with options',\n    autoform: {\n      type: 'pickadate',\n      pickerOptions: {\n        container: '#modalContainer'\n      }\n    }\n  }\n})\n```\n\n### PickATime ###\n\nYou can apply it directly in your template:\n\n```javascript\n{{\u003e afFieldInput name=\"timeField\" type=\"pickatime\"}}\n```\n\nYou can also specify it at the schema level:\n```js\nMySchema = new SimpleSchema({\n  timeField: {\n    type: String,\n    label: 'Pick a time',\n    autoform: {\n      type: 'pickatime',      \n      pickerOptions: {\n        default: 'now',       // Set default time\n        fromnow: 0,           // set default time to * milliseconds from now (using with default = 'now')\n        twelvehour: false,    // Use AM/PM or 24-hour format\n        donetext: 'OK',       // text for done-button\n        cleartext: 'Clear',   // text for clear-button\n        canceltext: 'Cancel', // Text for cancel-button\n        autoclose: false,     // automatic close timepicker\n        ampmclickable: true,  // make AM PM clickable        \n      }\n    }\n  }\n})\n```\n\nNote that when using PickATime with an initialised value from a doc, that the default time and fromnow is overwritten with the value from the doc.\n\n#### Choosing a Timezone ####\n\nBy default, the field's value will be a `Date` object representing the selected date and time in the browser's timezone (i.e., based on the user's computer time settings). In most cases, you probably want the `Date` object relative to some other timezone that you have previously stored. For example, if the form is setting the start date of an event, you want the date to be relative to the event venue's timezone. You can specify a different IANA timezone ID by adding a `timezoneId` attribute.\n\n```js\n{\n  date: {\n    type: Date,\n    autoform: {\n      type: \"pickadate\",\n      timezoneId: \"America/New_York\"\n    }\n  }\n}\n```\n\nOr:\n\n```html\n{{\u003e afFieldInput name=\"typeTest\" type=\"pickadate\" timezoneId=\"America/New_York\"}}\n```\n\n#### Automatic Type Conversions ####\n\nThis input type is intended to be used with `type: Date` schema keys, but it also works with other schema types. Here's a list:\n\n* `Date`: Value is stored as a `Date` object representing the selected date and time in the timezone you specified with the `timezoneId` attribute. By default, the timezone is that of the browser (i.e., the user's computer time settings).\n* `String`: Value is stored as a string representation of the selected date in ISO format, e.g., \"2014-11-25T00:00:00\".\n* `Number`: Value is stored as the result of calling `getTime()` on the `Date` object (representing the selected date and time in the timezone you specified).\n* `Array`: If the schema expects an array of `Date` or `String` or `Number`, the value is converted to a one-item array and stored.\n\nTo provide pickadate options, set a `pickadateOptions` attribute equal to a helper that returns the options object.\n\n### FlowText ###\n\nYou can apply it directly in your template:\n\n```html\n{{\u003e afFieldInput name=\"someTextToDisplay\" type=\"flowtext\"}}\n```\n\nYou can also specify it at the schema level:\n```js\nMySchema = new SimpleSchema({\n  someTextToDisplay: {\n    type: String,\n    autoform: {\n      type: 'flowtext'      \n    }\n  }\n});\n```\n\n### Switch ####\n\nYou an also use [switches](http://materializecss.com/forms.html#switches)\n\nAt the template level:\n```html\n{{\u003e afFieldInput name='dateFieldName' type=\"switch\"}}\n```\n\nAt the schema level:\n```js\nMySchema = new SimpleSchema({\n  booleanFieldName: {\n    type: Boolean\n    autoform: {\n      type:\"switch\"\n    }\n  }\n});\n```\n\nYou may specify the `trueLabel` or `falseLabel` options to customize the switch.\n\nAt the template level:\n```html\n{{\u003e afFieldInput name='dateFieldName' type=\"switch\" trueLabel=\"Online\" falseLabel=\"Offline\"}}\n```\n\nAt the schema level:\n```js\nMySchema = new SimpleSchema({\n  booleanFieldName: {\n    type: Boolean\n    autoform: {\n      type:\"switch\"\n      trueLabel:\"Online\"\n      falseLabel:\"Offline\"\n    }\n  }\n});\n```\n\nIf you need other values than boolean, you may specify the `trueValue` or `falseValue` options to customize the switch.\n\nAt the template level:\n```html\n{{\u003e afFieldInput name='dateFieldName' type=\"switch\" trueValue=\"online\" falseValue=\"offline\"}}\n```\n\nAt the schema level:\n```js\nMySchema = new SimpleSchema({\n  booleanFieldName: {\n    type: Boolean\n    autoform: {\n      type:\"switch\"\n      trueValue:\"online\"\n      falseValue:\"offline\"\n    }\n  }\n});\n```\n\n### File Upload ###\n\nUpload files, with preview, using [Meteor Files](https://github.com/VeliovGroup/Meteor-Files).\n```\nfileUpload: {\n  type: String,\n  optional: true,\n  autoform: {\n    type: 'fileUpload',\n    collection: 'Files'\n  }\n}\n```\n\nAlternatively, see [mozfet:autoform-materialize-file](https://github.com/mozfet/meteor-autoform-file)\n\n### Input with prepended icon ###\n\nYou can add icon to any field like this:\n```html\n{{\u003e afQuickField name='subject' icon='person'}}\n```\nFor blank space in place of icon, just use \"none\":\n```html\n{{\u003e afQuickField name='subject' icon='none'}}\n```\n\nIt also works for textarea:\n```html\n{{\u003e afQuickField name='message' type='textarea' icon='person'}}\n```\n\n### Default Values ###\n\nYou can easily add a default value to a select, text, number, autocomplete (more coming soon) input in the schema.\n```js\nselectWithDefault: {\n  type: String,\n  allowedValues: ['VALUE1', 'VALUE2'],\n  autoform: {\n    type: 'select',\n    default: 'VALUE1'\n  }\n},\n\nstringDefault: {\n  type: String,\n  max: 1000,\n  label: 'Simple text field with default value',\n  autoform: {\n    default: 'default text'\n  }\n}\n```\n\n# Contributions\nIf you use this package and find it useful, why not help improve it? We want your feature requests, bug reports, and pull requests.\n\n\u003e **Cash for Issues** We will pay you to close issues on this suite! You pick your own issues, set your own place and time, you do it at your own pace, you make an estimate for your own work, and set your own price (be gentle please, we are a small startup, Ts\u0026Cs apply). As long as it works, not break anything else, and looks good, we are happy. Payments are made to your PayPal account after pull request is approved. Interested? Please drop us a mail at info@expertbox.com.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmozfet%2Fmeteor-autoform-materialize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmozfet%2Fmeteor-autoform-materialize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmozfet%2Fmeteor-autoform-materialize/lists"}