@mekari/pixel3-input 0.0.0 → 0.0.1

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.
@@ -0,0 +1,117 @@
1
+ import {
2
+ __name
3
+ } from "./chunk-QZ7VFGWC.mjs";
4
+
5
+ // src/modules/input.connects.ts
6
+ import { useFormControlContext } from "@mekari/pixel3-form-control";
7
+ import { useId } from "@mekari/pixel3-utils";
8
+ import { cx } from "@mekari/pixel3-styled-system/css";
9
+ function inputConnect(state, emit, classes) {
10
+ const {
11
+ id,
12
+ modelValue,
13
+ placeholder,
14
+ isReadOnly,
15
+ isDisabled,
16
+ isRequired,
17
+ isInvalid,
18
+ isFullWidth,
19
+ isClearable
20
+ } = state;
21
+ const idx = id != null ? id : `mp-input-${useId()}`;
22
+ const formControlProp = useFormControlContext();
23
+ return {
24
+ modelValue,
25
+ isReadOnly,
26
+ isDisabled,
27
+ isClearable,
28
+ rootProps: {
29
+ id: idx,
30
+ class: cx(classes.root, "group"),
31
+ "data-is-full-width": isFullWidth,
32
+ "data-pixel-component": "MpInput"
33
+ },
34
+ controlProps: {
35
+ id: `${idx}-control`,
36
+ value: modelValue,
37
+ placeholder,
38
+ readonly: (formControlProp == null ? void 0 : formControlProp.value.isReadOnly) || isReadOnly,
39
+ disabled: (formControlProp == null ? void 0 : formControlProp.value.isDisabled) || isDisabled,
40
+ required: (formControlProp == null ? void 0 : formControlProp.value.isRequired) || isRequired,
41
+ "data-value": modelValue,
42
+ "data-is-full-width": isFullWidth,
43
+ "aria-readonly": (formControlProp == null ? void 0 : formControlProp.value.isReadOnly) || isReadOnly,
44
+ "aria-disabled": (formControlProp == null ? void 0 : formControlProp.value.isDisabled) || isDisabled,
45
+ "aria-invalid": (formControlProp == null ? void 0 : formControlProp.value.isInvalid) || isInvalid,
46
+ "aria-required": (formControlProp == null ? void 0 : formControlProp.value.isRequired) || isRequired,
47
+ onInput(evt) {
48
+ var _a, _b;
49
+ emit("update:modelValue", (_a = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a.value);
50
+ emit("input", evt, (_b = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _b.value);
51
+ },
52
+ onChange(evt) {
53
+ var _a;
54
+ emit("change", evt, (_a = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a.value);
55
+ },
56
+ class: classes.control,
57
+ "data-pixel-component": "MpInputControl"
58
+ },
59
+ clearProps: {
60
+ id: `${idx}-clear`,
61
+ variant: "ghost",
62
+ size: "sm",
63
+ leftIcon: "reset",
64
+ onClick(evt) {
65
+ var _a, _b;
66
+ emit("update:modelValue", (_a = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a.value);
67
+ emit("input", evt, (_b = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _b.value);
68
+ emit("clear", evt);
69
+ },
70
+ class: classes.clear,
71
+ style: {
72
+ "--mp-input--visibility": modelValue ? "visible" : "hidden",
73
+ "--mp-input--opacity": modelValue ? "1" : "0"
74
+ },
75
+ "data-pixel-component": "MpInputClear"
76
+ }
77
+ };
78
+ }
79
+ __name(inputConnect, "inputConnect");
80
+ function inputGroupConnect(state, classes) {
81
+ const {
82
+ id
83
+ } = state;
84
+ const idx = id != null ? id : `mp-input-group-${useId()}`;
85
+ return {
86
+ rootProps: {
87
+ id: idx,
88
+ class: classes.root,
89
+ "data-pixel-component": "MpInputGroup"
90
+ }
91
+ };
92
+ }
93
+ __name(inputGroupConnect, "inputGroupConnect");
94
+ function inputAddonConnect(state, classes) {
95
+ const {
96
+ id,
97
+ placement,
98
+ hasBackground
99
+ } = state;
100
+ const idx = id != null ? id : `mp-input-addon-${useId()}`;
101
+ return {
102
+ rootProps: {
103
+ id: idx,
104
+ class: classes.root,
105
+ "data-placement": placement,
106
+ "data-has-background": hasBackground,
107
+ "data-pixel-component": "MpInputAddon"
108
+ }
109
+ };
110
+ }
111
+ __name(inputAddonConnect, "inputAddonConnect");
112
+
113
+ export {
114
+ inputConnect,
115
+ inputGroupConnect,
116
+ inputAddonConnect
117
+ };
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  useInputGroup
3
- } from "./chunk-ME6YL7P6.mjs";
3
+ } from "./chunk-IP4RFVD7.mjs";
4
4
  import {
5
5
  inputGroupProps
6
6
  } from "./chunk-ZQ2NFCFA.mjs";
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  useInput
3
- } from "./chunk-ME6YL7P6.mjs";
3
+ } from "./chunk-IP4RFVD7.mjs";
4
4
  import {
5
5
  inputEmits,
6
6
  inputProps
@@ -14,8 +14,10 @@ var MpInput = defineComponent({
14
14
  name: "MpInput",
15
15
  props: inputProps,
16
16
  emits: inputEmits,
17
+ inheritAttrs: false,
17
18
  setup(props, {
18
- emit
19
+ emit,
20
+ attrs
19
21
  }) {
20
22
  const {
21
23
  as: Component
@@ -60,7 +62,7 @@ var MpInput = defineComponent({
60
62
  });
61
63
  return () => {
62
64
  var _a, _b;
63
- return _createVNode("div", api.value.rootProps, [_createVNode(Component, _mergeProps(api.value.controlProps, {
65
+ return _createVNode("div", api.value.rootProps, [_createVNode(Component, _mergeProps(api.value.controlProps, attrs, {
64
66
  "style": {
65
67
  "--mp-input--padding-left": `${calcSpacing.value.left}px`,
66
68
  "--mp-input--padding-right": `${calcSpacing.value.right}px`,
@@ -0,0 +1,36 @@
1
+ import {
2
+ inputAddonConnect,
3
+ inputConnect,
4
+ inputGroupConnect
5
+ } from "./chunk-45BJFHHR.mjs";
6
+ import {
7
+ __name
8
+ } from "./chunk-QZ7VFGWC.mjs";
9
+
10
+ // src/modules/input.hooks.ts
11
+ import { computed, ref } from "vue";
12
+ import { inputSlotRecipe, inputGroupSlotRecipe, inputAddonSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
13
+ var useInput = /* @__PURE__ */ __name((props, emit) => {
14
+ const context = ref(props);
15
+ const [value] = inputSlotRecipe.splitVariantProps(context.value);
16
+ const classes = inputSlotRecipe(value);
17
+ return computed(() => inputConnect(context.value, emit, classes));
18
+ }, "useInput");
19
+ var useInputGroup = /* @__PURE__ */ __name((props) => {
20
+ const context = ref(props);
21
+ const [value] = inputGroupSlotRecipe.splitVariantProps(context.value);
22
+ const classes = inputGroupSlotRecipe(value);
23
+ return computed(() => inputGroupConnect(context.value, classes));
24
+ }, "useInputGroup");
25
+ var useInputAddon = /* @__PURE__ */ __name((props) => {
26
+ const context = ref(props);
27
+ const [value] = inputAddonSlotRecipe.splitVariantProps(context.value);
28
+ const classes = inputAddonSlotRecipe(value);
29
+ return computed(() => inputAddonConnect(context.value, classes));
30
+ }, "useInputAddon");
31
+
32
+ export {
33
+ useInput,
34
+ useInputGroup,
35
+ useInputAddon
36
+ };
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  useInputAddon
3
- } from "./chunk-ME6YL7P6.mjs";
3
+ } from "./chunk-IP4RFVD7.mjs";
4
4
  import {
5
5
  inputAddonProps
6
6
  } from "./chunk-ZQ2NFCFA.mjs";
package/dist/index.js CHANGED
@@ -29,8 +29,8 @@ __export(src_exports, {
29
29
  module.exports = __toCommonJS(src_exports);
30
30
 
31
31
  // src/input.tsx
32
+ var import_vue2 = require("vue");
32
33
  var import_vue3 = require("vue");
33
- var import_vue4 = require("vue");
34
34
 
35
35
  // src/modules/input.props.ts
36
36
  var import_pixel3_utils = require("@mekari/pixel3-utils");
@@ -111,62 +111,13 @@ var inputEmits = (0, import_pixel3_utils.declareEmit)(["change", "input", "clear
111
111
 
112
112
  // src/modules/input.hooks.ts
113
113
  var import_vue = require("vue");
114
- var import_vue2 = require("@xstate/vue");
115
- var import_pixel3_utils2 = require("@mekari/pixel3-utils");
116
114
  var import_recipes = require("@mekari/pixel3-styled-system/recipes");
117
115
 
118
- // src/modules/input.machines.ts
119
- var import_xstate = require("xstate");
120
- function inputMachine(context) {
121
- return (0, import_xstate.createMachine)({
122
- /** @xstate-layout N4IgpgJg5mDOIC5QEsB2AHArgFwMQGUBRAFQH0A1AQQBkBVQgbQAYBdRUdAe1mW2U9TsQAD0QBGAEwA6JrLnz5AdgA0IAJ7iJAXy2q0WPMQCaABUIUa9ZmyQguPPgKGiEEiYqkBWT00UAOADZPRQBmPwAWAE4Av1UNBDExEKlwzxCxTzFw8IDIiT9FAJ1dEFROCDghfRwhe15+QVsXEICpQrFFCXDfMKjcuPEklLSMrJy8gqLioA */
123
- id: "input",
124
- context: {
125
- modelValue: "",
126
- ...context
127
- },
128
- on: {
129
- SET_VALUE: {
130
- actions: "setValue"
131
- }
132
- },
133
- predictableActionArguments: true
134
- }, {
135
- actions: {
136
- setValue(ctx, evt) {
137
- set.value(ctx, evt.value);
138
- }
139
- }
140
- });
141
- }
142
- __name(inputMachine, "inputMachine");
143
- var set = {
144
- value(ctx, value) {
145
- ctx.modelValue = value;
146
- }
147
- };
148
- function inputGroupMachine(context) {
149
- return (0, import_xstate.createMachine)({
150
- /** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgEMA3AgFwICcBaKCrAVwAd8RGtYBLUjrDFgD0QBGAEzoAnsJHIZyIA */
151
- id: "input-group",
152
- context,
153
- predictableActionArguments: true
154
- });
155
- }
156
- __name(inputGroupMachine, "inputGroupMachine");
157
- function inputAddonMachine(context) {
158
- return (0, import_xstate.createMachine)({
159
- /** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgEsMAHAVwBcBaAQwgiw3xGK1gPIIaYA9EBGAEzoAnvwHIJyIA */
160
- id: "input-addon",
161
- context,
162
- predictableActionArguments: true
163
- });
164
- }
165
- __name(inputAddonMachine, "inputAddonMachine");
166
-
167
116
  // src/modules/input.connects.ts
117
+ var import_pixel3_form_control = require("@mekari/pixel3-form-control");
118
+ var import_pixel3_utils2 = require("@mekari/pixel3-utils");
168
119
  var import_css = require("@mekari/pixel3-styled-system/css");
169
- function inputConnect(state, send, classes) {
120
+ function inputConnect(state, emit, classes) {
170
121
  const {
171
122
  id,
172
123
  modelValue,
@@ -176,70 +127,56 @@ function inputConnect(state, send, classes) {
176
127
  isRequired,
177
128
  isInvalid,
178
129
  isFullWidth,
179
- isClearable,
180
- onInput,
181
- onChange,
182
- onClear
183
- } = state.context;
130
+ isClearable
131
+ } = state;
132
+ const idx = id != null ? id : `mp-input-${(0, import_pixel3_utils2.useId)()}`;
133
+ const formControlProp = (0, import_pixel3_form_control.useFormControlContext)();
184
134
  return {
185
135
  modelValue,
186
136
  isReadOnly,
187
137
  isDisabled,
188
138
  isClearable,
189
139
  rootProps: {
190
- id,
140
+ id: idx,
191
141
  class: (0, import_css.cx)(classes.root, "group"),
192
142
  "data-is-full-width": isFullWidth,
193
143
  "data-pixel-component": "MpInput"
194
144
  },
195
145
  controlProps: {
196
- id: `${id}-control`,
146
+ id: `${idx}-control`,
197
147
  value: modelValue,
198
148
  placeholder,
199
- readonly: isReadOnly,
200
- disabled: isDisabled,
201
- required: isRequired,
149
+ readonly: (formControlProp == null ? void 0 : formControlProp.value.isReadOnly) || isReadOnly,
150
+ disabled: (formControlProp == null ? void 0 : formControlProp.value.isDisabled) || isDisabled,
151
+ required: (formControlProp == null ? void 0 : formControlProp.value.isRequired) || isRequired,
202
152
  "data-value": modelValue,
203
153
  "data-is-full-width": isFullWidth,
204
- "aria-readonly": isReadOnly,
205
- "aria-disabled": isDisabled,
206
- "aria-invalid": isInvalid,
207
- "aria-required": isRequired,
154
+ "aria-readonly": (formControlProp == null ? void 0 : formControlProp.value.isReadOnly) || isReadOnly,
155
+ "aria-disabled": (formControlProp == null ? void 0 : formControlProp.value.isDisabled) || isDisabled,
156
+ "aria-invalid": (formControlProp == null ? void 0 : formControlProp.value.isInvalid) || isInvalid,
157
+ "aria-required": (formControlProp == null ? void 0 : formControlProp.value.isRequired) || isRequired,
208
158
  onInput(evt) {
209
- var _a;
210
- send({
211
- type: "SET_VALUE",
212
- value: (_a = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a.value
213
- });
214
- if (onInput)
215
- onInput(evt);
159
+ var _a, _b;
160
+ emit("update:modelValue", (_a = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a.value);
161
+ emit("input", evt, (_b = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _b.value);
216
162
  },
217
163
  onChange(evt) {
218
164
  var _a;
219
- send({
220
- type: "SET_VALUE",
221
- value: (_a = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a.value
222
- });
223
- if (onChange)
224
- onChange(evt);
165
+ emit("change", evt, (_a = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a.value);
225
166
  },
226
167
  class: classes.control,
227
168
  "data-pixel-component": "MpInputControl"
228
169
  },
229
170
  clearProps: {
230
- id: `${id}-clear`,
171
+ id: `${idx}-clear`,
231
172
  variant: "ghost",
232
173
  size: "sm",
233
174
  leftIcon: "reset",
234
175
  onClick(evt) {
235
- send({
236
- type: "SET_VALUE",
237
- value: null
238
- });
239
- if (onInput)
240
- onInput(evt);
241
- if (onClear)
242
- onClear(evt);
176
+ var _a, _b;
177
+ emit("update:modelValue", (_a = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a.value);
178
+ emit("input", evt, (_b = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _b.value);
179
+ emit("clear", evt);
243
180
  },
244
181
  class: classes.clear,
245
182
  style: {
@@ -251,28 +188,30 @@ function inputConnect(state, send, classes) {
251
188
  };
252
189
  }
253
190
  __name(inputConnect, "inputConnect");
254
- function inputGroupConnect(state, send, classes) {
191
+ function inputGroupConnect(state, classes) {
255
192
  const {
256
193
  id
257
- } = state.context;
194
+ } = state;
195
+ const idx = id != null ? id : `mp-input-group-${(0, import_pixel3_utils2.useId)()}`;
258
196
  return {
259
197
  rootProps: {
260
- id,
198
+ id: idx,
261
199
  class: classes.root,
262
200
  "data-pixel-component": "MpInputGroup"
263
201
  }
264
202
  };
265
203
  }
266
204
  __name(inputGroupConnect, "inputGroupConnect");
267
- function inputAddonConnect(state, send, classes) {
205
+ function inputAddonConnect(state, classes) {
268
206
  const {
269
207
  id,
270
208
  placement,
271
209
  hasBackground
272
- } = state.context;
210
+ } = state;
211
+ const idx = id != null ? id : `mp-input-addon-${(0, import_pixel3_utils2.useId)()}`;
273
212
  return {
274
213
  rootProps: {
275
- id,
214
+ id: idx,
276
215
  class: classes.root,
277
216
  "data-placement": placement,
278
217
  "data-has-background": hasBackground,
@@ -284,83 +223,49 @@ __name(inputAddonConnect, "inputAddonConnect");
284
223
 
285
224
  // src/modules/input.hooks.ts
286
225
  var useInput = /* @__PURE__ */ __name((props, emit) => {
287
- var _a;
288
226
  const context = (0, import_vue.ref)(props);
289
- const {
290
- state,
291
- send
292
- } = (0, import_vue2.useMachine)(inputMachine({
293
- ...context.value,
294
- id: (_a = context.value.id) != null ? _a : `mp-input-${(0, import_pixel3_utils2.useId)()}`,
295
- onInput(evt) {
296
- var _a2, _b;
297
- emit("update:modelValue", (_a2 = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a2.value);
298
- emit("input", evt, (_b = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _b.value);
299
- },
300
- onChange(evt) {
301
- var _a2;
302
- emit("change", evt, (_a2 = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a2.value);
303
- },
304
- onClear(evt) {
305
- emit("clear", evt);
306
- }
307
- }));
308
- const [inputProps2] = import_recipes.inputSlotRecipe.splitVariantProps(context.value);
309
- const classes = (0, import_recipes.inputSlotRecipe)(inputProps2);
310
- return (0, import_vue.computed)(() => inputConnect(state.value, send, classes));
227
+ const [value] = import_recipes.inputSlotRecipe.splitVariantProps(context.value);
228
+ const classes = (0, import_recipes.inputSlotRecipe)(value);
229
+ return (0, import_vue.computed)(() => inputConnect(context.value, emit, classes));
311
230
  }, "useInput");
312
231
  var useInputGroup = /* @__PURE__ */ __name((props) => {
313
- var _a;
314
232
  const context = (0, import_vue.ref)(props);
315
- const {
316
- state,
317
- send
318
- } = (0, import_vue2.useMachine)(inputGroupMachine({
319
- ...context.value,
320
- id: (_a = context.value.id) != null ? _a : `mp-input-group-${(0, import_pixel3_utils2.useId)()}`
321
- }));
322
- const [inputGroupProps2] = import_recipes.inputGroupSlotRecipe.splitVariantProps(context.value);
323
- const classes = (0, import_recipes.inputGroupSlotRecipe)(inputGroupProps2);
324
- return (0, import_vue.computed)(() => inputGroupConnect(state.value, send, classes));
233
+ const [value] = import_recipes.inputGroupSlotRecipe.splitVariantProps(context.value);
234
+ const classes = (0, import_recipes.inputGroupSlotRecipe)(value);
235
+ return (0, import_vue.computed)(() => inputGroupConnect(context.value, classes));
325
236
  }, "useInputGroup");
326
237
  var useInputAddon = /* @__PURE__ */ __name((props) => {
327
- var _a;
328
238
  const context = (0, import_vue.ref)(props);
329
- const {
330
- state,
331
- send
332
- } = (0, import_vue2.useMachine)(inputAddonMachine({
333
- ...context.value,
334
- id: (_a = context.value.id) != null ? _a : `mp-input-addon-${(0, import_pixel3_utils2.useId)()}`
335
- }));
336
- const [inputAddonProps2] = import_recipes.inputAddonSlotRecipe.splitVariantProps(context.value);
337
- const classes = (0, import_recipes.inputAddonSlotRecipe)(inputAddonProps2);
338
- return (0, import_vue.computed)(() => inputAddonConnect(state.value, send, classes));
239
+ const [value] = import_recipes.inputAddonSlotRecipe.splitVariantProps(context.value);
240
+ const classes = (0, import_recipes.inputAddonSlotRecipe)(value);
241
+ return (0, import_vue.computed)(() => inputAddonConnect(context.value, classes));
339
242
  }, "useInputAddon");
340
243
 
341
244
  // src/input.tsx
342
245
  var import_pixel3_button = require("@mekari/pixel3-button");
343
- var MpInput = (0, import_vue4.defineComponent)({
246
+ var MpInput = (0, import_vue3.defineComponent)({
344
247
  name: "MpInput",
345
248
  props: inputProps,
346
249
  emits: inputEmits,
250
+ inheritAttrs: false,
347
251
  setup(props, {
348
- emit
252
+ emit,
253
+ attrs
349
254
  }) {
350
255
  const {
351
256
  as: Component
352
257
  } = props;
353
258
  const api = useInput(props, emit);
354
- const calcSpacing = (0, import_vue4.ref)({
259
+ const calcSpacing = (0, import_vue3.ref)({
355
260
  left: 12,
356
261
  right: 12
357
262
  });
358
- const calcPosition = (0, import_vue4.ref)({
263
+ const calcPosition = (0, import_vue3.ref)({
359
264
  right: 12
360
265
  });
361
- (0, import_vue4.onMounted)(() => {
266
+ (0, import_vue3.onMounted)(() => {
362
267
  var _a, _b, _c;
363
- 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;
268
+ const node = (_c = (_b = (_a = (0, import_vue3.getCurrentInstance)()) == null ? void 0 : _a.parent) == null ? void 0 : _b.subTree) == null ? void 0 : _c.children[0].children;
364
269
  let isClearable = false;
365
270
  node == null ? void 0 : node.map((vnode) => {
366
271
  var _a2, _b2, _c2, _d, _e, _f;
@@ -390,13 +295,13 @@ var MpInput = (0, import_vue4.defineComponent)({
390
295
  });
391
296
  return () => {
392
297
  var _a, _b;
393
- return (0, import_vue3.createVNode)("div", api.value.rootProps, [(0, import_vue3.createVNode)(Component, (0, import_vue3.mergeProps)(api.value.controlProps, {
298
+ return (0, import_vue2.createVNode)("div", api.value.rootProps, [(0, import_vue2.createVNode)(Component, (0, import_vue2.mergeProps)(api.value.controlProps, attrs, {
394
299
  "style": {
395
300
  "--mp-input--padding-left": `${calcSpacing.value.left}px`,
396
301
  "--mp-input--padding-right": `${calcSpacing.value.right}px`,
397
302
  ...(_a = api.value.controlProps) == null ? void 0 : _a.style
398
303
  }
399
- }), 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, {
304
+ }), null), !api.value.isReadOnly && !api.value.isDisabled && api.value.isClearable && (0, import_vue2.createVNode)(import_pixel3_button.MpButton, (0, import_vue2.mergeProps)(api.value.clearProps, {
400
305
  "style": {
401
306
  "--mp-input--right": `${calcPosition.value.right}px`,
402
307
  ...(_b = api.value.clearProps) == null ? void 0 : _b.style
@@ -407,31 +312,31 @@ var MpInput = (0, import_vue4.defineComponent)({
407
312
  });
408
313
 
409
314
  // src/input-group.tsx
315
+ var import_vue4 = require("vue");
410
316
  var import_vue5 = require("vue");
411
- var import_vue6 = require("vue");
412
317
  var import_pixel3_utils3 = require("@mekari/pixel3-utils");
413
- var MpInputGroup = (0, import_vue6.defineComponent)({
318
+ var MpInputGroup = (0, import_vue5.defineComponent)({
414
319
  name: "MpInputGroup",
415
320
  props: inputGroupProps,
416
321
  setup(props, {
417
322
  slots
418
323
  }) {
419
324
  const api = useInputGroup(props);
420
- const children = (0, import_vue6.computed)(() => (0, import_pixel3_utils3.getChildren)(slots));
421
- const cloneChildren = (0, import_vue6.computed)(() => (0, import_vue6.computed)(() => children.value).value.map((vnode) => {
325
+ const children = (0, import_vue5.computed)(() => (0, import_pixel3_utils3.getChildren)(slots));
326
+ const cloneChildren = (0, import_vue5.computed)(() => (0, import_vue5.computed)(() => children.value).value.map((vnode) => {
422
327
  const overrideProps = (0, import_pixel3_utils3.objectFilterUndefined)({
423
328
  size: props.size
424
329
  });
425
- return (0, import_vue6.cloneVNode)(vnode, overrideProps);
330
+ return (0, import_vue5.cloneVNode)(vnode, overrideProps);
426
331
  }));
427
- return () => (0, import_vue5.createVNode)("div", api.value.rootProps, [cloneChildren.value]);
332
+ return () => (0, import_vue4.createVNode)("div", api.value.rootProps, [cloneChildren.value]);
428
333
  }
429
334
  });
430
335
 
431
336
  // src/input-addon.tsx
337
+ var import_vue6 = require("vue");
432
338
  var import_vue7 = require("vue");
433
- var import_vue8 = require("vue");
434
- var MpInputAddon = (0, import_vue8.defineComponent)({
339
+ var MpInputAddon = (0, import_vue7.defineComponent)({
435
340
  name: "MpInputAddon",
436
341
  props: inputAddonProps,
437
342
  setup(props, {
@@ -440,16 +345,16 @@ var MpInputAddon = (0, import_vue8.defineComponent)({
440
345
  const api = useInputAddon(props);
441
346
  return () => {
442
347
  var _a;
443
- return (0, import_vue7.createVNode)("div", api.value.rootProps, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
348
+ return (0, import_vue6.createVNode)("div", api.value.rootProps, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
444
349
  };
445
350
  }
446
351
  });
447
- var MpInputLeftAddon = (0, import_vue8.defineComponent)({
352
+ var MpInputLeftAddon = (0, import_vue7.defineComponent)({
448
353
  name: "MpInputLeftAddon",
449
354
  setup(_, {
450
355
  slots
451
356
  }) {
452
- return () => (0, import_vue7.createVNode)(MpInputAddon, {
357
+ return () => (0, import_vue6.createVNode)(MpInputAddon, {
453
358
  "placement": "left"
454
359
  }, {
455
360
  default: () => {
@@ -459,12 +364,12 @@ var MpInputLeftAddon = (0, import_vue8.defineComponent)({
459
364
  });
460
365
  }
461
366
  });
462
- var MpInputRightAddon = (0, import_vue8.defineComponent)({
367
+ var MpInputRightAddon = (0, import_vue7.defineComponent)({
463
368
  name: "MpInputRightAddon",
464
369
  setup(_, {
465
370
  slots
466
371
  }) {
467
- return () => (0, import_vue7.createVNode)(MpInputAddon, {
372
+ return () => (0, import_vue6.createVNode)(MpInputAddon, {
468
373
  "placement": "right"
469
374
  }, {
470
375
  default: () => {
package/dist/index.mjs CHANGED
@@ -1,16 +1,15 @@
1
1
  import {
2
2
  MpInputLeftAddon,
3
3
  MpInputRightAddon
4
- } from "./chunk-JW2SLWRV.mjs";
4
+ } from "./chunk-VD5GL77E.mjs";
5
5
  import {
6
6
  MpInputGroup
7
- } from "./chunk-62L6URRB.mjs";
7
+ } from "./chunk-4YFPKPDU.mjs";
8
8
  import {
9
9
  MpInput
10
- } from "./chunk-AH5Q4AP2.mjs";
11
- import "./chunk-ME6YL7P6.mjs";
12
- import "./chunk-T766ACNL.mjs";
13
- import "./chunk-EF6JEV72.mjs";
10
+ } from "./chunk-6JUSM6A5.mjs";
11
+ import "./chunk-IP4RFVD7.mjs";
12
+ import "./chunk-45BJFHHR.mjs";
14
13
  import "./chunk-ZQ2NFCFA.mjs";
15
14
  import "./chunk-QZ7VFGWC.mjs";
16
15
  export {