export let widget_dropdown = (b) => {
let w = attr_or(b, "width", 200)
let h = attr_or(b, "height", 38)
let label = attr_or(b, "label", "")
let value = attr_or(b, "value", "")
let signal = attr_or(b, "signal", "")
let placeholder = attr_or(b, "placeholder", "Select")
let open = attr_or(b, "open", "false") == "true"
let items_str = attr_or(b, "items", "Option A,Option B,Option C")
let items = split(",", items_str)
let n = len(items)
let has_label = label != ""
let field_y = has_label ? 18 : 0
let field_h = has_label ? h - 18 : h
let shown_text = value != "" ? value : placeholder
let shown_fill = value != "" ? attr_or(b, "value_fill", "currentColor") : attr_or(b, "placeholder_fill", "currentColor")
let shown_opacity = value != "" ? 1 : attr_or(b, "placeholder_opacity", 0.4)
let field_fill = attr_or(b, "field_fill", attr_or(b, "surface_fill", "var(--color-code-bg)"))
let menu_fill = attr_or(b, "menu_fill", attr_or(b, "surface_fill", "var(--color-bg)"))
let border_stroke = attr_or(b, "border_stroke", "var(--color-nav-border)")
let label_fill = attr_or(b, "label_fill", "currentColor")
let radius = attr_or(b, "radius", 6)
let border_width = attr_or(b, "border_width", 1)
let option_h = attr_or(b, "option_height", 28)
let label_part = has_label ? [{ kind = "text", x = 0, y = 0, width = w, height = 16,
content = label, font_size = 11, anchor = "start", fill = label_fill }] : []
let menu_h = option_h * n
let menu = open ? concat([
{ kind = "rect", x = 0, y = field_y + field_h + 4, width = w, height = menu_h,
rx = radius, fill = menu_fill, stroke = border_stroke, stroke_width = border_width,
z_index = 5 }
], map(range(0, n), (i) => {
kind = "text",
x = 10,
y = field_y + field_h + 4 + (i * option_h),
width = w - 20,
height = option_h,
content = trim(items[i]),
font_size = 12,
anchor = "start",
fill = label_fill,
z_index = 6
})) : []
[{
kind = "group",
id = to_string(b.id),
width = w,
height = h,
cursor = signal != "" ? "pointer" : attr_or(b, "cursor", "default"),
pointer_events = signal != "" ? "all" : attr_or(b, "pointer_events", "all"),
data_wdoc_dropdown = signal != "" ? "true" : "",
data_wdoc_dropdown_signal = signal,
data_wdoc_dropdown_value = value,
data_wdoc_dropdown_items = items_str,
data_wdoc_dropdown_placeholder = placeholder,
data_wdoc_dropdown_field_y = field_y,
data_wdoc_dropdown_field_h = field_h,
data_wdoc_dropdown_value_fill = attr_or(b, "value_fill", "currentColor"),
data_wdoc_dropdown_placeholder_fill = attr_or(b, "placeholder_fill", "currentColor"),
data_wdoc_dropdown_menu_fill = menu_fill,
data_wdoc_dropdown_field_fill = field_fill,
data_wdoc_dropdown_border_stroke = border_stroke,
data_wdoc_dropdown_label_fill = label_fill,
children = concat(concat(label_part, [
{ kind = "rect", x = 0, y = field_y, width = w, height = field_h, rx = radius,
fill = field_fill, stroke = border_stroke, stroke_width = border_width },
{ kind = "text", x = 10, y = field_y, width = w - 36, height = field_h,
content = shown_text, font_size = 12, anchor = "start", fill = shown_fill,
opacity = shown_opacity, data_wdoc_dropdown_value_node = "true" },
{ kind = "line", x1 = w - 22, y1 = field_y + (field_h / 2) - 2,
x2 = w - 17, y2 = field_y + (field_h / 2) + 3,
stroke = label_fill, stroke_width = 1.5 },
{ kind = "line", x1 = w - 17, y1 = field_y + (field_h / 2) + 3,
x2 = w - 12, y2 = field_y + (field_h / 2) - 2,
stroke = label_fill, stroke_width = 1.5 }
]), menu)
}]
}