@c2n/list-item 0.0.6 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/list-item.js +10 -6
  2. package/package.json +20 -8
  3. package/react.d.ts +24 -0
  4. package/react.js +3 -0
  5. package/types/src/list-item.d.ts +18 -2
  6. package/types/src/list-item.d.ts.map +1 -1
  7. package/vue.d.ts +34 -0
  8. package/vue.js +3 -0
package/dist/list-item.js CHANGED
@@ -1,11 +1,12 @@
1
1
  import { t as selectedItemValueContext } from "./list-item-context-CXKVRXXI.js";
2
2
  import { LitElement, html, nothing, unsafeCSS } from "lit";
3
- import { customElement, property, query, state } from "lit/decorators.js";
3
+ import { property, query, state } from "lit/decorators.js";
4
+ import { customElement } from "@c2n/core/element-helper.js";
4
5
  import { ifDefined } from "lit/directives/if-defined.js";
5
6
  import { ContextConsumer } from "@c2n/core/controllers/context-consumer.js";
6
7
  import { redispatchEvent } from "@c2n/core/dom-helper.js";
7
8
  //#region src/list-item.scss?inline
8
- var list_item_default = "/* ex : var((width: 24px), width, c2-checkbox) returns var(--c2-checkbox-width, 24px) */\n:host {\n display: block;\n flex: none;\n user-select: none;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.c2-list-item {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n cursor: pointer;\n text-decoration: none;\n min-height: var(--c2-list-item--min-height,36px);\n gap: var(--c2-list-item--gap,8px);\n font-size: var(--c2-list-item--font-size,14px);\n font-weight: var(--c2-list-item--font-weight);\n font-style: var(--c2-list-item--font-style);\n font-family: var(--c2-list-item--font-family);\n line-height: var(--c2-list-item--line-height,20px);\n border-top-left-radius: var(--c2-list-item--border-top-left-radius,6px);\n border-top-right-radius: var(--c2-list-item--border-top-right-radius,6px);\n border-bottom-left-radius: var(--c2-list-item--border-bottom-left-radius,6px);\n border-bottom-right-radius: var(--c2-list-item--border-bottom-right-radius,6px);\n padding-top: var(--c2-list-item--padding-top,6px);\n padding-right: var(--c2-list-item--padding-right,10px);\n padding-bottom: var(--c2-list-item--padding-bottom,6px);\n padding-left: var(--c2-list-item--padding-left,10px);\n border-top: var(--c2-list-item--border-top);\n border-bottom: var(--c2-list-item--border-bottom);\n border-right: var(--c2-list-item--border-right);\n border-left: var(--c2-list-item--border-left);\n background: var(--c2-list-item--background,transparent);\n color: var(--c2-list-item--color,#18181b);\n will-change: background, color, border;\n transition: background 250ms cubic-bezier(0.2, 0, 0, 1), color 250ms cubic-bezier(0.2, 0, 0, 1), border 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-list-item:hover {\n border-top: var(--c2-list-item__hover--border-top,var(--c2-list-item--border-top));\n border-bottom: var(--c2-list-item__hover--border-bottom,var(--c2-list-item--border-bottom));\n border-right: var(--c2-list-item__hover--border-right,var(--c2-list-item--border-right));\n border-left: var(--c2-list-item__hover--border-left,var(--c2-list-item--border-left));\n background: var(--c2-list-item__hover--background,var(--c2-list-item--background,#f4f4f5));\n color: var(--c2-list-item__hover--color,var(--c2-list-item--color,#18181b));\n}\n\n.c2-list-item__content {\n flex: 1;\n min-width: 0;\n}\n\n.c2-list-item__description {\n margin-top: var(--c2-list-item__description--margin-top,1px);\n color: var(--c2-list-item__description--color,#71717a);\n font-size: var(--c2-list-item__description--font-size,12px);\n line-height: var(--c2-list-item__description--line-height,16px);\n font-weight: normal;\n}\n.c2-list-item__description[hidden] {\n display: none;\n}\n\n:host(:focus) {\n outline: none;\n}\n\n:host(:focus-visible) .c2-list-item {\n outline: var(--c2-list-item__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n outline-offset: var(--c2-list-item__focus--outline-offset,-2px);\n}\n\n::slotted([slot=prefix-icon]),\n::slotted([slot=suffix-icon]) {\n flex: none;\n width: var(--c2-list-item__icon--size,16px);\n height: var(--c2-list-item__icon--size,16px);\n color: var(--c2-list-item__icon--color);\n --c2-feather-icon--size: var(--c2-list-item__icon--size,16px);\n --c2-mat-icon--font-size: var(--c2-list-item__icon--size,16px);\n}\n\n:host([selected]) .c2-list-item {\n border-top: var(--c2-list-item__selected--border-top,var(--c2-list-item--border-top));\n border-bottom: var(--c2-list-item__selected--border-bottom,var(--c2-list-item--border-bottom));\n border-right: var(--c2-list-item__selected--border-right,var(--c2-list-item--border-right));\n border-left: var(--c2-list-item__selected--border-left,var(--c2-list-item--border-left));\n background: var(--c2-list-item__selected--background,var(--c2-list-item--background,#edf1fe));\n color: var(--c2-list-item__selected--color,var(--c2-list-item--color,#2f56e6));\n}\n:host([selected]) .c2-list-item:hover {\n background: var(--c2-list-item__selected__hover--background,var(--c2-list-item__selected--background,#e2e9fd));\n}\n:host([selected]) .c2-list-item__description {\n color: var(--c2-list-item__selected__description--color,var(--c2-list-item__description--color,#71717a));\n}\n\n:host([selected][joined-before]) .c2-list-item {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n:host([selected][joined-after]) .c2-list-item {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n:host([disabled]) .c2-list-item {\n pointer-events: none;\n cursor: default;\n opacity: var(--c2-list-item__disabled--opacity,0.38);\n}";
9
+ var list_item_default = "/* ex : var((width: 24px), width, c2-checkbox) returns var(--c2-checkbox-width, 24px) */\n:host {\n display: block;\n flex: none;\n user-select: none;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.c2-list-item {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n cursor: pointer;\n text-decoration: none;\n min-height: var(--c2-list-item--min-height,36px);\n gap: var(--c2-list-item--gap,8px);\n font-size: var(--c2-list-item--font-size,14px);\n font-weight: var(--c2-list-item--font-weight);\n font-style: var(--c2-list-item--font-style);\n font-family: var(--c2-list-item--font-family);\n line-height: var(--c2-list-item--line-height,20px);\n border-top-left-radius: var(--c2-list-item--border-top-left-radius,6px);\n border-top-right-radius: var(--c2-list-item--border-top-right-radius,6px);\n border-bottom-left-radius: var(--c2-list-item--border-bottom-left-radius,6px);\n border-bottom-right-radius: var(--c2-list-item--border-bottom-right-radius,6px);\n padding-top: var(--c2-list-item--padding-top,6px);\n padding-right: var(--c2-list-item--padding-right,10px);\n padding-bottom: var(--c2-list-item--padding-bottom,6px);\n padding-left: var(--c2-list-item--padding-left,10px);\n border-top: var(--c2-list-item--border-top);\n border-bottom: var(--c2-list-item--border-bottom);\n border-right: var(--c2-list-item--border-right);\n border-left: var(--c2-list-item--border-left);\n background: var(--c2-list-item--background,transparent);\n color: var(--c2-list-item--color,#18181b);\n will-change: background, color, border;\n transition: background 250ms cubic-bezier(0.2, 0, 0, 1), color 250ms cubic-bezier(0.2, 0, 0, 1), border 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-list-item:hover {\n border-top: var(--c2-list-item__hover--border-top,var(--c2-list-item--border-top));\n border-bottom: var(--c2-list-item__hover--border-bottom,var(--c2-list-item--border-bottom));\n border-right: var(--c2-list-item__hover--border-right,var(--c2-list-item--border-right));\n border-left: var(--c2-list-item__hover--border-left,var(--c2-list-item--border-left));\n background: var(--c2-list-item__hover--background,var(--c2-list-item--background,#f4f4f5));\n color: var(--c2-list-item__hover--color,var(--c2-list-item--color,#18181b));\n}\n\n.c2-list-item__content {\n flex: 1;\n min-width: 0;\n}\n\n.c2-list-item__description {\n margin-top: var(--c2-list-item__description--margin-top,1px);\n color: var(--c2-list-item__description--color,#71717a);\n font-size: var(--c2-list-item__description--font-size,12px);\n line-height: var(--c2-list-item__description--line-height,16px);\n font-weight: normal;\n}\n.c2-list-item__description[hidden] {\n display: none;\n}\n\n:host(:focus) {\n outline: none;\n}\n\n:host(:focus-visible) .c2-list-item {\n outline: var(--c2-list-item__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n outline-offset: var(--c2-list-item__focus--outline-offset,-2px);\n}\n\n::slotted([slot=prefix-icon]),\n::slotted([slot=suffix-icon]) {\n flex: none;\n color: var(--c2-list-item__icon--color);\n --c2-feather-icon--size: var(--c2-list-item__icon--size,16px);\n --c2-mat-icon--font-size: var(--c2-list-item__icon--size,16px);\n}\n\n::slotted(svg[slot=prefix-icon]),\n::slotted(svg[slot=suffix-icon]) {\n width: var(--c2-list-item__icon--size,16px);\n height: var(--c2-list-item__icon--size,16px);\n}\n\n:host([selected]) .c2-list-item {\n border-top: var(--c2-list-item__selected--border-top,var(--c2-list-item--border-top));\n border-bottom: var(--c2-list-item__selected--border-bottom,var(--c2-list-item--border-bottom));\n border-right: var(--c2-list-item__selected--border-right,var(--c2-list-item--border-right));\n border-left: var(--c2-list-item__selected--border-left,var(--c2-list-item--border-left));\n background: var(--c2-list-item__selected--background,var(--c2-list-item--background,#edf1fe));\n color: var(--c2-list-item__selected--color,var(--c2-list-item--color,#2f56e6));\n}\n:host([selected]) .c2-list-item:hover {\n background: var(--c2-list-item__selected__hover--background,var(--c2-list-item__selected--background,#e2e9fd));\n}\n:host([selected]) .c2-list-item__description {\n color: var(--c2-list-item__selected__description--color,var(--c2-list-item__description--color,#71717a));\n}\n\n:host([selected][joined-before]) .c2-list-item {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n:host([selected][joined-after]) .c2-list-item {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n:host([disabled]) .c2-list-item {\n pointer-events: none;\n cursor: default;\n opacity: var(--c2-list-item__disabled--opacity,0.38);\n}";
9
10
  //#endregion
10
11
  //#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
11
12
  function __decorate(decorators, target, key, desc) {
@@ -34,6 +35,11 @@ var ListItem = class ListItem extends LitElement {
34
35
  this.applyContext = false;
35
36
  this.hasDescription = false;
36
37
  this.authorRole = null;
38
+ this.blockDisabledClick = (event) => {
39
+ if (!this.disabled) return;
40
+ event.preventDefault();
41
+ event.stopImmediatePropagation();
42
+ };
37
43
  this.handleClick = (event) => {
38
44
  if (this.disabled) {
39
45
  event.preventDefault();
@@ -63,10 +69,12 @@ var ListItem = class ListItem extends LitElement {
63
69
  super.connectedCallback();
64
70
  if (this.authorRole === null) this.authorRole = this.getAttribute("role");
65
71
  this.addEventListener("keydown", this.handleKeydown);
72
+ this.addEventListener("click", this.blockDisabledClick, true);
66
73
  }
67
74
  disconnectedCallback() {
68
75
  super.disconnectedCallback();
69
76
  this.removeEventListener("keydown", this.handleKeydown);
77
+ this.removeEventListener("click", this.blockDisabledClick, true);
70
78
  }
71
79
  /** Behaves like a click: dispatches `click` on the row and, for a standalone row, toggles `selected`. */
72
80
  activate() {
@@ -89,10 +97,6 @@ var ListItem = class ListItem extends LitElement {
89
97
  else if (this.applyContext == false) this.contextConsumer.unApplyContext();
90
98
  }
91
99
  }
92
- firstUpdated() {
93
- const slot = this.renderRoot.querySelector("slot[name=\"description\"]");
94
- if (slot) this.updateDescription(slot);
95
- }
96
100
  updated(changedProperties) {
97
101
  if (changedProperties.has("selected") && changedProperties.get("selected") !== void 0) this.dispatchEvent(new CustomEvent("selected-change", {
98
102
  bubbles: true,
package/package.json CHANGED
@@ -1,22 +1,34 @@
1
1
  {
2
2
  "name": "@c2n/list-item",
3
- "version": "0.0.6",
3
+ "version": "0.0.8",
4
4
  "type": "module",
5
5
  "main": "dist/list-item.js",
6
6
  "exports": {
7
7
  ".": {
8
- "default": "./dist/list-item.js",
9
- "types": "./types/src/list-item.d.ts"
8
+ "types": "./types/src/list-item.d.ts",
9
+ "default": "./dist/list-item.js"
10
10
  },
11
11
  "./list-item-context.js": {
12
- "default": "./dist/list-item-context.js",
13
- "types": "./types/src/list-item-context.d.ts"
12
+ "types": "./types/src/list-item-context.d.ts",
13
+ "default": "./dist/list-item-context.js"
14
+ },
15
+ "./react": {
16
+ "types": "./react.d.ts",
17
+ "default": "./react.js"
18
+ },
19
+ "./vue": {
20
+ "types": "./vue.d.ts",
21
+ "default": "./vue.js"
14
22
  },
15
23
  "./custom-elements.json": "./custom-elements.json"
16
24
  },
17
25
  "files": [
18
26
  "dist",
19
- "types"
27
+ "types",
28
+ "react.d.ts",
29
+ "react.js",
30
+ "vue.d.ts",
31
+ "vue.js"
20
32
  ],
21
33
  "keywords": [
22
34
  "list-item",
@@ -52,7 +64,7 @@
52
64
  }
53
65
  },
54
66
  "dependencies": {
55
- "@c2n/core": "0.0.6",
67
+ "@c2n/core": "0.0.8",
56
68
  "@lit/context": "1.1.6",
57
69
  "lit": "3.3.3"
58
70
  },
@@ -60,5 +72,5 @@
60
72
  "@c2n/config": "*"
61
73
  },
62
74
  "customElements": "custom-elements.json",
63
- "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
75
+ "gitHead": "be59cbccee1d33ca248e39f69b05c0b595ec6c6d"
64
76
  }
package/react.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ // GENERATED by @c2n/framework-types. Do not edit by hand.
2
+ //
3
+ // JSX types for the custom elements of @c2n/list-item. Import once, anywhere in the program:
4
+ //
5
+ // import '@c2n/list-item/react'
6
+ //
7
+ // Register the elements at module scope before React renders, or React writes an object prop as an
8
+ // attribute and it stringifies.
9
+
10
+ import type { DetailedHTMLProps, HTMLAttributes } from 'react'
11
+ import type { ListItem } from '@c2n/list-item'
12
+
13
+ /** Standard React host-element attributes plus the element's own public properties. */
14
+ type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
15
+
16
+ declare module 'react' {
17
+ namespace JSX {
18
+ interface IntrinsicElements {
19
+ 'c2-list-item': C2Props<ListItem>
20
+ }
21
+ }
22
+ }
23
+
24
+ export {}
package/react.js ADDED
@@ -0,0 +1,3 @@
1
+ // GENERATED by @c2n/framework-types. Do not edit by hand.
2
+ // Types only — see the matching .d.ts.
3
+ export {}
package/types/src/list-item.d.ts CHANGED
@@ -1,9 +1,23 @@
1
1
  import { LitElement, type PropertyValueMap } from 'lit';
2
+ import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
3
+ /** Events fired by {@link ListItem}, keyed for `addEventListener`. */
4
+ export interface ListItemEventMap {
5
+ 'selected-change': CustomEvent<{
6
+ selected: boolean;
7
+ value: string;
8
+ }>;
9
+ click: MouseEvent;
10
+ }
11
+ export interface ListItem {
12
+ addEventListener: TypedAddEventListener<ListItem, ListItemEventMap>;
13
+ removeEventListener: TypedRemoveEventListener<ListItem, ListItemEventMap>;
14
+ }
2
15
  /**
3
16
  * A selectable row. On its own it is a toggle: click, Enter or Space flips `selected`. Inside a `c2-list` (and
4
17
  * therefore inside a `c2-select`) the list drives the selected state through context, handles the keyboard and the row
5
18
  * only reports clicks. The default slot is the primary text, `description` a second, muted line, `prefix-icon` and
6
- * `suffix-icon` take an inline SVG, a `c2-feather-*` icon or a `c2-mat-icon` and are sized by `--c2-list-item__icon--size`.
19
+ * `suffix-icon` take an inline SVG, a `c2-feather-*` icon or a `c2-mat-icon` and are sized by
20
+ * `--c2-list-item__icon--size` — anything else in them, a shortcut hint or a badge, keeps its own size.
7
21
  * With `href` the row is a link. In a multiple-selection list, adjacent selected rows lose the corner radius between
8
22
  * them (the list marks them `joined-before` / `joined-after`) so a run of selected rows reads as one block.
9
23
  *
@@ -18,6 +32,7 @@ import { LitElement, type PropertyValueMap } from 'lit';
18
32
  * @slot suffix-icon - Icon shown after the content, e.g. a check mark or shortcut hint.
19
33
  *
20
34
  * @event {CustomEvent<{ selected: boolean; value: string }>} selected-change - Fired after `selected` changes, whether from a click or from the parent list.
35
+ * @event {MouseEvent} click - Fired when an enabled row is activated; a row with `href` also navigates.
21
36
  *
22
37
  * @cssproperty {pixel} [--c2-list-item--min-height=36px]
23
38
  * @cssproperty {pixel} [--c2-list-item--gap=8px] - Space between the icons and the content.
@@ -92,6 +107,7 @@ export declare class ListItem extends LitElement {
92
107
  label?: string;
93
108
  /** Makes the row a link. Selection still works when the row sits in a list. */
94
109
  href: string | undefined;
110
+ /** Browsing context used when `href` is set, such as `_blank`. */
95
111
  target: string | undefined;
96
112
  /** Arbitrary payload returned alongside `value` in the list's `selection-change` event. Not an attribute. */
97
113
  data?: unknown;
@@ -107,6 +123,7 @@ export declare class ListItem extends LitElement {
107
123
  get displayText(): string;
108
124
  connectedCallback(): void;
109
125
  disconnectedCallback(): void;
126
+ private blockDisabledClick;
110
127
  /** Behaves like a click: dispatches `click` on the row and, for a standalone row, toggles `selected`. */
111
128
  activate(): void;
112
129
  private handleClick;
@@ -114,7 +131,6 @@ export declare class ListItem extends LitElement {
114
131
  private handleDescriptionSlotChange;
115
132
  private updateDescription;
116
133
  protected willUpdate(changedProperties: PropertyValueMap<this>): void;
117
- protected firstUpdated(): void;
118
134
  protected updated(changedProperties: PropertyValueMap<this>): void;
119
135
  private syncAria;
120
136
  private renderInner;
package/types/src/list-item.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["../../src/list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAQjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2EG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BAAoB;IAE1C,OAAO,CAAC,eAAe,CAMrB;IAEF,6GAA6G;IACjE,QAAQ,UAAQ;IAE5D,oDAAoD;IACR,QAAQ,UAAQ;IAE5D,sDAAsD;IACzB,KAAK,SAAK;IAEvC;;;;OAIG;IAC0B,KAAK,CAAC,EAAE,MAAM,CAAA;IAE3C,+EAA+E;IACnE,IAAI,EAAE,MAAM,GAAG,SAAS,CAAY;IAEpC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAElD,6GAA6G;IAC7E,IAAI,CAAC,EAAE,OAAO,CAAA;IAE9C;;OAEG;IAC6B,YAAY,UAAQ;IAE3C,OAAO,CAAC,cAAc,CAAQ;IAGvC,OAAO,CAAC,WAAW,CAAkB;IAErC,iEAAiE;IACjE,OAAO,CAAC,UAAU,CAAsB;IAExC,mHAAmH;IACnH,IAAI,WAAW,IAAI,MAAM,CAYxB;IAEQ,iBAAiB;IAMjB,oBAAoB;IAK7B,yGAAyG;IACzG,QAAQ;IAMR,OAAO,CAAC,WAAW,CAWlB;IAED,OAAO,CAAC,aAAa,CAQpB;IAED,OAAO,CAAC,2BAA2B;IAInC,OAAO,CAAC,iBAAiB;cAIN,UAAU,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;cAU3D,YAAY,IAAI,IAAI;cAKpB,OAAO,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;IAc3E,OAAO,CAAC,QAAQ;IAqBhB,OAAO,CAAC,WAAW;IAaV,MAAM;CAchB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAA;KACzB;CACF"}
1
+ {"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["../../src/list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAGjF,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAOhG,sEAAsE;AACtE,MAAM,WAAW,gBAAgB;IAC/B,iBAAiB,EAAE,WAAW,CAAC;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACpE,KAAK,EAAE,UAAU,CAAA;CAClB;AAED,MAAM,WAAW,QAAQ;IACvB,gBAAgB,EAAE,qBAAqB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAA;IACnE,mBAAmB,EAAE,wBAAwB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAA;CAC1E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6EG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BAAoB;IAE1C,OAAO,CAAC,eAAe,CAMrB;IAEF,6GAA6G;IACjE,QAAQ,UAAQ;IAE5D,oDAAoD;IACR,QAAQ,UAAQ;IAE5D,sDAAsD;IACzB,KAAK,SAAK;IAEvC;;;;OAIG;IAC0B,KAAK,CAAC,EAAE,MAAM,CAAA;IAE3C,+EAA+E;IACnE,IAAI,EAAE,MAAM,GAAG,SAAS,CAAY;IAEhD,kEAAkE;IACtD,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAElD,6GAA6G;IAC7E,IAAI,CAAC,EAAE,OAAO,CAAA;IAE9C;;OAEG;IAC6B,YAAY,UAAQ;IAE3C,OAAO,CAAC,cAAc,CAAQ;IAGvC,OAAO,CAAC,WAAW,CAAkB;IAErC,iEAAiE;IACjE,OAAO,CAAC,UAAU,CAAsB;IAExC,mHAAmH;IACnH,IAAI,WAAW,IAAI,MAAM,CAYxB;IAEQ,iBAAiB;IAOjB,oBAAoB;IAM7B,OAAO,CAAC,kBAAkB,CAIzB;IAED,yGAAyG;IACzG,QAAQ;IAMR,OAAO,CAAC,WAAW,CAWlB;IAED,OAAO,CAAC,aAAa,CAQpB;IAED,OAAO,CAAC,2BAA2B;IAInC,OAAO,CAAC,iBAAiB;cAIN,UAAU,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;cAU3D,OAAO,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;IAc3E,OAAO,CAAC,QAAQ;IAqBhB,OAAO,CAAC,WAAW;IAaV,MAAM;CAchB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAA;KACzB;CACF"}
package/vue.d.ts ADDED
@@ -0,0 +1,34 @@
1
+ // GENERATED by @c2n/framework-types. Do not edit by hand.
2
+ //
3
+ // Vue template types for the custom elements of @c2n/list-item. Import once, anywhere in the program:
4
+ //
5
+ // import '@c2n/list-item/vue'
6
+ //
7
+ // Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
8
+ // nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
9
+
10
+ import type { DefineComponent, HTMLAttributes } from 'vue'
11
+ import type { ListItem, ListItemEventMap } from '@c2n/list-item'
12
+
13
+ /** The element's own public properties, plus every attribute Vue understands on a host element. */
14
+ type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
15
+
16
+ declare module 'vue' {
17
+ interface GlobalComponents {
18
+ 'c2-list-item': DefineComponent<
19
+ C2Props<ListItem> & {
20
+ onClick?: (event: ListItemEventMap['click']) => void
21
+ onSelectedChange?: (event: ListItemEventMap['selected-change']) => void
22
+ }
23
+ >
24
+ }
25
+ }
26
+
27
+ declare module '@vue/runtime-dom' {
28
+ interface HTMLAttributes {
29
+ /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
30
+ slot?: string
31
+ }
32
+ }
33
+
34
+ export {}
package/vue.js ADDED
@@ -0,0 +1,3 @@
1
+ // GENERATED by @c2n/framework-types. Do not edit by hand.
2
+ // Types only — see the matching .d.ts.
3
+ export {}