NumberKeyboardKey.mjs 3.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. import { createVNode as _createVNode } from "vue";
  2. import { ref, defineComponent } from "vue";
  3. import { numericProp, createNamespace, preventDefault } from "../utils/index.mjs";
  4. import { useTouch } from "../composables/use-touch.mjs";
  5. import { Loading } from "../loading/index.mjs";
  6. const [name, bem] = createNamespace("key");
  7. const CollapseIcon = _createVNode("svg", {
  8. "class": bem("collapse-icon"),
  9. "viewBox": "0 0 30 24"
  10. }, [_createVNode("path", {
  11. "d": "M26 13h-2v2h2v-2zm-8-3h2V8h-2v2zm2-4h2V4h-2v2zm2 4h4V4h-2v4h-2v2zm-7 14 3-3h-6l3 3zM6 13H4v2h2v-2zm16 0H8v2h14v-2zm-12-3h2V8h-2v2zM28 0l1 1 1 1v15l-1 2H1l-1-2V2l1-1 1-1zm0 2H2v15h26V2zM6 4v2H4V4zm10 2h2V4h-2v2zM8 9v1H4V8zm8 0v1h-2V8zm-6-5v2H8V4zm4 0v2h-2V4z",
  12. "fill": "currentColor"
  13. }, null)]);
  14. const DeleteIcon = _createVNode("svg", {
  15. "class": bem("delete-icon"),
  16. "viewBox": "0 0 32 22"
  17. }, [_createVNode("path", {
  18. "d": "M28 0a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H10.4a2 2 0 0 1-1.4-.6L1 13.1c-.6-.5-.9-1.3-.9-2 0-1 .3-1.7.9-2.2L9 .6a2 2 0 0 1 1.4-.6zm0 2H10.4l-8.2 8.3a1 1 0 0 0-.3.7c0 .3.1.5.3.7l8.2 8.4H28a2 2 0 0 0 2-2V4c0-1.1-.9-2-2-2zm-5 4a1 1 0 0 1 .7.3 1 1 0 0 1 0 1.4L20.4 11l3.3 3.3c.2.2.3.5.3.7 0 .3-.1.5-.3.7a1 1 0 0 1-.7.3 1 1 0 0 1-.7-.3L19 12.4l-3.4 3.3a1 1 0 0 1-.6.3 1 1 0 0 1-.7-.3 1 1 0 0 1-.3-.7c0-.2.1-.5.3-.7l3.3-3.3-3.3-3.3A1 1 0 0 1 14 7c0-.3.1-.5.3-.7A1 1 0 0 1 15 6a1 1 0 0 1 .6.3L19 9.6l3.3-3.3A1 1 0 0 1 23 6z",
  19. "fill": "currentColor"
  20. }, null)]);
  21. var stdin_default = defineComponent({
  22. name,
  23. props: {
  24. type: String,
  25. text: numericProp,
  26. color: String,
  27. wider: Boolean,
  28. large: Boolean,
  29. loading: Boolean
  30. },
  31. emits: ["press"],
  32. setup(props, {
  33. emit,
  34. slots
  35. }) {
  36. const active = ref(false);
  37. const touch = useTouch();
  38. const onTouchStart = (event) => {
  39. touch.start(event);
  40. active.value = true;
  41. };
  42. const onTouchMove = (event) => {
  43. touch.move(event);
  44. if (touch.direction.value) {
  45. active.value = false;
  46. }
  47. };
  48. const onTouchEnd = (event) => {
  49. if (active.value) {
  50. if (!slots.default) {
  51. preventDefault(event);
  52. }
  53. active.value = false;
  54. emit("press", props.text, props.type);
  55. }
  56. };
  57. const renderContent = () => {
  58. if (props.loading) {
  59. return _createVNode(Loading, {
  60. "class": bem("loading-icon")
  61. }, null);
  62. }
  63. const text = slots.default ? slots.default() : props.text;
  64. switch (props.type) {
  65. case "delete":
  66. return text || DeleteIcon;
  67. case "extra":
  68. return text || CollapseIcon;
  69. default:
  70. return text;
  71. }
  72. };
  73. return () => _createVNode("div", {
  74. "class": bem("wrapper", {
  75. wider: props.wider
  76. }),
  77. "onTouchstartPassive": onTouchStart,
  78. "onTouchmovePassive": onTouchMove,
  79. "onTouchend": onTouchEnd,
  80. "onTouchcancel": onTouchEnd
  81. }, [_createVNode("div", {
  82. "role": "button",
  83. "tabindex": 0,
  84. "class": bem([props.color, {
  85. large: props.large,
  86. active: active.value,
  87. delete: props.type === "delete"
  88. }])
  89. }, [renderContent()])]);
  90. }
  91. });
  92. export {
  93. stdin_default as default
  94. };