@mekari/pixel3-toggle 0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/chunk-LIZN4GWD.mjs +36 -0
  2. package/dist/chunk-RHUQV5AD.mjs +89 -0
  3. package/dist/index.d.mts +2 -0
  4. package/dist/index.d.ts +2 -0
  5. package/dist/index.js +142 -0
  6. package/dist/index.mjs +7 -0
  7. package/dist/metafile-cjs.json +1 -0
  8. package/dist/metafile-esm.json +1 -0
  9. package/dist/modules/toggle.props.d.mts +29 -0
  10. package/dist/modules/toggle.props.d.ts +29 -0
  11. package/dist/modules/toggle.props.js +56 -0
  12. package/dist/modules/toggle.props.mjs +6 -0
  13. package/dist/toggle.d.mts +67 -0
  14. package/dist/toggle.d.ts +67 -0
  15. package/dist/toggle.js +140 -0
  16. package/dist/toggle.mjs +7 -0
  17. package/package.json +43 -0
package/dist/chunk-LIZN4GWD.mjs ADDED
@@ -0,0 +1,36 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
+
4
+ // src/modules/toggle.props.ts
5
+ var toggleProps = {
6
+ id: {
7
+ type: String,
8
+ default: ""
9
+ },
10
+ name: {
11
+ type: String
12
+ },
13
+ value: {
14
+ type: String
15
+ },
16
+ modelValue: {
17
+ type: String
18
+ },
19
+ isChecked: {
20
+ type: Boolean
21
+ },
22
+ isDisabled: {
23
+ type: Boolean
24
+ },
25
+ isInvalid: {
26
+ type: Boolean
27
+ },
28
+ isReadonly: {
29
+ type: Boolean
30
+ }
31
+ };
32
+
33
+ export {
34
+ __name,
35
+ toggleProps
36
+ };
package/dist/chunk-RHUQV5AD.mjs ADDED
@@ -0,0 +1,89 @@
1
+ import {
2
+ __name,
3
+ toggleProps
4
+ } from "./chunk-LIZN4GWD.mjs";
5
+
6
+ // src/toggle.tsx
7
+ import { isVNode as _isVNode, createVNode as _createVNode } from "vue";
8
+ import { defineComponent } from "vue";
9
+ import { MpText } from "@mekari/pixel3-text";
10
+ import { toggleSlotRecipe, sharedSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
11
+ function _isSlot(s) {
12
+ return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !_isVNode(s);
13
+ }
14
+ __name(_isSlot, "_isSlot");
15
+ var MpToggle = defineComponent({
16
+ name: "MpToggle",
17
+ props: toggleProps,
18
+ emits: ["click", "change", "update:isChecked"],
19
+ setup(props, {
20
+ slots,
21
+ emit
22
+ }) {
23
+ const classes = toggleSlotRecipe();
24
+ const sharedClasses = sharedSlotRecipe();
25
+ const handleChecked = /* @__PURE__ */ __name(() => {
26
+ return props.isChecked;
27
+ }, "handleChecked");
28
+ const onChange = /* @__PURE__ */ __name(() => {
29
+ if (!props.isDisabled || !props.isReadonly) {
30
+ emit("change", !props.isChecked, props.value);
31
+ emit("update:isChecked", !props.isChecked);
32
+ }
33
+ }, "onChange");
34
+ const onClick = /* @__PURE__ */ __name((event) => {
35
+ emit("click", event);
36
+ }, "onClick");
37
+ return () => {
38
+ const children = slots.default && slots.default();
39
+ const description = slots.description && slots.description();
40
+ const {
41
+ id,
42
+ name,
43
+ value,
44
+ isDisabled,
45
+ isInvalid,
46
+ isReadonly
47
+ } = props;
48
+ return _createVNode("label", {
49
+ "for": id,
50
+ "role": "checkbox",
51
+ "class": classes.root,
52
+ "data-pixel-component": "MpToggle",
53
+ "aria-checked": handleChecked(),
54
+ "aria-disabled": isDisabled,
55
+ "aria-invalid": isInvalid,
56
+ "aria-readonly": isReadonly,
57
+ "data-has-description": Boolean(description)
58
+ }, [_createVNode("input", {
59
+ "id": id,
60
+ "class": sharedClasses.hidden,
61
+ "type": "checkbox",
62
+ "name": name,
63
+ "value": value,
64
+ "checked": handleChecked(),
65
+ "disabled": isDisabled ? true : void 0,
66
+ "onChange": onChange,
67
+ "onClick": onClick
68
+ }, null), _createVNode("div", {
69
+ "class": classes.control
70
+ }, [_createVNode("div", null, null)]), _createVNode("div", {
71
+ "class": classes.label
72
+ }, [_createVNode(MpText, {
73
+ "as": "span",
74
+ "size": "label",
75
+ "color": isDisabled ? "gray.400" : "dark"
76
+ }, _isSlot(children) ? children : {
77
+ default: () => [children]
78
+ }), description && _createVNode(MpText, {
79
+ "color": isDisabled ? "gray.400" : "gray.600"
80
+ }, _isSlot(description) ? description : {
81
+ default: () => [description]
82
+ })])]);
83
+ };
84
+ }
85
+ });
86
+
87
+ export {
88
+ MpToggle
89
+ };
package/dist/index.d.mts ADDED
@@ -0,0 +1,2 @@
1
+ export { MpToggle } from './toggle.mjs';
2
+ import 'vue';
package/dist/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { MpToggle } from './toggle.js';
2
+ import 'vue';
package/dist/index.js ADDED
@@ -0,0 +1,142 @@
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/index.tsx
22
+ var src_exports = {};
23
+ __export(src_exports, {
24
+ MpToggle: () => MpToggle
25
+ });
26
+ module.exports = __toCommonJS(src_exports);
27
+
28
+ // src/toggle.tsx
29
+ var import_vue = require("vue");
30
+ var import_vue2 = require("vue");
31
+ var import_pixel3_text = require("@mekari/pixel3-text");
32
+ var import_recipes = require("@mekari/pixel3-styled-system/recipes");
33
+
34
+ // src/modules/toggle.props.ts
35
+ var toggleProps = {
36
+ id: {
37
+ type: String,
38
+ default: ""
39
+ },
40
+ name: {
41
+ type: String
42
+ },
43
+ value: {
44
+ type: String
45
+ },
46
+ modelValue: {
47
+ type: String
48
+ },
49
+ isChecked: {
50
+ type: Boolean
51
+ },
52
+ isDisabled: {
53
+ type: Boolean
54
+ },
55
+ isInvalid: {
56
+ type: Boolean
57
+ },
58
+ isReadonly: {
59
+ type: Boolean
60
+ }
61
+ };
62
+
63
+ // src/toggle.tsx
64
+ function _isSlot(s) {
65
+ return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, import_vue.isVNode)(s);
66
+ }
67
+ __name(_isSlot, "_isSlot");
68
+ var MpToggle = (0, import_vue2.defineComponent)({
69
+ name: "MpToggle",
70
+ props: toggleProps,
71
+ emits: ["click", "change", "update:isChecked"],
72
+ setup(props, {
73
+ slots,
74
+ emit
75
+ }) {
76
+ const classes = (0, import_recipes.toggleSlotRecipe)();
77
+ const sharedClasses = (0, import_recipes.sharedSlotRecipe)();
78
+ const handleChecked = /* @__PURE__ */ __name(() => {
79
+ return props.isChecked;
80
+ }, "handleChecked");
81
+ const onChange = /* @__PURE__ */ __name(() => {
82
+ if (!props.isDisabled || !props.isReadonly) {
83
+ emit("change", !props.isChecked, props.value);
84
+ emit("update:isChecked", !props.isChecked);
85
+ }
86
+ }, "onChange");
87
+ const onClick = /* @__PURE__ */ __name((event) => {
88
+ emit("click", event);
89
+ }, "onClick");
90
+ return () => {
91
+ const children = slots.default && slots.default();
92
+ const description = slots.description && slots.description();
93
+ const {
94
+ id,
95
+ name,
96
+ value,
97
+ isDisabled,
98
+ isInvalid,
99
+ isReadonly
100
+ } = props;
101
+ return (0, import_vue.createVNode)("label", {
102
+ "for": id,
103
+ "role": "checkbox",
104
+ "class": classes.root,
105
+ "data-pixel-component": "MpToggle",
106
+ "aria-checked": handleChecked(),
107
+ "aria-disabled": isDisabled,
108
+ "aria-invalid": isInvalid,
109
+ "aria-readonly": isReadonly,
110
+ "data-has-description": Boolean(description)
111
+ }, [(0, import_vue.createVNode)("input", {
112
+ "id": id,
113
+ "class": sharedClasses.hidden,
114
+ "type": "checkbox",
115
+ "name": name,
116
+ "value": value,
117
+ "checked": handleChecked(),
118
+ "disabled": isDisabled ? true : void 0,
119
+ "onChange": onChange,
120
+ "onClick": onClick
121
+ }, null), (0, import_vue.createVNode)("div", {
122
+ "class": classes.control
123
+ }, [(0, import_vue.createVNode)("div", null, null)]), (0, import_vue.createVNode)("div", {
124
+ "class": classes.label
125
+ }, [(0, import_vue.createVNode)(import_pixel3_text.MpText, {
126
+ "as": "span",
127
+ "size": "label",
128
+ "color": isDisabled ? "gray.400" : "dark"
129
+ }, _isSlot(children) ? children : {
130
+ default: () => [children]
131
+ }), description && (0, import_vue.createVNode)(import_pixel3_text.MpText, {
132
+ "color": isDisabled ? "gray.400" : "gray.600"
133
+ }, _isSlot(description) ? description : {
134
+ default: () => [description]
135
+ })])]);
136
+ };
137
+ }
138
+ });
139
+ // Annotate the CommonJS export names for ESM import in node:
140
+ 0 && (module.exports = {
141
+ MpToggle
142
+ });
package/dist/index.mjs ADDED
@@ -0,0 +1,7 @@
1
+ import {
2
+ MpToggle
3
+ } from "./chunk-RHUQV5AD.mjs";
4
+ import "./chunk-LIZN4GWD.mjs";
5
+ export {
6
+ MpToggle
7
+ };
package/dist/metafile-cjs.json ADDED
@@ -0,0 +1 @@
1
+ {"inputs":{"src/modules/toggle.props.ts":{"bytes":436,"imports":[],"format":"esm"},"src/toggle.tsx":{"bytes":2708,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"src/modules/toggle.props.ts","kind":"import-statement","original":"./modules/toggle.props"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.tsx":{"bytes":121,"imports":[{"path":"src/toggle.tsx","kind":"import-statement","original":"./toggle"}],"format":"esm"}},"outputs":{"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.tsx","inputs":{"src/index.tsx":{"bytesInOutput":121},"src/toggle.tsx":{"bytesInOutput":2812},"src/modules/toggle.props.ts":{"bytesInOutput":326}},"bytes":4338},"dist/toggle.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/toggle.tsx","inputs":{"src/toggle.tsx":{"bytesInOutput":2942},"src/modules/toggle.props.ts":{"bytesInOutput":326}},"bytes":4329},"dist/modules/toggle.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/toggle.props.ts","inputs":{"src/modules/toggle.props.ts":{"bytesInOutput":480}},"bytes":1416}}}
package/dist/metafile-esm.json ADDED
@@ -0,0 +1 @@
1
+ {"inputs":{"src/modules/toggle.props.ts":{"bytes":436,"imports":[],"format":"esm"},"src/toggle.tsx":{"bytes":2708,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"src/modules/toggle.props.ts","kind":"import-statement","original":"./modules/toggle.props"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.tsx":{"bytes":121,"imports":[{"path":"src/toggle.tsx","kind":"import-statement","original":"./toggle"}],"format":"esm"}},"outputs":{"dist/index.mjs":{"imports":[{"path":"dist/chunk-RHUQV5AD.mjs","kind":"import-statement"},{"path":"dist/chunk-LIZN4GWD.mjs","kind":"import-statement"}],"exports":["MpToggle"],"entryPoint":"src/index.tsx","inputs":{"src/index.tsx":{"bytesInOutput":0}},"bytes":105},"dist/toggle.mjs":{"imports":[{"path":"dist/chunk-RHUQV5AD.mjs","kind":"import-statement"},{"path":"dist/chunk-LIZN4GWD.mjs","kind":"import-statement"}],"exports":["MpToggle"],"entryPoint":"src/toggle.tsx","inputs":{},"bytes":105},"dist/chunk-RHUQV5AD.mjs":{"imports":[{"path":"dist/chunk-LIZN4GWD.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true}],"exports":["MpToggle"],"inputs":{"src/toggle.tsx":{"bytesInOutput":2651}},"bytes":2758},"dist/modules/toggle.props.mjs":{"imports":[{"path":"dist/chunk-LIZN4GWD.mjs","kind":"import-statement"}],"exports":["toggleProps"],"entryPoint":"src/modules/toggle.props.ts","inputs":{},"bytes":81},"dist/chunk-LIZN4GWD.mjs":{"imports":[],"exports":["__name","toggleProps"],"inputs":{"src/modules/toggle.props.ts":{"bytesInOutput":326}},"bytes":524}}}
package/dist/modules/toggle.props.d.mts ADDED
@@ -0,0 +1,29 @@
1
+ declare const toggleProps: {
2
+ id: {
3
+ type: StringConstructor;
4
+ default: string;
5
+ };
6
+ name: {
7
+ type: StringConstructor;
8
+ };
9
+ value: {
10
+ type: StringConstructor;
11
+ };
12
+ modelValue: {
13
+ type: StringConstructor;
14
+ };
15
+ isChecked: {
16
+ type: BooleanConstructor;
17
+ };
18
+ isDisabled: {
19
+ type: BooleanConstructor;
20
+ };
21
+ isInvalid: {
22
+ type: BooleanConstructor;
23
+ };
24
+ isReadonly: {
25
+ type: BooleanConstructor;
26
+ };
27
+ };
28
+
29
+ export { toggleProps };
package/dist/modules/toggle.props.d.ts ADDED
@@ -0,0 +1,29 @@
1
+ declare const toggleProps: {
2
+ id: {
3
+ type: StringConstructor;
4
+ default: string;
5
+ };
6
+ name: {
7
+ type: StringConstructor;
8
+ };
9
+ value: {
10
+ type: StringConstructor;
11
+ };
12
+ modelValue: {
13
+ type: StringConstructor;
14
+ };
15
+ isChecked: {
16
+ type: BooleanConstructor;
17
+ };
18
+ isDisabled: {
19
+ type: BooleanConstructor;
20
+ };
21
+ isInvalid: {
22
+ type: BooleanConstructor;
23
+ };
24
+ isReadonly: {
25
+ type: BooleanConstructor;
26
+ };
27
+ };
28
+
29
+ export { toggleProps };
package/dist/modules/toggle.props.js ADDED
@@ -0,0 +1,56 @@
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 __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/modules/toggle.props.ts
21
+ var toggle_props_exports = {};
22
+ __export(toggle_props_exports, {
23
+ toggleProps: () => toggleProps
24
+ });
25
+ module.exports = __toCommonJS(toggle_props_exports);
26
+ var toggleProps = {
27
+ id: {
28
+ type: String,
29
+ default: ""
30
+ },
31
+ name: {
32
+ type: String
33
+ },
34
+ value: {
35
+ type: String
36
+ },
37
+ modelValue: {
38
+ type: String
39
+ },
40
+ isChecked: {
41
+ type: Boolean
42
+ },
43
+ isDisabled: {
44
+ type: Boolean
45
+ },
46
+ isInvalid: {
47
+ type: Boolean
48
+ },
49
+ isReadonly: {
50
+ type: Boolean
51
+ }
52
+ };
53
+ // Annotate the CommonJS export names for ESM import in node:
54
+ 0 && (module.exports = {
55
+ toggleProps
56
+ });
package/dist/modules/toggle.props.mjs ADDED
@@ -0,0 +1,6 @@
1
+ import {
2
+ toggleProps
3
+ } from "../chunk-LIZN4GWD.mjs";
4
+ export {
5
+ toggleProps
6
+ };
package/dist/toggle.d.mts ADDED
@@ -0,0 +1,67 @@
1
+ import * as vue from 'vue';
2
+
3
+ declare const MpToggle: vue.DefineComponent<{
4
+ id: {
5
+ type: StringConstructor;
6
+ default: string;
7
+ };
8
+ name: {
9
+ type: StringConstructor;
10
+ };
11
+ value: {
12
+ type: StringConstructor;
13
+ };
14
+ modelValue: {
15
+ type: StringConstructor;
16
+ };
17
+ isChecked: {
18
+ type: BooleanConstructor;
19
+ };
20
+ isDisabled: {
21
+ type: BooleanConstructor;
22
+ };
23
+ isInvalid: {
24
+ type: BooleanConstructor;
25
+ };
26
+ isReadonly: {
27
+ type: BooleanConstructor;
28
+ };
29
+ }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("click" | "change" | "update:isChecked")[], "click" | "change" | "update:isChecked", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
30
+ id: {
31
+ type: StringConstructor;
32
+ default: string;
33
+ };
34
+ name: {
35
+ type: StringConstructor;
36
+ };
37
+ value: {
38
+ type: StringConstructor;
39
+ };
40
+ modelValue: {
41
+ type: StringConstructor;
42
+ };
43
+ isChecked: {
44
+ type: BooleanConstructor;
45
+ };
46
+ isDisabled: {
47
+ type: BooleanConstructor;
48
+ };
49
+ isInvalid: {
50
+ type: BooleanConstructor;
51
+ };
52
+ isReadonly: {
53
+ type: BooleanConstructor;
54
+ };
55
+ }>> & {
56
+ onClick?: ((...args: any[]) => any) | undefined;
57
+ onChange?: ((...args: any[]) => any) | undefined;
58
+ "onUpdate:isChecked"?: ((...args: any[]) => any) | undefined;
59
+ }, {
60
+ id: string;
61
+ isChecked: boolean;
62
+ isDisabled: boolean;
63
+ isInvalid: boolean;
64
+ isReadonly: boolean;
65
+ }, {}>;
66
+
67
+ export { MpToggle };
package/dist/toggle.d.ts ADDED
@@ -0,0 +1,67 @@
1
+ import * as vue from 'vue';
2
+
3
+ declare const MpToggle: vue.DefineComponent<{
4
+ id: {
5
+ type: StringConstructor;
6
+ default: string;
7
+ };
8
+ name: {
9
+ type: StringConstructor;
10
+ };
11
+ value: {
12
+ type: StringConstructor;
13
+ };
14
+ modelValue: {
15
+ type: StringConstructor;
16
+ };
17
+ isChecked: {
18
+ type: BooleanConstructor;
19
+ };
20
+ isDisabled: {
21
+ type: BooleanConstructor;
22
+ };
23
+ isInvalid: {
24
+ type: BooleanConstructor;
25
+ };
26
+ isReadonly: {
27
+ type: BooleanConstructor;
28
+ };
29
+ }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("click" | "change" | "update:isChecked")[], "click" | "change" | "update:isChecked", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
30
+ id: {
31
+ type: StringConstructor;
32
+ default: string;
33
+ };
34
+ name: {
35
+ type: StringConstructor;
36
+ };
37
+ value: {
38
+ type: StringConstructor;
39
+ };
40
+ modelValue: {
41
+ type: StringConstructor;
42
+ };
43
+ isChecked: {
44
+ type: BooleanConstructor;
45
+ };
46
+ isDisabled: {
47
+ type: BooleanConstructor;
48
+ };
49
+ isInvalid: {
50
+ type: BooleanConstructor;
51
+ };
52
+ isReadonly: {
53
+ type: BooleanConstructor;
54
+ };
55
+ }>> & {
56
+ onClick?: ((...args: any[]) => any) | undefined;
57
+ onChange?: ((...args: any[]) => any) | undefined;
58
+ "onUpdate:isChecked"?: ((...args: any[]) => any) | undefined;
59
+ }, {
60
+ id: string;
61
+ isChecked: boolean;
62
+ isDisabled: boolean;
63
+ isInvalid: boolean;
64
+ isReadonly: boolean;
65
+ }, {}>;
66
+
67
+ export { MpToggle };
package/dist/toggle.js ADDED
@@ -0,0 +1,140 @@
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/toggle.tsx
22
+ var toggle_exports = {};
23
+ __export(toggle_exports, {
24
+ MpToggle: () => MpToggle
25
+ });
26
+ module.exports = __toCommonJS(toggle_exports);
27
+ var import_vue = require("vue");
28
+ var import_vue2 = require("vue");
29
+ var import_pixel3_text = require("@mekari/pixel3-text");
30
+ var import_recipes = require("@mekari/pixel3-styled-system/recipes");
31
+
32
+ // src/modules/toggle.props.ts
33
+ var toggleProps = {
34
+ id: {
35
+ type: String,
36
+ default: ""
37
+ },
38
+ name: {
39
+ type: String
40
+ },
41
+ value: {
42
+ type: String
43
+ },
44
+ modelValue: {
45
+ type: String
46
+ },
47
+ isChecked: {
48
+ type: Boolean
49
+ },
50
+ isDisabled: {
51
+ type: Boolean
52
+ },
53
+ isInvalid: {
54
+ type: Boolean
55
+ },
56
+ isReadonly: {
57
+ type: Boolean
58
+ }
59
+ };
60
+
61
+ // src/toggle.tsx
62
+ function _isSlot(s) {
63
+ return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, import_vue.isVNode)(s);
64
+ }
65
+ __name(_isSlot, "_isSlot");
66
+ var MpToggle = (0, import_vue2.defineComponent)({
67
+ name: "MpToggle",
68
+ props: toggleProps,
69
+ emits: ["click", "change", "update:isChecked"],
70
+ setup(props, {
71
+ slots,
72
+ emit
73
+ }) {
74
+ const classes = (0, import_recipes.toggleSlotRecipe)();
75
+ const sharedClasses = (0, import_recipes.sharedSlotRecipe)();
76
+ const handleChecked = /* @__PURE__ */ __name(() => {
77
+ return props.isChecked;
78
+ }, "handleChecked");
79
+ const onChange = /* @__PURE__ */ __name(() => {
80
+ if (!props.isDisabled || !props.isReadonly) {
81
+ emit("change", !props.isChecked, props.value);
82
+ emit("update:isChecked", !props.isChecked);
83
+ }
84
+ }, "onChange");
85
+ const onClick = /* @__PURE__ */ __name((event) => {
86
+ emit("click", event);
87
+ }, "onClick");
88
+ return () => {
89
+ const children = slots.default && slots.default();
90
+ const description = slots.description && slots.description();
91
+ const {
92
+ id,
93
+ name,
94
+ value,
95
+ isDisabled,
96
+ isInvalid,
97
+ isReadonly
98
+ } = props;
99
+ return (0, import_vue.createVNode)("label", {
100
+ "for": id,
101
+ "role": "checkbox",
102
+ "class": classes.root,
103
+ "data-pixel-component": "MpToggle",
104
+ "aria-checked": handleChecked(),
105
+ "aria-disabled": isDisabled,
106
+ "aria-invalid": isInvalid,
107
+ "aria-readonly": isReadonly,
108
+ "data-has-description": Boolean(description)
109
+ }, [(0, import_vue.createVNode)("input", {
110
+ "id": id,
111
+ "class": sharedClasses.hidden,
112
+ "type": "checkbox",
113
+ "name": name,
114
+ "value": value,
115
+ "checked": handleChecked(),
116
+ "disabled": isDisabled ? true : void 0,
117
+ "onChange": onChange,
118
+ "onClick": onClick
119
+ }, null), (0, import_vue.createVNode)("div", {
120
+ "class": classes.control
121
+ }, [(0, import_vue.createVNode)("div", null, null)]), (0, import_vue.createVNode)("div", {
122
+ "class": classes.label
123
+ }, [(0, import_vue.createVNode)(import_pixel3_text.MpText, {
124
+ "as": "span",
125
+ "size": "label",
126
+ "color": isDisabled ? "gray.400" : "dark"
127
+ }, _isSlot(children) ? children : {
128
+ default: () => [children]
129
+ }), description && (0, import_vue.createVNode)(import_pixel3_text.MpText, {
130
+ "color": isDisabled ? "gray.400" : "gray.600"
131
+ }, _isSlot(description) ? description : {
132
+ default: () => [description]
133
+ })])]);
134
+ };
135
+ }
136
+ });
137
+ // Annotate the CommonJS export names for ESM import in node:
138
+ 0 && (module.exports = {
139
+ MpToggle
140
+ });
package/dist/toggle.mjs ADDED
@@ -0,0 +1,7 @@
1
+ import {
2
+ MpToggle
3
+ } from "./chunk-RHUQV5AD.mjs";
4
+ import "./chunk-LIZN4GWD.mjs";
5
+ export {
6
+ MpToggle
7
+ };
package/package.json ADDED
@@ -0,0 +1,43 @@
1
+ {
2
+ "name": "@mekari/pixel3-toggle",
3
+ "description": "Toggle component for mekari pixel 3",
4
+ "version": "0.0.0",
5
+ "main": "dist/index.js",
6
+ "license": "MIT",
7
+ "files": [
8
+ "dist"
9
+ ],
10
+ "dependencies": {
11
+ "@mekari/pixel3-icon": "0.0.0",
12
+ "@mekari/pixel3-text": "0.0.0",
13
+ "@mekari/pixel3-styled-system": "0.0.0"
14
+ },
15
+ "peerDependencies": {
16
+ "vue": "^3.3.7"
17
+ },
18
+ "devDependencies": {
19
+ "vue": "^3.3.7"
20
+ },
21
+ "publishConfig": {
22
+ "access": "public"
23
+ },
24
+ "module": "dist/index.mjs",
25
+ "types": "dist/index.d.ts",
26
+ "exports": {
27
+ ".": {
28
+ "types": "./dist/index.d.ts",
29
+ "require": "./dist/index.js",
30
+ "default": "./dist/index.mjs"
31
+ }
32
+ },
33
+ "scripts": {
34
+ "clean": "rimraf dist .turbo",
35
+ "build": "tsup && pnpm build:types",
36
+ "build:fast": "tsup",
37
+ "build:types": "tsup src --dts-only",
38
+ "build:external": "tsup src/index.tsx --external",
39
+ "types:check": "tsc --noEmit",
40
+ "replace-config": "clean-package",
41
+ "restore-config": "clean-package restore"
42
+ }
43
+ }