@quaffui/quaff 0.1.0-prealpha → 0.1.0-prealpha11

package/dist/components/header/QHeader.svelte

@@ -0,0 +1,28 @@
+<script>import { createClasses } from "../../utils/props";
+import { getContext } from "svelte";
+import QToolbar from "../toolbar/QToolbar.svelte";
+export let inset = false, elevate = false, border = false, userClasses = void 0, userStyles = void 0;
+export { userClasses as class, userStyles as style };
+let ctx = getContext("layout");
+$:
+  if ($ctx === void 0) {
+    console.warn("QHeader should be used inside QLayout");
+  }
+$:
+  classes = createClasses([$ctx?.header?.fixed && "fixed"], {
+    component: "q-header",
+    userClasses
+  });
+$:
+  if ($ctx?.header !== void 0) {
+    if (userStyles?.includes("display: none")) {
+      $ctx.header.display = false;
+    } else {
+      $ctx.header.display = true;
+    }
+  }
+</script>
+
+<QToolbar {inset} {elevate} {border} class={classes} role="header" {...$$restProps}>
+  <slot />
+</QToolbar>

package/dist/components/header/QHeader.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { QHeaderProps } from "./props";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        inset?: QHeaderProps["inset"];
+        elevate?: QHeaderProps["elevate"];
+        border?: QHeaderProps["border"];
+        class?: string | undefined;
+        style?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+type QHeaderProps_ = typeof __propDef.props;
+export { QHeaderProps_ as QHeaderProps };
+export type QHeaderEvents = typeof __propDef.events;
+export type QHeaderSlots = typeof __propDef.slots;
+export default class QHeader extends SvelteComponent<QHeaderProps, QHeaderEvents, QHeaderSlots> {
+}

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

@@ -0,0 +1,15 @@
+import type { NativeProps } from "../../utils/types";
+export interface QHeaderProps extends NativeProps {
+    /**
+     * @default false
+     */
+    inset?: boolean;
+    /**
+     * @default false
+     */
+    elevate?: boolean;
+    /**
+     * @default false
+     */
+    border?: boolean;
+}

package/dist/components/header/props.js

@@ -0,0 +1 @@
+export {};

package/dist/components/icon/QIcon.svelte

@@ -1,23 +1,21 @@
-<script>import useSize from "../../composables/use-size";
-import { createClasses, createStyles } from "../../utils/props";
+<script>import { createClasses, createStyles } from "../../utils/props";
 import { isNumber } from "../../utils/types";
-export let size = "md", name = void 0, type = "outlined", fill = false, svg = void 0, img = void 0, imgAttributes = {}, color = void 0, userClasses = void 0, userStyles = void 0;
+import { sizes } from "../../composables/use-size";
+import { useSize } from "../../composables/use-size";
+export let size = "md", name = void 0, type = "outlined", filled = false, svg = void 0, img = void 0, imgAttributes = {}, color = void 0, userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
 $:
-  sizeStyle = useSize(size) === null ? isNumber(size) ? `${size}px` : size : void 0;
+  sizeObj = useSize(size);
 $:
-  classes = createClasses([
-    "q-icon",
-    `q-icon__${type}`,
-    fill && "fill",
-    useSize(size),
-    color && `${color}-text`,
-    userClasses
-  ]);
+  classes = createClasses([type, filled && "filled", sizeObj.class], {
+    component: "q-icon",
+    userClasses,
+    quaffClasses: [color && `text-${color}`]
+  });
 $:
   style = createStyles(
     {
-      "---size": sizeStyle
+      "--size": sizeObj.style
     },
     userStyles
   );

package/dist/components/icon/QIcon.svelte.d.ts

@@ -1,14 +1,14 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QIconProps } from "./props";
 declare const __propDef: {
     props: {
-        size?: import("./props").QIconSizeOptions | undefined;
+        size?: QIconProps["size"];
         name?: QIconProps["name"];
-        type?: import("./props").QIconTypeOptions | undefined;
-        fill?: boolean | undefined;
+        type?: QIconProps["type"];
+        filled?: QIconProps["filled"];
         svg?: QIconProps["svg"];
         img?: QIconProps["img"];
-        imgAttributes?: Record<string, any> | undefined;
+        imgAttributes?: QIconProps["imgAttributes"];
         color?: QIconProps["color"];
         class?: string | undefined;
         style?: string | undefined;
@@ -20,9 +20,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export type QIconProps = typeof __propDef.props;
+type QIconProps_ = typeof __propDef.props;
+export { QIconProps_ as QIconProps };
 export type QIconEvents = typeof __propDef.events;
 export type QIconSlots = typeof __propDef.slots;
-export default class QIcon extends SvelteComponentTyped<QIconProps, QIconEvents, QIconSlots> {
+export default class QIcon extends SvelteComponent<QIconProps, QIconEvents, QIconSlots> {
 }
-export {};

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

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

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

@@ -24,7 +24,7 @@ export const QIconDocsProps = [
         default: "undefined",
     },
     {
-        name: "fill",
+        name: "filled",
         type: "boolean",
         optional: false,
         clickableType: false,

package/dist/components/icon/index.scss

@@ -1,18 +1,75 @@
-$icon-font: "Material Symbols Outlined";
-
 .q-icon {
+  --font: "Material Symbols Outlined";
+  --size: 1.5rem;
   overflow: visible;
-  font-family: $icon-font;
+  font-family: var(--font);
+  font-weight: normal;
+  font-style: normal;
+  font-size: var(--size);
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: "liga";
+  -webkit-font-smoothing: antialiased;
+  vertical-align: middle;
+  text-align: center;
+  overflow: hidden;
+  width: var(--size);
+  min-width: var(--size);
+  height: var(--size);
+  min-height: var(--size);
+  box-sizing: content-box;
+  line-height: normal;
 
   &--outlined {
-    $icon-font: "Material Symbols Outlined";
+    --font: "Material Symbols Outlined";
   }
 
   &--rounded {
-    $icon-font: "Material Symbols Rounded";
+    --font: "Material Symbols Rounded";
   }
 
   &--sharp {
-    $icon-font: "Material Symbols Sharp";
+    --font: "Material Symbols Sharp";
+  }
+
+  &--xs {
+    --size: 1rem;
+  }
+
+  &--sm {
+    --size: 1.25rem;
+  }
+
+  &--lg {
+    --size: 1.75rem;
+  }
+
+  &--xl {
+    --size: 2rem;
+  }
+
+  > :is(img, svg) {
+    width: 100%;
+    height: 100%;
+    background-size: 100%;
+    border-radius: inherit;
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: inherit;
+  }
+
+  &.filled
+  // we might need these selectors later:
+  // a.row:is(:hover, :focus) > i,
+  // .transparent:is(:hover, :focus) > i
+  {
+    font-variation-settings: "FILL" 1;
   }
 }

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

@@ -1,17 +1,17 @@
-import type { NativeProps } from "../../utils/types";
-export type QIconSizeOptions = "xs" | "sm" | "md" | "lg" | "xl" | string | number;
+import type { CssValue, NativeProps, QuaffSizes } from "../../utils/types";
+export type QIconSizeOptions = QuaffSizes | CssValue | number;
 export type QIconTypeOptions = "outlined" | "sharp" | "rounded";
 export interface QIconProps extends NativeProps {
     /**
      * The size of the icon. Can be specified with CSS units. If no unit is specified, "px" will be used.
      * @default md
      */
-    size: QIconSizeOptions;
+    size?: QIconSizeOptions;
     /**
      * The type of the icon.
      * @default outlined
      */
-    type: QIconTypeOptions;
+    type?: QIconTypeOptions;
     /**
      * The name of the Material Symbols icon.
      * @default undefined
@@ -21,7 +21,7 @@ export interface QIconProps extends NativeProps {
      * Determines whether the icon should be filled.
      * @default false
      */
-    fill: boolean;
+    filled?: boolean;
     /**
      * The SVG content for the icon.
      * @default undefined
@@ -36,7 +36,7 @@ export interface QIconProps extends NativeProps {
      * Additional attributes for the image element when using the `img` prop, as for example the "alt" attribute.
      * @default {}
      */
-    imgAttributes: Record<string, any>;
+    imgAttributes?: Record<string, any>;
     /**
      * The color of the icon.
      * @default undefined

package/dist/components/index.d.ts

@@ -9,6 +9,7 @@ import QCodeBlock from "./codeBlock/QCodeBlock.svelte";
 import QDialog from "./dialog/QDialog.svelte";
 import QDrawer from "./drawer/QDrawer.svelte";
 import QFooter from "./footer/QFooter.svelte";
+import QHeader from "./header/QHeader.svelte";
 import QIcon from "./icon/QIcon.svelte";
 import QInput from "./input/QInput.svelte";
 import QSelect from "./select/QSelect.svelte";
@@ -25,5 +26,6 @@ import QTab from "./tabs/QTab.svelte";
 import QTable from "./table/QTable.svelte";
 import QToggle from "./toggle/QToggle.svelte";
 import QToolbar from "./toolbar/QToolbar.svelte";
+import QToolbarTitle from "./toolbar/QToolbarTitle.svelte";
 import QTooltip from "./tooltip/QTooltip.svelte";
-export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCodeBlock, QDialog, QDrawer, QFooter, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QTooltip, };
+export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCodeBlock, QDialog, QDrawer, QFooter, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QToolbarTitle, QTooltip, };

package/dist/components/index.js

@@ -9,6 +9,7 @@ import QCodeBlock from "./codeBlock/QCodeBlock.svelte";
 import QDialog from "./dialog/QDialog.svelte";
 import QDrawer from "./drawer/QDrawer.svelte";
 import QFooter from "./footer/QFooter.svelte";
+import QHeader from "./header/QHeader.svelte";
 import QIcon from "./icon/QIcon.svelte";
 import QInput from "./input/QInput.svelte";
 import QSelect from "./select/QSelect.svelte";
@@ -25,5 +26,6 @@ import QTab from "./tabs/QTab.svelte";
 import QTable from "./table/QTable.svelte";
 import QToggle from "./toggle/QToggle.svelte";
 import QToolbar from "./toolbar/QToolbar.svelte";
+import QToolbarTitle from "./toolbar/QToolbarTitle.svelte";
 import QTooltip from "./tooltip/QTooltip.svelte";
-export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCodeBlock, QDialog, QDrawer, QFooter, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QTooltip, };
+export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCodeBlock, QDialog, QDrawer, QFooter, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QToolbarTitle, QTooltip, };

package/dist/components/input/QInput.svelte.d.ts

@@ -1,18 +1,18 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QInputProps } from "./props";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        bordered?: boolean | undefined;
+        bordered?: QInputProps["bordered"];
         dense?: QInputProps["dense"];
-        disable?: boolean | undefined;
-        error?: boolean | undefined;
+        disable?: QInputProps["disable"];
+        error?: QInputProps["error"];
         errorMessage?: QInputProps["errorMessage"];
-        filled?: boolean | undefined;
+        filled?: QInputProps["filled"];
         hint?: QInputProps["hint"];
         label?: QInputProps["label"];
-        outlined?: boolean | undefined;
-        rounded?: boolean | undefined;
+        outlined?: QInputProps["outlined"];
+        rounded?: QInputProps["rounded"];
         value: QInputProps["value"];
         class?: string | undefined;
     };
@@ -24,9 +24,9 @@ declare const __propDef: {
         append: {};
     };
 };
-export type QInputProps = typeof __propDef.props;
+type QInputProps_ = typeof __propDef.props;
+export { QInputProps_ as QInputProps };
 export type QInputEvents = typeof __propDef.events;
 export type QInputSlots = typeof __propDef.slots;
-export default class QInput extends SvelteComponentTyped<QInputProps, QInputEvents, QInputSlots> {
+export default class QInput extends SvelteComponent<QInputProps, QInputEvents, QInputSlots> {
 }
-export {};

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

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

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

@@ -1,15 +1,15 @@
-import type { NativeProps } from "$utils/types";
+import type { NativeProps } from "../../utils/types";
 export interface QInputProps extends NativeProps {
-    bordered: boolean;
+    bordered?: boolean;
     dense?: boolean;
-    disable: boolean;
-    error: boolean;
+    disable?: boolean;
+    error?: boolean;
     errorMessage?: string;
-    filled: boolean;
+    filled?: boolean;
     hint?: string;
     label?: string;
-    outlined: boolean;
-    rounded: boolean;
+    outlined?: boolean;
+    rounded?: boolean;
     value: string;
 }
 export declare const QInputPropsDefaults: {

package/dist/components/layout/QLayout.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 export interface DrawerContext {
     offset: {
         top: boolean;
@@ -23,13 +23,13 @@ import type { QLayoutProps } from "./props";
 import type { Readable } from "svelte/store";
 declare const __propDef: {
     props: {
-        view?: "lhh lpr lfr" | "lhh lpr lff" | "lhh lpr lFr" | "lhh lpr lFf" | "lhh lpr ffr" | "lhh lpr fff" | "lhh lpr fFr" | "lhh lpr fFf" | "lhh lpR lfr" | "lhh lpR lff" | "lhh lpR lFr" | "lhh lpR lFf" | "lhh lpR ffr" | "lhh lpR fff" | "lhh lpR fFr" | "lhh lpR fFf" | "lhh Lpr lfr" | "lhh Lpr lff" | "lhh Lpr lFr" | "lhh Lpr lFf" | "lhh Lpr ffr" | "lhh Lpr fff" | "lhh Lpr fFr" | "lhh Lpr fFf" | "lhh LpR lfr" | "lhh LpR lff" | "lhh LpR lFr" | "lhh LpR lFf" | "lhh LpR ffr" | "lhh LpR fff" | "lhh LpR fFr" | "lhh LpR fFf" | "lhr lpr lfr" | "lhr lpr lff" | "lhr lpr lFr" | "lhr lpr lFf" | "lhr lpr ffr" | "lhr lpr fff" | "lhr lpr fFr" | "lhr lpr fFf" | "lhr lpR lfr" | "lhr lpR lff" | "lhr lpR lFr" | "lhr lpR lFf" | "lhr lpR ffr" | "lhr lpR fff" | "lhr lpR fFr" | "lhr lpR fFf" | "lhr Lpr lfr" | "lhr Lpr lff" | "lhr Lpr lFr" | "lhr Lpr lFf" | "lhr Lpr ffr" | "lhr Lpr fff" | "lhr Lpr fFr" | "lhr Lpr fFf" | "lhr LpR lfr" | "lhr LpR lff" | "lhr LpR lFr" | "lhr LpR lFf" | "lhr LpR ffr" | "lhr LpR fff" | "lhr LpR fFr" | "lhr LpR fFf" | "lHh lpr lfr" | "lHh lpr lff" | "lHh lpr lFr" | "lHh lpr lFf" | "lHh lpr ffr" | "lHh lpr fff" | "lHh lpr fFr" | "lHh lpr fFf" | "lHh lpR lfr" | "lHh lpR lff" | "lHh lpR lFr" | "lHh lpR lFf" | "lHh lpR ffr" | "lHh lpR fff" | "lHh lpR fFr" | "lHh lpR fFf" | "lHh Lpr lfr" | "lHh Lpr lff" | "lHh Lpr lFr" | "lHh Lpr lFf" | "lHh Lpr ffr" | "lHh Lpr fff" | "lHh Lpr fFr" | "lHh Lpr fFf" | "lHh LpR lfr" | "lHh LpR lff" | "lHh LpR lFr" | "lHh LpR lFf" | "lHh LpR ffr" | "lHh LpR fff" | "lHh LpR fFr" | "lHh LpR fFf" | "lHr lpr lfr" | "lHr lpr lff" | "lHr lpr lFr" | "lHr lpr lFf" | "lHr lpr ffr" | "lHr lpr fff" | "lHr lpr fFr" | "lHr lpr fFf" | "lHr lpR lfr" | "lHr lpR lff" | "lHr lpR lFr" | "lHr lpR lFf" | "lHr lpR ffr" | "lHr lpR fff" | "lHr lpR fFr" | "lHr lpR fFf" | "lHr Lpr lfr" | "lHr Lpr lff" | "lHr Lpr lFr" | "lHr Lpr lFf" | "lHr Lpr ffr" | "lHr Lpr fff" | "lHr Lpr fFr" | "lHr Lpr fFf" | "lHr LpR lfr" | "lHr LpR lff" | "lHr LpR lFr" | "lHr LpR lFf" | "lHr LpR ffr" | "lHr LpR fff" | "lHr LpR fFr" | "lHr LpR fFf" | "hhh lpr lfr" | "hhh lpr lff" | "hhh lpr lFr" | "hhh lpr lFf" | "hhh lpr ffr" | "hhh lpr fff" | "hhh lpr fFr" | "hhh lpr fFf" | "hhh lpR lfr" | "hhh lpR lff" | "hhh lpR lFr" | "hhh lpR lFf" | "hhh lpR ffr" | "hhh lpR fff" | "hhh lpR fFr" | "hhh lpR fFf" | "hhh Lpr lfr" | "hhh Lpr lff" | "hhh Lpr lFr" | "hhh Lpr lFf" | "hhh Lpr ffr" | "hhh Lpr fff" | "hhh Lpr fFr" | "hhh Lpr fFf" | "hhh LpR lfr" | "hhh LpR lff" | "hhh LpR lFr" | "hhh LpR lFf" | "hhh LpR ffr" | "hhh LpR fff" | "hhh LpR fFr" | "hhh LpR fFf" | "hhr lpr lfr" | "hhr lpr lff" | "hhr lpr lFr" | "hhr lpr lFf" | "hhr lpr ffr" | "hhr lpr fff" | "hhr lpr fFr" | "hhr lpr fFf" | "hhr lpR lfr" | "hhr lpR lff" | "hhr lpR lFr" | "hhr lpR lFf" | "hhr lpR ffr" | "hhr lpR fff" | "hhr lpR fFr" | "hhr lpR fFf" | "hhr Lpr lfr" | "hhr Lpr lff" | "hhr Lpr lFr" | "hhr Lpr lFf" | "hhr Lpr ffr" | "hhr Lpr fff" | "hhr Lpr fFr" | "hhr Lpr fFf" | "hhr LpR lfr" | "hhr LpR lff" | "hhr LpR lFr" | "hhr LpR lFf" | "hhr LpR ffr" | "hhr LpR fff" | "hhr LpR fFr" | "hhr LpR fFf" | "hHh lpr lfr" | "hHh lpr lff" | "hHh lpr lFr" | "hHh lpr lFf" | "hHh lpr ffr" | "hHh lpr fff" | "hHh lpr fFr" | "hHh lpr fFf" | "hHh lpR lfr" | "hHh lpR lff" | "hHh lpR lFr" | "hHh lpR lFf" | "hHh lpR ffr" | "hHh lpR fff" | "hHh lpR fFr" | "hHh lpR fFf" | "hHh Lpr lfr" | "hHh Lpr lff" | "hHh Lpr lFr" | "hHh Lpr lFf" | "hHh Lpr ffr" | "hHh Lpr fff" | "hHh Lpr fFr" | "hHh Lpr fFf" | "hHh LpR lfr" | "hHh LpR lff" | "hHh LpR lFr" | "hHh LpR lFf" | "hHh LpR ffr" | "hHh LpR fff" | "hHh LpR fFr" | "hHh LpR fFf" | "hHr lpr lfr" | "hHr lpr lff" | "hHr lpr lFr" | "hHr lpr lFf" | "hHr lpr ffr" | "hHr lpr fff" | "hHr lpr fFr" | "hHr lpr fFf" | "hHr lpR lfr" | "hHr lpR lff" | "hHr lpR lFr" | "hHr lpR lFf" | "hHr lpR ffr" | "hHr lpR fff" | "hHr lpR fFr" | "hHr lpR fFf" | "hHr Lpr lfr" | "hHr Lpr lff" | "hHr Lpr lFr" | "hHr Lpr lFf" | "hHr Lpr ffr" | "hHr Lpr fff" | "hHr Lpr fFr" | "hHr Lpr fFf" | "hHr LpR lfr" | "hHr LpR lff" | "hHr LpR lFr" | "hHr LpR lFf" | "hHr LpR ffr" | "hHr LpR fff" | "hHr LpR fFr" | "hHr LpR fFf" | undefined;
-        headerHeight?: string | number | undefined;
-        footerHeight?: string | number | undefined;
-        leftDrawerWidth?: string | number | undefined;
-        rightDrawerWidth?: string | number | undefined;
-        leftRailbarWidth?: string | number | undefined;
-        rightRailbarWidth?: string | number | undefined;
+        view?: QLayoutProps["view"];
+        headerHeight?: QLayoutProps["headerHeight"];
+        footerHeight?: QLayoutProps["footerHeight"];
+        leftDrawerWidth?: QLayoutProps["leftDrawerWidth"];
+        rightDrawerWidth?: QLayoutProps["rightDrawerWidth"];
+        leftRailbarWidth?: QLayoutProps["leftRailbarWidth"];
+        rightRailbarWidth?: QLayoutProps["rightDrawerWidth"];
         class?: string | undefined;
         style?: string | undefined;
     };
@@ -49,9 +49,9 @@ declare const __propDef: {
         content: {};
     };
 };
-export type QLayoutProps = typeof __propDef.props;
+type QLayoutProps_ = typeof __propDef.props;
+export { QLayoutProps_ as QLayoutProps };
 export type QLayoutEvents = typeof __propDef.events;
 export type QLayoutSlots = typeof __propDef.slots;
-export default class QLayout extends SvelteComponentTyped<QLayoutProps, QLayoutEvents, QLayoutSlots> {
+export default class QLayout extends SvelteComponent<QLayoutProps, QLayoutEvents, QLayoutSlots> {
 }
-export {};

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

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