@milaboratories/uikit 2.15.24 → 2.15.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +12 -12
- package/.turbo/turbo-formatter$colon$check.log +2 -2
- package/.turbo/turbo-linter$colon$check.log +2 -2
- package/.turbo/turbo-types$colon$check.log +1 -1
- package/CHANGELOG.md +6 -0
- package/dist/components/PlElementList/PlElementListItem.js.map +1 -1
- package/dist/components/PlElementList/PlElementListItem.style.js +17 -16
- package/dist/components/PlElementList/PlElementListItem.style.js.map +1 -1
- package/dist/components/PlElementList/PlElementListItem.vue.css +1 -1
- package/dist/components/PlElementList/PlElementListItem.vue.d.ts.map +1 -1
- package/dist/components/PlElementList/PlElementListItem.vue2.js +6 -4
- package/dist/components/PlElementList/PlElementListItem.vue2.js.map +1 -1
- package/package.json +4 -4
- package/src/components/PlElementList/PlElementListItem.vue +21 -11
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.15.
|
|
3
|
+
> @milaboratories/uikit@2.15.25 build /home/runner/_work/platforma/platforma/lib/ui/uikit
|
|
4
4
|
> ts-builder build --target browser-lib --build-config ./build.browser-lib.config.js
|
|
5
5
|
|
|
6
6
|
Building browser-lib project...
|
|
@@ -19,12 +19,12 @@ Using custom config: ./build.browser-lib.config.js
|
|
|
19
19
|
1 |
|
|
20
20
|
2 | @use "../../assets/variables.scss" as *;
|
|
21
21
|
| ^
|
|
22
|
-
3 | .
|
|
22
|
+
3 | ._root_14opm_4 {
|
|
23
23
|
4 | --background: rgba(255, 255, 255, 0.8);[39m
|
|
24
24
|
rendering chunks...
|
|
25
25
|
|
|
26
26
|
[vite:dts] Start generate declaration files...
|
|
27
|
-
[vite:dts] Declaration files built in
|
|
27
|
+
[vite:dts] Declaration files built in 8300ms.
|
|
28
28
|
|
|
29
29
|
computing gzip size...
|
|
30
30
|
dist/components/PlClipboard/PlClipboard.vue?vue&type=style&index=0&lang.css 0.04 kB │ gzip: 0.06 kB
|
|
@@ -76,9 +76,9 @@ dist/components/PlTabs/pl-tabs.css
|
|
|
76
76
|
dist/components/PlSlideModal/pl-slide-modal.css 1.81 kB │ gzip: 0.70 kB
|
|
77
77
|
dist/components/PlDialogModal/pl-dialog-modal.css 2.00 kB │ gzip: 0.71 kB
|
|
78
78
|
dist/components/PlEditableTitle/pl-editable-title.css 2.10 kB │ gzip: 0.86 kB
|
|
79
|
-
dist/components/PlElementList/PlElementListItem.vue?vue&type=style&index=0&lang.css 2.35 kB │ gzip: 0.84 kB
|
|
80
79
|
dist/components/PlBtnGhost/pl-btn-ghost.css 2.37 kB │ gzip: 0.80 kB
|
|
81
80
|
dist/components/PlBtnDanger/pl-btn-danger.css 2.45 kB │ gzip: 0.83 kB
|
|
81
|
+
dist/components/PlElementList/PlElementListItem.vue?vue&type=style&index=0&lang.css 2.45 kB │ gzip: 0.86 kB
|
|
82
82
|
dist/components/PlBtnAccent/pl-btn-accent.css 2.48 kB │ gzip: 0.83 kB
|
|
83
83
|
dist/components/PlBtnSecondary/pl-btn-secondary.css 2.52 kB │ gzip: 0.83 kB
|
|
84
84
|
dist/components/PlBtnGroup/pl-btn-group.css 2.53 kB │ gzip: 0.81 kB
|
|
@@ -331,7 +331,7 @@ dist/assets/icons/icon-assets-min/24_add.js
|
|
|
331
331
|
dist/assets/icons/icon-assets-min/24_windows-expand.js 0.36 kB │ gzip: 0.26 kB │ map: 0.45 kB
|
|
332
332
|
dist/components/PlChartStackedBar/PlChartStackedBar.js 0.36 kB │ gzip: 0.24 kB │ map: 1.33 kB
|
|
333
333
|
dist/components/PlChartStackedBar/StackedRowCompact.js 0.36 kB │ gzip: 0.24 kB │ map: 1.98 kB
|
|
334
|
-
dist/components/PlElementList/PlElementListItem.js 0.36 kB │ gzip: 0.24 kB │ map: 7.
|
|
334
|
+
dist/components/PlElementList/PlElementListItem.js 0.36 kB │ gzip: 0.24 kB │ map: 7.79 kB
|
|
335
335
|
dist/assets/icons/icon-assets-min/16_caret-up.js 0.36 kB │ gzip: 0.27 kB │ map: 0.43 kB
|
|
336
336
|
dist/assets/icons/icon-assets-min/24_linetype-longdash.js 0.36 kB │ gzip: 0.27 kB │ map: 0.44 kB
|
|
337
337
|
dist/components/PlErrorAlert/PlErrorAlert.vue_vue_type_style_index_0_lang.module.js 0.36 kB │ gzip: 0.25 kB │ map: 0.62 kB
|
|
@@ -565,7 +565,6 @@ dist/assets/icons/icon-assets-min/24_bar.js
|
|
|
565
565
|
dist/assets/icons/icon-assets-min/24_social-twitter-X.js 0.69 kB │ gzip: 0.45 kB │ map: 0.77 kB
|
|
566
566
|
dist/components/PlDropdown/useGroupBy.js 0.69 kB │ gzip: 0.40 kB │ map: 2.07 kB
|
|
567
567
|
dist/assets/icons/icon-assets-min/24_learn.js 0.70 kB │ gzip: 0.43 kB │ map: 0.78 kB
|
|
568
|
-
dist/components/PlElementList/PlElementListItem.vue_vue_type_style_index_0_lang.module.js 0.70 kB │ gzip: 0.36 kB │ map: 1.05 kB
|
|
569
568
|
dist/assets/icons/icon-assets-min/16_help-outline.js 0.70 kB │ gzip: 0.43 kB │ map: 0.82 kB
|
|
570
569
|
dist/assets/icons/icon-assets-min/16_info-outline.js 0.70 kB │ gzip: 0.42 kB │ map: 0.83 kB
|
|
571
570
|
dist/assets/icons/icon-assets-min/24_filter-on.js 0.70 kB │ gzip: 0.45 kB │ map: 0.79 kB
|
|
@@ -585,16 +584,17 @@ dist/assets/icons/icon-assets-min/24_template.js
|
|
|
585
584
|
dist/assets/icons/icon-assets-min/24_slice.js 0.73 kB │ gzip: 0.38 kB │ map: 0.82 kB
|
|
586
585
|
dist/assets/icons/icon-assets-min/24_error-bar.js 0.73 kB │ gzip: 0.36 kB │ map: 0.82 kB
|
|
587
586
|
dist/assets/icons/icon-assets-min/24_server-on.js 0.74 kB │ gzip: 0.42 kB │ map: 0.84 kB
|
|
587
|
+
dist/components/PlElementList/PlElementListItem.vue_vue_type_style_index_0_lang.module.js 0.74 kB │ gzip: 0.37 kB │ map: 1.10 kB
|
|
588
588
|
dist/assets/icons/icon-assets-min/24_folder-parent.js 0.74 kB │ gzip: 0.43 kB │ map: 0.81 kB
|
|
589
589
|
dist/assets/icons/icon-assets-min/24_file-doc-add.js 0.74 kB │ gzip: 0.43 kB │ map: 0.83 kB
|
|
590
590
|
dist/assets/icons/icon-assets-min/24_filter.js 0.74 kB │ gzip: 0.44 kB │ map: 0.83 kB
|
|
591
591
|
dist/assets/icons/icon-assets-min/24_cpu.js 0.74 kB │ gzip: 0.42 kB │ map: 0.82 kB
|
|
592
592
|
[33m[33m[PLUGIN_TIMINGS] Warning:[0m Your build spent significant time in plugins. Here is a breakdown:
|
|
593
593
|
- vite:asset (35%)
|
|
594
|
-
-
|
|
595
|
-
- vite:
|
|
596
|
-
- vite:
|
|
597
|
-
- vite:vue (
|
|
594
|
+
- sourcemaps (20%)
|
|
595
|
+
- vite:dts (10%)
|
|
596
|
+
- vite:css-post (10%)
|
|
597
|
+
- vite:vue (8%)
|
|
598
598
|
See https://rolldown.rs/options/checks#plugintimings for more details.
|
|
599
599
|
[39m
|
|
600
600
|
dist/components/PlChartHistogram/createGridlines.js 0.75 kB │ gzip: 0.42 kB │ map: 2.52 kB
|
|
@@ -774,8 +774,8 @@ dist/components/DataTable/TableComponent.vue_vue_type_script_setup_true_lang.js
|
|
|
774
774
|
dist/components/PlLogView/PlLogView.vue_vue_type_script_setup_true_lang.js 3.69 kB │ gzip: 1.57 kB │ map: 10.66 kB
|
|
775
775
|
dist/composition/usePollingQuery.js 3.83 kB │ gzip: 1.55 kB │ map: 17.23 kB
|
|
776
776
|
dist/composition/useSortable2.js 3.93 kB │ gzip: 1.41 kB │ map: 11.53 kB
|
|
777
|
-
dist/components/PlElementList/PlElementListItem.vue_vue_type_script_setup_true_lang.js 4.19 kB │ gzip: 1.35 kB │ map: 10.08 kB
|
|
778
777
|
dist/components/PlTextField/PlTextField.vue_vue_type_script_setup_true_lang.js 4.23 kB │ gzip: 1.71 kB │ map: 12.12 kB
|
|
778
|
+
dist/components/PlElementList/PlElementListItem.vue_vue_type_script_setup_true_lang.js 4.31 kB │ gzip: 1.36 kB │ map: 10.41 kB
|
|
779
779
|
dist/assets/icons/icon-assets-min/24_heatmap.js 4.50 kB │ gzip: 1.03 kB │ map: 4.65 kB
|
|
780
780
|
dist/components/PlBtnSplit/PlBtnSplit.vue_vue_type_script_setup_true_lang.js 4.61 kB │ gzip: 1.99 kB │ map: 13.49 kB
|
|
781
781
|
dist/components/Slider.vue_vue_type_script_setup_true_lang.js 4.67 kB │ gzip: 1.88 kB │ map: 8.92 kB
|
|
@@ -796,5 +796,5 @@ dist/composition/filters/metadata.js
|
|
|
796
796
|
dist/index.js 12.53 kB │ gzip: 2.96 kB │ map: 21.32 kB
|
|
797
797
|
dist/components/PlSvg/PlSvg.vue_vue_type_script_setup_true_lang.js 39.41 kB │ gzip: 3.40 kB │ map: 8.66 kB
|
|
798
798
|
|
|
799
|
-
[32m✓ built in
|
|
799
|
+
[32m✓ built in 11.19s[39m
|
|
800
800
|
Build completed successfully
|
|
@@ -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.15.
|
|
3
|
+
> @milaboratories/uikit@2.15.25 formatter:check /home/runner/_work/platforma/platforma/lib/ui/uikit
|
|
4
4
|
> ts-builder formatter --check
|
|
5
5
|
|
|
6
6
|
Checking formatting...
|
|
@@ -8,5 +8,5 @@ Checking formatting...
|
|
|
8
8
|
Checking formatting...
|
|
9
9
|
|
|
10
10
|
All matched files use the correct format.
|
|
11
|
-
Finished in
|
|
11
|
+
Finished in 2212ms on 383 files using 16 threads.
|
|
12
12
|
Format check completed successfully
|
|
@@ -1,10 +1,10 @@
|
|
|
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.15.
|
|
3
|
+
> @milaboratories/uikit@2.15.25 linter:check /home/runner/_work/platforma/platforma/lib/ui/uikit
|
|
4
4
|
> ts-builder linter --check
|
|
5
5
|
|
|
6
6
|
Linting project...
|
|
7
7
|
↳ oxlint --config /home/runner/_work/platforma/platforma/lib/ui/uikit/.oxlintrc.json --deny-warnings
|
|
8
8
|
Found 0 warnings and 0 errors.
|
|
9
|
-
Finished in
|
|
9
|
+
Finished in 24ms on 310 files with 108 rules using 16 threads.
|
|
10
10
|
Linting completed successfully
|
|
@@ -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.15.
|
|
3
|
+
> @milaboratories/uikit@2.15.25 types:check /home/runner/_work/platforma/platforma/lib/ui/uikit
|
|
4
4
|
> ts-builder type-check --target browser-lib
|
|
5
5
|
|
|
6
6
|
↳ vue-tsc.js --noEmit --project ./tsconfig.json --customConditions ,
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @milaboratories/uikit
|
|
2
2
|
|
|
3
|
+
## 2.15.25
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- fdca274: PlElementListItem: wrap drag handle and chevron into a single container aligned to the top of the head, so icons stay on the first title line with multiline titles
|
|
8
|
+
|
|
3
9
|
## 2.15.24
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PlElementListItem.js","names":[],"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 titleClass: string | string[] | null;\n contentClass: string | string[] | null;\n afterClass: string | string[] | null;\n beforeClass: string | string[] | null;\n}>();\ndefineOptions({ inheritAttrs: false });\n\nconst slots = defineSlots<{\n title: (props: { item: T; index: number }) => unknown;\n content?: (props: { item: T; index: number }) => unknown;\n after?: (props: { item: T; index: number }) => unknown;\n before?: (props: { item: T; index: number }) => unknown;\n}>();\nconst hasContentSlot = computed(() => slots[\"content\"] !== undefined);\nconst hasAfterSlot = computed(() => slots[\"after\"] !== undefined);\nconst hasBeforeSlot = computed(() => slots[\"before\"] !== undefined);\n\nconst emit = defineEmits<{\n (e: \"click\", item: MouseEvent): void;\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 @click=\"(event) => emit('click', event)\">\n <div v-if=\"hasBeforeSlot\" :class=\"beforeClass\">\n <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n <div\n :class=\"[\n $style.root,\n $attrs.class,\n {\n [$style.active]: props.isActive,\n [$style.pinned]: props.isPinned,\n [$style.opened]: props.isExpanded,\n [$style.disabled]: props.isToggled,\n },\n ]\"\n >\n <div\n :class=\"[\n $style.head,\n titleClass,\n {\n [$style.clickable]: hasContentSlot,\n },\n ]\"\n @click=\"isExpandable && emit('expand', props.item, props.index)\"\n >\n <div\n v-if=\"props.showDragHandle\"\n
|
|
1
|
+
{"version":3,"file":"PlElementListItem.js","names":[],"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 titleClass: string | string[] | null;\n contentClass: string | string[] | null;\n afterClass: string | string[] | null;\n beforeClass: string | string[] | null;\n}>();\ndefineOptions({ inheritAttrs: false });\n\nconst slots = defineSlots<{\n title: (props: { item: T; index: number }) => unknown;\n content?: (props: { item: T; index: number }) => unknown;\n after?: (props: { item: T; index: number }) => unknown;\n before?: (props: { item: T; index: number }) => unknown;\n}>();\nconst hasContentSlot = computed(() => slots[\"content\"] !== undefined);\nconst hasAfterSlot = computed(() => slots[\"after\"] !== undefined);\nconst hasBeforeSlot = computed(() => slots[\"before\"] !== undefined);\n\nconst emit = defineEmits<{\n (e: \"click\", item: MouseEvent): void;\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 @click=\"(event) => emit('click', event)\">\n <div v-if=\"hasBeforeSlot\" :class=\"beforeClass\">\n <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n <div\n :class=\"[\n $style.root,\n $attrs.class,\n {\n [$style.active]: props.isActive,\n [$style.pinned]: props.isPinned,\n [$style.opened]: props.isExpanded,\n [$style.disabled]: props.isToggled,\n },\n ]\"\n >\n <div\n :class=\"[\n $style.head,\n titleClass,\n {\n [$style.clickable]: hasContentSlot,\n },\n ]\"\n @click=\"isExpandable && emit('expand', props.item, props.index)\"\n >\n <div v-if=\"props.showDragHandle || isExpandable\" :class=\"$style.headIcons\">\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\n v-if=\"isExpandable\"\n :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\"\n name=\"chevron-down\"\n />\n </div>\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=\"[\n $style.action,\n $style.clickable,\n {\n [$style.disable]: !props.isPinnable,\n [$style.activated]: props.isPinned,\n },\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\n v-if=\"hasContentSlot && props.isExpanded\"\n :class=\"[$style.body, contentClass, { [$style.disabled]: props.isToggled }]\"\n >\n <slot name=\"content\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n </div>\n <div v-if=\"hasAfterSlot\" :class=\"afterClass\">\n <slot name=\"after\" :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 --head-background: var(--gradient-light-lime);\n }\n\n &.opened {\n --head-background: var(--gradient-light-lime);\n }\n\n &.disabled {\n --icon-color: var(--ic-02);\n --border-color: var(--border-color-div-grey);\n color: var(--txt-03);\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 min-height: 40px;\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n background: var(--head-background);\n}\n\n.headIcons {\n display: flex;\n align-items: center;\n align-self: flex-start;\n height: 24px;\n flex: 0 0 auto;\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}\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 &.disabled {\n pointer-events: none;\n }\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"],"mappings":""}
|
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
import './PlElementListItem.vue.css';var e = {
|
|
2
|
-
root: "
|
|
3
|
-
opened: "
|
|
4
|
-
disabled: "
|
|
5
|
-
pinned: "
|
|
6
|
-
active: "
|
|
7
|
-
head: "
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
2
|
+
root: "_root_14opm_4",
|
|
3
|
+
opened: "_opened_14opm_34",
|
|
4
|
+
disabled: "_disabled_14opm_38",
|
|
5
|
+
pinned: "_pinned_14opm_45",
|
|
6
|
+
active: "_active_14opm_49",
|
|
7
|
+
head: "_head_14opm_55",
|
|
8
|
+
headIcons: "_headIcons_14opm_65",
|
|
9
|
+
contentChevron: "_contentChevron_14opm_73",
|
|
10
|
+
title: "_title_14opm_86",
|
|
11
|
+
body: "_body_14opm_94",
|
|
12
|
+
actions: "_actions_14opm_106",
|
|
13
|
+
action: "_action_14opm_106",
|
|
14
|
+
activated: "_activated_14opm_134",
|
|
15
|
+
disable: "_disable_14opm_38",
|
|
16
|
+
clickable: "_clickable_14opm_144",
|
|
17
|
+
draggable: "_draggable_14opm_148",
|
|
18
|
+
showOnHover: "_showOnHover_14opm_152"
|
|
18
19
|
};
|
|
19
20
|
//#endregion
|
|
20
21
|
export { e as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PlElementListItem.vue_vue_type_style_index_0_lang.module.js","names":[],"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 titleClass: string | string[] | null;\n contentClass: string | string[] | null;\n afterClass: string | string[] | null;\n beforeClass: string | string[] | null;\n}>();\ndefineOptions({ inheritAttrs: false });\n\nconst slots = defineSlots<{\n title: (props: { item: T; index: number }) => unknown;\n content?: (props: { item: T; index: number }) => unknown;\n after?: (props: { item: T; index: number }) => unknown;\n before?: (props: { item: T; index: number }) => unknown;\n}>();\nconst hasContentSlot = computed(() => slots[\"content\"] !== undefined);\nconst hasAfterSlot = computed(() => slots[\"after\"] !== undefined);\nconst hasBeforeSlot = computed(() => slots[\"before\"] !== undefined);\n\nconst emit = defineEmits<{\n (e: \"click\", item: MouseEvent): void;\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 @click=\"(event) => emit('click', event)\">\n <div v-if=\"hasBeforeSlot\" :class=\"beforeClass\">\n <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n <div\n :class=\"[\n $style.root,\n $attrs.class,\n {\n [$style.active]: props.isActive,\n [$style.pinned]: props.isPinned,\n [$style.opened]: props.isExpanded,\n [$style.disabled]: props.isToggled,\n },\n ]\"\n >\n <div\n :class=\"[\n $style.head,\n titleClass,\n {\n [$style.clickable]: hasContentSlot,\n },\n ]\"\n @click=\"isExpandable && emit('expand', props.item, props.index)\"\n >\n <div\n v-if=\"props.showDragHandle\"\n
|
|
1
|
+
{"version":3,"file":"PlElementListItem.vue_vue_type_style_index_0_lang.module.js","names":[],"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 titleClass: string | string[] | null;\n contentClass: string | string[] | null;\n afterClass: string | string[] | null;\n beforeClass: string | string[] | null;\n}>();\ndefineOptions({ inheritAttrs: false });\n\nconst slots = defineSlots<{\n title: (props: { item: T; index: number }) => unknown;\n content?: (props: { item: T; index: number }) => unknown;\n after?: (props: { item: T; index: number }) => unknown;\n before?: (props: { item: T; index: number }) => unknown;\n}>();\nconst hasContentSlot = computed(() => slots[\"content\"] !== undefined);\nconst hasAfterSlot = computed(() => slots[\"after\"] !== undefined);\nconst hasBeforeSlot = computed(() => slots[\"before\"] !== undefined);\n\nconst emit = defineEmits<{\n (e: \"click\", item: MouseEvent): void;\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 @click=\"(event) => emit('click', event)\">\n <div v-if=\"hasBeforeSlot\" :class=\"beforeClass\">\n <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n <div\n :class=\"[\n $style.root,\n $attrs.class,\n {\n [$style.active]: props.isActive,\n [$style.pinned]: props.isPinned,\n [$style.opened]: props.isExpanded,\n [$style.disabled]: props.isToggled,\n },\n ]\"\n >\n <div\n :class=\"[\n $style.head,\n titleClass,\n {\n [$style.clickable]: hasContentSlot,\n },\n ]\"\n @click=\"isExpandable && emit('expand', props.item, props.index)\"\n >\n <div v-if=\"props.showDragHandle || isExpandable\" :class=\"$style.headIcons\">\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\n v-if=\"isExpandable\"\n :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\"\n name=\"chevron-down\"\n />\n </div>\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=\"[\n $style.action,\n $style.clickable,\n {\n [$style.disable]: !props.isPinnable,\n [$style.activated]: props.isPinned,\n },\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\n v-if=\"hasContentSlot && props.isExpanded\"\n :class=\"[$style.body, contentClass, { [$style.disabled]: props.isToggled }]\"\n >\n <slot name=\"content\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n </div>\n <div v-if=\"hasAfterSlot\" :class=\"afterClass\">\n <slot name=\"after\" :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 --head-background: var(--gradient-light-lime);\n }\n\n &.opened {\n --head-background: var(--gradient-light-lime);\n }\n\n &.disabled {\n --icon-color: var(--ic-02);\n --border-color: var(--border-color-div-grey);\n color: var(--txt-03);\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 min-height: 40px;\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n background: var(--head-background);\n}\n\n.headIcons {\n display: flex;\n align-items: center;\n align-self: flex-start;\n height: 24px;\n flex: 0 0 auto;\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}\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 &.disabled {\n pointer-events: none;\n }\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"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@use "../../assets/variables.scss" as *;.
|
|
1
|
+
@use "../../assets/variables.scss" as *;._root_14opm_4{--background:#fffc;--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);&.sortable-drag,&.sortable-chosen{--head-background:var(--gradient-light-lime);--border-color:var(--border-color-focus);--box-shadow:var(--box-shadow-active)}}._root_14opm_4{border-radius:var(--border-radius);border:1px solid var(--border-color);background-color:var(--background);box-shadow:var(--box-shadow);flex-direction:column;justify-content:center;transition:box-shadow .15s;display:flex;overflow:hidden;&:hover{--border-color:var(--border-color-focus);--head-background:var(--gradient-light-lime)}&._opened_14opm_34{--head-background:var(--gradient-light-lime)}&._disabled_14opm_38{--icon-color:var(--ic-02);--border-color:var(--border-color-div-grey);color:var(--txt-03);filter:grayscale()}&._pinned_14opm_45{--background:var(--bg-base-light)}&._active_14opm_49{--border-color:var(--border-color-focus);--head-background:var(--btn-accent-positive-500)}}._head_14opm_55{border-radius:var(--border-radius) var(--border-radius) 0 0;background:var(--head-background);align-items:center;min-height:40px;padding:8px;display:flex;position:relative}._headIcons_14opm_65{flex:none;align-self:flex-start;align-items:center;height:24px;display:flex}._contentChevron_14opm_73{width:16px;height:16px;margin-right:4px;transition:transform .15s;display:block;transform:rotate(-90deg);&._opened_14opm_34{transform:rotate(0)}}._title_14opm_86{flex-direction:row;flex:1 1 0;gap:8px;display:flex;overflow:hidden}._body_14opm_94{border-radius:0 0 var(--border-radius) var(--border-radius);flex-direction:column;gap:12px;padding:24px;display:flex;&._disabled_14opm_38{pointer-events:none}}._actions_14opm_106{background-color:var(--background);border-radius:var(--border-radius);align-items:center;display:flex;position:absolute;top:8px;right:8px}._action_14opm_106{opacity:.6;border-radius:var(--border-radius);width:24px;height:24px;padding:4px;transition:all .15s;& svg{width:16px;height:16px}&:hover{opacity:1;background-color:var(--bg-elevated-02)}&._activated_14opm_134{opacity:.8}&._disable_14opm_38{cursor:not-allowed;opacity:.4}}._clickable_14opm_144{cursor:pointer}._draggable_14opm_148{cursor:grab}._showOnHover_14opm_152{opacity:0;transition:opacity .15s}._root_14opm_4:hover ._showOnHover_14opm_152{opacity:1}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PlElementListItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PlElementListItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"names":[],"mappings":"yBA4SiB,CAAC,SAAS,OAAO,GAAG,OAAO,EAC3C,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,eAAe,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EACjE;WA4PO,mBAAmB,CAAC;;;;;;;cA1PpB,CAAC;eACA,MAAM;wBACG,OAAO;kBACb,OAAO;qBACJ,OAAO;qBACP,OAAO;sBACN,OAAO;oBACT,OAAO;oBACP,OAAO;mBACR,OAAO;oBACN,OAAO;kBACT,OAAO;oBACL,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;sBACtB,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;oBAC1B,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;qBACvB,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;mBA2OuD,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;eAvOF,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;kBAC3C,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;gBAChD,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;iBAC7C,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;;eAHhD,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;kBAC3C,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;gBAChD,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;iBAC7C,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;;;YAOnD,OAAO,QAAQ,UAAU,GAAG,IAAI;YAChC,QAAQ,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;YACvC,QAAQ,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;YACvC,KAAK,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;YACpC,QAAQ,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;;EA6NzC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAvQzE,wBAuQ4E;AA4B5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
|
|
@@ -59,7 +59,10 @@ var h = ["data-draggable"], g = /* @__PURE__ */ c({
|
|
|
59
59
|
]),
|
|
60
60
|
onClick: p[3] ||= (e) => c.isExpandable && S("expand", _.item, _.index)
|
|
61
61
|
}, [
|
|
62
|
-
_.showDragHandle ? (u(), a("div", {
|
|
62
|
+
_.showDragHandle || c.isExpandable ? (u(), a("div", {
|
|
63
|
+
key: 0,
|
|
64
|
+
class: l(n.$style.headIcons)
|
|
65
|
+
}, [_.showDragHandle ? (u(), a("div", {
|
|
63
66
|
key: 0,
|
|
64
67
|
class: l([
|
|
65
68
|
n.$style.action,
|
|
@@ -67,12 +70,11 @@ var h = ["data-draggable"], g = /* @__PURE__ */ c({
|
|
|
67
70
|
{ [n.$style.disable]: !_.isDraggable }
|
|
68
71
|
]),
|
|
69
72
|
"data-draggable": _.isDraggable
|
|
70
|
-
}, [s(f(t), { name: "drag-dots" })], 10, h)) : i("", !0),
|
|
71
|
-
c.isExpandable ? (u(), r(f(t), {
|
|
73
|
+
}, [s(f(t), { name: "drag-dots" })], 10, h)) : i("", !0), c.isExpandable ? (u(), r(f(t), {
|
|
72
74
|
key: 1,
|
|
73
75
|
class: l([n.$style.contentChevron, { [n.$style.opened]: _.isExpanded }]),
|
|
74
76
|
name: "chevron-down"
|
|
75
|
-
}, null, 8, ["class"])) : i("", !0),
|
|
77
|
+
}, null, 8, ["class"])) : i("", !0)], 2)) : i("", !0),
|
|
76
78
|
o("div", { class: l(n.$style.title) }, [d(n.$slots, "title", {
|
|
77
79
|
item: _.item,
|
|
78
80
|
index: _.index
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PlElementListItem.vue_vue_type_script_setup_true_lang.js","names":["$style","$attrs"],"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 titleClass: string | string[] | null;\n contentClass: string | string[] | null;\n afterClass: string | string[] | null;\n beforeClass: string | string[] | null;\n}>();\ndefineOptions({ inheritAttrs: false });\n\nconst slots = defineSlots<{\n title: (props: { item: T; index: number }) => unknown;\n content?: (props: { item: T; index: number }) => unknown;\n after?: (props: { item: T; index: number }) => unknown;\n before?: (props: { item: T; index: number }) => unknown;\n}>();\nconst hasContentSlot = computed(() => slots[\"content\"] !== undefined);\nconst hasAfterSlot = computed(() => slots[\"after\"] !== undefined);\nconst hasBeforeSlot = computed(() => slots[\"before\"] !== undefined);\n\nconst emit = defineEmits<{\n (e: \"click\", item: MouseEvent): void;\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 @click=\"(event) => emit('click', event)\">\n <div v-if=\"hasBeforeSlot\" :class=\"beforeClass\">\n <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n <div\n :class=\"[\n $style.root,\n $attrs.class,\n {\n [$style.active]: props.isActive,\n [$style.pinned]: props.isPinned,\n [$style.opened]: props.isExpanded,\n [$style.disabled]: props.isToggled,\n },\n ]\"\n >\n <div\n :class=\"[\n $style.head,\n titleClass,\n {\n [$style.clickable]: hasContentSlot,\n },\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\n v-if=\"isExpandable\"\n :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\"\n name=\"chevron-down\"\n />\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=\"[\n $style.action,\n $style.clickable,\n {\n [$style.disable]: !props.isPinnable,\n [$style.activated]: props.isPinned,\n },\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\n v-if=\"hasContentSlot && props.isExpanded\"\n :class=\"[$style.body, contentClass, { [$style.disabled]: props.isToggled }]\"\n >\n <slot name=\"content\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n </div>\n <div v-if=\"hasAfterSlot\" :class=\"afterClass\">\n <slot name=\"after\" :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 --head-background: var(--gradient-light-lime);\n }\n\n &.opened {\n --head-background: var(--gradient-light-lime);\n }\n\n &.disabled {\n --icon-color: var(--ic-02);\n --border-color: var(--border-color-div-grey);\n color: var(--txt-03);\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 min-height: 40px;\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n background: var(--head-background);\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}\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 &.disabled {\n pointer-events: none;\n }\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"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PlElementListItem.vue_vue_type_script_setup_true_lang.js","names":["$style","$attrs"],"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 titleClass: string | string[] | null;\n contentClass: string | string[] | null;\n afterClass: string | string[] | null;\n beforeClass: string | string[] | null;\n}>();\ndefineOptions({ inheritAttrs: false });\n\nconst slots = defineSlots<{\n title: (props: { item: T; index: number }) => unknown;\n content?: (props: { item: T; index: number }) => unknown;\n after?: (props: { item: T; index: number }) => unknown;\n before?: (props: { item: T; index: number }) => unknown;\n}>();\nconst hasContentSlot = computed(() => slots[\"content\"] !== undefined);\nconst hasAfterSlot = computed(() => slots[\"after\"] !== undefined);\nconst hasBeforeSlot = computed(() => slots[\"before\"] !== undefined);\n\nconst emit = defineEmits<{\n (e: \"click\", item: MouseEvent): void;\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 @click=\"(event) => emit('click', event)\">\n <div v-if=\"hasBeforeSlot\" :class=\"beforeClass\">\n <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n <div\n :class=\"[\n $style.root,\n $attrs.class,\n {\n [$style.active]: props.isActive,\n [$style.pinned]: props.isPinned,\n [$style.opened]: props.isExpanded,\n [$style.disabled]: props.isToggled,\n },\n ]\"\n >\n <div\n :class=\"[\n $style.head,\n titleClass,\n {\n [$style.clickable]: hasContentSlot,\n },\n ]\"\n @click=\"isExpandable && emit('expand', props.item, props.index)\"\n >\n <div v-if=\"props.showDragHandle || isExpandable\" :class=\"$style.headIcons\">\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\n v-if=\"isExpandable\"\n :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\"\n name=\"chevron-down\"\n />\n </div>\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=\"[\n $style.action,\n $style.clickable,\n {\n [$style.disable]: !props.isPinnable,\n [$style.activated]: props.isPinned,\n },\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\n v-if=\"hasContentSlot && props.isExpanded\"\n :class=\"[$style.body, contentClass, { [$style.disabled]: props.isToggled }]\"\n >\n <slot name=\"content\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n </div>\n <div v-if=\"hasAfterSlot\" :class=\"afterClass\">\n <slot name=\"after\" :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 --head-background: var(--gradient-light-lime);\n }\n\n &.opened {\n --head-background: var(--gradient-light-lime);\n }\n\n &.disabled {\n --icon-color: var(--ic-02);\n --border-color: var(--border-color-div-grey);\n color: var(--txt-03);\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 min-height: 40px;\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n background: var(--head-background);\n}\n\n.headIcons {\n display: flex;\n align-items: center;\n align-self: flex-start;\n height: 24px;\n flex: 0 0 auto;\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}\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 &.disabled {\n pointer-events: none;\n }\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"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@milaboratories/uikit",
|
|
3
|
-
"version": "2.15.
|
|
3
|
+
"version": "2.15.25",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"exports": {
|
|
@@ -31,8 +31,8 @@
|
|
|
31
31
|
"resize-observer-polyfill": "^1.5.1",
|
|
32
32
|
"sortablejs": "^1.15.6",
|
|
33
33
|
"vue": "3.5.24",
|
|
34
|
-
"@
|
|
35
|
-
"@
|
|
34
|
+
"@milaboratories/helpers": "1.14.5",
|
|
35
|
+
"@platforma-sdk/model": "1.82.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@vitest/coverage-istanbul": "^4.1.3",
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
"svgo": "^3.3.2",
|
|
41
41
|
"typescript": "~5.9.3",
|
|
42
42
|
"vitest": "^4.1.3",
|
|
43
|
-
"@milaboratories/build-configs": "2.0.0",
|
|
44
43
|
"@milaboratories/ts-builder": "1.7.0",
|
|
44
|
+
"@milaboratories/build-configs": "2.0.0",
|
|
45
45
|
"@milaboratories/ts-configs": "1.4.0"
|
|
46
46
|
},
|
|
47
47
|
"scripts": {
|
|
@@ -69,18 +69,20 @@ const emit = defineEmits<{
|
|
|
69
69
|
]"
|
|
70
70
|
@click="isExpandable && emit('expand', props.item, props.index)"
|
|
71
71
|
>
|
|
72
|
-
<div
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
72
|
+
<div v-if="props.showDragHandle || isExpandable" :class="$style.headIcons">
|
|
73
|
+
<div
|
|
74
|
+
v-if="props.showDragHandle"
|
|
75
|
+
:class="[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable }]"
|
|
76
|
+
:data-draggable="props.isDraggable"
|
|
77
|
+
>
|
|
78
|
+
<PlIcon16 name="drag-dots" />
|
|
79
|
+
</div>
|
|
80
|
+
<PlIcon16
|
|
81
|
+
v-if="isExpandable"
|
|
82
|
+
:class="[$style.contentChevron, { [$style.opened]: props.isExpanded }]"
|
|
83
|
+
name="chevron-down"
|
|
84
|
+
/>
|
|
78
85
|
</div>
|
|
79
|
-
<PlIcon16
|
|
80
|
-
v-if="isExpandable"
|
|
81
|
-
:class="[$style.contentChevron, { [$style.opened]: props.isExpanded }]"
|
|
82
|
-
name="chevron-down"
|
|
83
|
-
/>
|
|
84
86
|
|
|
85
87
|
<div :class="$style.title">
|
|
86
88
|
<slot name="title" :item="props.item" :index="props.index" />
|
|
@@ -194,6 +196,14 @@ const emit = defineEmits<{
|
|
|
194
196
|
background: var(--head-background);
|
|
195
197
|
}
|
|
196
198
|
|
|
199
|
+
.headIcons {
|
|
200
|
+
display: flex;
|
|
201
|
+
align-items: center;
|
|
202
|
+
align-self: flex-start;
|
|
203
|
+
height: 24px;
|
|
204
|
+
flex: 0 0 auto;
|
|
205
|
+
}
|
|
206
|
+
|
|
197
207
|
.contentChevron {
|
|
198
208
|
display: block;
|
|
199
209
|
width: 16px;
|