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

feat(slider): support vertical props #1745

Open
wants to merge 9 commits into
base: develop
Choose a base branch
from
Open

feat(slider): support vertical props #1745

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0017891
feat(slider): support vertical props
novlan1 Feb 8, 2025
3068a64
chore(slider): lint
novlan1 Feb 8, 2025
b9cb265
chore: add lodash-es
novlan1 Feb 8, 2025
c409aaa
feat(slider): update capsule click result
novlan1 Feb 9, 2025
aa2d26f
refactor(slider): update drag options
novlan1 Feb 14, 2025
ebda7e2
chore: merge develop
novlan1 Feb 14, 2025
e586868
feat(slider): preventDefault when touchmove
novlan1 Feb 14, 2025
ca5d3c2
chore: update src/_common
novlan1 Feb 14, 2025
e88a851
fix(slider): fix capsule touch events
novlan1 Feb 14, 2025
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
2 changes: 1 addition & 1 deletion src/_common
Open in desktop
Submodule _common updated 5 files
+6 −6 js/date-picker/utils.ts
+44 −0 js/tree-select/utils.ts
+96 −7 style/mobile/components/slider/v2/_index.less
+4 −2 style/mobile/components/slider/v2/_var.less
+120 −0 test/unit/tree-select/utils/findParentValues.test.js
175 changes: 171 additions & 4 deletions src/slider/__test__/__snapshots__/demo.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -307,7 +307,7 @@ exports[`Slider > Slider disabledVue demo works fine 1`] = `
</div>
</div>
<text
class="t-slider__value t-slider__value--max"
class="t-slider__range-extreme t-slider__range-extreme--max"
>
100
</text>
Expand Down Expand Up @@ -442,7 +442,7 @@ exports[`Slider > Slider labelVue demo works fine 1`] = `
</div>
</div>
<text
class="t-slider__value t-slider__value--max"
class="t-slider__range-extreme t-slider__range-extreme--max"
>
100
</text>
Expand Down Expand Up @@ -686,7 +686,7 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
</div>
</div>
<text
class="t-slider__value t-slider__value--max"
class="t-slider__range-extreme t-slider__range-extreme--max"
>
100
</text>
Expand Down Expand Up @@ -888,7 +888,7 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
</div>
</div>
<text
class="t-slider__value t-slider__value--max"
class="t-slider__range-extreme t-slider__range-extreme--max"
>
100
</text>
Expand Down Expand Up @@ -1143,6 +1143,173 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
</div>


</div>
</div>
<div
class="tdesign-mobile-demo-block"
data-v-98828574=""
>
<div
class="tdesign-mobile-demo-block__header"
>
<h2
class="tdesign-mobile-demo-block__title"
>
04 垂直状态
</h2>
<!--v-if-->
</div>
<div
class="tdesign-mobile-demo-block__slot"
>


<div
class="wrapper"
data-v-e87311cc=""
>
<div
class="t-slider t-slider--top t-slider--vertical"
data-v-e87311cc=""
>
<!---->
<div
class="t-slider__bar t-slider__bar--default"
>
<!---->
<div
class="t-slider__line t-slider__line--default t-slider__line--single"
style=""
>
<div
class="t-slider__dot"
>
<div
class="t-slider__dot-value"
>
23
</div>
<div
class="t-slider__dot-slider"
/>
</div>
</div>
</div>
<!---->
</div>
</div>
<div
class="wrapper"
data-v-e87311cc=""
>
<div
class="t-slider t-slider--range t-slider--vertical"
data-v-e87311cc=""
>
<!---->
<div
class="t-slider__bar t-slider__bar--default"
>
<!---->
<div
class="t-slider__line t-slider__line--default"
style="top: 0px; bottom: 0px;"
>
<div
class="t-slider__dot t-slider__dot--left"
>
<!---->
<div
class="t-slider__dot-slider"
/>
</div>
<div
class="t-slider__dot t-slider__dot--right"
>
<!---->
<div
class="t-slider__dot-slider"
/>
</div>
</div>
</div>
<!---->
</div>
</div>
<div
class="wrapper"
data-v-e87311cc=""
>
<div
class="t-slider t-slider--top t-slider--vertical"
data-v-e87311cc=""
>
<!---->
<div
class="t-slider__bar t-slider__bar--capsule"
>
<!---->
<div
class="t-slider__line t-slider__line--capsule t-slider__line--single"
style=""
>
<div
class="t-slider__dot"
>
<div
class="t-slider__dot-value"
>
23
</div>
<div
class="t-slider__dot-slider"
/>
</div>
</div>
</div>
<!---->
</div>
</div>
<div
class="wrapper"
data-v-e87311cc=""
>
<div
class="t-slider t-slider--range t-slider--vertical"
data-v-e87311cc=""
>
<!---->
<div
class="t-slider__bar t-slider__bar--capsule"
>
<!---->
<div
class="t-slider__line t-slider__line--capsule"
style="top: 0px; bottom: 0px;"
>
<div
class="t-slider__dot t-slider__dot--left"
>
<!---->
<div
class="t-slider__dot-slider"
/>
</div>
<div
class="t-slider__dot t-slider__dot--right"
>
<!---->
<div
class="t-slider__dot-slider"
/>
</div>
</div>
</div>
<!---->
</div>
</div>


</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/slider/__test__/index.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ describe('slider', () => {

await $line.trigger('click', { clientX });

expect(onChange).toHaveBeenCalledWith(61);
expect(onChange).toHaveBeenCalledWith(55);

// // restore
window.HTMLElement.prototype.getBoundingClientRect = original;
Expand Down
4 changes: 4 additions & 0 deletions src/slider/demos/mobile.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@
<tdesign-demo-block title="03 特殊样式" summary="胶囊型滑块">
<capsuleDemo />
</tdesign-demo-block>
<tdesign-demo-block title="04 垂直状态">
<verticalDemo />
</tdesign-demo-block>
</div>
</template>

Expand All @@ -30,6 +33,7 @@ import labelDemo from './label.vue';
import stepDemo from './step.vue';
import disableDemo from './disabled.vue';
import capsuleDemo from './capsule.vue';
import verticalDemo from './vertical.vue';
</script>

<style scoped>
Expand Down
58 changes: 58 additions & 0 deletions src/slider/demos/vertical.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<template>
<div class="wrapper">
<t-slider
:default-value="23"
:label="handleLabel"
vertical
@change="onChange"
@dragend="onDragend"
@dragstart="onDragstart"
/>
</div>
<div class="wrapper">
<t-slider :default-value="rangeValue" :marks="marks" range :step="20" vertical @change="onChange" />
</div>
<div class="wrapper">
<t-slider :default-value="23" label="handleLabel" theme="capsule" vertical @change="onChange" />
</div>

<div class="wrapper">
<t-slider :default-value="[20, 80]" range :marks="marks" :step="20" theme="capsule" vertical @change="onChange" />
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const value = ref(10);
const rangeValue = ref([20, 80]);
const marks = {
0: '0',
20: '20',
40: '40',
60: '60',
80: '80',
100: '100',
};

const onChange = (e: number) => {
console.log(`change to ${e}`);
};

const onDragend = (value: number, e: TouchEvent) => {
console.log('onDragend: ', value, e);
};

const onDragstart = (e: TouchEvent) => {
console.log('onDragstart: ', e);
};

const handleLabel = (value: any) => {
return value;
};
</script>
<style lang="less" scoped>
.wrapper {
background: var(--bg-color-demo, #fff);
padding: 18px 0;
}
</style>
6 changes: 6 additions & 0 deletions src/slider/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,12 @@ export default {
type: [Number, Array] as PropType<TdSliderProps['defaultValue']>,
default: 0,
},
/** 是否是垂直的滑块（渲染垂直滑块时，默认高度为200px，可通过修改`--td-slider-bar-height`来自定义高度） */
vertical: Boolean,
/** 滑块值变化时触发 */
onChange: Function as PropType<TdSliderProps['onChange']>,
/** 结束拖动时触发 */
onDragend: Function as PropType<TdSliderProps['onDragend']>,
/** 开始拖动时触发 */
onDragstart: Function as PropType<TdSliderProps['onDragstart']>,
};
9 changes: 7 additions & 2 deletions src/slider/slider.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,18 @@ step | Number | 1 | \- | N
theme | String | default | options: default/capsule | N
value | Number / Array | 0 | `v-model` and `v-model:value` is supported。Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
defaultValue | Number / Array | 0 | uncontrolled property。Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
vertical | Boolean | false | \- | N
onChange | Function | | Typescript：`(value: SliderValue) => void`<br/> | N
onDragend | Function | | Typescript：`(value: SliderValue, context: {e: TouchEvent}) => void`<br/> | N
onDragstart | Function | | Typescript：`(context: {e: TouchEvent}) => void`<br/> | N

### Slider Events

name | params | description
-- | -- | --
change | `(value: SliderValue)` | \-
dragend | `(value: SliderValue, context: {e: TouchEvent})` | \-
dragstart | `(context: {e: TouchEvent})` | \-

### CSS Variables

Expand All @@ -33,8 +38,8 @@ Name | Default Value | Description
--td-slider-active-color | @brand-color | -
--td-slider-bar-height | 4px | -
--td-slider-capsule-bar-color | @bg-color-component | -
--td-slider-capsule-bar-heihgt | 24px | -
--td-slider-capsule-line-heihgt | 18px | -
--td-slider-capsule-bar-height | 24px | -
--td-slider-capsule-line-height | 18px | -
--td-slider-default-color | @bg-color-component-disabled | -
--td-slider-default-color | @bg-color-secondarycomponent | -
--td-slider-disabled-color | @brand-color-disabled | -
Expand Down
9 changes: 7 additions & 2 deletions src/slider/slider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,18 @@ step | Number | 1 | 步长 | N
theme | String | default | 滑块风格。可选项：default/capsule | N
value | Number / Array | 0 | 滑块值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
defaultValue | Number / Array | 0 | 滑块值。非受控属性。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
vertical | Boolean | false | 是否是垂直的滑块（渲染垂直滑块时，默认高度为200px，可通过修改`--td-slider-bar-height`来自定义高度） | N
onChange | Function | | TS 类型：`(value: SliderValue) => void`<br/>滑块值变化时触发 | N
onDragend | Function | | TS 类型：`(value: SliderValue, context: {e: TouchEvent}) => void`<br/>结束拖动时触发 | N
onDragstart | Function | | TS 类型：`(context: {e: TouchEvent}) => void`<br/>开始拖动时触发 | N

### Slider Events

名称 | 参数 | 描述
-- | -- | --
change | `(value: SliderValue)` | 滑块值变化时触发
dragend | `(value: SliderValue, context: {e: TouchEvent})` | 结束拖动时触发
dragstart | `(context: {e: TouchEvent})` | 开始拖动时触发

### CSS Variables

Expand All @@ -33,8 +38,8 @@ change | `(value: SliderValue)` | 滑块值变化时触发
--td-slider-active-color | @brand-color | -
--td-slider-bar-height | 4px | -
--td-slider-capsule-bar-color | @bg-color-component | -
--td-slider-capsule-bar-heihgt | 24px | -
--td-slider-capsule-line-heihgt | 18px | -
--td-slider-capsule-bar-height | 24px | -
--td-slider-capsule-line-height | 18px | -
--td-slider-default-color | @bg-color-component-disabled | -
--td-slider-default-color | @bg-color-secondarycomponent | -
--td-slider-disabled-color | @brand-color-disabled | -
Expand Down
Loading