transButton.js 2.8 KB

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