kill base-input from prject

This commit is contained in:
ogerly 2021-06-12 15:25:39 +02:00
parent ee853c63b8
commit 750cfb5f00
5 changed files with 12 additions and 205 deletions

View File

@ -1,187 +0,0 @@
<template>
<validation-provider
:rules="rules"
:name="name"
v-bind="$attrs"
v-slot="{ errors, valid, invalid, validated }"
>
<b-form-group>
<slot name="label">
<label v-if="label" :class="labelClasses">
{{ label }}
</label>
</slot>
<div
:class="[
{ 'input-group': hasIcon },
{ focused: focused },
{ 'input-group-alternative': alternative },
{ 'has-label': label || $slots.label },
inputGroupClasses,
]"
>
<div v-if="prependIcon || $slots.prepend" class="input-group-prepend">
<span class="input-group-text">
<slot name="prepend">
<i :class="prependIcon"></i>
</slot>
</span>
</div>
<slot v-bind="slotData">
<input
:value="value"
:type="type"
v-on="listeners"
v-bind="$attrs"
:valid="valid"
:required="required"
class="form-control"
:class="[
{ 'is-valid': valid && validated && successMessage },
{ 'is-invalid': invalid && validated },
inputClasses,
]"
/>
</slot>
<div v-if="appendIcon || $slots.append" class="input-group-append">
<span class="input-group-text">
<slot name="append">
<i :class="appendIcon"></i>
</slot>
</span>
</div>
<slot name="infoBlock"></slot>
</div>
<slot name="success">
<div class="valid-feedback" v-if="valid && validated && successMessage">
{{ successMessage }}
</div>
</slot>
<slot name="error">
<div v-if="errors[0]" class="invalid-feedback" style="display: block">
{{ errors[0] }}
</div>
</slot>
</b-form-group>
</validation-provider>
</template>
<script>
export default {
inheritAttrs: false,
name: 'base-input',
props: {
required: {
type: Boolean,
description: 'Whether input is required (adds an asterix *)',
},
group: {
type: Boolean,
description: 'Whether input is an input group (manual override in special cases)',
},
alternative: {
type: Boolean,
description: 'Whether input is of alternative layout',
},
label: {
type: String,
description: 'Input label (text before input)',
},
error: {
type: String,
description: 'Input error (below input)',
},
successMessage: {
type: String,
description: 'Input success message',
default: '',
},
labelClasses: {
type: String,
description: 'Input label css classes',
default: 'form-control-label',
},
inputClasses: {
type: String,
description: 'Input css classes',
},
inputGroupClasses: {
type: String,
description: 'Input group css classes',
},
value: {
type: [String, Number],
description: 'Input value',
},
type: {
type: String,
description: 'Input type',
default: 'text',
},
appendIcon: {
type: String,
description: 'Append icon (right)',
},
prependIcon: {
type: String,
description: 'Prepend icon (left)',
},
rules: {
type: [String, Array, Object],
description: 'Vee validate validation rules',
default: '',
},
name: {
type: String,
description: 'Input name (used for validation)',
default: '',
},
},
data() {
return {
focused: false,
}
},
computed: {
listeners() {
return {
...this.$listeners,
input: this.updateValue,
focus: this.onFocus,
blur: this.onBlur,
}
},
slotData() {
return {
focused: this.focused,
error: this.error,
...this.listeners,
}
},
hasIcon() {
const { append, prepend } = this.$slots
return (
append !== undefined ||
prepend !== undefined ||
this.appendIcon !== undefined ||
this.prependIcon !== undefined ||
this.group
)
},
},
methods: {
updateValue(evt) {
const value = evt.target.value
this.$emit('input', value)
},
onFocus(evt) {
this.focused = true
this.$emit('focus', evt)
},
onBlur(evt) {
this.focused = false
this.$emit('blur', evt)
},
},
}
</script>
<style></style>

View File

@ -1,4 +1,3 @@
import BaseInput from './Inputs/BaseInput.vue'
import Badge from './Badge'
import BaseTable from './BaseTable.vue'
@ -18,7 +17,6 @@ import SidebarPlugin from './SidebarPlugin'
export {
Badge,
BaseInput,
Card,
StatsCard,
BaseTable,

View File

@ -1,4 +1,3 @@
import BaseInput from '@/components/Inputs/BaseInput.vue'
import Card from '@/components/Cards/Card.vue'
import StatsCard from '@/components/Cards/StatsCard.vue'
import Badge from '@/components/Badge.vue'
@ -8,7 +7,6 @@ import { ValidationProvider, ValidationObserver } from 'vee-validate'
const GlobalComponents = {
install(Vue) {
Vue.component(Badge.name, Badge)
Vue.component(BaseInput.name, BaseInput)
Vue.component(BaseNav.name, BaseNav)
Vue.component(Card.name, Card)
Vue.component(StatsCard.name, StatsCard)

View File

@ -4,32 +4,32 @@
<b-tab :title="names.thisMonth" active>
<b-row>
<b-col lg="3">
<base-input :label="$t('communitys.form.hours')">
<b-input :label="$t('communitys.form.hours')">
<b-form-input
type="number"
size="lg"
placeholder="23"
style="font-size: xx-large; padding-left: 5px"
/>
</base-input>
<base-input :label="$t('communitys.form.date_period')">
</b-input>
<b-input :label="$t('communitys.form.date_period')">
<flat-pickr
class="form-control"
v-model="date"
:config="config"
style="font-size: 0.5em; padding-left: 5px"
></flat-pickr>
</base-input>
</b-input>
</b-col>
<b-col lg="9">
<base-input :label="$t('communitys.form.hours_report')">
<b-input :label="$t('communitys.form.hours_report')">
<textarea
class="form-control"
rows="5"
@focus="textFocus"
style="font-size: x-large; padding-left: 20px"
></textarea>
</base-input>
</b-input>
</b-col>
</b-row>
<b-row>
@ -147,32 +147,32 @@ export default {
newWorkForm() {
this.formular = `
<b-col lg="3">
<base-input label="Stunden">
<b-input label="Stunden">
<b-form-input
type="number"
size="lg"
placeholder="0"
style="font-size: xx-large; padding-left: 20px"
/>
</base-input>
<base-input label="Datum / Zeitraum">
</b-input>
<b-input label="Datum / Zeitraum">
<flat-pickr
class="form-control"
v-model="date"
:config="config"
style="font-size: xx-large; padding-left: 20px"
></flat-pickr>
</base-input>
</b-input>
</b-col>
<b-col lg="9">
<base-input label="Arbeitsreport">
<b-input label="Arbeitsreport">
<textarea
class="form-control"
rows="5"
@focus="textFocus"
style="font-size: x-large; padding-left: 20px"
></textarea>
</base-input>
</b-input>
</b-col>
`

View File

@ -5,7 +5,6 @@ import { ValidationProvider, ValidationObserver, extend } from 'vee-validate'
import * as rules from 'vee-validate/dist/rules'
import { messages } from 'vee-validate/dist/locale/en.json'
import BaseInput from '@/components/Inputs/BaseInput.vue'
import RegeneratorRuntime from 'regenerator-runtime'
import Notifications from '@/components/NotificationPlugin'
import SideBar from '@/components/SidebarPlugin'
@ -36,7 +35,6 @@ global.localVue.use(SideBar)
global.localVue.use(VueRouter)
global.localVue.use(VueQrcode)
global.localVue.use(VueMoment)
global.localVue.component(BaseInput.name, BaseInput)
global.localVue.component('validation-provider', ValidationProvider)
global.localVue.component('validation-observer', ValidationObserver)
global.localVue.component(StatsCard.name, StatsCard)