@quaffui/quaff 0.1.0-prealpha9 → 1.0.0-alpha2

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

@@ -1,156 +1,65 @@
-export const QBtnDocsProps = [
-    {
-        name: "disable",
-        type: "boolean",
-        optional: true,
-        clickableType: false,
-        description: "Puts the button in a disabled state, making it unclickable.",
-        default: "false",
-    },
-    {
-        name: "flat",
-        type: "boolean",
-        optional: true,
-        clickableType: false,
-        description: "Use flat design for the button, removing its elevation and background-color.",
-        default: "false",
-    },
-    {
-        name: "icon",
-        type: "string",
-        optional: true,
-        clickableType: false,
-        description: "Name of the leading icon to use for the button.",
-        default: "undefined",
-    },
-    {
-        name: "label",
-        type: "string",
-        optional: true,
-        clickableType: false,
-        description: "Text to use for the button.",
-        default: "undefined",
-    },
-    {
-        name: "loading",
-        type: "boolean",
-        optional: true,
-        clickableType: false,
-        description: "Puts the button in a loading state, adding a loader as the leading icon.",
-        default: "false",
-    },
-    {
-        name: "outline",
-        type: "boolean",
-        optional: true,
-        clickableType: false,
-        description: "Use outline design for the button, adding a border around it.",
-        default: "false",
-    },
-    {
-        name: "rectangle",
-        type: "boolean",
-        optional: true,
-        clickableType: false,
-        description: "Use rectangle design for the button, removing the large border-radius.",
-        default: "false",
-    },
-    {
-        name: "round",
-        type: "boolean",
-        optional: true,
-        clickableType: false,
-        description: "Use round design for the button, giving it a circular shape.",
-        default: "false",
-    },
-    {
-        name: "to",
-        type: "string",
-        optional: true,
-        clickableType: false,
-        description: 'Makes the button navigational. Can be used with the router (e.g to="/home") or as a normal href attribute (e.g to="#section-id").',
-        default: "undefined",
-    },
-    {
-        name: "unelevated",
-        type: "boolean",
-        optional: true,
-        clickableType: false,
-        description: "Removes the button's elevation.",
-        default: "false",
-    },
-    {
-        name: "size",
-        type: "QBtnSizeOptions",
-        optional: true,
-        clickableType: true,
-        description: "Size of the button.",
-        default: "md",
-    },
-];
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash c7e68dd893416b7e3508993a5828962d
 export const QDialogDocsProps = [
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "value",
-        type: "boolean",
-        optional: false,
-        clickableType: false,
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
         description: "The value indicating whether the dialog is visible or hidden.",
         default: "true",
     },
     {
-        name: "noBtn",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "Wether the dialog should have a trigger button or not.",
-        default: "false",
-    },
-    {
-        name: "btnContent",
-        type: "string",
-        optional: true,
-        clickableType: false,
-        description: "The content to be displayed on the dialog button.",
-        default: "undefined",
-    },
-    {
-        name: "btnAttrs",
-        type: "QBtnProps",
-        optional: true,
-        clickableType: false,
-        description: "Additional attributes for the dialog button.",
-        default: "{}",
-    },
-    {
+        isSnippet: false,
         name: "position",
-        type: "QDialogPositionOptions",
-        optional: true,
-        clickableType: true,
+        type: {
+            name: "QDialogPositionOptions",
+            isClickable: true,
+        },
         description: "The position of the dialog relative to the viewport.",
         default: '"default"',
     },
     {
-        name: "modal",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "modal",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
         description: "Determines whether the dialog is displayed as a modal or not.",
         default: "false",
     },
     {
-        name: "fullscreen",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "fullscreen",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
         description: "Determines whether the dialog is displayed in fullscreen mode.",
         default: "false",
     },
     {
-        name: "persistent",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "persistent",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
         description: "Determines whether the dialog remains persistent, not closing on click outside.",
         default: "false",
     },
 ];
+export const QDialogDocsSnippets = [];

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

@@ -1,27 +1,12 @@
-import type { NativeProps } from "../../utils/types";
-import type { QBtnProps } from "../button/props";
+import type { NativeProps } from "../../utils";
+import type { HTMLAttributes } from "svelte/elements";
 export type QDialogPositionOptions = "default" | "top" | "right" | "bottom" | "left";
-export interface QDialogProps extends NativeProps {
+export interface QDialogProps extends NativeProps, HTMLAttributes<HTMLDialogElement> {
     /**
      * The value indicating whether the dialog is visible or hidden.
      * @default true
      */
-    value: boolean;
-    /**
-     * Wether the dialog should have a trigger button or not.
-     * @default false
-     */
-    noBtn?: boolean;
-    /**
-     * The content to be displayed on the dialog button.
-     * @default undefined
-     */
-    btnContent?: string;
-    /**
-     * Additional attributes for the dialog button.
-     * @default {}
-     */
-    btnAttrs?: QBtnProps;
+    value?: boolean;
     /**
      * The position of the dialog relative to the viewport.
      * @default "default"

package/dist/components/drawer/QDrawer.scss

@@ -0,0 +1,55 @@
+@use "$css/mixins";
+@use "$css/variables";
+
+.q-drawer {
+  z-index: 4;
+  position: absolute;
+  top: 0;
+  right: auto;
+  bottom: 0;
+  left: auto;
+
+  height: auto;
+  @include mixins.padding("a-sm");
+
+  background-color: var(--surface);
+  color: var(--on-surface);
+
+  overflow: auto;
+
+  &.q-drawer--overlay {
+    z-index: 6;
+  }
+
+  &__swipearea {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 2;
+
+    touch-action: none;
+  }
+
+  @each $side in ("left", "right") {
+    &.q-drawer--#{$side} {
+      #{$side}: 0;
+      width: var(--#{$side}-drawer-width);
+      transform: translate(if($side == "left", -100%, 100%));
+    }
+
+    &:not(.q-drawer--#{$side}).q-drawer--bordered {
+      @include mixins.border(var(--outline), $side);
+    }
+  }
+
+  &.q-drawer--active {
+    transform: translate(0);
+  }
+}
+
+@each $side in ("left", "right") {
+  .q-drawer__swipearea--#{$side} {
+    #{$side}: 0;
+    width: 1.25rem;
+  }
+}