wurld

Wurld v0.2.2 BETA

IMPORTANT: This is a beta version and, until v1, any feature updates, e.g. v0.3.x, may contain breaking changes. Use caution when updating, while in beta!

Installing

npm install wurld

Initializing

Wurld.register()

This will register everything wurld has globally.

Params

• options (Object) - Default: {}
  • If nothing is provided, it will register everything wurld has to offer with default values set in place. The following are optional properties for this object
    • components (Array)
      • If this option is not provided then all components will be globally registered, otherwise individual components can be registered by passing an array of the components, as strings. They would be cased in the same way as components, e.g. 'WurldInput'
    • config (Object)
      • Many of the directives, filters, and methods can be configured, usually by changing what their global defaults are. To configure one of them, you simply add a property to this, with the key being the same name as the directive, filter, or method you would like to configure. The individual directives, filters, and methods in this doc will describe what their configuration options are, if any.

import Wurld from 'wurld'

Wurld.register();

Components (Helpers)

WurldDynamicTag

Props

• tag (String) required
  • the HTML tag you want it to be

DOM Structure

<tag-you-passed-as-a-prop>
	<slot> // Anything you put in as a child of this component

Components (Fields)

Attributes You can pass attributes, similar to how you would pass the props, as long as it is not defined as a prop for the given component. Normally, these attributes would only go to the root element of the component. However, for these components you can pass an attribute to a child element in the following format: element:attribute="value" this will then apply the attribute to the elements of the element name given. It will still pass the attributes to the parent element if given in the traditional format, i.e. without the in-between colon.

NOTE: This will still work as a v-bind with a colon in front of the element.

WurldCheckbox

Props

• labelBefore (Boolean) Default: false
  • The element(s) will normally be placed after the element(s), in the document flow. However if this prop is set to true, the element(s) will appear before the element(s), in the document flow.
• legend (String) Default: null
  • If set, the root element will be a , rather than a
    , and a will be created as the first child of the , with it's content set as the value of this prop.
• name (String) Default: null
  • If set, will add the "name" attribute to the element(s). If the options prop's array has more than one element, it will append a "[]" after the name, for the purposes of form submission.
• options (Array) required
  • The array is an array of objects. Using an array of objects can garauntee the checkboxes appearing in specific a order, if desired. Each object has a "label" and "value" property. The "value" property of the object will be used as the "value" attribute for the element(s) and the "label" property will be used for the checkbox's element. If this Array has more than one object, the "name" attributes for the element(s) will have a "[]" appended after them for the purposes of form submission.
• uid (String) Default: null
  • If set, the element(s) "id" attribute would be set to this prop's value. Also, the element(s) "for" attribute would also be set to the same value. These unique identifiers will also have the key of the option object from the options array appended to the end of it, as there can be more than one of these elements. This prop should be unique. If this is not set the formerly mentioned attributes will be generated a uid.
• value (Array) Default: null
  • Normally, you would use v-model on this component, which itself will set this prop. Either way, if this prop is set, the "checked" attribute on the element(s) will be set to true if any of this Arrays elements match it's value.

Attributes Below are the child elements you can pass attributes to, along with a list of attributes it will not accept, if any.

• checkbox
  • id - this is given either the uid prop or the generated uid if the uid prop is not provided, if neither of the label nor uid props are set then no id will out on the .
  • name - use the prop instead.
  • type - this is automatically set to "checkbox"
  • value - use the prop instead.
  • checked - this is automatically set based on the value prop and what boxes are checked
• label
  • for - this is given either the uid prop or the generated uid if the uid prop is not provided.
• legend
• group - This is the wrapping div that surrounds the label and checkbox combinations

Emitted Events

• input Output: Array | null
  • Set up to emit the 'input' event for use with v-model.

DOM Structure

div.WurldCheckbox | fieldset.WurldCheckbox // if legend is set then it uses fieldset otherwise it uses div
	legend // if legend is set
		.WurldCheckbox__group *repeatable*
			label *repeatable* // if labelBrefore = true
			input[type="checkbox"] *repeatable*
			label *repeatable* // if labelBefore = false

WurldInput

Props

• label (HTML String) Default: null
  • If set, will create a with the given HTML string as its content. This will also trigger an uid to be placed onto the "for" attrbute and the "id" attibute. This uid would be generated if the uid prop is not set.
• labelAfter (Boolean) Default: false
  • If label prop is set, the will normally be placed before the , in the document flow. However if the label prop is set, and this prop is set to true, the will appear after the , in the document flow.
• name (String) Default: null
  • If set, will add the "name" attribute to the , with whatever is set here as its value.
• uid (String) Default: null
  • If set, the "id" attribute would be set to this prop's value. Also, if the label prop is set the "for" attribute would also be set to the same value. This prop should be unique. If this is not set, and a label prop is given the formerly mentioned attributes will be generated a uid.
• type (String) Default: 'text'
  • Will pass the type to the . Best if something close to text, e.g. password or email.
• value (String) Default: null
  • Normally, you would use v-model on this component, which itself will set this prop. Either way, if this prop is set, the "value" attribute on the will be set this prop's value.

Attributes Below are the child elements you can pass attributes to, along with a list of attributes it will not accept, if any.

• label
  • for - this is given either the uid prop or the generated uid if the uid prop is not provided.
• input
  • id - this is given either the uid prop or the generated uid if the uid prop is not provided, if neither of the label nor uid props are set then no id will out on the .
  • name - use the prop instead.
  • type - use the prop instead.
  • value - use the prop instead.

Emitted Events

• input Output: String
  • Set up to emit the 'input' event for use with v-model.

DOM Structure

div.WurldText
	label // if labelAfter = false
	input
	label // if labelAfter = true

WurldRadioButton

Props

• labelBefore (Boolean) Default: false
  • The element(s) will normally be placed after the element(s), in the document flow. However if this prop is set to true, the element(s) will appear before the element(s), in the document flow.
• legend (String) Default: null
  • If set, the root element will be a , rather than a
    , and a will be created as the first child of the , with it's content set as the value of this prop.
• name (String) Default: null
  • If set, will add the "name" attribute to the element(s).
• options (Array) required
  • The array is an array of objects. Using an array of objects can garauntee the radios appearing in specific a order, if desired. Each object has a "label" and "value" property. The "value" property of the object will be used as the "value" attribute for the element(s) and the "label" property will be used for the radio's element.
• uid (String) Default: null
  • If set, the element(s) "id" attribute would be set to this prop's value. Also, the element(s) "for" attribute would also be set to the same value. These unique identifiers will also have the key of the option object from the options array appended to the end of it, as there can be more than one of these elements. This prop should be unique. If this is not set the formerly mentioned attributes will be generated a uid.
• value (String) Default: null
  • Normally, you would use v-model on this component, which itself will set this prop. Either way, if this prop is set, the "checked" attribute on the element(s) will be set to true if this prop match it's value.

Attributes Below are the child elements you can pass attributes to, along with a list of attributes it will not accept, if any.

• radio
  • id - this is given either the uid prop or the generated uid if the uid prop is not provided, if neither of the label nor uid props are set then no id will out on the .
  • name - use the prop instead.
  • type - this is automatically set to "radio"
  • value - use the prop instead.
  • checked - this is automatically set based on the value prop and what boxes are checked
• label
  • for - this is given either the uid prop or the generated uid if the uid prop is not provided.
• legend
• group - This is the wrapping div that surrounds the label and radio combinations

Emitted Events

• input Output: String | null
  • Set up to emit the 'input' event for use with v-model.

DOM Structure

div.WurldRadioButton | fieldset.WurldRadioButton // if legend is set then it uses fieldset otherwise it uses div
	legend // if legend is set
		.WurldRadioButton__group *repeatable*
			label *repeatable* // if labelBrefore = true
			input[type="radio"] *repeatable*
			label *repeatable* // if labelBefore = false

WurldSelect

Props

• disabled (Boolean) Default: false
  • If true, adds the "disabled" attribute to the .
• label (HTML String) Default: null
  • If set, will create a with the given HTML string as its content. This will also trigger an uid to be placed onto the "for" attrbute and the "id" attibute. This uid would be generated if the uid prop is not set.
• labelAfter (Boolean) Default: false
  • If label prop is set, the will normally be placed before the , in the document flow. However if the label prop is set, and this prop is set to true, the will appear after the , in the document flow.
• name (String) Default: null
  • If set, will add the "name" attribute to the , with whatever is set here as its value. If the readonly prop is set to true, then the "name" attribute wil instead be placed on an .
• options (Array) required
  • The array is an array of objects. Using an array of objects can garauntee the options appearing in specific a order, if desired. Each object has a "label" and "value" property. The "value" property will be used as the values for the and the child array of objects will be set for child
• placeholder (String) Default: null
  • If set, will create an initial
• readonly (Boolean) Default: false
  • If true, the becomes disabled and the "name" attribute, if any, is removed. An is created which will instead have the "name" attribute, if any, and will recieve a "value" attribute, which will be populated with whatever is passed through the value prop.
• required (Boolean) Default: false
  • If true, adds the "required" attribute to the . Additionally, if the placeholder prop also has a value, then the created placeholder
• uid (String) Default: null
  • If set, the "id" attribute would be set to this prop's value. Also, if the label prop is set the "for" attribute would also be set to the same value. This prop should be unique. If this is not set, and a label prop is given the formerly mentioned attributes will be generated a uid.
• value (String) Default: null
  • Normally, you would use v-model on this component, which itself will set this prop. Either way, if this prop is set, the

Attributes Below are the child elements you can pass attributes to, along with a list of attributes it will not accept, if any.

• label
  • for - this is given either the uid prop or the generated uid if the uid prop is not provided.
• select
  • disabled - use the disabled prop instead, because it is used in some logic with the readonly prop which select elements normally don't have as an attribute.
  • id - this is given either the uid prop or the generated uid if the uid prop is not provided, if neither of the label nor uid props are set then no id will out on the .
  • name - use the prop instead.
  • required - use the prop instead, because this will remove the placeholder
• option
  • value - see the options prop.
  • selected - use the value prop instead.
• optgroup
  • label - see the options prop.

Emitted Events

• input Output: String
  • Set up to emit the 'input' event for use with v-model.

DOM Structure

div.WurldSelect
	label // if labelAfter = false
	select
		option[value=""] // if placeholder has a value AND if value has no value OR required is false
		option *repeatable* // if the "value" property of the current object of the options array is a string
		optgroup *repeatable* // if the "value" property of the current object of the options array is another array
			option *repeatable*
	input[type="hidden"] // if readonly is true
	label // if labelAfter = true

WurldTextarea

Props

• label (HTML String) Default: null
  • If set, will create a with the given HTML string as its content. This will also trigger an uid to be placed onto the "for" attrbute and the