@quidgest/ui 0.14.2 → 0.14.4

package/dist/ui.scss

@@ -1,5 +1,5 @@
 /*!
- * Quidgest UI v0.14.2
+ * Quidgest UI v0.14.4
  * (c) 2024 Quidgest - Consultores de Gestão, S.A.
  * Released under the MIT License.
  */
@@ -497,6 +497,103 @@ $button-text-on-plain: var(--q-theme-on-background);
     }
   }
 }
+.q-checkbox {
+  $this: &;
+  --box-size: 1.15rem;
+  --icon-color: var(--q-theme-on-primary);
+  --icon-opacity: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: fit-content;
+  color: var(--q-theme-neutral-dark);
+  cursor: pointer;
+  &__input {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--box-size);
+    height: var(--box-size);
+    border: 1px solid $border;
+    border-radius: $border-radius;
+    padding: 0;
+    transition:
+      background 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
+    background-color: transparent;
+    flex-shrink: 0;
+    cursor: inherit;
+    &:hover:not(:disabled) {
+      border-color: var(--active-color);
+    }
+    &:focus:not(:disabled) {
+      outline: 0;
+    }
+    &:focus-visible:not(:disabled) {
+      outline: $outline;
+    }
+    &-icon.q-icon {
+      color: var(--icon-color);
+      pointer-events: none;
+      user-select: none;
+      transition: transform 0.2s ease;
+      opacity: var(--icon-opacity);
+    }
+  }
+  &__native-input {
+    transform: translateX(-100%);
+    position: absolute;
+    pointer-events: none;
+    opacity: 0;
+    margin: 0;
+  }
+  
+  &--small {
+    --box-size: 0.95rem;
+  }
+  &--large {
+    --box-size: 1.3rem;
+  }
+  
+  @mixin color-variant($color) {
+    &--#{$color} {
+      --active-color: var(--q-theme-#{$color});
+      --icon-color: var(--q-theme-on-#{$color});
+    }
+  }
+  @each $color in (primary, info, success, warning, danger) {
+    @include color-variant($color);
+  }
+  
+  &--checked,
+  &--indeterminate {
+    --icon-opacity: 1;
+    #{$this}__input {
+      background-color: var(--active-color);
+      border-color: var(--active-color);
+    }
+  }
+  &--disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  &--readonly {
+    --active-color: var(--q-theme-neutral-light);
+    cursor: default;
+    &:not(#{$this}--checked):not(#{$this}--indeterminate) {
+      #{$this}__input {
+        background-color: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
+      }
+    }
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .q-checkbox__input,
+  .q-checkbox__input .q-icon {
+    transition: none;
+  }
+}
 .q-combobox {
   $this: &;
   &:not(#{$this}--disabled) {

package/esm/components/QCheckbox/QCheckbox.d.ts

@@ -0,0 +1,20 @@
+import { QCheckboxProps, DEFAULT_ICONS } from './types';
+declare let __VLS_typeProps: QCheckboxProps;
+type __VLS_PublicProps = {
+    modelValue?: boolean;
+} & typeof __VLS_typeProps;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (modelValue: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((modelValue: boolean) => any) | undefined;
+}>, {
+    size: "regular" | "small" | "large";
+    class: string | unknown[];
+    label: string;
+    color: string;
+    icons: typeof DEFAULT_ICONS;
+    id: string;
+    labelPlacement: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=QCheckbox.vue.d.ts.map

package/esm/components/QCheckbox/QCheckbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QCheckbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QCheckbox/QCheckbox.vue"],"names":[],"mappings":"AAyFC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAK7C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAIxC,QAAA,IAAI,eAAe,EAAG,cAAc,CAAC;AAmDrC,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,OAAO,eAAe,CAAC;;;;;;;;;;;;;;AA2E3B,wBAQG"}

package/esm/components/QCheckbox/QCheckbox.vue.js

@@ -0,0 +1,105 @@
+import { defineComponent as k, mergeModels as f, useModel as y, computed as v, openBlock as l, createElementBlock as t, Fragment as x, createElementVNode as a, normalizeClass as _, toDisplayString as s, createCommentVNode as n, unref as u, withModifiers as d, withKeys as m, createBlock as g, mergeProps as q } from "vue";
+import { QIcon as B } from "../QIcon/index.js";
+import { useId as C } from "../../composables/uid.js";
+import { DEFAULT_ICONS as V } from "./types.js";
+const w = { key: 0 }, M = ["id", "aria-checked", "disabled", "onKeydown"], P = { key: 1 }, z = ["checked", "disabled"], D = /* @__PURE__ */ k({
+  __name: "QCheckbox",
+  props: /* @__PURE__ */ f({
+    id: { default: void 0 },
+    label: { default: "" },
+    labelPlacement: { default: "right" },
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    indeterminate: { type: Boolean },
+    color: { default: "primary" },
+    size: { default: "regular" },
+    class: { default: void 0 },
+    icons: { default: () => V }
+  }, {
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(i) {
+    const e = i, o = y(i, "modelValue"), b = C(e.id), p = v(() => [
+      "q-checkbox",
+      `q-checkbox--${e.size}`,
+      `q-checkbox--${e.color}`,
+      {
+        "q-checkbox--readonly": e.readonly,
+        "q-checkbox--disabled": e.disabled,
+        "q-checkbox--checked": o.value,
+        "q-checkbox--indeterminate": e.indeterminate
+      },
+      e.class
+    ]);
+    function c() {
+      !e.disabled && !e.readonly && (o.value = !o.value);
+    }
+    return (h, r) => (l(), t(
+      x,
+      null,
+      [
+        a(
+          "label",
+          {
+            class: _(p.value)
+          },
+          [
+            e.labelPlacement !== "right" ? (l(), t(
+              "span",
+              w,
+              s(e.label),
+              1
+              /* TEXT */
+            )) : n("v-if", !0),
+            a("button", {
+              id: u(b),
+              role: "checkbox",
+              type: "button",
+              "aria-checked": e.indeterminate ? "mixed" : o.value,
+              disabled: e.disabled || e.readonly,
+              class: "q-checkbox__input",
+              onClick: d(c, ["prevent"]),
+              onKeydown: [
+                m(d(c, ["prevent"]), ["space"]),
+                r[0] || (r[0] = m(d(() => {
+                }, ["prevent"]), ["enter"]))
+              ]
+            }, [
+              o.value || h.indeterminate ? (l(), g(
+                u(B),
+                q({ key: 0 }, o.value ? e.icons.checked : e.icons.indeterminate, { class: "q-checkbox__input-icon" }),
+                null,
+                16
+                /* FULL_PROPS */
+              )) : n("v-if", !0)
+            ], 40, M),
+            e.labelPlacement === "right" ? (l(), t(
+              "span",
+              P,
+              s(e.label),
+              1
+              /* TEXT */
+            )) : n("v-if", !0)
+          ],
+          2
+          /* CLASS */
+        ),
+        a("input", {
+          type: "checkbox",
+          tabindex: "-1",
+          "aria-hidden": "true",
+          class: "q-checkbox__native-input",
+          checked: !!o.value,
+          disabled: e.disabled || e.readonly
+        }, null, 8, z)
+      ],
+      64
+      /* STABLE_FRAGMENT */
+    ));
+  }
+});
+export {
+  D as default
+};

package/esm/components/QCheckbox/QCheckbox.vue2.js

@@ -0,0 +1,4 @@
+import f from "./QCheckbox.vue.js";
+export {
+  f as default
+};

package/esm/components/QCheckbox/index.d.ts

@@ -0,0 +1,4 @@
+import { default as _QCheckbox } from './QCheckbox';
+declare const QCheckbox: typeof _QCheckbox;
+export { QCheckbox };
+//# sourceMappingURL=index.d.ts.map

package/esm/components/QCheckbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QCheckbox/index.ts"],"names":[],"mappings":"AACA,OAAO,UAAU,MAAM,iBAAiB,CAAA;AAKxC,QAAA,MAAM,SAAS,EAAkC,OAAO,UAAU,CAAA;AAGlE,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/esm/components/QCheckbox/index.js

@@ -0,0 +1,6 @@
+import o from "./QCheckbox.vue.js";
+import { setupPropsProxy as r } from "../../utils/setupPropsProxy.js";
+const t = r(o);
+export {
+  t as QCheckbox
+};

package/esm/components/QCheckbox/types.d.ts

@@ -0,0 +1,47 @@
+import { Icon } from '../QIcon';
+export type QCheckboxProps = {
+    /**
+     * The field unique identifier.
+     */
+    id?: string;
+    /**
+     * The text content of the checkbox.
+     */
+    label?: string;
+    /**
+     * The placement of the label shown.
+     */
+    labelPlacement?: string;
+    /**
+     * If true, the checkbox is disabled and cannot be interacted with.
+     */
+    disabled?: boolean;
+    /**
+     * If set to true, the checkbox is read-only.
+     */
+    readonly?: boolean;
+    /**
+     * If set to true, the checkbox appears in an indeterminate state
+     */
+    indeterminate?: boolean;
+    /**
+     * Applies specified color to the control
+     */
+    color?: string;
+    /**
+     * The size of the checkbox, either 'regular', 'small' or 'large.
+     */
+    size?: 'regular' | 'small' | 'large';
+    /**
+     * Custom set of classes to apply to the component.
+     */
+    class?: string | unknown[];
+    /**
+     * Custom icon configurations.
+     */
+    icons?: typeof DEFAULT_ICONS;
+};
+type IconKeys = 'checked' | 'indeterminate';
+export declare const DEFAULT_ICONS: Record<IconKeys, Icon>;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/esm/components/QCheckbox/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/QCheckbox/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AAE9C,MAAM,MAAM,cAAc,GAAG;IAC5B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IAEX;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IAEvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IAEvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,CAAA;IAEpC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,EAAE,CAAA;IAE1B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,aAAa,CAAA;CAC5B,CAAA;AAED,KAAK,QAAQ,GAAG,SAAS,GAAG,eAAe,CAAA;AAG3C,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,QAAQ,EAAE,IAAI,CAOhD,CAAA"}

package/esm/components/QCheckbox/types.js

@@ -0,0 +1,11 @@
+const c = {
+  checked: {
+    icon: "check"
+  },
+  indeterminate: {
+    icon: "minus"
+  }
+};
+export {
+  c as DEFAULT_ICONS
+};

package/esm/components/QCombobox/QCombobox.d.ts

@@ -495,12 +495,12 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     class: string | unknown[];
     label: string;
     icons: typeof DEFAULT_ICONS;
+    id: string;
     groups: (import('../QList').QListItemGroupProps & {
         id: string;
     })[];
     itemValue: string;
     itemLabel: string;
-    id: string;
     placeholder: string;
     selectionMode: "manual" | "automatic";
     filterMode: "builtin" | "manual";

package/esm/components/QSelect/QSelect.d.ts

@@ -204,12 +204,12 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     class: string | unknown[];
     label: string;
     icons: typeof DEFAULT_ICONS;
+    id: string;
     groups: (import('../QList').QListItemGroupProps & {
         id: string;
     })[];
     itemValue: string;
     itemLabel: string;
-    id: string;
     emptyValue: Primitive;
     texts: typeof DEFAULT_TEXTS;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/esm/components/index.d.ts

@@ -2,6 +2,7 @@ export * from './QBadge';
 export * from './QButton';
 export * from './QButtonGroup';
 export * from './QButtonToggle';
+export * from './QCheckbox';
 export * from './QCombobox';
 export * from './QDialog';
 export * from './QField';

package/esm/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,WAAW,CAAA;AACzB,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,WAAW,CAAA;AACzB,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,YAAY,CAAA"}

package/esm/components/index.js

@@ -2,49 +2,51 @@ import { QBadge as e } from "./QBadge/index.js";
 import { QButton as p } from "./QButton/index.js";
 import { QButtonGroup as m } from "./QButtonGroup/index.js";
 import { QButtonToggle as f } from "./QButtonToggle/index.js";
-import { QCombobox as n } from "./QCombobox/index.js";
-import { QDialog as l } from "./QDialog/index.js";
-import { QField as I } from "./QField/index.js";
-import { QIcon as d, QIconFont as s, QIconImg as P, QIconSvg as g } from "./QIcon/index.js";
-import { QInputGroup as y } from "./QInputGroup/index.js";
-import { QLineLoader as B } from "./QLineLoader/index.js";
-import { QList as S, QListItem as T, QListItemGroup as F } from "./QList/index.js";
-import { QOverlay as h } from "./QOverlay/index.js";
-import { QPopover as w } from "./QPopover/index.js";
-import { QPropertyList as D, QPropertyListGroup as O, QPropertyListPanel as R, QPropertyListRow as j } from "./QPropertyList/index.js";
-import { QSelect as z } from "./QSelect/index.js";
-import { QSkeletonLoader as E } from "./QSkeletonLoader/index.js";
-import { QSpinnerLoader as J } from "./QSpinnerLoader/index.js";
-import { QTextField as M } from "./QTextField/index.js";
-import { QThemeProvider as U } from "./QThemeProvider/index.js";
-import { QTooltip as W } from "./QTooltip/index.js";
+import { QCheckbox as n } from "./QCheckbox/index.js";
+import { QCombobox as l } from "./QCombobox/index.js";
+import { QDialog as I } from "./QDialog/index.js";
+import { QField as d } from "./QField/index.js";
+import { QIcon as P, QIconFont as c, QIconImg as g, QIconSvg as y } from "./QIcon/index.js";
+import { QInputGroup as B } from "./QInputGroup/index.js";
+import { QLineLoader as S } from "./QLineLoader/index.js";
+import { QList as b, QListItem as F, QListItemGroup as h } from "./QList/index.js";
+import { QOverlay as C } from "./QOverlay/index.js";
+import { QPopover as D } from "./QPopover/index.js";
+import { QPropertyList as R, QPropertyListGroup as j, QPropertyListPanel as q, QPropertyListRow as z } from "./QPropertyList/index.js";
+import { QSelect as E } from "./QSelect/index.js";
+import { QSkeletonLoader as J } from "./QSkeletonLoader/index.js";
+import { QSpinnerLoader as M } from "./QSpinnerLoader/index.js";
+import { QTextField as U } from "./QTextField/index.js";
+import { QThemeProvider as W } from "./QThemeProvider/index.js";
+import { QTooltip as Y } from "./QTooltip/index.js";
 export {
   e as QBadge,
   p as QButton,
   m as QButtonGroup,
   f as QButtonToggle,
-  n as QCombobox,
-  l as QDialog,
-  I as QField,
-  d as QIcon,
-  s as QIconFont,
-  P as QIconImg,
-  g as QIconSvg,
-  y as QInputGroup,
-  B as QLineLoader,
-  S as QList,
-  T as QListItem,
-  F as QListItemGroup,
-  h as QOverlay,
-  w as QPopover,
-  D as QPropertyList,
-  O as QPropertyListGroup,
-  R as QPropertyListPanel,
-  j as QPropertyListRow,
-  z as QSelect,
-  E as QSkeletonLoader,
-  J as QSpinnerLoader,
-  M as QTextField,
-  U as QThemeProvider,
-  W as QTooltip
+  n as QCheckbox,
+  l as QCombobox,
+  I as QDialog,
+  d as QField,
+  P as QIcon,
+  c as QIconFont,
+  g as QIconImg,
+  y as QIconSvg,
+  B as QInputGroup,
+  S as QLineLoader,
+  b as QList,
+  F as QListItem,
+  h as QListItemGroup,
+  C as QOverlay,
+  D as QPopover,
+  R as QPropertyList,
+  j as QPropertyListGroup,
+  q as QPropertyListPanel,
+  z as QPropertyListRow,
+  E as QSelect,
+  J as QSkeletonLoader,
+  M as QSpinnerLoader,
+  U as QTextField,
+  W as QThemeProvider,
+  Y as QTooltip
 };

package/esm/index.d.ts

@@ -11,6 +11,7 @@ declare module '@vue/runtime-core' {
 		QButton: typeof import('@quidgest/ui/components')['QButton']
 		QButtonGroup: typeof import('@quidgest/ui/components')['QButtonGroup']
 		QButtonToggle: typeof import('@quidgest/ui/components')['QButtonToggle']
+		QCheckbox: typeof import('@quidgest/ui/components')['QCheckbox']
 		QCombobox: typeof import('@quidgest/ui/components')['QCombobox']
 		QDialog: typeof import('@quidgest/ui/components')['QDialog']
 		QField: typeof import('@quidgest/ui/components')['QField']

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quidgest/ui",
   "description": "Quidgest's UI framework",
-  "version": "0.14.2",
+  "version": "0.14.4",
   "private": false,
   "type": "module",
   "author": "Quidgest",