@oods/components-vue 0.3.3 → 0.4.0

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, watch, onBeforeUnmount } 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,83 @@ defineComponent({
     }, [slotOrValue(slots.default, props.content)]);
   }
 });
+var canShowModal = () => typeof HTMLDialogElement !== "undefined" && typeof HTMLDialogElement.prototype.showModal === "function";
+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());
+    const sync = () => {
+      const dialog = element.value;
+      if (!dialog || !managed.value) return;
+      if (props.open && !dialog.open) dialog.showModal();
+      else if (!props.open && dialog.open) dialog.close();
+    };
+    onMounted(() => {
+      mounted.value = true;
+    });
+    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,
+        // The browser closed it (a close request it would not let be cancelled) while open is still true. A close event
+        // from moving a mounted dialog into the top layer finds it open again, and is not reported.
+        onClose: () => {
+          if (props.open && !element.value?.open) 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 +655,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 +740,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 +890,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 +1206,7 @@ var SearchInput = defineComponent({
           "aria-label": "Clear search",
           disabled: props.disabled,
           onClick: clear
-        }, "\xD7") : null
+        }, [statusIcon("x")]) : null
       ]);
     };
   }
@@ -1284,17 +1353,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);
     };

package/evidence/vue-readiness.v1.json

@@ -3,7 +3,7 @@
   "mission": "s193-m05",
   "target": "vue",
   "contractVersion": "1.1.0",
-  "derivation": "Each emissionEligible value is asserted with @oods/component-contracts evaluateEmissionEligibility. Sprint 185 adds five root exports; the original Sprint 182 row objects are preserved. Sprint 186 wave 2 appends ClassificationPanel, FilterPanel, PriceSummary, AddressCollectionPanel, MembershipPanel, PreferencePanel, TagManager, AddressSummaryBadge, MessageStatusBadge, PreferenceSummaryBadge, RoleBadgeList, TagPills, AddressValidationTimeline, AuditEvent, MembershipAuditTimeline, MessageEventTimeline, PreferenceTimeline, AddressEditor, PreferenceEditor, RoleAssignmentForm, StatusSelector, TagInput and TemplatePicker root exports with the same six evidence classes; prior rows are preserved. Sprint 186 m06 folds the former eight ported families into the root contract, exports, declarations and shared scenarios. Historical readiness files remain as evidence; readiness-ported resolved to this root document from Sprint 186 m06 until Sprint 200 m04 retired that subpath, and this root document is now the only readiness export. Sprint 187 m02 adds five naming/classification families with the same six evidence classes. Native classification controls are presentational; no save or domain-change action is claimed. Sprint 187 m03 adds OwnerBadge, OwnershipSummary, OwnershipMeta and TagSummary with the same six reference classes and explicit scalar/trait-array semantics. No ownership transfer or tagging action is claimed. Sprint 192 m03 projects passing per-root axe and executable scenario results into accessibility and interaction evidence; native unwired controls are measured without claiming a domain action. Sprint 192 m04 projects per-root six-cell browser contrast/token checks and screenshot hashes into visualThemes. Sprint 192 m05 adds the three retained roots and derives all accessibility, interaction and theme claims from passing 75-root measurements. Sprint 193 m04 adds nine declared non-Viz recipes and derives all accessibility, interaction and theme claims from passing 84-root measurements. Sprint 193 m05 adds 25 typed Viz recipes and derives all accessibility, interaction and theme claims from passing 109-root measurements.",
+  "derivation": "Each emissionEligible value is asserted with @oods/component-contracts evaluateEmissionEligibility. Sprint 185 adds five root exports; the original Sprint 182 row objects are preserved. Sprint 186 wave 2 appends ClassificationPanel, FilterPanel, PriceSummary, AddressCollectionPanel, MembershipPanel, PreferencePanel, TagManager, AddressSummaryBadge, MessageStatusBadge, PreferenceSummaryBadge, RoleBadgeList, TagPills, AddressValidationTimeline, AuditEvent, MembershipAuditTimeline, MessageEventTimeline, PreferenceTimeline, AddressEditor, PreferenceEditor, RoleAssignmentForm, StatusSelector, TagInput and TemplatePicker root exports with the same six evidence classes; prior rows are preserved. Sprint 186 m06 folds the former eight ported families into the root contract, exports, declarations and shared scenarios. Historical readiness files remain as evidence; readiness-ported resolved to this root document from Sprint 186 m06 until Sprint 200 m04 retired that subpath, and this root document is now the only readiness export. Sprint 187 m02 adds five naming/classification families with the same six evidence classes. Native classification controls are presentational; no save or domain-change action is claimed. Sprint 187 m03 adds OwnerBadge, OwnershipSummary, OwnershipMeta and TagSummary with the same six reference classes and explicit scalar/trait-array semantics. No ownership transfer or tagging action is claimed. Sprint 192 m03 projects passing per-root axe and executable scenario results into accessibility and interaction evidence; native unwired controls are measured without claiming a domain action. Sprint 192 m04 projects per-root six-cell browser contrast/token checks and screenshot hashes into visualThemes. Sprint 192 m05 adds the three retained roots and derives all accessibility, interaction and theme claims from passing 75-root measurements. Sprint 193 m04 adds nine declared non-Viz recipes and derives all accessibility, interaction and theme claims from passing 84-root measurements. Sprint 193 m05 adds 25 typed Viz recipes and derives all accessibility, interaction and theme claims from passing 109-root measurements. Sprint 222 m02 adds Switch and Dialog with the same six evidence classes and derives their accessibility, interaction and theme claims from passing 112-root measurements.",
   "rows": [
     {
       "componentId": "AddressCollectionPanel",
@@ -2554,6 +2554,79 @@
         }
       }
     },
+    {
+      "componentId": "Dialog",
+      "state": "implemented-evidence-complete",
+      "emissionEligible": true,
+      "evidence": {
+        "versionedContract": {
+          "status": "passed",
+          "refs": [
+            "packages/component-contracts/src/contracts.ts#Dialog"
+          ]
+        },
+        "targetImplementation": {
+          "status": "passed",
+          "refs": [
+            "packages/components-vue/src/primitives.ts#Dialog"
+          ]
+        },
+        "packageExport": {
+          "status": "passed",
+          "refs": [
+            "packages/components-vue/src/index.ts#Dialog"
+          ]
+        },
+        "publicDeclaration": {
+          "status": "passed",
+          "refs": [
+            "packages/components-vue/dist/index.d.ts#Dialog"
+          ]
+        },
+        "dependencyClosure": {
+          "status": "passed",
+          "refs": [
+            "packages/components-vue/test/package-contract.spec.ts#dependency-closure"
+          ]
+        },
+        "frameworkScenario": {
+          "status": "passed",
+          "refs": [
+            "packages/components-vue/test/scenarios.spec.ts#dialog-confirm"
+          ]
+        },
+        "accessibility": {
+          "status": "passed",
+          "classification": "verified",
+          "refs": [
+            "artifacts/product-reality/sprint-222/m02/switch-dialog/vue-measured.json#Dialog"
+          ]
+        },
+        "interaction": {
+          "status": "passed",
+          "classification": "verified",
+          "refs": [
+            "artifacts/product-reality/sprint-222/m02/switch-dialog/vue-measured.json#Dialog"
+          ]
+        },
+        "visualThemes": {
+          "status": "passed",
+          "classification": "verified",
+          "cells": [
+            "A-light",
+            "A-dark",
+            "A-hc",
+            "B-light",
+            "B-dark",
+            "B-hc"
+          ],
+          "refs": [
+            "artifacts/product-reality/sprint-222/m02/switch-dialog/vue-theme/report.json#Dialog"
+          ]
+        }
+      },
+      "measurementRoot": "artifacts/product-reality/sprint-222/m02/switch-dialog"
+    },
     {
       "componentId": "FilterPanel",
       "state": "implemented-evidence-complete",
@@ -5321,6 +5394,79 @@
         }
       }
     },
+    {
+      "componentId": "Switch",
+      "state": "implemented-evidence-complete",
+      "emissionEligible": true,
+      "evidence": {
+        "versionedContract": {
+          "status": "passed",
+          "refs": [
+            "packages/component-contracts/src/contracts.ts#Switch"
+          ]
+        },
+        "targetImplementation": {
+          "status": "passed",
+          "refs": [
+            "packages/components-vue/src/fields.ts#Switch"
+          ]
+        },
+        "packageExport": {
+          "status": "passed",
+          "refs": [
+            "packages/components-vue/src/index.ts#Switch"
+          ]
+        },
+        "publicDeclaration": {
+          "status": "passed",
+          "refs": [
+            "packages/components-vue/dist/index.d.ts#Switch"
+          ]
+        },
+        "dependencyClosure": {
+          "status": "passed",
+          "refs": [
+            "packages/components-vue/test/package-contract.spec.ts#dependency-closure"
+          ]
+        },
+        "frameworkScenario": {
+          "status": "passed",
+          "refs": [
+            "packages/components-vue/test/scenarios.spec.ts#switch-controlled"
+          ]
+        },
+        "accessibility": {
+          "status": "passed",
+          "classification": "verified",
+          "refs": [
+            "artifacts/product-reality/sprint-222/m02/switch-dialog/vue-measured.json#Switch"
+          ]
+        },
+        "interaction": {
+          "status": "passed",
+          "classification": "verified",
+          "refs": [
+            "artifacts/product-reality/sprint-222/m02/switch-dialog/vue-measured.json#Switch"
+          ]
+        },
+        "visualThemes": {
+          "status": "passed",
+          "classification": "verified",
+          "cells": [
+            "A-light",
+            "A-dark",
+            "A-hc",
+            "B-light",
+            "B-dark",
+            "B-hc"
+          ],
+          "refs": [
+            "artifacts/product-reality/sprint-222/m02/switch-dialog/vue-theme/report.json#Switch"
+          ]
+        }
+      },
+      "measurementRoot": "artifacts/product-reality/sprint-222/m02/switch-dialog"
+    },
     {
       "componentId": "Table",
       "state": "implemented-evidence-complete",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oods/components-vue",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "Vue 3 components for OODS Foundry: the controls, layouts and domain views its generated screens use.",
   "homepage": "https://oods-foundry.com/",
   "bugs": {
@@ -53,8 +53,8 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@oods/component-contracts": "0.3.3",
-    "@oods/component-styles": "0.3.3"
+    "@oods/component-contracts": "0.4.0",
+    "@oods/component-styles": "0.4.0"
   },
   "peerDependencies": {
     "vue": "^3.5.0"