Search.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. var __defProp = Object.defineProperty;
  2. var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
  3. var __getOwnPropNames = Object.getOwnPropertyNames;
  4. var __hasOwnProp = Object.prototype.hasOwnProperty;
  5. var __export = (target, all) => {
  6. for (var name2 in all)
  7. __defProp(target, name2, { get: all[name2], enumerable: true });
  8. };
  9. var __copyProps = (to, from, except, desc) => {
  10. if (from && typeof from === "object" || typeof from === "function") {
  11. for (let key of __getOwnPropNames(from))
  12. if (!__hasOwnProp.call(to, key) && key !== except)
  13. __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  14. }
  15. return to;
  16. };
  17. var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
  18. var stdin_exports = {};
  19. __export(stdin_exports, {
  20. default: () => stdin_default
  21. });
  22. module.exports = __toCommonJS(stdin_exports);
  23. var import_vue = require("vue");
  24. var import_vue2 = require("vue");
  25. var import_utils = require("../utils");
  26. var import_Field = require("../field/Field");
  27. var import_use_id = require("../composables/use-id");
  28. var import_use_expose = require("../composables/use-expose");
  29. var import_field = require("../field");
  30. const [name, bem, t] = (0, import_utils.createNamespace)("search");
  31. const searchProps = (0, import_utils.extend)({}, import_Field.fieldSharedProps, {
  32. label: String,
  33. shape: (0, import_utils.makeStringProp)("square"),
  34. leftIcon: (0, import_utils.makeStringProp)("search"),
  35. clearable: import_utils.truthProp,
  36. actionText: String,
  37. background: String,
  38. showAction: Boolean
  39. });
  40. var stdin_default = (0, import_vue2.defineComponent)({
  41. name,
  42. props: searchProps,
  43. emits: ["blur", "focus", "clear", "search", "cancel", "click-input", "click-left-icon", "click-right-icon", "update:modelValue"],
  44. setup(props, {
  45. emit,
  46. slots,
  47. attrs
  48. }) {
  49. const id = (0, import_use_id.useId)();
  50. const filedRef = (0, import_vue2.ref)();
  51. const onCancel = () => {
  52. if (!slots.action) {
  53. emit("update:modelValue", "");
  54. emit("cancel");
  55. }
  56. };
  57. const onKeypress = (event) => {
  58. const ENTER_CODE = 13;
  59. if (event.keyCode === ENTER_CODE) {
  60. (0, import_utils.preventDefault)(event);
  61. emit("search", props.modelValue);
  62. }
  63. };
  64. const getInputId = () => props.id || `${id}-input`;
  65. const renderLabel = () => {
  66. if (slots.label || props.label) {
  67. return (0, import_vue.createVNode)("label", {
  68. "class": bem("label"),
  69. "for": getInputId()
  70. }, [slots.label ? slots.label() : props.label]);
  71. }
  72. };
  73. const renderAction = () => {
  74. if (props.showAction) {
  75. const text = props.actionText || t("cancel");
  76. return (0, import_vue.createVNode)("div", {
  77. "class": bem("action"),
  78. "role": "button",
  79. "tabindex": 0,
  80. "onClick": onCancel
  81. }, [slots.action ? slots.action() : text]);
  82. }
  83. };
  84. const blur = () => {
  85. var _a;
  86. return (_a = filedRef.value) == null ? void 0 : _a.blur();
  87. };
  88. const focus = () => {
  89. var _a;
  90. return (_a = filedRef.value) == null ? void 0 : _a.focus();
  91. };
  92. const onBlur = (event) => emit("blur", event);
  93. const onFocus = (event) => emit("focus", event);
  94. const onClear = (event) => emit("clear", event);
  95. const onClickInput = (event) => emit("click-input", event);
  96. const onClickLeftIcon = (event) => emit("click-left-icon", event);
  97. const onClickRightIcon = (event) => emit("click-right-icon", event);
  98. const fieldPropNames = Object.keys(import_Field.fieldSharedProps);
  99. const renderField = () => {
  100. const fieldAttrs = (0, import_utils.extend)({}, attrs, (0, import_utils.pick)(props, fieldPropNames), {
  101. id: getInputId()
  102. });
  103. const onInput = (value) => emit("update:modelValue", value);
  104. return (0, import_vue.createVNode)(import_field.Field, (0, import_vue.mergeProps)({
  105. "ref": filedRef,
  106. "type": "search",
  107. "class": bem("field"),
  108. "border": false,
  109. "onBlur": onBlur,
  110. "onFocus": onFocus,
  111. "onClear": onClear,
  112. "onKeypress": onKeypress,
  113. "onClick-input": onClickInput,
  114. "onClick-left-icon": onClickLeftIcon,
  115. "onClick-right-icon": onClickRightIcon,
  116. "onUpdate:modelValue": onInput
  117. }, fieldAttrs), (0, import_utils.pick)(slots, ["left-icon", "right-icon"]));
  118. };
  119. (0, import_use_expose.useExpose)({
  120. focus,
  121. blur
  122. });
  123. return () => {
  124. var _a;
  125. return (0, import_vue.createVNode)("div", {
  126. "class": bem({
  127. "show-action": props.showAction
  128. }),
  129. "style": {
  130. background: props.background
  131. }
  132. }, [(_a = slots.left) == null ? void 0 : _a.call(slots), (0, import_vue.createVNode)("div", {
  133. "class": bem("content", props.shape)
  134. }, [renderLabel(), renderField()]), renderAction()]);
  135. };
  136. }
  137. });