pull/6537/head
Mert Sincan 2024-10-04 15:19:37 +01:00
commit 88a653bd4d
12 changed files with 140 additions and 42 deletions

View File

@ -8136,6 +8136,14 @@
"default": "",
"description": "Default text to display when no option is selected."
},
{
"name": "breakpoint",
"optional": true,
"readonly": false,
"type": "string",
"default": "960px",
"description": "The breakpoint to define the maximum width boundary."
},
{
"name": "invalid",
"optional": true,
@ -75122,6 +75130,15 @@
"default": "",
"description": "Gap of list"
},
{
"name": "list.mobileIndent",
"token": "cascadeselect.list.mobile.indent",
"optional": true,
"readonly": false,
"type": "string",
"default": "",
"description": "Mobile indent of list"
},
{
"name": "option.focusBackground",
"token": "cascadeselect.option.focus.background",

View File

@ -14,6 +14,10 @@ export default {
optionGroupLabel: null,
optionGroupChildren: null,
placeholder: String,
breakpoint: {
type: String,
default: '960px'
},
variant: {
type: String,
default: null

View File

@ -291,6 +291,11 @@ export interface CascadeSelectProps {
* Default text to display when no option is selected.
*/
placeholder?: string | undefined;
/**
* The breakpoint to define the maximum width boundary.
* @defaultValue 960px
*/
breakpoint?: string | undefined;
/**
* When present, it specifies that the component should have invalid state style.
* @defaultValue false

View File

@ -109,6 +109,7 @@ export default {
$pcFluid: { default: null }
},
outsideClickListener: null,
matchMediaListener: null,
scrollHandler: null,
resizeListener: null,
overlay: null,
@ -122,7 +123,10 @@ export default {
focusedOptionInfo: { index: -1, level: 0, parentKey: '' },
activeOptionPath: [],
overlayVisible: false,
dirty: false
dirty: false,
mobileActive: false,
query: null,
queryMatches: false
};
},
watch: {
@ -136,10 +140,12 @@ export default {
mounted() {
this.id = this.id || UniqueComponentId();
this.autoUpdateModel();
this.bindMatchMediaListener();
},
beforeUnmount() {
this.unbindOutsideClickListener();
this.unbindResizeListener();
this.unbindMatchMediaListener();
if (this.scrollHandler) {
this.scrollHandler.destroy();
@ -150,6 +156,10 @@ export default {
ZIndex.clear(this.overlay);
this.overlay = null;
}
if (this.mobileActive) {
this.mobileActive = false;
}
},
methods: {
getOptionLabel(option) {
@ -571,6 +581,27 @@ export default {
this.resizeListener = null;
}
},
bindMatchMediaListener() {
if (!this.matchMediaListener) {
const query = matchMedia(`(max-width: ${this.breakpoint})`);
this.query = query;
this.queryMatches = query.matches;
this.matchMediaListener = () => {
this.queryMatches = query.matches;
this.mobileActive = false;
};
this.query.addEventListener('change', this.matchMediaListener);
}
},
unbindMatchMediaListener() {
if (this.matchMediaListener) {
this.query.removeEventListener('change', this.matchMediaListener);
this.matchMediaListener = null;
}
},
isOptionMatched(processedOption) {
return this.isValidOption(processedOption) && this.getProccessedOptionLabel(processedOption)?.toLocaleLowerCase(this.searchLocale).startsWith(this.searchValue.toLocaleLowerCase(this.searchLocale));
},

View File

@ -48,7 +48,6 @@
@option-focus-change="onOptionFocusChange"
:pt="pt"
:unstyled="unstyled"
:isParentMount="mounted"
/>
</li>
</template>
@ -86,23 +85,7 @@ export default {
templates: null,
isParentMount: Boolean
},
data() {
return {
mounted: false
};
},
watch: {
isParentMount: {
handler(newValue) {
newValue && nestedPosition(this.container, this.level);
}
}
},
mounted() {
// entering order correction when an option is selected
(this.isParentMount || this.level === 0) && nestedPosition(this.container, this.level);
this.mounted = true;
},
methods: {
getOptionId(processedOption) {
return `${this.selectId}_${processedOption.key}`;

View File

@ -144,11 +144,15 @@ const theme = ({ dt }) => `
.p-cascadeselect-option-active {
overflow: visible;
background: ${dt('cascadeselect.option.focus.background')};
color: ${dt('cascadeselect.option.focus.color')};
}
.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus {
.p-cascadeselect-option-active > .p-cascadeselect-option-content {
background: ${dt('cascadeselect.option.focus.background')};
color: ${dt('cascadeselect.option.focus.color')};
border-radius: ${dt('cascadeselect.option.border.radius')};
}
.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus > .p-cascadeselect-option-content {
background: ${dt('cascadeselect.option.focus.background')};
color: ${dt('cascadeselect.option.focus.color')};
}
@ -157,7 +161,7 @@ const theme = ({ dt }) => `
color: ${dt('cascadeselect.option.icon.focus.color')};
}
.p-cascadeselect-option-selected {
.p-cascadeselect-option-selected .p-cascadeselect-option-content {
background: ${dt('cascadeselect.option.selected.background')};
color: ${dt('cascadeselect.option.selected.color')};
}
@ -188,6 +192,39 @@ const theme = ({ dt }) => `
height: ${dt('cascadeselect.option.icon.size')};
color: ${dt('cascadeselect.option.icon.color')};
}
.p-cascadeselect-mobile-active .p-cascadeselect-option-content {
border-radius: ${dt('cascadeselect.option.border.radius')};
}
.p-cascadeselect-mobile-active-active .p-cascadeselect-list {
display: flex;
flex-direction: column;
top: 100%;
left: 0;
z-index: 1;
}
.p-cascadeselect-mobile-active .p-cascadeselect-list > .p-cascadeselect-option > .p-cascadeselect-option-content .p-cascadeselect-group-icon {
margin-left: auto;
transition: transform 0.2s;
}
.p-cascadeselect-mobile-active .p-cascadeselect-list .p-cascadeselect-group-icon {
transition: transform 0.2s;
transform: rotate(90deg);
}
.p-cascadeselect-mobile-active .p-cascadeselect-option-active > .p-cascadeselect-option-content .p-cascadeselect-group-icon {
transform: rotate(-90deg);
}
.p-cascadeselect-mobile-active .p-cascadeselect-option-list {
position: static;
box-shadow: none;
border: 0 none;
padding-left: ${dt('cascadeselect.list.mobile.indent')};
}
`;
const inlineStyles = {
@ -198,6 +235,7 @@ const classes = {
root: ({ instance, props }) => [
'p-cascadeselect p-component p-inputwrapper',
{
'p-cascadeselect-mobile': instance.queryMatches,
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled',
@ -218,8 +256,13 @@ const classes = {
dropdown: 'p-cascadeselect-dropdown',
loadingIcon: 'p-cascadeselect-loading-icon',
dropdownIcon: 'p-cascadeselect-dropdown-icon',
overlay: 'p-cascadeselect-overlay p-component',
listContainer: 'p-cascadeselect-list-container',
overlay: ({ instance }) => [
'p-cascadeselect-overlay p-component',
{
'p-cascadeselect-mobile-active': instance.queryMatches
}
],
listContainer: 'p-cascadeselect-list',
list: 'p-cascadeselect-list',
option: ({ instance, processedOption }) => [
'p-cascadeselect-option',

View File

@ -38,7 +38,8 @@ export default {
},
list: {
padding: '{list.padding}',
gap: '{list.gap}'
gap: '{list.gap}',
mobileIndent: '1rem'
},
option: {
focusBackground: '{list.option.focus.background}',

View File

@ -38,7 +38,8 @@ export default {
},
list: {
padding: '{list.padding}',
gap: '{list.gap}'
gap: '{list.gap}',
mobileIndent: '1.25rem'
},
option: {
focusBackground: '{list.option.focus.background}',

View File

@ -38,7 +38,8 @@ export default {
},
list: {
padding: '{list.padding}',
gap: '{list.gap}'
gap: '{list.gap}',
mobileIndent: '1rem'
},
option: {
focusBackground: '{list.option.focus.background}',

View File

@ -38,7 +38,8 @@ export default {
},
list: {
padding: '{list.padding}',
gap: '{list.gap}'
gap: '{list.gap}',
mobileIndent: '1rem'
},
option: {
focusBackground: '{list.option.focus.background}',

View File

@ -221,6 +221,12 @@ export interface CascadeSelectDesignTokens extends ColorSchemeDesignToken<Cascad
* @designToken cascadeselect.list.gap
*/
gap?: string;
/**
* Mobile indent of list
*
* @designToken cascadeselect.list.mobile.indent
*/
mobileIndent?: string;
};
/**
* Used to pass tokens of the option section

View File

@ -194,7 +194,7 @@ importers:
devDependencies:
'@nuxt/devtools':
specifier: ^0.8.5
version: 0.8.5(nuxt@3.3.2(@types/node@18.19.54)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.0)(sass@1.79.4)(terser@5.34.1)(typescript@5.6.2)(webpack-sources@3.2.3))(rollup@4.24.0)(webpack-sources@3.2.3)
version: 0.8.5(nuxt@3.3.2(@types/node@18.19.54)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.0)(sass@1.79.4)(terser@5.34.1)(typescript@5.6.2)(webpack-sources@3.2.3))(rollup@4.24.0)(vite@5.4.8(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1))(webpack-sources@3.2.3)
'@nuxt/eslint-config':
specifier: ^0.2.0
version: 0.2.0(eslint@8.57.1)
@ -206,7 +206,7 @@ importers:
version: 3.13.2(rollup@4.24.0)(webpack-sources@3.2.3)
'@nuxt/test-utils':
specifier: ^3.7.3
version: 3.14.2(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.24.0)(vitest@1.6.0(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1))(vue-router@4.4.5(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))(webpack-sources@3.2.3)
version: 3.14.2(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.24.0)(vite@5.4.8(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1))(vitest@1.6.0(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1))(vue-router@4.4.5(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))(webpack-sources@3.2.3)
'@primevue/themes':
specifier: workspace:*
version: link:../themes
@ -8423,12 +8423,13 @@ snapshots:
'@nuxt/devalue@2.0.2': {}
'@nuxt/devtools-kit@0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.54)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.0)(sass@1.79.4)(terser@5.34.1)(typescript@5.6.2)(webpack-sources@3.2.3))(rollup@4.24.0)(webpack-sources@3.2.3)':
'@nuxt/devtools-kit@0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.54)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.0)(sass@1.79.4)(terser@5.34.1)(typescript@5.6.2)(webpack-sources@3.2.3))(rollup@4.24.0)(vite@5.4.8(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1))(webpack-sources@3.2.3)':
dependencies:
'@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.0)(webpack-sources@3.2.3)
'@nuxt/schema': 3.13.2(rollup@4.24.0)(webpack-sources@3.2.3)
execa: 7.2.0
nuxt: 3.3.2(@types/node@18.19.54)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.0)(sass@1.79.4)(terser@5.34.1)(typescript@5.6.2)(webpack-sources@3.2.3)
vite: 5.4.8(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1)
transitivePeerDependencies:
- magicast
- rollup
@ -8448,10 +8449,10 @@ snapshots:
rc9: 2.1.2
semver: 7.6.3
'@nuxt/devtools@0.8.5(nuxt@3.3.2(@types/node@18.19.54)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.0)(sass@1.79.4)(terser@5.34.1)(typescript@5.6.2)(webpack-sources@3.2.3))(rollup@4.24.0)(webpack-sources@3.2.3)':
'@nuxt/devtools@0.8.5(nuxt@3.3.2(@types/node@18.19.54)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.0)(sass@1.79.4)(terser@5.34.1)(typescript@5.6.2)(webpack-sources@3.2.3))(rollup@4.24.0)(vite@5.4.8(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1))(webpack-sources@3.2.3)':
dependencies:
'@antfu/utils': 0.7.10
'@nuxt/devtools-kit': 0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.54)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.0)(sass@1.79.4)(terser@5.34.1)(typescript@5.6.2)(webpack-sources@3.2.3))(rollup@4.24.0)(webpack-sources@3.2.3)
'@nuxt/devtools-kit': 0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.54)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.0)(sass@1.79.4)(terser@5.34.1)(typescript@5.6.2)(webpack-sources@3.2.3))(rollup@4.24.0)(vite@5.4.8(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1))(webpack-sources@3.2.3)
'@nuxt/devtools-wizard': 0.8.5
'@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.0)(webpack-sources@3.2.3)
birpc: 0.2.17
@ -8482,8 +8483,9 @@ snapshots:
simple-git: 3.27.0
sirv: 2.0.4
unimport: 3.13.1(rollup@4.24.0)(webpack-sources@3.2.3)
vite-plugin-inspect: 0.7.42(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.0)(webpack-sources@3.2.3))(rollup@4.24.0)
vite-plugin-vue-inspector: 3.7.2
vite: 5.4.8(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1)
vite-plugin-inspect: 0.7.42(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.0)(webpack-sources@3.2.3))(rollup@4.24.0)(vite@5.4.8(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1))
vite-plugin-vue-inspector: 3.7.2(vite@5.4.8(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1))
wait-on: 7.2.0
which: 3.0.1
ws: 8.18.0
@ -8767,7 +8769,7 @@ snapshots:
- supports-color
- webpack-sources
'@nuxt/test-utils@3.14.2(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.24.0)(vitest@1.6.0(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1))(vue-router@4.4.5(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))(webpack-sources@3.2.3)':
'@nuxt/test-utils@3.14.2(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.24.0)(vite@5.4.8(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1))(vitest@1.6.0(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1))(vue-router@4.4.5(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))(webpack-sources@3.2.3)':
dependencies:
'@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.0)(webpack-sources@3.2.3)
'@nuxt/schema': 3.13.2(rollup@4.24.0)(webpack-sources@3.2.3)
@ -8793,7 +8795,8 @@ snapshots:
ufo: 1.5.4
unenv: 1.10.0
unplugin: 1.14.1(webpack-sources@3.2.3)
vitest-environment-nuxt: 1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.24.0)(vitest@1.6.0(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1))(vue-router@4.4.5(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))(webpack-sources@3.2.3)
vite: 5.4.8(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1)
vitest-environment-nuxt: 1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.24.0)(vite@5.4.8(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1))(vitest@1.6.0(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1))(vue-router@4.4.5(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))(webpack-sources@3.2.3)
vue: 3.5.11(typescript@5.6.2)
vue-router: 4.4.5(vue@3.5.11(typescript@5.6.2))
optionalDependencies:
@ -14107,7 +14110,7 @@ snapshots:
optionator: 0.9.4
typescript: 5.6.2
vite-plugin-inspect@0.7.42(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.0)(webpack-sources@3.2.3))(rollup@4.24.0):
vite-plugin-inspect@0.7.42(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.0)(webpack-sources@3.2.3))(rollup@4.24.0)(vite@5.4.8(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1)):
dependencies:
'@antfu/utils': 0.7.10
'@rollup/pluginutils': 5.1.2(rollup@4.24.0)
@ -14117,13 +14120,14 @@ snapshots:
open: 9.1.0
picocolors: 1.1.0
sirv: 2.0.4
vite: 5.4.8(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1)
optionalDependencies:
'@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.0)(webpack-sources@3.2.3)
transitivePeerDependencies:
- rollup
- supports-color
vite-plugin-vue-inspector@3.7.2:
vite-plugin-vue-inspector@3.7.2(vite@5.4.8(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1)):
dependencies:
'@babel/core': 7.25.7
'@babel/plugin-proposal-decorators': 7.25.7(@babel/core@7.25.7)
@ -14134,6 +14138,7 @@ snapshots:
'@vue/compiler-dom': 3.5.11
kolorist: 1.8.0
magic-string: 0.30.11
vite: 5.4.8(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1)
transitivePeerDependencies:
- supports-color
@ -14171,9 +14176,9 @@ snapshots:
sass: 1.79.4
terser: 5.34.1
vitest-environment-nuxt@1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.24.0)(vitest@1.6.0(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1))(vue-router@4.4.5(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))(webpack-sources@3.2.3):
vitest-environment-nuxt@1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.24.0)(vite@5.4.8(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1))(vitest@1.6.0(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1))(vue-router@4.4.5(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))(webpack-sources@3.2.3):
dependencies:
'@nuxt/test-utils': 3.14.2(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.24.0)(vitest@1.6.0(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1))(vue-router@4.4.5(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))(webpack-sources@3.2.3)
'@nuxt/test-utils': 3.14.2(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.24.0)(vite@5.4.8(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1))(vitest@1.6.0(@types/node@18.19.54)(sass@1.79.4)(terser@5.34.1))(vue-router@4.4.5(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))(webpack-sources@3.2.3)
transitivePeerDependencies:
- '@cucumber/cucumber'
- '@jest/globals'