@empathyco/x-components 3.0.0-alpha.210 → 3.0.0-alpha.211
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 +19 -0
- package/design-system/base.css +14 -14
- package/design-system/full-theme.css +1557 -1556
- package/docs/API-reference/api/x-adapter-platform.platformbanner.md +1 -1
- package/docs/API-reference/api/x-adapter-platform.platformbanner.position.md +1 -1
- package/docs/API-reference/api/x-adapter-platform.platformpromoted.md +1 -1
- package/docs/API-reference/api/x-adapter-platform.platformpromoted.position.md +1 -1
- package/docs/API-reference/api/x-types.banner.md +1 -1
- package/docs/API-reference/api/x-types.banner.position.md +1 -1
- package/docs/API-reference/api/x-types.promoted.md +1 -1
- package/docs/API-reference/api/x-types.promoted.position.md +1 -1
- package/docs/API-reference/components/search/x-components.results-list.md +9 -4
- package/js/x-modules/search/components/promoteds-list.vue.js.map +1 -1
- package/js/x-modules/search/components/promoteds-list.vue_rollup-plugin-vue_script.vue.js +18 -3
- package/js/x-modules/search/components/promoteds-list.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/x-modules/search/components/results-list.vue.js.map +1 -1
- package/package.json +4 -4
- package/report/x-adapter-platform.api.json +4 -4
- package/report/x-types.api.json +4 -4
- package/types/x-modules/search/components/promoteds-list.vue.d.ts.map +1 -1
|
@@ -18,7 +18,7 @@ export interface PlatformBanner
|
|
|
18
18
|
| --- | --- | --- |
|
|
19
19
|
| [id](./x-adapter-platform.platformbanner.id.md) | string | |
|
|
20
20
|
| [image\_url](./x-adapter-platform.platformbanner.image_url.md) | string | |
|
|
21
|
-
| [position](./x-adapter-platform.platformbanner.position.md) | number |
|
|
21
|
+
| [position?](./x-adapter-platform.platformbanner.position.md) | number | <i>(Optional)</i> |
|
|
22
22
|
| [tagging?](./x-adapter-platform.platformbanner.tagging.md) | { query: string; } | <i>(Optional)</i> |
|
|
23
23
|
| [title](./x-adapter-platform.platformbanner.title.md) | string | |
|
|
24
24
|
| [url](./x-adapter-platform.platformbanner.url.md) | string | |
|
|
@@ -18,7 +18,7 @@ export interface PlatformPromoted
|
|
|
18
18
|
| --- | --- | --- |
|
|
19
19
|
| [id](./x-adapter-platform.platformpromoted.id.md) | string | |
|
|
20
20
|
| [image\_url](./x-adapter-platform.platformpromoted.image_url.md) | string | |
|
|
21
|
-
| [position](./x-adapter-platform.platformpromoted.position.md) | number |
|
|
21
|
+
| [position?](./x-adapter-platform.platformpromoted.position.md) | number | <i>(Optional)</i> |
|
|
22
22
|
| [tagging?](./x-adapter-platform.platformpromoted.tagging.md) | { query: string; } | <i>(Optional)</i> |
|
|
23
23
|
| [title](./x-adapter-platform.platformpromoted.title.md) | string | |
|
|
24
24
|
| [url](./x-adapter-platform.platformpromoted.url.md) | string | |
|
|
@@ -18,7 +18,7 @@ export interface Banner extends NamedModel<'Banner'>, Identifiable, Taggable
|
|
|
18
18
|
| Property | Type | Description |
|
|
19
19
|
| --- | --- | --- |
|
|
20
20
|
| [image](./x-types.banner.image.md) | string | Banner image. |
|
|
21
|
-
| [position](./x-types.banner.position.md) | number | Banner position (= row) inside the grid. |
|
|
21
|
+
| [position?](./x-types.banner.position.md) | number | <i>(Optional)</i> Banner position (= row) inside the grid. |
|
|
22
22
|
| [title](./x-types.banner.title.md) | string | Banner title. |
|
|
23
23
|
| [url](./x-types.banner.url.md) | string | URL to redirect. |
|
|
24
24
|
|
|
@@ -18,7 +18,7 @@ export interface Promoted extends NamedModel<'Promoted'>, Identifiable, Taggable
|
|
|
18
18
|
| Property | Type | Description |
|
|
19
19
|
| --- | --- | --- |
|
|
20
20
|
| [image](./x-types.promoted.image.md) | string | Promoted image. |
|
|
21
|
-
| [position](./x-types.promoted.position.md) | number | Promoted position inside the grid. |
|
|
21
|
+
| [position?](./x-types.promoted.position.md) | number | <i>(Optional)</i> Promoted position inside the grid. |
|
|
22
22
|
| [title](./x-types.promoted.title.md) | string | Promoted title. |
|
|
23
23
|
| [url](./x-types.promoted.url.md) | string | URL to redirect. |
|
|
24
24
|
|
|
@@ -162,18 +162,23 @@ Starting with the `ResultsList` component as root element, you can concat the li
|
|
|
162
162
|
using `BannersList`, `PromotedsList`, `BaseGrid` or any component that injects the `listItems`
|
|
163
163
|
value.
|
|
164
164
|
|
|
165
|
+
The order in which elements are placed in the template will define the concat strategy of the items,
|
|
166
|
+
so it is important to define it properly; for example, Promoteds will be usually before Banners so
|
|
167
|
+
first promoted items are inserted within the results and then banner items are placed on top of
|
|
168
|
+
that, occupying the rows.
|
|
169
|
+
|
|
165
170
|
```vue
|
|
166
171
|
<template>
|
|
167
172
|
<div>
|
|
168
173
|
<SearchInput />
|
|
169
174
|
<ResultsList>
|
|
170
|
-
<
|
|
171
|
-
<
|
|
175
|
+
<PromotedsList>
|
|
176
|
+
<BannersList>
|
|
172
177
|
<template #result="{ item }">Result: {{ item.id }}</template>
|
|
173
178
|
<template #banner="{ item }">Banner: {{ item.id }}</template>
|
|
174
179
|
<template #promoted="{ item }">Promoted: {{ item.id }}</template>
|
|
175
|
-
</
|
|
176
|
-
</
|
|
180
|
+
</BannersList>
|
|
181
|
+
</PromotedsList>
|
|
177
182
|
</ResultsList>
|
|
178
183
|
</div>
|
|
179
184
|
</template>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"promoteds-list.vue.js","sources":["../../../../../src/x-modules/search/components/promoteds-list.vue"],"sourcesContent":["<template>\n <NoElement>\n <!--\n @slot Customized Promoteds List layout.\n @binding {Promoted[]} items - Promoteds plus the injected list items to render.\n @binding {Vue | string} animation - Animation to animate the elements.\n -->\n <slot v-bind=\"{ items, animation }\">\n <ItemsList :animation=\"animation\" :items=\"items\">\n <template v-for=\"(_, slotName) in $scopedSlots\" v-slot:[slotName]=\"{ item }\">\n <slot :name=\"slotName\" :item=\"item\" />\n </template>\n </ItemsList>\n </slot>\n </NoElement>\n</template>\n\n<script lang=\"ts\">\n import { Promoted } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { State } from '../../../components/decorators/store.decorators';\n import { NoElement } from '../../../components/no-element';\n import { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';\n import ItemsList from '../../../components/items-list.vue';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { ListItem } from '../../../utils/types';\n import { searchXModule } from '../x-module';\n\n /**\n * It renders a {@link ItemsList} of promoteds from {@link SearchState.promoteds} by default\n * using the `ItemsInjectionMixin`.\n *\n * The component provides a default slot which wraps the whole component with the `promoteds`\n * plus the `searchInjectedItems` which also contains the injected list items from\n * the ancestor.\n *\n * It also provides the parent slots to customize the items.\n *\n * @public\n */\n @Component({\n components: {\n NoElement,\n ItemsList\n },\n mixins: [xComponentMixin(searchXModule)]\n })\n export default class PromotedsList extends ItemsListInjectionMixin {\n /**\n * The promoteds to render from the state.\n *\n * @public\n */\n @State('search', 'promoteds')\n public stateItems!: Promoted[];\n\n /**\n * Animation component that will be used to animate the promoteds.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n protected animation!: Vue | string;\n\n /**\n * The `stateItems` concatenated with the `injectedListItems` if there are.\n *\n * @remarks This computed defines the merging strategy of the `stateItems` and the\n * `injectedListItems`.\n *\n * @returns List of {@link ListItem}.\n *\n * @internal\n */\n public override get items(): ListItem[] {\n
|
|
1
|
+
{"version":3,"file":"promoteds-list.vue.js","sources":["../../../../../src/x-modules/search/components/promoteds-list.vue"],"sourcesContent":["<template>\n <NoElement>\n <!--\n @slot Customized Promoteds List layout.\n @binding {Promoted[]} items - Promoteds plus the injected list items to render.\n @binding {Vue | string} animation - Animation to animate the elements.\n -->\n <slot v-bind=\"{ items, animation }\">\n <ItemsList :animation=\"animation\" :items=\"items\">\n <template v-for=\"(_, slotName) in $scopedSlots\" v-slot:[slotName]=\"{ item }\">\n <slot :name=\"slotName\" :item=\"item\" />\n </template>\n </ItemsList>\n </slot>\n </NoElement>\n</template>\n\n<script lang=\"ts\">\n import { Promoted } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { State } from '../../../components/decorators/store.decorators';\n import { NoElement } from '../../../components/no-element';\n import { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';\n import ItemsList from '../../../components/items-list.vue';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { ListItem } from '../../../utils/types';\n import { searchXModule } from '../x-module';\n\n /**\n * It renders a {@link ItemsList} of promoteds from {@link SearchState.promoteds} by default\n * using the `ItemsInjectionMixin`.\n *\n * The component provides a default slot which wraps the whole component with the `promoteds`\n * plus the `searchInjectedItems` which also contains the injected list items from\n * the ancestor.\n *\n * It also provides the parent slots to customize the items.\n *\n * @public\n */\n @Component({\n components: {\n NoElement,\n ItemsList\n },\n mixins: [xComponentMixin(searchXModule)]\n })\n export default class PromotedsList extends ItemsListInjectionMixin {\n /**\n * The promoteds to render from the state.\n *\n * @public\n */\n @State('search', 'promoteds')\n public stateItems!: Promoted[];\n\n /**\n * Animation component that will be used to animate the promoteds.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n protected animation!: Vue | string;\n\n /**\n * The `stateItems` concatenated with the `injectedListItems` if there are.\n *\n * @remarks This computed defines the merging strategy of the `stateItems` and the\n * `injectedListItems`.\n *\n * @returns List of {@link ListItem}.\n *\n * @internal\n */\n public override get items(): ListItem[] {\n if (!this.injectedListItems?.length) {\n return this.stateItems;\n }\n const items = [...this.injectedListItems];\n for (const item of this.stateItems) {\n const position = item.position ?? 1;\n let index = position - 1;\n while (items.at(index)?.modelName === 'Promoted') {\n index++;\n }\n const isIndexInLoadedPages = index <= items.length;\n const areAllPagesLoaded = this.$x.results.length === this.$x.totalResults;\n if (!isIndexInLoadedPages && !areAllPagesLoaded) {\n break;\n }\n items.splice(index, 0, item);\n }\n return items;\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\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the PromotedsList is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n <div>\n <SearchInput />\n\n <PromotedsList />\n </div>\n</template>\n\n<script>\n import { PromotedsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'PromotedsListDemo',\n components: {\n SearchInput,\n PromotedsList\n }\n };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n <div>\n <SearchInput />\n <PromotedsList :animation=\"fadeAndSlide\" />\n </div>\n</template>\n\n<script>\n import { PromotedsList } from '@empathyco/x-components/search';\n import { FadeAndSlide } from '@empathyco/x-components/animations';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'PromotedsListDemo',\n components: {\n SearchInput,\n PromotedsList\n },\n data() {\n return {\n fadeAndSlide: FadeAndSlide\n };\n }\n };\n</script>\n```\n\n### Overriding default content\n\n```vue\n<template>\n <div>\n <SearchInput />\n <PromotedsList #default=\"{ items, animation }\">\n <BaseGrid :items=\"items\" :animation=\"animation\">\n <template #promoted=\"{ item }\">\n <span>Promoted: {{ item.title }}</span>\n </template>\n <template #default=\"{ item }\">\n <span>Default: {{ item }}</span>\n </template>\n </BaseGrid>\n </PromotedsList>\n </div>\n</template>\n\n<script>\n import { PromotedsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { BaseGrid } from '@empathyco/x-components';\n\n export default {\n name: 'PromotedsListDemo',\n components: {\n SearchInput,\n PromotedsList,\n BaseGrid\n }\n };\n</script>\n```\n\n### Overriding promoted content\n\n```vue\n<template>\n <div>\n <SearchInput />\n <PromotedsList #promoted=\"{ item }\">\n <span class=\"promoted\">\n {{ item.title }}\n </span>\n </PromotedsList>\n </div>\n</template>\n\n<script>\n import { PromotedsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'PromotedsListDemo',\n components: {\n SearchInput,\n PromotedsList\n }\n };\n</script>\n```\n\n### Data injection\n\nStarting with the `ResultsList` component as root element, you can concat the list of list items\nusing `BannersList`, `PromotedsList`, `BaseGrid` or any component that injects the `listItems`\nvalue.\n\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <PromotedsList>\n <template #promoted=\"{ item }\">Promoted: {{ item.id }}</template>\n <template #result=\"{ item }\">Result: {{ item.id }}</template>\n </PromotedsList>\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { ResultsList, PromotedsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'PromotedsListDemo',\n components: {\n SearchInput,\n ResultsList,\n PromotedsList\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -31,9 +31,24 @@ let PromotedsList = class PromotedsList extends ItemsListInjectionMixin {
|
|
|
31
31
|
* @internal
|
|
32
32
|
*/
|
|
33
33
|
get items() {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
34
|
+
if (!this.injectedListItems?.length) {
|
|
35
|
+
return this.stateItems;
|
|
36
|
+
}
|
|
37
|
+
const items = [...this.injectedListItems];
|
|
38
|
+
for (const item of this.stateItems) {
|
|
39
|
+
const position = item.position ?? 1;
|
|
40
|
+
let index = position - 1;
|
|
41
|
+
while (items.at(index)?.modelName === 'Promoted') {
|
|
42
|
+
index++;
|
|
43
|
+
}
|
|
44
|
+
const isIndexInLoadedPages = index <= items.length;
|
|
45
|
+
const areAllPagesLoaded = this.$x.results.length === this.$x.totalResults;
|
|
46
|
+
if (!isIndexInLoadedPages && !areAllPagesLoaded) {
|
|
47
|
+
break;
|
|
48
|
+
}
|
|
49
|
+
items.splice(index, 0, item);
|
|
50
|
+
}
|
|
51
|
+
return items;
|
|
37
52
|
}
|
|
38
53
|
};
|
|
39
54
|
__decorate([
|
package/js/x-modules/search/components/promoteds-list.vue_rollup-plugin-vue_script.vue.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"promoteds-list.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/search/components/promoteds-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\nimport { Promoted } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { State } from '../../../components/decorators/store.decorators';\nimport { NoElement } from '../../../components/no-element';\nimport { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';\nimport ItemsList from '../../../components/items-list.vue';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { ListItem } from '../../../utils/types';\nimport { searchXModule } from '../x-module';\n\n/**\n * It renders a {@link ItemsList} of promoteds from {@link SearchState.promoteds} by default\n * using the `ItemsInjectionMixin`.\n *\n * The component provides a default slot which wraps the whole component with the `promoteds`\n * plus the `searchInjectedItems` which also contains the injected list items from\n * the ancestor.\n *\n * It also provides the parent slots to customize the items.\n *\n * @public\n */\n@Component({\n components: {\n NoElement,\n ItemsList\n },\n mixins: [xComponentMixin(searchXModule)]\n})\nexport default class PromotedsList extends ItemsListInjectionMixin {\n /**\n * The promoteds to render from the state.\n *\n * @public\n */\n @State('search', 'promoteds')\n public stateItems!: Promoted[];\n\n /**\n * Animation component that will be used to animate the promoteds.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n protected animation!: Vue | string;\n\n /**\n * The `stateItems` concatenated with the `injectedListItems` if there are.\n *\n * @remarks This computed defines the merging strategy of the `stateItems` and the\n * `injectedListItems`.\n *\n * @returns List of {@link ListItem}.\n *\n * @internal\n */\n public override get items(): ListItem[] {\n
|
|
1
|
+
{"version":3,"file":"promoteds-list.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/search/components/promoteds-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\nimport { Promoted } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { State } from '../../../components/decorators/store.decorators';\nimport { NoElement } from '../../../components/no-element';\nimport { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';\nimport ItemsList from '../../../components/items-list.vue';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { ListItem } from '../../../utils/types';\nimport { searchXModule } from '../x-module';\n\n/**\n * It renders a {@link ItemsList} of promoteds from {@link SearchState.promoteds} by default\n * using the `ItemsInjectionMixin`.\n *\n * The component provides a default slot which wraps the whole component with the `promoteds`\n * plus the `searchInjectedItems` which also contains the injected list items from\n * the ancestor.\n *\n * It also provides the parent slots to customize the items.\n *\n * @public\n */\n@Component({\n components: {\n NoElement,\n ItemsList\n },\n mixins: [xComponentMixin(searchXModule)]\n})\nexport default class PromotedsList extends ItemsListInjectionMixin {\n /**\n * The promoteds to render from the state.\n *\n * @public\n */\n @State('search', 'promoteds')\n public stateItems!: Promoted[];\n\n /**\n * Animation component that will be used to animate the promoteds.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n protected animation!: Vue | string;\n\n /**\n * The `stateItems` concatenated with the `injectedListItems` if there are.\n *\n * @remarks This computed defines the merging strategy of the `stateItems` and the\n * `injectedListItems`.\n *\n * @returns List of {@link ListItem}.\n *\n * @internal\n */\n public override get items(): ListItem[] {\n if (!this.injectedListItems?.length) {\n return this.stateItems;\n }\n const items = [...this.injectedListItems];\n for (const item of this.stateItems) {\n const position = item.position ?? 1;\n let index = position - 1;\n while (items.at(index)?.modelName === 'Promoted') {\n index++;\n }\n const isIndexInLoadedPages = index <= items.length;\n const areAllPagesLoaded = this.$x.results.length === this.$x.totalResults;\n if (!isIndexInLoadedPages && !areAllPagesLoaded) {\n break;\n }\n items.splice(index, 0, item);\n }\n return items;\n }\n}\n"],"names":["ItemsList"],"mappings":";;;;;;;;;AA6BA;;;;;;;;;;;;AAmBA,IAAqB,aAAa,GAAlC,MAAqB,aAAc,SAAQ,uBAAuB;;;;;;;;;;;IA2BhE,IAAoB,KAAK;QACvB,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,MAAM,EAAE;YACnC,OAAO,IAAI,CAAC,UAAU,CAAC;SACxB;QACD,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC1C,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;YAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC;YACpC,IAAI,KAAK,GAAG,QAAQ,GAAG,CAAC,CAAC;YACzB,OAAO,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,SAAS,KAAK,UAAU,EAAE;gBAChD,KAAK,EAAE,CAAC;aACT;YACD,MAAM,oBAAoB,GAAG,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC;YACnD,MAAM,iBAAiB,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,KAAK,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC;YAC1E,IAAI,CAAC,oBAAoB,IAAI,CAAC,iBAAiB,EAAE;gBAC/C,MAAM;aACP;YACD,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;SAC9B;QACD,OAAO,KAAK,CAAC;KACd;CACF,CAAA;AAxCC;IADC,KAAK,CAAC,QAAQ,EAAE,WAAW,CAAC;iDACE;AAQ/B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACW;AAfhB,aAAa;IAPjC,SAAS,CAAC;QACT,UAAU,EAAE;YACV,SAAS;uBACTA,iBAAS;SACV;QACD,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACzC,CAAC;GACmB,aAAa,CA+CjC;aA/CoB,aAAa;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"results-list.vue.js","sources":["../../../../../src/x-modules/search/components/results-list.vue"],"sourcesContent":["<template>\n <NoElement>\n <!--\n @slot Customize ResultsList.\n @binding {Result[]} items - Results to render.\n @binding {Vue | string} animation - Animation to animate the elements.\n -->\n <slot v-bind=\"{ items, animation }\">\n <ItemsList :animation=\"animation\" :items=\"items\">\n <template v-for=\"(_, slotName) in $scopedSlots\" v-slot:[slotName]=\"{ item }\">\n <slot :name=\"slotName\" :item=\"item\" />\n </template>\n </ItemsList>\n </slot>\n </NoElement>\n</template>\n\n<script lang=\"ts\">\n import { Result } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop, Watch } from 'vue-property-decorator';\n import {\n HAS_MORE_ITEMS_KEY,\n LIST_ITEMS_KEY,\n QUERY_KEY\n } from '../../../components/decorators/injection.consts';\n import { XProvide } from '../../../components/decorators/injection.decorators';\n import { State } from '../../../components/decorators/store.decorators';\n import { NoElement } from '../../../components/no-element';\n import ItemsList from '../../../components/items-list.vue';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { InfiniteScroll } from '../../../directives/infinite-scroll/infinite-scroll.types';\n import { searchXModule } from '../x-module';\n import { RequestStatus } from '../../../store/utils/status-store.utils';\n\n /**\n * It renders a {@link ItemsList} list with the results from {@link SearchState.results} by\n * default.\n *\n * The component provides a default slot which wraps the whole component with the `results` bound.\n *\n * It also provides the slot result to customize the item, which is within the default slot, with\n * the result bound.\n *\n * @public\n */\n @Component({\n components: {\n NoElement,\n ItemsList\n },\n mixins: [xComponentMixin(searchXModule)]\n })\n export default class ResultsList extends Vue implements InfiniteScroll {\n /**\n * The results to render from the state.\n *\n * @remarks The results list are provided with `items` key. It can be\n * concatenated with list items from components such as `BannersList`, `PromotedsList`,\n * `BaseGrid` or any component that injects the list.\n *\n * @public\n */\n @XProvide(LIST_ITEMS_KEY)\n @State('search', 'results')\n public items!: Result[];\n\n /**\n * It provides the search query.\n * This query is updated only when the search request has succeeded.\n */\n @XProvide(QUERY_KEY)\n public providedQuery = '';\n\n /**\n * Indicates if there are more available results that have not been injected.\n *\n * @returns Boolean.\n * @public\n */\n @XProvide(HAS_MORE_ITEMS_KEY)\n public get hasMoreItems(): boolean {\n return this.items.length < this.totalResults;\n }\n\n /**\n * The total number of results, taken from the state.\n */\n @State('search', 'totalResults')\n public totalResults!: number;\n\n /**\n * The status of the search request, taken from the state.\n */\n @State('search', 'status')\n public searchStatus!: RequestStatus;\n\n /**\n * The query of the search request, taken from the state.\n */\n @State('search', 'query')\n public searchQuery!: string;\n\n /**\n * Animation component that will be used to animate the results.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n protected animation!: Vue | string;\n\n /**\n * Updates the query to be provided to the child components\n * when the search request has succeeded.\n *\n * @param status - The status of the search request.\n */\n @Watch('searchStatus')\n updateQuery(status: RequestStatus): void {\n if (status === 'success') {\n this.providedQuery = this.searchQuery;\n }\n }\n\n /**\n * It emits an {@link SearchXEvents.UserReachedResultsListEnd} event.\n *\n * @internal\n */\n onInfiniteScrollEnd(): void {\n this.$x.emit('UserReachedResultsListEnd');\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\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the ResultsList is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList />\n </div>\n</template>\n\n<script>\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'ResultsListDemo',\n components: {\n SearchInput,\n ResultsList\n }\n };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList :animation=\"fadeAndSlide\" />\n </div>\n</template>\n\n<script>\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { FadeAndSlide } from '@empathyco/x-components/animations';\n\n export default {\n name: 'ResultsListDemo',\n components: {\n SearchInput,\n ResultsList\n },\n data() {\n return {\n fadeAndSlide: FadeAndSlide\n };\n }\n };\n</script>\n```\n\n### Overriding default content\n\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList #default=\"{ items, animation }\">\n <BaseGrid :items=\"items\" :animation=\"animation\">\n <template #result=\"{ item }\">\n <span>Result: {{ item.name }}</span>\n </template>\n <template #default=\"{ item }\">\n <span>Default: {{ item }}</span>\n </template>\n </BaseGrid>\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { BaseGrid } from '@empathyco/x-components';\n\n export default {\n name: 'ResultsListDemo',\n components: {\n SearchInput,\n ResultsList,\n BaseGrid\n }\n };\n</script>\n```\n\n### Overriding result content\n\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList #result=\"{ item }\">\n <span class=\"result\">\n {{ item.name }}\n </span>\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { SearchInput, ResultsList } from '@empathyco/x-components/search';\n\n export default {\n name: 'ResultsListDemo',\n components: {\n SearchInput,\n ResultsList\n }\n };\n</script>\n```\n\n### Data injection\n\nStarting with the `ResultsList` component as root element, you can concat the list of list items\nusing `BannersList`, `PromotedsList`, `BaseGrid` or any component that injects the `listItems`\nvalue.\n\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <
|
|
1
|
+
{"version":3,"file":"results-list.vue.js","sources":["../../../../../src/x-modules/search/components/results-list.vue"],"sourcesContent":["<template>\n <NoElement>\n <!--\n @slot Customize ResultsList.\n @binding {Result[]} items - Results to render.\n @binding {Vue | string} animation - Animation to animate the elements.\n -->\n <slot v-bind=\"{ items, animation }\">\n <ItemsList :animation=\"animation\" :items=\"items\">\n <template v-for=\"(_, slotName) in $scopedSlots\" v-slot:[slotName]=\"{ item }\">\n <slot :name=\"slotName\" :item=\"item\" />\n </template>\n </ItemsList>\n </slot>\n </NoElement>\n</template>\n\n<script lang=\"ts\">\n import { Result } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop, Watch } from 'vue-property-decorator';\n import {\n HAS_MORE_ITEMS_KEY,\n LIST_ITEMS_KEY,\n QUERY_KEY\n } from '../../../components/decorators/injection.consts';\n import { XProvide } from '../../../components/decorators/injection.decorators';\n import { State } from '../../../components/decorators/store.decorators';\n import { NoElement } from '../../../components/no-element';\n import ItemsList from '../../../components/items-list.vue';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { InfiniteScroll } from '../../../directives/infinite-scroll/infinite-scroll.types';\n import { searchXModule } from '../x-module';\n import { RequestStatus } from '../../../store/utils/status-store.utils';\n\n /**\n * It renders a {@link ItemsList} list with the results from {@link SearchState.results} by\n * default.\n *\n * The component provides a default slot which wraps the whole component with the `results` bound.\n *\n * It also provides the slot result to customize the item, which is within the default slot, with\n * the result bound.\n *\n * @public\n */\n @Component({\n components: {\n NoElement,\n ItemsList\n },\n mixins: [xComponentMixin(searchXModule)]\n })\n export default class ResultsList extends Vue implements InfiniteScroll {\n /**\n * The results to render from the state.\n *\n * @remarks The results list are provided with `items` key. It can be\n * concatenated with list items from components such as `BannersList`, `PromotedsList`,\n * `BaseGrid` or any component that injects the list.\n *\n * @public\n */\n @XProvide(LIST_ITEMS_KEY)\n @State('search', 'results')\n public items!: Result[];\n\n /**\n * It provides the search query.\n * This query is updated only when the search request has succeeded.\n */\n @XProvide(QUERY_KEY)\n public providedQuery = '';\n\n /**\n * Indicates if there are more available results that have not been injected.\n *\n * @returns Boolean.\n * @public\n */\n @XProvide(HAS_MORE_ITEMS_KEY)\n public get hasMoreItems(): boolean {\n return this.items.length < this.totalResults;\n }\n\n /**\n * The total number of results, taken from the state.\n */\n @State('search', 'totalResults')\n public totalResults!: number;\n\n /**\n * The status of the search request, taken from the state.\n */\n @State('search', 'status')\n public searchStatus!: RequestStatus;\n\n /**\n * The query of the search request, taken from the state.\n */\n @State('search', 'query')\n public searchQuery!: string;\n\n /**\n * Animation component that will be used to animate the results.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n protected animation!: Vue | string;\n\n /**\n * Updates the query to be provided to the child components\n * when the search request has succeeded.\n *\n * @param status - The status of the search request.\n */\n @Watch('searchStatus')\n updateQuery(status: RequestStatus): void {\n if (status === 'success') {\n this.providedQuery = this.searchQuery;\n }\n }\n\n /**\n * It emits an {@link SearchXEvents.UserReachedResultsListEnd} event.\n *\n * @internal\n */\n onInfiniteScrollEnd(): void {\n this.$x.emit('UserReachedResultsListEnd');\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\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the ResultsList is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList />\n </div>\n</template>\n\n<script>\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'ResultsListDemo',\n components: {\n SearchInput,\n ResultsList\n }\n };\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList :animation=\"fadeAndSlide\" />\n </div>\n</template>\n\n<script>\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { FadeAndSlide } from '@empathyco/x-components/animations';\n\n export default {\n name: 'ResultsListDemo',\n components: {\n SearchInput,\n ResultsList\n },\n data() {\n return {\n fadeAndSlide: FadeAndSlide\n };\n }\n };\n</script>\n```\n\n### Overriding default content\n\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList #default=\"{ items, animation }\">\n <BaseGrid :items=\"items\" :animation=\"animation\">\n <template #result=\"{ item }\">\n <span>Result: {{ item.name }}</span>\n </template>\n <template #default=\"{ item }\">\n <span>Default: {{ item }}</span>\n </template>\n </BaseGrid>\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { ResultsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n import { BaseGrid } from '@empathyco/x-components';\n\n export default {\n name: 'ResultsListDemo',\n components: {\n SearchInput,\n ResultsList,\n BaseGrid\n }\n };\n</script>\n```\n\n### Overriding result content\n\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList #result=\"{ item }\">\n <span class=\"result\">\n {{ item.name }}\n </span>\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { SearchInput, ResultsList } from '@empathyco/x-components/search';\n\n export default {\n name: 'ResultsListDemo',\n components: {\n SearchInput,\n ResultsList\n }\n };\n</script>\n```\n\n### Data injection\n\nStarting with the `ResultsList` component as root element, you can concat the list of list items\nusing `BannersList`, `PromotedsList`, `BaseGrid` or any component that injects the `listItems`\nvalue.\n\nThe order in which elements are placed in the template will define the concat strategy of the items,\nso it is important to define it properly; for example, Promoteds will be usually before Banners so\nfirst promoted items are inserted within the results and then banner items are placed on top of\nthat, occupying the rows.\n\n```vue\n<template>\n <div>\n <SearchInput />\n <ResultsList>\n <PromotedsList>\n <BannersList>\n <template #result=\"{ item }\">Result: {{ item.id }}</template>\n <template #banner=\"{ item }\">Banner: {{ item.id }}</template>\n <template #promoted=\"{ item }\">Promoted: {{ item.id }}</template>\n </BannersList>\n </PromotedsList>\n </ResultsList>\n </div>\n</template>\n\n<script>\n import { ResultsList, BannersList, PromotedsList } from '@empathyco/x-components/search';\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'ResultsListDemo',\n components: {\n SearchInput,\n ResultsList,\n BannersList,\n PromotedsList\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.
|
|
3
|
+
"version": "3.0.0-alpha.211",
|
|
4
4
|
"description": "Empathy X Components",
|
|
5
5
|
"author": "Empathy Systems Corporation S.L.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"@empathyco/x-deep-merge": "^1.3.0-alpha.24",
|
|
68
68
|
"@empathyco/x-logger": "^1.2.0-alpha.4",
|
|
69
69
|
"@empathyco/x-storage-service": "^2.0.0-alpha.4",
|
|
70
|
-
"@empathyco/x-types": "^10.0.0-alpha.
|
|
70
|
+
"@empathyco/x-types": "^10.0.0-alpha.41",
|
|
71
71
|
"@empathyco/x-utils": "^1.0.0-alpha.10",
|
|
72
72
|
"@vue/devtools-api": "~6.2.1",
|
|
73
73
|
"rxjs": "~7.4.0",
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
"devDependencies": {
|
|
85
85
|
"@cypress/vue": "~2.2.4",
|
|
86
86
|
"@cypress/webpack-dev-server": "~1.8.4",
|
|
87
|
-
"@empathyco/x-adapter-platform": "^1.0.0-alpha.
|
|
87
|
+
"@empathyco/x-adapter-platform": "^1.0.0-alpha.41",
|
|
88
88
|
"@empathyco/x-tailwindcss": "^0.2.0-alpha.23",
|
|
89
89
|
"@microsoft/api-documenter": "~7.15.3",
|
|
90
90
|
"@microsoft/api-extractor": "~7.19.4",
|
|
@@ -135,5 +135,5 @@
|
|
|
135
135
|
"access": "public",
|
|
136
136
|
"directory": "dist"
|
|
137
137
|
},
|
|
138
|
-
"gitHead": "
|
|
138
|
+
"gitHead": "8af8635639faaf502395f4593a3e08004921f790"
|
|
139
139
|
}
|
|
@@ -1772,7 +1772,7 @@
|
|
|
1772
1772
|
"excerptTokens": [
|
|
1773
1773
|
{
|
|
1774
1774
|
"kind": "Content",
|
|
1775
|
-
"text": "position
|
|
1775
|
+
"text": "position?: "
|
|
1776
1776
|
},
|
|
1777
1777
|
{
|
|
1778
1778
|
"kind": "Content",
|
|
@@ -1783,7 +1783,7 @@
|
|
|
1783
1783
|
"text": ";"
|
|
1784
1784
|
}
|
|
1785
1785
|
],
|
|
1786
|
-
"isOptional":
|
|
1786
|
+
"isOptional": true,
|
|
1787
1787
|
"releaseTag": "Public",
|
|
1788
1788
|
"name": "position",
|
|
1789
1789
|
"propertyTypeTokenRange": {
|
|
@@ -2744,7 +2744,7 @@
|
|
|
2744
2744
|
"excerptTokens": [
|
|
2745
2745
|
{
|
|
2746
2746
|
"kind": "Content",
|
|
2747
|
-
"text": "position
|
|
2747
|
+
"text": "position?: "
|
|
2748
2748
|
},
|
|
2749
2749
|
{
|
|
2750
2750
|
"kind": "Content",
|
|
@@ -2755,7 +2755,7 @@
|
|
|
2755
2755
|
"text": ";"
|
|
2756
2756
|
}
|
|
2757
2757
|
],
|
|
2758
|
-
"isOptional":
|
|
2758
|
+
"isOptional": true,
|
|
2759
2759
|
"releaseTag": "Public",
|
|
2760
2760
|
"name": "position",
|
|
2761
2761
|
"propertyTypeTokenRange": {
|
package/report/x-types.api.json
CHANGED
|
@@ -246,7 +246,7 @@
|
|
|
246
246
|
"excerptTokens": [
|
|
247
247
|
{
|
|
248
248
|
"kind": "Content",
|
|
249
|
-
"text": "position
|
|
249
|
+
"text": "position?: "
|
|
250
250
|
},
|
|
251
251
|
{
|
|
252
252
|
"kind": "Content",
|
|
@@ -257,7 +257,7 @@
|
|
|
257
257
|
"text": ";"
|
|
258
258
|
}
|
|
259
259
|
],
|
|
260
|
-
"isOptional":
|
|
260
|
+
"isOptional": true,
|
|
261
261
|
"releaseTag": "Public",
|
|
262
262
|
"name": "position",
|
|
263
263
|
"propertyTypeTokenRange": {
|
|
@@ -3550,7 +3550,7 @@
|
|
|
3550
3550
|
"excerptTokens": [
|
|
3551
3551
|
{
|
|
3552
3552
|
"kind": "Content",
|
|
3553
|
-
"text": "position
|
|
3553
|
+
"text": "position?: "
|
|
3554
3554
|
},
|
|
3555
3555
|
{
|
|
3556
3556
|
"kind": "Content",
|
|
@@ -3561,7 +3561,7 @@
|
|
|
3561
3561
|
"text": ";"
|
|
3562
3562
|
}
|
|
3563
3563
|
],
|
|
3564
|
-
"isOptional":
|
|
3564
|
+
"isOptional": true,
|
|
3565
3565
|
"releaseTag": "Public",
|
|
3566
3566
|
"name": "position",
|
|
3567
3567
|
"propertyTypeTokenRange": {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"promoteds-list.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/search/components/promoteds-list.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,GAAG,MAAM,KAAK,CAAC;AAItB,OAAO,EAAE,uBAAuB,EAAE,MAAM,gDAAgD,CAAC;AAGzF,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGhD;;;;;;;;;;;GAWG;AAQH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,uBAAuB;IAChE;;;;OAIG;IAEI,UAAU,EAAG,QAAQ,EAAE,CAAC;IAE/B;;;;OAIG;IAEH,SAAS,CAAC,SAAS,EAAG,GAAG,GAAG,MAAM,CAAC;IAEnC;;;;;;;;;OASG;IACH,IAAoB,KAAK,IAAI,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"promoteds-list.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/search/components/promoteds-list.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,GAAG,MAAM,KAAK,CAAC;AAItB,OAAO,EAAE,uBAAuB,EAAE,MAAM,gDAAgD,CAAC;AAGzF,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGhD;;;;;;;;;;;GAWG;AAQH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,uBAAuB;IAChE;;;;OAIG;IAEI,UAAU,EAAG,QAAQ,EAAE,CAAC;IAE/B;;;;OAIG;IAEH,SAAS,CAAC,SAAS,EAAG,GAAG,GAAG,MAAM,CAAC;IAEnC;;;;;;;;;OASG;IACH,IAAoB,KAAK,IAAI,QAAQ,EAAE,CAmBtC;CACF"}
|