@prosekit/lit 0.1.3 → 0.1.4

package/dist/prosekit-lit-combo-box-input.js

@@ -3,38 +3,52 @@ import {
 } from "./chunk-C4MW43I4.js";
 import {
   LightElement,
-  __decorateClass
-} from "./chunk-O5JP3B34.js";
+  defineCustomElement
+} from "./chunk-S32IZIQF.js";
 
 // src/components/combo-box-input/index.ts
-import { consume } from "@lit/context";
+import { ContextConsumer } from "@lit/context";
 import { html } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
 var propNames = ["placeholder"];
 var ComboBoxInput = class extends LightElement {
   constructor() {
     super(...arguments);
     this.placeholder = "";
-    this.comboBoxContext = null;
+    this.comboBoxContext = new ContextConsumer(this, {
+      context: comboBoxContext,
+      subscribe: true
+    });
     this.visible = false;
   }
   handleKeydown(event) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    if (event.code === "ArrowUp") {
-      (_b = (_a = this.comboBoxContext) == null ? void 0 : _a.listManager) == null ? void 0 : _b.handleArrowUp();
-    } else if (event.code === "ArrowDown") {
-      (_d = (_c = this.comboBoxContext) == null ? void 0 : _c.listManager) == null ? void 0 : _d.handleArrowDown();
-    } else if (event.code === "Escape") {
-      (_f = (_e = this.comboBoxContext) == null ? void 0 : _e.listManager) == null ? void 0 : _f.handleEscape();
-    } else if (event.code === "Enter") {
-      (_h = (_g = this.comboBoxContext) == null ? void 0 : _g.listManager) == null ? void 0 : _h.handleEnter();
+    switch (event.code) {
+      case "ArrowUp":
+        (_b = (_a = this.comboBoxContext.value) == null ? void 0 : _a.listManager) == null ? void 0 : _b.handleArrowUp();
+        event.preventDefault();
+        return;
+      case "ArrowDown":
+        (_d = (_c = this.comboBoxContext.value) == null ? void 0 : _c.listManager) == null ? void 0 : _d.handleArrowDown();
+        event.preventDefault();
+        return;
+      case "Escape":
+        (_f = (_e = this.comboBoxContext.value) == null ? void 0 : _e.listManager) == null ? void 0 : _f.handleEscape();
+        event.preventDefault();
+        return;
+      case "Enter":
+        (_h = (_g = this.comboBoxContext.value) == null ? void 0 : _g.listManager) == null ? void 0 : _h.handleEnter();
+        event.preventDefault();
+        return;
     }
   }
   handleInput(event) {
     var _a, _b, _c;
     const value = (_b = (_a = event == null ? void 0 : event.target) == null ? void 0 : _a.value) != null ? _b : "";
-    (_c = this.comboBoxContext) == null ? void 0 : _c.setInputValue(value);
+    (_c = this.comboBoxContext.value) == null ? void 0 : _c.setInputValue(value);
   }
+  /**
+   * @hidden
+   */
   firstUpdated() {
     const resizeObserver = new ResizeObserver((entries) => {
       const visible = entries.some(
@@ -50,22 +64,21 @@ var ComboBoxInput = class extends LightElement {
     });
     resizeObserver.observe(this);
   }
-  /** @hidden */
+  /**
+   * @hidden
+   */
   render() {
     var _a, _b;
-    return html`<input placeholder="${this.placeholder}" @keydown="${(event) => this.handleKeydown(event)}" @input="${(event) => this.handleInput(event)}" value="${(_b = (_a = this.comboBoxContext) == null ? void 0 : _a.inputValue) != null ? _b : ""}">`;
+    return html`<input placeholder="${this.placeholder}" @keydown="${(event) => this.handleKeydown(event)}" @input="${(event) => this.handleInput(event)}" .value="${(_b = (_a = this.comboBoxContext.value) == null ? void 0 : _a.inputValue) != null ? _b : ""}">`;
   }
 };
-__decorateClass([
-  property({ attribute: true })
-], ComboBoxInput.prototype, "placeholder", 2);
-__decorateClass([
-  consume({ context: comboBoxContext, subscribe: true }),
-  state()
-], ComboBoxInput.prototype, "comboBoxContext", 2);
-ComboBoxInput = __decorateClass([
-  customElement("prosekit-combo-box-input")
-], ComboBoxInput);
+/**
+ * @hidden
+ */
+ComboBoxInput.properties = {
+  placeholder: { attribute: true }
+};
+defineCustomElement("prosekit-combo-box-input", ComboBoxInput);
 export {
   ComboBoxInput,
   propNames

package/dist/prosekit-lit-combo-box-item.js

@@ -1,9 +1,9 @@
 import {
   ComboBoxItem,
   propNames
-} from "./chunk-55G7TJI3.js";
+} from "./chunk-L6FOAZFL.js";
 import "./chunk-C4MW43I4.js";
-import "./chunk-O5JP3B34.js";
+import "./chunk-S32IZIQF.js";
 export {
   ComboBoxItem,
   propNames

package/dist/prosekit-lit-combo-box-list.js

@@ -3,45 +3,41 @@ import {
 } from "./chunk-C4MW43I4.js";
 import {
   LightElement,
-  __decorateClass
-} from "./chunk-O5JP3B34.js";
+  defineCustomElement
+} from "./chunk-S32IZIQF.js";
 
 // src/components/combo-box-list/component.ts
-import { consume } from "@lit/context";
-import { customElement, state } from "lit/decorators.js";
+import { ContextConsumer } from "@lit/context";
 var propNames = [];
 var ComboBoxList = class extends LightElement {
   constructor() {
     super(...arguments);
-    this.comboBoxContext = null;
+    this.comboBoxContext = new ContextConsumer(this, {
+      context: comboBoxContext,
+      subscribe: true
+    });
   }
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener("mousemove", (event) => {
       var _a;
-      (_a = this.comboBoxContext) == null ? void 0 : _a.listManager.handleMouseMove(event);
+      (_a = this.comboBoxContext.value) == null ? void 0 : _a.listManager.handleMouseMove(event);
     });
     this.addEventListener("mouseover", (event) => {
       var _a;
-      (_a = this.comboBoxContext) == null ? void 0 : _a.listManager.handleMouseOver(event);
+      (_a = this.comboBoxContext.value) == null ? void 0 : _a.listManager.handleMouseOver(event);
     });
     this.addEventListener("mousedown", (event) => {
       var _a;
-      (_a = this.comboBoxContext) == null ? void 0 : _a.listManager.handleMouseDown(event);
+      (_a = this.comboBoxContext.value) == null ? void 0 : _a.listManager.handleMouseDown(event);
     });
     this.addEventListener("click", (event) => {
       var _a;
-      (_a = this.comboBoxContext) == null ? void 0 : _a.listManager.handleClick(event);
+      (_a = this.comboBoxContext.value) == null ? void 0 : _a.listManager.handleClick(event);
     });
   }
 };
-__decorateClass([
-  consume({ context: comboBoxContext, subscribe: true }),
-  state()
-], ComboBoxList.prototype, "comboBoxContext", 2);
-ComboBoxList = __decorateClass([
-  customElement("prosekit-combo-box-list")
-], ComboBoxList);
+defineCustomElement("prosekit-combo-box-list", ComboBoxList);
 export {
   ComboBoxList,
   propNames

package/dist/prosekit-lit-combo-box.js

@@ -1,20 +1,19 @@
 import {
   Popover
-} from "./chunk-7WLKD2U6.js";
+} from "./chunk-Z3PEQ6MW.js";
 import {
   ListManager
-} from "./chunk-IDDQA3VV.js";
-import "./chunk-55G7TJI3.js";
+} from "./chunk-PW3MTUZM.js";
+import "./chunk-L6FOAZFL.js";
 import {
   comboBoxContext
 } from "./chunk-C4MW43I4.js";
 import {
-  __decorateClass
-} from "./chunk-O5JP3B34.js";
+  defineCustomElement
+} from "./chunk-S32IZIQF.js";
 
 // src/components/combo-box/index.ts
-import { provide } from "@lit/context";
-import { customElement, property, state } from "lit/decorators.js";
+import { ContextProvider } from "@lit/context";
 
 // src/components/combo-box-item/helpers.ts
 function isComboBoxItem(element) {
@@ -46,10 +45,10 @@ var ComboBox = class extends Popover {
       },
       getSelectedValue: () => {
         var _a;
-        return ((_a = this.context.selectedValue) != null ? _a : "").trim();
+        return ((_a = this.getContext().selectedValue) != null ? _a : "").trim();
       },
-      setSelectedValue: (value) => {
-        return this.context.setSelectedValue(value);
+      setSelectedValue: (value, reason) => {
+        return this.setSelectedValue(value, reason);
       },
       getItemValue: (item) => {
         var _a;
@@ -60,50 +59,67 @@ var ComboBox = class extends Popover {
         return true;
       },
       onDismiss: () => {
-        var _a;
-        (_a = this.onDismiss) == null ? void 0 : _a.call(this);
+        this.hide();
       },
       onSelect: (item) => {
-        var _a, _b;
-        this.context.setSelectedValue("");
-        this.context.setInputValue("");
+        var _a;
+        this.setSelectedValue("", "keyboard");
         (_a = item == null ? void 0 : item.onSelect) == null ? void 0 : _a.call(item);
-        (_b = this.onDismiss) == null ? void 0 : _b.call(this);
+        this.hide();
+      }
+    });
+    this.context = new ContextProvider(this, {
+      context: comboBoxContext,
+      initialValue: {
+        inputValue: "",
+        setInputValue: (inputValue) => {
+          this.setInputValue(inputValue);
+        },
+        selectedValue: "",
+        selectedReason: "keyboard",
+        listManager: this.listManager
       }
     });
-    this.context = {
-      inputValue: "",
-      setInputValue: (inputValue) => {
-        if (this.context.inputValue === inputValue) {
-          return;
-        }
-        this.context = { ...this.context, inputValue };
-      },
-      selectedValue: "",
-      setSelectedValue: (selectedValue) => {
-        if (this.context.selectedValue === selectedValue) {
-          return;
-        }
-        this.context = { ...this.context, selectedValue };
-      },
-      listManager: this.listManager
-    };
+  }
+  /**
+   * @hidden
+   */
+  hide() {
+    var _a;
+    super.hide();
+    this.setInputValue("");
+    (_a = this.onDismiss) == null ? void 0 : _a.call(this);
+  }
+  getContext() {
+    return this.context.value;
+  }
+  setInputValue(inputValue) {
+    const context = this.context.value;
+    if (context.inputValue === inputValue) {
+      return;
+    }
+    this.context.setValue({ ...context, inputValue });
+  }
+  setSelectedValue(selectedValue, selectedReason) {
+    const context = this.context.value;
+    if (context.selectedValue === selectedValue) {
+      return;
+    }
+    this.context.setValue({ ...context, selectedValue, selectedReason });
   }
   get items() {
-    const items = this.querySelectorAll("\u220Fprosekit-combo-box-item");
+    const items = this.querySelectorAll("prosekit-combo-box-item");
     return Array.from(items).filter(isComboBoxItem);
   }
 };
-__decorateClass([
-  property({ attribute: false })
-], ComboBox.prototype, "onDismiss", 2);
-__decorateClass([
-  provide({ context: comboBoxContext }),
-  state()
-], ComboBox.prototype, "context", 2);
-ComboBox = __decorateClass([
-  customElement("prosekit-combo-box")
-], ComboBox);
+/**
+ * @hidden
+ */
+ComboBox.properties = {
+  ...Popover.properties,
+  onDismiss: { attribute: false }
+};
+defineCustomElement("prosekit-combo-box", ComboBox);
 export {
   ComboBox,
   propNames

package/dist/prosekit-lit-inline-popover.js

@@ -1,13 +1,12 @@
 import {
   Popover
-} from "./chunk-7WLKD2U6.js";
+} from "./chunk-Z3PEQ6MW.js";
 import {
-  __decorateClass
-} from "./chunk-O5JP3B34.js";
+  defineCustomElement
+} from "./chunk-S32IZIQF.js";
 
 // src/components/inline-popover/index.ts
 import "@prosekit/core";
-import { customElement, property } from "lit/decorators.js";
 
 // src/components/inline-popover/controller.ts
 import { defineUpdateHandler } from "@prosekit/core";
@@ -113,13 +112,17 @@ var defaultPopoverOptions = {
 var propNames = ["editor", "popoverOptions"];
 var InlinePopover = class extends Popover {
   constructor() {
-    super();
-    /** @hidden */
-    this.controller = new InlinePopoverController(this);
+    super(...arguments);
     this.popoverOptions = defaultPopoverOptions;
     this.dismiss = "escape";
+    /**
+     * @hidden
+     */
+    this.controller = new InlinePopoverController(this);
   }
-  /** @hidden */
+  /**
+   * @hidden
+   */
   willUpdate() {
     var _a, _b;
     if (this.editor) {
@@ -129,7 +132,9 @@ var InlinePopover = class extends Popover {
     this.reference = (_b = this.controller.reference) != null ? _b : void 0;
     this.options = this.popoverOptions;
   }
-  /** @hidden */
+  /**
+   * @hidden
+   */
   hide() {
     var _a;
     super.hide();
@@ -139,15 +144,15 @@ var InlinePopover = class extends Popover {
     }
   }
 };
-__decorateClass([
-  property({ attribute: false })
-], InlinePopover.prototype, "editor", 2);
-__decorateClass([
-  property({ attribute: false })
-], InlinePopover.prototype, "popoverOptions", 2);
-InlinePopover = __decorateClass([
-  customElement("prosekit-inline-popover")
-], InlinePopover);
+/**
+ * @hidden
+ */
+InlinePopover.properties = {
+  ...Popover.properties,
+  editor: { attribute: false },
+  popoverOptions: { attribute: false }
+};
+defineCustomElement("prosekit-inline-popover", InlinePopover);
 export {
   InlinePopover,
   propNames

package/dist/prosekit-lit-popover.js

@@ -1,8 +1,8 @@
 import {
   Popover,
   propNames
-} from "./chunk-7WLKD2U6.js";
-import "./chunk-O5JP3B34.js";
+} from "./chunk-Z3PEQ6MW.js";
+import "./chunk-S32IZIQF.js";
 export {
   Popover,
   propNames

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/lit",
   "type": "module",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -95,11 +95,11 @@
   },
   "devDependencies": {
     "@prosekit/dev": "*",
-    "minify-literals": "^1.0.7",
+    "minify-literals": "^1.0.8",
     "tsup": "^8.0.1",
-    "typescript": "^5.3.2",
-    "vitest": "^0.34.6",
-    "vue": "^3.3.9"
+    "typescript": "^5.3.3",
+    "vitest": "^1.0.2",
+    "vue": "^3.3.11"
   },
   "scripts": {
     "build:tsup": "tsup",

package/dist/chunk-55G7TJI3.js

@@ -1,48 +0,0 @@
-import {
-  comboBoxContext
-} from "./chunk-C4MW43I4.js";
-import {
-  LightElement,
-  __decorateClass
-} from "./chunk-O5JP3B34.js";
-
-// src/components/combo-box-item/component.ts
-import { consume } from "@lit/context";
-import { customElement, property, state } from "lit/decorators.js";
-var propNames = [];
-var ComboBoxItem = class extends LightElement {
-  constructor() {
-    super(...arguments);
-    this.selected = false;
-  }
-  updated() {
-    var _a, _b, _c, _d;
-    const content = ((_a = this.textContent) != null ? _a : "").trim();
-    const query = ((_c = (_b = this.comboBoxContext) == null ? void 0 : _b.inputValue) != null ? _c : "").trim();
-    const match = content.toLowerCase().includes(query.toLowerCase());
-    this.selected = match && content === ((_d = this.comboBoxContext) == null ? void 0 : _d.selectedValue);
-    this.ariaSelected = String(this.selected);
-    this.setHidden(!match);
-  }
-};
-__decorateClass([
-  property({ attribute: false })
-], ComboBoxItem.prototype, "editor", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "data-selected" })
-], ComboBoxItem.prototype, "selected", 2);
-__decorateClass([
-  consume({ context: comboBoxContext, subscribe: true }),
-  state({})
-], ComboBoxItem.prototype, "comboBoxContext", 2);
-__decorateClass([
-  property({ attribute: false })
-], ComboBoxItem.prototype, "onSelect", 2);
-ComboBoxItem = __decorateClass([
-  customElement("prosekit-combo-box-item")
-], ComboBoxItem);
-
-export {
-  propNames,
-  ComboBoxItem
-};

package/dist/chunk-M6MY5WGM.js

@@ -1,62 +0,0 @@
-import {
-  commandListContext
-} from "./chunk-6P3YKUWI.js";
-import {
-  LightElement,
-  __decorateClass
-} from "./chunk-O5JP3B34.js";
-
-// src/components/autocomplete-item/component.ts
-import { consume } from "@lit/context";
-import "lit";
-import { customElement, property, state } from "lit/decorators.js";
-var propNames = ["value", "onSelect"];
-var AutocompleteItem = class extends LightElement {
-  constructor() {
-    super(...arguments);
-    this.value = "";
-    this.selected = false;
-  }
-  get content() {
-    const text = this.value || this.textContent || "";
-    return text.trim().toLowerCase();
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.role = "option";
-  }
-  willUpdate() {
-    var _a, _b;
-    const content = this.content;
-    this.selected = content === ((_a = this.listContext) == null ? void 0 : _a.selectedValue);
-    const score = ((_b = this.listContext) == null ? void 0 : _b.scores.get(content)) || 0;
-    this.setHidden(score <= 0);
-  }
-  updated(changedProperties) {
-    var _a;
-    if (this.selected && changedProperties.has("selected") && !changedProperties.get("selected") && ((_a = this.listContext) == null ? void 0 : _a.selectedReason) === "keyboard") {
-      this.scrollIntoView({ block: "nearest" });
-    }
-  }
-};
-__decorateClass([
-  property({ type: String, reflect: true, attribute: "data-value" })
-], AutocompleteItem.prototype, "value", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "data-selected" })
-], AutocompleteItem.prototype, "selected", 2);
-__decorateClass([
-  property({ attribute: false })
-], AutocompleteItem.prototype, "onSelect", 2);
-__decorateClass([
-  consume({ context: commandListContext, subscribe: true }),
-  state({})
-], AutocompleteItem.prototype, "listContext", 2);
-AutocompleteItem = __decorateClass([
-  customElement("prosekit-autocomplete-item")
-], AutocompleteItem);
-
-export {
-  propNames,
-  AutocompleteItem
-};

package/dist/chunk-O5JP3B34.js

@@ -1,31 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp(target, key, result);
-  return result;
-};
-
-// src/components/block-element/index.ts
-import { LitElement } from "lit";
-var LightElement = class extends LitElement {
-  createRenderRoot() {
-    return this;
-  }
-  setHidden(hidden) {
-    if (this.hidden !== hidden) {
-      this.hidden = hidden;
-      const display = this.style.display;
-      this.style.display = hidden ? "none" : display === "none" ? "" : display;
-    }
-  }
-};
-
-export {
-  __decorateClass,
-  LightElement
-};