@empathyco/x-components 3.0.0-alpha.126 → 3.0.0-alpha.129

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 (16) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/docs/API-reference/components/common/layouts/x-components.fixed-header-and-asides-layout.md +3 -0
  3. package/docs/API-reference/components/common/layouts/x-components.single-column-layout.md +11 -10
  4. package/docs/API-reference/components/history-queries/x-components.my-history.md +6 -6
  5. package/docs/build-search-ui/web-archetype-integration-guide.md +9 -9
  6. package/js/components/layouts/fixed-header-and-asides-layout.vue.js +13 -3
  7. package/js/components/layouts/fixed-header-and-asides-layout.vue.js.map +1 -1
  8. package/js/components/layouts/fixed-header-and-asides-layout.vue_rollup-plugin-vue_script.vue.js.map +1 -1
  9. package/js/components/layouts/single-column-layout.vue.js +13 -3
  10. package/js/components/layouts/single-column-layout.vue.js.map +1 -1
  11. package/js/components/layouts/single-column-layout.vue_rollup-plugin-vue_script.vue.js.map +1 -1
  12. package/js/x-modules/history-queries/components/my-history.vue.js +1 -0
  13. package/js/x-modules/history-queries/components/my-history.vue.js.map +1 -1
  14. package/package.json +2 -2
  15. package/types/components/layouts/fixed-header-and-asides-layout.vue.d.ts.map +1 -1
  16. package/types/components/layouts/single-column-layout.vue.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,45 @@
3
3
  All notable changes to this project will be documented in this file. See
4
4
  [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [3.0.0-alpha.129](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.128...@empathyco/x-components@3.0.0-alpha.129) (2022-07-11)
7
+
8
+ ### Features
9
+
10
+ - **history-queries:** bind `formatTime` to `suggestion-content` slot (#598)
11
+ ([589eef2](https://github.com/empathyco/x/commit/589eef287534e9916dcda7b0ad86626eb450decd)),
12
+ closes [EX-6611](https://searchbroker.atlassian.net/browse/EX-6611)
13
+
14
+ # Change Log
15
+
16
+ All notable changes to this project will be documented in this file. See
17
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
18
+
19
+ ## [3.0.0-alpha.128](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.127...@empathyco/x-components@3.0.0-alpha.128) (2022-07-11)
20
+
21
+ ### Documentation
22
+
23
+ - Add module type to integration script docs (#592)
24
+ ([907bda8](https://github.com/empathyco/x/commit/907bda8b4d825c93461089691f284c1758624a89))
25
+
26
+ # Change Log
27
+
28
+ All notable changes to this project will be documented in this file. See
29
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
30
+
31
+ ## [3.0.0-alpha.127](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.126...@empathyco/x-components@3.0.0-alpha.127) (2022-07-11)
32
+
33
+ ### Features
34
+
35
+ - **components:** add new slot `extra-aside` to `SingleColumnLayout` and
36
+ `FixedHeaderAndAsidesLayout` (#591)
37
+ ([91d406e](https://github.com/empathyco/x/commit/91d406ed7267d420009a5f3ee8c5cc092f74546a)),
38
+ closes [EX-6614](https://searchbroker.atlassian.net/browse/EX-6614)
39
+
40
+ # Change Log
41
+
42
+ All notable changes to this project will be documented in this file. See
43
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
44
+
6
45
  ## [3.0.0-alpha.126](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.125...@empathyco/x-components@3.0.0-alpha.126) (2022-07-07)
7
46
 
8
47
  ### Features
package/docs/API-reference/components/common/layouts/x-components.fixed-header-and-asides-layout.md CHANGED
@@ -24,6 +24,7 @@ Component for use as Layout to be filled with the rest of the components.
24
24
  | <code>main</code> | Slot that is be used for insert content into the Main. | None |
25
25
  | <code>left-aside</code> | Slot that is be used for insert content into the left aside. | None |
26
26
  | <code>right-aside</code> | Slot that is be used for insert content into the right aside. | None |
27
+ | <code>extra-aside</code> | | None |
27
28
  | <code>scroll-to-top</code> | | None |
28
29
 
29
30
  ## Layout
@@ -37,6 +38,8 @@ This component has the following layout with fixed headers and collapsible fixed
37
38
  | | main | |
38
39
  | | | scroll-to-top |
39
40
 
41
+ Additionally it provides an empty slot `extra-aside` to be customized by the user.
42
+
40
43
  ## Design Tokens
41
44
 
42
45
  The component has also the following `Design Tokens` to configure it:
package/docs/API-reference/components/common/layouts/x-components.single-column-layout.md CHANGED
@@ -17,13 +17,14 @@ Component for use as Layout to be filled with the rest of the Components.
17
17
 
18
18
  ## Slots
19
19
 
20
- | Name | Description | Bindings<br />(name - type - description) |
21
- | ----------------------- | ------------------------------------------------------------------ | ----------------------------------------- |
22
- | <code>header</code> | Slot that is used to insert content into the Header. | None |
23
- | <code>sub-header</code> | Slot that can be used to insert content into the Sub Header. | None |
24
- | <code>toolbar</code> | Slot that can be used to insert content into the Toolbar. | None |
25
- | <code>predictive</code> | Slot that can be used to insert content into the Predictive Layer. | None |
26
- | <code>main</code> | Slot that can be used to insert content into the Main. | None |
27
- | <code>floating</code> | Slot that can be used to insert content into the Floating. | None |
28
- | <code>footer</code> | Slot that can be used to insert content into the Footer. | None |
29
- | <code>aside</code> | Slot that can be used to insert content into the Aside. | None |
20
+ | Name | Description | Bindings<br />(name - type - description) |
21
+ | ------------------------ | ------------------------------------------------------------------ | ----------------------------------------- |
22
+ | <code>header</code> | Slot that is used to insert content into the Header. | None |
23
+ | <code>sub-header</code> | Slot that can be used to insert content into the Sub Header. | None |
24
+ | <code>toolbar</code> | Slot that can be used to insert content into the Toolbar. | None |
25
+ | <code>predictive</code> | Slot that can be used to insert content into the Predictive Layer. | None |
26
+ | <code>main</code> | Slot that can be used to insert content into the Main. | None |
27
+ | <code>floating</code> | Slot that can be used to insert content into the Floating. | None |
28
+ | <code>footer</code> | Slot that can be used to insert content into the Footer. | None |
29
+ | <code>aside</code> | Slot that can be used to insert content into the Aside. | None |
30
+ | <code>extra-aside</code> | | None |
package/docs/API-reference/components/history-queries/x-components.my-history.md CHANGED
@@ -18,12 +18,12 @@ they were performed.
18
18
 
19
19
  ## Slots
20
20
 
21
- | Name | Description | Bindings<br />(name - type - description) |
22
- | -------------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
23
- | <code>date</code> | | |
24
- | <code>suggestion</code> | History Query item | **suggestion** <code>Suggestion</code> - History Query suggestion data<br />**index** <code>number</code> - History Query suggestion index |
25
- | <code>suggestion-content</code> | History Query content | **suggestion** <code>Suggestion</code> - History Query suggestion data<br />**index** <code>number</code> - History Query suggestion index |
26
- | <code>suggestion-remove-content</code> | History Query remove button content | **suggestion** <code>Suggestion</code> - History Query suggestion data<br />**index** <code>number</code> - History Query suggestion index |
21
+ | Name | Description | Bindings<br />(name - type - description) |
22
+ | -------------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
23
+ | <code>date</code> | | |
24
+ | <code>suggestion</code> | History Query item | **suggestion** <code>Suggestion</code> - History Query suggestion data<br />**index** <code>number</code> - History Query suggestion index |
25
+ | <code>suggestion-content</code> | History Query content | **suggestion** <code>Suggestion</code> - History Query suggestion data<br />**index** <code>number</code> - History Query suggestion index<br /> |
26
+ | <code>suggestion-remove-content</code> | History Query remove button content | **suggestion** <code>Suggestion</code> - History Query suggestion data<br />**index** <code>number</code> - History Query suggestion index |
27
27
 
28
28
  ## Events
29
29
 
package/docs/build-search-ui/web-archetype-integration-guide.md CHANGED
@@ -54,11 +54,11 @@ Automatic initialization is the easiest way to integrate the Interface&nbsp;X pr
54
54
  1. **Configure the JavaScript snippet** to define either an initialization object or a function.
55
55
  2. **Load and initialize** the Interface&nbsp;X script.
56
56
 
57
- #### Configuring the snippet
57
+ #### Configuring the snippet
58
58
 
59
- First, add the JavaScript snippet configuration to define multiple initialization options, i.e. the API to
60
- use, the language or currency to display, or even the tagging parameters to collect search-related
61
- data to generate conversational search features and analytics.
59
+ First, add the JavaScript snippet configuration to define multiple initialization options, i.e. the
60
+ API to use, the language or currency to display, or even the tagging parameters to collect
61
+ search-related data to generate conversational search features and analytics.
62
62
 
63
63
  Depending on whether you are retrieving **static or dynamic configuration values** in your
64
64
  [snippet configuration](#snippet-configuration), you define an **object** or a **function** to
@@ -121,7 +121,7 @@ following scripts to your HTML:
121
121
  consent: false
122
122
  };
123
123
  </script>
124
- <script src="https://x.empathy.co/my-store/app.js"></script>
124
+ <script src="https://x.empathy.co/my-store/app.js" type="module"></script>
125
125
  ```
126
126
 
127
127
  In the case you want to load the script for the staging environment, you just modify the script
@@ -138,7 +138,7 @@ attribute `src` so that it points to the staging environment as follows:
138
138
  consent: false
139
139
  };
140
140
  </script>
141
- <script src="https://x.staging.empathy.co/my-store/app.js"></script>
141
+ <script src="https://x.staging.empathy.co/my-store/app.js" type="module"></script>
142
142
  ```
143
143
 
144
144
  Thus, when the Interface&nbsp;X JavaScript file is loaded, it retrieves the configuration from the
@@ -150,7 +150,7 @@ On-demand initialization allows you to control when Interface&nbsp;X is loaded.
150
150
 
151
151
  **Steps to initialize the project on demand**
152
152
 
153
- 1. **Load** the Interface&nbsp;X script.
153
+ 1. **Load** the Interface&nbsp;X script.
154
154
  2. **Initialize** Interface&nbsp;X.
155
155
 
156
156
  #### Loading the script
@@ -162,14 +162,14 @@ For example, to load the production version script for the instance _my-store_,
162
162
  following script to your HTML:
163
163
 
164
164
  ```html
165
- <script src="https://x.empathy.co/my-store/app.js"></script>
165
+ <script src="https://x.empathy.co/my-store/app.js" type="module"></script>
166
166
  ```
167
167
 
168
168
  In the case you want to load the script for the staging environment, you just modify the script
169
169
  attribute `src` so that it points to the staging environment as follows:
170
170
 
171
171
  ```html
172
- <script src="https://x.staging.empathy.co/my-store/app.js"></script>
172
+ <script src="https://x.staging.empathy.co/my-store/app.js" type="module"></script>
173
173
  ```
174
174
 
175
175
  #### Initializing Interface&nbsp;X
package/js/components/layouts/fixed-header-and-asides-layout.vue.js CHANGED
@@ -170,6 +170,16 @@ var __vue_render__ = function () {
170
170
  )
171
171
  : _vm._e(),
172
172
  _vm._v(" "),
173
+ _vm._t("extra-aside", function () {
174
+ return [
175
+ _vm.devMode
176
+ ? _c("span", { staticClass: "slot-helper" }, [
177
+ _vm._v("EXTRA ASIDE"),
178
+ ])
179
+ : _vm._e(),
180
+ ]
181
+ }),
182
+ _vm._v(" "),
173
183
  _vm.hasContent("scroll-to-top")
174
184
  ? _c(
175
185
  "div",
@@ -192,7 +202,7 @@ var __vue_render__ = function () {
192
202
  )
193
203
  : _vm._e(),
194
204
  ],
195
- 1
205
+ 2
196
206
  ),
197
207
  ],
198
208
  1
@@ -204,11 +214,11 @@ __vue_render__._withStripped = true;
204
214
  /* style */
205
215
  const __vue_inject_styles__ = function (inject) {
206
216
  if (!inject) return
207
- inject("data-v-e252e204_0", { source: ".dev-mode .slot-helper[data-v-e252e204] {\n font-family: inherit;\n color: grey;\n box-sizing: border-box;\n display: flex;\n height: 100%;\n width: 100%;\n justify-content: center;\n align-items: center;\n border: dashed 1px grey;\n border-radius: 10px;\n}\n.x-layout[data-v-e252e204] {\n display: grid;\n align-content: stretch;\n min-height: 100%;\n max-height: 100%;\n --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout, 1440px)) / 2);\n --x-size-margin-layout: max(\n var(--x-size-min-margin-layout, 20px),\n var(--x-size-margin-max-width)\n );\n grid-template-rows: [page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [main-end page-end];\n grid-template-columns: [page-start] var(--x-size-margin-layout) [max-width-start] 1fr [max-width-end] var(--x-size-margin-layout) [page-end];\n}\n.x-layout__header[data-v-e252e204] {\n position: sticky;\n top: -0.5px;\n z-index: 2;\n grid-row: header;\n grid-column: page;\n max-height: var(--x-size-max-height-layout-header, auto);\n padding: 0 var(--x-size-margin-layout);\n background: var(--x-color-background-layout-header, transparent);\n border-color: var(--x-size-border-color-layout-header, transparent);\n border-width: var(--x-size-border-width-layout-header, 0);\n border-style: solid;\n}\n.x-layout__sub-header[data-v-e252e204] {\n grid-row: sub-header;\n grid-column: page;\n padding: 0 var(--x-size-margin-layout);\n background: var(--x-color-background-layout-sub-header, transparent);\n border-color: var(--x-size-border-color-layout-sub-header, transparent);\n border-width: var(--x-size-border-width-layout-sub-header, 0);\n border-style: solid;\n}\n.x-layout__toolbar[data-v-e252e204] {\n grid-row: toolbar;\n grid-column: max-width;\n}\n.x-layout__main[data-v-e252e204] {\n grid-row: main;\n grid-column: max-width;\n}\n.x-layout__aside[data-v-e252e204] {\n pointer-events: none;\n}\n.x-layout__aside.x-modal[data-v-e252e204] {\n z-index: 3;\n flex-flow: row nowrap;\n}\n.x-layout__aside.x-modal[data-v-e252e204] .x-modal__content {\n background-color: transparent;\n height: 100%;\n width: var(--x-size-width-layout-aside, 300px);\n}\n.x-layout__aside[data-v-e252e204] > *:not(.slot-helper) {\n pointer-events: all;\n}\n.x-layout__aside--right.x-modal[data-v-e252e204] {\n justify-content: flex-end;\n}\n.x-layout__scroll-to-top[data-v-e252e204] {\n position: fixed;\n z-index: 1;\n bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);\n right: var(--x-size-margin-right-layout-scroll-to-top, 16px);\n}\n.x-layout__header-backdrop[data-v-e252e204] {\n grid-row: page;\n grid-column: page;\n position: sticky;\n top: -0.5px;\n z-index: 1;\n height: var(--x-size-height-layout-backdrop, 40vh);\n width: 100%;\n pointer-events: none;\n background-color: var(--x-color-background-layout-header-backdrop, var(--x-color-base-neutral-100, white));\n -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n opacity: 0;\n transition: opacity 0.2s ease-out;\n}\n.x-layout__header-backdrop--is-visible[data-v-e252e204] {\n opacity: 1;\n}", map: undefined, media: undefined });
217
+ inject("data-v-47983f10_0", { source: ".dev-mode .slot-helper[data-v-47983f10] {\n font-family: inherit;\n color: grey;\n box-sizing: border-box;\n display: flex;\n height: 100%;\n width: 100%;\n justify-content: center;\n align-items: center;\n border: dashed 1px grey;\n border-radius: 10px;\n}\n.x-layout[data-v-47983f10] {\n display: grid;\n align-content: stretch;\n min-height: 100%;\n max-height: 100%;\n --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout, 1440px)) / 2);\n --x-size-margin-layout: max(\n var(--x-size-min-margin-layout, 20px),\n var(--x-size-margin-max-width)\n );\n grid-template-rows: [page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [main-end page-end];\n grid-template-columns: [page-start] var(--x-size-margin-layout) [max-width-start] 1fr [max-width-end] var(--x-size-margin-layout) [page-end];\n}\n.x-layout__header[data-v-47983f10] {\n position: sticky;\n top: -0.5px;\n z-index: 2;\n grid-row: header;\n grid-column: page;\n max-height: var(--x-size-max-height-layout-header, auto);\n padding: 0 var(--x-size-margin-layout);\n background: var(--x-color-background-layout-header, transparent);\n border-color: var(--x-size-border-color-layout-header, transparent);\n border-width: var(--x-size-border-width-layout-header, 0);\n border-style: solid;\n}\n.x-layout__sub-header[data-v-47983f10] {\n grid-row: sub-header;\n grid-column: page;\n padding: 0 var(--x-size-margin-layout);\n background: var(--x-color-background-layout-sub-header, transparent);\n border-color: var(--x-size-border-color-layout-sub-header, transparent);\n border-width: var(--x-size-border-width-layout-sub-header, 0);\n border-style: solid;\n}\n.x-layout__toolbar[data-v-47983f10] {\n grid-row: toolbar;\n grid-column: max-width;\n}\n.x-layout__main[data-v-47983f10] {\n grid-row: main;\n grid-column: max-width;\n}\n.x-layout[data-v-47983f10] .x-layout__aside {\n pointer-events: none;\n}\n.x-layout[data-v-47983f10] .x-layout__aside.x-modal {\n z-index: 3;\n flex-flow: row nowrap;\n}\n.x-layout[data-v-47983f10] .x-layout__aside > *:not(.slot-helper) {\n pointer-events: all;\n}\n.x-layout[data-v-47983f10] .x-layout__aside--right.x-modal {\n justify-content: flex-end;\n}\n.x-layout__scroll-to-top[data-v-47983f10] {\n position: fixed;\n z-index: 1;\n bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);\n right: var(--x-size-margin-right-layout-scroll-to-top, 16px);\n}\n.x-layout__header-backdrop[data-v-47983f10] {\n grid-row: page;\n grid-column: page;\n position: sticky;\n top: -0.5px;\n z-index: 1;\n height: var(--x-size-height-layout-backdrop, 40vh);\n width: 100%;\n pointer-events: none;\n background-color: var(--x-color-background-layout-header-backdrop, var(--x-color-base-neutral-100, white));\n -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n opacity: 0;\n transition: opacity 0.2s ease-out;\n}\n.x-layout__header-backdrop--is-visible[data-v-47983f10] {\n opacity: 1;\n}\n[data-v-47983f10] .x-layout__aside .x-modal__content {\n background-color: transparent;\n height: 100%;\n width: var(--x-size-width-layout-aside, 300px);\n}", map: undefined, media: undefined });
208
218
 
209
219
  };
210
220
  /* scoped */
211
- const __vue_scope_id__ = "data-v-e252e204";
221
+ const __vue_scope_id__ = "data-v-47983f10";
212
222
  /* module identifier */
213
223
  const __vue_module_identifier__ = undefined;
214
224
  /* functional template */
package/js/components/layouts/fixed-header-and-asides-layout.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fixed-header-and-asides-layout.vue.js","sources":["../../../../src/components/layouts/fixed-header-and-asides-layout.vue"],"sourcesContent":["<template>\n <MainScroll>\n <Scroll\n @scroll=\"setPosition\"\n id=\"main-scroll\"\n class=\"x-layout x-layout--fixed-header-and-asides\"\n :class=\"{ 'dev-mode': devMode }\"\n >\n <div\n key=\"header-backdrop\"\n class=\"x-layout__header-backdrop\"\n :class=\"{ 'x-layout__header-backdrop--is-visible': isBackdropVisible }\"\n />\n\n <header\n v-if=\"hasContent('header')\"\n key=\"header\"\n class=\"x-layout__header x-list x-list--horizontal\"\n >\n <!-- @slot Slot that is be used for insert content into the Header. -->\n <slot name=\"header\">\n <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n </slot>\n </header>\n\n <div v-if=\"hasContent('sub-header')\" key=\"sub-header\" class=\"x-layout__sub-header\">\n <div class=\"x-layout__sub-header-content\">\n <!-- @slot Slot that can be used to insert content into below the header. -->\n <slot name=\"sub-header\">\n <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n </slot>\n </div>\n </div>\n\n <section v-if=\"hasContent('toolbar')\" key=\"toolbar\" class=\"x-layout__toolbar\">\n <slot name=\"toolbar\">\n <!-- @slot Slot that can be used to insert content above the main. -->\n <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n </slot>\n </section>\n\n <main v-if=\"hasContent('main')\" key=\"main\" class=\"x-layout__main x-list x-list--vertical\">\n <!-- @slot Slot that is be used for insert content into the Main. -->\n <slot name=\"main\">\n <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n </slot>\n </main>\n\n <BaseIdModal\n v-if=\"hasContent('left-aside')\"\n key=\"left-aside\"\n :animation=\"leftAsideAnimation\"\n modalId=\"left-aside\"\n class=\"x-layout__aside x-layout__aside--left\"\n >\n <!-- @slot Slot that is be used for insert content into the left aside. -->\n <slot name=\"left-aside\">\n <span v-if=\"devMode\" class=\"slot-helper\">LEFT ASIDE</span>\n </slot>\n </BaseIdModal>\n\n <BaseIdModal\n v-if=\"hasContent('right-aside')\"\n key=\"right-aside\"\n :animation=\"rightAsideAnimation\"\n modalId=\"right-aside\"\n class=\"x-layout__aside x-layout__aside--right\"\n >\n <!-- @slot Slot that is be used for insert content into the right aside. -->\n <slot name=\"right-aside\">\n <span v-if=\"devMode\" class=\"slot-helper\">RIGHT ASIDE</span>\n </slot>\n </BaseIdModal>\n\n <div v-if=\"hasContent('scroll-to-top')\" key=\"scroll-to-top\" class=\"x-layout__scroll-to-top\">\n <slot name=\"scroll-to-top\">\n <span v-if=\"devMode\" class=\"slot-helper\">SCROLL TO TOP</span>\n </slot>\n </div>\n </Scroll>\n </MainScroll>\n</template>\n\n<script lang=\"ts\">\n import { Component } from 'vue-property-decorator';\n import { mixins } from 'vue-class-component';\n import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';\n import BaseIdModal from '../modals/base-id-modal.vue';\n import Scroll from '../../x-modules/scroll/components/scroll.vue';\n import LayoutsMixin from './layouts.mixin';\n\n /**\n * Component for use as Layout to be filled with the rest of the components.\n *\n * @public\n */\n @Component({\n components: {\n BaseIdModal,\n MainScroll,\n Scroll\n }\n })\n export default class FixedHeaderAndAsidesLayout extends mixins(LayoutsMixin) {\n protected scrollPosition = 0;\n protected rightAsideAnimation = animateTranslate('right');\n protected leftAsideAnimation = animateTranslate('left');\n\n protected setPosition(position: number): void {\n this.scrollPosition = position;\n }\n\n protected get isBackdropVisible(): boolean {\n return this.scrollPosition > 0;\n }\n }\n</script>\n\n<style scoped lang=\"scss\">\n @import '../../design-system/utilities/dev-mode';\n\n .x-layout {\n // custom properties\n display: grid;\n align-content: stretch;\n min-height: 100%;\n\n // layout\n max-height: 100%;\n --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout, 1440px)) / 2);\n --x-size-margin-layout: max(\n var(--x-size-min-margin-layout, 20px),\n var(--x-size-margin-max-width)\n );\n\n grid-template-rows:\n [page-start header-start]\n auto\n [header-end sub-header-start]\n auto\n [sub-header-end toolbar-start]\n auto\n [toolbar-end main-start]\n 1fr\n [main-end page-end];\n\n grid-template-columns:\n [page-start]\n var(--x-size-margin-layout)\n [max-width-start]\n 1fr\n [max-width-end]\n var(--x-size-margin-layout)\n [page-end];\n\n &__header {\n // layout\n position: sticky;\n top: -0.5px;\n z-index: 2;\n grid-row: header;\n grid-column: page;\n max-height: var(--x-size-max-height-layout-header, auto);\n padding: 0 var(--x-size-margin-layout);\n\n //color\n background: var(--x-color-background-layout-header, transparent);\n border-color: var(--x-size-border-color-layout-header, transparent);\n\n // border\n border-width: var(--x-size-border-width-layout-header, 0);\n border-style: solid;\n }\n\n &__sub-header {\n // layout\n grid-row: sub-header;\n grid-column: page;\n padding: 0 var(--x-size-margin-layout);\n\n //color\n background: var(--x-color-background-layout-sub-header, transparent);\n border-color: var(--x-size-border-color-layout-sub-header, transparent);\n\n // border\n border-width: var(--x-size-border-width-layout-sub-header, 0);\n border-style: solid;\n }\n\n &__toolbar {\n // layout\n grid-row: toolbar;\n grid-column: max-width;\n }\n\n &__main {\n // layout\n grid-row: main;\n grid-column: max-width;\n }\n\n &__aside {\n &.x-modal {\n // layout\n z-index: 3;\n flex-flow: row nowrap;\n\n ::v-deep .x-modal__content {\n background-color: transparent;\n height: 100%;\n width: var(--x-size-width-layout-aside, 300px);\n }\n }\n\n // others\n pointer-events: none;\n ::v-deep > *:not(.slot-helper) {\n pointer-events: all;\n }\n\n &--right.x-modal {\n justify-content: flex-end;\n }\n }\n\n &__scroll-to-top {\n position: fixed;\n z-index: 1;\n bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);\n right: var(--x-size-margin-right-layout-scroll-to-top, 16px);\n }\n\n &__header-backdrop {\n // layout\n grid-row: page;\n grid-column: page;\n position: sticky;\n top: -0.5px;\n z-index: 1;\n height: var(--x-size-height-layout-backdrop, 40vh);\n width: 100%;\n pointer-events: none;\n\n // color\n background-color: var(\n --x-color-background-layout-header-backdrop,\n var(--x-color-base-neutral-100, white)\n );\n mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n\n // transition\n opacity: 0;\n transition: opacity 0.2s ease-out;\n\n &--is-visible {\n opacity: 1;\n }\n }\n }\n</style>\n\n<docs lang=\"mdx\">\n## Layout\n\nThis component has the following layout with fixed headers and collapsible fixed asides:\n\n| | header | |\n| :--------: | :--------: | :-----------: |\n| left-aside | sub-header | right-aside |\n| | toolbar | |\n| | main | |\n| | | scroll-to-top |\n\n## Design Tokens\n\nThe component has also the following `Design Tokens` to configure it:\n\n| token | default value |\n| :-----------------------------------------: | :-----------: |\n| --x-size-height-layout-backdrop | 40vh |\n| --x-size-width-layout-aside | 300px |\n| --x-size-min-margin-layout | 20px |\n| --x-size-max-height-layout-header | auto |\n| --x-size-max-width-layout | 1440px |\n| --x-color-background-layout-header-backdrop | white |\n| --x-color-background-layout-header | transparent |\n| --x-size-border-color-layout-header | transparent |\n| --x-size-border-width-layout-header | 0px |\n| --x-color-background-layout-sub-header | transparent |\n| --x-size-border-color-layout-sub-header | transparent |\n| --x-size-border-width-layout-sub-header | 0px |\n\n| token | use |\n| :-----------------------------------------: | :---------------------------------------: |\n| --x-size-height-layout-backdrop | The height for header gradient backdrop |\n| --x-size-width-layout-aside | The width of the asides |\n| --x-size-min-margin-layout | The min horizontal margin for the Layout |\n| --x-size-max-height-layout-header | The max height for the Layout Header |\n| --x-size-max-width-layout | The max width for the Layout |\n| --x-color-background-layout-header-backdrop | The background color of the head backdrop |\n| --x-color-background-layout-header | The background color of the header |\n| --x-size-border-color-layout-header | The border color of the header |\n| --x-size-border-width-layout-header | The border with of the header |\n| --x-color-background-layout-sub-header | The background color of the sub header |\n| --x-size-border-color-layout-sub-header | The border color of the sub header |\n| --x-size-border-width-layout-sub-header | The border with of the sub header |\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"fixed-header-and-asides-layout.vue.js","sources":["../../../../src/components/layouts/fixed-header-and-asides-layout.vue"],"sourcesContent":["<template>\n <MainScroll>\n <Scroll\n @scroll=\"setPosition\"\n id=\"main-scroll\"\n class=\"x-layout x-layout--fixed-header-and-asides\"\n :class=\"{ 'dev-mode': devMode }\"\n >\n <div\n key=\"header-backdrop\"\n class=\"x-layout__header-backdrop\"\n :class=\"{ 'x-layout__header-backdrop--is-visible': isBackdropVisible }\"\n />\n\n <header\n v-if=\"hasContent('header')\"\n key=\"header\"\n class=\"x-layout__header x-list x-list--horizontal\"\n >\n <!-- @slot Slot that is be used for insert content into the Header. -->\n <slot name=\"header\">\n <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n </slot>\n </header>\n\n <div v-if=\"hasContent('sub-header')\" key=\"sub-header\" class=\"x-layout__sub-header\">\n <div class=\"x-layout__sub-header-content\">\n <!-- @slot Slot that can be used to insert content into below the header. -->\n <slot name=\"sub-header\">\n <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n </slot>\n </div>\n </div>\n\n <section v-if=\"hasContent('toolbar')\" key=\"toolbar\" class=\"x-layout__toolbar\">\n <slot name=\"toolbar\">\n <!-- @slot Slot that can be used to insert content above the main. -->\n <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n </slot>\n </section>\n\n <main v-if=\"hasContent('main')\" key=\"main\" class=\"x-layout__main x-list x-list--vertical\">\n <!-- @slot Slot that is be used for insert content into the Main. -->\n <slot name=\"main\">\n <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n </slot>\n </main>\n\n <BaseIdModal\n v-if=\"hasContent('left-aside')\"\n key=\"left-aside\"\n :animation=\"leftAsideAnimation\"\n modalId=\"left-aside\"\n class=\"x-layout__aside x-layout__aside--left\"\n >\n <!-- @slot Slot that is be used for insert content into the left aside. -->\n <slot name=\"left-aside\">\n <span v-if=\"devMode\" class=\"slot-helper\">LEFT ASIDE</span>\n </slot>\n </BaseIdModal>\n\n <BaseIdModal\n v-if=\"hasContent('right-aside')\"\n key=\"right-aside\"\n :animation=\"rightAsideAnimation\"\n modalId=\"right-aside\"\n class=\"x-layout__aside x-layout__aside--right\"\n >\n <!-- @slot Slot that is be used for insert content into the right aside. -->\n <slot name=\"right-aside\">\n <span v-if=\"devMode\" class=\"slot-helper\">RIGHT ASIDE</span>\n </slot>\n </BaseIdModal>\n\n <slot name=\"extra-aside\">\n <span v-if=\"devMode\" class=\"slot-helper\">EXTRA ASIDE</span>\n </slot>\n\n <div v-if=\"hasContent('scroll-to-top')\" key=\"scroll-to-top\" class=\"x-layout__scroll-to-top\">\n <slot name=\"scroll-to-top\">\n <span v-if=\"devMode\" class=\"slot-helper\">SCROLL TO TOP</span>\n </slot>\n </div>\n </Scroll>\n </MainScroll>\n</template>\n\n<script lang=\"ts\">\n import { Component } from 'vue-property-decorator';\n import { mixins } from 'vue-class-component';\n import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';\n import BaseIdModal from '../modals/base-id-modal.vue';\n import Scroll from '../../x-modules/scroll/components/scroll.vue';\n import LayoutsMixin from './layouts.mixin';\n\n /**\n * Component for use as Layout to be filled with the rest of the components.\n *\n * @public\n */\n @Component({\n components: {\n BaseIdModal,\n MainScroll,\n Scroll\n }\n })\n export default class FixedHeaderAndAsidesLayout extends mixins(LayoutsMixin) {\n protected scrollPosition = 0;\n protected rightAsideAnimation = animateTranslate('right');\n protected leftAsideAnimation = animateTranslate('left');\n\n protected setPosition(position: number): void {\n this.scrollPosition = position;\n }\n\n protected get isBackdropVisible(): boolean {\n return this.scrollPosition > 0;\n }\n }\n</script>\n\n<style scoped lang=\"scss\">\n @import '../../design-system/utilities/dev-mode';\n\n .x-layout {\n // custom properties\n display: grid;\n align-content: stretch;\n min-height: 100%;\n\n // layout\n max-height: 100%;\n --x-size-margin-max-width: calc((100vw - var(--x-size-max-width-layout, 1440px)) / 2);\n --x-size-margin-layout: max(\n var(--x-size-min-margin-layout, 20px),\n var(--x-size-margin-max-width)\n );\n\n grid-template-rows:\n [page-start header-start]\n auto\n [header-end sub-header-start]\n auto\n [sub-header-end toolbar-start]\n auto\n [toolbar-end main-start]\n 1fr\n [main-end page-end];\n\n grid-template-columns:\n [page-start]\n var(--x-size-margin-layout)\n [max-width-start]\n 1fr\n [max-width-end]\n var(--x-size-margin-layout)\n [page-end];\n\n &__header {\n // layout\n position: sticky;\n top: -0.5px;\n z-index: 2;\n grid-row: header;\n grid-column: page;\n max-height: var(--x-size-max-height-layout-header, auto);\n padding: 0 var(--x-size-margin-layout);\n\n //color\n background: var(--x-color-background-layout-header, transparent);\n border-color: var(--x-size-border-color-layout-header, transparent);\n\n // border\n border-width: var(--x-size-border-width-layout-header, 0);\n border-style: solid;\n }\n\n &__sub-header {\n // layout\n grid-row: sub-header;\n grid-column: page;\n padding: 0 var(--x-size-margin-layout);\n\n //color\n background: var(--x-color-background-layout-sub-header, transparent);\n border-color: var(--x-size-border-color-layout-sub-header, transparent);\n\n // border\n border-width: var(--x-size-border-width-layout-sub-header, 0);\n border-style: solid;\n }\n\n &__toolbar {\n // layout\n grid-row: toolbar;\n grid-column: max-width;\n }\n\n &__main {\n // layout\n grid-row: main;\n grid-column: max-width;\n }\n\n ::v-deep .x-layout__aside {\n &.x-modal {\n // layout\n z-index: 3;\n flex-flow: row nowrap;\n }\n\n // others\n pointer-events: none;\n > *:not(.slot-helper) {\n pointer-events: all;\n }\n\n &--right.x-modal {\n justify-content: flex-end;\n }\n }\n\n &__scroll-to-top {\n position: fixed;\n z-index: 1;\n bottom: var(--x-size-margin-bottom-layout-scroll-to-top, 16px);\n right: var(--x-size-margin-right-layout-scroll-to-top, 16px);\n }\n\n &__header-backdrop {\n // layout\n grid-row: page;\n grid-column: page;\n position: sticky;\n top: -0.5px;\n z-index: 1;\n height: var(--x-size-height-layout-backdrop, 40vh);\n width: 100%;\n pointer-events: none;\n\n // color\n background-color: var(\n --x-color-background-layout-header-backdrop,\n var(--x-color-base-neutral-100, white)\n );\n mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n\n // transition\n opacity: 0;\n transition: opacity 0.2s ease-out;\n\n &--is-visible {\n opacity: 1;\n }\n }\n }\n\n ::v-deep .x-layout__aside {\n .x-modal__content {\n background-color: transparent;\n height: 100%;\n width: var(--x-size-width-layout-aside, 300px);\n }\n }\n</style>\n\n<docs lang=\"mdx\">\n## Layout\n\nThis component has the following layout with fixed headers and collapsible fixed asides:\n\n| | header | |\n| :--------: | :--------: | :-----------: |\n| left-aside | sub-header | right-aside |\n| | toolbar | |\n| | main | |\n| | | scroll-to-top |\n\nAdditionally it provides an empty slot `extra-aside` to be customized by the user.\n\n## Design Tokens\n\nThe component has also the following `Design Tokens` to configure it:\n\n| token | default value |\n| :-----------------------------------------: | :-----------: |\n| --x-size-height-layout-backdrop | 40vh |\n| --x-size-width-layout-aside | 300px |\n| --x-size-min-margin-layout | 20px |\n| --x-size-max-height-layout-header | auto |\n| --x-size-max-width-layout | 1440px |\n| --x-color-background-layout-header-backdrop | white |\n| --x-color-background-layout-header | transparent |\n| --x-size-border-color-layout-header | transparent |\n| --x-size-border-width-layout-header | 0px |\n| --x-color-background-layout-sub-header | transparent |\n| --x-size-border-color-layout-sub-header | transparent |\n| --x-size-border-width-layout-sub-header | 0px |\n\n| token | use |\n| :-----------------------------------------: | :---------------------------------------: |\n| --x-size-height-layout-backdrop | The height for header gradient backdrop |\n| --x-size-width-layout-aside | The width of the asides |\n| --x-size-min-margin-layout | The min horizontal margin for the Layout |\n| --x-size-max-height-layout-header | The max height for the Layout Header |\n| --x-size-max-width-layout | The max width for the Layout |\n| --x-color-background-layout-header-backdrop | The background color of the head backdrop |\n| --x-color-background-layout-header | The background color of the header |\n| --x-size-border-color-layout-header | The border color of the header |\n| --x-size-border-width-layout-header | The border with of the header |\n| --x-color-background-layout-sub-header | The background color of the sub header |\n| --x-size-border-color-layout-sub-header | The border color of the sub header |\n| --x-size-border-width-layout-sub-header | The border with of the sub header |\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/js/components/layouts/fixed-header-and-asides-layout.vue_rollup-plugin-vue_script.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fixed-header-and-asides-layout.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/layouts/fixed-header-and-asides-layout.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Component } from 'vue-property-decorator';\nimport { mixins } from 'vue-class-component';\nimport MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\nimport { animateTranslate } from '../animations/animate-translate/animate-translate.factory';\nimport BaseIdModal from '../modals/base-id-modal.vue';\nimport Scroll from '../../x-modules/scroll/components/scroll.vue';\nimport LayoutsMixin from './layouts.mixin';\n\n/**\n * Component for use as Layout to be filled with the rest of the components.\n *\n * @public\n */\n@Component({\n components: {\n BaseIdModal,\n MainScroll,\n Scroll\n }\n})\nexport default class FixedHeaderAndAsidesLayout extends mixins(LayoutsMixin) {\n protected scrollPosition = 0;\n protected rightAsideAnimation = animateTranslate('right');\n protected leftAsideAnimation = animateTranslate('left');\n\n protected setPosition(position: number): void {\n this.scrollPosition = position;\n }\n\n protected get isBackdropVisible(): boolean {\n return this.scrollPosition > 0;\n }\n}\n"],"names":["BaseIdModal","MainScroll","Scroll"],"mappings":";;;;;;;;;AA4FA;;;;;AAYA,IAAqB,0BAA0B,GAA/C,MAAqB,0BAA2B,SAAQ,MAAM,CAAC,YAAY,CAAC;IAA5E;;QACY,mBAAc,GAAG,CAAC,CAAC;QACnB,wBAAmB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;QAChD,uBAAkB,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;KASzD;IAPW,WAAW,CAAC,QAAgB;QACpC,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;KAChC;IAED,IAAc,iBAAiB;QAC7B,OAAO,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;KAChC;CACF,CAAA;AAZoB,0BAA0B;IAP9C,SAAS,CAAC;QACT,UAAU,EAAE;yBACVA,iBAAW;wBACXC,mBAAU;oBACVC,mBAAM;SACP;KACF,CAAC;GACmB,0BAA0B,CAY9C;aAZoB,0BAA0B;;;;"}
1
+ {"version":3,"file":"fixed-header-and-asides-layout.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/layouts/fixed-header-and-asides-layout.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Component } from 'vue-property-decorator';\nimport { mixins } from 'vue-class-component';\nimport MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\nimport { animateTranslate } from '../animations/animate-translate/animate-translate.factory';\nimport BaseIdModal from '../modals/base-id-modal.vue';\nimport Scroll from '../../x-modules/scroll/components/scroll.vue';\nimport LayoutsMixin from './layouts.mixin';\n\n/**\n * Component for use as Layout to be filled with the rest of the components.\n *\n * @public\n */\n@Component({\n components: {\n BaseIdModal,\n MainScroll,\n Scroll\n }\n})\nexport default class FixedHeaderAndAsidesLayout extends mixins(LayoutsMixin) {\n protected scrollPosition = 0;\n protected rightAsideAnimation = animateTranslate('right');\n protected leftAsideAnimation = animateTranslate('left');\n\n protected setPosition(position: number): void {\n this.scrollPosition = position;\n }\n\n protected get isBackdropVisible(): boolean {\n return this.scrollPosition > 0;\n }\n}\n"],"names":["BaseIdModal","MainScroll","Scroll"],"mappings":";;;;;;;;;AAgGA;;;;;AAYA,IAAqB,0BAA0B,GAA/C,MAAqB,0BAA2B,SAAQ,MAAM,CAAC,YAAY,CAAC;IAA5E;;QACY,mBAAc,GAAG,CAAC,CAAC;QACnB,wBAAmB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;QAChD,uBAAkB,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;KASzD;IAPW,WAAW,CAAC,QAAgB;QACpC,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;KAChC;IAED,IAAc,iBAAiB;QAC7B,OAAO,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;KAChC;CACF,CAAA;AAZoB,0BAA0B;IAP9C,SAAS,CAAC;QACT,UAAU,EAAE;yBACVA,iBAAW;wBACXC,mBAAU;oBACVC,mBAAM;SACP;KACF,CAAC;GACmB,0BAA0B,CAY9C;aAZoB,0BAA0B;;;;"}
package/js/components/layouts/single-column-layout.vue.js CHANGED
@@ -198,8 +198,18 @@ var __vue_render__ = function () {
198
198
  2
199
199
  )
200
200
  : _vm._e(),
201
+ _vm._v(" "),
202
+ _vm._t("extra-aside", function () {
203
+ return [
204
+ _vm.devMode
205
+ ? _c("span", { staticClass: "slot-helper" }, [
206
+ _vm._v("EXTRA ASIDE"),
207
+ ])
208
+ : _vm._e(),
209
+ ]
210
+ }),
201
211
  ],
202
- 1
212
+ 2
203
213
  )
204
214
  };
205
215
  var __vue_staticRenderFns__ = [];
@@ -208,11 +218,11 @@ __vue_render__._withStripped = true;
208
218
  /* style */
209
219
  const __vue_inject_styles__ = function (inject) {
210
220
  if (!inject) return
211
- inject("data-v-2fc90c9a_0", { source: ".dev-mode .slot-helper[data-v-2fc90c9a] {\n font-family: inherit;\n color: grey;\n box-sizing: border-box;\n display: flex;\n height: 100%;\n width: 100%;\n justify-content: center;\n align-items: center;\n border: dashed 1px grey;\n border-radius: 10px;\n}\n.x-layout[data-v-2fc90c9a] {\n display: grid;\n align-content: stretch;\n justify-content: stretch;\n height: 100%;\n grid-template-rows: [page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [floating-start] auto [main-end floating-end footer-start] auto [footer-end page-end];\n grid-template-columns: 1fr;\n}\n.x-layout > *[data-v-2fc90c9a] {\n grid-column: 1/-1;\n min-width: 0;\n min-height: 0;\n display: flex;\n}\n.x-layout__header[data-v-2fc90c9a] {\n grid-row: header;\n z-index: 1;\n}\n.x-layout__sub-header[data-v-2fc90c9a] {\n grid-row: sub-header;\n z-index: 1;\n}\n.x-layout__toolbar[data-v-2fc90c9a] {\n grid-row: toolbar;\n z-index: 1;\n}\n.x-layout__predictive[data-v-2fc90c9a] {\n grid-row-start: header-end;\n grid-row-end: page-end;\n flex-flow: column nowrap;\n z-index: 2;\n}\n.x-layout__main[data-v-2fc90c9a] {\n grid-row: main;\n flex-flow: column nowrap;\n}\n.x-layout__floating[data-v-2fc90c9a] {\n grid-row: floating;\n z-index: 1;\n}\n.x-layout__footer[data-v-2fc90c9a] {\n grid-row: footer;\n}\n.x-layout__aside[data-v-2fc90c9a] {\n grid-row: page;\n z-index: 3;\n}\n[dir=\"ltr\"] .x-layout__aside[data-v-2fc90c9a] .x-modal__content {\n margin-left: var(--x-size-margin-left-layout-single-column, 0);\n}\n[dir=\"rtl\"] .x-layout__aside[data-v-2fc90c9a] .x-modal__content {\n margin-right: var(--x-size-margin-left-layout-single-column, 0);\n}\n.x-layout__aside[data-v-2fc90c9a] .x-modal__content {\n width: 100%;\n height: 100%;\n}\n.x-layout__predictive[data-v-2fc90c9a], .x-layout__floating[data-v-2fc90c9a], .x-layout__aside[data-v-2fc90c9a],\n.x-layout .slot-helper[data-v-2fc90c9a] {\n pointer-events: none;\n}\n.x-layout__predictive[data-v-2fc90c9a] > *, .x-layout__floating[data-v-2fc90c9a] > *, .x-layout__aside[data-v-2fc90c9a] > *,\n.x-layout .slot-helper[data-v-2fc90c9a] > * {\n pointer-events: all;\n}\n.x-layout__predictive[data-v-2fc90c9a] .x-list, .x-layout__floating[data-v-2fc90c9a] .x-list, .x-layout__aside[data-v-2fc90c9a] .x-list,\n.x-layout .slot-helper[data-v-2fc90c9a] .x-list {\n pointer-events: none;\n}\n.x-layout__predictive[data-v-2fc90c9a] .x-list > *, .x-layout__floating[data-v-2fc90c9a] .x-list > *, .x-layout__aside[data-v-2fc90c9a] .x-list > *,\n.x-layout .slot-helper[data-v-2fc90c9a] .x-list > * {\n pointer-events: all;\n}", map: undefined, media: undefined });
221
+ inject("data-v-f30a2692_0", { source: ".dev-mode .slot-helper[data-v-f30a2692] {\n font-family: inherit;\n color: grey;\n box-sizing: border-box;\n display: flex;\n height: 100%;\n width: 100%;\n justify-content: center;\n align-items: center;\n border: dashed 1px grey;\n border-radius: 10px;\n}\n.x-layout[data-v-f30a2692] {\n display: grid;\n align-content: stretch;\n justify-content: stretch;\n height: 100%;\n grid-template-rows: [page-start header-start] auto [header-end sub-header-start] auto [sub-header-end toolbar-start] auto [toolbar-end main-start] 1fr [floating-start] auto [main-end floating-end footer-start] auto [footer-end page-end];\n grid-template-columns: 1fr;\n}\n.x-layout > *[data-v-f30a2692] {\n grid-column: 1/-1;\n min-width: 0;\n min-height: 0;\n display: flex;\n}\n.x-layout__header[data-v-f30a2692] {\n grid-row: header;\n z-index: 1;\n}\n.x-layout__sub-header[data-v-f30a2692] {\n grid-row: sub-header;\n z-index: 1;\n}\n.x-layout__toolbar[data-v-f30a2692] {\n grid-row: toolbar;\n z-index: 1;\n}\n.x-layout__predictive[data-v-f30a2692] {\n grid-row-start: header-end;\n grid-row-end: page-end;\n flex-flow: column nowrap;\n z-index: 2;\n}\n.x-layout__main[data-v-f30a2692] {\n grid-row: main;\n flex-flow: column nowrap;\n}\n.x-layout__floating[data-v-f30a2692] {\n grid-row: floating;\n z-index: 1;\n}\n.x-layout__footer[data-v-f30a2692] {\n grid-row: footer;\n}\n.x-layout[data-v-f30a2692] .x-layout__aside {\n grid-row: page;\n z-index: 3;\n pointer-events: none;\n}\n[dir=\"ltr\"] .x-layout[data-v-f30a2692] .x-layout__aside .x-modal__content {\n margin-left: var(--x-size-margin-left-layout-single-column, 0);\n}\n[dir=\"rtl\"] .x-layout[data-v-f30a2692] .x-layout__aside .x-modal__content {\n margin-right: var(--x-size-margin-left-layout-single-column, 0);\n}\n.x-layout[data-v-f30a2692] .x-layout__aside .x-modal__content {\n width: 100%;\n height: 100%;\n}\n.x-layout__predictive[data-v-f30a2692] , .x-layout__floating[data-v-f30a2692] ,\n.x-layout[data-v-f30a2692] .x-layout__aside,\n.x-layout .slot-helper[data-v-f30a2692] {\n pointer-events: none;\n}\n.x-layout__predictive[data-v-f30a2692] > *, .x-layout__floating[data-v-f30a2692] > *,\n.x-layout[data-v-f30a2692] .x-layout__aside > *,\n.x-layout .slot-helper[data-v-f30a2692] > * {\n pointer-events: all;\n}\n.x-layout__predictive[data-v-f30a2692] .x-list, .x-layout__floating[data-v-f30a2692] .x-list,\n.x-layout[data-v-f30a2692] .x-layout__aside .x-list,\n.x-layout .slot-helper[data-v-f30a2692] .x-list {\n pointer-events: none;\n}\n.x-layout__predictive[data-v-f30a2692] .x-list > *, .x-layout__floating[data-v-f30a2692] .x-list > *,\n.x-layout[data-v-f30a2692] .x-layout__aside .x-list > *,\n.x-layout .slot-helper[data-v-f30a2692] .x-list > * {\n pointer-events: all;\n}", map: undefined, media: undefined });
212
222
 
213
223
  };
214
224
  /* scoped */
215
- const __vue_scope_id__ = "data-v-2fc90c9a";
225
+ const __vue_scope_id__ = "data-v-f30a2692";
216
226
  /* module identifier */
217
227
  const __vue_module_identifier__ = undefined;
218
228
  /* functional template */
package/js/components/layouts/single-column-layout.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"single-column-layout.vue.js","sources":["../../../../src/components/layouts/single-column-layout.vue"],"sourcesContent":["<template>\n <div class=\"x-layout x-layout--single-column\" :class=\"{ 'dev-mode': devMode }\">\n <header v-if=\"hasContent('header')\" class=\"x-layout__header x-list x-list--horizontal\">\n <!-- @slot Slot that is used to insert content into the Header. -->\n <slot name=\"header\">\n <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n </slot>\n </header>\n\n <div v-if=\"hasContent('sub-header')\" class=\"x-layout__sub-header x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Sub Header. -->\n <slot name=\"sub-header\">\n <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n </slot>\n </div>\n\n <div v-if=\"hasContent('toolbar')\" class=\"x-layout__toolbar x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Toolbar. -->\n <slot name=\"toolbar\">\n <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n </slot>\n </div>\n\n <div v-if=\"hasContent('predictive')\" class=\"x-layout__predictive x-list x-list--vertical\">\n <BaseScroll class=\"x-layout__predictive-scroll x-list x-list--vertical x-list__item--expand\">\n <!-- @slot Slot that can be used to insert content into the Predictive Layer. -->\n <slot name=\"predictive\">\n <span v-if=\"devMode\" class=\"slot-helper\">PREDICTIVE</span>\n </slot>\n </BaseScroll>\n </div>\n\n <main v-if=\"hasContent('main')\" class=\"x-layout__main\">\n <MainScroll>\n <Scroll id=\"main-scroll\" class=\"x-layout__main-scroll x-list x-list--vertical\">\n <!-- @slot Slot that can be used to insert content into the Main. -->\n <slot name=\"main\">\n <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n </slot>\n </Scroll>\n </MainScroll>\n </main>\n\n <div v-if=\"hasContent('floating')\" class=\"x-layout__floating x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Floating. -->\n <slot name=\"floating\">\n <span v-if=\"devMode\" class=\"slot-helper\">FLOATING</span>\n </slot>\n </div>\n\n <footer v-if=\"hasContent('footer')\" class=\"x-layout__footer x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Footer. -->\n <slot name=\"footer\">\n <span v-if=\"devMode\" class=\"slot-helper\">FOOTER</span>\n </slot>\n </footer>\n\n <BaseIdModal\n v-if=\"hasContent('aside')\"\n :animation=\"asideAnimation\"\n modalId=\"aside-modal\"\n class=\"x-layout__aside\"\n >\n <!-- @slot Slot that can be used to insert content into the Aside. -->\n <slot name=\"aside\">\n <span v-if=\"devMode\" class=\"slot-helper\">ASIDE</span>\n </slot>\n </BaseIdModal>\n </div>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { mixins } from 'vue-class-component';\n import { Component, Prop } from 'vue-property-decorator';\n import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n import Scroll from '../../x-modules/scroll/components/scroll.vue';\n import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';\n import BaseIdModal from '../modals/base-id-modal.vue';\n import BaseScroll from '../scroll/base-scroll.vue';\n import LayoutsMixin from './layouts.mixin';\n\n /**\n * Component for use as Layout to be filled with the rest of the Components.\n *\n * @public\n */\n @Component({\n components: { BaseIdModal, BaseScroll, MainScroll, Scroll }\n })\n export default class SingleColumnLayout extends mixins(LayoutsMixin) {\n /**\n * The animation used for the Main Aside.\n *\n * @public\n */\n @Prop({ default: () => animateTranslate('right') })\n protected asideAnimation!: Vue;\n }\n</script>\n\n<style scoped lang=\"scss\">\n @import '../../design-system/utilities/dev-mode';\n\n .x-layout {\n display: grid;\n align-content: stretch;\n justify-content: stretch;\n height: 100%;\n\n grid-template-rows:\n [page-start header-start]\n auto\n [header-end sub-header-start]\n auto\n [sub-header-end toolbar-start]\n auto\n [toolbar-end main-start]\n 1fr\n [floating-start]\n auto\n [main-end floating-end footer-start]\n auto\n [footer-end page-end];\n\n grid-template-columns: 1fr;\n\n > * {\n grid-column: 1/-1;\n min-width: 0;\n min-height: 0;\n display: flex;\n }\n\n &__header {\n grid-row: header;\n z-index: 1;\n }\n\n &__sub-header {\n grid-row: sub-header;\n z-index: 1;\n }\n\n &__toolbar {\n grid-row: toolbar;\n z-index: 1;\n }\n\n &__predictive {\n grid-row-start: header-end;\n grid-row-end: page-end;\n flex-flow: column nowrap;\n z-index: 2;\n }\n\n &__main {\n grid-row: main;\n flex-flow: column nowrap;\n }\n\n &__floating {\n grid-row: floating;\n z-index: 1;\n }\n\n &__footer {\n grid-row: footer;\n }\n\n &__aside {\n grid-row: page;\n z-index: 3;\n\n ::v-deep .x-modal__content {\n width: 100%;\n height: 100%;\n margin-inline-start: var(--x-size-margin-left-layout-single-column, 0);\n }\n }\n\n &__predictive,\n &__floating,\n &__aside,\n .slot-helper {\n pointer-events: none;\n\n ::v-deep > * {\n pointer-events: all;\n }\n\n ::v-deep .x-list {\n pointer-events: none;\n\n > * {\n pointer-events: all;\n }\n }\n }\n }\n</style>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"single-column-layout.vue.js","sources":["../../../../src/components/layouts/single-column-layout.vue"],"sourcesContent":["<template>\n <div class=\"x-layout x-layout--single-column\" :class=\"{ 'dev-mode': devMode }\">\n <header v-if=\"hasContent('header')\" class=\"x-layout__header x-list x-list--horizontal\">\n <!-- @slot Slot that is used to insert content into the Header. -->\n <slot name=\"header\">\n <span v-if=\"devMode\" class=\"slot-helper\">HEADER</span>\n </slot>\n </header>\n\n <div v-if=\"hasContent('sub-header')\" class=\"x-layout__sub-header x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Sub Header. -->\n <slot name=\"sub-header\">\n <span v-if=\"devMode\" class=\"slot-helper\">SUB HEADER</span>\n </slot>\n </div>\n\n <div v-if=\"hasContent('toolbar')\" class=\"x-layout__toolbar x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Toolbar. -->\n <slot name=\"toolbar\">\n <span v-if=\"devMode\" class=\"slot-helper\">TOOLBAR</span>\n </slot>\n </div>\n\n <div v-if=\"hasContent('predictive')\" class=\"x-layout__predictive x-list x-list--vertical\">\n <BaseScroll class=\"x-layout__predictive-scroll x-list x-list--vertical x-list__item--expand\">\n <!-- @slot Slot that can be used to insert content into the Predictive Layer. -->\n <slot name=\"predictive\">\n <span v-if=\"devMode\" class=\"slot-helper\">PREDICTIVE</span>\n </slot>\n </BaseScroll>\n </div>\n\n <main v-if=\"hasContent('main')\" class=\"x-layout__main\">\n <MainScroll>\n <Scroll id=\"main-scroll\" class=\"x-layout__main-scroll x-list x-list--vertical\">\n <!-- @slot Slot that can be used to insert content into the Main. -->\n <slot name=\"main\">\n <span v-if=\"devMode\" class=\"slot-helper\">MAIN</span>\n </slot>\n </Scroll>\n </MainScroll>\n </main>\n\n <div v-if=\"hasContent('floating')\" class=\"x-layout__floating x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Floating. -->\n <slot name=\"floating\">\n <span v-if=\"devMode\" class=\"slot-helper\">FLOATING</span>\n </slot>\n </div>\n\n <footer v-if=\"hasContent('footer')\" class=\"x-layout__footer x-list x-list--horizontal\">\n <!-- @slot Slot that can be used to insert content into the Footer. -->\n <slot name=\"footer\">\n <span v-if=\"devMode\" class=\"slot-helper\">FOOTER</span>\n </slot>\n </footer>\n\n <BaseIdModal\n v-if=\"hasContent('aside')\"\n :animation=\"asideAnimation\"\n modalId=\"aside-modal\"\n class=\"x-layout__aside\"\n >\n <!-- @slot Slot that can be used to insert content into the Aside. -->\n <slot name=\"aside\">\n <span v-if=\"devMode\" class=\"slot-helper\">ASIDE</span>\n </slot>\n </BaseIdModal>\n\n <slot name=\"extra-aside\">\n <span v-if=\"devMode\" class=\"slot-helper\">EXTRA ASIDE</span>\n </slot>\n </div>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { mixins } from 'vue-class-component';\n import { Component, Prop } from 'vue-property-decorator';\n import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\n import Scroll from '../../x-modules/scroll/components/scroll.vue';\n import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';\n import BaseIdModal from '../modals/base-id-modal.vue';\n import BaseScroll from '../scroll/base-scroll.vue';\n import LayoutsMixin from './layouts.mixin';\n\n /**\n * Component for use as Layout to be filled with the rest of the Components.\n *\n * @public\n */\n @Component({\n components: { BaseIdModal, BaseScroll, MainScroll, Scroll }\n })\n export default class SingleColumnLayout extends mixins(LayoutsMixin) {\n /**\n * The animation used for the Main Aside.\n *\n * @public\n */\n @Prop({ default: () => animateTranslate('right') })\n protected asideAnimation!: Vue;\n }\n</script>\n\n<style scoped lang=\"scss\">\n @import '../../design-system/utilities/dev-mode';\n\n .x-layout {\n display: grid;\n align-content: stretch;\n justify-content: stretch;\n height: 100%;\n\n grid-template-rows:\n [page-start header-start]\n auto\n [header-end sub-header-start]\n auto\n [sub-header-end toolbar-start]\n auto\n [toolbar-end main-start]\n 1fr\n [floating-start]\n auto\n [main-end floating-end footer-start]\n auto\n [footer-end page-end];\n\n grid-template-columns: 1fr;\n\n > * {\n grid-column: 1/-1;\n min-width: 0;\n min-height: 0;\n display: flex;\n }\n\n &__header {\n grid-row: header;\n z-index: 1;\n }\n\n &__sub-header {\n grid-row: sub-header;\n z-index: 1;\n }\n\n &__toolbar {\n grid-row: toolbar;\n z-index: 1;\n }\n\n &__predictive {\n grid-row-start: header-end;\n grid-row-end: page-end;\n flex-flow: column nowrap;\n z-index: 2;\n }\n\n &__main {\n grid-row: main;\n flex-flow: column nowrap;\n }\n\n &__floating {\n grid-row: floating;\n z-index: 1;\n }\n\n &__footer {\n grid-row: footer;\n }\n\n ::v-deep .x-layout__aside {\n grid-row: page;\n z-index: 3;\n pointer-events: none;\n\n .x-modal__content {\n width: 100%;\n height: 100%;\n margin-inline-start: var(--x-size-margin-left-layout-single-column, 0);\n }\n }\n\n &__predictive ::v-deep,\n &__floating ::v-deep,\n ::v-deep .x-layout__aside,\n .slot-helper ::v-deep {\n pointer-events: none;\n\n > * {\n pointer-events: all;\n }\n\n .x-list {\n pointer-events: none;\n\n > * {\n pointer-events: all;\n }\n }\n }\n }\n</style>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/js/components/layouts/single-column-layout.vue_rollup-plugin-vue_script.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"single-column-layout.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/layouts/single-column-layout.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { mixins } from 'vue-class-component';\nimport { Component, Prop } from 'vue-property-decorator';\nimport MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\nimport Scroll from '../../x-modules/scroll/components/scroll.vue';\nimport { animateTranslate } from '../animations/animate-translate/animate-translate.factory';\nimport BaseIdModal from '../modals/base-id-modal.vue';\nimport BaseScroll from '../scroll/base-scroll.vue';\nimport LayoutsMixin from './layouts.mixin';\n\n/**\n * Component for use as Layout to be filled with the rest of the Components.\n *\n * @public\n */\n@Component({\n components: { BaseIdModal, BaseScroll, MainScroll, Scroll }\n})\nexport default class SingleColumnLayout extends mixins(LayoutsMixin) {\n /**\n * The animation used for the Main Aside.\n *\n * @public\n */\n @Prop({ default: () => animateTranslate('right') })\n protected asideAnimation!: Vue;\n}\n"],"names":["BaseIdModal","BaseScroll","MainScroll","Scroll"],"mappings":";;;;;;;;;;AAkFA;;;;;AAQA,IAAqB,kBAAkB,GAAvC,MAAqB,kBAAmB,SAAQ,MAAM,CAAC,YAAY,CAAC;CAQnE,CAAA;AADC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC,OAAO,CAAC,EAAE,CAAC;0DACpB;AAPZ,kBAAkB;IAHtC,SAAS,CAAC;QACT,UAAU,EAAE,eAAEA,iBAAW,cAAEC,mBAAU,cAAEC,mBAAU,UAAEC,mBAAM,EAAE;KAC5D,CAAC;GACmB,kBAAkB,CAQtC;aARoB,kBAAkB;;;;"}
1
+ {"version":3,"file":"single-column-layout.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/layouts/single-column-layout.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { mixins } from 'vue-class-component';\nimport { Component, Prop } from 'vue-property-decorator';\nimport MainScroll from '../../x-modules/scroll/components/main-scroll.vue';\nimport Scroll from '../../x-modules/scroll/components/scroll.vue';\nimport { animateTranslate } from '../animations/animate-translate/animate-translate.factory';\nimport BaseIdModal from '../modals/base-id-modal.vue';\nimport BaseScroll from '../scroll/base-scroll.vue';\nimport LayoutsMixin from './layouts.mixin';\n\n/**\n * Component for use as Layout to be filled with the rest of the Components.\n *\n * @public\n */\n@Component({\n components: { BaseIdModal, BaseScroll, MainScroll, Scroll }\n})\nexport default class SingleColumnLayout extends mixins(LayoutsMixin) {\n /**\n * The animation used for the Main Aside.\n *\n * @public\n */\n @Prop({ default: () => animateTranslate('right') })\n protected asideAnimation!: Vue;\n}\n"],"names":["BaseIdModal","BaseScroll","MainScroll","Scroll"],"mappings":";;;;;;;;;;AAsFA;;;;;AAQA,IAAqB,kBAAkB,GAAvC,MAAqB,kBAAmB,SAAQ,MAAM,CAAC,YAAY,CAAC;CAQnE,CAAA;AADC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC,OAAO,CAAC,EAAE,CAAC;0DACpB;AAPZ,kBAAkB;IAHtC,SAAS,CAAC;QACT,UAAU,EAAE,eAAEA,iBAAW,cAAEC,mBAAU,cAAEC,mBAAU,UAAEC,mBAAM,EAAE;KAC5D,CAAC;GACmB,kBAAkB,CAQtC;aARoB,kBAAkB;;;;"}
package/js/x-modules/history-queries/components/my-history.vue.js CHANGED
@@ -110,6 +110,7 @@ var __vue_render__ = function () {
110
110
  {
111
111
  suggestion: suggestion,
112
112
  index: index,
113
+ formatTime: _vm.formatTime,
113
114
  }
114
115
  ),
115
116
  ]
package/js/x-modules/history-queries/components/my-history.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"my-history.vue.js","sources":["../../../../../src/x-modules/history-queries/components/my-history.vue"],"sourcesContent":["<template>\n <component :is=\"animation\" v-if=\"hasHistoryQueries\" class=\"x-my-history x-list\" tag=\"ul\">\n <li\n v-for=\"(historyQueries, date) in groupByDate\"\n :key=\"date\"\n class=\"x-my-history-item\"\n data-test=\"my-history-item\"\n >\n <slot name=\"date\" :date=\"date\">\n <span class=\"x-my-history-item__date\" data-test=\"my-history-date\">{{ date }}</span>\n </slot>\n <BaseSuggestions\n :suggestions=\"historyQueries\"\n class=\"x-my-history-queries\"\n data-test=\"my-history-queries\"\n :animation=\"animation\"\n >\n <template #default=\"{ suggestion, index }\">\n <!--\n @slot History Query item\n @binding {Suggestion} suggestion - History Query suggestion data\n @binding {number} index - History Query suggestion index\n -->\n <slot name=\"suggestion\" v-bind=\"{ suggestion, index }\">\n <HistoryQuery\n :suggestion=\"suggestion\"\n data-test=\"history-query-item\"\n class=\"x-history-queries__item\"\n >\n <template #default>\n <!--\n @slot History Query content\n @binding {Suggestion} suggestion - History Query suggestion data\n @binding {number} index - History Query suggestion index\n -->\n <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index }\">\n <div class=\"x-list x-list--vertical\">\n <span>{{ suggestion.query }}</span>\n <span>{{ formatTime(suggestion.timestamp) }}</span>\n </div>\n </slot>\n </template>\n <template #remove-button-content>\n <!--\n @slot History Query remove button content\n @binding {Suggestion} suggestion - History Query suggestion data\n @binding {number} index - History Query suggestion index\n -->\n <slot name=\"suggestion-remove-content\" v-bind=\"{ suggestion, index }\" />\n </template>\n </HistoryQuery>\n </slot>\n </template>\n </BaseSuggestions>\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\n import { HistoryQuery } from '@empathyco/x-types';\n import { Dictionary } from '@empathyco/x-utils';\n import Vue from 'vue';\n import { Component, Inject, Prop } from 'vue-property-decorator';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { State } from '../../../components/decorators/store.decorators';\n import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n import { groupItemsBy, isArrayEmpty } from '../../../utils/array';\n import { SnippetConfig } from '../../../x-installer/api/api.types';\n import { historyQueriesXModule } from '../x-module';\n import HistoryQueryComponent from './history-query.vue';\n\n /**\n * The component renders the full history of user searched queries grouped by the day\n * they were performed.\n *\n * @remarks\n *\n * Allows the user to select one of them, emitting the needed events.\n * A history query is just another type of suggestion that contains a query that the user has\n * made in the past.\n * @public\n */\n @Component({\n components: { HistoryQuery: HistoryQueryComponent, BaseSuggestions },\n mixins: [xComponentMixin(historyQueriesXModule)]\n })\n export default class MyHistory extends Vue {\n /**\n * Animation component that will be used to animate the suggestions.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n protected animation!: Vue | string;\n\n /**\n * The current locale.\n *\n * @public\n */\n @Prop({ default: 'en' })\n protected locale!: string;\n\n /**\n * The list of history queries.\n *\n * @internal\n */\n @State('historyQueries', 'historyQueries')\n public historyQueries!: HistoryQuery[];\n\n /**\n * The provided {@link SnippetConfig}.\n *\n * @internal\n */\n @Inject('snippetConfig')\n public snippetConfig?: SnippetConfig;\n\n /**\n * Returns a record of history queries grouped by date.\n *\n * @example\n * ```typescript\n * const historyQueriesGrouped = {\n * 'Monday, January 10th, 2022' : [{\n * query: 'lego',\n * modelName: 'HistoryQuery',\n * timestamp: 121312312\n * }],\n * 'Tuesday, January 11th, 2022' : [{\n * query: 'barbie',\n * modelName: 'HistoryQuery',\n * timestamp: 15221212\n * }]\n * }\n * ```\n * @returns The history queries grouped by date.\n * @internal\n */\n protected get groupByDate(): Dictionary<HistoryQuery[]> {\n return groupItemsBy(this.historyQueries, current => {\n return new Date(current.timestamp).toLocaleDateString(this.usedLocale, {\n day: 'numeric',\n weekday: 'long',\n month: 'long',\n year: 'numeric'\n });\n });\n }\n\n /**\n * Formats a timestamp into `hh:mm [PM/AM]` format.\n *\n * @example\n * ```typescript\n * // locale 'es'\n * console.log(formatTime(Date.now()) // '16:54'.\n *\n * // locale 'en'\n * console.log(formatTime(Date.now()) // '16:54 PM'.\n * ```\n * @param timestamp - The timestamp to format.\n * @returns The formatted time.\n * @internal\n */\n protected formatTime(timestamp: number): string {\n return new Date(timestamp).toLocaleTimeString(this.usedLocale, {\n hour: '2-digit',\n minute: '2-digit'\n });\n }\n /**\n * The `hasHistoryQueries` computed property is a flag representing if there are history queries\n * stored.\n *\n * @returns True if there are history queries; false otherwise.\n * @internal\n */\n protected get hasHistoryQueries(): boolean {\n return !isArrayEmpty(this.historyQueries);\n }\n /**\n * The locale that it is going to be used. It can be the one send it by the snippet config or\n * the one pass it using the prop.\n *\n * @returns The locale to be used.\n * @internal\n */\n protected get usedLocale(): string {\n return this.snippetConfig?.lang ?? this.locale;\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the MyHistory is rendered.\n\n```vue\n<template>\n <MyHistory />\n</template>\n\n<script>\n import { MyHistory } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory\n }\n };\n</script>\n```\n\n### Play with props\n\nIn this example, the my history has been configured to use the 'es' locale.\n\n```vue\n<template>\n <MyHistory :locale=\"es\" />\n</template>\n\n<script>\n import { MyHistory } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory\n }\n };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n <MyHistory :animation=\"fadeAndSlide\" />\n</template>\n\n<script>\n import { MyHistory } from '@empathyco/x-components/history-queries';\n import { FadeAndSlide } from '@empathyco/x-components';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory\n },\n data() {\n return {\n fadeAndSlide: FadeAndSlide\n };\n }\n };\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue\n<template>\n <MyHistory #suggestion=\"{ suggestion }\">\n <HistoryQuery :suggestion=\"suggestion\"></HistoryQuery>\n </MyHistory>\n</template>\n\n<script>\n import { MyHistory, HistoryQuery } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory,\n HistoryQuery\n }\n };\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue\n<template>\n <MyHistory #suggestion-content=\"{ suggestion }\">\n <span>{{ suggestion.query }}</span>\n </MyHistory>\n</template>\n\n<script>\n import { MyHistory } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory\n }\n };\n</script>\n```\n\n### Play with suggestion-content slot\n\nIn this example, an HTML span tag for the date are passed.\n\n```vue\n<template>\n <MyHistory #date=\"{ date }\">\n <span>{{ date }}</span>\n </MyHistory>\n</template>\n\n<script>\n import { MyHistory } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory\n }\n };\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue\n<template>\n <MyHistory #suggestion-content-remove=\"{ suggestion }\">\n <CrossIcon />\n </MyHistory>\n</template>\n\n<script>\n import { MyHistory } from '@empathyco/x-components/history-queries';\n import { CrossIcon } from '@empathyco/x-components';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory,\n CrossIcon\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"my-history.vue.js","sources":["../../../../../src/x-modules/history-queries/components/my-history.vue"],"sourcesContent":["<template>\n <component :is=\"animation\" v-if=\"hasHistoryQueries\" class=\"x-my-history x-list\" tag=\"ul\">\n <li\n v-for=\"(historyQueries, date) in groupByDate\"\n :key=\"date\"\n class=\"x-my-history-item\"\n data-test=\"my-history-item\"\n >\n <slot name=\"date\" :date=\"date\">\n <span class=\"x-my-history-item__date\" data-test=\"my-history-date\">{{ date }}</span>\n </slot>\n <BaseSuggestions\n :suggestions=\"historyQueries\"\n class=\"x-my-history-queries\"\n data-test=\"my-history-queries\"\n :animation=\"animation\"\n >\n <template #default=\"{ suggestion, index }\">\n <!--\n @slot History Query item\n @binding {Suggestion} suggestion - History Query suggestion data\n @binding {number} index - History Query suggestion index\n -->\n <slot name=\"suggestion\" v-bind=\"{ suggestion, index }\">\n <HistoryQuery\n :suggestion=\"suggestion\"\n data-test=\"history-query-item\"\n class=\"x-history-queries__item\"\n >\n <template #default>\n <!--\n @slot History Query content\n @binding {Suggestion} suggestion - History Query suggestion data\n @binding {number} index - History Query suggestion index\n -->\n <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index, formatTime }\">\n <div class=\"x-list x-list--vertical\">\n <span>{{ suggestion.query }}</span>\n <span>{{ formatTime(suggestion.timestamp) }}</span>\n </div>\n </slot>\n </template>\n <template #remove-button-content>\n <!--\n @slot History Query remove button content\n @binding {Suggestion} suggestion - History Query suggestion data\n @binding {number} index - History Query suggestion index\n -->\n <slot name=\"suggestion-remove-content\" v-bind=\"{ suggestion, index }\" />\n </template>\n </HistoryQuery>\n </slot>\n </template>\n </BaseSuggestions>\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\n import { HistoryQuery } from '@empathyco/x-types';\n import { Dictionary } from '@empathyco/x-utils';\n import Vue from 'vue';\n import { Component, Inject, Prop } from 'vue-property-decorator';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { State } from '../../../components/decorators/store.decorators';\n import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n import { groupItemsBy, isArrayEmpty } from '../../../utils/array';\n import { SnippetConfig } from '../../../x-installer/api/api.types';\n import { historyQueriesXModule } from '../x-module';\n import HistoryQueryComponent from './history-query.vue';\n\n /**\n * The component renders the full history of user searched queries grouped by the day\n * they were performed.\n *\n * @remarks\n *\n * Allows the user to select one of them, emitting the needed events.\n * A history query is just another type of suggestion that contains a query that the user has\n * made in the past.\n * @public\n */\n @Component({\n components: { HistoryQuery: HistoryQueryComponent, BaseSuggestions },\n mixins: [xComponentMixin(historyQueriesXModule)]\n })\n export default class MyHistory extends Vue {\n /**\n * Animation component that will be used to animate the suggestions.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n protected animation!: Vue | string;\n\n /**\n * The current locale.\n *\n * @public\n */\n @Prop({ default: 'en' })\n protected locale!: string;\n\n /**\n * The list of history queries.\n *\n * @internal\n */\n @State('historyQueries', 'historyQueries')\n public historyQueries!: HistoryQuery[];\n\n /**\n * The provided {@link SnippetConfig}.\n *\n * @internal\n */\n @Inject('snippetConfig')\n public snippetConfig?: SnippetConfig;\n\n /**\n * Returns a record of history queries grouped by date.\n *\n * @example\n * ```typescript\n * const historyQueriesGrouped = {\n * 'Monday, January 10th, 2022' : [{\n * query: 'lego',\n * modelName: 'HistoryQuery',\n * timestamp: 121312312\n * }],\n * 'Tuesday, January 11th, 2022' : [{\n * query: 'barbie',\n * modelName: 'HistoryQuery',\n * timestamp: 15221212\n * }]\n * }\n * ```\n * @returns The history queries grouped by date.\n * @internal\n */\n protected get groupByDate(): Dictionary<HistoryQuery[]> {\n return groupItemsBy(this.historyQueries, current => {\n return new Date(current.timestamp).toLocaleDateString(this.usedLocale, {\n day: 'numeric',\n weekday: 'long',\n month: 'long',\n year: 'numeric'\n });\n });\n }\n\n /**\n * Formats a timestamp into `hh:mm [PM/AM]` format.\n *\n * @example\n * ```typescript\n * // locale 'es'\n * console.log(formatTime(Date.now()) // '16:54'.\n *\n * // locale 'en'\n * console.log(formatTime(Date.now()) // '16:54 PM'.\n * ```\n * @param timestamp - The timestamp to format.\n * @returns The formatted time.\n * @internal\n */\n protected formatTime(timestamp: number): string {\n return new Date(timestamp).toLocaleTimeString(this.usedLocale, {\n hour: '2-digit',\n minute: '2-digit'\n });\n }\n /**\n * The `hasHistoryQueries` computed property is a flag representing if there are history queries\n * stored.\n *\n * @returns True if there are history queries; false otherwise.\n * @internal\n */\n protected get hasHistoryQueries(): boolean {\n return !isArrayEmpty(this.historyQueries);\n }\n /**\n * The locale that it is going to be used. It can be the one send it by the snippet config or\n * the one pass it using the prop.\n *\n * @returns The locale to be used.\n * @internal\n */\n protected get usedLocale(): string {\n return this.snippetConfig?.lang ?? this.locale;\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the MyHistory is rendered.\n\n```vue\n<template>\n <MyHistory />\n</template>\n\n<script>\n import { MyHistory } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory\n }\n };\n</script>\n```\n\n### Play with props\n\nIn this example, the my history has been configured to use the 'es' locale.\n\n```vue\n<template>\n <MyHistory :locale=\"es\" />\n</template>\n\n<script>\n import { MyHistory } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory\n }\n };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n <MyHistory :animation=\"fadeAndSlide\" />\n</template>\n\n<script>\n import { MyHistory } from '@empathyco/x-components/history-queries';\n import { FadeAndSlide } from '@empathyco/x-components';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory\n },\n data() {\n return {\n fadeAndSlide: FadeAndSlide\n };\n }\n };\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue\n<template>\n <MyHistory #suggestion=\"{ suggestion }\">\n <HistoryQuery :suggestion=\"suggestion\"></HistoryQuery>\n </MyHistory>\n</template>\n\n<script>\n import { MyHistory, HistoryQuery } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory,\n HistoryQuery\n }\n };\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue\n<template>\n <MyHistory #suggestion-content=\"{ suggestion }\">\n <span>{{ suggestion.query }}</span>\n </MyHistory>\n</template>\n\n<script>\n import { MyHistory } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory\n }\n };\n</script>\n```\n\n### Play with suggestion-content slot\n\nIn this example, an HTML span tag for the date are passed.\n\n```vue\n<template>\n <MyHistory #date=\"{ date }\">\n <span>{{ date }}</span>\n </MyHistory>\n</template>\n\n<script>\n import { MyHistory } from '@empathyco/x-components/history-queries';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory\n }\n };\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue\n<template>\n <MyHistory #suggestion-content-remove=\"{ suggestion }\">\n <CrossIcon />\n </MyHistory>\n</template>\n\n<script>\n import { MyHistory } from '@empathyco/x-components/history-queries';\n import { CrossIcon } from '@empathyco/x-components';\n\n export default {\n name: 'MyHistoryDemo',\n components: {\n MyHistory,\n CrossIcon\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@empathyco/x-components",
3
- "version": "3.0.0-alpha.126",
3
+ "version": "3.0.0-alpha.129",
4
4
  "description": "Empathy X Components",
5
5
  "author": "Empathy Systems Corporation S.L.",
6
6
  "license": "Apache-2.0",
@@ -125,5 +125,5 @@
125
125
  "access": "public",
126
126
  "directory": "dist"
127
127
  },
128
- "gitHead": "25a8c02149a27389257765735df1af8d34433604"
128
+ "gitHead": "6ebb0ea88cccfa0611f0076b6e304c20d93046b2"
129
129
  }
package/types/components/layouts/fixed-header-and-asides-layout.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fixed-header-and-asides-layout.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/layouts/fixed-header-and-asides-layout.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAsFA,OAAO,UAAU,MAAM,mDAAmD,CAAC;AAI3E,OAAO,YAAY,MAAM,iBAAiB,CAAC;;AAE3C;;;;GAIG;AAQH,MAAM,CAAC,OAAO,OAAO,0BAA2B,SAAQ,+BAAoB;IAC1E,SAAS,CAAC,cAAc,SAAK;IAC7B,SAAS,CAAC,mBAAmB,2CAA6B;IAC1D,SAAS,CAAC,kBAAkB,2CAA4B;IAExD,SAAS,CAAC,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAI7C,SAAS,KAAK,iBAAiB,IAAI,OAAO,CAEzC;CACF"}
1
+ {"version":3,"file":"fixed-header-and-asides-layout.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/layouts/fixed-header-and-asides-layout.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AA0FA,OAAO,UAAU,MAAM,mDAAmD,CAAC;AAI3E,OAAO,YAAY,MAAM,iBAAiB,CAAC;;AAE3C;;;;GAIG;AAQH,MAAM,CAAC,OAAO,OAAO,0BAA2B,SAAQ,+BAAoB;IAC1E,SAAS,CAAC,cAAc,SAAK;IAC7B,SAAS,CAAC,mBAAmB,2CAA6B;IAC1D,SAAS,CAAC,kBAAkB,2CAA4B;IAExD,SAAS,CAAC,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAI7C,SAAS,KAAK,iBAAiB,IAAI,OAAO,CAEzC;CACF"}
package/types/components/layouts/single-column-layout.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"single-column-layout.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/layouts/single-column-layout.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAwEA,OAAO,GAAG,MAAM,KAAK,CAAC;AAQtB,OAAO,YAAY,MAAM,iBAAiB,CAAC;;AAE3C;;;;GAIG;AAIH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,uBAAoB;IAClE;;;;OAIG;IAEH,SAAS,CAAC,cAAc,EAAG,GAAG,CAAC;CAChC"}
1
+ {"version":3,"file":"single-column-layout.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/layouts/single-column-layout.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AA4EA,OAAO,GAAG,MAAM,KAAK,CAAC;AAQtB,OAAO,YAAY,MAAM,iBAAiB,CAAC;;AAE3C;;;;GAIG;AAIH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,uBAAoB;IAClE;;;;OAIG;IAEH,SAAS,CAAC,cAAc,EAAG,GAAG,CAAC;CAChC"}