@vonage/vivid 5.8.0 → 5.10.0

package/locales/zh-CN.js

@@ -327,6 +327,9 @@ const zhCN = {
   dialog: {
     dismissButtonLabel: "关"
   },
+  popover: {
+    dismissButtonLabel: "关"
+  },
   banner: {
     dismissButtonLabel: "关"
   },
@@ -437,7 +440,9 @@ const zhCN = {
       small: "小",
       fit: "适应",
       original: "原始大小"
-    }
+    },
+    suggestLoading: "加载中...",
+    suggestNoResults: "无结果"
   },
   button: {
     pendingLabel: "加载中"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "5.8.0",
+  "version": "5.10.0",
   "homepage": "https://vivid.deno.dev",
   "bugs": {
     "url": "https://github.com/Vonage/vivid-3/issues"
@@ -39,7 +39,7 @@
   "module": "./index.js",
   "dependencies": {
     "@floating-ui/dom": "^1.6.13",
-    "@microsoft/fast-element": "^2.8.3",
+    "@microsoft/fast-element": "2.8.3",
     "@microsoft/fast-web-utilities": "^6.0.0",
     "date-fns": "^3.0.0",
     "dompurify": "^3.3.0",
@@ -47,6 +47,7 @@
     "prosemirror-dropcursor": "^1.8.2",
     "prosemirror-gapcursor": "^1.3.2",
     "prosemirror-history": "^1.4.1",
+    "prosemirror-inputrules": "^1.4.0",
     "prosemirror-keymap": "^1.2.3",
     "prosemirror-model": "^1.25.4",
     "prosemirror-schema-basic": "^1.2.3",
@@ -55,7 +56,8 @@
     "prosemirror-view": "^1.40.1",
     "ramda": "^0.32.0",
     "uuid": "^11.1.0",
-    "vanilla-colorful": "^0.7.2"
+    "vanilla-colorful": "^0.7.2",
+    "video.js": "^8.23.4"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.5.7",
@@ -79,7 +81,6 @@
     "sass": "^1.94.2",
     "tsx": "^4.20.6",
     "typescript": "5.9.3",
-    "video.js": "^8.23.4",
     "vite": "^5.4.18",
     "vite-plugin-dts": "~2.3.0",
     "vite-plugin-static-copy": "^1.0.6",
@@ -87,17 +88,17 @@
     "vitest-axe": "^0.1.0",
     "vitest-fetch-mock": "^0.4.5",
     "wait-on": "^8.0.5",
-    "@repo/consts": "1.0.0",
     "@repo/cem-analyzer-plugins": "1.0.0",
-    "@repo/eslint-plugin-repo": "1.0.0",
     "@repo/eslint-config": "1.0.0",
+    "@repo/consts": "1.0.0",
+    "@repo/eslint-plugin-repo": "1.0.0",
     "@repo/shared": "1.0.0",
     "@repo/stylelint-config": "1.0.0",
-    "@repo/tokens": "1.0.0",
     "@repo/styles": "1.0.0",
+    "@repo/tokens": "1.0.0",
+    "@repo/vitest-config": "1.0.0",
     "@repo/tools": "1.0.0",
-    "@repo/typescript-config": "1.0.0",
-    "@repo/vitest-config": "1.0.0"
+    "@repo/typescript-config": "1.0.0"
   },
   "customElements": "custom-elements.json",
   "scripts": {

package/popover/definition.cjs

@@ -0,0 +1,363 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const elevation_definition = require('../unbundled/definition6.cjs');
+const vividElement = require('../unbundled/vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
+const dom = require('@floating-ui/dom');
+const delegatesAria = require('../unbundled/delegates-aria.cjs');
+const localized = require('../unbundled/localized.cjs');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+const icon_definition = require('../icon/definition.cjs');
+const button_definition = require('../unbundled/definition.cjs');
+
+const styles = ":host{display:inline-block}.base{white-space:initial;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base{position:fixed;overflow:visible;padding:0;border:none;border-radius:8px;margin:0;inline-size:max-content;min-inline-size:fit-content}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg, transparent)}.control{display:flex;flex-direction:column;padding:var(--popover-padding, 24px);border-radius:inherit;background:var(--vvd-color-surface-4dp);color:var(--vvd-color-canvas-text);gap:var(--popover-gap, 24px)}.control:not(.open){display:none}.control.condensed{--popover-padding: 12px;--popover-gap: 12px}.control.manual{padding-block-start:40px}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}";
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class Popover extends localized.Localized(delegatesAria.DelegatesAria(vividElement.VividElement)) {
+  constructor() {
+    super(...arguments);
+    this.placement = "bottom";
+    this.manual = false;
+    this.layout = "default";
+    this.offset = 8;
+    this.alternate = false;
+    this.dismissButtonAriaLabel = null;
+    this.arrow = false;
+    this.open = false;
+    /**
+     * @internal
+     */
+    this.#currentAnchor = null;
+    /**
+     * @internal
+     */
+    this.#manualToggle = () => {
+      this._popoverEl.togglePopover();
+    };
+    /**
+     * @internal
+     */
+    this.#autoUpdateCallback = () => {
+      this.#lastPositionUpdate = this.updatePosition();
+    };
+    // --- Lifecycle & Events ---
+    /**
+     * Syncs native toggle state (Esc key, light dismiss) back to the 'open' attribute.
+     * @internal
+     */
+    this.#handleNativeToggle = (e) => {
+      const isOpen = e.newState ? e.newState === "open" : this._popoverEl.matches(":popover-open");
+      if (this.open !== isOpen) {
+        this.open = isOpen;
+      }
+      this.$emit(isOpen ? "open" : "close", void 0, { bubbles: false });
+    };
+  }
+  placementChanged() {
+    this.#updateAutoUpdate();
+  }
+  arrowChanged() {
+    this.#updateAutoUpdate();
+  }
+  openChanged(_oldValue, newValue) {
+    if (!this._popoverEl) return;
+    const isOpen = this._popoverEl.matches(":popover-open");
+    if (newValue && !isOpen) {
+      this._popoverEl.showPopover();
+    } else if (!newValue && isOpen) {
+      this._popoverEl.hidePopover();
+    }
+    this.#updateAutoUpdate();
+  }
+  anchorChanged() {
+    this.#updateAnchor();
+  }
+  _slottedAnchorChanged() {
+    this.#updateAnchor();
+  }
+  #currentAnchor;
+  /**
+   * @internal
+   */
+  #updateAnchor() {
+    if (!this._popoverEl) return;
+    const newAnchor = this.anchor || this._slottedAnchor?.[0] || null;
+    if (this.#currentAnchor === newAnchor) return;
+    if (this.#currentAnchor) {
+      this.#unbindTrigger(this.#currentAnchor);
+    }
+    this.#currentAnchor = newAnchor;
+    if (this.#currentAnchor && this._popoverEl) {
+      this.#bindTrigger(this.#currentAnchor);
+      this.#updateAutoUpdate();
+    }
+  }
+  /**
+   * @internal
+   */
+  #bindTrigger(anchor) {
+    anchor.setAttribute("aria-haspopup", "dialog");
+    if (anchor instanceof HTMLButtonElement || anchor instanceof HTMLInputElement) {
+      anchor.popoverTargetElement = this._popoverEl;
+    } else {
+      anchor.addEventListener("click", this.#manualToggle);
+    }
+  }
+  /**
+   * @internal
+   */
+  #unbindTrigger(anchor) {
+    anchor.removeAttribute("aria-haspopup");
+    if (anchor instanceof HTMLButtonElement || anchor instanceof HTMLInputElement) {
+      anchor.popoverTargetElement = null;
+    } else {
+      anchor.removeEventListener("click", this.#manualToggle);
+    }
+  }
+  #manualToggle;
+  // --- Floating UI Logic ---
+  /**
+   * @internal
+   */
+  get #middleware() {
+    let middleware = [dom.inline(), dom.flip(), dom.shift(), dom.hide()];
+    /* v8 ignore next -- @preserve */
+    let offsetValue = this.offset ?? 0;
+    if (this.arrow && this._arrowEl) {
+      offsetValue = 12;
+      middleware = [
+        ...middleware,
+        dom.arrow({ element: this._arrowEl, padding: 10 })
+      ];
+    }
+    /* v8 ignore else -- @preserve */
+    if (offsetValue > 0) {
+      middleware.unshift(dom.offset(offsetValue));
+    }
+    return middleware;
+  }
+  /**
+   * @internal
+   */
+  #cleanup;
+  /**
+   * @internal
+   */
+  #updateAutoUpdate() {
+    this.#cleanup?.();
+    if (this.open && this.#currentAnchor && this._popoverEl) {
+      this.#cleanup = dom.autoUpdate(
+        this.#currentAnchor,
+        this._popoverEl,
+        this.#autoUpdateCallback
+      );
+    }
+  }
+  /**
+   * Tracks the promise of the last position update.
+   * @internal
+   */
+  #lastPositionUpdate;
+  #autoUpdateCallback;
+  /**
+   * Updates the position of the popover
+   * @public
+   */
+  async updatePosition() {
+    /* v8 ignore if -- @preserve */
+    if (!this.open || !this.#currentAnchor || !this._popoverEl) return;
+    const positionData = await dom.computePosition(
+      this.#currentAnchor,
+      this._popoverEl,
+      {
+        placement: this.placement,
+        strategy: "fixed",
+        middleware: this.#middleware
+      }
+    );
+    /* v8 ignore if -- @preserve */
+    if (!this.open) return;
+    this.#assignPopoverPosition(positionData);
+    if (this.arrow && this._arrowEl) {
+      this.#assignArrowPosition(positionData);
+    }
+  }
+  /**
+   * @internal
+   */
+  #assignPopoverPosition(data) {
+    const { x, y } = data;
+    Object.assign(this._popoverEl.style, {
+      left: `${x}px`,
+      top: `${y}px`,
+      visibility: data.middlewareData.hide?.referenceHidden ? "hidden" : "visible"
+    });
+  }
+  /**
+   * @internal
+   */
+  #assignArrowPosition(data) {
+    /* v8 ignore if -- @preserve */
+    if (!this._arrowEl) return;
+    const { x: arrowX, y: arrowY } = data.middlewareData.arrow;
+    const styles = {
+      left: "calc(100% - 4px)",
+      right: "-4px",
+      top: "calc(100% - 4px)",
+      bottom: "-4px"
+    };
+    const staticAxis = data.placement.split("-")[0];
+    Object.assign(this._arrowEl.style, {
+      left: arrowX ? `${arrowX}px` : styles[staticAxis],
+      top: arrowY ? `${arrowY}px` : styles[staticAxis]
+    });
+  }
+  #handleNativeToggle;
+  connectedCallback() {
+    super.connectedCallback();
+    this.#updateAnchor();
+    /* v8 ignore else -- @preserve */
+    if (this._popoverEl) {
+      this._popoverEl.addEventListener("toggle", this.#handleNativeToggle);
+      if (this.open && !this._popoverEl.matches(":popover-open")) {
+        this._popoverEl.showPopover();
+        this.#updateAutoUpdate();
+      }
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#cleanup?.();
+    if (this.#currentAnchor) {
+      this.#unbindTrigger(this.#currentAnchor);
+      this.#currentAnchor = null;
+    }
+    /* v8 ignore else -- @preserve */
+    if (this._popoverEl) {
+      this._popoverEl.removeEventListener("toggle", this.#handleNativeToggle);
+    }
+  }
+  // --- Methods ---
+  show() {
+    this.open = true;
+    return this.#lastPositionUpdate ?? Promise.resolve();
+  }
+  hide() {
+    this.open = false;
+  }
+  toggle() {
+    this.open = !this.open;
+  }
+}
+__decorateClass([
+  fastElement.attr({ mode: "fromView" })
+], Popover.prototype, "placement");
+__decorateClass([
+  fastElement.attr({ mode: "boolean" })
+], Popover.prototype, "manual");
+__decorateClass([
+  fastElement.attr({ mode: "fromView" })
+], Popover.prototype, "layout");
+__decorateClass([
+  fastElement.attr({
+    attribute: "offset",
+    mode: "fromView",
+    converter: fastElement.nullableNumberConverter
+  })
+], Popover.prototype, "offset");
+__decorateClass([
+  fastElement.attr({
+    mode: "boolean"
+  })
+], Popover.prototype, "alternate");
+__decorateClass([
+  fastElement.attr({ attribute: "dismiss-button-aria-label" })
+], Popover.prototype, "dismissButtonAriaLabel");
+__decorateClass([
+  fastElement.attr({ mode: "boolean" })
+], Popover.prototype, "arrow");
+__decorateClass([
+  fastElement.attr({ mode: "boolean" })
+], Popover.prototype, "open");
+__decorateClass([
+  fastElement.observable
+], Popover.prototype, "anchor");
+__decorateClass([
+  fastElement.observable
+], Popover.prototype, "_slottedAnchor");
+
+const getClasses = ({ open, manual, layout }) => fastWebUtilities.classNames(
+  "control",
+  ["open", Boolean(open)],
+  ["manual", Boolean(manual)],
+  ["condensed", layout === "condensed"]
+);
+const popoverTemplate = (context) => {
+  const elevationTag = context.tagFor(elevation_definition.Elevation);
+  const buttonTag = context.tagFor(button_definition.Button);
+  const iconTag = context.tagFor(icon_definition.VwcIconElement);
+  return fastElement.html`
+		<slot name="anchor" ${fastElement.slotted("_slottedAnchor")}></slot>
+		<${elevationTag}>
+			<div class="base" 
+				${fastElement.ref("_popoverEl")} 
+				popover="${(x) => x.manual ? "manual" : "auto"}"
+				tabindex="-1"
+				autofocus
+				${delegatesAria.delegateAria({
+    role: "dialog",
+    ariaModal: "false"
+  })}
+			>
+				<div class="${getClasses}" 
+					part="${(x) => x.alternate ? "vvd-theme-alternate" : ""}">
+					<slot></slot>
+					<slot name="footer"></slot>
+					${fastElement.when(
+    (x) => x.manual,
+    fastElement.html`<${buttonTag}
+							aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.popover.dismissButtonLabel}"
+							type="button"
+							size="condensed"
+							class="dismiss-button"
+							@click="${(x) => x.hide()}">
+							<${iconTag} name="close-line" slot="icon"></${iconTag}>
+						</${buttonTag}>`
+  )}
+					${fastElement.when(
+    (x) => x.arrow,
+    fastElement.html`<div class="arrow" ${fastElement.ref("_arrowEl")}></div>`
+  )}
+				</div>
+			</div>
+		</${elevationTag}>
+	`;
+};
+
+const popoverDefinition = vividElement.defineVividComponent(
+  "popover",
+  Popover,
+  popoverTemplate,
+  [button_definition.buttonDefinition, icon_definition.iconDefinition, elevation_definition.elevationDefinition],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
+  }
+);
+const registerPopover = vividElement.createRegisterFunction(popoverDefinition);
+
+exports.VwcPopoverElement = Popover;
+exports.popoverDefinition = popoverDefinition;
+exports.registerPopover = registerPopover;