slexkit 0.2.0

package/dist/components/toast.js

@@ -0,0 +1,240 @@
+import {
+  Toast
+} from "../chunks/accordion-ehnhpeca.js";
+import"../chunks/accordion-hzyrngd6.js";
+import {
+  InlineIcon
+} from "../chunks/accordion-cw5r75jm.js";
+import {
+  append,
+  bindPropStore,
+  bool,
+  child,
+  createSvelteRenderer,
+  delegate,
+  delegated,
+  emit,
+  first_child,
+  from_html,
+  get,
+  if_block,
+  label,
+  pop,
+  proxy,
+  push,
+  reset,
+  set,
+  set_text,
+  sibling,
+  state,
+  template_effect,
+  text1 as text,
+  user_derived,
+  user_effect
+} from "../chunks/accordion-nw12ytps.js";
+
+// src/components/entries/toast.ts
+import { register } from "../runtime.js";
+
+// src/components/svelte/feedback/Toast.svelte
+var root_2 = from_html(`<span aria-hidden="true"></span>`);
+var root_4 = from_html(`<div class="slex-toast-title"><!><span> </span></div>`);
+var root_6 = from_html(`<div class="slex-toast-description"> </div>`);
+var root_3 = from_html(`<!> <!>`, 1);
+var root = from_html(`<div class="slex-toast-group" data-scope="toast"><!></div>`);
+function Toast2($$anchor, $$props) {
+  push($$props, true);
+  let p = state(proxy({}));
+  let visible = state(true);
+  user_effect(() => bindPropStore($$props.props, (next) => set(p, next, true)));
+  user_effect(() => {
+    const title = titleText();
+    const description = descriptionText();
+    const type = tone();
+    if (!title && !description && !type)
+      return;
+    set(visible, true);
+    const ms = durationMs();
+    if (ms <= 0)
+      return;
+    const timer = setTimeout(() => {
+      set(visible, false);
+    }, ms);
+    return () => clearTimeout(timer);
+  });
+  function tone() {
+    const raw = text(get(p).type ?? get(p).tone ?? "info").toLowerCase();
+    if (raw === "error" || raw === "destructive")
+      return "danger";
+    if (raw === "neutral" || raw === "default")
+      return "info";
+    return raw;
+  }
+  function titleText() {
+    return text(get(p).title ?? get(p).label ?? get(p).heading);
+  }
+  function descriptionText() {
+    return text(get(p).description ?? get(p).text ?? get(p).message ?? get(p).content);
+  }
+  function dismissable() {
+    if (get(p).dismissable === undefined && get(p).dismissible === undefined)
+      return true;
+    return bool(get(p).dismissable ?? get(p).dismissible);
+  }
+  function durationMs() {
+    const value = Number(get(p).duration ?? 0);
+    return Number.isFinite(value) && value > 0 ? value : 0;
+  }
+  function close() {
+    if (!get(visible))
+      return;
+    set(visible, false);
+    emit($$props.ctx, "close", { type: "close", target: $$props.ctx.id });
+  }
+  function handleGroupClick(event) {
+    const target = event.target;
+    if (!(target instanceof Element))
+      return;
+    if (target.closest(".slex-toast-close"))
+      close();
+  }
+  function role() {
+    return tone() === "danger" ? "alert" : "status";
+  }
+  function color() {
+    const kind = tone();
+    if (kind === "success")
+      return "green";
+    if (kind === "warning")
+      return "yellow";
+    if (kind === "danger")
+      return "red";
+    if (kind === "muted" || kind === "neutral")
+      return "gray";
+    return "blue";
+  }
+  function closeLabel() {
+    return label($$props.ctx, "toast.close", get(p).closeLabel ?? get(p).closeAriaLabel, "Close");
+  }
+  var div = root();
+  var node = child(div);
+  {
+    var consequent_3 = ($$anchor2) => {
+      {
+        const icon = ($$anchor3) => {
+          var span = root_2();
+          append($$anchor3, span);
+        };
+        let $0 = user_derived(tone);
+        let $1 = user_derived(color);
+        let $2 = user_derived(role);
+        let $3 = user_derived(() => role() === "alert" ? "assertive" : "polite");
+        let $4 = user_derived(dismissable);
+        let $5 = user_derived(closeLabel);
+        Toast($$anchor2, {
+          class: "slex-toast",
+          get "data-tone"() {
+            return get($0);
+          },
+          get color() {
+            return get($1);
+          },
+          get role() {
+            return get($2);
+          },
+          get "aria-live"() {
+            return get($3);
+          },
+          get dismissable() {
+            return get($4);
+          },
+          get closeAriaLabel() {
+            return get($5);
+          },
+          classes: {
+            icon: "slex-toast-mark",
+            content: "slex-toast-content",
+            close: "slex-toast-close"
+          },
+          onclose: close,
+          get toastStatus() {
+            return get(visible);
+          },
+          set toastStatus($$value) {
+            set(visible, $$value, true);
+          },
+          icon,
+          children: ($$anchor3, $$slotProps) => {
+            var fragment_1 = root_3();
+            var node_1 = first_child(fragment_1);
+            {
+              var consequent_1 = ($$anchor4) => {
+                var div_1 = root_4();
+                var node_2 = child(div_1);
+                {
+                  var consequent = ($$anchor5) => {
+                    InlineIcon($$anchor5, {
+                      get name() {
+                        return get(p).icon;
+                      },
+                      className: "slex-toast-icon"
+                    });
+                  };
+                  if_block(node_2, ($$render) => {
+                    if (get(p).icon)
+                      $$render(consequent);
+                  });
+                }
+                var span_1 = sibling(node_2);
+                var text_1 = child(span_1, true);
+                reset(span_1);
+                reset(div_1);
+                template_effect(($02) => set_text(text_1, $02), [() => titleText()]);
+                append($$anchor4, div_1);
+              };
+              var d = user_derived(() => titleText());
+              if_block(node_1, ($$render) => {
+                if (get(d))
+                  $$render(consequent_1);
+              });
+            }
+            var node_3 = sibling(node_1, 2);
+            {
+              var consequent_2 = ($$anchor4) => {
+                var div_2 = root_6();
+                var text_2 = child(div_2, true);
+                reset(div_2);
+                template_effect(($02) => set_text(text_2, $02), [() => descriptionText()]);
+                append($$anchor4, div_2);
+              };
+              var d_1 = user_derived(() => descriptionText());
+              if_block(node_3, ($$render) => {
+                if (get(d_1))
+                  $$render(consequent_2);
+              });
+            }
+            append($$anchor3, fragment_1);
+          },
+          $$slots: { icon: true, default: true }
+        });
+      }
+    };
+    if_block(node, ($$render) => {
+      if (get(visible))
+        $$render(consequent_3);
+    });
+  }
+  reset(div);
+  delegated("click", div, handleGroupClick);
+  append($$anchor, div);
+  pop();
+}
+delegate(["click"]);
+
+// src/components/entries/toast.ts
+register("toast", createSvelteRenderer("toast", Toast2), { state: "none" });
+var toast_default = Toast2;
+export {
+  toast_default as default,
+  Toast2 as Toast
+};