vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Implemented Fieldset component

pull/3/head
cagataycivici 2018-12-10 11:46:14 +03:00
parent f8edaffc7f
commit daf223766c
9 changed files with 147 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/AppMenu.vue
View File

@ -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>

1
src/assets/styles/primevue.css
View File

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

45
src/components/fieldset/Fieldset.css Normal file
View File

@ -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;
}

46
src/components/fieldset/Fieldset.vue Normal file
View File

@ -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>

2
src/components/panel/Panel.css
View File

@ -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 {

2
src/components/panel/Panel.vue
View File

@ -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>

2
src/main.js
View File

@ -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,

5
src/router.js
View File

@ -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')
}
]
});

44
src/views/fieldset/FieldsetDemo.vue Normal file
View File

@ -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>