@sewadah/selaras 0.3.0 → 0.3.2

package/dist/runtime/components/Toast.vue.d.ts

@@ -1,6 +1,15 @@
-import type { ToastThemeSlots } from '../theme/toast.js';
+import type { ToastPosition as ToastPositionType, ToastThemeSlots } from '../theme/toast.js';
 import type { UiProp } from '../utils/ui.js';
+export type ToastPosition = ToastPositionType;
 export interface ToastProps {
+    /** Where the toast viewport is pinned. @default 'bottom-right' */
+    position?: ToastPositionType;
+    /** Shows every toast separately instead of layering them into a stack that fans open on hover. @default false */
+    expand?: boolean;
+    /** Default visibility time in milliseconds; a toast's own duration takes precedence. @default 5000 */
+    duration?: number;
+    /** Maximum number of toasts shown at once; older toasts are removed when the limit is reached. @default 5 */
+    max?: number;
     ui?: UiProp<ToastThemeSlots>;
 }
 declare const __VLS_export: import("vue").DefineComponent<ToastProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToastProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/Tooltip.d.vue.ts

@@ -1,13 +1,19 @@
 import type { TooltipThemeSlots } from '../theme/tooltip.js';
+import type { ArrowConfig } from '../utils/arrow.js';
+import type { OverlayPortal, OverlayPositioning } from '../utils/overlay.js';
 import type { UiProp } from '../utils/ui.js';
 export interface TooltipProps {
     text?: string;
     side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Anchored tooltip placement. Overrides `side` when supplied. */
+    positioning?: OverlayPositioning;
+    /** Teleport target, or `false` to render inline. Defaults to `body`. */
+    portal?: OverlayPortal;
     delayDuration?: number;
     /** Keyboard shortcut hint shown alongside the text, e.g. `['⌘', 'K']` - each entry renders as its own small key badge. Takes the literal display strings, not semantic key names - there's no platform-specific symbol mapping. */
     kbds?: string[];
-    /** Set `false` to hide the little pointer triangle. */
-    arrow?: boolean;
+    /** Set `false` to hide the pointer; an object configures its size and edge clearance. */
+    arrow?: boolean | ArrowConfig;
     disabled?: boolean;
     ui?: UiProp<TooltipThemeSlots>;
 }

package/dist/runtime/components/Tooltip.vue

@@ -2,31 +2,38 @@
 import { TooltipArrow, TooltipContent, TooltipPortal, TooltipRoot, TooltipTrigger } from "reka-ui";
 import { computed } from "vue";
 import { tooltipTheme } from "../theme/tooltip";
-import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
+import { arrowContentProps, arrowElementProps } from "../utils/arrow";
+import { overlayPortalProps } from "../utils/overlay";
+import { resolveSlot, useComponentTheme, useFallthroughProps, useThemeBindings } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   text: { type: String, required: false },
   side: { type: String, required: false, default: "top" },
+  positioning: { type: Object, required: false },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: void 0 },
   delayDuration: { type: Number, required: false, default: 200 },
   kbds: { type: Array, required: false },
-  arrow: { type: Boolean, required: false, default: true },
+  arrow: { type: [Boolean, Object], required: false, default: true },
   disabled: { type: Boolean, required: false },
   ui: { type: Object, required: false }
 });
 const theme = useComponentTheme("tooltip", tooltipTheme);
 const themeBindings = useThemeBindings();
 const ui = computed(() => theme.value());
-const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
-const arrowProps = computed(() => resolveSlot(ui.value.arrow, props.ui?.arrow));
+const triggerProps = useFallthroughProps();
+const contentProps = computed(() => ({ ...resolveSlot(ui.value.content, props.ui?.content), ...arrowContentProps(props.arrow), ...props.positioning }));
+const portalProps = computed(() => overlayPortalProps(props.portal));
+const arrowProps = computed(() => ({ ...resolveSlot(ui.value.arrow, props.ui?.arrow), ...arrowElementProps(props.arrow) }));
 const kbdsProps = computed(() => resolveSlot(ui.value.kbds, props.ui?.kbds));
 const kbdProps = computed(() => resolveSlot(ui.value.kbd, props.ui?.kbd));
 </script>
 
 <template>
   <TooltipRoot :delay-duration="delayDuration" :disabled="disabled">
-    <TooltipTrigger as-child>
+    <TooltipTrigger as-child v-bind="triggerProps">
       <slot />
     </TooltipTrigger>
-    <TooltipPortal>
+    <TooltipPortal v-bind="portalProps">
       <TooltipContent :side="side" :side-offset="6" :data-selaras-theme="themeBindings['data-selaras-theme']" :data-selaras-mode="themeBindings['data-selaras-mode']" :style="themeBindings.style" v-bind="contentProps">
         <slot name="content">
           {{ text }}

package/dist/runtime/components/Tooltip.vue.d.ts

@@ -1,13 +1,19 @@
 import type { TooltipThemeSlots } from '../theme/tooltip.js';
+import type { ArrowConfig } from '../utils/arrow.js';
+import type { OverlayPortal, OverlayPositioning } from '../utils/overlay.js';
 import type { UiProp } from '../utils/ui.js';
 export interface TooltipProps {
     text?: string;
     side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Anchored tooltip placement. Overrides `side` when supplied. */
+    positioning?: OverlayPositioning;
+    /** Teleport target, or `false` to render inline. Defaults to `body`. */
+    portal?: OverlayPortal;
     delayDuration?: number;
     /** Keyboard shortcut hint shown alongside the text, e.g. `['⌘', 'K']` - each entry renders as its own small key badge. Takes the literal display strings, not semantic key names - there's no platform-specific symbol mapping. */
     kbds?: string[];
-    /** Set `false` to hide the little pointer triangle. */
-    arrow?: boolean;
+    /** Set `false` to hide the pointer; an object configures its size and edge clearance. */
+    arrow?: boolean | ArrowConfig;
     disabled?: boolean;
     ui?: UiProp<TooltipThemeSlots>;
 }

package/dist/runtime/composables/use-confirm.d.ts

@@ -0,0 +1,14 @@
+import type { ColorRole } from '../utils/color-registry.js';
+export interface UseConfirmOptions {
+    title?: string;
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    confirmColor?: ColorRole;
+    icon?: string;
+}
+export interface UseConfirmReturn {
+    /** Resolves true only for an explicit confirmation; cancel, Escape, and dismissal resolve false. */
+    confirm: (options?: UseConfirmOptions) => Promise<boolean>;
+}
+export declare function useConfirm(): UseConfirmReturn;

package/dist/runtime/composables/use-confirm.js

@@ -0,0 +1,28 @@
+import { useConfirmService } from "../internal/programmatic-services.js";
+import { useProgrammaticThemeSnapshot } from "../utils/programmatic-theme.js";
+import { useMessages } from "./use-messages.js";
+export function useConfirm() {
+  const service = useConfirmService();
+  const messages = useMessages();
+  const snapshotTheme = useProgrammaticThemeSnapshot();
+  function confirm(options = {}) {
+    if (import.meta.server)
+      return Promise.reject(new Error("[useConfirm] confirm() is client-only. Render SAlertDialog declaratively during SSR."));
+    return new Promise((resolve) => {
+      service.instances.value.push({
+        id: service.nextId(),
+        isOpen: true,
+        _settled: false,
+        resolve: (value) => resolve(value === true),
+        title: options.title ?? messages.value.confirmation,
+        description: options.description,
+        confirmLabel: options.confirmLabel,
+        cancelLabel: options.cancelLabel,
+        confirmColor: options.confirmColor,
+        icon: options.icon,
+        _theme: snapshotTheme()
+      });
+    });
+  }
+  return { confirm };
+}

package/dist/runtime/composables/use-form-field.d.ts

@@ -4,6 +4,7 @@ export interface FormFieldContext {
     labelId?: string;
     name?: string;
     size?: 'sm' | 'md' | 'lg';
+    floatingLabel: ComputedRef<boolean>;
     invalid: ComputedRef<boolean>;
     describedBy: ComputedRef<string | undefined>;
 }

package/dist/runtime/composables/use-table.d.ts

@@ -34,6 +34,7 @@ export type TableRowSelectionState = RowSelectionState;
 export type TableExpandedState = ExpandedState;
 export type TableColumnVisibilityState = ColumnVisibilityState;
 export type TableGetRowId<TData extends RowData = RowData> = (row: TData, index: number) => string;
+export type TableGetSubRows<TData extends RowData = RowData> = (row: TData, index: number) => readonly TData[] | undefined;
 /** Creates TanStack v9 column definitions bound to STable's fixed feature set. */
 export declare const createTableColumnHelper: <TData extends RowData>() => import("@tanstack/vue-table").AppColumnHelper<{
     rowSortingFeature: import("@tanstack/vue-table").TableFeature;
@@ -68,6 +69,8 @@ interface UseTableProps<TData extends RowData> {
     expanded?: TableExpandedState;
     columnVisibility?: TableColumnVisibilityState;
     getRowId?: TableGetRowId<TData>;
+    tree?: boolean;
+    getSubRows?: TableGetSubRows<TData>;
     manualSorting?: boolean;
     manualFiltering?: boolean;
     manualPagination?: boolean;

package/dist/runtime/composables/use-table.js

@@ -89,12 +89,18 @@ export function useTable(props, emit, columns, columnPinning) {
   const table = useAppTable({
     data: computed(() => props.data),
     columns,
+    // TanStack enables sorting by default for accessor columns. Selaras opts
+    // columns into sorting explicitly, matching the declarative SColumn API.
+    defaultColumn: { enableSorting: false },
     enableRowSelection: computed(() => !!props.selectable),
     getRowId: props.getRowId,
-    // Row expansion otherwise only allows expanding rows that already have
-    // real hierarchical subRows - this table's own expansion is manual
-    // (detail content via the `expanded` slot), not a subRow tree.
-    getRowCanExpand: () => true,
+    getSubRows: props.tree ? props.getSubRows ?? ((row) => row.subRows) : () => void 0,
+    // Tree rows expand when they have children; detail expansion remains
+    // available on every row when tree mode is off.
+    getRowCanExpand: (row) => props.tree ? !!row.subRows?.length : true,
+    // Paginate tree roots as a unit so expanding one root does not hide later
+    // roots simply because its children consume the page-size row count.
+    paginateExpandedRows: false,
     // Opts out of the local sorted/filtered/paginated row models - state
     // still lives here (sorting/globalFilter/pageIndex above, still
     // emitting their own update:* events the normal way), only the row

package/dist/runtime/composables/use-toast.js

@@ -5,9 +5,13 @@ export function useToast() {
   const snapshotTheme = useProgrammaticThemeSnapshot();
   function add(toast) {
     if (import.meta.server)
-      throw new Error("[useToast] add() is client-only. Render server-visible status content declaratively.");
+      return -1;
     const id = service.nextId();
+    if (service.max.value <= 0)
+      return id;
     service.toasts.value.push({ ...toast, id, _theme: snapshotTheme() });
+    if (service.toasts.value.length > service.max.value)
+      service.toasts.value.splice(0, service.toasts.value.length - service.max.value);
     return id;
   }
   return { add, remove: service.remove };

package/dist/runtime/directives/hotkey.d.ts

@@ -0,0 +1,13 @@
+import type { Directive } from 'vue';
+export interface HotkeyOptions<T extends HTMLElement = HTMLElement> {
+    /** A key chord such as `mod+k`, `ctrl+shift+p`, or `escape`. */
+    keys: string;
+    /** Runs instead of clicking the bound element. */
+    handler?: (event: KeyboardEvent) => void;
+    /** Gate activation on current application state. */
+    when?: boolean | ((element: T, event: KeyboardEvent) => boolean);
+    /** Allow shortcuts while focus is in an editable control. Defaults to false. */
+    allowInEditable?: boolean;
+}
+export type HotkeyValue<T extends HTMLElement = HTMLElement> = string | HotkeyOptions<T> | false | null | undefined;
+export declare const vHotkey: Directive<HTMLElement, HotkeyValue>;

package/dist/runtime/directives/hotkey.js

@@ -0,0 +1,107 @@
+const aliases = {
+  esc: "escape",
+  return: "enter",
+  spacebar: " ",
+  space: " ",
+  up: "arrowup",
+  down: "arrowdown",
+  left: "arrowleft",
+  right: "arrowright",
+  del: "delete",
+  ctrl: "control",
+  cmd: "meta",
+  command: "meta",
+  option: "alt"
+};
+function isMacPlatform() {
+  if (typeof navigator === "undefined")
+    return false;
+  const platform = navigator.platform ?? "";
+  return /mac|iphone|ipad|ipod/i.test(platform);
+}
+function canonicalKey(key) {
+  const normalized = key.trim().toLowerCase();
+  return aliases[normalized] ?? normalized;
+}
+function parseHotkey(keys) {
+  const parts = keys.split("+").map(canonicalKey).filter(Boolean);
+  const key = parts.find((part) => !["control", "meta", "alt", "shift", "mod"].includes(part));
+  if (!key)
+    return void 0;
+  const hasMod = parts.includes("mod");
+  const mac = isMacPlatform();
+  return {
+    key,
+    ctrl: parts.includes("control") || hasMod && !mac,
+    meta: parts.includes("meta") || hasMod && mac,
+    alt: parts.includes("alt"),
+    shift: parts.includes("shift"),
+    focusScoped: key.length === 1 && !parts.some((part) => ["control", "meta", "alt", "shift", "mod"].includes(part))
+  };
+}
+function isEditable(target) {
+  if (!(target instanceof Element))
+    return false;
+  return Boolean(target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"])'));
+}
+function physicalKey(code) {
+  return /^Key([A-Z])$/.exec(code)?.[1]?.toLowerCase() ?? /^Digit(\d)$/.exec(code)?.[1];
+}
+function matches(event, hotkey) {
+  const keyMatches = canonicalKey(event.key) === hotkey.key || event.altKey && physicalKey(event.code) === hotkey.key;
+  const symbol = hotkey.key.length === 1 && hotkey.key !== " " && !/[a-z0-9]/.test(hotkey.key);
+  return keyMatches && event.ctrlKey === hotkey.ctrl && event.metaKey === hotkey.meta && event.altKey === hotkey.alt && (symbol && !hotkey.shift ? true : event.shiftKey === hotkey.shift);
+}
+function normalizeBinding(value) {
+  if (value === false || value == null)
+    return void 0;
+  return typeof value === "string" ? { keys: value } : value;
+}
+function install(element, value) {
+  const options = normalizeBinding(value);
+  const parsed = options && parseHotkey(options.keys);
+  if (!options || !parsed)
+    return void 0;
+  const listener = (event) => {
+    if (event.defaultPrevented || !matches(event, parsed))
+      return;
+    if (typeof options.when === "boolean" && !options.when)
+      return;
+    if (typeof options.when === "function" && !options.when(element, event))
+      return;
+    const activeElement = element.ownerDocument.activeElement;
+    const eventTarget = event.target;
+    if (parsed.focusScoped && !element.contains(activeElement) && !(eventTarget && (eventTarget === element || element.contains(eventTarget)))) {
+      return;
+    }
+    if (!options.allowInEditable && isEditable(event.target))
+      return;
+    event.preventDefault();
+    if (options.handler)
+      options.handler(event);
+    else
+      element.click();
+  };
+  document.addEventListener("keydown", listener);
+  return () => document.removeEventListener("keydown", listener);
+}
+export const vHotkey = {
+  mounted(element, binding) {
+    const cleanup = install(element, binding.value);
+    if (cleanup)
+      element.__selarasHotkeyCleanup = cleanup;
+  },
+  updated(element, binding) {
+    const host = element;
+    host.__selarasHotkeyCleanup?.();
+    delete host.__selarasHotkeyCleanup;
+    const cleanup = install(element, binding.value);
+    if (cleanup)
+      host.__selarasHotkeyCleanup = cleanup;
+  },
+  unmounted(element) {
+    const host = element;
+    host.__selarasHotkeyCleanup?.();
+    delete host.__selarasHotkeyCleanup;
+  }
+};

package/dist/runtime/directives/index.d.ts

@@ -1 +1,3 @@
+export * from './hotkey.js';
+export * from './mask.js';
 export * from './ripple.js';

package/dist/runtime/directives/index.js

@@ -1 +1,3 @@
+export * from "./hotkey.js";
+export * from "./mask.js";
 export * from "./ripple.js";

package/dist/runtime/directives/mask.d.ts

@@ -0,0 +1,30 @@
+import type { Directive } from 'vue';
+/** A mask placeholder character and the input characters it accepts. */
+export interface MaskToken {
+    pattern: RegExp;
+    /** Rewrites an accepted character, e.g. to uppercase it. */
+    transform?: (char: string) => string;
+}
+/** Values reported by `v-mask` after each mask update. */
+export interface MaskDetail {
+    /** The value without mask literals. This is also the value `v-model` receives. */
+    value: string;
+    /** The formatted value shown in the input. */
+    maskedValue: string;
+    /** Whether every placeholder in the mask has been filled. */
+    completed: boolean;
+}
+export interface MaskOptions {
+    mask: string;
+    /** Extra or overriding placeholder tokens, merged over the defaults (`#`, `@`, `*`). */
+    tokens?: Record<string, MaskToken>;
+    onMask?: (detail: MaskDetail) => void;
+}
+/** A mask pattern string, or options for custom tokens and the `onMask` callback. */
+export type MaskValue = string | MaskOptions | null | undefined;
+/**
+ * Formats a native input or the input inside a single-input component.
+ * `v-model` receives the raw value; the field shows the formatted one. Use
+ * `onMask` (or the bubbling `mask` event) to also read the formatted value.
+ */
+export declare const vMask: Directive<HTMLElement, MaskValue>;

package/dist/runtime/directives/mask.js

@@ -0,0 +1,165 @@
+const defaultMaskTokens = {
+  "#": { pattern: /\d/ },
+  "@": { pattern: /[a-z]/i },
+  "*": { pattern: /[\da-z]/i }
+};
+function formatMask(input, mask, tokens = defaultMaskTokens, raw = true) {
+  let masked = "";
+  let unmasked = "";
+  let inputIndex = 0;
+  let maskIndex = 0;
+  let skipped = 0;
+  const slotEnds = [];
+  while (maskIndex < mask.length && inputIndex < input.length) {
+    const maskChar = mask[maskIndex];
+    const token = tokens[maskChar];
+    const char = input[inputIndex];
+    if (token) {
+      if (token.pattern.test(char)) {
+        const accepted = token.transform ? token.transform(char) : char;
+        masked += accepted;
+        unmasked += accepted;
+        slotEnds.push(masked.length);
+        maskIndex++;
+      } else {
+        skipped++;
+      }
+      inputIndex++;
+    } else {
+      masked += maskChar;
+      if (!raw && char === maskChar && inputIndex - skipped === maskIndex)
+        inputIndex++;
+      maskIndex++;
+    }
+  }
+  let slotCount = 0;
+  for (const char of mask) {
+    if (tokens[char])
+      slotCount++;
+  }
+  return { masked, unmasked, completed: slotEnds.length === slotCount, slotEnds };
+}
+const states = /* @__PURE__ */ new WeakMap();
+let nativeDescriptor;
+function nativeValue() {
+  return nativeDescriptor ??= Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");
+}
+function readNative(input) {
+  return nativeValue().get.call(input);
+}
+function writeNative(input, value) {
+  if (readNative(input) !== value)
+    nativeValue().set.call(input, value);
+}
+function resolveInput(element) {
+  if (element instanceof HTMLInputElement)
+    return element;
+  return element.querySelector("input") ?? void 0;
+}
+function normalize(value) {
+  if (!value)
+    return void 0;
+  return typeof value === "string" ? { mask: value } : value.mask ? value : void 0;
+}
+function resolveTokens(options) {
+  return options.tokens ? { ...defaultMaskTokens, ...options.tokens } : defaultMaskTokens;
+}
+function commit(state, result) {
+  state.masked = result.masked;
+  state.unmasked = result.unmasked;
+  writeNative(state.input, result.masked);
+  if (state.reported === result.masked)
+    return;
+  state.reported = result.masked;
+  const detail = { value: result.unmasked, maskedValue: result.masked, completed: result.completed };
+  state.onMask?.(detail);
+  state.input.dispatchEvent(new CustomEvent("mask", { bubbles: true, detail }));
+}
+function handleInput(state, event) {
+  if (event.isComposing)
+    return;
+  const { input, mask, tokens } = state;
+  const current = readNative(input);
+  const caret = input.selectionStart ?? current.length;
+  const result = formatMask(current, mask, tokens, false);
+  const inputType = event.inputType ?? "";
+  if (inputType.startsWith("delete"))
+    result.masked = result.masked.slice(0, result.slotEnds.at(-1) ?? 0);
+  const position = Math.min(formatMask(current.slice(0, caret), mask, tokens, false).masked.length, result.masked.length);
+  commit(state, result);
+  if (document.activeElement === input)
+    input.setSelectionRange(position, position);
+}
+function install(element, input, options) {
+  const state = {
+    input,
+    mask: options.mask,
+    tokens: resolveTokens(options),
+    onMask: options.onMask,
+    masked: "",
+    unmasked: "",
+    onInput: (event) => handleInput(state, event)
+  };
+  Object.defineProperty(input, "value", {
+    configurable: true,
+    enumerable: nativeValue().enumerable,
+    get: () => {
+      const current = readNative(input);
+      return current === state.masked ? state.unmasked : formatMask(current, state.mask, state.tokens, false).unmasked;
+    },
+    set: (value) => {
+      commit(state, formatMask(value == null ? "" : String(value), state.mask, state.tokens));
+    }
+  });
+  input.addEventListener("input", state.onInput, true);
+  states.set(element, state);
+  commit(state, formatMask(readNative(input), state.mask, state.tokens));
+}
+function uninstall(element, state) {
+  state.input.removeEventListener("input", state.onInput, true);
+  Reflect.deleteProperty(state.input, "value");
+  states.delete(element);
+}
+function apply(element, value) {
+  const options = normalize(value);
+  const input = resolveInput(element);
+  const state = states.get(element);
+  if (state && (!options || state.input !== input))
+    uninstall(element, state);
+  if (!options || !input)
+    return;
+  const existing = states.get(element);
+  if (!existing) {
+    install(element, input, options);
+    return;
+  }
+  existing.onMask = options.onMask;
+  const tokens = resolveTokens(options);
+  if (existing.mask === options.mask && sameTokens(existing.tokens, tokens))
+    return;
+  existing.mask = options.mask;
+  existing.tokens = tokens;
+  commit(existing, formatMask(existing.unmasked, existing.mask, existing.tokens));
+}
+function sameTokens(left, right) {
+  if (left === right)
+    return true;
+  const keys = Object.keys(left);
+  return keys.length === Object.keys(right).length && keys.every((key) => right[key] && String(left[key].pattern) === String(right[key].pattern));
+}
+export const vMask = {
+  getSSRProps() {
+    return void 0;
+  },
+  mounted(element, binding) {
+    apply(element, binding.value);
+  },
+  updated(element, binding) {
+    apply(element, binding.value);
+  },
+  beforeUnmount(element) {
+    const state = states.get(element);
+    if (state)
+      uninstall(element, state);
+  }
+};