transButton.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _extends from "@babel/runtime/helpers/esm/extends";
  3. import { createVNode as _createVNode } from "vue";
  4. var __rest = this && this.__rest || function (s, e) {
  5. var t = {};
  6. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  7. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  8. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  9. }
  10. return t;
  11. };
  12. import { defineComponent, shallowRef, onMounted } from 'vue';
  13. /**
  14. * Wrap of sub component which need use as Button capacity (like Icon component).
  15. * This helps accessibility reader to tread as a interactive button to operation.
  16. */
  17. import KeyCode from './KeyCode';
  18. const inlineStyle = {
  19. border: 0,
  20. background: 'transparent',
  21. padding: 0,
  22. lineHeight: 'inherit',
  23. display: 'inline-block'
  24. };
  25. const TransButton = defineComponent({
  26. compatConfig: {
  27. MODE: 3
  28. },
  29. name: 'TransButton',
  30. inheritAttrs: false,
  31. props: {
  32. noStyle: {
  33. type: Boolean,
  34. default: undefined
  35. },
  36. onClick: Function,
  37. disabled: {
  38. type: Boolean,
  39. default: undefined
  40. },
  41. autofocus: {
  42. type: Boolean,
  43. default: undefined
  44. }
  45. },
  46. setup(props, _ref) {
  47. let {
  48. slots,
  49. emit,
  50. attrs,
  51. expose
  52. } = _ref;
  53. const domRef = shallowRef();
  54. const onKeyDown = event => {
  55. const {
  56. keyCode
  57. } = event;
  58. if (keyCode === KeyCode.ENTER) {
  59. event.preventDefault();
  60. }
  61. };
  62. const onKeyUp = event => {
  63. const {
  64. keyCode
  65. } = event;
  66. if (keyCode === KeyCode.ENTER) {
  67. emit('click', event);
  68. }
  69. };
  70. const onClick = e => {
  71. emit('click', e);
  72. };
  73. const focus = () => {
  74. if (domRef.value) {
  75. domRef.value.focus();
  76. }
  77. };
  78. const blur = () => {
  79. if (domRef.value) {
  80. domRef.value.blur();
  81. }
  82. };
  83. onMounted(() => {
  84. if (props.autofocus) {
  85. focus();
  86. }
  87. });
  88. expose({
  89. focus,
  90. blur
  91. });
  92. return () => {
  93. var _a;
  94. const {
  95. noStyle,
  96. disabled
  97. } = props,
  98. restProps = __rest(props, ["noStyle", "disabled"]);
  99. let mergedStyle = {};
  100. if (!noStyle) {
  101. mergedStyle = _extends({}, inlineStyle);
  102. }
  103. if (disabled) {
  104. mergedStyle.pointerEvents = 'none';
  105. }
  106. return _createVNode("div", _objectSpread(_objectSpread(_objectSpread({
  107. "role": "button",
  108. "tabindex": 0,
  109. "ref": domRef
  110. }, restProps), attrs), {}, {
  111. "onClick": onClick,
  112. "onKeydown": onKeyDown,
  113. "onKeyup": onKeyUp,
  114. "style": _extends(_extends({}, mergedStyle), attrs.style || {})
  115. }), [(_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)]);
  116. };
  117. }
  118. });
  119. export default TransButton;