@quaffui/quaff 0.1.0-prealpha12 → 0.1.0-prealpha15

package/dist/utils/types.d.ts

@@ -3,7 +3,7 @@ export interface NativeProps {
     userStyles?: string | null;
 }
 export declare const NativePropsDefaults: NativeProps;
-export type QuaffSizes = "xs" | "sm" | "md" | "lg" | "xl";
+export type QuaffSizes = "none" | "xs" | "sm" | "md" | "lg" | "xl";
 export type CssUnit = "px" | "%" | "em" | "ex" | "ch" | "rem" | "vw" | "vh" | "vmin" | "vmax";
 export type CssValue = `${number}${CssUnit}`;
 export interface QComponentDocs {

package/dist/utils/types.json

@@ -1 +1,24 @@
-{"QAvatarShapeOptions":"type QAvatarShapeOptions =\n  | \"circle\"\n  | \"rounded\"\n  | \"top-round\"\n  | \"left-round\"\n  | \"right-round\"\n  | \"bottom-round\"\n  | \"top-left-round\"\n  | \"top-right-round\"\n  | \"bottom-left-round\"\n  | \"bottom-right-round\"","QAvatarSizeOptions":"type QAvatarSizeOptions = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | string","QBreadcrumbsGutterOptions":"type QBreadcrumbsGutterOptions = \"none\" | \"sm\" | \"md\" | \"lg\"","QLayoutEvents":"type QLayoutEvents = \"resize\" | \"scroll\" | \"scrollHeight\"","QSelectOption":"type QSelectOption = string | { label: string, value: string }","QItemSectionTypes":"type QItemSectionTypes =\n  | \"thumbnail\"\n  | \"video\"\n  | \"avatar\"\n  | \"toggle\"\n  | \"icon\"\n  | \"trailingIcon\"\n  | \"trailingText\"\n  | \"content\"","QBtnSizeOptions":"type QBtnSizeOptions = \"sm\" | \"md\" | \"lg\" | \"xl\"","QDialogPositionOptions":"type QDialogPositionOptions = \"default\" | \"top\" | \"right\" | \"bottom\" | \"left\"","QDrawerSideOptions":"type QDrawerSideOptions = \"left\" | \"right\"","QDrawerBehaviorOptions":"type QDrawerBehaviorOptions = \"default\" | \"desktop\" | \"mobile\"","QIconSizeOptions":"type QIconSizeOptions = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | string | number","QIconTypeOptions":"type QIconTypeOptions = \"outlined\" | \"sharp\" | \"rounded\"","QLayoutViewOptions":"type QLayoutViewOptions = `${\"l\"|\"h\"}${\"h\"|\"H\"}${\"r\"|\"h\"} ${\"l\"|\"L\"}${\"p\"}${\"r\"|\"R\"} ${\"l\"|\"f\"}${\"f\"|\"F\"}${\"r\"|\"f\"}`","QTableColumn":"type QTableColumn = {\n  name: string\n  required?: boolean;\n  label: string;\n  align?: \"left\" | \"center\" | \"right\";\n  field: string | ((row: QTableRow) => string);\n  format?: (val: string) => string;\n  sortable?: boolean;\n  sort?: (a: string, b: string) => number;\n};","QTableRow":"type QTableRow = {\n  [key: string]: string | number\n};","QTableSort":"type QTableSort = {\n  columnField: string | ((row: QTableRow) => string)\n  type: \"asc\" | \"desc\";\n} | null;","QCardFillColors":"type QCardFillColors = \"primary\" | \"secondary\" | \"tertiary\"","QChipSizeOptions":"type QChipSizeOptions = \"sm\" | \"md\" | \"lg\"","QTabsVariants":"type QTabsVariants = \"primary\" | \"secondary\" | \"vertical\""}
+{
+  "QAvatarShapeOptions": "type QAvatarShapeOptions =\n  | \"circle\"\n  | \"rounded\"\n  | \"top-round\"\n  | \"left-round\"\n  | \"right-round\"\n  | \"bottom-round\"\n  | \"top-left-round\"\n  | \"top-right-round\"\n  | \"bottom-left-round\"\n  | \"bottom-right-round\"",
+  "QAvatarSizeOptions": "type QAvatarSizeOptions = QuaffSizes | CssValue | number",
+  "QBreadcrumbsGutterOptions": "type QBreadcrumbsGutterOptions = \"none\" | \"sm\" | \"md\" | \"lg\"",
+  "QBtnSizeOptions": "type QBtnSizeOptions = Exclude<QuaffSizes, \"xs\">",
+  "QCardFillColors": "type QCardFillColors = \"primary\" | \"secondary\" | \"tertiary\"",
+  "QChipSizeOptions": "type QChipSizeOptions = Exclude<QuaffSizes, \"xs\" | \"xl\">",
+  "QDialogPositionOptions": "type QDialogPositionOptions = \"default\" | \"top\" | \"right\" | \"bottom\" | \"left\"",
+  "QDrawerBehaviorOptions": "type QDrawerBehaviorOptions = \"default\" | \"desktop\" | \"mobile\"",
+  "QDrawerSideOptions": "type QDrawerSideOptions = \"left\" | \"right\"",
+  "QIconSizeOptions": "type QIconSizeOptions = QuaffSizes | CssValue | number",
+  "QIconTypeOptions": "type QIconTypeOptions = \"outlined\" | \"sharp\" | \"rounded\"",
+  "QItemSectionTypes": "type QItemSectionTypes =\n  | \"thumbnail\"\n  | \"video\"\n  | \"avatar\"\n  | \"toggle\"\n  | \"icon\"\n  | \"trailingIcon\"\n  | \"trailingText\"\n  | \"content\"",
+  "QLayoutEvents": "type QLayoutEvents = \"resize\" | \"scroll\" | \"scrollHeight\"",
+  "QLayoutViewOptions": "type QLayoutViewOptions = `${\"l\"|\"h\"}${\"h\"|\"H\"}${\"r\"|\"h\"} ${\"l\"|\"L\"}${\"p\"}${\"r\"|\"R\"} ${\"l\"|\"f\"}${\"f\"|\"F\"}${\"r\"|\"f\"}`",
+  "QSelectMultipleValue": "type QSelectMultipleValue = QSelectSingleValue[]",
+  "QSelectOption": "type QSelectOption = string | { label: string, value: string }",
+  "QSelectSingleValue": "type QSelectSingleValue = string | number",
+  "QSelectValue": "type QSelectValue = QSelectSingleValue | QSelectMultipleValue",
+  "QTableColumn": "type QTableColumn = {\n  name: string\n  required?: boolean;\n  label: string;\n  align?: \"left\" | \"center\" | \"right\";\n  field: string | ((row: QTableRow) => string);\n  format?: (val: string) => string;\n  sortable?: boolean;\n  sort?: (a: string, b: string) => number;\n};",
+  "QTableRow": "type QTableRow = {\n  [key: string]: string | number\n};",
+  "QTableSort": "type QTableSort = {\n  columnField: string | ((row: QTableRow) => string)\n  type: \"asc\" | \"desc\";\n} | null;",
+  "QTabsVariants": "type QTabsVariants = \"primary\" | \"secondary\" | \"vertical\""
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quaffui/quaff",
-  "version": "0.1.0-prealpha12",
+  "version": "0.1.0-prealpha15",
   "scripts": {
     "dev": "vite dev",
     "open": "vite dev --open",
@@ -14,7 +14,7 @@
     "test:unit": "vitest",
     "lint": "prettier --plugin-search-dir . --check . && eslint .",
     "format": "prettier --plugin-search-dir . --write .",
-    "docgen": "ts-node-esm docgen/props/run.ts",
+    "docgen": "NODE_OPTIONS='--loader ts-node/esm/transpile-only --no-warnings' node docgen/props/run.ts",
     "snippet": "ts-node-esm docgen/snippets/parseSnippets.ts"
   },
   "exports": {
@@ -33,38 +33,37 @@
     "svelte": "^4.0.0"
   },
   "devDependencies": {
-    "@fontsource/material-symbols-outlined": "^5.0.6",
-    "@fontsource/material-symbols-rounded": "^5.0.6",
-    "@fontsource/material-symbols-sharp": "^5.0.6",
-    "@fontsource/roboto": "^5.0.7",
+    "@fontsource/material-symbols-outlined": "^5.0.7",
+    "@fontsource/material-symbols-rounded": "^5.0.7",
+    "@fontsource/material-symbols-sharp": "^5.0.7",
+    "@fontsource/roboto": "^5.0.8",
     "@sveltejs/adapter-auto": "^2.1.0",
-    "@sveltejs/kit": "^1.22.4",
-    "@sveltejs/package": "^2.2.0",
-    "@types/node": "^20.4.6",
+    "@sveltejs/kit": "^1.24.1",
+    "@sveltejs/package": "^2.2.2",
+    "@types/node": "^20.6.0",
     "@types/prettier": "^2.7.3",
     "@types/prismjs": "^1.26.0",
-    "@typescript-eslint/eslint-plugin": "^6.2.1",
-    "@typescript-eslint/parser": "^6.2.1",
-    "eslint": "^8.46.0",
-    "eslint-config-prettier": "^8.9.0",
-    "eslint-plugin-svelte": "^2.32.4",
-    "prettier": "^3.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.6.0",
+    "@typescript-eslint/parser": "^6.6.0",
+    "eslint": "^8.49.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-svelte": "^2.33.1",
+    "prettier": "^3.0.3",
     "prettier-plugin-svelte": "^3.0.3",
-    "publint": "^0.2.0",
-    "sass": "^1.64.2",
-    "svelte": "^4.1.2",
-    "svelte-check": "^3.4.6",
+    "publint": "^0.2.2",
+    "sass": "^1.66.1",
+    "svelte": "^4.2.0",
+    "svelte-check": "^3.5.1",
     "ts-node": "^10.9.1",
-    "tslib": "^2.6.1",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.8",
-    "vitest": "^0.34.1"
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vitest": "^0.34.4"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
   "dependencies": {
-    "beercss": "^3.2.13",
     "highlight.js": "^11.8.0",
     "material-dynamic-colors": "^1.0.1",
     "svelte-highlight": "^7.3.0"

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

@@ -1,2 +0,0 @@
-export declare function setIndex(index: number): number;
-export declare function getIndex(): number | undefined;

package/dist/composables/use-index.js

@@ -1,17 +0,0 @@
-import { getContext, hasContext, setContext } from "svelte";
-export function setIndex(index) {
-    setContext("index", {
-        index: () => {
-            index++;
-            return index;
-        },
-    });
-    return index;
-}
-export function getIndex() {
-    if (!hasContext("index")) {
-        return undefined;
-    }
-    const { index } = getContext("index");
-    return index();
-}

package/dist/css/mixins/field.scss

@@ -1,432 +0,0 @@
-@mixin field {
-  $root: &;
-  $label: #{$root}__label;
-  $labelActive: #{$root}__label--active;
-
-  height: 3rem;
-  margin-bottom: 2rem;
-  border-radius: 0.25rem;
-
-  &--sm,
-  &--dense {
-    height: 2.5rem;
-  }
-
-  &--lg {
-    height: 3.5rem;
-  }
-
-  &--xl {
-    height: 4rem;
-  }
-
-  &:not(&--has-border) {
-    border-radius: 0.25rem 0.25rem 0 0;
-  }
-
-  &--rounded#{$root}--sm,
-  &--rounded#{$root}--dense {
-    border-radius: 1.25rem;
-  }
-
-  &--rounded {
-    border-radius: 1.5rem;
-  }
-
-  &--rounded#{$root}--lg {
-    border-radius: 1.75rem;
-  }
-
-  &--rounded#{$root}--xl {
-    border-radius: 2rem;
-  }
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: inherit;
-    background-color: inherit;
-  }
-
-  &--filled::before {
-    background-color: var(--surface-variant);
-    color: var(--on-surface-variant);
-  }
-
-  & > :is(i, img, svg, .loader) {
-    position: absolute;
-    top: 50%;
-    left: auto;
-    right: 1rem;
-    transform: translateY(-50%);
-    cursor: pointer;
-    z-index: 0;
-  }
-
-  &--bordered,
-  &--filled,
-  &--rounded {
-    > :is(i, img, svg, .loader) {
-      left: auto;
-      right: 1rem;
-    }
-  }
-
-  > :is(i, img, svg, .loader):first-child {
-    left: 1rem;
-    right: auto;
-  }
-
-  &--bordered,
-  &--rounded,
-  &--outlined,
-  &--filled {
-    > :is(i, img, svg, .loader):first-child {
-      left: 1rem;
-      right: auto;
-    }
-  }
-
-  &--error > i {
-    color: var(--error);
-  }
-
-  > .loader {
-    border-width: 0.1875rem;
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-
-  /* input, textarea and select */
-  > select,
-  input[type^="date"],
-  input[type^="time"],
-  input[type="search"] {
-    appearance: none;
-    cursor: pointer;
-  }
-
-  input[type^="date"]::-webkit-inner-spin-button,
-  input[type^="date"]::-webkit-calendar-picker-indicator,
-  input[type^="time"]::-webkit-inner-spin-button,
-  input[type^="time"]::-webkit-calendar-picker-indicator {
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    cursor: pointer;
-  }
-
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button,
-  input[type="number"] {
-    appearance: none;
-    -moz-appearance: textfield;
-  }
-
-  input[type="file"] {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 2;
-    opacity: 0;
-    cursor: pointer;
-  }
-
-  input[type="search"]::-webkit-search-decoration,
-  input[type="search"]::-webkit-search-cancel-button,
-  input[type="search"]::-webkit-search-results-button,
-  input[type="search"]::-webkit-search-results-decoration {
-    display: none;
-  }
-
-  > :is(input, textarea, select) {
-    border: 0.0625rem solid transparent;
-    padding: 0 0.9375rem;
-    font-family: inherit;
-    font-size: 1rem;
-    width: 100%;
-    height: 100%;
-    outline: none;
-    z-index: 1;
-    background: none;
-    resize: none;
-  }
-
-  > :is(input, textarea, select):focus {
-    border: 0.125rem solid transparent;
-    padding: 0 0.875rem;
-  }
-
-  &--has-border {
-    > :is(input, textarea, select) {
-      border-color: var(--outline);
-    }
-
-    > :is(input, textarea, select):focus {
-      border-color: var(--primary);
-    }
-  }
-
-  &--rounded {
-    > :is(input, textarea, select) {
-      padding-left: 1.4376rem;
-      padding-right: 1.4376rem;
-    }
-
-    > :is(input, textarea, select):focus {
-      padding-left: 1.375rem;
-      padding-right: 1.375rem;
-    }
-  }
-
-  &--prepend {
-    > :is(input, textarea, select) {
-      padding-left: 2.9375rem;
-    }
-    > .slider {
-      margin-left: 3.5rem;
-    }
-    > :is(input, textarea, select):focus {
-      padding-left: 2.875rem;
-    }
-  }
-
-  &--append {
-    > :is(input, textarea, select) {
-      padding-right: 2.9375rem;
-    }
-    > .slider {
-      margin-right: 3.5rem;
-    }
-
-    > :is(input, textarea, select):focus {
-      padding-right: 2.875rem;
-    }
-  }
-
-  &:not(&--has-border, &--rounded) > :is(input, textarea, select) {
-    border-bottom-color: var(--outline);
-
-    &:focus {
-      border-bottom-color: var(--primary);
-    }
-  }
-
-  &--rounded {
-    &:not(#{$root}--has-border, #{$root}--fill) > :is(input, textarea, select),
-    &:not(#{$root}--has-border) > :is(input, textarea, select):focus {
-      box-shadow: var(--elevate1);
-    }
-
-    &:not(#{$root}--has-border, #{$root}--fill) > :is(input, textarea, select):focus {
-      box-shadow: var(--elevate2);
-    }
-  }
-
-  &-error:not(&--has-border, &--rounded) > :is(input, textarea, select),
-  &-error:not(&--has-border, &--rounded) > :is(input, textarea, select):focus {
-    border-bottom-color: var(--error);
-  }
-
-  &-error#{$root}--has-border > :is(input, textarea, select),
-  &-error#{$root}--has-border > :is(input, textarea, select):focus {
-    border-color: var(--error);
-  }
-
-  & > :disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &--sm.textarea,
-  &--dense.textarea {
-    height: 4.5rem;
-  }
-
-  &.textarea {
-    height: 5.5rem;
-  }
-
-  &--lg.textarea {
-    height: 6.5rem;
-  }
-
-  &--xl.textarea {
-    height: 7.5rem;
-  }
-
-  & > select > option {
-    background-color: var(--surface);
-    color: var(--on-surface);
-  }
-
-  &--label {
-    & > input,
-    & > select {
-      &,
-      &:focus {
-        padding-top: 1rem;
-      }
-    }
-
-    > textarea {
-      padding-top: 1.375rem;
-    }
-
-    > #{$label} {
-      position: absolute;
-      top: 50%;
-      left: 1rem;
-      font-size: 1rem;
-      transform: translateY(-50%);
-      transition:
-        var(--speed2) all,
-        0s background-color;
-      z-index: 0;
-    }
-  }
-
-  &--label#{$root}--sm > textarea {
-    padding-top: 1.125rem;
-  }
-
-  &--label#{$root}--lg > textarea {
-    padding-top: 1.625rem;
-  }
-
-  &--label#{$root}--xl > textarea {
-    padding-top: 1.875rem;
-  }
-
-  &--label#{$root}--has-border:not(&--filled) > :is(input, select) {
-    padding-top: 0;
-  }
-
-  &--sm:not(&--label) > textarea,
-  &--sm#{$root}--has-border:not(&--filled) > textarea {
-    padding-top: 0.625rem;
-  }
-
-  &:not(&--label) > textarea,
-  &--has-border:not(&--filled) > textarea {
-    padding-top: 0.875rem;
-  }
-
-  &--lg:not(&--label) > textarea,
-  &--lg#{$root}--has-border:not(&--filled) > textarea {
-    padding-top: 1.125rem;
-  }
-
-  &--xl:not(&--label) > textarea,
-  &--xl#{$root}--has-border:not(&--filled) > textarea {
-    padding-top: 1.375rem;
-  }
-
-  &--label#{$root}--sm.textarea > #{$label} {
-    top: 1.25rem;
-  }
-
-  &--label.textarea > #{$label} {
-    top: 1.5rem;
-  }
-
-  &--label#{$root}--lg.textarea > #{$label} {
-    top: 1.75rem;
-  }
-
-  &--label#{$root}--xl.textarea > #{$label} {
-    top: 2rem;
-  }
-
-  &--label#{$root}--rounded > #{$label} {
-    left: 1.5rem;
-  }
-
-  &--label#{$root}--prepend > #{$label} {
-    left: 3rem;
-  }
-
-  &--label > #{$label}#{$labelActive},
-  &--label > [placeholder]:focus ~ #{$label},
-  &--label > [placeholder]:not(:placeholder-shown) ~ #{$label} {
-    font-size: 0.75rem;
-    transform: translateY(-120%);
-    z-index: 1;
-  }
-
-  &--label#{$root}--has-border:not(&--filled) > #{$label}#{$labelActive},
-  &--label#{$root}--has-border:not(&--filled) > [placeholder]:focus ~ #{$label},
-  &--label#{$root}--has-border:not(&--filled) > [placeholder]:not(:placeholder-shown) ~ #{$label} {
-    font-size: 0.75rem;
-    top: 0%;
-    left: 1rem;
-    transform: translateY(-50%);
-    z-index: 1;
-  }
-
-  &--label#{$root}--has-border#{$root}--rounded:not(&--filled) > #{$label}#{$labelActive},
-  &--label#{$root}--has-border#{$root}--rounded:not(&--filled) > [placeholder]:focus ~ #{$label},
-  &--label#{$root}--has-border#{$root}--rounded:not(&--filled)
-    > [placeholder]:not(:placeholder-shown)
-    ~ #{$label} {
-    left: 1.5rem;
-    z-index: 1;
-  }
-
-  &--label > :focus ~ #{$label} {
-    color: var(--primary);
-  }
-
-  &--error > #{$label} {
-    color: var(--error) !important;
-  }
-
-  & > #{$label}.required::after,
-  &.required > #{$label}::after {
-    content: " * ";
-  }
-
-  &__helper,
-  &__error {
-    position: absolute;
-    left: 1rem;
-    bottom: 0;
-    transform: translateY(100%);
-    font-size: 0.75rem;
-    background: none !important;
-    padding-top: 0.125rem;
-  }
-
-  &__helper {
-    &a {
-      color: var(--primary);
-    }
-  }
-
-  &__error {
-    color: var(--error) !important;
-  }
-
-  &--rounded {
-    #{$root}__helper,
-    #{$root}__error {
-      left: 1.5rem;
-    }
-  }
-
-  &--error > &__helper {
-    display: none;
-  }
-}

package/dist/helpers/activationHandler.d.ts

@@ -1,9 +0,0 @@
-type Event = MouseEvent | KeyboardEvent;
-interface Options {
-    disable: boolean | undefined;
-    callback: (e: Event) => void;
-}
-export declare function activationHandler(node: HTMLElement, { disable, callback }: Options): {
-    destroy(): void;
-};
-export {};

package/dist/helpers/activationHandler.js

@@ -1,23 +0,0 @@
-export function activationHandler(node, { disable, callback }) {
-    function handleEvent(event) {
-        if (disable) {
-            event.preventDefault();
-            event.stopPropagation();
-            return;
-        }
-        if (event instanceof KeyboardEvent) {
-            if (!["Enter", "Space"].includes(event.code))
-                return;
-        }
-        event.preventDefault();
-        callback(event);
-    }
-    node.addEventListener("click", handleEvent);
-    node.addEventListener("keydown", handleEvent);
-    return {
-        destroy() {
-            node.removeEventListener("click", handleEvent);
-            node.removeEventListener("keydown", handleEvent);
-        },
-    };
-}

package/dist/utils/fields.d.ts

@@ -1 +0,0 @@
-export declare function textWidth(element: HTMLElement, font: string): number;

package/dist/utils/fields.js

@@ -1,14 +0,0 @@
-export function textWidth(element, font) {
-    if (element.offsetWidth > 0)
-        return element.offsetWidth;
-    let _canvas = document.querySelector("canvas[data-quaff]")?.getContext("2d");
-    if (!_canvas) {
-        const canvasElement = document.createElement("canvas");
-        canvasElement.style.display = "none";
-        canvasElement.setAttribute("data-quaff", "");
-        document.body.append(canvasElement);
-        _canvas = canvasElement.getContext("2d");
-    }
-    _canvas.font = font;
-    return _canvas.measureText(element.textContent).width;
-}