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

CSS refactor

pull/310/head
cagataycivici 2020-04-24 13:43:27 +03:00
parent 6bb2c29fbd
commit ef4265df87
25 changed files with 269 additions and 926 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
LICENSE.md
View File

@ -1,6 +1,6 @@
The MIT License (MIT) The MIT License (MIT)
Copyright (c) 2016-2019 PrimeTek Copyright (c) 2018-2020 PrimeTek
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal

144
src/components/autocomplete/AutoComplete.vue
View File

@ -4,15 +4,15 @@
role="searchbox" aria-autocomplete="list" :aria-controls="listId" :aria-labelledby="ariaLabelledBy"> role="searchbox" aria-autocomplete="list" :aria-controls="listId" :aria-labelledby="ariaLabelledBy">
<ul ref="multiContainer" :class="multiContainerClass" v-if="multiple" @click="onMultiContainerClick"> <ul ref="multiContainer" :class="multiContainerClass" v-if="multiple" @click="onMultiContainerClick">
<li v-for="(item, i) of value" :key="i" class="p-autocomplete-token p-highlight"> <li v-for="(item, i) of value" :key="i" class="p-autocomplete-token p-highlight">
<span class="p-autocomplete-token-icon pi pi-fw pi-times" @click="removeItem($event, i)"></span>
<span class="p-autocomplete-token-label">{{getItemContent(item)}}</span> <span class="p-autocomplete-token-label">{{getItemContent(item)}}</span>
<span class="p-autocomplete-token-icon pi pi-times" @click="removeItem($event, i)"></span>
</li> </li>
<li class="p-autocomplete-input-token"> <li class="p-autocomplete-input-token">
<input ref="input" type="text" autoComplete="off" v-bind="$attrs" v-on="listeners" role="searchbox" aria-autocomplete="list" :aria-controls="listId" :aria-labelledby="ariaLabelledBy"> <input ref="input" type="text" autoComplete="off" v-bind="$attrs" v-on="listeners" role="searchbox" aria-autocomplete="list" :aria-controls="listId" :aria-labelledby="ariaLabelledBy">
</li> </li>
</ul> </ul>
<i class="p-autocomplete-loader pi pi-spinner pi-spin" v-show="searching"></i> <i class="p-autocomplete-loader pi pi-spinner pi-spin" v-show="searching"></i>
<Button ref="dropdownButton" type="button" icon="pi pi-fw pi-chevron-down" class="p-autocomplete-dropdown" :disabled="$attrs.disabled" @click="onDropdownClick" v-if="dropdown"/> <Button ref="dropdownButton" type="button" icon="pi pi-chevron-down" class="p-autocomplete-dropdown" :disabled="$attrs.disabled" @click="onDropdownClick" v-if="dropdown"/>
<transition name="p-input-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave"> <transition name="p-input-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div ref="overlay" class="p-autocomplete-panel" :style="{'max-height': scrollHeight}" v-if="overlayVisible"> <div ref="overlay" class="p-autocomplete-panel" :style="{'max-height': scrollHeight}" v-if="overlayVisible">
<ul :id="listId" class="p-autocomplete-items p-autocomplete-list p-component" role="listbox"> <ul :id="listId" class="p-autocomplete-items p-autocomplete-list p-component" role="listbox">
@ -430,27 +430,8 @@ export default {
<style> <style>
.p-autocomplete { .p-autocomplete {
width: auto;
cursor: pointer;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
position: relative;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
} position: relative;
.p-autocomplete .p-autocomplete-dropdown {
width: 2em;
margin-right: 0;
}
.p-autocomplete .p-autocomplete-input {
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
} }
.p-autocomplete-loader { .p-autocomplete-loader {
@ -460,8 +441,20 @@ export default {
margin-top: -.5em; margin-top: -.5em;
} }
.p-autocomplete-query { .p-autocomplete-dd .p-autocomplete-input {
font-weight: bold; flex: 1 1 auto;
width: 1%;
}
.p-autocomplete-dd .p-autocomplete-input,
.p-autocomplete-dd .p-autocomplete-multiple-container {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-autocomplete-dd .p-autocomplete-dropdown {
border-top-left-radius: 0;
border-bottom-left-radius: 0px;
} }
.p-autocomplete .p-autocomplete-panel { .p-autocomplete .p-autocomplete-panel {
@ -473,120 +466,47 @@ export default {
overflow: auto; overflow: auto;
} }
.p-autocomplete-panel .p-autocomplete-list { .p-autocomplete-list-item {
border: 0 none;
padding: 0;
margin: 0;
}
.p-autocomplete-panel .p-autocomplete-list-item {
border: 0 none;
cursor: pointer; cursor: pointer;
font-weight: normal;
margin: 1px 0;
padding: 0.186em 0.313em;
text-align: left;
}
.p-autocomplete .p-button-icon-only,
.p-autocomplete .p-button-icon-only:enabled:hover,
.p-autocomplete .p-button-icon-only:enabled:focus,
.p-autocomplete .p-button-icon-only:enabled:active {
border-left: 0 none;
}
/* Multiple Selection */
.p-autocomplete-multiple-container {
display: inline-block;
vertical-align: middle;
} }
.p-autocomplete-multiple-container.p-inputtext { .p-autocomplete-multiple-container.p-inputtext {
clear: left;
cursor: text; cursor: text;
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
padding: 0 1.5em 0 .25em; display: flex;
align-items: center;
} }
.p-autocomplete-token { .p-autocomplete-token {
cursor: default; cursor: default;
display: inline-block; display: inline-flex;
vertical-align: middle; align-items: center;
overflow: hidden; flex: 0 0 auto;
padding: .125em .5em;
white-space: nowrap;
position: relative;
margin-right: .125em;
border: 0 none;
font-size: .9em;
}
.p-autocomplete-token-label {
display: block;
margin-right: 2em;
}
.p-autocomplete-token-icon {
margin-top: -.5em;
position: absolute;
right: 0.2em;
top: 50%;
cursor: pointer;
} }
.p-autocomplete-input-token { .p-autocomplete-input-token {
display: inline-block; flex: 1 1 auto;
vertical-align: middle; display: inline-flex;
list-style-type: none;
margin: 0 0 0 .125em;
padding: .25em .25em .25em 0;
} }
.p-autocomplete-input-token input { .p-autocomplete-input-token input {
border: 0 none; border: 0 none;
width: 10em; outline: 0 none;
outline: medium none;
background-color: transparent; background-color: transparent;
margin: 0; margin: 0;
padding: 0; padding: 0;
box-shadow: none; box-shadow: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0; border-radius: 0;
}
.p-autocomplete-dd .p-autocomplete-loader {
right: 2.25em;
}
.p-autocomplete-dd input,
.p-autocomplete-dd .p-autocomplete-multiple-container {
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.p-autocomplete-dd .p-autocomplete-dropdown {
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
border-top-left-radius: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
border-bottom-left-radius: 0px;
}
/** AutoComplete **/
.p-fluid .p-autocomplete,
.p-fluid .p-autocomplete-input {
width: 100%; width: 100%;
} }
.p-fluid .p-autocomplete .p-autocomplete-dropdown.p-button { .p-fluid .p-autocomplete {
width: 2em; display: flex;
}
.p-fluid .p-autocomplete-dd .p-autocomplete-input {
width: 1%;
} }
</style> </style>

106
src/components/button/Button.css
View File

@ -1,115 +1,25 @@
/* Button */
.p-button { .p-button {
display: inline-block; display: inline-flex;
position: relative;
padding: 0;
text-decoration: none !important;
cursor: pointer; cursor: pointer;
text-align: center;
zoom: 1;
overflow: visible; /* the overflow property removes extra width in IE */
margin-right: 0.25em; margin-right: 0.25em;
user-select: none; user-select: none;
-moz-user-select: none; align-items: center;
-webkit-user-select: none;
} }
.p-button:disabled { .p-button:disabled {
cursor: default; cursor: default;
} }
/*button text element */ .p-button-icon-only {
.p-button .p-button-text { justify-content: center;
display: block;
line-height: normal;
} }
.p-button-text-only .p-button-text {
padding: .25em 1em;
}
.p-button-icon-only .p-button-text,
.p-button-text-empty .p-button-text {
padding: .25em;
text-indent: -9999999px;
}
.p-button-text-icon-left .p-button-text {
padding: .25em 1em .25em 2.1em;
}
.p-button-text-icon-right .p-button-text {
padding: .25em 2.1em .25em 1em;
}
/*button icon element(s) */
.p-button-icon-only .p-button-icon-left,
.p-button-text-icon-left .p-button-icon-left,
.p-button-text-icon-right .p-button-icon-right {
position: absolute;
top: 50%;
margin-top: -.5em;
height: 1em;
}
.p-button-icon-only .p-button-icon-left {
top: 50%;
left: 50%;
margin-top: -.5em;
margin-left: -.5em;
width: 1em;
height: 1em;
}
.p-button-icon-left {
left: .5em;
}
.p-button-icon-right {
right: .5em;
}
/*button sets*/
.p-buttonset .p-button {
margin-left: 0;
margin-right: 0;
}
/* workarounds */
button.p-button::-moz-focus-inner {
border: 0; padding: 0; /* reset extra padding in Firefox */
}
/** Fluid **/
.p-fluid .p-button { .p-fluid .p-button {
display: flex;
width: 100%; width: 100%;
} }
.p-fluid .p-button-text-icon-left .p-button-text, .p-fluid .p-button-icon-only {
.p-fluid .p-button-text-icon-right .p-button-text { display: inline-flex;
padding-left: 1em; width: auto;
padding-right: 1em;
}
/** ButtonSet **/
.p-fluid .p-buttonset {
width: 100%;
}
.p-fluid .p-buttonset.p-buttonset-1 .p-button {width: 100%;}
.p-fluid .p-buttonset.p-buttonset-2 .p-button {width: 50%;}
.p-fluid .p-buttonset.p-buttonset-3 .p-button {width: 33.3%;}
.p-fluid .p-buttonset.p-buttonset-4 .p-button {width: 25%;}
.p-fluid .p-buttonset.p-buttonset-5 .p-button {width: 20%;}
.p-fluid .p-buttonset.p-buttonset-6 .p-button {width: 16.6%;}
@media (max-width: 640px) {
.p-fluid .p-buttonset.p-buttonset-1 .p-button,
.p-fluid .p-buttonset.p-buttonset-2 .p-button,
.p-fluid .p-buttonset.p-buttonset-3 .p-button,
.p-fluid .p-buttonset.p-buttonset-4 .p-button,
.p-fluid .p-buttonset.p-buttonset-5 .p-button,
.p-fluid .p-buttonset.p-buttonset-6 .p-button {
width: 100%;
}
} }

2
src/components/button/Button.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<button :class="buttonClass" v-on="$listeners"> <button :class="buttonClass" v-on="$listeners">
<span v-if="icon" :class="iconClass"></span> <span v-if="icon" :class="iconClass"></span>
<span class="p-button-text p-c">{{label||'p-btn'}}</span> <span class="p-button-text p-c" v-if="label">{{label}}</span>
</button> </button>
</template> </template>

260
src/components/calendar/Calendar.vue
View File

@ -75,13 +75,7 @@
</button> </button>
</div> </div>
<div class="p-separator"> <div class="p-separator">
<span class="p-separator-spacer">
<span class="pi pi-chevron-up"></span>
</span>
<span>{{timeSeparator}}</span> <span>{{timeSeparator}}</span>
<span class="p-separator-spacer">
<span class="pi pi-chevron-up"></span>
</span>
</div> </div>
<div class="p-minute-picker"> <div class="p-minute-picker">
<button class="p-link" @mousedown="onTimePickerElementMouseDown($event, 1, 1)" @mouseup="onTimePickerElementMouseUp($event)" @keydown="onContainerButtonKeydown" <button class="p-link" @mousedown="onTimePickerElementMouseDown($event, 1, 1)" @mouseup="onTimePickerElementMouseUp($event)" @keydown="onContainerButtonKeydown"
@ -95,13 +89,7 @@
</button> </button>
</div> </div>
<div class="p-separator" v-if="showSeconds"> <div class="p-separator" v-if="showSeconds">
<span class="p-separator-spacer">
<span class="pi pi-chevron-up"></span>
</span>
<span>{{timeSeparator}}</span> <span>{{timeSeparator}}</span>
<span class="p-separator-spacer">
<span class="pi pi-chevron-up"></span>
</span>
</div> </div>
<div class="p-second-picker" v-if="showSeconds"> <div class="p-second-picker" v-if="showSeconds">
<button class="p-link" @mousedown="onTimePickerElementMouseDown($event, 2, 1)" @mouseup="onTimePickerElementMouseUp($event)" @keydown="onContainerButtonKeydown" <button class="p-link" @mousedown="onTimePickerElementMouseDown($event, 2, 1)" @mouseup="onTimePickerElementMouseUp($event)" @keydown="onContainerButtonKeydown"
@ -115,13 +103,7 @@
</button> </button>
</div> </div>
<div class="p-separator" v-if="hourFormat=='12'"> <div class="p-separator" v-if="hourFormat=='12'">
<span class="p-separator-spacer">
<span class="pi pi-chevron-up"></span>
</span>
<span>{{timeSeparator}}</span> <span>{{timeSeparator}}</span>
<span class="p-separator-spacer">
<span class="pi pi-chevron-up"></span>
</span>
</div> </div>
<div class="p-ampm-picker" v-if="hourFormat=='12'"> <div class="p-ampm-picker" v-if="hourFormat=='12'">
<button class="p-link" @click="toggleAMPM($event)" type="button"> <button class="p-link" @click="toggleAMPM($event)" type="button">
@ -2020,7 +2002,6 @@ export default {
'p-datepicker p-component', 'p-datepicker p-component',
{ {
'p-datepicker-inline': this.inline, 'p-datepicker-inline': this.inline,
'p-shadow': !this.inline,
'p-disabled': this.$attrs.disabled, 'p-disabled': this.$attrs.disabled,
'p-datepicker-timeonly': this.timeOnly, 'p-datepicker-timeonly': this.timeOnly,
'p-datepicker-multiple-month': this.numberOfMonths > 1, 'p-datepicker-multiple-month': this.numberOfMonths > 1,
@ -2162,21 +2143,22 @@ export default {
<style> <style>
.p-calendar { .p-calendar {
position: relative; position: relative;
display: inline-block; display: inline-flex;
} }
.p-calendar .p-calendar-button { .p-calendar .p-inputtext {
position: absolute; flex: 1 1 auto;
height: 100%; width: 1%;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
width: 2em;
border-left: 0 none;
} }
.p-calendar .p-calendar-button:enabled:hover, .p-calendar-w-btn .p-inputtext {
.p-calendar .p-calendar-button:focus { border-top-right-radius: 0;
border-left: 0 none; border-bottom-right-radius: 0;
}
.p-calendar-button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
} }
.p-calendar .p-datepicker { .p-calendar .p-datepicker {
@ -2185,205 +2167,87 @@ export default {
/* Fluid */ /* Fluid */
.p-fluid .p-calendar { .p-fluid .p-calendar {
width: 100%; display: flex;
} }
.p-fluid .p-calendar-button { .p-fluid .p-calendar .p-inputtext {
width: 2em; width: 1%;
}
.p-fluid .p-datepicker-buttonbar button {
width: auto;
}
.p-fluid .p-calendar.p-calendar-w-btn .p-inputtext {
width: calc(100% - 2em);
} }
/* Datepicker */ /* Datepicker */
.p-datepicker { .p-datepicker {
width: auto; width: auto;
padding: .2em;
position: absolute; position: absolute;
} }
.p-datepicker.p-datepicker-inline { .p-datepicker-inline {
display: inline-block; display: inline-flex;
position: static; position: static;
} }
.p-datepicker .p-datepicker-group {
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
border-bottom-width: 0;
}
/* Header */ /* Header */
.p-datepicker .p-datepicker-header { .p-datepicker .p-datepicker-header {
position: relative; display: flex;
padding: .5em 0; align-items: center;
justify-content: space-between;
} }
.p-datepicker .p-datepicker-prev, .p-datepicker .p-datepicker-prev,
.p-datepicker .p-datepicker-next { .p-datepicker .p-datepicker-next {
position: absolute;
top: .5em;
width: 1.8em;
height: 1.8em;
cursor: pointer; cursor: pointer;
} display: inline-flex;
justify-content: center;
.p-datepicker .p-datepicker-prev { align-items: center;
left: .125em;
}
.p-datepicker .p-datepicker-next {
right: .125em;
}
.p-datepicker .p-datepicker-prev span,
.p-datepicker .p-datepicker-next span {
display: block;
position: absolute;
left: 50%;
top: 50%;
margin-top: -.5em;
margin-left: -.5em;
}
.p-datepicker .p-datepicker-title {
margin: 0 2.3em;
line-height: 1.8em;
text-align: center;
}
.p-datepicker .p-datepicker-title select {
font-size: 1em;
margin: .125em 0;
vertical-align: middle;
}
.p-datepicker select.p-datepicker-month {
margin-right: .25em;
}
.p-datepicker span.p-datepicker-year {
margin-left: .25em;
} }
/* Multiple Month DatePicker */ /* Multiple Month DatePicker */
.p-datepicker-multiple-month .p-datepicker-group { .p-datepicker-multiple-month {
display: table-cell; display: flex;
border-left-width: 0;
border-top-width: 0;
border-bottom-width: 0;
border-right-width: 1px;
} }
/* DatePicker Table */ /* DatePicker Table */
.p-datepicker table { .p-datepicker table {
width: 100%; width: 100%;
font-size: .9em;
border-collapse: collapse; border-collapse: collapse;
margin: 0 0 .4em;
}
.p-datepicker th {
padding: .5em;
text-align: center;
font-weight: bold;
border: 0;
}
.p-datepicker td {
border: 0;
padding: 0;
} }
.p-datepicker td > span, .p-datepicker td > span,
.p-datepicker td > a { .p-datepicker td > a {
display: block; display: flex;
padding: .5em; justify-content: center;
text-align: right; align-self: center;
text-decoration: none;
} }
.p-datepicker td a { .p-datepicker td a {
cursor: pointer; cursor: pointer;
} }
.p-datepicker .p-datepicker-buttonbar,
.p-datepicker .p-datepicker-footer {
padding: .5em;
}
.p-datepicker .p-datepicker-buttonbar:after {
content: "";
display: table;
clear: both;
}
.p-datepicker .p-datepicker-buttonbar > button:last-child {
float: right;
}
.p-calendar.p-calendar-w-btn input {
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
-khtml-border-top-right-radius: 0px;
border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
-khtml-border-bottom-right-radius: 0px;
border-bottom-right-radius: 0px;
}
/* Month Picker */ /* Month Picker */
.p-monthpicker .p-monthpicker-month { .p-monthpicker-month {
width: 33.3%; width: 33.3%;
display: inline-block; display: inline-flex;
text-align: center; align-content: center;
padding: .5em; justify-content: center;
cursor: pointer; cursor: pointer;
} }
.p-datepicker-monthpicker select.p-datepicker-year {
width: auto;
}
/* Time Picker */ /* Time Picker */
.p-timepicker { .p-timepicker {
text-align: center; display: flex;
padding: .5em 0; justify-content: center;
} }
.p-timepicker > div { .p-timepicker .p-separator {
display: inline-block; display: flex;
margin-left: .5em; justify-content: center;
min-width: 1.5em; align-items: center;
} }
.p-timepicker > .p-minute-picker, .p-timepicker button {
.p-timepicker > .p-second-picker {
margin-left: 0;
}
.p-timepicker > .p-separator {
margin-left: 0px;
min-width: .75em;
}
.p-timepicker > .p-separator .p-separator-spacer {
visibility: hidden;
display: block;
}
.p-timepicker > div button {
display: block; display: block;
cursor: pointer; cursor: pointer;
} }
.p-timepicker > div button:last-child {
margin-top: .3em;
}
input[type=text]::-ms-clear {
display: none;
}
/* Touch UI */ /* Touch UI */
.p-datepicker-touch-ui, .p-datepicker-touch-ui,
.p-calendar .p-datepicker-touch-ui { .p-calendar .p-datepicker-touch-ui {
@ -2393,46 +2257,4 @@ input[type=text]::-ms-clear {
min-width: 80vw; min-width: 80vw;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.p-datepicker-touch-ui.p-datepicker th {
padding: 2em 0;
}
.p-datepicker-touch-ui.p-datepicker td {
padding: 0;
}
.p-datepicker-touch-ui.p-datepicker td span,
.p-datepicker-touch-ui.p-datepicker td a {
padding: 2em 0;
}
.p-datepicker-touch-ui .p-timepicker {
padding: 1em 0;
}
.p-datepicker-touch-ui .p-timepicker > div a {
font-size: 2em;
}
.p-datepicker-mask {
position: fixed;
width: 100%;
height: 100%;
}
@media screen and (max-width: 40em) {
.p-datepicker-multiple-month {
width: 17em;
overflow: auto;
}
.p-datepicker-touch-ui.p-datepicker th {
padding: 1em 0;
}
.p-datepicker-touch-ui.p-datepicker td span,
.p-datepicker-touch-ui.p-datepicker td a {
padding: 1em 0;
}
}
</style> </style>

30
src/components/checkbox/Checkbox.css
View File

@ -1,31 +1,11 @@
.p-checkbox { .p-checkbox {
display: inline-block; display: inline-flex;
cursor: pointer; cursor: pointer;
vertical-align: middle;
margin-right: .25em;
user-select: none; user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
} }
.p-checkbox .p-checkbox-box { .p-checkbox-box {
width: 1.125em; display: flex;
height: 1.125em; justify-content: center;
line-height: 1.125em; align-items: center;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
text-align: center;
}
.p-checkbox .p-checkbox-icon {
display: block;
}
.p-checkbox-label {
vertical-align: middle;
}
.p-checkbox + label {
vertical-align: middle;
} }

2
src/components/checkbox/Checkbox.vue
View File

@ -3,7 +3,7 @@
<div class="p-hidden-accessible"> <div class="p-hidden-accessible">
<input ref="input" type="checkbox" :checked="checked" :value="value" v-bind="$attrs" @focus="onFocus($event)" @blur="onBlur($event)" :aria-labelledby="ariaLabelledBy"> <input ref="input" type="checkbox" :checked="checked" :value="value" v-bind="$attrs" @focus="onFocus($event)" @blur="onBlur($event)" :aria-labelledby="ariaLabelledBy">
</div> </div>
<div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="checkbox" :aria-checked="checked"> <div ref="box" :class="['p-checkbox-box', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="checkbox" :aria-checked="checked">
<span :class="['p-checkbox-icon p-c', {'pi pi-check': checked}]"></span> <span :class="['p-checkbox-icon p-c', {'pi pi-check': checked}]"></span>
</div> </div>
</div> </div>

58
src/components/chips/Chips.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div :class="['p-chips p-component', {'p-inputwrapper-filled': value, 'p-inputwrapper-focus': focused}]"> <div :class="['p-chips p-component', {'p-inputwrapper-filled': value, 'p-inputwrapper-focus': focused}]">
<ul :class="['p-inputtext', {'p-disabled': $attrs.disabled, 'p-focus': focused}]" @click="onWrapperClick()"> <ul :class="['p-inputtext p-chips-multiple-container', {'p-disabled': $attrs.disabled, 'p-focus': focused}]" @click="onWrapperClick()">
<li v-for="(val,i) of value" :key="`${i}_${val}`" class="p-chips-token p-highlight"> <li v-for="(val,i) of value" :key="`${i}_${val}`" class="p-chips-token p-highlight">
<slot name="chip" :value="val"> <slot name="chip" :value="val">
<span class="p-chips-token-icon pi pi-fw pi-times" @click="removeItem($event, i)"></span>
<span class="p-chips-token-label">{{val}}</span> <span class="p-chips-token-label">{{val}}</span>
<span class="p-chips-token-icon pi pi-fw pi-times" @click="removeItem($event, i)"></span>
</slot> </slot>
</li> </li>
<li class="p-chips-input-token"> <li class="p-chips-input-token">
@ -151,70 +151,42 @@ export default {
<style> <style>
.p-chips { .p-chips {
display: inline-block; display: inline-flex;
} }
.p-chips > ul.p-inputtext { .p-chips-multiple-container.p-inputtext {
clear: left;
cursor: text; cursor: text;
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
padding: 0 .25em; display: flex;
align-items: center;
} }
.p-chips-token { .p-chips-token {
cursor: default; cursor: default;
display: inline-block; display: inline-flex;
vertical-align: middle; align-items: center;
overflow: hidden; flex: 0 0 auto;
padding: .125em .5em;
white-space: nowrap;
position: relative;
margin-right: .125em;
border: 0 none;
font-size: .9em;
}
.p-chips-token .p-chips-token-label {
display: block;
margin-right: 2em;
}
.p-chips > .p-disabled .p-chips-token-label {
margin-right: 0;
}
.p-chips-token .p-chips-token-icon {
margin-top: -.5em;
position: absolute;
right: 0.2em;
top: 50%;
cursor: pointer;
} }
.p-chips-input-token { .p-chips-input-token {
display: inline-block; flex: 1 1 auto;
vertical-align: middle; display: inline-flex;
list-style-type: none;
margin: 0 0 0 .125em;
padding: .25em .25em .25em 0;
} }
.p-chips-input-token .p-inputtext { .p-chips-input-token input {
border: 0 none; border: 0 none;
width: 10em; outline: 0 none;
outline: medium none;
background-color: transparent; background-color: transparent;
margin: 0; margin: 0;
padding: 0; padding: 0;
box-shadow: none; box-shadow: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0; border-radius: 0;
width: 100%;
} }
.p-fluid .p-chips { .p-fluid .p-chips {
display: block; display: flex;
} }
</style> </style>

100
src/components/dropdown/Dropdown.vue
View File

@ -22,7 +22,7 @@
<span class="p-dropdown-filter-icon pi pi-search"></span> <span class="p-dropdown-filter-icon pi pi-search"></span>
</div> </div>
<div ref="itemsWrapper" class="p-dropdown-items-wrapper" :style="{'max-height': scrollHeight}"> <div ref="itemsWrapper" class="p-dropdown-items-wrapper" :style="{'max-height': scrollHeight}">
<ul class="p-dropdown-items p-dropdown-list p-component" role="listbox"> <ul class="p-dropdown-items p-component" role="listbox">
<li v-for="(option, i) of visibleOptions" :class="['p-dropdown-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" <li v-for="(option, i) of visibleOptions" :class="['p-dropdown-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]"
:aria-label="getOptionLabel(option)" :key="getOptionRenderKey(option)" @click="onOptionSelect($event, option)" role="option" :aria-selected="isSelected(option)"> :aria-label="getOptionLabel(option)" :key="getOptionRenderKey(option)" @click="onOptionSelect($event, option)" role="option" :aria-selected="isSelected(option)">
<slot name="option" :option="option" :index="i"> <slot name="option" :option="option" :index="i">
@ -453,126 +453,80 @@ export default {
<style> <style>
.p-dropdown { .p-dropdown {
display: inline-block; display: inline-flex;
cursor: pointer;
position: relative; position: relative;
cursor: pointer;
vertical-align: middle;
} }
.p-dropdown .p-dropdown-clear-icon { .p-dropdown-clear-icon {
position: absolute; position: absolute;
right: 2em;
top: 50%; top: 50%;
font-size: 1em;
height: 1em;
margin-top: -.5em; margin-top: -.5em;
} }
.p-dropdown .p-dropdown-trigger { .p-dropdown-trigger {
border-right: none; display: flex;
border-top: none; align-items: center;
border-bottom: none; justify-content: center;
cursor: pointer;
width: 1.5em;
height: 100%;
position: absolute;
right: 0;
top: 0;
padding: 0 .25em;
} }
.p-dropdown .p-dropdown-trigger .p-dropdown-trigger-icon { .p-dropdown-label {
top: 50%;
left: 50%;
margin-top: -.5em;
margin-left: -.5em;
position: absolute;
}
.p-dropdown .p-dropdown-label {
display: block; display: block;
border: none;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
font-weight: normal; flex: 1 1 auto;
width: 100%; width: 1%;
padding-right: 1.5em; text-overflow: ellipsis;
} }
.p-dropdown .p-dropdown-item-empty, .p-dropdown-label-empty {
.p-dropdown .p-dropdown-label-empty {
overflow: hidden; overflow: hidden;
visibility: hidden; visibility: hidden;
} }
.p-dropdown.p-disabled .p-dropdown-trigger, input.p-dropdown-label {
.p-dropdown.p-disabled .p-dropdown-label {
cursor: default;
}
.p-dropdown label.p-dropdown-label {
cursor: pointer;
}
.p-dropdown input.p-dropdown-label {
cursor: default; cursor: default;
} }
.p-dropdown .p-dropdown-panel { .p-dropdown .p-dropdown-panel {
min-width: 100%; min-width: 100%;
z-index: 1;
} }
.p-dropdown-panel { .p-dropdown-panel {
position: absolute; position: absolute;
height: auto;
} }
.p-dropdown-panel .p-dropdown-items-wrapper { .p-dropdown-items-wrapper {
overflow: auto; overflow: auto;
} }
.p-dropdown-panel .p-dropdown-item { .p-dropdown-item {
font-weight: normal;
border: 0 none;
cursor: pointer; cursor: pointer;
margin: 1px 0;
padding: .125em .25em;
text-align: left;
} }
.p-dropdown-panel .p-dropdown-item-group { .p-dropdown-items {
font-weight: bold;
}
.p-dropdown-panel .p-dropdown-list {
padding: 0.4em;
border: 0 none;
margin: 0;
list-style-type: none; list-style-type: none;
} }
.p-dropdown-panel .p-dropdown-filter { .p-dropdown-filter {
width: 100%; width: 100%;
box-sizing: border-box;
padding-right: 1.5em;
} }
.p-dropdown-panel .p-dropdown-filter-container { .p-dropdown-filter-container {
position: relative; position: relative;
margin: 0;
padding: 0.4em;
display: inline-block;
} }
.p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon { .p-dropdown-filter-icon {
position: absolute; position: absolute;
top: .8em; top: 50%;
right: 1em; margin-top: -.5em;
} }
/** Dropdown **/
.p-fluid .p-dropdown { .p-fluid .p-dropdown {
width: 100%; display: flex;
}
.p-fluid .p-dropdown .p-dropdown-label {
width: 1%;
} }
</style> </style>

4
src/components/inputnumber/InputNumber.vue
View File

@ -43,11 +43,11 @@ export default {
}, },
incrementButtonIcon: { incrementButtonIcon: {
type: String, type: String,
default: 'pi pi-caret-up', default: 'pi pi-chevron-up',
}, },
decrementButtonIcon: { decrementButtonIcon: {
type: String, type: String,
default: 'pi pi-caret-down', default: 'pi pi-chevron-down',
}, },
locale: { locale: {
type: String, type: String,

79
src/components/inputtext/InputText.css
View File

@ -1,103 +1,62 @@
.p-inputtext { .p-inputtext {
margin: 0; margin: 0;
outline: medium none;
padding: .25em;
font-weight: normal;
} }
.p-fluid .p-inputtext { .p-fluid .p-inputtext {
width: 100%; width: 100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
} }
/* InputGroup */
.p-inputgroup { .p-inputgroup {
display: -webkit-box;
display: -webkit-flex;
display: flex; display: flex;
align-items: stretch;
width: 100%;
} }
.p-inputgroup .p-inputgroup-addon { .p-inputgroup .p-inputgroup-addon {
display: inline-block; display: flex;
text-align: center; align-items: center;
min-width: 1.5em; justify-content: center;
padding: .25em;
border-width: 1px;
border-style: solid;
}
.p-inputgroup .p-inputgroup-addon + .p-inputgroup-addon {
border-left: 0 none;
}
.p-inputgroup .p-inputtext {
padding-left: .5em;
}
.p-inputgroup .p-inputtext:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: 0 none;
}
.p-inputgroup .p-inputtext:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0 none;
} }
.p-inputgroup .p-button { .p-inputgroup .p-button {
margin-right: 0; margin-right: 0;
border-radius: 0;
} }
.p-fluid .p-inputgroup .p-button { .p-fluid .p-inputgroup .p-button {
width: auto; width: auto;
} }
.p-inputgroup .p-inputtext,
.p-fluid .p-inputgroup .p-inputtext { .p-fluid .p-inputgroup .p-inputtext {
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto; flex: 1 1 auto;
} width: 1%;
.p-inputgroup .p-checkbox,
.p-inputgroup .p-radiobutton {
margin-right: 0;
vertical-align: bottom;
} }
/* Floating Label */ /* Floating Label */
.p-float-label { .p-float-label {
display: block; display: block;
position:relative; position: relative;
} }
.p-float-label label { .p-float-label label {
font-weight:normal; position: absolute;
position:absolute; pointer-events: none;
pointer-events:none; top: 50%;
left: .25em; margin-top: -.5em;
top: 50%; transition: 0.3s ease all;
margin-top: -.5em; line-height: 1;
transition: 0.3s ease all;
-moz-transition: 0.3s ease all;
-webkit-transition: 0.3s ease all;
color: #898989;
line-height: 1;
} }
.p-float-label input:focus ~ label, .p-float-label input:focus ~ label,
.p-float-label input.p-filled ~ label, .p-float-label input.p-filled ~ label,
.p-float-label .p-inputwrapper-focus ~ label, .p-float-label .p-inputwrapper-focus ~ label,
.p-float-label .p-inputwrapper-filled ~ label { .p-float-label .p-inputwrapper-filled ~ label {
top:-.75em; top:-.75em;
font-size:12px; font-size:12px;
} }
.p-float-label .input:-webkit-autofill ~ label { .p-float-label .input:-webkit-autofill ~ label {
top:-20px; top:-20px;
font-size:12px; font-size:12px;
} }

61
src/components/listbox/Listbox.vue
View File

@ -2,7 +2,7 @@
<div class="p-listbox p-inputtext p-component"> <div class="p-listbox p-inputtext p-component">
<div class="p-listbox-header" v-if="filter"> <div class="p-listbox-header" v-if="filter">
<div class="p-listbox-filter-container"> <div class="p-listbox-filter-container">
<input type="text" class="p-inputtext p-component" v-model="filterValue" :placeholder="filterPlaceholder"> <input type="text" class="p-listbox-filter p-inputtext p-component" v-model="filterValue" :placeholder="filterPlaceholder">
<span class="p-listbox-filter-icon pi pi-search"></span> <span class="p-listbox-filter-icon pi pi-search"></span>
</div> </div>
</div> </div>
@ -232,72 +232,31 @@ export default {
</script> </script>
<style> <style>
.p-listbox { .p-listbox-list-wrapper {
padding: .25em; overflow: auto;
width: 10em;
} }
.p-listbox .p-listbox-list-wrapper { .p-listbox-list {
overflow:auto;
}
.p-listbox .p-listbox-list {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.p-listbox .p-listbox-item { .p-listbox-item {
padding: .25em;
border: 0 none;
cursor: pointer;
font-weight: normal;
margin-bottom: 1px;
}
.p-listbox .p-listbox-item > span {
vertical-align: middle;
}
.p-listbox .p-listbox-item:last-child {
margin-bottom: 0;
}
.p-listbox.p-disabled .p-listbox-item {
cursor: default;
}
.p-listbox-header {
margin-bottom: 0.3em;
padding: .125em .2em;
position: relative;
}
.p-listbox-header .p-checkbox {
display: inline-block;
vertical-align: middle;
cursor: pointer; cursor: pointer;
} }
.p-listbox-header .p-listbox-filter-container { .p-listbox-filter-container {
display: inline-block;
vertical-align: middle;
position: relative; position: relative;
width: 100%;
} }
.p-listbox-header.p-listbox-header-w-checkbox .p-listbox-filter-container { .p-listbox-filter-icon {
width: calc(100% - 2em);
}
.p-listbox-header .p-listbox-filter-container .p-listbox-filter-icon {
position: absolute; position: absolute;
top: .25em; top: 50%;
left: .25em; margin-top: -.5em;
} }
.p-listbox-header .p-inputtext { .p-listbox-filter {
padding: .125em .125em .125em 1.25em;
width: 100%; width: 100%;
} }
</style> </style>

141
src/components/multiselect/MultiSelect.vue
View File

@ -34,7 +34,7 @@
</button> </button>
</div> </div>
<div ref="itemsWrapper" class="p-multiselect-items-wrapper" :style="{'max-height': scrollHeight}"> <div ref="itemsWrapper" class="p-multiselect-items-wrapper" :style="{'max-height': scrollHeight}">
<ul class="p-multiselect-items p-multiselect-list p-component" role="listbox" aria-multiselectable="true"> <ul class="p-multiselect-items p-component" role="listbox" aria-multiselectable="true">
<li v-for="(option, i) of visibleOptions" :class="['p-multiselect-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" role="option" :aria-selected="isSelected(option)" <li v-for="(option, i) of visibleOptions" :class="['p-multiselect-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" role="option" :aria-selected="isSelected(option)"
:aria-label="getOptionLabel(option)" :key="getOptionRenderKey(option)" @click="onOptionSelect($event, option)" @keydown="onOptionKeyDown($event, option)" :tabindex="tabindex||'0'"> :aria-label="getOptionLabel(option)" :key="getOptionRenderKey(option)" @click="onOptionSelect($event, option)" @keydown="onOptionKeyDown($event, option)" :tabindex="tabindex||'0'">
<div class="p-checkbox p-component"> <div class="p-checkbox p-component">
@ -410,46 +410,26 @@ export default {
<style> <style>
.p-multiselect { .p-multiselect {
display: inline-block; display: inline-flex;
cursor: pointer;
position: relative; position: relative;
width: auto;
cursor: pointer;
} }
.p-multiselect .p-multiselect-trigger { .p-multiselect-trigger {
border-right: none; display: flex;
border-top: none; align-items: center;
border-bottom: none; justify-content: center;
cursor: pointer;
width: 1.5em;
height: 100%;
position: absolute;
right: 0;
top: 0;
padding: 0 .25em;
}
.p-multiselect .p-multiselect-trigger .p-multiselect-trigger-icon {
top: 50%;
left: 50%;
margin-top: -.5em;
margin-left: -.5em;
position: absolute;
} }
.p-multiselect .p-multiselect-label-container { .p-multiselect .p-multiselect-label-container {
overflow: hidden; overflow: hidden;
flex: 1 1 auto;
} }
.p-multiselect .p-multiselect-label { .p-multiselect .p-multiselect-label {
display: block; display: block;
padding: .25em 2em .25em .25em;
width: auto;
border: none;
cursor: pointer;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis;
} }
.p-multiselect-label-empty { .p-multiselect-label-empty {
@ -457,109 +437,50 @@ export default {
visibility: hidden; visibility: hidden;
} }
.p-multiselect.p-disabled .p-multiselect-trigger,
.p-multiselect.p-disabled .p-multiselect-label {
cursor: auto;
}
.p-multiselect-panel {
padding: 0.2em;
position: absolute;
min-width: 10em;
z-index: 2;
}
.p-multiselect .p-multiselect-panel { .p-multiselect .p-multiselect-panel {
min-width: 100%; min-width: 100%;
} }
.p-multiselect-panel .p-multiselect-items-wrapper { .p-multiselect-panel {
overflow: auto; position: absolute;
position: relative;
padding: 0.2em 0;
} }
.p-multiselect-panel .p-multiselect-list { .p-multiselect-items-wrapper {
border: 0 none; overflow: auto;
margin: 0; }
.p-multiselect-items {
list-style-type: none; list-style-type: none;
} }
.p-multiselect-panel .p-multiselect-item { .p-multiselect-item {
border: 0 none;
cursor: pointer; cursor: pointer;
font-weight: normal; display: flex;
margin: 1px 0; align-items: center;
padding: .125em .25em;
text-align: left;
white-space: nowrap;
display: block;
position: relative;
}
.p-multiselect-panel .p-multiselect-item .p-checkbox {
display: inline-block;
vertical-align: middle;
}
.p-multiselect-panel .p-multiselect-item > span {
display: inline-block;
vertical-align: middle;
} }
.p-multiselect-header { .p-multiselect-header {
margin-bottom: 0.3em; display: flex;
padding: .25em; align-items: center;
justify-content: space-between;
}
.p-multiselect-filter-container {
position: relative; position: relative;
text-align: left; flex: 1 1 auto;
} }
.p-multiselect-header .p-checkbox { .p-multiselect-filter-icon {
display: inline-block;
vertical-align: middle;
cursor:pointer;
}
.p-multiselect-header .p-multiselect-filter-container {
position: relative;
display: inline-block;
vertical-align: middle;
width: 65%;
}
.p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
position: absolute; position: absolute;
top: .25em; top: 50%;
left: .125em; margin-top: -.5em;
} }
.p-multiselect-header .p-inputtext { .p-multiselect-filter-container .p-inputtext {
padding: .125em .125em .125em 1.25em;
width: 100%; width: 100%;
} }
.p-multiselect-header .p-multiselect-close {
position: absolute;
right: .375em;
top: .375em;
display: block;
border: 0 none;
}
.p-multiselect-header a.p-multiselect-all,
.p-multiselect-header a.p-multiselect-none {
float:left;
margin-right: 10px;
display: block;
}
.p-multiselect-header .p-multiselect-close.p-state-hover {
padding:0px;
}
.p-fluid .p-multiselect { .p-fluid .p-multiselect {
width: 100%; display: flex;
box-sizing: border-box;
} }
</style> </style>

16
src/components/password/Password.css
View File

@ -1,19 +1,7 @@
.p-password-panel { .p-password-meter {
padding: .25em .5em;
margin-top: 2px;
}
.p-password-panel .p-password-meter {
height: 10px;
background:transparent url("./images/password-meter.png") no-repeat left top; background:transparent url("./images/password-meter.png") no-repeat left top;
padding: 0;
margin: 0;
} }
.p-password-info {
margin-top: .25em;
}
.p-password-panel-overlay { .p-password-panel-overlay {
position: absolute; position: absolute;
} }

34
src/components/radiobutton/RadioButton.css
View File

@ -1,35 +1,11 @@
.p-radiobutton { .p-radiobutton {
display:inline-block; display: inline-flex;
cursor: pointer; cursor: pointer;
vertical-align: middle;
margin-right: .25em;
user-select: none; user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
} }
.p-radiobutton .p-radiobutton-box { .p-radiobutton-box {
width: 1.125em; display: flex;
height: 1.125em; justify-content: center;
line-height: 1.125em; align-items: center;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
text-align: center;
position: relative;
}
.p-radiobutton .p-radiobutton-icon {
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 1em;
height: 1em;
margin-top: -.5em;
margin-left: -.5em;
}
.p-radiobutton + label {
vertical-align: middle;
} }

2
src/components/radiobutton/RadioButton.vue
View File

@ -3,7 +3,7 @@
<div class="p-hidden-accessible"> <div class="p-hidden-accessible">
<input ref="input" type="radio" :checked="checked" :value="value" v-bind="$attrs" @focus="onFocus($event)" @blur="onBlur($event)" :aria-labelledby="ariaLabelledBy"> <input ref="input" type="radio" :checked="checked" :value="value" v-bind="$attrs" @focus="onFocus($event)" @blur="onBlur($event)" :aria-labelledby="ariaLabelledBy">
</div> </div>
<div ref="box" :class="['p-radiobutton-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="radio" :aria-checked="checked"> <div ref="box" :class="['p-radiobutton-box', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="radio" :aria-checked="checked">
<span :class="['p-radiobutton-icon p-c', {'pi pi-circle-on': checked}]"></span> <span :class="['p-radiobutton-icon p-c', {'pi pi-circle-on': checked}]"></span>
</div> </div>
</div> </div>

6
src/components/rating/Rating.vue
View File

@ -67,14 +67,10 @@ export default {
</script> </script>
<style> <style>
.p-rating .p-rating-icon { .p-rating-icon {
cursor: pointer; cursor: pointer;
} }
.p-rating {
font-size: 1.25em;
}
.p-rating.p-disabled .p-rating-icon, .p-rating.p-disabled .p-rating-icon,
.p-rating.p-rating-readonly .p-rating-icon { .p-rating.p-rating-readonly .p-rating-icon {
cursor: default; cursor: default;

53
src/components/slider/Slider.vue
View File

@ -339,47 +339,40 @@ export default {
<style> <style>
.p-slider { .p-slider {
position: relative; position: relative;
text-align: left;
}
.p-slider .p-slider-handle {
position: absolute;
width: 1.2em;
height: 1.2em;
cursor: default;
-ms-touch-action: none;
touch-action: none;
}
.p-slider .p-slider-range {
position: absolute;
font-size: .7em;
display: block;
border: 0;
background-position: 0 0;
} }
.p-slider-horizontal { .p-slider .p-slider-handle {
height: .8em; position: absolute;
cursor: default;
touch-action: none;
} }
.p-slider-horizontal .p-slider-handle {
top: -.3em; .p-slider-range {
margin-left: -.6em; position: absolute;
display: block;
} }
.p-slider-horizontal .p-slider-range { .p-slider-horizontal .p-slider-range {
top: 0; top: 0;
left: 0;
height: 100%; height: 100%;
} }
.p-slider-horizontal .p-slider-handle {
margin-top: -.5em;
}
.p-slider-vertical { .p-slider-vertical {
width: .8em;
height: 100px; height: 100px;
} }
.p-slider-vertical .p-slider-handle {
left: -.3em;
margin-left: 0;
margin-bottom: -.6em;
}
.p-slider-vertical .p-slider-range { .p-slider-vertical .p-slider-range {
left: 0; left: 50%;
width: 100%;
bottom: 0; bottom: 0;
width: 100%;
}
.p-slider-vertical .p-slider-handle {
margin-left: -.5em;
} }
</style> </style>

45
src/components/splitbutton/SplitButton.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="p-splitbutton p-buttonset p-component"> <div class="p-splitbutton p-buttonset p-component">
<PVSButton type="button" :icon="icon" :label="label" @click="onClick" :disabled="disabled" :tabindex="tabindex" /> <PVSButton type="button" class="p-splitbutton-defaultbutton" :icon="icon" :label="label" @click="onClick" :disabled="disabled" :tabindex="tabindex" />
<PVSButton type="button" class="p-splitbutton-menubutton" icon="pi pi-caret-down" @click="onDropdownButtonClick" :disabled="disabled" <PVSButton type="button" class="p-splitbutton-menubutton" icon="pi pi-caret-down" @click="onDropdownButtonClick" :disabled="disabled"
aria-haspopup="true" :aria-controls="ariaId + '_overlay'"/> aria-haspopup="true" :aria-controls="ariaId + '_overlay'"/>
<PVSMenu :id="ariaId + '_overlay'" ref="menu" :model="model" :popup="true" :autoZIndex="autoZIndex" <PVSMenu :id="ariaId + '_overlay'" ref="menu" :model="model" :popup="true" :autoZIndex="autoZIndex"
@ -70,44 +70,23 @@ export default {
<style scoped> <style scoped>
.p-splitbutton { .p-splitbutton {
display: inline-flex;
position: relative; position: relative;
display: inline-block;
zoom: 1;
} }
.p-splitbutton .p-button.p-splitbutton-menubutton { .p-splitbutton-defaultbutton {
width: 2em; flex: 1 1 auto;
vertical-align: top;
} }
.p-splitbutton .p-menu { .p-splitbutton-menubutton {
left: auto; display: flex;
top: auto; align-items: center;
justify-content: center;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
} }
.p-splitbutton.p-disabled button { .p-fluid .p-splitbutton {
cursor: default; display: flex;
}
.p-fluid .p-splitbutton {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
}
.p-fluid .p-splitbutton .p-button:first-child {
width: calc(100% - 2em);
}
.p-fluid .p-splitbutton .p-button.p-splitbutton-menubutton {
width: 2em;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
}
.p-splitbutton.p-button-secondary .p-button:first-child {
border-right: 0 none;
} }
</style> </style>

2
src/components/tristatecheckbox/TriStateCheckbox.vue
View File

@ -3,7 +3,7 @@
<div class="p-hidden-accessible"> <div class="p-hidden-accessible">
<input ref="input" type="checkbox" :checked="value === true" v-bind="$attrs" @focus="onFocus()" @blur="onBlur()" :aria-labelledby="ariaLabelledBy"> <input ref="input" type="checkbox" :checked="value === true" v-bind="$attrs" @focus="onFocus()" @blur="onBlur()" :aria-labelledby="ariaLabelledBy">
</div> </div>
<div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': (value != null), 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="checkbox" :aria-checked="value === true"> <div ref="box" :class="['p-checkbox-box', {'p-highlight': (value != null), 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="checkbox" :aria-checked="value === true">
<span :class="['p-checkbox-icon p-c', icon]"></span> <span :class="['p-checkbox-icon p-c', icon]"></span>
</div> </div>
</div> </div>

21
src/views/checkbox/CheckboxDemo.vue
View File

@ -10,25 +10,25 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Basic</h3> <h3 class="first">Basic</h3>
<Checkbox id="binary" v-model="checked" :binary="true" /> <Checkbox id="binary" v-model="checked" :binary="true" />
<label for="binary" class="p-checkbox-label" style="font-weight: bold">{{checked}}</label> <label for="binary" style="font-weight: bold">{{checked}}</label>
<h3>Multiple</h3> <h3>Multiple</h3>
<div class="p-grid"> <div class="p-grid">
<div class="p-col-12"> <div class="p-col-12">
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" /> <Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
<label for="city1" class="p-checkbox-label">Chicago</label> <label for="city1">Chicago</label>
</div> </div>
<div class="p-col-12"> <div class="p-col-12">
<Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" /> <Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
<label for="city2" class="p-checkbox-label">Los Angeles</label> <label for="city2">Los Angeles</label>
</div> </div>
<div class="p-col-12"> <div class="p-col-12">
<Checkbox id="city3" name="city" value="New York" v-model="cities" /> <Checkbox id="city3" name="city" value="New York" v-model="cities" />
<label for="city3" class="p-checkbox-label">New York</label> <label for="city3">New York</label>
</div> </div>
<div class="p-col-12"> <div class="p-col-12">
<Checkbox id="city4" name="city" value="San Francisco" v-model="cities" /> <Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
<label for="city4" class="p-checkbox-label">San Francisco</label> <label for="city4">San Francisco</label>
</div> </div>
</div> </div>
<p>Selected Cities : <span style="font-weight: bold">{{cities}}</span></p> <p>Selected Cities : <span style="font-weight: bold">{{cities}}</span></p>
@ -37,7 +37,7 @@
<div class="p-grid"> <div class="p-grid">
<div v-for="theme of themes" :key="theme.key" class="p-col-12"> <div v-for="theme of themes" :key="theme.key" class="p-col-12">
<Checkbox :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/> <Checkbox :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/>
<label :for="theme.key" class="p-checkbox-label">{{theme.name}}</label> <label :for="theme.key">{{theme.name}}</label>
</div> </div>
</div> </div>
<p>Selected Themes: <span style="font-weight: bold">{{this.selectedThemes}}</span></p> <p>Selected Themes: <span style="font-weight: bold">{{this.selectedThemes}}</span></p>
@ -66,4 +66,11 @@ export default {
'CheckboxDoc': CheckboxDoc 'CheckboxDoc': CheckboxDoc
} }
} }
</script> </script>
<style scoped>
label {
vertical-align: middle;
margin-left: .5em;
}
</style>

4
src/views/inputnumber/InputNumberDoc.vue
View File

@ -156,13 +156,13 @@ Vertical
<tr> <tr>
<td>incrementButtonIcon</td> <td>incrementButtonIcon</td>
<td>string</td> <td>string</td>
<td>pi pi-caret-up</td> <td>pi pi-chevron-up</td>
<td>Style class of the increment button.</td> <td>Style class of the increment button.</td>
</tr> </tr>
<tr> <tr>
<td>decrementButtonIcon</td> <td>decrementButtonIcon</td>
<td>string</td> <td>string</td>
<td>pi pi-caret-down</td> <td>pi pi-chevron-down</td>
<td>Style class of the decrement button.</td> <td>Style class of the decrement button.</td>
</tr> </tr>
<tr> <tr>

2
src/views/listbox/ListboxDemo.vue
View File

@ -9,7 +9,7 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Single</h3> <h3 class="first">Single</h3>
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" /> <Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15em" />
<h3>Advanced with Templating, Filtering and Multiple Selection</h3> <h3>Advanced with Templating, Filtering and Multiple Selection</h3>
<Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"> <Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">

2
src/views/listbox/ListboxDoc.vue
View File

@ -225,7 +225,7 @@ data() {
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;h3&gt;Single&lt;/h3&gt; &lt;h3&gt;Single&lt;/h3&gt;
&lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" /&gt; &lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15em" /&gt;
&lt;h3&gt;Advanced with Templating, Filtering and Multiple Selection&lt;/h3&gt; &lt;h3&gt;Advanced with Templating, Filtering and Multiple Selection&lt;/h3&gt;
&lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt; &lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt;

19
src/views/radiobutton/RadioButtonDemo.vue
View File

@ -12,19 +12,19 @@
<div class="p-grid"> <div class="p-grid">
<div class="p-col-12"> <div class="p-col-12">
<RadioButton id="city1" name="city" value="Chicago" v-model="city" /> <RadioButton id="city1" name="city" value="Chicago" v-model="city" />
<label for="city1" class="p-radiobutton-label">Chicago</label> <label for="city1">Chicago</label>
</div> </div>
<div class="p-col-12"> <div class="p-col-12">
<RadioButton id="city2" name="city" value="Los Angeles" v-model="city" /> <RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
<label for="city2" class="p-radiobutton-label">Los Angeles</label> <label for="city2">Los Angeles</label>
</div> </div>
<div class="p-col-12"> <div class="p-col-12">
<RadioButton id="city3" name="city" value="New York" v-model="city" /> <RadioButton id="city3" name="city" value="New York" v-model="city" />
<label for="city3" class="p-radiobutton-label">New York</label> <label for="city3">New York</label>
</div> </div>
<div class="p-col-12"> <div class="p-col-12">
<RadioButton id="city4" name="city" value="San Francisco" v-model="city" /> <RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
<label for="city4" class="p-radiobutton-label">San Francisco</label> <label for="city4">San Francisco</label>
</div> </div>
</div> </div>
<p>Selected City: <span style="font-weight: bold">{{this.city}}</span></p> <p>Selected City: <span style="font-weight: bold">{{this.city}}</span></p>
@ -33,7 +33,7 @@
<div class="p-grid"> <div class="p-grid">
<div v-for="theme of themes" :key="theme.key" class="p-col-12"> <div v-for="theme of themes" :key="theme.key" class="p-col-12">
<RadioButton :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" /> <RadioButton :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" />
<label :for="theme.key" class="p-radiobutton-label">{{theme.name}}</label> <label :for="theme.key">{{theme.name}}</label>
</div> </div>
</div> </div>
<p>Selected Theme: <span style="font-weight: bold">{{this.selectedTheme}}</span></p> <p>Selected Theme: <span style="font-weight: bold">{{this.selectedTheme}}</span></p>
@ -61,4 +61,11 @@ export default {
'RadioButtonDoc': RadioButtonDoc 'RadioButtonDoc': RadioButtonDoc
} }
} }
</script> </script>
<style scoped>
label {
vertical-align: middle;
margin-left: .5em;
}
</style>