transButton.js 3.3 KB

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