Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

♻️ form-builder: Refactor ChoiceSliderField #1193

Merged
merged 1 commit into from
Jun 25, 2021
Merged

♻️ form-builder: Refactor ChoiceSliderField #1193

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,12 @@
### Vue Dot

- 🔧 **Configuration**
- **config:** Mise à jour de la taille maximale du build ([#1183](https://github.com/assurance-maladie-digital/design-system/pull/1183))
- **config:** Mise à jour de la taille maximale du build ([#1183](https://github.com/assurance-maladie-digital/design-system/pull/1183)) ([cd82a69](https://github.com/assurance-maladie-digital/design-system/commit/cd82a69f9f284592bdb805aec359ae78080a97db))

### FormBuilder

- ♻️ **Refactoring**
- **ChoiceSliderField:** Refonte du composant ([#1193](https://github.com/assurance-maladie-digital/design-system/pull/1193))

## v2.0.0-beta.11

Expand Down
20 changes: 4 additions & 16 deletions ...ages/form-builder/src/components/FormBuilder/tests/__snapshots__/FormBuilder.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,10 +282,7 @@ exports[`FormBuilder renders correctly 1`] = `
Informations supplémentaires
</p>
<div>
<div class="v-input vd-choice-slider-field vd-form-input-xl theme--light v-input__slider">
<div class="v-input__prepend-outer">
9h
</div>
<div class="v-input vd-choice-slider-field vd-form-input-xl theme--light v-input__slider thumb-label">
<div class="v-input__control">
<div class="v-input__slot">
<div class="v-slider v-slider--horizontal theme--light"><input value="0" id="input-91" disabled="disabled" readonly="readonly" tabindex="-1">
Expand All @@ -296,7 +293,7 @@ exports[`FormBuilder renders correctly 1`] = `
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="3" aria-valuenow="0" aria-readonly="false" aria-orientation="horizontal" class="v-slider__thumb-container v-slider__thumb-container--show-label accent--text" style="left: 0%;">
<div class="v-slider__thumb accent"></div>
<transition-stub name="scale-transition">
<div class="v-slider__thumb-label-container">
<div class="v-slider__thumb-label-container" style="display: none;">
<div class="v-slider__thumb-label accent" style="height: 32px; width: 32px; transform: translateY(-20%) translateY(-12px) translateX(-50%) rotate(45deg);">
<div>
9h
Expand All @@ -311,9 +308,6 @@ exports[`FormBuilder renders correctly 1`] = `
<transition-group-stub tag="div" name="message-transition" class="v-messages__wrapper"></transition-group-stub>
</div>
</div>
<div class="v-input__append-outer">
11h
</div>
</div>
<!---->
</div>
Expand All @@ -324,10 +318,7 @@ exports[`FormBuilder renders correctly 1`] = `
Informations supplémentaires
</p>
<div>
<div class="v-input vd-choice-slider-field vd-form-input-xl theme--light v-input__slider">
<div class="v-input__prepend-outer">
min
</div>
<div class="v-input vd-choice-slider-field vd-form-input-xl theme--light v-input__slider thumb-label">
<div class="v-input__control">
<div class="v-input__slot">
<div class="v-slider v-slider--horizontal theme--light"><input value="0" id="input-101" disabled="disabled" readonly="readonly" tabindex="-1" labelmin="min" labelmax="max">
Expand All @@ -338,7 +329,7 @@ exports[`FormBuilder renders correctly 1`] = `
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="3" aria-valuenow="0" aria-readonly="false" aria-orientation="horizontal" labelmin="min" labelmax="max" class="v-slider__thumb-container v-slider__thumb-container--show-label accent--text" style="left: 0%;">
<div class="v-slider__thumb accent"></div>
<transition-stub name="scale-transition">
<div class="v-slider__thumb-label-container">
<div class="v-slider__thumb-label-container" style="display: none;">
<div class="v-slider__thumb-label accent" style="height: 32px; width: 32px; transform: translateY(-20%) translateY(-12px) translateX(-50%) rotate(45deg);">
<div>
9h
Expand All @@ -353,9 +344,6 @@ exports[`FormBuilder renders correctly 1`] = `
<transition-group-stub tag="div" name="message-transition" class="v-messages__wrapper"></transition-group-stub>
</div>
</div>
<div class="v-input__append-outer">
max
</div>
</div>
<!---->
</div>
Expand Down
31 changes: 13 additions & 18 deletions packages/form-builder/src/components/FormField/fields/ChoiceSliderField.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,16 @@
v-bind="options"
:value="getIndex(choiceFieldValue)"
:thumb-label="thumbLabel"
:tick-labels="thickLabels"
:tick-labels="tickLabels"
:max="items.length - 1"
:type="undefined"
:class="{ 'thumb-label': isThumbLabel }"
color="accent"
tick-size="6"
track-color="grey lighten-1"
class="vd-choice-slider-field vd-form-input-xl"
@change="valueUpdated"
>
<template
v-if="isThumbLabel"
#prepend
>
{{ labelMin }}
</template>

<template
v-if="isThumbLabel"
#append
>
{{ labelMax }}
</template>

<template
v-if="thumbLabel"
#thumb-label="{ value }"
Expand All @@ -43,6 +30,8 @@

const MixinsDeclaration = mixins(ChoiceComponent);

type ThumbLabelValue = boolean | string | undefined;

/** Choice field type slider */
@Component
export default class ChoiceSliderField extends MixinsDeclaration {
Expand Down Expand Up @@ -84,12 +73,12 @@
return this.labels[this.labels.length - 1];
}

get thumbLabel(): string | boolean {
return this.isThumbLabel ? 'always' : false;
get thumbLabel(): ThumbLabelValue {
return this.options?.thumbLabel as ThumbLabelValue;
}

/** The ticks labels (when we don't want the thumb label) */
get thickLabels(): string[] {
get tickLabels(): string[] {
return this.isThumbLabel ? [] : this.labels;
}

Expand Down Expand Up @@ -129,6 +118,12 @@
<style lang="scss" scoped>
@import '@cnamts/design-tokens/dist/tokens';

.vd-choice-slider-field.thumb-label {
&.v-input--hide-details {
min-height: 40px;
}
}

.vd-choice-slider-field ::v-deep {
.v-input__control {
width: auto;
Expand Down