@raylang/vue 0.11.0 → 0.13.0

package/components/date-picker.js

@@ -4,12 +4,12 @@ import "@raylang/elements/date-picker";
 import { createComponent } from "../create.js";
 
 export const RayDatePicker = /*#__PURE__*/ createComponent("RayDatePicker", "ray-date-picker", {
-  properties: ["value", "min", "max", "placeholder", "format", "locale", "firstDay", "clearable", "open", "name", "label", "description", "descriptionPosition", "error", "required", "disabled", "size", "radius", "variant"],
+  properties: ["value", "min", "max", "placeholder", "format", "locale", "firstDay", "clearable", "open", "native", "name", "label", "description", "descriptionPosition", "error", "required", "disabled", "size", "radius", "variant"],
   booleans: ["clearable", "open", "required", "disabled"],
   model: { prop: "value", events: ["change"] },
 });
 export const RayCalendar = /*#__PURE__*/ createComponent("RayCalendar", "ray-calendar", {
-  properties: ["value", "min", "max", "locale", "firstDay", "size"],
+  properties: ["value", "min", "max", "locale", "firstDay", "size", "dayState"],
   booleans: [],
   model: { prop: "value", events: ["change"] },
 });

package/components/menu.js

@@ -4,7 +4,7 @@ import "@raylang/elements/menu";
 import { createComponent } from "../create.js";
 
 export const RayMenu = /*#__PURE__*/ createComponent("RayMenu", "ray-menu", {
-  properties: ["open", "placement", "context", "keepOpen", "native", "offset"],
+  properties: ["open", "placement", "context", "keepOpen", "native", "anchor", "offset"],
   booleans: ["open", "context", "keepOpen", "native"],
   model: { prop: "open", events: ["ray-open", "ray-close"] },
 });

package/components/popover.js

@@ -4,7 +4,7 @@ import "@raylang/elements/popover";
 import { createComponent } from "../create.js";
 
 export const RayPopover = /*#__PURE__*/ createComponent("RayPopover", "ray-popover", {
-  properties: ["open", "placement", "offset", "width", "matchWidth", "padding", "trapFocus"],
+  properties: ["open", "placement", "offset", "anchor", "width", "matchWidth", "padding", "trapFocus"],
   booleans: ["open", "matchWidth", "trapFocus"],
   model: { prop: "open", events: ["ray-open", "ray-close"] },
 });

package/index.d.ts

@@ -396,6 +396,8 @@ export interface RayDatePickerProps {
   clearable?: boolean;
   /** The calendar dropdown is shown. */
   open?: boolean;
+  /** Which picker the trigger opens: the system's (the native date input's, the usual one on a phone) or the calendar dropdown. auto: the system's on a touch screen (pointer: coarse), else the calendar. A date picked in the system's picker is the value like one picked in the calendar. */
+  native?: "auto" | "always" | "never";
   /** Form field name. */
   name?: string;
   /** Visible label (also the accessible name). */
@@ -444,6 +446,8 @@ export interface RayCalendarProps {
   firstDay?: number;
   /** Day cell size and font size. */
   size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Marks days: called with each day's ISO date on every render, it returns a state name (letters, digits, - and _) or nothing. The day button gets data-state and the part day-<state>, so ::part(day-taken) (or ::part(day-missed)::after for a dot) styles it from outside. Call refresh() when what it marks changed but the month did not. */
+  dayState?: ((date: string) => string | null | undefined) | null;
   /** v-model: the element's `value`. */
   modelValue?: string;
   "onUpdate:modelValue"?: (value: string) => void;
@@ -505,8 +509,8 @@ export declare const RayFileUpload: DefineComponent<RayFileUploadProps>;
 export interface RayInputProps {
   /** Current value. The value attribute is the initial value (restored on form reset). */
   value?: string;
-  /** Input type. */
-  type?: "text" | "email" | "password" | "search" | "number" | "url" | "tel";
+  /** Input type. time, date and datetime-local show the browser's picker (the native one on phones); value is what the input gives: "HH:MM", "YYYY-MM-DD", "YYYY-MM-DDTHH:MM". */
+  type?: "text" | "email" | "password" | "search" | "number" | "url" | "tel" | "time" | "date" | "datetime-local";
   /** Form field name. */
   name?: string;
   /** Visible label (also the accessible name). */
@@ -564,6 +568,8 @@ export interface RayInputProps {
   list?: string;
   /** A suggestion was accepted (the text already has it). */
   onRayComplete?: (event: CustomEvent<{ item: Ray.CompletionItem; from: number; to: number }>) => void;
+  /** The highlight range under the pointer changed: the range and the box of the line of it the pointer is on, or null on leaving a range. Anchor a ray-popover to rect (its anchor property) to show more than the title. */
+  onRayHighlightHover?: (event: CustomEvent<{ range: Ray.HighlightRange | null; rect: DOMRect | null }>) => void;
   /** On every edit (value already updated). */
   onInput?: (event: Event) => void;
   /** When an edit is committed (blur, Enter). */
@@ -587,8 +593,8 @@ export interface RayModeInputProps {
   nativeMenu?: boolean;
   /** Current value. The value attribute is the initial value (restored on form reset). */
   value?: string;
-  /** Input type. */
-  type?: "text" | "email" | "password" | "search" | "number" | "url" | "tel";
+  /** Input type. time, date and datetime-local show the browser's picker (the native one on phones); value is what the input gives: "HH:MM", "YYYY-MM-DD", "YYYY-MM-DDTHH:MM". */
+  type?: "text" | "email" | "password" | "search" | "number" | "url" | "tel" | "time" | "date" | "datetime-local";
   /** Form field name. */
   name?: string;
   /** Visible label (also the accessible name). */
@@ -645,6 +651,8 @@ export interface RayModeInputProps {
   onRayModeChange?: (event: CustomEvent<{ mode: string; previous: string | null; option: Ray.ModeOption }>) => void;
   /** A suggestion was accepted (the text already has it). */
   onRayComplete?: (event: CustomEvent<{ item: Ray.CompletionItem; from: number; to: number }>) => void;
+  /** The highlight range under the pointer changed: the range and the box of the line of it the pointer is on, or null on leaving a range. Anchor a ray-popover to rect (its anchor property) to show more than the title. */
+  onRayHighlightHover?: (event: CustomEvent<{ range: Ray.HighlightRange | null; rect: DOMRect | null }>) => void;
   /** On every edit (value already updated). */
   onInput?: (event: Event) => void;
   /** When an edit is committed (blur, Enter). */
@@ -722,8 +730,8 @@ export interface RayPasswordInputProps {
   hideLabel?: string;
   /** Current value. The value attribute is the initial value (restored on form reset). */
   value?: string;
-  /** Input type. */
-  type?: "text" | "email" | "password" | "search" | "number" | "url" | "tel";
+  /** Input type. time, date and datetime-local show the browser's picker (the native one on phones); value is what the input gives: "HH:MM", "YYYY-MM-DD", "YYYY-MM-DDTHH:MM". */
+  type?: "text" | "email" | "password" | "search" | "number" | "url" | "tel" | "time" | "date" | "datetime-local";
   /** Form field name. */
   name?: string;
   /** Visible label (also the accessible name). */
@@ -780,6 +788,8 @@ export interface RayPasswordInputProps {
   onRayVisibilityChange?: (event: CustomEvent<{ visible: boolean }>) => void;
   /** A suggestion was accepted (the text already has it). */
   onRayComplete?: (event: CustomEvent<{ item: Ray.CompletionItem; from: number; to: number }>) => void;
+  /** The highlight range under the pointer changed: the range and the box of the line of it the pointer is on, or null on leaving a range. Anchor a ray-popover to rect (its anchor property) to show more than the title. */
+  onRayHighlightHover?: (event: CustomEvent<{ range: Ray.HighlightRange | null; rect: DOMRect | null }>) => void;
   /** On every edit (value already updated). */
   onInput?: (event: Event) => void;
   /** When an edit is committed (blur, Enter). */
@@ -799,8 +809,8 @@ export interface RayPathInputProps {
   dialogTitle?: string;
   /** Current value. The value attribute is the initial value (restored on form reset). */
   value?: string;
-  /** Input type. */
-  type?: "text" | "email" | "password" | "search" | "number" | "url" | "tel";
+  /** Input type. time, date and datetime-local show the browser's picker (the native one on phones); value is what the input gives: "HH:MM", "YYYY-MM-DD", "YYYY-MM-DDTHH:MM". */
+  type?: "text" | "email" | "password" | "search" | "number" | "url" | "tel" | "time" | "date" | "datetime-local";
   /** Form field name. */
   name?: string;
   /** Visible label (also the accessible name). */
@@ -859,6 +869,8 @@ export interface RayPathInputProps {
   onRayError?: (event: CustomEvent<{ error: Error }>) => void;
   /** A suggestion was accepted (the text already has it). */
   onRayComplete?: (event: CustomEvent<{ item: Ray.CompletionItem; from: number; to: number }>) => void;
+  /** The highlight range under the pointer changed: the range and the box of the line of it the pointer is on, or null on leaving a range. Anchor a ray-popover to rect (its anchor property) to show more than the title. */
+  onRayHighlightHover?: (event: CustomEvent<{ range: Ray.HighlightRange | null; rect: DOMRect | null }>) => void;
   /** On every edit (value already updated). */
   onInput?: (event: Event) => void;
 }
@@ -1199,6 +1211,8 @@ export interface RayTextareaProps {
   wrap?: string;
   /** A suggestion was accepted (the text already has it). */
   onRayComplete?: (event: CustomEvent<{ item: Ray.CompletionItem; from: number; to: number }>) => void;
+  /** The highlight range under the pointer changed: the range and the box of the line of it the pointer is on, or null on leaving a range. Anchor a ray-popover to rect (its anchor property) to show more than the title. */
+  onRayHighlightHover?: (event: CustomEvent<{ range: Ray.HighlightRange | null; rect: DOMRect | null }>) => void;
   /** On every edit. */
   onInput?: (event: Event) => void;
   /** When an edit is committed. */
@@ -1592,8 +1606,8 @@ export interface RayDrawerProps {
   description?: string;
   /** The edge it slides from: start/end follow the writing direction; left/right are sides of the screen. */
   position?: "end" | "start" | "right" | "left" | "top" | "bottom";
-  /** Width (left/right) or height (top/bottom): xs…xl, full, or any CSS length. */
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | "full" | (string & {});
+  /** Width (left/right) or height (top/bottom): xs…xl, full, content (as big as what it holds, up to the viewport: a bottom sheet) or any CSS length. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "full" | "content" | (string & {});
   /** No backdrop nor scroll lock: the page stays interactive (a side panel). */
   modeless?: boolean;
   /** Detached from the edge, with rounded corners. */
@@ -1628,6 +1642,8 @@ export interface RayMenuProps {
   keepOpen?: boolean;
   /** With a native host (ray-elements/core/raylang.js in a std/ui window), opens as the system's context menu at the pointer: items and dividers, same ray-select. */
   native?: boolean;
+  /** What the panel is placed against instead of the trigger: an element, a DOMRect or a function returning one (a text range, the pointer; read again on every reposition). The trigger still opens it. */
+  anchor?: Element | DOMRect | (() => DOMRect) | null;
   /** Gap to the anchor in px. */
   offset?: number;
   /** v-model: the element's `open`. */
@@ -1679,6 +1695,8 @@ export interface RayPopoverProps {
   placement?: "bottom" | "bottom-start" | "bottom-end" | "top" | "top-start" | "top-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
   /** Gap to the trigger in px. */
   offset?: number;
+  /** What the panel is placed against instead of the trigger: an element, a DOMRect or a function returning one (a text range, the pointer; read again on every reposition). The trigger still opens it. */
+  anchor?: Element | DOMRect | (() => DOMRect) | null;
   /** Panel width (px number or CSS length). Default: its content. */
   width?: string;
   /** At least as wide as the trigger. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raylang/vue",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "Vue 3 wrappers (with v-model) of the ray-elements web components",
   "license": "Apache-2.0",
   "keywords": ["web-components", "design-system", "ui", "raylang", "vue"],
@@ -28,7 +28,7 @@
   },
   "sideEffects": false,
   "peerDependencies": {
-    "@raylang/elements": "^0.11.0",
+    "@raylang/elements": "^0.13.0",
     "vue": ">=3.3"
   }
 }