@c2n/list 0.0.6 → 0.0.8

package/dist/list.js

@@ -1,5 +1,6 @@
 import { LitElement, html, unsafeCSS } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
+import { property, query } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
 import { selectedItemValueContext } from "@c2n/list-item/list-item-context.js";
 import { ListItem } from "@c2n/list-item";
 import { arrayPropertyConverter } from "@c2n/core/lit-helper.js";
@@ -206,6 +207,7 @@ var List = class List extends LitElement {
 		if (focus) item.focus();
 	}
 	handleListItemClick(event) {
+		if (this.disabled) return;
 		const target = event.target;
 		if (target instanceof ListItem && !target.disabled) {
 			this.setFocusedItem(target, false);
@@ -266,7 +268,7 @@ var List = class List extends LitElement {
 	}
 	dispatchSelectionChangeEvent() {
 		this.dispatchEvent(new CustomEvent("selection-change", {
-			bubbles: true,
+			bubbles: false,
 			cancelable: true,
 			detail: {
 				value: this.value,
@@ -276,15 +278,15 @@ var List = class List extends LitElement {
 	}
 	/** Flush lists (no vertical padding) let the first and last rows take the list's corner radius. */
 	syncPaddingClasses() {
-		const styleMap = this.computedStyleMap();
-		this.classList.toggle("padding-top-0", styleMap.get("padding-top")?.toString() === "0px");
-		this.classList.toggle("padding-bottom-0", styleMap.get("padding-bottom")?.toString() === "0px");
+		const style = getComputedStyle(this);
+		this.classList.toggle("padding-top-0", style.paddingTop === "0px");
+		this.classList.toggle("padding-bottom-0", style.paddingBottom === "0px");
 	}
 	willUpdate(changedProperties) {
 		if (changedProperties.has("value") && typeof this.value === "string") this.value = arrayPropertyConverter.fromAttribute(this.value);
 	}
 	updated(changedProperties) {
-		if (changedProperties.has("value")) this.syncRows();
+		if (changedProperties.has("value") || changedProperties.has("disabled")) this.syncRows();
 		this.setAttribute("role", "listbox");
 		this.setAttribute("aria-multiselectable", String(this.multiple));
 		if (this.disabled) this.setAttribute("aria-disabled", "true");

package/package.json

@@ -1,18 +1,30 @@
 {
   "name": "@c2n/list",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "main": "dist/list.js",
   "exports": {
     ".": {
-      "default": "./dist/list.js",
-      "types": "./types/src/list.d.ts"
+      "types": "./types/src/list.d.ts",
+      "default": "./dist/list.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
     },
     "./custom-elements.json": "./custom-elements.json"
   },
   "files": [
     "dist",
-    "types"
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
   ],
   "keywords": [
     "list",
@@ -49,13 +61,13 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.6",
-    "@c2n/list-item": "0.0.6",
+    "@c2n/core": "0.0.8",
+    "@c2n/list-item": "0.0.8",
     "lit": "3.3.3"
   },
   "devDependencies": {
     "@c2n/config": "*"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+  "gitHead": "be59cbccee1d33ca248e39f69b05c0b595ec6c6d"
 }

package/react.d.ts

@@ -0,0 +1,24 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/list. Import once, anywhere in the program:
+//
+//     import '@c2n/list/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { List } from '@c2n/list'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-list': C2Props<List>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/list.d.ts

@@ -1,9 +1,18 @@
 import { LitElement, type PropertyValueMap } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
 import { ListItem } from '@c2n/list-item';
 export interface SelectionChangeEventDetail {
     value: string[];
     data: unknown[];
 }
+/** Events fired by {@link List}, keyed for `addEventListener`. */
+export interface ListEventMap {
+    'selection-change': CustomEvent<SelectionChangeEventDetail>;
+}
+export interface List {
+    addEventListener: TypedAddEventListener<List, ListEventMap>;
+    removeEventListener: TypedRemoveEventListener<List, ListEventMap>;
+}
 /**
  * A vertical list of `c2-list-item` rows with single or multiple selection. The list owns the selection: it reads the
  * `value` of the clicked row, updates its own `value` (a `;`-separated list in the attribute, an array in the property)
@@ -20,7 +29,7 @@ export interface SelectionChangeEventDetail {
  *
  * @slot default - The rows: `c2-list-item` elements (or wrappers whose first child is a `c2-list-item`), plus `<hr>` dividers and heading elements.
  *
- * @event {CustomEvent<SelectionChangeEventDetail>} selection-change - Fired after the user changes the selection. `detail.value` is the array of selected values, `detail.data` the matching `data` of each row.
+ * @event {CustomEvent<SelectionChangeEventDetail>} selection-change - Fired after the user changes the selection. `detail.value` is the array of selected values, `detail.data` the matching `data` of each row. Does not bubble: several components fire `selection-change`, so a listener belongs on the element itself rather than on an ancestor.
  *
  * @cssproperty {color} [--c2-list--background=#ffffff]
  * @cssproperty {pixel} --c2-list--gap

package/types/src/list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../src/list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAIxE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAIzC,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,IAAI,EAAE,OAAO,EAAE,CAAA;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,0BAAoB;IAE1C,mGAAmG;IAMnG,KAAK,EAAE,MAAM,EAAE,CAAK;IAEpB,4EAA4E;IAC5E,IAAI,EAAE,OAAO,EAAE,CAAK;IAEpB,2DAA2D;IACf,QAAQ,EAAE,OAAO,CAAQ;IAErE,+EAA+E;IAClD,QAAQ,EAAE,OAAO,CAAQ;IAEtD,mFAAmF;IACtD,QAAQ,EAAE,OAAO,CAAQ;IAGtD,OAAO,CAAC,YAAY,CAAkB;IAEtC,wDAAwD;IACxD,OAAO,CAAC,WAAW,CAAkC;IAErD,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,cAAc,CAA2C;IAEjE,mEAAmE;IACnE,IAAI,KAAK,IAAI,QAAQ,EAAE,CAItB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,CAAC,gBAAgB;IASxB;;;OAGG;IACH,OAAO,CAAC,QAAQ;IAmBhB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,mBAAmB;IAQ3B,oGAAoG;IACpG,OAAO,CAAC,MAAM;IAad,OAAO,CAAC,aAAa;IA8CrB,OAAO,CAAC,4BAA4B;IAapC,mGAAmG;IACnG,OAAO,CAAC,kBAAkB;cAMP,UAAU,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;cAO3D,OAAO,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;IAW3E;;OAEG;IACH,cAAc;IAIL,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAA;KAChB;CACF"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../src/list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAGxE,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAGhG,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAIzC,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,IAAI,EAAE,OAAO,EAAE,CAAA;CAChB;AAED,kEAAkE;AAClE,MAAM,WAAW,YAAY;IAC3B,kBAAkB,EAAE,WAAW,CAAC,0BAA0B,CAAC,CAAA;CAC5D;AAED,MAAM,WAAW,IAAI;IACnB,gBAAgB,EAAE,qBAAqB,CAAC,IAAI,EAAE,YAAY,CAAC,CAAA;IAC3D,mBAAmB,EAAE,wBAAwB,CAAC,IAAI,EAAE,YAAY,CAAC,CAAA;CAClE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,0BAAoB;IAE1C,mGAAmG;IAMnG,KAAK,EAAE,MAAM,EAAE,CAAK;IAEpB,4EAA4E;IAC5E,IAAI,EAAE,OAAO,EAAE,CAAK;IAEpB,2DAA2D;IACf,QAAQ,EAAE,OAAO,CAAQ;IAErE,+EAA+E;IAClD,QAAQ,EAAE,OAAO,CAAQ;IAEtD,mFAAmF;IACtD,QAAQ,EAAE,OAAO,CAAQ;IAGtD,OAAO,CAAC,YAAY,CAAkB;IAEtC,wDAAwD;IACxD,OAAO,CAAC,WAAW,CAAkC;IAErD,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,cAAc,CAA2C;IAEjE,mEAAmE;IACnE,IAAI,KAAK,IAAI,QAAQ,EAAE,CAItB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,CAAC,gBAAgB;IASxB;;;OAGG;IACH,OAAO,CAAC,QAAQ;IAmBhB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,mBAAmB;IAS3B,oGAAoG;IACpG,OAAO,CAAC,MAAM;IAad,OAAO,CAAC,aAAa;IA8CrB,OAAO,CAAC,4BAA4B;IAapC,mGAAmG;IACnG,OAAO,CAAC,kBAAkB;cAMP,UAAU,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;cAO3D,OAAO,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;IAW3E;;OAEG;IACH,cAAc;IAIL,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAA;KAChB;CACF"}

package/vue.d.ts

@@ -0,0 +1,33 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/list. Import once, anywhere in the program:
+//
+//     import '@c2n/list/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { List, ListEventMap } from '@c2n/list'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-list': DefineComponent<
+      C2Props<List> & {
+        onSelectionChange?: (event: ListEventMap['selection-change']) => void
+      }
+    >
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}