@empathyco/x-components 3.0.0-alpha.45 → 3.0.0-alpha.46

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 CHANGED
@@ -3,6 +3,25 @@
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.46](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.45...@empathyco/x-components@3.0.0-alpha.46) (2022-01-24)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **components:** Fix BaseGrid auto columns CSS. (#308)
11
+ ([77563f0](https://github.com/empathyco/x/commit/77563f0eb71d806fb2cefb88b750c4852918b8c0)),
12
+ closes [EX-5295](https://searchbroker.atlassian.net/browse/EX-5295)
13
+
14
+ ### Build System
15
+
16
+ - Fix colors.js dependency issue
17
+ ([2ffcc22](https://github.com/empathyco/x/commit/2ffcc222f5666d7866c8d7cd3a0eec7c0bb1f938)),
18
+ closes [EX-5293](https://searchbroker.atlassian.net/browse/EX-5293)
19
+
20
+ # Change Log
21
+
22
+ All notable changes to this project will be documented in this file. See
23
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
24
+
6
25
  ## [3.0.0-alpha.45](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.44...@empathyco/x-components@3.0.0-alpha.45) (2022-01-20)
7
26
 
8
27
  ### Features
@@ -11,13 +11,13 @@ value of the filter.
11
11
 
12
12
  ## Props
13
13
 
14
- | Name | Description | Type | Default |
15
- | --------------------- | ---------------------------------------------------------------------- | -------------------------- | ------------- |
16
- | <code>filter</code> | The filter data for get min and max value. | <code>TSTypeLiteral</code> | <code></code> |
17
- | <code>format</code> | Configuration for show the label. | <code>string</code> | <code></code> |
18
- | <code>lessThan</code> | Message shown when the filter hasn't got the min value defined. | <code>string</code> | <code></code> |
19
- | <code>fromTo</code> | Message shown when the filter has both the min and max values defined. | <code>string</code> | <code></code> |
20
- | <code>from</code> | Message shown when the filter hasn't got max value defined. | <code>string</code> | <code></code> |
14
+ | Name | Description | Type | Default |
15
+ | --------------------- | ---------------------------------------------------------------------- | ------------------- | ------------- |
16
+ | <code>filter</code> | The filter data for get min and max value. | <code>object</code> | <code></code> |
17
+ | <code>format</code> | Configuration for show the label. | <code>string</code> | <code></code> |
18
+ | <code>lessThan</code> | Message shown when the filter hasn't got the min value defined. | <code>string</code> | <code></code> |
19
+ | <code>fromTo</code> | Message shown when the filter has both the min and max values defined. | <code>string</code> | <code></code> |
20
+ | <code>from</code> | Message shown when the filter hasn't got max value defined. | <code>string</code> | <code></code> |
21
21
 
22
22
  ## Example
23
23
 
@@ -55,11 +55,11 @@ __vue_render__._withStripped = true;
55
55
  /* style */
56
56
  var __vue_inject_styles__ = function (inject) {
57
57
  if (!inject) { return }
58
- inject("data-v-c0275f42_0", { source: ".x-base-grid[data-v-c0275f42] {\n padding: var(--x-size-padding-grid, 0);\n margin: 0;\n display: grid;\n grid-auto-flow: dense;\n list-style: none;\n}\n.x-base-grid__banner[data-v-c0275f42] {\n grid-column-start: 1;\n grid-column-end: -1;\n}", map: undefined, media: undefined });
58
+ inject("data-v-22d07af6_0", { source: ".x-base-grid[data-v-22d07af6] {\n padding: var(--x-size-padding-grid, 0);\n margin: 0;\n display: grid;\n grid-auto-flow: dense;\n list-style: none;\n}\n.x-base-grid__banner[data-v-22d07af6] {\n grid-column-start: 1;\n grid-column-end: -1;\n}", map: undefined, media: undefined });
59
59
 
60
60
  };
61
61
  /* scoped */
62
- var __vue_scope_id__ = "data-v-c0275f42";
62
+ var __vue_scope_id__ = "data-v-22d07af6";
63
63
  /* module identifier */
64
64
  var __vue_module_identifier__ = undefined;
65
65
  /* functional template */
@@ -1 +1 @@
1
- {"version":3,"file":"base-grid.vue.js","sources":["../../../src/components/base-grid.vue"],"sourcesContent":["<template>\n <component\n :is=\"animation\"\n :style=\"style\"\n class=\"x-grid x-base-grid\"\n :class=\"cssClasses\"\n tag=\"ul\"\n data-test=\"grid\"\n >\n <li\n v-for=\"{ slotName, item, cssClass } in gridItems\"\n :key=\"item.id\"\n :class=\"cssClass\"\n class=\"x-grid__item x-base-grid__item\"\n >\n <!--\n @slot Customized item rendering. Specifying a slot with the item's modelName will result in\n the item using that slot composition to render.\n @binding {item} item - Item to render\n -->\n <slot v-if=\"$scopedSlots[slotName]\" :name=\"slotName\" :item=\"item\" />\n <!--\n @slot (required) Default item rendering. This slot will be used by default for rendering\n the item without an specific slot implementation.\n @binding {item} item - Item to render\n -->\n <slot v-else :item=\"item\">{{ item.name || item.modelName || item.id || item }}</slot>\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { toKebabCase } from '../utils/string';\n import { ListItem, VueCSSClasses } from '../utils/types';\n import { XInject } from './decorators/injection.decorators';\n import { LIST_ITEMS_KEY } from './decorators/injection.consts';\n\n /**\n * The type returned by the gridItems function. Basically it's a list of items with its CSS\n * classes and a slotName.\n *\n * @internal\n */\n interface GridItem {\n slotName: string;\n item: ListItem;\n cssClass: VueCSSClasses;\n }\n\n /**\n * Grid component that is able to render different items based on their modelName value. In order\n * to achieve this, it exposes a scopedSlot for each different modelName. In case the items used\n * do not have modelName property, the default slot is used instead. It has a required property:\n * the `items` to render; and an optional one: the number `columns` the grid is divided in. If the\n * number of columns is not specified, the grid automatically fills the rows with as many columns\n * as it can fit.\n *\n * @public\n */\n @Component({})\n export default class BaseGrid extends Vue {\n /**\n * Animation component that will be used to animate the base grid.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n protected animation!: Vue | string;\n\n /**\n * Number of columns the grid is divided into. By default, its value is 0, setting the grid\n * columns mode to auto-fill.\n *\n * @public\n */\n @Prop({ default: 0 })\n protected columns!: number;\n\n /**\n * The list of items to be rendered.\n *\n * @remarks The items must have an id property.\n *\n * @public\n */\n @Prop()\n protected items!: ListItem[];\n\n /**\n * It injects {@link ListItem} provided by an ancestor.\n *\n * @internal\n */\n @XInject(LIST_ITEMS_KEY)\n public injectedListItems!: ListItem[];\n\n /**\n * It returns the items passed as props or the injected ones.\n *\n * @returns List of grid items.\n *\n * @public\n */\n protected get computedItems(): ListItem[] {\n return (\n this.items ??\n this.injectedListItems ??\n //TODO: add here logger\n //eslint-disable-next-line no-console\n console.warn('It is necessary to pass a prop or inject the list of filters')\n );\n }\n\n /**\n * CSS class based on the column property value so items inside the grid can fill different\n * amount of columns or rows based on how many columns the grid is divided into.\n *\n * @returns CSS class with the column property value.\n *\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return this.columns ? `x-grid--cols-${this.columns}` : 'x-grid--cols-auto';\n }\n\n /**\n * CSSStyleDeclaration object specifying the number of columns the grid is divided into based on\n * the column property value.\n *\n * @returns A CSSStyleDeclaration to use as the style attribute.\n *\n * @internal\n */\n protected get style(): Partial<CSSStyleDeclaration> {\n return {\n gridTemplateColumns: this.columns\n ? `repeat(${this.columns}, minmax(0, 1fr))`\n : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), auto))'\n };\n }\n\n /**\n * Maps the item to an object containing: the `item`, its `CSS class` and its slot name.\n *\n * @returns An array of objects containing the item and its CSS class.\n *\n * @internal\n */\n protected get gridItems(): GridItem[] {\n return this.computedItems.map(item => {\n const slotName = toKebabCase(item.modelName);\n return {\n slotName,\n item,\n cssClass: `x-base-grid__${slotName}`\n };\n });\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-base-grid {\n padding: var(--x-size-padding-grid, 0);\n margin: 0;\n display: grid;\n grid-auto-flow: dense;\n list-style: none;\n\n &__banner {\n grid-column-start: 1;\n grid-column-end: -1;\n }\n }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on their modelName. In order\nto achieve this, it exposes a scopedSlot for each different modelName. In case the items used do not\nhave modelName property, the default slot is used instead. It has a required property, the `items`\nto render, and an optional one, the number of `columns` the grid is divided in. If the number of\ncolumns is not specified, the grid automatically fills the rows with as many columns as it can fit.\n\n### Basic example\n\nIt renders a list of items using the default slot:\n\n```vue\n<template>\n <BaseGrid :items=\"items\">\n <template #default=\"{ item }\">\n {{ `Default slot content: ${item.id}` }}\n </template>\n </BaseGrid>\n</template>\n```\n\n### Configuring the number of columns\n\nIt renders a grid with 12 columns instead of 6, which is the default value:\n\n```vue\n<template>\n <BaseGrid :items=\"items\" :columns=\"12\">\n <template #default=\"{ item }\">\n {{ `Default slot content: ${item.id}` }}\n </template>\n </BaseGrid>\n</template>\n```\n\n### Rendering usage\n\nConfiguring the number of columns.\n\nIt renders a list of items using the different scopedSlots created by the item's modelName. For\nexample, if you want to use this component as the search grid, you pass the search results (results,\nbanners, promoted, next queries...etc) as items. Each of these results have a different modelName\nand are rendered in different slots.\n\n```vue\n<template>\n <BaseGrid :animation=\"animation\" :items=\"items\">\n <template #banner=\"{ item }\">\n <span class=\"banner\">\n {{ `${item.title} banner` }}\n </span>\n </template>\n <template #next-queries=\"{ item }\">\n <span>\n {{ `${item.totalResults} next queries` }}\n </span>\n </template>\n <template #promoted=\"{ item }\">\n <span class=\"promoted\">\n {{ `${item.title} promoted` }}\n </span>\n </template>\n <template #result=\"{ item }\">\n <BaseResultLink :result=\"item\">\n {{ item.name }}\n </BaseResultLink>\n </template>\n </BaseGrid>\n</template>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"base-grid.vue.js","sources":["../../../src/components/base-grid.vue"],"sourcesContent":["<template>\n <component\n :is=\"animation\"\n :style=\"style\"\n class=\"x-grid x-base-grid\"\n :class=\"cssClasses\"\n tag=\"ul\"\n data-test=\"grid\"\n >\n <li\n v-for=\"{ slotName, item, cssClass } in gridItems\"\n :key=\"item.id\"\n :class=\"cssClass\"\n class=\"x-grid__item x-base-grid__item\"\n >\n <!--\n @slot Customized item rendering. Specifying a slot with the item's modelName will result in\n the item using that slot composition to render.\n @binding {item} item - Item to render\n -->\n <slot v-if=\"$scopedSlots[slotName]\" :name=\"slotName\" :item=\"item\" />\n <!--\n @slot (required) Default item rendering. This slot will be used by default for rendering\n the item without an specific slot implementation.\n @binding {item} item - Item to render\n -->\n <slot v-else :item=\"item\">{{ item.name || item.modelName || item.id || item }}</slot>\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { toKebabCase } from '../utils/string';\n import { ListItem, VueCSSClasses } from '../utils/types';\n import { XInject } from './decorators/injection.decorators';\n import { LIST_ITEMS_KEY } from './decorators/injection.consts';\n\n /**\n * The type returned by the gridItems function. Basically it's a list of items with its CSS\n * classes and a slotName.\n *\n * @internal\n */\n interface GridItem {\n slotName: string;\n item: ListItem;\n cssClass: VueCSSClasses;\n }\n\n /**\n * Grid component that is able to render different items based on their modelName value. In order\n * to achieve this, it exposes a scopedSlot for each different modelName. In case the items used\n * do not have modelName property, the default slot is used instead. It has a required property:\n * the `items` to render; and an optional one: the number `columns` the grid is divided in. If the\n * number of columns is not specified, the grid automatically fills the rows with as many columns\n * as it can fit.\n *\n * @public\n */\n @Component({})\n export default class BaseGrid extends Vue {\n /**\n * Animation component that will be used to animate the base grid.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n protected animation!: Vue | string;\n\n /**\n * Number of columns the grid is divided into. By default, its value is 0, setting the grid\n * columns mode to auto-fill.\n *\n * @public\n */\n @Prop({ default: 0 })\n protected columns!: number;\n\n /**\n * The list of items to be rendered.\n *\n * @remarks The items must have an id property.\n *\n * @public\n */\n @Prop()\n protected items!: ListItem[];\n\n /**\n * It injects {@link ListItem} provided by an ancestor.\n *\n * @internal\n */\n @XInject(LIST_ITEMS_KEY)\n public injectedListItems!: ListItem[];\n\n /**\n * It returns the items passed as props or the injected ones.\n *\n * @returns List of grid items.\n *\n * @public\n */\n protected get computedItems(): ListItem[] {\n return (\n this.items ??\n this.injectedListItems ??\n //TODO: add here logger\n //eslint-disable-next-line no-console\n console.warn('It is necessary to pass a prop or inject the list of filters')\n );\n }\n\n /**\n * CSS class based on the column property value so items inside the grid can fill different\n * amount of columns or rows based on how many columns the grid is divided into.\n *\n * @returns CSS class with the column property value.\n *\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return this.columns ? `x-grid--cols-${this.columns}` : 'x-grid--cols-auto';\n }\n\n /**\n * CSSStyleDeclaration object specifying the number of columns the grid is divided into based on\n * the column property value.\n *\n * @returns A CSSStyleDeclaration to use as the style attribute.\n *\n * @internal\n */\n protected get style(): Partial<CSSStyleDeclaration> {\n return {\n gridTemplateColumns: this.columns\n ? `repeat(${this.columns}, minmax(0, 1fr))`\n : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), 1fr))'\n };\n }\n\n /**\n * Maps the item to an object containing: the `item`, its `CSS class` and its slot name.\n *\n * @returns An array of objects containing the item and its CSS class.\n *\n * @internal\n */\n protected get gridItems(): GridItem[] {\n return this.computedItems.map(item => {\n const slotName = toKebabCase(item.modelName);\n return {\n slotName,\n item,\n cssClass: `x-base-grid__${slotName}`\n };\n });\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-base-grid {\n padding: var(--x-size-padding-grid, 0);\n margin: 0;\n display: grid;\n grid-auto-flow: dense;\n list-style: none;\n\n &__banner {\n grid-column-start: 1;\n grid-column-end: -1;\n }\n }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders a list of elements in different slots depending on their modelName. In order\nto achieve this, it exposes a scopedSlot for each different modelName. In case the items used do not\nhave modelName property, the default slot is used instead. It has a required property, the `items`\nto render, and an optional one, the number of `columns` the grid is divided in. If the number of\ncolumns is not specified, the grid automatically fills the rows with as many columns as it can fit.\n\n### Basic example\n\nIt renders a list of items using the default slot:\n\n```vue\n<template>\n <BaseGrid :items=\"items\">\n <template #default=\"{ item }\">\n {{ `Default slot content: ${item.id}` }}\n </template>\n </BaseGrid>\n</template>\n```\n\n### Configuring the number of columns\n\nIt renders a grid with 12 columns instead of 6, which is the default value:\n\n```vue\n<template>\n <BaseGrid :items=\"items\" :columns=\"12\">\n <template #default=\"{ item }\">\n {{ `Default slot content: ${item.id}` }}\n </template>\n </BaseGrid>\n</template>\n```\n\n### Rendering usage\n\nConfiguring the number of columns.\n\nIt renders a list of items using the different scopedSlots created by the item's modelName. For\nexample, if you want to use this component as the search grid, you pass the search results (results,\nbanners, promoted, next queries...etc) as items. Each of these results have a different modelName\nand are rendered in different slots.\n\n```vue\n<template>\n <BaseGrid :animation=\"animation\" :items=\"items\">\n <template #banner=\"{ item }\">\n <span class=\"banner\">\n {{ `${item.title} banner` }}\n </span>\n </template>\n <template #next-queries=\"{ item }\">\n <span>\n {{ `${item.totalResults} next queries` }}\n </span>\n </template>\n <template #promoted=\"{ item }\">\n <span class=\"promoted\">\n {{ `${item.title} promoted` }}\n </span>\n </template>\n <template #result=\"{ item }\">\n <BaseResultLink :result=\"item\">\n {{ item.name }}\n </BaseResultLink>\n </template>\n </BaseGrid>\n</template>\n```\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -66,7 +66,7 @@ var BaseGrid = /** @class */ (function (_super) {
66
66
  return {
67
67
  gridTemplateColumns: this.columns
68
68
  ? "repeat(" + this.columns + ", minmax(0, 1fr))"
69
- : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), auto))'
69
+ : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), 1fr))'
70
70
  };
71
71
  },
72
72
  enumerable: false,
@@ -1 +1 @@
1
- {"version":3,"file":"base-grid.vue_rollup-plugin-vue=script.js","sources":["../../../src/components/base-grid.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\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { toKebabCase } from '../utils/string';\nimport { ListItem, VueCSSClasses } from '../utils/types';\nimport { XInject } from './decorators/injection.decorators';\nimport { LIST_ITEMS_KEY } from './decorators/injection.consts';\n\n/**\n * The type returned by the gridItems function. Basically it's a list of items with its CSS\n * classes and a slotName.\n *\n * @internal\n */\ninterface GridItem {\n slotName: string;\n item: ListItem;\n cssClass: VueCSSClasses;\n}\n\n/**\n * Grid component that is able to render different items based on their modelName value. In order\n * to achieve this, it exposes a scopedSlot for each different modelName. In case the items used\n * do not have modelName property, the default slot is used instead. It has a required property:\n * the `items` to render; and an optional one: the number `columns` the grid is divided in. If the\n * number of columns is not specified, the grid automatically fills the rows with as many columns\n * as it can fit.\n *\n * @public\n */\n@Component({})\nexport default class BaseGrid extends Vue {\n /**\n * Animation component that will be used to animate the base grid.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n protected animation!: Vue | string;\n\n /**\n * Number of columns the grid is divided into. By default, its value is 0, setting the grid\n * columns mode to auto-fill.\n *\n * @public\n */\n @Prop({ default: 0 })\n protected columns!: number;\n\n /**\n * The list of items to be rendered.\n *\n * @remarks The items must have an id property.\n *\n * @public\n */\n @Prop()\n protected items!: ListItem[];\n\n /**\n * It injects {@link ListItem} provided by an ancestor.\n *\n * @internal\n */\n @XInject(LIST_ITEMS_KEY)\n public injectedListItems!: ListItem[];\n\n /**\n * It returns the items passed as props or the injected ones.\n *\n * @returns List of grid items.\n *\n * @public\n */\n protected get computedItems(): ListItem[] {\n return (\n this.items ??\n this.injectedListItems ??\n //TODO: add here logger\n //eslint-disable-next-line no-console\n console.warn('It is necessary to pass a prop or inject the list of filters')\n );\n }\n\n /**\n * CSS class based on the column property value so items inside the grid can fill different\n * amount of columns or rows based on how many columns the grid is divided into.\n *\n * @returns CSS class with the column property value.\n *\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return this.columns ? `x-grid--cols-${this.columns}` : 'x-grid--cols-auto';\n }\n\n /**\n * CSSStyleDeclaration object specifying the number of columns the grid is divided into based on\n * the column property value.\n *\n * @returns A CSSStyleDeclaration to use as the style attribute.\n *\n * @internal\n */\n protected get style(): Partial<CSSStyleDeclaration> {\n return {\n gridTemplateColumns: this.columns\n ? `repeat(${this.columns}, minmax(0, 1fr))`\n : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), auto))'\n };\n }\n\n /**\n * Maps the item to an object containing: the `item`, its `CSS class` and its slot name.\n *\n * @returns An array of objects containing the item and its CSS class.\n *\n * @internal\n */\n protected get gridItems(): GridItem[] {\n return this.computedItems.map(item => {\n const slotName = toKebabCase(item.modelName);\n return {\n slotName,\n item,\n cssClass: `x-base-grid__${slotName}`\n };\n });\n }\n}\n"],"names":[],"mappings":";;;;;;;AAmDA;;;;;;;;;;AAWA;IAAsC,4BAAG;IAAzC;;KAkGC;IAvDC,sBAAc,mCAAa;;;;;;;;aAA3B;;YACE,QACE,MAAA,MAAA,IAAI,CAAC,KAAK,mCACV,IAAI,CAAC,iBAAiB;;;YAGtB,OAAO,CAAC,IAAI,CAAC,8DAA8D,CAAC,EAC5E;SACH;;;OAAA;IAUD,sBAAc,gCAAU;;;;;;;;;aAAxB;YACE,OAAO,IAAI,CAAC,OAAO,GAAG,kBAAgB,IAAI,CAAC,OAAS,GAAG,mBAAmB,CAAC;SAC5E;;;OAAA;IAUD,sBAAc,2BAAK;;;;;;;;;aAAnB;YACE,OAAO;gBACL,mBAAmB,EAAE,IAAI,CAAC,OAAO;sBAC7B,YAAU,IAAI,CAAC,OAAO,sBAAmB;sBACzC,2EAA2E;aAChF,CAAC;SACH;;;OAAA;IASD,sBAAc,+BAAS;;;;;;;;aAAvB;YACE,OAAO,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,UAAA,IAAI;gBAChC,IAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;gBAC7C,OAAO;oBACL,QAAQ,UAAA;oBACR,IAAI,MAAA;oBACJ,QAAQ,EAAE,kBAAgB,QAAU;iBACrC,CAAC;aACH,CAAC,CAAC;SACJ;;;OAAA;IA1FD;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACW;IASnC;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;6CACM;IAU3B;QADC,IAAI,EAAE;2CACsB;IAQ7B;QADC,OAAO,CAAC,cAAc,CAAC;uDACc;IAlCnB,QAAQ;QAD5B,SAAS,CAAC,EAAE,CAAC;OACO,QAAQ,CAkG5B;IAAD,eAAC;CAAA,CAlGqC,GAAG;;;;"}
1
+ {"version":3,"file":"base-grid.vue_rollup-plugin-vue=script.js","sources":["../../../src/components/base-grid.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\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { toKebabCase } from '../utils/string';\nimport { ListItem, VueCSSClasses } from '../utils/types';\nimport { XInject } from './decorators/injection.decorators';\nimport { LIST_ITEMS_KEY } from './decorators/injection.consts';\n\n/**\n * The type returned by the gridItems function. Basically it's a list of items with its CSS\n * classes and a slotName.\n *\n * @internal\n */\ninterface GridItem {\n slotName: string;\n item: ListItem;\n cssClass: VueCSSClasses;\n}\n\n/**\n * Grid component that is able to render different items based on their modelName value. In order\n * to achieve this, it exposes a scopedSlot for each different modelName. In case the items used\n * do not have modelName property, the default slot is used instead. It has a required property:\n * the `items` to render; and an optional one: the number `columns` the grid is divided in. If the\n * number of columns is not specified, the grid automatically fills the rows with as many columns\n * as it can fit.\n *\n * @public\n */\n@Component({})\nexport default class BaseGrid extends Vue {\n /**\n * Animation component that will be used to animate the base grid.\n *\n * @public\n */\n @Prop({ default: 'ul' })\n protected animation!: Vue | string;\n\n /**\n * Number of columns the grid is divided into. By default, its value is 0, setting the grid\n * columns mode to auto-fill.\n *\n * @public\n */\n @Prop({ default: 0 })\n protected columns!: number;\n\n /**\n * The list of items to be rendered.\n *\n * @remarks The items must have an id property.\n *\n * @public\n */\n @Prop()\n protected items!: ListItem[];\n\n /**\n * It injects {@link ListItem} provided by an ancestor.\n *\n * @internal\n */\n @XInject(LIST_ITEMS_KEY)\n public injectedListItems!: ListItem[];\n\n /**\n * It returns the items passed as props or the injected ones.\n *\n * @returns List of grid items.\n *\n * @public\n */\n protected get computedItems(): ListItem[] {\n return (\n this.items ??\n this.injectedListItems ??\n //TODO: add here logger\n //eslint-disable-next-line no-console\n console.warn('It is necessary to pass a prop or inject the list of filters')\n );\n }\n\n /**\n * CSS class based on the column property value so items inside the grid can fill different\n * amount of columns or rows based on how many columns the grid is divided into.\n *\n * @returns CSS class with the column property value.\n *\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return this.columns ? `x-grid--cols-${this.columns}` : 'x-grid--cols-auto';\n }\n\n /**\n * CSSStyleDeclaration object specifying the number of columns the grid is divided into based on\n * the column property value.\n *\n * @returns A CSSStyleDeclaration to use as the style attribute.\n *\n * @internal\n */\n protected get style(): Partial<CSSStyleDeclaration> {\n return {\n gridTemplateColumns: this.columns\n ? `repeat(${this.columns}, minmax(0, 1fr))`\n : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), 1fr))'\n };\n }\n\n /**\n * Maps the item to an object containing: the `item`, its `CSS class` and its slot name.\n *\n * @returns An array of objects containing the item and its CSS class.\n *\n * @internal\n */\n protected get gridItems(): GridItem[] {\n return this.computedItems.map(item => {\n const slotName = toKebabCase(item.modelName);\n return {\n slotName,\n item,\n cssClass: `x-base-grid__${slotName}`\n };\n });\n }\n}\n"],"names":[],"mappings":";;;;;;;AAmDA;;;;;;;;;;AAWA;IAAsC,4BAAG;IAAzC;;KAkGC;IAvDC,sBAAc,mCAAa;;;;;;;;aAA3B;;YACE,QACE,MAAA,MAAA,IAAI,CAAC,KAAK,mCACV,IAAI,CAAC,iBAAiB;;;YAGtB,OAAO,CAAC,IAAI,CAAC,8DAA8D,CAAC,EAC5E;SACH;;;OAAA;IAUD,sBAAc,gCAAU;;;;;;;;;aAAxB;YACE,OAAO,IAAI,CAAC,OAAO,GAAG,kBAAgB,IAAI,CAAC,OAAS,GAAG,mBAAmB,CAAC;SAC5E;;;OAAA;IAUD,sBAAc,2BAAK;;;;;;;;;aAAnB;YACE,OAAO;gBACL,mBAAmB,EAAE,IAAI,CAAC,OAAO;sBAC7B,YAAU,IAAI,CAAC,OAAO,sBAAmB;sBACzC,0EAA0E;aAC/E,CAAC;SACH;;;OAAA;IASD,sBAAc,+BAAS;;;;;;;;aAAvB;YACE,OAAO,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,UAAA,IAAI;gBAChC,IAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;gBAC7C,OAAO;oBACL,QAAQ,UAAA;oBACR,IAAI,MAAA;oBACJ,QAAQ,EAAE,kBAAgB,QAAU;iBACrC,CAAC;aACH,CAAC,CAAC;SACJ;;;OAAA;IA1FD;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACW;IASnC;QADC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;6CACM;IAU3B;QADC,IAAI,EAAE;2CACsB;IAQ7B;QADC,OAAO,CAAC,cAAc,CAAC;uDACc;IAlCnB,QAAQ;QAD5B,SAAS,CAAC,EAAE,CAAC;OACO,QAAQ,CAkG5B;IAAD,eAAC;CAAA,CAlGqC,GAAG;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@empathyco/x-components",
3
- "version": "3.0.0-alpha.45",
3
+ "version": "3.0.0-alpha.46",
4
4
  "description": "Empathy X Components",
5
5
  "author": "Empathy Systems Corporation S.L.",
6
6
  "license": "Apache-2.0",
@@ -131,5 +131,5 @@
131
131
  "access": "public",
132
132
  "directory": "dist"
133
133
  },
134
- "gitHead": "452e7053300463136fc9a671abb222daf4529110"
134
+ "gitHead": "b3626d4289368bc37ae8879c6dd46feff56cfa41"
135
135
  }