treqit-ui-library 1.4.7 → 1.4.9
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/README.md +3 -4
- package/dist/treqit-ui-library.css +1 -1
- package/dist/treqit-ui-library.js +75 -37
- package/dist/treqit-ui-library.umd.cjs +1 -1
- package/package.json +3 -1
package/README.md
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Treqit UI library
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
|
|
3
|
+
command to publish to npm
|
|
4
|
+
npm version patch && npm publish --access public
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.btn[data-v-8db92d47]{position:relative;display:inline-flex;align-items:center;justify-content:center;border:none;font-weight:700;cursor:pointer;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease;padding:.5rem 1rem;font-size:1rem;min-width:80px;overflow:hidden}.btn[data-v-8db92d47]:disabled{cursor:not-allowed}.btn--full[data-v-8db92d47]{width:100%}.btn-loader[data-v-8db92d47]{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center}.simple-spinner[data-v-8db92d47]{border:6px solid currentColor;border-top-color:transparent;border-radius:50%;width:32px;height:32px;animation:spin-8db92d47 .8s linear infinite;opacity:.7}@keyframes spin-8db92d47{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.btn-content.content-hidden[data-v-8db92d47]{visibility:hidden;opacity:0}.btn--x-large[data-v-8db92d47]{scrollbar-width:1.125rem;height:60px;font-size:1.35rem;min-width:92px;padding:0 24px;border-radius:12px}.btn--small[data-v-8db92d47]{padding:.25rem .75rem;font-size:.875rem;border-radius:5px!important}.btn--medium[data-v-8db92d47]{padding:.5rem 1rem;font-size:1rem;border-radius:8px!important}.btn--large[data-v-8db92d47]{padding:.75rem 1.5rem;font-size:1.125rem;border-radius:8px!important}.btn--primary[data-v-8db92d47]{background-color:var(--btn-primary-bg);color:#fff;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}.btn--primary[data-v-8db92d47]:not(:disabled):hover{background-color:var(--btn-primary-hover-bg);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.btn--secondary[data-v-8db92d47]{background-color:var(--btn-secondary-bg);color:#1a202c;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;border:2px solid var(--secondary-color, #3C464D)}.btn--secondary[data-v-8db92d47]:not(:disabled):hover{background-color:var(--btn-secondary-hover-bg);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.btn--destructive[data-v-8db92d47]{background-color:#ef4444;color:#fff;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}.btn--destructive[data-v-8db92d47]:not(:disabled):hover{background-color:#dc2626}.btn--outlined[data-v-8db92d47]{background-color:transparent;color:var(--btn-secondary-bg);border:2px solid var(--btn-secondary-bg);box-shadow:none}.btn--outlined[data-v-8db92d47]:not(:disabled):hover{background-color:var(--btn-primary-bg);color:#fff}.btn--outlined-primary[data-v-8db92d47]{background-color:transparent;color:var(--btn-primary-bg);border:2px solid var(--btn-primary-bg);box-shadow:none}.btn--outlined-primary[data-v-8db92d47]:not(:disabled):hover{background-color:var(--btn-primary-bg);color:#fff}.btn--outlined-secondary[data-v-8db92d47]{background-color:#fff;color:var(--secondary-color, #3C464D);border:2px solid var(--secondary-color, #3C464D);box-shadow:none}.btn--outlined-secondary[data-v-8db92d47]:not(:disabled):hover{background-color:var(--secondary-color, #3C464D);color:#fff;border-color:#fff}.btn--elevated[data-v-8db92d47]{background-color:var(--btn-primary-bg);color:#fff;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.btn--elevated[data-v-8db92d47]:not(:disabled):hover{background-color:var(--btn-primary-hover-bg);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.btn--flat[data-v-8db92d47]{background-color:#fff;color:var(--btn-primary-bg);box-shadow:none}.btn--flat[data-v-8db92d47]:not(:disabled):hover{background-color:var(--btn-primary-hover-bg);color:#fff}.btn--text[data-v-8db92d47]{background-color:#fff;color:var(--btn-primary-bg);box-shadow:none}.btn--text[data-v-8db92d47]:not(:disabled):hover{background-color:#f0f0f0}.btn--rounded[data-v-8db92d47]{background-color:transparent;color:var(--secondary-color, #3C464D);border:2px solid var(--secondary-color, #3C464D);box-shadow:none;border-radius:50%!important;padding:.5rem;min-width:auto}@media screen and (max-width:768px){.btn--small[data-v-8db92d47]{padding:.2rem .6rem;font-size:.8rem}.btn--medium[data-v-8db92d47]{padding:.4rem .8rem;font-size:.9rem}.btn--large[data-v-8db92d47]{padding:.6rem 1.2rem;font-size:1rem}.btn--rounded[data-v-8db92d47]{padding:.3rem;font-size:.8rem;max-width:30px;max-height:30px}}.overlay[data-v-11b69f56]{position:fixed;inset:0;background-color:#0000004d;display:flex;justify-content:center;align-items:center;z-index:1000}.overlay--contained[data-v-11b69f56]{position:absolute}.overlay-fade-enter-active[data-v-11b69f56],.overlay-fade-leave-active[data-v-11b69f56]{transition:opacity .3s ease}.overlay-fade-enter-from[data-v-11b69f56],.overlay-fade-leave-to[data-v-11b69f56]{opacity:0}
|
|
1
|
+
.btn[data-v-8db92d47]{position:relative;display:inline-flex;align-items:center;justify-content:center;border:none;font-weight:700;cursor:pointer;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease;padding:.5rem 1rem;font-size:1rem;min-width:80px;overflow:hidden}.btn[data-v-8db92d47]:disabled{cursor:not-allowed}.btn--full[data-v-8db92d47]{width:100%}.btn-loader[data-v-8db92d47]{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center}.simple-spinner[data-v-8db92d47]{border:6px solid currentColor;border-top-color:transparent;border-radius:50%;width:32px;height:32px;animation:spin-8db92d47 .8s linear infinite;opacity:.7}@keyframes spin-8db92d47{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.btn-content.content-hidden[data-v-8db92d47]{visibility:hidden;opacity:0}.btn--x-large[data-v-8db92d47]{scrollbar-width:1.125rem;height:60px;font-size:1.35rem;min-width:92px;padding:0 24px;border-radius:12px}.btn--small[data-v-8db92d47]{padding:.25rem .75rem;font-size:.875rem;border-radius:5px!important}.btn--medium[data-v-8db92d47]{padding:.5rem 1rem;font-size:1rem;border-radius:8px!important}.btn--large[data-v-8db92d47]{padding:.75rem 1.5rem;font-size:1.125rem;border-radius:8px!important}.btn--primary[data-v-8db92d47]{background-color:var(--btn-primary-bg);color:#fff;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}.btn--primary[data-v-8db92d47]:not(:disabled):hover{background-color:var(--btn-primary-hover-bg);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.btn--secondary[data-v-8db92d47]{background-color:var(--btn-secondary-bg);color:#1a202c;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;border:2px solid var(--secondary-color, #3C464D)}.btn--secondary[data-v-8db92d47]:not(:disabled):hover{background-color:var(--btn-secondary-hover-bg);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.btn--destructive[data-v-8db92d47]{background-color:#ef4444;color:#fff;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}.btn--destructive[data-v-8db92d47]:not(:disabled):hover{background-color:#dc2626}.btn--outlined[data-v-8db92d47]{background-color:transparent;color:var(--btn-secondary-bg);border:2px solid var(--btn-secondary-bg);box-shadow:none}.btn--outlined[data-v-8db92d47]:not(:disabled):hover{background-color:var(--btn-primary-bg);color:#fff}.btn--outlined-primary[data-v-8db92d47]{background-color:transparent;color:var(--btn-primary-bg);border:2px solid var(--btn-primary-bg);box-shadow:none}.btn--outlined-primary[data-v-8db92d47]:not(:disabled):hover{background-color:var(--btn-primary-bg);color:#fff}.btn--outlined-secondary[data-v-8db92d47]{background-color:#fff;color:var(--secondary-color, #3C464D);border:2px solid var(--secondary-color, #3C464D);box-shadow:none}.btn--outlined-secondary[data-v-8db92d47]:not(:disabled):hover{background-color:var(--secondary-color, #3C464D);color:#fff;border-color:#fff}.btn--elevated[data-v-8db92d47]{background-color:var(--btn-primary-bg);color:#fff;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.btn--elevated[data-v-8db92d47]:not(:disabled):hover{background-color:var(--btn-primary-hover-bg);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.btn--flat[data-v-8db92d47]{background-color:#fff;color:var(--btn-primary-bg);box-shadow:none}.btn--flat[data-v-8db92d47]:not(:disabled):hover{background-color:var(--btn-primary-hover-bg);color:#fff}.btn--text[data-v-8db92d47]{background-color:#fff;color:var(--btn-primary-bg);box-shadow:none}.btn--text[data-v-8db92d47]:not(:disabled):hover{background-color:#f0f0f0}.btn--rounded[data-v-8db92d47]{background-color:transparent;color:var(--secondary-color, #3C464D);border:2px solid var(--secondary-color, #3C464D);box-shadow:none;border-radius:50%!important;padding:.5rem;min-width:auto}@media screen and (max-width:768px){.btn--small[data-v-8db92d47]{padding:.2rem .6rem;font-size:.8rem}.btn--medium[data-v-8db92d47]{padding:.4rem .8rem;font-size:.9rem}.btn--large[data-v-8db92d47]{padding:.6rem 1.2rem;font-size:1rem}.btn--rounded[data-v-8db92d47]{padding:.3rem;font-size:.8rem;max-width:30px;max-height:30px}}.overlay[data-v-11b69f56]{position:fixed;inset:0;background-color:#0000004d;display:flex;justify-content:center;align-items:center;z-index:1000}.overlay--contained[data-v-11b69f56]{position:absolute}.overlay-fade-enter-active[data-v-11b69f56],.overlay-fade-leave-active[data-v-11b69f56]{transition:opacity .3s ease}.overlay-fade-enter-from[data-v-11b69f56],.overlay-fade-leave-to[data-v-11b69f56]{opacity:0}.icon[data-v-4a07735a]{display:inline-block;font-feature-settings:"liga";height:1em;justify-content:center;letter-spacing:normal;line-height:1;min-width:1em;position:relative;text-align:center;text-indent:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:1em;margin:5px}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { computed as
|
|
2
|
-
const
|
|
3
|
-
const
|
|
4
|
-
for (const [
|
|
5
|
-
|
|
6
|
-
return
|
|
1
|
+
import { computed as c, createElementBlock as d, openBlock as s, normalizeClass as r, createCommentVNode as f, createElementVNode as m, renderSlot as y, watch as p, createBlock as v, Transition as b, withCtx as g, withModifiers as z, normalizeStyle as _ } from "vue";
|
|
2
|
+
const u = (e, t) => {
|
|
3
|
+
const n = e.__vccOpts || e;
|
|
4
|
+
for (const [o, l] of t)
|
|
5
|
+
n[o] = l;
|
|
6
|
+
return n;
|
|
7
7
|
}, B = ["type", "disabled"], k = {
|
|
8
8
|
key: 0,
|
|
9
9
|
class: "btn-loader"
|
|
10
|
-
},
|
|
10
|
+
}, S = {
|
|
11
11
|
__name: "Button",
|
|
12
12
|
props: {
|
|
13
13
|
variant: {
|
|
@@ -41,7 +41,7 @@ const m = (e, t) => {
|
|
|
41
41
|
},
|
|
42
42
|
emits: ["click"],
|
|
43
43
|
setup(e) {
|
|
44
|
-
const t = e,
|
|
44
|
+
const t = e, n = c(() => [
|
|
45
45
|
"btn",
|
|
46
46
|
`btn--${t.variant}`,
|
|
47
47
|
`btn--${t.size === "sm" ? "small" : t.size}`,
|
|
@@ -50,23 +50,23 @@ const m = (e, t) => {
|
|
|
50
50
|
"btn--full": t.full
|
|
51
51
|
}
|
|
52
52
|
]);
|
|
53
|
-
return (
|
|
53
|
+
return (o, l) => (s(), d("button", {
|
|
54
54
|
type: e.type,
|
|
55
|
-
class:
|
|
55
|
+
class: r(n.value),
|
|
56
56
|
disabled: e.disabled || e.loading,
|
|
57
|
-
onClick:
|
|
57
|
+
onClick: l[0] || (l[0] = (a) => o.$emit("click"))
|
|
58
58
|
}, [
|
|
59
|
-
e.loading ? (
|
|
60
|
-
|
|
61
|
-
])])) :
|
|
62
|
-
|
|
63
|
-
class:
|
|
59
|
+
e.loading ? (s(), d("div", k, [...l[1] || (l[1] = [
|
|
60
|
+
m("div", { class: "simple-spinner" }, null, -1)
|
|
61
|
+
])])) : f("", !0),
|
|
62
|
+
m("span", {
|
|
63
|
+
class: r(["btn-content", { "content-hidden": e.loading }])
|
|
64
64
|
}, [
|
|
65
|
-
|
|
65
|
+
y(o.$slots, "default", {}, void 0, !0)
|
|
66
66
|
], 2)
|
|
67
67
|
], 10, B));
|
|
68
68
|
}
|
|
69
|
-
},
|
|
69
|
+
}, x = /* @__PURE__ */ u(S, [["__scopeId", "data-v-8db92d47"]]), $ = {
|
|
70
70
|
__name: "Overlay",
|
|
71
71
|
props: {
|
|
72
72
|
modelValue: {
|
|
@@ -80,31 +80,69 @@ const m = (e, t) => {
|
|
|
80
80
|
},
|
|
81
81
|
emits: ["update:modelValue"],
|
|
82
82
|
setup(e, { emit: t }) {
|
|
83
|
-
const
|
|
84
|
-
function
|
|
85
|
-
|
|
83
|
+
const n = e, o = t;
|
|
84
|
+
function l() {
|
|
85
|
+
o("update:modelValue", !1);
|
|
86
86
|
}
|
|
87
|
-
return
|
|
88
|
-
!
|
|
89
|
-
}), (
|
|
90
|
-
default:
|
|
91
|
-
e.modelValue ? (
|
|
87
|
+
return p(() => n.modelValue, (a) => {
|
|
88
|
+
!n.contained && typeof document < "u" && (document.body.style.overflow = a ? "hidden" : "");
|
|
89
|
+
}), (a, i) => (s(), v(b, { name: "overlay-fade" }, {
|
|
90
|
+
default: g(() => [
|
|
91
|
+
e.modelValue ? (s(), d("div", {
|
|
92
92
|
key: 0,
|
|
93
|
-
class:
|
|
94
|
-
onClick:
|
|
93
|
+
class: r(["overlay", { "overlay--contained": e.contained }]),
|
|
94
|
+
onClick: z(l, ["self"])
|
|
95
95
|
}, [
|
|
96
|
-
|
|
97
|
-
], 2)) :
|
|
96
|
+
y(a.$slots, "default", {}, void 0, !0)
|
|
97
|
+
], 2)) : f("", !0)
|
|
98
98
|
]),
|
|
99
99
|
_: 3
|
|
100
100
|
}));
|
|
101
101
|
}
|
|
102
|
-
},
|
|
103
|
-
|
|
104
|
-
|
|
102
|
+
}, V = /* @__PURE__ */ u($, [["__scopeId", "data-v-11b69f56"]]), h = {
|
|
103
|
+
__name: "Icon",
|
|
104
|
+
props: {
|
|
105
|
+
icon: {
|
|
106
|
+
type: String,
|
|
107
|
+
required: !1
|
|
108
|
+
},
|
|
109
|
+
size: {
|
|
110
|
+
type: [String, Number],
|
|
111
|
+
default: 24
|
|
112
|
+
},
|
|
113
|
+
color: {
|
|
114
|
+
type: String,
|
|
115
|
+
default: null
|
|
116
|
+
}
|
|
117
|
+
},
|
|
118
|
+
setup(e) {
|
|
119
|
+
const t = e, n = {
|
|
120
|
+
"x-small": 12,
|
|
121
|
+
small: 16,
|
|
122
|
+
medium: 24,
|
|
123
|
+
large: 32,
|
|
124
|
+
"x-large": 40
|
|
125
|
+
}, o = c(() => t.icon ? ["icon", "mdi", t.icon] : ["icon"]), l = c(() => {
|
|
126
|
+
let a = t.size;
|
|
127
|
+
typeof t.size == "string" && n[t.size] && (a = n[t.size]);
|
|
128
|
+
const i = {
|
|
129
|
+
fontSize: `${a}px`
|
|
130
|
+
};
|
|
131
|
+
return t.color && (i.color = t.color), i;
|
|
132
|
+
});
|
|
133
|
+
return (a, i) => (s(), d("i", {
|
|
134
|
+
class: r(o.value),
|
|
135
|
+
style: _(l.value),
|
|
136
|
+
"aria-hidden": "true"
|
|
137
|
+
}, null, 6));
|
|
138
|
+
}
|
|
139
|
+
}, C = /* @__PURE__ */ u(h, [["__scopeId", "data-v-4a07735a"]]), I = (e) => {
|
|
140
|
+
e.component("Overlay", V), e.component("Button", x), e.component("Icon", C);
|
|
141
|
+
}, w = { install: I };
|
|
105
142
|
export {
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
143
|
+
x as Button,
|
|
144
|
+
C as Icon,
|
|
145
|
+
V as Overlay,
|
|
146
|
+
w as default,
|
|
147
|
+
I as install
|
|
110
148
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.TreqitUiLibrary={},l.Vue))})(this,(function(l,e){"use strict";const c=(t,n)=>{const o=t.__vccOpts||t;for(const[i,a]of n)o[i]=a;return o},p=["type","disabled"],y={key:0,class:"btn-loader"},r=c({__name:"Button",props:{variant:{type:String,default:"primary",validator:t=>["primary","secondary","destructive","flat","elevated","text","outlined","outlined-primary","outlined-secondary","rounded"].includes(t)},size:{type:String,default:"medium",validator:t=>["sm","small","medium","large","x-large"].includes(t)},type:{type:String,default:"button"},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},full:{type:Boolean,default:!1}},emits:["click"],setup(t){const n=t,o=e.computed(()=>["btn",`btn--${n.variant}`,`btn--${n.size==="sm"?"small":n.size}`,{"btn--loading":n.loading,"btn--full":n.full}]);return(i,a)=>(e.openBlock(),e.createElementBlock("button",{type:t.type,class:e.normalizeClass(o.value),disabled:t.disabled||t.loading,onClick:a[0]||(a[0]=s=>i.$emit("click"))},[t.loading?(e.openBlock(),e.createElementBlock("div",y,[...a[1]||(a[1]=[e.createElementVNode("div",{class:"simple-spinner"},null,-1)])])):e.createCommentVNode("",!0),e.createElementVNode("span",{class:e.normalizeClass(["btn-content",{"content-hidden":t.loading}])},[e.renderSlot(i.$slots,"default",{},void 0,!0)],2)],10,p))}},[["__scopeId","data-v-8db92d47"]]),u=c({__name:"Overlay",props:{modelValue:{type:Boolean,default:!1},contained:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(t,{emit:n}){const o=t,i=n;function a(){i("update:modelValue",!1)}return e.watch(()=>o.modelValue,s=>{!o.contained&&typeof document<"u"&&(document.body.style.overflow=s?"hidden":"")}),(s,d)=>(e.openBlock(),e.createBlock(e.Transition,{name:"overlay-fade"},{default:e.withCtx(()=>[t.modelValue?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["overlay",{"overlay--contained":t.contained}]),onClick:e.withModifiers(a,["self"])},[e.renderSlot(s.$slots,"default",{},void 0,!0)],2)):e.createCommentVNode("",!0)]),_:3}))}},[["__scopeId","data-v-11b69f56"]]),m=c({__name:"Icon",props:{icon:{type:String,required:!1},size:{type:[String,Number],default:24},color:{type:String,default:null}},setup(t){const n=t,o={"x-small":12,small:16,medium:24,large:32,"x-large":40},i=e.computed(()=>n.icon?["icon","mdi",n.icon]:["icon"]),a=e.computed(()=>{let s=n.size;typeof n.size=="string"&&o[n.size]&&(s=o[n.size]);const d={fontSize:`${s}px`};return n.color&&(d.color=n.color),d});return(s,d)=>(e.openBlock(),e.createElementBlock("i",{class:e.normalizeClass(i.value),style:e.normalizeStyle(a.value),"aria-hidden":"true"},null,6))}},[["__scopeId","data-v-4a07735a"]]),f=t=>{t.component("Overlay",u),t.component("Button",r),t.component("Icon",m)},b={install:f};l.Button=r,l.Icon=m,l.Overlay=u,l.default=b,l.install=f,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|
package/package.json
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
],
|
|
15
15
|
"name": "treqit-ui-library",
|
|
16
16
|
"private": false,
|
|
17
|
-
"version": "1.4.
|
|
17
|
+
"version": "1.4.9",
|
|
18
18
|
"type": "module",
|
|
19
19
|
"types": "./dist/index.d.ts",
|
|
20
20
|
"scripts": {
|
|
@@ -26,6 +26,8 @@
|
|
|
26
26
|
"vue": "^3.5.22"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
+
"@mdi/font": "^7.4.47",
|
|
30
|
+
"@mdi/js": "^7.4.47",
|
|
29
31
|
"@types/node": "^24.6.0",
|
|
30
32
|
"@vitejs/plugin-vue": "^6.0.1",
|
|
31
33
|
"@vue/tsconfig": "^0.8.1",
|