design-system-next 2.15.6 → 2.16.2
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/dist/design-system-next.es.js +7804 -7415
- package/dist/design-system-next.es.js.gz +0 -0
- package/dist/design-system-next.umd.js +13 -13
- package/dist/design-system-next.umd.js.gz +0 -0
- package/dist/main.css +1 -1
- package/dist/main.css.gz +0 -0
- package/dist/package.json.d.ts +1 -1
- package/package.json +1 -1
- package/src/App.vue +619 -604
- package/src/assets/styles/tailwind.css +27 -6
- package/src/components/attribute-filter/attribute-filter.ts +134 -0
- package/src/components/attribute-filter/attribute-filter.vue +141 -0
- package/src/components/attribute-filter/use-attribute-filter.ts +125 -0
- package/src/components/card/card.ts +12 -0
- package/src/components/card/card.vue +1 -1
- package/src/components/card/use-card.ts +33 -12
- package/src/components/dropdown/dropdown.ts +1 -6
- package/src/components/dropdown/dropdown.vue +51 -41
- package/src/components/list/list.ts +0 -4
- package/src/components/select/select-ladderized/select-ladderized.vue +10 -7
- package/src/components/select/select-ladderized/use-select-ladderized.ts +2 -0
- package/src/components/select/select-multiple/select-multiple.vue +20 -10
- package/src/components/select/select-multiple/use-select-multiple.ts +3 -1
- package/src/components/select/select.vue +10 -7
- package/src/components/select/use-select.ts +4 -2
- package/src/components/sidenav/use-sidenav.ts +6 -1
|
@@ -30,47 +30,57 @@
|
|
|
30
30
|
></div>
|
|
31
31
|
|
|
32
32
|
<template #popper>
|
|
33
|
-
<
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
>
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
:
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
33
|
+
<template v-if="$slots.popper">
|
|
34
|
+
<div
|
|
35
|
+
class="spr-overflow-y-auto spr-overflow-x-hidden spr-p-2"
|
|
36
|
+
:style="{
|
|
37
|
+
width: props.popperInnerWidth,
|
|
38
|
+
}"
|
|
39
|
+
>
|
|
40
|
+
<slot name="popper" />
|
|
41
|
+
</div>
|
|
42
|
+
</template>
|
|
43
|
+
<template v-else>
|
|
44
|
+
<div
|
|
45
|
+
ref="dropdownRef"
|
|
46
|
+
:class="[
|
|
47
|
+
'spr-grid spr-max-h-[300px] spr-gap-0.5 spr-overflow-y-auto spr-overflow-x-hidden',
|
|
48
|
+
!props.ladderized || isLadderizedSearch,
|
|
49
|
+
]"
|
|
50
|
+
:style="{
|
|
51
|
+
width: props.popperInnerWidth,
|
|
52
|
+
}"
|
|
53
|
+
>
|
|
54
|
+
<template v-if="dropdownMenuList.length > 0">
|
|
55
|
+
<spr-list
|
|
56
|
+
v-if="!props.ladderized || isLadderizedSearch"
|
|
57
|
+
v-model="selectedListItems"
|
|
58
|
+
:menu-list="dropdownMenuList"
|
|
59
|
+
:searchable-menu="props.searchableMenu"
|
|
60
|
+
:group-items-by="props.groupItemsBy"
|
|
61
|
+
:multi-select="props.multiSelect"
|
|
62
|
+
:pre-selected-items="dropdownValue"
|
|
63
|
+
:no-check="props.noCheckInList"
|
|
64
|
+
:lozenge="props.lozenge"
|
|
65
|
+
@update:model-value="handleSelectedItem"
|
|
66
|
+
/>
|
|
67
|
+
<spr-ladderized-list
|
|
68
|
+
v-else
|
|
69
|
+
v-model="dropdownValue"
|
|
70
|
+
:ladderized="props.ladderized"
|
|
71
|
+
:menu-list="dropdownMenuList"
|
|
72
|
+
:searchable-menu="props.searchableMenu"
|
|
73
|
+
:remove-current-level-in-back-label="removeCurrentLevelInBackLabel"
|
|
74
|
+
@update:model-value="handleSelectedLadderizedItem"
|
|
75
|
+
/>
|
|
76
|
+
</template>
|
|
77
|
+
<template v-else>
|
|
78
|
+
<div class="spr-flex spr-items-center spr-justify-center spr-p-2 spr-text-center">
|
|
79
|
+
<span class="spr-body-sm-regular spr-m-0">No results found</span>
|
|
80
|
+
</div>
|
|
81
|
+
</template>
|
|
82
|
+
</div>
|
|
83
|
+
</template>
|
|
74
84
|
</template>
|
|
75
85
|
</Menu>
|
|
76
86
|
</template>
|
|
@@ -42,13 +42,16 @@
|
|
|
42
42
|
:error="props.error"
|
|
43
43
|
>
|
|
44
44
|
<template #icon>
|
|
45
|
-
<div
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
45
|
+
<div
|
|
46
|
+
:class="[
|
|
47
|
+
'spr-flex spr-items-center spr-gap-1',
|
|
48
|
+
{
|
|
49
|
+
'spr-cursor-pointer': !props.disabled,
|
|
50
|
+
'spr-cursor-not-allowed': props.disabled,
|
|
51
|
+
},
|
|
52
|
+
]"
|
|
53
|
+
>
|
|
54
|
+
<Icon v-if="props.clearable && inputText" icon="ph:x" @click.stop="handleClear" />
|
|
52
55
|
<Icon icon="ph:caret-down" />
|
|
53
56
|
</div>
|
|
54
57
|
</template>
|
|
@@ -48,12 +48,19 @@
|
|
|
48
48
|
</template>
|
|
49
49
|
</div>
|
|
50
50
|
<div :class="multiSelectClasses.chippedIconClasses">
|
|
51
|
-
<div
|
|
51
|
+
<div
|
|
52
|
+
:class="[
|
|
53
|
+
'spr-flex spr-items-center spr-gap-1',
|
|
54
|
+
{
|
|
55
|
+
'spr-cursor-pointer': !props.disabled,
|
|
56
|
+
'spr-cursor-not-allowed': props.disabled,
|
|
57
|
+
},
|
|
58
|
+
]"
|
|
59
|
+
>
|
|
52
60
|
<Icon
|
|
53
61
|
v-if="props.clearable && inputText"
|
|
54
|
-
class="spr-cursor-pointer"
|
|
55
62
|
icon="ph:x"
|
|
56
|
-
@click.stop="handleClear"
|
|
63
|
+
@click.stop="!props.disabled ? handleClear : null"
|
|
57
64
|
/>
|
|
58
65
|
<Icon icon="ph:caret-down" />
|
|
59
66
|
</div>
|
|
@@ -91,13 +98,16 @@
|
|
|
91
98
|
:error="props.error"
|
|
92
99
|
>
|
|
93
100
|
<template #icon>
|
|
94
|
-
<div
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
+
<div
|
|
102
|
+
:class="[
|
|
103
|
+
'spr-flex spr-items-center spr-gap-1',
|
|
104
|
+
{
|
|
105
|
+
'spr-cursor-pointer': !props.disabled,
|
|
106
|
+
'spr-cursor-not-allowed': props.disabled,
|
|
107
|
+
},
|
|
108
|
+
]"
|
|
109
|
+
>
|
|
110
|
+
<Icon v-if="props.clearable && inputText" icon="ph:x" @click.stop="handleClear" />
|
|
101
111
|
<Icon icon="ph:caret-down" />
|
|
102
112
|
</div>
|
|
103
113
|
</template>
|
|
@@ -316,11 +316,13 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
|
|
|
316
316
|
* Clears the selection and input text, and closes the multi-select.
|
|
317
317
|
*/
|
|
318
318
|
const handleClear = () => {
|
|
319
|
-
|
|
319
|
+
if (disabled.value) return;
|
|
320
320
|
|
|
321
321
|
multiSelectedListItems.value = [];
|
|
322
322
|
inputText.value = '';
|
|
323
323
|
multiSelectPopperState.value = false;
|
|
324
|
+
|
|
325
|
+
emit('update:modelValue', []);
|
|
324
326
|
};
|
|
325
327
|
|
|
326
328
|
watch(multiSelectModel, () => {
|
|
@@ -47,13 +47,16 @@
|
|
|
47
47
|
@click="props.searchable ? (selectPopperState = true) : null"
|
|
48
48
|
>
|
|
49
49
|
<template #icon>
|
|
50
|
-
<div
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
50
|
+
<div
|
|
51
|
+
:class="[
|
|
52
|
+
'spr-flex spr-items-center spr-gap-1',
|
|
53
|
+
{
|
|
54
|
+
'spr-cursor-pointer': !props.disabled,
|
|
55
|
+
'spr-cursor-not-allowed': props.disabled,
|
|
56
|
+
},
|
|
57
|
+
]"
|
|
58
|
+
>
|
|
59
|
+
<Icon v-if="props.clearable && inputText" icon="ph:x" @click.stop="handleClear" />
|
|
57
60
|
<Icon icon="ph:caret-down" />
|
|
58
61
|
</div>
|
|
59
62
|
</template>
|
|
@@ -301,10 +301,12 @@ export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitT
|
|
|
301
301
|
};
|
|
302
302
|
|
|
303
303
|
const handleClear = () => {
|
|
304
|
-
|
|
305
|
-
emit('search-string', '');
|
|
304
|
+
if (disabled.value) return;
|
|
306
305
|
|
|
307
306
|
inputText.value = '';
|
|
307
|
+
|
|
308
|
+
emit('update:modelValue', '');
|
|
309
|
+
emit('search-string', '');
|
|
308
310
|
};
|
|
309
311
|
|
|
310
312
|
watch(selectModel, () => {
|
|
@@ -88,7 +88,12 @@ export const useSidenav = (props: SidenavPropTypes, emit: SetupContext<SidenavEm
|
|
|
88
88
|
|
|
89
89
|
const getPathFromUrl = (url: string): string => {
|
|
90
90
|
const parsedUrl = new URL(url);
|
|
91
|
-
|
|
91
|
+
|
|
92
|
+
if (!parsedUrl) return '';
|
|
93
|
+
|
|
94
|
+
const { pathname, search, hash } = parsedUrl;
|
|
95
|
+
|
|
96
|
+
return `${pathname}${search}${hash}`;
|
|
92
97
|
};
|
|
93
98
|
|
|
94
99
|
const navLinkCondition = (link: NavItem) => {
|