@mekari/pixel3-tag 0.0.1-alpha.0 → 0.0.2
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-3TV3WMBK.mjs +20 -0
- package/dist/{chunk-GRJUHSTY.mjs → chunk-OPTBEC5V.mjs} +3 -3
- package/dist/{chunk-ETUG5QZG.mjs → chunk-SKG5Z6SC.mjs} +12 -9
- package/dist/index.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +20 -44
- package/dist/index.mjs +3 -4
- package/dist/metafile-cjs.json +1 -1
- package/dist/metafile-esm.json +1 -1
- package/dist/modules/tag.connects.d.mts +2 -2
- package/dist/modules/tag.connects.d.ts +2 -2
- package/dist/modules/tag.connects.js +12 -9
- package/dist/modules/tag.connects.mjs +1 -1
- package/dist/modules/tag.hooks.js +15 -39
- package/dist/modules/tag.hooks.mjs +2 -3
- package/dist/modules/tag.props.d.mts +19 -17
- package/dist/modules/tag.props.d.ts +19 -17
- package/dist/modules/tag.types.d.mts +2 -4
- package/dist/modules/tag.types.d.ts +2 -4
- package/dist/tag.d.mts +34 -33
- package/dist/tag.d.ts +34 -33
- package/dist/tag.js +20 -44
- package/dist/tag.mjs +3 -4
- package/package.json +4 -8
- package/dist/chunk-AGP5VIAA.mjs +0 -19
- package/dist/chunk-J6ICIHXS.mjs +0 -38
- package/dist/modules/tag.machines.d.mts +0 -10
- package/dist/modules/tag.machines.d.ts +0 -10
- package/dist/modules/tag.machines.js +0 -40
- package/dist/modules/tag.machines.mjs +0 -7
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import {
|
|
2
|
+
tagConnect
|
|
3
|
+
} from "./chunk-SKG5Z6SC.mjs";
|
|
4
|
+
import {
|
|
5
|
+
__name
|
|
6
|
+
} from "./chunk-QZ7VFGWC.mjs";
|
|
7
|
+
|
|
8
|
+
// src/modules/tag.hooks.ts
|
|
9
|
+
import { computed, ref } from "vue";
|
|
10
|
+
import { tagSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
|
|
11
|
+
var useTag = /* @__PURE__ */ __name((props, emit) => {
|
|
12
|
+
const context = ref(props);
|
|
13
|
+
const [value] = tagSlotRecipe.splitVariantProps(context.value);
|
|
14
|
+
const classes = tagSlotRecipe(value);
|
|
15
|
+
return computed(() => tagConnect(context.value, emit, classes));
|
|
16
|
+
}, "useTag");
|
|
17
|
+
|
|
18
|
+
export {
|
|
19
|
+
useTag
|
|
20
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useTag
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-3TV3WMBK.mjs";
|
|
4
4
|
import {
|
|
5
5
|
tagEmits,
|
|
6
6
|
tagProps
|
|
@@ -8,7 +8,7 @@ import {
|
|
|
8
8
|
|
|
9
9
|
// src/tag.tsx
|
|
10
10
|
import { createVNode as _createVNode } from "vue";
|
|
11
|
-
import { defineComponent
|
|
11
|
+
import { defineComponent } from "vue";
|
|
12
12
|
import { MpButton } from "@mekari/pixel3-button";
|
|
13
13
|
var MpTag = defineComponent({
|
|
14
14
|
name: "MpTag",
|
|
@@ -20,7 +20,7 @@ var MpTag = defineComponent({
|
|
|
20
20
|
}) {
|
|
21
21
|
const {
|
|
22
22
|
as: Component
|
|
23
|
-
} =
|
|
23
|
+
} = props;
|
|
24
24
|
const api = useTag(props, emit);
|
|
25
25
|
return () => _createVNode(Component, api.value.rootProps, {
|
|
26
26
|
default: () => {
|
|
@@ -4,14 +4,14 @@ import {
|
|
|
4
4
|
|
|
5
5
|
// src/modules/tag.connects.ts
|
|
6
6
|
import { computed, getCurrentInstance } from "vue";
|
|
7
|
+
import { useId } from "@mekari/pixel3-utils";
|
|
7
8
|
import { cx } from "@mekari/pixel3-styled-system/css";
|
|
8
|
-
function tagConnect(state,
|
|
9
|
+
function tagConnect(state, emit, classes) {
|
|
9
10
|
const {
|
|
10
11
|
id,
|
|
11
|
-
isClosable
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
} = state.context;
|
|
12
|
+
isClosable
|
|
13
|
+
} = state;
|
|
14
|
+
const idx = id != null ? id : `mp-tag-${useId()}`;
|
|
15
15
|
const isClickable = computed(() => {
|
|
16
16
|
var _a, _b;
|
|
17
17
|
return !!((_b = (_a = getCurrentInstance()) == null ? void 0 : _a.vnode.props) == null ? void 0 : _b.onClick);
|
|
@@ -19,8 +19,8 @@ function tagConnect(state, send, classes) {
|
|
|
19
19
|
return {
|
|
20
20
|
isClosable,
|
|
21
21
|
rootProps: {
|
|
22
|
-
id,
|
|
23
|
-
onClick,
|
|
22
|
+
id: idx,
|
|
23
|
+
onClick: (evt) => emit("click", evt),
|
|
24
24
|
class: cx(classes.root, "group"),
|
|
25
25
|
style: {
|
|
26
26
|
"--mp-tag--cursor": isClickable ? "pointer" : void 0
|
|
@@ -28,11 +28,14 @@ function tagConnect(state, send, classes) {
|
|
|
28
28
|
"data-pixel-component": "MpTag"
|
|
29
29
|
},
|
|
30
30
|
closeProps: {
|
|
31
|
-
id: `${
|
|
31
|
+
id: `${idx}-close`,
|
|
32
32
|
variant: "ghost",
|
|
33
33
|
size: "sm",
|
|
34
34
|
leftIcon: "remove-tag",
|
|
35
|
-
onClick:
|
|
35
|
+
onClick: (evt) => {
|
|
36
|
+
evt.stopPropagation();
|
|
37
|
+
emit("close", evt);
|
|
38
|
+
},
|
|
36
39
|
class: classes.close,
|
|
37
40
|
"data-pixel-component": "MpTagClose"
|
|
38
41
|
}
|
package/dist/index.d.mts
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -26,8 +26,8 @@ __export(src_exports, {
|
|
|
26
26
|
module.exports = __toCommonJS(src_exports);
|
|
27
27
|
|
|
28
28
|
// src/tag.tsx
|
|
29
|
+
var import_vue3 = require("vue");
|
|
29
30
|
var import_vue4 = require("vue");
|
|
30
|
-
var import_vue5 = require("vue");
|
|
31
31
|
|
|
32
32
|
// src/modules/tag.props.ts
|
|
33
33
|
var import_pixel3_utils = require("@mekari/pixel3-utils");
|
|
@@ -56,32 +56,18 @@ var tagEmits = (0, import_pixel3_utils.declareEmit)(["click", "close"]);
|
|
|
56
56
|
|
|
57
57
|
// src/modules/tag.hooks.ts
|
|
58
58
|
var import_vue2 = require("vue");
|
|
59
|
-
var import_vue3 = require("@xstate/vue");
|
|
60
|
-
var import_pixel3_utils2 = require("@mekari/pixel3-utils");
|
|
61
59
|
var import_recipes = require("@mekari/pixel3-styled-system/recipes");
|
|
62
60
|
|
|
63
|
-
// src/modules/tag.machines.ts
|
|
64
|
-
var import_xstate = require("xstate");
|
|
65
|
-
function tagMachine(context) {
|
|
66
|
-
return (0, import_xstate.createMachine)({
|
|
67
|
-
/** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgBcBDKfEABy1gEsDqsMyAPRARgCZ0BPN95f5EA */
|
|
68
|
-
id: "tag",
|
|
69
|
-
context,
|
|
70
|
-
predictableActionArguments: true
|
|
71
|
-
});
|
|
72
|
-
}
|
|
73
|
-
__name(tagMachine, "tagMachine");
|
|
74
|
-
|
|
75
61
|
// src/modules/tag.connects.ts
|
|
76
62
|
var import_vue = require("vue");
|
|
63
|
+
var import_pixel3_utils2 = require("@mekari/pixel3-utils");
|
|
77
64
|
var import_css = require("@mekari/pixel3-styled-system/css");
|
|
78
|
-
function tagConnect(state,
|
|
65
|
+
function tagConnect(state, emit, classes) {
|
|
79
66
|
const {
|
|
80
67
|
id,
|
|
81
|
-
isClosable
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
} = state.context;
|
|
68
|
+
isClosable
|
|
69
|
+
} = state;
|
|
70
|
+
const idx = id != null ? id : `mp-tag-${(0, import_pixel3_utils2.useId)()}`;
|
|
85
71
|
const isClickable = (0, import_vue.computed)(() => {
|
|
86
72
|
var _a, _b;
|
|
87
73
|
return !!((_b = (_a = (0, import_vue.getCurrentInstance)()) == null ? void 0 : _a.vnode.props) == null ? void 0 : _b.onClick);
|
|
@@ -89,8 +75,8 @@ function tagConnect(state, send, classes) {
|
|
|
89
75
|
return {
|
|
90
76
|
isClosable,
|
|
91
77
|
rootProps: {
|
|
92
|
-
id,
|
|
93
|
-
onClick,
|
|
78
|
+
id: idx,
|
|
79
|
+
onClick: (evt) => emit("click", evt),
|
|
94
80
|
class: (0, import_css.cx)(classes.root, "group"),
|
|
95
81
|
style: {
|
|
96
82
|
"--mp-tag--cursor": isClickable ? "pointer" : void 0
|
|
@@ -98,11 +84,14 @@ function tagConnect(state, send, classes) {
|
|
|
98
84
|
"data-pixel-component": "MpTag"
|
|
99
85
|
},
|
|
100
86
|
closeProps: {
|
|
101
|
-
id: `${
|
|
87
|
+
id: `${idx}-close`,
|
|
102
88
|
variant: "ghost",
|
|
103
89
|
size: "sm",
|
|
104
90
|
leftIcon: "remove-tag",
|
|
105
|
-
onClick:
|
|
91
|
+
onClick: (evt) => {
|
|
92
|
+
evt.stopPropagation();
|
|
93
|
+
emit("close", evt);
|
|
94
|
+
},
|
|
106
95
|
class: classes.close,
|
|
107
96
|
"data-pixel-component": "MpTagClose"
|
|
108
97
|
}
|
|
@@ -112,28 +101,15 @@ __name(tagConnect, "tagConnect");
|
|
|
112
101
|
|
|
113
102
|
// src/modules/tag.hooks.ts
|
|
114
103
|
var useTag = /* @__PURE__ */ __name((props, emit) => {
|
|
115
|
-
var _a;
|
|
116
104
|
const context = (0, import_vue2.ref)(props);
|
|
117
|
-
const
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
} = (0, import_vue3.useMachine)(tagMachine({
|
|
121
|
-
...context.value,
|
|
122
|
-
id: (_a = context.value.id) != null ? _a : `mp-tag-${(0, import_pixel3_utils2.useId)()}`,
|
|
123
|
-
onClick: (evt) => emit("click", evt),
|
|
124
|
-
onClose: (evt) => {
|
|
125
|
-
evt.stopPropagation();
|
|
126
|
-
emit("close", evt);
|
|
127
|
-
}
|
|
128
|
-
}));
|
|
129
|
-
const [tagProps2] = import_recipes.tagSlotRecipe.splitVariantProps(context.value);
|
|
130
|
-
const classes = (0, import_recipes.tagSlotRecipe)(tagProps2);
|
|
131
|
-
return (0, import_vue2.computed)(() => tagConnect(state.value, send, classes));
|
|
105
|
+
const [value] = import_recipes.tagSlotRecipe.splitVariantProps(context.value);
|
|
106
|
+
const classes = (0, import_recipes.tagSlotRecipe)(value);
|
|
107
|
+
return (0, import_vue2.computed)(() => tagConnect(context.value, emit, classes));
|
|
132
108
|
}, "useTag");
|
|
133
109
|
|
|
134
110
|
// src/tag.tsx
|
|
135
111
|
var import_pixel3_button = require("@mekari/pixel3-button");
|
|
136
|
-
var MpTag = (0,
|
|
112
|
+
var MpTag = (0, import_vue4.defineComponent)({
|
|
137
113
|
name: "MpTag",
|
|
138
114
|
props: tagProps,
|
|
139
115
|
emits: tagEmits,
|
|
@@ -143,12 +119,12 @@ var MpTag = (0, import_vue5.defineComponent)({
|
|
|
143
119
|
}) {
|
|
144
120
|
const {
|
|
145
121
|
as: Component
|
|
146
|
-
} =
|
|
122
|
+
} = props;
|
|
147
123
|
const api = useTag(props, emit);
|
|
148
|
-
return () => (0,
|
|
124
|
+
return () => (0, import_vue3.createVNode)(Component, api.value.rootProps, {
|
|
149
125
|
default: () => {
|
|
150
126
|
var _a;
|
|
151
|
-
return [(_a = slots.default) == null ? void 0 : _a.call(slots), api.value.isClosable && (0,
|
|
127
|
+
return [(_a = slots.default) == null ? void 0 : _a.call(slots), api.value.isClosable && (0, import_vue3.createVNode)(import_pixel3_button.MpButton, api.value.closeProps, null)];
|
|
152
128
|
}
|
|
153
129
|
});
|
|
154
130
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import {
|
|
2
2
|
MpTag
|
|
3
|
-
} from "./chunk-
|
|
4
|
-
import "./chunk-
|
|
5
|
-
import "./chunk-
|
|
6
|
-
import "./chunk-AGP5VIAA.mjs";
|
|
3
|
+
} from "./chunk-OPTBEC5V.mjs";
|
|
4
|
+
import "./chunk-3TV3WMBK.mjs";
|
|
5
|
+
import "./chunk-SKG5Z6SC.mjs";
|
|
7
6
|
import "./chunk-Q6L3MIBC.mjs";
|
|
8
7
|
import "./chunk-QZ7VFGWC.mjs";
|
|
9
8
|
export {
|
package/dist/metafile-cjs.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/modules/tag.props.ts":{"bytes":
|
|
1
|
+
{"inputs":{"src/modules/tag.props.ts":{"bytes":997,"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"format":"esm"},"src/modules/tag.connects.ts":{"bytes":1211,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"./tag.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/tag.hooks.ts":{"bytes":606,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"src/modules/tag.connects.ts","kind":"import-statement","original":"./tag.connects"},{"path":"./tag.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/tag.tsx":{"bytes":856,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/tag.props.ts","kind":"import-statement","original":"./modules/tag.props"},{"path":"src/modules/tag.hooks.ts","kind":"import-statement","original":"./modules/tag.hooks"},{"path":"@mekari/pixel3-button","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":163,"imports":[{"path":"src/tag.tsx","kind":"import-statement","original":"./tag"}],"format":"esm"},"src/modules/tag.types.ts":{"bytes":792,"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"format":"esm"}},"outputs":{"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"@mekari/pixel3-button","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":115},"src/tag.tsx":{"bytesInOutput":688},"src/modules/tag.props.ts":{"bytesInOutput":400},"src/modules/tag.hooks.ts":{"bytesInOutput":445},"src/modules/tag.connects.ts":{"bytesInOutput":1155}},"bytes":3959},"dist/tag.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"@mekari/pixel3-button","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/tag.tsx","inputs":{"src/tag.tsx":{"bytesInOutput":803},"src/modules/tag.props.ts":{"bytesInOutput":400},"src/modules/tag.hooks.ts":{"bytesInOutput":445},"src/modules/tag.connects.ts":{"bytesInOutput":1155}},"bytes":3942},"dist/modules/tag.connects.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/tag.connects.ts","inputs":{"src/modules/tag.connects.ts":{"bytesInOutput":1305}},"bytes":2330},"dist/modules/tag.hooks.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/tag.hooks.ts","inputs":{"src/modules/tag.hooks.ts":{"bytesInOutput":580},"src/modules/tag.connects.ts":{"bytesInOutput":1153}},"bytes":2812},"dist/modules/tag.props.js":{"imports":[{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/tag.props.ts","inputs":{"src/modules/tag.props.ts":{"bytesInOutput":567}},"bytes":1509},"dist/modules/tag.types.js":{"imports":[],"exports":[],"entryPoint":"src/modules/tag.types.ts","inputs":{"src/modules/tag.types.ts":{"bytesInOutput":78}},"bytes":778}}}
|
package/dist/metafile-esm.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/modules/tag.props.ts":{"bytes":
|
|
1
|
+
{"inputs":{"src/modules/tag.props.ts":{"bytes":997,"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"format":"esm"},"src/modules/tag.connects.ts":{"bytes":1211,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"./tag.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/tag.hooks.ts":{"bytes":606,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"src/modules/tag.connects.ts","kind":"import-statement","original":"./tag.connects"},{"path":"./tag.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/tag.tsx":{"bytes":856,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/tag.props.ts","kind":"import-statement","original":"./modules/tag.props"},{"path":"src/modules/tag.hooks.ts","kind":"import-statement","original":"./modules/tag.hooks"},{"path":"@mekari/pixel3-button","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":163,"imports":[{"path":"src/tag.tsx","kind":"import-statement","original":"./tag"}],"format":"esm"},"src/modules/tag.types.ts":{"bytes":792,"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"format":"esm"}},"outputs":{"dist/index.mjs":{"imports":[{"path":"dist/chunk-OPTBEC5V.mjs","kind":"import-statement"},{"path":"dist/chunk-3TV3WMBK.mjs","kind":"import-statement"},{"path":"dist/chunk-SKG5Z6SC.mjs","kind":"import-statement"},{"path":"dist/chunk-Q6L3MIBC.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpTag"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":192},"dist/tag.mjs":{"imports":[{"path":"dist/chunk-OPTBEC5V.mjs","kind":"import-statement"},{"path":"dist/chunk-3TV3WMBK.mjs","kind":"import-statement"},{"path":"dist/chunk-SKG5Z6SC.mjs","kind":"import-statement"},{"path":"dist/chunk-Q6L3MIBC.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpTag"],"entryPoint":"src/tag.tsx","inputs":{},"bytes":192},"dist/chunk-OPTBEC5V.mjs":{"imports":[{"path":"dist/chunk-3TV3WMBK.mjs","kind":"import-statement"},{"path":"dist/chunk-Q6L3MIBC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-button","kind":"import-statement","external":true}],"exports":["MpTag"],"inputs":{"src/tag.tsx":{"bytesInOutput":629}},"bytes":778},"dist/modules/tag.connects.mjs":{"imports":[{"path":"dist/chunk-SKG5Z6SC.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["tagConnect"],"entryPoint":"src/modules/tag.connects.ts","inputs":{},"bytes":111},"dist/modules/tag.hooks.mjs":{"imports":[{"path":"dist/chunk-3TV3WMBK.mjs","kind":"import-statement"},{"path":"dist/chunk-SKG5Z6SC.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["useTag"],"entryPoint":"src/modules/tag.hooks.ts","inputs":{},"bytes":135},"dist/chunk-3TV3WMBK.mjs":{"imports":[{"path":"dist/chunk-SKG5Z6SC.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true}],"exports":["useTag"],"inputs":{"src/modules/tag.hooks.ts":{"bytesInOutput":379}},"bytes":532},"dist/chunk-SKG5Z6SC.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true}],"exports":["tagConnect"],"inputs":{"src/modules/tag.connects.ts":{"bytesInOutput":1079}},"bytes":1186},"dist/modules/tag.props.mjs":{"imports":[{"path":"dist/chunk-Q6L3MIBC.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["tagEmits","tagProps"],"entryPoint":"src/modules/tag.props.ts","inputs":{},"bytes":131},"dist/chunk-Q6L3MIBC.mjs":{"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"exports":["tagEmits","tagProps"],"inputs":{"src/modules/tag.props.ts":{"bytesInOutput":368}},"bytes":432},"dist/chunk-QZ7VFGWC.mjs":{"imports":[],"exports":["__name"],"inputs":{},"bytes":151},"dist/modules/tag.types.mjs":{"imports":[],"exports":[],"entryPoint":"src/modules/tag.types.ts","inputs":{"src/modules/tag.types.ts":{"bytesInOutput":0}},"bytes":0}}}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { TagState,
|
|
1
|
+
import { TagState, TagClasses, TagApiMachine } from './tag.types.mjs';
|
|
2
2
|
import '@mekari/pixel3-utils';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Exported tag connects.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
declare function tagConnect(state: TagState,
|
|
8
|
+
declare function tagConnect(state: TagState, emit: CallableFunction, classes: TagClasses): TagApiMachine;
|
|
9
9
|
|
|
10
10
|
export { tagConnect };
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { TagState,
|
|
1
|
+
import { TagState, TagClasses, TagApiMachine } from './tag.types.js';
|
|
2
2
|
import '@mekari/pixel3-utils';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Exported tag connects.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
declare function tagConnect(state: TagState,
|
|
8
|
+
declare function tagConnect(state: TagState, emit: CallableFunction, classes: TagClasses): TagApiMachine;
|
|
9
9
|
|
|
10
10
|
export { tagConnect };
|
|
@@ -25,14 +25,14 @@ __export(tag_connects_exports, {
|
|
|
25
25
|
});
|
|
26
26
|
module.exports = __toCommonJS(tag_connects_exports);
|
|
27
27
|
var import_vue = require("vue");
|
|
28
|
+
var import_pixel3_utils = require("@mekari/pixel3-utils");
|
|
28
29
|
var import_css = require("@mekari/pixel3-styled-system/css");
|
|
29
|
-
function tagConnect(state,
|
|
30
|
+
function tagConnect(state, emit, classes) {
|
|
30
31
|
const {
|
|
31
32
|
id,
|
|
32
|
-
isClosable
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
} = state.context;
|
|
33
|
+
isClosable
|
|
34
|
+
} = state;
|
|
35
|
+
const idx = id != null ? id : `mp-tag-${(0, import_pixel3_utils.useId)()}`;
|
|
36
36
|
const isClickable = (0, import_vue.computed)(() => {
|
|
37
37
|
var _a, _b;
|
|
38
38
|
return !!((_b = (_a = (0, import_vue.getCurrentInstance)()) == null ? void 0 : _a.vnode.props) == null ? void 0 : _b.onClick);
|
|
@@ -40,8 +40,8 @@ function tagConnect(state, send, classes) {
|
|
|
40
40
|
return {
|
|
41
41
|
isClosable,
|
|
42
42
|
rootProps: {
|
|
43
|
-
id,
|
|
44
|
-
onClick,
|
|
43
|
+
id: idx,
|
|
44
|
+
onClick: (evt) => emit("click", evt),
|
|
45
45
|
class: (0, import_css.cx)(classes.root, "group"),
|
|
46
46
|
style: {
|
|
47
47
|
"--mp-tag--cursor": isClickable ? "pointer" : void 0
|
|
@@ -49,11 +49,14 @@ function tagConnect(state, send, classes) {
|
|
|
49
49
|
"data-pixel-component": "MpTag"
|
|
50
50
|
},
|
|
51
51
|
closeProps: {
|
|
52
|
-
id: `${
|
|
52
|
+
id: `${idx}-close`,
|
|
53
53
|
variant: "ghost",
|
|
54
54
|
size: "sm",
|
|
55
55
|
leftIcon: "remove-tag",
|
|
56
|
-
onClick:
|
|
56
|
+
onClick: (evt) => {
|
|
57
|
+
evt.stopPropagation();
|
|
58
|
+
emit("close", evt);
|
|
59
|
+
},
|
|
57
60
|
class: classes.close,
|
|
58
61
|
"data-pixel-component": "MpTagClose"
|
|
59
62
|
}
|
|
@@ -25,32 +25,18 @@ __export(tag_hooks_exports, {
|
|
|
25
25
|
});
|
|
26
26
|
module.exports = __toCommonJS(tag_hooks_exports);
|
|
27
27
|
var import_vue2 = require("vue");
|
|
28
|
-
var import_vue3 = require("@xstate/vue");
|
|
29
|
-
var import_pixel3_utils = require("@mekari/pixel3-utils");
|
|
30
28
|
var import_recipes = require("@mekari/pixel3-styled-system/recipes");
|
|
31
29
|
|
|
32
|
-
// src/modules/tag.machines.ts
|
|
33
|
-
var import_xstate = require("xstate");
|
|
34
|
-
function tagMachine(context) {
|
|
35
|
-
return (0, import_xstate.createMachine)({
|
|
36
|
-
/** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgBcBDKfEABy1gEsDqsMyAPRARgCZ0BPN95f5EA */
|
|
37
|
-
id: "tag",
|
|
38
|
-
context,
|
|
39
|
-
predictableActionArguments: true
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
__name(tagMachine, "tagMachine");
|
|
43
|
-
|
|
44
30
|
// src/modules/tag.connects.ts
|
|
45
31
|
var import_vue = require("vue");
|
|
32
|
+
var import_pixel3_utils = require("@mekari/pixel3-utils");
|
|
46
33
|
var import_css = require("@mekari/pixel3-styled-system/css");
|
|
47
|
-
function tagConnect(state,
|
|
34
|
+
function tagConnect(state, emit, classes) {
|
|
48
35
|
const {
|
|
49
36
|
id,
|
|
50
|
-
isClosable
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
} = state.context;
|
|
37
|
+
isClosable
|
|
38
|
+
} = state;
|
|
39
|
+
const idx = id != null ? id : `mp-tag-${(0, import_pixel3_utils.useId)()}`;
|
|
54
40
|
const isClickable = (0, import_vue.computed)(() => {
|
|
55
41
|
var _a, _b;
|
|
56
42
|
return !!((_b = (_a = (0, import_vue.getCurrentInstance)()) == null ? void 0 : _a.vnode.props) == null ? void 0 : _b.onClick);
|
|
@@ -58,8 +44,8 @@ function tagConnect(state, send, classes) {
|
|
|
58
44
|
return {
|
|
59
45
|
isClosable,
|
|
60
46
|
rootProps: {
|
|
61
|
-
id,
|
|
62
|
-
onClick,
|
|
47
|
+
id: idx,
|
|
48
|
+
onClick: (evt) => emit("click", evt),
|
|
63
49
|
class: (0, import_css.cx)(classes.root, "group"),
|
|
64
50
|
style: {
|
|
65
51
|
"--mp-tag--cursor": isClickable ? "pointer" : void 0
|
|
@@ -67,11 +53,14 @@ function tagConnect(state, send, classes) {
|
|
|
67
53
|
"data-pixel-component": "MpTag"
|
|
68
54
|
},
|
|
69
55
|
closeProps: {
|
|
70
|
-
id: `${
|
|
56
|
+
id: `${idx}-close`,
|
|
71
57
|
variant: "ghost",
|
|
72
58
|
size: "sm",
|
|
73
59
|
leftIcon: "remove-tag",
|
|
74
|
-
onClick:
|
|
60
|
+
onClick: (evt) => {
|
|
61
|
+
evt.stopPropagation();
|
|
62
|
+
emit("close", evt);
|
|
63
|
+
},
|
|
75
64
|
class: classes.close,
|
|
76
65
|
"data-pixel-component": "MpTagClose"
|
|
77
66
|
}
|
|
@@ -81,23 +70,10 @@ __name(tagConnect, "tagConnect");
|
|
|
81
70
|
|
|
82
71
|
// src/modules/tag.hooks.ts
|
|
83
72
|
var useTag = /* @__PURE__ */ __name((props, emit) => {
|
|
84
|
-
var _a;
|
|
85
73
|
const context = (0, import_vue2.ref)(props);
|
|
86
|
-
const
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
} = (0, import_vue3.useMachine)(tagMachine({
|
|
90
|
-
...context.value,
|
|
91
|
-
id: (_a = context.value.id) != null ? _a : `mp-tag-${(0, import_pixel3_utils.useId)()}`,
|
|
92
|
-
onClick: (evt) => emit("click", evt),
|
|
93
|
-
onClose: (evt) => {
|
|
94
|
-
evt.stopPropagation();
|
|
95
|
-
emit("close", evt);
|
|
96
|
-
}
|
|
97
|
-
}));
|
|
98
|
-
const [tagProps] = import_recipes.tagSlotRecipe.splitVariantProps(context.value);
|
|
99
|
-
const classes = (0, import_recipes.tagSlotRecipe)(tagProps);
|
|
100
|
-
return (0, import_vue2.computed)(() => tagConnect(state.value, send, classes));
|
|
74
|
+
const [value] = import_recipes.tagSlotRecipe.splitVariantProps(context.value);
|
|
75
|
+
const classes = (0, import_recipes.tagSlotRecipe)(value);
|
|
76
|
+
return (0, import_vue2.computed)(() => tagConnect(context.value, emit, classes));
|
|
101
77
|
}, "useTag");
|
|
102
78
|
// Annotate the CommonJS export names for ESM import in node:
|
|
103
79
|
0 && (module.exports = {
|
|
@@ -1,28 +1,30 @@
|
|
|
1
1
|
import { TagSize, TagVariant } from './tag.types.mjs';
|
|
2
|
-
import { PropType } from 'vue';
|
|
3
|
-
import '@mekari/pixel3-utils';
|
|
2
|
+
import { PropType, ExtractPublicPropTypes } from 'vue';
|
|
3
|
+
import { ComponentWithProps } from '@mekari/pixel3-utils';
|
|
4
4
|
|
|
5
5
|
declare const tagProps: {
|
|
6
|
-
as: {
|
|
7
|
-
type: PropType<keyof HTMLElementTagNameMap>;
|
|
8
|
-
default:
|
|
6
|
+
readonly as: {
|
|
7
|
+
readonly type: PropType<keyof HTMLElementTagNameMap>;
|
|
8
|
+
readonly default: "button";
|
|
9
9
|
};
|
|
10
|
-
id: {
|
|
11
|
-
type: PropType<string | undefined>;
|
|
10
|
+
readonly id: {
|
|
11
|
+
readonly type: PropType<string | undefined>;
|
|
12
12
|
};
|
|
13
|
-
size: {
|
|
14
|
-
type: PropType<TagSize | undefined>;
|
|
15
|
-
default:
|
|
13
|
+
readonly size: {
|
|
14
|
+
readonly type: PropType<TagSize | undefined>;
|
|
15
|
+
readonly default: "md";
|
|
16
16
|
};
|
|
17
|
-
variant: {
|
|
18
|
-
type: PropType<TagVariant | undefined>;
|
|
19
|
-
default:
|
|
17
|
+
readonly variant: {
|
|
18
|
+
readonly type: PropType<TagVariant | undefined>;
|
|
19
|
+
readonly default: "gray";
|
|
20
20
|
};
|
|
21
|
-
isClosable: {
|
|
22
|
-
type: PropType<boolean | undefined>;
|
|
23
|
-
default:
|
|
21
|
+
readonly isClosable: {
|
|
22
|
+
readonly type: PropType<boolean | undefined>;
|
|
23
|
+
readonly default: false;
|
|
24
24
|
};
|
|
25
25
|
};
|
|
26
26
|
declare const tagEmits: ("click" | "close")[];
|
|
27
|
+
type TagPropsType = ExtractPublicPropTypes<typeof tagProps>;
|
|
28
|
+
type MpTagType = ComponentWithProps<TagPropsType>;
|
|
27
29
|
|
|
28
|
-
export { tagEmits, tagProps };
|
|
30
|
+
export { MpTagType, TagPropsType, tagEmits, tagProps };
|
|
@@ -1,28 +1,30 @@
|
|
|
1
1
|
import { TagSize, TagVariant } from './tag.types.js';
|
|
2
|
-
import { PropType } from 'vue';
|
|
3
|
-
import '@mekari/pixel3-utils';
|
|
2
|
+
import { PropType, ExtractPublicPropTypes } from 'vue';
|
|
3
|
+
import { ComponentWithProps } from '@mekari/pixel3-utils';
|
|
4
4
|
|
|
5
5
|
declare const tagProps: {
|
|
6
|
-
as: {
|
|
7
|
-
type: PropType<keyof HTMLElementTagNameMap>;
|
|
8
|
-
default:
|
|
6
|
+
readonly as: {
|
|
7
|
+
readonly type: PropType<keyof HTMLElementTagNameMap>;
|
|
8
|
+
readonly default: "button";
|
|
9
9
|
};
|
|
10
|
-
id: {
|
|
11
|
-
type: PropType<string | undefined>;
|
|
10
|
+
readonly id: {
|
|
11
|
+
readonly type: PropType<string | undefined>;
|
|
12
12
|
};
|
|
13
|
-
size: {
|
|
14
|
-
type: PropType<TagSize | undefined>;
|
|
15
|
-
default:
|
|
13
|
+
readonly size: {
|
|
14
|
+
readonly type: PropType<TagSize | undefined>;
|
|
15
|
+
readonly default: "md";
|
|
16
16
|
};
|
|
17
|
-
variant: {
|
|
18
|
-
type: PropType<TagVariant | undefined>;
|
|
19
|
-
default:
|
|
17
|
+
readonly variant: {
|
|
18
|
+
readonly type: PropType<TagVariant | undefined>;
|
|
19
|
+
readonly default: "gray";
|
|
20
20
|
};
|
|
21
|
-
isClosable: {
|
|
22
|
-
type: PropType<boolean | undefined>;
|
|
23
|
-
default:
|
|
21
|
+
readonly isClosable: {
|
|
22
|
+
readonly type: PropType<boolean | undefined>;
|
|
23
|
+
readonly default: false;
|
|
24
24
|
};
|
|
25
25
|
};
|
|
26
26
|
declare const tagEmits: ("click" | "close")[];
|
|
27
|
+
type TagPropsType = ExtractPublicPropTypes<typeof tagProps>;
|
|
28
|
+
type MpTagType = ComponentWithProps<TagPropsType>;
|
|
27
29
|
|
|
28
|
-
export { tagEmits, tagProps };
|
|
30
|
+
export { MpTagType, TagPropsType, tagEmits, tagProps };
|
|
@@ -24,9 +24,7 @@ interface TagClasses {
|
|
|
24
24
|
root?: string;
|
|
25
25
|
close?: string;
|
|
26
26
|
}
|
|
27
|
-
interface TagState {
|
|
28
|
-
context: TagProps;
|
|
27
|
+
interface TagState extends TagProps {
|
|
29
28
|
}
|
|
30
|
-
type TagSend = CallableFunction;
|
|
31
29
|
|
|
32
|
-
export { TagApiMachine, TagClasses, TagDefinedContext, TagProps,
|
|
30
|
+
export { TagApiMachine, TagClasses, TagDefinedContext, TagProps, TagSize, TagState, TagVariant };
|
|
@@ -24,9 +24,7 @@ interface TagClasses {
|
|
|
24
24
|
root?: string;
|
|
25
25
|
close?: string;
|
|
26
26
|
}
|
|
27
|
-
interface TagState {
|
|
28
|
-
context: TagProps;
|
|
27
|
+
interface TagState extends TagProps {
|
|
29
28
|
}
|
|
30
|
-
type TagSend = CallableFunction;
|
|
31
29
|
|
|
32
|
-
export { TagApiMachine, TagClasses, TagDefinedContext, TagProps,
|
|
30
|
+
export { TagApiMachine, TagClasses, TagDefinedContext, TagProps, TagSize, TagState, TagVariant };
|
package/dist/tag.d.mts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as vue_jsx_runtime from 'vue/jsx-runtime';
|
|
1
2
|
import { TagSize, TagVariant } from './modules/tag.types.mjs';
|
|
2
3
|
import * as vue from 'vue';
|
|
3
4
|
import '@mekari/pixel3-utils';
|
|
@@ -6,53 +7,53 @@ import '@mekari/pixel3-utils';
|
|
|
6
7
|
* MpTag component used to display label that can optionally be selected and unselected or removed.
|
|
7
8
|
*/
|
|
8
9
|
declare const MpTag: vue.DefineComponent<{
|
|
9
|
-
as: {
|
|
10
|
-
type: vue.PropType<keyof HTMLElementTagNameMap>;
|
|
11
|
-
default:
|
|
10
|
+
readonly as: {
|
|
11
|
+
readonly type: vue.PropType<keyof HTMLElementTagNameMap>;
|
|
12
|
+
readonly default: "button";
|
|
12
13
|
};
|
|
13
|
-
id: {
|
|
14
|
-
type: vue.PropType<string | undefined>;
|
|
14
|
+
readonly id: {
|
|
15
|
+
readonly type: vue.PropType<string | undefined>;
|
|
15
16
|
};
|
|
16
|
-
size: {
|
|
17
|
-
type: vue.PropType<TagSize | undefined>;
|
|
18
|
-
default:
|
|
17
|
+
readonly size: {
|
|
18
|
+
readonly type: vue.PropType<TagSize | undefined>;
|
|
19
|
+
readonly default: "md";
|
|
19
20
|
};
|
|
20
|
-
variant: {
|
|
21
|
-
type: vue.PropType<TagVariant | undefined>;
|
|
22
|
-
default:
|
|
21
|
+
readonly variant: {
|
|
22
|
+
readonly type: vue.PropType<TagVariant | undefined>;
|
|
23
|
+
readonly default: "gray";
|
|
23
24
|
};
|
|
24
|
-
isClosable: {
|
|
25
|
-
type: vue.PropType<boolean | undefined>;
|
|
26
|
-
default:
|
|
25
|
+
readonly isClosable: {
|
|
26
|
+
readonly type: vue.PropType<boolean | undefined>;
|
|
27
|
+
readonly default: false;
|
|
27
28
|
};
|
|
28
|
-
}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("click" | "close")[], "click" | "close", vue.
|
|
29
|
-
as: {
|
|
30
|
-
type: vue.PropType<keyof HTMLElementTagNameMap>;
|
|
31
|
-
default:
|
|
29
|
+
}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("click" | "close")[], "click" | "close", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
30
|
+
readonly as: {
|
|
31
|
+
readonly type: vue.PropType<keyof HTMLElementTagNameMap>;
|
|
32
|
+
readonly default: "button";
|
|
32
33
|
};
|
|
33
|
-
id: {
|
|
34
|
-
type: vue.PropType<string | undefined>;
|
|
34
|
+
readonly id: {
|
|
35
|
+
readonly type: vue.PropType<string | undefined>;
|
|
35
36
|
};
|
|
36
|
-
size: {
|
|
37
|
-
type: vue.PropType<TagSize | undefined>;
|
|
38
|
-
default:
|
|
37
|
+
readonly size: {
|
|
38
|
+
readonly type: vue.PropType<TagSize | undefined>;
|
|
39
|
+
readonly default: "md";
|
|
39
40
|
};
|
|
40
|
-
variant: {
|
|
41
|
-
type: vue.PropType<TagVariant | undefined>;
|
|
42
|
-
default:
|
|
41
|
+
readonly variant: {
|
|
42
|
+
readonly type: vue.PropType<TagVariant | undefined>;
|
|
43
|
+
readonly default: "gray";
|
|
43
44
|
};
|
|
44
|
-
isClosable: {
|
|
45
|
-
type: vue.PropType<boolean | undefined>;
|
|
46
|
-
default:
|
|
45
|
+
readonly isClosable: {
|
|
46
|
+
readonly type: vue.PropType<boolean | undefined>;
|
|
47
|
+
readonly default: false;
|
|
47
48
|
};
|
|
48
49
|
}>> & {
|
|
49
50
|
onClick?: ((...args: any[]) => any) | undefined;
|
|
50
51
|
onClose?: ((...args: any[]) => any) | undefined;
|
|
51
52
|
}, {
|
|
52
|
-
size: TagSize | undefined;
|
|
53
|
-
variant: TagVariant | undefined;
|
|
54
|
-
isClosable: boolean | undefined;
|
|
55
|
-
as: keyof HTMLElementTagNameMap;
|
|
53
|
+
readonly size: TagSize | undefined;
|
|
54
|
+
readonly variant: TagVariant | undefined;
|
|
55
|
+
readonly isClosable: boolean | undefined;
|
|
56
|
+
readonly as: keyof HTMLElementTagNameMap;
|
|
56
57
|
}, {}>;
|
|
57
58
|
|
|
58
59
|
export { MpTag };
|
package/dist/tag.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as vue_jsx_runtime from 'vue/jsx-runtime';
|
|
1
2
|
import { TagSize, TagVariant } from './modules/tag.types.js';
|
|
2
3
|
import * as vue from 'vue';
|
|
3
4
|
import '@mekari/pixel3-utils';
|
|
@@ -6,53 +7,53 @@ import '@mekari/pixel3-utils';
|
|
|
6
7
|
* MpTag component used to display label that can optionally be selected and unselected or removed.
|
|
7
8
|
*/
|
|
8
9
|
declare const MpTag: vue.DefineComponent<{
|
|
9
|
-
as: {
|
|
10
|
-
type: vue.PropType<keyof HTMLElementTagNameMap>;
|
|
11
|
-
default:
|
|
10
|
+
readonly as: {
|
|
11
|
+
readonly type: vue.PropType<keyof HTMLElementTagNameMap>;
|
|
12
|
+
readonly default: "button";
|
|
12
13
|
};
|
|
13
|
-
id: {
|
|
14
|
-
type: vue.PropType<string | undefined>;
|
|
14
|
+
readonly id: {
|
|
15
|
+
readonly type: vue.PropType<string | undefined>;
|
|
15
16
|
};
|
|
16
|
-
size: {
|
|
17
|
-
type: vue.PropType<TagSize | undefined>;
|
|
18
|
-
default:
|
|
17
|
+
readonly size: {
|
|
18
|
+
readonly type: vue.PropType<TagSize | undefined>;
|
|
19
|
+
readonly default: "md";
|
|
19
20
|
};
|
|
20
|
-
variant: {
|
|
21
|
-
type: vue.PropType<TagVariant | undefined>;
|
|
22
|
-
default:
|
|
21
|
+
readonly variant: {
|
|
22
|
+
readonly type: vue.PropType<TagVariant | undefined>;
|
|
23
|
+
readonly default: "gray";
|
|
23
24
|
};
|
|
24
|
-
isClosable: {
|
|
25
|
-
type: vue.PropType<boolean | undefined>;
|
|
26
|
-
default:
|
|
25
|
+
readonly isClosable: {
|
|
26
|
+
readonly type: vue.PropType<boolean | undefined>;
|
|
27
|
+
readonly default: false;
|
|
27
28
|
};
|
|
28
|
-
}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("click" | "close")[], "click" | "close", vue.
|
|
29
|
-
as: {
|
|
30
|
-
type: vue.PropType<keyof HTMLElementTagNameMap>;
|
|
31
|
-
default:
|
|
29
|
+
}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("click" | "close")[], "click" | "close", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
30
|
+
readonly as: {
|
|
31
|
+
readonly type: vue.PropType<keyof HTMLElementTagNameMap>;
|
|
32
|
+
readonly default: "button";
|
|
32
33
|
};
|
|
33
|
-
id: {
|
|
34
|
-
type: vue.PropType<string | undefined>;
|
|
34
|
+
readonly id: {
|
|
35
|
+
readonly type: vue.PropType<string | undefined>;
|
|
35
36
|
};
|
|
36
|
-
size: {
|
|
37
|
-
type: vue.PropType<TagSize | undefined>;
|
|
38
|
-
default:
|
|
37
|
+
readonly size: {
|
|
38
|
+
readonly type: vue.PropType<TagSize | undefined>;
|
|
39
|
+
readonly default: "md";
|
|
39
40
|
};
|
|
40
|
-
variant: {
|
|
41
|
-
type: vue.PropType<TagVariant | undefined>;
|
|
42
|
-
default:
|
|
41
|
+
readonly variant: {
|
|
42
|
+
readonly type: vue.PropType<TagVariant | undefined>;
|
|
43
|
+
readonly default: "gray";
|
|
43
44
|
};
|
|
44
|
-
isClosable: {
|
|
45
|
-
type: vue.PropType<boolean | undefined>;
|
|
46
|
-
default:
|
|
45
|
+
readonly isClosable: {
|
|
46
|
+
readonly type: vue.PropType<boolean | undefined>;
|
|
47
|
+
readonly default: false;
|
|
47
48
|
};
|
|
48
49
|
}>> & {
|
|
49
50
|
onClick?: ((...args: any[]) => any) | undefined;
|
|
50
51
|
onClose?: ((...args: any[]) => any) | undefined;
|
|
51
52
|
}, {
|
|
52
|
-
size: TagSize | undefined;
|
|
53
|
-
variant: TagVariant | undefined;
|
|
54
|
-
isClosable: boolean | undefined;
|
|
55
|
-
as: keyof HTMLElementTagNameMap;
|
|
53
|
+
readonly size: TagSize | undefined;
|
|
54
|
+
readonly variant: TagVariant | undefined;
|
|
55
|
+
readonly isClosable: boolean | undefined;
|
|
56
|
+
readonly as: keyof HTMLElementTagNameMap;
|
|
56
57
|
}, {}>;
|
|
57
58
|
|
|
58
59
|
export { MpTag };
|
package/dist/tag.js
CHANGED
|
@@ -24,8 +24,8 @@ __export(tag_exports, {
|
|
|
24
24
|
MpTag: () => MpTag
|
|
25
25
|
});
|
|
26
26
|
module.exports = __toCommonJS(tag_exports);
|
|
27
|
+
var import_vue3 = require("vue");
|
|
27
28
|
var import_vue4 = require("vue");
|
|
28
|
-
var import_vue5 = require("vue");
|
|
29
29
|
|
|
30
30
|
// src/modules/tag.props.ts
|
|
31
31
|
var import_pixel3_utils = require("@mekari/pixel3-utils");
|
|
@@ -54,32 +54,18 @@ var tagEmits = (0, import_pixel3_utils.declareEmit)(["click", "close"]);
|
|
|
54
54
|
|
|
55
55
|
// src/modules/tag.hooks.ts
|
|
56
56
|
var import_vue2 = require("vue");
|
|
57
|
-
var import_vue3 = require("@xstate/vue");
|
|
58
|
-
var import_pixel3_utils2 = require("@mekari/pixel3-utils");
|
|
59
57
|
var import_recipes = require("@mekari/pixel3-styled-system/recipes");
|
|
60
58
|
|
|
61
|
-
// src/modules/tag.machines.ts
|
|
62
|
-
var import_xstate = require("xstate");
|
|
63
|
-
function tagMachine(context) {
|
|
64
|
-
return (0, import_xstate.createMachine)({
|
|
65
|
-
/** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgBcBDKfEABy1gEsDqsMyAPRARgCZ0BPN95f5EA */
|
|
66
|
-
id: "tag",
|
|
67
|
-
context,
|
|
68
|
-
predictableActionArguments: true
|
|
69
|
-
});
|
|
70
|
-
}
|
|
71
|
-
__name(tagMachine, "tagMachine");
|
|
72
|
-
|
|
73
59
|
// src/modules/tag.connects.ts
|
|
74
60
|
var import_vue = require("vue");
|
|
61
|
+
var import_pixel3_utils2 = require("@mekari/pixel3-utils");
|
|
75
62
|
var import_css = require("@mekari/pixel3-styled-system/css");
|
|
76
|
-
function tagConnect(state,
|
|
63
|
+
function tagConnect(state, emit, classes) {
|
|
77
64
|
const {
|
|
78
65
|
id,
|
|
79
|
-
isClosable
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
} = state.context;
|
|
66
|
+
isClosable
|
|
67
|
+
} = state;
|
|
68
|
+
const idx = id != null ? id : `mp-tag-${(0, import_pixel3_utils2.useId)()}`;
|
|
83
69
|
const isClickable = (0, import_vue.computed)(() => {
|
|
84
70
|
var _a, _b;
|
|
85
71
|
return !!((_b = (_a = (0, import_vue.getCurrentInstance)()) == null ? void 0 : _a.vnode.props) == null ? void 0 : _b.onClick);
|
|
@@ -87,8 +73,8 @@ function tagConnect(state, send, classes) {
|
|
|
87
73
|
return {
|
|
88
74
|
isClosable,
|
|
89
75
|
rootProps: {
|
|
90
|
-
id,
|
|
91
|
-
onClick,
|
|
76
|
+
id: idx,
|
|
77
|
+
onClick: (evt) => emit("click", evt),
|
|
92
78
|
class: (0, import_css.cx)(classes.root, "group"),
|
|
93
79
|
style: {
|
|
94
80
|
"--mp-tag--cursor": isClickable ? "pointer" : void 0
|
|
@@ -96,11 +82,14 @@ function tagConnect(state, send, classes) {
|
|
|
96
82
|
"data-pixel-component": "MpTag"
|
|
97
83
|
},
|
|
98
84
|
closeProps: {
|
|
99
|
-
id: `${
|
|
85
|
+
id: `${idx}-close`,
|
|
100
86
|
variant: "ghost",
|
|
101
87
|
size: "sm",
|
|
102
88
|
leftIcon: "remove-tag",
|
|
103
|
-
onClick:
|
|
89
|
+
onClick: (evt) => {
|
|
90
|
+
evt.stopPropagation();
|
|
91
|
+
emit("close", evt);
|
|
92
|
+
},
|
|
104
93
|
class: classes.close,
|
|
105
94
|
"data-pixel-component": "MpTagClose"
|
|
106
95
|
}
|
|
@@ -110,28 +99,15 @@ __name(tagConnect, "tagConnect");
|
|
|
110
99
|
|
|
111
100
|
// src/modules/tag.hooks.ts
|
|
112
101
|
var useTag = /* @__PURE__ */ __name((props, emit) => {
|
|
113
|
-
var _a;
|
|
114
102
|
const context = (0, import_vue2.ref)(props);
|
|
115
|
-
const
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
} = (0, import_vue3.useMachine)(tagMachine({
|
|
119
|
-
...context.value,
|
|
120
|
-
id: (_a = context.value.id) != null ? _a : `mp-tag-${(0, import_pixel3_utils2.useId)()}`,
|
|
121
|
-
onClick: (evt) => emit("click", evt),
|
|
122
|
-
onClose: (evt) => {
|
|
123
|
-
evt.stopPropagation();
|
|
124
|
-
emit("close", evt);
|
|
125
|
-
}
|
|
126
|
-
}));
|
|
127
|
-
const [tagProps2] = import_recipes.tagSlotRecipe.splitVariantProps(context.value);
|
|
128
|
-
const classes = (0, import_recipes.tagSlotRecipe)(tagProps2);
|
|
129
|
-
return (0, import_vue2.computed)(() => tagConnect(state.value, send, classes));
|
|
103
|
+
const [value] = import_recipes.tagSlotRecipe.splitVariantProps(context.value);
|
|
104
|
+
const classes = (0, import_recipes.tagSlotRecipe)(value);
|
|
105
|
+
return (0, import_vue2.computed)(() => tagConnect(context.value, emit, classes));
|
|
130
106
|
}, "useTag");
|
|
131
107
|
|
|
132
108
|
// src/tag.tsx
|
|
133
109
|
var import_pixel3_button = require("@mekari/pixel3-button");
|
|
134
|
-
var MpTag = (0,
|
|
110
|
+
var MpTag = (0, import_vue4.defineComponent)({
|
|
135
111
|
name: "MpTag",
|
|
136
112
|
props: tagProps,
|
|
137
113
|
emits: tagEmits,
|
|
@@ -141,12 +117,12 @@ var MpTag = (0, import_vue5.defineComponent)({
|
|
|
141
117
|
}) {
|
|
142
118
|
const {
|
|
143
119
|
as: Component
|
|
144
|
-
} =
|
|
120
|
+
} = props;
|
|
145
121
|
const api = useTag(props, emit);
|
|
146
|
-
return () => (0,
|
|
122
|
+
return () => (0, import_vue3.createVNode)(Component, api.value.rootProps, {
|
|
147
123
|
default: () => {
|
|
148
124
|
var _a;
|
|
149
|
-
return [(_a = slots.default) == null ? void 0 : _a.call(slots), api.value.isClosable && (0,
|
|
125
|
+
return [(_a = slots.default) == null ? void 0 : _a.call(slots), api.value.isClosable && (0, import_vue3.createVNode)(import_pixel3_button.MpButton, api.value.closeProps, null)];
|
|
150
126
|
}
|
|
151
127
|
});
|
|
152
128
|
}
|
package/dist/tag.mjs
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import {
|
|
2
2
|
MpTag
|
|
3
|
-
} from "./chunk-
|
|
4
|
-
import "./chunk-
|
|
5
|
-
import "./chunk-
|
|
6
|
-
import "./chunk-AGP5VIAA.mjs";
|
|
3
|
+
} from "./chunk-OPTBEC5V.mjs";
|
|
4
|
+
import "./chunk-3TV3WMBK.mjs";
|
|
5
|
+
import "./chunk-SKG5Z6SC.mjs";
|
|
7
6
|
import "./chunk-Q6L3MIBC.mjs";
|
|
8
7
|
import "./chunk-QZ7VFGWC.mjs";
|
|
9
8
|
export {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mekari/pixel3-tag",
|
|
3
3
|
"description": "Mekari Pixel 3 | Tag component is used to display label that can optionally be selected and unselected or removed",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.2",
|
|
5
5
|
"license": "LGPL-3.0",
|
|
6
6
|
"author": "Dirga Prakesha <dirga.prakesha@mekari.com>",
|
|
7
7
|
"sideEffects": false,
|
|
@@ -10,11 +10,9 @@
|
|
|
10
10
|
"dist"
|
|
11
11
|
],
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@
|
|
14
|
-
"
|
|
15
|
-
"@mekari/pixel3-
|
|
16
|
-
"@mekari/pixel3-styled-system": "0.0.1-alpha.0",
|
|
17
|
-
"@mekari/pixel3-utils": "0.0.1-alpha.0"
|
|
13
|
+
"@mekari/pixel3-button": "0.0.2",
|
|
14
|
+
"@mekari/pixel3-styled-system": "0.0.1",
|
|
15
|
+
"@mekari/pixel3-utils": "0.0.2"
|
|
18
16
|
},
|
|
19
17
|
"peerDependencies": {
|
|
20
18
|
"vue": "^3.3.7"
|
|
@@ -38,12 +36,10 @@
|
|
|
38
36
|
"scripts": {
|
|
39
37
|
"clean": "rimraf dist .turbo",
|
|
40
38
|
"build": "tsup && pnpm build:types",
|
|
41
|
-
"build:css": "pnpm build && pnpm css:gen",
|
|
42
39
|
"build:fast": "tsup",
|
|
43
40
|
"build:types": "tsup src --dts-only",
|
|
44
41
|
"build:external": "tsup src/index.tsx --external @acme-org/styled-system",
|
|
45
42
|
"types:check": "tsc --noEmit",
|
|
46
|
-
"css:gen": "panda cssgen --outfile dist/styles.css",
|
|
47
43
|
"replace-config": "clean-package",
|
|
48
44
|
"restore-config": "clean-package restore"
|
|
49
45
|
}
|
package/dist/chunk-AGP5VIAA.mjs
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
__name
|
|
3
|
-
} from "./chunk-QZ7VFGWC.mjs";
|
|
4
|
-
|
|
5
|
-
// src/modules/tag.machines.ts
|
|
6
|
-
import { createMachine } from "xstate";
|
|
7
|
-
function tagMachine(context) {
|
|
8
|
-
return createMachine({
|
|
9
|
-
/** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgBcBDKfEABy1gEsDqsMyAPRARgCZ0BPN95f5EA */
|
|
10
|
-
id: "tag",
|
|
11
|
-
context,
|
|
12
|
-
predictableActionArguments: true
|
|
13
|
-
});
|
|
14
|
-
}
|
|
15
|
-
__name(tagMachine, "tagMachine");
|
|
16
|
-
|
|
17
|
-
export {
|
|
18
|
-
tagMachine
|
|
19
|
-
};
|
package/dist/chunk-J6ICIHXS.mjs
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
tagConnect
|
|
3
|
-
} from "./chunk-ETUG5QZG.mjs";
|
|
4
|
-
import {
|
|
5
|
-
tagMachine
|
|
6
|
-
} from "./chunk-AGP5VIAA.mjs";
|
|
7
|
-
import {
|
|
8
|
-
__name
|
|
9
|
-
} from "./chunk-QZ7VFGWC.mjs";
|
|
10
|
-
|
|
11
|
-
// src/modules/tag.hooks.ts
|
|
12
|
-
import { computed, ref } from "vue";
|
|
13
|
-
import { useMachine } from "@xstate/vue";
|
|
14
|
-
import { useId } from "@mekari/pixel3-utils";
|
|
15
|
-
import { tagSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
|
|
16
|
-
var useTag = /* @__PURE__ */ __name((props, emit) => {
|
|
17
|
-
var _a;
|
|
18
|
-
const context = ref(props);
|
|
19
|
-
const {
|
|
20
|
-
state,
|
|
21
|
-
send
|
|
22
|
-
} = useMachine(tagMachine({
|
|
23
|
-
...context.value,
|
|
24
|
-
id: (_a = context.value.id) != null ? _a : `mp-tag-${useId()}`,
|
|
25
|
-
onClick: (evt) => emit("click", evt),
|
|
26
|
-
onClose: (evt) => {
|
|
27
|
-
evt.stopPropagation();
|
|
28
|
-
emit("close", evt);
|
|
29
|
-
}
|
|
30
|
-
}));
|
|
31
|
-
const [tagProps] = tagSlotRecipe.splitVariantProps(context.value);
|
|
32
|
-
const classes = tagSlotRecipe(tagProps);
|
|
33
|
-
return computed(() => tagConnect(state.value, send, classes));
|
|
34
|
-
}, "useTag");
|
|
35
|
-
|
|
36
|
-
export {
|
|
37
|
-
useTag
|
|
38
|
-
};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import * as xstate from 'xstate';
|
|
2
|
-
import { TagDefinedContext, TagProps } from './tag.types.mjs';
|
|
3
|
-
import '@mekari/pixel3-utils';
|
|
4
|
-
|
|
5
|
-
declare function tagMachine(context: TagDefinedContext): xstate.StateMachine<Pick<Partial<TagProps>, "id"> & Omit<TagProps, "id">, any, xstate.AnyEventObject, {
|
|
6
|
-
value: any;
|
|
7
|
-
context: Pick<Partial<TagProps>, "id"> & Omit<TagProps, "id">;
|
|
8
|
-
}, xstate.BaseActionObject, xstate.ServiceMap, xstate.ResolveTypegenMeta<xstate.TypegenDisabled, xstate.AnyEventObject, xstate.BaseActionObject, xstate.ServiceMap>>;
|
|
9
|
-
|
|
10
|
-
export { tagMachine };
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import * as xstate from 'xstate';
|
|
2
|
-
import { TagDefinedContext, TagProps } from './tag.types.js';
|
|
3
|
-
import '@mekari/pixel3-utils';
|
|
4
|
-
|
|
5
|
-
declare function tagMachine(context: TagDefinedContext): xstate.StateMachine<Pick<Partial<TagProps>, "id"> & Omit<TagProps, "id">, any, xstate.AnyEventObject, {
|
|
6
|
-
value: any;
|
|
7
|
-
context: Pick<Partial<TagProps>, "id"> & Omit<TagProps, "id">;
|
|
8
|
-
}, xstate.BaseActionObject, xstate.ServiceMap, xstate.ResolveTypegenMeta<xstate.TypegenDisabled, xstate.AnyEventObject, xstate.BaseActionObject, xstate.ServiceMap>>;
|
|
9
|
-
|
|
10
|
-
export { tagMachine };
|
|
@@ -1,40 +0,0 @@
|
|
|
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/modules/tag.machines.ts
|
|
22
|
-
var tag_machines_exports = {};
|
|
23
|
-
__export(tag_machines_exports, {
|
|
24
|
-
tagMachine: () => tagMachine
|
|
25
|
-
});
|
|
26
|
-
module.exports = __toCommonJS(tag_machines_exports);
|
|
27
|
-
var import_xstate = require("xstate");
|
|
28
|
-
function tagMachine(context) {
|
|
29
|
-
return (0, import_xstate.createMachine)({
|
|
30
|
-
/** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgBcBDKfEABy1gEsDqsMyAPRARgCZ0BPN95f5EA */
|
|
31
|
-
id: "tag",
|
|
32
|
-
context,
|
|
33
|
-
predictableActionArguments: true
|
|
34
|
-
});
|
|
35
|
-
}
|
|
36
|
-
__name(tagMachine, "tagMachine");
|
|
37
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
38
|
-
0 && (module.exports = {
|
|
39
|
-
tagMachine
|
|
40
|
-
});
|