static form html classnames return to tailwind classname for .vue
This commit is contained in:
@ -9,7 +9,7 @@
|
||||
]"
|
||||
:error="formError">
|
||||
<div class="flex justify-between relative mt-1">
|
||||
<input type="text" @change="change" :name="name" :id="name" v-model="color" @keyup="addColor" class="form-element">
|
||||
<input type="text" @change="change" :name="name" :id="name" v-model="color" @keyup="addColor" class="full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple">
|
||||
|
||||
<div class="absolute w-7 h-7 flex rounded-full my-auto bottom-2 right-2 cursor-pointer"
|
||||
ref="dropdownMenu"
|
||||
|
@ -22,7 +22,7 @@
|
||||
<input
|
||||
type="text"
|
||||
data-input="true"
|
||||
class="form-element px-10 border-t-0 border-l-0 border-r-0 border-gray-200 rounded-none"
|
||||
class="w-full text-sm py-2.5 mt-1 border text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple px-10 border-t-0 border-l-0 border-r-0 border-gray-200 rounded-none"
|
||||
autocapitalize="default" autocorrect="ON"
|
||||
:placeholder="placeholder"
|
||||
:ref="'input-contact-field-' + _uid"
|
||||
@ -32,7 +32,7 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ul class="form-element p-0 border-0 mt-0 cursor-pointer">
|
||||
<ul class="w-full text-sm rounded-lg border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple p-0 border-0 mt-0 cursor-pointer">
|
||||
<div class="hover:bg-gray-100 px-4 py-2" v-for="(contact, index) in sortContacts" :key="index" @click="onContactSeleted(index, contact.id)">
|
||||
<span>{{ contact.name }}</span>
|
||||
</div>
|
||||
|
@ -10,7 +10,7 @@
|
||||
masked: true
|
||||
}" :value="price" disabled size="5" masked class="disabled-money text-right mr-1 js-conversion-input text-xs px-1"></money>
|
||||
<span class="mr-2">{{ texts[1] }}</span>
|
||||
<input name="currency_rate" v-model="rate" @input="onChange" class="form-element w-16 h-10 text-right js-conversion-input" />
|
||||
<input name="currency_rate" v-model="rate" @input="onChange" class="text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple w-16 h-10 text-right js-conversion-input" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -19,7 +19,7 @@
|
||||
@on-open="focus"
|
||||
@on-close="blur"
|
||||
:config="dateConfig"
|
||||
class="form-element datepicker"
|
||||
class="datepicker w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
|
||||
v-model="real_model"
|
||||
@input="change"
|
||||
:readonly="readonly"
|
||||
|
@ -12,7 +12,7 @@
|
||||
<input
|
||||
type="text"
|
||||
data-input="true"
|
||||
class="form-element px-10 border-t-0 border-l-0 border-r-0 border-gray-200 rounded-none"
|
||||
class="w-full text-sm py-2.5 mt-1 border text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple px-10 border-t-0 border-l-0 border-r-0 border-gray-200 rounded-none"
|
||||
autocapitalize="default"
|
||||
autocorrect="ON"
|
||||
:placeholder="placeholder"
|
||||
@ -23,7 +23,7 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ul class="form-element p-0 mt-0 border-0 cursor-pointer">
|
||||
<ul class="w-full text-sm rounded-lg border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple p-0 mt-0 border-0 cursor-pointer">
|
||||
<div
|
||||
class="hover:bg-gray-100 px-4"
|
||||
v-for="(item, index) in sortedItems"
|
||||
|
@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<div v-if="! rowInput" class="form-group"
|
||||
:class="[{'has-error': error}, {'required': required}, {'readonly': readonly}, {'disabled': disabled}, col]">
|
||||
<label v-if="title" :for="name" class="form-control-label">{{ title }}</label>
|
||||
|
||||
<label v-if="title" :for="name" class="text-black text-sm font-medium">
|
||||
{{ title }}
|
||||
</label>
|
||||
<span v-if="required" class="text-red ltr:ml-1 rtl:mr-1">*</span>
|
||||
|
||||
<div class="relative" :class="group_class">
|
||||
<!-- <div class="input-group-prepend absolute left-2 bottom-3 text-light-gray">
|
||||
@ -10,7 +14,7 @@
|
||||
</span>
|
||||
</div> -->
|
||||
|
||||
<money :name="name" @input="input" :placeholder="placeholder" v-bind="money" :value="model" :disabled="disabled" :masked="masked" class="form-element" :class="moneyClass"></money>
|
||||
<money :name="name" @input="input" :placeholder="placeholder" v-bind="money" :value="model" :disabled="disabled" :masked="masked" class="input-money" :class="moneyClass"></money>
|
||||
</div>
|
||||
|
||||
<div class="text-red text-sm mt-1 block" v-if="error" v-html="error"></div>
|
||||
@ -18,7 +22,11 @@
|
||||
|
||||
<div v-else
|
||||
:class="[{'has-error': error}, {'required': required}, {'readonly': readonly}, {'disabled': disabled}, col]">
|
||||
<label v-if="title" :for="name" class="form-control-label">{{ title }}</label>
|
||||
|
||||
<label v-if="title" :for="name" class="text-black text-sm font-medium">
|
||||
{{ title }}
|
||||
</label>
|
||||
<span v-if="required" class="text-red ltr:ml-1 rtl:mr-1">*</span>
|
||||
|
||||
<div v-if="icon" class="input-group input-group-merge" :class="group_class">
|
||||
<div v-if="icon" class="input-group-prepend">
|
||||
@ -27,10 +35,10 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<money :name="name" @input="input" :placeholder="placeholder" v-bind="money" :value="model" :disabled="disabled" :masked="masked" class="form-element" :class="moneyClass"></money>
|
||||
<money :name="name" @input="input" :placeholder="placeholder" v-bind="money" :value="model" :disabled="disabled" :masked="masked" class="input-money" :class="moneyClass"></money>
|
||||
</div>
|
||||
|
||||
<money v-else :name="name" @input="input" :placeholder="placeholder" v-bind="money" :value="model" :disabled="disabled" :masked="masked" class="form-element" :class="moneyClass"></money>
|
||||
<money v-else :name="name" @input="input" :placeholder="placeholder" v-bind="money" :value="model" :disabled="disabled" :masked="masked" class="input-money" :class="moneyClass"></money>
|
||||
|
||||
<div class="text-red text-sm mt-1 block" v-if="error" v-html="error"></div>
|
||||
</div>
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="form-group" :class="col">
|
||||
<label :for="name" class="form-control-label">{{ text }}</label>
|
||||
<label :for="name" class="text-black text-sm font-medium">{{ text }}</label>
|
||||
|
||||
<div class="tab-pane tab-example-result fade show active" role="tabpanel" aria-labelledby="-component-tab">
|
||||
<div class="btn-group btn-group-toggle radio-yes-no" data-toggle="buttons" v-on:click="onClick">
|
||||
|
@ -18,7 +18,7 @@
|
||||
{{ frequencyEveryText }}
|
||||
</div>
|
||||
|
||||
<input type="text" class="w-20 form-element" v-model="interval" @input="change" v-if="frequency == 'custom'">
|
||||
<input type="text" class="w-20 text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" v-model="interval" @input="change" v-if="frequency == 'custom'">
|
||||
|
||||
<el-select class="w-36 ml-2" v-model="customFrequency" @input="change" v-if="frequency == 'custom'">
|
||||
<el-option
|
||||
@ -89,7 +89,7 @@
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<input type="text" class="w-20 form-element ml-2" v-model="limitCount" v-if="limit == 'after'" @input="change">
|
||||
<input type="text" class="w-20 text-sm px-3 py-2.5 mt-1 ml-2 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" v-model="limitCount" v-if="limit == 'after'" @input="change">
|
||||
|
||||
<div class="pl-2 text-sm" v-if="limit == 'after'">
|
||||
{{ endText }}
|
||||
|
@ -6,6 +6,7 @@
|
||||
<slot name="label">
|
||||
<label v-if="label" :class="labelClasses">
|
||||
{{label}}
|
||||
<span v-if="required" class="text-red ltr:ml-1 rtl:mr-1">*</span>
|
||||
</label>
|
||||
</slot>
|
||||
<div class="relative" :class="[
|
||||
@ -31,7 +32,7 @@
|
||||
v-bind="$attrs"
|
||||
:valid="!error"
|
||||
:required="required"
|
||||
class="form-element"
|
||||
class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
|
||||
:class="[{'is-valid': valid === true}, {'is-invalid': error}, inputClasses]">
|
||||
</slot>
|
||||
<div v-if="appendIcon || $slots.append" class="input-group-append absolute ltr:right-2 rtl:left-2 bottom-2 text-light-gray">
|
||||
@ -106,7 +107,7 @@
|
||||
labelClasses: {
|
||||
type: String,
|
||||
description: "Input label css classes",
|
||||
default: "form-control-label"
|
||||
default: "text-black text-sm font-medium"
|
||||
},
|
||||
inputClasses: {
|
||||
type: String,
|
||||
@ -132,6 +133,10 @@
|
||||
prependIcon: {
|
||||
type: String,
|
||||
description: "Prepend icon (left)"
|
||||
},
|
||||
notRequired: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
Reference in New Issue
Block a user