@oods/components-vue 0.4.0 → 0.4.2

package/dist/ported.js

@@ -1,5 +1,5 @@
 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';
+import { defineComponent, h, useId, computed, ref, onMounted, onBeforeUnmount, watch } from 'vue';
 
 // src/ported.ts
 function statusIcon(name) {
@@ -185,6 +185,31 @@ defineComponent({
   }
 });
 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: {
@@ -206,15 +231,24 @@ defineComponent({
     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();
-      else if (!props.open && dialog.open) dialog.close();
+      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();
@@ -237,10 +271,23 @@ defineComponent({
           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.
+        // 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 (props.open && !element.value?.open) emit("close");
+          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" }, [
@@ -1061,12 +1108,15 @@ var CancellationSummary = defineComponent({
     cancelAtPeriodEndField: String,
     requestedAtField: String,
     reasonField: String,
-    codeField: String
+    codeField: String,
+    // s224-m01 (#2542 ruling 6): Boolean first, as the badges' hideWhenFalse is (a bare attribute casts to true).
+    hideWhenDefault: { type: [Boolean, String], default: void 0 }
   },
   setup(props, { attrs, slots }) {
     return () => {
       const slotValue = slotSummaryValue(slots);
       const cancellationValue = props.cancelAtPeriodEnd ?? slotValue;
+      if (props.hideWhenDefault === true && props.cancelAtPeriodEnd === false && !props.requestedAt && !props.reason && !props.code && slotValue === void 0) return null;
       const rows = [];
       if (cancellationValue !== void 0) {
         rows.push(summaryEntry(

package/evidence/vue-readiness.v1.json

@@ -2262,6 +2262,79 @@
         }
       }
     },
+    {
+      "componentId": "Combobox",
+      "state": "implemented-evidence-complete",
+      "emissionEligible": true,
+      "evidence": {
+        "versionedContract": {
+          "status": "passed",
+          "refs": [
+            "packages/component-contracts/src/contracts.ts#Combobox"
+          ]
+        },
+        "targetImplementation": {
+          "status": "passed",
+          "refs": [
+            "packages/components-vue/src/combobox.ts#Combobox"
+          ]
+        },
+        "packageExport": {
+          "status": "passed",
+          "refs": [
+            "packages/components-vue/src/index.ts#Combobox"
+          ]
+        },
+        "publicDeclaration": {
+          "status": "passed",
+          "refs": [
+            "packages/components-vue/dist/index.d.ts#Combobox"
+          ]
+        },
+        "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#combobox-filter-and-pick"
+          ]
+        },
+        "accessibility": {
+          "status": "passed",
+          "classification": "verified",
+          "refs": [
+            "artifacts/product-reality/sprint-223/m02/combobox/vue-measured.json#Combobox"
+          ]
+        },
+        "interaction": {
+          "status": "passed",
+          "classification": "verified",
+          "refs": [
+            "artifacts/product-reality/sprint-223/m02/combobox/vue-measured.json#Combobox"
+          ]
+        },
+        "visualThemes": {
+          "status": "passed",
+          "classification": "verified",
+          "cells": [
+            "A-light",
+            "A-dark",
+            "A-hc",
+            "B-light",
+            "B-dark",
+            "B-hc"
+          ],
+          "refs": [
+            "artifacts/product-reality/sprint-223/m02/combobox/vue-theme/report.json#Combobox"
+          ]
+        }
+      },
+      "measurementRoot": "artifacts/product-reality/sprint-223/m02/combobox"
+    },
     {
       "componentId": "CommunicationDetailPanel",
       "state": "implemented-evidence-complete",
@@ -4812,6 +4885,79 @@
         }
       }
     },
+    {
+      "componentId": "SegmentedControl",
+      "state": "implemented-evidence-complete",
+      "emissionEligible": true,
+      "evidence": {
+        "versionedContract": {
+          "status": "passed",
+          "refs": [
+            "packages/component-contracts/src/contracts.ts#SegmentedControl"
+          ]
+        },
+        "targetImplementation": {
+          "status": "passed",
+          "refs": [
+            "packages/components-vue/src/segmented-control.ts#SegmentedControl"
+          ]
+        },
+        "packageExport": {
+          "status": "passed",
+          "refs": [
+            "packages/components-vue/src/index.ts#SegmentedControl"
+          ]
+        },
+        "publicDeclaration": {
+          "status": "passed",
+          "refs": [
+            "packages/components-vue/dist/index.d.ts#SegmentedControl"
+          ]
+        },
+        "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#segmented-control-billing-period"
+          ]
+        },
+        "accessibility": {
+          "status": "passed",
+          "classification": "verified",
+          "refs": [
+            "artifacts/product-reality/sprint-223/m02/segmented-control/vue-measured.json#SegmentedControl"
+          ]
+        },
+        "interaction": {
+          "status": "passed",
+          "classification": "verified",
+          "refs": [
+            "artifacts/product-reality/sprint-223/m02/segmented-control/vue-measured.json#SegmentedControl"
+          ]
+        },
+        "visualThemes": {
+          "status": "passed",
+          "classification": "verified",
+          "cells": [
+            "A-light",
+            "A-dark",
+            "A-hc",
+            "B-light",
+            "B-dark",
+            "B-hc"
+          ],
+          "refs": [
+            "artifacts/product-reality/sprint-223/m02/segmented-control/vue-theme/report.json#SegmentedControl"
+          ]
+        }
+      },
+      "measurementRoot": "artifacts/product-reality/sprint-223/m02/segmented-control"
+    },
     {
       "componentId": "Select",
       "state": "implemented-evidence-complete",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oods/components-vue",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "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.4.0",
-    "@oods/component-styles": "0.4.0"
+    "@oods/component-contracts": "0.4.2",
+    "@oods/component-styles": "0.4.2"
   },
   "peerDependencies": {
     "vue": "^3.5.0"