Skip to content

Commit

Permalink
feat: transfer form style bug
Browse files Browse the repository at this point in the history
  • Loading branch information
@Wen1kang
Wen1kang committed Nov 22, 2022
1 parent 54b3a9c commit 2d04741
Show file tree
Hide file tree
Showing 6 changed files with 88 additions and 54 deletions.
2 changes: 1 addition & 1 deletion src/_common
Submodule _common updated 31 files
+1 −1 docs/web/api/table.md
+9 −9 js/date-picker/format.ts
+3 −1 js/input-number/number.ts
+3 −12 style/web/_global.less
+40 −74 style/web/components/color-picker/_index.less
+35 −18 style/web/components/color-picker/_var.less
+54 −23 style/web/components/date-picker/_index.less
+19 −5 style/web/components/date-picker/_var.less
+3 −3 style/web/components/form/_index.less
+4 −3 style/web/components/form/_var.less
+1 −1 style/web/components/input-adornment/_var.less
+10 −0 style/web/components/input-number/_index.less
+6 −0 style/web/components/input/_index.less
+1 −0 style/web/components/input/_var.less
+3 −3 style/web/components/menu/_index-v2.less
+4 −3 style/web/components/menu/_index.less
+13 −1 style/web/components/pagination/_index.less
+1 −1 style/web/components/pagination/_var.less
+1 −1 style/web/components/radio/_index.less
+3 −3 style/web/components/slider/_var.less
+12 −12 style/web/components/switch/_index.less
+6 −5 style/web/components/switch/_var.less
+19 −25 style/web/components/table/_index.less
+3 −0 style/web/components/table/_var.less
+10 −10 style/web/components/tag-input/_index.less
+6 −6 style/web/components/tag-input/_var.less
+5 −5 style/web/components/textarea/_var.less
+3 −71 style/web/components/time-picker/_index.less
+8 −18 style/web/components/time-picker/_var.less
+8 −14 style/web/components/transfer/_index.less
+24 −24 style/web/components/transfer/_var.less
6 changes: 3 additions & 3 deletions src/form/_example/validator-status.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
<t-form-item label="加载中" name="loading">
<t-input v-model="formData.loading" placeholder="正在校验中，请稍等"></t-input>
<template #statusIcon>
<div style="width: 25px; display: flex; justify-content: center">
<div style="width: 16px; display: flex; justify-content: center">
<t-loading size="small" />
</div>
</template>
Expand All @@ -64,10 +64,10 @@

<template #statusIcon>
<t-button v-if="item.id === 0 || item.id === lastAddItem - 1" variant="dashed" @click="addItem">
<t-icon name="add" size="16px" style="color: #0004" />
<t-icon name="add" />
</t-button>
<t-button v-if="item.id > 0" variant="dashed" @click="removeItem(item, index)">
<t-icon name="remove" size="16px" style="color: #0004" />
<t-icon name="remove" />
</t-button>
</template>
</t-form-item>
Expand Down
15 changes: 10 additions & 5 deletions src/transfer/_example/custom.vue
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
<template>
<t-transfer :data="list">
<t-transfer :data="list" :operation="['移除', '加入']" class="tdesign-transfer-custom">
<template #title="props">
<div>{{ props.type === 'target' ? '目标' : '来源' }}</div>
</template>
<template #operation="props">
{{ props.direction === 'left' ? '移除' : '加入' }}
</template>
<template #footer="props">
<div style="padding: 10px; border-top: 1px solid #e7e7e7">
<div style="padding: 12px; border-top: 1px solid #e7e7e7">
<span v-if="props.type === 'source'">选中并加入</span>
<span v-else>选中并移除</span>
</div>
Expand All @@ -23,3 +20,11 @@ for (let i = 0; i < 20; i++) {
});
}
</script>
<style>
.tdesign-transfer-custom .t-button .t-icon {
display: none;
}
.tdesign-transfer-custom .t-icon + .t-button__text:not(:empty) {
margin-left: 0;
}
</style>
4 changes: 4 additions & 0 deletions src/transfer/components/transfer-operations.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,8 @@ export default defineComponent({
<div class={`${classPrefix.value}-transfer__operations`}>
<Button
variant="outline"
size="small"
shape={typeof props.operation?.[1] === 'string' ? 'rectangle' : 'square'}
key={props.rightDisabled ? 'right-outline' : 'right-base'}
disabled={props.rightDisabled}
onClick={moveToRight}
Expand All @@ -92,6 +94,8 @@ export default defineComponent({
</Button>
<Button
variant="outline"
size="small"
shape={typeof props.operation?.[0] === 'string' ? 'rectangle' : 'square'}
key={props.rightDisabled ? 'left-outline' : 'left-base'}
disabled={props.leftDisabled}
onClick={moveToLeft}
Expand Down
91 changes: 58 additions & 33 deletions test/snap/__snapshots__/csr.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40582,7 +40582,7 @@ exports[`csr snapshot test > csr test ./src/config-provider/_example/others.vue
class="t-transfer__operations"
>
<button
class="t-button t-size-m t-button--variant-outline t-button--theme-default t-is-disabled"
class="t-button t-size-s t-button--variant-outline t-button--theme-default t-is-disabled t-button--shape-square"
disabled=""
type="button"
>
Expand Down Expand Up @@ -40610,7 +40610,7 @@ exports[`csr snapshot test > csr test ./src/config-provider/_example/others.vue

</button>
<button
class="t-button t-size-m t-button--variant-outline t-button--theme-default t-is-disabled"
class="t-button t-size-s t-button--variant-outline t-button--theme-default t-is-disabled t-button--shape-square"
disabled=""
type="button"
>
Expand Down Expand Up @@ -62064,7 +62064,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/validator-status.vue 1
>

<div
style="width: 25px; display: flex; justify-content: center;"
style="width: 16px; display: flex; justify-content: center;"
>
<div
class="t-loading--center t-size-s t-loading"
Expand Down Expand Up @@ -62221,7 +62221,6 @@ exports[`csr snapshot test > csr test ./src/form/_example/validator-status.vue 1

<svg
class="t-icon t-icon-add"
style="font-size: 16px; color: rgba(0, 0, 0, 0.267);"
>
<use
href="#t-icon-add"
Expand Down Expand Up @@ -153314,7 +153313,7 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/base.vue 1`] = `
class="t-transfer__operations"
>
<button
class="t-button t-size-m t-button--variant-outline t-button--theme-default"
class="t-button t-size-s t-button--variant-outline t-button--theme-default t-button--shape-square"
type="button"
>

Expand All @@ -153341,7 +153340,7 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/base.vue 1`] = `

</button>
<button
class="t-button t-size-m t-button--variant-outline t-button--theme-default t-is-disabled"
class="t-button t-size-s t-button--variant-outline t-button--theme-default t-is-disabled t-button--shape-square"
disabled=""
type="button"
>
Expand Down Expand Up @@ -153931,7 +153930,7 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/checked.vue 1`] =
class="t-transfer__operations"
>
<button
class="t-button t-size-m t-button--variant-outline t-button--theme-default"
class="t-button t-size-s t-button--variant-outline t-button--theme-default t-button--shape-square"
type="button"
>

Expand All @@ -153958,7 +153957,7 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/checked.vue 1`] =

</button>
<button
class="t-button t-size-m t-button--variant-outline t-button--theme-default t-is-disabled"
class="t-button t-size-s t-button--variant-outline t-button--theme-default t-is-disabled t-button--shape-square"
disabled=""
type="button"
>
Expand Down Expand Up @@ -154042,7 +154041,7 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/checked.vue 1`] =

exports[`csr snapshot test > csr test ./src/transfer/_example/custom.vue 1`] = `
<div
class="t-transfer t-transfer__footer"
class="t-transfer t-transfer__footer tdesign-transfer-custom"
>
<div
class="t-transfer__list t-transfer__list-source"
Expand Down Expand Up @@ -154539,7 +154538,7 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/custom.vue 1`] = `
<!---->

<div
style="padding: 10px; border-top: 1px solid #e7e7e7;"
style="padding: 12px; border-top: 1px solid #e7e7e7;"
>
<span>
选中并加入
Expand All @@ -154551,34 +154550,60 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/custom.vue 1`] = `
class="t-transfer__operations"
>
<button
class="t-button t-size-m t-button--variant-outline t-button--theme-default t-is-disabled"
class="t-button t-size-s t-button--variant-outline t-button--theme-default t-is-disabled"
disabled=""
type="button"
>

<svg
class="t-icon t-icon-chevron-right"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__text"
>


加入


</span>

</button>
<button
class="t-button t-size-m t-button--variant-outline t-button--theme-default t-is-disabled"
class="t-button t-size-s t-button--variant-outline t-button--theme-default t-is-disabled"
disabled=""
type="button"
>

<svg
class="t-icon t-icon-chevron-left"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<span
class="t-button__text"
>


移除


</span>

</button>
</div>
<div
Expand Down Expand Up @@ -154632,7 +154657,7 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/custom.vue 1`] = `
<!---->

<div
style="padding: 10px; border-top: 1px solid #e7e7e7;"
style="padding: 12px; border-top: 1px solid #e7e7e7;"
>
<span>
选中并移除
Expand Down Expand Up @@ -155228,7 +155253,7 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/custom-render.vue
class="t-transfer__operations"
>
<button
class="t-button t-size-m t-button--variant-outline t-button--theme-default t-is-disabled"
class="t-button t-size-s t-button--variant-outline t-button--theme-default t-is-disabled t-button--shape-square"
disabled=""
type="button"
>
Expand Down Expand Up @@ -155256,7 +155281,7 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/custom-render.vue

</button>
<button
class="t-button t-size-m t-button--variant-outline t-button--theme-default t-is-disabled"
class="t-button t-size-s t-button--variant-outline t-button--theme-default t-is-disabled t-button--shape-square"
disabled=""
type="button"
>
Expand Down Expand Up @@ -155621,7 +155646,7 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/disabled.vue 1`] =
class="t-transfer__operations"
>
<button
class="t-button t-size-m t-button--variant-outline t-button--theme-default t-is-disabled"
class="t-button t-size-s t-button--variant-outline t-button--theme-default t-is-disabled t-button--shape-square"
disabled=""
type="button"
>
Expand Down Expand Up @@ -155649,7 +155674,7 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/disabled.vue 1`] =

</button>
<button
class="t-button t-size-m t-button--variant-outline t-button--theme-default t-is-disabled"
class="t-button t-size-s t-button--variant-outline t-button--theme-default t-is-disabled t-button--shape-square"
disabled=""
type="button"
>
Expand Down Expand Up @@ -156046,7 +156071,7 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/empty.vue 1`] = `
class="t-transfer__operations"
>
<button
class="t-button t-size-m t-button--variant-outline t-button--theme-default t-is-disabled"
class="t-button t-size-s t-button--variant-outline t-button--theme-default t-is-disabled t-button--shape-square"
disabled=""
type="button"
>
Expand Down Expand Up @@ -156074,7 +156099,7 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/empty.vue 1`] = `

</button>
<button
class="t-button t-size-m t-button--variant-outline t-button--theme-default t-is-disabled"
class="t-button t-size-s t-button--variant-outline t-button--theme-default t-is-disabled t-button--shape-square"
disabled=""
type="button"
>
Expand Down Expand Up @@ -156229,7 +156254,7 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/empty.vue 1`] = `
class="t-transfer__operations"
>
<button
class="t-button t-size-m t-button--variant-outline t-button--theme-default t-is-disabled"
class="t-button t-size-s t-button--variant-outline t-button--theme-default t-is-disabled t-button--shape-square"
disabled=""
type="button"
>
Expand Down Expand Up @@ -156257,7 +156282,7 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/empty.vue 1`] = `

</button>
<button
class="t-button t-size-m t-button--variant-outline t-button--theme-default t-is-disabled"
class="t-button t-size-s t-button--variant-outline t-button--theme-default t-is-disabled t-button--shape-square"
disabled=""
type="button"
>
Expand Down Expand Up @@ -156720,7 +156745,7 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/pagination.vue 1`]
class="t-transfer__operations"
>
<button
class="t-button t-size-m t-button--variant-outline t-button--theme-default t-is-disabled"
class="t-button t-size-s t-button--variant-outline t-button--theme-default t-is-disabled t-button--shape-square"
disabled=""
type="button"
>
Expand Down Expand Up @@ -156748,7 +156773,7 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/pagination.vue 1`]

</button>
<button
class="t-button t-size-m t-button--variant-outline t-button--theme-default t-is-disabled"
class="t-button t-size-s t-button--variant-outline t-button--theme-default t-is-disabled t-button--shape-square"
disabled=""
type="button"
>
Expand Down Expand Up @@ -157359,7 +157384,7 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/search.vue 1`] = `
class="t-transfer__operations"
>
<button
class="t-button t-size-m t-button--variant-outline t-button--theme-default t-is-disabled"
class="t-button t-size-s t-button--variant-outline t-button--theme-default t-is-disabled t-button--shape-square"
disabled=""
type="button"
>
Expand Down Expand Up @@ -157387,7 +157412,7 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/search.vue 1`] = `

</button>
<button
class="t-button t-size-m t-button--variant-outline t-button--theme-default t-is-disabled"
class="t-button t-size-s t-button--variant-outline t-button--theme-default t-is-disabled t-button--shape-square"
disabled=""
type="button"
>
Expand Down Expand Up @@ -157777,7 +157802,7 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/target-value.vue 1
class="t-transfer__operations"
>
<button
class="t-button t-size-m t-button--variant-outline t-button--theme-default t-is-disabled"
class="t-button t-size-s t-button--variant-outline t-button--theme-default t-is-disabled t-button--shape-square"
disabled=""
type="button"
>
Expand Down Expand Up @@ -157805,7 +157830,7 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/target-value.vue 1

</button>
<button
class="t-button t-size-m t-button--variant-outline t-button--theme-default t-is-disabled"
class="t-button t-size-s t-button--variant-outline t-button--theme-default t-is-disabled t-button--shape-square"
disabled=""
type="button"
>
Expand Down Expand Up @@ -158602,7 +158627,7 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/tree.vue 1`] = `
class="t-transfer__operations"
>
<button
class="t-button t-size-m t-button--variant-outline t-button--theme-default t-is-disabled"
class="t-button t-size-s t-button--variant-outline t-button--theme-default t-is-disabled t-button--shape-square"
disabled=""
type="button"
>
Expand Down Expand Up @@ -158630,7 +158655,7 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/tree.vue 1`] = `

</button>
<button
class="t-button t-size-m t-button--variant-outline t-button--theme-default t-is-disabled"
class="t-button t-size-s t-button--variant-outline t-button--theme-default t-is-disabled t-button--shape-square"
disabled=""
type="button"
>
Expand Down
24 changes: 12 additions & 12 deletions test/snap/__snapshots__/ssr.test.js.snap
View file

Large diffs are not rendered by default.

0 comments on commit 2d04741

Please sign in to comment.