@leavepulse/ui 0.78.0 → 0.78.2

package/dist/composables/propCheck.js

@@ -1,3 +1,4 @@
+import { Teleport } from "vue";
 const KIT_COMPONENT = /^Lp[A-Z]/;
 const ALWAYS_ALLOWED = /^(data-|aria-|on[A-Z])/;
 const GLOBAL_ATTRIBUTES = /* @__PURE__ */ new Set([
@@ -46,11 +47,21 @@ function unknownAttributes(attributes, elements, ignore = []) {
     return !elements.some((el) => propertiesOf(el).has(key));
   });
 }
+function rootElements(vnode, out = []) {
+  if (!vnode || vnode.type === Teleport) return out;
+  if (vnode.component) return rootElements(vnode.component.subTree, out);
+  const el = vnode.el;
+  if (el?.nodeType === 1) {
+    out.push(el);
+    return out;
+  }
+  if (Array.isArray(vnode.children)) {
+    for (const child of vnode.children) if (child && typeof child === "object") rootElements(child, out);
+  }
+  return out;
+}
 function renderedElements(instance) {
-  const root = instance.$el;
-  if (root?.nodeType !== 1) return [];
-  const el = root;
-  return [el, ...el.querySelectorAll(FORWARD_TARGETS)];
+  return rootElements(instance.$.subTree).flatMap((el) => [el, ...el.querySelectorAll(FORWARD_TARGETS)]);
 }
 const lpPropCheck = {
   install(app, options = {}) {

package/dist/composables/useField.d.ts

@@ -80,6 +80,56 @@ export declare function fieldWrapperBinds(wrapped: boolean, field: {
     class: unknown;
     style: unknown;
 };
+/**
+ * Whether a control with these props draws its own LpFormField. A label or a
+ * hint is its own; an error alone is, except inside an outer LpFormField, which
+ * owns the label (its `for` points at the control) and the message line: a
+ * second field in it showed the message twice and took the label's control id.
+ * There the error only marks the control invalid.
+ */
+export declare function wrapsItself(own: {
+    label?: string;
+    hint?: string;
+    error?: string;
+}, outer: ComputedRef<FieldContext> | null): boolean;
+/**
+ * A control that takes `label`, `hint` and `error` the way LpInput does: given
+ * any of them it wraps itself in LpFormField (FieldWrapper, bound to
+ * `wrapper`), an error marks it invalid, and the consumer's class and style lay
+ * out that field instead of the control (`ownAttrs` says whether the control's
+ * root still takes them). Without them it is the bare control, as before. So
+ * `v-bind="form.field('x')"`, which hands every control `error`, shows the
+ * message on any of them.
+ * Inside an outer LpFormField an error alone does not wrap (wrapsItself).
+ */
+export declare function useOwnField(state: () => {
+    label?: string;
+    hint?: string;
+    error?: string;
+    required?: boolean;
+    invalid?: boolean;
+    disabled?: boolean;
+    id?: string;
+}): {
+    wrapped: ComputedRef<boolean>;
+    field: ComputedRef<Omit<FieldContext, "id"> & {
+        id?: string;
+    }>;
+    wrapper: ComputedRef<{
+        wrapped: boolean;
+        id: string | undefined;
+        label: string | undefined;
+        hint: string | undefined;
+        error: string | undefined;
+        required: boolean | undefined;
+        class: unknown;
+        style: unknown;
+    }>;
+    controlAttrs: ComputedRef<{
+        [x: string]: unknown;
+    }>;
+    ownAttrs: () => boolean;
+};
 /** The state of a control that takes its id from the app and draws no wrapper of its own. */
 export declare function useAttrsField(state: () => {
     invalid?: boolean;

package/dist/composables/useField.js

@@ -1,4 +1,4 @@
-import { useId, computed, provide, inject, useAttrs, onScopeDispose } from "vue";
+import { inject, useId, computed, provide, useAttrs, onScopeDispose } from "vue";
 import { isElement } from "./realm.js";
 const LP_FIELD = /* @__PURE__ */ Symbol.for("lp-field");
 function provideField(context) {
@@ -74,6 +74,33 @@ function fieldWrapperBinds(wrapped, field, props, attrs) {
   const { label, hint, error, required } = props;
   return { wrapped, id: field.id, label, hint, error, required, class: attrs.class, style: attrs.style };
 }
+function wrapsItself(own, outer) {
+  if (own.label || own.hint) return true;
+  return !!own.error && !outer?.value;
+}
+function useOwnField(state) {
+  const attrs = useAttrs();
+  const outer = useField();
+  const wrapped = computed(() => wrapsItself(state(), outer));
+  const field = useFieldControl(() => {
+    const own = state();
+    return {
+      wrapped: wrapped.value,
+      hasMessage: !!own.error || !!own.hint,
+      id: own.id ?? (typeof attrs.id === "string" ? attrs.id : void 0),
+      invalid: !!own.invalid || !!own.error,
+      required: own.required,
+      disabled: own.disabled
+    };
+  });
+  const wrapper = computed(() => fieldWrapperBinds(wrapped.value, field.value, state(), attrs));
+  const controlAttrs = computed(() => {
+    if (!wrapped.value) return attrs;
+    const { class: _class, style: _style, ...rest } = attrs;
+    return rest;
+  });
+  return { wrapped, field, wrapper, controlAttrs, ownAttrs: () => !wrapped.value };
+}
 function useAttrsField(state) {
   const attrs = useAttrs();
   const field = useFieldControl(() => ({
@@ -94,5 +121,7 @@ export {
   useAttrsField,
   useField,
   useFieldBlur,
-  useFieldControl
+  useFieldControl,
+  useOwnField,
+  wrapsItself
 };

package/dist/composables/useMergedClass.d.ts

@@ -13,7 +13,9 @@ import { type ComputedRef, type MaybeRefOrGetter } from "vue";
  * Pair it with `inheritAttrs: false` (and bind the rest of `$attrs` yourself)
  * so the raw `class` does not land on the element a second time, unmerged.
  */
-export declare function useMergedClass(own: MaybeRefOrGetter<string | undefined>): ComputedRef<string>;
+export declare function useMergedClass(own: MaybeRefOrGetter<string | undefined>, 
+/** False while something else takes the consumer's class (a field wrapper). */
+takesAttrs?: () => boolean): ComputedRef<string>;
 /**
  * `useMergedClass` plus the rest of `$attrs`, for the common `inheritAttrs:
  * false` shape: bind `class` and `attrs` and the consumer's `class` lands once,
@@ -30,7 +32,9 @@ export declare function useMergedClass(own: MaybeRefOrGetter<string | undefined>
  * Vue appends that second `class` to the merged one, and stylesheet order —
  * not the caller — decides which wins.
  */
-export declare function useMergedAttrs(own: MaybeRefOrGetter<string | undefined>): {
+export declare function useMergedAttrs(own: MaybeRefOrGetter<string | undefined>, 
+/** False while a field wrapper takes the consumer's class and style (useOwnField's `ownAttrs`). */
+takesAttrs?: () => boolean): {
     class: ComputedRef<string>;
     attrs: ComputedRef<Record<string, unknown>>;
 };

package/dist/composables/useMergedClass.js

@@ -14,17 +14,17 @@ function merge(...classes) {
   const joined = cx(...classes);
   return joined ? kitMerge(joined) : "";
 }
-function useMergedClass(own) {
+function useMergedClass(own, takesAttrs = () => true) {
   const attrs = useAttrs();
-  return computed(() => merge(toValue(own), attrs.class));
+  return computed(() => merge(toValue(own), takesAttrs() ? attrs.class : void 0));
 }
-function useMergedAttrs(own) {
+function useMergedAttrs(own, takesAttrs = () => true) {
   const attrs = useAttrs();
   return {
-    class: useMergedClass(own),
+    class: useMergedClass(own, takesAttrs),
     attrs: computed(() => {
-      const { class: _omitted, ...rest } = attrs;
-      return rest;
+      const { class: _omitted, style, ...rest } = attrs;
+      return takesAttrs() ? { ...rest, ...style === void 0 ? {} : { style } } : rest;
     })
   };
 }

package/dist/composables/usePaletteCommands.js

@@ -194,8 +194,10 @@ function usePaletteControl(options = {}) {
             autofocus: void 0,
             palette: false,
             disabled: options.disabled?.() || !writable(),
-            invalid: options.invalid?.(),
-            required: field?.value.required ?? instance.props.required,
+            // Only to a control that declares them: elsewhere they fell through
+            // as attributes onto its root (a switch's button took `required`).
+            ..."invalid" in instance.props ? { invalid: options.invalid?.() } : {},
+            ..."required" in instance.props ? { required: field?.value.required ?? instance.props.required } : {},
             "aria-label": label(),
             class: "w-full",
             style: void 0

package/dist/index.d.ts

@@ -133,6 +133,7 @@ export { default as LpRadioGroup } from "./components/LpRadioGroup.vue";
 export type { RadioOption } from "./components/LpRadioGroup.vue";
 export { default as LpRollingText } from "./components/LpRollingText.vue";
 export { default as LpScrollArea } from "./components/LpScrollArea.vue";
+export { default as LpPageScrollbar } from "./components/LpPageScrollbar.vue";
 export { default as LpSegmented } from "./components/LpSegmented.vue";
 export type { SegmentedOption } from "./components/LpSegmented.vue";
 export { default as LpSection } from "./components/LpSection.vue";