@quaffui/quaff 0.1.0-prealpha6 → 0.1.0-prealpha7

package/dist/components/private/QDocs.svelte

@@ -7,28 +7,32 @@ $:
 let principalDocument = Array.isArray(QComponentDocs) ? QComponentDocs[0] : QComponentDocs;
 </script>
 
-<div style="margin: 1rem">
-  <div class="grid" style="min-height: 400px">
-    <QCard class="s12 l6 flex center-align" fill="primary">
+<div class="q-docs" style="margin: 1rem">
+  <div class="row q-gutter-lg q-mb-lg" style="min-height: 400px">
+    <QCard class="col-sm-12 col-lg-6 flex flex-center" fill="primary" style="min-height: 400px">
       <h1 class="large no-margin" slot="title">{principalDocument.name}</h1>
     </QCard>
-    <QCard class="s12 l6 q-mt-none q-pa-none" fill="secondary">
-      <QCardSection class="no-padding">
+    <QCard
+      class="q-docs__preview col-sm-12 col-lg-6 q-mt-none q-pa-none"
+      fill="secondary"
+      style="min-height: 400px"
+    >
+      <QCardSection class="q-pa-none">
         <div
-          class="flex center-align middle-align"
+          class="flex flex-center"
           style="position: absolute; height: 100%; width: 100%; z-index: 1;"
         >
           <slot name="display" />
         </div>
         <img
-          class="responsive medium"
+          class="q-docs__image"
           src="/beer-splash-{isDark ? 'dark' : 'light'}.jpg"
           alt="Close-up of the content of a glass of beer"
           style={isDark ? "filter:brightness(0.3)" : ""}
         />
       </QCardSection>
-      <QCardSection class="flex center-align middle-align">
-        <h3 class="small">
+      <QCardSection class="q-docs__description flex flex-center">
+        <h3 class="q-docs__description-text">
           {principalDocument.description}
         </h3>
       </QCardSection>
@@ -50,7 +54,31 @@ let principalDocument = Array.isArray(QComponentDocs) ? QComponentDocs[0] : QCom
   <slot />
 </div>
 
-<style>.prop-type {
+<style>.q-docs :global(.q-pa-none) {
+  padding: 0 !important;
+}
+.q-docs__image {
+  width: 100%;
+  height: 12rem;
+  object-fit: cover;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.q-docs :global(.q-docs__preview) {
+  display: flex !important;
+  flex-direction: column;
+}
+.q-docs :global(.q-docs__description) {
+  display: flex;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+}
+.q-docs :global(.q-docs__description-text) {
+  font-size: 1.75rem;
+}
+
+.prop-type {
   opacity: 0.75;
 }
 .prop-type.clickable {

package/dist/components/private/QDocsSection.svelte

@@ -8,13 +8,13 @@
 </script>
 
 <div style="margin-bottom:48px">
-  <div class="flex between-align q-mb-md">
+  <div class="flex justify-between q-mb-md">
     <h5>{title}</h5>
     {#if snippets}
       <QDialog
         class="snippet-dialog"
         bind:value={dialog}
-        btnAttrs={{ outline: true, icon: "code", class: "circle" }}
+        btnAttrs={{ outline: true, round: true, icon: "code" }}
         on:btnClick={() => (dialog = true)}
         modal
       >

package/dist/components/progress/QLinearProgress.svelte

@@ -6,9 +6,15 @@ $:
     borderRadius: rounded ? "12px" : "0"
   };
 $:
-  containerClasses = createClasses(["small-space", "border", userClasses]);
+  containerClasses = createClasses(["small-space", "border"], {
+    component: "q-linear-progress",
+    userClasses
+  });
 $:
-  progressClasses = createClasses(["progress", from]);
+  progressClasses = createClasses([from], {
+    component: "q-linear-progress",
+    element: "progress"
+  });
 $:
   containerStyle = createStyles(roundedStyle, userStyles);
 $:

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

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

package/dist/components/progress/docs.js

@@ -0,0 +1,11 @@
+import { QLinearProgressDocsProps } from "./docs.props";
+export let QProgressDocs = {
+    name: "QProgress",
+    description: "The QProgress component is used to display a progress bar, indicating the completion status of a task or process.",
+    docs: {
+        props: QLinearProgressDocsProps,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};

package/dist/components/progress/docs.props.d.ts

@@ -6,3 +6,11 @@ export declare const QLinearProgressDocsProps: {
     description: string;
     default: string;
 }[];
+export declare const QCircularProgressDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];

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

@@ -24,3 +24,45 @@ export const QLinearProgressDocsProps = [
         default: "",
     },
 ];
+export const QCircularProgressDocsProps = [
+    {
+        name: "value",
+        type: "number",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "indeterminate",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "size",
+        type: "string | number",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "color",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "thickness",
+        type: "number",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+];

package/dist/components/progress/index.scss

@@ -1,4 +1,19 @@
 // Linear progress
+.q-linear-progress {
+  height: 1rem;
+  @include border;
+
+  &__progress {
+    position: absolute;
+    background-color: var(--active);
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    transition: var(--speed4) clip-path;
+    clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
+  }
+}
 
 // Circular progress
 .q-circular-progress {

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

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

package/dist/components/railbar/docs.js

@@ -0,0 +1,11 @@
+import { QRailbarDocsProps } from "./docs.props";
+export let QRailbarDocs = {
+    name: "QRailbar",
+    description: "Railbars are used to provide navigation between different sections or views within an application.",
+    docs: {
+        props: QRailbarDocsProps,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};

package/dist/components/select/QSelect.svelte

@@ -1,4 +1,5 @@
-<script>import { onDestroy, onMount } from "svelte";
+<script>import QIcon from "../icon/QIcon.svelte";
+import { onDestroy, onMount } from "svelte";
 import { createClasses } from "../../utils/props";
 import { textWidth } from "../../utils/fields";
 import { browser } from "$app/environment";
@@ -129,9 +130,10 @@ onDestroy(() => {
     disabled={disable}
   />
 
-  <i class="q-select__arrow-toggle" class:q-select__arrow-toggle--has-append={$$slots.append}
-    >{`arrow_drop_${isMenuOpen ? "up" : "down"}`}</i
-  >
+  <QIcon
+    class="q-select__arrow-toggle {$$slots.append ? 'q-select__arrow-toggle--has-append' : ''}"
+    name={`arrow_drop_${isMenuOpen ? "up" : "down"}`}
+  />
 
   <slot name="append" />
 

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

@@ -1,9 +1,9 @@
 export const QSelectDocsProps = [
     {
         name: "value",
-        type: "string | string[]",
+        type: "string | string[] | number | number[]",
         optional: false,
-        clickableType: false,
+        clickableType: true,
         description: "",
         default: "",
     },

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

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

package/dist/components/separator/docs.js

@@ -0,0 +1,11 @@
+import { QSeparatorPropsVertical } from "./docs.props";
+export let QSeparatorDocs = {
+    name: "QSeparator",
+    description: "Separators can be used to create a dividing line or space between elements within a layout, offering visual separation and organization.",
+    docs: {
+        props: QSeparatorPropsVertical,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};

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

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

package/dist/components/tabs/docs.js

@@ -0,0 +1,11 @@
+import { QTabsDocsProps } from "./docs.props";
+export let QTabsDocs = {
+    name: "QTabs",
+    description: "Tabs allow creating navigational tabs, enabling users to switch between different views or functional aspects.",
+    docs: {
+        props: QTabsDocsProps,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};

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

@@ -8,10 +8,10 @@ export const QTabsDocsProps = [
         default: "",
     },
     {
-        name: "vertical",
-        type: "boolean",
+        name: "variant",
+        type: "QTabsVariants",
         optional: false,
-        clickableType: false,
+        clickableType: true,
         description: "",
         default: "",
     },
@@ -23,14 +23,6 @@ export const QTabsDocsProps = [
         description: "",
         default: "",
     },
-    {
-        name: "smallIndicator",
-        type: "boolean",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
-    },
 ];
 export const QTabDocsProps = [
     {

package/dist/components/toolbar/QToolbarTitle.svelte

@@ -0,0 +1,10 @@
+<script>import { createClasses } from "../../utils/props";
+export let shrink = false, userClasses = void 0, userStyles = void 0;
+export { userClasses as class, userStyles as style };
+$:
+  classes = createClasses([shrink && "shrink", userClasses], { component: "q-toolbar-title" });
+</script>
+
+<div class={classes} {...$$restProps} style={userStyles}>
+  <slot />
+</div>

package/dist/components/toolbar/QToolbarTitle.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { QToolbarTitleProps } from "./props";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        shrink?: boolean | undefined;
+        class?: string | undefined;
+        style?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+type QToolbarTitleProps_ = typeof __propDef.props;
+export { QToolbarTitleProps_ as QToolbarTitleProps };
+export type QToolbarTitleEvents = typeof __propDef.events;
+export type QToolbarTitleSlots = typeof __propDef.slots;
+export default class QToolbarTitle extends SvelteComponent<QToolbarTitleProps, QToolbarTitleEvents, QToolbarTitleSlots> {
+}

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

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

package/dist/components/toolbar/docs.js

@@ -0,0 +1,11 @@
+import { QToolbarDocsProps } from "./docs.props";
+export let QToolbarDocs = {
+    name: "QToolbar",
+    description: "The Toolbar component is used to hold common actions and controls, often located at the top of an application or view.",
+    docs: {
+        props: QToolbarDocsProps,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};

package/dist/components/toolbar/docs.props.d.ts

@@ -6,3 +6,11 @@ export declare const QToolbarDocsProps: {
     description: string;
     default: string;
 }[];
+export declare const QToolbarTitleDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];

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

@@ -16,3 +16,13 @@ export const QToolbarDocsProps = [
         default: "",
     },
 ];
+export const QToolbarTitleDocsProps = [
+    {
+        name: "shrink",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+];

package/dist/components/toolbar/index.scss

@@ -1,7 +1,34 @@
 .q-toolbar {
   width: 100%;
+  padding: 0 1rem;
   transition: all var(--speed3);
+  background-color: var(--surface);
+
+  nav {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    white-space: nowrap;
+    gap: 1rem;
+
+    > * {
+      margin: 0;
+    }
+  }
+
   &--inset {
     padding-left: 58px;
   }
 }
+
+.q-toolbar-title {
+  display: flex;
+  flex: auto;
+  font-size: 1.75rem;
+  font-weight: 400;
+  justify-content: center;
+
+  &--shrink {
+    flex: unset;
+  }
+}

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

@@ -4,3 +4,7 @@ export interface QToolbarProps extends NativeProps {
     height: string | number;
 }
 export declare const QToolbarPropsDefaults: QToolbarProps;
+export interface QToolbarTitleProps extends NativeProps {
+    shrink: boolean;
+}
+export declare const QToolbarTitlePropsDefaults: QToolbarTitleProps;

package/dist/components/toolbar/props.js

@@ -4,3 +4,7 @@ export const QToolbarPropsDefaults = {
     height: "64px",
     ...NativePropsDefaults,
 };
+export const QToolbarTitlePropsDefaults = {
+    shrink: false,
+    ...NativePropsDefaults,
+};

package/dist/components/tooltip/QTooltip.svelte

@@ -2,12 +2,10 @@
 export let value = void 0, position = "bottom", userClasses = "";
 export { userClasses as class };
 $:
-  classes = createClasses([
-    "q-tooltip tooltip",
-    value !== false && "active",
-    position,
+  classes = createClasses([value && "active", position || "top"], {
+    component: "q-tooltip",
     userClasses
-  ]);
+  });
 </script>
 
 <div class={classes} {...$$restProps}>

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

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

package/dist/components/tooltip/docs.js

@@ -0,0 +1,11 @@
+import { QTooltipDocsProps } from "./docs.props";
+export let QTooltipDocs = {
+    name: "QTooltip",
+    description: "The Tooltip component displays informative text on hover or focus, providing additional context.",
+    docs: {
+        props: QTooltipDocsProps,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};

package/dist/components/tooltip/index.scss

@@ -1,7 +1,82 @@
 .q-tooltip {
+  --space: -0.5rem;
+  visibility: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  background-color: var(--inverse-surface);
+  color: var(--inverse-on-surface);
+  font-size: 0.75rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  bottom: auto;
+  right: auto;
+  transform: translate(-50%, -100%) scale(0.9);
+  width: auto;
+  white-space: nowrap;
+  font-weight: 500;
+  opacity: 0;
+  transition: var(--speed2) all;
   z-index: 9999;
+
+  &--top {
+    margin-top: var(--space) !important;
+  }
+
+  &--right {
+    right: 0;
+    top: 50%;
+    bottom: auto;
+    left: auto;
+    transform: translate(100%, -50%) scale(0.9);
+    margin-right: var(--space) !important;
+  }
+
+  &--bottom {
+    bottom: 0;
+    left: 50%;
+    top: auto;
+    right: auto;
+    transform: translate(-50%, 100%) scale(0.9);
+    margin-bottom: var(--space) !important;
+  }
+
+  &--left {
+    margin-left: var(--space) !important;
+
+    left: 0;
+    top: 50%;
+    bottom: auto;
+    right: auto;
+    transform: translate(-100%, -50%) scale(0.9);
+  }
 }
 
-:hover > .q-tooltip.tooltip:not(.active) {
-  opacity: 0;
+// Not easily integratable into the block above due to the :hover
+:hover > .q-tooltip,
+.q-tooltip--active {
+  visibility: visible;
+  opacity: 1;
+
+  &.q-tooltip {
+    &--top {
+      transform: translate(-50%, -100%) scale(1);
+    }
+    &--left {
+      transform: translate(-100%, -50%) scale(1);
+    }
+
+    &--right {
+      transform: translate(100%, -50%) scale(1);
+    }
+
+    &--bottom {
+      transform: translate(-50%, 100%) scale(1);
+    }
+  }
 }

package/dist/composables/use-align.js

@@ -1,12 +1,23 @@
 export const UseAlignPropsDefaults = {
     align: "top left",
 };
+const alignMap = {
+    left: "start",
+    center: "center",
+    right: "end",
+    between: "between",
+    around: "around",
+    evenly: "evenly",
+    // @todo - justify-stretch isn't possible
+    stretch: "stretch",
+};
 export default function useAlign(align = "top left") {
-    const alignClass = align
+    const alignments = align
         .split(" ")
-        .map((a) => `${a}-align`)
-        .join(" ");
-    return ["between", "around", "evenly", "stretch"].some((alignment) => align.split(" ").includes(alignment))
-        ? `flex ${alignClass}`
-        : `${alignClass}`;
+        .map((entry) => {
+        const val = alignMap[entry];
+        return val ? `justify-${val}` : false;
+    })
+        .filter((entry) => typeof entry === "string");
+    return ["flex", ...alignments].join(" ");
 }

package/dist/composables/use-size.d.ts

@@ -1,9 +1,7 @@
+export type Size = "xs" | "sm" | "md" | "lg" | "xl";
+export declare const sizes: Size[];
 export declare const useSizeClasses: {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
+    [key in Size]: string;
 };
 export interface useSizeProps {
     size?: string;

package/dist/composables/use-size.js

@@ -1,3 +1,5 @@
+export const sizes = ["xs", "sm", "md", "lg", "xl"];
+// @todo change classes or deprecate
 export const useSizeClasses = {
     xs: "tiny",
     sm: "small",

package/dist/css/flex.scss

@@ -0,0 +1,41 @@
+.flex {
+  display: flex !important;
+  flex-wrap: wrap;
+}
+
+.column {
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+.justify-evenly {
+  justify-content: space-evenly;
+}
+
+.flex-center {
+  @extend .items-center;
+  @extend .justify-center;
+}

package/dist/css/fonts.scss

@@ -0,0 +1,4 @@
+@import "@fontsource/roboto";
+@import "@fontsource/material-symbols-outlined";
+@import "@fontsource/material-symbols-rounded";
+@import "@fontsource/material-symbols-sharp";