@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.
- package/dist/chunk-62L6URRB.mjs +32 -0
- package/dist/chunk-AH5Q4AP2.mjs +81 -0
- package/dist/chunk-EF6JEV72.mjs +58 -0
- package/dist/chunk-JW2SLWRV.mjs +59 -0
- package/dist/chunk-ME6YL7P6.mjs +79 -0
- package/dist/chunk-QZ7VFGWC.mjs +6 -0
- package/dist/chunk-T766ACNL.mjs +127 -0
- package/dist/chunk-ZQ2NFCFA.mjs +83 -0
- package/dist/index.d.mts +6 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.js +483 -0
- package/dist/index.mjs +21 -0
- package/dist/input-addon.d.mts +48 -0
- package/dist/input-addon.d.ts +48 -0
- package/dist/input-addon.js +156 -0
- package/dist/input-addon.mjs +15 -0
- package/dist/input-group.d.mts +28 -0
- package/dist/input-group.d.ts +28 -0
- package/dist/input-group.js +115 -0
- package/dist/input-group.mjs +11 -0
- package/dist/input.d.mts +10 -0
- package/dist/input.d.ts +10 -0
- package/dist/input.js +304 -0
- package/dist/input.mjs +11 -0
- package/dist/metafile-cjs.json +1 -0
- package/dist/metafile-esm.json +1 -0
- package/dist/modules/input.connects.d.mts +12 -0
- package/dist/modules/input.connects.d.ts +12 -0
- package/dist/modules/input.connects.js +150 -0
- package/dist/modules/input.connects.mjs +11 -0
- package/dist/modules/input.hooks.d.mts +9 -0
- package/dist/modules/input.hooks.d.ts +9 -0
- package/dist/modules/input.hooks.js +261 -0
- package/dist/modules/input.hooks.mjs +13 -0
- package/dist/modules/input.machines.d.mts +48 -0
- package/dist/modules/input.machines.d.ts +48 -0
- package/dist/modules/input.machines.js +81 -0
- package/dist/modules/input.machines.mjs +11 -0
- package/dist/modules/input.props.d.mts +80 -0
- package/dist/modules/input.props.d.ts +80 -0
- package/dist/modules/input.props.js +110 -0
- package/dist/modules/input.props.mjs +13 -0
- package/dist/modules/input.types.d.mts +77 -0
- package/dist/modules/input.types.d.ts +77 -0
- package/dist/modules/input.types.js +18 -0
- package/dist/modules/input.types.mjs +0 -0
- 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
|
+
});
|
package/dist/input.d.mts
ADDED
|
@@ -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 };
|
package/dist/input.d.ts
ADDED
|
@@ -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