@raylang/vue 0.0.0-stage → 0.4.0

package/components/input.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/input";
+import { createComponent } from "../create.js";
+
+export const RayInput = /*#__PURE__*/ createComponent("RayInput", "ray-input", {
+  properties: ["value", "type", "name", "label", "description", "descriptionPosition", "error", "placeholder", "required", "disabled", "readonly", "size", "radius", "variant"],
+  booleans: ["required", "disabled", "readonly"],
+  model: { prop: "value", events: ["input"] },
+});

package/components/kbd.js

@@ -0,0 +1,9 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/kbd";
+import { createComponent } from "../create.js";
+
+export const RayKbd = /*#__PURE__*/ createComponent("RayKbd", "ray-kbd", {
+  properties: ["size", "variant"],
+  booleans: [],
+});

package/components/menu.js

@@ -0,0 +1,22 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/menu";
+import { createComponent } from "../create.js";
+
+export const RayMenu = /*#__PURE__*/ createComponent("RayMenu", "ray-menu", {
+  properties: ["open", "placement", "context", "keepOpen", "native", "offset"],
+  booleans: ["open", "context", "keepOpen", "native"],
+  model: { prop: "open", events: ["ray-open", "ray-close"] },
+});
+export const RayMenuItem = /*#__PURE__*/ createComponent("RayMenuItem", "ray-menu-item", {
+  properties: ["value", "disabled", "color"],
+  booleans: ["disabled"],
+});
+export const RayMenuLabel = /*#__PURE__*/ createComponent("RayMenuLabel", "ray-menu-label", {
+  properties: [],
+  booleans: [],
+});
+export const RayMenuDivider = /*#__PURE__*/ createComponent("RayMenuDivider", "ray-menu-divider", {
+  properties: [],
+  booleans: [],
+});

package/components/nav-link.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/nav-link";
+import { createComponent } from "../create.js";
+
+export const RayNavLink = /*#__PURE__*/ createComponent("RayNavLink", "ray-nav-link", {
+  properties: ["label", "description", "href", "active", "opened", "disabled", "variant", "color", "iconOnly"],
+  booleans: ["active", "opened", "disabled", "iconOnly"],
+  model: { prop: "opened", events: ["ray-toggle"] },
+});

package/components/notification.js

@@ -0,0 +1,13 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/notification";
+import { createComponent } from "../create.js";
+
+export const RayNotification = /*#__PURE__*/ createComponent("RayNotification", "ray-notification", {
+  properties: ["label", "color", "icon", "loading", "hideClose", "withBorder", "actionLabel"],
+  booleans: ["loading", "hideClose", "withBorder"],
+});
+export const RayToaster = /*#__PURE__*/ createComponent("RayToaster", "ray-toaster", {
+  properties: ["position", "limit", "visible", "expand", "gap"],
+  booleans: ["expand"],
+});

package/components/number-input.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+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"],
+  booleans: ["hideControls", "readonly", "required", "disabled"],
+  model: { prop: "value", events: ["input"] },
+});

package/components/pagination.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/pagination";
+import { createComponent } from "../create.js";
+
+export const RayPagination = /*#__PURE__*/ createComponent("RayPagination", "ray-pagination", {
+  properties: ["total", "value", "siblings", "boundaries", "withEdges", "hideControls", "color", "size", "radius", "disabled", "label"],
+  booleans: ["withEdges", "hideControls", "disabled"],
+  model: { prop: "value", events: ["change"] },
+});

package/components/password-input.js

@@ -0,0 +1,9 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/password-input";
+import { createComponent } from "../create.js";
+
+export const RayPasswordInput = /*#__PURE__*/ createComponent("RayPasswordInput", "ray-password-input", {
+  properties: ["visible", "showLabel", "hideLabel", "value", "type", "name", "label", "description", "descriptionPosition", "error", "placeholder", "required", "disabled", "readonly", "size", "radius", "variant"],
+  booleans: ["visible", "required", "disabled", "readonly"],
+});

package/components/path-input.js

@@ -0,0 +1,9 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/path-input";
+import { createComponent } from "../create.js";
+
+export const RayPathInput = /*#__PURE__*/ createComponent("RayPathInput", "ray-path-input", {
+  properties: ["mode", "accept", "browseLabel", "dialogTitle", "value", "type", "name", "label", "description", "descriptionPosition", "error", "placeholder", "required", "disabled", "readonly", "size", "radius", "variant"],
+  booleans: ["required", "disabled", "readonly"],
+});

package/components/popover.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+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"],
+  booleans: ["open", "matchWidth", "trapFocus"],
+  model: { prop: "open", events: ["ray-open", "ray-close"] },
+});

package/components/progress.js

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

package/components/radio.js

@@ -0,0 +1,14 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/radio";
+import { createComponent } from "../create.js";
+
+export const RayRadioGroup = /*#__PURE__*/ createComponent("RayRadioGroup", "ray-radio-group", {
+  properties: ["value", "name", "label", "description", "descriptionPosition", "error", "required", "disabled", "orientation", "size", "color", "variant"],
+  booleans: ["required", "disabled"],
+  model: { prop: "value", events: ["change"] },
+});
+export const RayRadio = /*#__PURE__*/ createComponent("RayRadio", "ray-radio", {
+  properties: ["value", "label", "description", "disabled", "color", "size", "variant"],
+  booleans: ["disabled"],
+});

package/components/scroll-area.js

@@ -0,0 +1,9 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/scroll-area";
+import { createComponent } from "../create.js";
+
+export const RayScrollArea = /*#__PURE__*/ createComponent("RayScrollArea", "ray-scroll-area", {
+  properties: ["height", "maxHeight", "orientation", "type", "noShadows", "threshold", "label"],
+  booleans: ["noShadows"],
+});

package/components/search.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/search";
+import { createComponent } from "../create.js";
+
+export const RaySearch = /*#__PURE__*/ createComponent("RaySearch", "ray-search", {
+  properties: ["value", "placeholder", "shortcut", "debounce", "name", "label", "disabled", "size", "radius", "variant", "description", "error", "required", "descriptionPosition"],
+  booleans: ["disabled", "required"],
+  model: { prop: "value", events: ["input"] },
+});

package/components/segmented-control.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/segmented-control";
+import { createComponent } from "../create.js";
+
+export const RaySegmentedControl = /*#__PURE__*/ createComponent("RaySegmentedControl", "ray-segmented-control", {
+  properties: ["value", "data", "name", "color", "size", "radius", "fullWidth", "orientation", "disabled"],
+  booleans: ["fullWidth", "disabled"],
+  model: { prop: "value", events: ["change"] },
+});

package/components/select.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/select";
+import { createComponent } from "../create.js";
+
+export const RaySelect = /*#__PURE__*/ createComponent("RaySelect", "ray-select", {
+  properties: ["value", "data", "placeholder", "open", "name", "label", "description", "descriptionPosition", "error", "required", "disabled", "size", "variant", "radius"],
+  booleans: ["open", "required", "disabled"],
+  model: { prop: "value", events: ["change"] },
+});

package/components/separator.js

@@ -0,0 +1,9 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/separator";
+import { createComponent } from "../create.js";
+
+export const RaySeparator = /*#__PURE__*/ createComponent("RaySeparator", "ray-separator", {
+  properties: ["orientation", "label", "labelPosition", "size", "variant"],
+  booleans: [],
+});

package/components/sidebar.js

@@ -0,0 +1,13 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/sidebar";
+import { createComponent } from "../create.js";
+
+export const RaySidebar = /*#__PURE__*/ createComponent("RaySidebar", "ray-sidebar", {
+  properties: ["collapsed", "open", "side", "variant", "width", "collapsedWidth", "breakpoint", "label"],
+  booleans: ["collapsed", "open"],
+});
+export const RaySidebarGroup = /*#__PURE__*/ createComponent("RaySidebarGroup", "ray-sidebar-group", {
+  properties: ["label"],
+  booleans: [],
+});

package/components/skeleton.js

@@ -0,0 +1,9 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/skeleton";
+import { createComponent } from "../create.js";
+
+export const RaySkeleton = /*#__PURE__*/ createComponent("RaySkeleton", "ray-skeleton", {
+  properties: ["width", "height", "circle", "lines", "radius", "animation", "loaded"],
+  booleans: ["circle", "loaded"],
+});

package/components/slider.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/slider";
+import { createComponent } from "../create.js";
+
+export const RaySlider = /*#__PURE__*/ createComponent("RaySlider", "ray-slider", {
+  properties: ["value", "min", "max", "step", "name", "label", "description", "descriptionPosition", "error", "disabled", "color", "size", "showValue", "unit", "marks", "required", "radius", "variant"],
+  booleans: ["disabled", "showValue", "required"],
+  model: { prop: "value", events: ["input"] },
+});

package/components/spinner.js

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

package/components/split.js

@@ -0,0 +1,9 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/split";
+import { createComponent } from "../create.js";
+
+export const RaySplit = /*#__PURE__*/ createComponent("RaySplit", "ray-split", {
+  properties: ["orientation", "position", "min", "max", "collapsed", "disabled", "autosave"],
+  booleans: ["collapsed", "disabled"],
+});

package/components/stack.js

@@ -0,0 +1,9 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/stack";
+import { createComponent } from "../create.js";
+
+export const RayStack = /*#__PURE__*/ createComponent("RayStack", "ray-stack", {
+  properties: ["gap", "align", "justify"],
+  booleans: [],
+});

package/components/stat.js

@@ -0,0 +1,9 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/stat";
+import { createComponent } from "../create.js";
+
+export const RayStat = /*#__PURE__*/ createComponent("RayStat", "ray-stat", {
+  properties: ["label", "value", "diff", "diffUnit", "note", "inverse", "plain"],
+  booleans: ["inverse", "plain"],
+});

package/components/statusbar.js

@@ -0,0 +1,13 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/statusbar";
+import { createComponent } from "../create.js";
+
+export const RayStatusbar = /*#__PURE__*/ createComponent("RayStatusbar", "ray-statusbar", {
+  properties: ["variant"],
+  booleans: [],
+});
+export const RayStatusbarItem = /*#__PURE__*/ createComponent("RayStatusbarItem", "ray-statusbar-item", {
+  properties: ["action", "color", "label"],
+  booleans: ["action"],
+});

package/components/stepper.js

@@ -0,0 +1,14 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/stepper";
+import { createComponent } from "../create.js";
+
+export const RayStepper = /*#__PURE__*/ createComponent("RayStepper", "ray-stepper", {
+  properties: ["active", "orientation", "iconPosition", "allowStepSelect", "linear", "size", "color", "label"],
+  booleans: ["allowStepSelect", "linear"],
+  model: { prop: "active", events: ["change"] },
+});
+export const RayStep = /*#__PURE__*/ createComponent("RayStep", "ray-step", {
+  properties: ["label", "description", "icon", "completedIcon", "loading", "error", "disabled"],
+  booleans: ["loading", "disabled"],
+});

package/components/switch.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/switch";
+import { createComponent } from "../create.js";
+
+export const RaySwitch = /*#__PURE__*/ createComponent("RaySwitch", "ray-switch", {
+  properties: ["checked", "value", "name", "label", "description", "error", "labelPosition", "color", "size", "disabled", "indeterminate", "required", "variant", "radius", "descriptionPosition"],
+  booleans: ["checked", "disabled", "indeterminate", "required"],
+  model: { prop: "checked", events: ["change"] },
+});

package/components/table.js

@@ -0,0 +1,9 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/table";
+import { createComponent } from "../create.js";
+
+export const RayTable = /*#__PURE__*/ createComponent("RayTable", "ray-table", {
+  properties: ["columns", "data", "rowKey", "selectable", "selection", "sort", "manualSort", "clickableRows", "striped", "withBorder", "withColumnBorders", "stickyHeader", "noHover", "density", "label", "emptyLabel"],
+  booleans: ["selectable", "manualSort", "clickableRows", "striped", "withBorder", "withColumnBorders", "stickyHeader", "noHover"],
+});

package/components/tabs.js

@@ -0,0 +1,18 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/tabs";
+import { createComponent } from "../create.js";
+
+export const RayTabs = /*#__PURE__*/ createComponent("RayTabs", "ray-tabs", {
+  properties: ["value", "variant", "orientation", "color", "activation", "grow"],
+  booleans: ["grow"],
+  model: { prop: "value", events: ["change"] },
+});
+export const RayTab = /*#__PURE__*/ createComponent("RayTab", "ray-tab", {
+  properties: ["value", "disabled"],
+  booleans: ["disabled"],
+});
+export const RayTabPanel = /*#__PURE__*/ createComponent("RayTabPanel", "ray-tab-panel", {
+  properties: ["value"],
+  booleans: [],
+});

package/components/textarea.js

@@ -0,0 +1,10 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/textarea";
+import { createComponent } from "../create.js";
+
+export const RayTextarea = /*#__PURE__*/ createComponent("RayTextarea", "ray-textarea", {
+  properties: ["value", "rows", "autosize", "maxRows", "name", "label", "description", "descriptionPosition", "error", "required", "disabled", "readonly", "size", "variant", "radius"],
+  booleans: ["autosize", "required", "disabled", "readonly"],
+  model: { prop: "value", events: ["input"] },
+});

package/components/theme-toggle.js

@@ -0,0 +1,9 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/theme-toggle";
+import { createComponent } from "../create.js";
+
+export const RayThemeToggle = /*#__PURE__*/ createComponent("RayThemeToggle", "ray-theme-toggle", {
+  properties: ["size"],
+  booleans: [],
+});

package/components/timeline.js

@@ -0,0 +1,13 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/timeline";
+import { createComponent } from "../create.js";
+
+export const RayTimeline = /*#__PURE__*/ createComponent("RayTimeline", "ray-timeline", {
+  properties: ["active", "align", "bulletSize", "lineWidth", "color", "reverseActive"],
+  booleans: ["reverseActive"],
+});
+export const RayTimelineItem = /*#__PURE__*/ createComponent("RayTimelineItem", "ray-timeline-item", {
+  properties: ["label", "time", "icon", "color", "lineVariant"],
+  booleans: [],
+});

package/components/toggle-group.js

@@ -0,0 +1,9 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/toggle-group";
+import { createComponent } from "../create.js";
+
+export const RayToggleGroup = /*#__PURE__*/ createComponent("RayToggleGroup", "ray-toggle-group", {
+  properties: ["type", "value", "name", "required", "disabled", "spaced", "variant", "color", "size", "radius", "square", "orientation", "fullWidth", "label"],
+  booleans: ["required", "disabled", "spaced", "square", "fullWidth"],
+});

package/components/toggle.js

@@ -0,0 +1,9 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/toggle";
+import { createComponent } from "../create.js";
+
+export const RayToggle = /*#__PURE__*/ createComponent("RayToggle", "ray-toggle", {
+  properties: ["pressed", "variant", "square", "label", "gradient", "color", "size", "radius", "type", "disabled", "loading", "fullWidth", "href", "target", "name", "value"],
+  booleans: ["pressed", "square", "disabled", "loading", "fullWidth"],
+});

package/components/tooltip.js

@@ -0,0 +1,9 @@
+// Generated by ray-elements tools from component.toml files. Do not edit.
+
+import "@raylang/elements/tooltip";
+import { createComponent } from "../create.js";
+
+export const RayTooltip = /*#__PURE__*/ createComponent("RayTooltip", "ray-tooltip", {
+  properties: ["label", "placement", "openDelay", "closeDelay", "color", "disabled", "open", "offset"],
+  booleans: ["disabled", "open"],
+});

package/create.js

@@ -0,0 +1,67 @@
+// Vue 3 wrapper factory for ray-elements custom elements.
+//
+// Declared properties are assigned as DOM properties after mount and every
+// update. With a `model` ({ prop, events }), the wrapper supports v-model:
+// modelValue -> element[prop], and the events emit update:modelValue with
+// the element's new value. Attributes and listeners (@ray-select, @click,
+// class, slot…) fall through to the element: Vue maps onRaySelect to the
+// "ray-select" event on its own.
+
+import { defineComponent, h, mergeProps, onMounted, onUpdated, ref } from "vue";
+
+/**
+ * @param {string} name     component name (RayInput)
+ * @param {string} tagName  custom element tag (ray-input)
+ * @param {{ properties?: string[], booleans?: string[], model?: { prop: string, events: string[] } }} options
+ *   booleans: the boolean properties, so a bare attribute (<RayInput required>) means true
+ */
+export function createComponent(name, tagName, { properties = [], booleans = [], model } = {}) {
+  const props = {};
+  // Boolean casting ("" -> true); default undefined keeps an absent prop off the element.
+  for (const p of properties) props[p] = { type: booleans.includes(p) ? Boolean : null, default: undefined };
+  if (model) props.modelValue = { type: null, default: undefined };
+
+  return defineComponent({
+    name,
+    inheritAttrs: false,
+    props,
+    emits: model ? ["update:modelValue"] : [],
+    setup(p, { attrs, slots, emit, expose }) {
+      const el = ref(null);
+      const sync = () => {
+        const e = el.value;
+        if (!e) return;
+        for (const key of properties) {
+          if (p[key] !== undefined && !Object.is(e[key], p[key])) e[key] = p[key];
+        }
+        if (model && p.modelValue !== undefined && !Object.is(e[model.prop], p.modelValue)) {
+          e[model.prop] = p.modelValue;
+        }
+      };
+      onMounted(sync);
+      onUpdated(sync);
+      expose({ el });
+
+      const listeners = {};
+      if (model) {
+        for (const type of model.events) {
+          const key = "on" + type.split("-").map((s) => s[0].toUpperCase() + s.slice(1)).join("");
+          listeners[key] = (event) => {
+            // Only the element's own event (not one bubbling from a child).
+            if (event.target === el.value) emit("update:modelValue", el.value[model.prop]);
+          };
+        }
+      }
+      return () => h(tagName, mergeProps(attrs, listeners, { ref: el }), slots.default?.());
+    },
+  });
+}
+
+/** A plugin registering every component globally: app.use(RayElements). */
+export function createPlugin(components) {
+  return {
+    install(app) {
+      for (const [name, component] of Object.entries(components)) app.component(name, component);
+    },
+  };
+}