@mekari/pixel3-input 0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/dist/chunk-62L6URRB.mjs +32 -0
  2. package/dist/chunk-AH5Q4AP2.mjs +81 -0
  3. package/dist/chunk-EF6JEV72.mjs +58 -0
  4. package/dist/chunk-JW2SLWRV.mjs +59 -0
  5. package/dist/chunk-ME6YL7P6.mjs +79 -0
  6. package/dist/chunk-QZ7VFGWC.mjs +6 -0
  7. package/dist/chunk-T766ACNL.mjs +127 -0
  8. package/dist/chunk-ZQ2NFCFA.mjs +83 -0
  9. package/dist/index.d.mts +6 -0
  10. package/dist/index.d.ts +6 -0
  11. package/dist/index.js +483 -0
  12. package/dist/index.mjs +21 -0
  13. package/dist/input-addon.d.mts +48 -0
  14. package/dist/input-addon.d.ts +48 -0
  15. package/dist/input-addon.js +156 -0
  16. package/dist/input-addon.mjs +15 -0
  17. package/dist/input-group.d.mts +28 -0
  18. package/dist/input-group.d.ts +28 -0
  19. package/dist/input-group.js +115 -0
  20. package/dist/input-group.mjs +11 -0
  21. package/dist/input.d.mts +10 -0
  22. package/dist/input.d.ts +10 -0
  23. package/dist/input.js +304 -0
  24. package/dist/input.mjs +11 -0
  25. package/dist/metafile-cjs.json +1 -0
  26. package/dist/metafile-esm.json +1 -0
  27. package/dist/modules/input.connects.d.mts +12 -0
  28. package/dist/modules/input.connects.d.ts +12 -0
  29. package/dist/modules/input.connects.js +150 -0
  30. package/dist/modules/input.connects.mjs +11 -0
  31. package/dist/modules/input.hooks.d.mts +9 -0
  32. package/dist/modules/input.hooks.d.ts +9 -0
  33. package/dist/modules/input.hooks.js +261 -0
  34. package/dist/modules/input.hooks.mjs +13 -0
  35. package/dist/modules/input.machines.d.mts +48 -0
  36. package/dist/modules/input.machines.d.ts +48 -0
  37. package/dist/modules/input.machines.js +81 -0
  38. package/dist/modules/input.machines.mjs +11 -0
  39. package/dist/modules/input.props.d.mts +80 -0
  40. package/dist/modules/input.props.d.ts +80 -0
  41. package/dist/modules/input.props.js +110 -0
  42. package/dist/modules/input.props.mjs +13 -0
  43. package/dist/modules/input.types.d.mts +77 -0
  44. package/dist/modules/input.types.d.ts +77 -0
  45. package/dist/modules/input.types.js +18 -0
  46. package/dist/modules/input.types.mjs +0 -0
  47. package/package.json +50 -0
@@ -0,0 +1,156 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
+
21
+ // src/input-addon.tsx
22
+ var input_addon_exports = {};
23
+ __export(input_addon_exports, {
24
+ MpInputAddon: () => MpInputAddon,
25
+ MpInputLeftAddon: () => MpInputLeftAddon,
26
+ MpInputRightAddon: () => MpInputRightAddon
27
+ });
28
+ module.exports = __toCommonJS(input_addon_exports);
29
+ var import_vue3 = require("vue");
30
+ var import_vue4 = require("vue");
31
+
32
+ // src/modules/input.props.ts
33
+ var import_pixel3_utils = require("@mekari/pixel3-utils");
34
+ var inputAddonProps = {
35
+ id: {
36
+ type: String
37
+ },
38
+ size: {
39
+ type: String,
40
+ default: "md"
41
+ },
42
+ placement: {
43
+ type: String,
44
+ default: "left"
45
+ },
46
+ hasBackground: {
47
+ type: Boolean,
48
+ default: false
49
+ }
50
+ };
51
+ var inputEmits = (0, import_pixel3_utils.declareEmit)(["change", "input", "clear", "update:modelValue"]);
52
+
53
+ // src/modules/input.hooks.ts
54
+ var import_vue = require("vue");
55
+ var import_vue2 = require("@xstate/vue");
56
+ var import_pixel3_utils2 = require("@mekari/pixel3-utils");
57
+ var import_recipes = require("@mekari/pixel3-styled-system/recipes");
58
+
59
+ // src/modules/input.machines.ts
60
+ var import_xstate = require("xstate");
61
+ function inputAddonMachine(context) {
62
+ return (0, import_xstate.createMachine)({
63
+ /** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgEsMAHAVwBcBaAQwgiw3xGK1gPIIaYA9EBGAEzoAnvwHIJyIA */
64
+ id: "input-addon",
65
+ context,
66
+ predictableActionArguments: true
67
+ });
68
+ }
69
+ __name(inputAddonMachine, "inputAddonMachine");
70
+
71
+ // src/modules/input.connects.ts
72
+ var import_css = require("@mekari/pixel3-styled-system/css");
73
+ function inputAddonConnect(state, send, classes) {
74
+ const {
75
+ id,
76
+ placement,
77
+ hasBackground
78
+ } = state.context;
79
+ return {
80
+ rootProps: {
81
+ id,
82
+ class: classes.root,
83
+ "data-placement": placement,
84
+ "data-has-background": hasBackground,
85
+ "data-pixel-component": "MpInputAddon"
86
+ }
87
+ };
88
+ }
89
+ __name(inputAddonConnect, "inputAddonConnect");
90
+
91
+ // src/modules/input.hooks.ts
92
+ var useInputAddon = /* @__PURE__ */ __name((props) => {
93
+ var _a;
94
+ const context = (0, import_vue.ref)(props);
95
+ const {
96
+ state,
97
+ send
98
+ } = (0, import_vue2.useMachine)(inputAddonMachine({
99
+ ...context.value,
100
+ id: (_a = context.value.id) != null ? _a : `mp-input-addon-${(0, import_pixel3_utils2.useId)()}`
101
+ }));
102
+ const [inputAddonProps2] = import_recipes.inputAddonSlotRecipe.splitVariantProps(context.value);
103
+ const classes = (0, import_recipes.inputAddonSlotRecipe)(inputAddonProps2);
104
+ return (0, import_vue.computed)(() => inputAddonConnect(state.value, send, classes));
105
+ }, "useInputAddon");
106
+
107
+ // src/input-addon.tsx
108
+ var MpInputAddon = (0, import_vue4.defineComponent)({
109
+ name: "MpInputAddon",
110
+ props: inputAddonProps,
111
+ setup(props, {
112
+ slots
113
+ }) {
114
+ const api = useInputAddon(props);
115
+ return () => {
116
+ var _a;
117
+ return (0, import_vue3.createVNode)("div", api.value.rootProps, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
118
+ };
119
+ }
120
+ });
121
+ var MpInputLeftAddon = (0, import_vue4.defineComponent)({
122
+ name: "MpInputLeftAddon",
123
+ setup(_, {
124
+ slots
125
+ }) {
126
+ return () => (0, import_vue3.createVNode)(MpInputAddon, {
127
+ "placement": "left"
128
+ }, {
129
+ default: () => {
130
+ var _a;
131
+ return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
132
+ }
133
+ });
134
+ }
135
+ });
136
+ var MpInputRightAddon = (0, import_vue4.defineComponent)({
137
+ name: "MpInputRightAddon",
138
+ setup(_, {
139
+ slots
140
+ }) {
141
+ return () => (0, import_vue3.createVNode)(MpInputAddon, {
142
+ "placement": "right"
143
+ }, {
144
+ default: () => {
145
+ var _a;
146
+ return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
147
+ }
148
+ });
149
+ }
150
+ });
151
+ // Annotate the CommonJS export names for ESM import in node:
152
+ 0 && (module.exports = {
153
+ MpInputAddon,
154
+ MpInputLeftAddon,
155
+ MpInputRightAddon
156
+ });
@@ -0,0 +1,15 @@
1
+ import {
2
+ MpInputAddon,
3
+ MpInputLeftAddon,
4
+ MpInputRightAddon
5
+ } from "./chunk-JW2SLWRV.mjs";
6
+ import "./chunk-ME6YL7P6.mjs";
7
+ import "./chunk-T766ACNL.mjs";
8
+ import "./chunk-EF6JEV72.mjs";
9
+ import "./chunk-ZQ2NFCFA.mjs";
10
+ import "./chunk-QZ7VFGWC.mjs";
11
+ export {
12
+ MpInputAddon,
13
+ MpInputLeftAddon,
14
+ MpInputRightAddon
15
+ };
@@ -0,0 +1,28 @@
1
+ import { InputSize } from './modules/input.types.mjs';
2
+ import * as vue from 'vue';
3
+ import '@mekari/pixel3-utils';
4
+
5
+ /**
6
+ * MpInputGroup used to combines input with input addon.
7
+ */
8
+ declare const MpInputGroup: vue.DefineComponent<{
9
+ id: {
10
+ type: vue.PropType<string | undefined>;
11
+ };
12
+ size: {
13
+ type: vue.PropType<InputSize | undefined>;
14
+ default: string;
15
+ };
16
+ }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
17
+ id: {
18
+ type: vue.PropType<string | undefined>;
19
+ };
20
+ size: {
21
+ type: vue.PropType<InputSize | undefined>;
22
+ default: string;
23
+ };
24
+ }>>, {
25
+ size: InputSize | undefined;
26
+ }, {}>;
27
+
28
+ export { MpInputGroup };
@@ -0,0 +1,28 @@
1
+ import { InputSize } from './modules/input.types.js';
2
+ import * as vue from 'vue';
3
+ import '@mekari/pixel3-utils';
4
+
5
+ /**
6
+ * MpInputGroup used to combines input with input addon.
7
+ */
8
+ declare const MpInputGroup: vue.DefineComponent<{
9
+ id: {
10
+ type: vue.PropType<string | undefined>;
11
+ };
12
+ size: {
13
+ type: vue.PropType<InputSize | undefined>;
14
+ default: string;
15
+ };
16
+ }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
17
+ id: {
18
+ type: vue.PropType<string | undefined>;
19
+ };
20
+ size: {
21
+ type: vue.PropType<InputSize | undefined>;
22
+ default: string;
23
+ };
24
+ }>>, {
25
+ size: InputSize | undefined;
26
+ }, {}>;
27
+
28
+ export { MpInputGroup };
@@ -0,0 +1,115 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
+
21
+ // src/input-group.tsx
22
+ var input_group_exports = {};
23
+ __export(input_group_exports, {
24
+ MpInputGroup: () => MpInputGroup
25
+ });
26
+ module.exports = __toCommonJS(input_group_exports);
27
+ var import_vue3 = require("vue");
28
+ var import_vue4 = require("vue");
29
+ var import_pixel3_utils3 = require("@mekari/pixel3-utils");
30
+
31
+ // src/modules/input.props.ts
32
+ var import_pixel3_utils = require("@mekari/pixel3-utils");
33
+ var inputGroupProps = {
34
+ id: {
35
+ type: String
36
+ },
37
+ size: {
38
+ type: String,
39
+ default: "md"
40
+ }
41
+ };
42
+ var inputEmits = (0, import_pixel3_utils.declareEmit)(["change", "input", "clear", "update:modelValue"]);
43
+
44
+ // src/modules/input.hooks.ts
45
+ var import_vue = require("vue");
46
+ var import_vue2 = require("@xstate/vue");
47
+ var import_pixel3_utils2 = require("@mekari/pixel3-utils");
48
+ var import_recipes = require("@mekari/pixel3-styled-system/recipes");
49
+
50
+ // src/modules/input.machines.ts
51
+ var import_xstate = require("xstate");
52
+ function inputGroupMachine(context) {
53
+ return (0, import_xstate.createMachine)({
54
+ /** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgEMA3AgFwICcBaKCrAVwAd8RGtYBLUjrDFgD0QBGAEzoAnsJHIZyIA */
55
+ id: "input-group",
56
+ context,
57
+ predictableActionArguments: true
58
+ });
59
+ }
60
+ __name(inputGroupMachine, "inputGroupMachine");
61
+
62
+ // src/modules/input.connects.ts
63
+ var import_css = require("@mekari/pixel3-styled-system/css");
64
+ function inputGroupConnect(state, send, classes) {
65
+ const {
66
+ id
67
+ } = state.context;
68
+ return {
69
+ rootProps: {
70
+ id,
71
+ class: classes.root,
72
+ "data-pixel-component": "MpInputGroup"
73
+ }
74
+ };
75
+ }
76
+ __name(inputGroupConnect, "inputGroupConnect");
77
+
78
+ // src/modules/input.hooks.ts
79
+ var useInputGroup = /* @__PURE__ */ __name((props) => {
80
+ var _a;
81
+ const context = (0, import_vue.ref)(props);
82
+ const {
83
+ state,
84
+ send
85
+ } = (0, import_vue2.useMachine)(inputGroupMachine({
86
+ ...context.value,
87
+ id: (_a = context.value.id) != null ? _a : `mp-input-group-${(0, import_pixel3_utils2.useId)()}`
88
+ }));
89
+ const [inputGroupProps2] = import_recipes.inputGroupSlotRecipe.splitVariantProps(context.value);
90
+ const classes = (0, import_recipes.inputGroupSlotRecipe)(inputGroupProps2);
91
+ return (0, import_vue.computed)(() => inputGroupConnect(state.value, send, classes));
92
+ }, "useInputGroup");
93
+
94
+ // src/input-group.tsx
95
+ var MpInputGroup = (0, import_vue4.defineComponent)({
96
+ name: "MpInputGroup",
97
+ props: inputGroupProps,
98
+ setup(props, {
99
+ slots
100
+ }) {
101
+ const api = useInputGroup(props);
102
+ const children = (0, import_vue4.computed)(() => (0, import_pixel3_utils3.getChildren)(slots));
103
+ const cloneChildren = (0, import_vue4.computed)(() => (0, import_vue4.computed)(() => children.value).value.map((vnode) => {
104
+ const overrideProps = (0, import_pixel3_utils3.objectFilterUndefined)({
105
+ size: props.size
106
+ });
107
+ return (0, import_vue4.cloneVNode)(vnode, overrideProps);
108
+ }));
109
+ return () => (0, import_vue3.createVNode)("div", api.value.rootProps, [cloneChildren.value]);
110
+ }
111
+ });
112
+ // Annotate the CommonJS export names for ESM import in node:
113
+ 0 && (module.exports = {
114
+ MpInputGroup
115
+ });
@@ -0,0 +1,11 @@
1
+ import {
2
+ MpInputGroup
3
+ } from "./chunk-62L6URRB.mjs";
4
+ import "./chunk-ME6YL7P6.mjs";
5
+ import "./chunk-T766ACNL.mjs";
6
+ import "./chunk-EF6JEV72.mjs";
7
+ import "./chunk-ZQ2NFCFA.mjs";
8
+ import "./chunk-QZ7VFGWC.mjs";
9
+ export {
10
+ MpInputGroup
11
+ };
@@ -0,0 +1,10 @@
1
+ import { ComponentWithProps } from '@mekari/pixel3-utils';
2
+ import { InputProps } from './modules/input.types.mjs';
3
+
4
+ /**
5
+ * MpInput component is used to get user input in a text field.
6
+ */
7
+
8
+ declare const MpInput: ComponentWithProps<InputProps>;
9
+
10
+ export { MpInput };
@@ -0,0 +1,10 @@
1
+ import { ComponentWithProps } from '@mekari/pixel3-utils';
2
+ import { InputProps } from './modules/input.types.js';
3
+
4
+ /**
5
+ * MpInput component is used to get user input in a text field.
6
+ */
7
+
8
+ declare const MpInput: ComponentWithProps<InputProps>;
9
+
10
+ export { MpInput };
package/dist/input.js ADDED
@@ -0,0 +1,304 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
+
21
+ // src/input.tsx
22
+ var input_exports = {};
23
+ __export(input_exports, {
24
+ MpInput: () => MpInput
25
+ });
26
+ module.exports = __toCommonJS(input_exports);
27
+ var import_vue3 = require("vue");
28
+ var import_vue4 = require("vue");
29
+
30
+ // src/modules/input.props.ts
31
+ var import_pixel3_utils = require("@mekari/pixel3-utils");
32
+ var inputProps = {
33
+ as: {
34
+ type: String,
35
+ default: "input"
36
+ },
37
+ modelValue: {
38
+ type: [String, Number]
39
+ },
40
+ id: {
41
+ type: String
42
+ },
43
+ size: {
44
+ type: String,
45
+ default: "md"
46
+ },
47
+ variant: {
48
+ type: String,
49
+ default: "outline"
50
+ },
51
+ placeholder: {
52
+ type: String
53
+ },
54
+ isReadOnly: {
55
+ type: Boolean,
56
+ default: false
57
+ },
58
+ isDisabled: {
59
+ type: Boolean,
60
+ default: false
61
+ },
62
+ isRequired: {
63
+ type: Boolean,
64
+ default: false
65
+ },
66
+ isInvalid: {
67
+ type: Boolean,
68
+ default: false
69
+ },
70
+ isFullWidth: {
71
+ type: Boolean,
72
+ default: true
73
+ },
74
+ isClearable: {
75
+ type: Boolean,
76
+ default: false
77
+ }
78
+ };
79
+ var inputEmits = (0, import_pixel3_utils.declareEmit)(["change", "input", "clear", "update:modelValue"]);
80
+
81
+ // src/modules/input.hooks.ts
82
+ var import_vue = require("vue");
83
+ var import_vue2 = require("@xstate/vue");
84
+ var import_pixel3_utils2 = require("@mekari/pixel3-utils");
85
+ var import_recipes = require("@mekari/pixel3-styled-system/recipes");
86
+
87
+ // src/modules/input.machines.ts
88
+ var import_xstate = require("xstate");
89
+ function inputMachine(context) {
90
+ return (0, import_xstate.createMachine)({
91
+ /** @xstate-layout N4IgpgJg5mDOIC5QEsB2AHArgFwMQGUBRAFQH0A1AQQBkBVQgbQAYBdRUdAe1mW2U9TsQAD0QBGAEwA6JrLnz5AdgA0IAJ7iJAXy2q0WPMQCaABUIUa9ZmyQguPPgKGiEEiYqkBWT00UAOADZPRQBmPwAWAE4Av1UNBDExEKlwzxCxTzFw8IDIiT9FAJ1dEFROCDghfRwhe15+QVsXEICpQrFFCXDfMKjcuPEklLSMrJy8gqLioA */
92
+ id: "input",
93
+ context: {
94
+ modelValue: "",
95
+ ...context
96
+ },
97
+ on: {
98
+ SET_VALUE: {
99
+ actions: "setValue"
100
+ }
101
+ },
102
+ predictableActionArguments: true
103
+ }, {
104
+ actions: {
105
+ setValue(ctx, evt) {
106
+ set.value(ctx, evt.value);
107
+ }
108
+ }
109
+ });
110
+ }
111
+ __name(inputMachine, "inputMachine");
112
+ var set = {
113
+ value(ctx, value) {
114
+ ctx.modelValue = value;
115
+ }
116
+ };
117
+
118
+ // src/modules/input.connects.ts
119
+ var import_css = require("@mekari/pixel3-styled-system/css");
120
+ function inputConnect(state, send, classes) {
121
+ const {
122
+ id,
123
+ modelValue,
124
+ placeholder,
125
+ isReadOnly,
126
+ isDisabled,
127
+ isRequired,
128
+ isInvalid,
129
+ isFullWidth,
130
+ isClearable,
131
+ onInput,
132
+ onChange,
133
+ onClear
134
+ } = state.context;
135
+ return {
136
+ modelValue,
137
+ isReadOnly,
138
+ isDisabled,
139
+ isClearable,
140
+ rootProps: {
141
+ id,
142
+ class: (0, import_css.cx)(classes.root, "group"),
143
+ "data-is-full-width": isFullWidth,
144
+ "data-pixel-component": "MpInput"
145
+ },
146
+ controlProps: {
147
+ id: `${id}-control`,
148
+ value: modelValue,
149
+ placeholder,
150
+ readonly: isReadOnly,
151
+ disabled: isDisabled,
152
+ required: isRequired,
153
+ "data-value": modelValue,
154
+ "data-is-full-width": isFullWidth,
155
+ "aria-readonly": isReadOnly,
156
+ "aria-disabled": isDisabled,
157
+ "aria-invalid": isInvalid,
158
+ "aria-required": isRequired,
159
+ onInput(evt) {
160
+ var _a;
161
+ send({
162
+ type: "SET_VALUE",
163
+ value: (_a = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a.value
164
+ });
165
+ if (onInput)
166
+ onInput(evt);
167
+ },
168
+ onChange(evt) {
169
+ var _a;
170
+ send({
171
+ type: "SET_VALUE",
172
+ value: (_a = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a.value
173
+ });
174
+ if (onChange)
175
+ onChange(evt);
176
+ },
177
+ class: classes.control,
178
+ "data-pixel-component": "MpInputControl"
179
+ },
180
+ clearProps: {
181
+ id: `${id}-clear`,
182
+ variant: "ghost",
183
+ size: "sm",
184
+ leftIcon: "reset",
185
+ onClick(evt) {
186
+ send({
187
+ type: "SET_VALUE",
188
+ value: null
189
+ });
190
+ if (onInput)
191
+ onInput(evt);
192
+ if (onClear)
193
+ onClear(evt);
194
+ },
195
+ class: classes.clear,
196
+ style: {
197
+ "--mp-input--visibility": modelValue ? "visible" : "hidden",
198
+ "--mp-input--opacity": modelValue ? "1" : "0"
199
+ },
200
+ "data-pixel-component": "MpInputClear"
201
+ }
202
+ };
203
+ }
204
+ __name(inputConnect, "inputConnect");
205
+
206
+ // src/modules/input.hooks.ts
207
+ var useInput = /* @__PURE__ */ __name((props, emit) => {
208
+ var _a;
209
+ const context = (0, import_vue.ref)(props);
210
+ const {
211
+ state,
212
+ send
213
+ } = (0, import_vue2.useMachine)(inputMachine({
214
+ ...context.value,
215
+ id: (_a = context.value.id) != null ? _a : `mp-input-${(0, import_pixel3_utils2.useId)()}`,
216
+ onInput(evt) {
217
+ var _a2, _b;
218
+ emit("update:modelValue", (_a2 = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a2.value);
219
+ emit("input", evt, (_b = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _b.value);
220
+ },
221
+ onChange(evt) {
222
+ var _a2;
223
+ emit("change", evt, (_a2 = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a2.value);
224
+ },
225
+ onClear(evt) {
226
+ emit("clear", evt);
227
+ }
228
+ }));
229
+ const [inputProps2] = import_recipes.inputSlotRecipe.splitVariantProps(context.value);
230
+ const classes = (0, import_recipes.inputSlotRecipe)(inputProps2);
231
+ return (0, import_vue.computed)(() => inputConnect(state.value, send, classes));
232
+ }, "useInput");
233
+
234
+ // src/input.tsx
235
+ var import_pixel3_button = require("@mekari/pixel3-button");
236
+ var MpInput = (0, import_vue4.defineComponent)({
237
+ name: "MpInput",
238
+ props: inputProps,
239
+ emits: inputEmits,
240
+ setup(props, {
241
+ emit
242
+ }) {
243
+ const {
244
+ as: Component
245
+ } = props;
246
+ const api = useInput(props, emit);
247
+ const calcSpacing = (0, import_vue4.ref)({
248
+ left: 12,
249
+ right: 12
250
+ });
251
+ const calcPosition = (0, import_vue4.ref)({
252
+ right: 12
253
+ });
254
+ (0, import_vue4.onMounted)(() => {
255
+ var _a, _b, _c;
256
+ 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;
257
+ let isClearable = false;
258
+ node == null ? void 0 : node.map((vnode) => {
259
+ var _a2, _b2, _c2, _d, _e, _f;
260
+ if (((_a2 = vnode.type) == null ? void 0 : _a2.name) === "MpInput") {
261
+ if ((_b2 = vnode.props) == null ? void 0 : _b2.hasOwnProperty("isClearable")) {
262
+ calcSpacing.value.right += 30;
263
+ isClearable = true;
264
+ }
265
+ }
266
+ if (((_c2 = vnode.type) == null ? void 0 : _c2.name) === "MpInputLeftAddon") {
267
+ calcSpacing.value.left += 30;
268
+ if ((_d = vnode.props) == null ? void 0 : _d.hasOwnProperty("hasBackground"))
269
+ calcSpacing.value.left += parseInt(getComputedStyle(vnode.el).width, 10) - 30;
270
+ }
271
+ if (((_e = vnode.type) == null ? void 0 : _e.name) === "MpInputRightAddon") {
272
+ calcSpacing.value.right += 30;
273
+ if ((_f = vnode.props) == null ? void 0 : _f.hasOwnProperty("hasBackground")) {
274
+ calcSpacing.value.right += parseInt(getComputedStyle(vnode.el).width, 10) - 30;
275
+ if (isClearable)
276
+ calcPosition.value.right += parseInt(getComputedStyle(vnode.el).width, 10);
277
+ } else {
278
+ if (isClearable)
279
+ calcPosition.value.right += 30;
280
+ }
281
+ }
282
+ });
283
+ });
284
+ return () => {
285
+ var _a, _b;
286
+ return (0, import_vue3.createVNode)("div", api.value.rootProps, [(0, import_vue3.createVNode)(Component, (0, import_vue3.mergeProps)(api.value.controlProps, {
287
+ "style": {
288
+ "--mp-input--padding-left": `${calcSpacing.value.left}px`,
289
+ "--mp-input--padding-right": `${calcSpacing.value.right}px`,
290
+ ...(_a = api.value.controlProps) == null ? void 0 : _a.style
291
+ }
292
+ }), 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, {
293
+ "style": {
294
+ "--mp-input--right": `${calcPosition.value.right}px`,
295
+ ...(_b = api.value.clearProps) == null ? void 0 : _b.style
296
+ }
297
+ }), null)]);
298
+ };
299
+ }
300
+ });
301
+ // Annotate the CommonJS export names for ESM import in node:
302
+ 0 && (module.exports = {
303
+ MpInput
304
+ });
package/dist/input.mjs ADDED
@@ -0,0 +1,11 @@
1
+ import {
2
+ MpInput
3
+ } from "./chunk-AH5Q4AP2.mjs";
4
+ import "./chunk-ME6YL7P6.mjs";
5
+ import "./chunk-T766ACNL.mjs";
6
+ import "./chunk-EF6JEV72.mjs";
7
+ import "./chunk-ZQ2NFCFA.mjs";
8
+ import "./chunk-QZ7VFGWC.mjs";
9
+ export {
10
+ MpInput
11
+ };