Skip to content

Commit

Permalink
fix(VsSelect): allow vs-select multiple chips flex-wrap (#206)
Browse files Browse the repository at this point in the history
  • Loading branch information
@smithoo
smithoo authored Jun 11, 2024
1 parent 412ecac commit 9487459
Show file tree
Hide file tree
Showing 14 changed files with 373 additions and 321 deletions.
4 changes: 2 additions & 2 deletions packages/vlossom/src/components/vs-chip/VsChip.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
border-radius: 50%;
background-color: var(--vs-white);
border: var(--vs-chip-border, 1px solid var(--vs-line-color));
height: calc(var(--vs-chip-height, 1.35rem) * 0.8);
width: calc(var(--vs-chip-height, 1.35rem) * 0.8);
height: calc(var(--vs-chip-height, 1.6rem) * 0.6);
width: calc(var(--vs-chip-height, 1.6rem) * 0.6);
}

.close-button {
Expand Down
1 change: 1 addition & 0 deletions packages/vlossom/src/components/vs-chip/VsChip.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
type="button"
class="icon-container close-button"
aria-label="close"
tabindex="-1"
@click.stop="$emit('close')"
>
<vs-icon icon="close" size="13px" />
Expand Down
6 changes: 3 additions & 3 deletions packages/vlossom/src/components/vs-section/VsSection.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
border-radius: var(--vs-section-borderRadius, calc(var(--vs-radius-ratio) * 0.6rem));
box-shadow: var(--vs-section-boxShadow, var(--vs-area-shadow-outer));
color: var(--vs-section-fontColor, var(--vs-font-color));
padding: var(--vs-section-padding, 2rem);
padding: var(--vs-section-padding, 2.4rem 3rem);
position: relative;
overflow: auto;

Expand All @@ -14,13 +14,13 @@

@media screen and (max-width: 992px) {
.vs-section {
padding: var(--vs-section-padding, 1.6rem);
padding: var(--vs-section-padding, 2rem 2.4rem);
}
}

@media screen and (max-width: 768px) {
.vs-section {
padding: var(--vs-section-padding, 1.2rem);
padding: var(--vs-section-padding, 1.6rem);
}
}

Expand Down
199 changes: 117 additions & 82 deletions packages/vlossom/src/components/vs-select/VsSelect.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,76 +2,99 @@

.vs-select {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
background-color: var(--vs-select-backgroundColor, var(--vs-no-color));
border: var(--vs-select-border, solid 1px var(--vs-line-color));
height: var(--vs-select-height, 2.4rem);
line-height: var(--vs-select-height, 2.4rem);
border: var(--vs-select-border, 1px solid var(--vs-line-color));
min-height: var(--vs-select-height, 2.4rem);
border-radius: var(--vs-select-borderRadius, calc(var(--vs-radius-ratio) * 0.4rem));
font-size: var(--vs-select-fontSize, 0.9rem);

.multiple-chips {
display: flex;
padding-left: 0.6rem;
overflow: hidden;
.vs-select-wrap {
.vs-select-input {
width: 100%;
height: var(--vs-select-height, 2.4rem);
padding: 0 0.8rem;
border: none;
outline: none;
background-color: transparent;
color: var(--vs-select-fontColor, var(--vs-font-color));
cursor: pointer;

.chips {
display: flex;
align-items: center;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
&.autocomplete {
cursor: default;
}

.chip-others {
margin-left: 0.2rem;
padding: 0 0.8rem;
&:not(.autocomplete)::selection {
background: none;
}
}
}

input {
flex: 1;
padding: 0 0.8rem;
border: none;
outline: none;
background-color: transparent;
color: var(--vs-select-fontColor, var(--vs-font-color));
cursor: pointer;
min-width: 2rem;
line-height: 1rem;

&.autocomplete {
cursor: default;
}
.multiple-chips {
display: flex;
padding-left: 0.6rem;
overflow: hidden;

.chips {
display: flex;
align-items: center;
flex-wrap: wrap;
overflow-x: auto;
overflow-y: hidden;

.select-chip {
margin-top: 0.1rem;
margin-bottom: 0.1rem;
}
.chip-others {
margin-left: 0.2rem;
padding: 0 0.8rem;
}

&.multiple-only {
padding-bottom: 0.3rem;
}
}

&:not(.autocomplete)::selection {
background: none;
&.autocompleted {
padding-bottom: 0.4rem;
}
}
}

.clear-button {
.vs-select-side {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding-right: 0.6rem;
opacity: 0;
transition: opacity 0.4s;
color: var(--vs-input-clearButtonColor, var(--vs-font-color));
background: none;
border: none;
cursor: pointer;
}
justify-content: flex-end;
width: 2.4rem;

.arrow-box {
display: flex;
align-items: center;
cursor: pointer;
padding-right: 0.6rem;
.clear-button {
display: flex;
justify-content: center;
align-items: center;
padding-right: 0.6rem;
opacity: 1;
transition: opacity 0.4s;
color: var(--vs-input-clearButtonColor, var(--vs-font-color));
background: none;
border: none;
cursor: pointer;
}

.arrow-icon {
transition: transform 0.2s ease-out;
.arrow-box {
display: flex;
align-items: center;
cursor: pointer;
padding-right: 0.6rem;

.arrow-icon {
transition: transform 0.2s ease-out;

&.arrow-up {
transform: rotate(180deg);
&.arrow-up {
transform: rotate(180deg);
}
}
}
}
Expand All @@ -83,9 +106,12 @@
}

&.dense {
height: var(--vs-select-height, 2rem);
line-height: var(--vs-select-height, 2rem);
min-height: var(--vs-select-height, 2rem);
font-size: var(--vs-select-fontSize, 0.8rem);

.vs-select-input {
height: var(--vs-select-height, 2rem);
}
}

&.disabled {
Expand All @@ -108,49 +134,58 @@
.vs-options-container {
z-index: 900;
background-color: var(--vs-select-backgroundColor, var(--vs-no-color));
border: var(--vs-select-border, solid 1px var(--vs-line-color));
border: var(--vs-select-border, 1px solid var(--vs-line-color));
border-radius: var(--vs-select-borderRadius, calc(var(--vs-radius-ratio) * 0.4rem));
overflow: hidden;

.options-header {
position: relative;
border-bottom: var(--vs-select-border, 1px solid var(--vs-line-color));
}

.options-footer {
position: relative;
border-top: var(--vs-select-border, 1px solid var(--vs-line-color));
}

.vs-select-options {
max-height: 25rem;
max-height: var(--vs-select-optionsHeight, 25rem);
overflow: auto;
list-style-type: none;
outline: none;
}

li {
padding: 0 1.2rem;
height: var(--vs-select-height, 2.4rem);
line-height: var(--vs-select-height, 2.4rem);
color: var(--vs-select-fontColor, var(--vs-font-color));
cursor: pointer;
user-select: none;
font-size: var(--vs-select-fontSize, 0.9rem);
.vs-option {
position: relative;
display: flex;
align-items: center;
padding: 0 1.2rem;
min-height: var(--vs-select-height, 2.4rem);
background-color: var(--vs-no-color);
color: var(--vs-select-fontColor, var(--vs-font-color));
cursor: pointer;
user-select: none;
font-size: var(--vs-select-fontSize, 0.9rem);

&:not(.selected).chased {
background-color: var(--vs-select-hoverOptionBackgroundColor, var(--vs-area-bg-hover));
color: var(--vs-select-hoverOptionColor, var(--vs-font-color));
}
&.select-all {
border-bottom: var(--vs-select-border, 1px solid var(--vs-line-color));
}

&.select-all {
background-color: var(--vs-no-color);
padding: 0.4 0.4rem;
height: var(--vs-select-height, 2.4rem);
line-height: var(--vs-select-height, 2.4rem);
}
&.selected {
background-color: var(--vs-select-selectedOptionBackgroundColor, var(--vs-area-bg-active));
color: var(--vs-select-selectedOptionColor, var(--vs-font-color));
font-weight: 600;
}

&.selected {
background-color: var(--vs-select-selectedOptionBackgroundColor, var(--vs-area-bg-active));
color: var(--vs-select-selectedOptionColor, var(--vs-font-color));
font-weight: 600;
}
&.chased {
background-color: var(--vs-select-hoverOptionBackgroundColor, var(--vs-area-bg-hover));
color: var(--vs-select-hoverOptionColor, var(--vs-font-color));
}
}

&.dense {
li {
height: var(--vs-select-height, 2rem);
line-height: var(--vs-select-height, 2rem);
.vs-option {
min-height: var(--vs-select-height, 2rem);
font-size: var(--vs-select-fontSize, 0.8rem);
}
}
Expand Down
Loading

0 comments on commit 9487459

Please sign in to comment.