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)
Copyright (c) 2016-2019 PrimeTek
Copyright (c) 2018-2020 PrimeTek
Permission is hereby granted, free of charge, to any person obtaining a copy
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">
<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">
<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-icon pi pi-times" @click="removeItem($event, i)"></span>
</li>
<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">
</li>
</ul>
<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">
<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">
@ -430,27 +430,8 @@ export default {
<style>
.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;
}
.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;
position: relative;
}
.p-autocomplete-loader {
@ -460,8 +441,20 @@ export default {
margin-top: -.5em;
}
.p-autocomplete-query {
font-weight: bold;
.p-autocomplete-dd .p-autocomplete-input {
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 {
@ -473,120 +466,47 @@ export default {
overflow: auto;
}
.p-autocomplete-panel .p-autocomplete-list {
border: 0 none;
padding: 0;
margin: 0;
}
.p-autocomplete-panel .p-autocomplete-list-item {
border: 0 none;
.p-autocomplete-list-item {
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 {
clear: left;
cursor: text;
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0 1.5em 0 .25em;
display: flex;
align-items: center;
}
.p-autocomplete-token {
cursor: default;
display: inline-block;
vertical-align: middle;
overflow: hidden;
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;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.p-autocomplete-input-token {
display: inline-block;
vertical-align: middle;
list-style-type: none;
margin: 0 0 0 .125em;
padding: .25em .25em .25em 0;
flex: 1 1 auto;
display: inline-flex;
}
.p-autocomplete-input-token input {
border: 0 none;
width: 10em;
outline: medium none;
outline: 0 none;
background-color: transparent;
margin: 0;
padding: 0;
box-shadow: none;
-moz-border-radius: 0;
-webkit-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%;
}
.p-fluid .p-autocomplete .p-autocomplete-dropdown.p-button {
width: 2em;
.p-fluid .p-autocomplete {
display: flex;
}
.p-fluid .p-autocomplete-dd .p-autocomplete-input {
width: 1%;
}
</style>

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

@ -1,115 +1,25 @@
/* Button */
.p-button {
display: inline-block;
position: relative;
padding: 0;
text-decoration: none !important;
display: inline-flex;
cursor: pointer;
text-align: center;
zoom: 1;
overflow: visible; /* the overflow property removes extra width in IE */
margin-right: 0.25em;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
align-items: center;
}
.p-button:disabled {
cursor: default;
}
/*button text element */
.p-button .p-button-text {
display: block;
line-height: normal;
.p-button-icon-only {
justify-content: center;
}
.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 {
display: flex;
width: 100%;
}
.p-fluid .p-button-text-icon-left .p-button-text,
.p-fluid .p-button-text-icon-right .p-button-text {
padding-left: 1em;
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%;
}
.p-fluid .p-button-icon-only {
display: inline-flex;
width: auto;
}

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

@ -1,7 +1,7 @@
<template>
<button :class="buttonClass" v-on="$listeners">
<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>
</template>

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

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

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

@ -1,31 +1,11 @@
.p-checkbox {
display: inline-block;
display: inline-flex;
cursor: pointer;
vertical-align: middle;
margin-right: .25em;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
.p-checkbox .p-checkbox-box {
width: 1.125em;
height: 1.125em;
line-height: 1.125em;
-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;
.p-checkbox-box {
display: flex;
justify-content: center;
align-items: center;
}

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

@ -3,7 +3,7 @@
<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">
</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>
</div>
</div>

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

@ -1,10 +1,10 @@
<template>
<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">
<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-icon pi pi-fw pi-times" @click="removeItem($event, i)"></span>
</slot>
</li>
<li class="p-chips-input-token">
@ -151,70 +151,42 @@ export default {
<style>
.p-chips {
display: inline-block;
display: inline-flex;
}
.p-chips > ul.p-inputtext {
clear: left;
.p-chips-multiple-container.p-inputtext {
cursor: text;
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0 .25em;
display: flex;
align-items: center;
}
.p-chips-token {
cursor: default;
display: inline-block;
vertical-align: middle;
overflow: hidden;
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;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.p-chips-input-token {
display: inline-block;
vertical-align: middle;
list-style-type: none;
margin: 0 0 0 .125em;
padding: .25em .25em .25em 0;
flex: 1 1 auto;
display: inline-flex;
}
.p-chips-input-token .p-inputtext {
.p-chips-input-token input {
border: 0 none;
width: 10em;
outline: medium none;
outline: 0 none;
background-color: transparent;
margin: 0;
padding: 0;
box-shadow: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
width: 100%;
}
.p-fluid .p-chips {
display: block;
display: flex;
}
</style>

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

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

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

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

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

@ -1,103 +1,62 @@
.p-inputtext {
margin: 0;
outline: medium none;
padding: .25em;
font-weight: normal;
}
.p-fluid .p-inputtext {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
}
/* InputGroup */
.p-inputgroup {
display: -webkit-box;
display: -webkit-flex;
display: flex;
align-items: stretch;
width: 100%;
}
.p-inputgroup .p-inputgroup-addon {
display: inline-block;
text-align: center;
min-width: 1.5em;
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;
display: flex;
align-items: center;
justify-content: center;
}
.p-inputgroup .p-button {
margin-right: 0;
border-radius: 0;
}
.p-fluid .p-inputgroup .p-button {
width: auto;
}
.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;
}
.p-inputgroup .p-checkbox,
.p-inputgroup .p-radiobutton {
margin-right: 0;
vertical-align: bottom;
width: 1%;
}
/* Floating Label */
.p-float-label {
display: block;
position:relative;
position: relative;
}
.p-float-label label {
font-weight:normal;
position:absolute;
pointer-events:none;
left: .25em;
top: 50%;
margin-top: -.5em;
transition: 0.3s ease all;
-moz-transition: 0.3s ease all;
-webkit-transition: 0.3s ease all;
color: #898989;
line-height: 1;
position: absolute;
pointer-events: none;
top: 50%;
margin-top: -.5em;
transition: 0.3s ease all;
line-height: 1;
}
.p-float-label input:focus ~ label,
.p-float-label input.p-filled ~ label,
.p-float-label .p-inputwrapper-focus ~ label,
.p-float-label .p-inputwrapper-filled ~ label {
top:-.75em;
font-size:12px;
top:-.75em;
font-size:12px;
}
.p-float-label .input:-webkit-autofill ~ label {
top:-20px;
font-size:12px;
top:-20px;
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-header" v-if="filter">
<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>
</div>
</div>
@ -232,72 +232,31 @@ export default {
</script>
<style>
.p-listbox {
padding: .25em;
width: 10em;
.p-listbox-list-wrapper {
overflow: auto;
}
.p-listbox .p-listbox-list-wrapper {
overflow:auto;
}
.p-listbox .p-listbox-list {
.p-listbox-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.p-listbox .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;
.p-listbox-item {
cursor: pointer;
}
.p-listbox-header .p-listbox-filter-container {
display: inline-block;
vertical-align: middle;
.p-listbox-filter-container {
position: relative;
width: 100%;
}
.p-listbox-header.p-listbox-header-w-checkbox .p-listbox-filter-container {
width: calc(100% - 2em);
}
.p-listbox-header .p-listbox-filter-container .p-listbox-filter-icon {
.p-listbox-filter-icon {
position: absolute;
top: .25em;
left: .25em;
top: 50%;
margin-top: -.5em;
}
.p-listbox-header .p-inputtext {
padding: .125em .125em .125em 1.25em;
.p-listbox-filter {
width: 100%;
}
</style>

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

@ -34,7 +34,7 @@
</button>
</div>
<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)"
:aria-label="getOptionLabel(option)" :key="getOptionRenderKey(option)" @click="onOptionSelect($event, option)" @keydown="onOptionKeyDown($event, option)" :tabindex="tabindex||'0'">
<div class="p-checkbox p-component">
@ -410,46 +410,26 @@ export default {
<style>
.p-multiselect {
display: inline-block;
display: inline-flex;
cursor: pointer;
position: relative;
width: auto;
cursor: pointer;
}
.p-multiselect .p-multiselect-trigger {
border-right: none;
border-top: none;
border-bottom: none;
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-trigger {
display: flex;
align-items: center;
justify-content: center;
}
.p-multiselect .p-multiselect-label-container {
overflow: hidden;
flex: 1 1 auto;
}
.p-multiselect .p-multiselect-label {
display: block;
padding: .25em 2em .25em .25em;
width: auto;
border: none;
cursor: pointer;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.p-multiselect-label-empty {
@ -457,109 +437,50 @@ export default {
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 {
min-width: 100%;
}
.p-multiselect-panel .p-multiselect-items-wrapper {
overflow: auto;
position: relative;
padding: 0.2em 0;
.p-multiselect-panel {
position: absolute;
}
.p-multiselect-panel .p-multiselect-list {
border: 0 none;
margin: 0;
.p-multiselect-items-wrapper {
overflow: auto;
}
.p-multiselect-items {
list-style-type: none;
}
.p-multiselect-panel .p-multiselect-item {
border: 0 none;
.p-multiselect-item {
cursor: pointer;
font-weight: normal;
margin: 1px 0;
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;
display: flex;
align-items: center;
}
.p-multiselect-header {
margin-bottom: 0.3em;
padding: .25em;
display: flex;
align-items: center;
justify-content: space-between;
}
.p-multiselect-filter-container {
position: relative;
text-align: left;
flex: 1 1 auto;
}
.p-multiselect-header .p-checkbox {
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 {
.p-multiselect-filter-icon {
position: absolute;
top: .25em;
left: .125em;
top: 50%;
margin-top: -.5em;
}
.p-multiselect-header .p-inputtext {
padding: .125em .125em .125em 1.25em;
.p-multiselect-filter-container .p-inputtext {
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 {
width: 100%;
box-sizing: border-box;
display: flex;
}
</style>

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

@ -1,19 +1,7 @@
.p-password-panel {
padding: .25em .5em;
margin-top: 2px;
}
.p-password-panel .p-password-meter {
height: 10px;
.p-password-meter {
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 {
position: absolute;
}

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

@ -1,35 +1,11 @@
.p-radiobutton {
display:inline-block;
display: inline-flex;
cursor: pointer;
vertical-align: middle;
margin-right: .25em;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
.p-radiobutton .p-radiobutton-box {
width: 1.125em;
height: 1.125em;
line-height: 1.125em;
-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;
.p-radiobutton-box {
display: flex;
justify-content: center;
align-items: center;
}

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

@ -3,7 +3,7 @@
<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">
</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>
</div>
</div>

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

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

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

@ -339,47 +339,40 @@ export default {
<style>
.p-slider {
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 {
height: .8em;
.p-slider .p-slider-handle {
position: absolute;
cursor: default;
touch-action: none;
}
.p-slider-horizontal .p-slider-handle {
top: -.3em;
margin-left: -.6em;
.p-slider-range {
position: absolute;
display: block;
}
.p-slider-horizontal .p-slider-range {
top: 0;
top: 0;
left: 0;
height: 100%;
}
.p-slider-horizontal .p-slider-handle {
margin-top: -.5em;
}
.p-slider-vertical {
width: .8em;
height: 100px;
}
.p-slider-vertical .p-slider-handle {
left: -.3em;
margin-left: 0;
margin-bottom: -.6em;
}
.p-slider-vertical .p-slider-range {
left: 0;
width: 100%;
left: 50%;
bottom: 0;
width: 100%;
}
.p-slider-vertical .p-slider-handle {
margin-left: -.5em;
}
</style>

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

@ -1,6 +1,6 @@
<template>
<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"
aria-haspopup="true" :aria-controls="ariaId + '_overlay'"/>
<PVSMenu :id="ariaId + '_overlay'" ref="menu" :model="model" :popup="true" :autoZIndex="autoZIndex"
@ -70,44 +70,23 @@ export default {
<style scoped>
.p-splitbutton {
display: inline-flex;
position: relative;
display: inline-block;
zoom: 1;
}
.p-splitbutton .p-button.p-splitbutton-menubutton {
width: 2em;
vertical-align: top;
.p-splitbutton-defaultbutton {
flex: 1 1 auto;
}
.p-splitbutton .p-menu {
left: auto;
top: auto;
.p-splitbutton-menubutton {
display: flex;
align-items: center;
justify-content: center;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.p-splitbutton.p-disabled button {
cursor: default;
}
.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;
.p-fluid .p-splitbutton {
display: flex;
}
</style>

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

@ -3,7 +3,7 @@
<div class="p-hidden-accessible">
<input ref="input" type="checkbox" :checked="value === true" v-bind="$attrs" @focus="onFocus()" @blur="onBlur()" :aria-labelledby="ariaLabelledBy">
</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>
</div>
</div>

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

@ -10,25 +10,25 @@
<div class="content-section implementation">
<h3 class="first">Basic</h3>
<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>
<div class="p-grid">
<div class="p-col-12">
<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 class="p-col-12">
<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 class="p-col-12">
<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 class="p-col-12">
<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>
<p>Selected Cities : <span style="font-weight: bold">{{cities}}</span></p>
@ -37,7 +37,7 @@
<div class="p-grid">
<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'"/>
<label :for="theme.key" class="p-checkbox-label">{{theme.name}}</label>
<label :for="theme.key">{{theme.name}}</label>
</div>
</div>
<p>Selected Themes: <span style="font-weight: bold">{{this.selectedThemes}}</span></p>
@ -66,4 +66,11 @@ export default {
'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>
<td>incrementButtonIcon</td>
<td>string</td>
<td>pi pi-caret-up</td>
<td>pi pi-chevron-up</td>
<td>Style class of the increment button.</td>
</tr>
<tr>
<td>decrementButtonIcon</td>
<td>string</td>
<td>pi pi-caret-down</td>
<td>pi pi-chevron-down</td>
<td>Style class of the decrement button.</td>
</tr>
<tr>

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

@ -9,7 +9,7 @@
<div class="content-section implementation">
<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>
<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>
<template v-pre>
&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;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-col-12">
<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 class="p-col-12">
<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 class="p-col-12">
<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 class="p-col-12">
<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>
<p>Selected City: <span style="font-weight: bold">{{this.city}}</span></p>
@ -33,7 +33,7 @@
<div class="p-grid">
<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'" />
<label :for="theme.key" class="p-radiobutton-label">{{theme.name}}</label>
<label :for="theme.key">{{theme.name}}</label>
</div>
</div>
<p>Selected Theme: <span style="font-weight: bold">{{this.selectedTheme}}</span></p>
@ -61,4 +61,11 @@ export default {
'RadioButtonDoc': RadioButtonDoc
}
}
</script>
</script>
<style scoped>
label {
vertical-align: middle;
margin-left: .5em;
}
</style>