@quidgest/ui 0.16.73 → 0.16.75

package/dist/json/api.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.16.73",
+  "version": "0.16.75",
   "components": [
     {
       "name": "QAccordion",
@@ -1449,6 +1449,16 @@
             "default": "true",
             "required": false,
             "category": "Behavior"
+          },
+          {
+            "name": "borderless",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "If true, the checkbox has no borders.",
+            "required": false,
+            "category": "Presentation"
           }
         ],
         "events": [
@@ -1510,6 +1520,11 @@
           "title": "Extras",
           "description": "Displays additional information in the `extras` slot.",
           "code": "<q-checkbox v-bind=args>\n\t\t\t\t<template #extras>\n\t\t\t\t\tBy clicking this checkbox, you agree to the terms and conditions.\n\t\t\t\t</template>\n\t\t\t</q-checkbox>"
+        },
+        {
+          "title": "Borderless",
+          "description": "Displays borderless checkbox.",
+          "code": "<QCheckbox :label=\"Accept terms and conditions\" :borderless=\"true\" :model-value=\"true\" />"
         }
       ]
     },
@@ -4605,6 +4620,11 @@
           "description": "Allows the user to select items from the list.",
           "code": "<QList :items=\"[\n\t\t\t{ key: 'item1', label: 'Item 1' },\n\t\t\t{ key: 'item2', label: 'Item 2' },\n\t\t\t{ key: 'item3', label: 'Item 3' }\n\t\t]\" :multiple=\"true\" />"
         },
+        {
+          "title": "Multiple With Description",
+          "description": "Allows the user to select items from the list with icons.",
+          "code": "<QList :items=\"[\n\t\t\t{\n\t\t\t\ticon: { icon: 'content-copy' },\n\t\t\t\tkey: 'item1',\n\t\t\t\tlabel: 'Item 1',\n\t\t\t\tdescription: 'Description for items'\n\t\t\t},\n\t\t\t{\n\t\t\t\ticon: { icon: 'content-duplicate' },\n\t\t\t\tkey: 'item2',\n\t\t\t\tlabel: 'Item 2',\n\t\t\t\tdescription: 'This item is nice :)'\n\t\t\t},\n\t\t\t{\n\t\t\t\ticon: { icon: 'content-paste' },\n\t\t\t\tkey: 'item3',\n\t\t\t\tlabel: 'Item 3',\n\t\t\t\tdescription: 'This is a description for this item'\n\t\t\t}\n\t\t]\" :multiple=\"true\" />"
+        },
         {
           "title": "Selectable And Required",
           "description": "Allows the user to select items from the list and requires at least one item to be selected.",
@@ -6458,6 +6478,16 @@
           "description": "Allows the selection of multiple items.",
           "code": "<QSelect :items=\"[\n\t\t\t{ key: 'italic', label: 'Italic' },\n\t\t\t{ key: 'bold', label: 'Bold' },\n\t\t\t{ key: 'underlined', label: 'Underlined' },\n\t\t\t{ key: 'strikethrough', label: 'Strikethrough' },\n\t\t\t{ key: 'superscript', label: 'Superscript' },\n\t\t\t{ key: 'subscript', label: 'Subscript' },\n\t\t\t{ key: 'uppercase', label: 'Uppercase' },\n\t\t\t{ key: 'lowercase', label: 'Lowercase' },\n\t\t\t{ key: 'capitalize', label: 'Capitalize' },\n\t\t\t{ key: 'highlight', label: 'Highlight' }\n\t\t]\" :multiple=\"true\" />"
         },
+        {
+          "title": "Multiple With Description",
+          "description": "Allows the selection of multiple items with description.",
+          "code": "<QSelect :items=\"[\n\t\t\t{\n\t\t\t\tkey: 'copy',\n\t\t\t\tlabel: 'Copy',\n\t\t\t\ticon: { icon: 'content-copy' },\n\t\t\t\tdescription: 'Is used to duplicate the selected information.'\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'cut',\n\t\t\t\tlabel: 'Cut',\n\t\t\t\ticon: { icon: 'content-cut' },\n\t\t\t\tdescription:\n\t\t\t\t\t'This allows the cut information to be pasted in another location, effectively moving it from its original place to a new one.'\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'duplicate',\n\t\t\t\tlabel: 'Duplicate',\n\t\t\t\ticon: { icon: 'content-duplicate' },\n\t\t\t\tdescription:\n\t\t\t\t\t'Is used to create an exact copy of the selected item. Does not rely on the clipboard'\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'paste',\n\t\t\t\tlabel: 'Paste',\n\t\t\t\ticon: { icon: 'content-paste' },\n\t\t\t\tdescription: \"Is used to insert the information stored in the system's clipboard.\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'save',\n\t\t\t\tlabel: 'Save',\n\t\t\t\ticon: { icon: 'content-save' },\n\t\t\t\tdescription:\n\t\t\t\t\t'Is used to store the current state of a document, file, or project to a specified location on a storage device.'\n\t\t\t}\n\t\t]\" :multiple=\"true\" />"
+        },
+        {
+          "title": "Multiple With Icons",
+          "description": "Allows the selection of multiple items with icon.",
+          "code": "<QSelect :items=\"[\n\t\t\t{\n\t\t\t\tkey: 'copy',\n\t\t\t\tlabel: 'Copy',\n\t\t\t\ticon: { icon: 'content-copy' }\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'cut',\n\t\t\t\tlabel: 'Cut',\n\t\t\t\ticon: { icon: 'content-cut' }\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'duplicate',\n\t\t\t\tlabel: 'Duplicate',\n\t\t\t\ticon: { icon: 'content-duplicate' }\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'paste',\n\t\t\t\tlabel: 'Paste',\n\t\t\t\ticon: { icon: 'content-paste' }\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'save',\n\t\t\t\tlabel: 'Save',\n\t\t\t\ticon: { icon: 'content-save' }\n\t\t\t}\n\t\t]\" :multiple=\"true\" />"
+        },
         {
           "title": "Badges",
           "description": "Displays the selected options as badges.",

package/dist/ui.css

@@ -1468,12 +1468,28 @@ body *::-webkit-scrollbar-track {
   --active-color: var(--q-theme-neutral-light);
   cursor: default;
 }
-.q-checkbox--readonly:not(.q-checkbox--checked):not(.q-checkbox--indeterminate) .q-checkbox__input {
+.q-checkbox--readonly:not(.q-checkbox--checked):not(.q-checkbox--indeterminate):not(.q-checkbox--borderless) .q-checkbox__input {
   background-color: rgb(var(--q-theme-neutral-light-rgb)/25%);
 }
 .q-checkbox--readonly label {
   cursor: default;
 }
+.q-checkbox--borderless {
+  --active-color: transparent;
+}
+.q-checkbox--borderless:focus-within {
+  outline: 0;
+}
+.q-checkbox--borderless .q-checkbox__input {
+  background-color: var(--active-color);
+  border-color: var(--active-color);
+}
+.q-checkbox--borderless .q-checkbox__input-icon.q-icon {
+  --icon-color: var(--q-theme-neutral-dark);
+}
+.q-checkbox--borderless:not(.q-checkbox--readonly) .q-checkbox__input-icon.q-icon {
+  --icon-color: var(--q-theme-primary);
+}
 
 @media (prefers-reduced-motion: reduce) {
   .q-checkbox__input,
@@ -3201,22 +3217,28 @@ body *::-webkit-scrollbar-track {
   outline: 2px solid rgb(var(--q-theme-info-rgb)/50%);
 }
 .q-field--mini > .q-field__control {
-  width: min(1 * 5em + 0 * 0.25rem, 100%);
+  width: calc(1 * 5em + 0 * 0.25rem);
+  max-width: 100%;
 }
 .q-field--small > .q-field__control {
-  width: min(2 * 5em + 1 * 0.25rem, 100%);
+  width: calc(2 * 5em + 1 * 0.25rem);
+  max-width: 100%;
 }
 .q-field--medium > .q-field__control {
-  width: min(3 * 5em + 2 * 0.25rem, 100%);
+  width: calc(3 * 5em + 2 * 0.25rem);
+  max-width: 100%;
 }
 .q-field--large > .q-field__control {
-  width: min(4 * 5em + 3 * 0.25rem, 100%);
+  width: calc(4 * 5em + 3 * 0.25rem);
+  max-width: 100%;
 }
 .q-field--xlarge > .q-field__control {
-  width: min(6 * 5em + 5 * 0.25rem, 100%);
+  width: calc(6 * 5em + 5 * 0.25rem);
+  max-width: 100%;
 }
 .q-field--xxlarge > .q-field__control {
-  width: min(8 * 5em + 7 * 0.25rem, 100%);
+  width: calc(8 * 5em + 7 * 0.25rem);
+  max-width: 100%;
 }
 .q-field--block {
   width: 100%;
@@ -4505,6 +4527,11 @@ body *::-webkit-scrollbar-track {
 .q-select:not(.q-select--disabled) .q-select__chevron:hover, .q-select:not(.q-select--disabled) .q-select__chevron:focus {
   opacity: 1;
 }
+.q-select--readonly .q-badge--disabled, .q-select--disabled .q-badge--disabled {
+  opacity: 1;
+  font-weight: 900;
+  color: var(--q-theme-neutral-dark);
+}
 .q-select__value, .q-select__placeholder {
   white-space: nowrap;
   overflow: hidden;
@@ -4512,20 +4539,39 @@ body *::-webkit-scrollbar-track {
   pointer-events: none;
   min-height: 1lh;
 }
-.q-select__badge-container {
+.q-select__multi-value {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+  min-height: 1lh;
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+}
+.q-select__multi-value--hidden {
+  visibility: hidden;
+  position: absolute;
+  pointer-events: none;
+}
+.q-select__value-container {
   display: flex;
   gap: 0.1rem;
   overflow: hidden;
   width: 100%;
   height: 1.35rem;
 }
-.q-select__badge-container .q-select__badge-count {
+.q-select__value-container .q-select__badge-count {
   font-weight: 900;
 }
-.q-select__badge-container .q-select__badge-hidden {
+.q-select__value-container .q-select__badge-count--clickable {
+  cursor: pointer;
+}
+.q-select__value-container .q-select__badge-hidden {
   visibility: hidden;
 }
-.q-select__badge-container .q-badge__content {
+.q-select__value-container .q-badge__content {
   white-space: nowrap;
 }
 .q-select__placeholder {