@ui-sdk/vue 0.0.0-stage → 0.1.0-beta.1

package/dist/number-input.d.ts

@@ -0,0 +1,176 @@
+import { type NumberInputController, type NumberInputState, type NumberInputValueChangeReason } from "@ui-sdk/core/number-input";
+import type { ChangeDetails, CommitDetails } from "@ui-sdk/core";
+import { type PropType } from "vue";
+import { type PartSlots } from "./use-primitive.js";
+type Value = number | null;
+/**
+ * The root, and the hidden input that submits the number as is.
+ * @stable
+ */
+declare const NumberInput: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: {
+        type: PropType<Value>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<Value>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<Value>;
+        default: undefined;
+    };
+    min: NumberConstructor;
+    max: NumberConstructor;
+    step: NumberConstructor;
+    largeStep: NumberConstructor;
+    smallStep: NumberConstructor;
+    format: PropType<Intl.NumberFormatOptions>;
+    locale: StringConstructor;
+    wheel: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readOnly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    name: StringConstructor;
+    form: StringConstructor;
+    controller: PropType<NumberInputController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<NumberInputState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (_value: Value) => true;
+    "update:modelValue": (_value: Value) => true;
+    valueChange: (_value: Value, _details: ChangeDetails<NumberInputValueChangeReason>) => true;
+    valueCommit: (_value: Value, _details: CommitDetails<NumberInputValueChangeReason>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: PropType<Value>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<Value>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<Value>;
+        default: undefined;
+    };
+    min: NumberConstructor;
+    max: NumberConstructor;
+    step: NumberConstructor;
+    largeStep: NumberConstructor;
+    smallStep: NumberConstructor;
+    format: PropType<Intl.NumberFormatOptions>;
+    locale: StringConstructor;
+    wheel: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readOnly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    name: StringConstructor;
+    form: StringConstructor;
+    controller: PropType<NumberInputController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_value: Value) => any) | undefined;
+    "onUpdate:value"?: ((_value: Value) => any) | undefined;
+    onValueChange?: ((_value: Value, _details: ChangeDetails<NumberInputValueChangeReason>) => any) | undefined;
+    onValueCommit?: ((_value: Value, _details: CommitDetails<NumberInputValueChangeReason>) => any) | undefined;
+}>, {
+    value: Value;
+    wheel: boolean;
+    disabled: boolean;
+    debug: boolean;
+    defaultValue: Value;
+    required: boolean;
+    readOnly: boolean;
+    modelValue: Value;
+}, PartSlots<import("@ui-sdk/core/number-input").NumberInputPrimitive, "root">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * Holds the input and its buttons.
+ * @stable
+ */
+declare const NumberInputGroup: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<NumberInputState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<NumberInputState>>>, "div">;
+/**
+ * Steps up once, then repeats while held. Shift steps by `largeStep`.
+ * @stable
+ */
+declare const NumberInputIncrement: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/number-input").NumberInputButtonProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/number-input").NumberInputButtonState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/number-input").NumberInputButtonProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/number-input").NumberInputButtonState>>>, "button">;
+/**
+ * Steps down once, then repeats while held. Shift steps by `largeStep`.
+ * @stable
+ */
+declare const NumberInputDecrement: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/number-input").NumberInputButtonProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/number-input").NumberInputButtonState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/number-input").NumberInputButtonProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/number-input").NumberInputButtonState>>>, "button">;
+/**
+ * The text field, which shows the formatted number and takes typing.
+ * @stable
+ */
+declare const NumberInputControl: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<NumberInputState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/number-input").NumberInputPrimitive, "control">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "input">;
+/**
+ * Drag across it to change the value. It works anywhere inside the number
+ * input, and outside it through `controller`, like an icon in a toolbar.
+ * @stable
+ */
+declare const NumberInputScrubArea: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    orientation: PropType<"horizontal" | "vertical">;
+    pixelsPerStep: NumberConstructor;
+    controller: PropType<NumberInputController>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    orientation: PropType<"horizontal" | "vertical">;
+    pixelsPerStep: NumberConstructor;
+    controller: PropType<NumberInputController>;
+}>> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/number-input").NumberInputPrimitive, "scrub-area">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "span">;
+/**
+ * Stands in for the mouse cursor while a scrub locks the pointer. Rendered in
+ * the body, so transformed ancestors can't move it.
+ * @stable
+ */
+declare const NumberInputScrubAreaCursor: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/number-input").NumberInputPrimitive, "scrub-area-cursor">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "span">;
+export { createNumberInputController } from "@ui-sdk/core/number-input";
+export type { NumberInputApi, NumberInputButtonProps, NumberInputButtonState, NumberInputChangeOptions, NumberInputController, NumberInputOptions, NumberInputPrimitive, NumberInputScrubAreaProps, NumberInputState, NumberInputValueChangeReason, } from "@ui-sdk/core/number-input";
+export { NumberInput, NumberInputControl, NumberInputDecrement, NumberInputGroup, NumberInputIncrement, NumberInputScrubArea, NumberInputScrubAreaCursor, };

package/dist/number-input.js

@@ -0,0 +1,231 @@
+// src/number-input.ts
+import {
+  numberInput as numberInputPrimitive
+} from "@ui-sdk/core/number-input";
+import {
+  defineComponent,
+  h,
+  inject,
+  provide,
+  Teleport
+} from "vue";
+import {
+  renderUnbound,
+  useControllerEntry,
+  useControllerTarget
+} from "./controller-target.js";
+import { useFieldControl, useFieldControlId } from "./field-context.js";
+import { createParts, withElement } from "./create-parts.js";
+import {
+  optionalBoolean,
+  orModel,
+  provideHandle,
+  useHandle,
+  usePart,
+  usePrimitive,
+  useScope
+} from "./use-primitive.js";
+import { readOnlyOf } from "./text-control.js";
+import { createNumberInputController } from "@ui-sdk/core/number-input";
+var FieldOfKey = /* @__PURE__ */ Symbol("number-input-field");
+var parts = createParts(numberInputPrimitive, {
+  group: "div",
+  increment: "button",
+  decrement: "button"
+});
+var NumberInput = withElement(
+  "div",
+  defineComponent({
+    name: "NumberInput",
+    inheritAttrs: false,
+    props: {
+      value: { type: Number, default: void 0 },
+      modelValue: { type: Number, default: void 0 },
+      defaultValue: { type: Number, default: void 0 },
+      min: Number,
+      max: Number,
+      step: Number,
+      largeStep: Number,
+      smallStep: Number,
+      format: Object,
+      locale: String,
+      wheel: optionalBoolean,
+      disabled: optionalBoolean,
+      readOnly: optionalBoolean,
+      required: optionalBoolean,
+      name: String,
+      form: String,
+      controller: Object,
+      debug: optionalBoolean
+    },
+    emits: {
+      "update:value": (_value) => true,
+      "update:modelValue": (_value) => true,
+      valueChange: (_value, _details) => true,
+      valueCommit: (_value, _details) => true
+    },
+    slots: Object,
+    setup(props, { attrs, emit }) {
+      const field = useFieldControl();
+      const controlId = useFieldControlId();
+      const numberInput = usePrimitive(numberInputPrimitive, () => ({
+        value: orModel(props.value, props.modelValue),
+        defaultValue: props.defaultValue,
+        min: props.min,
+        max: props.max,
+        step: props.step,
+        largeStep: props.largeStep,
+        smallStep: props.smallStep,
+        format: props.format,
+        locale: props.locale,
+        wheel: props.wheel,
+        disabled: props.disabled || field?.disabled(),
+        readOnly: readOnlyOf(props, attrs),
+        required: props.required,
+        name: props.name ?? field?.name(),
+        form: props.form,
+        controller: props.controller,
+        controlId,
+        debug: props.debug,
+        onValueChange: (value, details) => {
+          emit("valueChange", value, details);
+          if (details.canceled) {
+            return;
+          }
+          emit("update:value", value);
+          emit("update:modelValue", value);
+        },
+        onValueCommit: (value, details) => emit("valueCommit", value, details)
+      }));
+      provide(FieldOfKey, field);
+      useControllerEntry(() => props.controller, numberInput);
+      return usePart(numberInput, "root", void 0, void 0, {
+        tag: "div",
+        hidden: () => h("input", numberInput.slot("hidden-input"))
+      });
+    }
+  })
+);
+var NumberInputGroup = parts.Group;
+var NumberInputIncrement = parts.Increment;
+var NumberInputDecrement = parts.Decrement;
+var NumberInputControl = withElement(
+  "input",
+  defineComponent({
+    name: "NumberInputControl",
+    inheritAttrs: false,
+    slots: Object,
+    setup() {
+      const field = inject(FieldOfKey, null);
+      return usePart(
+        useHandle(numberInputPrimitive),
+        "control",
+        void 0,
+        void 0,
+        {
+          tag: "input",
+          extend: field?.props
+        }
+      );
+    }
+  })
+);
+var unconnected = {
+  value: null,
+  disabled: false,
+  readOnly: false,
+  required: false,
+  scrubbing: false
+};
+var NumberInputScrubArea = withElement(
+  "span",
+  defineComponent({
+    name: "NumberInputScrubArea",
+    inheritAttrs: false,
+    props: {
+      orientation: String,
+      pixelsPerStep: Number,
+      controller: Object
+    },
+    slots: Object,
+    setup(props, { slots, attrs }) {
+      const connected = useControllerTarget(
+        numberInputPrimitive,
+        () => props.controller
+      );
+      return () => {
+        const numberInput = connected();
+        if (!numberInput) {
+          return renderUnbound("span", attrs, { slots, state: unconnected });
+        }
+        return h(
+          ScrubAreaPart,
+          {
+            numberInput,
+            orientation: props.orientation,
+            pixelsPerStep: props.pixelsPerStep,
+            // A new number input needs a new part, bound to its instance.
+            key: numberInput.instance.id,
+            ...attrs
+          },
+          slots
+        );
+      };
+    }
+  })
+);
+var ScrubAreaPart = defineComponent({
+  name: "NumberInputScrubAreaPart",
+  inheritAttrs: false,
+  props: {
+    numberInput: {
+      type: Object,
+      required: true
+    },
+    orientation: String,
+    pixelsPerStep: Number
+  },
+  setup(props) {
+    provideHandle(props.numberInput);
+    const scrub = () => ({
+      orientation: props.orientation,
+      pixelsPerStep: props.pixelsPerStep
+    });
+    return usePart(props.numberInput, "scrub-area", scrub, void 0, "span");
+  }
+});
+var NumberInputScrubAreaCursor = withElement(
+  "span",
+  defineComponent({
+    name: "NumberInputScrubAreaCursor",
+    inheritAttrs: false,
+    slots: Object,
+    setup() {
+      const numberInput = useScope(numberInputPrimitive)?.handle;
+      if (!numberInput) {
+        return () => null;
+      }
+      const cursor = usePart(
+        numberInput,
+        "scrub-area-cursor",
+        void 0,
+        void 0,
+        "span"
+      );
+      return () => {
+        const element = cursor();
+        return element && h(Teleport, { to: "body" }, [element]);
+      };
+    }
+  })
+);
+export {
+  NumberInput,
+  NumberInputControl,
+  NumberInputDecrement,
+  NumberInputGroup,
+  NumberInputIncrement,
+  NumberInputScrubArea,
+  NumberInputScrubAreaCursor,
+  createNumberInputController
+};

package/dist/number.d.ts

@@ -0,0 +1,2 @@
+export { clamp, decimalsOf, formatNumber, formatNumberRange, formatNumberToParts, fractionOf, isPartialNumber, maxOnGrid, numberFormatter, parseNumber, roundTo, scrubTo, stepBy, stepFromKey, stepValue, valueAt, wrap, } from "@ui-sdk/core/number";
+export type { NumberFormat, NumberKeyOptions, NumberMove, NumberRange, NumberScale, NumberScrub, NumberSnap, StepRange, } from "@ui-sdk/core/number";

package/dist/number.js

@@ -0,0 +1,39 @@
+// src/number.ts
+import {
+  clamp,
+  decimalsOf,
+  formatNumber,
+  formatNumberRange,
+  formatNumberToParts,
+  fractionOf,
+  isPartialNumber,
+  maxOnGrid,
+  numberFormatter,
+  parseNumber,
+  roundTo,
+  scrubTo,
+  stepBy,
+  stepFromKey,
+  stepValue,
+  valueAt,
+  wrap
+} from "@ui-sdk/core/number";
+export {
+  clamp,
+  decimalsOf,
+  formatNumber,
+  formatNumberRange,
+  formatNumberToParts,
+  fractionOf,
+  isPartialNumber,
+  maxOnGrid,
+  numberFormatter,
+  parseNumber,
+  roundTo,
+  scrubTo,
+  stepBy,
+  stepFromKey,
+  stepValue,
+  valueAt,
+  wrap
+};