@vuer-ai/vuer-uikit 0.0.97 → 0.0.98

package/dist/chunk-W4JCKCW7.mjs

@@ -0,0 +1,661 @@
+import { QuaternionInput } from './chunk-6J7ZVRSY.mjs';
+import { RadInput } from './chunk-GPV4XELL.mjs';
+import { TimeInput } from './chunk-7R2ZBAE6.mjs';
+import { Vec3Input } from './chunk-PIXIN3IG.mjs';
+import { CmInput } from './chunk-SQQXY4AY.mjs';
+import { DegInput } from './chunk-CZ2YNM7Y.mjs';
+import { EulerDegInput } from './chunk-OJUK6WJ5.mjs';
+import { EulerInput } from './chunk-5TXABUNC.mjs';
+import { InchInput } from './chunk-ZZLF2YWP.mjs';
+import { IntInput } from './chunk-NT5ZTF56.mjs';
+import { VectorInput } from './chunk-6CM4GYJU.mjs';
+import { Slider } from './chunk-Y6WGGVT2.mjs';
+import { Switch } from './chunk-AZBJB6KC.mjs';
+import { FormLayout } from './chunk-NRQJX772.mjs';
+import { Label } from './chunk-42UBHC2D.mjs';
+import { useDialSchema } from './chunk-3HEZVWRW.mjs';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-CX6OFX5Z.mjs';
+import { InputRoot, InputSlot } from './chunk-4XUJBMDE.mjs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var DialInputWrapper = ({ label, children }) => {
+  if (!label) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsxs(FormLayout, { orientation: "label-top", children: [
+    /* @__PURE__ */ jsx(Label, { size: "sm", children: label }),
+    children
+  ] });
+};
+var DialVec3Input = ({
+  name,
+  label,
+  size = "sm",
+  step,
+  labelPosition
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = getValue(name) ?? [0, 0, 0];
+  if (labelPosition === "inline") {
+    return /* @__PURE__ */ jsx(
+      Vec3Input,
+      {
+        value,
+        onValuesChange: (val) => setValue(name, val),
+        size,
+        step,
+        prefix: label ? [label, "", ""] : void 0
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsx(DialInputWrapper, { label, children: /* @__PURE__ */ jsx(
+      Vec3Input,
+      {
+        value,
+        onValuesChange: (val) => setValue(name, val),
+        size,
+        step
+      }
+    ) });
+  }
+};
+var DialEulerInput = ({
+  name,
+  label,
+  size = "sm",
+  step,
+  labelPosition
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = getValue(name) ?? [0, 0, 0];
+  if (labelPosition === "inline") {
+    return /* @__PURE__ */ jsx(
+      EulerInput,
+      {
+        value,
+        onValuesChange: (val) => setValue(name, val),
+        size,
+        step,
+        prefix: label ? [label, "", ""] : void 0
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsx(DialInputWrapper, { label, children: /* @__PURE__ */ jsx(
+      EulerInput,
+      {
+        value,
+        onValuesChange: (val) => setValue(name, val),
+        size,
+        step
+      }
+    ) });
+  }
+};
+var DialEulerDegInput = ({
+  name,
+  label,
+  size = "sm",
+  step,
+  labelPosition
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = getValue(name) ?? [0, 0, 0];
+  if (labelPosition === "inline") {
+    return /* @__PURE__ */ jsx(
+      EulerDegInput,
+      {
+        value,
+        onValuesChange: (val) => setValue(name, val),
+        size,
+        step,
+        prefix: label ? [label, "", ""] : void 0
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsx(DialInputWrapper, { label, children: /* @__PURE__ */ jsx(
+      EulerDegInput,
+      {
+        value,
+        onValuesChange: (val) => setValue(name, val),
+        size,
+        step
+      }
+    ) });
+  }
+};
+var DialQuaternionInput = ({
+  name,
+  label,
+  size = "sm",
+  step,
+  labelPosition
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = getValue(name) ?? [1, 0, 0, 0];
+  if (labelPosition === "inline") {
+    return /* @__PURE__ */ jsx(
+      QuaternionInput,
+      {
+        value,
+        onValuesChange: (val) => setValue(name, val),
+        size,
+        step,
+        prefix: label ? [label, "", "", ""] : void 0
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsx(DialInputWrapper, { label, children: /* @__PURE__ */ jsx(
+      QuaternionInput,
+      {
+        value,
+        onValuesChange: (val) => setValue(name, val),
+        size,
+        step
+      }
+    ) });
+  }
+};
+var DialVectorInput = ({
+  name,
+  label,
+  size = "sm",
+  step,
+  dimensions = 3,
+  labelPosition
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = getValue(name) ?? new Array(dimensions).fill(0);
+  if (labelPosition === "inline") {
+    return /* @__PURE__ */ jsx(
+      VectorInput,
+      {
+        value,
+        onValuesChange: (val) => setValue(name, val),
+        size,
+        step,
+        prefix: label ? [label, ...new Array(value.length - 1).fill("")] : void 0
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsx(DialInputWrapper, { label, children: /* @__PURE__ */ jsx(
+      VectorInput,
+      {
+        value,
+        onValuesChange: (val) => setValue(name, val),
+        size,
+        step
+      }
+    ) });
+  }
+};
+var DialIntInput = ({
+  name,
+  label,
+  size = "sm",
+  step = 1,
+  labelPosition
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = getValue(name) ?? 0;
+  if (labelPosition === "inline") {
+    return /* @__PURE__ */ jsx(
+      IntInput,
+      {
+        value,
+        prefix: label ? [label] : void 0,
+        onChange: (val) => setValue(name, val),
+        size,
+        step
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsx(DialInputWrapper, { label, children: /* @__PURE__ */ jsx(IntInput, { value, onChange: (val) => setValue(name, val), size, step }) });
+  }
+};
+var DialDegInput = ({
+  name,
+  label,
+  size = "sm",
+  step,
+  labelPosition
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = getValue(name) ?? 0;
+  if (labelPosition === "inline") {
+    return /* @__PURE__ */ jsx(
+      DegInput,
+      {
+        value,
+        onChange: (val) => setValue(name, val),
+        size,
+        step,
+        prefix: label ? [label] : void 0
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsx(DialInputWrapper, { label, children: /* @__PURE__ */ jsx(DegInput, { value, onChange: (val) => setValue(name, val), size, step }) });
+  }
+};
+var DialRadInput = ({
+  name,
+  label,
+  size = "sm",
+  step,
+  labelPosition
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = getValue(name) ?? 0;
+  if (labelPosition === "inline") {
+    return /* @__PURE__ */ jsx(
+      RadInput,
+      {
+        value,
+        onChange: (val) => setValue(name, val),
+        size,
+        step,
+        prefix: label ? [label] : void 0
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsx(DialInputWrapper, { label, children: /* @__PURE__ */ jsx(RadInput, { value, onChange: (val) => setValue(name, val), size, step }) });
+  }
+};
+var DialCmInput = ({
+  name,
+  label,
+  size = "sm",
+  step,
+  labelPosition
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = getValue(name) ?? 0;
+  if (labelPosition === "inline") {
+    return /* @__PURE__ */ jsx(
+      CmInput,
+      {
+        value,
+        onChange: (val) => setValue(name, val),
+        size,
+        step,
+        prefix: label ? [label] : void 0
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsx(DialInputWrapper, { label, children: /* @__PURE__ */ jsx(CmInput, { value, onChange: (val) => setValue(name, val), size, step }) });
+  }
+};
+var DialInchInput = ({
+  name,
+  label,
+  size = "sm",
+  step,
+  labelPosition
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = getValue(name) ?? 0;
+  if (labelPosition === "inline") {
+    return /* @__PURE__ */ jsx(
+      InchInput,
+      {
+        value,
+        onChange: (val) => setValue(name, val),
+        size,
+        step,
+        prefix: label ? [label] : void 0
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsx(DialInputWrapper, { label, children: /* @__PURE__ */ jsx(InchInput, { value, onChange: (val) => setValue(name, val), size, step }) });
+  }
+};
+var DialTimeInput = ({
+  name,
+  label,
+  size = "sm",
+  step,
+  labelPosition
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = getValue(name) ?? 0;
+  if (labelPosition === "inline") {
+    return /* @__PURE__ */ jsx(
+      TimeInput,
+      {
+        value,
+        onChange: (val) => setValue(name, val),
+        size,
+        step,
+        prefix: label ? [label] : void 0
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsx(DialInputWrapper, { label, children: /* @__PURE__ */ jsx(TimeInput, { value, onChange: (val) => setValue(name, val), size, step }) });
+  }
+};
+var DialVectorInput2 = ({
+  name,
+  label,
+  size = "sm"
+}) => {
+  const { getValue, setValue, schemas } = useDialSchema();
+  const schema = schemas.find((s) => s.name === name);
+  if (!schema) {
+    return null;
+  }
+  const value = getValue(name) || [];
+  const dimensions = schema.dimensions || schema.placeholders?.length || schema.dtypes?.length || (Array.isArray(value) ? value.length : 6);
+  const placeholders = schema.placeholders || [];
+  const dtypes = schema.dtypes || [];
+  const steps = schema.steps || [];
+  const tags = schema.tags || {};
+  let gridAutoFlow;
+  let gridColumns;
+  let gridRows;
+  if (typeof tags.col === "number") {
+    gridAutoFlow = "column";
+    gridRows = tags.col;
+    gridColumns = void 0;
+  } else if (typeof tags.row === "number") {
+    gridAutoFlow = "row";
+    gridColumns = tags.row;
+    gridRows = void 0;
+  } else {
+    gridAutoFlow = "row";
+    gridColumns = void 0;
+    gridRows = void 0;
+  }
+  console.log("the grid-flow is", gridAutoFlow, gridColumns, gridRows);
+  const vectorValue = Array.isArray(value) ? value.concat(Array(Math.max(0, dimensions - value.length)).fill(0)) : Array(dimensions).fill(0);
+  const inputSteps = Array.from({ length: dimensions }, (_, i) => {
+    if (steps[i] !== void 0) {
+      return steps[i];
+    }
+    const dtype = dtypes[i];
+    return dtype === "number-int" ? 1 : 1e-3;
+  });
+  const labels = placeholders.length > 0 ? placeholders.map((p) => /* @__PURE__ */ jsx("span", { className: "text-xs", children: p })) : void 0;
+  const handleValuesChange = (newValues) => {
+    setValue(name, newValues);
+  };
+  const inputComponent = /* @__PURE__ */ jsx(
+    VectorInput,
+    {
+      value: vectorValue,
+      onValuesChange: handleValuesChange,
+      size,
+      step: inputSteps,
+      labels,
+      gridAutoFlow,
+      columns: gridColumns,
+      rows: gridRows
+    }
+  );
+  if (!label) {
+    return inputComponent;
+  }
+  return /* @__PURE__ */ jsxs(FormLayout, { orientation: "label-top", children: [
+    /* @__PURE__ */ jsx(Label, { size: "sm", children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-2", children: [
+      schema.helpText && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "text-text-secondary cursor-help text-xs",
+          title: schema.helpText,
+          children: "\u24D8"
+        }
+      ),
+      inputComponent
+    ] })
+  ] });
+};
+var DialPanel = ({ schemas, groups: groupConfigs }) => {
+  const groupConfigMap = {};
+  if (groupConfigs) {
+    groupConfigs.forEach((config) => {
+      groupConfigMap[config.name] = config;
+    });
+  }
+  schemas.forEach((schema) => {
+    const grouping = schema.tags?.grouping;
+    if (grouping && !groupConfigMap[grouping]) {
+      groupConfigMap[grouping] = { name: grouping };
+    }
+    if (grouping && schema.tags?.noWrap && groupConfigMap[grouping]) {
+      groupConfigMap[grouping].noWrap = true;
+    }
+  });
+  const groupedSchemas = {};
+  const ungrouped = [];
+  schemas.forEach((schema) => {
+    const grouping = schema.tags?.grouping;
+    if (grouping) {
+      if (!groupedSchemas[grouping]) {
+        groupedSchemas[grouping] = [];
+      }
+      groupedSchemas[grouping].push(schema);
+    } else {
+      ungrouped.push(schema);
+    }
+  });
+  const renderSchemaInput = (schema) => {
+    const { name, dtype, min, max, step, options, tags } = schema;
+    const labelPosition = tags?.labelPosition;
+    const label = name.charAt(0).toUpperCase() + name.slice(1);
+    switch (dtype) {
+      case "vector3":
+        return /* @__PURE__ */ jsx(
+          DialVec3Input,
+          {
+            name,
+            label,
+            step,
+            labelPosition
+          },
+          name
+        );
+      case "euler":
+        return /* @__PURE__ */ jsx(
+          DialEulerDegInput,
+          {
+            name,
+            label,
+            step,
+            labelPosition
+          },
+          name
+        );
+      case "vector":
+      case "vector-6":
+      case "number-group":
+        return /* @__PURE__ */ jsx(DialVectorInput2, { name, label }, name);
+      case "boolean":
+        return /* @__PURE__ */ jsx(DialBooleanInput, { name, label, labelPosition }, name);
+      case "number-int":
+        return /* @__PURE__ */ jsx(
+          DialIntInput,
+          {
+            name,
+            label,
+            step: step || 1,
+            labelPosition
+          },
+          name
+        );
+      case "number":
+        if (min !== void 0 && max !== void 0 && !options) {
+          return /* @__PURE__ */ jsx(
+            DialSliderInput,
+            {
+              name,
+              label,
+              min,
+              max,
+              step,
+              labelPosition
+            },
+            name
+          );
+        }
+        if (options && options.length > 0) {
+          return /* @__PURE__ */ jsx(
+            DialSelectInput,
+            {
+              name,
+              label,
+              options,
+              labelPosition
+            },
+            name
+          );
+        }
+        return /* @__PURE__ */ jsx(
+          DialNumberInput,
+          {
+            name,
+            label,
+            min,
+            max,
+            step,
+            labelPosition
+          },
+          name
+        );
+      case "string":
+        if (options && options.length > 0) {
+          return /* @__PURE__ */ jsx(
+            DialSelectInput,
+            {
+              name,
+              label,
+              options,
+              labelPosition
+            },
+            name
+          );
+        }
+        return null;
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "dial-schema-renderer space-y-4", children: [
+    Object.entries(groupedSchemas).map(([name, schemaList]) => {
+      const groupConfig = groupConfigMap[name];
+      const hasNoWrap = groupConfig?.noWrap;
+      const wrapClass = hasNoWrap ? "" : "flex-wrap";
+      return /* @__PURE__ */ jsxs("div", { className: "dial-group", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-text-primary mb-2 font-medium", children: name }),
+        /* @__PURE__ */ jsx("div", { className: `dial-row flex flex-row ${wrapClass} gap-4`, children: schemaList.map(renderSchemaInput) })
+      ] }, name);
+    }),
+    ungrouped.length > 0 && /* @__PURE__ */ jsx("div", { className: "dial-group", children: /* @__PURE__ */ jsx("div", { className: "dial-row flex flex-row flex-wrap gap-4", children: ungrouped.map(renderSchemaInput) }) })
+  ] });
+};
+var DialInputWrapper2 = ({ label, children }) => {
+  if (!label) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsxs(FormLayout, { orientation: "label-top", children: [
+    /* @__PURE__ */ jsx(Label, { size: "sm", children: label }),
+    children
+  ] });
+};
+var DialNumberInput = ({
+  name,
+  min,
+  max,
+  step = 1,
+  label,
+  labelPosition,
+  size = "sm"
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = getValue(name) ?? 0;
+  const inputProps = {
+    type: "number",
+    value,
+    min,
+    max,
+    step,
+    onChange: (e) => setValue(name, parseFloat(e.target.value)),
+    size
+  };
+  if (labelPosition === "inline") {
+    return /* @__PURE__ */ jsx(InputRoot, { ...inputProps, children: label ? /* @__PURE__ */ jsx(InputSlot, { side: "left", children: label }) : null });
+  } else {
+    return /* @__PURE__ */ jsx(DialInputWrapper2, { label, children: /* @__PURE__ */ jsx(InputRoot, { ...inputProps }) });
+  }
+};
+var DialBooleanInput = ({ name, label, labelPosition }) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = getValue(name) ?? false;
+  const switchProps = {
+    checked: value,
+    onCheckedChange: (checked) => setValue(name, checked)
+  };
+  if (!label) {
+    return /* @__PURE__ */ jsx(Switch, { ...switchProps });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-2", children: [
+    /* @__PURE__ */ jsx(Label, { size: "sm", children: label }),
+    /* @__PURE__ */ jsx(Switch, { ...switchProps })
+  ] });
+};
+var DialSelectInput = ({
+  name,
+  options = [],
+  label,
+  labelPosition,
+  size = "sm"
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = getValue(name);
+  const selectComponent = /* @__PURE__ */ jsxs(
+    Select,
+    {
+      value: String(value),
+      onValueChange: (val) => {
+        const parsed = !isNaN(Number(val)) ? Number(val) : val;
+        setValue(name, parsed);
+      },
+      children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { size, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select an option" }) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: options.map((opt, i) => /* @__PURE__ */ jsx(SelectItem, { value: String(opt), children: String(opt) }, i)) })
+      ]
+    }
+  );
+  if (!label) {
+    return selectComponent;
+  }
+  return /* @__PURE__ */ jsx(DialInputWrapper2, { label, children: selectComponent });
+};
+var DialSliderInput = ({
+  name,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  labelPosition,
+  size = "sm"
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = getValue(name) ?? min;
+  const sliderProps = {
+    value: [value],
+    onValueChange: ([val]) => setValue(name, val),
+    min,
+    max,
+    step,
+    className: "flex-1"
+  };
+  const sliderComponent = /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-2", children: [
+    /* @__PURE__ */ jsx(Slider, { ...sliderProps }),
+    /* @__PURE__ */ jsx("span", { className: "text-text-secondary w-12 text-right text-sm", children: value })
+  ] });
+  if (!label) {
+    return sliderComponent;
+  }
+  return /* @__PURE__ */ jsx(DialInputWrapper2, { label, children: sliderComponent });
+};
+
+export { DialBooleanInput, DialCmInput, DialDegInput, DialEulerDegInput, DialEulerInput, DialInchInput, DialIntInput, DialNumberInput, DialPanel, DialQuaternionInput, DialRadInput, DialSelectInput, DialSliderInput, DialTimeInput, DialVec3Input, DialVectorInput, DialVectorInput2 };