@quaffui/quaff 0.1.0-prealpha

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

@@ -0,0 +1,226 @@
+export const QSeparatorPropsVertical = [
+    {
+        name: "spacing",
+        type: '"none" | "sm" | "md" | "lg"',
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "inset",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "vertical",
+        type: "true",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "color",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "size",
+        type: "string",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "text",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "textAlign",
+        type: '"top" | "middle" | "bottom"',
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+];
+export const QSeparatorPropsHorizontal = [
+    {
+        name: "spacing",
+        type: '"none" | "sm" | "md" | "lg"',
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "inset",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "vertical",
+        type: "false",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "color",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "size",
+        type: "string",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "text",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "textAlign",
+        type: '"left" | "center" | "right"',
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+];
+export const QListDocsProps = [
+    {
+        name: "bordered",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "roundedBorders",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "dense",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "separator",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "separatorOptions",
+        type: 'QSeparatorProps["textAlign"]\r\n  };',
+        optional: false,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "padding",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "tag",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+];
+export const QItemDocsProps = [
+    {
+        name: "tag",
+        type: "string",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "active",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "clickable",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "dense",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "tabindex",
+        type: "string | number",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+];
+export const QItemSectionDocsProps = [
+    {
+        name: "type",
+        type: "QItemSectionTypes",
+        optional: false,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+];

package/dist/components/list/index.scss

@@ -0,0 +1,114 @@
+.q-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+
+  &.rounded-borders {
+    border-radius: 0.25rem;
+  }
+
+  &.dense {
+    min-height: 32px;
+    padding-block: 0;
+
+    & > .q-item {
+      min-height: 32px;
+    }
+  }
+
+  & > .q-separator__wrapper:first-child {
+    display: none !important;
+  }
+}
+
+.q-item {
+  min-width: 100%;
+  min-height: 56px;
+  margin-top: 0 !important;
+  margin: 0;
+  padding: 8px 24px 8px 16px;
+  gap: 16px;
+
+  & .q-avatar {
+    height: 40px;
+    width: 40px;
+  }
+
+  &.wave {
+    padding: 8px 24px 8px 16px;
+
+    &.multiline {
+      padding-block: 12px;
+    }
+
+    &::after {
+      background-image: radial-gradient(circle, rgb(150 150 150 / 0.2) 1%, transparent 1%);
+    }
+  }
+
+  &.multiline {
+    padding-block: 12px;
+
+    &
+      > :is(
+        .q-item__section--avatar,
+        .q-item__section--icon,
+        .q-item__section--thumbnail,
+        .q-item__section--trailingIcon,
+        .q-item__section--trailingText
+      ) {
+      align-self: start;
+    }
+
+    & > .q-item__section--video {
+      margin-left: -16px !important;
+      padding-block: 0;
+    }
+  }
+}
+
+.q-item__section {
+  display: flex;
+
+  &--video {
+    margin-left: -8px;
+    padding-block: 4px;
+
+    & video {
+      width: 114px;
+      height: 64px;
+      object-fit: cover;
+      object-position: center;
+    }
+  }
+
+  &--avatar {
+    height: 40px;
+    width: 40px;
+  }
+  &--icon {
+    height: 24px;
+    width: 24px;
+  }
+
+  &--thumbnail img {
+    width: 56px;
+    height: 56px;
+    object-fit: cover;
+    object-position: center;
+  }
+
+  &--content {
+    flex-direction: column;
+    flex: 10000 1 0;
+    justify-content: center;
+    align-items: start;
+  }
+
+  &--toggle {
+    height: 24px;
+    width: 52px;
+  }
+}

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

@@ -0,0 +1,33 @@
+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: {
+        spacing?: QSeparatorProps["spacing"];
+        inset?: QSeparatorProps["inset"];
+        color?: QSeparatorProps["color"];
+        size?: QSeparatorProps["size"];
+        text?: QSeparatorProps["text"];
+        textAlign?: QSeparatorProps["textAlign"];
+    };
+    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;
+}
+export declare const QItemPropsDefaults: QItemProps;
+export type QItemSectionTypes = "thumbnail" | "video" | "avatar" | "toggle" | "icon" | "trailingIcon" | "trailingText" | "content";
+export interface QItemSectionProps extends NativeProps {
+    type: QItemSectionTypes;
+}
+export declare const QItemSectionPropsDefaults: QItemSectionProps;

package/dist/components/list/props.js

@@ -0,0 +1,25 @@
+import { NativePropsDefaults } from "../../utils/types";
+import { UseRouterLinkPropsDefaults, } from "../../composables/use-router-link";
+export const QListPropsDefaults = {
+    bordered: false,
+    roundedBorders: false,
+    dense: false,
+    separator: false,
+    separatorOptions: {},
+    padding: false,
+    tag: "div",
+    ...NativePropsDefaults,
+};
+export const QItemPropsDefaults = {
+    tag: "div",
+    active: false,
+    clickable: false,
+    dense: false,
+    tabindex: 0,
+    ...UseRouterLinkPropsDefaults,
+    ...NativePropsDefaults,
+};
+export const QItemSectionPropsDefaults = {
+    type: "content",
+    ...NativePropsDefaults,
+};

package/dist/components/private/ContextReseter.svelte

@@ -0,0 +1,13 @@
+<script>import { setContext } from "svelte";
+export let keys;
+$:
+  if (Array.isArray(keys)) {
+    for (let key of keys) {
+      setContext(key, void 0);
+    }
+  } else {
+    setContext(keys, void 0);
+  }
+</script>
+
+<slot />

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        keys: string | string[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+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 {};

package/dist/components/private/QApi.svelte

@@ -0,0 +1,142 @@
+<script>import { capitalize } from "../../utils/string";
+import {
+  QCard,
+  QIcon,
+  QTabs,
+  QTab,
+  QCardSection,
+  QList,
+  QItem,
+  QItemSection,
+  QDrawer,
+  QCodeBlock
+} from "../..";
+import Types from "$utils/types.json";
+export let QComponentDocs;
+let api = QComponentDocs.map((_doc) => "props");
+let drawer = Object.fromEntries(
+  QComponentDocs.map((doc) => [
+    doc.name,
+    Object.fromEntries(
+      doc.docs.props.map((prop) => [prop.name, prop.clickableType ? false : void 0])
+    )
+  ])
+);
+let drawerContent = "";
+function isProp(doc, index) {
+  return api[index] === "props";
+}
+function isEvent(doc, index) {
+  return api[index] === "events";
+}
+function getType(type) {
+  type = type.replace("[]", "");
+  let found = type in Types ? Types[type] : void 0;
+  return found;
+}
+function handleDrawer(QDocument, doc) {
+  let content = getType(doc.type);
+  if (!drawer[QDocument.name][doc.name]) {
+    drawerContent = content;
+    drawer[QDocument.name][doc.name] = true;
+  } else {
+    if (content !== drawerContent) {
+      drawer[QDocument.name][doc.name] = false;
+      setTimeout(() => {
+        drawerContent = content;
+        drawer[QDocument.name][doc.name] = true;
+      }, 250);
+    } else {
+      drawer[QDocument.name][doc.name] = false;
+    }
+  }
+}
+</script>
+
+{#each QComponentDocs as QDocument, index}
+  <QCard class="q-px-none q-pb-none">
+    <div slot="title" class="flex between-align middle-align q-px-md">
+      <h5 class="no-margin">
+        <QIcon name="info" />
+        <span class="q-ml-md">{QDocument.name} API</span>
+      </h5>
+      <QTabs bind:value={api[index]} class="no-margin">
+        {#each Object.entries(QDocument.docs) as [tabName, _tabDoc]}
+          {#if _tabDoc.length !== 0}
+            <QTab name={tabName} style="min-width: 100px">
+              <h6>{capitalize(tabName)}</h6>
+            </QTab>
+          {/if}
+        {/each}
+      </QTabs>
+    </div>
+    <QCardSection style="max-height: 416px; overflow-y: scroll">
+      <QList separator bordered style="overflow:hidden">
+        {#each QDocument.docs[api[index]] as doc}
+          <QItem style="overflow: visible">
+            {#if isProp(doc, index) && doc.clickableType}
+              <QDrawer
+                side="right"
+                class="no-padding"
+                style="height: fit-content; max-height: 400%; overflow: auto; border-radius: 0;"
+                bind:value={drawer[QDocument.name][doc.name]}
+                width="50%"
+              >
+                <QCodeBlock language="ts" code={drawerContent} />
+              </QDrawer>
+            {/if}
+            <QItemSection type="content" style="overflow: visible">
+              <div slot="headline" class="q-my-sm" style="flex: 1 1 0; white-space: nowrap">
+                <span class=" small-padding surface-variant small-round">
+                  <b>{doc.name}</b>
+                  {#if isProp(doc, index)}
+                    {doc.optional ? "?" : ""}
+                    {#if doc.clickableType === true}
+                      <!-- svelte-ignore a11y-click-events-have-key-events -->
+                      <span
+                        class="prop-type clickable"
+                        on:click={() => isProp(doc, index) && handleDrawer(QDocument, doc)}
+                      >
+                        : {doc.type}
+                      </span>
+                    {:else}
+                      <span class="prop-type">
+                        : {doc.type}
+                      </span>
+                    {/if}
+                    {doc.default === "" ? "" : ` = ${doc.default}`}
+                  {:else if isEvent(doc, index)}
+                    <span class="prop-type">
+                      : {doc.type}
+                    </span>
+                  {/if}
+                </span>
+              </div>
+              <div slot="line1" class="q-mt-sm prop-description">{@html doc.description}</div>
+            </QItemSection>
+          </QItem>
+        {/each}
+      </QList>
+    </QCardSection>
+  </QCard>
+{/each}
+
+<style>.clickable {
+  cursor: pointer;
+}
+.clickable:hover {
+  color: var(--primary);
+}
+
+.q-item {
+  overflow: visible;
+}
+pre[class*=language-] {
+  margin: 0;
+  padding: 1em;
+  border-radius: inherit;
+}
+
+:global(.prop-description > a:hover) {
+  color: var(--primary);
+}</style>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { QComponentDocs } from "../../utils/types";
+declare const __propDef: {
+    props: {
+        QComponentDocs: QComponentDocs[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type QApiProps = typeof __propDef.props;
+export type QApiEvents = typeof __propDef.events;
+export type QApiSlots = typeof __propDef.slots;
+export default class QApi extends SvelteComponentTyped<QApiProps, QApiEvents, QApiSlots> {
+}
+export {};

package/dist/components/private/QDocs.svelte

@@ -0,0 +1,66 @@
+<script>import { QCard, QCardSection } from "../..";
+import { Quaff } from "../../stores/Quaff";
+import QApi from "./QApi.svelte";
+export let QComponentDocs;
+$:
+  isDark = $Quaff.dark.isActive;
+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">
+      <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">
+        <div
+          class="flex center-align middle-align"
+          style="position: absolute; height: 100%; width: 100%; z-index: 1;"
+        >
+          <slot name="display" />
+        </div>
+        <img
+          class="responsive medium"
+          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">
+          {principalDocument.description}
+        </h3>
+      </QCardSection>
+    </QCard>
+  </div>
+
+  <QApi QComponentDocs={Array.isArray(QComponentDocs) ? QComponentDocs : [QComponentDocs]} />
+
+  {#if $$slots.usage}
+    <div class="s12 q-pa-md">
+      <div class="heading-usage">
+        <h4 class="q-my-xl">Usage</h4>
+      </div>
+
+      <slot name="usage" />
+    </div>
+  {/if}
+
+  <slot />
+</div>
+
+<style>.prop-type {
+  opacity: 0.75;
+}
+.prop-type.clickable {
+  cursor: pointer;
+}
+.prop-type.clickable:hover {
+  opacity: 1;
+}
+
+.heading-usage {
+  display: flex;
+  align-items: center;
+}</style>

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { QComponentDocs } from "$utils/types";
+declare const __propDef: {
+    props: {
+        QComponentDocs: QComponentDocs | QComponentDocs[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        display: {};
+        usage: {};
+        default: {};
+    };
+};
+export type QDocsProps = typeof __propDef.props;
+export type QDocsEvents = typeof __propDef.events;
+export type QDocsSlots = typeof __propDef.slots;
+export default class QDocs extends SvelteComponentTyped<QDocsProps, QDocsEvents, QDocsSlots> {
+}
+export {};