@empathyco/x-components 3.0.0-alpha.207 → 3.0.0-alpha.208
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.
- package/CHANGELOG.md +13 -0
- package/docs/API-reference/api/x-components.basecolumnpickerlist.md +2 -0
- package/docs/API-reference/api/x-components.md +2 -2
- package/docs/API-reference/api/x-components.slidingpanel.md +4 -3
- package/docs/API-reference/components/common/column-picker/x-components.base-column-picker-list.md +25 -0
- package/docs/API-reference/components/common/x-components.sliding-panel.md +40 -1
- package/js/components/column-picker/base-column-picker-list.vue.js +2 -1
- package/js/components/column-picker/base-column-picker-list.vue.js.map +1 -1
- package/js/components/column-picker/base-column-picker-list.vue_rollup-plugin-vue_script.vue.js +5 -1
- package/js/components/column-picker/base-column-picker-list.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/components/column-picker/base-column-picker-list.vue_rollup-plugin-vue_styles.0.vue.js +1 -1
- package/js/components/dynamic-props.mixin.js +29 -0
- package/js/components/dynamic-props.mixin.js.map +1 -0
- package/js/components/sliding-panel.vue.js +1 -1
- package/js/components/sliding-panel.vue.js.map +1 -1
- package/js/components/sliding-panel.vue_rollup-plugin-vue_script.vue.js +6 -6
- package/js/components/sliding-panel.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/components/sliding-panel.vue_rollup-plugin-vue_styles.0.vue.js +1 -1
- package/package.json +2 -2
- package/report/x-components.api.json +4 -31
- package/report/x-components.api.md +3 -2
- package/types/components/column-picker/base-column-picker-list.vue.d.ts +4 -1
- package/types/components/column-picker/base-column-picker-list.vue.d.ts.map +1 -1
- package/types/components/sliding-panel.vue.d.ts +6 -8
- package/types/components/sliding-panel.vue.d.ts.map +1 -1
- package/docs/API-reference/api/x-components.slidingpanel.buttonclass.md +0 -13
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,19 @@
|
|
|
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.208](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.207...@empathyco/x-components@3.0.0-alpha.208) (2022-11-02)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- apply dynamic css mixin to sliding panel and column picker list buttons (#815)
|
|
11
|
+
([4cc040d](https://github.com/empathyco/x/commit/4cc040d7d7c4751a5f31c6e36acfa64d28cbb23d)),
|
|
12
|
+
closes [EX-7224](https://searchbroker.atlassian.net/browse/EX-7224)
|
|
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
|
+
|
|
6
19
|
## [3.0.0-alpha.207](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.206...@empathyco/x-components@3.0.0-alpha.207) (2022-11-02)
|
|
7
20
|
|
|
8
21
|
### Bug Fixes
|
|
@@ -18,7 +18,7 @@ X-Components is a library usable everywhere not only for search experiences.
|
|
|
18
18
|
| [BannersList](./x-components.bannerslist.md) | It renders a [ItemsList](./x-components.itemslist.md) list of banners from [SearchState.banners](./x-components.searchstate.banners.md) by default using the <code>ItemsInjectionMixin</code>.<!-- -->The component provides a default slot which wraps the whole component with the <code>banners</code> plus the <code>searchInjectedItems</code> which also contains the injected list items from the ancestor.<!-- -->It also provides the parent slots to customize the items. |
|
|
19
19
|
| [BaseAddToCart](./x-components.baseaddtocart.md) | Renders a button with a default slot. It receives the result with the data and emits [XEventsTypes.UserClickedResultAddToCart](./x-components.xeventstypes.userclickedresultaddtocart.md) to the bus on click mouse event. |
|
|
20
20
|
| [BaseColumnPickerDropdown](./x-components.basecolumnpickerdropdown.md) | Column picker dropdown component renders [dropdown](./x-components.basedropdown.md) component which options are the different columns you can set for a grid.<!-- -->It emits [UserClickedColumnPicker](./x-components.xeventstypes.userclickedcolumnpicker.md) on dropdown input. |
|
|
21
|
-
| [BaseColumnPickerList](./x-components.basecolumnpickerlist.md) | Column picker list component renders a list of buttons to choose the columns number
|
|
21
|
+
| [BaseColumnPickerList](./x-components.basecolumnpickerlist.md) | Column picker list component renders a list of buttons to choose the columns number.<!-- -->Additionally, this component exposes the following props to modify the classes of the elements: <code>buttonClass</code>. |
|
|
22
22
|
| [BaseCurrency](./x-components.basecurrency.md) | Renders the value received as a property which always must be a JavaScript number, with the proper format provided as a string property or by injection. The rendered tag is a span in order to render a default inline HTML element.<!-- -->Regarding the format or mask to be defined as string: - Use 'i' to define integer numbers. - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the format doesn't include decimals, it is filled with zeros until reach the length defined with 'd's. - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group. - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more than one character. - If you want to hide the decimal part if it's zero, you can add the <code>?</code> symbol after the decimal characters (e.g. 'i.iii,dd?', for <code>1234</code> you would get <code>1.234</code> instead of <code>1.234,00</code>). - Set whatever you need around the integers and decimals marks. - Default mask: 'i.iii,dd' which returns '1.345,67'. |
|
|
23
23
|
| [BaseDropdown](./x-components.basedropdown.md) | Dropdown component that mimics a Select element behavior, but with the option to customize the toggle button and each item contents. |
|
|
24
24
|
| [BaseEventButton](./x-components.baseeventbutton.md) | Component to be reused that renders a <code><button></code> with the logic of emitting events to the bus on click. The events are passed as an object to prop [events](./x-components.xeventstypes.md)<!-- -->. The keys are the event name and the values are the payload of each event. All events are emitted with its respective payload. If any event doesn't need payload a <code>undefined</code> must be passed as value. |
|
|
@@ -130,7 +130,7 @@ X-Components is a library usable everywhere not only for search experiences.
|
|
|
130
130
|
| [SimpleFilter](./x-components.simplefilter.md) | Renders a simple filter, emitting the needed events when clicked. |
|
|
131
131
|
| [SingleColumnLayout](./x-components.singlecolumnlayout.md) | Component for use as Layout to be filled with the rest of the Components. |
|
|
132
132
|
| [SlicedFilters](./x-components.slicedfilters.md) | Component that slices a list of filters and returns them using the default scoped slot, allowing the user to show the full list of them or slicing them again using the show more/less buttons. |
|
|
133
|
-
| [SlidingPanel](./x-components.slidingpanel.md) | This component allows for any other component or element inside it to be horizontally navigable. It also implements customizable buttons as well as other minor customizations to its general behavior
|
|
133
|
+
| [SlidingPanel](./x-components.slidingpanel.md) | This component allows for any other component or element inside it to be horizontally navigable. It also implements customizable buttons as well as other minor customizations to its general behavior.<!-- -->Additionally, this component exposes the following props to modify the classes of the elements: <code>buttonClass</code>. |
|
|
134
134
|
| [SnippetCallbacks](./x-components.snippetcallbacks.md) | This component subscribes to any [XEvent](./x-components.xevent.md) with a custom callbacks provided by the snippet configuration. |
|
|
135
135
|
| [SnippetConfigExtraParams](./x-components.snippetconfigextraparams.md) | Extracts the extra parameters from the [SnippetConfig](./x-components.snippetconfig.md) and syncs it with the request objects of every x-module. |
|
|
136
136
|
| [SortDropdown](./x-components.sortdropdown.md) | The <code>SortDropdown</code> component allows user to select the search results order. This component also allows to change the selected sort programmatically. |
|
|
@@ -6,18 +6,19 @@
|
|
|
6
6
|
|
|
7
7
|
This component allows for any other component or element inside it to be horizontally navigable. It also implements customizable buttons as well as other minor customizations to its general behavior.
|
|
8
8
|
|
|
9
|
+
Additionally, this component exposes the following props to modify the classes of the elements: `buttonClass`<!-- -->.
|
|
10
|
+
|
|
9
11
|
<b>Signature:</b>
|
|
10
12
|
|
|
11
13
|
```typescript
|
|
12
|
-
export default class SlidingPanel extends
|
|
14
|
+
export default class SlidingPanel extends SlidingPanel_base
|
|
13
15
|
```
|
|
14
|
-
<b>Extends:</b>
|
|
16
|
+
<b>Extends:</b> SlidingPanel\_base
|
|
15
17
|
|
|
16
18
|
## Properties
|
|
17
19
|
|
|
18
20
|
| Property | Modifiers | Type | Description |
|
|
19
21
|
| --- | --- | --- | --- |
|
|
20
|
-
| [buttonClass?](./x-components.slidingpanel.buttonclass.md) | | string | <i>(Optional)</i> CSS classes to add to the buttons. |
|
|
21
22
|
| [resetOnContentChange](./x-components.slidingpanel.resetoncontentchange.md) | | boolean | When true, whenever the DOM content in the sliding panel slot changes, it will reset the scroll position to 0. |
|
|
22
23
|
| [scrollFactor](./x-components.slidingpanel.scrollfactor.md) | | number | Scroll factor that will dictate how much the scroll moves when pressing a navigation button. |
|
|
23
24
|
| [showButtons](./x-components.slidingpanel.showbuttons.md) | | boolean | Would make the navigation buttons visible when they're needed or always hide them. |
|
package/docs/API-reference/components/common/column-picker/x-components.base-column-picker-list.md
CHANGED
|
@@ -8,6 +8,9 @@ title: BaseColumnPickerList
|
|
|
8
8
|
|
|
9
9
|
Column picker list component renders a list of buttons to choose the columns number.
|
|
10
10
|
|
|
11
|
+
Additionally, this component exposes the following props to modify the classes of the
|
|
12
|
+
elements: `buttonClass`.
|
|
13
|
+
|
|
11
14
|
## Props
|
|
12
15
|
|
|
13
16
|
| Name | Description | Type | Default |
|
|
@@ -104,6 +107,28 @@ export default {
|
|
|
104
107
|
</script>
|
|
105
108
|
```
|
|
106
109
|
|
|
110
|
+
#### Customizing the buttons with classes
|
|
111
|
+
|
|
112
|
+
The `buttonClass` prop can be used to add classes to the buttons.
|
|
113
|
+
|
|
114
|
+
```vue
|
|
115
|
+
<template>
|
|
116
|
+
<BaseColumnPickerList :columns="columns" buttonClass="x-button--round" />
|
|
117
|
+
</template>
|
|
118
|
+
<script>
|
|
119
|
+
import { BaseColumnPickerList } from "@empathyco/xcomponents";
|
|
120
|
+
|
|
121
|
+
export default {
|
|
122
|
+
components: {
|
|
123
|
+
BaseColumnPickerList
|
|
124
|
+
},
|
|
125
|
+
data() {
|
|
126
|
+
return { columns: [2, 4, 6] };
|
|
127
|
+
}
|
|
128
|
+
};
|
|
129
|
+
</script>
|
|
130
|
+
```
|
|
131
|
+
|
|
107
132
|
## Events
|
|
108
133
|
|
|
109
134
|
A list of events that the component will emit:
|
|
@@ -10,6 +10,9 @@ This component allows for any other component or element inside it to be horizon
|
|
|
10
10
|
navigable. It also implements customizable buttons as well as other minor customizations to its
|
|
11
11
|
general behavior.
|
|
12
12
|
|
|
13
|
+
Additionally, this component exposes the following props to modify the classes of the
|
|
14
|
+
elements: `buttonClass`.
|
|
15
|
+
|
|
13
16
|
## Props
|
|
14
17
|
|
|
15
18
|
| Name | Description | Type | Default |
|
|
@@ -17,7 +20,6 @@ general behavior.
|
|
|
17
20
|
| <code>scrollFactor</code> | Scroll factor that will dictate how much the scroll moves when pressing a navigation button. | <code>number</code> | <code>0.7</code> |
|
|
18
21
|
| <code>showButtons</code> | Would make the navigation buttons visible when they're needed or always hide them. | <code>boolean</code> | <code>true</code> |
|
|
19
22
|
| <code>resetOnContentChange</code> | When true, whenever the DOM content in the sliding panel slot changes, it will reset<br />the scroll position to 0. | <code>boolean</code> | <code>true</code> |
|
|
20
|
-
| <code>buttonClass</code> | CSS classes to add to the buttons. | <code>string</code> | <code></code> |
|
|
21
23
|
|
|
22
24
|
## Slots
|
|
23
25
|
|
|
@@ -147,6 +149,43 @@ export default {
|
|
|
147
149
|
</style>
|
|
148
150
|
```
|
|
149
151
|
|
|
152
|
+
#### Customizing the buttons with classes
|
|
153
|
+
|
|
154
|
+
The `buttonClass` prop can be used to add classes to the buttons.
|
|
155
|
+
|
|
156
|
+
```vue
|
|
157
|
+
<template>
|
|
158
|
+
<SlidingPanel buttonClass="x-button--round">
|
|
159
|
+
<div class="item">Item 1</div>
|
|
160
|
+
<div class="item">Item 2</div>
|
|
161
|
+
<div class="item">Item 3</div>
|
|
162
|
+
<div class="item">Item 4</div>
|
|
163
|
+
</SlidingPanel>
|
|
164
|
+
</template>
|
|
165
|
+
|
|
166
|
+
<script>
|
|
167
|
+
import { SlidingPanel } from "@empathyco/x-components";
|
|
168
|
+
|
|
169
|
+
export default {
|
|
170
|
+
name: "SlidingPanelDemo",
|
|
171
|
+
components: {
|
|
172
|
+
SlidingPanel
|
|
173
|
+
}
|
|
174
|
+
};
|
|
175
|
+
</script>
|
|
176
|
+
|
|
177
|
+
<style>
|
|
178
|
+
.x-sliding-panel {
|
|
179
|
+
width: 200px;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.item {
|
|
183
|
+
display: inline-block;
|
|
184
|
+
width: 100px;
|
|
185
|
+
}
|
|
186
|
+
</style>
|
|
187
|
+
```
|
|
188
|
+
|
|
150
189
|
#### Disabling reset the scroll when content changes
|
|
151
190
|
|
|
152
191
|
By default, whenever the content of the sliding panel changes, it auto resets its scroll position.
|
|
@@ -33,6 +33,7 @@ var __vue_render__ = function () {
|
|
|
33
33
|
"BaseEventButton",
|
|
34
34
|
{
|
|
35
35
|
staticClass: "x-button column-picker-item__button",
|
|
36
|
+
class: _vm.buttonClass,
|
|
36
37
|
attrs: {
|
|
37
38
|
"data-test": "column-picker-button",
|
|
38
39
|
"aria-selected": isSelected.toString(),
|
|
@@ -64,7 +65,7 @@ __vue_render__._withStripped = true;
|
|
|
64
65
|
/* style */
|
|
65
66
|
const __vue_inject_styles__ = undefined;
|
|
66
67
|
/* scoped */
|
|
67
|
-
const __vue_scope_id__ = "data-v-
|
|
68
|
+
const __vue_scope_id__ = "data-v-5eadffbc";
|
|
68
69
|
/* module identifier */
|
|
69
70
|
const __vue_module_identifier__ = undefined;
|
|
70
71
|
/* functional template */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-column-picker-list.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-list.vue"],"sourcesContent":["<template>\n <ul class=\"x-option-list x-column-picker-list\" data-test=\"column-picker-list\">\n <li\n v-for=\"{ column, cssClasses, events, isSelected } in columnsWithCssClasses\"\n :key=\"column\"\n :class=\"cssClasses\"\n class=\"x-option-list__item x-column-picker-list__item\"\n data-test=\"column-picker-item\"\n >\n <BaseEventButton\n class=\"x-button column-picker-item__button\"\n data-test=\"column-picker-button\"\n :aria-selected=\"isSelected.toString()\"\n :events=\"events\"\n >\n <!--\n @slot Customized Column Picker Button content. Specifying a slot with the column value\n will result in the column using that slot composition to render.\n @binding {number} column - Columns Number to pick.\n @binding {boolean} isSelected - True if the columns number are the chosen value.\n -->\n <slot v-bind=\"{ column, isSelected }\">\n {{ column }}\n </slot>\n </BaseEventButton>\n </li>\n </ul>\n</template>\n\n<
|
|
1
|
+
{"version":3,"file":"base-column-picker-list.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-list.vue"],"sourcesContent":["<template>\n <ul class=\"x-option-list x-column-picker-list\" data-test=\"column-picker-list\">\n <li\n v-for=\"{ column, cssClasses, events, isSelected } in columnsWithCssClasses\"\n :key=\"column\"\n :class=\"cssClasses\"\n class=\"x-option-list__item x-column-picker-list__item\"\n data-test=\"column-picker-item\"\n >\n <BaseEventButton\n class=\"x-button column-picker-item__button\"\n :class=\"buttonClass\"\n data-test=\"column-picker-button\"\n :aria-selected=\"isSelected.toString()\"\n :events=\"events\"\n >\n <!--\n @slot Customized Column Picker Button content. Specifying a slot with the column value\n will result in the column using that slot composition to render.\n @binding {number} column - Columns Number to pick.\n @binding {boolean} isSelected - True if the columns number are the chosen value.\n -->\n <slot v-bind=\"{ column, isSelected }\">\n {{ column }}\n </slot>\n </BaseEventButton>\n </li>\n </ul>\n</template>\n\n<script lang=\"ts\">\n import { mixins } from 'vue-class-component';\n import { Component } from 'vue-property-decorator';\n import { VueCSSClasses } from '../../utils/types';\n import { XEventsTypes } from '../../wiring';\n import BaseEventButton from '../base-event-button.vue';\n import { dynamicPropsMixin } from '../dynamic-props.mixin';\n import ColumnPickerMixin from './column-picker.mixin';\n\n interface ColumnPickerItem {\n column: number;\n cssClasses: VueCSSClasses;\n events: Partial<XEventsTypes>;\n isSelected: boolean;\n }\n\n /**\n * Column picker list component renders a list of buttons to choose the columns number.\n *\n * Additionally, this component exposes the following props to modify the classes of the\n * elements: `buttonClass`.\n *\n * @remarks It extends {@link ColumnPickerMixin}.\n *\n * @public\n */\n @Component({\n components: { BaseEventButton }\n })\n export default class BaseColumnPickerList extends mixins(\n ColumnPickerMixin,\n dynamicPropsMixin(['buttonClass'])\n ) {\n /**\n * Maps the column to an object containing: the `column` and `CSS classes`.\n *\n * @returns An array of objects containing the column number and CSS classes.\n *\n * @internal\n */\n protected get columnsWithCssClasses(): ColumnPickerItem[] {\n return this.columns.map(column => ({\n column,\n cssClasses: [\n `x-column-picker-list__item--${column}-cols`,\n {\n 'x-column-picker-list__item--is-selected': this.selectedColumns === column,\n 'x-option-list__item--is-selected': this.selectedColumns === column\n }\n ],\n isSelected: this.selectedColumns === column,\n events: {\n UserClickedColumnPicker: column,\n ColumnsNumberProvided: column\n }\n }));\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-column-picker-list {\n display: flex;\n list-style-type: none;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on the columns prop. Each\nelement will emit the needed events to sync other instances of columns pickers, or grids with the\nnumber of columns that it is being selected when it is clicked.\n\n### Default usage\n\nIt is required to send the columns prop.\n\n```vue\n<template>\n <BaseColumnPickerList :columns=\"columns\" />\n</template>\n<script>\n import { BaseColumnPickerList } from '@empathyco/xcomponents';\n\n export default {\n components: {\n BaseColumnPickerList\n },\n data() {\n return { columns: [2, 4, 6] };\n }\n };\n</script>\n```\n\n#### Using v-model\n\nIt is possible to do two way binding in order to synchronize the value with the parents. It will be\nupdated if it changed the value or if the parent changes it.\n\n```vue\n<template>\n <BaseColumnPickerList :columns=\"columns\" v-model=\"selectedColumns\" />\n</template>\n<script>\n import { BaseColumnPickerList } from '@empathyco/xcomponents';\n\n export default {\n components: {\n BaseColumnPickerList\n },\n data() {\n return { columns: [2, 4, 6], selectedColumns: 4 };\n }\n };\n</script>\n```\n\n### Customized usage\n\n#### Overriding the slots\n\nIt is possible to override the column picker button content.\n\n```vue\n<template>\n <BaseColumnPickerList :columns=\"columns\" #default=\"{ column, isSelected }\">\n <span>{{ column }} {{ isSelected ? '🟢' : '' }}</span>\n </BaseColumnPickerList>\n</template>\n<script>\n import { BaseColumnPickerList } from '@empathyco/xcomponents';\n\n export default {\n components: {\n BaseColumnPickerList\n },\n data() {\n return { columns: [2, 4, 6] };\n }\n };\n</script>\n```\n\n#### Customizing the buttons with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\n```vue\n<template>\n <BaseColumnPickerList :columns=\"columns\" buttonClass=\"x-button--round\" />\n</template>\n<script>\n import { BaseColumnPickerList } from '@empathyco/xcomponents';\n\n export default {\n components: {\n BaseColumnPickerList\n },\n data() {\n return { columns: [2, 4, 6] };\n }\n };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedColumnPicker`: the event is emitted after the user clicks an item. The event payload\n is the number of columns that the clicked item represents.\n- `ColumnsNumberProvided`: the event is emitted on component mount. The event payload is the current\n `selectedColumns` value.\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/js/components/column-picker/base-column-picker-list.vue_rollup-plugin-vue_script.vue.js
CHANGED
|
@@ -2,16 +2,20 @@ import { __decorate } from 'tslib';
|
|
|
2
2
|
import { mixins } from 'vue-class-component';
|
|
3
3
|
import { Component } from 'vue-property-decorator';
|
|
4
4
|
import __vue_component__ from '../base-event-button.vue.js';
|
|
5
|
+
import { dynamicPropsMixin } from '../dynamic-props.mixin.js';
|
|
5
6
|
import ColumnPickerMixin from './column-picker.mixin.js';
|
|
6
7
|
|
|
7
8
|
/**
|
|
8
9
|
* Column picker list component renders a list of buttons to choose the columns number.
|
|
9
10
|
*
|
|
11
|
+
* Additionally, this component exposes the following props to modify the classes of the
|
|
12
|
+
* elements: `buttonClass`.
|
|
13
|
+
*
|
|
10
14
|
* @remarks It extends {@link ColumnPickerMixin}.
|
|
11
15
|
*
|
|
12
16
|
* @public
|
|
13
17
|
*/
|
|
14
|
-
let BaseColumnPickerList = class BaseColumnPickerList extends mixins(ColumnPickerMixin) {
|
|
18
|
+
let BaseColumnPickerList = class BaseColumnPickerList extends mixins(ColumnPickerMixin, dynamicPropsMixin(['buttonClass'])) {
|
|
15
19
|
/**
|
|
16
20
|
* Maps the column to an object containing: the `column` and `CSS classes`.
|
|
17
21
|
*
|
package/js/components/column-picker/base-column-picker-list.vue_rollup-plugin-vue_script.vue.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-column-picker-list.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-list.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\
|
|
1
|
+
{"version":3,"file":"base-column-picker-list.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-list.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\nimport { mixins } from 'vue-class-component';\nimport { Component } from 'vue-property-decorator';\nimport { VueCSSClasses } from '../../utils/types';\nimport { XEventsTypes } from '../../wiring';\nimport BaseEventButton from '../base-event-button.vue';\nimport { dynamicPropsMixin } from '../dynamic-props.mixin';\nimport ColumnPickerMixin from './column-picker.mixin';\n\ninterface ColumnPickerItem {\n column: number;\n cssClasses: VueCSSClasses;\n events: Partial<XEventsTypes>;\n isSelected: boolean;\n}\n\n/**\n * Column picker list component renders a list of buttons to choose the columns number.\n *\n * Additionally, this component exposes the following props to modify the classes of the\n * elements: `buttonClass`.\n *\n * @remarks It extends {@link ColumnPickerMixin}.\n *\n * @public\n */\n@Component({\n components: { BaseEventButton }\n})\nexport default class BaseColumnPickerList extends mixins(\n ColumnPickerMixin,\n dynamicPropsMixin(['buttonClass'])\n) {\n /**\n * Maps the column to an object containing: the `column` and `CSS classes`.\n *\n * @returns An array of objects containing the column number and CSS classes.\n *\n * @internal\n */\n protected get columnsWithCssClasses(): ColumnPickerItem[] {\n return this.columns.map(column => ({\n column,\n cssClasses: [\n `x-column-picker-list__item--${column}-cols`,\n {\n 'x-column-picker-list__item--is-selected': this.selectedColumns === column,\n 'x-option-list__item--is-selected': this.selectedColumns === column\n }\n ],\n isSelected: this.selectedColumns === column,\n events: {\n UserClickedColumnPicker: column,\n ColumnsNumberProvided: column\n }\n }));\n }\n}\n"],"names":["BaseEventButton"],"mappings":";;;;;;;AA8CA;;;;;;;;;;AAaA,IAAqB,oBAAoB,GAAzC,MAAqB,oBAAqB,SAAQ,MAAM,CACtD,iBAAiB,EACjB,iBAAiB,CAAC,CAAC,aAAa,CAAC,CAAC,CACnC;;;;;;;;IAQC,IAAc,qBAAqB;QACjC,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KAAK;YACjC,MAAM;YACN,UAAU,EAAE;gBACV,+BAA+B,MAAM,OAAO;gBAC5C;oBACE,yCAAyC,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;oBAC1E,kCAAkC,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;iBACpE;aACF;YACD,UAAU,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;YAC3C,MAAM,EAAE;gBACN,uBAAuB,EAAE,MAAM;gBAC/B,qBAAqB,EAAE,MAAM;aAC9B;SACF,CAAC,CAAC,CAAC;KACL;CACF,CAAA;AA5BoB,oBAAoB;IAHxC,SAAS,CAAC;QACT,UAAU,EAAE,mBAAEA,iBAAe,EAAE;KAChC,CAAC;GACmB,oBAAoB,CA4BxC;aA5BoB,oBAAoB;;;;"}
|
package/js/components/column-picker/base-column-picker-list.vue_rollup-plugin-vue_styles.0.vue.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
|
|
2
2
|
|
|
3
|
-
var css = ".x-column-picker-list[data-v-
|
|
3
|
+
var css = ".x-column-picker-list[data-v-5eadffbc] {\n display: flex;\n list-style-type: none;\n}";
|
|
4
4
|
const isBrowser = /*#__PURE__*/ (function () {
|
|
5
5
|
return (
|
|
6
6
|
Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import Vue from 'vue';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Mixin that creates a string prop in the component for each element
|
|
5
|
+
* within the array passed as `propNames` argument.
|
|
6
|
+
*
|
|
7
|
+
* @param propNames - Array with the names of the props to create.
|
|
8
|
+
* @example
|
|
9
|
+
* ```typescript
|
|
10
|
+
*
|
|
11
|
+
* @Component({
|
|
12
|
+
* components: { RelatedTag },
|
|
13
|
+
* mixins: [xComponentMixin(relatedTagsXModule)]
|
|
14
|
+
* })
|
|
15
|
+
* export default class RelatedTags extends Mixins(dynamicPropsMixin(['list', 'li', 'tag'])) {
|
|
16
|
+
* // This component will have available 3 props: 'list', 'li' and 'tag'
|
|
17
|
+
* }
|
|
18
|
+
* ```
|
|
19
|
+
* @returns Mixin for the component.
|
|
20
|
+
*
|
|
21
|
+
*/
|
|
22
|
+
function dynamicPropsMixin(propNames) {
|
|
23
|
+
return Vue.extend({
|
|
24
|
+
props: propNames.reduce((props, propName) => ({ ...props, [propName]: { type: String } }), {})
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export { dynamicPropsMixin };
|
|
29
|
+
//# sourceMappingURL=dynamic-props.mixin.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dynamic-props.mixin.js","sources":["../../../src/components/dynamic-props.mixin.ts"],"sourcesContent":["import Vue from 'vue';\nimport { PropValidator } from 'vue/types/options';\nimport { ExtendedVue } from 'vue/types/vue';\n\n/**\n * Mixin that creates a string prop in the component for each element\n * within the array passed as `propNames` argument.\n *\n * @param propNames - Array with the names of the props to create.\n * @example\n * ```typescript\n *\n * @Component({\n * components: { RelatedTag },\n * mixins: [xComponentMixin(relatedTagsXModule)]\n * })\n * export default class RelatedTags extends Mixins(dynamicPropsMixin(['list', 'li', 'tag'])) {\n * // This component will have available 3 props: 'list', 'li' and 'tag'\n * }\n * ```\n * @returns Mixin for the component.\n *\n */\nexport function dynamicPropsMixin<PropNames extends string>(\n propNames: PropNames[]\n): ExtendedVue<Vue, unknown, unknown, unknown, Partial<Record<PropNames, string>>> {\n return Vue.extend({\n props: propNames.reduce(\n (props, propName) => ({ ...props, [propName]: { type: String } }),\n {} as Record<PropNames, PropValidator<string>>\n )\n });\n}\n"],"names":[],"mappings":";;AAIA;;;;;;;;;;;;;;;;;;;SAmBgB,iBAAiB,CAC/B,SAAsB;IAEtB,OAAO,GAAG,CAAC,MAAM,CAAC;QAChB,KAAK,EAAE,SAAS,CAAC,MAAM,CACrB,CAAC,KAAK,EAAE,QAAQ,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC,QAAQ,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EACjE,EAA8C,CAC/C;KACF,CAAC,CAAC;AACL;;;;"}
|
|
@@ -81,7 +81,7 @@ __vue_render__._withStripped = true;
|
|
|
81
81
|
/* style */
|
|
82
82
|
const __vue_inject_styles__ = undefined;
|
|
83
83
|
/* scoped */
|
|
84
|
-
const __vue_scope_id__ = "data-v-
|
|
84
|
+
const __vue_scope_id__ = "data-v-6843711c";
|
|
85
85
|
/* module identifier */
|
|
86
86
|
const __vue_module_identifier__ = undefined;
|
|
87
87
|
/* functional template */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sliding-panel.vue.js","sources":["../../../src/components/sliding-panel.vue"],"sourcesContent":["<template>\n <div v-if=\"$slots.default\" class=\"x-sliding-panel\" :class=\"cssClasses\" data-test=\"sliding-panel\">\n <button\n v-if=\"showButtons\"\n @click=\"scrollLeft\"\n class=\"x-sliding-panel__button x-sliding-panel__button-left x-button\"\n :class=\"buttonClass\"\n data-test=\"sliding-panel-left-button\"\n >\n <!-- @slot Left button content -->\n <slot name=\"sliding-panel-left-button\">ᐸ</slot>\n </button>\n <div\n ref=\"scrollContainer\"\n @scroll=\"debouncedUpdateScrollPosition\"\n @transitionend=\"debouncedUpdateScrollPosition\"\n @animationend=\"debouncedUpdateScrollPosition\"\n class=\"x-list x-list--horizontal x-sliding-panel__scroll\"\n data-test=\"sliding-panel-scroll\"\n >\n <!-- @slot (Required) Sliding panel content -->\n <slot />\n </div>\n <button\n v-if=\"showButtons\"\n @click=\"scrollRight\"\n class=\"x-sliding-panel__button x-sliding-panel__button-right x-button\"\n :class=\"buttonClass\"\n data-test=\"sliding-panel-right-button\"\n >\n <!-- @slot Right button content -->\n <slot name=\"sliding-panel-right-button\">ᐳ</slot>\n </button>\n </div>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { VueCSSClasses } from '../utils/types';\n import { Debounce } from './decorators/debounce.decorators';\n\n /**\n * This component allows for any other component or element inside it to be horizontally\n * navigable. It also implements customizable buttons as well as other minor customizations to its\n * general behavior.\n *\n * @public\n */\n @Component\n export default class SlidingPanel extends Vue {\n /**\n * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n *\n * @public\n */\n @Prop({ default: 0.7 })\n public scrollFactor!: number;\n\n /**\n * Would make the navigation buttons visible when they're needed or always hide them.\n *\n * @public\n */\n @Prop({ default: true })\n public showButtons!: boolean;\n\n /**\n * When true, whenever the DOM content in the sliding panel slot changes, it will reset\n * the scroll position to 0.\n *\n * @public\n */\n @Prop({ default: true })\n public resetOnContentChange!: boolean;\n\n /**\n * CSS classes to add to the buttons.\n *\n * @public\n */\n @Prop()\n public buttonClass?: string;\n\n /**\n * Indicates if the scroll is at the start of the sliding panel.\n *\n * @internal\n */\n protected isScrollAtStart = true;\n\n /**\n * Indicates if the scroll is at the end of the sliding panel.\n *\n * @internal\n */\n protected isScrollAtEnd = true;\n\n /**\n * HTMLElement referencing the scroll of the component.\n *\n * @internal\n */\n public $refs!: {\n scrollContainer: HTMLElement;\n };\n\n /**\n * CSS classes to apply based on the scroll position.\n *\n * @returns The CSS classes to apply.\n *\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return {\n 'x-sliding-panel--at-start': this.isScrollAtStart,\n 'x-sliding-panel--at-end': this.isScrollAtEnd\n };\n }\n\n /**\n * Initialises browser platform code:\n * - Creates a mutation observer to detect content changes and reset scroll position.\n * - Stores initial size and scroll position values.\n *\n * @internal\n */\n mounted(): void {\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const resizeObserver = new ResizeObserver(this.debouncedUpdateScrollPosition);\n resizeObserver.observe(this.$el);\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const contentChangedObserver = new MutationObserver(this.restoreAndUpdateScroll);\n this.$watch(\n () => this.resetOnContentChange,\n shouldReset => {\n if (shouldReset) {\n contentChangedObserver.observe(this.$refs.scrollContainer, {\n attributes: false,\n childList: true,\n subtree: true,\n characterData: false\n });\n } else {\n contentChangedObserver.disconnect();\n }\n },\n { immediate: true }\n );\n this.$on('hook:beforeDestroy', () => {\n contentChangedObserver.disconnect();\n resizeObserver.disconnect();\n });\n\n this.updateScrollPosition();\n }\n\n /**\n * Resets the scroll and updates the values of the scroll for the buttons to react.\n *\n * @internal\n */\n @Debounce(100, { leading: true })\n restoreAndUpdateScroll(): void {\n this.$refs.scrollContainer.scroll({ left: 0, behavior: 'smooth' });\n this.updateScrollPosition();\n }\n\n /**\n * Updates the values of the scroll positions to show or hide the buttons depending on it.\n *\n * @internal\n */\n protected updateScrollPosition(): void {\n if (this.$refs.scrollContainer !== undefined) {\n const { scrollLeft, clientWidth, scrollWidth } = this.$refs.scrollContainer;\n this.isScrollAtStart = !scrollLeft;\n /* The 2 px extra is to fix some cases in some resolutions where the scroll + client size is\n * less than the scroll width even when the scroll is at the end */\n this.isScrollAtEnd = scrollLeft + clientWidth + 2 >= scrollWidth;\n }\n }\n\n /**\n * Debounced version of the {@link SlidingPanel.updateScrollPosition | updateScrollPosition}\n * method.\n *\n * @internal\n */\n @Debounce(100, { leading: true })\n debouncedUpdateScrollPosition(): void {\n this.updateScrollPosition();\n }\n\n /**\n * Scrolls the wrapper element to the left.\n *\n * @internal\n */\n protected scrollLeft(): void {\n this.scrollTo(-this.$refs.scrollContainer.clientWidth);\n }\n\n /**\n * Scrolls the wrapper element to the right.\n *\n * @internal\n */\n protected scrollRight(): void {\n this.scrollTo(this.$refs.scrollContainer.clientWidth);\n }\n\n /**\n * Scrolls the wrapper element towards the provided scroll value.\n *\n * @param scrollValue - The value the scroll will go towards.\n *\n * @internal\n */\n protected scrollTo(scrollValue: number): void {\n this.$refs.scrollContainer.scrollBy({\n left: scrollValue * this.scrollFactor,\n behavior: 'smooth'\n });\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-sliding-panel {\n align-items: center;\n display: flex;\n flex-flow: row nowrap;\n height: 100%;\n position: relative;\n\n &__button {\n opacity: 0;\n pointer-events: none;\n position: absolute;\n transition: all ease-out 0.2s;\n z-index: 2; /* To overlay the design system gradient with z-index:1 */\n\n &-left {\n left: 0;\n }\n\n &-right {\n right: 0;\n }\n }\n\n &__scroll {\n display: flex;\n flex: 100%;\n flex-flow: row nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: none; // Firefox\n -ms-overflow-style: none; // IE\n\n // Chrome, Edge & Safari\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n &:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-start) {\n .x-sliding-panel__button-left {\n opacity: 1;\n pointer-events: all;\n }\n }\n\n &:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-end) {\n .x-sliding-panel__button-right {\n opacity: 1;\n pointer-events: all;\n }\n }\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nSimplest implementation of the component, just a list-based component inside its slot.\n\n```vue\n<template>\n <SlidingPanel>\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </SlidingPanel>\n</template>\n\n<script>\n import { SlidingPanel } from '@empathyco/x-components';\n\n export default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel\n }\n };\n</script>\n\n<style>\n .x-sliding-panel {\n width: 200px;\n }\n\n .item {\n display: inline-block;\n width: 100px;\n }\n</style>\n```\n\n### Play with props\n\n#### Modifying scroll buttons travel distance\n\nEdit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`\nprop.\n\n```vue\n<template>\n <SlidingPanel :scrollFactor=\"1.5\">\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </SlidingPanel>\n</template>\n\n<script>\n import { SlidingPanel } from '@empathyco/x-components';\n\n export default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel\n }\n };\n</script>\n\n<style>\n .x-sliding-panel {\n width: 200px;\n }\n\n .item {\n display: inline-block;\n width: 100px;\n }\n</style>\n```\n\n#### Hiding scroll buttons\n\nHide the navigational buttons completely by setting the `showButtons` prop to `false`. This is\nintended to be used when other scrolling options are available, like in mobile, where you can scroll\njust by swiping.\n\n```vue\n<template>\n <SlidingPanel :showButtons=\"false\">\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </SlidingPanel>\n</template>\n\n<script>\n import { SlidingPanel } from '@empathyco/x-components';\n\n export default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel\n }\n };\n</script>\n\n<style>\n .x-sliding-panel {\n width: 200px;\n }\n\n .item {\n display: inline-block;\n width: 100px;\n }\n</style>\n```\n\n#### Disabling reset the scroll when content changes\n\nBy default, whenever the content of the sliding panel changes, it auto resets its scroll position.\nYou can disable this behavior setting the `resetOnContentChange` prop to `false`.\n\n```vue\n<template>\n <div>\n <button @click=\"items++\">Add item</button>\n <label>\n <input type=\"checkbox\" v-model=\"resetOnContentChange\" />\n Reset content onchange\n </label>\n <SlidingPanel :resetOnContentChange=\"resetOnContentChange\">\n <div class=\"item\" v-for=\"item in items\" :key=\"item\">Item {{ item }}</div>\n </SlidingPanel>\n </div>\n</template>\n\n<script>\n import { SlidingPanel } from '@empathyco/x-components';\n\n export default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel\n },\n data() {\n return {\n items: 4,\n resetOnContentChange: false\n };\n }\n };\n</script>\n\n<style>\n .x-sliding-panel {\n width: 200px;\n }\n\n .item {\n display: inline-block;\n width: 100px;\n }\n</style>\n```\n\n## Extending the component\n\n### Overriding Button content\n\nBy default the buttons show an arrow depicting the direction the scroll would go to when clicked,\nbut this content can be customized with anything, from characters to SVG and images.\n\n```vue\n<template>\n <SlidingPanel>\n <template #sliding-panel-left-button>Left</template>\n <template #default>\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </template>\n <template #sliding-panel-right-button>Right</template>\n </SlidingPanel>\n</template>\n\n<script>\n import { SlidingPanel } from '@empathyco/x-components';\n\n export default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel\n }\n };\n</script>\n\n<style>\n .x-sliding-panel {\n width: 200px;\n }\n\n .item {\n display: inline-block;\n width: 100px;\n }\n</style>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"sliding-panel.vue.js","sources":["../../../src/components/sliding-panel.vue"],"sourcesContent":["<template>\n <div v-if=\"$slots.default\" class=\"x-sliding-panel\" :class=\"cssClasses\" data-test=\"sliding-panel\">\n <button\n v-if=\"showButtons\"\n @click=\"scrollLeft\"\n class=\"x-sliding-panel__button x-sliding-panel__button-left x-button\"\n :class=\"buttonClass\"\n data-test=\"sliding-panel-left-button\"\n >\n <!-- @slot Left button content -->\n <slot name=\"sliding-panel-left-button\">ᐸ</slot>\n </button>\n <div\n ref=\"scrollContainer\"\n @scroll=\"debouncedUpdateScrollPosition\"\n @transitionend=\"debouncedUpdateScrollPosition\"\n @animationend=\"debouncedUpdateScrollPosition\"\n class=\"x-list x-list--horizontal x-sliding-panel__scroll\"\n data-test=\"sliding-panel-scroll\"\n >\n <!-- @slot (Required) Sliding panel content -->\n <slot />\n </div>\n <button\n v-if=\"showButtons\"\n @click=\"scrollRight\"\n class=\"x-sliding-panel__button x-sliding-panel__button-right x-button\"\n :class=\"buttonClass\"\n data-test=\"sliding-panel-right-button\"\n >\n <!-- @slot Right button content -->\n <slot name=\"sliding-panel-right-button\">ᐳ</slot>\n </button>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { Component, Mixins, Prop } from 'vue-property-decorator';\n import { VueCSSClasses } from '../utils/types';\n import { Debounce } from './decorators/debounce.decorators';\n import { dynamicPropsMixin } from './dynamic-props.mixin';\n\n /**\n * This component allows for any other component or element inside it to be horizontally\n * navigable. It also implements customizable buttons as well as other minor customizations to its\n * general behavior.\n *\n * Additionally, this component exposes the following props to modify the classes of the\n * elements: `buttonClass`.\n *\n * @public\n */\n @Component\n export default class SlidingPanel extends Mixins(dynamicPropsMixin(['buttonClass'])) {\n /**\n * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n *\n * @public\n */\n @Prop({ default: 0.7 })\n public scrollFactor!: number;\n\n /**\n * Would make the navigation buttons visible when they're needed or always hide them.\n *\n * @public\n */\n @Prop({ default: true })\n public showButtons!: boolean;\n\n /**\n * When true, whenever the DOM content in the sliding panel slot changes, it will reset\n * the scroll position to 0.\n *\n * @public\n */\n @Prop({ default: true })\n public resetOnContentChange!: boolean;\n\n /**\n * Indicates if the scroll is at the start of the sliding panel.\n *\n * @internal\n */\n protected isScrollAtStart = true;\n\n /**\n * Indicates if the scroll is at the end of the sliding panel.\n *\n * @internal\n */\n protected isScrollAtEnd = true;\n\n /**\n * HTMLElement referencing the scroll of the component.\n *\n * @internal\n */\n public $refs!: {\n scrollContainer: HTMLElement;\n };\n\n /**\n * CSS classes to apply based on the scroll position.\n *\n * @returns The CSS classes to apply.\n *\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return {\n 'x-sliding-panel--at-start': this.isScrollAtStart,\n 'x-sliding-panel--at-end': this.isScrollAtEnd\n };\n }\n\n /**\n * Initialises browser platform code:\n * - Creates a mutation observer to detect content changes and reset scroll position.\n * - Stores initial size and scroll position values.\n *\n * @internal\n */\n mounted(): void {\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const resizeObserver = new ResizeObserver(this.debouncedUpdateScrollPosition);\n resizeObserver.observe(this.$el);\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const contentChangedObserver = new MutationObserver(this.restoreAndUpdateScroll);\n this.$watch(\n () => this.resetOnContentChange,\n shouldReset => {\n if (shouldReset) {\n contentChangedObserver.observe(this.$refs.scrollContainer, {\n attributes: false,\n childList: true,\n subtree: true,\n characterData: false\n });\n } else {\n contentChangedObserver.disconnect();\n }\n },\n { immediate: true }\n );\n this.$on('hook:beforeDestroy', () => {\n contentChangedObserver.disconnect();\n resizeObserver.disconnect();\n });\n\n this.updateScrollPosition();\n }\n\n /**\n * Resets the scroll and updates the values of the scroll for the buttons to react.\n *\n * @internal\n */\n @Debounce(100, { leading: true })\n restoreAndUpdateScroll(): void {\n this.$refs.scrollContainer.scroll({ left: 0, behavior: 'smooth' });\n this.updateScrollPosition();\n }\n\n /**\n * Updates the values of the scroll positions to show or hide the buttons depending on it.\n *\n * @internal\n */\n protected updateScrollPosition(): void {\n if (this.$refs.scrollContainer !== undefined) {\n const { scrollLeft, clientWidth, scrollWidth } = this.$refs.scrollContainer;\n this.isScrollAtStart = !scrollLeft;\n /* The 2 px extra is to fix some cases in some resolutions where the scroll + client size is\n * less than the scroll width even when the scroll is at the end */\n this.isScrollAtEnd = scrollLeft + clientWidth + 2 >= scrollWidth;\n }\n }\n\n /**\n * Debounced version of the {@link SlidingPanel.updateScrollPosition | updateScrollPosition}\n * method.\n *\n * @internal\n */\n @Debounce(100, { leading: true })\n debouncedUpdateScrollPosition(): void {\n this.updateScrollPosition();\n }\n\n /**\n * Scrolls the wrapper element to the left.\n *\n * @internal\n */\n protected scrollLeft(): void {\n this.scrollTo(-this.$refs.scrollContainer.clientWidth);\n }\n\n /**\n * Scrolls the wrapper element to the right.\n *\n * @internal\n */\n protected scrollRight(): void {\n this.scrollTo(this.$refs.scrollContainer.clientWidth);\n }\n\n /**\n * Scrolls the wrapper element towards the provided scroll value.\n *\n * @param scrollValue - The value the scroll will go towards.\n *\n * @internal\n */\n protected scrollTo(scrollValue: number): void {\n this.$refs.scrollContainer.scrollBy({\n left: scrollValue * this.scrollFactor,\n behavior: 'smooth'\n });\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-sliding-panel {\n align-items: center;\n display: flex;\n flex-flow: row nowrap;\n height: 100%;\n position: relative;\n\n &__button {\n opacity: 0;\n pointer-events: none;\n position: absolute;\n transition: all ease-out 0.2s;\n z-index: 2; /* To overlay the design system gradient with z-index:1 */\n\n &-left {\n left: 0;\n }\n\n &-right {\n right: 0;\n }\n }\n\n &__scroll {\n display: flex;\n flex: 100%;\n flex-flow: row nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: none; // Firefox\n -ms-overflow-style: none; // IE\n\n // Chrome, Edge & Safari\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n &:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-start) {\n .x-sliding-panel__button-left {\n opacity: 1;\n pointer-events: all;\n }\n }\n\n &:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-end) {\n .x-sliding-panel__button-right {\n opacity: 1;\n pointer-events: all;\n }\n }\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nSimplest implementation of the component, just a list-based component inside its slot.\n\n```vue\n<template>\n <SlidingPanel>\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </SlidingPanel>\n</template>\n\n<script>\n import { SlidingPanel } from '@empathyco/x-components';\n\n export default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel\n }\n };\n</script>\n\n<style>\n .x-sliding-panel {\n width: 200px;\n }\n\n .item {\n display: inline-block;\n width: 100px;\n }\n</style>\n```\n\n### Play with props\n\n#### Modifying scroll buttons travel distance\n\nEdit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`\nprop.\n\n```vue\n<template>\n <SlidingPanel :scrollFactor=\"1.5\">\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </SlidingPanel>\n</template>\n\n<script>\n import { SlidingPanel } from '@empathyco/x-components';\n\n export default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel\n }\n };\n</script>\n\n<style>\n .x-sliding-panel {\n width: 200px;\n }\n\n .item {\n display: inline-block;\n width: 100px;\n }\n</style>\n```\n\n#### Hiding scroll buttons\n\nHide the navigational buttons completely by setting the `showButtons` prop to `false`. This is\nintended to be used when other scrolling options are available, like in mobile, where you can scroll\njust by swiping.\n\n```vue\n<template>\n <SlidingPanel :showButtons=\"false\">\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </SlidingPanel>\n</template>\n\n<script>\n import { SlidingPanel } from '@empathyco/x-components';\n\n export default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel\n }\n };\n</script>\n\n<style>\n .x-sliding-panel {\n width: 200px;\n }\n\n .item {\n display: inline-block;\n width: 100px;\n }\n</style>\n```\n\n#### Customizing the buttons with classes\n\nThe `buttonClass` prop can be used to add classes to the buttons.\n\n```vue\n<template>\n <SlidingPanel buttonClass=\"x-button--round\">\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </SlidingPanel>\n</template>\n\n<script>\n import { SlidingPanel } from '@empathyco/x-components';\n\n export default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel\n }\n };\n</script>\n\n<style>\n .x-sliding-panel {\n width: 200px;\n }\n\n .item {\n display: inline-block;\n width: 100px;\n }\n</style>\n```\n\n#### Disabling reset the scroll when content changes\n\nBy default, whenever the content of the sliding panel changes, it auto resets its scroll position.\nYou can disable this behavior setting the `resetOnContentChange` prop to `false`.\n\n```vue\n<template>\n <div>\n <button @click=\"items++\">Add item</button>\n <label>\n <input type=\"checkbox\" v-model=\"resetOnContentChange\" />\n Reset content onchange\n </label>\n <SlidingPanel :resetOnContentChange=\"resetOnContentChange\">\n <div class=\"item\" v-for=\"item in items\" :key=\"item\">Item {{ item }}</div>\n </SlidingPanel>\n </div>\n</template>\n\n<script>\n import { SlidingPanel } from '@empathyco/x-components';\n\n export default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel\n },\n data() {\n return {\n items: 4,\n resetOnContentChange: false\n };\n }\n };\n</script>\n\n<style>\n .x-sliding-panel {\n width: 200px;\n }\n\n .item {\n display: inline-block;\n width: 100px;\n }\n</style>\n```\n\n## Extending the component\n\n### Overriding Button content\n\nBy default the buttons show an arrow depicting the direction the scroll would go to when clicked,\nbut this content can be customized with anything, from characters to SVG and images.\n\n```vue\n<template>\n <SlidingPanel>\n <template #sliding-panel-left-button>Left</template>\n <template #default>\n <div class=\"item\">Item 1</div>\n <div class=\"item\">Item 2</div>\n <div class=\"item\">Item 3</div>\n <div class=\"item\">Item 4</div>\n </template>\n <template #sliding-panel-right-button>Right</template>\n </SlidingPanel>\n</template>\n\n<script>\n import { SlidingPanel } from '@empathyco/x-components';\n\n export default {\n name: 'SlidingPanelDemo',\n components: {\n SlidingPanel\n }\n };\n</script>\n\n<style>\n .x-sliding-panel {\n width: 200px;\n }\n\n .item {\n display: inline-block;\n width: 100px;\n }\n</style>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,16 +1,19 @@
|
|
|
1
1
|
import { __decorate } from 'tslib';
|
|
2
|
-
import
|
|
3
|
-
import { Prop, Component } from 'vue-property-decorator';
|
|
2
|
+
import { Mixins, Prop, Component } from 'vue-property-decorator';
|
|
4
3
|
import { Debounce } from './decorators/debounce.decorators.js';
|
|
4
|
+
import { dynamicPropsMixin } from './dynamic-props.mixin.js';
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* This component allows for any other component or element inside it to be horizontally
|
|
8
8
|
* navigable. It also implements customizable buttons as well as other minor customizations to its
|
|
9
9
|
* general behavior.
|
|
10
10
|
*
|
|
11
|
+
* Additionally, this component exposes the following props to modify the classes of the
|
|
12
|
+
* elements: `buttonClass`.
|
|
13
|
+
*
|
|
11
14
|
* @public
|
|
12
15
|
*/
|
|
13
|
-
let SlidingPanel = class SlidingPanel extends
|
|
16
|
+
let SlidingPanel = class SlidingPanel extends Mixins(dynamicPropsMixin(['buttonClass'])) {
|
|
14
17
|
constructor() {
|
|
15
18
|
super(...arguments);
|
|
16
19
|
/**
|
|
@@ -142,9 +145,6 @@ __decorate([
|
|
|
142
145
|
__decorate([
|
|
143
146
|
Prop({ default: true })
|
|
144
147
|
], SlidingPanel.prototype, "resetOnContentChange", void 0);
|
|
145
|
-
__decorate([
|
|
146
|
-
Prop()
|
|
147
|
-
], SlidingPanel.prototype, "buttonClass", void 0);
|
|
148
148
|
__decorate([
|
|
149
149
|
Debounce(100, { leading: true })
|
|
150
150
|
], SlidingPanel.prototype, "restoreAndUpdateScroll", null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sliding-panel.vue_rollup-plugin-vue_script.vue.js","sources":["../../../src/components/sliding-panel.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\nimport
|
|
1
|
+
{"version":3,"file":"sliding-panel.vue_rollup-plugin-vue_script.vue.js","sources":["../../../src/components/sliding-panel.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\nimport { Component, Mixins, Prop } from 'vue-property-decorator';\nimport { VueCSSClasses } from '../utils/types';\nimport { Debounce } from './decorators/debounce.decorators';\nimport { dynamicPropsMixin } from './dynamic-props.mixin';\n\n/**\n * This component allows for any other component or element inside it to be horizontally\n * navigable. It also implements customizable buttons as well as other minor customizations to its\n * general behavior.\n *\n * Additionally, this component exposes the following props to modify the classes of the\n * elements: `buttonClass`.\n *\n * @public\n */\n@Component\nexport default class SlidingPanel extends Mixins(dynamicPropsMixin(['buttonClass'])) {\n /**\n * Scroll factor that will dictate how much the scroll moves when pressing a navigation button.\n *\n * @public\n */\n @Prop({ default: 0.7 })\n public scrollFactor!: number;\n\n /**\n * Would make the navigation buttons visible when they're needed or always hide them.\n *\n * @public\n */\n @Prop({ default: true })\n public showButtons!: boolean;\n\n /**\n * When true, whenever the DOM content in the sliding panel slot changes, it will reset\n * the scroll position to 0.\n *\n * @public\n */\n @Prop({ default: true })\n public resetOnContentChange!: boolean;\n\n /**\n * Indicates if the scroll is at the start of the sliding panel.\n *\n * @internal\n */\n protected isScrollAtStart = true;\n\n /**\n * Indicates if the scroll is at the end of the sliding panel.\n *\n * @internal\n */\n protected isScrollAtEnd = true;\n\n /**\n * HTMLElement referencing the scroll of the component.\n *\n * @internal\n */\n public $refs!: {\n scrollContainer: HTMLElement;\n };\n\n /**\n * CSS classes to apply based on the scroll position.\n *\n * @returns The CSS classes to apply.\n *\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return {\n 'x-sliding-panel--at-start': this.isScrollAtStart,\n 'x-sliding-panel--at-end': this.isScrollAtEnd\n };\n }\n\n /**\n * Initialises browser platform code:\n * - Creates a mutation observer to detect content changes and reset scroll position.\n * - Stores initial size and scroll position values.\n *\n * @internal\n */\n mounted(): void {\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const resizeObserver = new ResizeObserver(this.debouncedUpdateScrollPosition);\n resizeObserver.observe(this.$el);\n // eslint-disable-next-line @typescript-eslint/unbound-method\n const contentChangedObserver = new MutationObserver(this.restoreAndUpdateScroll);\n this.$watch(\n () => this.resetOnContentChange,\n shouldReset => {\n if (shouldReset) {\n contentChangedObserver.observe(this.$refs.scrollContainer, {\n attributes: false,\n childList: true,\n subtree: true,\n characterData: false\n });\n } else {\n contentChangedObserver.disconnect();\n }\n },\n { immediate: true }\n );\n this.$on('hook:beforeDestroy', () => {\n contentChangedObserver.disconnect();\n resizeObserver.disconnect();\n });\n\n this.updateScrollPosition();\n }\n\n /**\n * Resets the scroll and updates the values of the scroll for the buttons to react.\n *\n * @internal\n */\n @Debounce(100, { leading: true })\n restoreAndUpdateScroll(): void {\n this.$refs.scrollContainer.scroll({ left: 0, behavior: 'smooth' });\n this.updateScrollPosition();\n }\n\n /**\n * Updates the values of the scroll positions to show or hide the buttons depending on it.\n *\n * @internal\n */\n protected updateScrollPosition(): void {\n if (this.$refs.scrollContainer !== undefined) {\n const { scrollLeft, clientWidth, scrollWidth } = this.$refs.scrollContainer;\n this.isScrollAtStart = !scrollLeft;\n /* The 2 px extra is to fix some cases in some resolutions where the scroll + client size is\n * less than the scroll width even when the scroll is at the end */\n this.isScrollAtEnd = scrollLeft + clientWidth + 2 >= scrollWidth;\n }\n }\n\n /**\n * Debounced version of the {@link SlidingPanel.updateScrollPosition | updateScrollPosition}\n * method.\n *\n * @internal\n */\n @Debounce(100, { leading: true })\n debouncedUpdateScrollPosition(): void {\n this.updateScrollPosition();\n }\n\n /**\n * Scrolls the wrapper element to the left.\n *\n * @internal\n */\n protected scrollLeft(): void {\n this.scrollTo(-this.$refs.scrollContainer.clientWidth);\n }\n\n /**\n * Scrolls the wrapper element to the right.\n *\n * @internal\n */\n protected scrollRight(): void {\n this.scrollTo(this.$refs.scrollContainer.clientWidth);\n }\n\n /**\n * Scrolls the wrapper element towards the provided scroll value.\n *\n * @param scrollValue - The value the scroll will go towards.\n *\n * @internal\n */\n protected scrollTo(scrollValue: number): void {\n this.$refs.scrollContainer.scrollBy({\n left: scrollValue * this.scrollFactor,\n behavior: 'smooth'\n });\n }\n}\n"],"names":[],"mappings":";;;;;AA0CA;;;;;;;;;;AAWA,IAAqB,YAAY,GAAjC,MAAqB,YAAa,SAAQ,MAAM,CAAC,iBAAiB,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC;IAApF;;;;;;;QA+BY,oBAAe,GAAG,IAAI,CAAC;;;;;;QAOvB,kBAAa,GAAG,IAAI,CAAC;KAkIhC;;;;;;;;IAhHC,IAAc,UAAU;QACtB,OAAO;YACL,2BAA2B,EAAE,IAAI,CAAC,eAAe;YACjD,yBAAyB,EAAE,IAAI,CAAC,aAAa;SAC9C,CAAC;KACH;;;;;;;;IASD,OAAO;;QAEL,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC;QAC9E,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;;QAEjC,MAAM,sBAAsB,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;QACjF,IAAI,CAAC,MAAM,CACT,MAAM,IAAI,CAAC,oBAAoB,EAC/B,WAAW;YACT,IAAI,WAAW,EAAE;gBACf,sBAAsB,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE;oBACzD,UAAU,EAAE,KAAK;oBACjB,SAAS,EAAE,IAAI;oBACf,OAAO,EAAE,IAAI;oBACb,aAAa,EAAE,KAAK;iBACrB,CAAC,CAAC;aACJ;iBAAM;gBACL,sBAAsB,CAAC,UAAU,EAAE,CAAC;aACrC;SACF,EACD,EAAE,SAAS,EAAE,IAAI,EAAE,CACpB,CAAC;QACF,IAAI,CAAC,GAAG,CAAC,oBAAoB,EAAE;YAC7B,sBAAsB,CAAC,UAAU,EAAE,CAAC;YACpC,cAAc,CAAC,UAAU,EAAE,CAAC;SAC7B,CAAC,CAAC;QAEH,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;;;;;;IAQD,sBAAsB;QACpB,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;QACnE,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;;;;;;IAOS,oBAAoB;QAC5B,IAAI,IAAI,CAAC,KAAK,CAAC,eAAe,KAAK,SAAS,EAAE;YAC5C,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC;YAC5E,IAAI,CAAC,eAAe,GAAG,CAAC,UAAU,CAAC;;;YAGnC,IAAI,CAAC,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,CAAC,IAAI,WAAW,CAAC;SAClE;KACF;;;;;;;IASD,6BAA6B;QAC3B,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;;;;;;IAOS,UAAU;QAClB,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;KACxD;;;;;;IAOS,WAAW;QACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;KACvD;;;;;;;;IASS,QAAQ,CAAC,WAAmB;QACpC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,QAAQ,CAAC;YAClC,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC,YAAY;YACrC,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;KACJ;CACF,CAAA;AAjKC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC;kDACM;AAQ7B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACK;AAS7B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DACc;AAkFtC;IADC,QAAQ,CAAC,GAAG,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DAIhC;AAwBD;IADC,QAAQ,CAAC,GAAG,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iEAGhC;AAvIkB,YAAY;IADhC,SAAS;GACW,YAAY,CAwKhC;aAxKoB,YAAY;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
|
|
2
2
|
|
|
3
|
-
var css = ".x-sliding-panel[data-v-
|
|
3
|
+
var css = ".x-sliding-panel[data-v-6843711c] {\n align-items: center;\n display: flex;\n flex-flow: row nowrap;\n height: 100%;\n position: relative;\n}\n.x-sliding-panel__button[data-v-6843711c] {\n opacity: 0;\n pointer-events: none;\n position: absolute;\n transition: all ease-out 0.2s;\n z-index: 2;\n /* To overlay the design system gradient with z-index:1 */\n}\n.x-sliding-panel__button-left[data-v-6843711c] {\n left: 0;\n}\n.x-sliding-panel__button-right[data-v-6843711c] {\n right: 0;\n}\n.x-sliding-panel__scroll[data-v-6843711c] {\n display: flex;\n flex: 100%;\n flex-flow: row nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n.x-sliding-panel__scroll[data-v-6843711c]::-webkit-scrollbar {\n display: none;\n}\n.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-start) .x-sliding-panel__button-left[data-v-6843711c] {\n opacity: 1;\n pointer-events: all;\n}\n.x-sliding-panel:not(.x-sliding-panel--show-buttons-on-hover):not(.x-sliding-panel--at-end) .x-sliding-panel__button-right[data-v-6843711c] {\n opacity: 1;\n pointer-events: all;\n}";
|
|
4
4
|
const isBrowser = /*#__PURE__*/ (function () {
|
|
5
5
|
return (
|
|
6
6
|
Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@empathyco/x-components",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.208",
|
|
4
4
|
"description": "Empathy X Components",
|
|
5
5
|
"author": "Empathy Systems Corporation S.L.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -136,5 +136,5 @@
|
|
|
136
136
|
"access": "public",
|
|
137
137
|
"directory": "dist"
|
|
138
138
|
},
|
|
139
|
-
"gitHead": "
|
|
139
|
+
"gitHead": "82adc1486ca2d44a766c8580d1bc4183780453ed"
|
|
140
140
|
}
|
|
@@ -2159,7 +2159,7 @@
|
|
|
2159
2159
|
{
|
|
2160
2160
|
"kind": "Class",
|
|
2161
2161
|
"canonicalReference": "@empathyco/x-components!BaseColumnPickerList:class",
|
|
2162
|
-
"docComment": "/**\n * Column picker list component renders a list of buttons to choose the columns number.\n *\n * @remarks\n *\n * It extends {@link ColumnPickerMixin}.\n *\n * @public\n */\n",
|
|
2162
|
+
"docComment": "/**\n * Column picker list component renders a list of buttons to choose the columns number.\n *\n * Additionally, this component exposes the following props to modify the classes of the elements: `buttonClass`.\n *\n * @remarks\n *\n * It extends {@link ColumnPickerMixin}.\n *\n * @public\n */\n",
|
|
2163
2163
|
"excerptTokens": [
|
|
2164
2164
|
{
|
|
2165
2165
|
"kind": "Content",
|
|
@@ -45993,7 +45993,7 @@
|
|
|
45993
45993
|
{
|
|
45994
45994
|
"kind": "Class",
|
|
45995
45995
|
"canonicalReference": "@empathyco/x-components!SlidingPanel:class",
|
|
45996
|
-
"docComment": "/**\n * This component allows for any other component or element inside it to be horizontally navigable. It also implements customizable buttons as well as other minor customizations to its general behavior.\n *\n * @public\n */\n",
|
|
45996
|
+
"docComment": "/**\n * This component allows for any other component or element inside it to be horizontally navigable. It also implements customizable buttons as well as other minor customizations to its general behavior.\n *\n * Additionally, this component exposes the following props to modify the classes of the elements: `buttonClass`.\n *\n * @public\n */\n",
|
|
45997
45997
|
"excerptTokens": [
|
|
45998
45998
|
{
|
|
45999
45999
|
"kind": "Content",
|
|
@@ -46001,8 +46001,8 @@
|
|
|
46001
46001
|
},
|
|
46002
46002
|
{
|
|
46003
46003
|
"kind": "Reference",
|
|
46004
|
-
"text": "
|
|
46005
|
-
"canonicalReference": "
|
|
46004
|
+
"text": "SlidingPanel_base",
|
|
46005
|
+
"canonicalReference": "@empathyco/x-components!~SlidingPanel_base"
|
|
46006
46006
|
},
|
|
46007
46007
|
{
|
|
46008
46008
|
"kind": "Content",
|
|
@@ -46012,33 +46012,6 @@
|
|
|
46012
46012
|
"releaseTag": "Public",
|
|
46013
46013
|
"name": "SlidingPanel",
|
|
46014
46014
|
"members": [
|
|
46015
|
-
{
|
|
46016
|
-
"kind": "Property",
|
|
46017
|
-
"canonicalReference": "@empathyco/x-components!SlidingPanel#buttonClass:member",
|
|
46018
|
-
"docComment": "/**\n * CSS classes to add to the buttons.\n *\n * @public\n */\n",
|
|
46019
|
-
"excerptTokens": [
|
|
46020
|
-
{
|
|
46021
|
-
"kind": "Content",
|
|
46022
|
-
"text": "buttonClass?: "
|
|
46023
|
-
},
|
|
46024
|
-
{
|
|
46025
|
-
"kind": "Content",
|
|
46026
|
-
"text": "string"
|
|
46027
|
-
},
|
|
46028
|
-
{
|
|
46029
|
-
"kind": "Content",
|
|
46030
|
-
"text": ";"
|
|
46031
|
-
}
|
|
46032
|
-
],
|
|
46033
|
-
"isOptional": true,
|
|
46034
|
-
"releaseTag": "Public",
|
|
46035
|
-
"name": "buttonClass",
|
|
46036
|
-
"propertyTypeTokenRange": {
|
|
46037
|
-
"startIndex": 1,
|
|
46038
|
-
"endIndex": 2
|
|
46039
|
-
},
|
|
46040
|
-
"isStatic": false
|
|
46041
|
-
},
|
|
46042
46015
|
{
|
|
46043
46016
|
"kind": "Property",
|
|
46044
46017
|
"canonicalReference": "@empathyco/x-components!SlidingPanel#resetOnContentChange:member",
|
|
@@ -4408,13 +4408,14 @@ export class SlicedFilters extends SlicedFilters_base {
|
|
|
4408
4408
|
protected toggleShowMoreFilters(event: MouseEvent): void;
|
|
4409
4409
|
}
|
|
4410
4410
|
|
|
4411
|
+
// Warning: (ae-forgotten-export) The symbol "SlidingPanel_base" needs to be exported by the entry point index.d.ts
|
|
4412
|
+
//
|
|
4411
4413
|
// @public
|
|
4412
|
-
export class SlidingPanel extends
|
|
4414
|
+
export class SlidingPanel extends SlidingPanel_base {
|
|
4413
4415
|
// @internal
|
|
4414
4416
|
$refs: {
|
|
4415
4417
|
scrollContainer: HTMLElement;
|
|
4416
4418
|
};
|
|
4417
|
-
buttonClass?: string;
|
|
4418
4419
|
// @internal
|
|
4419
4420
|
protected get cssClasses(): VueCSSClasses;
|
|
4420
4421
|
// @internal
|
|
@@ -7,10 +7,13 @@ interface ColumnPickerItem {
|
|
|
7
7
|
events: Partial<XEventsTypes>;
|
|
8
8
|
isSelected: boolean;
|
|
9
9
|
}
|
|
10
|
-
declare const BaseColumnPickerList_base: import("vue-class-component/lib/declarations").VueClass<ColumnPickerMixin
|
|
10
|
+
declare const BaseColumnPickerList_base: import("vue-class-component/lib/declarations").VueClass<ColumnPickerMixin & object & Record<never, any> & Partial<Record<"buttonClass", string>>>;
|
|
11
11
|
/**
|
|
12
12
|
* Column picker list component renders a list of buttons to choose the columns number.
|
|
13
13
|
*
|
|
14
|
+
* Additionally, this component exposes the following props to modify the classes of the
|
|
15
|
+
* elements: `buttonClass`.
|
|
16
|
+
*
|
|
14
17
|
* @remarks It extends {@link ColumnPickerMixin}.
|
|
15
18
|
*
|
|
16
19
|
* @public
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-column-picker-list.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/column-picker/base-column-picker-list.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"base-column-picker-list.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/column-picker/base-column-picker-list.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAiCA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAG5C,OAAO,iBAAiB,MAAM,uBAAuB,CAAC;AAEtD,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,aAAa,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC9B,UAAU,EAAE,OAAO,CAAC;CACrB;;AAED;;;;;;;;;GASG;AAIH,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,yBAGjD;IACC;;;;;;OAMG;IACH,SAAS,KAAK,qBAAqB,IAAI,gBAAgB,EAAE,CAgBxD;CACF"}
|
|
@@ -1,13 +1,16 @@
|
|
|
1
|
-
import Vue from 'vue';
|
|
2
1
|
import { VueCSSClasses } from '../utils/types';
|
|
2
|
+
declare const SlidingPanel_base: import("vue-class-component/lib/declarations").VueClass<object & Record<never, any> & Partial<Record<"buttonClass", string>>>;
|
|
3
3
|
/**
|
|
4
4
|
* This component allows for any other component or element inside it to be horizontally
|
|
5
5
|
* navigable. It also implements customizable buttons as well as other minor customizations to its
|
|
6
6
|
* general behavior.
|
|
7
7
|
*
|
|
8
|
+
* Additionally, this component exposes the following props to modify the classes of the
|
|
9
|
+
* elements: `buttonClass`.
|
|
10
|
+
*
|
|
8
11
|
* @public
|
|
9
12
|
*/
|
|
10
|
-
export default class SlidingPanel extends
|
|
13
|
+
export default class SlidingPanel extends SlidingPanel_base {
|
|
11
14
|
/**
|
|
12
15
|
* Scroll factor that will dictate how much the scroll moves when pressing a navigation button.
|
|
13
16
|
*
|
|
@@ -27,12 +30,6 @@ export default class SlidingPanel extends Vue {
|
|
|
27
30
|
* @public
|
|
28
31
|
*/
|
|
29
32
|
resetOnContentChange: boolean;
|
|
30
|
-
/**
|
|
31
|
-
* CSS classes to add to the buttons.
|
|
32
|
-
*
|
|
33
|
-
* @public
|
|
34
|
-
*/
|
|
35
|
-
buttonClass?: string;
|
|
36
33
|
/**
|
|
37
34
|
* Indicates if the scroll is at the start of the sliding panel.
|
|
38
35
|
*
|
|
@@ -109,4 +106,5 @@ export default class SlidingPanel extends Vue {
|
|
|
109
106
|
*/
|
|
110
107
|
protected scrollTo(scrollValue: number): void;
|
|
111
108
|
}
|
|
109
|
+
export {};
|
|
112
110
|
//# sourceMappingURL=sliding-panel.vue?rollup-plugin-vue=script.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sliding-panel.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../src/components/sliding-panel.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"sliding-panel.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../src/components/sliding-panel.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAsCA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;;AAI/C;;;;;;;;;GASG;AAEH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,iBAA0C;IAClF;;;;OAIG;IAEI,YAAY,EAAG,MAAM,CAAC;IAE7B;;;;OAIG;IAEI,WAAW,EAAG,OAAO,CAAC;IAE7B;;;;;OAKG;IAEI,oBAAoB,EAAG,OAAO,CAAC;IAEtC;;;;OAIG;IACH,SAAS,CAAC,eAAe,UAAQ;IAEjC;;;;OAIG;IACH,SAAS,CAAC,aAAa,UAAQ;IAE/B;;;;OAIG;IACI,KAAK,EAAG;QACb,eAAe,EAAE,WAAW,CAAC;KAC9B,CAAC;IAEF;;;;;;OAMG;IACH,SAAS,KAAK,UAAU,IAAI,aAAa,CAKxC;IAED;;;;;;OAMG;IACH,OAAO,IAAI,IAAI;IA8Bf;;;;OAIG;IAEH,sBAAsB,IAAI,IAAI;IAK9B;;;;OAIG;IACH,SAAS,CAAC,oBAAoB,IAAI,IAAI;IAUtC;;;;;OAKG;IAEH,6BAA6B,IAAI,IAAI;IAIrC;;;;OAIG;IACH,SAAS,CAAC,UAAU,IAAI,IAAI;IAI5B;;;;OAIG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;IAI7B;;;;;;OAMG;IACH,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI;CAM9C"}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
-
|
|
3
|
-
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [SlidingPanel](./x-components.slidingpanel.md) > [buttonClass](./x-components.slidingpanel.buttonclass.md)
|
|
4
|
-
|
|
5
|
-
## SlidingPanel.buttonClass property
|
|
6
|
-
|
|
7
|
-
CSS classes to add to the buttons.
|
|
8
|
-
|
|
9
|
-
<b>Signature:</b>
|
|
10
|
-
|
|
11
|
-
```typescript
|
|
12
|
-
buttonClass?: string;
|
|
13
|
-
```
|