@mekari/pixel3-toggle 0.0.4 → 0.0.6-dev.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.
@@ -1,12 +1,13 @@
1
1
  import {
2
2
  __name,
3
3
  toggleProps
4
- } from "./chunk-WEV7WLTZ.mjs";
4
+ } from "./chunk-KWTZAGAF.mjs";
5
5
 
6
6
  // src/toggle.tsx
7
- import { isVNode as _isVNode, createVNode as _createVNode } from "vue";
7
+ import { isVNode as _isVNode, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
8
8
  import { defineComponent } from "vue";
9
9
  import { MpText } from "@mekari/pixel3-text";
10
+ import { useId } from "@mekari/pixel3-utils";
10
11
  import { toggleSlotRecipe, sharedSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
11
12
  function _isSlot(s) {
12
13
  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !_isVNode(s);
@@ -16,12 +17,15 @@ var MpToggle = defineComponent({
16
17
  name: "MpToggle",
17
18
  props: toggleProps,
18
19
  emits: ["click", "change", "update:isChecked"],
20
+ inheritAttrs: false,
19
21
  setup(props, {
20
22
  slots,
21
- emit
23
+ emit,
24
+ attrs
22
25
  }) {
23
26
  const classes = toggleSlotRecipe();
24
27
  const sharedClasses = sharedSlotRecipe();
28
+ const getId = props.id || `mp-toggle-${useId()}`;
25
29
  const handleChecked = /* @__PURE__ */ __name(() => {
26
30
  return props.isChecked;
27
31
  }, "handleChecked");
@@ -38,7 +42,6 @@ var MpToggle = defineComponent({
38
42
  const children = slots.default && slots.default();
39
43
  const description = slots.description && slots.description();
40
44
  const {
41
- id,
42
45
  name,
43
46
  value,
44
47
  isDisabled,
@@ -46,7 +49,7 @@ var MpToggle = defineComponent({
46
49
  isReadOnly
47
50
  } = props;
48
51
  return _createVNode("label", {
49
- "for": id,
52
+ "for": getId,
50
53
  "role": "checkbox",
51
54
  "class": classes.root,
52
55
  "data-pixel-component": "MpToggle",
@@ -55,8 +58,8 @@ var MpToggle = defineComponent({
55
58
  "aria-invalid": isInvalid,
56
59
  "aria-readonly": isReadOnly,
57
60
  "data-has-description": Boolean(description)
58
- }, [_createVNode("input", {
59
- "id": id,
61
+ }, [_createVNode("input", _mergeProps({
62
+ "id": getId,
60
63
  "class": sharedClasses.hidden,
61
64
  "type": "checkbox",
62
65
  "name": name,
@@ -65,7 +68,7 @@ var MpToggle = defineComponent({
65
68
  "disabled": isDisabled ? true : void 0,
66
69
  "onChange": onChange,
67
70
  "onClick": onClick
68
- }, null), _createVNode("div", {
71
+ }, attrs), null), _createVNode("div", {
69
72
  "class": classes.control
70
73
  }, [_createVNode("div", null, null)]), _createVNode("div", {
71
74
  "class": classes.label
@@ -13,9 +13,6 @@ var toggleProps = {
13
13
  value: {
14
14
  type: String
15
15
  },
16
- modelValue: {
17
- type: String
18
- },
19
16
  isChecked: {
20
17
  type: Boolean
21
18
  },
package/dist/index.js CHANGED
@@ -29,6 +29,7 @@ module.exports = __toCommonJS(src_exports);
29
29
  var import_vue = require("vue");
30
30
  var import_vue2 = require("vue");
31
31
  var import_pixel3_text = require("@mekari/pixel3-text");
32
+ var import_pixel3_utils = require("@mekari/pixel3-utils");
32
33
  var import_recipes = require("@mekari/pixel3-styled-system/recipes");
33
34
 
34
35
  // src/modules/toggle.props.ts
@@ -43,9 +44,6 @@ var toggleProps = {
43
44
  value: {
44
45
  type: String
45
46
  },
46
- modelValue: {
47
- type: String
48
- },
49
47
  isChecked: {
50
48
  type: Boolean
51
49
  },
@@ -69,12 +67,15 @@ var MpToggle = (0, import_vue2.defineComponent)({
69
67
  name: "MpToggle",
70
68
  props: toggleProps,
71
69
  emits: ["click", "change", "update:isChecked"],
70
+ inheritAttrs: false,
72
71
  setup(props, {
73
72
  slots,
74
- emit
73
+ emit,
74
+ attrs
75
75
  }) {
76
76
  const classes = (0, import_recipes.toggleSlotRecipe)();
77
77
  const sharedClasses = (0, import_recipes.sharedSlotRecipe)();
78
+ const getId = props.id || `mp-toggle-${(0, import_pixel3_utils.useId)()}`;
78
79
  const handleChecked = /* @__PURE__ */ __name(() => {
79
80
  return props.isChecked;
80
81
  }, "handleChecked");
@@ -91,7 +92,6 @@ var MpToggle = (0, import_vue2.defineComponent)({
91
92
  const children = slots.default && slots.default();
92
93
  const description = slots.description && slots.description();
93
94
  const {
94
- id,
95
95
  name,
96
96
  value,
97
97
  isDisabled,
@@ -99,7 +99,7 @@ var MpToggle = (0, import_vue2.defineComponent)({
99
99
  isReadOnly
100
100
  } = props;
101
101
  return (0, import_vue.createVNode)("label", {
102
- "for": id,
102
+ "for": getId,
103
103
  "role": "checkbox",
104
104
  "class": classes.root,
105
105
  "data-pixel-component": "MpToggle",
@@ -108,8 +108,8 @@ var MpToggle = (0, import_vue2.defineComponent)({
108
108
  "aria-invalid": isInvalid,
109
109
  "aria-readonly": isReadOnly,
110
110
  "data-has-description": Boolean(description)
111
- }, [(0, import_vue.createVNode)("input", {
112
- "id": id,
111
+ }, [(0, import_vue.createVNode)("input", (0, import_vue.mergeProps)({
112
+ "id": getId,
113
113
  "class": sharedClasses.hidden,
114
114
  "type": "checkbox",
115
115
  "name": name,
@@ -118,7 +118,7 @@ var MpToggle = (0, import_vue2.defineComponent)({
118
118
  "disabled": isDisabled ? true : void 0,
119
119
  "onChange": onChange,
120
120
  "onClick": onClick
121
- }, null), (0, import_vue.createVNode)("div", {
121
+ }, attrs), null), (0, import_vue.createVNode)("div", {
122
122
  "class": classes.control
123
123
  }, [(0, import_vue.createVNode)("div", null, null)]), (0, import_vue.createVNode)("div", {
124
124
  "class": classes.label
package/dist/index.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  MpToggle
3
- } from "./chunk-L4GVYBMY.mjs";
4
- import "./chunk-WEV7WLTZ.mjs";
3
+ } from "./chunk-BZ5JG6SK.mjs";
4
+ import "./chunk-KWTZAGAF.mjs";
5
5
  export {
6
6
  MpToggle
7
7
  };
@@ -1 +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.ts":{"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.ts","inputs":{"src/index.ts":{"bytesInOutput":121},"src/toggle.tsx":{"bytesInOutput":2812},"src/modules/toggle.props.ts":{"bytesInOutput":326}},"bytes":4337},"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}}}
1
+ {"inputs":{"src/modules/toggle.props.ts":{"bytes":398,"imports":[],"format":"esm"},"src/toggle.tsx":{"bytes":2883,"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-utils","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.ts":{"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-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":121},"src/toggle.tsx":{"bytesInOutput":3013},"src/modules/toggle.props.ts":{"bytesInOutput":288}},"bytes":4500},"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-utils","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":3143},"src/modules/toggle.props.ts":{"bytesInOutput":288}},"bytes":4492},"dist/modules/toggle.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/toggle.props.ts","inputs":{"src/modules/toggle.props.ts":{"bytesInOutput":442}},"bytes":1378}}}
@@ -1 +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.ts":{"bytes":121,"imports":[{"path":"src/toggle.tsx","kind":"import-statement","original":"./toggle"}],"format":"esm"}},"outputs":{"dist/index.mjs":{"imports":[{"path":"dist/chunk-L4GVYBMY.mjs","kind":"import-statement"},{"path":"dist/chunk-WEV7WLTZ.mjs","kind":"import-statement"}],"exports":["MpToggle"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":105},"dist/toggle.mjs":{"imports":[{"path":"dist/chunk-L4GVYBMY.mjs","kind":"import-statement"},{"path":"dist/chunk-WEV7WLTZ.mjs","kind":"import-statement"}],"exports":["MpToggle"],"entryPoint":"src/toggle.tsx","inputs":{},"bytes":105},"dist/chunk-L4GVYBMY.mjs":{"imports":[{"path":"dist/chunk-WEV7WLTZ.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-WEV7WLTZ.mjs","kind":"import-statement"}],"exports":["toggleProps"],"entryPoint":"src/modules/toggle.props.ts","inputs":{},"bytes":81},"dist/chunk-WEV7WLTZ.mjs":{"imports":[],"exports":["__name","toggleProps"],"inputs":{"src/modules/toggle.props.ts":{"bytesInOutput":326}},"bytes":524}}}
1
+ {"inputs":{"src/modules/toggle.props.ts":{"bytes":398,"imports":[],"format":"esm"},"src/toggle.tsx":{"bytes":2883,"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-utils","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.ts":{"bytes":121,"imports":[{"path":"src/toggle.tsx","kind":"import-statement","original":"./toggle"}],"format":"esm"}},"outputs":{"dist/index.mjs":{"imports":[{"path":"dist/chunk-BZ5JG6SK.mjs","kind":"import-statement"},{"path":"dist/chunk-KWTZAGAF.mjs","kind":"import-statement"}],"exports":["MpToggle"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":105},"dist/toggle.mjs":{"imports":[{"path":"dist/chunk-BZ5JG6SK.mjs","kind":"import-statement"},{"path":"dist/chunk-KWTZAGAF.mjs","kind":"import-statement"}],"exports":["MpToggle"],"entryPoint":"src/toggle.tsx","inputs":{},"bytes":105},"dist/chunk-BZ5JG6SK.mjs":{"imports":[{"path":"dist/chunk-KWTZAGAF.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-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true}],"exports":["MpToggle"],"inputs":{"src/toggle.tsx":{"bytesInOutput":2826}},"bytes":2933},"dist/modules/toggle.props.mjs":{"imports":[{"path":"dist/chunk-KWTZAGAF.mjs","kind":"import-statement"}],"exports":["toggleProps"],"entryPoint":"src/modules/toggle.props.ts","inputs":{},"bytes":81},"dist/chunk-KWTZAGAF.mjs":{"imports":[],"exports":["__name","toggleProps"],"inputs":{"src/modules/toggle.props.ts":{"bytesInOutput":288}},"bytes":486}}}
@@ -9,9 +9,6 @@ declare const toggleProps: {
9
9
  value: {
10
10
  type: StringConstructor;
11
11
  };
12
- modelValue: {
13
- type: StringConstructor;
14
- };
15
12
  isChecked: {
16
13
  type: BooleanConstructor;
17
14
  };
@@ -9,9 +9,6 @@ declare const toggleProps: {
9
9
  value: {
10
10
  type: StringConstructor;
11
11
  };
12
- modelValue: {
13
- type: StringConstructor;
14
- };
15
12
  isChecked: {
16
13
  type: BooleanConstructor;
17
14
  };
@@ -34,9 +34,6 @@ var toggleProps = {
34
34
  value: {
35
35
  type: String
36
36
  },
37
- modelValue: {
38
- type: String
39
- },
40
37
  isChecked: {
41
38
  type: Boolean
42
39
  },
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  toggleProps
3
- } from "../chunk-WEV7WLTZ.mjs";
3
+ } from "../chunk-KWTZAGAF.mjs";
4
4
  export {
5
5
  toggleProps
6
6
  };
package/dist/toggle.d.mts CHANGED
@@ -12,9 +12,6 @@ declare const MpToggle: vue.DefineComponent<{
12
12
  value: {
13
13
  type: StringConstructor;
14
14
  };
15
- modelValue: {
16
- type: StringConstructor;
17
- };
18
15
  isChecked: {
19
16
  type: BooleanConstructor;
20
17
  };
@@ -38,9 +35,6 @@ declare const MpToggle: vue.DefineComponent<{
38
35
  value: {
39
36
  type: StringConstructor;
40
37
  };
41
- modelValue: {
42
- type: StringConstructor;
43
- };
44
38
  isChecked: {
45
39
  type: BooleanConstructor;
46
40
  };
package/dist/toggle.d.ts CHANGED
@@ -12,9 +12,6 @@ declare const MpToggle: vue.DefineComponent<{
12
12
  value: {
13
13
  type: StringConstructor;
14
14
  };
15
- modelValue: {
16
- type: StringConstructor;
17
- };
18
15
  isChecked: {
19
16
  type: BooleanConstructor;
20
17
  };
@@ -38,9 +35,6 @@ declare const MpToggle: vue.DefineComponent<{
38
35
  value: {
39
36
  type: StringConstructor;
40
37
  };
41
- modelValue: {
42
- type: StringConstructor;
43
- };
44
38
  isChecked: {
45
39
  type: BooleanConstructor;
46
40
  };
package/dist/toggle.js CHANGED
@@ -27,6 +27,7 @@ module.exports = __toCommonJS(toggle_exports);
27
27
  var import_vue = require("vue");
28
28
  var import_vue2 = require("vue");
29
29
  var import_pixel3_text = require("@mekari/pixel3-text");
30
+ var import_pixel3_utils = require("@mekari/pixel3-utils");
30
31
  var import_recipes = require("@mekari/pixel3-styled-system/recipes");
31
32
 
32
33
  // src/modules/toggle.props.ts
@@ -41,9 +42,6 @@ var toggleProps = {
41
42
  value: {
42
43
  type: String
43
44
  },
44
- modelValue: {
45
- type: String
46
- },
47
45
  isChecked: {
48
46
  type: Boolean
49
47
  },
@@ -67,12 +65,15 @@ var MpToggle = (0, import_vue2.defineComponent)({
67
65
  name: "MpToggle",
68
66
  props: toggleProps,
69
67
  emits: ["click", "change", "update:isChecked"],
68
+ inheritAttrs: false,
70
69
  setup(props, {
71
70
  slots,
72
- emit
71
+ emit,
72
+ attrs
73
73
  }) {
74
74
  const classes = (0, import_recipes.toggleSlotRecipe)();
75
75
  const sharedClasses = (0, import_recipes.sharedSlotRecipe)();
76
+ const getId = props.id || `mp-toggle-${(0, import_pixel3_utils.useId)()}`;
76
77
  const handleChecked = /* @__PURE__ */ __name(() => {
77
78
  return props.isChecked;
78
79
  }, "handleChecked");
@@ -89,7 +90,6 @@ var MpToggle = (0, import_vue2.defineComponent)({
89
90
  const children = slots.default && slots.default();
90
91
  const description = slots.description && slots.description();
91
92
  const {
92
- id,
93
93
  name,
94
94
  value,
95
95
  isDisabled,
@@ -97,7 +97,7 @@ var MpToggle = (0, import_vue2.defineComponent)({
97
97
  isReadOnly
98
98
  } = props;
99
99
  return (0, import_vue.createVNode)("label", {
100
- "for": id,
100
+ "for": getId,
101
101
  "role": "checkbox",
102
102
  "class": classes.root,
103
103
  "data-pixel-component": "MpToggle",
@@ -106,8 +106,8 @@ var MpToggle = (0, import_vue2.defineComponent)({
106
106
  "aria-invalid": isInvalid,
107
107
  "aria-readonly": isReadOnly,
108
108
  "data-has-description": Boolean(description)
109
- }, [(0, import_vue.createVNode)("input", {
110
- "id": id,
109
+ }, [(0, import_vue.createVNode)("input", (0, import_vue.mergeProps)({
110
+ "id": getId,
111
111
  "class": sharedClasses.hidden,
112
112
  "type": "checkbox",
113
113
  "name": name,
@@ -116,7 +116,7 @@ var MpToggle = (0, import_vue2.defineComponent)({
116
116
  "disabled": isDisabled ? true : void 0,
117
117
  "onChange": onChange,
118
118
  "onClick": onClick
119
- }, null), (0, import_vue.createVNode)("div", {
119
+ }, attrs), null), (0, import_vue.createVNode)("div", {
120
120
  "class": classes.control
121
121
  }, [(0, import_vue.createVNode)("div", null, null)]), (0, import_vue.createVNode)("div", {
122
122
  "class": classes.label
package/dist/toggle.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  MpToggle
3
- } from "./chunk-L4GVYBMY.mjs";
4
- import "./chunk-WEV7WLTZ.mjs";
3
+ } from "./chunk-BZ5JG6SK.mjs";
4
+ import "./chunk-KWTZAGAF.mjs";
5
5
  export {
6
6
  MpToggle
7
7
  };
package/package.json CHANGED
@@ -1,16 +1,17 @@
1
1
  {
2
2
  "name": "@mekari/pixel3-toggle",
3
3
  "description": "Toggle component for mekari pixel 3",
4
- "version": "0.0.4",
4
+ "version": "0.0.6-dev.0",
5
5
  "main": "dist/index.js",
6
6
  "license": "MIT",
7
7
  "files": [
8
8
  "dist"
9
9
  ],
10
10
  "dependencies": {
11
- "@mekari/pixel3-icon": "0.0.4",
12
- "@mekari/pixel3-text": "0.0.4",
13
- "@mekari/pixel3-styled-system": "0.0.3"
11
+ "@mekari/pixel3-icon": "0.0.6-dev.0",
12
+ "@mekari/pixel3-styled-system": "0.0.4-dev.0",
13
+ "@mekari/pixel3-text": "0.0.6-dev.0",
14
+ "@mekari/pixel3-utils": "0.0.4"
14
15
  },
15
16
  "peerDependencies": {
16
17
  "vue": "^3.4.9"
@@ -35,7 +36,6 @@
35
36
  "build": "tsup && pnpm build:types",
36
37
  "build:fast": "tsup",
37
38
  "build:types": "tsup src --dts-only",
38
- "build:external": "tsup src/index.tsx --external",
39
39
  "types:check": "tsc --noEmit",
40
40
  "replace-config": "clean-package",
41
41
  "restore-config": "clean-package restore"