@quidgest/ui 0.5.13 → 0.5.14

package/README.md

@@ -1,6 +1,6 @@
-# Quidgest UI
+# @quidgest/ui
 
-Quidgest Vue 3 component framework.
+Quidgest's UI framework.
 
 ## Features
 
@@ -42,7 +42,7 @@ import framework from './plugins/quidgest-ui'
 createApp(App).use(framework).mount('#app')
 ```
 
-Once installed, the components become globally available and can be used like so:
+Once installed, components can be used like so:
 
 ```ts
 <template>
@@ -50,6 +50,8 @@ Once installed, the components become globally available and can be used like so
 </template>
 
 <script setup lang="ts">
+import { QButton } from '@quidgest/ui'
+
 function handleClick() {
 	console.log("Parallel lines have so much in common. It's a shame they'll never meet.")
 }

package/dist/ui.css

@@ -599,8 +599,10 @@ body {
   font-style: normal;
   text-decoration: underline;
 }
-.q-list-item__check {
+.q-list-item__check-container {
+  display: flex;
   margin-left: auto;
+  min-width: 1em;
 }
 .q-list-item + .q-list-item {
   margin-top: 1px;
@@ -616,6 +618,8 @@ body {
 .q-overlay__content {
   display: block;
   position: relative;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
   width: 100%;
   background-color: var(--q-overlay-bg);
   color: var(--q-overlay-color);
@@ -746,6 +750,11 @@ body {
 .q-select:not(.q-select--readonly):not(.q-select--disabled) {
   cursor: pointer;
 }
+.q-select__value, .q-select__placeholder {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .q-select__placeholder {
   font-style: italic;
   color: rgb(var(--q-theme-on-background-rgb)/0.5);
@@ -759,8 +768,7 @@ body {
 }
 
 .q-select__clear,
-.q-select__chevron,
-.q-select__search-icon {
+.q-select__chevron {
   opacity: 0.5;
 }
 
@@ -783,17 +791,16 @@ body {
 }
 .q-select__body .q-list-item {
   width: calc(100% - 0.5rem);
-}
-
-.q-select__search {
-  width: calc(100% - 0.5rem);
-}
-.q-select__search:focus-within {
-  outline: none;
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
 }
 
 .q-select__items {
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+  width: 100%;
   max-height: 240px;
+  align-items: start;
 }
 
 .q-select__loader,

package/dist/ui.esm.js

@@ -1,4 +1,4 @@
-import { getCurrentInstance as me, computed as y, ref as I, provide as Be, inject as he, watch as z, defineComponent as _, openBlock as r, createElementBlock as f, normalizeStyle as G, createElementVNode as Z, normalizeClass as T, withModifiers as H, createVNode as U, unref as g, createCommentVNode as b, Fragment as Q, createTextVNode as K, toDisplayString as V, renderSlot as x, toRef as P, createBlock as w, withCtx as C, renderList as te, resolveDynamicComponent as ye, h as le, mergeProps as W, normalizeProps as ve, reactive as Le, onBeforeUnmount as xe, onMounted as qe, Teleport as De, Transition as Ie, nextTick as re, createSlots as Ee, guardReactiveProps as Ce, withDirectives as Te } from "vue";
+import { getCurrentInstance as me, computed as y, ref as I, provide as Be, inject as he, watch as z, defineComponent as _, openBlock as r, createElementBlock as f, normalizeStyle as G, createElementVNode as K, normalizeClass as T, withModifiers as H, createVNode as U, unref as g, createCommentVNode as b, Fragment as Q, createTextVNode as Z, toDisplayString as V, renderSlot as x, toRef as P, createBlock as w, withCtx as C, renderList as te, resolveDynamicComponent as ye, h as le, mergeProps as W, normalizeProps as ve, reactive as Le, onBeforeUnmount as xe, onMounted as qe, Teleport as De, Transition as Ie, nextTick as re, createSlots as Ee, guardReactiveProps as Ce, withDirectives as Te } from "vue";
 function ne(t) {
   return t == null ? !0 : typeof t == "string" || Array.isArray(t) ? t.length === 0 : typeof t == "object" ? Object.keys(t).length === 0 : !1;
 }
@@ -182,7 +182,7 @@ function ee(t, n, e) {
   return e < 0 && (e += 1), e > 1 && (e -= 1), e < 1 / 6 ? t + (n - t) * 6 * e : e < 1 / 2 ? n : e < 2 / 3 ? t + (n - t) * (2 / 3 - e) * 6 : t;
 }
 const j = "q-theme";
-function Zt() {
+function Jt() {
   const t = he(j);
   if (!t)
     throw new Error("[Quidgest UI] Could not find theme instance");
@@ -256,7 +256,7 @@ function Re(t) {
 function de(t) {
   return t ? `--q-theme-${t.replace(/([A-Z])/g, "-$1").replace(/^-/, "").toLowerCase()}` : "";
 }
-function jt(t = {}) {
+function Pt(t = {}) {
   return { install: (e) => {
     const o = t.components || {};
     for (const l in o)
@@ -268,8 +268,8 @@ function jt(t = {}) {
     e.provide(oe, I(s)), Fe(e, t.themes);
   } };
 }
-const He = /* @__PURE__ */ Z("svg", { viewBox: "25 25 50 50" }, [
-  /* @__PURE__ */ Z("circle", {
+const He = /* @__PURE__ */ K("svg", { viewBox: "25 25 50 50" }, [
+  /* @__PURE__ */ K("circle", {
     class: "path",
     cx: "50",
     cy: "50",
@@ -366,13 +366,13 @@ const $e = k(Ne), We = ["disabled", "onClick"], Ge = {
       l.loading ? (r(), f("div", Ge, [
         U(g($e), { size: 23 })
       ])) : b("", !0),
-      Z("span", Ye, [
+      K("span", Ye, [
         l.iconOnRight ? (r(), f(Q, { key: 0 }, [
-          K(V(e.label), 1)
+          Z(V(e.label), 1)
         ], 64)) : b("", !0),
         x(l.$slots, "default"),
         l.iconOnRight ? b("", !0) : (r(), f(Q, { key: 1 }, [
-          K(V(e.label), 1)
+          Z(V(e.label), 1)
         ], 64))
       ])
     ], 10, We));
@@ -458,7 +458,7 @@ const $e = k(Ne), We = ["disabled", "onClick"], Ge = {
       _: 3
     }, 8, ["disabled", "borderless", "elevated"]));
   }
-}), Jt = k(Pe), et = /* @__PURE__ */ _({
+}), en = k(Pe), et = /* @__PURE__ */ _({
   __name: "QIcon",
   props: {
     icon: {},
@@ -694,7 +694,7 @@ const rt = /* @__PURE__ */ _({
 function gt(t, n) {
   return r(), f("div", vt);
 }
-const bt = /* @__PURE__ */ ht(yt, [["render", gt]]), Pt = k(bt), _t = /* @__PURE__ */ _({
+const bt = /* @__PURE__ */ ht(yt, [["render", gt]]), tn = k(bt), _t = /* @__PURE__ */ _({
   __name: "QList",
   props: {
     modelValue: { type: [String, Number, Boolean, Symbol], default: void 0 },
@@ -778,11 +778,11 @@ const bt = /* @__PURE__ */ ht(yt, [["render", gt]]), Pt = k(bt), _t = /* @__PURE
       onKeydown: $
     }, {
       default: C(() => [
-        (r(!0), f(Q, null, te(l.value, (v) => (r(), w(g(Et), W({
+        (r(!0), f(Q, null, te(l.value, (v) => (r(), w(g(Ct), W({
           key: v.title
         }, v), {
           default: C(() => [
-            (r(!0), f(Q, null, te(M(v.id), (D) => (r(), w(g(It), {
+            (r(!0), f(Q, null, te(M(v.id), (D) => (r(), w(g(Et), {
               key: D[o.itemValue],
               value: D[o.itemValue],
               label: D[o.itemLabel],
@@ -798,11 +798,11 @@ const bt = /* @__PURE__ */ ht(yt, [["render", gt]]), Pt = k(bt), _t = /* @__PURE
       _: 1
     }, 40, ["class", "tabindex"]));
   }
-}), kt = ["tabindex", "aria-label", "aria-selected", "onClick"], wt = {
+}), kt = ["tabindex", "aria-label", "aria-selected", "onClick"], wt = { class: "q-list-item__check-container" }, $t = {
   check: {
     icon: "check"
   }
-}, $t = /* @__PURE__ */ _({
+}, St = /* @__PURE__ */ _({
   __name: "QListItem",
   props: {
     value: { type: [String, Number, Boolean, Symbol] },
@@ -810,7 +810,7 @@ const bt = /* @__PURE__ */ ht(yt, [["render", gt]]), Pt = k(bt), _t = /* @__PURE
     icon: { default: void 0 },
     selected: { type: Boolean, default: !1 },
     highlighted: { type: Boolean, default: !1 },
-    icons: { default: () => wt },
+    icons: { default: () => $t },
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["select"],
@@ -839,19 +839,21 @@ const bt = /* @__PURE__ */ ht(yt, [["render", gt]]), Pt = k(bt), _t = /* @__PURE
       onClick: H(o, ["stop", "prevent"])
     }, [
       e.icon ? (r(), w(g(N), ve(W({ key: 0 }, e.icon)), null, 16)) : b("", !0),
-      K(" " + V(e.label) + " ", 1),
-      e.selected ? (r(), w(g(N), W({ key: 1 }, e.icons.check, { class: "q-list-item__check" }), null, 16)) : b("", !0)
+      Z(" " + V(e.label) + " ", 1),
+      K("div", wt, [
+        e.selected ? (r(), w(g(N), W({ key: 0 }, e.icons.check, { class: "q-list-item__check" }), null, 16)) : b("", !0)
+      ])
     ], 42, kt));
   }
 });
-let St = 0;
-function Bt() {
-  return `uid-${++St}`;
+let Bt = 0;
+function Lt() {
+  return `uid-${++Bt}`;
 }
-const Lt = ["aria-labelledby"], xt = ["id"], qt = /* @__PURE__ */ _({
+const xt = ["aria-labelledby"], qt = ["id"], Dt = /* @__PURE__ */ _({
   __name: "QListItemGroup",
   props: {
-    id: { default: () => Bt() },
+    id: { default: () => Lt() },
     title: { default: "" },
     disabled: { type: Boolean, default: !1 }
   },
@@ -868,15 +870,15 @@ const Lt = ["aria-labelledby"], xt = ["id"], qt = /* @__PURE__ */ _({
         id: n.id,
         class: "q-list-item-group__title",
         role: "presentation"
-      }, V(n.title), 9, xt)) : b("", !0),
+      }, V(n.title), 9, qt)) : b("", !0),
       x(e.$slots, "default")
-    ], 8, Lt)) : x(e.$slots, "default", { key: 0 });
+    ], 8, xt)) : x(e.$slots, "default", { key: 0 });
   }
-}), Dt = k(_t), It = k($t), Et = k(qt);
-function Ct(t, n, e = "right", o) {
+}), It = k(_t), Et = k(St), Ct = k(Dt);
+function Tt(t, n, e = "right", o) {
   const a = t.getBoundingClientRect(), s = a.x + window.scrollX, l = a.y + window.scrollY, c = n == null ? void 0 : n.getBoundingClientRect(), i = (c == null ? void 0 : c.width) ?? 0, p = (c == null ? void 0 : c.height) ?? 0;
   let $ = e;
-  c && !Se(a, c, $) && ($ = Tt(a, c, $));
+  c && !Se(a, c, $) && ($ = Vt(a, c, $));
   const m = { x: 0, y: 0, placement: $ };
   switch ($) {
     case "top":
@@ -892,7 +894,7 @@ function Ct(t, n, e = "right", o) {
       m.x = s + a.width, m.y = l + a.height / 2 - p / 2;
       break;
   }
-  return o === "anchor" && (m.width = a.width), m;
+  return o === "anchor" && a.width >= i && (m.width = a.width), m;
 }
 function Se(t, n, e) {
   let o = !1, a = !1;
@@ -918,7 +920,7 @@ function fe(t, n) {
 function pe(t, n) {
   return window.innerWidth - t.left - t.width / 2 > n.width / 2 && t.left + t.width / 2 > n.width / 2;
 }
-function Tt(t, n, e) {
+function Vt(t, n, e) {
   const o = {
     top: ["bottom", "left", "right"],
     bottom: ["top", "left", "right"],
@@ -933,10 +935,10 @@ function Tt(t, n, e) {
 function X(t) {
   return typeof t == "string" ? document.querySelector(t) : t && "$el" in t ? t.$el : t;
 }
-const Vt = {
+const zt = {
   key: 0,
   class: "q-overlay__arrow"
-}, zt = /* @__PURE__ */ _({
+}, Qt = /* @__PURE__ */ _({
   __name: "QOverlay",
   props: {
     modelValue: { type: Boolean },
@@ -997,7 +999,7 @@ const Vt = {
     function i() {
       const h = X(e.anchor);
       if (h) {
-        const B = Ct(h, c.value, e.placement, e.width);
+        const B = Tt(h, c.value, e.placement, e.width);
         a.left = B.x, a.top = B.y, a.width = B.width, a.placement = B.placement;
       }
     }
@@ -1081,12 +1083,12 @@ const Vt = {
               class: T(o.value),
               style: G(l.value)
             }, [
-              Z("div", {
+              K("div", {
                 class: T(["q-overlay__content"]),
                 ref_key: "overlay",
                 ref: c
               }, [
-                e.arrow ? (r(), f("div", Vt)) : b("", !0),
+                e.arrow ? (r(), f("div", zt)) : b("", !0),
                 x(h.$slots, "default")
               ], 512)
             ], 6)) : b("", !0)
@@ -1096,13 +1098,13 @@ const Vt = {
       ], 8, ["to"]))
     ], 64));
   }
-}), ae = k(zt), Qt = {
+}), ae = k(Qt), At = {
   key: 0,
   class: "q-popover__header"
-}, At = {
+}, Ot = {
   key: 1,
   class: "q-popover__body"
-}, Ot = ["innerHTML"], Ft = { key: 1 }, Mt = /* @__PURE__ */ _({
+}, Ft = ["innerHTML"], Mt = { key: 1 }, Rt = /* @__PURE__ */ _({
   __name: "QPopover",
   props: {
     modelValue: { type: Boolean },
@@ -1130,22 +1132,22 @@ const Vt = {
       spy: n.spy
     }, {
       default: C(() => [
-        n.title || e.$slots.header ? (r(), f("h3", Qt, [
-          K(V(n.title) + " ", 1),
+        n.title || e.$slots.header ? (r(), f("h3", At, [
+          Z(V(n.title) + " ", 1),
           x(e.$slots, "header")
         ])) : b("", !0),
-        n.text || e.$slots.body ? (r(), f("div", At, [
+        n.text || e.$slots.body ? (r(), f("div", Ot, [
           n.html ? (r(), f("span", {
             key: 0,
             innerHTML: n.text
-          }, null, 8, Ot)) : (r(), f("span", Ft, V(n.text), 1)),
+          }, null, 8, Ft)) : (r(), f("span", Mt, V(n.text), 1)),
           x(e.$slots, "body")
         ])) : b("", !0)
       ]),
       _: 3
     }, 8, ["model-value", "anchor", "arrow", "attach", "disabled", "placement", "spy"]));
   }
-}), en = k(Mt), Rt = {
+}), nn = k(Rt), Ht = {
   mounted(t, n) {
     t.clickOutsideEvent = function(e) {
       const o = e.target;
@@ -1155,19 +1157,22 @@ const Vt = {
   unmounted(t) {
     document.removeEventListener("click", t.clickOutsideEvent);
   }
-}, Ht = {
+}, Ut = {
+  key: 0,
+  class: "q-select__value"
+}, Nt = {
   key: 1,
   class: "q-select__placeholder"
-}, Ut = {
+}, Kt = {
   placeholder: "Choose..."
-}, Nt = {
+}, Wt = {
   chevron: {
     icon: "chevron-down"
   },
   clear: {
     icon: "close"
   }
-}, Kt = /* @__PURE__ */ _({
+}, Gt = /* @__PURE__ */ _({
   __name: "QSelect",
   props: {
     modelValue: { type: [String, Number, Boolean, Symbol], default: void 0 },
@@ -1175,13 +1180,13 @@ const Vt = {
     readonly: { type: Boolean },
     disabled: { type: Boolean, default: !1 },
     loading: { type: Boolean, default: !1 },
-    icons: { default: () => Nt },
+    icons: { default: () => Wt },
     items: {},
     groups: { default: () => [] },
     itemValue: { default: "key" },
     itemLabel: { default: "label" },
     size: { default: "medium" },
-    texts: { default: () => Ut }
+    texts: { default: () => Kt }
   },
   emits: ["update:modelValue", "before-show", "before-hide", "show", "hide"],
   setup(t, { emit: n }) {
@@ -1282,9 +1287,7 @@ const Vt = {
             !e.readonly && !e.disabled ? (r(), w(g(N), W({ key: 1 }, e.icons.chevron, { class: "q-select__chevron" }), null, 16)) : b("", !0)
           ]),
           default: C(() => [
-            o.value ? (r(), f(Q, { key: 0 }, [
-              K(V($.value), 1)
-            ], 64)) : (r(), f("span", Ht, V(d.texts.placeholder), 1))
+            o.value ? (r(), f("span", Ut, V($.value), 1)) : (r(), f("span", Nt, V(d.texts.placeholder), 1))
           ]),
           _: 2
         }, [
@@ -1321,7 +1324,7 @@ const Vt = {
                 key: 0,
                 class: "q-select__loader",
                 size: 24
-              })) : (r(), w(g(Dt), {
+              })) : (r(), w(g(It), {
                 key: 1,
                 ref_key: "listRef",
                 ref: c,
@@ -1339,7 +1342,7 @@ const Vt = {
               }, null, 8, ["modelValue", "items", "groups", "item-label", "item-value", "onKeydown"])),
               x(d.$slots, "body.append")
             ])), [
-              [g(Rt), F]
+              [g(Ht), F]
             ])
           ]),
           _: 3
@@ -1347,7 +1350,7 @@ const Vt = {
       ], 64);
     };
   }
-}), tn = k(Kt), Wt = ["innerHTML"], Gt = { key: 1 }, Yt = /* @__PURE__ */ _({
+}), on = k(Gt), Yt = ["innerHTML"], Xt = { key: 1 }, Zt = /* @__PURE__ */ _({
   __name: "QTooltip",
   props: {
     modelValue: { type: Boolean },
@@ -1380,34 +1383,34 @@ const Vt = {
         n.html ? (r(), f("span", {
           key: 0,
           innerHTML: n.text
-        }, null, 8, Wt)) : (r(), f("span", Gt, V(n.text), 1))
+        }, null, 8, Yt)) : (r(), f("span", Xt, V(n.text), 1))
       ]),
       _: 1
     }, 8, ["model-value", "anchor", "appearance", "arrow", "attach", "delay", "disabled", "placement", "trigger"]));
   }
-}), nn = k(Yt);
+}), an = k(Zt);
 export {
   Ze as QButton,
   Je as QButtonGroup,
-  Jt as QButtonToggle,
+  en as QButtonToggle,
   N as QIcon,
   it as QIconFont,
   ct as QIconImg,
   ut as QIconSvg,
   mt as QInput,
-  Pt as QLineLoader,
-  Dt as QList,
-  It as QListItem,
-  Et as QListItemGroup,
+  tn as QLineLoader,
+  It as QList,
+  Et as QListItem,
+  Ct as QListItemGroup,
   ae as QOverlay,
-  en as QPopover,
-  tn as QSelect,
+  nn as QPopover,
+  on as QSelect,
   $e as QSpinnerLoader,
-  nn as QTooltip,
-  Rt as clickOutside,
-  jt as createFramework,
+  an as QTooltip,
+  Ht as clickOutside,
+  Pt as createFramework,
   Qe as defaultDarkColorScheme,
   ce as defaultLightColorScheme,
-  Zt as useTheme
+  Jt as useTheme
 };
 //# sourceMappingURL=ui.esm.js.map