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

Implemented Spinner Component

pull/5/head
cagataycivici 2018-12-25 11:27:10 +03:00
parent 84bc9b7759
commit 92b3987ebf
8 changed files with 282 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/AppMenu.vue
View File

@ -16,6 +16,7 @@
<router-link to="/radiobutton">&#9679; RadioButton</router-link>
<router-link to="/rating">&#9679; Rating</router-link>
<router-link to="/selectbutton">&#9679; SelectButton</router-link>
<router-link to="/spinner">&#9679; Spinner</router-link>
<router-link to="/textarea">&#9679; Textarea</router-link>
<router-link to="/togglebutton">&#9679; ToggleButton</router-link>
<router-link to="/tristatecheckbox">&#9679; TriCheckbox</router-link>

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

@ -11,6 +11,7 @@
@import '../../components/panel/Panel.css';
@import '../../components/radiobutton/RadioButton.css';
@import '../../components/rating/Rating.css';
@import '../../components/spinner/Spinner.css';
@import '../../components/tabview/TabView.css';
@import '../../components/textarea/Textarea.css';
@import '../../components/toolbar/Toolbar.css';

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

@ -1,6 +1,6 @@
<template>
<div class="p-chips p-component">
<ul :class="['p-inputtext', {'p-disabled': disabled, 'p-focus': focused}]" @click="onWrapperClick($event)">
<ul :class="['p-inputtext', {'p-disabled': disabled, 'p-focus': focused}]" @click="onWrapperClick()">
<li v-for="(val,i) of value" :key="val" class="p-chips-token p-highlight">
<slot :value="val">
<span class="p-chips-token-icon pi pi-fw pi-times" @click="removeItem($event, i)"></span>
@ -16,6 +16,7 @@
<script>
export default {
inheritAttrs: false,
props: {
value: Array,
disabled: Boolean,
@ -27,7 +28,7 @@ export default {
};
},
methods: {
onWrapperClick(event) {
onWrapperClick() {
this.$refs.input.focus();
},
onFocus(event) {

53
src/components/spinner/Spinner.css Normal file
View File

@ -0,0 +1,53 @@
.p-spinner {
display: inline-block;
overflow: visible;
padding: 0;
position: relative;
vertical-align: middle;
}
.p-spinner-input {
vertical-align: middle;
padding-right: 1.5em;
}
.p-spinner-button {
cursor: default;
display: block;
height: 50%;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
right: 0;
text-align: center;
vertical-align: middle;
width: 1.5em;
}
.p-spinner .p-spinner-button-icon {
position: absolute;
top: 50%;
left: 50%;
margin-top: -.5em;
margin-left: -.5em;
width: 1em;
}
.p-spinner-button-up {
top: 0;
}
.p-spinner-button-down {
bottom: 0;
}
/* Fluid */
.p-fluid .p-spinner {
width: 100%;
}
.p-fluid .p-spinner .p-spinner-input {
padding-right: 2em;
width: 100%;
}
.p-fluid .p-spinner .p-spinner-button {
width: 1.5em;
}
.p-fluid .p-spinner .p-spinner-button .p-spinner-button-icon {
left: .375em;
}

176
src/components/spinner/Spinner.vue Normal file
View File

@ -0,0 +1,176 @@
<template>
<span :class="containerClass">
<input ref="input" :class="inputClass" v-bind="$attrs" v-on="listeners" :value="value">
<button type="button" :class="upButtonClass" @mousedown="onButtonMouseDown($event, 1)" @mouseup="onButtonMouseUp" @mouseleave="onButtonMouseLeave"
@keydown="onButtonKeyDown($event, 1)" @keyup="onButtonKeyUp" :disabled="$attrs.disabled">
<span class="p-spinner-button-icon pi pi-caret-up"></span>
</button>
<button type="button" :class="downButtonClass" @mousedown="onButtonMouseDown($event, -1)" @mouseup="onButtonMouseUp" @mouseleave="onButtonMouseLeave"
@keydown="onButtonKeyDown($event, -1)" @keyup="onButtonKeyUp" :disabled="$attrs.disabled">
<span class="p-spinner-button-icon pi pi-caret-down"></span>
</button>
</span>
</template>
<script>
export default {
inheritAttrs: false,
props: {
value: null,
step: {
type: Number,
default: 1
},
min: Number,
max: Number
},
data() {
return {
focused: false
}
},
methods: {
repeat(event, interval, dir) {
let i = interval || 500;
this.clearTimer();
this.timer = setTimeout(() => {
this.repeat(event, 40, dir);
}, i);
this.spin(event, dir);
},
spin(event, dir) {
let step = this.step * dir;
let currentValue;
let newValue;
if (this.value)
currentValue = (typeof this.value === 'string') ? this.parseValue(this.value) : this.value;
else
currentValue = 0;
if (this.precision)
newValue = parseFloat(this.toFixed(currentValue + step, this.precision));
else
newValue = currentValue + step;
if (this.min !== null && newValue < this.min) {
newValue = this.min;
}
if (this.max !== null && newValue > this.max) {
newValue= this.max;
}
this.$emit('input', newValue);
},
toFixed(value, precision) {
let power = Math.pow(10, precision || 0);
return String(Math.round(value * power) / power);
},
parseValue(val) {
let value = val.trim();
if (val === '') {
value = this.min != null ? this.min : null;
}
else {
if (this.precision)
value = parseFloat(val.replace(',', '.'));
else
value = parseInt(val, 10);
if (!isNaN(value)) {
if (this.max !== null && value > this.max) {
value = this.props.max;
}
if (this.min !== null && value < this.min) {
value = this.props.min;
}
}
else {
value = null;
}
}
return value;
},
onButtonMouseDown(event, direction) {
this.$refs.input.focus();
this.repeat(event, null, direction);
event.preventDefault();
},
onButtonMouseUp() {
this.clearTimer();
},
onButtonMouseLeave() {
this.clearTimer();
},
onButtonKeyUp() {
this.clearTimer();
},
onButtonKeyDown(event, direction) {
if (event.keyCode === 32 || event.keyCode === 13) {
this.repeat(event, null, direction);
}
},
clearTimer() {
if (this.timer) {
clearInterval(this.timer);
}
}
},
computed: {
listeners() {
return {
...this.$listeners,
input: event => {
this.$emit('input', event.target.value)
},
focus: event => {
this.focused = true;
},
blur: event => {
this.focused = false;
const parsedValue = this.parseValue(event.target.value);
this.$emit('input', parsedValue);
},
keydown: event => {
if (event.which === 38) {
this.spin(1);
event.preventDefault();
}
else if (event.which === 40) {
this.spin(-1);
event.preventDefault();
}
}
};
},
precision() {
if (Math.floor(this.step) === 0)
return this.step.toString().split(/[,]|[.]/)[1].length;
else
return null;
},
containerClass() {
return ['p-spinner p-component', {'p-inputwrapper-filled': this.filled, 'p-inputwrapper-focus': this.focused}];
},
inputClass() {
return ['p-inputtext p-component p-spinner-input', {'p-filled': this.filled, 'p-disabled': this.$attrs.disabled}];
},
upButtonClass() {
return ['p-spinner-button p-spinner-button-up p-button p-component', {'p-disabled': this.$attrs.disabled}];
},
downButtonClass() {
return ['p-spinner-button p-spinner-button-down p-button p-component', {'p-disabled': this.$attrs.disabled}];
},
filled() {
return (this.value != null && this.value.toString().length > 0)
}
}
}
</script>

2
src/main.js
View File

@ -15,6 +15,7 @@ import Panel from './components/panel/Panel';
import Rating from './components/rating/Rating';
import RadioButton from './components/radiobutton/RadioButton';
import SelectButton from './components/selectbutton/SelectButton';
import Spinner from './components/spinner/Spinner';
import Textarea from './components/textarea/Textarea';
import Toolbar from './components/toolbar/Toolbar';
import TabView from './components/tabview/TabView';
@ -42,6 +43,7 @@ Vue.component('p-panel', Panel);
Vue.component('p-radioButton', RadioButton);
Vue.component('p-rating', Rating);
Vue.component('p-selectButton', SelectButton);
Vue.component('p-spinner', Spinner);
Vue.component('p-tabView', TabView);
Vue.component('p-tabPanel', TabPanel);
Vue.component('p-textarea', Textarea);

5
src/router.js
View File

@ -81,6 +81,11 @@ export default new Router({
name: 'selectbutton',
component: () => import('./views/selectbutton/SelectButtonDemo.vue')
},
{
path: '/spinner',
name: 'spinner',
component: () => import('./views/spinner/SpinnerDemo.vue')
},
{
path: '/textarea',
name: 'textarea',

41
src/views/spinner/SpinnerDemo.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Spinner</h1>
<p>Spinner is an input component to provide a numerical input.</p>
</div>
</div>
<div class="content-section implementation">
<h3 class="first">Basic</h3>
<p-spinner v-model="value1" />
<h3>Min/Max</h3>
<p-spinner v-model="value2" :min="0" :max="100" />
<h3>Step</h3>
<p-spinner v-model="value3" :step="0.25" />
<h3>Disabled</h3>
<p-spinner v-model="value4" :disabled="true" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
value1: null,
value2: null,
value3: null,
value4: null
}
}
}
</script>
<style>
</style>