Search.js 4.9 KB

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