@mekari/pixel3-button 0.0.1 → 0.0.3

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/button.d.mts CHANGED
@@ -1,3 +1,4 @@
1
+ import * as vue_jsx_runtime from 'vue/jsx-runtime';
1
2
  import { ButtonSize, ButtonVariant } from './modules/button.type.mjs';
2
3
  import * as vue from 'vue';
3
4
 
@@ -25,7 +26,7 @@ declare const MpButton: vue.DefineComponent<{
25
26
  rightIcon: {
26
27
  type: StringConstructor;
27
28
  };
28
- }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "click"[], "click", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
29
+ }, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "click"[], "click", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
29
30
  as: {
30
31
  type: vue.PropType<keyof HTMLElementTagNameMap>;
31
32
  default: string;
@@ -52,8 +53,8 @@ declare const MpButton: vue.DefineComponent<{
52
53
  }>> & {
53
54
  onClick?: ((...args: any[]) => any) | undefined;
54
55
  }, {
55
- size: ButtonSize;
56
56
  as: keyof HTMLElementTagNameMap;
57
+ size: ButtonSize;
57
58
  isDisabled: boolean;
58
59
  isLoading: boolean;
59
60
  }, {}>;
@@ -65,7 +66,7 @@ declare const MpButtonGroup: vue.DefineComponent<{
65
66
  isSplit: {
66
67
  type: BooleanConstructor;
67
68
  };
68
- }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
69
+ }, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
69
70
  spacing: {
70
71
  type: vue.PropType<string>;
71
72
  default: string;
package/dist/button.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import * as vue_jsx_runtime from 'vue/jsx-runtime';
1
2
  import { ButtonSize, ButtonVariant } from './modules/button.type.js';
2
3
  import * as vue from 'vue';
3
4
 
@@ -25,7 +26,7 @@ declare const MpButton: vue.DefineComponent<{
25
26
  rightIcon: {
26
27
  type: StringConstructor;
27
28
  };
28
- }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "click"[], "click", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
29
+ }, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "click"[], "click", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
29
30
  as: {
30
31
  type: vue.PropType<keyof HTMLElementTagNameMap>;
31
32
  default: string;
@@ -52,8 +53,8 @@ declare const MpButton: vue.DefineComponent<{
52
53
  }>> & {
53
54
  onClick?: ((...args: any[]) => any) | undefined;
54
55
  }, {
55
- size: ButtonSize;
56
56
  as: keyof HTMLElementTagNameMap;
57
+ size: ButtonSize;
57
58
  isDisabled: boolean;
58
59
  isLoading: boolean;
59
60
  }, {}>;
@@ -65,7 +66,7 @@ declare const MpButtonGroup: vue.DefineComponent<{
65
66
  isSplit: {
66
67
  type: BooleanConstructor;
67
68
  };
68
- }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
69
+ }, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
69
70
  spacing: {
70
71
  type: vue.PropType<string>;
71
72
  default: string;
package/dist/button.js CHANGED
@@ -77,9 +77,11 @@ var MpButton = (0, import_vue2.defineComponent)({
77
77
  slots,
78
78
  emit
79
79
  }) {
80
- const classes = (0, import_recipes.buttonRecipe)({
81
- size: props.size,
82
- variant: props.variant
80
+ const classes = (0, import_vue2.computed)(() => {
81
+ return (0, import_recipes.buttonRecipe)({
82
+ size: props.size,
83
+ variant: props.variant
84
+ });
83
85
  });
84
86
  const onClick = /* @__PURE__ */ __name((event) => {
85
87
  if (props.isLoading) {
@@ -99,7 +101,7 @@ var MpButton = (0, import_vue2.defineComponent)({
99
101
  rightIcon
100
102
  } = props;
101
103
  return (0, import_vue.createVNode)(Component, {
102
- "class": classes,
104
+ "class": classes.value,
103
105
  "data-pixel-component": "MpButton",
104
106
  "data-has-icon": children ? void 0 : true,
105
107
  "disabled": isDisabled ? true : void 0,
package/dist/button.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  MpButton,
3
3
  MpButtonGroup
4
- } from "./chunk-P5BDBLJN.mjs";
4
+ } from "./chunk-LSFNX7UA.mjs";
5
5
  import "./chunk-5JNYXGFY.mjs";
6
6
  export {
7
7
  MpButton,
@@ -6,7 +6,7 @@ import {
6
6
 
7
7
  // src/button.tsx
8
8
  import { createVNode as _createVNode } from "vue";
9
- import { defineComponent } from "vue";
9
+ import { defineComponent, computed } from "vue";
10
10
  import { token } from "@mekari/pixel3-styled-system/tokens";
11
11
  import { buttonRecipe, buttonGroupRecipe } from "@mekari/pixel3-styled-system/recipes";
12
12
  import { MpIcon } from "@mekari/pixel3-icon";
@@ -19,9 +19,11 @@ var MpButton = defineComponent({
19
19
  slots,
20
20
  emit
21
21
  }) {
22
- const classes = buttonRecipe({
23
- size: props.size,
24
- variant: props.variant
22
+ const classes = computed(() => {
23
+ return buttonRecipe({
24
+ size: props.size,
25
+ variant: props.variant
26
+ });
25
27
  });
26
28
  const onClick = /* @__PURE__ */ __name((event) => {
27
29
  if (props.isLoading) {
@@ -41,7 +43,7 @@ var MpButton = defineComponent({
41
43
  rightIcon
42
44
  } = props;
43
45
  return _createVNode(Component, {
44
- "class": classes,
46
+ "class": classes.value,
45
47
  "data-pixel-component": "MpButton",
46
48
  "data-has-icon": children ? void 0 : true,
47
49
  "disabled": isDisabled ? true : void 0,
package/dist/index.d.mts CHANGED
@@ -1,3 +1,4 @@
1
1
  export { MpButton, MpButtonGroup } from './button.mjs';
2
+ import 'vue/jsx-runtime';
2
3
  import './modules/button.type.mjs';
3
4
  import 'vue';
package/dist/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export { MpButton, MpButtonGroup } from './button.js';
2
+ import 'vue/jsx-runtime';
2
3
  import './modules/button.type.js';
3
4
  import 'vue';
package/dist/index.js CHANGED
@@ -79,9 +79,11 @@ var MpButton = (0, import_vue2.defineComponent)({
79
79
  slots,
80
80
  emit
81
81
  }) {
82
- const classes = (0, import_recipes.buttonRecipe)({
83
- size: props.size,
84
- variant: props.variant
82
+ const classes = (0, import_vue2.computed)(() => {
83
+ return (0, import_recipes.buttonRecipe)({
84
+ size: props.size,
85
+ variant: props.variant
86
+ });
85
87
  });
86
88
  const onClick = /* @__PURE__ */ __name((event) => {
87
89
  if (props.isLoading) {
@@ -101,7 +103,7 @@ var MpButton = (0, import_vue2.defineComponent)({
101
103
  rightIcon
102
104
  } = props;
103
105
  return (0, import_vue.createVNode)(Component, {
104
- "class": classes,
106
+ "class": classes.value,
105
107
  "data-pixel-component": "MpButton",
106
108
  "data-has-icon": children ? void 0 : true,
107
109
  "disabled": isDisabled ? true : void 0,
package/dist/index.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  MpButton,
3
3
  MpButtonGroup
4
- } from "./chunk-P5BDBLJN.mjs";
4
+ } from "./chunk-LSFNX7UA.mjs";
5
5
  import "./chunk-5JNYXGFY.mjs";
6
6
  export {
7
7
  MpButton,
@@ -1 +1 @@
1
- {"inputs":{"src/modules/button.props.ts":{"bytes":861,"imports":[{"path":"./button.type","kind":"import-statement","external":true}],"format":"esm"},"src/button.tsx":{"bytes":2751,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-spinner","kind":"import-statement","external":true},{"path":"src/modules/button.props.ts","kind":"import-statement","original":"./modules/button.props"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":136,"imports":[{"path":"src/button.tsx","kind":"import-statement","original":"./button"}],"format":"esm"},"src/modules/button.type.ts":{"bytes":209,"imports":[],"format":"esm"}},"outputs":{"dist/button.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true},{"path":"@mekari/pixel3-spinner","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/button.tsx","inputs":{"src/button.tsx":{"bytesInOutput":2871},"src/modules/button.props.ts":{"bytesInOutput":427}},"bytes":4376},"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true},{"path":"@mekari/pixel3-spinner","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":159},"src/button.tsx":{"bytesInOutput":2703},"src/modules/button.props.ts":{"bytesInOutput":427}},"bytes":4384},"dist/modules/button.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/button.props.ts","inputs":{"src/modules/button.props.ts":{"bytesInOutput":625}},"bytes":1581},"dist/modules/button.type.js":{"imports":[],"exports":[],"entryPoint":"src/modules/button.type.ts","inputs":{"src/modules/button.type.ts":{"bytesInOutput":82}},"bytes":784}}}
1
+ {"inputs":{"src/modules/button.props.ts":{"bytes":861,"imports":[{"path":"./button.type","kind":"import-statement","external":true}],"format":"esm"},"src/button.tsx":{"bytes":2811,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-spinner","kind":"import-statement","external":true},{"path":"src/modules/button.props.ts","kind":"import-statement","original":"./modules/button.props"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":136,"imports":[{"path":"src/button.tsx","kind":"import-statement","original":"./button"}],"format":"esm"},"src/modules/button.type.ts":{"bytes":209,"imports":[],"format":"esm"}},"outputs":{"dist/button.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true},{"path":"@mekari/pixel3-spinner","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/button.tsx","inputs":{"src/button.tsx":{"bytesInOutput":2938},"src/modules/button.props.ts":{"bytesInOutput":427}},"bytes":4443},"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true},{"path":"@mekari/pixel3-spinner","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":159},"src/button.tsx":{"bytesInOutput":2770},"src/modules/button.props.ts":{"bytesInOutput":427}},"bytes":4451},"dist/modules/button.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/button.props.ts","inputs":{"src/modules/button.props.ts":{"bytesInOutput":625}},"bytes":1581},"dist/modules/button.type.js":{"imports":[],"exports":[],"entryPoint":"src/modules/button.type.ts","inputs":{"src/modules/button.type.ts":{"bytesInOutput":82}},"bytes":784}}}
@@ -1 +1 @@
1
- {"inputs":{"src/modules/button.props.ts":{"bytes":861,"imports":[{"path":"./button.type","kind":"import-statement","external":true}],"format":"esm"},"src/button.tsx":{"bytes":2751,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-spinner","kind":"import-statement","external":true},{"path":"src/modules/button.props.ts","kind":"import-statement","original":"./modules/button.props"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":136,"imports":[{"path":"src/button.tsx","kind":"import-statement","original":"./button"}],"format":"esm"},"src/modules/button.type.ts":{"bytes":209,"imports":[],"format":"esm"}},"outputs":{"dist/button.mjs":{"imports":[{"path":"dist/chunk-P5BDBLJN.mjs","kind":"import-statement"},{"path":"dist/chunk-5JNYXGFY.mjs","kind":"import-statement"}],"exports":["MpButton","MpButtonGroup"],"entryPoint":"src/button.tsx","inputs":{},"bytes":139},"dist/index.mjs":{"imports":[{"path":"dist/chunk-P5BDBLJN.mjs","kind":"import-statement"},{"path":"dist/chunk-5JNYXGFY.mjs","kind":"import-statement"}],"exports":["MpButton","MpButtonGroup"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":139},"dist/chunk-P5BDBLJN.mjs":{"imports":[{"path":"dist/chunk-5JNYXGFY.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-spinner","kind":"import-statement","external":true}],"exports":["MpButton","MpButtonGroup"],"inputs":{"src/button.tsx":{"bytesInOutput":2472}},"bytes":2616},"dist/modules/button.props.mjs":{"imports":[{"path":"dist/chunk-5JNYXGFY.mjs","kind":"import-statement"}],"exports":["buttonGroupProps","buttonProps"],"entryPoint":"src/modules/button.props.ts","inputs":{},"bytes":121},"dist/chunk-5JNYXGFY.mjs":{"imports":[],"exports":["__name","buttonGroupProps","buttonProps"],"inputs":{"src/modules/button.props.ts":{"bytesInOutput":427}},"bytes":645},"dist/modules/button.type.mjs":{"imports":[],"exports":[],"entryPoint":"src/modules/button.type.ts","inputs":{"src/modules/button.type.ts":{"bytesInOutput":0}},"bytes":0}}}
1
+ {"inputs":{"src/modules/button.props.ts":{"bytes":861,"imports":[{"path":"./button.type","kind":"import-statement","external":true}],"format":"esm"},"src/button.tsx":{"bytes":2811,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-spinner","kind":"import-statement","external":true},{"path":"src/modules/button.props.ts","kind":"import-statement","original":"./modules/button.props"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":136,"imports":[{"path":"src/button.tsx","kind":"import-statement","original":"./button"}],"format":"esm"},"src/modules/button.type.ts":{"bytes":209,"imports":[],"format":"esm"}},"outputs":{"dist/button.mjs":{"imports":[{"path":"dist/chunk-LSFNX7UA.mjs","kind":"import-statement"},{"path":"dist/chunk-5JNYXGFY.mjs","kind":"import-statement"}],"exports":["MpButton","MpButtonGroup"],"entryPoint":"src/button.tsx","inputs":{},"bytes":139},"dist/index.mjs":{"imports":[{"path":"dist/chunk-LSFNX7UA.mjs","kind":"import-statement"},{"path":"dist/chunk-5JNYXGFY.mjs","kind":"import-statement"}],"exports":["MpButton","MpButtonGroup"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":139},"dist/chunk-LSFNX7UA.mjs":{"imports":[{"path":"dist/chunk-5JNYXGFY.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-spinner","kind":"import-statement","external":true}],"exports":["MpButton","MpButtonGroup"],"inputs":{"src/button.tsx":{"bytesInOutput":2532}},"bytes":2676},"dist/modules/button.props.mjs":{"imports":[{"path":"dist/chunk-5JNYXGFY.mjs","kind":"import-statement"}],"exports":["buttonGroupProps","buttonProps"],"entryPoint":"src/modules/button.props.ts","inputs":{},"bytes":121},"dist/chunk-5JNYXGFY.mjs":{"imports":[],"exports":["__name","buttonGroupProps","buttonProps"],"inputs":{"src/modules/button.props.ts":{"bytesInOutput":427}},"bytes":645},"dist/modules/button.type.mjs":{"imports":[],"exports":[],"entryPoint":"src/modules/button.type.ts","inputs":{"src/modules/button.type.ts":{"bytesInOutput":0}},"bytes":0}}}
package/package.json CHANGED
@@ -1,16 +1,16 @@
1
1
  {
2
2
  "name": "@mekari/pixel3-button",
3
3
  "description": "Button component for mekari pixel 3",
4
- "version": "0.0.1",
4
+ "version": "0.0.3",
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.1",
12
- "@mekari/pixel3-spinner": "0.0.1",
13
- "@mekari/pixel3-styled-system": "0.0.1"
11
+ "@mekari/pixel3-icon": "0.0.3",
12
+ "@mekari/pixel3-spinner": "0.0.3",
13
+ "@mekari/pixel3-styled-system": "0.0.2"
14
14
  },
15
15
  "peerDependencies": {
16
16
  "vue": "^3.3.7"