140 lines
3.1 KiB
Vue
140 lines
3.1 KiB
Vue
<template lang="pug">
|
|
base-input-container.gap-y-2(:label="label", :style="{width: width + 'px' }")
|
|
q-input(
|
|
v-model="value",
|
|
:name="name",
|
|
:class="{'circle': circle, 'font-input': true}",
|
|
:input-style="{ color: textColor, borderColor: borderColor, resize: resize}",
|
|
:borderless="borderless",
|
|
:placeholder="placeholder",
|
|
:outlined="outlined",
|
|
:dense="dense",
|
|
:readonly="readonly",
|
|
:disable="disabled",
|
|
:filled="filled",
|
|
:bg-color="filled || standout ? '' : 'white'",
|
|
:rules="rule",
|
|
:lazy-rules="lazyRule",
|
|
:item-aligned="itemAligned",
|
|
:no-error-icon="noErrorIcon",
|
|
mask="time",
|
|
:maxlength="maxLength",
|
|
:autogrow="autogrow",
|
|
:square="square",
|
|
:standout="standout"
|
|
:accept="accept",
|
|
:debounce="debounce",
|
|
hide-bottom-space
|
|
)
|
|
template(v-slot:append)
|
|
q-icon(
|
|
name="app:time",
|
|
class="cursor-pointer",
|
|
size="16px"
|
|
)
|
|
q-popup-proxy(cover, transition-show="scale", transition-hide="scale")
|
|
q-time(v-model="value", mask="HH:mm")
|
|
.flex.items-center.justify-end
|
|
q-btn(
|
|
v-close-popup,
|
|
label="Закрыть",
|
|
color="primary",
|
|
flat,
|
|
no-caps
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
|
|
|
|
export default {
|
|
name: "BaseInputTime",
|
|
components: { BaseInputContainer },
|
|
props: {
|
|
circle: Boolean,
|
|
dense: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
outlined: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
square: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
filled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
borderless: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
autogrow: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
standout: {
|
|
type: [Boolean, String],
|
|
default: false,
|
|
},
|
|
accept: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
resize: {
|
|
type: String,
|
|
default: "none",
|
|
},
|
|
debounce: [String, Number],
|
|
width: Number,
|
|
maxLength: Number,
|
|
textColor: String,
|
|
borderColor: String,
|
|
rule: Array,
|
|
lazyRule: [Boolean, String],
|
|
noErrorIcon: Boolean,
|
|
itemAligned: Boolean,
|
|
modelValue: String,
|
|
placeholder: String,
|
|
disabled: Boolean,
|
|
label: String,
|
|
readonly: Boolean,
|
|
iconLeft: Boolean,
|
|
name: String,
|
|
},
|
|
emits: ["update:modelValue"],
|
|
computed: {
|
|
value: {
|
|
get() {
|
|
return this.modelValue ? this.modelValue : null;
|
|
},
|
|
set(value) {
|
|
this.$emit("update:modelValue", value);
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.font-input
|
|
font-feature-settings: 'pnum' on, 'lnum' on
|
|
|
|
.circle
|
|
width: 100%
|
|
height: 100%
|
|
border-radius: 50%
|
|
z-index: 5
|
|
opacity: 0
|
|
cursor: pointer
|
|
</style>
|
|
<style lang="sass">
|
|
.q-field--standout.q-field--readonly .q-field__control:before
|
|
border: none !important
|
|
.q-field--standout .q-field__control
|
|
background: var(--bg-light-grey) !important
|
|
</style>
|