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

package/dist/color-picker.js

@@ -0,0 +1,158 @@
+// src/color-picker.ts
+import {
+  colorPicker
+} from "@ui-sdk/core/color-picker";
+import { defineComponent, h, useId } from "vue";
+import { createParts, withElement } from "./create-parts.js";
+import { useFieldControl } from "./field-context.js";
+import { readOnlyOf } from "./text-control.js";
+import {
+  optionalBoolean,
+  orModel,
+  useHandle,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { createColorPickerController } from "@ui-sdk/core/color-picker";
+var parts = createParts(colorPicker, {
+  area: "div",
+  "area-thumb": "div",
+  "area-canvas": "canvas",
+  slider: "div",
+  "slider-thumb": "div",
+  swatch: "div",
+  "eye-dropper": "button",
+  swatches: "div",
+  "swatch-item": "button"
+});
+var ColorPickerHiddenInput = defineComponent({
+  name: "ColorPickerHiddenInput",
+  setup() {
+    const picker = useHandle(colorPicker);
+    return () => h("input", picker.slot("hidden-input"));
+  }
+});
+var ColorPicker = withElement(
+  "div",
+  defineComponent({
+    name: "ColorPicker",
+    inheritAttrs: false,
+    props: {
+      value: { type: String, default: void 0 },
+      modelValue: { type: String, default: void 0 },
+      defaultValue: { type: String, default: void 0 },
+      space: String,
+      format: String,
+      gamut: {
+        type: [String, Boolean],
+        default: void 0
+      },
+      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, { slots, emit, attrs }) {
+      const field = useFieldControl();
+      const picker = usePrimitive(colorPicker, () => ({
+        value: orModel(props.value, props.modelValue),
+        defaultValue: props.defaultValue,
+        space: props.space,
+        format: props.format,
+        gamut: props.gamut,
+        disabled: props.disabled || field?.disabled(),
+        readOnly: readOnlyOf(props, attrs),
+        required: props.required,
+        name: props.name ?? field?.name(),
+        form: props.form,
+        controller: props.controller,
+        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)
+      }));
+      return usePart(picker, "root", void 0, void 0, {
+        tag: "div",
+        children: (state) => [
+          slots.default?.({ state }),
+          h(ColorPickerHiddenInput)
+        ],
+        extend: field?.props
+      });
+    }
+  })
+);
+var ColorPickerArea = parts.Area;
+var ColorPickerAreaThumb = parts.AreaThumb;
+var ColorPickerAreaCanvas = parts.AreaCanvas;
+var ColorPickerSlider = parts.Slider;
+var ColorPickerSliderThumb = parts.SliderThumb;
+var ColorPickerInput = withElement(
+  "input",
+  defineComponent({
+    name: "ColorPickerInput",
+    inheritAttrs: false,
+    slots: Object,
+    setup() {
+      return usePart(colorPicker, "input", void 0, void 0, {
+        tag: "input"
+      });
+    }
+  })
+);
+var ColorPickerChannelInput = withElement(
+  "input",
+  defineComponent({
+    name: "ColorPickerChannelInput",
+    inheritAttrs: false,
+    props: { channel: String },
+    slots: Object,
+    setup(props) {
+      const id = useId();
+      return usePart(
+        colorPicker,
+        "channel-input",
+        () => ({ id, channel: props.channel }),
+        void 0,
+        {
+          tag: "input"
+        }
+      );
+    }
+  })
+);
+var ColorPickerSwatch = parts.Swatch;
+var ColorPickerEyeDropper = parts.EyeDropper;
+var ColorPickerSwatches = parts.Swatches;
+var ColorPickerSwatchItem = parts.SwatchItem;
+export {
+  ColorPicker,
+  ColorPickerArea,
+  ColorPickerAreaCanvas,
+  ColorPickerAreaThumb,
+  ColorPickerChannelInput,
+  ColorPickerEyeDropper,
+  ColorPickerInput,
+  ColorPickerSlider,
+  ColorPickerSliderThumb,
+  ColorPickerSwatch,
+  ColorPickerSwatchItem,
+  ColorPickerSwatches,
+  createColorPickerController
+};

package/dist/color.d.ts

@@ -0,0 +1,2 @@
+export { colorDistance, contrastRatio, convertColor, formatColor, isInGamut, mixColor, parseColor, toGamut, } from "@ui-sdk/core/color";
+export type { Color, ColorFormat, ColorFormatOptions, ColorGamut, ColorHueInterpolation, ColorMixOptions, ColorSpace, } from "@ui-sdk/core/color";

package/dist/color.js

@@ -0,0 +1,21 @@
+// src/color.ts
+import {
+  colorDistance,
+  contrastRatio,
+  convertColor,
+  formatColor,
+  isInGamut,
+  mixColor,
+  parseColor,
+  toGamut
+} from "@ui-sdk/core/color";
+export {
+  colorDistance,
+  contrastRatio,
+  convertColor,
+  formatColor,
+  isInGamut,
+  mixColor,
+  parseColor,
+  toGamut
+};