@cypress-design/vue-button - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

Button.ts

@@ -10,3 +10,3 @@ import { computed, defineComponent, h } from 'vue'
 
-const Button = defineComponent<ButtonProps>(function (props, { slots }) {
+const Button = defineComponent((props: ButtonProps, { slots }) => {
   const { variant = 'indigo-dark', size = '32', disabled = false } = props
@@ -13,0 +13,0 @@

CHANGELOG.md

 # @cypress-design/vue-button
 
+## 0.3.1
+
+### Patch Changes
+
+- [`7c0d4be`](https://github.com/cypress-io/cypress-design/commit/7c0d4bede2e1c0a126c754e603b2ab8a4e5cbc76) Thanks [@elevatebart](https://github.com/elevatebart)! - Update some props descriptions
+  - size should be described as height.
+  - The sentence for variants wew mashing together.
+
 ## 0.3.0
@@ -4,0 +12,0 @@

dist/constants.d.ts

@@ -29,8 +29,8 @@ export declare const VariantClassesTable: {
     /**
-     * Visual variant to display the button
-     * It will pick colors for font background and border)
+     * Visual variant to display the button;
+     * It will pick colors for font, background and border.
      */
     variant?: ButtonVariants;
     /**
-     * Size of the button
+     * Size (height) of the button (in pixels)
      */
@@ -37,0 +37,0 @@ size?: ButtonSizes;

dist/index.es.js

 import { defineComponent as s, computed as d, h as l } from "vue";
-const u = {
+const b = {
   link: "border-transparent text-indigo-600 hover:underline disabled:text-gray-500 disabled:no-underline ring-transparent",
@@ -17,3 +17,3 @@ "outline-light": "border-gray-100 text-indigo-500 hocus:border-gray-200 disabled:border-gray-100 hocus:ring-gray-50 disabled:text-gray-500",
   disabled: "border-gray-500 bg-gray-500 text-white"
-}, b = {
+}, u = {
   20: "px-4px py-0 text-14px leading-20px",
@@ -28,3 +28,3 @@ 24: "px-8px py-2px text-14px leading-20px",
   disabled: Boolean
-}, h = s(function(o, { slots: e }) {
+}, h = s((o, { slots: e }) => {
   const { variant: r = "indigo-dark", size: a = "32", disabled: i = !1 } = o, n = d(() => i && !["outline-dark", "outline-light", "link"].includes(r) ? "disabled" : r), g = d(() => i || r === "disabled");
@@ -36,4 +36,4 @@ return () => {
         p,
-        u[n.value],
-        b[a]
+        b[n.value],
+        u[a]
       ],
@@ -40,0 +40,0 @@ disabled: g.value

dist/index.umd.js

@@ -1,4 +0,4 @@
-(function(e,r){typeof exports=="object"&&typeof module<"u"?module.exports=r(require("vue")):typeof define=="function"&&define.amd?define(["vue"],r):(e=typeof globalThis<"u"?globalThis:e||self,e.Button=r(e.Vue))})(this,function(e){"use strict";const r={link:"border-transparent text-indigo-600 hover:underline disabled:text-gray-500 disabled:no-underline ring-transparent","outline-light":"border-gray-100 text-indigo-500 hocus:border-gray-200 disabled:border-gray-100 hocus:ring-gray-50 disabled:text-gray-500","outline-dark":"border-white/20 text-white hocus:border-white/60 hocus:ring-white/20 disabled:border-white/20 disabled:text-white/50",white:"border-gray-100 bg-white text-indigo-500 hocus:border-gray-200 hocus:ring-gray-50 disabled:text-gray-500","indigo-light":"border-indigo-50 bg-indigo-50 text-indigo-500 hocus:border-indigo-200 hocus:ring-2 hocus:ring-indigo-50","indigo-dark":"border-indigo-500 bg-indigo-500 text-white hocus:ring-2 hocus:ring-indigo-100 focus:bg-indigo-600","jade-light":"border-transparent bg-jade-200 text-teal-600 hocus:border-jade-300 hocus:ring-2 hocus:ring-jade-50","jade-dark":"border-jade-500 bg-jade-500 text-white hocus:ring-2 hocus:ring-jade-100","teal-dark":"border-teal-500 bg-teal-500 text-white hocus:ring-2 hocus:ring-teal-100 focus:bg-teal-600","purple-dark":"border-purple-500 bg-purple-500 text-white hocus:ring-2 hocus:ring-purple-100 focus:bg-purple-600","red-dark":"border-red-500 bg-red-500 text-white hocus:ring-2 hocus:ring-red-100 focus:bg-red-600","gray-dark":"border-gray-800 bg-gray-800 text-white hocus:ring-2 hocus:ring-gray-100","gray-darkest":"border-gray-1000 bg-gray-1000 text-white hocus:ring-2 hocus:ring-gray-100",disabled:"border-gray-500 bg-gray-500 text-white"},a={20:"px-4px py-0 text-14px leading-20px",24:"px-8px py-2px text-14px leading-20px",32:"px-12px py-6px text-14px leading-20px",40:"px-16px py-8px text-16px leading-24px",48:"px-20px py-12px text-16px leading-24px"},g="border rounded rounded-4px flex font-medium items-center transition duration-150 enabled:hover:ring-2 enabled:focus:ring-2 disabled:cursor-not-allowed",s={variant:String,size:String,disabled:Boolean},d=e.defineComponent(function(u,{slots:i}){const{variant:t="indigo-dark",size:l="32",disabled:n=!1}=u,b=e.computed(()=>n&&!["outline-dark","outline-light","link"].includes(t)?"disabled":t),p=e.computed(()=>n||t==="disabled");return()=>{var o;return e.h("button",{class:[g,r[b.value],a[l]],disabled:p.value},(o=i.default)==null?void 0:o.call(i))}});return d.props=s,d});
+(function(e,r){typeof exports=="object"&&typeof module<"u"?module.exports=r(require("vue")):typeof define=="function"&&define.amd?define(["vue"],r):(e=typeof globalThis<"u"?globalThis:e||self,e.Button=r(e.Vue))})(this,function(e){"use strict";const r={link:"border-transparent text-indigo-600 hover:underline disabled:text-gray-500 disabled:no-underline ring-transparent","outline-light":"border-gray-100 text-indigo-500 hocus:border-gray-200 disabled:border-gray-100 hocus:ring-gray-50 disabled:text-gray-500","outline-dark":"border-white/20 text-white hocus:border-white/60 hocus:ring-white/20 disabled:border-white/20 disabled:text-white/50",white:"border-gray-100 bg-white text-indigo-500 hocus:border-gray-200 hocus:ring-gray-50 disabled:text-gray-500","indigo-light":"border-indigo-50 bg-indigo-50 text-indigo-500 hocus:border-indigo-200 hocus:ring-2 hocus:ring-indigo-50","indigo-dark":"border-indigo-500 bg-indigo-500 text-white hocus:ring-2 hocus:ring-indigo-100 focus:bg-indigo-600","jade-light":"border-transparent bg-jade-200 text-teal-600 hocus:border-jade-300 hocus:ring-2 hocus:ring-jade-50","jade-dark":"border-jade-500 bg-jade-500 text-white hocus:ring-2 hocus:ring-jade-100","teal-dark":"border-teal-500 bg-teal-500 text-white hocus:ring-2 hocus:ring-teal-100 focus:bg-teal-600","purple-dark":"border-purple-500 bg-purple-500 text-white hocus:ring-2 hocus:ring-purple-100 focus:bg-purple-600","red-dark":"border-red-500 bg-red-500 text-white hocus:ring-2 hocus:ring-red-100 focus:bg-red-600","gray-dark":"border-gray-800 bg-gray-800 text-white hocus:ring-2 hocus:ring-gray-100","gray-darkest":"border-gray-1000 bg-gray-1000 text-white hocus:ring-2 hocus:ring-gray-100",disabled:"border-gray-500 bg-gray-500 text-white"},a={20:"px-4px py-0 text-14px leading-20px",24:"px-8px py-2px text-14px leading-20px",32:"px-12px py-6px text-14px leading-20px",40:"px-16px py-8px text-16px leading-24px",48:"px-20px py-12px text-16px leading-24px"},g="border rounded rounded-4px flex font-medium items-center transition duration-150 enabled:hover:ring-2 enabled:focus:ring-2 disabled:cursor-not-allowed",s={variant:String,size:String,disabled:Boolean},d=e.defineComponent((u,{slots:i})=>{const{variant:t="indigo-dark",size:l="32",disabled:n=!1}=u,b=e.computed(()=>n&&!["outline-dark","outline-light","link"].includes(t)?"disabled":t),p=e.computed(()=>n||t==="disabled");return()=>{var o;return e.h("button",{class:[g,r[b.value],a[l]],disabled:p.value},(o=i.default)==null?void 0:o.call(i))}});return d.props=s,d});
 /* <windicss-keep class="border-transparent text-indigo-600 hover:underline disabled:text-gray-500 disabled:no-underline ring-transparent border-gray-100 text-indigo-500 hocus:border-gray-200 disabled:border-gray-100 hocus:ring-gray-50 border-white/20 text-white hocus:border-white/60 hocus:ring-white/20 disabled:border-white/20 disabled:text-white/50 bg-white border-indigo-50 bg-indigo-50 hocus:border-indigo-200 hocus:ring-2 hocus:ring-indigo-50 border-indigo-500 bg-indigo-500 hocus:ring-indigo-100 focus:bg-indigo-600 bg-jade-200 text-teal-600 hocus:border-jade-300 hocus:ring-jade-50 border-jade-500 bg-jade-500 hocus:ring-jade-100 border-teal-500 bg-teal-500 hocus:ring-teal-100 focus:bg-teal-600 border-purple-500 bg-purple-500 hocus:ring-purple-100 focus:bg-purple-600 border-red-500 bg-red-500 hocus:ring-red-100 focus:bg-red-600 border-gray-800 bg-gray-800 hocus:ring-gray-100 border-gray-1000 bg-gray-1000 border-gray-500 bg-gray-500 px-4px py-0 text-14px leading-20px px-8px py-2px px-12px py-6px px-16px py-8px text-16px leading-24px px-20px py-12px border rounded rounded-4px flex font-medium items-center transition duration-150 enabled:hover:ring-2 enabled:focus:ring-2 disabled:cursor-not-allowed"> */
 
 //# sourceMappingURL=index.umd.js.map

dist/vue/Button.d.ts

@@ -1,4 +0,13 @@
-import type { ButtonProps } from '../constants';
-declare const Button: import("vue").DefineComponent<ButtonProps, object, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ButtonProps>, {}>;
+declare const Button: import("vue").DefineComponent<{
+    variant?: "link" | "outline-light" | "outline-dark" | "white" | "indigo-light" | "indigo-dark" | "jade-light" | "jade-dark" | "teal-dark" | "purple-dark" | "red-dark" | "gray-dark" | "gray-darkest" | "disabled" | undefined;
+    size?: "20" | "24" | "32" | "40" | "48" | undefined;
+    disabled?: boolean | undefined;
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    variant?: "link" | "outline-light" | "outline-dark" | "white" | "indigo-light" | "indigo-dark" | "jade-light" | "jade-dark" | "teal-dark" | "purple-dark" | "red-dark" | "gray-dark" | "gray-darkest" | "disabled" | undefined;
+    size?: "20" | "24" | "32" | "40" | "48" | undefined;
+    disabled?: boolean | undefined;
+}>, {}>;
 export default Button;
 //# sourceMappingURL=Button.d.ts.map

package.json

 {
   "name": "@cypress-design/vue-button",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "files": [
@@ -5,0 +5,0 @@ "*"

No alert changes

Improved metrics

Total package byte prevSize

29589

3.52%

Lines of code

268

3.08%

No dependency changes