@empathyco/x-components 6.0.0-alpha.16 → 6.0.0-alpha.17

package/js/x-modules/search/components/results-list.vue.js

@@ -1,9 +1,9 @@
 import { defineComponent, provide, ref, computed, watch, h } from 'vue';
 import { LIST_ITEMS_KEY, QUERY_KEY, HAS_MORE_ITEMS_KEY } from '../../../components/decorators/injection.consts.js';
 import ItemsList from '../../../components/items-list.vue.js';
-import { animationProp } from '../../../utils/options-api.js';
 import { useState } from '../../../composables/use-state.js';
 import { searchXModule } from '../x-module.js';
+import { AnimationProp } from '../../../types/animation-prop.js';
 
 /**
  * It renders a {@link ItemsList} list with the results from {@link SearchState.results} by
@@ -22,7 +22,7 @@ var _sfc_main = defineComponent({
     props: {
         /** Animation component that will be used to animate the results. */
         animation: {
-            type: animationProp,
+            type: AnimationProp,
             default: 'ul'
         }
     },

package/js/x-modules/search/components/results-list.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"results-list.vue.js","sources":["../../../../../src/x-modules/search/components/results-list.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent, h, provide, Ref, ref, watch } from 'vue';\n  import { Result } from '@empathyco/x-types';\n  import {\n    HAS_MORE_ITEMS_KEY,\n    LIST_ITEMS_KEY,\n    QUERY_KEY\n  } from '../../../components/decorators/injection.consts';\n  import ItemsList from '../../../components/items-list.vue';\n  import { RequestStatus } from '../../../store/utils/status-store.utils';\n  import { animationProp } from '../../../utils/options-api';\n  import { useState } from '../../../composables/use-state';\n  import { searchXModule } from '../x-module';\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  export default defineComponent({\n    name: 'ResultsList',\n    xModule: searchXModule.name,\n    props: {\n      /** Animation component that will be used to animate the results. */\n      animation: {\n        type: animationProp,\n        default: 'ul'\n      }\n    },\n    emits: ['UserReachedResultsListEnd'],\n    setup(props, { slots }) {\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      const items: ComputedRef<Result[]> = useState('search', ['results']).results;\n      provide<ComputedRef<Result[]>>(LIST_ITEMS_KEY as string, items);\n\n      /** The total number of results, taken from the state. */\n      const totalResults: ComputedRef<number> = useState('search', ['totalResults']).totalResults;\n\n      /** This query is updated only when the search request has succeeded. */\n      let providedQuery = ref('');\n      provide<Ref<string>>(QUERY_KEY as string, providedQuery);\n\n      /** Indicates if there are more available results that have not been injected. */\n      const hasMoreItems = computed(() => items.value.length < totalResults.value);\n      provide<ComputedRef<boolean>>(HAS_MORE_ITEMS_KEY as string, hasMoreItems);\n\n      /** The status of the search request, taken from the state. */\n      const searchStatus: ComputedRef<RequestStatus> = useState('search', ['status']).status;\n\n      /** The query of the search request, taken from the state. */\n      const searchQuery: ComputedRef<string> = useState('search', ['query']).query;\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      function updateQuery(status: RequestStatus) {\n        if (status === 'success') {\n          providedQuery.value = searchQuery.value;\n        }\n      }\n\n      /**\n       * Watches the searchStatus and triggers updateQuery as callback\n       * when it changes.\n       *\n       * @param status - The status of the search request.\n       */\n      watch(searchStatus, () => updateQuery(searchStatus.value), { immediate: true });\n\n      return () => {\n        const innerProps = { items: items.value, animation: props.animation };\n        // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots\n        return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);\n      };\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":";;;;;;;AAcE;;;;;;;;;;AAUE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAG;AACd,SAAA;AACD,KAAA;IACD,KAAK,EAAE,CAAC,2BAA2B,CAAC;AACpC,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB;;;;;;AAME;AACF,QAAA,MAAM,KAAK,GAA0B,QAAQ,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAA;AAC5E,QAAA,OAAO,CAAwB,cAAwB,EAAE,KAAK,CAAC,CAAA;;AAG/D,QAAA,MAAM,YAAY,GAAwB,QAAQ,CAAC,QAAQ,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAA;;AAG3F,QAAA,IAAI,gBAAgB,GAAG,CAAC,EAAE,CAAC,CAAA;AAC3B,QAAA,OAAO,CAAc,SAAmB,EAAE,aAAa,CAAC,CAAA;;AAGxD,QAAA,MAAM,YAAa,GAAE,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,MAAK,GAAI,YAAY,CAAC,KAAK,CAAC,CAAA;AAC5E,QAAA,OAAO,CAAuB,kBAA4B,EAAE,YAAY,CAAC,CAAA;;AAGzE,QAAA,MAAM,YAAY,GAA+B,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAA;;AAGtF,QAAA,MAAM,WAAW,GAAwB,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAA;AAE5E;;;;;AAKE;QACF,SAAS,WAAW,CAAC,MAAqB,EAAA;YACxC,IAAI,WAAW,SAAS,EAAE;AACxB,gBAAA,aAAa,CAAC,KAAM,GAAE,WAAW,CAAC,KAAK,CAAA;AACzC,aAAA;SACF;AAEA;;;;;AAKE;AACF,QAAA,KAAK,CAAC,YAAY,EAAE,MAAM,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE,IAAG,EAAG,CAAC,CAAA;AAE/E,QAAA,OAAO,MAAM;AACX,YAAA,MAAM,UAAW,GAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAQ,EAAG,CAAA;;AAErE,YAAA,OAAO,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAE,IAAG,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAC,CAAA;AAC1E,SAAC,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"results-list.vue.js","sources":["../../../../../src/x-modules/search/components/results-list.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent, h, provide, Ref, ref, watch } from 'vue';\n  import { Result } from '@empathyco/x-types';\n  import {\n    HAS_MORE_ITEMS_KEY,\n    LIST_ITEMS_KEY,\n    QUERY_KEY\n  } from '../../../components/decorators/injection.consts';\n  import ItemsList from '../../../components/items-list.vue';\n  import { RequestStatus } from '../../../store/utils/status-store.utils';\n  import { useState } from '../../../composables/use-state';\n  import { searchXModule } from '../x-module';\n  import { AnimationProp } from '../../../types';\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  export default defineComponent({\n    name: 'ResultsList',\n    xModule: searchXModule.name,\n    props: {\n      /** Animation component that will be used to animate the results. */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      }\n    },\n    emits: ['UserReachedResultsListEnd'],\n    setup(props, { slots }) {\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      const items: ComputedRef<Result[]> = useState('search', ['results']).results;\n      provide<ComputedRef<Result[]>>(LIST_ITEMS_KEY as string, items);\n\n      /** The total number of results, taken from the state. */\n      const totalResults: ComputedRef<number> = useState('search', ['totalResults']).totalResults;\n\n      /** This query is updated only when the search request has succeeded. */\n      let providedQuery = ref('');\n      provide<Ref<string>>(QUERY_KEY as string, providedQuery);\n\n      /** Indicates if there are more available results that have not been injected. */\n      const hasMoreItems = computed(() => items.value.length < totalResults.value);\n      provide<ComputedRef<boolean>>(HAS_MORE_ITEMS_KEY as string, hasMoreItems);\n\n      /** The status of the search request, taken from the state. */\n      const searchStatus: ComputedRef<RequestStatus> = useState('search', ['status']).status;\n\n      /** The query of the search request, taken from the state. */\n      const searchQuery: ComputedRef<string> = useState('search', ['query']).query;\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      function updateQuery(status: RequestStatus) {\n        if (status === 'success') {\n          providedQuery.value = searchQuery.value;\n        }\n      }\n\n      /**\n       * Watches the searchStatus and triggers updateQuery as callback\n       * when it changes.\n       *\n       * @param status - The status of the search request.\n       */\n      watch(searchStatus, () => updateQuery(searchStatus.value), { immediate: true });\n\n      return () => {\n        const innerProps = { items: items.value, animation: props.animation };\n        // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots\n        return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);\n      };\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":";;;;;;;AAcE;;;;;;;;;;AAUE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAG;AACd,SAAA;AACD,KAAA;IACD,KAAK,EAAE,CAAC,2BAA2B,CAAC;AACpC,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB;;;;;;AAME;AACF,QAAA,MAAM,KAAK,GAA0B,QAAQ,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAA;AAC5E,QAAA,OAAO,CAAwB,cAAwB,EAAE,KAAK,CAAC,CAAA;;AAG/D,QAAA,MAAM,YAAY,GAAwB,QAAQ,CAAC,QAAQ,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAA;;AAG3F,QAAA,IAAI,gBAAgB,GAAG,CAAC,EAAE,CAAC,CAAA;AAC3B,QAAA,OAAO,CAAc,SAAmB,EAAE,aAAa,CAAC,CAAA;;AAGxD,QAAA,MAAM,YAAa,GAAE,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,MAAK,GAAI,YAAY,CAAC,KAAK,CAAC,CAAA;AAC5E,QAAA,OAAO,CAAuB,kBAA4B,EAAE,YAAY,CAAC,CAAA;;AAGzE,QAAA,MAAM,YAAY,GAA+B,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAA;;AAGtF,QAAA,MAAM,WAAW,GAAwB,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAA;AAE5E;;;;;AAKE;QACF,SAAS,WAAW,CAAC,MAAqB,EAAA;YACxC,IAAI,WAAW,SAAS,EAAE;AACxB,gBAAA,aAAa,CAAC,KAAM,GAAE,WAAW,CAAC,KAAK,CAAA;AACzC,aAAA;SACF;AAEA;;;;;AAKE;AACF,QAAA,KAAK,CAAC,YAAY,EAAE,MAAM,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE,IAAG,EAAG,CAAC,CAAA;AAE/E,QAAA,OAAO,MAAM;AACX,YAAA,MAAM,UAAW,GAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAQ,EAAG,CAAA;;AAErE,YAAA,OAAO,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAE,IAAG,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAC,CAAA;AAC1E,SAAC,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "6.0.0-alpha.16",
+  "version": "6.0.0-alpha.17",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -138,5 +138,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "c61339f124b2d0fa6e6dc9dabaa6cb99f57456c1"
+  "gitHead": "e977a597bc5442be5341d324c23f290660721d16"
 }