btt-ui 1.0.6 → 1.0.8

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 (9) hide show
  1. package/es/src/button/src/button.mjs +13 -11
  2. package/es/src/button/src/style/index.css +5 -8
  3. package/es/src/textButton/src/button.mjs +31 -21
  4. package/es/src/textButton/src/style/index.css +12 -1
  5. package/lib/src/button/src/button.js +1 -1
  6. package/lib/src/button/src/style/index.css +5 -8
  7. package/lib/src/textButton/src/button.js +1 -1
  8. package/lib/src/textButton/src/style/index.css +12 -1
  9. package/package.json +1 -1
package/es/src/button/src/button.mjs CHANGED
@@ -1,10 +1,10 @@
1
- import { defineComponent as r, computed as i, openBlock as n, createElementBlock as p, normalizeClass as c, unref as o, normalizeStyle as d, createBlock as u, createCommentVNode as m, createElementVNode as b, renderSlot as y } from "vue";
1
+ import { defineComponent as a, computed as c, openBlock as n, createElementBlock as p, normalizeClass as d, unref as o, normalizeStyle as r, createBlock as u, createCommentVNode as m, createElementVNode as b, renderSlot as y } from "vue";
2
2
  import { Icon as f } from "../../icon/index.mjs";
3
3
  import { createNamespace as k } from "../../../assets/ts/utils.mjs";
4
4
  import "./style/index.css";
5
- const B = ["disabled"], z = r({
5
+ const B = ["disabled"], z = a({
6
6
  name: "k-button"
7
- }), E = r({
7
+ }), E = a({
8
8
  ...z,
9
9
  props: {
10
10
  type: { default: "default" },
@@ -20,14 +20,14 @@ const B = ["disabled"], z = r({
20
20
  textColor: {}
21
21
  },
22
22
  emits: [""],
23
- setup(a) {
24
- const t = a, { n: l } = k("button"), s = i(() => t.color ? {
23
+ setup(s) {
24
+ const t = s, { n: l } = k("button"), i = c(() => t.color ? {
25
25
  "--k-button-bg-color": t.color,
26
26
  "--k-button-text-color": "var(--k-color-white)",
27
27
  "--k-button-border-color": t.color
28
28
  } : {});
29
29
  return (e, C) => (n(), p("button", {
30
- class: c([
30
+ class: d([
31
31
  o(l)(),
32
32
  e.type && o(l)(`--${e.type}`),
33
33
  e.size && o(l)(`--${e.size}`),
@@ -37,9 +37,9 @@ const B = ["disabled"], z = r({
37
37
  e.disabled && "is-disabled",
38
38
  e.text && "is-text"
39
39
  ]),
40
- style: d({
41
- color: e.textColor,
42
- ...s.value
40
+ style: r({
41
+ color: e.color,
42
+ ...i.value
43
43
  }),
44
44
  disabled: e.disabled,
45
45
  type: "button"
@@ -48,9 +48,11 @@ const B = ["disabled"], z = r({
48
48
  key: 0,
49
49
  name: e.icon
50
50
  }, null, 8, ["name"])) : m("", !0),
51
- b("span", null, [
51
+ b("span", {
52
+ style: r({ color: e.textColor })
53
+ }, [
52
54
  y(e.$slots, "default")
53
- ])
55
+ ], 4)
54
56
  ], 14, B));
55
57
  }
56
58
  });
package/es/src/button/src/style/index.css CHANGED
@@ -25,7 +25,6 @@ button, input, optgroup, select, textarea {
25
25
  display: inline-flex;
26
26
  justify-content: center;
27
27
  align-items: center;
28
- height: var(--k-button-size);
29
28
  white-space: nowrap;
30
29
  cursor: pointer;
31
30
  color: var(--k-button-text-color);
@@ -35,7 +34,6 @@ button, input, optgroup, select, textarea {
35
34
  -webkit-user-select: none;
36
35
  -moz-user-select: none;
37
36
  user-select: none;
38
- vertical-align: middle;
39
37
  background-color: var(--k-button-bg-color);
40
38
  border: var(--k-border);
41
39
  border-color: var(--k-button-border-color);
@@ -46,7 +44,7 @@ button, input, optgroup, select, textarea {
46
44
  border-radius: 5px;
47
45
  }
48
46
  .k-button + .k-button {
49
- margin-left: 12px;
47
+ margin-left: 6px;
50
48
  }
51
49
  .k-button::before {
52
50
  position: absolute;
@@ -70,7 +68,6 @@ button, input, optgroup, select, textarea {
70
68
  --k-button-size: var(--k-button-size-mini);
71
69
  --k-button-padding: calc(var(--k-button-size) - 20px) calc(var(--k-button-size) - 16px);
72
70
  height: var(--k-button-size);
73
- line-height: var(--k-button-size);
74
71
  font-size: var(--k-font-size-mini);
75
72
  border-radius: 2px;
76
73
  }
@@ -78,7 +75,6 @@ button, input, optgroup, select, textarea {
78
75
  --k-button-size: var(--k-button-size-small);
79
76
  --k-button-padding: calc(var(--k-button-size) - 20px) calc(var(--k-button-size) - 16px);
80
77
  height: var(--k-button-size);
81
- line-height: var(--k-button-size);
82
78
  font-size: var(--k-font-size-small);
83
79
  border-radius: 2px;
84
80
  }
@@ -86,7 +82,6 @@ button, input, optgroup, select, textarea {
86
82
  --k-button-size: var(--k-button-size-middle);
87
83
  --k-button-padding: calc(var(--k-button-size) - 20px) calc(var(--k-button-size) - 16px);
88
84
  height: var(--k-button-size);
89
- line-height: var(--k-button-size);
90
85
  font-size: var(--k-font-size-middle);
91
86
  border-radius: 14px;
92
87
  }
@@ -94,7 +89,6 @@ button, input, optgroup, select, textarea {
94
89
  --k-button-size: var(--k-button-size-large);
95
90
  --k-button-padding: calc(var(--k-button-size) - 20px) calc(var(--k-button-size) - 16px);
96
91
  height: var(--k-button-size);
97
- line-height: var(--k-button-size);
98
92
  font-size: var(--k-font-size-large);
99
93
  border-radius: 16px;
100
94
  }
@@ -195,8 +189,11 @@ button, input, optgroup, select, textarea {
195
189
  border: 0 solid transparent;
196
190
  background-color: transparent;
197
191
  }
192
+ .k-button.is-text:active::before {
193
+ opacity: 0;
194
+ }
198
195
  .k-button .k-icon {
199
- margin-right: 4px;
196
+ margin-right: 2px;
200
197
  }
201
198
 
202
199
  @keyframes change {
package/es/src/textButton/src/button.mjs CHANGED
@@ -1,39 +1,49 @@
1
- import { defineComponent as n, openBlock as t, createElementBlock as a, normalizeClass as r, unref as o, normalizeStyle as s, createBlock as c, createCommentVNode as m, createElementVNode as i, renderSlot as d } from "vue";
2
- import { createNamespace as p } from "../../../assets/ts/utils.mjs";
1
+ import { defineComponent as c, openBlock as e, createElementBlock as r, normalizeClass as n, unref as l, normalizeStyle as s, createBlock as i, createElementVNode as a, createCommentVNode as m, renderSlot as d } from "vue";
2
+ import { createNamespace as u } from "../../../assets/ts/utils.mjs";
3
3
  import "./style/index.css";
4
- import { Icon as u } from "../../icon/index.mjs";
5
- const f = n({
4
+ import { Icon as p } from "../../icon/index.mjs";
5
+ const f = {
6
+ key: 1,
7
+ class: "custom-icon"
8
+ }, b = ["src"], k = c({
6
9
  name: "k-text-button"
7
- }), g = n({
8
- ...f,
10
+ }), N = c({
11
+ ...k,
9
12
  props: {
10
13
  size: { default: "small" },
11
14
  icon: {},
12
15
  color: { default: "#000000" },
13
16
  bgColor: { default: "none" },
14
17
  iconUrl: {},
15
- disabled: { type: Boolean }
18
+ disabled: { type: Boolean },
19
+ textColor: { default: "#000000" }
16
20
  },
17
21
  emits: [""],
18
- setup(b) {
19
- const { n: l } = p("text-button");
20
- return (e, k) => (t(), a("div", {
21
- class: r([o(l)(), e.size, e.disabled ? "disable" : ""]),
22
- style: s({ color: e.color, background: e.bgColor })
22
+ setup(C) {
23
+ const { n: t } = u("text-button");
24
+ return (o, y) => (e(), r("div", {
25
+ class: n([l(t)(), o.size, o.disabled ? "disable" : ""]),
26
+ style: s({ color: o.color, background: o.bgColor })
23
27
  }, [
24
- e.icon ? (t(), c(o(u), {
28
+ o.icon ? (e(), i(l(p), {
25
29
  key: 0,
26
- name: e.icon,
27
- color: e.color
28
- }, null, 8, ["name", "color"])) : m("", !0),
29
- i("span", {
30
- class: r([o(l)("text")])
30
+ name: o.icon,
31
+ color: o.color
32
+ }, null, 8, ["name", "color"])) : o.iconUrl ? (e(), r("span", f, [
33
+ a("img", {
34
+ src: o.iconUrl,
35
+ alt: ""
36
+ }, null, 8, b)
37
+ ])) : m("", !0),
38
+ a("span", {
39
+ class: n([l(t)("text")]),
40
+ style: s({ color: o.textColor })
31
41
  }, [
32
- d(e.$slots, "default")
33
- ], 2)
42
+ d(o.$slots, "default")
43
+ ], 6)
34
44
  ], 6));
35
45
  }
36
46
  });
37
47
  export {
38
- g as default
48
+ N as default
39
49
  };
package/es/src/textButton/src/style/index.css CHANGED
@@ -10,8 +10,19 @@
10
10
  .k-text-button .k-text-button__icon {
11
11
  width: 12px;
12
12
  height: 12px;
13
- background: none;
14
13
  background-size: contain;
14
+ background-repeat: no-repeat;
15
+ }
16
+ .k-text-button .custom-icon {
17
+ width: 12px;
18
+ height: 12px;
19
+ display: flex;
20
+ align-items: center;
21
+ justify-content: center;
22
+ }
23
+ .k-text-button .custom-icon img {
24
+ width: 100%;
25
+ pointer-events: none;
15
26
  }
16
27
  .k-text-button:hover {
17
28
  text-shadow: 1px 1px 2px rgba(3, 3, 3, 0.231372549);
package/lib/src/button/src/button.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("../../icon/index.js"),i=require("../../../assets/ts/utils.js");require("./style/index.css");const a=["disabled"],u=e.defineComponent({name:"k-button"}),c=e.defineComponent({...u,props:{type:{default:"default"},size:{},plain:{type:Boolean},autofocus:{type:Boolean},round:{type:Boolean},circle:{type:Boolean},text:{type:Boolean},icon:{},color:{},disabled:{type:Boolean},textColor:{}},emits:[""],setup(l){const t=l,{n}=i.createNamespace("button"),s=e.computed(()=>t.color?{"--k-button-bg-color":t.color,"--k-button-text-color":"var(--k-color-white)","--k-button-border-color":t.color}:{});return(o,d)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass([e.unref(n)(),o.type&&e.unref(n)(`--${o.type}`),o.size&&e.unref(n)(`--${o.size}`),o.plain&&"is-plain",o.round&&"is-round",o.circle&&"is-circle",o.disabled&&"is-disabled",o.text&&"is-text"]),style:e.normalizeStyle({color:o.textColor,...s.value}),disabled:o.disabled,type:"button"},[o.icon?(e.openBlock(),e.createBlock(e.unref(r.Icon),{key:0,name:o.icon},null,8,["name"])):e.createCommentVNode("",!0),e.createElementVNode("span",null,[e.renderSlot(o.$slots,"default")])],14,a))}});exports.default=c;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("../../icon/index.js"),i=require("../../../assets/ts/utils.js");require("./style/index.css");const a=["disabled"],u=e.defineComponent({name:"k-button"}),c=e.defineComponent({...u,props:{type:{default:"default"},size:{},plain:{type:Boolean},autofocus:{type:Boolean},round:{type:Boolean},circle:{type:Boolean},text:{type:Boolean},icon:{},color:{},disabled:{type:Boolean},textColor:{}},emits:[""],setup(l){const t=l,{n}=i.createNamespace("button"),s=e.computed(()=>t.color?{"--k-button-bg-color":t.color,"--k-button-text-color":"var(--k-color-white)","--k-button-border-color":t.color}:{});return(o,d)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass([e.unref(n)(),o.type&&e.unref(n)(`--${o.type}`),o.size&&e.unref(n)(`--${o.size}`),o.plain&&"is-plain",o.round&&"is-round",o.circle&&"is-circle",o.disabled&&"is-disabled",o.text&&"is-text"]),style:e.normalizeStyle({color:o.color,...s.value}),disabled:o.disabled,type:"button"},[o.icon?(e.openBlock(),e.createBlock(e.unref(r.Icon),{key:0,name:o.icon},null,8,["name"])):e.createCommentVNode("",!0),e.createElementVNode("span",{style:e.normalizeStyle({color:o.textColor})},[e.renderSlot(o.$slots,"default")],4)],14,a))}});exports.default=c;
package/lib/src/button/src/style/index.css CHANGED
@@ -25,7 +25,6 @@ button, input, optgroup, select, textarea {
25
25
  display: inline-flex;
26
26
  justify-content: center;
27
27
  align-items: center;
28
- height: var(--k-button-size);
29
28
  white-space: nowrap;
30
29
  cursor: pointer;
31
30
  color: var(--k-button-text-color);
@@ -35,7 +34,6 @@ button, input, optgroup, select, textarea {
35
34
  -webkit-user-select: none;
36
35
  -moz-user-select: none;
37
36
  user-select: none;
38
- vertical-align: middle;
39
37
  background-color: var(--k-button-bg-color);
40
38
  border: var(--k-border);
41
39
  border-color: var(--k-button-border-color);
@@ -46,7 +44,7 @@ button, input, optgroup, select, textarea {
46
44
  border-radius: 5px;
47
45
  }
48
46
  .k-button + .k-button {
49
- margin-left: 12px;
47
+ margin-left: 6px;
50
48
  }
51
49
  .k-button::before {
52
50
  position: absolute;
@@ -70,7 +68,6 @@ button, input, optgroup, select, textarea {
70
68
  --k-button-size: var(--k-button-size-mini);
71
69
  --k-button-padding: calc(var(--k-button-size) - 20px) calc(var(--k-button-size) - 16px);
72
70
  height: var(--k-button-size);
73
- line-height: var(--k-button-size);
74
71
  font-size: var(--k-font-size-mini);
75
72
  border-radius: 2px;
76
73
  }
@@ -78,7 +75,6 @@ button, input, optgroup, select, textarea {
78
75
  --k-button-size: var(--k-button-size-small);
79
76
  --k-button-padding: calc(var(--k-button-size) - 20px) calc(var(--k-button-size) - 16px);
80
77
  height: var(--k-button-size);
81
- line-height: var(--k-button-size);
82
78
  font-size: var(--k-font-size-small);
83
79
  border-radius: 2px;
84
80
  }
@@ -86,7 +82,6 @@ button, input, optgroup, select, textarea {
86
82
  --k-button-size: var(--k-button-size-middle);
87
83
  --k-button-padding: calc(var(--k-button-size) - 20px) calc(var(--k-button-size) - 16px);
88
84
  height: var(--k-button-size);
89
- line-height: var(--k-button-size);
90
85
  font-size: var(--k-font-size-middle);
91
86
  border-radius: 14px;
92
87
  }
@@ -94,7 +89,6 @@ button, input, optgroup, select, textarea {
94
89
  --k-button-size: var(--k-button-size-large);
95
90
  --k-button-padding: calc(var(--k-button-size) - 20px) calc(var(--k-button-size) - 16px);
96
91
  height: var(--k-button-size);
97
- line-height: var(--k-button-size);
98
92
  font-size: var(--k-font-size-large);
99
93
  border-radius: 16px;
100
94
  }
@@ -195,8 +189,11 @@ button, input, optgroup, select, textarea {
195
189
  border: 0 solid transparent;
196
190
  background-color: transparent;
197
191
  }
192
+ .k-button.is-text:active::before {
193
+ opacity: 0;
194
+ }
198
195
  .k-button .k-icon {
199
- margin-right: 4px;
196
+ margin-right: 2px;
200
197
  }
201
198
 
202
199
  @keyframes change {
package/lib/src/textButton/src/button.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),l=require("../../../assets/ts/utils.js");require("./style/index.css");const t=require("../../icon/index.js"),s=e.defineComponent({name:"k-text-button"}),r=e.defineComponent({...s,props:{size:{default:"small"},icon:{},color:{default:"#000000"},bgColor:{default:"none"},iconUrl:{},disabled:{type:Boolean}},emits:[""],setup(a){const{n}=l.createNamespace("text-button");return(o,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([e.unref(n)(),o.size,o.disabled?"disable":""]),style:e.normalizeStyle({color:o.color,background:o.bgColor})},[o.icon?(e.openBlock(),e.createBlock(e.unref(t.Icon),{key:0,name:o.icon,color:o.color},null,8,["name","color"])):e.createCommentVNode("",!0),e.createElementVNode("span",{class:e.normalizeClass([e.unref(n)("text")])},[e.renderSlot(o.$slots,"default")],2)],6))}});exports.default=r;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),n=require("../../../assets/ts/utils.js");require("./style/index.css");const t=require("../../icon/index.js"),s={key:1,class:"custom-icon"},r=["src"],a=e.defineComponent({name:"k-text-button"}),c=e.defineComponent({...a,props:{size:{default:"small"},icon:{},color:{default:"#000000"},bgColor:{default:"none"},iconUrl:{},disabled:{type:Boolean},textColor:{default:"#000000"}},emits:[""],setup(i){const{n:l}=n.createNamespace("text-button");return(o,u)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([e.unref(l)(),o.size,o.disabled?"disable":""]),style:e.normalizeStyle({color:o.color,background:o.bgColor})},[o.icon?(e.openBlock(),e.createBlock(e.unref(t.Icon),{key:0,name:o.icon,color:o.color},null,8,["name","color"])):o.iconUrl?(e.openBlock(),e.createElementBlock("span",s,[e.createElementVNode("img",{src:o.iconUrl,alt:""},null,8,r)])):e.createCommentVNode("",!0),e.createElementVNode("span",{class:e.normalizeClass([e.unref(l)("text")]),style:e.normalizeStyle({color:o.textColor})},[e.renderSlot(o.$slots,"default")],6)],6))}});exports.default=c;
package/lib/src/textButton/src/style/index.css CHANGED
@@ -10,8 +10,19 @@
10
10
  .k-text-button .k-text-button__icon {
11
11
  width: 12px;
12
12
  height: 12px;
13
- background: none;
14
13
  background-size: contain;
14
+ background-repeat: no-repeat;
15
+ }
16
+ .k-text-button .custom-icon {
17
+ width: 12px;
18
+ height: 12px;
19
+ display: flex;
20
+ align-items: center;
21
+ justify-content: center;
22
+ }
23
+ .k-text-button .custom-icon img {
24
+ width: 100%;
25
+ pointer-events: none;
15
26
  }
16
27
  .k-text-button:hover {
17
28
  text-shadow: 1px 1px 2px rgba(3, 3, 3, 0.231372549);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "btt-ui",
3
- "version": "1.0.6",
3
+ "version": "1.0.8",
4
4
  "main": "lib/index.js",
5
5
  "module": "es/index.mjs",
6
6
  "files": [