ant-design-vue/components/vc-pagination/Options.tsx

176 lines
5.1 KiB
Vue
Raw Normal View History

3.0 ready (#4523) * refactor: transfer、tooltip (#4306) * refactor(transfer): use composition api (#4135) * refactor(transfer): use composition api * fix: remove console * refactor(tooltip): use composition api (#4059) * refactor(tooltip): use composition api * chore: useConfigInject * fix: remove useless * style: format code * refactor: transfer * refactor: tooltip Co-authored-by: ajuner <106791576@qq.com> * Refactor mentions (#4341) * refactor(mentions): use compositionAPI (#4313) * refactor: mentions * refactor: mentions Co-authored-by: ajuner <106791576@qq.com> * Refactor progress (#4358) * fix: timepicker error border not show #4331 * fix(UploadDragger): fix UploadDrager no export (#4334) * refactor(switch): support customize checked value #4329 (#4332) * refactor(switch): support customize checked value #4329 * test: add test case * refactor: update props name * refactor: update ts * refactor: optimize * style: uncheckedValue to unCheckedValue * test: update snap * feat: udpate switch ts * docs: remove ie11 * fix: tree-select throw error when use slot title * fix: TypeScript definition of Table interface for typescript 4.3.5 (#4353) * fix type for typescript 4.3.5 * Update interface.ts close #4296 * fix: dropdown submenu style error #4351 close #4351 * fix(notification): 完善notification类型 (#4346) * refactor(progress): use composition API (#4355) * refactor(progress): use composition API * refactor(vc-progress): update * refactor: progress * refactor: progress * fix: timepicker error border not show #4331 * fix(UploadDragger): fix UploadDrager no export (#4334) * refactor(switch): support customize checked value #4329 (#4332) * refactor(switch): support customize checked value #4329 * test: add test case * refactor: update props name * refactor: update ts * refactor: optimize * style: uncheckedValue to unCheckedValue * test: update snap * feat: udpate switch ts * docs: remove ie11 * fix: tree-select throw error when use slot title * fix: TypeScript definition of Table interface for typescript 4.3.5 (#4353) * fix type for typescript 4.3.5 * Update interface.ts close #4296 * fix: dropdown submenu style error #4351 close #4351 * fix(notification): 完善notification类型 (#4346) * refactor(progress): use composition API (#4355) * refactor(progress): use composition API * refactor(vc-progress): update * refactor: progress * refactor: progress Co-authored-by: Jarvis <35361626+fanhaoyuan@users.noreply.github.com> Co-authored-by: John <John60676@qq.com> Co-authored-by: 艾斯特洛 <axetroy.dev@gmail.com> Co-authored-by: zanllp <qc@zanllp.cn> * docs: add changelog * refactor: tree * refactor: tree * style: lint * refactor: tree * 热factor: tree * refactor: tree * refactor: tree * refactor: tree * refactor: directory tree * refactor: tree * refactor: tree-select * refactor: tree-select * refactor: tree-select * refactor: tree-select * refactor: tree-select * style: lint format * refactor: tree-select * refactor: tree-select * refactor: tree-select * refactor: tree-select * refactor: tree-select * refactor: tree-select * fix: upload ts error * fix: update tree title render & switchIcon * test: update tree test * feat: add VirtualScroll tree * refactor: datePicker & calendar & trigger (#4522) * style: update * test: update calendar test * test: update test * test: update test * refactor: slider * feat: update slider css * refactor: slider to ts * refactor: slider to ts * perf: update default itemHeight * test: update * fix: uddate ts type * fix: update skeleton * fix: update skeleton * refactor: update vc-pagination * refactor: pagination * refactor: timeline * refactor: steps * refactor: collapse * refactor: collapse * refactor: popconfirm * refactor: popover * refactor: dropdown * doc: merge doc * chore: vite for dev (#4602) * style: js to jsx * doc: add site * style: lint * style: format ts type * doc: update * style: format code * style: format site * doc: update * style: dmeo * style: format scripts * chore: remove sub-modules * chore: update vite * site: add site build * test: update snap * doc(select): add tip (#4606) * refactor: table (#4641) * refactor: table * refactor: table * refactor: table * refactor: table * refactor: table * refactor: table * refactor: table * refactor: table * refactor: table * fix: column not pass to cell * doc: uppate table * fix: update bodyCell headerCell * doc: remove examples * refactor: table * fix: table title not work * fix: table selection * fix: table checkStrictly * refactor: table * fix: table template error * feat: table support summary * test: update snap * perf: table * docs(table): fix ajax demo (#4639) * test: update table * refactor: remove old table * doc: update table doc * doc: update doc * doc: update select * doc: update summary Co-authored-by: John <John60676@qq.com> * doc: update doc * fix: menu arrow not work * test: update * doc: add next site * style: format * doc: update * doc: update site script * fix: expand icon not fixed * feat: use renderSlot * test: update table snap * feat: confirm support reactively * feat: configProvider.config * feat: message support configprovider.config * feat: notification support configprovider.config * doc: update doc * fix: typescript compile error * style: add import eslint * doc: update demo * chore: set transpileOnly true * style: fix eslint error * test: update snap * doc: update * test: mock date * test: update snap * chore: remove gulp-typescript (#4675) * feat: V3 form (#4678) * chore: update husky * perf: update formItem * perf: useInjectFormItemContext * fix: table ts error * doc: add Customized Form Controls demo * feat: export useInjectFormItemContext * doc: update form doc * doc: update doc * doc: update doc * feat: autocomplete support option slot * doc: update * feat: add form item rest * style: remove omit.js * refactor: autocomplete * doc: add changelog to site * doc: update site anchor * doc: update doc layout * test: update table test * doc: update * chore: udpate gulp script * chore: udpate gulp script * doc: add changelog * doc: update * test: ignore some test wait vue-test-utils * fix: form id error #4582 close #4582 * doc: add select Responsive demo * doc: remove temp doc Co-authored-by: ajuner <106791576@qq.com> Co-authored-by: Jarvis <35361626+fanhaoyuan@users.noreply.github.com> Co-authored-by: John <John60676@qq.com> Co-authored-by: 艾斯特洛 <axetroy.dev@gmail.com> Co-authored-by: zanllp <qc@zanllp.cn> Co-authored-by: Amour1688 <lcz_1996@foxmail.com>
2021-09-25 08:51:32 +00:00
import PropTypes from '../_util/vue-types';
import KEYCODE from './KeyCode';
import { computed, defineComponent, ref, withDirectives } from 'vue';
import antInput from '../_util/antInputDirective';
import type { EventHandler } from '../_util/EventInterface';
export default defineComponent({
props: {
disabled: PropTypes.looseBool,
changeSize: PropTypes.func,
quickGo: PropTypes.func,
selectComponentClass: PropTypes.any,
current: PropTypes.number,
pageSizeOptions: PropTypes.array.def(['10', '20', '50', '100']),
pageSize: PropTypes.number,
buildOptionText: PropTypes.func,
locale: PropTypes.object,
rootPrefixCls: PropTypes.string,
selectPrefixCls: PropTypes.string,
goButton: PropTypes.any,
},
setup(props) {
const goInputText = ref('');
const validValue = computed(() => {
return !goInputText.value || isNaN(goInputText.value as any)
? undefined
: Number(goInputText.value);
});
const defaultBuildOptionText = opt => {
return `${opt.value} ${props.locale.items_per_page}`;
};
const handleChange: EventHandler = e => {
const { value, composing } = e.target;
if (e.isComposing || composing || goInputText.value === value) return;
goInputText.value = value;
};
const handleBlur: EventHandler = e => {
const { goButton, quickGo, rootPrefixCls } = props;
if (goButton || goInputText.value === '') {
return;
}
if (
e.relatedTarget &&
(e.relatedTarget.className.indexOf(`${rootPrefixCls}-item-link`) >= 0 ||
e.relatedTarget.className.indexOf(`${rootPrefixCls}-item`) >= 0)
) {
goInputText.value = '';
return;
} else {
quickGo(validValue.value);
goInputText.value = '';
}
};
const go: EventHandler = e => {
if (goInputText.value === '') {
return;
}
if (e.keyCode === KEYCODE.ENTER || e.type === 'click') {
// https://github.com/vueComponent/ant-design-vue/issues/1316
props.quickGo(validValue.value);
goInputText.value = '';
}
};
const pageSizeOptions = computed(() => {
const { pageSize, pageSizeOptions } = props;
if (pageSizeOptions.some(option => option.toString() === pageSize.toString())) {
return pageSizeOptions;
}
return pageSizeOptions.concat([pageSize.toString()]).sort((a, b) => {
// eslint-disable-next-line no-restricted-globals
const numberA = isNaN(Number(a)) ? 0 : Number(a);
// eslint-disable-next-line no-restricted-globals
const numberB = isNaN(Number(b)) ? 0 : Number(b);
return numberA - numberB;
});
});
return () => {
const {
rootPrefixCls,
locale,
changeSize,
quickGo,
goButton,
selectComponentClass: Select,
selectPrefixCls,
pageSize,
disabled,
} = props;
const prefixCls = `${rootPrefixCls}-options`;
let changeSelect = null;
let goInput = null;
let gotoButton = null;
if (!changeSize && !quickGo) {
return null;
}
if (changeSize && Select) {
const buildOptionText = props.buildOptionText || defaultBuildOptionText;
const options = pageSizeOptions.value.map((opt, i) => (
<Select.Option key={i} value={opt}>
{buildOptionText({ value: opt })}
</Select.Option>
));
changeSelect = (
<Select
disabled={disabled}
prefixCls={selectPrefixCls}
showSearch={false}
class={`${prefixCls}-size-changer`}
optionLabelProp="children"
value={(pageSize || pageSizeOptions.value[0]).toString()}
onChange={value => changeSize(Number(value))}
getPopupContainer={triggerNode => triggerNode.parentNode}
>
{options}
</Select>
);
}
if (quickGo) {
if (goButton) {
gotoButton =
typeof goButton === 'boolean' ? (
<button
type="button"
onClick={go}
onKeyup={go}
disabled={disabled}
class={`${prefixCls}-quick-jumper-button`}
>
{locale.jump_to_confirm}
</button>
) : (
<span onClick={go} onKeyup={go}>
{goButton}
</span>
);
}
goInput = (
<div class={`${prefixCls}-quick-jumper`}>
{locale.jump_to}
{withDirectives(
<input
disabled={disabled}
type="text"
value={goInputText.value}
onInput={handleChange}
onChange={handleChange}
onKeyup={go}
onBlur={handleBlur}
/>,
[[antInput]],
)}
{locale.page}
{gotoButton}
</div>
);
}
return (
<li class={`${prefixCls}`}>
{changeSelect}
{goInput}
</li>
);
};
},
});