adverich-kun-ui 0.1.25 → 0.1.27

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,13 +1,12 @@
1
- import { computed as c, createElementBlock as n, openBlock as t, normalizeClass as x, createElementVNode as u, createCommentVNode as a, renderSlot as o, createBlock as r, createVNode as g, h as f } from "vue";
2
- import s from "../../../KunAppbarTitle/src/components/KunAppbarTitle.vue.js";
3
- import m from "../../../KunIcon/src/components/KunIcon.vue.js";
4
- const S = { class: "flex items-center gap-2" }, v = {
1
+ import { computed as u, createElementBlock as o, openBlock as i, normalizeClass as m, createElementVNode as a, createCommentVNode as r, renderSlot as s, createBlock as h, createVNode as g } from "vue";
2
+ import d from "../../../KunAppbarTitle/src/components/KunAppbarTitle.vue.js";
3
+ const y = { class: "flex items-center gap-2" }, S = {
5
4
  key: 0,
6
5
  class: "flex-1 flex justify-center"
7
- }, b = {
6
+ }, w = {
8
7
  key: 1,
9
8
  class: "flex-1 flex justify-end"
10
- }, k = { class: "flex items-center gap-2" }, C = {
9
+ }, x = { class: "flex items-center gap-2 ml-auto" }, z = {
11
10
  __name: "KunAppbar",
12
11
  props: {
13
12
  bgColor: {
@@ -33,18 +32,15 @@ const S = { class: "flex items-center gap-2" }, v = {
33
32
  titlePosition: {
34
33
  type: String,
35
34
  default: "center",
36
- // 'left', 'center', 'right'
37
- validator: (e) => ["left", "center", "right"].includes(e)
35
+ validator: (t) => ["left", "center", "right"].includes(t)
38
36
  },
39
37
  density: {
40
38
  type: String,
41
39
  default: "default"
42
- // 'default', 'comfortable', 'compact'
43
40
  },
44
41
  elevation: {
45
42
  type: String,
46
43
  default: "md"
47
- // 'none', 'sm', 'md', 'lg', etc.
48
44
  },
49
45
  bordered: {
50
46
  type: Boolean,
@@ -53,14 +49,10 @@ const S = { class: "flex items-center gap-2" }, v = {
53
49
  showDrawerButton: {
54
50
  type: Boolean,
55
51
  default: !0
56
- },
57
- drawerIcon: {
58
- type: [String, Object, Function],
59
- default: null
60
52
  }
61
53
  },
62
- setup(e) {
63
- const l = e, h = c(() => {
54
+ setup(t) {
55
+ const l = t, f = u(() => {
64
56
  switch (l.density) {
65
57
  case "comfortable":
66
58
  return "h-12 py-1";
@@ -69,86 +61,67 @@ const S = { class: "flex items-center gap-2" }, v = {
69
61
  default:
70
62
  return "h-14 py-2";
71
63
  }
72
- }), y = c(() => {
73
- const i = ["sm", "md", "lg", "xl", "2xl"];
74
- return l.elevation === "none" || !i.includes(l.elevation) ? "" : `shadow-${l.elevation}`;
75
- }), w = {
76
- render() {
77
- return f("svg", {
78
- xmlns: "http://www.w3.org/2000/svg",
79
- class: "h-5 w-5",
80
- fill: "none",
81
- viewBox: "0 0 24 24",
82
- stroke: "currentColor"
83
- }, [
84
- f("path", {
85
- "stroke-linecap": "round",
86
- "stroke-linejoin": "round",
87
- "stroke-width": "2",
88
- d: "M4 6h16M4 12h16M4 18h16"
89
- })
90
- ]);
91
- }
92
- };
93
- return (i, d) => (t(), n("header", {
94
- class: x(["flex items-center px-4 w-full", [
95
- h.value,
96
- e.bgColor,
97
- y.value,
98
- e.bordered ? "border-b border-gray-200" : ""
99
- ]])
64
+ }), c = u(() => {
65
+ const e = ["sm", "md", "lg", "xl", "2xl"];
66
+ return l.elevation === "none" || !e.includes(l.elevation) ? "" : `shadow-${l.elevation}`;
67
+ });
68
+ return (e, n) => (i(), o("header", {
69
+ class: m(["flex items-center px-4 w-full", [f.value, t.bgColor, c.value, t.bordered ? "border-b border-gray-200" : ""]])
100
70
  }, [
101
- u("div", S, [
102
- o(i.$slots, "appbarButton", {}, () => [
103
- e.showDrawerButton ? (t(), n("button", {
71
+ a("div", y, [
72
+ s(e.$slots, "appbarButton", {}, () => [
73
+ t.showDrawerButton ? (i(), o("button", {
104
74
  key: 0,
105
75
  class: "p-2 rounded-md hover:bg-white/10 transition",
106
- onClick: d[0] || (d[0] = (z) => i.$emit("toggle-drawer"))
107
- }, [
108
- e.drawerIcon ? (t(), r(m, {
109
- key: 1,
110
- icon: e.drawerIcon,
111
- class: "text-white",
112
- size: "text-lg"
113
- }, null, 8, ["icon"])) : (t(), r(m, {
114
- key: 0,
115
- icon: w,
116
- class: "text-white",
117
- size: "text-lg"
118
- }))
119
- ])) : a("", !0)
76
+ onClick: n[0] || (n[0] = (v) => e.$emit("toggle-drawer"))
77
+ }, n[1] || (n[1] = [
78
+ a("svg", {
79
+ xmlns: "http://www.w3.org/2000/svg",
80
+ class: "h-5 w-5 text-white",
81
+ fill: "none",
82
+ viewBox: "0 0 24 24",
83
+ stroke: "currentColor"
84
+ }, [
85
+ a("path", {
86
+ "stroke-linecap": "round",
87
+ "stroke-linejoin": "round",
88
+ "stroke-width": "2",
89
+ d: "M4 6h16M4 12h16M4 18h16"
90
+ })
91
+ ], -1)
92
+ ]))) : r("", !0)
120
93
  ]),
121
- o(i.$slots, "prepend"),
122
- e.title && e.titlePosition === "left" ? (t(), r(s, {
94
+ s(e.$slots, "prepend"),
95
+ t.title && t.titlePosition === "left" ? (i(), h(d, {
123
96
  key: 0,
124
- title: e.title,
125
- titleImage: e.titleImage,
126
- textSize: e.titleSize,
127
- fontWeight: e.titleWeight
128
- }, null, 8, ["title", "titleImage", "textSize", "fontWeight"])) : a("", !0)
97
+ title: t.title,
98
+ titleImage: t.titleImage,
99
+ textSize: t.titleSize,
100
+ fontWeight: t.titleWeight
101
+ }, null, 8, ["title", "titleImage", "textSize", "fontWeight"])) : r("", !0)
129
102
  ]),
130
- e.title && e.titlePosition === "center" ? (t(), n("div", v, [
131
- g(s, {
132
- title: e.title,
133
- titleImage: e.titleImage,
134
- textSize: e.titleSize,
135
- fontWeight: e.titleWeight
103
+ t.title && t.titlePosition === "center" ? (i(), o("div", S, [
104
+ g(d, {
105
+ title: t.title,
106
+ titleImage: t.titleImage,
107
+ textSize: t.titleSize,
108
+ fontWeight: t.titleWeight
136
109
  }, null, 8, ["title", "titleImage", "textSize", "fontWeight"])
137
- ])) : a("", !0),
138
- e.title && e.titlePosition === "right" ? (t(), n("div", b, [
139
- g(s, {
140
- title: e.title,
141
- titleImage: e.titleImage,
142
- textSize: e.titleSize,
143
- fontWeight: e.titleWeight
110
+ ])) : r("", !0),
111
+ t.title && t.titlePosition === "right" ? (i(), o("div", w, [
112
+ g(d, {
113
+ title: t.title,
114
+ titleImage: t.titleImage,
115
+ textSize: t.titleSize,
116
+ fontWeight: t.titleWeight
144
117
  }, null, 8, ["title", "titleImage", "textSize", "fontWeight"])
145
- ])) : a("", !0),
146
- u("div", k, [
147
- o(i.$slots, "actions")
118
+ ])) : r("", !0),
119
+ a("div", x, [
120
+ s(e.$slots, "actions")
148
121
  ])
149
122
  ], 2));
150
123
  }
151
124
  };
152
125
  export {
153
- C as default
126
+ z as default
154
127
  };
@@ -1,5 +1,5 @@
1
- import { computed as u, createElementBlock as n, openBlock as a, normalizeClass as c, renderSlot as r, createCommentVNode as s, createElementVNode as g, createTextVNode as f, toDisplayString as p } from "vue";
2
- const x = ["disabled"], m = {
1
+ import { computed as u, createElementBlock as r, openBlock as a, normalizeClass as c, renderSlot as l, createCommentVNode as s, createElementVNode as g, createTextVNode as f, toDisplayString as x } from "vue";
2
+ const p = ["disabled"], m = {
3
3
  key: 1,
4
4
  class: "mr-2 flex items-center"
5
5
  }, y = {
@@ -23,10 +23,12 @@ const x = ["disabled"], m = {
23
23
  validator: (e) => ["default", "tonal", "plain", "outline", "soft"].includes(e)
24
24
  },
25
25
  disabled: { type: Boolean, default: !1 },
26
- loading: { type: Boolean, default: !1 }
26
+ loading: { type: Boolean, default: !1 },
27
+ bgColor: { type: String, default: null },
28
+ textColor: { type: String, default: null }
27
29
  },
28
30
  setup(e) {
29
- const o = e, i = (t) => {
31
+ const n = e, i = (t) => {
30
32
  switch (t) {
31
33
  case "xxs":
32
34
  return "px-1 py-1 text-xs";
@@ -44,7 +46,9 @@ const x = ["disabled"], m = {
44
46
  return "px-4 py-4 text-base";
45
47
  }
46
48
  }, d = u(() => {
47
- switch (o.variant) {
49
+ if (n.bgColor || n.textColor)
50
+ return `${n.bgColor ?? ""} ${n.textColor ?? ""}`;
51
+ switch (n.variant) {
48
52
  case "default":
49
53
  return "bg-green-700 text-white";
50
54
  case "tonal":
@@ -59,7 +63,7 @@ const x = ["disabled"], m = {
59
63
  return "";
60
64
  }
61
65
  });
62
- return (t, l) => (a(), n("button", {
66
+ return (t, o) => (a(), r("button", {
63
67
  type: "button",
64
68
  class: c(["flex items-center justify-center break-keep transition-all", [
65
69
  e.minWidth,
@@ -73,20 +77,20 @@ const x = ["disabled"], m = {
73
77
  ]]),
74
78
  disabled: e.loading || e.disabled
75
79
  }, [
76
- e.loading ? r(t.$slots, "loader", { key: 0 }, () => [
77
- l[0] || (l[0] = g("span", { class: "mr-2 h-5 w-5 border-[3px] border-current opacity-100 border-opacity-100 border-t-transparent rounded-full animate-spin" }, null, -1))
78
- ]) : t.$slots.prepend ? (a(), n("span", m, [
79
- r(t.$slots, "prepend")
80
+ e.loading ? l(t.$slots, "loader", { key: 0 }, () => [
81
+ o[0] || (o[0] = g("span", { class: "mr-2 h-5 w-5 border-[3px] border-current opacity-100 border-opacity-100 border-t-transparent rounded-full animate-spin" }, null, -1))
82
+ ]) : t.$slots.prepend ? (a(), r("span", m, [
83
+ l(t.$slots, "prepend")
80
84
  ])) : s("", !0),
81
- !e.loading && (t.$slots.default || e.text) ? (a(), n("span", y, [
82
- r(t.$slots, "default", {}, () => [
83
- f(p(e.text), 1)
85
+ !e.loading && (t.$slots.default || e.text) ? (a(), r("span", y, [
86
+ l(t.$slots, "default", {}, () => [
87
+ f(x(e.text), 1)
84
88
  ])
85
89
  ])) : s("", !0),
86
- !e.loading && t.$slots.append ? (a(), n("span", b, [
87
- r(t.$slots, "append")
90
+ !e.loading && t.$slots.append ? (a(), r("span", b, [
91
+ l(t.$slots, "append")
88
92
  ])) : s("", !0)
89
- ], 10, x));
93
+ ], 10, p));
90
94
  }
91
95
  };
92
96
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "adverich-kun-ui",
3
- "version": "0.1.25",
3
+ "version": "0.1.27",
4
4
  "type": "module",
5
5
  "description": "Una librería de componentes Vue.js con Tailwind CSS",
6
6
  "main": "dist/index.js",