From 4b8529a1d22ab586573eaaa3e4441c0db414c9be Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 26 Dec 2018 00:32:02 +0300
Subject: [PATCH] Readd Listbox demo

---
 src/views/listbox/ListboxDemo.vue | 58 +++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 src/views/listbox/ListboxDemo.vue

diff --git a/src/views/listbox/ListboxDemo.vue b/src/views/listbox/ListboxDemo.vue
new file mode 100644
index 000000000..ff1d2a8a3
--- /dev/null
+++ b/src/views/listbox/ListboxDemo.vue
@@ -0,0 +1,58 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Listbox</h1>
+                <p>Listbox is used to select one or more values from a list of items.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3 class="first">Single</h3>
+            <p-listbox v-model="selectedCity" :options="cities" optionLabel="name" />
+
+            <h3>Advanced with Templating, Filtering and Multiple Selection</h3>
+            <p-listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
+                <template slot-scope="{option}">
+                    <div className="p-clearfix">
+                        <img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
+                        <span style="float:right;margin:1.25em .5em 0 0">{{option.brand}}</span>
+                    </div>
+                </template>
+            </p-listbox>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            selectedCars: null,
+            cities: [
+                {name: 'New York', code: 'NY'},
+                {name: 'Rome', code: 'RM'},
+                {name: 'London', code: 'LDN'},
+                {name: 'Istanbul', code: 'IST'},
+                {name: 'Paris', code: 'PRS'}
+            ],
+            cars: [
+                {brand: 'Audi', value: 'Audi'},
+                {brand: 'Bmw', value: 'Bmw'},
+                {brand: 'Fiat', value: 'Fiat'},
+                {brand: 'Honda', value: 'Honda'},
+                {brand: 'Jaguar', value: 'Jaguar'},
+                {brand: 'Mercedes', value: 'Mercedes'},
+                {brand: 'Renault', value: 'Renault'},
+                {brand: 'Volkswagen', value: 'Volkswagen'},
+                {brand: 'Volvo', value: 'Volvo'}
+            ]
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>