diff --git a/exports/orderlist.d.ts b/exports/orderlist.d.ts new file mode 100644 index 000000000..b4596eecd --- /dev/null +++ b/exports/orderlist.d.ts @@ -0,0 +1 @@ +export * from './components/orderlist/OrderList'; \ No newline at end of file diff --git a/exports/orderlist.js b/exports/orderlist.js new file mode 100644 index 000000000..5b79ab1f5 --- /dev/null +++ b/exports/orderlist.js @@ -0,0 +1,3 @@ +'use strict'; +module.exports = require('./components/orderlist/OrderList.vue'); + \ No newline at end of file diff --git a/src/components/orderlist/OrderList.d.ts b/src/components/orderlist/OrderList.d.ts index e69de29bb..a8b29cddd 100644 --- a/src/components/orderlist/OrderList.d.ts +++ b/src/components/orderlist/OrderList.d.ts @@ -0,0 +1,14 @@ +import Vue, {VNode} from 'vue'; + +export declare class OrderList extends Vue { + value?: any[]; + dataKey?: string; + selection?: any[]; + metaKeySelection?: boolean; + listStyle?: any; + $emit(eventName: 'reorder', e: { originalEvent: Event, value: any[]; direction: string}): this; + $slots: { + header: VNode[]; + item: VNode[]; + } +} \ No newline at end of file diff --git a/src/components/orderlist/OrderList.vue b/src/components/orderlist/OrderList.vue index 76b43fcf0..b044bf695 100644 --- a/src/components/orderlist/OrderList.vue +++ b/src/components/orderlist/OrderList.vue @@ -11,10 +11,12 @@ -
  • - -
    • +     @@ -46,7 +48,7 @@ export default { metaKeySelection: { type: Boolean, default: true - }, + } }, itemTouched: false, reorderDirection: null, diff --git a/src/views/orderlist/OrderListDoc.vue b/src/views/orderlist/OrderListDoc.vue index 14100199b..5fb49a8c8 100644 --- a/src/views/orderlist/OrderListDoc.vue +++ b/src/views/orderlist/OrderListDoc.vue @@ -4,58 +4,56 @@

    Import

    -import Panel from 'primevue/panel'; +import OrderList from 'primevue/orderlist';

    Getting Started

    -

    Panel is a container component that accepts content as its children.

    +

    OrderList requires an array as its value bound with the v-model directive and a template for its content.

    +

    Header of the component is defined with the "header" template and to define the content of an item in the list a named templated called "item" needs to be defined which gets the + item and the index via slotProps. +

    -<Panel header="Godfather I"> - The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. - His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. - Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, - kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family. -</Panel> - - -

    Custom Header

    -

    Header of the panel is either defined with the header property or the header template.

    - -<Panel> + -

    Toggleable

    -

    Content of the panel can be expanded and collapsed using toggleable option.

    - -<Panel header="Godfather I" :toggleable="true"> - The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. - His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. - Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, - kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family. -</Panel> - - -

    To control the initial state of the toggleable panel, use the collapsed property.

    - -<Panel header="Header Text" :toggleable="true" :collapsed="true"> - Content -</Panel> - +

    Selection

    +

    In case you'd need to access the selected items in the list, define a binding to the selection property with the sync operator so that + it gets updated when the user makes a selection. Since it is two-way binding enabled, your changes to the selection will be reflected as well. Note that + this is optional and only necessary when you need to access the selection.

    Use the sync operator to enable two-way binding.

    -<button type="button" @click="isCollapsed = !isCollapsed">Toggle Programmatically</button> -<Panel header="Header Text" :toggleable="true" :collapsed.sync="isCollapsed"> - Content -</Panel> + +

    DataKey

    +

    It is recommended to provide the name of the field that uniquely identifies the a record in the data via the dataKey property for better performance.

    +

    Properties

    Any attribute such as style and class are passed to the main container element. Following are the additional properties to configure the component.

    @@ -70,22 +68,37 @@ import Panel from 'primevue/panel'; - header + value + array + null + Value of the component. + + + selection + any + null + Selected items in the list. + + + metaKeySelection + boolean + true + Defines whether metaKey is requred or not for the selection.
    + When true metaKey needs to be pressed to select or unselect an item and
    + when set to false selection of each item + can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically. + + + dataKey string null - Header text of the panel. + Name of the field that uniquely identifies the a record in the data. - toggleable - boolean + listStyle + object null - Defines if content of panel can be expanded and collapsed. - - - collapsed - boolean - null - Defines the initial state of panel content. + Inline style of the the list element. @@ -103,11 +116,12 @@ import Panel from 'primevue/panel'; - toggle + reorder event.originalEvent: browser event
    - event.value: collapsed state as a boolean + event.value: Ordered list
    + event.direction: Direction of the change; "up", "down", "bottom", "top" - Callback to invoke when a tab toggle. + Callback to invoke when the list is reordered. @@ -125,24 +139,16 @@ import Panel from 'primevue/panel'; - p-panel + p-orderlist Container element. - p-panel-titlebar - Header section. + p-orderlist-list + List container. - p-panel-title - Title text of panel. - - - p-panel-titlebar-toggler - Toggle icon. - - - p-panel-content - Content of panel. + p-orderlist-item + An item in the list @@ -158,35 +164,60 @@ import Panel from 'primevue/panel'; + + + +import CarService from '../../service/CarService'; + +export default { + data() { + return { + cars: null + } + }, + carService: null, + created() { + this.carService = new CarService(); + }, + mounted() { + this.carService.getCarsSmall().then(data => this.cars = data.slice(0,5)); + } +} + + + +.p-caritem { + &:after { + content: ""; + display: table; + clear: both; + } + + img { + display:inline-block; + margin:2px 0 2px 2px; + width: 48px; + height: 48px; + } + + div { + font-size:14px; + float:right; + margin: 16px 6px 0 0; + } +}