npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ember-form-fields

v0.1.0

Published

Semantic HTML5 form wrappers for your forms

Downloads

4

Readme

Ember-form-fields

Kickstart your ember forms with this addon: ember-form-fields is an addon for cleanly wrapping your form elements.

Out of the box, you can:

  • Wrap your form groups in proper fieldset elements
  • Group your form controls vertically or horizontally (with layout="vertical" or with layout="horizontal"
  • Use proper legend elements on your fieldsets

In general: proper HTML5 <form>s.

Installation

  • git clone this repository
  • npm install
  • bower install

Usage

{{#form-field title="My label title"}}
	{{input type="text" autofocus=true value=model.firstName title="Please specify your first name" required=true autocomplete="given-name"}}
{{/form-field}}

layout simply adds the class to form-field. So you might add some styles like these. No styles are shipped with this addon; it is your responsibility to create styles.

title is used to provide the text for the associated label.

(For more info on which autocomplete value to use, please refer to MDN)

Usage with Ember CLI HTML5 Validation

The following shows a simple login form using the ember-cli-html5-validation addon:

{{#validatable-form action="login" class="login-form"}}
	{{#form-section title="Login" icon="lock"}}
		{{#if loginFailed}}
			<p>Invalid username or password.</p>
		{{/if}}
		{{#form-field title="Username" layoutDirection="vertical"}}
			{{input autofocus=true value=model.username required=true type="text" placeholder="Username" id="username"}}
		{{/form-field}}
		{{#form-field title="Password" layoutDirection="vertical"}}
			{{input type="password" value=model.password required=true placeholder="Password" id="password"}}
		{{/form-field}}
	{{/form-section}}
	{{#form-actions}}
		{{async-button class="button" icon="out2" title="Log in" isValid=isValid}}
	{{/form-actions}}
{{/validatable-form}}

The form-actions component is simply a short-hand notation for <footer class="form-actions">. As such, you may choose to omit the component from mark-up in favour of your own implentation.

Adding Icons

  1. Optionally, you can install the ember addon to make your dependencies clear
  2. Add icon="icon" to your {{form-section}}: ex. {{form-section title="Register" icon="user"}}

Make sure to set up your own icons. You can do this by using a tool like icomoon.

Running

  • ember server
  • Visit your app at http://localhost:4200.

Running Tests

  • ember test
  • ember test --server

Building

  • ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.