@oods/components-vue 0.3.3 → 0.4.1

package/dist/ported.js

@@ -1,7 +1,12 @@
-import { dateTimeInputValue, formatDateTime, formatReadOnlyValue, currencyMinorUnits } from '@oods/component-contracts';
-import { defineComponent, h, ref, computed, useId, onBeforeUnmount } from 'vue';
+import { dateTimeInputValue, formatDateTime, formatReadOnlyValue, STATUS_ICON_SVG_ATTRS, STATUS_ICON_SHAPES, getStatusPresentation, resolveStatusIcon, currencyMinorUnits } from '@oods/component-contracts';
+import { defineComponent, h, useId, computed, ref, onMounted, onBeforeUnmount, watch } from 'vue';
 
 // src/ported.ts
+function statusIcon(name) {
+  return h("svg", { ...STATUS_ICON_SVG_ATTRS }, STATUS_ICON_SHAPES[name].map((shape) => h(shape.tag, { ...shape.attrs })));
+}
+
+// src/primitives.ts
 var toneProp = String;
 var emphasisProp = String;
 var sizeProp = String;
@@ -142,7 +147,7 @@ defineComponent({
           class: "oods-banner-dismiss oods-banner__dismiss",
           "aria-label": props.dismissLabel,
           onClick: () => emit("dismiss")
-        }, [h("span", { "aria-hidden": "true" }, "\xD7")]) : null
+        }, [statusIcon("x")]) : null
       ]);
     };
   }
@@ -152,7 +157,7 @@ defineComponent({
   props: {
     content: { type: [String, Number], default: "" },
     intent: { type: String, default: "neutral" },
-    size: { type: sizeProp, default: "md" },
+    size: { type: String, default: "md" },
     disabled: Boolean,
     type: { type: String, default: "button" }
   },
@@ -179,6 +184,130 @@ defineComponent({
     }, [slotOrValue(slots.default, props.content)]);
   }
 });
+var canShowModal = () => typeof HTMLDialogElement !== "undefined" && typeof HTMLDialogElement.prototype.showModal === "function";
+var pageLocks = 0;
+var pageStyle;
+function lockPageScroll() {
+  const page = document.documentElement;
+  if (pageLocks++ === 0) {
+    const scrollbar = window.innerWidth - page.clientWidth;
+    pageStyle = { overflow: page.style.overflow, paddingRight: page.style.paddingRight };
+    if (scrollbar > 0) page.style.paddingRight = `${parseFloat(getComputedStyle(page).paddingRight) + scrollbar}px`;
+    page.style.overflow = "hidden";
+  }
+  let held = true;
+  return () => {
+    if (!held) return;
+    held = false;
+    if (--pageLocks === 0 && pageStyle) {
+      page.style.overflow = pageStyle.overflow;
+      page.style.paddingRight = pageStyle.paddingRight;
+      pageStyle = void 0;
+    }
+  };
+}
+var outsideBox = (event, dialog) => {
+  const box = dialog.getBoundingClientRect();
+  return event.clientX < box.left || event.clientX > box.right || event.clientY < box.top || event.clientY > box.bottom;
+};
+defineComponent({
+  name: "OodsDialog",
+  props: {
+    id: String,
+    open: Boolean,
+    modal: { type: Boolean, default: true },
+    title: { type: String, default: "" },
+    description: String,
+    dismissLabel: { type: String, default: "Close" },
+    size: { type: String, default: "md" },
+    actions: { type: [String, Number, Object, Array], default: void 0 }
+  },
+  emits: {
+    close: () => true
+  },
+  setup(props, { emit, slots }) {
+    const generatedId = useId().replace(/[^\w-]/g, "");
+    const dialogId = computed(() => props.id || `oods-dialog-${generatedId}`);
+    const element = ref(null);
+    const mounted = ref(false);
+    const managed = computed(() => props.modal && mounted.value && canShowModal());
+    let unlockScroll;
+    let pressedBackdrop = false;
+    const releaseScroll = () => {
+      unlockScroll?.();
+      unlockScroll = void 0;
+    };
+    const sync = () => {
+      const dialog = element.value;
+      if (!dialog || !managed.value) return;
+      if (props.open && !dialog.open) {
+        dialog.showModal();
+        unlockScroll ??= lockPageScroll();
+      } else if (!props.open && dialog.open) dialog.close();
+    };
+    onMounted(() => {
+      mounted.value = true;
+    });
+    onBeforeUnmount(releaseScroll);
+    watch([() => props.open, managed], sync, { flush: "post" });
+    const requestClose = (event) => {
+      event.preventDefault();
+      emit("close");
+    };
+    return () => {
+      const titleId = `${dialogId.value}-title`;
+      const descriptionId = `${dialogId.value}-description`;
+      const actions = slotOrValue(slots.actions, props.actions);
+      return h("dialog", {
+        ref: element,
+        id: dialogId.value,
+        class: "oods-dialog",
+        "data-oods-component": "Dialog",
+        "data-size": props.size,
+        "aria-labelledby": titleId,
+        "aria-describedby": props.description ? descriptionId : void 0,
+        open: managed.value ? void 0 : props.open,
+        onKeydown: (event) => {
+          if (event.key === "Escape" && !event.defaultPrevented) requestClose(event);
+        },
+        onCancel: requestClose,
+        // A close event from moving a mounted dialog into the top layer finds it open again, and is not reported. Any other
+        // close releases the page; when the browser closed it (a close request it would not let be cancelled) while open is
+        // still true, it is reported.
+        onClose: () => {
+          if (element.value?.open) return;
+          releaseScroll();
+          if (props.open) emit("close");
+        },
+        onMousedown: (event) => {
+          pressedBackdrop = managed.value && event.target === event.currentTarget && outsideBox(event, event.currentTarget);
+        },
+        // s223-m02 (#2527 ruling 13b): a click on the backdrop emits close, as the close control does. A press that began
+        // inside the dialog (text selected and dragged out) is not a backdrop click.
+        onClick: (event) => {
+          const backdrop = pressedBackdrop && event.target === event.currentTarget && outsideBox(event, event.currentTarget);
+          pressedBackdrop = false;
+          if (backdrop) emit("close");
+        }
+      }, [
+        h("div", { class: "oods-dialog__header" }, [
+          h("div", { class: "oods-dialog__heading" }, [
+            h("h2", { id: titleId, class: "oods-dialog__title" }, props.title),
+            props.description ? h("p", { id: descriptionId, class: "oods-dialog__description" }, props.description) : null
+          ]),
+          h("button", {
+            type: "button",
+            class: "oods-dialog__close",
+            "aria-label": props.dismissLabel,
+            onClick: () => emit("close")
+          }, [statusIcon("x")])
+        ]),
+        slots.default ? h("div", { class: "oods-dialog__body" }, slots.default()) : null,
+        actions !== void 0 && actions !== null && actions !== "" ? h("div", { class: "oods-dialog__footer" }, [actions]) : null
+      ]);
+    };
+  }
+});
 var SAFE_CARD_ELEMENTS = /* @__PURE__ */ new Set(["div", "article", "section", "aside"]);
 defineComponent({
   name: "OodsCard",
@@ -573,82 +702,75 @@ defineComponent({
     };
   }
 });
-
-// src/ported-core.ts
-var STATUS_METADATA = {
-  subscription: {
-    future: {
-      description: "Subscription is scheduled but not yet active.",
-      tone: "info",
-      icon: "\u23F2"
-    },
-    trialing: {
-      description: "Subscription is in a trial period before billing begins.",
-      tone: "accent",
-      icon: "\u2605"
-    },
-    active: {
-      description: "Subscription is paid and service is provisioned.",
-      tone: "success",
-      icon: "\u2714\uFE0E"
-    },
-    paused: {
-      description: "Billing paused temporarily by finance or customer request.",
-      tone: "neutral",
-      icon: "\u23F8"
-    },
-    pending_cancellation: {
-      description: "Subscription will cancel at period end but remains active now.",
-      tone: "info",
-      icon: "\u2026"
-    },
-    past_due: {
-      description: "Renewal payment failed; smart retries ongoing and access retained during the grace window.",
-      tone: "critical",
-      icon: "\u26A0\uFE0E"
-    },
-    unpaid: {
-      description: "Payment retries exhausted; service access revoked.",
-      tone: "critical",
-      icon: "\u2A2F"
-    },
-    terminated: {
-      description: "Subscription ended; service access revoked and billing stopped.",
-      tone: "neutral",
-      icon: "\u2205"
-    }
+defineComponent({
+  name: "OodsSwitch",
+  props: {
+    id: String,
+    label: String,
+    modelValue: { type: Boolean, default: void 0 },
+    checked: { type: Boolean, default: void 0 },
+    defaultChecked: Boolean,
+    required: Boolean,
+    disabled: Boolean,
+    help: String,
+    validation: Object,
+    size: { type: String, default: "md" }
   },
-  invoice: {
-    draft: {
-      description: "Invoice is editable and not yet finalized.",
-      tone: "neutral",
-      icon: "\u270E"
-    },
-    posted: {
-      description: "Invoice finalized with terms before collection.",
-      tone: "info",
-      icon: "\u2026"
-    },
-    paid: {
-      description: "Invoice collected successfully in full.",
-      tone: "success",
-      icon: "\u2714\uFE0E"
-    },
-    past_due: {
-      description: "Invoice is unpaid past its due date.",
-      tone: "critical",
-      icon: "\u2A2F"
-    },
-    void: {
-      description: "Invoice canceled and no longer payable.",
-      tone: "neutral",
-      icon: "\u2205"
-    }
+  emits: {
+    "update:modelValue": (_value) => true,
+    change: (_value) => true
+  },
+  setup(props, { emit, slots }) {
+    const internalChecked = ref(props.defaultChecked);
+    const currentChecked = computed(() => props.modelValue ?? props.checked ?? internalChecked.value);
+    const metadata = useFieldMetadata("Switch", props, slots);
+    const toggle = () => {
+      const next = !currentChecked.value;
+      if (props.modelValue === void 0 && props.checked === void 0) internalChecked.value = next;
+      emit("update:modelValue", next);
+      emit("change", next);
+    };
+    return () => {
+      const label = slots.label?.() ?? props.label;
+      const help = slots.help?.() ?? props.help;
+      const validation = slots.validation?.() ?? props.validation?.message;
+      const controlId = metadata.controlId.value;
+      return h("div", {
+        class: "oods-field oods-switch",
+        style: validationStyle(props.validation),
+        "data-oods-component": "Switch",
+        "data-size": props.size,
+        "data-validation-state": props.validation?.state
+      }, [
+        h("div", { class: "oods-switch__row" }, [
+          h("button", {
+            id: controlId,
+            type: "button",
+            role: "switch",
+            class: "oods-switch__control",
+            "aria-checked": currentChecked.value ? "true" : "false",
+            "aria-labelledby": `${controlId}-label`,
+            "aria-describedby": metadata.describedBy.value,
+            "aria-required": props.required ? "true" : void 0,
+            "aria-invalid": props.validation?.state === "error" ? "true" : void 0,
+            disabled: props.disabled,
+            onClick: toggle
+          }, [h("span", { class: "oods-switch__thumb", "aria-hidden": "true" })]),
+          h("label", { id: `${controlId}-label`, class: "oods-field-label oods-switch__label", for: controlId }, [
+            label,
+            props.required ? h("span", { class: "oods-field-required", "aria-hidden": "true" }, "*") : null
+          ])
+        ]),
+        help ? h("p", { id: metadata.helpId.value, class: "oods-field-help" }, help) : null,
+        validation ? h("p", {
+          id: metadata.validationId.value,
+          class: "oods-field-error",
+          role: props.validation?.state === "error" ? "alert" : void 0
+        }, validation) : null
+      ]);
+    };
   }
-};
-var STATUS_ALIASES = {
-  subscription: { delinquent: "unpaid" }
-};
+});
 function isRecord(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
@@ -665,18 +787,13 @@ function statusLabel2(status) {
   return status.split(/[_-]/).filter(Boolean).map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1)).join(" ");
 }
 function getPortedStatusPresentation(domain, status) {
-  const normalizedDomain = domain.toLowerCase();
-  const normalizedStatus = status.toLowerCase();
-  const alias = STATUS_ALIASES[normalizedDomain]?.[normalizedStatus];
-  const metadata = STATUS_METADATA[normalizedDomain]?.[alias ?? normalizedStatus];
-  if (!metadata) {
-    return {
-      label: statusLabel2(status || "Unknown"),
-      description: "Status not found in registry; falling back to the requested token set.",
-      tone: "neutral"
-    };
-  }
-  return { ...metadata, label: statusLabel2(status) };
+  const presentation = getStatusPresentation(domain.toLowerCase(), status);
+  return {
+    label: statusLabel2(status || "Unknown"),
+    description: presentation.description,
+    tone: presentation.tone,
+    icon: resolveStatusIcon(presentation.iconName)
+  };
 }
 function formatPrice(amountCents, amount, currency) {
   const normalizedAmount = amount;
@@ -820,11 +937,10 @@ var StatusBadge = defineComponent({
         domain: props.domain,
         tone,
         emphasis: props.variant === "solid" ? "solid" : props.emphasis,
-        icon: props.showIcon ? presentation.icon : void 0,
         title: stringValue(attrs.title) ?? presentation.description,
         "aria-label": ariaLabel,
         "data-oods-component": "StatusBadge"
-      }, slots);
+      }, props.showIcon && presentation.icon && !slots.icon ? { ...slots, icon: () => statusIcon(presentation.icon) } : slots);
     };
   }
 });
@@ -1137,7 +1253,7 @@ var SearchInput = defineComponent({
           "aria-label": "Clear search",
           disabled: props.disabled,
           onClick: clear
-        }, "\xD7") : null
+        }, [statusIcon("x")]) : null
       ]);
     };
   }
@@ -1284,17 +1400,18 @@ var RelativeTimestamp = defineComponent({
         props.createdAt
       ) ?? "";
       if (props.hideWhenEmpty && (!datetime || Number.isNaN(Date.parse(datetime)))) return null;
+      const absolute = formatDateTime(datetime, { timeZone: props.timezone });
       const content = firstDefined(
         props.relative,
         props.label,
         props.text,
-        props.now === void 0 ? formatDateTime(datetime, { timeZone: props.timezone }) : relativeTimestampLabel(datetime, props.now)
+        !absolute ? "Unknown time" : props.now === void 0 ? absolute : relativeTimestampLabel(datetime, props.now)
       ) ?? "";
       return h("time", {
         ...attrs,
         class: mergedClass("oods-relative-timestamp", attrs.class),
         datetime: datetime || void 0,
-        title: stringValue(attrs.title) ?? formatDateTime(datetime, { timeZone: props.timezone }),
+        title: stringValue(attrs.title) ?? absolute,
         "data-oods-component": "RelativeTimestamp"
       }, content);
     };