@onsvisual/svelte-components 0.0.10 → 0.0.12

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 (15) hide show
  1. package/dist/@types/index.d.ts +2 -2
  2. package/dist/@types/layout/Breadcrumb/Breadcrumb.svelte.d.ts +8 -0
  3. package/dist/@types/layout/{Filler/Filler.svelte.d.ts → Highlight/Highlight.svelte.d.ts} +7 -7
  4. package/dist/@types/layout/Section/Section.svelte.d.ts +2 -0
  5. package/dist/@types/layout/{TitleBlock/TitleBlock.svelte.d.ts → Titleblock/Titleblock.svelte.d.ts} +7 -7
  6. package/dist/decorators/Divider/Divider.svelte +2 -3
  7. package/dist/index.js +2 -2
  8. package/dist/layout/Breadcrumb/Breadcrumb.svelte +29 -2
  9. package/dist/layout/Section/Section.svelte +6 -0
  10. package/dist/layout/{TitleBlock/TitleBlock.svelte → Titleblock/Titleblock.svelte} +1 -1
  11. package/dist/wrappers/Container/Container.svelte +1 -0
  12. package/package.json +4 -4
  13. /package/dist/@types/layout/{TitleBlock → Titleblock}/Meta.svelte.d.ts +0 -0
  14. /package/dist/layout/{Filler/Filler.svelte → Highlight/Highlight.svelte} +0 -0
  15. /package/dist/layout/{TitleBlock → Titleblock}/Meta.svelte +0 -0
package/dist/@types/index.d.ts CHANGED
@@ -4,7 +4,7 @@ export { default as Main } from "./wrappers/Main/Main.svelte";
4
4
  export { default as Theme } from "./wrappers/Theme/Theme.svelte";
5
5
  export { default as Accordion } from "./layout/Accordion/Accordion.svelte";
6
6
  export { default as AnalyticsBanner } from "./layout/AnalyticsBanner/AnalyticsBanner.svelte";
7
- export { default as Filler } from "./layout/Filler/Filler.svelte";
7
+ export { default as Highlight } from "./layout/Highlight/Highlight.svelte";
8
8
  export { default as Footer } from "./layout/Footer/Footer.svelte";
9
9
  export { default as Grid } from "./layout/Grid/Grid.svelte";
10
10
  export { default as Header } from "./layout/Header/Header.svelte";
@@ -15,7 +15,7 @@ export { default as NavSections } from "./layout/NavSections/NavSections.svelte"
15
15
  export { default as Scroller } from "./layout/Scroller/Scroller.svelte";
16
16
  export { default as ScrollerSection } from "./layout/Scroller/ScrollerSection.svelte";
17
17
  export { default as Section } from "./layout/Section/Section.svelte";
18
- export { default as TitleBlock } from "./layout/TitleBlock/TitleBlock.svelte";
18
+ export { default as Titleblock } from "./layout/Titleblock/Titleblock.svelte";
19
19
  export { default as Twisty } from "./layout/Twisty/Twisty.svelte";
20
20
  export { default as Button } from "./inputs/Button/Button.svelte";
21
21
  export { default as Dropdown } from "./inputs/Dropdown/Dropdown.svelte";
package/dist/@types/layout/Breadcrumb/Breadcrumb.svelte.d.ts CHANGED
@@ -2,6 +2,10 @@
2
2
  /** @typedef {typeof __propDef.events} BreadcrumbEvents */
3
3
  /** @typedef {typeof __propDef.slots} BreadcrumbSlots */
4
4
  export default class Breadcrumb extends SvelteComponentTyped<{
5
+ theme?: "light" | "dark" | "lightblue";
6
+ background?: string;
7
+ width?: "narrow" | "medium" | "wide" | "full";
8
+ themeOverrides?: any;
5
9
  links?: any[];
6
10
  }, {
7
11
  [evt: string]: CustomEvent<any>;
@@ -13,6 +17,10 @@ export type BreadcrumbSlots = typeof __propDef.slots;
13
17
  import { SvelteComponentTyped } from "svelte";
14
18
  declare const __propDef: {
15
19
  props: {
20
+ theme?: "light" | "dark" | "lightblue";
21
+ background?: string;
22
+ width?: "narrow" | "medium" | "wide" | "full";
23
+ themeOverrides?: object;
16
24
  links?: any[];
17
25
  };
18
26
  events: {
package/dist/@types/layout/{Filler/Filler.svelte.d.ts → Highlight/Highlight.svelte.d.ts} RENAMED
@@ -1,7 +1,7 @@
1
- /** @typedef {typeof __propDef.props} FillerProps */
2
- /** @typedef {typeof __propDef.events} FillerEvents */
3
- /** @typedef {typeof __propDef.slots} FillerSlots */
4
- export default class Filler extends SvelteComponentTyped<{
1
+ /** @typedef {typeof __propDef.props} HighlightProps */
2
+ /** @typedef {typeof __propDef.events} HighlightEvents */
3
+ /** @typedef {typeof __propDef.slots} HighlightSlots */
4
+ export default class Highlight extends SvelteComponentTyped<{
5
5
  theme?: "light" | "dark" | "lightblue";
6
6
  background?: string;
7
7
  width?: "narrow" | "medium" | "wide" | "full";
@@ -16,9 +16,9 @@ export default class Filler extends SvelteComponentTyped<{
16
16
  default: {};
17
17
  }> {
18
18
  }
19
- export type FillerProps = typeof __propDef.props;
20
- export type FillerEvents = typeof __propDef.events;
21
- export type FillerSlots = typeof __propDef.slots;
19
+ export type HighlightProps = typeof __propDef.props;
20
+ export type HighlightEvents = typeof __propDef.events;
21
+ export type HighlightSlots = typeof __propDef.slots;
22
22
  import { SvelteComponentTyped } from "svelte";
23
23
  declare const __propDef: {
24
24
  props: {
package/dist/@types/layout/Section/Section.svelte.d.ts CHANGED
@@ -3,6 +3,7 @@
3
3
  /** @typedef {typeof __propDef.slots} SectionSlots */
4
4
  export default class Section extends SvelteComponentTyped<{
5
5
  theme?: "light" | "dark" | "lightblue";
6
+ background?: string;
6
7
  width?: "narrow" | "medium" | "wide" | "full";
7
8
  marginTop?: boolean;
8
9
  marginBottom?: boolean;
@@ -23,6 +24,7 @@ import { SvelteComponentTyped } from "svelte";
23
24
  declare const __propDef: {
24
25
  props: {
25
26
  theme?: "light" | "dark" | "lightblue";
27
+ background?: string;
26
28
  width?: "narrow" | "medium" | "wide" | "full";
27
29
  marginTop?: boolean;
28
30
  marginBottom?: boolean;
package/dist/@types/layout/{TitleBlock/TitleBlock.svelte.d.ts → Titleblock/Titleblock.svelte.d.ts} RENAMED
@@ -1,7 +1,7 @@
1
- /** @typedef {typeof __propDef.props} TitleBlockProps */
2
- /** @typedef {typeof __propDef.events} TitleBlockEvents */
3
- /** @typedef {typeof __propDef.slots} TitleBlockSlots */
4
- export default class TitleBlock extends SvelteComponentTyped<{
1
+ /** @typedef {typeof __propDef.props} TitleblockProps */
2
+ /** @typedef {typeof __propDef.events} TitleblockEvents */
3
+ /** @typedef {typeof __propDef.slots} TitleblockSlots */
4
+ export default class Titleblock extends SvelteComponentTyped<{
5
5
  theme?: "light" | "dark" | "lightblue";
6
6
  background?: string;
7
7
  themeOverrides?: any;
@@ -17,9 +17,9 @@ export default class TitleBlock extends SvelteComponentTyped<{
17
17
  after: {};
18
18
  }> {
19
19
  }
20
- export type TitleBlockProps = typeof __propDef.props;
21
- export type TitleBlockEvents = typeof __propDef.events;
22
- export type TitleBlockSlots = typeof __propDef.slots;
20
+ export type TitleblockProps = typeof __propDef.props;
21
+ export type TitleblockEvents = typeof __propDef.events;
22
+ export type TitleblockSlots = typeof __propDef.slots;
23
23
  import { SvelteComponentTyped } from "svelte";
24
24
  declare const __propDef: {
25
25
  props: {
package/dist/decorators/Divider/Divider.svelte CHANGED
@@ -40,14 +40,13 @@
40
40
  marginTop="{marginTop}"
41
41
  marginBottom="{marginBottom}"
42
42
  >
43
- <hr style:border="{hr ? null : "none"}" />
43
+ <hr style:border-top="{hr ? null : "none"}" />
44
44
  </Container>
45
45
 
46
46
  <style>
47
47
  hr {
48
48
  width: 75px;
49
49
  border: none;
50
- border-top: 2px solid;
50
+ border-top: 2px solid var(--muted, #777);
51
51
  margin: -10px auto 0;
52
- color: var(--muted, #777);
53
52
  }</style>
package/dist/index.js CHANGED
@@ -8,7 +8,7 @@ export { default as Theme } from "./wrappers/Theme/Theme.svelte";
8
8
  export { default as Accordion } from "./layout/Accordion/Accordion.svelte";
9
9
  export { default as AnalyticsBanner } from "./layout/AnalyticsBanner/AnalyticsBanner.svelte";
10
10
  export { AnalyticsEvent } from "./layout/AnalyticsBanner/AnalyticsBanner.svelte";
11
- export { default as Filler } from "./layout/Filler/Filler.svelte";
11
+ export { default as Highlight } from "./layout/Highlight/Highlight.svelte";
12
12
  export { default as Footer } from "./layout/Footer/Footer.svelte";
13
13
  export { default as Grid } from "./layout/Grid/Grid.svelte";
14
14
  export { default as Header } from "./layout/Header/Header.svelte";
@@ -19,7 +19,7 @@ export { default as NavSections } from "./layout/NavSections/NavSections.svelte"
19
19
  export { default as Scroller } from "./layout/Scroller/Scroller.svelte";
20
20
  export { default as ScrollerSection } from "./layout/Scroller/ScrollerSection.svelte";
21
21
  export { default as Section } from "./layout/Section/Section.svelte";
22
- export { default as TitleBlock } from "./layout/TitleBlock/TitleBlock.svelte";
22
+ export { default as Titleblock } from "./layout/Titleblock/Titleblock.svelte";
23
23
  export { default as Twisty } from "./layout/Twisty/Twisty.svelte";
24
24
 
25
25
  // Inputs
package/dist/layout/Breadcrumb/Breadcrumb.svelte CHANGED
@@ -1,12 +1,39 @@
1
1
  <script>
2
+ import Container from "../../wrappers/Container/Container.svelte";
3
+
2
4
  /**
3
5
  * An array of links in the format {label, href}
4
6
  * @type {array}
5
7
  */
6
8
  export let links = [];
9
+ /**
10
+ * Sets the width of the container
11
+ * @type {"narrow"|"medium"|"wide"|"full"}
12
+ */
13
+ export let width = "medium";
14
+ /**
15
+ * Sets a predefined theme
16
+ * @type {"light"|"dark"|"lightblue"}
17
+ */
18
+ export let theme = null;
19
+ /**
20
+ * Define additional props to override the base theme
21
+ * @type {object}
22
+ */
23
+ export let themeOverrides = null;
24
+ /**
25
+ * Overrides the background CSS for the section
26
+ * @type {string}
27
+ */
28
+ export let background = null;
7
29
  </script>
8
30
 
9
- <div class="ons-page__container ons-container">
31
+ <Container
32
+ theme="{theme}"
33
+ themeOverrides="{themeOverrides}"
34
+ width="{width}"
35
+ background="{background}"
36
+ >
10
37
  <nav class="ons-breadcrumb print--hide" aria-label="Breadcrumbs">
11
38
  <ol class="ons-breadcrumb__items ons-u-fs-s">
12
39
  {#each links as link}
@@ -30,7 +57,7 @@
30
57
  {/each}
31
58
  </ol>
32
59
  </nav>
33
- </div>
60
+ </Container>
34
61
 
35
62
  <style>
36
63
  .ons-svg-icon {
package/dist/layout/Section/Section.svelte CHANGED
@@ -32,6 +32,11 @@
32
32
  * @type {object}
33
33
  */
34
34
  export let themeOverrides = null;
35
+ /**
36
+ * Overrides the background CSS for the section
37
+ * @type {string}
38
+ */
39
+ export let background = null;
35
40
  /**
36
41
  * Optional margin above section
37
42
  * @type {boolean}
@@ -50,6 +55,7 @@
50
55
  width="{width}"
51
56
  marginTop="{marginTop}"
52
57
  marginBottom="{marginBottom}"
58
+ background="{background}"
53
59
  >
54
60
  <section id="{id ? id : slugify(title)}" aria-label="{title}" class="ons-feature__section">
55
61
  {#if title}
package/dist/layout/{TitleBlock/TitleBlock.svelte → Titleblock/Titleblock.svelte} RENAMED
@@ -21,7 +21,7 @@
21
21
  * Array of {key, value} objects containing page metadata
22
22
  * @type {array}
23
23
  */
24
- export let meta = [];
24
+ export let meta = null;
25
25
  /**
26
26
  * Sets a predefined theme
27
27
  * @type {"light"|"dark"|"lightblue"}
package/dist/wrappers/Container/Container.svelte CHANGED
@@ -71,6 +71,7 @@
71
71
  <style>
72
72
  .ons-page__container {
73
73
  background: var(--background, "none");
74
+ overflow: auto;
74
75
  }
75
76
  .ons-page__container--narrow {
76
77
  max-width: 640px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onsvisual/svelte-components",
3
- "version": "0.0.10",
3
+ "version": "0.0.12",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "homepage": "https://onsvisual.github.io/svelte-components",
@@ -145,13 +145,13 @@
145
145
  "./layout/Breadcrumb/Breadcrumb.svelte": "./dist/layout/Breadcrumb/Breadcrumb.svelte",
146
146
  "./layout/Contents/Contents.svelte": "./dist/layout/Contents/Contents.svelte",
147
147
  "./layout/ErrorPage/ErrorPage.svelte": "./dist/layout/ErrorPage/ErrorPage.svelte",
148
- "./layout/Filler/Filler.svelte": "./dist/layout/Filler/Filler.svelte",
149
148
  "./layout/Footer/Footer.svelte": "./dist/layout/Footer/Footer.svelte",
150
149
  "./layout/Footer/ONSLogo.svelte": "./dist/layout/Footer/ONSLogo.svelte",
151
150
  "./layout/Grid/Grid.svelte": "./dist/layout/Grid/Grid.svelte",
152
151
  "./layout/Header/Header.svelte": "./dist/layout/Header/Header.svelte",
153
152
  "./layout/Header/ONSLogo.svelte": "./dist/layout/Header/ONSLogo.svelte",
154
153
  "./layout/Hero/Hero.svelte": "./dist/layout/Hero/Hero.svelte",
154
+ "./layout/Highlight/Highlight.svelte": "./dist/layout/Highlight/Highlight.svelte",
155
155
  "./layout/List/List.svelte": "./dist/layout/List/List.svelte",
156
156
  "./layout/NavSections/NavSection.svelte": "./dist/layout/NavSections/NavSection.svelte",
157
157
  "./layout/NavSections/NavSections.svelte": "./dist/layout/NavSections/NavSections.svelte",
@@ -167,8 +167,8 @@
167
167
  "./layout/Survey/init-survey": "./dist/layout/Survey/init-survey.js",
168
168
  "./layout/Tabs/Tab.svelte": "./dist/layout/Tabs/Tab.svelte",
169
169
  "./layout/Tabs/Tabs.svelte": "./dist/layout/Tabs/Tabs.svelte",
170
- "./layout/TitleBlock/Meta.svelte": "./dist/layout/TitleBlock/Meta.svelte",
171
- "./layout/TitleBlock/TitleBlock.svelte": "./dist/layout/TitleBlock/TitleBlock.svelte",
170
+ "./layout/Titleblock/Meta.svelte": "./dist/layout/Titleblock/Meta.svelte",
171
+ "./layout/Titleblock/Titleblock.svelte": "./dist/layout/Titleblock/Titleblock.svelte",
172
172
  "./layout/Twisty/Twisty.svelte": "./dist/layout/Twisty/Twisty.svelte",
173
173
  "./wrappers/Container/Container.svelte": "./dist/wrappers/Container/Container.svelte",
174
174
  "./wrappers/Embed/Embed.svelte": "./dist/wrappers/Embed/Embed.svelte",