@c2n/cascader 0.0.13 → 0.0.15

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 (3) hide show
  1. package/dist/cascader.js +2 -2
  2. package/package.json +4 -4
  3. package/react.d.ts +5 -2
package/dist/cascader.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { LitElement, html, nothing, svg, unsafeCSS } from "lit";
2
- import { property, query, state } from "lit/decorators.js";
2
+ import { query, state } from "lit/decorators.js";
3
3
  import { classMap } from "lit/directives/class-map.js";
4
4
  import { customElement } from "@c2n/core/element-helper.js";
5
- import { arrayPropertyConverter, jsonPropertyConverter } from "@c2n/core/lit-helper.js";
5
+ import { arrayPropertyConverter, jsonPropertyConverter, property } from "@c2n/core/lit-helper.js";
6
6
  import "@c2n/overlay";
7
7
  //#region src/cascader.scss?inline
8
8
  var cascader_default = "/* ex : var((width: 24px), width, c2-checkbox) returns var(--c2-checkbox-width, 24px) */\n:host {\n display: inline-flex;\n vertical-align: middle;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.trigger {\n box-sizing: border-box;\n display: inline-flex;\n width: var(--c2-cascader__trigger--width,220px);\n min-height: var(--c2-cascader__trigger--min-height,36px);\n margin: 0;\n padding: var(--c2-cascader__trigger--padding,6px 10px 6px 12px);\n align-items: center;\n gap: var(--c2-cascader__trigger--gap,8px);\n border: var(--c2-cascader__trigger--border,1px solid #bcbcc6);\n border-radius: var(--c2-cascader__trigger--border-radius,6px);\n background: var(--c2-cascader__trigger--background,#ffffff);\n color: var(--c2-cascader__trigger--color,#18181b);\n font-family: inherit;\n font-size: var(--c2-cascader__trigger--font-size,14px);\n line-height: 1.4;\n text-align: start;\n cursor: pointer;\n transition: background 250ms cubic-bezier(0.2, 0, 0, 1), border 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.trigger:hover:not(:disabled) {\n border: var(--c2-cascader__trigger__hover--border,1px solid #a1a1aa);\n background: var(--c2-cascader__trigger__hover--background,#fafafa);\n}\n.trigger:focus-visible {\n outline: var(--c2-cascader__trigger__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n outline-offset: var(--c2-cascader__trigger__focus--outline-offset,0px);\n}\n.trigger:disabled {\n cursor: default;\n opacity: var(--c2-cascader__trigger__disabled--opacity,0.38);\n}\n\n:host([open]) .trigger {\n border: var(--c2-cascader__trigger__open--border,1px solid rgb(2, 101, 220));\n}\n:host([open]) .trigger .trigger-icon {\n transform: rotate(180deg);\n}\n\n:host([readonly]) .trigger {\n cursor: default;\n}\n\n.value {\n min-width: 0;\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.placeholder {\n color: var(--c2-cascader__placeholder--color,#71717a);\n}\n\n::slotted([slot=prefix-icon]),\n::slotted([slot=suffix-icon]),\n.trigger-icon,\n.option-chevron,\n.option-check {\n width: var(--c2-cascader__icon--size,16px);\n height: var(--c2-cascader__icon--size,16px);\n flex: none;\n color: var(--c2-cascader__icon--color,#71717a);\n --c2-feather-icon--size: var(--c2-cascader__icon--size,16px);\n --c2-mat-icon--font-size: var(--c2-cascader__icon--size,16px);\n}\n\n.trigger-icon {\n display: block;\n transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n\n.panel {\n box-sizing: border-box;\n display: flex;\n max-width: min(var(--c2-cascader__panel--max-width,720px), var(--c2-overlay--available-width, 100vw));\n overflow-x: auto;\n border: var(--c2-cascader__panel--border,1px solid #e4e4e7);\n border-radius: var(--c2-cascader__panel--border-radius,8px);\n background: var(--c2-cascader__panel--background,#ffffff);\n box-shadow: var(--c2-cascader__panel--box-shadow,0 12px 32px rgba(24, 24, 27, 0.14));\n}\n\n.column {\n box-sizing: border-box;\n min-width: var(--c2-cascader__column--min-width,150px);\n max-width: var(--c2-cascader__column--max-width,240px);\n max-height: min(var(--c2-cascader__column--max-height,280px), var(--c2-overlay--available-height, 100vh));\n padding: var(--c2-cascader__column--padding,4px);\n overflow-y: auto;\n border-right: var(--c2-cascader__column--border,1px solid #e4e4e7);\n}\n.column:last-child {\n border-right: 0;\n}\n\n.option {\n box-sizing: border-box;\n display: flex;\n width: 100%;\n min-height: var(--c2-cascader__option--min-height,36px);\n margin: 0;\n padding: var(--c2-cascader__option--padding,8px 10px);\n align-items: center;\n gap: var(--c2-cascader__option--gap,8px);\n border: 0;\n border-radius: var(--c2-cascader__option--border-radius,6px);\n background: transparent;\n color: var(--c2-cascader__option--color,#18181b);\n font-family: inherit;\n font-size: var(--c2-cascader__option--font-size,14px);\n line-height: 1.35;\n text-align: start;\n cursor: pointer;\n}\n.option:hover:not(:disabled), .option:focus-visible {\n background: var(--c2-cascader__option__hover--background,#f4f4f5);\n}\n.option:focus-visible {\n outline: var(--c2-cascader__trigger__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n outline-offset: -2px;\n}\n.option:disabled {\n cursor: default;\n opacity: var(--c2-cascader__option__disabled--opacity,0.38);\n}\n\n.option--active {\n background: var(--c2-cascader__option__active--background,#e8f2ff);\n color: var(--c2-cascader__option__active--color,#18181b);\n font-weight: 600;\n}\n\n.option--selected {\n color: var(--c2-cascader__option__selected--color,rgb(2, 101, 220));\n}\n\n.option-content {\n min-width: 0;\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.option-check {\n color: var(--c2-cascader__option__selected--color,rgb(2, 101, 220));\n}\n\n.empty {\n padding: var(--c2-cascader__empty--padding,18px);\n color: var(--c2-cascader__empty--color,#71717a);\n font-size: var(--c2-cascader__option--font-size,14px);\n white-space: nowrap;\n}";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@c2n/cascader",
3
- "version": "0.0.13",
3
+ "version": "0.0.15",
4
4
  "type": "module",
5
5
  "main": "dist/cascader.js",
6
6
  "exports": {
@@ -64,13 +64,13 @@
64
64
  }
65
65
  },
66
66
  "dependencies": {
67
- "@c2n/core": "0.0.13",
68
- "@c2n/overlay": "0.0.13",
67
+ "@c2n/core": "0.0.15",
68
+ "@c2n/overlay": "0.0.15",
69
69
  "lit": "3.3.3"
70
70
  },
71
71
  "devDependencies": {
72
72
  "@c2n/config": "*"
73
73
  },
74
74
  "customElements": "custom-elements.json",
75
- "gitHead": "aa19b641f64fbc54c36b7649a8171d7a686abbdd"
75
+ "gitHead": "129a6e537c68c04ed2a36508789bf42c9781e196"
76
76
  }
package/react.d.ts CHANGED
@@ -9,7 +9,8 @@
9
9
  //
10
10
  // On a server-rendered page (Next.js, React Router SSR) write a camelCase property by its kebab-case attribute
11
11
  // name ('row-key', not rowKey): the server emits props verbatim, HTML lowercases them, and hydration does not
12
- // set properties. Those names are listed next to the properties below.
12
+ // set properties. Those names are listed next to the properties below. Structured converter-backed values
13
+ // also accept their serialized string form, so server JSX can emit the same JSON/CSV attribute used by HTML.
13
14
 
14
15
  import type { DetailedHTMLProps, HTMLAttributes } from 'react'
15
16
  import type { Cascader } from '@c2n/cascader'
@@ -22,10 +23,12 @@ type Attribute = string | number | boolean
22
23
  declare module 'react' {
23
24
  namespace JSX {
24
25
  interface IntrinsicElements {
25
- 'c2-cascader': C2Props<Cascader> & {
26
+ 'c2-cascader': Omit<C2Props<Cascader>, 'options' | 'value'> & {
26
27
  'aria-label'?: Attribute
27
28
  'change-on-select'?: Attribute
28
29
  'expand-trigger'?: Attribute
30
+ options?: Cascader['options'] | string
31
+ value?: Cascader['value'] | string
29
32
  }
30
33
  }
31
34
  }