extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2024-11-22 16:23:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add Indentation prop & Left/Right icons props

Browse Source
This commit is contained in:
Bubka 2024-02-29 13:28:48 +01:00
parent 88d37394d3
commit fd5520c1cf
1 changed files with 32 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
resources/js/components/formElements/FormField.vue
View File

@ -42,27 +42,42 @@
maxLength: {
type: Number,
default: null
}
},
isIndented: Boolean,
leftIcon: '',
rightIcon: '',
})
</script>
<template>
<div class="field" :class="{ 'pt-3' : hasOffset }">
<label :for="inputId" class="label" v-html="$t(label)"></label>
<div class="control">
<input
:disabled="isDisabled"
:id="inputId"
:type="inputType"
class="input"
:value="modelValue"
:placeholder="placeholder"
v-bind="$attrs"
v-on:input="$emit('update:modelValue', $event.target.value)"
:maxlength="maxLength"
/>
<div class="mb-3" :class="{ 'pt-3' : hasOffset, 'is-flex' : isIndented }">
<div v-if="isIndented" class="mx-2 pr-1" :style="{ 'opacity': isDisabled ? '0.5' : '1' }">
<FontAwesomeIcon class="has-text-grey" :icon="['fas', 'chevron-right']" transform="rotate-135"/>
</div>
<div class="field" :class="{ 'is-flex-grow-5' : isIndented }">
<label :for="inputId" class="label" v-html="$t(label)"></label>
<div class="control" :class="{ 'has-icons-left' : leftIcon, 'has-icons-right': rightIcon }">
<input
:disabled="isDisabled"
:id="inputId"
:type="inputType"
class="input"
:value="modelValue"
:placeholder="placeholder"
v-bind="$attrs"
v-on:input="$emit('update:modelValue', $event.target.value)"
v-on:change="$emit('change:modelValue', $event.target.value)"
:maxlength="maxLength"
/>
<span v-if="leftIcon" class="icon is-small is-left">
<FontAwesomeIcon :icon="['fas', leftIcon]" transform="rotate-75" size="xs" />
</span>
<span v-if="rightIcon" class="icon is-small is-right">
<FontAwesomeIcon :icon="['fas', rightIcon]" transform="rotate-75" size="xs" />
</span>
</div>
<FieldError v-if="fieldError != undefined" :error="fieldError" :field="fieldName" />
<p class="help" v-html="$t(help)" v-if="help"></p>
</div>
<FieldError v-if="fieldError != undefined" :error="fieldError" :field="fieldName" />
<p class="help" v-html="$t(help)" v-if="help"></p>
</div>
</template>