viking-live-field

A Render and Edit UI Component for Viking.js Models

Usage no npm install needed!

<script type="module">
  import vikingLiveField from 'https://cdn.skypack.dev/viking-live-field';
</script>

README

Viking/LiveField

Docs: https://bemky.github.io/viking-live-field/

VikingLiveField

Installation

npm install viking-live-field

new LiveField({
    target: model,
    attribute: 'name'
})

Dependencies

viking
uniform
dolla

Options

Attribute Type Notes
target Viking.Model / Viking.Collection
attribute string
render (value, target) => html Render value for display
type string text, date, duration, select, multi_select
save boolean to use .set(attrs) or .save(attrs). Defaults to typeof target.id !== undefined
container string/Element Passed to Uniform.Popover. Determines where Popover is appended. Useful when overflow and positioning issues.
inputs [] target => Element
labels {} Set language used in rendering form
labels.title target => text HTML for top of popover
labels.unset string HTML used for rendering when value is undefined
labels.record string / record => text HTML for labe of each record when split by record. See Collections
labels.split string / record => text Text for "Split by ____". See Collections

Development

Docs built using Middleman, asset pipeline by Condenser

Server
bundle
bundle exec middleman server
Build
bundle exec middleman build