Search.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  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_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_vue.defineComponent)({
  41. name,
  42. props: searchProps,
  43. emits: ["blur", "focus", "clear", "search", "cancel", "clickInput", "clickLeftIcon", "clickRightIcon", "update:modelValue"],
  44. setup(props, {
  45. emit,
  46. slots,
  47. attrs
  48. }) {
  49. const id = (0, import_use_id.useId)();
  50. const fieldRef = (0, import_vue.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. "data-allow-mismatch": "attribute"
  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 = fieldRef.value) == null ? void 0 : _a.blur();
  88. };
  89. const focus = () => {
  90. var _a;
  91. return (_a = fieldRef.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": fieldRef,
  107. "type": "search",
  108. "class": bem("field", {
  109. "with-message": fieldAttrs.errorMessage
  110. }),
  111. "border": false,
  112. "onBlur": onBlur,
  113. "onFocus": onFocus,
  114. "onClear": onClear,
  115. "onKeypress": onKeypress,
  116. "onClickInput": onClickInput,
  117. "onClickLeftIcon": onClickLeftIcon,
  118. "onClickRightIcon": onClickRightIcon,
  119. "onUpdate:modelValue": onInput
  120. }, fieldAttrs), (0, import_utils.pick)(slots, ["left-icon", "right-icon"]));
  121. };
  122. (0, import_use_expose.useExpose)({
  123. focus,
  124. blur
  125. });
  126. return () => {
  127. var _a;
  128. return (0, import_vue.createVNode)("div", {
  129. "class": bem({
  130. "show-action": props.showAction
  131. }),
  132. "style": {
  133. background: props.background
  134. }
  135. }, [(_a = slots.left) == null ? void 0 : _a.call(slots), (0, import_vue.createVNode)("div", {
  136. "class": bem("content", props.shape)
  137. }, [renderLabel(), renderField()]), renderAction()]);
  138. };
  139. }
  140. });