Implemented Fieldset component

src/AppMenu.vue

@@ -43,6 +43,7 @@
             <div :class="{'submenuhide': activeMenuIndex !== 3, 'submenushow': activeMenuIndex === 3}">
                 <div>
                     <router-link to="/panel">&#9679; Panel</router-link>
+                    <router-link to="/fieldset">&#9679; Fieldset</router-link>
                 </div>
             </div>
 

src/assets/styles/primevue.css

@@ -2,4 +2,5 @@
 @import '../../components/inputtext/InputText.css';
 @import '../../components/listbox/ListBox.css';
 @import '../../components/button/Button.css';
-@import '../../components/panel/Panel.css';
+@import '../../components/panel/Panel.css';
+@import '../../components/fieldset/Fieldset.css';

src/components/fieldset/Fieldset.css

@@ -0,0 +1,45 @@
+.p-fieldset, 
+.p-fieldset .p-fieldset-legend {
+    padding: 0.5em 1em;
+}
+
+.p-fieldset-toggleable .p-fieldset-legend {
+    padding: 0;
+}
+
+.p-fieldset-toggleable .p-fieldset-legend a {
+    padding: 0.5em 1em;
+    cursor:pointer;
+    white-space: nowrap;
+    display: block;
+}
+
+.p-fieldset .p-fieldset-toggler {
+    margin-right: .1em;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.p-fieldset .p-fieldset-legend-text {
+    vertical-align: middle;
+}
+
+.p-fieldset-content-wrapper-enter,
+.p-fieldset-content-wrapper-leave-to {
+    max-height: 0;
+}
+
+.p-fieldset-content-wrapper-enter-to,
+.p-fieldset-content-wrapper-leave {
+    max-height: 1000px;
+}
+
+.p-fieldset-content-wrapper-leave-active {
+    overflow: hidden;
+    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
+}
+
+.p-fieldset-content-wrapper-enter-active {
+    overflow: hidden;
+    transition: max-height 1s ease-in-out;
+}

src/components/fieldset/Fieldset.vue

@@ -0,0 +1,46 @@
+<template>
+    <fieldset :class="['p-fieldset p-component', {'p-fieldset-toggleable': toggleable}]">
+        <legend class="p-fieldset-legend p-unselectable-text">
+            <slot name="legend" v-if="!toggleable">
+                <span class="p-fieldset-legend-text" >{{legend}}</span>
+            </slot>
+            <a tabindex="0" v-if="toggleable" @click="toggle" @keydown.enter="toggle">
+                <span class="p-fieldset-toggler pi pi-minus"></span>
+                <slot name="legend">
+                    <span class="p-fieldset-legend-text">{{legend}}</span>
+                </slot>
+            </a>
+        </legend>
+        <transition name="p-fieldset-content-wrapper">
+            <div class="p-fieldset-content-wrapper" v-show="!d_collapsed">
+                <div class="p-fieldset-content">
+                    <slot></slot>
+                </div>
+            </div>
+        </transition>
+    </fieldset>
+</template>
+
+<script>
+export default {
+    props: {
+        legend: String,
+        toggleable: Boolean,
+        collapsed: Boolean
+    },
+    data() {
+        return {
+           d_collapsed: this.collapsed
+        }
+    },
+    methods: {
+        toggle() {
+            this.d_collapsed = !this.d_collapsed;
+        }
+    } 
+}
+</script>
+
+<style>
+
+</style>

src/components/panel/Panel.css

@@ -48,7 +48,7 @@
 
 .p-panel-content-wrapper-leave-active {
     overflow: hidden;
-    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
+    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
 }
 
 .p-panel-content-wrapper-enter-active {

src/components/panel/Panel.vue

@@ -4,7 +4,7 @@
             <slot name="header">
                 <span class="p-panel-title" v-if="header">{{header}}</span>
             </slot>
-            <a v-if="toggleable" tabindex="0" class="p-panel-titlebar-icon p-panel-titlebar-toggler" @click="toggle">
+            <a v-if="toggleable" tabindex="0" class="p-panel-titlebar-icon p-panel-titlebar-toggler" @click="toggle" @keydown.enter="toggle">
                 <span :class="{'pi pi-minus': !d_collapsed, 'pi pi-plus': d_collapsed}"></span>
             </a>
         </div>

src/main.js

@@ -5,6 +5,7 @@ import InputText from './components/inputtext/InputText';
 import ListBox from './components/listbox/ListBox';
 import Button from './components/button/Button';
 import Panel from './components/panel/Panel';
+import Fieldset from './components/fieldset/Fieldset';
 
 import './assets/styles/primevue.css';
 import 'primeflex/primeflex.css';
@@ -16,6 +17,7 @@ Vue.component('p-inputtext', InputText);
 Vue.component('p-button', Button);
 Vue.component('p-listBox', ListBox);
 Vue.component('p-panel', Panel);
+Vue.component('p-fieldset', Fieldset);
 
 new Vue({
   router,

src/router.js

@@ -30,6 +30,11 @@ export default new Router({
         path: '/panel',
         name: 'panel',
         component: () => import('./views/panel/PanelDemo.vue')
+    },
+    {
+        path: '/fieldset',
+        name: 'fieldset',
+        component: () => import('./views/fieldset/FieldsetDemo.vue')
     }
   ]
 });

src/views/fieldset/FieldsetDemo.vue

@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Fieldset</h1>
+                <p>Fieldset is a grouping component with the optional content toggle feature.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3 class="first">Regular</h3>
+            <p-fieldset legend="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.
+            </p-fieldset>
+
+            <h3>Toggleable</h3>
+            <p-fieldset legend="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.
+            </p-fieldset>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: '',
+            value2: '',
+            value3: 'PrimeVue'
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>