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

[Upload][Refactor] #1561

Merged
merged 8 commits into from
Sep 26, 2022
Merged

[Upload][Refactor] #1561

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4157f9b
feat(upload): initial
chaishi Sep 24, 2022
c7152bc
feat(upload): empty event
chaishi Sep 24, 2022
731a9bb
test(upload): update snapshots
chaishi Sep 24, 2022
47748b9
fix: useVModel value
chaishi Sep 25, 2022
c264d32
fix(upload): lint error
chaishi Sep 25, 2022
9188c4d
test(upload): update snapshots
chaishi Sep 25, 2022
48378e0
feat(upload): resolve conflict
chaishi Sep 26, 2022
efdc423
test(upload): update snapshots
chaishi Sep 26, 2022
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 4 files
+5 −2 docs/web/api/table.md
+1 −0 style/web/components/steps/_index.less
+11 −2 style/web/components/table/_index.less
+1 −0 style/web/components/table/_var.less
151 changes: 46 additions & 105 deletions src/form/__tests__/__snapshots__/demo.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2041,137 +2041,78 @@ exports[`Form Form disabledVue demo works fine 1`] = `
hidden="hidden"
type="file"
/>
<ul
class="t-upload__card"
touploadfiles=""
>
<li
class="t-upload__card-item t-is--background"
<div>
<ul
class="t-upload__card"
>
<div
class="t-upload__card-content t-upload__card-box"
<li
class="t-upload__card-item t-is-background"
>
<img
class="t-upload__card-image"
src="https://tdesign.gtimg.com/site/avatar.jpg"
/>
<div
class="t-upload__card-mask"
class="t-upload__card-content t-upload__card-box"
>
<span
class="t-upload__card-mask-item"
>
<svg
class="t-icon t-icon-browse"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M10.88 8a2.88 2.88 0 11-5.76 0 2.88 2.88 0 015.76 0zm-1 0a1.88 1.88 0 10-3.76 0 1.88 1.88 0 003.76 0z"
fill="currentColor"
fill-opacity="0.9"
/>
<path
d="M1.12 8.23A7.72 7.72 0 008 12.5c2.9 0 5.54-1.63 6.88-4.27L15 8l-.12-.23A7.73 7.73 0 008 3.5a7.74 7.74 0 00-6.88 4.27L1 8l.12.23zM8 11.5A6.73 6.73 0 012.11 8 6.73 6.73 0 0113.9 8 6.74 6.74 0 018 11.5z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
</span>
<span
class="t-upload__card-mask-item-divider"
<img
class="t-upload__card-image"
src="https://tdesign.gtimg.com/site/avatar.jpg"
/>
<span
class="t-upload__card-mask-item"
>
<svg
class="t-icon t-icon-delete"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M6 12V6h1v6H6zM9 6v6h1V6H9z"
fill="currentColor"
fill-opacity="0.9"
/>
<path
d="M10.5 3H14v1h-1v10a1 1 0 01-1 1H4a1 1 0 01-1-1V4H2V3h3.5V1.8c0-.44.36-.8.8-.8h3.4c.44 0 .8.36.8.8V3zm-4 0h3V2h-3v1zM4 4v10h8V4H4z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
</span>
</div>
</div>
</li>
</ul>
<transition-stub
class="t-upload__dialog"
duration="300"
name="t-dialog-zoom__vue"
>
<div
class="t-dialog__ctx t-dialog__ctx--fixed"
style="display: none;"
>
<div
class="t-dialog__mask"
/>
<div
class="t-dialog__wrap"
>
<div
class="t-dialog__position t-dialog--top"
style="padding-top: 10%;"
>
<div
class="t-dialog t-dialog--default t-dialog__modal-default"
style="width: auto;"
class="t-upload__card-mask"
>
<div
class="t-dialog__header"
/>
<span
class="t-dialog__close"
class="t-upload__card-mask-item"
>
<svg
class="t-icon t-icon-close"
class="t-icon t-icon-browse"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z"
d="M10.88 8a2.88 2.88 0 11-5.76 0 2.88 2.88 0 015.76 0zm-1 0a1.88 1.88 0 10-3.76 0 1.88 1.88 0 003.76 0z"
fill="currentColor"
fill-opacity="0.9"
/>
<path
d="M1.12 8.23A7.72 7.72 0 008 12.5c2.9 0 5.54-1.63 6.88-4.27L15 8l-.12-.23A7.73 7.73 0 008 3.5a7.74 7.74 0 00-6.88 4.27L1 8l.12.23zM8 11.5A6.73 6.73 0 012.11 8 6.73 6.73 0 0113.9 8 6.74 6.74 0 018 11.5z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
</span>
<div
class="t-dialog__body"
<span
class="t-upload__card-mask-item-divider"
/>
<span
class="t-upload__card-mask-item"
>
<div
class="t__dialog-body-img-box"
<svg
class="t-icon t-icon-delete"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
>
<img
alt=""
src=""
<path
d="M6 12V6h1v6H6zM9 6v6h1V6H9z"
fill="currentColor"
fill-opacity="0.9"
/>
</div>
</div>
<div
class="t-dialog__footer"
/>
<path
d="M10.5 3H14v1h-1v10a1 1 0 01-1 1H4a1 1 0 01-1-1V4H2V3h3.5V1.8c0-.44.36-.8.8-.8h3.4c.44 0 .8.36.8.8V3zm-4 0h3V2h-3v1zM4 4v10h8V4H4z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
</span>
</div>
</div>
</div>
</div>
</transition-stub>
<div
class="t-upload__card-name"
/>
</li>
</ul>
</div>
<small
class="t-upload__tips t-size-s"
>
Expand Down
2 changes: 2 additions & 0 deletions src/hooks/useGlobalIcon.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,5 @@ export function useGlobalIcon(tdIcon: Record<string, any>) {

return resultIcon;
}

export default useGlobalIcon;
29 changes: 27 additions & 2 deletions src/hooks/useVModel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,20 @@ import kebabCase from 'lodash/kebabCase';

export type ChangeHandler<T, P extends any[]> = (value: T, ...args: P) => void;

export interface UseVModelParams<T> {
value: Ref<T>;
eventName?: string;
propName?: string;
}

export default function useVModel<T, P extends any[]>(
value: Ref<T>,
defaultValue: T,
onChange: ChangeHandler<T, P>,
// eventName 不是 input 时，需要单独传入 eventName 用于事件输出
eventName?: string,
eventName = 'change',
propName = 'value',
// 除了 value + onChange，还支持其他同含义字段和事件
alias: UseVModelParams<T>[] = [],
): [Ref<T>, ChangeHandler<T, P>] {
const { emit, vnode } = getCurrentInstance();
const internalValue = ref<T>();
Expand All @@ -32,6 +39,24 @@ export default function useVModel<T, P extends any[]>(
];
}

// controlled, other fields, upload.files.etc.
for (let i = 0, len = alias.length; i < len; i++) {
const item = alias[i];
if (Object.prototype.hasOwnProperty.call(vnode.componentOptions.propsData, item.propName)) {
return [
item.value,
(newValue, ...args) => {
// .sync support
emit?.(`update:${item.propName}`, newValue, ...args);
onChange?.(newValue, ...args);
if (item.eventName && item.eventName !== 'input') {
emit?.(item.eventName, newValue, ...args);
}
},
];
}
}

// 非受控模式
return [
internalValue,
Expand Down
Loading