@sysvale/cuida 3.0.0-alpha7 → 3.0.0-alpha8

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 (4) hide show
  1. package/dist/@sysvale/cuida.es.js +69 -86
  2. package/dist/@sysvale/cuida.umd.js +1 -1
  3. package/dist/style.css +1 -1
  4. package/package.json +1 -1
package/dist/@sysvale/cuida.es.js CHANGED
@@ -1,5 +1,5 @@
1
- import { defineComponent as g, openBlock as c, createElementBlock as u, normalizeClass as s, createElementVNode as n, renderSlot as d, resolveComponent as p, toDisplayString as l, createTextVNode as v, createVNode as m } from "vue";
2
- const y = g({
1
+ import { defineComponent as p, openBlock as o, createElementBlock as s, normalizeClass as a, createElementVNode as l, renderSlot as c, createTextVNode as f, toDisplayString as _ } from "vue";
2
+ const g = p({
3
3
  props: {
4
4
  variant: {
5
5
  type: String,
@@ -28,117 +28,100 @@ const y = g({
28
28
  }
29
29
  }
30
30
  });
31
- const _ = (t, a) => {
32
- const e = t.__vccOpts || t;
33
- for (const [r, i] of a)
34
- e[r] = i;
35
- return e;
36
- }, C = { class: "badge__content" };
37
- function b(t, a, e, r, i, o) {
38
- return c(), u("div", {
39
- class: s(["badge__container", t.predefinedStyle])
31
+ const u = (e, t) => {
32
+ const n = e.__vccOpts || e;
33
+ for (const [r, d] of t)
34
+ n[r] = d;
35
+ return n;
36
+ }, m = { class: "badge__content" };
37
+ function b(e, t, n, r, d, i) {
38
+ return o(), s("div", {
39
+ class: a(["badge__container", e.predefinedStyle])
40
40
  }, [
41
- n("div", C, [
42
- d(t.$slots, "default", {}, void 0, !0)
41
+ l("div", m, [
42
+ c(e.$slots, "default", {}, void 0, !0)
43
43
  ])
44
44
  ], 2);
45
45
  }
46
- const B = /* @__PURE__ */ _(y, [["render", b], ["__scopeId", "data-v-c17276fb"]]);
47
- const S = {
46
+ const y = /* @__PURE__ */ u(g, [["render", b], ["__scopeId", "data-v-c17276fb"]]);
47
+ const v = {
48
+ data() {
49
+ return {
50
+ predefinedColors: [
51
+ "teal",
52
+ "green",
53
+ "blue",
54
+ "indigo",
55
+ "violet",
56
+ "pink",
57
+ "red",
58
+ "orange",
59
+ "amber"
60
+ ],
61
+ predefinedSizes: [
62
+ "sm",
63
+ "md",
64
+ "lg"
65
+ ]
66
+ };
67
+ },
48
68
  props: {
49
- title: {
50
- type: String,
51
- default: "T\xEDtulo do AlertCard",
52
- required: !0
53
- },
54
- text: {
55
- type: String,
56
- default: "Subt\xEDtulo do AlertCard",
57
- required: !0
58
- },
59
- image: {
60
- type: String,
61
- default: "",
62
- required: !0
63
- },
64
- imageDescription: {
69
+ variant: {
65
70
  type: String,
66
- default: "Imagem de CalloutCard"
71
+ default: "green"
67
72
  },
68
- actionButtonVariant: {
73
+ size: {
69
74
  type: String,
70
- default: "green"
75
+ default: "md"
71
76
  },
72
- actionButtonText: {
77
+ text: {
73
78
  type: String,
74
- default: "Ok"
79
+ default: "Lorem ipsum"
75
80
  },
76
- actionButtonSecondary: {
81
+ disabled: {
77
82
  type: Boolean,
78
83
  default: !1
79
84
  },
80
- actionButtonDisabled: {
85
+ secondary: {
81
86
  type: Boolean,
82
87
  default: !1
88
+ }
89
+ },
90
+ computed: {
91
+ predefinedColor() {
92
+ return this.secondary ? "button--secondary" : this.predefinedColors.indexOf(this.variant) > -1 ? `button--${this.variant}` : "button--green";
83
93
  },
84
- compact: {
85
- type: Boolean,
86
- default: !1
94
+ predefinedSize() {
95
+ return this.predefinedSizes.indexOf(this.size) > -1 ? `button-size--${this.size}` : "button-size--md";
96
+ },
97
+ computedStyle() {
98
+ const e = this.disabled ? "--disabled" : "--active";
99
+ return `${this.predefinedColor}${e} ${this.predefinedSize}`;
87
100
  }
88
101
  },
89
102
  methods: {
90
- resolveClass(t) {
91
- return this.compact ? `${t}--compact` : t;
103
+ clickHandler() {
104
+ this.disabled || this.$emit("click", !0);
92
105
  }
93
106
  }
94
- }, x = { id: "callout-card" }, h = { class: "image__container" }, k = ["src", "alt"], $ = { class: "content__title" }, D = { class: "content__text" };
95
- function V(t, a, e, r, i, o) {
96
- const f = p("cds-button");
97
- return c(), u("span", x, [
98
- n("div", {
99
- class: s(o.resolveClass("callout-card__container"))
107
+ }, h = { id: "cds-button" };
108
+ function $(e, t, n, r, d, i) {
109
+ return o(), s("span", h, [
110
+ l("button", {
111
+ class: a(["button__container", i.computedStyle]),
112
+ onClick: t[0] || (t[0] = (C) => i.clickHandler())
100
113
  }, [
101
- n("div", h, [
102
- n("img", {
103
- class: s(o.resolveClass("image__content")),
104
- src: e.image,
105
- alt: e.imageDescription
106
- }, null, 10, k)
107
- ]),
108
- n("div", {
109
- class: s(o.resolveClass("content__container"))
110
- }, [
111
- n("div", {
112
- class: s(o.resolveClass("content"))
113
- }, [
114
- n("span", $, l(e.title), 1),
115
- n("span", D, [
116
- d(t.$slots, "text", {}, () => [
117
- v(l(e.text), 1)
118
- ])
119
- ])
120
- ], 2),
121
- n("div", null, [
122
- d(t.$slots, "action", {}, () => [
123
- m(f, {
124
- id: "content-button",
125
- variant: e.actionButtonVariant,
126
- text: e.actionButtonText,
127
- secondary: e.actionButtonSecondary,
128
- disabled: e.actionButtonDisabled,
129
- onClick: a[0] || (a[0] = (T) => t.$emit("action-button-click"))
130
- }, null, 8, ["variant", "text", "secondary", "disabled"])
131
- ])
132
- ])
133
- ], 2)
114
+ c(e.$slots, "default", {}, () => [
115
+ f(_(n.text), 1)
116
+ ], !0)
134
117
  ], 2)
135
118
  ]);
136
119
  }
137
- const q = /* @__PURE__ */ _(S, [["render", V]]), O = {
138
- install: (t, a) => {
139
- t.component("CdsBadge", B), t.component("CdsCalloutCard", q);
120
+ const S = /* @__PURE__ */ u(v, [["render", $], ["__scopeId", "data-v-491edd8e"]]), z = {
121
+ install: (e, t) => {
122
+ e.component("CdsBadge", y), e.component("CdsButton", S);
140
123
  }
141
124
  };
142
125
  export {
143
- O as default
126
+ z as default
144
127
  };
package/dist/@sysvale/cuida.umd.js CHANGED
@@ -1 +1 @@
1
- (function(e,a){typeof exports=="object"&&typeof module<"u"?module.exports=a(require("vue")):typeof define=="function"&&define.amd?define(["vue"],a):(e=typeof globalThis<"u"?globalThis:e||self,e["@sysvale/cuida"]=a(e.Vue))})(this,function(e){"use strict";const a=e.defineComponent({props:{variant:{type:String,default:"gray"}},data(){return{predefinedColors:["turquoise","green","blue","indigo","violet","pink","red","orange","amber","gray"]}},computed:{predefinedStyle(){return this.predefinedColors.indexOf(this.variant)>-1?`badge--${this.variant}`:"badge--gray"}}}),S="",d=(t,o)=>{const n=t.__vccOpts||t;for(const[r,l]of o)n[r]=l;return n},i={class:"badge__content"};function c(t,o,n,r,l,s){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["badge__container",t.predefinedStyle])},[e.createElementVNode("div",i,[e.renderSlot(t.$slots,"default",{},void 0,!0)])],2)}const _=d(a,[["render",c],["__scopeId","data-v-c17276fb"]]),h="",u={props:{title:{type:String,default:"T\xEDtulo do AlertCard",required:!0},text:{type:String,default:"Subt\xEDtulo do AlertCard",required:!0},image:{type:String,default:"",required:!0},imageDescription:{type:String,default:"Imagem de CalloutCard"},actionButtonVariant:{type:String,default:"green"},actionButtonText:{type:String,default:"Ok"},actionButtonSecondary:{type:Boolean,default:!1},actionButtonDisabled:{type:Boolean,default:!1},compact:{type:Boolean,default:!1}},methods:{resolveClass(t){return this.compact?`${t}--compact`:t}}},f={id:"callout-card"},m={class:"image__container"},p=["src","alt"],g={class:"content__title"},y={class:"content__text"};function C(t,o,n,r,l,s){const b=e.resolveComponent("cds-button");return e.openBlock(),e.createElementBlock("span",f,[e.createElementVNode("div",{class:e.normalizeClass(s.resolveClass("callout-card__container"))},[e.createElementVNode("div",m,[e.createElementVNode("img",{class:e.normalizeClass(s.resolveClass("image__content")),src:n.image,alt:n.imageDescription},null,10,p)]),e.createElementVNode("div",{class:e.normalizeClass(s.resolveClass("content__container"))},[e.createElementVNode("div",{class:e.normalizeClass(s.resolveClass("content"))},[e.createElementVNode("span",g,e.toDisplayString(n.title),1),e.createElementVNode("span",y,[e.renderSlot(t.$slots,"text",{},()=>[e.createTextVNode(e.toDisplayString(n.text),1)])])],2),e.createElementVNode("div",null,[e.renderSlot(t.$slots,"action",{},()=>[e.createVNode(b,{id:"content-button",variant:n.actionButtonVariant,text:n.actionButtonText,secondary:n.actionButtonSecondary,disabled:n.actionButtonDisabled,onClick:o[0]||(o[0]=V=>t.$emit("action-button-click"))},null,8,["variant","text","secondary","disabled"])])])],2)],2)])}const B=d(u,[["render",C]]);return{install:(t,o)=>{t.component("CdsBadge",_),t.component("CdsCalloutCard",B)}}});
1
+ (function(e,d){typeof exports=="object"&&typeof module<"u"?module.exports=d(require("vue")):typeof define=="function"&&define.amd?define(["vue"],d):(e=typeof globalThis<"u"?globalThis:e||self,e["@sysvale/cuida"]=d(e.Vue))})(this,function(e){"use strict";const d=e.defineComponent({props:{variant:{type:String,default:"gray"}},data(){return{predefinedColors:["turquoise","green","blue","indigo","violet","pink","red","orange","amber","gray"]}},computed:{predefinedStyle(){return this.predefinedColors.indexOf(this.variant)>-1?`badge--${this.variant}`:"badge--gray"}}}),g="",a=(t,n)=>{const i=t.__vccOpts||t;for(const[r,o]of n)i[r]=o;return i},l={class:"badge__content"};function c(t,n,i,r,o,s){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["badge__container",t.predefinedStyle])},[e.createElementVNode("div",l,[e.renderSlot(t.$slots,"default",{},void 0,!0)])],2)}const u=a(d,[["render",c],["__scopeId","data-v-c17276fb"]]),y="",p={data(){return{predefinedColors:["teal","green","blue","indigo","violet","pink","red","orange","amber"],predefinedSizes:["sm","md","lg"]}},props:{variant:{type:String,default:"green"},size:{type:String,default:"md"},text:{type:String,default:"Lorem ipsum"},disabled:{type:Boolean,default:!1},secondary:{type:Boolean,default:!1}},computed:{predefinedColor(){return this.secondary?"button--secondary":this.predefinedColors.indexOf(this.variant)>-1?`button--${this.variant}`:"button--green"},predefinedSize(){return this.predefinedSizes.indexOf(this.size)>-1?`button-size--${this.size}`:"button-size--md"},computedStyle(){const t=this.disabled?"--disabled":"--active";return`${this.predefinedColor}${t} ${this.predefinedSize}`}},methods:{clickHandler(){this.disabled||this.$emit("click",!0)}}},f={id:"cds-button"};function _(t,n,i,r,o,s){return e.openBlock(),e.createElementBlock("span",f,[e.createElementVNode("button",{class:e.normalizeClass(["button__container",s.computedStyle]),onClick:n[0]||(n[0]=h=>s.clickHandler())},[e.renderSlot(t.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(i.text),1)],!0)],2)])}const m=a(p,[["render",_],["__scopeId","data-v-491edd8e"]]);return{install:(t,n)=>{t.component("CdsBadge",u),t.component("CdsButton",m)}}});
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- .badge__container[data-v-c17276fb]{border-radius:50px!important;width:fit-content;padding:4px 12px}.badge__content[data-v-c17276fb]{font-size:16px!important;letter-spacing:.5px!important;font-weight:400;font-weight:500}.badge--turquoise[data-v-c17276fb]{color:#18698b;background-color:#f0faff}.badge--green[data-v-c17276fb]{color:#197155;background-color:#def7eb}.badge--blue[data-v-c17276fb]{color:#206ed9;background-color:#ecf1fe}.badge--indigo[data-v-c17276fb]{color:#3a4788;background-color:#e5eaff}.badge--violet[data-v-c17276fb]{color:#7633b2;background-color:#f8f0ff}.badge--pink[data-v-c17276fb]{color:#a52766;background-color:#ffeff9}.badge--red[data-v-c17276fb]{color:#d22d41;background-color:#ffe6e9}.badge--orange[data-v-c17276fb]{color:#f5613d;background-color:#fff3f0}.badge--amber[data-v-c17276fb]{color:#d38817;background-color:#fff1dc}.badge--gray[data-v-c17276fb]{color:#475766;background-color:#f1f5f9}#callout-card .callout-card,#callout-card .callout-card__container--compact,#callout-card .callout-card__container{display:flex;align-items:center;padding:28px;border-radius:16px;border:1px solid #D3DBE4}#callout-card .callout-card__container{width:700px}#callout-card .callout-card__container--compact{padding:8px 24px}#callout-card .callout-card__content-container{width:20%}#callout-card .image__container{margin:0 28px 0 0}#callout-card .image__content{max-width:200px;max-height:200px}#callout-card .image__content--compact{max-width:120px;max-height:90px}#callout-card .content{margin:0 0 16px}#callout-card .content--compact{max-width:529px;display:flex;flex-direction:column;justify-content:center}#callout-card .content__title{font-size:14px!important;letter-spacing:.25px!important;font-weight:400;font-weight:600;display:block;color:#36424e}#callout-card .content__text{font-size:14px!important;letter-spacing:.1px!important;font-weight:400;display:block;color:#475766}#callout-card .content__container--compact{display:flex;justify-content:space-between;width:100%;align-items:center}
1
+ .badge__container[data-v-c17276fb]{border-radius:50px!important;width:fit-content;padding:4px 12px}.badge__content[data-v-c17276fb]{font-size:16px!important;letter-spacing:.5px!important;font-weight:400;font-weight:500}.badge--turquoise[data-v-c17276fb]{color:#18698b;background-color:#f0faff}.badge--green[data-v-c17276fb]{color:#197155;background-color:#def7eb}.badge--blue[data-v-c17276fb]{color:#206ed9;background-color:#ecf1fe}.badge--indigo[data-v-c17276fb]{color:#3a4788;background-color:#e5eaff}.badge--violet[data-v-c17276fb]{color:#7633b2;background-color:#f8f0ff}.badge--pink[data-v-c17276fb]{color:#a52766;background-color:#ffeff9}.badge--red[data-v-c17276fb]{color:#d22d41;background-color:#ffe6e9}.badge--orange[data-v-c17276fb]{color:#f5613d;background-color:#fff3f0}.badge--amber[data-v-c17276fb]{color:#d38817;background-color:#fff1dc}.badge--gray[data-v-c17276fb]{color:#475766;background-color:#f1f5f9}.button--secondary--active[data-v-491edd8e],.button--secondary--active[data-v-491edd8e]:hover{background-color:#fafcfe;color:#36424e;border:1px solid #BCC7D2!important}.button--secondary--active[data-v-491edd8e]:hover{background-color:#f1f5f9}.button--secondary--disabled[data-v-491edd8e]{cursor:default!important;background-color:#fafcfe;color:#8b99a7;border:1px solid #E2EAF3!important}.button__container[data-v-491edd8e]{font-weight:600;border:none;cursor:pointer}.button__container[data-v-491edd8e]:focus{outline:none!important}.button--teal--active[data-v-491edd8e]{background-color:#3cacdd;color:#fff}.button--teal--active[data-v-491edd8e]:hover{background-color:#26a3d9;color:#fff}.button--teal--disabled[data-v-491edd8e]{background-color:#7bd0f4;color:#fff}.button--teal--disabled[data-v-491edd8e]{cursor:default}.button--green--active[data-v-491edd8e]{background-color:#2ac092;color:#fff}.button--green--active[data-v-491edd8e]:hover{background-color:#25ab82;color:#fff}.button--green--disabled[data-v-491edd8e]{background-color:#6ddfbc;color:#fff}.button--green--disabled[data-v-491edd8e]{cursor:default}.button--blue--active[data-v-491edd8e]{background-color:#377ee1;color:#fff}.button--blue--active[data-v-491edd8e]:hover{background-color:#2170dd;color:#fff}.button--blue--disabled[data-v-491edd8e]{background-color:#83afec;color:#fff}.button--blue--disabled[data-v-491edd8e]{cursor:default}.button--indigo--active[data-v-491edd8e]{background-color:#6174d1;color:#fff}.button--indigo--active[data-v-491edd8e]:hover{background-color:#4d63cb;color:#fff}.button--indigo--disabled[data-v-491edd8e]{background-color:#aab7f8;color:#fff}.button--indigo--disabled[data-v-491edd8e]{cursor:default}.button--violet--active[data-v-491edd8e]{background-color:#a169d3;color:#fff}.button--violet--active[data-v-491edd8e]:hover{background-color:#9555cd;color:#fff}.button--violet--disabled[data-v-491edd8e]{background-color:#ceabed;color:#fff}.button--violet--disabled[data-v-491edd8e]{cursor:default}.button--pink--active[data-v-491edd8e]{background-color:#dd5a9c;color:#fff}.button--pink--active[data-v-491edd8e]:hover{background-color:#d9458f;color:#fff}.button--pink--disabled[data-v-491edd8e]{background-color:#ef8fc0;color:#fff}.button--pink--disabled[data-v-491edd8e]{cursor:default}.button--red--active[data-v-491edd8e]{background-color:#f95367;color:#fff}.button--red--active[data-v-491edd8e]:hover{background-color:#f83a51;color:#fff}.button--red--disabled[data-v-491edd8e]{background-color:#f797a3;color:#fff}.button--red--disabled[data-v-491edd8e]{cursor:default}.button--orange--active[data-v-491edd8e]{background-color:#ff8567;color:#fff}.button--orange--active[data-v-491edd8e]:hover{background-color:#ff714e;color:#fff}.button--orange--disabled[data-v-491edd8e]{background-color:#fdaf9b;color:#fff}.button--orange--disabled[data-v-491edd8e]{cursor:default}.button--amber--active[data-v-491edd8e]{background-color:#ffb952;color:#fff}.button--amber--active[data-v-491edd8e]:hover{background-color:#ffaf39;color:#fff}.button--amber--disabled[data-v-491edd8e]{background-color:#fdcd87;color:#fff}.button--amber--disabled[data-v-491edd8e]{cursor:default}.button-size--sm[data-v-491edd8e]{font-size:12px;padding:8px 16px;border-radius:6px}.button-size--md[data-v-491edd8e]{font-size:14px;padding:12px 24px;border-radius:8px}.button-size--lg[data-v-491edd8e]{font-size:18px;padding:12px 24px;border-radius:8px}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sysvale/cuida",
3
- "version": "3.0.0-alpha7",
3
+ "version": "3.0.0-alpha8",
4
4
  "description": "A design system built by Sysvale, using storybook and Vue components",
5
5
  "repository": {
6
6
  "type": "git",