@quidgest/ui 0.10.0 → 0.11.0

package/dist/index.d.ts

@@ -93,7 +93,10 @@ declare type FrameworkConfig = {
 };
 
 declare type Group = QListItemGroupProps & {
-    id: string;
+    /**
+     * Whether the entire item group is disabled.
+     */
+    disabled?: boolean;
 };
 
 export declare type Icon = {
@@ -2161,7 +2164,7 @@ export declare const QList: {
         };
         groups: {
             type: PropType<(QListItemGroupProps & {
-                id: string;
+                disabled?: boolean | undefined;
             })[]>;
             default: () => never[];
         };
@@ -2200,7 +2203,7 @@ export declare const QList: {
         };
         groups: {
             type: PropType<(QListItemGroupProps & {
-                id: string;
+                disabled?: boolean | undefined;
             })[]>;
             default: () => never[];
         };
@@ -2216,7 +2219,7 @@ export declare const QList: {
         class: string | unknown[];
         highlighted: Primitive;
         groups: (QListItemGroupProps & {
-            id: string;
+            disabled?: boolean | undefined;
         })[];
         itemValue: string;
         itemLabel: string;
@@ -2248,7 +2251,7 @@ export declare const QList: {
         };
         groups: {
             type: PropType<(QListItemGroupProps & {
-                id: string;
+                disabled?: boolean | undefined;
             })[]>;
             default: () => never[];
         };
@@ -2270,7 +2273,7 @@ export declare const QList: {
         class: string | unknown[];
         highlighted: Primitive;
         groups: (QListItemGroupProps & {
-            id: string;
+            disabled?: boolean | undefined;
         })[];
         itemValue: string;
         itemLabel: string;
@@ -2299,7 +2302,7 @@ export declare const QList: {
     };
     groups: {
         type: PropType<(QListItemGroupProps & {
-            id: string;
+            disabled?: boolean | undefined;
         })[]>;
         default: () => never[];
     };
@@ -2321,7 +2324,7 @@ export declare const QList: {
     class: string | unknown[];
     highlighted: Primitive;
     groups: (QListItemGroupProps & {
-        id: string;
+        disabled?: boolean | undefined;
     })[];
     itemValue: string;
     itemLabel: string;
@@ -2484,16 +2487,18 @@ export declare const QListItemGroup: {
             type: PropType<string>;
             default: string;
         };
-        disabled: {
-            type: PropType<boolean>;
+        id: {
+            type: PropType<string>;
+            required: true;
         };
     }>>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<ExtractPropTypes<{
         title: {
             type: PropType<string>;
             default: string;
         };
-        disabled: {
-            type: PropType<boolean>;
+        id: {
+            type: PropType<string>;
+            required: true;
         };
     }>>, {
         title: string;
@@ -2509,8 +2514,9 @@ export declare const QListItemGroup: {
             type: PropType<string>;
             default: string;
         };
-        disabled: {
-            type: PropType<boolean>;
+        id: {
+            type: PropType<string>;
+            required: true;
         };
     }>>, {}, {}, {}, {}, {
         title: string;
@@ -2523,8 +2529,9 @@ export declare const QListItemGroup: {
         type: PropType<string>;
         default: string;
     };
-    disabled: {
-        type: PropType<boolean>;
+    id: {
+        type: PropType<string>;
+        required: true;
     };
 }>>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
     title: string;
@@ -2536,13 +2543,13 @@ export declare const QListItemGroup: {
 
 export declare type QListItemGroupProps = {
     /**
-     * The title of the group.
+     * The id of the group.
      */
-    title?: string;
+    id: string;
     /**
-     * Whether the entire list group is disabled.
+     * The title of the group.
      */
-    disabled?: boolean;
+    title?: string;
 };
 
 export declare type QListItemProps = {
@@ -3463,6 +3470,38 @@ export declare const QSelect: {
     };
 });
 
+export declare const QSkeletonLoader: DefineComponent<{
+    type: {
+        type: PropType<"text" | "icon">;
+        default: undefined;
+    };
+    height: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
+    width: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
+}, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<{
+    type: {
+        type: PropType<"text" | "icon">;
+        default: undefined;
+    };
+    height: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
+    width: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
+}>>, {
+    type: "text" | "icon";
+    height: string | number;
+    width: string | number;
+}, {}>;
+
 export declare const QSpinnerLoader: DefineComponent<{
     size: {
         type: PropType<number>;

package/dist/ui.css

@@ -495,8 +495,14 @@ body *::-webkit-scrollbar-track {
   display: flex;
   align-items: center;
 }
+.q-field__prepend {
+  padding-right: 0.25rem;
+  padding-left: 0.05rem;
+}
 .q-field__append {
   margin-left: auto;
+  padding-left: 0.25rem;
+  padding-right: 0.05rem;
 }
 .q-field--required > .q-field__label label::after {
   content: " *";
@@ -899,6 +905,51 @@ body *::-webkit-scrollbar-track {
   margin: 1rem 0;
 }
 
+.q-skeleton-loader__bone {
+  display: inline-flex;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background-color: var(--q-theme-neutral-light);
+  animation: fadeIn 1s;
+  border-radius: 0.25rem;
+}
+.q-skeleton-loader__bone::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transform: translateX(-100%);
+  background-image: linear-gradient(90deg, rgb(var(--q-theme-background-rgb)/0) 0, rgb(var(--q-theme-background-rgb)/0.2) 20%, rgb(var(--q-theme-background-rgb)/0.5) 60%, rgb(var(--q-theme-background-rgb)/0));
+  animation: shimmer 2s infinite;
+  content: "";
+}
+.q-skeleton-loader--text {
+  height: 1em;
+}
+.q-skeleton-loader--icon {
+  width: 20px;
+  height: 20px;
+}
+.q-skeleton-loader--icon .q-skeleton-loader__bone {
+  border-radius: 50%;
+}
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 .q-spinner-loader {
   font-size: 48px;
   width: 1em;