https://lemonadejs.com/v6/dialog.js

1// components/dialog/src/index.ts
2import { batch, component, html } from "lemonadejs";
3import Modal from "@lemonadejs/modal";
4var uid = 0;
5var Dialog = component("dialog", {
6  bind: String,
7  // two-way prompt value (v5: input)
8  title: "",
9  // bold first line
10  message: "",
11  // body text under the title
12  type: "",
13  // '' (confirm) | 'alert' | 'input' (v5: 'default')
14  confirmlabel: "OK",
15  // OK button label (v5: confirmLabel, never rendered — fixed)
16  cancellabel: "Cancel",
17  // Cancel button label (v5: cancelLabel)
18  placeholder: "Value",
19  // prompt placeholder (v5: inputPlaceholder)
20  cancel: true,
21  // v5 rule: hides Cancel only on alert/input types
22  onconfirm: Function,
23  // (value) — the prompt value ('' for other types)
24  oncancel: Function,
25  // Cancel button pressed
26  api: { open: Function, close: Function }
27}, (props, { state, bind, computed }) => {
28  const typed = bind(props, "");
29  const opened = state(false);
30  const overrides = state({});
31  const id = "lm-dialog-" + ++uid;
32  const title = () => overrides.value.title ?? props.title.value;
33  const message = () => overrides.value.message ?? props.message.value;
34  const kind = () => overrides.value.type ?? props.type.value;
35  const confirmLabel = () => overrides.value.confirmlabel ?? props.confirmlabel.value;
36  const cancelLabel = () => overrides.value.cancellabel ?? props.cancellabel.value;
37  const placeholder = () => overrides.value.placeholder ?? props.placeholder.value;
38  const accessibleTitle = computed(() => title() || "Dialog");
39  const describedby = computed(() => message() ? id + "-message" : "");
40  const cancelVisible = () => {
41    const wanted = overrides.value.cancel ?? props.cancel.value;
42    const t = kind();
43    return wanted || !(t === "alert" || t === "input");
44  };
45  let resolvePending = null;
46  let pending = null;
47  const doOpen = (options) => {
48    batch(() => {
49      overrides.value = options ? { ...options } : {};
50      if (options && options.input !== void 0) {
51        typed.value = options.input;
52      }
53      opened.value = true;
54    });
55    if (!pending) {
56      pending = new Promise((resolve) => resolvePending = resolve);
57    }
58    return pending;
59  };
60  const settle = (confirmed) => {
61    opened.value = false;
62    const current = typed.value || "";
63    const resolve = resolvePending;
64    resolvePending = null;
65    pending = null;
66    resolve?.({ confirmed, value: current });
67    return current;
68  };
69  const confirm = () => {
70    const handler = overrides.value.onconfirm ?? props.onconfirm;
71    const current = settle(true);
72    handler?.(current);
73  };
74  const cancel = () => {
75    const handler = overrides.value.oncancel ?? props.oncancel;
76    settle(false);
77    handler?.();
78  };
79  props.ref?.({
80    open: doOpen,
81    close: () => {
82      if (opened.value) {
83        settle(false);
84      }
85    }
86  });

87  return html`<div class="lm-dialog" data-type="${() => kind() || false}">
88        <${Modal} bind="${opened}" header="${false}" backdrop responsive="${false}"
89            label="${accessibleTitle}" describedby="${describedby}">
90            <div class="lm-dialog-header">
91                <div class="lm-dialog-title">${title}</div>
92                <div class="lm-dialog-message" id="${id + "-message"}">${message}</div>
93            </div>
94            <div class="lm-dialog-footer">
95                ${() => kind() === "input" && html`<div class="lm-dialog-prompt">
96                        <input type="text" class="lm-dialog-input"
97                            bind="${typed}"
98                            aria-label="${() => placeholder() || "Value"}"
99                            placeholder="${() => placeholder() || false}" />
100                    </div>`}
101                <div class="lm-dialog-option">
102                    <input type="button" class="lm-dialog-confirm"
103                        value="${confirmLabel}"
104                        onclick="${confirm}" />
105                </div>
106                ${() => cancelVisible() && html`<div class="lm-dialog-option">
107                        <input type="button" class="lm-dialog-cancel"
108                            value="${cancelLabel}"
109                            onclick="${cancel}" />
110                    </div>`}
111            </div>
112        </${Modal}>
113    </div>`;
114});
115var index_default = Dialog;
116export {
117  Dialog,
118  index_default as default
119};