@raylang/vue 0.5.2 → 0.7.0

package/components/icon.js

@@ -4,6 +4,6 @@ import "@raylang/elements/icon";
 import { createComponent } from "../create.js";
 
 export const RayIcon = /*#__PURE__*/ createComponent("RayIcon", "ray-icon", {
-  properties: ["name", "size", "label", "color", "stroke"],
-  booleans: [],
+  properties: ["name", "filled", "size", "label", "color", "stroke"],
+  booleans: ["filled"],
 });

package/components/number-input.js

@@ -4,7 +4,7 @@ import "@raylang/elements/number-input";
 import { createComponent } from "../create.js";
 
 export const RayNumberInput = /*#__PURE__*/ createComponent("RayNumberInput", "ray-number-input", {
-  properties: ["value", "min", "max", "step", "decimals", "prefix", "suffix", "thousandsSeparator", "decimalSeparator", "clamp", "hideControls", "placeholder", "readonly", "name", "label", "description", "error", "required", "disabled", "size", "radius", "variant", "descriptionPosition"],
+  properties: ["value", "min", "max", "step", "decimals", "prefix", "suffix", "thousandsSeparator", "decimalSeparator", "clamp", "format", "hideControls", "placeholder", "readonly", "name", "label", "description", "error", "required", "disabled", "size", "radius", "variant", "descriptionPosition"],
   booleans: ["hideControls", "readonly", "required", "disabled"],
   model: { prop: "value", events: ["input"] },
 });

package/components/radio.js

@@ -12,3 +12,7 @@ export const RayRadio = /*#__PURE__*/ createComponent("RayRadio", "ray-radio", {
   properties: ["value", "checked", "label", "description", "disabled", "color", "size", "variant"],
   booleans: ["checked", "disabled"],
 });
+export const RayRadioCard = /*#__PURE__*/ createComponent("RayRadioCard", "ray-radio-card", {
+  properties: ["hideIndicator", "value", "checked", "label", "description", "disabled", "color", "size", "variant"],
+  booleans: ["hideIndicator", "checked", "disabled"],
+});

package/components/ring-progress.js

@@ -0,0 +1,9 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/ring-progress";
+import { createComponent } from "../create.js";
+
+export const RayRingProgress = /*#__PURE__*/ createComponent("RayRingProgress", "ray-ring-progress", {
+  properties: ["value", "max", "color", "size", "thickness", "roundCaps", "showValue", "label"],
+  booleans: ["roundCaps", "showValue"],
+});

package/components/step-dots.js

@@ -0,0 +1,9 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/step-dots";
+import { createComponent } from "../create.js";
+
+export const RayStepDots = /*#__PURE__*/ createComponent("RayStepDots", "ray-step-dots", {
+  properties: ["count", "value", "color", "size", "align", "label", "valueText", "doneText"],
+  booleans: [],
+});

package/index.d.ts

@@ -19,8 +19,8 @@ export interface RayButtonProps {
   gradient?: string;
   /** A palette color (blue, red…) or any CSS color. Default: the primary color. */
   color?: string;
-  /** Height, padding and font size. */
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Height, padding and font size: xs…xl or any CSS length (the padding and the font follow). */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | (string & {});
   /** Corner radius. Default: --ray-radius-default. */
   radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
   /** submit/reset act on the enclosing form. */
@@ -63,8 +63,8 @@ export interface RayIconButtonProps {
   gradient?: string;
   /** A palette color or any CSS color. */
   color?: string;
-  /** Width and height. */
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Width and height: xs…xl or any CSS length ("5.5rem": a big main action, round with radius=full); the icon scales with it. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | (string & {});
   /** Not interactive. */
   disabled?: boolean;
   /** Shows a spinner instead of the icon. */
@@ -100,8 +100,8 @@ export interface RayToggleProps {
   gradient?: string;
   /** A palette color (blue, red…) or any CSS color. Default: the primary color. */
   color?: string;
-  /** Height, padding and font size. */
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Height, padding and font size: xs…xl or any CSS length (the padding and the font follow). */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | (string & {});
   /** Corner radius. Default: --ray-radius-default. */
   radius?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
   /** submit/reset act on the enclosing form. */
@@ -585,6 +585,8 @@ export interface RayNumberInputProps {
   decimalSeparator?: string;
   /** When out-of-range input is clamped: on blur, while typing, or never (then it is invalid). */
   clamp?: "blur" | "strict" | "none";
+  /** duration: the value is seconds, shown and typed as m:ss (h:mm:ss when min or max reaches an hour; a plain number is seconds); aria-valuetext says "3 minutes, 15 seconds" in the page's language. decimals, prefix, suffix and the separators do not apply. */
+  format?: "number" | "duration";
   /** No + and − buttons (the keys still step). */
   hideControls?: boolean;
   /** Shown while empty. */
@@ -815,6 +817,29 @@ export interface RayRadioProps {
 /** <ray-radio> as a Vue component. */
 export declare const RayRadio: DefineComponent<RayRadioProps>;
 
+export interface RayRadioCardProps {
+  /** No radio circle: the card's border and background alone show the choice. */
+  hideIndicator?: boolean;
+  /** Value given to the group when chosen. */
+  value?: string;
+  /** Whether this radio is the group's value; setting it sets the group's value. The checked attribute marks the group's initial value (when the group has no value attribute). */
+  checked?: boolean;
+  /** Label text (or the content). */
+  label?: string;
+  /** Help text under the label. */
+  description?: string;
+  /** Cannot be chosen. */
+  disabled?: boolean;
+  /** Overrides the group color. */
+  color?: string;
+  /** Overrides the group size. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Overrides the group variant. */
+  variant?: "filled" | "outline";
+}
+/** <ray-radio-card> as a Vue component. */
+export declare const RayRadioCard: DefineComponent<RayRadioCardProps>;
+
 export interface RaySearchProps {
   /** Current text. */
   value?: string;
@@ -1104,8 +1129,8 @@ export interface RayBottomNavItemProps {
   value?: string;
   /** The label. */
   label?: string;
-  /** An icon of the registry (or put one in the icon slot). */
-  icon?: string;
+  /** An icon of the registry, drawn filled on the current item when it has a filled version (or put one in the icon slot: yours, as it is). */
+  icon?: Ray.IconName;
   /** Makes it a link. */
   href?: string;
   /** A count or a short text on the icon. */
@@ -1634,7 +1659,7 @@ export interface RayBlockquoteProps {
   /** light: tinted background; outline: border and edge only; filled: solid color (a pull quote). */
   variant?: "light" | "outline" | "filled";
   /** Registry icon of the mark, or none. The icon slot replaces it. */
-  icon?: string;
+  icon?: Ray.IconName;
   /** Text size (lg for a pull quote). */
   size?: "sm" | "md" | "lg";
   /** Inner spacing: xs…xl (the spacing scale), px as a number, or a CSS length. Default: md. */
@@ -1711,7 +1736,9 @@ export declare const RayCode: DefineComponent<RayCodeProps>;
 
 export interface RayIconProps {
   /** Registered icon name (iconNames()); "none" draws nothing, a blank that keeps the alignment (a menu item without its check). */
-  name?: string;
+  name?: Ray.IconName;
+  /** The filled version, for a state (active, selected, favorite, unread); the outline icon when there is none. Built in: user, info, circle-check, alert-triangle, circle-x, folder, bell, star, settings, home, message-circle. */
+  filled?: boolean;
   /** xs…xl or any CSS length. Default: 1em. */
   size?: string;
   /** Accessible name; without it the icon is decorative (hidden from screen readers). */
@@ -1845,7 +1872,7 @@ export interface RayTimelineItemProps {
   /** When ("2 h ago", a date). */
   time?: string;
   /** An icon of the registry in the bullet. */
-  icon?: string;
+  icon?: Ray.IconName;
   /** Its own color (a failed step in red). */
   color?: string;
   /** The line to the next item (dashed: not happened yet). */
@@ -1864,7 +1891,7 @@ export interface RayAlertProps {
   /** Corner radius. */
   radius?: "xs" | "sm" | "md" | "lg" | "xl";
   /** A registered icon name, or none. */
-  icon?: string;
+  icon?: Ray.IconName;
   /** A close button; closing hides the alert (cancel ray-close to keep it). */
   closable?: boolean;
   /** Accessible name of the close button. */
@@ -1892,7 +1919,7 @@ export interface RayNotificationProps {
   /** Status color: tints the status icon (and a slotted icon's circle). */
   color?: string;
   /** Status icon from the registry (default: from the color); "none" for no icon. */
-  icon?: string;
+  icon?: Ray.IconName;
   /** Shows a spinner (notify() does not auto-close it). */
   loading?: boolean;
   /** No close button. */
@@ -1947,6 +1974,27 @@ export interface RayProgressProps {
 /** <ray-progress> as a Vue component. */
 export declare const RayProgress: DefineComponent<RayProgressProps>;
 
+export interface RayRingProgressProps {
+  /** Progress, from 0 to max. Unset: indeterminate (a spinning arc). */
+  value?: number;
+  /** The value of a full ring. */
+  max?: number;
+  /** A palette color or any CSS color. Default: the primary color. */
+  color?: string;
+  /** Diameter: xs…xl (3, 5, 7.5, 10, 12.5rem) or any CSS length. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | (string & {});
+  /** Width of the ring: a CSS length (a bare number is px). Default: a tenth of the diameter. */
+  thickness?: string;
+  /** Rounded ends of the arc. */
+  roundCaps?: boolean;
+  /** Shows the percentage in the middle (when the default slot is empty). */
+  showValue?: boolean;
+  /** Accessible name (default: Progress). */
+  label?: string;
+}
+/** <ray-ring-progress> as a Vue component. */
+export declare const RayRingProgress: DefineComponent<RayRingProgressProps>;
+
 export interface RaySkeletonProps {
   /** Width (CSS length, a number is px). Default: 100% (a circle: 2.5rem). */
   width?: string;
@@ -1977,6 +2025,27 @@ export interface RaySpinnerProps {
 /** <ray-spinner> as a Vue component. */
 export declare const RaySpinner: DefineComponent<RaySpinnerProps>;
 
+export interface RayStepDotsProps {
+  /** Number of steps (dots). */
+  count?: number;
+  /** The current step, 0-based; count means every step is done. */
+  value?: number;
+  /** A palette color or any CSS color for done and current dots. Default: the primary color. */
+  color?: string;
+  /** Size of a dot. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Where the row sits in its width. */
+  align?: "start" | "center" | "end";
+  /** What a step is called: "Round" is announced "Round 4 of 12" and names the element. Default: Step (named Steps). In another language, use value-text. */
+  label?: string;
+  /** The announced text, {step} (the current one, from 1) and {count} replaced, numbers in the page's language: value-text="Asalto {step} de {count}". Default: "<label> {step} of {count}". */
+  valueText?: string;
+  /** The announced text once every step is done (value = count), with {count}. Default: value-text, else "{count} of {count}, done". */
+  doneText?: string;
+}
+/** <ray-step-dots> as a Vue component. */
+export declare const RayStepDots: DefineComponent<RayStepDotsProps>;
+
 export interface RayAppBarProps {
   /** The title. */
   label?: string;
@@ -2200,6 +2269,7 @@ export declare const components: {
   RayPathInput: typeof RayPathInput;
   RayRadioGroup: typeof RayRadioGroup;
   RayRadio: typeof RayRadio;
+  RayRadioCard: typeof RayRadioCard;
   RaySearch: typeof RaySearch;
   RaySegmentedControl: typeof RaySegmentedControl;
   RaySelect: typeof RaySelect;
@@ -2249,8 +2319,10 @@ export declare const components: {
   RayNotification: typeof RayNotification;
   RayToaster: typeof RayToaster;
   RayProgress: typeof RayProgress;
+  RayRingProgress: typeof RayRingProgress;
   RaySkeleton: typeof RaySkeleton;
   RaySpinner: typeof RaySpinner;
+  RayStepDots: typeof RayStepDots;
   RayAppBar: typeof RayAppBar;
   RayAppShell: typeof RayAppShell;
   RayAspectRatio: typeof RayAspectRatio;
@@ -2292,6 +2364,7 @@ declare module "vue" {
     RayPathInput: typeof RayPathInput;
     RayRadioGroup: typeof RayRadioGroup;
     RayRadio: typeof RayRadio;
+    RayRadioCard: typeof RayRadioCard;
     RaySearch: typeof RaySearch;
     RaySegmentedControl: typeof RaySegmentedControl;
     RaySelect: typeof RaySelect;
@@ -2341,8 +2414,10 @@ declare module "vue" {
     RayNotification: typeof RayNotification;
     RayToaster: typeof RayToaster;
     RayProgress: typeof RayProgress;
+    RayRingProgress: typeof RayRingProgress;
     RaySkeleton: typeof RaySkeleton;
     RaySpinner: typeof RaySpinner;
+    RayStepDots: typeof RayStepDots;
     RayAppBar: typeof RayAppBar;
     RayAppShell: typeof RayAppShell;
     RayAspectRatio: typeof RayAspectRatio;

package/index.js

@@ -19,7 +19,7 @@ import { RayInput } from "./components/input.js";
 import { RayNumberInput } from "./components/number-input.js";
 import { RayPasswordInput } from "./components/password-input.js";
 import { RayPathInput } from "./components/path-input.js";
-import { RayRadioGroup, RayRadio } from "./components/radio.js";
+import { RayRadioGroup, RayRadio, RayRadioCard } from "./components/radio.js";
 import { RaySearch } from "./components/search.js";
 import { RaySegmentedControl } from "./components/segmented-control.js";
 import { RaySelect } from "./components/select.js";
@@ -56,8 +56,10 @@ import { RayAlert } from "./components/alert.js";
 import { RayEmptyState } from "./components/empty-state.js";
 import { RayNotification, RayToaster } from "./components/notification.js";
 import { RayProgress } from "./components/progress.js";
+import { RayRingProgress } from "./components/ring-progress.js";
 import { RaySkeleton } from "./components/skeleton.js";
 import { RaySpinner } from "./components/spinner.js";
+import { RayStepDots } from "./components/step-dots.js";
 import { RayAppBar } from "./components/app-bar.js";
 import { RayAppShell } from "./components/app-shell.js";
 import { RayAspectRatio } from "./components/aspect-ratio.js";
@@ -75,9 +77,9 @@ import { RayThemeToggle } from "./components/theme-toggle.js";
 
 // The factories, to wrap your own custom elements the same way.
 export { createComponent, createPlugin } from "./create.js";
-export { RayButton, RayButtonGroup, RayIconButton, RayToggle, RayToggleGroup, RayCheckbox, RayCheckboxGroup, RayColorPicker, RayColorInput, RayCombobox, RayDatePicker, RayCalendar, RayFileUpload, RayInput, RayNumberInput, RayPasswordInput, RayPathInput, RayRadioGroup, RayRadio, RaySearch, RaySegmentedControl, RaySelect, RaySlider, RaySwitch, RayTextarea, RayBottomNav, RayBottomNavItem, RayBreadcrumbs, RayBreadcrumb, RayNavLink, RayPagination, RaySidebar, RaySidebarGroup, RayStepper, RayStep, RayTabs, RayTab, RayTabPanel, RayCommandPalette, RayDialog, RayDrawer, RayMenu, RayMenuItem, RayMenuLabel, RayMenuDivider, RayPopover, RayTooltip, RayAccordion, RayAccordionItem, RayAttachment, RayAttachments, RayAvatar, RayBadge, RayBlockquote, RayCarousel, RayCode, RayIcon, RayIndicator, RayKbd, RayStat, RayTable, RayTimeline, RayTimelineItem, RayAlert, RayEmptyState, RayNotification, RayToaster, RayProgress, RaySkeleton, RaySpinner, RayAppBar, RayAppShell, RayAspectRatio, RayCard, RayCenter, RayContainer, RayGrid, RayGroup, RayScrollArea, RaySeparator, RaySplit, RayStack, RayStatusbar, RayStatusbarItem, RayThemeToggle };
+export { RayButton, RayButtonGroup, RayIconButton, RayToggle, RayToggleGroup, RayCheckbox, RayCheckboxGroup, RayColorPicker, RayColorInput, RayCombobox, RayDatePicker, RayCalendar, RayFileUpload, RayInput, RayNumberInput, RayPasswordInput, RayPathInput, RayRadioGroup, RayRadio, RayRadioCard, RaySearch, RaySegmentedControl, RaySelect, RaySlider, RaySwitch, RayTextarea, RayBottomNav, RayBottomNavItem, RayBreadcrumbs, RayBreadcrumb, RayNavLink, RayPagination, RaySidebar, RaySidebarGroup, RayStepper, RayStep, RayTabs, RayTab, RayTabPanel, RayCommandPalette, RayDialog, RayDrawer, RayMenu, RayMenuItem, RayMenuLabel, RayMenuDivider, RayPopover, RayTooltip, RayAccordion, RayAccordionItem, RayAttachment, RayAttachments, RayAvatar, RayBadge, RayBlockquote, RayCarousel, RayCode, RayIcon, RayIndicator, RayKbd, RayStat, RayTable, RayTimeline, RayTimelineItem, RayAlert, RayEmptyState, RayNotification, RayToaster, RayProgress, RayRingProgress, RaySkeleton, RaySpinner, RayStepDots, RayAppBar, RayAppShell, RayAspectRatio, RayCard, RayCenter, RayContainer, RayGrid, RayGroup, RayScrollArea, RaySeparator, RaySplit, RayStack, RayStatusbar, RayStatusbarItem, RayThemeToggle };
 
-export const components = { RayButton, RayButtonGroup, RayIconButton, RayToggle, RayToggleGroup, RayCheckbox, RayCheckboxGroup, RayColorPicker, RayColorInput, RayCombobox, RayDatePicker, RayCalendar, RayFileUpload, RayInput, RayNumberInput, RayPasswordInput, RayPathInput, RayRadioGroup, RayRadio, RaySearch, RaySegmentedControl, RaySelect, RaySlider, RaySwitch, RayTextarea, RayBottomNav, RayBottomNavItem, RayBreadcrumbs, RayBreadcrumb, RayNavLink, RayPagination, RaySidebar, RaySidebarGroup, RayStepper, RayStep, RayTabs, RayTab, RayTabPanel, RayCommandPalette, RayDialog, RayDrawer, RayMenu, RayMenuItem, RayMenuLabel, RayMenuDivider, RayPopover, RayTooltip, RayAccordion, RayAccordionItem, RayAttachment, RayAttachments, RayAvatar, RayBadge, RayBlockquote, RayCarousel, RayCode, RayIcon, RayIndicator, RayKbd, RayStat, RayTable, RayTimeline, RayTimelineItem, RayAlert, RayEmptyState, RayNotification, RayToaster, RayProgress, RaySkeleton, RaySpinner, RayAppBar, RayAppShell, RayAspectRatio, RayCard, RayCenter, RayContainer, RayGrid, RayGroup, RayScrollArea, RaySeparator, RaySplit, RayStack, RayStatusbar, RayStatusbarItem, RayThemeToggle };
+export const components = { RayButton, RayButtonGroup, RayIconButton, RayToggle, RayToggleGroup, RayCheckbox, RayCheckboxGroup, RayColorPicker, RayColorInput, RayCombobox, RayDatePicker, RayCalendar, RayFileUpload, RayInput, RayNumberInput, RayPasswordInput, RayPathInput, RayRadioGroup, RayRadio, RayRadioCard, RaySearch, RaySegmentedControl, RaySelect, RaySlider, RaySwitch, RayTextarea, RayBottomNav, RayBottomNavItem, RayBreadcrumbs, RayBreadcrumb, RayNavLink, RayPagination, RaySidebar, RaySidebarGroup, RayStepper, RayStep, RayTabs, RayTab, RayTabPanel, RayCommandPalette, RayDialog, RayDrawer, RayMenu, RayMenuItem, RayMenuLabel, RayMenuDivider, RayPopover, RayTooltip, RayAccordion, RayAccordionItem, RayAttachment, RayAttachments, RayAvatar, RayBadge, RayBlockquote, RayCarousel, RayCode, RayIcon, RayIndicator, RayKbd, RayStat, RayTable, RayTimeline, RayTimelineItem, RayAlert, RayEmptyState, RayNotification, RayToaster, RayProgress, RayRingProgress, RaySkeleton, RaySpinner, RayStepDots, RayAppBar, RayAppShell, RayAspectRatio, RayCard, RayCenter, RayContainer, RayGrid, RayGroup, RayScrollArea, RaySeparator, RaySplit, RayStack, RayStatusbar, RayStatusbarItem, RayThemeToggle };
 
 /** app.use(RayElements) registers every component globally. */
 export const RayElements = /*#__PURE__*/ createPlugin(components);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raylang/vue",
-  "version": "0.5.2",
+  "version": "0.7.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.5.2",
+    "@raylang/elements": "^0.7.0",
     "vue": ">=3.3"
   }
 }