@quaffui/quaff 0.1.0-prealpha12 → 0.1.0-prealpha14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (173) hide show
  1. package/dist/components/avatar/QAvatar.svelte +2 -2
  2. package/dist/components/avatar/docs.d.ts +1 -1
  3. package/dist/components/avatar/props.d.ts +1 -1
  4. package/dist/components/breadcrumbs/QBreadcrumbs.svelte +1 -1
  5. package/dist/components/breadcrumbs/QBreadcrumbsEl.svelte +5 -5
  6. package/dist/components/breadcrumbs/docs.d.ts +1 -1
  7. package/dist/components/breadcrumbs/props.d.ts +1 -1
  8. package/dist/components/button/QBtn.svelte +12 -8
  9. package/dist/components/button/docs.d.ts +1 -1
  10. package/dist/components/button/docs.props.js +16 -0
  11. package/dist/components/button/props.d.ts +1 -1
  12. package/dist/components/card/QCard.svelte +2 -2
  13. package/dist/components/card/QCardActions.svelte +2 -2
  14. package/dist/components/card/QCardSection.svelte +1 -1
  15. package/dist/components/card/docs.d.ts +1 -1
  16. package/dist/components/card/docs.props.js +1 -1
  17. package/dist/components/card/props.d.ts +2 -2
  18. package/dist/components/checkbox/QCheckbox.svelte +1 -1
  19. package/dist/components/checkbox/docs.d.ts +1 -1
  20. package/dist/components/checkbox/props.d.ts +1 -1
  21. package/dist/components/chip/QChip.svelte +26 -10
  22. package/dist/components/chip/QChip.svelte.d.ts +2 -1
  23. package/dist/components/chip/docs.d.ts +1 -1
  24. package/dist/components/chip/docs.props.js +8 -0
  25. package/dist/components/chip/index.scss +18 -1
  26. package/dist/components/chip/props.d.ts +6 -1
  27. package/dist/components/codeBlock/QCodeBlock.svelte +24 -22
  28. package/dist/components/codeBlock/QCodeBlock.svelte.d.ts +0 -1
  29. package/dist/components/dialog/QDialog.svelte +3 -3
  30. package/dist/components/dialog/docs.d.ts +1 -1
  31. package/dist/components/dialog/docs.props.js +16 -0
  32. package/dist/components/dialog/props.d.ts +1 -1
  33. package/dist/components/drawer/QDrawer.svelte +3 -3
  34. package/dist/components/drawer/docs.d.ts +1 -1
  35. package/dist/components/drawer/docs.props.js +1 -1
  36. package/dist/components/drawer/props.d.ts +1 -1
  37. package/dist/components/footer/QFooter.svelte +3 -3
  38. package/dist/components/footer/docs.d.ts +1 -1
  39. package/dist/components/footer/docs.props.js +4 -4
  40. package/dist/components/footer/props.d.ts +1 -1
  41. package/dist/components/header/QHeader.svelte +2 -2
  42. package/dist/components/header/docs.props.d.ts +24 -0
  43. package/dist/components/header/docs.props.js +70 -0
  44. package/dist/components/icon/QIcon.svelte +2 -4
  45. package/dist/components/icon/docs.d.ts +1 -1
  46. package/dist/components/icon/docs.props.js +4 -4
  47. package/dist/components/icon/props.d.ts +1 -1
  48. package/dist/components/index.d.ts +2 -1
  49. package/dist/components/index.js +2 -1
  50. package/dist/components/input/QInput.svelte +62 -73
  51. package/dist/components/input/QInput.svelte.d.ts +3 -2
  52. package/dist/components/input/docs.d.ts +1 -1
  53. package/dist/components/input/docs.js +1 -7
  54. package/dist/components/input/docs.props.js +5 -13
  55. package/dist/components/input/index.scss +1 -3
  56. package/dist/components/input/props.d.ts +1 -3
  57. package/dist/components/input/props.js +0 -1
  58. package/dist/components/layout/QLayout.svelte +6 -6
  59. package/dist/components/layout/QLayout.svelte.d.ts +2 -2
  60. package/dist/components/layout/docs.d.ts +1 -1
  61. package/dist/components/layout/docs.props.js +7 -7
  62. package/dist/components/layout/index.scss +2 -6
  63. package/dist/components/layout/props.d.ts +1 -1
  64. package/dist/components/list/QItem.svelte +5 -5
  65. package/dist/components/list/QItemSection.svelte +7 -7
  66. package/dist/components/list/QList.svelte +1 -1
  67. package/dist/components/list/docs.d.ts +1 -1
  68. package/dist/components/list/docs.props.js +43 -27
  69. package/dist/components/list/index.scss +1 -0
  70. package/dist/components/list/props.d.ts +1 -1
  71. package/dist/components/list/props.js +1 -1
  72. package/dist/components/private/QApi.svelte +2 -2
  73. package/dist/components/private/QApi.svelte.d.ts +1 -1
  74. package/dist/components/private/QDocs.svelte +2 -2
  75. package/dist/components/private/QDocs.svelte.d.ts +1 -1
  76. package/dist/components/private/QDocsSection.svelte +1 -2
  77. package/dist/components/progress/QCircularProgress.svelte +3 -4
  78. package/dist/components/progress/QLinearProgress.svelte +1 -1
  79. package/dist/components/progress/docs.d.ts +1 -1
  80. package/dist/components/progress/docs.props.js +15 -15
  81. package/dist/components/progress/props.d.ts +1 -1
  82. package/dist/components/radio/QRadio.svelte +1 -1
  83. package/dist/components/radio/docs.d.ts +1 -1
  84. package/dist/components/radio/docs.props.js +3 -3
  85. package/dist/components/radio/props.d.ts +1 -1
  86. package/dist/components/radio/props.js +1 -1
  87. package/dist/components/railbar/QRailbar.svelte +3 -3
  88. package/dist/components/railbar/docs.d.ts +1 -1
  89. package/dist/components/railbar/docs.props.js +7 -7
  90. package/dist/components/railbar/props.d.ts +1 -1
  91. package/dist/components/select/QSelect.svelte +87 -93
  92. package/dist/components/select/QSelect.svelte.d.ts +2 -1
  93. package/dist/components/select/docs.d.ts +1 -1
  94. package/dist/components/select/docs.js +1 -7
  95. package/dist/components/select/docs.props.js +4 -12
  96. package/dist/components/select/index.scss +17 -4
  97. package/dist/components/select/props.d.ts +1 -3
  98. package/dist/components/select/props.js +0 -1
  99. package/dist/components/separator/QSeparator.svelte +50 -55
  100. package/dist/components/separator/QSeparator.svelte.d.ts +0 -1
  101. package/dist/components/separator/docs.d.ts +1 -1
  102. package/dist/components/separator/docs.props.js +13 -13
  103. package/dist/components/separator/index.scss +52 -0
  104. package/dist/components/separator/props.d.ts +3 -3
  105. package/dist/components/table/QTable.svelte +2 -4
  106. package/dist/components/table/QTable.svelte.d.ts +1 -2
  107. package/dist/components/table/docs.d.ts +1 -1
  108. package/dist/components/table/docs.props.js +1 -1
  109. package/dist/components/table/props.d.ts +1 -1
  110. package/dist/components/tabs/QTab.svelte +50 -43
  111. package/dist/components/tabs/QTab.svelte.d.ts +1 -1
  112. package/dist/components/tabs/QTabs.svelte +61 -42
  113. package/dist/components/tabs/QTabs.svelte.d.ts +11 -1
  114. package/dist/components/tabs/docs.d.ts +1 -1
  115. package/dist/components/tabs/docs.props.js +2 -2
  116. package/dist/components/tabs/index.scss +30 -21
  117. package/dist/components/tabs/props.d.ts +2 -4
  118. package/dist/components/tabs/props.js +1 -13
  119. package/dist/components/toggle/QToggle.svelte +1 -2
  120. package/dist/components/toggle/docs.d.ts +1 -1
  121. package/dist/components/toggle/props.d.ts +1 -1
  122. package/dist/components/toggle/props.js +1 -1
  123. package/dist/components/toolbar/QToolbar.svelte +2 -2
  124. package/dist/components/toolbar/QToolbarTitle.svelte +1 -1
  125. package/dist/components/toolbar/docs.d.ts +1 -1
  126. package/dist/components/toolbar/docs.props.js +24 -8
  127. package/dist/components/toolbar/props.d.ts +1 -1
  128. package/dist/components/tooltip/QTooltip.svelte +1 -1
  129. package/dist/components/tooltip/docs.d.ts +1 -1
  130. package/dist/components/tooltip/docs.props.js +1 -1
  131. package/dist/components/tooltip/props.d.ts +1 -1
  132. package/dist/components/tooltip/props.js +1 -1
  133. package/dist/composables/index.d.ts +3 -0
  134. package/dist/composables/index.js +3 -1
  135. package/dist/composables/use-align.d.ts +1 -1
  136. package/dist/composables/use-align.js +1 -1
  137. package/dist/composables/use-router-link.d.ts +1 -1
  138. package/dist/composables/use-router-link.js +2 -2
  139. package/dist/composables/use-size.d.ts +1 -1
  140. package/dist/composables/use-size.js +2 -2
  141. package/dist/css/index.css +1 -1
  142. package/dist/css/index.scss +1 -0
  143. package/dist/css/mixins/field-mixins.scss +52 -0
  144. package/dist/css/mixins.scss +3 -4
  145. package/dist/css/shared/q-field.scss +305 -0
  146. package/dist/css/theme/colors.module.scss +261 -109
  147. package/dist/css/theme/palette.scss +8 -2
  148. package/dist/helpers/index.d.ts +1 -1
  149. package/dist/helpers/index.js +1 -1
  150. package/dist/helpers/version.d.ts +1 -1
  151. package/dist/helpers/version.js +1 -1
  152. package/dist/stores/QTheme.d.ts +8 -7
  153. package/dist/stores/QTheme.js +3 -3
  154. package/dist/stores/Quaff.js +1 -1
  155. package/dist/stores/index.d.ts +2 -0
  156. package/dist/stores/index.js +2 -0
  157. package/dist/utils/clipboard.d.ts +1 -1
  158. package/dist/utils/clipboard.js +1 -2
  159. package/dist/utils/dom.d.ts +1 -0
  160. package/dist/utils/dom.js +4 -0
  161. package/dist/utils/index.d.ts +8 -0
  162. package/dist/utils/index.js +8 -1
  163. package/dist/utils/props.d.ts +1 -1
  164. package/dist/utils/types.d.ts +1 -1
  165. package/dist/utils/types.json +1 -1
  166. package/package.json +22 -23
  167. package/dist/composables/use-index.d.ts +0 -2
  168. package/dist/composables/use-index.js +0 -17
  169. package/dist/css/mixins/field.scss +0 -432
  170. package/dist/helpers/activationHandler.d.ts +0 -9
  171. package/dist/helpers/activationHandler.js +0 -23
  172. package/dist/utils/fields.d.ts +0 -1
  173. package/dist/utils/fields.js +0 -14
@@ -0,0 +1,70 @@
1
+ export const QToolbarDocsProps = [
2
+ {
3
+ name: "inset",
4
+ type: "boolean",
5
+ optional: true,
6
+ clickableType: false,
7
+ description: "",
8
+ default: "false",
9
+ },
10
+ {
11
+ name: "border",
12
+ type: "boolean",
13
+ optional: true,
14
+ clickableType: false,
15
+ description: "",
16
+ default: "false",
17
+ },
18
+ {
19
+ name: "elevate",
20
+ type: "boolean",
21
+ optional: true,
22
+ clickableType: false,
23
+ description: "",
24
+ default: "false",
25
+ },
26
+ {
27
+ name: "height",
28
+ type: "CssValue | number",
29
+ optional: true,
30
+ clickableType: true,
31
+ description: "",
32
+ default: "64px",
33
+ },
34
+ ];
35
+ export const QToolbarTitleDocsProps = [
36
+ {
37
+ name: "shrink",
38
+ type: "boolean",
39
+ optional: true,
40
+ clickableType: false,
41
+ description: "",
42
+ default: "false",
43
+ },
44
+ ];
45
+ export const QHeaderDocsProps = [
46
+ {
47
+ name: "inset",
48
+ type: "boolean",
49
+ optional: true,
50
+ clickableType: false,
51
+ description: "",
52
+ default: "false",
53
+ },
54
+ {
55
+ name: "elevate",
56
+ type: "boolean",
57
+ optional: true,
58
+ clickableType: false,
59
+ description: "",
60
+ default: "false",
61
+ },
62
+ {
63
+ name: "border",
64
+ type: "boolean",
65
+ optional: true,
66
+ clickableType: false,
67
+ description: "",
68
+ default: "false",
69
+ },
70
+ ];
@@ -1,7 +1,5 @@
1
- <script>import { createClasses, createStyles } from "../../utils/props";
2
- import { isNumber } from "../../utils/types";
3
- import { sizes } from "../../composables/use-size";
4
- import { useSize } from "../../composables/use-size";
1
+ <script>import { useSize } from "../../composables";
2
+ import { createClasses, createStyles } from "../../utils";
5
3
  export let size = "md", name = void 0, type = "outlined", filled = false, svg = void 0, img = void 0, imgAttributes = {}, color = void 0, userClasses = void 0, userStyles = void 0;
6
4
  export { userClasses as class, userStyles as style };
7
5
  $:
@@ -1,2 +1,2 @@
1
- import type { QComponentDocs } from "../../utils/types";
1
+ import type { QComponentDocs } from "../../utils";
2
2
  export declare let QIconDocs: QComponentDocs;
@@ -2,7 +2,7 @@ export const QIconDocsProps = [
2
2
  {
3
3
  name: "size",
4
4
  type: "QIconSizeOptions",
5
- optional: false,
5
+ optional: true,
6
6
  clickableType: true,
7
7
  description: 'The size of the icon. Can be specified with CSS units. If no unit is specified, "px" will be used.',
8
8
  default: "md",
@@ -10,7 +10,7 @@ export const QIconDocsProps = [
10
10
  {
11
11
  name: "type",
12
12
  type: "QIconTypeOptions",
13
- optional: false,
13
+ optional: true,
14
14
  clickableType: true,
15
15
  description: "The type of the icon.",
16
16
  default: "outlined",
@@ -26,7 +26,7 @@ export const QIconDocsProps = [
26
26
  {
27
27
  name: "filled",
28
28
  type: "boolean",
29
- optional: false,
29
+ optional: true,
30
30
  clickableType: false,
31
31
  description: "Determines whether the icon should be filled.",
32
32
  default: "false",
@@ -50,7 +50,7 @@ export const QIconDocsProps = [
50
50
  {
51
51
  name: "imgAttributes",
52
52
  type: "Record<string, any>",
53
- optional: false,
53
+ optional: true,
54
54
  clickableType: true,
55
55
  description: 'Additional attributes for the image element when using the `img` prop, as for example the "alt" attribute.',
56
56
  default: "{}",
@@ -1,4 +1,4 @@
1
- import type { CssValue, NativeProps, QuaffSizes } from "../../utils/types";
1
+ import type { CssValue, NativeProps, QuaffSizes } from "../../utils";
2
2
  import type { HTMLAttributes } from "svelte/elements";
3
3
  export type QIconSizeOptions = QuaffSizes | CssValue | number;
4
4
  export type QIconTypeOptions = "outlined" | "sharp" | "rounded";
@@ -5,6 +5,7 @@ import QCardSection from "./card/QCardSection.svelte";
5
5
  import QCardActions from "./card/QCardActions.svelte";
6
6
  import QCheckbox from "./checkbox/QCheckbox.svelte";
7
7
  import QChip from "./chip/QChip.svelte";
8
+ import QCircularProgress from "./progress/QCircularProgress.svelte";
8
9
  import QCodeBlock from "./codeBlock/QCodeBlock.svelte";
9
10
  import QDialog from "./dialog/QDialog.svelte";
10
11
  import QDrawer from "./drawer/QDrawer.svelte";
@@ -28,4 +29,4 @@ import QToggle from "./toggle/QToggle.svelte";
28
29
  import QToolbar from "./toolbar/QToolbar.svelte";
29
30
  import QToolbarTitle from "./toolbar/QToolbarTitle.svelte";
30
31
  import QTooltip from "./tooltip/QTooltip.svelte";
31
- export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCodeBlock, QDialog, QDrawer, QFooter, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QToolbarTitle, QTooltip, };
32
+ export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCircularProgress, QCodeBlock, QDialog, QDrawer, QFooter, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QToolbarTitle, QTooltip, };
@@ -5,6 +5,7 @@ import QCardSection from "./card/QCardSection.svelte";
5
5
  import QCardActions from "./card/QCardActions.svelte";
6
6
  import QCheckbox from "./checkbox/QCheckbox.svelte";
7
7
  import QChip from "./chip/QChip.svelte";
8
+ import QCircularProgress from "./progress/QCircularProgress.svelte";
8
9
  import QCodeBlock from "./codeBlock/QCodeBlock.svelte";
9
10
  import QDialog from "./dialog/QDialog.svelte";
10
11
  import QDrawer from "./drawer/QDrawer.svelte";
@@ -28,4 +29,4 @@ import QToggle from "./toggle/QToggle.svelte";
28
29
  import QToolbar from "./toolbar/QToolbar.svelte";
29
30
  import QToolbarTitle from "./toolbar/QToolbarTitle.svelte";
30
31
  import QTooltip from "./tooltip/QTooltip.svelte";
31
- export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCodeBlock, QDialog, QDrawer, QFooter, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QToolbarTitle, QTooltip, };
32
+ export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCircularProgress, QCodeBlock, QDialog, QDrawer, QFooter, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QToolbarTitle, QTooltip, };
@@ -1,81 +1,70 @@
1
- <script>import { createClasses } from "../../utils/props";
2
- import { textWidth } from "../../utils/fields";
3
- export let bordered = false, dense = false, disable = false, error = false, errorMessage = void 0, filled = false, hint = void 0, label = void 0, outlined = false, rounded = false, value, userClasses = void 0;
4
- export { userClasses as class };
5
- let active = false;
6
- $:
7
- hasBorder = bordered || rounded || outlined;
1
+ <script>let focus = false;
8
2
  $:
9
- classes = createClasses(
10
- [
11
- label && "label",
12
- active && "active",
13
- dense && "dense",
14
- $$slots.prepend && "prepend",
15
- $$slots.append && "append",
16
- hasBorder && "has-border",
17
- bordered && "bordered",
18
- rounded && "rounded",
19
- filled && "filled",
20
- error && "error",
21
- disable && "disabled"
22
- ],
23
- {
24
- component: "q-input",
25
- userClasses
26
- }
27
- );
28
- let wrapper = null;
29
- let inputElement = null;
30
- $:
31
- value && updateInput(inputElement);
32
- function updateInput(target) {
33
- const input = target;
34
- if (!wrapper) {
35
- throw new Error("unexpected to not have element");
36
- }
37
- const label2 = wrapper.querySelector("label");
38
- const isBorder = hasBorder && !filled;
39
- const toActive = document.activeElement === target || input.value || input.querySelector("[selected]");
40
- if (toActive) {
41
- if (isBorder && label2) {
42
- const labelWidth = textWidth(label2, "0.75rem Arial");
43
- let width = active ? labelWidth : Math.round(labelWidth / 1.33);
44
- width = width / 16;
45
- const start = rounded ? 1.25 : 0.75;
46
- const end = width + start + 0.5;
47
- input.style.clipPath = `polygon(0% 0%, ${start}rem 0%, ${start}rem 0.5rem, ${end}rem 0.5rem, ${end}rem 0%, 100% 0%, 100% 100%, 0% 100%)`;
48
- } else
49
- input.style.clipPath = "";
50
- active = true;
51
- } else {
52
- active = false;
53
- input.style.clipPath = "";
54
- }
55
- }
3
+ active = value || focus;
4
+ let slotPrependWidth = 0;
5
+ export let dense = false, disable = false, error = false, errorMessage = void 0, filled = false, hint = void 0, label = void 0, outlined = false, rounded = false, value, userClasses = "";
6
+ export { userClasses as class };
56
7
  </script>
57
8
 
58
- <div bind:this={wrapper} class={classes} {...$$restProps}>
59
- <slot name="prepend" />
9
+ <div
10
+ class="q-input q-field {userClasses}"
11
+ class:q-field--default={!outlined && !rounded && !filled}
12
+ class:q-field--outlined={outlined}
13
+ class:q-field--rounded={rounded}
14
+ class:q-field--filled={filled}
15
+ class:q-field--has-border={outlined || rounded}
16
+ class:q-field--dense={dense}
17
+ class:q-field--active={active}
18
+ class:q-field--focus={focus}
19
+ class:q-field--label={label}
20
+ class:q-field--slot-append={$$slots.append}
21
+ class:q-field--slot-prepend={$$slots.prepend}
22
+ class:q-field--disable={disable}
23
+ class:q-field--error={error}
24
+ style:--slot-prepend-width="{slotPrependWidth}px"
25
+ {...$$restProps}
26
+ >
27
+ {#if $$slots.before}
28
+ <div class="q-field__slot-before">
29
+ <slot name="before" />
30
+ </div>
31
+ {/if}
60
32
 
61
- <input
62
- type="text"
63
- on:focus={(e) => updateInput(e.currentTarget)}
64
- on:blur={(e) => updateInput(e.currentTarget)}
65
- bind:value
66
- bind:this={inputElement}
67
- tabindex={disable === true ? -1 : 0}
68
- />
33
+ <div class="q-field__inner">
34
+ <label class="q-field__wrapper">
35
+ {#if $$slots.prepend}
36
+ <div class="q-field__slot-prepend" bind:clientWidth={slotPrependWidth}>
37
+ <slot name="prepend" />
38
+ </div>
39
+ {/if}
40
+ <input
41
+ class="q-field__input"
42
+ bind:value
43
+ placeholder=""
44
+ on:focus={() => (focus = true)}
45
+ on:blur={() => (focus = false)}
46
+ disabled={disable}
47
+ tabindex={disable === true ? -1 : 0}
48
+ />
49
+ <span class="q-field__label">{label}</span>
69
50
 
70
- <slot name="append" />
51
+ {#if $$slots.append}
52
+ <div class="q-field__slot-append">
53
+ <slot name="append" />
54
+ </div>
55
+ {/if}
56
+ </label>
71
57
 
72
- {#if label}
73
- <!-- svelte-ignore a11y-label-has-associated-control -->
74
- <label class="q-input__label {active ? 'q-input__label--active' : ''}">{label}</label>
75
- {/if}
76
- {#if hint}
77
- <span class="q-input__helper">{hint}</span>
78
- {:else if error && errorMessage}
79
- <span class="q-input__error">{errorMessage}</span>
58
+ {#if error && errorMessage}
59
+ <div class="q-field__error">{errorMessage}</div>
60
+ {:else if hint}
61
+ <div class="q-field__hint">{hint}</div>
62
+ {/if}
63
+ </div>
64
+
65
+ {#if $$slots.after}
66
+ <div class="q-field__slot-after">
67
+ <slot name="after" />
68
+ </div>
80
69
  {/if}
81
70
  </div>
@@ -1,9 +1,8 @@
1
1
  import { SvelteComponent } from "svelte";
2
- import type { QInputProps } from "./props";
2
+ import type { QInputProps } from "../input/props";
3
3
  declare const __propDef: {
4
4
  props: {
5
5
  [x: string]: any;
6
- bordered?: QInputProps["bordered"];
7
6
  dense?: QInputProps["dense"];
8
7
  disable?: QInputProps["disable"];
9
8
  error?: QInputProps["error"];
@@ -20,8 +19,10 @@ declare const __propDef: {
20
19
  [evt: string]: CustomEvent<any>;
21
20
  };
22
21
  slots: {
22
+ before: {};
23
23
  prepend: {};
24
24
  append: {};
25
+ after: {};
25
26
  };
26
27
  };
27
28
  type QInputProps_ = typeof __propDef.props;
@@ -1,2 +1,2 @@
1
- import type { QComponentDocs } from "../../utils/types";
1
+ import type { QComponentDocs } from "../../utils";
2
2
  export declare let QInputDocs: QComponentDocs;
@@ -1,14 +1,8 @@
1
1
  export let QInputDocs = {
2
2
  name: "QInput",
3
- description: "QInput is a form component that allows users to input text. It supports different visual styles such as bordered, filled, outlined, and rounded, and it can also display hint text and custom error messages.",
3
+ description: "QInput is a form component that allows users to input text. It supports different visual styles such as filled, outlined, and rounded, and it can also display hint text and custom error messages.",
4
4
  docs: {
5
5
  props: [
6
- {
7
- name: "bordered",
8
- type: "boolean",
9
- default: false,
10
- description: "Whether the input component has a border.",
11
- },
12
6
  {
13
7
  name: "disable",
14
8
  type: "boolean",
@@ -1,12 +1,4 @@
1
1
  export const QInputDocsProps = [
2
- {
3
- name: "bordered",
4
- type: "boolean",
5
- optional: false,
6
- clickableType: false,
7
- description: "",
8
- default: "",
9
- },
10
2
  {
11
3
  name: "dense",
12
4
  type: "boolean",
@@ -18,7 +10,7 @@ export const QInputDocsProps = [
18
10
  {
19
11
  name: "disable",
20
12
  type: "boolean",
21
- optional: false,
13
+ optional: true,
22
14
  clickableType: false,
23
15
  description: "",
24
16
  default: "",
@@ -26,7 +18,7 @@ export const QInputDocsProps = [
26
18
  {
27
19
  name: "error",
28
20
  type: "boolean",
29
- optional: false,
21
+ optional: true,
30
22
  clickableType: false,
31
23
  description: "",
32
24
  default: "",
@@ -42,7 +34,7 @@ export const QInputDocsProps = [
42
34
  {
43
35
  name: "filled",
44
36
  type: "boolean",
45
- optional: false,
37
+ optional: true,
46
38
  clickableType: false,
47
39
  description: "",
48
40
  default: "",
@@ -66,7 +58,7 @@ export const QInputDocsProps = [
66
58
  {
67
59
  name: "outlined",
68
60
  type: "boolean",
69
- optional: false,
61
+ optional: true,
70
62
  clickableType: false,
71
63
  description: "",
72
64
  default: "",
@@ -74,7 +66,7 @@ export const QInputDocsProps = [
74
66
  {
75
67
  name: "rounded",
76
68
  type: "boolean",
77
- optional: false,
69
+ optional: true,
78
70
  clickableType: false,
79
71
  description: "",
80
72
  default: "",
@@ -1,3 +1 @@
1
- .q-input {
2
- @include field;
3
- }
1
+ @import "$css/shared/q-field.scss";
@@ -1,7 +1,6 @@
1
- import type { NativeProps } from "../../utils/types";
1
+ import type { NativeProps } from "../../utils";
2
2
  import type { HTMLAttributes } from "svelte/elements";
3
3
  export interface QInputProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
4
- bordered?: boolean;
5
4
  dense?: boolean;
6
5
  disable?: boolean;
7
6
  error?: boolean;
@@ -14,7 +13,6 @@ export interface QInputProps extends NativeProps, HTMLAttributes<HTMLDivElement>
14
13
  value: string;
15
14
  }
16
15
  export declare const QInputPropsDefaults: {
17
- bordered: boolean;
18
16
  dense: boolean;
19
17
  disable: boolean;
20
18
  error: boolean;
@@ -1,5 +1,4 @@
1
1
  export const QInputPropsDefaults = {
2
- bordered: false,
3
2
  dense: false,
4
3
  disable: false,
5
4
  error: false,
@@ -1,10 +1,10 @@
1
- <script context="module"></script>
2
-
3
- <script>import { setContext } from "svelte";
4
- import { createClasses, createStyles } from "../../utils/props";
5
- import ContextReseter from "../private/ContextReseter.svelte";
1
+ <script context="module">import { createStyles, createClasses } from "../../utils";
2
+ import { setContext } from "svelte";
6
3
  import { writable } from "svelte/store";
7
- export let view = "hhh lpr fff", headerHeight = "64px", footerHeight = "80px", leftDrawerWidth = "300px", rightDrawerWidth = "300px", leftRailbarWidth = "88px", rightRailbarWidth = "88px", userClasses = void 0, userStyles = void 0;
4
+ import ContextReseter from "../private/ContextReseter.svelte";
5
+ </script>
6
+
7
+ <script>export let view = "hhh lpr fff", headerHeight = "64px", footerHeight = "80px", leftDrawerWidth = "300px", rightDrawerWidth = "300px", leftRailbarWidth = "88px", rightRailbarWidth = "88px", userClasses = void 0, userStyles = void 0;
8
8
  export { userClasses as class, userStyles as style };
9
9
  $:
10
10
  style = createStyles(
@@ -1,4 +1,6 @@
1
1
  import { SvelteComponent } from "svelte";
2
+ import type { QLayoutProps } from "./props";
3
+ import type { Readable } from "svelte/store";
2
4
  export interface DrawerContext {
3
5
  offset: {
4
6
  top: boolean;
@@ -19,8 +21,6 @@ export type LayoutContext = Readable<{
19
21
  drawerLeft: DrawerContext;
20
22
  drawerRight: DrawerContext;
21
23
  }>;
22
- import type { QLayoutProps } from "./props";
23
- import type { Readable } from "svelte/store";
24
24
  declare const __propDef: {
25
25
  props: {
26
26
  [x: string]: any;
@@ -1,2 +1,2 @@
1
- import type { QComponentDocs } from "../../utils/types";
1
+ import type { QComponentDocs } from "../../utils";
2
2
  export declare let QLayoutDocs: QComponentDocs;
@@ -2,7 +2,7 @@ export const QLayoutDocsProps = [
2
2
  {
3
3
  name: "view",
4
4
  type: "QLayoutViewOptions",
5
- optional: false,
5
+ optional: true,
6
6
  clickableType: true,
7
7
  description: 'The layout view configuration, which defines how layout components (header, railbars, drawers, footer) should be displayed on screen.\nSee <a href="https://quasar.dev/layout/layout/#understanding-the-view-prop" target="_blank">Quasar\'s explanation on the view prop</a>.',
8
8
  default: '"hhh lpr fff"',
@@ -10,7 +10,7 @@ export const QLayoutDocsProps = [
10
10
  {
11
11
  name: "headerHeight",
12
12
  type: "string | number",
13
- optional: false,
13
+ optional: true,
14
14
  clickableType: false,
15
15
  description: 'The height of the header. Can be specified with CSS units. If no unit is specified, "px" will be used.',
16
16
  default: "64px",
@@ -18,7 +18,7 @@ export const QLayoutDocsProps = [
18
18
  {
19
19
  name: "footerHeight",
20
20
  type: "string | number",
21
- optional: false,
21
+ optional: true,
22
22
  clickableType: false,
23
23
  description: 'The height of the footer. Can be specified with CSS units. If no unit is specified, "px" will be used.',
24
24
  default: "80px",
@@ -26,7 +26,7 @@ export const QLayoutDocsProps = [
26
26
  {
27
27
  name: "leftDrawerWidth",
28
28
  type: "string | number",
29
- optional: false,
29
+ optional: true,
30
30
  clickableType: false,
31
31
  description: 'The width of the left drawer. Can be specified with CSS units. If no unit is specified, "px" will be used.',
32
32
  default: "300px",
@@ -34,7 +34,7 @@ export const QLayoutDocsProps = [
34
34
  {
35
35
  name: "rightDrawerWidth",
36
36
  type: "string | number",
37
- optional: false,
37
+ optional: true,
38
38
  clickableType: false,
39
39
  description: 'The width of the right drawer. Can be specified with CSS units. If no unit is specified, "px" will be used.',
40
40
  default: "300px",
@@ -42,7 +42,7 @@ export const QLayoutDocsProps = [
42
42
  {
43
43
  name: "leftRailbarWidth",
44
44
  type: "string | number",
45
- optional: false,
45
+ optional: true,
46
46
  clickableType: false,
47
47
  description: 'The width of the left railbar. Can be specified with CSS units. If no unit is specified, "px" will be used.',
48
48
  default: "88px",
@@ -50,7 +50,7 @@ export const QLayoutDocsProps = [
50
50
  {
51
51
  name: "rightRailbarWidth",
52
52
  type: "string | number",
53
- optional: false,
53
+ optional: true,
54
54
  clickableType: false,
55
55
  description: 'The width of the right railbar. Can be specified with CSS units. If no unit is specified, "px" will be used.',
56
56
  default: "88px",
@@ -175,6 +175,7 @@ $contentSlot: ":not(.q-header, .q-footer, .q-railbar, .q-drawer)";
175
175
 
176
176
  & .q-list > .q-item.q-link {
177
177
  border-radius: 2rem;
178
+ overflow: hidden;
178
179
 
179
180
  &::before {
180
181
  content: "";
@@ -193,7 +194,7 @@ $contentSlot: ":not(.q-header, .q-footer, .q-railbar, .q-drawer)";
193
194
  transition-timing-function: linear;
194
195
  }
195
196
 
196
- &.active {
197
+ &.q-item--active {
197
198
  color: var(--on-secondary-container);
198
199
 
199
200
  &::before {
@@ -201,11 +202,6 @@ $contentSlot: ":not(.q-header, .q-footer, .q-railbar, .q-drawer)";
201
202
  transform: scaleX(1);
202
203
  }
203
204
  }
204
-
205
- &:hover {
206
- background-color: var(--on-surface-variant-2);
207
- font-variation-settings: "GRAD" 50;
208
- }
209
205
  }
210
206
  }
211
207
 
@@ -1,4 +1,4 @@
1
- import type { NativeProps } from "../../utils/types";
1
+ import type { NativeProps } from "../../utils";
2
2
  import type { HTMLAttributes } from "svelte/elements";
3
3
  export type QLayoutViewOptions = `${"l" | "h"}${"h" | "H"}${"r" | "h"} ${"l" | "L"}${"p"}${"r" | "R"} ${"l" | "f"}${"f" | "F"}${"r" | "f"}`;
4
4
  export interface QLayoutProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
@@ -1,10 +1,10 @@
1
- <script>import QSeparator from "../separator/QSeparator.svelte";
2
- import useRouterLink, { isRouteActive } from "../../composables/use-router-link";
3
- import { createClasses } from "../../utils/props";
4
- import { getContext, setContext } from "svelte";
1
+ <script>import { useRouterLink, isRouteActive } from "../../composables";
2
+ import { ripple } from "../../helpers";
5
3
  import { Quaff } from "../../stores/Quaff";
4
+ import { createClasses } from "../../utils";
5
+ import { setContext, getContext } from "svelte";
6
6
  import { writable } from "svelte/store";
7
- import { ripple } from "../../helpers/ripple";
7
+ import { QSeparator } from "../..";
8
8
  export let tag = "div", active = false, clickable = false, dense = false, tabindex = 0, href = void 0, to = void 0, disable = false, activeClass = void 0, replace = false, noRipple = false, userClasses = void 0;
9
9
  export { userClasses as class };
10
10
  let hasMultipleLines = writable(false);
@@ -1,4 +1,4 @@
1
- <script>import { createClasses } from "../../utils/props";
1
+ <script>import { createClasses } from "../../utils";
2
2
  import { getContext } from "svelte";
3
3
  export let type = "content", userClasses = void 0;
4
4
  export { userClasses as class };
@@ -17,32 +17,32 @@ $:
17
17
 
18
18
  <div class={classes} {...$$restProps}>
19
19
  {#if type === "content"}
20
- {#if [$$slots.headline, $$slots.line2, $$slots.line2, $$slots.line3].every(Boolean) === false}
20
+ {#if ![$$slots.headline, $$slots.line2, $$slots.line2, $$slots.line3].some(Boolean)}
21
21
  <slot />
22
22
  {:else}
23
23
  {#if $$slots.headline}
24
- <div class="body-large on-surface-text">
24
+ <div class="body-large text-on-surface">
25
25
  <slot name="headline" />
26
26
  </div>
27
27
  {/if}
28
- <div class="body-medium on-surface-variant-text">
28
+ <div class="body-medium text-on-surface-variant">
29
29
  {#if $$slots.line1}
30
30
  <slot name="line1" />
31
31
  {/if}
32
32
  </div>
33
33
  {#if $$slots.line2}
34
- <div class="body-medium on-surface-variant-text">
34
+ <div class="body-medium text-on-surface-variant">
35
35
  <slot name="line2" />
36
36
  </div>
37
37
  {/if}
38
38
  {#if $$slots.line3}
39
- <div class="body-medium on-surface-variant-text">
39
+ <div class="body-medium text-on-surface-variant">
40
40
  <slot name="line3" />
41
41
  </div>
42
42
  {/if}
43
43
  {/if}
44
44
  {:else if type === "trailingText"}
45
- <div class="label-small on-surface-variant-text">
45
+ <div class="label-small text-on-surface-variant">
46
46
  <slot />
47
47
  </div>
48
48
  {:else}
@@ -1,4 +1,4 @@
1
- <script>import { createClasses } from "../../utils/props";
1
+ <script>import { createClasses } from "../../utils";
2
2
  import { onMount, setContext } from "svelte";
3
3
  export let bordered = false, roundedBorders = false, dense = false, separator = false, separatorOptions = {}, padding = false, tag = "div", userClasses = void 0;
4
4
  export { userClasses as class };
@@ -1,2 +1,2 @@
1
- import type { QComponentDocs } from "../../utils/types";
1
+ import type { QComponentDocs } from "../../utils";
2
2
  export declare let QListDocs: QComponentDocs;