list-items.mjs 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. // Utilities
  2. import { computed } from 'vue';
  3. import { deepEqual, getPropertyFromItem, pick, propsFactory } from "../util/index.mjs"; // Types
  4. // Composables
  5. export const makeItemsProps = propsFactory({
  6. items: {
  7. type: Array,
  8. default: () => []
  9. },
  10. itemTitle: {
  11. type: [String, Array, Function],
  12. default: 'title'
  13. },
  14. itemValue: {
  15. type: [String, Array, Function],
  16. default: 'value'
  17. },
  18. itemChildren: {
  19. type: [Boolean, String, Array, Function],
  20. default: 'children'
  21. },
  22. itemProps: {
  23. type: [Boolean, String, Array, Function],
  24. default: 'props'
  25. },
  26. returnObject: Boolean
  27. }, 'list-items');
  28. export function transformItem(props, item) {
  29. const title = getPropertyFromItem(item, props.itemTitle, item);
  30. const value = props.returnObject ? item : getPropertyFromItem(item, props.itemValue, title);
  31. const children = getPropertyFromItem(item, props.itemChildren);
  32. const itemProps = props.itemProps === true ? typeof item === 'object' && item != null && !Array.isArray(item) ? 'children' in item ? pick(item, ['children'])[1] : item : undefined : getPropertyFromItem(item, props.itemProps);
  33. const _props = {
  34. title,
  35. value,
  36. ...itemProps
  37. };
  38. return {
  39. title: String(_props.title ?? ''),
  40. value: _props.value,
  41. props: _props,
  42. children: Array.isArray(children) ? transformItems(props, children) : undefined,
  43. raw: item
  44. };
  45. }
  46. export function transformItems(props, items) {
  47. const array = [];
  48. for (const item of items) {
  49. array.push(transformItem(props, item));
  50. }
  51. return array;
  52. }
  53. export function useItems(props) {
  54. const items = computed(() => transformItems(props, props.items));
  55. return useTransformItems(items, value => transformItem(props, value));
  56. }
  57. export function useTransformItems(items, transform) {
  58. function transformIn(value) {
  59. return value
  60. // When the model value is null, returns an InternalItem based on null
  61. // only if null is one of the items
  62. .filter(v => v !== null || items.value.some(item => item.value === null)).map(v => {
  63. const existingItem = items.value.find(item => deepEqual(v, item.value));
  64. // Nullish existingItem means value is a custom input value from combobox
  65. // In this case, use transformItem to create an InternalItem based on value
  66. return existingItem ?? transform(v);
  67. });
  68. }
  69. function transformOut(value) {
  70. return value.map(_ref => {
  71. let {
  72. value
  73. } = _ref;
  74. return value;
  75. });
  76. }
  77. return {
  78. items,
  79. transformIn,
  80. transformOut
  81. };
  82. }
  83. //# sourceMappingURL=list-items.mjs.map