feat: add color property to button field
This commit is contained in:
parent
5a5f8924bf
commit
e6ebd6ec15
9 changed files with 62 additions and 4 deletions
|
|
@ -32,6 +32,7 @@
|
|||
"fetch_from",
|
||||
"fetch_if_empty",
|
||||
"visibility_section",
|
||||
"button_color",
|
||||
"hidden",
|
||||
"show_on_timeline",
|
||||
"bold",
|
||||
|
|
@ -617,6 +618,13 @@
|
|||
"fieldname": "mask",
|
||||
"fieldtype": "Check",
|
||||
"label": "Mask"
|
||||
},
|
||||
{
|
||||
"depends_on": "eval:doc.fieldtype===\"Button\"",
|
||||
"fieldname": "button_color",
|
||||
"fieldtype": "Select",
|
||||
"label": "Button Color",
|
||||
"options": "\nDefault\nPrimary\nInfo\nSuccess\nWarning\nDanger"
|
||||
}
|
||||
],
|
||||
"grid_page_length": 50,
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ class DocField(Document):
|
|||
allow_in_quick_entry: DF.Check
|
||||
allow_on_submit: DF.Check
|
||||
bold: DF.Check
|
||||
button_color: DF.Literal["", "Default", "Primary", "Info", "Success", "Warning", "Danger"]
|
||||
collapsible: DF.Check
|
||||
collapsible_depends_on: DF.Code | None
|
||||
columns: DF.Int
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
"link_filters",
|
||||
"column_break_6",
|
||||
"fieldtype",
|
||||
"button_color",
|
||||
"precision",
|
||||
"hide_seconds",
|
||||
"hide_days",
|
||||
|
|
@ -467,6 +468,13 @@
|
|||
"fieldname": "placeholder",
|
||||
"fieldtype": "Data",
|
||||
"label": "Placeholder"
|
||||
},
|
||||
{
|
||||
"depends_on": "eval:doc.fieldtype===\"Button\"",
|
||||
"fieldname": "button_color",
|
||||
"fieldtype": "Select",
|
||||
"label": "Button Color",
|
||||
"options": "\nDefault\nPrimary\nInfo\nSuccess\nWarning\nDanger"
|
||||
}
|
||||
],
|
||||
"grid_page_length": 50,
|
||||
|
|
@ -474,7 +482,7 @@
|
|||
"idx": 1,
|
||||
"index_web_pages_for_search": 1,
|
||||
"links": [],
|
||||
"modified": "2025-10-10 11:10:23.862393",
|
||||
"modified": "2025-11-12 01:14:24.753774",
|
||||
"modified_by": "Administrator",
|
||||
"module": "Custom",
|
||||
"name": "Custom Field",
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ class CustomField(Document):
|
|||
allow_in_quick_entry: DF.Check
|
||||
allow_on_submit: DF.Check
|
||||
bold: DF.Check
|
||||
button_color: DF.Literal["", "Default", "Primary", "Info", "Success", "Warning", "Danger"]
|
||||
collapsible: DF.Check
|
||||
collapsible_depends_on: DF.Code | None
|
||||
columns: DF.Int
|
||||
|
|
|
|||
|
|
@ -806,6 +806,7 @@ docfield_properties = {
|
|||
"is_virtual": "Check",
|
||||
"link_filters": "JSON",
|
||||
"placeholder": "Data",
|
||||
"button_color": "Select",
|
||||
}
|
||||
|
||||
doctype_link_properties = {
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@
|
|||
"column_break_33",
|
||||
"read_only_depends_on",
|
||||
"display",
|
||||
"button_color",
|
||||
"in_filter",
|
||||
"hide_seconds",
|
||||
"hide_days",
|
||||
|
|
@ -485,6 +486,13 @@
|
|||
"fieldname": "placeholder",
|
||||
"fieldtype": "Data",
|
||||
"label": "Placeholder"
|
||||
},
|
||||
{
|
||||
"depends_on": "eval:doc.fieldtype===\"Button\"",
|
||||
"fieldname": "button_color",
|
||||
"fieldtype": "Select",
|
||||
"label": "Button Color",
|
||||
"options": "\nDefault\nPrimary\nInfo\nSuccess\nWarning\nDanger"
|
||||
}
|
||||
],
|
||||
"grid_page_length": 50,
|
||||
|
|
@ -492,7 +500,7 @@
|
|||
"index_web_pages_for_search": 1,
|
||||
"istable": 1,
|
||||
"links": [],
|
||||
"modified": "2025-10-14 13:56:58.033573",
|
||||
"modified": "2025-11-12 01:13:53.053888",
|
||||
"modified_by": "Administrator",
|
||||
"module": "Custom",
|
||||
"name": "Customize Form Field",
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ class CustomizeFormField(Document):
|
|||
allow_in_quick_entry: DF.Check
|
||||
allow_on_submit: DF.Check
|
||||
bold: DF.Check
|
||||
button_color: DF.Literal["", "Default", "Primary", "Info", "Success", "Warning", "Danger"]
|
||||
collapsible: DF.Check
|
||||
collapsible_depends_on: DF.Code | None
|
||||
columns: DF.Int
|
||||
|
|
|
|||
|
|
@ -1,6 +1,22 @@
|
|||
<!-- Used as Button & Heading Control -->
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
|
||||
const props = defineProps(["df", "value"]);
|
||||
|
||||
const button_class = computed(() => {
|
||||
const color_map = {
|
||||
Default: "btn-default",
|
||||
Primary: "btn-primary",
|
||||
Info: "btn-info",
|
||||
Success: "btn-success",
|
||||
Warning: "btn-warning",
|
||||
Danger: "btn-danger",
|
||||
};
|
||||
const color = props.df.button_color ?? "Default";
|
||||
|
||||
return `btn btn-xs ${color_map[color] || color_map.Default}`;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -10,7 +26,7 @@ const props = defineProps(["df", "value"]);
|
|||
<h4 v-if="df.fieldtype == 'Heading'">
|
||||
<slot name="label" />
|
||||
</h4>
|
||||
<button v-else class="btn btn-xs btn-default">
|
||||
<button v-else :class="button_class">
|
||||
<slot name="label" />
|
||||
</button>
|
||||
<slot name="actions" />
|
||||
|
|
|
|||
|
|
@ -5,7 +5,21 @@ frappe.ui.form.ControlButton = class ControlButton extends frappe.ui.form.Contro
|
|||
}
|
||||
make_input() {
|
||||
var me = this;
|
||||
const btn_type = this.df.primary ? "btn-primary" : "btn-default";
|
||||
let btn_type = "btn-default";
|
||||
if (this.df.button_color) {
|
||||
const color_map = {
|
||||
Default: "btn-default",
|
||||
Primary: "btn-primary",
|
||||
Info: "btn-info",
|
||||
Success: "btn-success",
|
||||
Warning: "btn-warning",
|
||||
Danger: "btn-danger",
|
||||
};
|
||||
btn_type = color_map[this.df.button_color] || "btn-default";
|
||||
} else if (this.df.primary) {
|
||||
btn_type = "btn-primary";
|
||||
}
|
||||
|
||||
const btn_size = this.df.btn_size ? `btn-${this.df.btn_size}` : "btn-xs";
|
||||
this.$input = $(
|
||||
`<button
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue