sk_fems_ui commit
This commit is contained in:
unknown
147
components/form/CustomDatepicker.vue
Normal file
147
components/form/CustomDatepicker.vue
Normal file
@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<v-row class="search-box">
|
||||
<v-col v-if="label" :cols="labelCols">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon>mdi-checkbox-blank-circle</v-icon>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''">
|
||||
<template v-if="mode == 'date'">
|
||||
<v-calendar
|
||||
v-model="dateModel"
|
||||
:mode="mode"
|
||||
@input="datepickerChangeEvt($event)"
|
||||
></v-calendar>
|
||||
</template>
|
||||
<template v-else-if="mode == 'dateRange'">
|
||||
<v-date-picker
|
||||
v-model="range"
|
||||
is-range
|
||||
@input="datepickerChangeEvt($event)"
|
||||
>
|
||||
<template v-slot="{ inputValue, inputEvents }">
|
||||
<v-row>
|
||||
<v-col class="pa-0">
|
||||
<v-text-field
|
||||
readonly
|
||||
:value="inputValue.start"
|
||||
v-on="inputEvents.start"
|
||||
append-icon="mdi-calendar"
|
||||
class="v-input__custom"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="1" class="pa-0"></v-col>
|
||||
<v-col class="pa-0">
|
||||
<v-text-field
|
||||
readonly
|
||||
:value="inputValue.end"
|
||||
v-on="inputEvents.end"
|
||||
append-icon="mdi-calendar"
|
||||
class="v-input__custom"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
</v-date-picker>
|
||||
</template>
|
||||
<template v-else-if="mode == 'dateTimeRange'">
|
||||
<v-date-picker
|
||||
v-model="range"
|
||||
mode="dateTime"
|
||||
is-range
|
||||
is24hr
|
||||
@input="datepickerChangeEvt($event)"
|
||||
>
|
||||
<template v-slot="{ inputValue, inputEvents }">
|
||||
<v-text-field
|
||||
readonly
|
||||
:value="`${inputValue.start} ~ ${inputValue.end}`"
|
||||
v-on="inputEvents.start"
|
||||
append-icon="mdi-calendar"
|
||||
class="v-input__custom"
|
||||
></v-text-field>
|
||||
</template>
|
||||
</v-date-picker>
|
||||
</template>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
model: {
|
||||
require: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: '',
|
||||
require: false,
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
require: false,
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'date',
|
||||
require: false,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
// VCalendar,
|
||||
},
|
||||
computed: {
|
||||
dateRangeText() {
|
||||
if (this.fromDateVal.length > 0) {
|
||||
return this.fromDateVal.join(' ~ ');
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fromDateVal: [],
|
||||
fromDateMenu: false,
|
||||
dateModel: null,
|
||||
range: {
|
||||
start: new Date(2020, 9, 12),
|
||||
end: new Date(2020, 9, 16),
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.dateModel = this.model;
|
||||
},
|
||||
datepickerChangeEvt(e) {
|
||||
this.$emit('update:model', e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
::v-deep {
|
||||
.v-text-field__details {
|
||||
display: none;
|
||||
}
|
||||
.v-input__slot {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
103
components/form/CustomSelect.vue
Normal file
103
components/form/CustomSelect.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<v-row class="search-box">
|
||||
<v-col v-if="label" :cols="labelCols" class="pa-0">
|
||||
<label for="" class="search-box-label">
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''" class="pa-0">
|
||||
<v-select
|
||||
v-model="selectModel"
|
||||
:items="selectItems"
|
||||
:label="placeholder"
|
||||
:item-text="itemText"
|
||||
:item-value="itemValue"
|
||||
@change="selectChangeEvt($event)"
|
||||
solo
|
||||
append-icon="mdi-chevron-down"
|
||||
class="v-select__custom"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
model: {
|
||||
require: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: '',
|
||||
require: false,
|
||||
},
|
||||
labelPrepend: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
require: false,
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
require: false,
|
||||
},
|
||||
selectItems: {
|
||||
type: Array,
|
||||
default: [],
|
||||
require: true,
|
||||
},
|
||||
itemText: {
|
||||
type: String,
|
||||
default: '',
|
||||
require: false,
|
||||
},
|
||||
itemValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
require: false,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
model(value) {
|
||||
this.selectModel = value;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectModel: null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.selectModel = this.model;
|
||||
},
|
||||
selectChangeEvt(e) {
|
||||
this.$emit('update:model', e);
|
||||
this.$emit('selectChangeEvt', e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
::v-deep {
|
||||
.v-text-field__details {
|
||||
display: none;
|
||||
}
|
||||
.v-input__slot {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
83
components/form/CustomText.vue
Normal file
83
components/form/CustomText.vue
Normal file
@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<v-row class="search-box">
|
||||
<v-col v-if="label" :cols="labelCols" class="pa-0">
|
||||
<label for="" class="search-box-label">
|
||||
<v-icon v-if="labelPrepend">mdi-checkbox-blank-circle</v-icon>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
<v-col :cols="label ? textCols : ''" class="pa-0">
|
||||
<v-text-field
|
||||
v-model="textModel"
|
||||
@keyup="textChangeEvt($event)"
|
||||
class="v-input__custom"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
model: {
|
||||
require: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: '',
|
||||
require: false,
|
||||
},
|
||||
labelPrepend: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
require: false,
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
require: false,
|
||||
},
|
||||
labelCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 4,
|
||||
},
|
||||
textCols: {
|
||||
type: Number,
|
||||
require: false,
|
||||
default: 7,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
model(value) {
|
||||
this.textModel = value;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
textModel: null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.textModel = this.model;
|
||||
},
|
||||
textChangeEvt(e) {
|
||||
this.$emit('update:model', e.target.value);
|
||||
this.$emit('textChangeEvt', e.target.value);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
::v-deep {
|
||||
.v-text-field__details {
|
||||
display: none;
|
||||
}
|
||||
.v-input__slot {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user