vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

fix: added/updated Data,Check,Select & Small Text Control Components

Browse source
This commit is contained in:
Shariq Ansari 2022-11-13 23:29:10 +05:30
parent 1c4f60ecd1
commit 33cc834507
7 changed files with 114 additions and 155 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
frappe/public/js/form_builder/components/Field.vue
View file

@ -1,5 +1,6 @@
<script setup>
import { ref } from "vue";
import EditableInput from "./EditableInput.vue";
import { ref, computed } from "vue";
import { useStore } from "../store";
import { move_children_to_parent } from "../utils";
@ -7,6 +8,9 @@ let props = defineProps(["column", "field"]);
let store = useStore();
let hovered = ref(false);
let component = computed(() => {
return props.field.df.fieldtype.replace(' ', '') + 'Control';
});
function remove_field() {
if (store.is_customize_form && props.field.df.is_custom_field == 0) {
@ -37,7 +41,16 @@ function move_fields_to_column() {
@mouseover.stop="hovered = true"
@mouseout.stop="hovered = false"
>
<component :is="field.df.fieldtype.replace(' ', '') + 'Control'" :df="field.df">
<component :is="component" :df="field.df">
<template #label>
<EditableInput
:class="{ reqd: field.df.reqd }"
:text="field.df.label"
:placeholder="__('Label')"
:empty_label="`${__('No Label')} (${field.df.fieldtype})`"
v-model="field.df.label"
/>
</template>
<template #actions>
<div class="field-actions" :hidden="store.read_only">
<button

2
frappe/public/js/form_builder/components/FieldTypes.vue
View file

@ -39,7 +39,7 @@ let fields = computed(() => {
});
function on_drag_start(evt) {
$(evt.item).html('<div class="drag-it-here"></div>');
$(evt.item).html('<div class="drop-it-here"></div>');
}
function on_drag_end(evt) {

22
frappe/public/js/form_builder/components/FormBuilder.vue
View file

@ -76,17 +76,17 @@ onMounted(() => store.fetch());
font-size: var(--text-sm);
cursor: pointer;
&:has(.drag-it-here) {
&:has(.drop-it-here) {
position: relative;
background-color: transparent;
height: 60px;
.drag-it-here {
.drop-it-here {
display: flex;
justify-content: center;
&::after {
content: "Drag it here";
content: "Drop it here";
top: 31%;
position: absolute;
padding: 2px 10px;
@ -113,15 +113,25 @@ onMounted(() => store.fetch());
}
:deep(.field) {
.description {
font-size: var(--text-sm);
color: var(--text-muted);
.label {
margin-bottom: 0.3rem;
}
.editable {
input, textarea, select {
background-color: var(--fg-color);
cursor: pointer;
}
}
.reqd::after {
content: " *";
color: var(--red-400);
}
.description {
font-size: var(--text-sm);
color: var(--text-muted);
}
}
:deep([data-has-std-field="false"]),

32
frappe/public/js/form_builder/components/controls/CheckControl.vue
View file

@ -1,17 +1,23 @@
<script setup>
import EditableInput from "../EditableInput.vue";
import { useStore } from "../../store";
import { useSlots } from "vue";
let store = useStore();
let props = defineProps(["df", "value"]);
let slots = useSlots();
</script>
<template>
<div v-if="!slots.actions" class="control checkbox">
<label>
<div class="control checkbox" :class="{ editable: slots.label }">
<!-- checkbox -->
<label v-if="slots.label" class="field-controls">
<div class="checkbox">
<input type="checkbox" disabled />
<slot name="label" />
</div>
<slot name="actions" />
</label>
<label v-else>
<input
type="checkbox"
:checked="value"
@ -20,22 +26,8 @@ let slots = useSlots();
/>
<span class="label-area" :class="{ reqd: df.reqd }">{{ df.label }}</span>
</label>
<div v-if="df.description" class="mt-2 description" v-html="df.description"></div>
</div>
<div class="control checkbox editable" v-else>
<label class="field-controls">
<div class="checkbox">
<input type="checkbox" disabled />
<EditableInput
:class="{ reqd: df.reqd }"
:text="df.label"
:placeholder="__('Label')"
:empty_label="`${__('No Label')} (${df.fieldtype})`"
v-model="df.label"
/>
</div>
<slot name="actions"></slot>
</label>
<!-- description -->
<div v-if="df.description" class="mt-2 description" v-html="df.description"></div>
</div>
</template>

52
frappe/public/js/form_builder/components/controls/DataControl.vue
View file

@ -1,59 +1,33 @@
<script setup>
import EditableInput from "../EditableInput.vue";
import { useStore } from "../../store";
import { useSlots } from "vue";
let store = useStore();
let props = defineProps(["df", "value"]);
let slots = useSlots();
</script>
<template>
<div v-if="!slots.actions" class="control">
<div class="label" :class="{ reqd: df.reqd }">{{ df.label }}</div>
<div class="control" :class="{ editable: slots.label }">
<!-- label -->
<div v-if="slots.label" class="field-controls">
<slot name="label" />
<slot name="actions" />
</div>
<div v-else class="label" :class="{ reqd: df.reqd }">{{ df.label }}</div>
<!-- data input -->
<input v-if="slots.label" class="form-control" type="text" disabled />
<input
v-else
class="form-control"
type="text"
:value="value"
:disabled="store.read_only || df.read_only"
@input="event => $emit('update:modelValue', event.target.value)"
/>
<div v-if="df.description" class="mt-2 description" v-html="df.description"></div>
</div>
<div class="control editable" v-else>
<div class="field-controls">
<EditableInput
:class="{ reqd: df.reqd }"
:text="df.label"
:placeholder="__('Label')"
:empty_label="`${__('No Label')} (${df.fieldtype})`"
v-model="df.label"
/>
<slot name="actions"></slot>
</div>
<input
class="form-control"
type="text"
disabled
/>
<!-- description -->
<div v-if="df.description" class="mt-2 description" v-html="df.description"></div>
</div>
</template>
<style lang="scss" scoped>
.label {
margin-bottom: 0.3rem;
}
.editable input {
background-color: var(--fg-color);
cursor: pointer;
}
.label-actions {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>

85
frappe/public/js/form_builder/components/controls/SelectControl.vue
View file

@ -1,5 +1,4 @@
<script setup>
import EditableInput from "../EditableInput.vue";
import { useStore } from "../../store";
import { useSlots } from "vue";
@ -7,58 +6,60 @@ let store = useStore();
let props = defineProps(["df", "value"]);
let slots = useSlots();
function get_options() {
let options = props.df.options?.split("\n") || "";
return options && options.filter(opt => !in_list(frappe.model.layout_fields, opt));
}
</script>
<template>
<div v-if="!slots.actions" class="control">
<div class="label" :class="{ reqd: df.reqd }">{{ df.label }}</div>
<input
class="form-control"
type="text"
:value="value"
:disabled="store.read_only || df.read_only"
@input="event => $emit('update:modelValue', event.target.value)"
/>
<div v-if="df.description" class="mt-2 description" v-html="df.description"></div>
</div>
<div class="control editable" v-else>
<div class="field-controls">
<EditableInput
:class="{ reqd: df.reqd }"
:text="df.label"
:placeholder="__('Label')"
:empty_label="`${__('No Label')} (${df.fieldtype})`"
v-model="df.label"
/>
<slot name="actions"></slot>
<div class="control" :class="{ editable: slots.label }">
<!-- label -->
<div v-if="slots.label" class="field-controls">
<slot name="label"/>
<slot name="actions" />
</div>
<input
class="form-control"
type="text"
disabled
/>
<div v-else class="label" :class="{ reqd: df.reqd }">{{ df.label }}</div>
<!-- select input -->
<div v-if="slots.label" class="select-input">
<select class="form-control" disabled></select>
<div class="select-icon" v-html="frappe.utils.icon('select', 'sm')"></div>
</div>
<div v-else class="select-input">
<select
class="form-control"
v-model="value"
:disabled="store.read_only || df.read_only"
@change="event => $emit('update:modelValue', event.target.value)"
>
<option v-for="option in get_options()" :key="option" :value="option">{{
option
}}</option>
</select>
<div class="select-icon" v-html="frappe.utils.icon('select', 'sm')"></div>
</div>
<!-- description -->
<div v-if="df.description" class="mt-2 description" v-html="df.description"></div>
</div>
</template>
<style lang="scss" scoped>
.label {
margin-bottom: 0.3rem;
.editable {
.select-icon {
top: 7px !important;
}
}
.editable input {
background-color: var(--fg-color);
cursor: pointer;
}
.select-input {
position: relative;
.reqd::after {
content: " *";
color: var(--red-400);
}
.label-actions {
display: flex;
justify-content: space-between;
align-items: center;
.select-icon {
position: absolute;
pointer-events: none;
top: 5px;
right: 10px;
}
}
</style>

59
frappe/public/js/form_builder/components/controls/SmallTextControl.vue
View file

@ -1,64 +1,33 @@
<script setup>
import EditableInput from "../EditableInput.vue";
import { useStore } from "../../store";
import { useSlots } from "vue";
let store = useStore();
let props = defineProps(["df", "value"]);
let slots = useSlots();
</script>
<template>
<div v-if="!slots.actions" class="control">
<div class="label">{{ df.label }}</div>
<input
<div class="control" :class="{ editable: slots.label }">
<!-- label -->
<div v-if="slots.label" class="field-controls">
<slot name="label" />
<slot name="actions" />
</div>
<div v-else class="label">{{ df.label }}</div>
<!-- textarea input -->
<textarea v-if="slots.label" class="form-control" type="text" disabled />
<textarea
v-else
class="form-control"
type="text"
:value="value"
:disabled="store.read_only || df.read_only"
@input="event => $emit('update:modelValue', event.target.value)"
/>
<div v-if="df.description" class="mt-2 description" v-html="df.description"></div>
</div>
<div class="control editable" v-else>
<div class="field-controls">
<EditableInput
:class="{ reqd: df.reqd }"
:text="df.label"
:placeholder="__('Label')"
:empty_label="`${__('No Label')} (${df.fieldtype})`"
v-model="df.label"
/>
<slot name="actions"></slot>
</div>
<input
class="form-control"
type="text"
disabled
/>
<!-- description -->
<div v-if="df.description" class="mt-2 description" v-html="df.description"></div>
</div>
</template>
<style lang="scss" scoped>
.label {
margin-bottom: 0.3rem;
}
.editable input {
background-color: var(--fg-color);
cursor: pointer;
}
.reqd::after {
content: " *";
color: var(--red-400);
}
.label-actions {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>