@quaffui/quaff 0.1.0-prealpha → 0.1.0-prealpha11

package/dist/components/layout/index.scss

@@ -9,6 +9,8 @@
   --right-drawer-width: 300px;
 }
 
+$contentSlot: ":not(.q-header, .q-footer, .q-railbar, .q-drawer)";
+
 .q-layout {
   position: relative;
   width: 100%;
@@ -17,7 +19,7 @@
   min-height: 100%;
   overflow: hidden;
 
-  & > :not(.q-header, .q-footer, .q-railbar, .q-drawer) {
+  & > #{$contentSlot} {
     height: 100%;
     overflow: auto;
     transition: padding var(--speed3);
@@ -35,18 +37,18 @@
   min-height: unset;
   border-radius: 0;
 
-  & > nav {
-    height: 100%;
-    min-height: unset;
-  }
-
-  &.fixed {
+  &--fixed {
     position: fixed;
 
     &::before {
       margin: 0;
     }
   }
+
+  & > nav {
+    height: 100%;
+    min-height: unset;
+  }
 }
 
 .q-layout > .q-footer {
@@ -60,12 +62,7 @@
   min-height: unset;
   border-radius: 0;
 
-  & > nav {
-    height: 100%;
-    min-height: unset;
-  }
-
-  &.fixed {
+  &--fixed {
     position: fixed;
 
     &::before {
@@ -73,7 +70,12 @@
     }
   }
 
-  & ~ :not(.q-header, .q-footer, .q-railbar, .q-drawer) {
+  & > nav {
+    height: 100%;
+    min-height: unset;
+  }
+
+  & ~ #{$contentSlot} {
     padding-bottom: var(--footer-height);
   }
 }
@@ -89,28 +91,28 @@
   overflow: auto;
   transition: all var(--speed3);
 
-  &.above {
+  &--above {
     z-index: 105;
   }
 
-  &.fixed {
+  &--fixed {
     position: fixed;
   }
 
-  &.left {
+  &--left {
     left: 0px;
     width: var(--left-railbar-width);
 
-    &.bordered {
+    &.q-railbar--bordered {
       border-right: 0.0625rem solid var(--outline);
     }
   }
 
-  &.right {
+  &--right {
     right: 0px;
     width: var(--right-railbar-width);
 
-    &.bordered {
+    &.q-railbar--bordered {
       border-left: 0.0625rem solid var(--outline);
     }
   }
@@ -140,35 +142,29 @@
       background-color: var(--secondary-container);
       color: var(--on-secondary-container);
       padding: 0 1rem;
-      font-variation-settings: "FILL" 1, "wght" 400, "opsz" 24;
+      font-variation-settings:
+        "FILL" 1,
+        "wght" 400,
+        "opsz" 24;
     }
   }
 }
 
 .q-layout > .q-drawer {
-  //TODO Problems with z-index between multiple layouts
   z-index: 101;
   border-radius: 0;
 
-  &.above {
+  &--above {
     z-index: 104;
   }
 
-  &.border-radius {
-    &__left {
-      &--top {
-        border-top-left-radius: 16px;
-      }
-      &--bottom {
-        border-bottom-left-radius: 16px;
-      }
-    }
-    &__right {
-      &--top {
-        border-top-right-radius: 16px;
-      }
-      &--bottom {
-        border-bottom-right-radius: 16px;
+  $horizontal: "left", "right";
+  $vertical: "top", "bottom";
+
+  @each $vPos in $vertical {
+    @each $hPos in $horizontal {
+      &--#{$vPos}-#{$hPos}-radius {
+        border-#{$vPos}-#{$hPos}-radius: 16px;
       }
     }
   }
@@ -242,33 +238,35 @@ $elements: (
 
 // Offset for content
 .q-layout {
-  & > .q-header ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+  & > .q-header ~ #{$contentSlot} {
     padding-top: var(--header-height);
   }
-  & > .q-footer ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+  & > .q-footer ~ #{$contentSlot} {
     padding-bottom: var(--footer-height);
   }
-  & > .q-drawer.active.left:not(.overlay) ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+
+  & > .q-drawer.q-drawer--active.q-drawer--left:not(.q-drawer--overlay) ~ #{$contentSlot} {
     padding-left: $L_Drawer;
   }
-  & > .q-drawer.active.right:not(.overlay) ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+  & > .q-drawer.q-drawer--active.q-drawer--right:not(.q-drawer--overlay) ~ #{$contentSlot} {
     padding-right: $R_Drawer;
   }
-  & > .q-railbar.left:not([style="display: none"]) {
-    & ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+
+  & > .q-railbar.q-railbar--left:not([style="display: none"]) {
+    & ~ #{$contentSlot} {
       padding-left: $L_Railbar;
     }
 
-    & ~ .q-drawer.active.left:not(.overlay) ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+    & ~ .q-drawer.q-drawer--active.q-drawer--left:not(.q-drawer--overlay) ~ #{$contentSlot} {
       padding-left: $L_Full;
     }
   }
-  & > .q-railbar.right:not([style="display: none"]) {
-    & ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+  & > .q-railbar.q-railbar--right:not([style="display: none"]) {
+    & ~ #{$contentSlot} {
       padding-right: $R_Railbar;
     }
 
-    & ~ .q-drawer.active.right:not(.overlay) ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
+    & ~ .q-drawer.q-drawer--active.q-drawer--right:not(.q-drawer--overlay) ~ #{$contentSlot} {
       padding-right: $R_Full;
     }
   }
@@ -277,31 +275,48 @@ $elements: (
 // Inline offset for header, footer and drawers
 .q-layout {
   @each $pos, $el in $elements {
-    & > .q-railbar.left:not([style="display: none"]) {
-      &:not(.offset-#{$pos}) ~ .q-#{$el},
-      & ~ .q-drawer.left {
+    & > .q-railbar.q-railbar--left:not([style="display: none"]) {
+      &:not(.q-railbar--offset-#{$pos}) ~ .q-#{$el},
+      & ~ .q-drawer.q-drawer--left {
         left: $L_Railbar;
       }
 
-      & ~ .q-drawer.active.left:not(.offset-#{$pos}, .overlay) ~ .q-#{$el} {
+      &
+        ~ .q-drawer.q-drawer--active.q-drawer--left:not(
+          .q-drawer--offset-#{$pos},
+          .q-drawer--overlay
+        )
+        ~ .q-#{$el} {
         left: $L_Full;
       }
     }
-    & > .q-railbar.right:not([style="display: none"]) {
-      &:not(.offset-#{$pos}) ~ .q-#{$el},
-      & ~ .q-drawer.right {
+    & > .q-railbar.q-railbar--right:not([style="display: none"]) {
+      &:not(.q-railbar--offset-#{$pos}) ~ .q-#{$el},
+      & ~ .q-drawer.q-drawer--right {
         right: $R_Railbar;
       }
 
-      & ~ .q-drawer.active.right:not(.offset-#{$pos}, .overlay) ~ .q-#{$el} {
+      &
+        ~ .q-drawer.q-drawer--active.q-drawer--right:not(
+          .q-drawer--offset-#{$pos},
+          .q-drawer--overlay
+        )
+        ~ .q-#{$el} {
         right: $R_Full;
       }
     }
 
-    & > .q-drawer.active.left:not(.offset-#{$pos}, .overlay) ~ .q-#{$el} {
+    &
+      > .q-drawer.q-drawer--active.q-drawer--left:not(.q-drawer--offset-#{$pos}, .q-drawer--overlay)
+      ~ .q-#{$el} {
       left: $L_Drawer;
     }
-    & > .q-drawer.active.right:not(.offset-#{$pos}, .overlay) ~ .q-#{$el} {
+    &
+      > .q-drawer.q-drawer--active.q-drawer--right:not(
+        .q-drawer--offset-#{$pos},
+        .q-drawer--overlay
+      )
+      ~ .q-#{$el} {
       right: $R_Drawer;
     }
   }
@@ -310,40 +325,40 @@ $elements: (
 // Width for header and footer
 .q-layout {
   @each $pos, $el in $elements {
-    & > .q-railbar.left:not(.offset-#{$pos}, [style="display: none"]) {
+    & > .q-railbar.q-railbar--left:not(.q-railbar--offset-#{$pos}, [style="display: none"]) {
       // Left railbar
       & ~ .q-#{$el} {
         width: without($L_Railbar);
       }
 
-      & ~ .q-drawer.active:not(.offset-#{$pos}, .overlay) {
+      & ~ .q-drawer.q-drawer--active:not(.q-drawer--offset-#{$pos}, .q-drawer--overlay) {
         @include include-drawers(without($L_Railbar), $pos, $el);
       }
 
-      & ~ .q-railbar.right:not(.offset-#{$pos}, [style="display: none"]) {
+      & ~ .q-railbar.q-railbar--right:not(.q-railbar--offset-#{$pos}, [style="display: none"]) {
         // Left railbar + Right railbar
         & ~ .q-#{$el} {
           width: without($LR_Railbar);
         }
 
-        & ~ .q-drawer.active:not(.offset-#{$pos}, .overlay) {
+        & ~ .q-drawer.q-drawer--active:not(.q-drawer--offset-#{$pos}, .q-drawer--overlay) {
           @include include-drawers(without($LR_Railbar), $pos, $el);
         }
       }
     }
 
-    & > .q-railbar.right:not(.offset-#{$pos}, [style="display: none"]) {
+    & > .q-railbar.q-railbar--right:not(.q-railbar--offset-#{$pos}, [style="display: none"]) {
       // Right railbar
       & ~ .q-#{$el} {
         width: without($R_Railbar);
       }
 
-      & ~ .q-drawer.active:not(.offset-#{$pos}, .overlay) {
+      & ~ .q-drawer.q-drawer--active:not(.q-drawer--offset-#{$pos}, .q-drawer--overlay) {
         @include include-drawers(without($R_Railbar), $pos, $el);
       }
     }
 
-    & > .q-drawer.active:not(.offset-#{$pos}, .overlay) {
+    & > .q-drawer.q-drawer--active:not(.q-drawer--offset-#{$pos}, .q-drawer--overlay) {
       @include include-drawers(100%, $pos, $el);
     }
   }
@@ -351,19 +366,21 @@ $elements: (
 
 // Height for railbars and drawers
 .q-layout {
-  & > .q-railbar,
-  & > .q-drawer {
-    &.offset-top.offset-bottom {
-      height: calc(100% - var(--header-height) - var(--footer-height));
+  $drawerTypes: ".q-railbar", ".q-drawer";
+
+  @each $drawerType in $drawerTypes {
+    & > #{$drawerType} {
+      &#{$drawerType}--offset-top#{$drawerType}--offset-bottom {
+        height: calc(100% - var(--header-height) - var(--footer-height));
+      }
     }
-  }
 
-  @each $pos, $el in $elements {
-    & > .q-railbar,
-    & > .q-drawer {
-      &.offset-#{$pos} {
-        #{$pos}: var(--#{$el}-height);
-        height: calc(100% - var(--#{$el}-height));
+    @each $pos, $el in $elements {
+      & > #{$drawerType} {
+        &#{$drawerType}--offset-#{$pos} {
+          #{$pos}: var(--#{$el}-height);
+          height: calc(100% - var(--#{$el}-height));
+        }
       }
     }
   }

package/dist/components/layout/props.d.ts

@@ -6,36 +6,36 @@ export interface QLayoutProps extends NativeProps {
      * See <a href="https://quasar.dev/layout/layout/#understanding-the-view-prop" target="_blank">Quasar's explanation on the view prop</a>.
      * @default "hhh lpr fff"
      */
-    view: QLayoutViewOptions;
+    view?: QLayoutViewOptions;
     /**
      * The height of the header. Can be specified with CSS units. If no unit is specified, "px" will be used.
      * @default 64px
      */
-    headerHeight: string | number;
+    headerHeight?: string | number;
     /**
      * The height of the footer. Can be specified with CSS units. If no unit is specified, "px" will be used.
      * @default 80px
      */
-    footerHeight: string | number;
+    footerHeight?: string | number;
     /**
      * The width of the left drawer. Can be specified with CSS units. If no unit is specified, "px" will be used.
      * @default 300px
      */
-    leftDrawerWidth: string | number;
+    leftDrawerWidth?: string | number;
     /**
      * The width of the right drawer. Can be specified with CSS units. If no unit is specified, "px" will be used.
      * @default 300px
      */
-    rightDrawerWidth: string | number;
+    rightDrawerWidth?: string | number;
     /**
      * The width of the left railbar. Can be specified with CSS units. If no unit is specified, "px" will be used.
      * @default 88px
      */
-    leftRailbarWidth: string | number;
+    leftRailbarWidth?: string | number;
     /**
      * The width of the right railbar. Can be specified with CSS units. If no unit is specified, "px" will be used.
      * @default 88px
      */
-    rightRailbarWidth: string | number;
+    rightRailbarWidth?: string | number;
 }
 export type QLayoutEvents = "resize" | "scroll" | "scrollHeight";

package/dist/components/list/QItem.svelte

@@ -26,7 +26,7 @@ $:
   isActive = isRouteActive($Quaff.router, to);
 $:
   classes = createClasses([
-    "q-item flex middle-align",
+    "q-item flex items-center",
     $hasMultiplLines && "multiline",
     dense && "dense",
     hasLink && active && "q-item--active",

package/dist/components/list/QItem.svelte.d.ts

@@ -1,13 +1,13 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QItemProps } from "./props";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        tag?: string | undefined;
-        active?: boolean | undefined;
-        clickable?: boolean | undefined;
-        dense?: boolean | undefined;
-        tabindex?: string | number | undefined;
+        tag?: QItemProps["tag"];
+        active?: QItemProps["active"];
+        clickable?: QItemProps["clickable"];
+        dense?: QItemProps["dense"];
+        tabindex?: QItemProps["tabindex"];
         href?: QItemProps["href"];
         to?: QItemProps["to"];
         disable?: boolean | undefined;
@@ -26,9 +26,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export type QItemProps = typeof __propDef.props;
+type QItemProps_ = typeof __propDef.props;
+export { QItemProps_ as QItemProps };
 export type QItemEvents = typeof __propDef.events;
 export type QItemSlots = typeof __propDef.slots;
-export default class QItem extends SvelteComponentTyped<QItemProps, QItemEvents, QItemSlots> {
+export default class QItem extends SvelteComponent<QItemProps, QItemEvents, QItemSlots> {
 }
-export {};

package/dist/components/list/QItemSection.svelte.d.ts

@@ -1,9 +1,9 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QItemSectionProps } from "./props";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        type?: import("./props").QItemSectionTypes | undefined;
+        type?: QItemSectionProps["type"];
         class?: string | undefined;
     };
     events: {
@@ -17,9 +17,9 @@ declare const __propDef: {
         line3: {};
     };
 };
-export type QItemSectionProps = typeof __propDef.props;
+type QItemSectionProps_ = typeof __propDef.props;
+export { QItemSectionProps_ as QItemSectionProps };
 export type QItemSectionEvents = typeof __propDef.events;
 export type QItemSectionSlots = typeof __propDef.slots;
-export default class QItemSection extends SvelteComponentTyped<QItemSectionProps, QItemSectionEvents, QItemSectionSlots> {
+export default class QItemSection extends SvelteComponent<QItemSectionProps, QItemSectionEvents, QItemSectionSlots> {
 }
-export {};

package/dist/components/list/QList.svelte.d.ts

@@ -1,21 +1,14 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QListProps } from "./props";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        bordered?: boolean | undefined;
-        roundedBorders?: boolean | undefined;
-        dense?: boolean | undefined;
-        separator?: boolean | undefined;
-        separatorOptions?: {
-            spacing?: "sm" | "md" | "lg" | "none" | undefined;
-            inset?: boolean | undefined;
-            color?: string | undefined;
-            size?: string | undefined;
-            text?: string | undefined;
-            textAlign?: "top" | "bottom" | "left" | "right" | "center" | "middle" | undefined;
-        } | undefined;
-        padding?: boolean | undefined;
+        bordered?: QListProps["bordered"];
+        roundedBorders?: QListProps["roundedBorders"];
+        dense?: QListProps["dense"];
+        separator?: QListProps["separator"];
+        separatorOptions?: QListProps["separatorOptions"];
+        padding?: QListProps["padding"];
         tag?: QListProps["tag"];
         class?: string | undefined;
     };
@@ -28,9 +21,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export type QListProps = typeof __propDef.props;
+type QListProps_ = typeof __propDef.props;
+export { QListProps_ as QListProps };
 export type QListEvents = typeof __propDef.events;
 export type QListSlots = typeof __propDef.slots;
-export default class QList extends SvelteComponentTyped<QListProps, QListEvents, QListSlots> {
+export default class QList extends SvelteComponent<QListProps, QListEvents, QListSlots> {
 }
-export {};

package/dist/components/list/docs.d.ts

@@ -0,0 +1,2 @@
+import type { QComponentDocs } from "../../utils/types";
+export declare let QListDocs: QComponentDocs;

package/dist/components/list/docs.js

@@ -0,0 +1,11 @@
+import { QListDocsProps } from "./docs.props";
+export let QListDocs = {
+    name: "QList",
+    description: "The QList component is used to display a list of items with options for adding text, icons and actions.",
+    docs: {
+        props: QListDocsProps,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};

package/dist/components/list/docs.props.js

@@ -149,7 +149,7 @@ export const QListDocsProps = [
     },
     {
         name: "separatorOptions",
-        type: 'QSeparatorProps["textAlign"]\r\n  };',
+        type: 'QSeparatorProps["textAlign"]\n  };',
         optional: false,
         clickableType: true,
         description: "",

package/dist/components/list/index.scss

@@ -24,7 +24,14 @@
 }
 
 .q-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  white-space: nowrap;
+  gap: 1rem;
+
   min-width: 100%;
+  max-width: 100%;
   min-height: 56px;
   margin-top: 0 !important;
   margin: 0;

package/dist/components/list/props.d.ts

@@ -2,11 +2,11 @@ import { type NativeProps } from "../../utils/types";
 import type { QSeparatorProps } from "../separator/props";
 import { type UseRouterLinkProps } from "../../composables/use-router-link";
 export interface QListProps extends NativeProps {
-    bordered: boolean;
-    roundedBorders: boolean;
-    dense: boolean;
-    separator: boolean;
-    separatorOptions: {
+    bordered?: boolean;
+    roundedBorders?: boolean;
+    dense?: boolean;
+    separator?: boolean;
+    separatorOptions?: {
         spacing?: QSeparatorProps["spacing"];
         inset?: QSeparatorProps["inset"];
         color?: QSeparatorProps["color"];
@@ -14,20 +14,20 @@ export interface QListProps extends NativeProps {
         text?: QSeparatorProps["text"];
         textAlign?: QSeparatorProps["textAlign"];
     };
-    padding: boolean;
+    padding?: boolean;
     tag?: string;
 }
 export declare const QListPropsDefaults: QListProps;
 export interface QItemProps extends UseRouterLinkProps, NativeProps {
-    tag: string;
-    active: boolean;
-    clickable: boolean;
-    dense: boolean;
-    tabindex: string | number;
+    tag?: string;
+    active?: boolean;
+    clickable?: boolean;
+    dense?: boolean;
+    tabindex?: string | number;
 }
 export declare const QItemPropsDefaults: QItemProps;
 export type QItemSectionTypes = "thumbnail" | "video" | "avatar" | "toggle" | "icon" | "trailingIcon" | "trailingText" | "content";
 export interface QItemSectionProps extends NativeProps {
-    type: QItemSectionTypes;
+    type?: QItemSectionTypes;
 }
 export declare const QItemSectionPropsDefaults: QItemSectionProps;

package/dist/components/private/ContextReseter.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         keys: string | string[];
@@ -13,6 +13,6 @@ declare const __propDef: {
 export type ContextReseterProps = typeof __propDef.props;
 export type ContextReseterEvents = typeof __propDef.events;
 export type ContextReseterSlots = typeof __propDef.slots;
-export default class ContextReseter extends SvelteComponentTyped<ContextReseterProps, ContextReseterEvents, ContextReseterSlots> {
+export default class ContextReseter extends SvelteComponent<ContextReseterProps, ContextReseterEvents, ContextReseterSlots> {
 }
 export {};