Nova-transfer NPM

Nova Transfer

Transfer elements between two columns in an intuitive and efficient way.

How do I do? (HTML Markup)

  <nova-transfer 
    show-select-all
    show-search> 
    <p slot="source-footer" style="padding: 8px 0; text-align: center;">Footer 1</p>
    <p slot="target-footer" style="padding: 8px 0; text-align: center;">Footer 2</p>
  </nova-transfer>

   var transfer = document.querySelector('nova-transfer');
   transfer.data = data;
   transfer.configuration = configuration;

Customize styles

    // customized styles for the columns
    transfer.columnStyle = {
      boxShadow: "0px 0px 53px -11px rgba(0,0,0,1)",
      width: "45%"
    } 
    // customized styles for the operation buttons (<,>)
    transfer.operationStyle = {
      width: "10%",
    }
    // customized styles for the wrapper of the component
    transfer.wrapperStyle = {
      width: "46%",
      height: "340px",
      minWidth: "500px",
      margin: "0 auto"
    }

JSON Data Model

{
    "data": {
        "items": [
        {
        "key": "key1",
        "title": "Title1",
        "description": "Description1",
        "disabled": false
        },
        {
        "key": "key2",
        "title": "Title2",
        "description": "Description2",
        "disabled": true
        },
        {
        "key": "key3",
        "title": "Title3",
        "description": "Description3",
        "disabled": false
        }
    ],
    "targetKeys": [
        "key6", "key11"
        ]
    },
    "configuration": {
        "labels": {
          titleSource: "source",
          titleTarget: "target",
          operationLeft: "left",
          operationRight: "right",
          unit: "item",
          units: "items",
          notFoundContent: "the list is empty",
          searchPlaceholder: "search here"
        } 
    },
    "styling": {
    }
}

Properties

Property	Description	Type	Default
`items`	`The elements that are part of this array will be present the left column. Except the elements whose keys are included in targetKeys prop.`	`any[]`
`targetKeys`	`A set of keys of elements that are listed on the right column.`	`string[]`	`[]`
`show-select-all`	`Show select all checkbox on the header`	`boolean`	`false`
`show-search`	`If included, a search box is shown on each column.`	`boolean`	`false`
`disabled`	`Whether disabled transfer`	`boolean`	`false`
`source-footer`	`Slot that can be added to the component to show a footer in the source column`
`target-footer`	`Slot that can be added to the component to show a footer in the target column`
`columnStyle`	`A custom CSS style used for rendering the transfer columns.`	`object`	`{}`
`operationStyle`	`A custom CSS style used for rendering the operations column.`	`object`	`{}`
`wrapperStyle`	`A custom CSS style used for rendering wrapper element.`	`object`	`{}`
`search`	`Event function that is emitted when search field is changed`	`eventListener`
`filter`	`Event function that is emitted when items are filtered in a column`	`eventListener`
`transferColumn`	`Event that is emitted each time the user requests to change items from one column to another`	`eventListener`
`select`	`Event that is emitted each time the user selects an item of a column`	`eventListener`
`filterOption`	`A function to determine whether an item should show in search result list`	`(inputValue, option): boolean`
`renderItem`	`The function to generate the item shown on a column.`	`Function(item):string`
`handleSelect`	`Method that allows the customization of the component.`	`Method(key:string)`

Built with StencilJS

lodash

@everything-registry/sub-chunk-2334 @infinitebrahmanuniverse/nolb-nov

0.0.1

5 years ago