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

Jump to bottom

fix(Form): update demo #887

Merged
merged 2 commits into from
Jun 19, 2023
Merged

fix(Form): update demo #887

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
09417cb
feat(Rate): add disabled style
anlyyao Jun 16, 2023
4137885
fix(Table): update demo
anlyyao Jun 16, 2023
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
238 changes: 157 additions & 81 deletions src/form/__test__/__snapshots__/demo.test.jsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

27 changes: 22 additions & 5 deletions src/form/demos/horizontal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,14 @@
@submit="onSubmit"
>
<t-form-item label="用户名" name="name" help="输入用户名">
<t-input v-model="formData.name" placeholder="请输入内容"></t-input>
<t-input v-model="formData.name" borderless placeholder="请输入内容"></t-input>
</t-form-item>
<t-form-item label="密码" name="password">
<t-input v-model="formData.password" type="password" placeholder="请输入内容"></t-input>
<t-input v-model="formData.password" borderless type="password" :clearable="false" placeholder="请输入内容">
<template #suffixIcon>
<BrowseOffIcon />
</template>
</t-input>
</t-form-item>
<t-form-item label="性别" name="gender">
<t-radio-group v-model="formData.gender" class="box" borderless @change="groupChangeFn">
Expand All @@ -24,7 +28,13 @@
</t-radio-group>
</t-form-item>
<t-form-item arrow label="生日" name="birth" content-align="right">
<t-input v-model="formData.birth" align="right" placeholder="请输入内容" @click="visible = true"></t-input>
<t-input
v-model="formData.birth"
borderless
align="right"
placeholder="请输入内容"
@click="visible = true"
></t-input>
<t-popup v-model="visible" placement="bottom">
<t-date-time-picker
:value="formData.birth"
Expand All @@ -40,7 +50,13 @@
</t-popup>
</t-form-item>
<t-form-item arrow label="籍贯" name="place" content-align="right">
<t-input v-model="formData.place" align="right" placeholder="请输入内容" @click="showCascader"></t-input>
<t-input
v-model="formData.place"
borderless
align="right"
placeholder="请输入内容"
@click="showCascader"
></t-input>
<t-cascader
v-model:visible="visibleCascader"
:value="address"
Expand All @@ -53,7 +69,7 @@
<t-stepper v-model="formData.age" theme="filled" @change="onChangeStepper" />
</t-form-item>
<t-form-item label="自我评价" name="description" content-align="right">
<t-rate v-model="formData.description" clearable allow-half :gap="rateGap" />
<t-rate v-model="formData.description" variant="filled" allow-half :gap="rateGap" />
</t-form-item>
<t-form-item label="个人简介" name="resume">
<t-textarea
Expand Down Expand Up @@ -89,6 +105,7 @@
</template>
<script lang="ts" setup>
import { ref, reactive, defineProps, toRefs, onMounted } from 'vue';
import { BrowseOffIcon } from 'tdesign-icons-vue-next';

import {
UploadChangeContext,
Expand Down
6 changes: 3 additions & 3 deletions src/form/demos/mobile.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@
<div class="tdesign-mobile-demo">
<h1 class="title">Form 表单</h1>
<p class="summary">用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</p>
<tdesign-demo-block summary="01 基础类型">
<tdesign-demo-block title="01 基础类型" summary="基础表单">
<div class="option">
<div class="button-group">
<t-button :theme="isActive1 ? 'primary' : 'default'" shape="round" @click="onClick('isActive1', isActive1)">
<t-button :theme="isActive1 ? 'light' : 'default'" shape="round" @click="onClick('isActive1', isActive1)">
水平排布
</t-button>
<t-button :theme="isActive2 ? 'primary' : 'default'" shape="round" @click="onClick('isActive2', isActive2)">
<t-button :theme="isActive2 ? 'light' : 'default'" shape="round" @click="onClick('isActive2', isActive2)">
竖直排布
</t-button>
</div>
Expand Down
17 changes: 11 additions & 6 deletions src/form/demos/vertical.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,14 @@
@submit="onSubmit"
>
<t-form-item label="用户名" name="name" help="输入用户名">
<t-input v-model="formData.name" placeholder="请输入内容"></t-input>
<t-input v-model="formData.name" borderless placeholder="请输入内容"></t-input>
</t-form-item>
<t-form-item label="密码" name="password">
<t-input v-model="formData.password" type="password" placeholder="请输入内容"></t-input>
<t-input v-model="formData.password" borderless type="password" :clearable="false" placeholder="请输入内容">
<template #suffixIcon>
<BrowseOffIcon />
</template>
</t-input>
</t-form-item>
<t-form-item label="性别" name="gender">
<t-radio-group v-model="formData.gender" class="box" borderless @change="groupChangeFn">
Expand All @@ -24,7 +28,7 @@
</t-radio-group>
</t-form-item>
<t-form-item arrow label="生日" name="birth">
<t-input v-model="formData.birth" placeholder="请输入内容" @click="visible = true"></t-input>
<t-input v-model="formData.birth" borderless placeholder="请输入内容" @click="visible = true"></t-input>
<t-popup v-model="visible" placement="bottom">
<t-date-time-picker
:value="formData.birth"
Expand All @@ -40,7 +44,7 @@
</t-popup>
</t-form-item>
<t-form-item arrow label="籍贯" name="place">
<t-input v-model="formData.place" placeholder="请输入内容" @click="showCascader"></t-input>
<t-input v-model="formData.place" borderless placeholder="请输入内容" @click="showCascader"></t-input>
<t-cascader
v-model:visible="visibleCascader"
:value="address"
Expand All @@ -53,7 +57,7 @@
<t-stepper v-model="formData.age" theme="filled" @change="onChangeStepper" />
</t-form-item>
<t-form-item label="自我评价" name="description">
<t-rate v-model="formData.description" clearable allow-half :gap="rateGap" />
<t-rate v-model="formData.description" variant="filled" allow-half :gap="rateGap" />
</t-form-item>
<t-form-item label="个人简介" name="resume">
<t-textarea
Expand Down Expand Up @@ -81,13 +85,14 @@
</t-upload>
</t-form-item>
<div class="button-group">
<t-button theme="primary" type="submit" size="large">提交</t-button>
<t-button theme="primary" variant="light" type="submit" size="large">提交</t-button>
<t-button theme="default" variant="base" type="reset" size="large">重置</t-button>
</div>
</t-form>
</template>
<script lang="ts" setup>
import { ref, reactive, defineProps, toRefs, onMounted } from 'vue';
import { BrowseOffIcon } from 'tdesign-icons-vue-next';

import {
UploadChangeContext,
Expand Down
4 changes: 0 additions & 4 deletions src/rate/__test__/__snapshots__/demo.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1103,7 +1103,6 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
>
用于对某行为/事物进行打分。
</p>
<br />
<div
class="tdesign-mobile-demo-block"
>
Expand Down Expand Up @@ -1878,7 +1877,6 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `

</div>
</div>
<br />
<div
class="tdesign-mobile-demo-block"
>
Expand Down Expand Up @@ -2236,7 +2234,6 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `

</div>
</div>
<br />
<div
class="tdesign-mobile-demo-block"
>
Expand Down Expand Up @@ -2931,7 +2928,6 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `

</div>
</div>
<br />
<div
class="tdesign-mobile-demo-block"
>
Expand Down
8 changes: 4 additions & 4 deletions src/rate/demos/mobile.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="tdesign-mobile-demo">
<h1 class="title">Rate 评分</h1>
<p class="summary">用于对某行为/事物进行打分。</p>
<br />

<tdesign-demo-block title="01 组件类型" summary="实心评分">
<BaseDemo />
</tdesign-demo-block>
Expand All @@ -15,18 +15,18 @@
<tdesign-demo-block summary="带描述评分">
<ShowTextDemo />
</tdesign-demo-block>
<br />

<tdesign-demo-block title="02 组件状态">
<ActionDemo />
</tdesign-demo-block>
<br />

<tdesign-demo-block title="03 组件样式" summary="评分大小">
<SizeDemo />
</tdesign-demo-block>
<tdesign-demo-block summary="设置评分颜色">
<ColorDemo />
</tdesign-demo-block>
<br />

<tdesign-demo-block title="04 特殊样式" summary="竖向带描述评分">
<SpecialDemo />
</tdesign-demo-block>
Expand Down
20 changes: 11 additions & 9 deletions src/rate/rate.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div :class="`${name}`">
<div :class="rootClasses">
<div
ref="rateWrapper"
:class="`${name}__wrapper`"
Expand Down Expand Up @@ -83,6 +83,7 @@ import rateProps from './props';
import config from '../config';
import { TdRateProps } from './type';
import { useDefault } from '../shared';
import { useFormDisabled } from '../form/hooks';

const { prefix } = config;
const name = `${prefix}-rate`;
Expand All @@ -92,6 +93,8 @@ export default defineComponent({
props: rateProps,
emits: ['change', 'update:value', 'update:modelValue'],
setup(props, context) {
const disabled = useFormDisabled();

const rateWrapper = ref<HTMLElement | null>(null);
const [actualVal] = useDefault<number, TdRateProps>(props, context.emit, 'value', 'change');
const rateText = computed(() => {
Expand Down Expand Up @@ -172,9 +175,10 @@ export default defineComponent({
);
};

const rootClasses = computed(() => [`${name}`, { [`${name}--disabled`]: disabled.value }]);

const classes = (n: number) => {
const classPrefix = `${name}__icon`;
const { disabled } = props;
const className = {
[classPrefix]: true,
};
Expand All @@ -183,9 +187,6 @@ export default defineComponent({
}
if (actualVal.value >= n) {
className[`${classPrefix}--selected`] = true;
if (disabled) {
className[`${classPrefix}--disabled`] = true;
}
} else {
className[`${classPrefix}--unselected`] = true;
}
Expand Down Expand Up @@ -225,7 +226,7 @@ export default defineComponent({
};

const onClick = (event: MouseEvent) => {
if (props.disabled) return;
if (disabled.value) return;
// if (Date.now() - touchStartTime.value > 200) return;
getRect(event, 'tap');
};
Expand All @@ -236,19 +237,19 @@ export default defineComponent({
};

const onTouchstart = (e: TouchEvent) => {
if (props.disabled) return;
if (disabled.value) return;
touchStartTime.value = Date.now();
touchEnd.value = false;
};

const onTouchmove = (e: TouchEvent) => {
if (props.disabled) return;
if (disabled.value) return;
if (Date.now() - touchStartTime.value <= 200) return;
onTouch(e, 'move');
};

const onTouchEnd = (e: TouchEvent) => {
if (props.disabled) return;
if (disabled.value) return;
touchEnd.value = true;
hideTips();
};
Expand Down Expand Up @@ -296,6 +297,7 @@ export default defineComponent({

return {
name: ref(name),
rootClasses,
classes,
rateWrapper,
actualVal,
Expand Down