@quidgest/ui 0.5.13 → 0.5.15

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/index.d.ts

@@ -74,6 +74,8 @@ declare type ComponentDefaults = Record<string | symbol, unknown>;
 
 export declare function createFramework(config?: FrameworkConfig): Plugin_2;
 
+declare const DEFAULT_ICONS: Record<string, Icon>;
+
 export declare const defaultDarkColorScheme: ColorScheme;
 
 export declare const defaultLightColorScheme: ColorScheme;
@@ -106,15 +108,7 @@ export declare type Icon = {
     size?: number;
 };
 
-export declare type InputSize = 'mini' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'block';
-
-export declare type ListItem = {
-    [key: string]: any;
-    icon?: Icon;
-    selected?: boolean;
-    group?: string;
-    disabled?: boolean;
-};
+declare type Icons = typeof DEFAULT_ICONS;
 
 declare type Placement = 'top' | 'bottom' | 'left' | 'right';
 
@@ -785,7 +779,7 @@ export declare const QInput: {
         $: ComponentInternalInstance;
         $data: {};
         $props: {
-            size?: InputSize | undefined;
+            size?: QInputSize | undefined;
             disabled?: boolean | undefined;
             readonly?: boolean | undefined;
             style?: unknown;
@@ -848,7 +842,7 @@ export declare const QInput: {
         $el: any;
         $options: ComponentOptionsBase<Readonly<ExtractPropTypes<{
             size: {
-                type: PropType<InputSize>;
+                type: PropType<QInputSize>;
                 default: string;
             };
             disabled: {
@@ -860,7 +854,7 @@ export declare const QInput: {
                 default: boolean;
             };
         }>>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
-            size: InputSize;
+            size: QInputSize;
             disabled: boolean;
             readonly: boolean;
         }, {}, string, {}> & {
@@ -885,7 +879,7 @@ export declare const QInput: {
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: WatchOptions<boolean> | undefined): WatchStopHandle;
     } & Readonly<ExtractPropTypes<{
         size: {
-            type: PropType<InputSize>;
+            type: PropType<QInputSize>;
             default: string;
         };
         disabled: {
@@ -902,7 +896,7 @@ export declare const QInput: {
     __isSuspense?: undefined;
 } & ComponentOptionsBase<Readonly<ExtractPropTypes<{
     size: {
-        type: PropType<InputSize>;
+        type: PropType<QInputSize>;
         default: string;
     };
     disabled: {
@@ -914,7 +908,7 @@ export declare const QInput: {
         default: boolean;
     };
 }>>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
-    size: InputSize;
+    size: QInputSize;
     disabled: boolean;
     readonly: boolean;
 }, {}, string, {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
@@ -925,6 +919,23 @@ export declare const QInput: {
     };
 });
 
+export declare type QInputProps = {
+    /**
+     * The size category of the input.
+     */
+    size?: QInputSize;
+    /**
+     * Whether the input is readonly.
+     */
+    readonly?: boolean;
+    /**
+     * Whether the input is disabled.
+     */
+    disabled?: boolean;
+};
+
+export declare type QInputSize = 'mini' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'block';
+
 export declare const QLineLoader: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}, {}>;
 
 export declare const QList: DefineComponent<{
@@ -936,11 +947,15 @@ export declare const QList: DefineComponent<{
         default: undefined;
     };
     items: {
-        type: PropType<ListItem[]>;
+        type: PropType<(Omit<QListItemProps, "label" | "value"> & {
+            [key: string]: any;
+        })[]>;
         required: true;
     };
     groups: {
-        type: PropType<QListItemGroupProps[]>;
+        type: PropType<(QListItemGroupProps & {
+            id: string;
+        })[]>;
         default: () => never[];
     };
     itemValue: {
@@ -964,11 +979,15 @@ export declare const QList: DefineComponent<{
         default: undefined;
     };
     items: {
-        type: PropType<ListItem[]>;
+        type: PropType<(Omit<QListItemProps, "label" | "value"> & {
+            [key: string]: any;
+        })[]>;
         required: true;
     };
     groups: {
-        type: PropType<QListItemGroupProps[]>;
+        type: PropType<(QListItemGroupProps & {
+            id: string;
+        })[]>;
         default: () => never[];
     };
     itemValue: {
@@ -983,7 +1002,9 @@ export declare const QList: DefineComponent<{
     "onUpdate:modelValue"?: ((value: Primitive) => any) | undefined;
 }, {
     modelValue: Primitive;
-    groups: QListItemGroupProps[];
+    groups: (QListItemGroupProps & {
+        id: string;
+    })[];
     itemValue: string;
     itemLabel: string;
 }, {}>;
@@ -1065,7 +1086,6 @@ export declare const QListItemGroup: {
         $props: {
             title?: string | undefined;
             disabled?: boolean | undefined;
-            id?: string | undefined;
             style?: unknown;
             class?: unknown;
             key?: string | number | symbol | undefined;
@@ -1133,14 +1153,9 @@ export declare const QListItemGroup: {
                 type: PropType<boolean>;
                 default: boolean;
             };
-            id: {
-                type: PropType<string>;
-                default: () => string;
-            };
         }>>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
             title: string;
             disabled: boolean;
-            id: string;
         }, {}, string, {}> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -1170,10 +1185,6 @@ export declare const QListItemGroup: {
             type: PropType<boolean>;
             default: boolean;
         };
-        id: {
-            type: PropType<string>;
-            default: () => string;
-        };
     }>> & ShallowUnwrapRef<{}> & {} & ComponentCustomProperties & {};
     __isFragment?: undefined;
     __isTeleport?: undefined;
@@ -1187,14 +1198,9 @@ export declare const QListItemGroup: {
         type: PropType<boolean>;
         default: boolean;
     };
-    id: {
-        type: PropType<string>;
-        default: () => string;
-    };
 }>>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
     title: string;
     disabled: boolean;
-    id: string;
 }, {}, string, {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
     $slots: {
         default?(_: {}): any;
@@ -1202,10 +1208,6 @@ export declare const QListItemGroup: {
 });
 
 export declare type QListItemGroupProps = {
-    /**
-     * The identifier of the list item group.
-     */
-    id?: string;
     /**
      * The title of the group.
      */
@@ -1216,6 +1218,68 @@ export declare type QListItemGroupProps = {
     disabled?: boolean;
 };
 
+export declare type QListItemProps = {
+    /**
+     * The value of the item.
+     */
+    value: Primitive;
+    /**
+     * The label of the item.
+     */
+    label: string;
+    /**
+     * The icon of the item.
+     */
+    icon?: Icon;
+    /**
+     * Whether this item is selected.
+     */
+    selected?: boolean;
+    /**
+     * Whether this item is highlighted.
+     */
+    highlighted?: boolean;
+    /**
+     * The icons of the component.
+     */
+    icons?: Icons;
+    /**
+     * Whether the item is disabled.
+     */
+    disabled?: boolean;
+};
+
+export declare type QListProps = {
+    /**
+     * The value of the currently selected item.
+     */
+    modelValue?: Primitive;
+    /**
+     * The list of available items for selection.
+     */
+    items: (Omit<QListItemProps, 'value' | 'label'> & {
+        [key: string]: any;
+    })[];
+    /**
+     * The item groups used for organizing the available items.
+     */
+    groups?: (QListItemGroupProps & {
+        id: string;
+    })[];
+    /**
+     * The property of each item object that holds its value.
+     */
+    itemValue?: string;
+    /**
+     * The property of each item object that holds its title.
+     */
+    itemLabel?: string;
+    /**
+     * Indicates whether the list is disabled.
+     */
+    disabled?: boolean;
+};
+
 export declare const QOverlay: {
     new (...args: any[]): {
         $: ComponentInternalInstance;
@@ -1770,12 +1834,14 @@ export declare const QSelect: {
         $: ComponentInternalInstance;
         $data: {};
         $props: {
-            size?: InputSize | undefined;
+            size?: QInputSize | undefined;
             disabled?: boolean | undefined;
             loading?: boolean | undefined;
             modelValue?: Primitive | undefined;
             icons?: Record<string, Icon> | undefined;
-            groups?: QListItemGroupProps[] | undefined;
+            groups?: (QListItemGroupProps & {
+                id: string;
+            })[] | undefined;
             itemValue?: string | undefined;
             itemLabel?: string | undefined;
             clearable?: boolean | undefined;
@@ -1826,7 +1892,9 @@ export declare const QSelect: {
             }>) => void)[] | undefined;
             "onUpdate:modelValue"?: ((value: Primitive | undefined) => any) | undefined;
             readonly readonly?: boolean | undefined;
-            readonly items: ListItem[];
+            readonly items: (Omit<QListItemProps, "label" | "value"> & {
+                [key: string]: any;
+            })[];
             "onBefore-show"?: (() => any) | undefined;
             "onBefore-hide"?: (() => any) | undefined;
             onShow?: (() => any) | undefined;
@@ -1847,7 +1915,7 @@ export declare const QSelect: {
         $el: any;
         $options: ComponentOptionsBase<Readonly<ExtractPropTypes<{
             size: {
-                type: PropType<InputSize>;
+                type: PropType<QInputSize>;
                 default: string;
             };
             disabled: {
@@ -1870,11 +1938,15 @@ export declare const QSelect: {
                 default: () => Record<string, Icon>;
             };
             items: {
-                type: PropType<ListItem[]>;
+                type: PropType<(Omit<QListItemProps, "label" | "value"> & {
+                    [key: string]: any;
+                })[]>;
                 required: true;
             };
             groups: {
-                type: PropType<QListItemGroupProps[]>;
+                type: PropType<(QListItemGroupProps & {
+                    id: string;
+                })[]>;
                 default: () => never[];
             };
             itemValue: {
@@ -1906,12 +1978,14 @@ export declare const QSelect: {
             show: () => void;
             hide: () => void;
         }, string, {
-            size: InputSize;
+            size: QInputSize;
             disabled: boolean;
             loading: boolean;
             modelValue: Primitive;
             icons: Record<string, Icon>;
-            groups: QListItemGroupProps[];
+            groups: (QListItemGroupProps & {
+                id: string;
+            })[];
             itemValue: string;
             itemLabel: string;
             clearable: boolean;
@@ -1938,7 +2012,7 @@ export declare const QSelect: {
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: WatchOptions<boolean> | undefined): WatchStopHandle;
     } & Readonly<ExtractPropTypes<{
         size: {
-            type: PropType<InputSize>;
+            type: PropType<QInputSize>;
             default: string;
         };
         disabled: {
@@ -1961,11 +2035,15 @@ export declare const QSelect: {
             default: () => Record<string, Icon>;
         };
         items: {
-            type: PropType<ListItem[]>;
+            type: PropType<(Omit<QListItemProps, "label" | "value"> & {
+                [key: string]: any;
+            })[]>;
             required: true;
         };
         groups: {
-            type: PropType<QListItemGroupProps[]>;
+            type: PropType<(QListItemGroupProps & {
+                id: string;
+            })[]>;
             default: () => never[];
         };
         itemValue: {
@@ -1996,7 +2074,7 @@ export declare const QSelect: {
     __isSuspense?: undefined;
 } & ComponentOptionsBase<Readonly<ExtractPropTypes<{
     size: {
-        type: PropType<InputSize>;
+        type: PropType<QInputSize>;
         default: string;
     };
     disabled: {
@@ -2019,11 +2097,15 @@ export declare const QSelect: {
         default: () => Record<string, Icon>;
     };
     items: {
-        type: PropType<ListItem[]>;
+        type: PropType<(Omit<QListItemProps, "label" | "value"> & {
+            [key: string]: any;
+        })[]>;
         required: true;
     };
     groups: {
-        type: PropType<QListItemGroupProps[]>;
+        type: PropType<(QListItemGroupProps & {
+            id: string;
+        })[]>;
         default: () => never[];
     };
     itemValue: {
@@ -2055,12 +2137,14 @@ export declare const QSelect: {
     show: () => void;
     hide: () => void;
 }, string, {
-    size: InputSize;
+    size: QInputSize;
     disabled: boolean;
     loading: boolean;
     modelValue: Primitive;
     icons: Record<string, Icon>;
-    groups: QListItemGroupProps[];
+    groups: (QListItemGroupProps & {
+        id: string;
+    })[];
     itemValue: string;
     itemLabel: string;
     clearable: boolean;

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,