@quidgest/ui 0.21.1 → 0.22.0

package/CHANGELOG.md

@@ -9,6 +9,18 @@ On `0.x`, breaking changes typically ship as a **minor** bump. The `/release` wo
 
 Entries below start at **0.16.0**. Earlier history is in git / GitLab MRs. Patch releases within a minor line may be summarized under that minor unless a break shipped in between.
 
+## [0.22.0] - 2026-09-14
+
+### Added
+
+- `QProgress` — progress bar component
+
+## [0.21.2] - 2026-09-11
+
+### Fixed
+
+- `QObfuscation` — remove UTF-8 BOM from SCSS so style tooling does not choke on encoding
+
 ## [0.21.1] - 2026-09-11
 
 ### Added

package/dist/json/api.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.21.1",
+  "version": "0.22.0",
   "components": [
     {
       "name": "QAccordion",
@@ -4809,7 +4809,7 @@
     },
     {
       "name": "QMeter",
-      "description": "A meter represents a quantity within a known range, or a fractional value.",
+      "description": "A meter represents a quantity within a known range, or a fractional value that is not ongoing progress.",
       "meta": {
         "props": [
           {
@@ -7371,6 +7371,206 @@
         }
       ]
     },
+    {
+      "name": "QProgress",
+      "description": "Shows progress of loading or completion of a task.",
+      "meta": {
+        "props": [
+          {
+            "name": "modelValue",
+            "type": {
+              "kind": "primitive",
+              "name": "number"
+            },
+            "description": "",
+            "required": false
+          },
+          {
+            "name": "id",
+            "type": {
+              "kind": "primitive",
+              "name": "string"
+            },
+            "description": "The component unique identifier.",
+            "required": false,
+            "category": "Identification"
+          },
+          {
+            "name": "label",
+            "type": {
+              "kind": "primitive",
+              "name": "string"
+            },
+            "description": "Text displayed above the progress bar.",
+            "required": false,
+            "category": "Content"
+          },
+          {
+            "name": "text",
+            "type": {
+              "kind": "primitive",
+              "name": "string"
+            },
+            "description": "Text displayed in the progress bar.\nNot shown if the 'mini' prop is true.",
+            "required": false,
+            "category": "Content"
+          },
+          {
+            "name": "striped",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "Whether the progress bar is striped.",
+            "default": "false",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "animated",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "Whether the progress bar has an animation.",
+            "default": "false",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "mini",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "Whether the progress bar is mini.\nIf true, the values of the 'text', 'showValue', and 'showPercent' props will not be shown.",
+            "default": "false",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "color",
+            "type": {
+              "kind": "primitive",
+              "name": "string"
+            },
+            "description": "The color of the progress bar.",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "min",
+            "type": {
+              "kind": "primitive",
+              "name": "number"
+            },
+            "description": "Minimum value for the range of the progress bar.\nIf greater than 'max', these values will be swapped.\nIf equal to 'max', 'max' will be max + 1.",
+            "default": "0",
+            "required": false,
+            "category": "Content"
+          },
+          {
+            "name": "max",
+            "type": {
+              "kind": "primitive",
+              "name": "number"
+            },
+            "description": "Maximum value for the range of the progress bar.\nIf less than 'min', these values will be swapped.\nIf equal to 'min', 'max' will be max + 1.",
+            "default": "100",
+            "required": false,
+            "category": "Content"
+          },
+          {
+            "name": "showLimits",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "Whether to display the min and max values.",
+            "default": "false",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "showValue",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "Whether to display the current value in the progress bar.\nNot shown if the 'mini' prop is true.",
+            "default": "false",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "showPercent",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "Whether to display the current percent in the progress bar.\nNot shown if the 'mini' prop is true.",
+            "default": "false",
+            "required": false,
+            "category": "Presentation"
+          }
+        ],
+        "events": [
+          {
+            "name": "update:modelValue",
+            "description": "",
+            "type": "[value: number]"
+          }
+        ],
+        "slots": []
+      },
+      "examples": [
+        {
+          "title": "Default",
+          "description": "The default progress bar.",
+          "code": "<q-progress v-bind=\"args\" />"
+        },
+        {
+          "title": "Mini",
+          "description": "The mini progress bar.",
+          "code": "<q-progress v-bind=\"args\" />"
+        },
+        {
+          "title": "Text",
+          "description": "Displays custom text on the bar.",
+          "code": "<q-progress v-bind=\"args\" />"
+        },
+        {
+          "title": "Text Overflow",
+          "description": "Displays long custom text on the bar, cutting off when it's too long and adding an ellipsis.",
+          "code": "<q-progress v-bind=\"args\" />"
+        },
+        {
+          "title": "Custom Label",
+          "description": "Displays custom label.",
+          "code": "<q-progress v-bind=\"args\" />"
+        },
+        {
+          "title": "Colors",
+          "description": "Displays the bar in different colors.",
+          "code": "<q-progress\n\t\t\t\tv-for=\"(_, idx) in colors\"\n\t\t\t\t:key=\"colors[idx]\"\n\t\t\t\t:color=\"colors[idx]\"\n\t\t\t\tstyle=\"margin: 0.25rem 0\"\n\t\t\t\tv-bind=\"args\" />"
+        },
+        {
+          "title": "Animated Striped",
+          "description": "Displays an animated, striped progress bar.",
+          "code": "<q-progress v-bind=\"args\" />"
+        },
+        {
+          "title": "With Limits And Value",
+          "description": "Displays the current value along with the min and max limits.",
+          "code": "<q-progress v-bind=\"args\" />"
+        },
+        {
+          "title": "With Limits And Percent",
+          "description": "Displays the current percent along with the min and max limits.",
+          "code": "<q-progress v-bind=\"args\" />"
+        }
+      ]
+    },
     {
       "name": "QPropertyList",
       "description": "A versatile property list with expandable groups and an optional detail panel, allowing users to view and edit fields efficiently.",

package/dist/manifest/components.json

@@ -45,6 +45,7 @@
   "QPasswordField",
   "QPhoneField",
   "QPopover",
+  "QProgress",
   "QPropertyList",
   "QPropertyListRow",
   "QPropertyListGroup",

package/dist/ui.css

@@ -6442,6 +6442,166 @@ body *::-webkit-scrollbar-track {
   font-size: 0.9rem;
 }
 
+@keyframes q-progress-move {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 1rem 0;
+  }
+}
+@keyframes q-progress-pulse {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0.4;
+  }
+  100% {
+    transform: scale(10, 10);
+    opacity: 0;
+  }
+}
+.q-progress {
+  --q-progress-main-color: var(--q-theme-primary);
+  --q-progress-main-color-rgb: var(--q-theme-primary-rgb);
+  --q-progress-on-main-color: var(--q-theme-on-primary);
+  --q-progress-on-main-color-rgb: var(--q-theme-on-primary-rgb);
+}
+.q-progress__bar {
+  display: flex;
+  overflow: hidden;
+  height: 1.2rem;
+  line-height: 0;
+  font-size: 0.75rem;
+  background-color: var(--q-theme-neutral-light);
+  border-radius: 0.25rem;
+}
+.q-progress__bar--mini {
+  height: 0.35rem;
+  font-size: 0;
+}
+.q-progress__fill {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  color: var(--q-progress-on-main-color);
+  text-align: center;
+  white-space: nowrap;
+  background-color: var(--q-progress-main-color);
+  transition: width 0.4s ease;
+}
+.q-progress__fill-text {
+  position: relative;
+  margin: 0 10%;
+  height: 100%;
+  text-align: center;
+  align-content: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  line-height: initial;
+}
+.q-progress__fill--striped {
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-size: 1rem 1rem;
+}
+.q-progress__fill--animated {
+  animation: 1s linear infinite q-progress-move;
+}
+.q-progress__fill--animated::before {
+  content: "";
+  position: absolute;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background-image: radial-gradient(circle at 100%, var(--q-theme-neutral-dark) 75%, transparent 35%);
+  animation: 5s linear infinite q-progress-pulse;
+}
+.q-progress__values {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 5px;
+}
+.q-progress__values-min, .q-progress__values-max {
+  position: relative;
+}
+.q-progress--primary {
+  --q-progress-main-color: var(--q-theme-primary);
+  --q-progress-main-color-rgb: var(--q-theme-primary-rgb);
+  --q-progress-on-main-color: var(--q-theme-on-primary);
+  --q-progress-on-main-color-rgb: var(--q-theme-on-primary-rgb);
+  --q-progress-on-hover-color: var(--q-theme-on-primary);
+  --q-progress-on-hover-color-rgb: var(--q-theme-on-primary-rgb);
+}
+.q-progress--secondary {
+  --q-progress-main-color: var(--q-theme-secondary);
+  --q-progress-main-color-rgb: var(--q-theme-secondary-rgb);
+  --q-progress-on-main-color: var(--q-theme-on-secondary);
+  --q-progress-on-main-color-rgb: var(--q-theme-on-secondary-rgb);
+  --q-progress-on-hover-color: var(--q-theme-on-secondary);
+  --q-progress-on-hover-color-rgb: var(--q-theme-on-secondary-rgb);
+}
+.q-progress--highlight {
+  --q-progress-main-color: var(--q-theme-highlight);
+  --q-progress-main-color-rgb: var(--q-theme-highlight-rgb);
+  --q-progress-on-main-color: var(--q-theme-on-highlight);
+  --q-progress-on-main-color-rgb: var(--q-theme-on-highlight-rgb);
+  --q-progress-on-hover-color: var(--q-theme-on-highlight);
+  --q-progress-on-hover-color-rgb: var(--q-theme-on-highlight-rgb);
+}
+.q-progress--info {
+  --q-progress-main-color: var(--q-theme-info);
+  --q-progress-main-color-rgb: var(--q-theme-info-rgb);
+  --q-progress-on-main-color: var(--q-theme-on-info);
+  --q-progress-on-main-color-rgb: var(--q-theme-on-info-rgb);
+  --q-progress-on-hover-color: var(--q-theme-on-info);
+  --q-progress-on-hover-color-rgb: var(--q-theme-on-info-rgb);
+}
+.q-progress--success {
+  --q-progress-main-color: var(--q-theme-success);
+  --q-progress-main-color-rgb: var(--q-theme-success-rgb);
+  --q-progress-on-main-color: var(--q-theme-on-success);
+  --q-progress-on-main-color-rgb: var(--q-theme-on-success-rgb);
+  --q-progress-on-hover-color: var(--q-theme-on-success);
+  --q-progress-on-hover-color-rgb: var(--q-theme-on-success-rgb);
+}
+.q-progress--warning {
+  --q-progress-main-color: var(--q-theme-warning);
+  --q-progress-main-color-rgb: var(--q-theme-warning-rgb);
+  --q-progress-on-main-color: var(--q-theme-on-warning);
+  --q-progress-on-main-color-rgb: var(--q-theme-on-warning-rgb);
+  --q-progress-on-hover-color: var(--q-theme-on-warning);
+  --q-progress-on-hover-color-rgb: var(--q-theme-on-warning-rgb);
+}
+.q-progress--danger {
+  --q-progress-main-color: var(--q-theme-danger);
+  --q-progress-main-color-rgb: var(--q-theme-danger-rgb);
+  --q-progress-on-main-color: var(--q-theme-on-danger);
+  --q-progress-on-main-color-rgb: var(--q-theme-on-danger-rgb);
+  --q-progress-on-hover-color: var(--q-theme-on-danger);
+  --q-progress-on-hover-color-rgb: var(--q-theme-on-danger-rgb);
+}
+.q-progress--neutral {
+  --q-progress-main-color: var(--q-theme-neutral);
+  --q-progress-main-color-rgb: var(--q-theme-neutral-rgb);
+  --q-progress-on-main-color: var(--q-theme-on-neutral);
+  --q-progress-on-main-color-rgb: var(--q-theme-on-neutral-rgb);
+  --q-progress-on-hover-color: var(--q-theme-on-neutral);
+  --q-progress-on-hover-color-rgb: var(--q-theme-on-neutral-rgb);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .q-progress__fill {
+    transition: none;
+  }
+  .q-progress__fill--animated {
+    animation: none;
+  }
+  .q-progress__fill--animated::before {
+    display: none;
+  }
+}
 .q-property-list {
   margin: 0;
   font-size: 0.9rem;