transButton.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
  10. var _KeyCode = _interopRequireDefault(require("./KeyCode"));
  11. var _excluded = ["noStyle", "disabled"];
  12. /**
  13. * Wrap of sub component which need use as Button capacity (like Icon component).
  14. * This helps accessibility reader to tread as a interactive button to operation.
  15. */
  16. var inlineStyle = {
  17. border: 0,
  18. background: 'transparent',
  19. padding: 0,
  20. lineHeight: 'inherit',
  21. display: 'inline-block'
  22. };
  23. var TransButton = (0, _vue.defineComponent)({
  24. compatConfig: {
  25. MODE: 3
  26. },
  27. name: 'TransButton',
  28. inheritAttrs: false,
  29. props: {
  30. noStyle: {
  31. type: Boolean,
  32. default: undefined
  33. },
  34. onClick: Function,
  35. disabled: {
  36. type: Boolean,
  37. default: undefined
  38. },
  39. autofocus: {
  40. type: Boolean,
  41. default: undefined
  42. }
  43. },
  44. setup: function setup(props, _ref) {
  45. var slots = _ref.slots,
  46. emit = _ref.emit,
  47. attrs = _ref.attrs,
  48. expose = _ref.expose;
  49. var domRef = (0, _vue.ref)();
  50. var onKeyDown = function onKeyDown(event) {
  51. var keyCode = event.keyCode;
  52. if (keyCode === _KeyCode.default.ENTER) {
  53. event.preventDefault();
  54. }
  55. };
  56. var onKeyUp = function onKeyUp(event) {
  57. var keyCode = event.keyCode;
  58. if (keyCode === _KeyCode.default.ENTER) {
  59. emit('click', event);
  60. }
  61. };
  62. var onClick = function onClick(e) {
  63. emit('click', e);
  64. };
  65. var focus = function focus() {
  66. if (domRef.value) {
  67. domRef.value.focus();
  68. }
  69. };
  70. var blur = function blur() {
  71. if (domRef.value) {
  72. domRef.value.blur();
  73. }
  74. };
  75. (0, _vue.onMounted)(function () {
  76. if (props.autofocus) {
  77. focus();
  78. }
  79. });
  80. expose({
  81. focus: focus,
  82. blur: blur
  83. });
  84. return function () {
  85. var _slots$default;
  86. var noStyle = props.noStyle,
  87. disabled = props.disabled,
  88. restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
  89. var mergedStyle = {};
  90. if (!noStyle) {
  91. mergedStyle = (0, _objectSpread2.default)({}, inlineStyle);
  92. }
  93. if (disabled) {
  94. mergedStyle.pointerEvents = 'none';
  95. }
  96. return (0, _vue.createVNode)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
  97. "role": "button",
  98. "tabindex": 0,
  99. "ref": domRef
  100. }, restProps), attrs), {}, {
  101. "onClick": onClick,
  102. "onKeydown": onKeyDown,
  103. "onKeyup": onKeyUp,
  104. "style": (0, _objectSpread2.default)((0, _objectSpread2.default)({}, mergedStyle), attrs.style || {})
  105. }), [(_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)]);
  106. };
  107. }
  108. });
  109. var _default = TransButton;
  110. exports.default = _default;