NumberKeyboardKey.mjs 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import { ref, defineComponent, createVNode as _createVNode } from "vue";
  2. import { numericProp, createNamespace, preventDefault } from "../utils/index.mjs";
  3. import { useTouch } from "../composables/use-touch.mjs";
  4. import { Loading } from "../loading/index.mjs";
  5. const [name, bem] = createNamespace("key");
  6. const CollapseIcon = _createVNode("svg", {
  7. "class": bem("collapse-icon"),
  8. "viewBox": "0 0 30 24"
  9. }, [_createVNode("path", {
  10. "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",
  11. "fill": "currentColor"
  12. }, null)]);
  13. const DeleteIcon = _createVNode("svg", {
  14. "class": bem("delete-icon"),
  15. "viewBox": "0 0 32 22"
  16. }, [_createVNode("path", {
  17. "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",
  18. "fill": "currentColor"
  19. }, null)]);
  20. var stdin_default = defineComponent({
  21. name,
  22. props: {
  23. type: String,
  24. text: numericProp,
  25. color: String,
  26. wider: Boolean,
  27. large: Boolean,
  28. loading: Boolean
  29. },
  30. emits: ["press"],
  31. setup(props, {
  32. emit,
  33. slots
  34. }) {
  35. const active = ref(false);
  36. const touch = useTouch();
  37. const onTouchStart = (event) => {
  38. touch.start(event);
  39. active.value = true;
  40. };
  41. const onTouchMove = (event) => {
  42. touch.move(event);
  43. if (touch.direction.value) {
  44. active.value = false;
  45. }
  46. };
  47. const onTouchEnd = (event) => {
  48. if (active.value) {
  49. if (!slots.default) {
  50. preventDefault(event);
  51. }
  52. active.value = false;
  53. emit("press", props.text, props.type);
  54. }
  55. };
  56. const renderContent = () => {
  57. if (props.loading) {
  58. return _createVNode(Loading, {
  59. "class": bem("loading-icon")
  60. }, null);
  61. }
  62. const text = slots.default ? slots.default() : props.text;
  63. switch (props.type) {
  64. case "delete":
  65. return text || DeleteIcon;
  66. case "extra":
  67. return text || CollapseIcon;
  68. default:
  69. return text;
  70. }
  71. };
  72. return () => _createVNode("div", {
  73. "class": bem("wrapper", {
  74. wider: props.wider
  75. }),
  76. "onTouchstartPassive": onTouchStart,
  77. "onTouchmovePassive": onTouchMove,
  78. "onTouchend": onTouchEnd,
  79. "onTouchcancel": onTouchEnd
  80. }, [_createVNode("div", {
  81. "role": "button",
  82. "tabindex": 0,
  83. "class": bem([props.color, {
  84. large: props.large,
  85. active: active.value,
  86. delete: props.type === "delete"
  87. }])
  88. }, [renderContent()])]);
  89. }
  90. });
  91. export {
  92. stdin_default as default
  93. };