@mekari/pixel3-input 0.0.0

package/dist/index.js

@@ -0,0 +1,483 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  MpInput: () => MpInput,
+  MpInputGroup: () => MpInputGroup,
+  MpInputLeftAddon: () => MpInputLeftAddon,
+  MpInputRightAddon: () => MpInputRightAddon
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/input.tsx
+var import_vue3 = require("vue");
+var import_vue4 = require("vue");
+
+// src/modules/input.props.ts
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var inputProps = {
+  as: {
+    type: String,
+    default: "input"
+  },
+  modelValue: {
+    type: [String, Number]
+  },
+  id: {
+    type: String
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  variant: {
+    type: String,
+    default: "outline"
+  },
+  placeholder: {
+    type: String
+  },
+  isReadOnly: {
+    type: Boolean,
+    default: false
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false
+  },
+  isRequired: {
+    type: Boolean,
+    default: false
+  },
+  isInvalid: {
+    type: Boolean,
+    default: false
+  },
+  isFullWidth: {
+    type: Boolean,
+    default: true
+  },
+  isClearable: {
+    type: Boolean,
+    default: false
+  }
+};
+var inputGroupProps = {
+  id: {
+    type: String
+  },
+  size: {
+    type: String,
+    default: "md"
+  }
+};
+var inputAddonProps = {
+  id: {
+    type: String
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  placement: {
+    type: String,
+    default: "left"
+  },
+  hasBackground: {
+    type: Boolean,
+    default: false
+  }
+};
+var inputEmits = (0, import_pixel3_utils.declareEmit)(["change", "input", "clear", "update:modelValue"]);
+
+// src/modules/input.hooks.ts
+var import_vue = require("vue");
+var import_vue2 = require("@xstate/vue");
+var import_pixel3_utils2 = require("@mekari/pixel3-utils");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+
+// src/modules/input.machines.ts
+var import_xstate = require("xstate");
+function inputMachine(context) {
+  return (0, import_xstate.createMachine)({
+    /** @xstate-layout N4IgpgJg5mDOIC5QEsB2AHArgFwMQGUBRAFQH0A1AQQBkBVQgbQAYBdRUdAe1mW2U9TsQAD0QBGAEwA6JrLnz5AdgA0IAJ7iJAXy2q0WPMQCaABUIUa9ZmyQguPPgKGiEEiYqkBWT00UAOADZPRQBmPwAWAE4Av1UNBDExEKlwzxCxTzFw8IDIiT9FAJ1dEFROCDghfRwhe15+QVsXEICpQrFFCXDfMKjcuPEklLSMrJy8gqLioA */
+    id: "input",
+    context: {
+      modelValue: "",
+      ...context
+    },
+    on: {
+      SET_VALUE: {
+        actions: "setValue"
+      }
+    },
+    predictableActionArguments: true
+  }, {
+    actions: {
+      setValue(ctx, evt) {
+        set.value(ctx, evt.value);
+      }
+    }
+  });
+}
+__name(inputMachine, "inputMachine");
+var set = {
+  value(ctx, value) {
+    ctx.modelValue = value;
+  }
+};
+function inputGroupMachine(context) {
+  return (0, import_xstate.createMachine)({
+    /** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgEMA3AgFwICcBaKCrAVwAd8RGtYBLUjrDFgD0QBGAEzoAnsJHIZyIA */
+    id: "input-group",
+    context,
+    predictableActionArguments: true
+  });
+}
+__name(inputGroupMachine, "inputGroupMachine");
+function inputAddonMachine(context) {
+  return (0, import_xstate.createMachine)({
+    /** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgEsMAHAVwBcBaAQwgiw3xGK1gPIIaYA9EBGAEzoAnvwHIJyIA */
+    id: "input-addon",
+    context,
+    predictableActionArguments: true
+  });
+}
+__name(inputAddonMachine, "inputAddonMachine");
+
+// src/modules/input.connects.ts
+var import_css = require("@mekari/pixel3-styled-system/css");
+function inputConnect(state, send, classes) {
+  const {
+    id,
+    modelValue,
+    placeholder,
+    isReadOnly,
+    isDisabled,
+    isRequired,
+    isInvalid,
+    isFullWidth,
+    isClearable,
+    onInput,
+    onChange,
+    onClear
+  } = state.context;
+  return {
+    modelValue,
+    isReadOnly,
+    isDisabled,
+    isClearable,
+    rootProps: {
+      id,
+      class: (0, import_css.cx)(classes.root, "group"),
+      "data-is-full-width": isFullWidth,
+      "data-pixel-component": "MpInput"
+    },
+    controlProps: {
+      id: `${id}-control`,
+      value: modelValue,
+      placeholder,
+      readonly: isReadOnly,
+      disabled: isDisabled,
+      required: isRequired,
+      "data-value": modelValue,
+      "data-is-full-width": isFullWidth,
+      "aria-readonly": isReadOnly,
+      "aria-disabled": isDisabled,
+      "aria-invalid": isInvalid,
+      "aria-required": isRequired,
+      onInput(evt) {
+        var _a;
+        send({
+          type: "SET_VALUE",
+          value: (_a = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a.value
+        });
+        if (onInput)
+          onInput(evt);
+      },
+      onChange(evt) {
+        var _a;
+        send({
+          type: "SET_VALUE",
+          value: (_a = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a.value
+        });
+        if (onChange)
+          onChange(evt);
+      },
+      class: classes.control,
+      "data-pixel-component": "MpInputControl"
+    },
+    clearProps: {
+      id: `${id}-clear`,
+      variant: "ghost",
+      size: "sm",
+      leftIcon: "reset",
+      onClick(evt) {
+        send({
+          type: "SET_VALUE",
+          value: null
+        });
+        if (onInput)
+          onInput(evt);
+        if (onClear)
+          onClear(evt);
+      },
+      class: classes.clear,
+      style: {
+        "--mp-input--visibility": modelValue ? "visible" : "hidden",
+        "--mp-input--opacity": modelValue ? "1" : "0"
+      },
+      "data-pixel-component": "MpInputClear"
+    }
+  };
+}
+__name(inputConnect, "inputConnect");
+function inputGroupConnect(state, send, classes) {
+  const {
+    id
+  } = state.context;
+  return {
+    rootProps: {
+      id,
+      class: classes.root,
+      "data-pixel-component": "MpInputGroup"
+    }
+  };
+}
+__name(inputGroupConnect, "inputGroupConnect");
+function inputAddonConnect(state, send, classes) {
+  const {
+    id,
+    placement,
+    hasBackground
+  } = state.context;
+  return {
+    rootProps: {
+      id,
+      class: classes.root,
+      "data-placement": placement,
+      "data-has-background": hasBackground,
+      "data-pixel-component": "MpInputAddon"
+    }
+  };
+}
+__name(inputAddonConnect, "inputAddonConnect");
+
+// src/modules/input.hooks.ts
+var useInput = /* @__PURE__ */ __name((props, emit) => {
+  var _a;
+  const context = (0, import_vue.ref)(props);
+  const {
+    state,
+    send
+  } = (0, import_vue2.useMachine)(inputMachine({
+    ...context.value,
+    id: (_a = context.value.id) != null ? _a : `mp-input-${(0, import_pixel3_utils2.useId)()}`,
+    onInput(evt) {
+      var _a2, _b;
+      emit("update:modelValue", (_a2 = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a2.value);
+      emit("input", evt, (_b = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _b.value);
+    },
+    onChange(evt) {
+      var _a2;
+      emit("change", evt, (_a2 = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a2.value);
+    },
+    onClear(evt) {
+      emit("clear", evt);
+    }
+  }));
+  const [inputProps2] = import_recipes.inputSlotRecipe.splitVariantProps(context.value);
+  const classes = (0, import_recipes.inputSlotRecipe)(inputProps2);
+  return (0, import_vue.computed)(() => inputConnect(state.value, send, classes));
+}, "useInput");
+var useInputGroup = /* @__PURE__ */ __name((props) => {
+  var _a;
+  const context = (0, import_vue.ref)(props);
+  const {
+    state,
+    send
+  } = (0, import_vue2.useMachine)(inputGroupMachine({
+    ...context.value,
+    id: (_a = context.value.id) != null ? _a : `mp-input-group-${(0, import_pixel3_utils2.useId)()}`
+  }));
+  const [inputGroupProps2] = import_recipes.inputGroupSlotRecipe.splitVariantProps(context.value);
+  const classes = (0, import_recipes.inputGroupSlotRecipe)(inputGroupProps2);
+  return (0, import_vue.computed)(() => inputGroupConnect(state.value, send, classes));
+}, "useInputGroup");
+var useInputAddon = /* @__PURE__ */ __name((props) => {
+  var _a;
+  const context = (0, import_vue.ref)(props);
+  const {
+    state,
+    send
+  } = (0, import_vue2.useMachine)(inputAddonMachine({
+    ...context.value,
+    id: (_a = context.value.id) != null ? _a : `mp-input-addon-${(0, import_pixel3_utils2.useId)()}`
+  }));
+  const [inputAddonProps2] = import_recipes.inputAddonSlotRecipe.splitVariantProps(context.value);
+  const classes = (0, import_recipes.inputAddonSlotRecipe)(inputAddonProps2);
+  return (0, import_vue.computed)(() => inputAddonConnect(state.value, send, classes));
+}, "useInputAddon");
+
+// src/input.tsx
+var import_pixel3_button = require("@mekari/pixel3-button");
+var MpInput = (0, import_vue4.defineComponent)({
+  name: "MpInput",
+  props: inputProps,
+  emits: inputEmits,
+  setup(props, {
+    emit
+  }) {
+    const {
+      as: Component
+    } = props;
+    const api = useInput(props, emit);
+    const calcSpacing = (0, import_vue4.ref)({
+      left: 12,
+      right: 12
+    });
+    const calcPosition = (0, import_vue4.ref)({
+      right: 12
+    });
+    (0, import_vue4.onMounted)(() => {
+      var _a, _b, _c;
+      const node = (_c = (_b = (_a = (0, import_vue4.getCurrentInstance)()) == null ? void 0 : _a.parent) == null ? void 0 : _b.subTree) == null ? void 0 : _c.children[0].children;
+      let isClearable = false;
+      node == null ? void 0 : node.map((vnode) => {
+        var _a2, _b2, _c2, _d, _e, _f;
+        if (((_a2 = vnode.type) == null ? void 0 : _a2.name) === "MpInput") {
+          if ((_b2 = vnode.props) == null ? void 0 : _b2.hasOwnProperty("isClearable")) {
+            calcSpacing.value.right += 30;
+            isClearable = true;
+          }
+        }
+        if (((_c2 = vnode.type) == null ? void 0 : _c2.name) === "MpInputLeftAddon") {
+          calcSpacing.value.left += 30;
+          if ((_d = vnode.props) == null ? void 0 : _d.hasOwnProperty("hasBackground"))
+            calcSpacing.value.left += parseInt(getComputedStyle(vnode.el).width, 10) - 30;
+        }
+        if (((_e = vnode.type) == null ? void 0 : _e.name) === "MpInputRightAddon") {
+          calcSpacing.value.right += 30;
+          if ((_f = vnode.props) == null ? void 0 : _f.hasOwnProperty("hasBackground")) {
+            calcSpacing.value.right += parseInt(getComputedStyle(vnode.el).width, 10) - 30;
+            if (isClearable)
+              calcPosition.value.right += parseInt(getComputedStyle(vnode.el).width, 10);
+          } else {
+            if (isClearable)
+              calcPosition.value.right += 30;
+          }
+        }
+      });
+    });
+    return () => {
+      var _a, _b;
+      return (0, import_vue3.createVNode)("div", api.value.rootProps, [(0, import_vue3.createVNode)(Component, (0, import_vue3.mergeProps)(api.value.controlProps, {
+        "style": {
+          "--mp-input--padding-left": `${calcSpacing.value.left}px`,
+          "--mp-input--padding-right": `${calcSpacing.value.right}px`,
+          ...(_a = api.value.controlProps) == null ? void 0 : _a.style
+        }
+      }), null), !api.value.isReadOnly && !api.value.isDisabled && api.value.isClearable && (0, import_vue3.createVNode)(import_pixel3_button.MpButton, (0, import_vue3.mergeProps)(api.value.clearProps, {
+        "style": {
+          "--mp-input--right": `${calcPosition.value.right}px`,
+          ...(_b = api.value.clearProps) == null ? void 0 : _b.style
+        }
+      }), null)]);
+    };
+  }
+});
+
+// src/input-group.tsx
+var import_vue5 = require("vue");
+var import_vue6 = require("vue");
+var import_pixel3_utils3 = require("@mekari/pixel3-utils");
+var MpInputGroup = (0, import_vue6.defineComponent)({
+  name: "MpInputGroup",
+  props: inputGroupProps,
+  setup(props, {
+    slots
+  }) {
+    const api = useInputGroup(props);
+    const children = (0, import_vue6.computed)(() => (0, import_pixel3_utils3.getChildren)(slots));
+    const cloneChildren = (0, import_vue6.computed)(() => (0, import_vue6.computed)(() => children.value).value.map((vnode) => {
+      const overrideProps = (0, import_pixel3_utils3.objectFilterUndefined)({
+        size: props.size
+      });
+      return (0, import_vue6.cloneVNode)(vnode, overrideProps);
+    }));
+    return () => (0, import_vue5.createVNode)("div", api.value.rootProps, [cloneChildren.value]);
+  }
+});
+
+// src/input-addon.tsx
+var import_vue7 = require("vue");
+var import_vue8 = require("vue");
+var MpInputAddon = (0, import_vue8.defineComponent)({
+  name: "MpInputAddon",
+  props: inputAddonProps,
+  setup(props, {
+    slots
+  }) {
+    const api = useInputAddon(props);
+    return () => {
+      var _a;
+      return (0, import_vue7.createVNode)("div", api.value.rootProps, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+var MpInputLeftAddon = (0, import_vue8.defineComponent)({
+  name: "MpInputLeftAddon",
+  setup(_, {
+    slots
+  }) {
+    return () => (0, import_vue7.createVNode)(MpInputAddon, {
+      "placement": "left"
+    }, {
+      default: () => {
+        var _a;
+        return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
+      }
+    });
+  }
+});
+var MpInputRightAddon = (0, import_vue8.defineComponent)({
+  name: "MpInputRightAddon",
+  setup(_, {
+    slots
+  }) {
+    return () => (0, import_vue7.createVNode)(MpInputAddon, {
+      "placement": "right"
+    }, {
+      default: () => {
+        var _a;
+        return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
+      }
+    });
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpInput,
+  MpInputGroup,
+  MpInputLeftAddon,
+  MpInputRightAddon
+});

package/dist/index.mjs

@@ -0,0 +1,21 @@
+import {
+  MpInputLeftAddon,
+  MpInputRightAddon
+} from "./chunk-JW2SLWRV.mjs";
+import {
+  MpInputGroup
+} from "./chunk-62L6URRB.mjs";
+import {
+  MpInput
+} from "./chunk-AH5Q4AP2.mjs";
+import "./chunk-ME6YL7P6.mjs";
+import "./chunk-T766ACNL.mjs";
+import "./chunk-EF6JEV72.mjs";
+import "./chunk-ZQ2NFCFA.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpInput,
+  MpInputGroup,
+  MpInputLeftAddon,
+  MpInputRightAddon
+};

package/dist/input-addon.d.mts

@@ -0,0 +1,48 @@
+import { InputSize, InputAddonPlacement } from './modules/input.types.mjs';
+import * as vue from 'vue';
+import '@mekari/pixel3-utils';
+
+/**
+ * MpInputAddon used to append or prepend element.
+ */
+declare const MpInputAddon: vue.DefineComponent<{
+    id: {
+        type: vue.PropType<string | undefined>;
+    };
+    size: {
+        type: vue.PropType<InputSize | undefined>;
+        default: string;
+    };
+    placement: {
+        type: vue.PropType<InputAddonPlacement | undefined>;
+        default: string;
+    };
+    hasBackground: {
+        type: vue.PropType<boolean | undefined>;
+        default: boolean;
+    };
+}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    id: {
+        type: vue.PropType<string | undefined>;
+    };
+    size: {
+        type: vue.PropType<InputSize | undefined>;
+        default: string;
+    };
+    placement: {
+        type: vue.PropType<InputAddonPlacement | undefined>;
+        default: string;
+    };
+    hasBackground: {
+        type: vue.PropType<boolean | undefined>;
+        default: boolean;
+    };
+}>>, {
+    size: InputSize | undefined;
+    placement: InputAddonPlacement | undefined;
+    hasBackground: boolean | undefined;
+}, {}>;
+declare const MpInputLeftAddon: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+declare const MpInputRightAddon: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+
+export { MpInputAddon, MpInputLeftAddon, MpInputRightAddon };

package/dist/input-addon.d.ts

@@ -0,0 +1,48 @@
+import { InputSize, InputAddonPlacement } from './modules/input.types.js';
+import * as vue from 'vue';
+import '@mekari/pixel3-utils';
+
+/**
+ * MpInputAddon used to append or prepend element.
+ */
+declare const MpInputAddon: vue.DefineComponent<{
+    id: {
+        type: vue.PropType<string | undefined>;
+    };
+    size: {
+        type: vue.PropType<InputSize | undefined>;
+        default: string;
+    };
+    placement: {
+        type: vue.PropType<InputAddonPlacement | undefined>;
+        default: string;
+    };
+    hasBackground: {
+        type: vue.PropType<boolean | undefined>;
+        default: boolean;
+    };
+}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    id: {
+        type: vue.PropType<string | undefined>;
+    };
+    size: {
+        type: vue.PropType<InputSize | undefined>;
+        default: string;
+    };
+    placement: {
+        type: vue.PropType<InputAddonPlacement | undefined>;
+        default: string;
+    };
+    hasBackground: {
+        type: vue.PropType<boolean | undefined>;
+        default: boolean;
+    };
+}>>, {
+    size: InputSize | undefined;
+    placement: InputAddonPlacement | undefined;
+    hasBackground: boolean | undefined;
+}, {}>;
+declare const MpInputLeftAddon: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+declare const MpInputRightAddon: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+
+export { MpInputAddon, MpInputLeftAddon, MpInputRightAddon };