@quaffui/quaff 0.1.0-prealpha8 → 1.0.0-alpha1

package/dist/components/list/QList.scss

@@ -0,0 +1,30 @@
+@use "$css/mixins";
+
+.q-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+
+  &--bordered {
+    @include mixins.border;
+  }
+
+  &--rounded {
+    border-radius: 0.25rem;
+  }
+
+  &--dense {
+    min-height: 2rem;
+    padding-block: 0;
+
+    & > .q-item {
+      min-height: 2rem;
+    }
+  }
+
+  & > .q-separator__wrapper:first-child {
+    display: none !important;
+  }
+}

package/dist/components/list/QList.svelte

@@ -1,23 +1,46 @@
-<script>import { setIndex } from "../../composables/use-index";
-import { createClasses } from "../../utils/props";
-import { onMount, setContext } from "svelte";
-export let bordered = false, roundedBorders = false, dense = false, separator = false, separatorOptions = {}, padding = false, tag = "div", userClasses = void 0;
-export { userClasses as class };
-let listElement;
-onMount(() => listElement.querySelector(".q-separator__wrapper:first-child")?.remove());
-$:
-  setContext("separator", separator === true ? separatorOptions : void 0);
-$:
-  classes = createClasses([
-    "q-list",
-    bordered && "border",
-    dense && "dense",
-    padding && "q-py-sm",
-    roundedBorders && "rounded-borders",
-    userClasses
-  ]);
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { QListCtxName } from "../../utils";
+  import type { QListProps } from "./props";
+
+  let {
+    bordered = false,
+    roundedBorders = false,
+    dense = false,
+    separator = false,
+    separatorOptions = {},
+    padding = false,
+    tag = "div",
+    activeClass,
+    children,
+    ...props
+  }: QListProps = $props();
+
+  setContext(QListCtxName.activeClass, () => activeClass);
+  setContext(QListCtxName.separator, separator ? separatorOptions : undefined);
+
+  let listEl: HTMLElement;
+
+  $effect(() => {
+    listEl.querySelector(".q-separator__wrapper:first-child")?.remove();
+  });
 </script>
 
-<svelte:element this={tag} class={classes} {...$$restProps} bind:this={listElement} on:scroll>
-  <slot />
+<svelte:element
+  this={tag}
+  bind:this={listEl}
+  {...props}
+  class={[
+    "q-list",
+    padding && "q-py-sm",
+    "flex",
+    "flex-center",
+    props.class,
+    bordered && "q-list--bordered",
+    dense && "q-list--dense",
+    roundedBorders && "q-list--rounded",
+  ]}
+  data-quaff
+>
+  {@render children?.()}
 </svelte:element>

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

@@ -1,36 +1,14 @@
-import { SvelteComponent } from "svelte";
-import type { QListProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 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;
-        tag?: QListProps["tag"];
-        class?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
-        scroll: Event;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 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 SvelteComponent<QListProps, QListEvents, QListSlots> {
+export default class QList extends SvelteComponentTyped<QListProps_, QListEvents, QListSlots> {
 }

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

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

package/dist/components/list/docs.js

@@ -1,10 +1,30 @@
-import { QListDocsProps } from "./docs.props";
-export let QListDocs = {
+import { QItemDocsProps, QItemDocsSnippets, QItemSectionDocsProps, QItemSectionDocsSnippets, QListDocsProps, QListDocsSnippets, } from "./docs.props";
+export const 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: [],
+        snippets: QListDocsSnippets,
+        methods: [],
+        events: [],
+    },
+};
+export const QItemDocs = {
+    name: "QItem",
+    description: "The QItem component is generally used inside lists to display related pieces of information.",
+    docs: {
+        props: QItemDocsProps,
+        snippets: QItemDocsSnippets,
+        methods: [],
+        events: [],
+    },
+};
+export const QItemSectionDocs = {
+    name: "QItemSection",
+    description: "The QItemSection component is used inside QItem to separate different types of information.",
+    docs: {
+        props: QItemSectionDocsProps,
+        snippets: QItemSectionDocsSnippets,
         methods: [],
         events: [],
     },

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

@@ -1,40 +1,11 @@
-export declare const QSeparatorPropsVertical: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
-export declare const QSeparatorPropsHorizontal: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
-export declare const QListDocsProps: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
-export declare const QItemDocsProps: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
-export declare const QItemSectionDocsProps: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
+import { ParsedProp, ParsedSnippet } from "../../../../docgen/props/parseInterface";
+export declare const QSeparatorVerticalDocsProps: ParsedProp[];
+export declare const QSeparatorVerticalDocsSnippets: ParsedSnippet[];
+export declare const QSeparatorHorizontalDocsProps: ParsedProp[];
+export declare const QSeparatorHorizontalDocsSnippets: ParsedSnippet[];
+export declare const QListDocsProps: ParsedProp[];
+export declare const QListDocsSnippets: ParsedSnippet[];
+export declare const QItemDocsProps: ParsedProp[];
+export declare const QItemDocsSnippets: ParsedSnippet[];
+export declare const QItemSectionDocsProps: ParsedProp[];
+export declare const QItemSectionDocsSnippets: ParsedSnippet[];