@empathyco/x-components 6.0.0-alpha.205 → 6.0.0-alpha.206

package/js/x-modules/search/components/sort-picker-list.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"sort-picker-list.vue2.js","sources":["../../../../../src/x-modules/search/components/sort-picker-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    tag=\"div\"\n    class=\"x-sort-picker-list\"\n    data-test=\"sort-picker\"\n    role=\"list\"\n  >\n    <BaseEventButton\n      v-for=\"{ item, cssClasses, event } in listItems\"\n      :key=\"item\"\n      :class=\"[cssClasses, buttonClass]\"\n      data-test=\"sort-picker-button\"\n      :events=\"event\"\n      :aria-pressed=\"item === selectedSort || null\"\n      role=\"listitem\"\n    >\n      <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n        {{ item }}\n      </slot>\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type Vue from 'vue'\nimport type { SortPickerItem } from './sort-picker-list.types'\nimport { computed, defineComponent, watch } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * The `SortPickerList` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n */\nexport default defineComponent({\n  name: 'SortPickerList',\n  xModule: searchXModule.name,\n  components: { BaseEventButton },\n  props: {\n    /** The list of possible sort values. */\n    items: {\n      type: Array as PropType<Sort[]>,\n      required: true,\n    },\n    /** The transition to use for rendering the list. */\n    animation: {\n      type: [String, Object] as PropType<string | typeof Vue>,\n      default: () => 'div',\n    },\n    /** Class inherited by each sort button. */\n    buttonClass: String,\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const { sort: selectedSort } = useState('search')\n\n    watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n      immediate: true,\n    })\n\n    /**\n     * Sort list items.\n     *\n     * @returns A list of items with their css class and the event associate to it.\n     */\n    const listItems = computed<SortPickerItem[]>(() =>\n      props.items.map(item => ({\n        item,\n        cssClasses: {\n          'x-selected': item === selectedSort.value,\n        },\n        event: { UserClickedASort: item },\n      })),\n    )\n\n    return {\n      listItems,\n      selectedSort,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Sort Picker List\n\nThe `SortPickerList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `v-model` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe default slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggests, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortPickerList :items=\"sortValues\">\n    <template #default=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortPickerList>\n</template>\n\n<script setup>\nimport { SortPickerList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortPickerList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #default=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortPickerList>\n</template>\n\n<script setup>\nimport { SortPickerList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst selectedSort = ref('Price asc')\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n\n### Customizing the items with classes\n\nThe `buttonClass` prop can be used to add classes to the sort items.\n\n```vue\n<template>\n  <SortPickerList :items=\"sortValues\" buttonClass=\"x-button-outlined\" />\n</template>\n\n<script setup>\nimport { SortPickerList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAmCA;;;AAGE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAAyB;AAC/B,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAkC;AACvD,YAAA,OAAO,EAAE,MAAM,KAAK;AACrB,SAAA;;AAED,QAAA,WAAW,EAAE,MAAM;AACpB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;QAEjB,MAAM,EAAE,IAAI,EAAE,YAAW,KAAM,QAAQ,CAAC,QAAQ,CAAA;AAEhD,QAAA,KAAK,CAAC,YAAY,EAAE,CAAC,KAAW,KAAK,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE;AAC3E,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA,CAAA;AAED;;;;AAIE;AACF,QAAA,MAAM,YAAY,QAAQ,CAAmB,MAC3C,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAG,KAAM;YACvB,IAAI;AACJ,YAAA,UAAU,EAAE;AACV,gBAAA,YAAY,EAAE,SAAS,YAAY,CAAC,KAAK;AAC1C,aAAA;AACD,YAAA,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAG,EAAG;SAClC,CAAC,CAAC,CACL;QAEA,OAAO;YACL,SAAS;YACT,YAAY;SACd;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"sort-picker-list.vue2.js","sources":["../../../../../src/x-modules/search/components/sort-picker-list.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    tag=\"div\"\n    class=\"x-sort-picker-list\"\n    data-test=\"sort-picker\"\n    role=\"list\"\n  >\n    <BaseEventButton\n      v-for=\"{ item, cssClasses, event } in listItems\"\n      :key=\"item\"\n      :class=\"[cssClasses, buttonClass]\"\n      data-test=\"sort-picker-button\"\n      :events=\"event\"\n      :aria-pressed=\"item === selectedSort || null\"\n      role=\"listitem\"\n    >\n      <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n        {{ item }}\n      </slot>\n    </BaseEventButton>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { Component, PropType } from 'vue'\nimport type { SortPickerItem } from './sort-picker-list.types'\nimport { computed, defineComponent, watch } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * The `SortPickerList` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n */\nexport default defineComponent({\n  name: 'SortPickerList',\n  xModule: searchXModule.name,\n  components: { BaseEventButton },\n  props: {\n    /** The list of possible sort values. */\n    items: {\n      type: Array as PropType<Sort[]>,\n      required: true,\n    },\n    /** The transition to use for rendering the list. */\n    animation: {\n      type: [String, Object] as PropType<string | Component>,\n      default: () => 'div',\n    },\n    /** Class inherited by each sort button. */\n    buttonClass: String,\n  },\n  setup(props) {\n    const $x = use$x()\n\n    const { sort: selectedSort } = useState('search')\n\n    watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n      immediate: true,\n    })\n\n    /**\n     * Sort list items.\n     *\n     * @returns A list of items with their css class and the event associate to it.\n     */\n    const listItems = computed<SortPickerItem[]>(() =>\n      props.items.map(item => ({\n        item,\n        cssClasses: {\n          'x-selected': item === selectedSort.value,\n        },\n        event: { UserClickedASort: item },\n      })),\n    )\n\n    return {\n      listItems,\n      selectedSort,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Sort Picker List\n\nThe `SortPickerList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `v-model` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe default slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggests, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortPickerList :items=\"sortValues\">\n    <template #default=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortPickerList>\n</template>\n\n<script setup>\nimport { SortPickerList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortPickerList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #default=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortPickerList>\n</template>\n\n<script setup>\nimport { SortPickerList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst selectedSort = ref('Price asc')\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n\n### Customizing the items with classes\n\nThe `buttonClass` prop can be used to add classes to the sort items.\n\n```vue\n<template>\n  <SortPickerList :items=\"sortValues\" buttonClass=\"x-button-outlined\" />\n</template>\n\n<script setup>\nimport { SortPickerList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAkCA;;;AAGE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAAyB;AAC/B,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAiC;AACtD,YAAA,OAAO,EAAE,MAAM,KAAK;AACrB,SAAA;;AAED,QAAA,WAAW,EAAE,MAAM;AACpB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;QAEjB,MAAM,EAAE,IAAI,EAAE,YAAW,KAAM,QAAQ,CAAC,QAAQ,CAAA;AAEhD,QAAA,KAAK,CAAC,YAAY,EAAE,CAAC,KAAW,KAAK,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE;AAC3E,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA,CAAA;AAED;;;;AAIE;AACF,QAAA,MAAM,YAAY,QAAQ,CAAmB,MAC3C,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAG,KAAM;YACvB,IAAI;AACJ,YAAA,UAAU,EAAE;AACV,gBAAA,YAAY,EAAE,SAAS,YAAY,CAAC,KAAK;AAC1C,aAAA;AACD,YAAA,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAG,EAAG;SAClC,CAAC,CAAC,CACL;QAEA,OAAO;YACL,SAAS;YACT,YAAY;SACd;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "6.0.0-alpha.205",
+  "version": "6.0.0-alpha.206",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -59,16 +59,7 @@
     "test:unit-jest": "jest",
     "test:unit-coverage": "jest --coverage",
     "test:unit-watch": "jest --watch",
-    "test:unit-cypress": "cypress run --component --browser chrome",
-    "test:e2e": "start-server-and-test preview http://localhost:8080 cypress:open",
-    "test:e2e:firefox": "start-server-and-test preview http://localhost:8080 cypress:open:firefox",
-    "test:e2e:ci": "start-server-and-test preview http://localhost:8080 cypress:run:ci",
-    "test": "pnpm run test:unit && pnpm run test:e2e:ci",
-    "cypress:run:ci": "cypress run --e2e --headless --browser chrome",
-    "cypress:open": "cypress open --e2e --browser chrome",
-    "cypress:open:firefox": "cypress open --e2e --browser firefox",
-    "cypress:open:component": "cypress open --component --browser chrome",
-    "cypress:open:component:firefox": "cypress open --component --browser firefox",
+    "test": "pnpm run test:unit",
     "prepublishOnly": "pnpm run build"
   },
   "peerDependencies": {
@@ -76,12 +67,12 @@
     "vuex": "4.0.2"
   },
   "dependencies": {
-    "@empathyco/x-adapter": "^8.1.0-alpha.10",
-    "@empathyco/x-adapter-platform": "1.1.0-alpha.45",
-    "@empathyco/x-deep-merge": "^2.0.3-alpha.10",
-    "@empathyco/x-storage-service": "^2.0.3-alpha.8",
-    "@empathyco/x-types": "10.1.0-alpha.38",
-    "@empathyco/x-utils": "^1.0.3-alpha.9",
+    "@empathyco/x-adapter": "8.1.0-alpha.11",
+    "@empathyco/x-adapter-platform": "1.1.0-alpha.46",
+    "@empathyco/x-deep-merge": "2.0.3-alpha.11",
+    "@empathyco/x-storage-service": "2.0.3-alpha.9",
+    "@empathyco/x-types": "10.1.0-alpha.39",
+    "@empathyco/x-utils": "1.0.3-alpha.10",
     "@vue/devtools-api": "~6.6.4",
     "@vueuse/core": "~12.8.2",
     "js-md5": "~0.8.3",
@@ -94,10 +85,7 @@
   },
   "devDependencies": {
     "@babel/preset-env": "7.29.0",
-    "@badeball/cypress-cucumber-preprocessor": "24.0.1",
-    "@bahmutov/cypress-esbuild-preprocessor": "2.2.8",
-    "@cucumber/messages": "32.0.1",
-    "@empathyco/x-tailwindcss": "2.0.0-alpha.24",
+    "@empathyco/x-tailwindcss": "2.0.0-alpha.25",
     "@microsoft/api-documenter": "7.29.2",
     "@microsoft/api-extractor": "7.57.2",
     "@testing-library/jest-dom": "6.9.1",
@@ -109,7 +97,6 @@
     "@vue/vue3-jest": "29.2.6",
     "autoprefixer": "10.4.24",
     "convert-source-map": "2.0.0",
-    "cypress": "15.10.0",
     "esbuild": "0.27.3",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
@@ -139,5 +126,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "acebbc77bd18d465f88fafa8112bc00bc8cba2fd"
+  "gitHead": "0fe2d22e1c70403157034c558f1f2911f406a8b6"
 }