@milaboratories/uikit 2.2.94 → 2.2.95

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.
Files changed (12) hide show
  1. package/.turbo/turbo-build.log +14 -14
  2. package/.turbo/turbo-type-check.log +1 -1
  3. package/CHANGELOG.md +6 -0
  4. package/dist/components/PlElementList/PlElementList.vue.d.ts +19 -19
  5. package/dist/components/PlElementList/PlElementList.vue.d.ts.map +1 -1
  6. package/dist/components/PlElementList/PlElementList.vue2.js +145 -133
  7. package/dist/components/PlElementList/PlElementList.vue2.js.map +1 -1
  8. package/dist/components/PlElementList/PlElementListItem.vue2.js.map +1 -1
  9. package/dist/components/PlElementList/PlElementListItem.vue3.js +33 -33
  10. package/package.json +4 -4
  11. package/src/components/PlElementList/PlElementList.vue +81 -70
  12. package/src/components/PlElementList/PlElementListItem.vue +2 -2
package/.turbo/turbo-build.log CHANGED
@@ -1,6 +1,6 @@
1
1
   WARN  Issue while reading "/home/runner/_work/platforma/platforma/.npmrc". Failed to replace env in config: ${NPMJS_TOKEN}
2
2
 
3
- > @milaboratories/uikit@2.2.94 build /home/runner/_work/platforma/platforma/lib/ui/uikit
3
+ > @milaboratories/uikit@2.2.95 build /home/runner/_work/platforma/platforma/lib/ui/uikit
4
4
  > vite build
5
5
 
6
6
  vite v6.3.5 building for production...
@@ -55,14 +55,14 @@ computing gzip size...
55
55
  dist/utils/DoubleContour.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.43 kB
56
56
  dist/generated/components/svg/images/SvgRequired.vue3.js  0.11 kB │ gzip: 0.11 kB │ map: 1.02 kB
57
57
  dist/components/SliderRange.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
58
- dist/layout/PlBlockPage/PlBlockPage.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
59
58
  dist/layout/PlContainer/PlContainer.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
60
- dist/components/PlBtnAccent/PlBtnAccent.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
59
+ dist/layout/PlBlockPage/PlBlockPage.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
61
60
  dist/components/PlBtnDanger/PlBtnDanger.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
61
+ dist/components/PlBtnAccent/PlBtnAccent.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
62
62
  dist/components/PlTextField/PlTextField.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
63
- dist/components/PlAccordion/PlAccordion.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
64
63
  dist/components/PlStatusTag/PlStatusTag.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
65
64
  dist/components/PlFileInput/PlFileInput.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
65
+ dist/components/PlAccordion/PlAccordion.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
66
66
  dist/components/DataTable/ColumnCaret.vue2.js  0.11 kB │ gzip: 0.11 kB │ map: 0.10 kB
67
67
  dist/node_modules/.pnpm/d3-selection@3.0.0/node_modules/d3-selection/src/selection/sparse.js  0.11 kB │ gzip: 0.12 kB │ map: 0.39 kB
68
68
  dist/components/PlBtnPrimary/PlBtnPrimary.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.10 kB
@@ -71,18 +71,18 @@ computing gzip size...
71
71
  dist/utils/InnerBorder.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.34 kB
72
72
  dist/node_modules/.pnpm/d3-array@3.2.4/node_modules/d3-array/src/number.js  0.11 kB │ gzip: 0.12 kB │ map: 0.78 kB
73
73
  dist/components/ThemeSwitcher.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.10 kB
74
- dist/components/PlProgressBar/PlProgressBar.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.10 kB
75
74
  dist/components/PlDropdownRef/PlDropdownRef.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.10 kB
75
+ dist/components/PlProgressBar/PlProgressBar.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.10 kB
76
76
  dist/components/PlNumberField/PlNumberField.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.10 kB
77
77
  dist/components/PlDialogModal/PlDialogModal.vue2.js  0.11 kB │ gzip: 0.12 kB │ map: 0.10 kB
78
78
  dist/components/DataTable/TableComponent.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
79
79
  dist/components/PlBtnSecondary/PlBtnSecondary.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
80
80
  dist/components/PlDropdownLine/PlDropdownLine.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
81
81
  dist/components/PlToggleSwitch/PlToggleSwitch.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
82
- dist/components/PlProgressCell/PlProgressCell.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
83
82
  dist/components/PlAutocomplete/PlAutocomplete.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
84
- dist/components/PlDropdownLine/ResizableInput.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
83
+ dist/components/PlProgressCell/PlProgressCell.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
85
84
  dist/components/PlCheckbox/PlCheckboxBase.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
85
+ dist/components/PlDropdownLine/ResizableInput.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.10 kB
86
86
  dist/components/ContextProvider.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
87
87
  dist/components/PlErrorBoundary/PlErrorBoundary.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
88
88
  dist/components/PlEditableTitle/PlEditableTitle.vue2.js  0.12 kB │ gzip: 0.12 kB │ map: 0.11 kB
@@ -226,9 +226,9 @@ computing gzip size...
226
226
  dist/assets/icons/icon-assets-min/24_text-align-right.svg.js  0.30 kB │ gzip: 0.25 kB │ map: 0.50 kB
227
227
  dist/assets/icons/icon-assets-min/16_checkmark.svg.js  0.30 kB │ gzip: 0.25 kB │ map: 0.48 kB
228
228
  dist/components/PlChartStackedBar/PlChartStackedBar.vue.js  0.30 kB │ gzip: 0.22 kB │ map: 0.11 kB
229
+ dist/components/PlElementList/PlElementListItem.vue.js  0.30 kB │ gzip: 0.22 kB │ map: 0.11 kB
229
230
  dist/assets/icons/icon-assets-min/16_arrow-up.svg.js  0.30 kB │ gzip: 0.25 kB │ map: 0.48 kB
230
231
  dist/assets/icons/icon-assets-min/24_linetype-twodash.svg.js  0.30 kB │ gzip: 0.25 kB │ map: 0.50 kB
231
- dist/components/PlElementList/PlElementListItem.vue.js  0.30 kB │ gzip: 0.22 kB │ map: 0.11 kB
232
232
  dist/components/PlChartStackedBar/StackedRowCompact.vue.js  0.30 kB │ gzip: 0.22 kB │ map: 0.11 kB
233
233
  dist/assets/icons/icon-assets-min/24_checkmark.svg.js  0.31 kB │ gzip: 0.25 kB │ map: 0.49 kB
234
234
  dist/assets/icons/icon-assets-min/16_arrow-down.svg.js  0.31 kB │ gzip: 0.25 kB │ map: 0.49 kB
@@ -354,8 +354,8 @@ computing gzip size...
354
354
  dist/assets/icons/icon-assets-min/16_y-axis.svg.js  0.45 kB │ gzip: 0.30 kB │ map: 0.65 kB
355
355
  dist/assets/icons/icon-assets-min/24_delete-circle.svg.js  0.45 kB │ gzip: 0.31 kB │ map: 0.65 kB
356
356
  dist/assets/icons/icon-assets-min/24_zoom-in.svg.js  0.45 kB │ gzip: 0.30 kB │ map: 0.65 kB
357
- dist/assets/images/24_checkbox-light-enabled-checked.svg.js  0.45 kB │ gzip: 0.33 kB │ map: 0.71 kB
358
357
  dist/components/PlChartStackedBar/PlChartStackedBarCompact.vue3.js  0.45 kB │ gzip: 0.32 kB │ map: 0.12 kB
358
+ dist/assets/images/24_checkbox-light-enabled-checked.svg.js  0.45 kB │ gzip: 0.33 kB │ map: 0.71 kB
359
359
  dist/assets/icons/icon-assets-min/24_frame-type-all.svg.js  0.46 kB │ gzip: 0.31 kB │ map: 0.65 kB
360
360
  dist/assets/icons/icon-assets-min/16_delete-bin.svg.js  0.46 kB │ gzip: 0.32 kB │ map: 0.64 kB
361
361
  dist/assets/icons/icon-assets-min/24_frame-type-left-bottom.svg.js  0.46 kB │ gzip: 0.30 kB │ map: 0.67 kB
@@ -703,9 +703,9 @@ computing gzip size...
703
703
  dist/components/DataTable/state.js  3.50 kB │ gzip: 1.28 kB │ map: 9.12 kB
704
704
  dist/components/PlFileDialog/PlFileDialog.vue.js  3.51 kB │ gzip: 1.39 kB │ map: 4.58 kB
705
705
  dist/components/PlBtnPrimary/PlBtnPrimary.vue.js  3.52 kB │ gzip: 1.33 kB │ map: 1.22 kB
706
- dist/components/PlElementList/PlElementListItem.vue3.js  3.66 kB │ gzip: 1.33 kB │ map: 0.12 kB
706
+ dist/components/PlElementList/PlElementListItem.vue3.js  3.64 kB │ gzip: 1.32 kB │ map: 0.12 kB
707
707
  dist/composition/useSortable.js  3.68 kB │ gzip: 1.30 kB │ map: 10.85 kB
708
- dist/components/PlElementList/PlElementListItem.vue2.js  3.72 kB │ gzip: 1.14 kB │ map: 6.31 kB
708
+ dist/components/PlElementList/PlElementListItem.vue2.js  3.72 kB │ gzip: 1.14 kB │ map: 6.30 kB
709
709
  dist/components/PlChip/PlChip.vue.js  4.01 kB │ gzip: 1.61 kB │ map: 1.35 kB
710
710
  dist/components/PlBtnGhost/PlBtnGhost.vue.js  4.35 kB │ gzip: 1.68 kB │ map: 2.34 kB
711
711
  dist/assets/icons/icon-assets-min/24_heatmap.svg.js  4.38 kB │ gzip: 0.99 kB │ map: 4.68 kB
@@ -725,7 +725,7 @@ computing gzip size...
725
725
  dist/components/PlTextField/PlTextField.vue.js  8.67 kB │ gzip: 2.88 kB │ map: 9.01 kB
726
726
  dist/components/PlFileDialog/Remote.vue.js  8.72 kB │ gzip: 2.79 kB │ map: 14.20 kB
727
727
  dist/node_modules/.pnpm/d3-color@3.1.0/node_modules/d3-color/src/color.js  9.19 kB │ gzip: 3.33 kB │ map: 21.96 kB
728
- dist/components/PlElementList/PlElementList.vue2.js  9.65 kB │ gzip: 2.58 kB │ map: 17.46 kB
728
+ dist/components/PlElementList/PlElementList.vue2.js  10.14 kB │ gzip: 2.59 kB │ map: 18.85 kB
729
729
  dist/components/PlNumberField/PlNumberField.vue.js  10.17 kB │ gzip: 3.25 kB │ map: 13.39 kB
730
730
  dist/components/PlFileInput/PlFileInput.vue.js  10.72 kB │ gzip: 3.36 kB │ map: 8.41 kB
731
731
  dist/demo-site-data/all-css-variables.js  11.00 kB │ gzip: 1.76 kB │ map: 18.21 kB
@@ -741,6 +741,6 @@ computing gzip size...
741
741
  dist/index.js 501.00 kB │ gzip: 192.22 kB │ map: 5.50 kB
742
742
  dist/components/PlSlideModal/PlSlideModal.vue.js 601.36 kB │ gzip: 204.35 kB │ map: 3.21 kB
743
743
  dist/components/DataTable/TableComponent.vue.js 602.69 kB │ gzip: 204.95 kB │ map: 4.86 kB
744
- [vite:dts] Declaration files built in 7257ms.
744
+ [vite:dts] Declaration files built in 7022ms.
745
745
 
746
- ✓ built in 12.25s
746
+ ✓ built in 11.91s
package/.turbo/turbo-type-check.log CHANGED
@@ -1,5 +1,5 @@
1
1
   WARN  Issue while reading "/home/runner/_work/platforma/platforma/.npmrc". Failed to replace env in config: ${NPMJS_TOKEN}
2
2
 
3
- > @milaboratories/uikit@2.2.94 type-check /home/runner/_work/platforma/platforma/lib/ui/uikit
3
+ > @milaboratories/uikit@2.2.95 type-check /home/runner/_work/platforma/platforma/lib/ui/uikit
4
4
  > vue-tsc --project ./tsconfig.lib.json
5
5
 
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @milaboratories/uikit
2
2
 
3
+ ## 2.2.95
4
+
5
+ ### Patch Changes
6
+
7
+ - 70eff11: update plelementlist interface
8
+
3
9
  ## 2.2.94
4
10
 
5
11
  ### Patch Changes
package/dist/components/PlElementList/PlElementList.vue.d.ts CHANGED
@@ -1,30 +1,30 @@
1
1
  declare const _default: <T extends unknown = unknown, K extends number | string = string | number>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
2
2
  props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
3
3
  readonly "onUpdate:items"?: ((value: T[]) => any) | undefined;
4
- readonly "onUpdate:draggableItems"?: ((value: Set<T>) => any) | undefined;
5
- readonly "onUpdate:removableItems"?: ((value: Set<T>) => any) | undefined;
6
- readonly "onUpdate:expandableItems"?: ((value: Set<T>) => any) | undefined;
7
- readonly "onUpdate:expandedItems"?: ((value: Set<T>) => any) | undefined;
8
- readonly "onUpdate:pinnableItems"?: ((value: Set<T>) => any) | undefined;
9
- readonly "onUpdate:pinnedItems"?: ((value: Set<T>) => any) | undefined;
10
- readonly "onUpdate:toggableItems"?: ((value: Set<T>) => any) | undefined;
11
- readonly "onUpdate:toggledItems"?: ((value: Set<T>) => any) | undefined;
4
+ readonly "onUpdate:draggableItems"?: ((value: Set<K>) => any) | undefined;
5
+ readonly "onUpdate:removableItems"?: ((value: Set<K>) => any) | undefined;
6
+ readonly "onUpdate:expandableItems"?: ((value: Set<K>) => any) | undefined;
7
+ readonly "onUpdate:expandedItems"?: ((value: Set<K>) => any) | undefined;
8
+ readonly "onUpdate:pinnableItems"?: ((value: Set<K>) => any) | undefined;
9
+ readonly "onUpdate:pinnedItems"?: ((value: Set<K>) => any) | undefined;
10
+ readonly "onUpdate:toggableItems"?: ((value: Set<K>) => any) | undefined;
11
+ readonly "onUpdate:toggledItems"?: ((value: Set<K>) => any) | undefined;
12
12
  readonly onItemClick?: ((item: T) => any) | undefined;
13
13
  } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:items" | "onUpdate:draggableItems" | "onUpdate:removableItems" | "onUpdate:expandableItems" | "onUpdate:expandedItems" | "onUpdate:pinnableItems" | "onUpdate:pinnedItems" | "onUpdate:toggableItems" | "onUpdate:toggledItems" | "onItemClick"> & ({
14
14
  items: T[];
15
- draggableItems?: Set<T>;
16
- removableItems?: Set<T>;
17
- expandableItems?: Set<T>;
18
- expandedItems?: Set<T>;
19
- pinnableItems?: Set<T>;
20
- pinnedItems?: Set<T>;
21
- toggableItems?: Set<T>;
22
- toggledItems?: Set<T>;
15
+ draggableItems?: Set<K>;
16
+ removableItems?: Set<K>;
17
+ expandableItems?: Set<K>;
18
+ expandedItems?: Set<K>;
19
+ pinnableItems?: Set<K>;
20
+ pinnedItems?: Set<K>;
21
+ toggableItems?: Set<K>;
22
+ toggledItems?: Set<K>;
23
23
  } & {
24
+ getItemKey: (item: T, index: number) => K;
24
25
  itemClass?: string | string[] | ((item: T, index: number) => string | string[]);
25
- activeItems?: Set<T>;
26
+ activeItems?: Set<K>;
26
27
  enableDragging?: boolean;
27
- getItemKey?: (item: T) => K;
28
28
  onDragEnd?: (oldIndex: number, newIndex: number) => void | boolean;
29
29
  onSort?: (oldIndex: number, newIndex: number) => void | boolean;
30
30
  enableExpanding?: boolean;
@@ -57,7 +57,7 @@ declare const _default: <T extends unknown = unknown, K extends number | string
57
57
  index: number;
58
58
  }) => unknown;
59
59
  };
60
- emit: ((e: "itemClick", item: T) => void) & (((evt: "update:items", value: T[]) => void) & ((evt: "update:draggableItems", value: Set<T>) => void) & ((evt: "update:removableItems", value: Set<T>) => void) & ((evt: "update:expandableItems", value: Set<T>) => void) & ((evt: "update:expandedItems", value: Set<T>) => void) & ((evt: "update:pinnableItems", value: Set<T>) => void) & ((evt: "update:pinnedItems", value: Set<T>) => void) & ((evt: "update:toggableItems", value: Set<T>) => void) & ((evt: "update:toggledItems", value: Set<T>) => void));
60
+ emit: ((e: "itemClick", item: T) => void) & (((evt: "update:items", value: T[]) => void) & ((evt: "update:draggableItems", value: Set<K>) => void) & ((evt: "update:removableItems", value: Set<K>) => void) & ((evt: "update:expandableItems", value: Set<K>) => void) & ((evt: "update:expandedItems", value: Set<K>) => void) & ((evt: "update:pinnableItems", value: Set<K>) => void) & ((evt: "update:pinnedItems", value: Set<K>) => void) & ((evt: "update:toggableItems", value: Set<K>) => void) & ((evt: "update:toggledItems", value: Set<K>) => void));
61
61
  }>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
62
62
  [key: string]: any;
63
63
  }> & {
package/dist/components/PlElementList/PlElementList.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PlElementList.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlElementList/PlElementList.vue"],"names":[],"mappings":"yBA0ViB,CAAC,SAAS,OAAO,YAAY,CAAC,SAAS,MAAM,GAAG,MAAM,iCACzD,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WA+hB1D,mBAAmB,CAAC;;;;;;;;;;;;eAlRnB,CAAC,EAAE;yBACO,GAAG,CAAC,CAAC,CAAC;yBACN,GAAG,CAAC,CAAC,CAAC;0BACL,GAAG,CAAC,CAAC,CAAC;wBACR,GAAG,CAAC,CAAC,CAAC;wBACN,GAAG,CAAC,CAAC,CAAC;sBACR,GAAG,CAAC,CAAC,CAAC;wBACJ,GAAG,CAAC,CAAC,CAAC;uBACP,GAAG,CAAC,CAAC,CAAC;;oBArQP,MAAM,GAAG,MAAM,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,EAAE,CAAC;sBACjE,GAAG,CAAC,CAAC,CAAC;yBAEH,OAAO;qBACX,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC;oBACf,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO;iBACzD,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO;0BAE7C,OAAO;mBACd,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO;yBAEpC,OAAO;mBACb,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO;yBAEpC,OAAO;mBACb,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO;wBAErC,OAAO;gBACf,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO;oBA6fwC,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;sBAleO,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;yBAC3C,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;;sBADjD,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;yBAC3C,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;;UAme5D,KAzeD,WAAW,QAAQ,CAAC,KAAG,IAAI,0fAyeW;;;;YAGA,OAAO,CAAC,OAAO,WAAW,CAAC;;AAziBvE,wBAyiB4E;AAS5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
1
+ {"version":3,"file":"PlElementList.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlElementList/PlElementList.vue"],"names":[],"mappings":"yBAqWiB,CAAC,SAAS,OAAO,YAAY,CAAC,SAAS,MAAM,GAAG,MAAM,iCACzD,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WAyiB1D,mBAAmB,CAAC;;;;;;;;;;;;eAlRnB,CAAC,EAAE;yBACO,GAAG,CAAC,CAAC,CAAC;yBACN,GAAG,CAAC,CAAC,CAAC;0BACL,GAAG,CAAC,CAAC,CAAC;wBACR,GAAG,CAAC,CAAC,CAAC;wBACN,GAAG,CAAC,CAAC,CAAC;sBACR,GAAG,CAAC,CAAC,CAAC;wBACJ,GAAG,CAAC,CAAC,CAAC;uBACP,GAAG,CAAC,CAAC,CAAC;;oBA/QP,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;oBAE7B,MAAM,GAAG,MAAM,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,EAAE,CAAC;sBACjE,GAAG,CAAC,CAAC,CAAC;yBAEH,OAAO;oBACZ,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO;iBACzD,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO;0BAE7C,OAAO;mBACd,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO;yBAEpC,OAAO;mBACb,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO;yBAEpC,OAAO;mBACb,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO;wBAErC,OAAO;gBACf,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO;oBAsgBwC,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;sBA5eO,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;yBAC3C,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;;sBADjD,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;yBAC3C,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;;UA6e5D,KAnfD,WAAW,QAAQ,CAAC,KAAG,IAAI,0fAmfW;;;;YAGA,OAAO,CAAC,OAAO,WAAW,CAAC;;AAnjBvE,wBAmjB4E;AAS5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
package/dist/components/PlElementList/PlElementList.vue2.js CHANGED
@@ -1,15 +1,15 @@
1
- import { defineComponent as ce, mergeModels as X, useModel as u, useSlots as ve, computed as g, shallowRef as C, watch as me, createElementBlock as P, openBlock as b, normalizeClass as R, createElementVNode as be, createCommentVNode as ye, Fragment as Y, renderList as Z, createBlock as _, createSlots as ee, withCtx as S, renderSlot as k } from "vue";
2
- import { isNil as c, shallowHash as te } from "../../lib/util/helpers/dist/index.js";
1
+ import { defineComponent as me, mergeModels as X, useModel as u, useSlots as de, computed as c, shallowRef as T, watch as ve, createElementBlock as P, openBlock as v, normalizeClass as R, createElementVNode as be, createCommentVNode as ye, Fragment as Y, renderList as Z, createBlock as x, createSlots as _, withCtx as S, renderSlot as C } from "vue";
2
+ import { shallowHash as ee, isNil as b } from "../../lib/util/helpers/dist/index.js";
3
3
  import { useSortable as he } from "../../node_modules/.pnpm/@vueuse_integrations@13.3.0_axios@1.8.1_focus-trap@7.6.0_sortablejs@1.15.6_vue@3.5.13_typescript@5.6.3_/node_modules/@vueuse/integrations/useSortable.js";
4
- import { optionalUpdateRef as v, moveElements as ae } from "./utils.js";
5
- import ne from "./PlElementListItem.vue.js";
6
- const ke = /* @__PURE__ */ ce({
4
+ import { optionalUpdateRef as m, moveElements as te } from "./utils.js";
5
+ import ae from "./PlElementListItem.vue.js";
6
+ const Ce = /* @__PURE__ */ me({
7
7
  __name: "PlElementList",
8
8
  props: /* @__PURE__ */ X({
9
+ getItemKey: {},
9
10
  itemClass: { type: [String, Array, Function], default: void 0 },
10
11
  activeItems: { default: void 0 },
11
12
  enableDragging: { type: Boolean, default: void 0 },
12
- getItemKey: { type: Function, default: void 0 },
13
13
  onDragEnd: { type: Function, default: void 0 },
14
14
  onSort: { type: Function, default: void 0 },
15
15
  enableExpanding: { type: Boolean, default: void 0 },
@@ -41,189 +41,201 @@ const ke = /* @__PURE__ */ ce({
41
41
  toggledItemsModifiers: {}
42
42
  }),
43
43
  emits: /* @__PURE__ */ X(["itemClick"], ["update:items", "update:draggableItems", "update:removableItems", "update:expandableItems", "update:expandedItems", "update:pinnableItems", "update:pinnedItems", "update:toggableItems", "update:toggledItems"]),
44
- setup(o, { emit: le }) {
45
- const d = u(o, "items"), se = u(o, "draggableItems"), ie = u(o, "removableItems"), oe = u(o, "expandableItems"), y = u(o, "expandedItems"), re = u(o, "pinnableItems"), r = u(o, "pinnedItems"), ue = u(o, "toggableItems"), f = u(o, "toggledItems"), n = o, I = le, T = ve(), D = g(() => n.enableDragging !== !1 && !c(n.getItemKey)), h = g(() => d.value.filter(E)), de = g(() => h.value.length > 0), p = g(() => d.value.filter((e) => !E(e))), $ = g(() => p.value.length > 0), x = C(), w = C(), F = C(), M = g((e) => {
46
- const t = te(...d.value);
47
- if (x.value === void 0) return e ?? t;
48
- const a = te(...x.value);
49
- return t === a ? e ?? t : e !== t ? t : a;
44
+ setup(i, { emit: le }) {
45
+ const f = u(i, "items"), se = u(i, "draggableItems"), oe = u(i, "removableItems"), ne = u(i, "expandableItems"), y = u(i, "expandedItems"), ie = u(i, "pinnableItems"), r = u(i, "pinnedItems"), re = u(i, "toggableItems"), g = u(i, "toggledItems"), s = i, D = le, I = de(), $ = c(() => s.enableDragging !== !1), h = c(() => f.value.filter(E)), ue = c(() => h.value.length > 0), k = c(() => f.value.filter((a, l) => !E(a, l))), w = c(() => k.value.length > 0), K = T(), M = T(), p = T(), fe = c((a) => {
46
+ const l = ee(...f.value.map(s.getItemKey));
47
+ if (K.value === void 0) return a ?? l;
48
+ const t = ee(...K.value.map(s.getItemKey));
49
+ return l === t ? a ?? l : a !== l ? l : t;
50
50
  });
51
- B(de, w, h, () => 0), B($, F, p, () => h.value.length);
52
- function B(e, t, a, l) {
53
- const s = he(t, a, {
51
+ F(ue, M, h, () => 0), F(w, p, k, () => h.value.length);
52
+ function F(a, l, t, e) {
53
+ const o = he(l, t, {
54
54
  handle: '[data-draggable="true"]',
55
55
  animation: 150,
56
56
  forceFallback: !0,
57
57
  fallbackOnBody: !0,
58
58
  scrollSensitivity: 80,
59
59
  forceAutoScrollFallback: !0,
60
- onUpdate: (i) => {
61
- var m;
62
- if (i.oldIndex == null || i.newIndex == null)
60
+ onUpdate: (n) => {
61
+ var d;
62
+ if (n.oldIndex == null || n.newIndex == null)
63
63
  throw new Error("Sortable event has no index");
64
- ((m = n.onDragEnd) == null ? void 0 : m.call(n, i.oldIndex, i.newIndex)) !== !1 && A(l() + i.oldIndex, l() + i.newIndex, !0);
64
+ ((d = s.onDragEnd) == null ? void 0 : d.call(s, n.oldIndex, n.newIndex)) !== !1 && B(e() + n.oldIndex, e() + n.newIndex, !0);
65
65
  }
66
66
  });
67
- return me(e, (i) => i ? s.start() : s.stop()), s;
67
+ return ve(a, (n) => n ? o.start() : o.stop()), o;
68
68
  }
69
- function A(e, t, a) {
70
- var s;
71
- if (e === t) return;
72
- a && (x.value = ae(d.value.slice(), e, t)), ((s = n.onSort) == null ? void 0 : s.call(n, e, t)) === !1 || (ae(d.value, e, t), v(d));
69
+ function B(a, l, t) {
70
+ var o;
71
+ if (a === l) return;
72
+ t && (K.value = te(f.value.slice(), a, l)), ((o = s.onSort) == null ? void 0 : o.call(s, a, l)) === !1 || (te(f.value, a, l), m(f));
73
73
  }
74
- function K(e) {
75
- var t;
76
- return ((t = n.activeItems) == null ? void 0 : t.has(e)) ?? !1;
74
+ function A(a, l) {
75
+ var e;
76
+ const t = s.getItemKey(a, l);
77
+ return ((e = s.activeItems) == null ? void 0 : e.has(t)) ?? !1;
77
78
  }
78
- function H(e) {
79
- var t;
80
- return n.enableDragging === !1 ? !1 : ((t = se.value) == null ? void 0 : t.has(e)) ?? !0;
79
+ function H(a, l) {
80
+ var e;
81
+ const t = s.getItemKey(a, l);
82
+ return s.enableDragging === !1 ? !1 : ((e = se.value) == null ? void 0 : e.has(t)) ?? !0;
81
83
  }
82
- function z(e) {
83
- var t;
84
- return n.enableToggling === !1 ? !1 : !c(f.value) && (((t = ue.value) == null ? void 0 : t.has(e)) ?? !0);
84
+ function z(a, l) {
85
+ var e;
86
+ const t = s.getItemKey(a, l);
87
+ return s.enableToggling === !1 ? !1 : !b(g.value) && (((e = re.value) == null ? void 0 : e.has(t)) ?? !0);
85
88
  }
86
- function L(e) {
87
- var t;
88
- return ((t = f.value) == null ? void 0 : t.has(e)) ?? !1;
89
+ function L(a, l) {
90
+ var e;
91
+ const t = s.getItemKey(a, l);
92
+ return ((e = g.value) == null ? void 0 : e.has(t)) ?? !1;
89
93
  }
90
- function N(e) {
91
- var t;
92
- return n.enablePinning === !1 ? !1 : !c(r.value) && (((t = re.value) == null ? void 0 : t.has(e)) ?? !0);
94
+ function N(a, l) {
95
+ var e;
96
+ const t = s.getItemKey(a, l);
97
+ return s.enablePinning === !1 ? !1 : !b(r.value) && (((e = ie.value) == null ? void 0 : e.has(t)) ?? !0);
93
98
  }
94
- function E(e) {
95
- var t;
96
- return ((t = r.value) == null ? void 0 : t.has(e)) ?? !1;
99
+ function E(a, l) {
100
+ var e;
101
+ const t = s.getItemKey(a, l);
102
+ return ((e = r.value) == null ? void 0 : e.has(t)) ?? !1;
97
103
  }
98
- function U(e) {
99
- var t;
100
- return n.enableExpanding === !1 ? !1 : !c(y.value) && (((t = oe.value) == null ? void 0 : t.has(e)) ?? !0);
104
+ function U(a, l) {
105
+ var e;
106
+ const t = s.getItemKey(a, l);
107
+ return s.enableExpanding === !1 ? !1 : !b(y.value) && (((e = ne.value) == null ? void 0 : e.has(t)) ?? !0);
101
108
  }
102
- function V(e) {
103
- var t;
104
- return ((t = y.value) == null ? void 0 : t.has(e)) ?? !1;
109
+ function V(a, l) {
110
+ var e;
111
+ const t = s.getItemKey(a, l);
112
+ return ((e = y.value) == null ? void 0 : e.has(t)) ?? !1;
105
113
  }
106
- function j(e) {
107
- var t;
108
- return n.enableRemoving === !1 || ((t = ie.value) == null ? void 0 : t.has(e)) === !1 ? !1 : n.enableRemoving === !0 || typeof n.onRemove == "function";
114
+ function j(a, l) {
115
+ var e;
116
+ const t = s.getItemKey(a, l);
117
+ return s.enableRemoving === !1 || ((e = oe.value) == null ? void 0 : e.has(t)) === !1 ? !1 : s.enableRemoving === !0 || typeof s.onRemove == "function";
109
118
  }
110
- function q(e, t) {
111
- var l;
112
- if (((l = n.onExpand) == null ? void 0 : l.call(n, e, t)) === !1 || c(y.value)) return;
113
- const a = y.value;
114
- a.has(e) ? a.delete(e) : a.add(e), v(y);
119
+ function q(a, l) {
120
+ var o;
121
+ if (((o = s.onExpand) == null ? void 0 : o.call(s, a, l)) === !1 || b(y.value)) return;
122
+ const t = s.getItemKey(a, l), e = y.value;
123
+ e.has(t) ? e.delete(t) : e.add(t), m(y);
115
124
  }
116
- function G(e, t) {
117
- var l;
118
- if (((l = n.onToggle) == null ? void 0 : l.call(n, e, t)) === !1 || c(f.value)) return;
119
- const a = f.value;
120
- a.has(e) ? a.delete(e) : a.add(e), v(f);
125
+ function G(a, l) {
126
+ var o;
127
+ if (((o = s.onToggle) == null ? void 0 : o.call(s, a, l)) === !1 || b(g.value)) return;
128
+ const t = s.getItemKey(a, l), e = g.value;
129
+ e.has(t) ? e.delete(t) : e.add(t), m(g);
121
130
  }
122
- function J(e, t) {
123
- var s;
124
- if (t === -1)
131
+ function J(a, l) {
132
+ var n;
133
+ if (l === -1)
125
134
  throw new Error("Pinnable item not found");
126
- if (((s = n.onPin) == null ? void 0 : s.call(n, e, t)) === !1 || c(r.value)) return;
127
- const a = r.value, l = a.has(e);
128
- l ? a.delete(e) : a.add(e), v(r), A(t, a.size + (l ? 0 : -1), !1);
135
+ if (((n = s.onPin) == null ? void 0 : n.call(s, a, l)) === !1 || b(r.value)) return;
136
+ const t = s.getItemKey(a, l), e = r.value, o = e.has(t);
137
+ o ? e.delete(t) : e.add(t), m(r), B(l, e.size + (o ? 0 : -1), !1);
129
138
  }
130
- function O(e, t) {
131
- var a, l, s;
132
- ((a = n.onRemove) == null ? void 0 : a.call(n, e, t)) !== !1 && (d.value.splice(t, 1), v(d), (l = r.value) != null && l.has(e) && (r.value.delete(e), v(r)), (s = f.value) != null && s.has(e) && (f.value.delete(e), v(f)));
139
+ function O(a, l) {
140
+ var t, e, o;
141
+ if (((t = s.onRemove) == null ? void 0 : t.call(s, a, l)) !== !1) {
142
+ const n = s.getItemKey(a, l);
143
+ f.value.splice(l, 1), m(f), (e = r.value) != null && e.has(n) && (r.value.delete(n), m(r)), (o = g.value) != null && o.has(n) && (g.value.delete(n), m(g));
144
+ }
133
145
  }
134
- const Q = (e, t) => c(n.getItemKey) ? `${M.value}-${t}` : `${M.value}-${n.getItemKey(e)}`, fe = g(() => h.value.map(Q)), ge = g(() => p.value.map(Q)), W = (e, t) => typeof n.itemClass == "function" ? n.itemClass(e, t) : n.itemClass ?? null;
135
- return (e, t) => (b(), P("div", {
136
- class: R(e.$style.root)
146
+ const Q = (a, l) => `${fe.value}-${s.getItemKey(a, l)}`, ge = c(() => h.value.map(Q)), ce = c(() => k.value.map(Q)), W = (a, l) => typeof s.itemClass == "function" ? s.itemClass(a, l) : s.itemClass ?? null;
147
+ return (a, l) => (v(), P("div", {
148
+ class: R(a.$style.root)
137
149
  }, [
138
150
  be("div", {
139
151
  ref_key: "pinnedContainerRef",
140
- ref: w,
141
- class: R(e.$style.list)
152
+ ref: M,
153
+ class: R(a.$style.list)
142
154
  }, [
143
- (b(!0), P(Y, null, Z(h.value, (a, l) => (b(), _(ne, {
144
- key: fe.value[l],
145
- class: R([e.$style.item, W(a, l)]),
146
- index: l,
147
- item: a,
148
- showDragHandle: D.value,
149
- isActive: K(a),
150
- isDraggable: H(a),
151
- isRemovable: j(a),
152
- isToggable: z(a),
153
- isToggled: L(a),
154
- isPinnable: N(a),
155
- isPinned: E(a),
156
- isExpandable: U(a),
157
- isExpanded: V(a),
158
- onClick: (s) => I("itemClick", a),
155
+ (v(!0), P(Y, null, Z(h.value, (t, e) => (v(), x(ae, {
156
+ key: ge.value[e],
157
+ class: R([a.$style.item, W(t, e)]),
158
+ index: e,
159
+ item: t,
160
+ showDragHandle: $.value,
161
+ isActive: A(t, e),
162
+ isDraggable: H(t, e),
163
+ isRemovable: j(t, e),
164
+ isToggable: z(t, e),
165
+ isToggled: L(t, e),
166
+ isPinnable: N(t, e),
167
+ isPinned: E(t, e),
168
+ isExpandable: U(t, e),
169
+ isExpanded: V(t, e),
170
+ onClick: (o) => D("itemClick", t),
159
171
  onRemove: O,
160
172
  onToggle: G,
161
173
  onPin: J,
162
174
  onExpand: q
163
- }, ee({
164
- title: S(({ item: s, index: i }) => [
165
- k(e.$slots, "item-title", {
166
- index: i,
167
- item: s
175
+ }, _({
176
+ title: S(({ item: o, index: n }) => [
177
+ C(a.$slots, "item-title", {
178
+ index: n,
179
+ item: o
168
180
  })
169
181
  ]),
170
182
  _: 2
171
183
  }, [
172
- T["item-content"] ? {
184
+ I["item-content"] ? {
173
185
  name: "content",
174
- fn: S(({ item: s, index: i }) => [
175
- k(e.$slots, "item-content", {
176
- index: i,
177
- item: s
186
+ fn: S(({ item: o, index: n }) => [
187
+ C(a.$slots, "item-content", {
188
+ index: n,
189
+ item: o
178
190
  })
179
191
  ]),
180
192
  key: "0"
181
193
  } : void 0
182
194
  ]), 1032, ["class", "index", "item", "showDragHandle", "isActive", "isDraggable", "isRemovable", "isToggable", "isToggled", "isPinnable", "isPinned", "isExpandable", "isExpanded", "onClick"]))), 128))
183
195
  ], 2),
184
- $.value ? (b(), P("div", {
196
+ w.value ? (v(), P("div", {
185
197
  key: 0,
186
198
  ref_key: "unpinnedContainerRef",
187
- ref: F,
188
- class: R(e.$style.list)
199
+ ref: p,
200
+ class: R(a.$style.list)
189
201
  }, [
190
- (b(!0), P(Y, null, Z(p.value, (a, l) => {
191
- var s;
192
- return b(), _(ne, {
193
- key: ge.value[l],
194
- class: R([e.$style.item, W(a, l)]),
195
- index: l + (((s = r.value) == null ? void 0 : s.size) ?? 0),
196
- item: a,
197
- showDragHandle: D.value,
198
- isActive: K(a),
199
- isDraggable: H(a),
200
- isRemovable: j(a),
201
- isToggable: z(a),
202
- isToggled: L(a),
203
- isPinnable: N(a),
204
- isPinned: E(a),
205
- isExpandable: U(a),
206
- isExpanded: V(a),
207
- onClick: (i) => I("itemClick", a),
202
+ (v(!0), P(Y, null, Z(k.value, (t, e) => {
203
+ var o;
204
+ return v(), x(ae, {
205
+ key: ce.value[e],
206
+ class: R([a.$style.item, W(t, e)]),
207
+ index: e + (((o = r.value) == null ? void 0 : o.size) ?? 0),
208
+ item: t,
209
+ showDragHandle: $.value,
210
+ isActive: A(t, e),
211
+ isDraggable: H(t, e),
212
+ isRemovable: j(t, e),
213
+ isToggable: z(t, e),
214
+ isToggled: L(t, e),
215
+ isPinnable: N(t, e),
216
+ isPinned: E(t, e),
217
+ isExpandable: U(t, e),
218
+ isExpanded: V(t, e),
219
+ onClick: (n) => D("itemClick", t),
208
220
  onRemove: O,
209
221
  onToggle: G,
210
222
  onPin: J,
211
223
  onExpand: q
212
- }, ee({
213
- title: S(({ item: i, index: m }) => [
214
- k(e.$slots, "item-title", {
215
- index: m,
216
- item: i
224
+ }, _({
225
+ title: S(({ item: n, index: d }) => [
226
+ C(a.$slots, "item-title", {
227
+ index: d,
228
+ item: n
217
229
  })
218
230
  ]),
219
231
  _: 2
220
232
  }, [
221
- T["item-content"] ? {
233
+ I["item-content"] ? {
222
234
  name: "content",
223
- fn: S(({ item: i, index: m }) => [
224
- k(e.$slots, "item-content", {
225
- index: m,
226
- item: i
235
+ fn: S(({ item: n, index: d }) => [
236
+ C(a.$slots, "item-content", {
237
+ index: d,
238
+ item: n
227
239
  })
228
240
  ]),
229
241
  key: "0"
@@ -235,6 +247,6 @@ const ke = /* @__PURE__ */ ce({
235
247
  }
236
248
  });
237
249
  export {
238
- ke as default
250
+ Ce as default
239
251
  };
240
252
  //# sourceMappingURL=PlElementList.vue2.js.map
package/dist/components/PlElementList/PlElementList.vue2.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PlElementList.vue2.js","sources":["../../../src/components/PlElementList/PlElementList.vue"],"sourcesContent":["<script generic=\"T extends unknown = unknown, K extends number | string = number | string\" lang=\"ts\" setup>\nimport type { ShallowRef } from 'vue';\nimport { computed, shallowRef, watch } from 'vue';\nimport { isNil, shallowHash } from '@milaboratories/helpers';\nimport { useSortable } from '@vueuse/integrations/useSortable';\nimport { type SortableEvent } from 'sortablejs';\nimport { moveElements, optionalUpdateRef } from './utils.ts';\nimport PlElementListItem from './PlElementListItem.vue';\n\nconst itemsRef = defineModel<T[]>('items', { required: true });\nconst draggableSetRef = defineModel<Set<T>>('draggableItems');\nconst removableSetRef = defineModel<Set<T>>('removableItems');\n\nconst expandableSetRef = defineModel<Set<T>>('expandableItems');\nconst expandedSetRef = defineModel<Set<T>>('expandedItems');\n\nconst pinnableSetRef = defineModel<Set<T>>('pinnableItems');\nconst pinnedSetRef = defineModel<Set<T>>('pinnedItems');\n\nconst toggableSetRef = defineModel<Set<T>>('toggableItems');\nconst toggledSetRef = defineModel<Set<T>>('toggledItems');\n\nconst props = withDefaults(\n defineProps<{\n itemClass?: string | string[] | ((item: T, index: number) => string | string[]);\n activeItems?: Set<T>;\n\n enableDragging?: boolean;\n getItemKey?: (item: T) => K;\n onDragEnd?: (oldIndex: number, newIndex: number) => void | boolean;\n onSort?: (oldIndex: number, newIndex: number) => void | boolean;\n\n enableExpanding?: boolean;\n onExpand?: (item: T, index: number) => void | boolean;\n\n enableRemoving?: boolean;\n onRemove?: (item: T, index: number) => void | boolean;\n\n enableToggling?: boolean;\n onToggle?: (item: T, index: number) => void | boolean;\n\n enablePinning?: boolean;\n onPin?: (item: T, index: number) => void | boolean;\n }>(), {\n itemClass: undefined,\n activeItems: undefined,\n\n enableDragging: undefined,\n enableRemoving: undefined,\n enableExpanding: undefined,\n enableToggling: undefined,\n enablePinning: undefined,\n\n getItemKey: undefined,\n onDragEnd: undefined,\n onSort: undefined,\n onRemove: undefined,\n onExpand: undefined,\n onToggle: undefined,\n onPin: undefined,\n },\n);\n\nconst emits = defineEmits<{\n (e: 'itemClick', item: T): void;\n}>();\n\nconst slots = defineSlots<{\n ['item-title']: (props: { item: T; index: number }) => unknown;\n ['item-content']?: (props: { item: T; index: number }) => unknown;\n}>();\n\nconst dndSortingEnabled = computed((): boolean => {\n return props.enableDragging !== false && !isNil(props.getItemKey);\n});\n\nconst pinnedItemsRef = computed(() => itemsRef.value.filter(isPinned));\nconst hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);\n\nconst unpinnedItemsRef = computed(() => itemsRef.value.filter((item) => !isPinned(item)));\nconst hasUnpinnedItems = computed(() => unpinnedItemsRef.value.length > 0);\n\nconst domProjectionItemsRef = shallowRef<undefined | T[]>();\nconst pinnedContainerRef = shallowRef<HTMLElement>();\nconst unpinnedContainerRef = shallowRef<HTMLElement>();\n\n// version fix problem with sync between data and rendered values when items have been changed\nconst versionRef = computed<number>((oldVersion) => {\n const currentVersion = shallowHash(...itemsRef.value);\n\n if (domProjectionItemsRef.value === undefined) return oldVersion ?? currentVersion;\n\n const lastSortedVersion = shallowHash(...domProjectionItemsRef.value);\n\n if (currentVersion === lastSortedVersion) return oldVersion ?? currentVersion;\n\n return oldVersion !== currentVersion ? currentVersion : lastSortedVersion;\n});\n\ncreateSortable(hasPinnedItems, pinnedContainerRef, pinnedItemsRef, () => 0);\ncreateSortable(hasUnpinnedItems, unpinnedContainerRef, unpinnedItemsRef, () => pinnedItemsRef.value.length);\n\nfunction createSortable(toggler: ShallowRef<boolean>, elRef: ShallowRef<undefined | HTMLElement>, itemsRef: ShallowRef<T[]>, getOffset: () => number) {\n const sortable = useSortable(elRef, itemsRef, {\n handle: `[data-draggable=\"true\"]`,\n animation: 150,\n forceFallback: true,\n fallbackOnBody: true,\n scrollSensitivity: 80,\n forceAutoScrollFallback: true,\n onUpdate: (evt: SortableEvent) => {\n if (evt.oldIndex == null || evt.newIndex == null) {\n throw new Error('Sortable event has no index');\n }\n if (props.onDragEnd?.(evt.oldIndex, evt.newIndex) !== false) {\n moveItems(getOffset() + evt.oldIndex, getOffset() + evt.newIndex, true);\n }\n },\n });\n watch(toggler, (on) => on ? sortable.start() : sortable.stop());\n\n return sortable;\n}\n\nfunction moveItems(oldIndex: number, newIndex: number, afterUpdateDom: boolean) {\n if (oldIndex === newIndex) return;\n\n if (afterUpdateDom) {\n domProjectionItemsRef.value = moveElements(itemsRef.value.slice(), oldIndex, newIndex);\n }\n\n const preventDefault = props.onSort?.(oldIndex, newIndex) === false;\n\n if (!preventDefault) {\n moveElements(itemsRef.value, oldIndex, newIndex);\n optionalUpdateRef(itemsRef);\n }\n}\n\nfunction isActive(item: T): boolean {\n return props.activeItems?.has(item) ?? false;\n}\n\nfunction isDraggable(item: T): boolean {\n if (props.enableDragging === false) return false;\n return (draggableSetRef.value?.has(item) ?? true);\n}\n\nfunction isToggable(item: T): boolean {\n if (props.enableToggling === false) return false;\n return !isNil(toggledSetRef.value) && (toggableSetRef.value?.has(item) ?? true);\n}\n\nfunction isToggled(item: T): boolean {\n return toggledSetRef.value?.has(item) ?? false;\n}\n\nfunction isPinnable(item: T): boolean {\n if (props.enablePinning === false) return false;\n return !isNil(pinnedSetRef.value) && (pinnableSetRef.value?.has(item) ?? true);\n}\n\nfunction isPinned(item: T): boolean {\n return pinnedSetRef.value?.has(item) ?? false;\n}\n\nfunction isExpandable(item: T): boolean {\n if (props.enableExpanding === false) return false;\n return !isNil(expandedSetRef.value) && (expandableSetRef.value?.has(item) ?? true);\n}\n\nfunction isExpanded(item: T): boolean {\n return expandedSetRef.value?.has(item) ?? false;\n}\n\nfunction isRemovable(item: T): boolean {\n if (props.enableRemoving === false) return false;\n if (removableSetRef.value?.has(item) === false) return false;\n return props.enableRemoving === true || typeof props.onRemove === 'function';\n}\n\nfunction handleExpand(item: T, index: number) {\n if (props.onExpand?.(item, index) === false || isNil(expandedSetRef.value)) return;\n\n const expanded = expandedSetRef.value;\n if (expanded.has(item)) expanded.delete(item);\n else expanded.add(item);\n optionalUpdateRef(expandedSetRef);\n}\n\nfunction handleToggle(item: T, index: number) {\n if (props.onToggle?.(item, index) === false || isNil(toggledSetRef.value)) return;\n\n const toggled = toggledSetRef.value;\n if (toggled.has(item)) toggled.delete(item);\n else toggled.add(item);\n optionalUpdateRef(toggledSetRef);\n}\n\nfunction handlePin(item: T, oldIndex: number) {\n if (oldIndex === -1) {\n throw new Error('Pinnable item not found');\n }\n\n if (props.onPin?.(item, oldIndex) === false || isNil(pinnedSetRef.value)) return;\n\n const pinned = pinnedSetRef.value;\n const alreadyPinned = pinned.has(item);\n if (alreadyPinned) pinned.delete(item);\n else pinned.add(item);\n optionalUpdateRef(pinnedSetRef);\n moveItems(oldIndex, pinned.size + (alreadyPinned ? 0 : -1), false);\n}\n\nfunction handleRemove(item: T, index: number) {\n if (props.onRemove?.(item, index) !== false) {\n itemsRef.value.splice(index, 1);\n optionalUpdateRef(itemsRef);\n\n if (pinnedSetRef.value?.has(item)) {\n pinnedSetRef.value.delete(item);\n optionalUpdateRef(pinnedSetRef);\n }\n\n if (toggledSetRef.value?.has(item)) {\n toggledSetRef.value.delete(item);\n optionalUpdateRef(toggledSetRef);\n }\n }\n}\n\n// version fix problem with sync between data and rendered values\nconst getKey = (item: T, index: number) => {\n if (isNil(props.getItemKey)) return `${versionRef.value}-${index}`;\n return `${versionRef.value}-${props.getItemKey(item)}`;\n};\nconst pinnedKeysRef = computed(() => pinnedItemsRef.value.map(getKey));\nconst unpinnedKeysRef = computed(() => unpinnedItemsRef.value.map(getKey));\n\nconst getItemClass = (item: T, index: number): null | string | string[] => {\n if (typeof props.itemClass === 'function') {\n return props.itemClass(item, index);\n }\n return props.itemClass ?? null;\n};\n\n</script>\n\n<template>\n <div :class=\"$style.root\">\n <div ref=\"pinnedContainerRef\" :class=\"$style.list\">\n <PlElementListItem\n v-for=\"(pinnedItem, pinnedIndex) in pinnedItemsRef\" :key=\"pinnedKeysRef[pinnedIndex]\"\n :class=\"[$style.item, getItemClass(pinnedItem, pinnedIndex)]\"\n\n :index=\"pinnedIndex\"\n :item=\"pinnedItem\"\n :showDragHandle=\"dndSortingEnabled\"\n :isActive=\"isActive(pinnedItem)\"\n :isDraggable=\"isDraggable(pinnedItem)\"\n :isRemovable=\"isRemovable(pinnedItem)\"\n :isToggable=\"isToggable(pinnedItem)\"\n :isToggled=\"isToggled(pinnedItem)\"\n :isPinnable=\"isPinnable(pinnedItem)\"\n :isPinned=\"isPinned(pinnedItem)\"\n :isExpandable=\"isExpandable(pinnedItem)\"\n :isExpanded=\"isExpanded(pinnedItem)\"\n\n @click=\"emits('itemClick', pinnedItem)\"\n @remove=\"handleRemove\"\n @toggle=\"handleToggle\"\n @pin=\"handlePin\"\n @expand=\"handleExpand\"\n >\n <template #title=\"{ item, index }\">\n <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n </template>\n <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n </template>\n </PlElementListItem>\n </div>\n <div v-if=\"hasUnpinnedItems\" ref=\"unpinnedContainerRef\" :class=\"$style.list\">\n <PlElementListItem\n v-for=\"(unpinnedItem, unpinnedIndex) in unpinnedItemsRef\" :key=\"unpinnedKeysRef[unpinnedIndex]\"\n :class=\"[$style.item, getItemClass(unpinnedItem, unpinnedIndex)]\"\n\n :index=\"unpinnedIndex + (pinnedSetRef?.size ?? 0)\"\n :item=\"unpinnedItem\"\n :showDragHandle=\"dndSortingEnabled\"\n :isActive=\"isActive(unpinnedItem)\"\n :isDraggable=\"isDraggable(unpinnedItem)\"\n :isRemovable=\"isRemovable(unpinnedItem)\"\n :isToggable=\"isToggable(unpinnedItem)\"\n :isToggled=\"isToggled(unpinnedItem)\"\n :isPinnable=\"isPinnable(unpinnedItem)\"\n :isPinned=\"isPinned(unpinnedItem)\"\n :isExpandable=\"isExpandable(unpinnedItem)\"\n :isExpanded=\"isExpanded(unpinnedItem)\"\n\n @click=\"emits('itemClick', unpinnedItem)\"\n @remove=\"handleRemove\"\n @toggle=\"handleToggle\"\n @pin=\"handlePin\"\n @expand=\"handleExpand\"\n >\n <template #title=\"{ item, index }\">\n <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n </template>\n <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n </template>\n </PlElementListItem>\n </div>\n </div>\n</template>\n\n<style module>\n.root, .list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n min-width: 180px;\n}\n\n.item {\n width: 100%;\n}\n\n:global(.sortable-ghost) {\n visibility: hidden;\n}\n:global(.sortable-drag) {\n opacity: 1;\n}\n</style>\n"],"names":["itemsRef","_useModel","__props","draggableSetRef","removableSetRef","expandableSetRef","expandedSetRef","pinnableSetRef","pinnedSetRef","toggableSetRef","toggledSetRef","props","emits","__emit","slots","_useSlots","dndSortingEnabled","computed","isNil","pinnedItemsRef","isPinned","hasPinnedItems","unpinnedItemsRef","item","hasUnpinnedItems","domProjectionItemsRef","shallowRef","pinnedContainerRef","unpinnedContainerRef","versionRef","oldVersion","currentVersion","shallowHash","lastSortedVersion","createSortable","toggler","elRef","getOffset","sortable","useSortable","evt","_a","moveItems","watch","on","oldIndex","newIndex","afterUpdateDom","moveElements","optionalUpdateRef","isActive","isDraggable","isToggable","isToggled","isPinnable","isExpandable","isExpanded","isRemovable","handleExpand","index","expanded","handleToggle","toggled","handlePin","pinned","alreadyPinned","handleRemove","_b","_c","getKey","pinnedKeysRef","unpinnedKeysRef","getItemClass"],"mappings":"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"}
1
+ {"version":3,"file":"PlElementList.vue2.js","sources":["../../../src/components/PlElementList/PlElementList.vue"],"sourcesContent":["<script generic=\"T extends unknown = unknown, K extends number | string = number | string\" lang=\"ts\" setup>\nimport type { ShallowRef } from 'vue';\nimport { computed, shallowRef, watch } from 'vue';\nimport { isNil, shallowHash } from '@milaboratories/helpers';\nimport { useSortable } from '@vueuse/integrations/useSortable';\nimport { type SortableEvent } from 'sortablejs';\nimport { moveElements, optionalUpdateRef } from './utils.ts';\nimport PlElementListItem from './PlElementListItem.vue';\n\nconst itemsRef = defineModel<T[]>('items', { required: true });\nconst draggableSetRef = defineModel<Set<K>>('draggableItems');\nconst removableSetRef = defineModel<Set<K>>('removableItems');\n\nconst expandableSetRef = defineModel<Set<K>>('expandableItems');\nconst expandedSetRef = defineModel<Set<K>>('expandedItems');\n\nconst pinnableSetRef = defineModel<Set<K>>('pinnableItems');\nconst pinnedSetRef = defineModel<Set<K>>('pinnedItems');\n\nconst toggableSetRef = defineModel<Set<K>>('toggableItems');\nconst toggledSetRef = defineModel<Set<K>>('toggledItems');\n\nconst props = withDefaults(\n defineProps<{\n getItemKey: (item: T, index: number) => K;\n\n itemClass?: string | string[] | ((item: T, index: number) => string | string[]);\n activeItems?: Set<K>;\n\n enableDragging?: boolean;\n onDragEnd?: (oldIndex: number, newIndex: number) => void | boolean;\n onSort?: (oldIndex: number, newIndex: number) => void | boolean;\n\n enableExpanding?: boolean;\n onExpand?: (item: T, index: number) => void | boolean;\n\n enableRemoving?: boolean;\n onRemove?: (item: T, index: number) => void | boolean;\n\n enableToggling?: boolean;\n onToggle?: (item: T, index: number) => void | boolean;\n\n enablePinning?: boolean;\n onPin?: (item: T, index: number) => void | boolean;\n }>(), {\n itemClass: undefined,\n activeItems: undefined,\n\n enableDragging: undefined,\n enableRemoving: undefined,\n enableExpanding: undefined,\n enableToggling: undefined,\n enablePinning: undefined,\n\n onDragEnd: undefined,\n onSort: undefined,\n onRemove: undefined,\n onExpand: undefined,\n onToggle: undefined,\n onPin: undefined,\n },\n);\n\nconst emits = defineEmits<{\n (e: 'itemClick', item: T): void;\n}>();\n\nconst slots = defineSlots<{\n ['item-title']: (props: { item: T; index: number }) => unknown;\n ['item-content']?: (props: { item: T; index: number }) => unknown;\n}>();\n\nconst dndSortingEnabled = computed((): boolean => {\n return props.enableDragging !== false;\n});\n\nconst pinnedItemsRef = computed(() => itemsRef.value.filter(isPinned));\nconst hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);\n\nconst unpinnedItemsRef = computed(() => itemsRef.value.filter((item, index) => !isPinned(item, index)));\nconst hasUnpinnedItems = computed(() => unpinnedItemsRef.value.length > 0);\n\nconst domProjectionItemsRef = shallowRef<undefined | T[]>();\nconst pinnedContainerRef = shallowRef<HTMLElement>();\nconst unpinnedContainerRef = shallowRef<HTMLElement>();\n\n// version fix problem with sync between data and rendered values when items have been changed\nconst versionRef = computed<number>((oldVersion) => {\n const currentVersion = shallowHash(...itemsRef.value.map(props.getItemKey));\n\n if (domProjectionItemsRef.value === undefined) return oldVersion ?? currentVersion;\n\n const lastSortedVersion = shallowHash(...domProjectionItemsRef.value.map(props.getItemKey));\n\n if (currentVersion === lastSortedVersion) return oldVersion ?? currentVersion;\n\n return oldVersion !== currentVersion ? currentVersion : lastSortedVersion;\n});\n\ncreateSortable(hasPinnedItems, pinnedContainerRef, pinnedItemsRef, () => 0);\ncreateSortable(hasUnpinnedItems, unpinnedContainerRef, unpinnedItemsRef, () => pinnedItemsRef.value.length);\n\nfunction createSortable(toggler: ShallowRef<boolean>, elRef: ShallowRef<undefined | HTMLElement>, itemsRef: ShallowRef<T[]>, getOffset: () => number) {\n const sortable = useSortable(elRef, itemsRef, {\n handle: `[data-draggable=\"true\"]`,\n animation: 150,\n forceFallback: true,\n fallbackOnBody: true,\n scrollSensitivity: 80,\n forceAutoScrollFallback: true,\n onUpdate: (evt: SortableEvent) => {\n if (evt.oldIndex == null || evt.newIndex == null) {\n throw new Error('Sortable event has no index');\n }\n if (props.onDragEnd?.(evt.oldIndex, evt.newIndex) !== false) {\n moveItems(getOffset() + evt.oldIndex, getOffset() + evt.newIndex, true);\n }\n },\n });\n watch(toggler, (on) => on ? sortable.start() : sortable.stop());\n\n return sortable;\n}\n\nfunction moveItems(oldIndex: number, newIndex: number, afterUpdateDom: boolean) {\n if (oldIndex === newIndex) return;\n\n if (afterUpdateDom) {\n domProjectionItemsRef.value = moveElements(itemsRef.value.slice(), oldIndex, newIndex);\n }\n\n const preventDefault = props.onSort?.(oldIndex, newIndex) === false;\n\n if (!preventDefault) {\n moveElements(itemsRef.value, oldIndex, newIndex);\n optionalUpdateRef(itemsRef);\n }\n}\n\nfunction isActive(item: T, index: number): boolean {\n const k = props.getItemKey(item, index);\n return props.activeItems?.has(k) ?? false;\n}\n\nfunction isDraggable(item: T, index: number): boolean {\n const k = props.getItemKey(item, index);\n if (props.enableDragging === false) return false;\n return (draggableSetRef.value?.has(k) ?? true);\n}\n\nfunction isToggable(item: T, index: number): boolean {\n const k = props.getItemKey(item, index);\n if (props.enableToggling === false) return false;\n return !isNil(toggledSetRef.value) && (toggableSetRef.value?.has(k) ?? true);\n}\n\nfunction isToggled(item: T, index: number): boolean {\n const k = props.getItemKey(item, index);\n return toggledSetRef.value?.has(k) ?? false;\n}\n\nfunction isPinnable(item: T, index: number): boolean {\n const k = props.getItemKey(item, index);\n if (props.enablePinning === false) return false;\n return !isNil(pinnedSetRef.value) && (pinnableSetRef.value?.has(k) ?? true);\n}\n\nfunction isPinned(item: T, index: number): boolean {\n const k = props.getItemKey(item, index);\n return pinnedSetRef.value?.has(k) ?? false;\n}\n\nfunction isExpandable(item: T, index: number): boolean {\n const k = props.getItemKey(item, index);\n if (props.enableExpanding === false) return false;\n return !isNil(expandedSetRef.value) && (expandableSetRef.value?.has(k) ?? true);\n}\n\nfunction isExpanded(item: T, index: number): boolean {\n const k = props.getItemKey(item, index);\n return expandedSetRef.value?.has(k) ?? false;\n}\n\nfunction isRemovable(item: T, index: number): boolean {\n const k = props.getItemKey(item, index);\n if (props.enableRemoving === false) return false;\n if (removableSetRef.value?.has(k) === false) return false;\n return props.enableRemoving === true || typeof props.onRemove === 'function';\n}\n\nfunction handleExpand(item: T, index: number) {\n if (props.onExpand?.(item, index) === false || isNil(expandedSetRef.value)) return;\n const k = props.getItemKey(item, index);\n const expanded = expandedSetRef.value;\n if (expanded.has(k)) expanded.delete(k);\n else expanded.add(k);\n optionalUpdateRef(expandedSetRef);\n}\n\nfunction handleToggle(item: T, index: number) {\n if (props.onToggle?.(item, index) === false || isNil(toggledSetRef.value)) return;\n const k = props.getItemKey(item, index);\n const toggled = toggledSetRef.value;\n if (toggled.has(k)) toggled.delete(k);\n else toggled.add(k);\n optionalUpdateRef(toggledSetRef);\n}\n\nfunction handlePin(item: T, index: number) {\n if (index === -1) {\n throw new Error('Pinnable item not found');\n }\n\n if (props.onPin?.(item, index) === false || isNil(pinnedSetRef.value)) return;\n\n const k = props.getItemKey(item, index);\n const pinned = pinnedSetRef.value;\n const alreadyPinned = pinned.has(k);\n if (alreadyPinned) pinned.delete(k);\n else pinned.add(k);\n optionalUpdateRef(pinnedSetRef);\n moveItems(index, pinned.size + (alreadyPinned ? 0 : -1), false);\n}\n\nfunction handleRemove(item: T, index: number) {\n if (props.onRemove?.(item, index) !== false) {\n const k = props.getItemKey(item, index);\n\n itemsRef.value.splice(index, 1);\n optionalUpdateRef(itemsRef);\n\n if (pinnedSetRef.value?.has(k)) {\n pinnedSetRef.value.delete(k);\n optionalUpdateRef(pinnedSetRef);\n }\n\n if (toggledSetRef.value?.has(k)) {\n toggledSetRef.value.delete(k);\n optionalUpdateRef(toggledSetRef);\n }\n }\n}\n\n// version fix problem with sync between data and rendered values\nconst getKey = (item: T, index: number) => {\n return `${versionRef.value}-${props.getItemKey(item, index)}`;\n};\nconst pinnedKeysRef = computed(() => pinnedItemsRef.value.map(getKey));\nconst unpinnedKeysRef = computed(() => unpinnedItemsRef.value.map(getKey));\n\nconst getItemClass = (item: T, index: number): null | string | string[] => {\n if (typeof props.itemClass === 'function') {\n return props.itemClass(item, index);\n }\n return props.itemClass ?? null;\n};\n\n</script>\n\n<template>\n <div :class=\"$style.root\">\n <div ref=\"pinnedContainerRef\" :class=\"$style.list\">\n <PlElementListItem\n v-for=\"(pinnedItem, pinnedIndex) in pinnedItemsRef\" :key=\"pinnedKeysRef[pinnedIndex]\"\n :class=\"[$style.item, getItemClass(pinnedItem, pinnedIndex)]\"\n\n :index=\"pinnedIndex\"\n :item=\"pinnedItem\"\n :showDragHandle=\"dndSortingEnabled\"\n :isActive=\"isActive(pinnedItem, pinnedIndex)\"\n :isDraggable=\"isDraggable(pinnedItem, pinnedIndex)\"\n :isRemovable=\"isRemovable(pinnedItem, pinnedIndex)\"\n :isToggable=\"isToggable(pinnedItem, pinnedIndex)\"\n :isToggled=\"isToggled(pinnedItem, pinnedIndex)\"\n :isPinnable=\"isPinnable(pinnedItem, pinnedIndex)\"\n :isPinned=\"isPinned(pinnedItem, pinnedIndex)\"\n :isExpandable=\"isExpandable(pinnedItem, pinnedIndex)\"\n :isExpanded=\"isExpanded(pinnedItem, pinnedIndex)\"\n\n @click=\"emits('itemClick', pinnedItem)\"\n @remove=\"handleRemove\"\n @toggle=\"handleToggle\"\n @pin=\"handlePin\"\n @expand=\"handleExpand\"\n >\n <template #title=\"{ item, index }\">\n <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n </template>\n <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n </template>\n </PlElementListItem>\n </div>\n <div v-if=\"hasUnpinnedItems\" ref=\"unpinnedContainerRef\" :class=\"$style.list\">\n <PlElementListItem\n v-for=\"(unpinnedItem, unpinnedIndex) in unpinnedItemsRef\" :key=\"unpinnedKeysRef[unpinnedIndex]\"\n :class=\"[$style.item, getItemClass(unpinnedItem, unpinnedIndex)]\"\n\n :index=\"unpinnedIndex + (pinnedSetRef?.size ?? 0)\"\n :item=\"unpinnedItem\"\n :showDragHandle=\"dndSortingEnabled\"\n :isActive=\"isActive(unpinnedItem, unpinnedIndex)\"\n :isDraggable=\"isDraggable(unpinnedItem, unpinnedIndex)\"\n :isRemovable=\"isRemovable(unpinnedItem, unpinnedIndex)\"\n :isToggable=\"isToggable(unpinnedItem, unpinnedIndex)\"\n :isToggled=\"isToggled(unpinnedItem, unpinnedIndex)\"\n :isPinnable=\"isPinnable(unpinnedItem, unpinnedIndex)\"\n :isPinned=\"isPinned(unpinnedItem, unpinnedIndex)\"\n :isExpandable=\"isExpandable(unpinnedItem, unpinnedIndex)\"\n :isExpanded=\"isExpanded(unpinnedItem, unpinnedIndex)\"\n\n @click=\"emits('itemClick', unpinnedItem)\"\n @remove=\"handleRemove\"\n @toggle=\"handleToggle\"\n @pin=\"handlePin\"\n @expand=\"handleExpand\"\n >\n <template #title=\"{ item, index }\">\n <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n </template>\n <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n </template>\n </PlElementListItem>\n </div>\n </div>\n</template>\n\n<style module>\n.root, .list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n min-width: 180px;\n}\n\n.item {\n width: 100%;\n}\n\n:global(.sortable-ghost) {\n visibility: hidden;\n}\n:global(.sortable-drag) {\n opacity: 1;\n}\n</style>\n"],"names":["itemsRef","_useModel","__props","draggableSetRef","removableSetRef","expandableSetRef","expandedSetRef","pinnableSetRef","pinnedSetRef","toggableSetRef","toggledSetRef","props","emits","__emit","slots","_useSlots","dndSortingEnabled","computed","pinnedItemsRef","isPinned","hasPinnedItems","unpinnedItemsRef","item","index","hasUnpinnedItems","domProjectionItemsRef","shallowRef","pinnedContainerRef","unpinnedContainerRef","versionRef","oldVersion","currentVersion","shallowHash","lastSortedVersion","createSortable","toggler","elRef","getOffset","sortable","useSortable","evt","_a","moveItems","watch","on","oldIndex","newIndex","afterUpdateDom","moveElements","optionalUpdateRef","isActive","k","isDraggable","isToggable","isNil","isToggled","isPinnable","isExpandable","isExpanded","isRemovable","handleExpand","expanded","handleToggle","toggled","handlePin","pinned","alreadyPinned","handleRemove","_b","_c","getKey","pinnedKeysRef","unpinnedKeysRef","getItemClass"],"mappings":"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"}
package/dist/components/PlElementList/PlElementListItem.vue2.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PlElementListItem.vue2.js","sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"sourcesContent":["<script generic=\"T extends unknown = unknown\" lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlIcon24 } from '../PlIcon24';\n\nconst props = defineProps<{\n item: T;\n index: number;\n showDragHandle: boolean;\n isActive: boolean;\n isDraggable: boolean;\n isRemovable: boolean;\n isExpandable: boolean;\n isExpanded: boolean;\n isToggable: boolean;\n isToggled: boolean;\n isPinnable: boolean;\n isPinned: boolean;\n}>();\n\nconst slots = defineSlots<{\n title: (props: { item: T; index: number }) => unknown;\n content?: (props: { item: T; index: number }) => unknown;\n}>();\nconst hasContentSlot = computed(() => slots['content'] !== undefined);\n\nconst emit = defineEmits<{\n (e: 'expand', item: T, index: number): void;\n (e: 'toggle', item: T, index: number): void;\n (e: 'pin', item: T, index: number): void;\n (e: 'remove', item: T, index: number): void;\n}>();\n</script>\n\n<template>\n <div\n :class=\"[$style.root, {\n [$style.active]: props.isActive,\n [$style.pinned]: props.isPinned,\n [$style.disabled]: props.isToggled,\n }]\"\n >\n <div\n :class=\"[$style.head, {\n [$style.clickable]: hasContentSlot,\n }]\"\n @click=\"isExpandable && emit('expand', props.item, props.index)\"\n >\n <div\n v-if=\"props.showDragHandle\"\n :class=\"[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable } ]\"\n :data-draggable=\"props.isDraggable\"\n >\n <PlIcon16 name=\"drag-dots\" />\n </div>\n <PlIcon16 v-if=\"isExpandable\" :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\" name=\"chevron-down\" />\n\n <div :class=\"$style.title\">\n <slot name=\"title\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n\n <div :class=\"[$style.actions, $style.showOnHover]\">\n <div\n v-if=\"props.isToggable\"\n :class=\"[$style.action, $style.clickable, { [$style.disable]: !props.isToggable }]\"\n @click.stop=\"emit('toggle', props.item, props.index)\"\n >\n <PlIcon24 :name=\"props.isToggled === true ? 'view-hide' : 'view-show'\" size=\"16\" />\n </div>\n <div\n v-if=\"props.isPinnable\"\n :class=\"[$style.action, $style.clickable, {\n [$style.disable]: !props.isPinnable,\n [$style.activated]: props.isPinned,\n }]\"\n @click.stop=\"emit('pin', props.item, props.index)\"\n >\n <PlIcon24 name=\"pin\" size=\"16\" />\n </div>\n <div\n v-if=\"props.isRemovable\"\n :class=\"[$style.action, $style.clickable]\"\n @click.stop=\"emit('remove', props.item, props.index)\"\n >\n <PlIcon16 name=\"close\" />\n </div>\n </div>\n </div>\n <div v-if=\"hasContentSlot && props.isExpanded\" :class=\"$style.body\">\n <slot name=\"content\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n </div>\n</template>\n\n<style module>\n@use '../../assets/variables.scss' as *;\n\n.root {\n --background: rgba(255, 255, 255, 0.8);\n --border-color: var(--color-div-grey);\n --head-background: unset;\n --box-shadow: none;\n --box-shadow-active: 0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent);\n\n &:global(.sortable-drag),\n &:global(.sortable-chosen) {\n --head-background: var(--gradient-light-lime);\n --border-color: var(--border-color-focus);\n --box-shadow: var(--box-shadow-active)\n }\n}\n.root {\n display: flex;\n flex-direction: column;\n justify-content: center;\n border-radius: var(--border-radius);\n border: 1px solid var(--border-color);\n background-color: var(--background);\n transition: box-shadow 0.15s;\n box-shadow: var(--box-shadow);;\n overflow: hidden;\n\n &:hover {\n --border-color: var(--border-color-focus);\n }\n\n &.disabled {\n opacity: 0.6;\n filter: grayscale(1);\n }\n\n &.pinned {\n --background: var(--bg-base-light);\n }\n\n &.active {\n --border-color: var(--border-color-focus);\n --head-background: var(--btn-accent-positive-500);\n }\n}\n\n.head {\n position: relative;\n display: flex;\n align-items: center;\n padding: 8px;\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n background: var(--head-background);\n\n &:hover, &.opened {\n --head-background: var(--gradient-light-lime);\n }\n}\n\n.contentChevron {\n display: block;\n width: 16px;\n height: 16px;\n margin-right: 4px;\n transform: rotate(-90deg);\n transition: transform 0.15s;\n\n &.opened {\n transform: rotate(0deg);\n }\n}\n\n.title {\n display: flex;\n flex-direction: row;\n gap: 8px;\n max-width: calc(100% - 50px);\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.body {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 24px;\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n}\n\n.actions {\n position: absolute;\n top: 8px;\n right: 8px;\n display: flex;\n align-items: center;\n background-color: var(--background);\n border-radius: var(--border-radius);\n}\n\n.action {\n width: 24px;\n height: 24px;\n padding: 4px; /* use padding instead of gap on parent, for better accessibility */\n opacity: 0.6;\n border-radius: var(--border-radius);\n transition: all 0.15s;\n\n svg {\n width: 16px;\n height: 16px;\n }\n\n &:hover {\n opacity: 1;\n background-color: var(--bg-elevated-02);\n }\n\n &.activated {\n opacity: 0.8;\n }\n\n &.disable {\n cursor: not-allowed;\n opacity: 0.4;\n }\n}\n\n.clickable {\n cursor: pointer;\n}\n\n.draggable {\n cursor: grab;\n}\n\n.showOnHover {\n opacity: 0;\n transition: opacity 0.15s;\n}\n\n.root:hover .showOnHover {\n opacity: 1;\n}\n</style>\n"],"names":["props","__props","slots","_useSlots","hasContentSlot","computed","emit","__emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAKA,UAAMA,IAAQC,GAeRC,IAAQC,EAGV,GACEC,IAAiBC,EAAS,MAAMH,EAAM,YAAe,MAAS,GAE9DI,IAAOC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"PlElementListItem.vue2.js","sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"sourcesContent":["<script generic=\"T extends unknown = unknown\" lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlIcon24 } from '../PlIcon24';\n\nconst props = defineProps<{\n item: T;\n index: number;\n showDragHandle: boolean;\n isActive: boolean;\n isDraggable: boolean;\n isRemovable: boolean;\n isExpandable: boolean;\n isExpanded: boolean;\n isToggable: boolean;\n isToggled: boolean;\n isPinnable: boolean;\n isPinned: boolean;\n}>();\n\nconst slots = defineSlots<{\n title: (props: { item: T; index: number }) => unknown;\n content?: (props: { item: T; index: number }) => unknown;\n}>();\nconst hasContentSlot = computed(() => slots['content'] !== undefined);\n\nconst emit = defineEmits<{\n (e: 'expand', item: T, index: number): void;\n (e: 'toggle', item: T, index: number): void;\n (e: 'pin', item: T, index: number): void;\n (e: 'remove', item: T, index: number): void;\n}>();\n</script>\n\n<template>\n <div\n :class=\"[$style.root, {\n [$style.active]: props.isActive,\n [$style.pinned]: props.isPinned,\n [$style.disabled]: props.isToggled,\n }]\"\n >\n <div\n :class=\"[$style.head, {\n [$style.clickable]: hasContentSlot,\n }]\"\n @click=\"isExpandable && emit('expand', props.item, props.index)\"\n >\n <div\n v-if=\"props.showDragHandle\"\n :class=\"[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable } ]\"\n :data-draggable=\"props.isDraggable\"\n >\n <PlIcon16 name=\"drag-dots\" />\n </div>\n <PlIcon16 v-if=\"isExpandable\" :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\" name=\"chevron-down\" />\n\n <div :class=\"$style.title\">\n <slot name=\"title\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n\n <div :class=\"[$style.actions, $style.showOnHover]\">\n <div\n v-if=\"props.isToggable\"\n :class=\"[$style.action, $style.clickable, { [$style.disable]: !props.isToggable }]\"\n @click.stop=\"emit('toggle', props.item, props.index)\"\n >\n <PlIcon24 :name=\"props.isToggled === true ? 'view-hide' : 'view-show'\" size=\"16\" />\n </div>\n <div\n v-if=\"props.isPinnable\"\n :class=\"[$style.action, $style.clickable, {\n [$style.disable]: !props.isPinnable,\n [$style.activated]: props.isPinned,\n }]\"\n @click.stop=\"emit('pin', props.item, props.index)\"\n >\n <PlIcon24 name=\"pin\" size=\"16\" />\n </div>\n <div\n v-if=\"props.isRemovable\"\n :class=\"[$style.action, $style.clickable]\"\n @click.stop=\"emit('remove', props.item, props.index)\"\n >\n <PlIcon16 name=\"close\" />\n </div>\n </div>\n </div>\n <div v-if=\"hasContentSlot && props.isExpanded\" :class=\"$style.body\">\n <slot name=\"content\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n </div>\n</template>\n\n<style module>\n@use '../../assets/variables.scss' as *;\n\n.root {\n --background: rgba(255, 255, 255, 0.8);\n --border-color: var(--color-div-grey);\n --head-background: unset;\n --box-shadow: none;\n --box-shadow-active: 0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent);\n\n &:global(.sortable-drag),\n &:global(.sortable-chosen) {\n --head-background: var(--gradient-light-lime);\n --border-color: var(--border-color-focus);\n --box-shadow: var(--box-shadow-active)\n }\n}\n.root {\n display: flex;\n flex-direction: column;\n justify-content: center;\n border-radius: var(--border-radius);\n border: 1px solid var(--border-color);\n background-color: var(--background);\n transition: box-shadow 0.15s;\n box-shadow: var(--box-shadow);;\n overflow: hidden;\n\n &:hover {\n --border-color: var(--border-color-focus);\n }\n\n &.disabled {\n opacity: 0.6;\n filter: grayscale(1);\n }\n\n &.pinned {\n --background: var(--bg-base-light);\n }\n\n &.active {\n --border-color: var(--border-color-focus);\n --head-background: var(--btn-accent-positive-500);\n }\n}\n\n.head {\n position: relative;\n display: flex;\n align-items: center;\n padding: 8px;\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n background: var(--head-background);\n\n &:hover, &.opened {\n --head-background: var(--gradient-light-lime);\n }\n}\n\n.contentChevron {\n display: block;\n width: 16px;\n height: 16px;\n margin-right: 4px;\n transform: rotate(-90deg);\n transition: transform 0.15s;\n\n &.opened {\n transform: rotate(0deg);\n }\n}\n\n.title {\n display: flex;\n flex-direction: row;\n flex: 1 1 0;\n gap: 8px;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.body {\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 24px;\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n}\n\n.actions {\n position: absolute;\n top: 8px;\n right: 8px;\n display: flex;\n align-items: center;\n background-color: var(--background);\n border-radius: var(--border-radius);\n}\n\n.action {\n width: 24px;\n height: 24px;\n padding: 4px; /* use padding instead of gap on parent, for better accessibility */\n opacity: 0.6;\n border-radius: var(--border-radius);\n transition: all 0.15s;\n\n svg {\n width: 16px;\n height: 16px;\n }\n\n &:hover {\n opacity: 1;\n background-color: var(--bg-elevated-02);\n }\n\n &.activated {\n opacity: 0.8;\n }\n\n &.disable {\n cursor: not-allowed;\n opacity: 0.4;\n }\n}\n\n.clickable {\n cursor: pointer;\n}\n\n.draggable {\n cursor: grab;\n}\n\n.showOnHover {\n opacity: 0;\n transition: opacity 0.15s;\n}\n\n.root:hover .showOnHover {\n opacity: 1;\n}\n</style>\n"],"names":["props","__props","slots","_useSlots","hasContentSlot","computed","emit","__emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAKA,UAAMA,IAAQC,GAeRC,IAAQC,EAGV,GACEC,IAAiBC,EAAS,MAAMH,EAAM,YAAe,MAAS,GAE9DI,IAAOC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/components/PlElementList/PlElementListItem.vue3.js CHANGED
@@ -1,39 +1,39 @@
1
- (function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode('@use "../../assets/variables.scss" as *;._root_lt147_4{--background: rgba(255, 255, 255, .8);--border-color: var(--color-div-grey);--head-background: unset;--box-shadow: none;--box-shadow-active: 0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent)}._root_lt147_4.sortable-drag,._root_lt147_4.sortable-chosen{--head-background: var(--gradient-light-lime);--border-color: var(--border-color-focus);--box-shadow: var(--box-shadow-active) }._root_lt147_4{display:flex;flex-direction:column;justify-content:center;border-radius:var(--border-radius);border:1px solid var(--border-color);background-color:var(--background);transition:box-shadow .15s;box-shadow:var(--box-shadow);overflow:hidden}._root_lt147_4:hover{--border-color: var(--border-color-focus)}._root_lt147_4._disabled_lt147_33{opacity:.6;filter:grayscale(1)}._root_lt147_4._pinned_lt147_38{--background: var(--bg-base-light)}._root_lt147_4._active_lt147_42{--border-color: var(--border-color-focus);--head-background: var(--btn-accent-positive-500)}._head_lt147_48{position:relative;display:flex;align-items:center;padding:8px;border-radius:var(--border-radius) var(--border-radius) 0 0;background:var(--head-background)}._head_lt147_48:hover,._head_lt147_48._opened_lt147_56{--head-background: var(--gradient-light-lime)}._contentChevron_lt147_61{display:block;width:16px;height:16px;margin-right:4px;transform:rotate(-90deg);transition:transform .15s}._contentChevron_lt147_61._opened_lt147_56{transform:rotate(0)}._title_lt147_74{display:flex;flex-direction:row;gap:8px;max-width:calc(100% - 50px);overflow:hidden;text-overflow:ellipsis}._body_lt147_83{display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:0 0 var(--border-radius) var(--border-radius)}._actions_lt147_91{position:absolute;top:8px;right:8px;display:flex;align-items:center;background-color:var(--background);border-radius:var(--border-radius)}._action_lt147_91{width:24px;height:24px;padding:4px;opacity:.6;border-radius:var(--border-radius);transition:all .15s}._action_lt147_91 svg{width:16px;height:16px}._action_lt147_91:hover{opacity:1;background-color:var(--bg-elevated-02)}._action_lt147_91._activated_lt147_119{opacity:.8}._action_lt147_91._disable_lt147_33{cursor:not-allowed;opacity:.4}._clickable_lt147_129{cursor:pointer}._draggable_lt147_133{cursor:grab}._showOnHover_lt147_137{opacity:0;transition:opacity .15s}._root_lt147_4:hover ._showOnHover_lt147_137{opacity:1}')),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
2
- const t = "_root_lt147_4", o = "_disabled_lt147_33", _ = "_pinned_lt147_38", e = "_active_lt147_42", n = "_head_lt147_48", c = "_opened_lt147_56", l = "_contentChevron_lt147_61", a = "_title_lt147_74", s = "_body_lt147_83", d = "_actions_lt147_91", i = "_action_lt147_91", b = "_activated_lt147_119", r = "_disable_lt147_33", v = "_clickable_lt147_129", h = "_draggable_lt147_133", p = "_showOnHover_lt147_137", g = {
3
- root: t,
4
- disabled: o,
5
- pinned: _,
6
- active: e,
7
- head: n,
1
+ (function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode('@use "../../assets/variables.scss" as *;._root_1n01w_4{--background: rgba(255, 255, 255, .8);--border-color: var(--color-div-grey);--head-background: unset;--box-shadow: none;--box-shadow-active: 0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent)}._root_1n01w_4.sortable-drag,._root_1n01w_4.sortable-chosen{--head-background: var(--gradient-light-lime);--border-color: var(--border-color-focus);--box-shadow: var(--box-shadow-active) }._root_1n01w_4{display:flex;flex-direction:column;justify-content:center;border-radius:var(--border-radius);border:1px solid var(--border-color);background-color:var(--background);transition:box-shadow .15s;box-shadow:var(--box-shadow);overflow:hidden}._root_1n01w_4:hover{--border-color: var(--border-color-focus)}._root_1n01w_4._disabled_1n01w_33{opacity:.6;filter:grayscale(1)}._root_1n01w_4._pinned_1n01w_38{--background: var(--bg-base-light)}._root_1n01w_4._active_1n01w_42{--border-color: var(--border-color-focus);--head-background: var(--btn-accent-positive-500)}._head_1n01w_48{position:relative;display:flex;align-items:center;padding:8px;border-radius:var(--border-radius) var(--border-radius) 0 0;background:var(--head-background)}._head_1n01w_48:hover,._head_1n01w_48._opened_1n01w_56{--head-background: var(--gradient-light-lime)}._contentChevron_1n01w_61{display:block;width:16px;height:16px;margin-right:4px;transform:rotate(-90deg);transition:transform .15s}._contentChevron_1n01w_61._opened_1n01w_56{transform:rotate(0)}._title_1n01w_74{display:flex;flex-direction:row;flex:1 1 0;gap:8px;overflow:hidden;text-overflow:ellipsis}._body_1n01w_83{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:0 0 var(--border-radius) var(--border-radius)}._actions_1n01w_91{position:absolute;top:8px;right:8px;display:flex;align-items:center;background-color:var(--background);border-radius:var(--border-radius)}._action_1n01w_91{width:24px;height:24px;padding:4px;opacity:.6;border-radius:var(--border-radius);transition:all .15s}._action_1n01w_91 svg{width:16px;height:16px}._action_1n01w_91:hover{opacity:1;background-color:var(--bg-elevated-02)}._action_1n01w_91._activated_1n01w_119{opacity:.8}._action_1n01w_91._disable_1n01w_33{cursor:not-allowed;opacity:.4}._clickable_1n01w_129{cursor:pointer}._draggable_1n01w_133{cursor:grab}._showOnHover_1n01w_137{opacity:0;transition:opacity .15s}._root_1n01w_4:hover ._showOnHover_1n01w_137{opacity:1}')),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
2
+ const n = "_root_1n01w_4", t = "_disabled_1n01w_33", o = "_pinned_1n01w_38", _ = "_active_1n01w_42", e = "_head_1n01w_48", c = "_opened_1n01w_56", a = "_contentChevron_1n01w_61", s = "_title_1n01w_74", d = "_body_1n01w_83", i = "_actions_1n01w_91", l = "_action_1n01w_91", w = "_activated_1n01w_119", b = "_disable_1n01w_33", r = "_clickable_1n01w_129", v = "_draggable_1n01w_133", h = "_showOnHover_1n01w_137", p = {
3
+ root: n,
4
+ disabled: t,
5
+ pinned: o,
6
+ active: _,
7
+ head: e,
8
8
  opened: c,
9
- contentChevron: l,
10
- title: a,
11
- body: s,
12
- actions: d,
13
- action: i,
14
- activated: b,
15
- disable: r,
16
- clickable: v,
17
- draggable: h,
18
- showOnHover: p
9
+ contentChevron: a,
10
+ title: s,
11
+ body: d,
12
+ actions: i,
13
+ action: l,
14
+ activated: w,
15
+ disable: b,
16
+ clickable: r,
17
+ draggable: v,
18
+ showOnHover: h
19
19
  };
20
20
  export {
21
- i as action,
22
- d as actions,
23
- b as activated,
24
- e as active,
25
- s as body,
26
- v as clickable,
27
- l as contentChevron,
28
- g as default,
29
- r as disable,
30
- o as disabled,
31
- h as draggable,
32
- n as head,
21
+ l as action,
22
+ i as actions,
23
+ w as activated,
24
+ _ as active,
25
+ d as body,
26
+ r as clickable,
27
+ a as contentChevron,
28
+ p as default,
29
+ b as disable,
30
+ t as disabled,
31
+ v as draggable,
32
+ e as head,
33
33
  c as opened,
34
- _ as pinned,
35
- t as root,
36
- p as showOnHover,
37
- a as title
34
+ o as pinned,
35
+ n as root,
36
+ h as showOnHover,
37
+ s as title
38
38
  };
39
39
  //# sourceMappingURL=PlElementListItem.vue3.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@milaboratories/uikit",
3
- "version": "2.2.94",
3
+ "version": "2.2.95",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "exports": {
@@ -19,8 +19,8 @@
19
19
  "sortablejs": "^1.15.6",
20
20
  "vue": "^3.5.13",
21
21
  "d3": "^7.9.0",
22
- "@platforma-sdk/model": "^1.37.11",
23
- "@milaboratories/helpers": "^1.6.15"
22
+ "@milaboratories/helpers": "^1.6.15",
23
+ "@platforma-sdk/model": "^1.37.11"
24
24
  },
25
25
  "devDependencies": {
26
26
  "@types/d3": "^7.4.3",
@@ -34,8 +34,8 @@
34
34
  "vue-tsc": "^2.1.10",
35
35
  "yarpm": "^1.2.0",
36
36
  "svgo": "^3.3.2",
37
- "@milaboratories/build-configs": "1.0.4",
38
37
  "@milaboratories/ts-configs": "1.0.4",
38
+ "@milaboratories/build-configs": "1.0.4",
39
39
  "@milaboratories/eslint-config": "^1.0.4"
40
40
  },
41
41
  "scripts": {
package/src/components/PlElementList/PlElementList.vue CHANGED
@@ -8,25 +8,26 @@ import { moveElements, optionalUpdateRef } from './utils.ts';
8
8
  import PlElementListItem from './PlElementListItem.vue';
9
9
 
10
10
  const itemsRef = defineModel<T[]>('items', { required: true });
11
- const draggableSetRef = defineModel<Set<T>>('draggableItems');
12
- const removableSetRef = defineModel<Set<T>>('removableItems');
11
+ const draggableSetRef = defineModel<Set<K>>('draggableItems');
12
+ const removableSetRef = defineModel<Set<K>>('removableItems');
13
13
 
14
- const expandableSetRef = defineModel<Set<T>>('expandableItems');
15
- const expandedSetRef = defineModel<Set<T>>('expandedItems');
14
+ const expandableSetRef = defineModel<Set<K>>('expandableItems');
15
+ const expandedSetRef = defineModel<Set<K>>('expandedItems');
16
16
 
17
- const pinnableSetRef = defineModel<Set<T>>('pinnableItems');
18
- const pinnedSetRef = defineModel<Set<T>>('pinnedItems');
17
+ const pinnableSetRef = defineModel<Set<K>>('pinnableItems');
18
+ const pinnedSetRef = defineModel<Set<K>>('pinnedItems');
19
19
 
20
- const toggableSetRef = defineModel<Set<T>>('toggableItems');
21
- const toggledSetRef = defineModel<Set<T>>('toggledItems');
20
+ const toggableSetRef = defineModel<Set<K>>('toggableItems');
21
+ const toggledSetRef = defineModel<Set<K>>('toggledItems');
22
22
 
23
23
  const props = withDefaults(
24
24
  defineProps<{
25
+ getItemKey: (item: T, index: number) => K;
26
+
25
27
  itemClass?: string | string[] | ((item: T, index: number) => string | string[]);
26
- activeItems?: Set<T>;
28
+ activeItems?: Set<K>;
27
29
 
28
30
  enableDragging?: boolean;
29
- getItemKey?: (item: T) => K;
30
31
  onDragEnd?: (oldIndex: number, newIndex: number) => void | boolean;
31
32
  onSort?: (oldIndex: number, newIndex: number) => void | boolean;
32
33
 
@@ -51,7 +52,6 @@ const props = withDefaults(
51
52
  enableToggling: undefined,
52
53
  enablePinning: undefined,
53
54
 
54
- getItemKey: undefined,
55
55
  onDragEnd: undefined,
56
56
  onSort: undefined,
57
57
  onRemove: undefined,
@@ -71,13 +71,13 @@ const slots = defineSlots<{
71
71
  }>();
72
72
 
73
73
  const dndSortingEnabled = computed((): boolean => {
74
- return props.enableDragging !== false && !isNil(props.getItemKey);
74
+ return props.enableDragging !== false;
75
75
  });
76
76
 
77
77
  const pinnedItemsRef = computed(() => itemsRef.value.filter(isPinned));
78
78
  const hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);
79
79
 
80
- const unpinnedItemsRef = computed(() => itemsRef.value.filter((item) => !isPinned(item)));
80
+ const unpinnedItemsRef = computed(() => itemsRef.value.filter((item, index) => !isPinned(item, index)));
81
81
  const hasUnpinnedItems = computed(() => unpinnedItemsRef.value.length > 0);
82
82
 
83
83
  const domProjectionItemsRef = shallowRef<undefined | T[]>();
@@ -86,11 +86,11 @@ const unpinnedContainerRef = shallowRef<HTMLElement>();
86
86
 
87
87
  // version fix problem with sync between data and rendered values when items have been changed
88
88
  const versionRef = computed<number>((oldVersion) => {
89
- const currentVersion = shallowHash(...itemsRef.value);
89
+ const currentVersion = shallowHash(...itemsRef.value.map(props.getItemKey));
90
90
 
91
91
  if (domProjectionItemsRef.value === undefined) return oldVersion ?? currentVersion;
92
92
 
93
- const lastSortedVersion = shallowHash(...domProjectionItemsRef.value);
93
+ const lastSortedVersion = shallowHash(...domProjectionItemsRef.value.map(props.getItemKey));
94
94
 
95
95
  if (currentVersion === lastSortedVersion) return oldVersion ?? currentVersion;
96
96
 
@@ -137,93 +137,105 @@ function moveItems(oldIndex: number, newIndex: number, afterUpdateDom: boolean)
137
137
  }
138
138
  }
139
139
 
140
- function isActive(item: T): boolean {
141
- return props.activeItems?.has(item) ?? false;
140
+ function isActive(item: T, index: number): boolean {
141
+ const k = props.getItemKey(item, index);
142
+ return props.activeItems?.has(k) ?? false;
142
143
  }
143
144
 
144
- function isDraggable(item: T): boolean {
145
+ function isDraggable(item: T, index: number): boolean {
146
+ const k = props.getItemKey(item, index);
145
147
  if (props.enableDragging === false) return false;
146
- return (draggableSetRef.value?.has(item) ?? true);
148
+ return (draggableSetRef.value?.has(k) ?? true);
147
149
  }
148
150
 
149
- function isToggable(item: T): boolean {
151
+ function isToggable(item: T, index: number): boolean {
152
+ const k = props.getItemKey(item, index);
150
153
  if (props.enableToggling === false) return false;
151
- return !isNil(toggledSetRef.value) && (toggableSetRef.value?.has(item) ?? true);
154
+ return !isNil(toggledSetRef.value) && (toggableSetRef.value?.has(k) ?? true);
152
155
  }
153
156
 
154
- function isToggled(item: T): boolean {
155
- return toggledSetRef.value?.has(item) ?? false;
157
+ function isToggled(item: T, index: number): boolean {
158
+ const k = props.getItemKey(item, index);
159
+ return toggledSetRef.value?.has(k) ?? false;
156
160
  }
157
161
 
158
- function isPinnable(item: T): boolean {
162
+ function isPinnable(item: T, index: number): boolean {
163
+ const k = props.getItemKey(item, index);
159
164
  if (props.enablePinning === false) return false;
160
- return !isNil(pinnedSetRef.value) && (pinnableSetRef.value?.has(item) ?? true);
165
+ return !isNil(pinnedSetRef.value) && (pinnableSetRef.value?.has(k) ?? true);
161
166
  }
162
167
 
163
- function isPinned(item: T): boolean {
164
- return pinnedSetRef.value?.has(item) ?? false;
168
+ function isPinned(item: T, index: number): boolean {
169
+ const k = props.getItemKey(item, index);
170
+ return pinnedSetRef.value?.has(k) ?? false;
165
171
  }
166
172
 
167
- function isExpandable(item: T): boolean {
173
+ function isExpandable(item: T, index: number): boolean {
174
+ const k = props.getItemKey(item, index);
168
175
  if (props.enableExpanding === false) return false;
169
- return !isNil(expandedSetRef.value) && (expandableSetRef.value?.has(item) ?? true);
176
+ return !isNil(expandedSetRef.value) && (expandableSetRef.value?.has(k) ?? true);
170
177
  }
171
178
 
172
- function isExpanded(item: T): boolean {
173
- return expandedSetRef.value?.has(item) ?? false;
179
+ function isExpanded(item: T, index: number): boolean {
180
+ const k = props.getItemKey(item, index);
181
+ return expandedSetRef.value?.has(k) ?? false;
174
182
  }
175
183
 
176
- function isRemovable(item: T): boolean {
184
+ function isRemovable(item: T, index: number): boolean {
185
+ const k = props.getItemKey(item, index);
177
186
  if (props.enableRemoving === false) return false;
178
- if (removableSetRef.value?.has(item) === false) return false;
187
+ if (removableSetRef.value?.has(k) === false) return false;
179
188
  return props.enableRemoving === true || typeof props.onRemove === 'function';
180
189
  }
181
190
 
182
191
  function handleExpand(item: T, index: number) {
183
192
  if (props.onExpand?.(item, index) === false || isNil(expandedSetRef.value)) return;
184
-
193
+ const k = props.getItemKey(item, index);
185
194
  const expanded = expandedSetRef.value;
186
- if (expanded.has(item)) expanded.delete(item);
187
- else expanded.add(item);
195
+ if (expanded.has(k)) expanded.delete(k);
196
+ else expanded.add(k);
188
197
  optionalUpdateRef(expandedSetRef);
189
198
  }
190
199
 
191
200
  function handleToggle(item: T, index: number) {
192
201
  if (props.onToggle?.(item, index) === false || isNil(toggledSetRef.value)) return;
193
-
202
+ const k = props.getItemKey(item, index);
194
203
  const toggled = toggledSetRef.value;
195
- if (toggled.has(item)) toggled.delete(item);
196
- else toggled.add(item);
204
+ if (toggled.has(k)) toggled.delete(k);
205
+ else toggled.add(k);
197
206
  optionalUpdateRef(toggledSetRef);
198
207
  }
199
208
 
200
- function handlePin(item: T, oldIndex: number) {
201
- if (oldIndex === -1) {
209
+ function handlePin(item: T, index: number) {
210
+ if (index === -1) {
202
211
  throw new Error('Pinnable item not found');
203
212
  }
204
213
 
205
- if (props.onPin?.(item, oldIndex) === false || isNil(pinnedSetRef.value)) return;
214
+ if (props.onPin?.(item, index) === false || isNil(pinnedSetRef.value)) return;
206
215
 
216
+ const k = props.getItemKey(item, index);
207
217
  const pinned = pinnedSetRef.value;
208
- const alreadyPinned = pinned.has(item);
209
- if (alreadyPinned) pinned.delete(item);
210
- else pinned.add(item);
218
+ const alreadyPinned = pinned.has(k);
219
+ if (alreadyPinned) pinned.delete(k);
220
+ else pinned.add(k);
211
221
  optionalUpdateRef(pinnedSetRef);
212
- moveItems(oldIndex, pinned.size + (alreadyPinned ? 0 : -1), false);
222
+ moveItems(index, pinned.size + (alreadyPinned ? 0 : -1), false);
213
223
  }
214
224
 
215
225
  function handleRemove(item: T, index: number) {
216
226
  if (props.onRemove?.(item, index) !== false) {
227
+ const k = props.getItemKey(item, index);
228
+
217
229
  itemsRef.value.splice(index, 1);
218
230
  optionalUpdateRef(itemsRef);
219
231
 
220
- if (pinnedSetRef.value?.has(item)) {
221
- pinnedSetRef.value.delete(item);
232
+ if (pinnedSetRef.value?.has(k)) {
233
+ pinnedSetRef.value.delete(k);
222
234
  optionalUpdateRef(pinnedSetRef);
223
235
  }
224
236
 
225
- if (toggledSetRef.value?.has(item)) {
226
- toggledSetRef.value.delete(item);
237
+ if (toggledSetRef.value?.has(k)) {
238
+ toggledSetRef.value.delete(k);
227
239
  optionalUpdateRef(toggledSetRef);
228
240
  }
229
241
  }
@@ -231,8 +243,7 @@ function handleRemove(item: T, index: number) {
231
243
 
232
244
  // version fix problem with sync between data and rendered values
233
245
  const getKey = (item: T, index: number) => {
234
- if (isNil(props.getItemKey)) return `${versionRef.value}-${index}`;
235
- return `${versionRef.value}-${props.getItemKey(item)}`;
246
+ return `${versionRef.value}-${props.getItemKey(item, index)}`;
236
247
  };
237
248
  const pinnedKeysRef = computed(() => pinnedItemsRef.value.map(getKey));
238
249
  const unpinnedKeysRef = computed(() => unpinnedItemsRef.value.map(getKey));
@@ -256,15 +267,15 @@ const getItemClass = (item: T, index: number): null | string | string[] => {
256
267
  :index="pinnedIndex"
257
268
  :item="pinnedItem"
258
269
  :showDragHandle="dndSortingEnabled"
259
- :isActive="isActive(pinnedItem)"
260
- :isDraggable="isDraggable(pinnedItem)"
261
- :isRemovable="isRemovable(pinnedItem)"
262
- :isToggable="isToggable(pinnedItem)"
263
- :isToggled="isToggled(pinnedItem)"
264
- :isPinnable="isPinnable(pinnedItem)"
265
- :isPinned="isPinned(pinnedItem)"
266
- :isExpandable="isExpandable(pinnedItem)"
267
- :isExpanded="isExpanded(pinnedItem)"
270
+ :isActive="isActive(pinnedItem, pinnedIndex)"
271
+ :isDraggable="isDraggable(pinnedItem, pinnedIndex)"
272
+ :isRemovable="isRemovable(pinnedItem, pinnedIndex)"
273
+ :isToggable="isToggable(pinnedItem, pinnedIndex)"
274
+ :isToggled="isToggled(pinnedItem, pinnedIndex)"
275
+ :isPinnable="isPinnable(pinnedItem, pinnedIndex)"
276
+ :isPinned="isPinned(pinnedItem, pinnedIndex)"
277
+ :isExpandable="isExpandable(pinnedItem, pinnedIndex)"
278
+ :isExpanded="isExpanded(pinnedItem, pinnedIndex)"
268
279
 
269
280
  @click="emits('itemClick', pinnedItem)"
270
281
  @remove="handleRemove"
@@ -288,15 +299,15 @@ const getItemClass = (item: T, index: number): null | string | string[] => {
288
299
  :index="unpinnedIndex + (pinnedSetRef?.size ?? 0)"
289
300
  :item="unpinnedItem"
290
301
  :showDragHandle="dndSortingEnabled"
291
- :isActive="isActive(unpinnedItem)"
292
- :isDraggable="isDraggable(unpinnedItem)"
293
- :isRemovable="isRemovable(unpinnedItem)"
294
- :isToggable="isToggable(unpinnedItem)"
295
- :isToggled="isToggled(unpinnedItem)"
296
- :isPinnable="isPinnable(unpinnedItem)"
297
- :isPinned="isPinned(unpinnedItem)"
298
- :isExpandable="isExpandable(unpinnedItem)"
299
- :isExpanded="isExpanded(unpinnedItem)"
302
+ :isActive="isActive(unpinnedItem, unpinnedIndex)"
303
+ :isDraggable="isDraggable(unpinnedItem, unpinnedIndex)"
304
+ :isRemovable="isRemovable(unpinnedItem, unpinnedIndex)"
305
+ :isToggable="isToggable(unpinnedItem, unpinnedIndex)"
306
+ :isToggled="isToggled(unpinnedItem, unpinnedIndex)"
307
+ :isPinnable="isPinnable(unpinnedItem, unpinnedIndex)"
308
+ :isPinned="isPinned(unpinnedItem, unpinnedIndex)"
309
+ :isExpandable="isExpandable(unpinnedItem, unpinnedIndex)"
310
+ :isExpanded="isExpanded(unpinnedItem, unpinnedIndex)"
300
311
 
301
312
  @click="emits('itemClick', unpinnedItem)"
302
313
  @remove="handleRemove"
package/src/components/PlElementList/PlElementListItem.vue CHANGED
@@ -168,8 +168,8 @@ const emit = defineEmits<{
168
168
  .title {
169
169
  display: flex;
170
170
  flex-direction: row;
171
+ flex: 1 1 0;
171
172
  gap: 8px;
172
- max-width: calc(100% - 50px);
173
173
  overflow: hidden;
174
174
  text-overflow: ellipsis;
175
175
  }
@@ -177,7 +177,7 @@ const emit = defineEmits<{
177
177
  .body {
178
178
  display: flex;
179
179
  flex-direction: column;
180
- gap: 8px;
180
+ gap: 12px;
181
181
  padding: 24px;
182
182
  border-radius: 0 0 var(--border-radius) var(--border-radius);
183
183
  }