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

package/dist/slider.js

@@ -0,0 +1,194 @@
+// src/slider.ts
+import {
+  slider as sliderPrimitive
+} from "@ui-sdk/core/slider";
+import {
+  computed,
+  defineComponent,
+  h,
+  inject,
+  provide
+} from "vue";
+import { slotContent } from "./children.js";
+import { useFieldControl, useFieldControlId } from "./field-context.js";
+import {
+  createParts,
+  withElement
+} from "./create-parts.js";
+import {
+  optionalBoolean,
+  orModel,
+  useHandle,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { createSliderController } from "@ui-sdk/core/slider";
+var ThumbFieldKey = /* @__PURE__ */ Symbol("slider-field");
+var useSlider = () => useHandle(sliderPrimitive);
+var parts = createParts(sliderPrimitive, {
+  control: "div",
+  track: "div",
+  indicator: "div"
+});
+var SliderInput = defineComponent({
+  name: "SliderInput",
+  setup() {
+    const slider = useSlider();
+    return () => h("input", slider.slot("input"));
+  }
+});
+var Slider = defineComponent({
+  name: "Slider",
+  inheritAttrs: false,
+  props: {
+    value: { type: [Number, Array], default: void 0 },
+    modelValue: {
+      type: [Number, Array],
+      default: void 0
+    },
+    defaultValue: {
+      type: [Number, Array],
+      default: void 0
+    },
+    min: Number,
+    max: Number,
+    step: Number,
+    largeStep: Number,
+    minStepsBetweenThumbs: Number,
+    orientation: String,
+    disabled: optionalBoolean,
+    readOnly: optionalBoolean,
+    required: optionalBoolean,
+    name: String,
+    form: String,
+    format: [Object, Function],
+    locale: 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, { slots, emit }) {
+    const field = useFieldControl();
+    const controlId = useFieldControlId();
+    const model = () => orModel(props.value, props.modelValue);
+    const slider = usePrimitive(sliderPrimitive, () => ({
+      value: model(),
+      defaultValue: props.defaultValue,
+      min: props.min,
+      max: props.max,
+      step: props.step,
+      largeStep: props.largeStep,
+      minStepsBetweenThumbs: props.minStepsBetweenThumbs,
+      orientation: props.orientation,
+      disabled: props.disabled || field?.disabled(),
+      readOnly: props.readOnly,
+      required: props.required,
+      name: props.name ?? field?.name(),
+      form: props.form,
+      format: props.format,
+      locale: props.locale,
+      controller: props.controller,
+      thumbInputId: 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)
+    }));
+    const isRange = computed(() => {
+      const shape = model() ?? props.defaultValue;
+      return Array.isArray(shape) && shape.length > 1;
+    });
+    provide(ThumbFieldKey, () => isRange.value ? null : field);
+    return usePart(slider, "root", void 0, void 0, {
+      tag: "div",
+      children: (state) => [slots.default?.({ state }), h(SliderInput)],
+      extend: (root) => isRange.value && field ? field.props(root) : root
+    });
+  }
+});
+var SliderControl = parts.Control;
+var SliderTrack = parts.Track;
+var SliderIndicator = parts.Indicator;
+var inputAttributes = ["aria-label", "aria-labelledby", "aria-describedby"];
+var SliderThumbInput = defineComponent({
+  name: "SliderThumbInput",
+  inheritAttrs: false,
+  props: { index: { type: Number, required: true } },
+  setup(props, { attrs }) {
+    const slider = useSlider();
+    const thumbField = inject(ThumbFieldKey, () => null);
+    return () => {
+      const input = slider.slot(
+        "thumb-input",
+        { index: props.index, id: String(props.index) },
+        attrs
+      );
+      const field = thumbField();
+      return h("input", field ? field.props(input) : input);
+    };
+  }
+});
+var SliderThumb = withElement(
+  "div",
+  defineComponent({
+    name: "SliderThumb",
+    inheritAttrs: false,
+    props: { index: { type: Number, default: 0 } },
+    slots: Object,
+    setup(props, { slots, attrs }) {
+      const thumb = () => ({ index: props.index, id: String(props.index) });
+      let named = {};
+      const own = () => {
+        const rest = {};
+        named = {};
+        for (const [key, value] of Object.entries(attrs)) {
+          ;
+          (inputAttributes.includes(key) ? named : rest)[key] = value;
+        }
+        return rest;
+      };
+      return usePart(useSlider(), "thumb", thumb, own, {
+        tag: "div",
+        children: (state) => [
+          slots.default?.({ state }),
+          h(SliderThumbInput, { index: props.index, ...named })
+        ]
+      });
+    }
+  })
+);
+var SliderValue = withElement(
+  "output",
+  defineComponent({
+    name: "SliderValue",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { slots }) {
+      return usePart(useSlider(), "value", void 0, void 0, {
+        tag: "output",
+        children: (state) => slotContent(slots.default, { state }) ?? state.text
+      });
+    }
+  })
+);
+export {
+  Slider,
+  SliderControl,
+  SliderIndicator,
+  SliderThumb,
+  SliderTrack,
+  SliderValue,
+  createSliderController
+};

package/dist/switch.d.ts

@@ -0,0 +1,103 @@
+import type { ChangeDetails } from "@ui-sdk/core";
+import { type SwitchCheckedChangeReason, type SwitchController } from "@ui-sdk/core/switch";
+import { type PropType } from "vue";
+import { type PartSlots } from "./use-primitive.js";
+/**
+ * A control that turns a setting on or off, with the hidden native input that takes part in the form.
+ * @stable
+ */
+declare const Switch: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readOnly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    name: StringConstructor;
+    value: StringConstructor;
+    form: StringConstructor;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    checked: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultChecked: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    controller: PropType<SwitchController>;
+}>, () => (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)[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:checked": (_checked: boolean) => true;
+    "update:modelValue": (_checked: boolean) => true;
+    checkedChange: (_checked: boolean, _details: ChangeDetails<SwitchCheckedChangeReason>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readOnly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    name: StringConstructor;
+    value: StringConstructor;
+    form: StringConstructor;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    checked: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultChecked: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    controller: PropType<SwitchController>;
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_checked: boolean) => any) | undefined;
+    "onUpdate:checked"?: ((_checked: boolean) => any) | undefined;
+    onCheckedChange?: ((_checked: boolean, _details: ChangeDetails<import("@ui-sdk/core/checkbox").CheckboxCheckedChangeReason>) => any) | undefined;
+}>, {
+    disabled: boolean;
+    debug: boolean;
+    checked: boolean;
+    required: boolean;
+    readOnly: boolean;
+    defaultChecked: boolean;
+    modelValue: boolean;
+}, PartSlots<import("@ui-sdk/core/switch").SwitchPrimitive, "root">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "button">;
+/**
+ * The thumb that slides along the switch as it turns on or off.
+ * @stable
+ */
+declare const SwitchThumb: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/switch").SwitchState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/switch").SwitchState>>>, "span">;
+export { createSwitchController } from "@ui-sdk/core/switch";
+export type { SwitchApi, SwitchCheckedChangeReason, SwitchController, SwitchOptions, SwitchPrimitive, SwitchState, SwitchThumbState, } from "@ui-sdk/core/switch";
+export { Switch, SwitchThumb };

package/dist/switch.js

@@ -0,0 +1,71 @@
+// src/switch.ts
+import {
+  switchPrimitive
+} from "@ui-sdk/core/switch";
+import { defineComponent, h } from "vue";
+import { useFieldControl } from "./field-context.js";
+import { toggleProps } from "./toggle-props.js";
+import { createParts, withElement } from "./create-parts.js";
+import {
+  optionalBoolean,
+  orModel,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { readOnlyOf } from "./text-control.js";
+import { createSwitchController } from "@ui-sdk/core/switch";
+var parts = createParts(switchPrimitive, { thumb: "span" });
+var Switch = withElement(
+  "button",
+  defineComponent({
+    name: "Switch",
+    inheritAttrs: false,
+    props: {
+      checked: optionalBoolean,
+      modelValue: optionalBoolean,
+      defaultChecked: optionalBoolean,
+      controller: Object,
+      ...toggleProps
+    },
+    emits: {
+      "update:checked": (_checked) => true,
+      "update:modelValue": (_checked) => true,
+      checkedChange: (_checked, _details) => true
+    },
+    slots: Object,
+    setup(props, { attrs, emit }) {
+      const field = useFieldControl();
+      const control = usePrimitive(switchPrimitive, () => ({
+        checked: orModel(props.checked, props.modelValue),
+        defaultChecked: props.defaultChecked,
+        disabled: props.disabled || field?.disabled(),
+        readOnly: readOnlyOf(props, attrs),
+        required: props.required,
+        name: props.name ?? field?.name(),
+        value: props.value,
+        form: props.form,
+        controller: props.controller,
+        debug: props.debug,
+        onCheckedChange: (checked, details) => {
+          emit("checkedChange", checked, details);
+          if (details.canceled) {
+            return;
+          }
+          emit("update:checked", checked);
+          emit("update:modelValue", checked);
+        }
+      }));
+      const root = usePart(control, "root", void 0, void 0, {
+        tag: "button",
+        extend: field?.props
+      });
+      return () => [root(), h("input", control.slot("input"))];
+    }
+  })
+);
+var SwitchThumb = parts.Thumb;
+export {
+  Switch,
+  SwitchThumb,
+  createSwitchController
+};