@opentiny/vue-search-box 0.1.4 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -14,7 +14,9 @@
14
14
  --tvp-SearchBox-right-icon-color-hover: var(--tv-color-icon-hover, #191919);
15
15
  --tvp-SearchBox-left-icon-font-size: var(--tv-font-size-heading-xs, 16px);
16
16
  --tvp-SearchBox-min-height: var(--tv-size-height-md, 32px);
17
+ --tvp-SearchBox-small-min-height: var(--tv-size-height-sm, 28px);
17
18
  --tvp-SearchBox-padding-left: var(--tv-size-height-md, 32px);
19
+ --tvp-SearchBox-small-padding-left: var(--tv-size-height-sm, 28px);
18
20
  --tvp-SearchBox-dropdown-keyword-text-color: var(--tv-color-act-info-text-active, #1476ff);
19
21
  --tvp-SearchBox-dropdown-btn-group-border-color: var(--tv-color-bg-header, #f0f0f0);
20
22
  --tvp-SearchBox-dropdown-btn-group-margin-top: var(--tv-space-md, 8px);
@@ -25,6 +27,7 @@
25
27
  --tvp-SearchBox-place-padding-right: var(--tv-space-sm, 4px);
26
28
  --tvp-SearchBox-tag-bottom-border-color: var(--tv-color-act-primary-text-active, #191919);
27
29
  --tvp-SearchBox-tag-font-size: var(--tv-font-size-md, 14px);
30
+ --tvp-SearchBox-small-tag-font-size: var(--tv-font-size-sm, 12px);
28
31
  --tvp-SearchBox-dropdown-desc-font-size: var(--tv-font-size-md, 14px);
29
32
  --tvp-SearchBox-dropdown-desc-text-color: var(--tv-color-info-text-primary, #191919);
30
33
  width: 232px;
@@ -129,7 +132,9 @@
129
132
  --tvp-SearchBox-right-icon-color-hover: var(--tv-color-icon-hover, #191919);
130
133
  --tvp-SearchBox-left-icon-font-size: var(--tv-font-size-heading-xs, 16px);
131
134
  --tvp-SearchBox-min-height: var(--tv-size-height-md, 32px);
135
+ --tvp-SearchBox-small-min-height: var(--tv-size-height-sm, 28px);
132
136
  --tvp-SearchBox-padding-left: var(--tv-size-height-md, 32px);
137
+ --tvp-SearchBox-small-padding-left: var(--tv-size-height-sm, 28px);
133
138
  --tvp-SearchBox-dropdown-keyword-text-color: var(--tv-color-act-info-text-active, #1476ff);
134
139
  --tvp-SearchBox-dropdown-btn-group-border-color: var(--tv-color-bg-header, #f0f0f0);
135
140
  --tvp-SearchBox-dropdown-btn-group-margin-top: var(--tv-space-md, 8px);
@@ -140,6 +145,7 @@
140
145
  --tvp-SearchBox-place-padding-right: var(--tv-space-sm, 4px);
141
146
  --tvp-SearchBox-tag-bottom-border-color: var(--tv-color-act-primary-text-active, #191919);
142
147
  --tvp-SearchBox-tag-font-size: var(--tv-font-size-md, 14px);
148
+ --tvp-SearchBox-small-tag-font-size: var(--tv-font-size-sm, 12px);
143
149
  --tvp-SearchBox-dropdown-desc-font-size: var(--tv-font-size-md, 14px);
144
150
  --tvp-SearchBox-dropdown-desc-text-color: var(--tv-color-info-text-primary, #191919);
145
151
  display: flex;
@@ -379,3 +385,17 @@
379
385
  .tvp-search-box__input-wrapper .tvp-search-box__dropdown .tvp-search-box__input .tiny-input__inner {
380
386
  padding-left: 0px;
381
387
  }
388
+ .tvp-search-box--small {
389
+ min-height: var(--tvp-SearchBox-small-min-height);
390
+ padding-left: var(--tvp-SearchBox-small-padding-left);
391
+ }
392
+ .tvp-search-box--small > .tvp-search-box__prefix {
393
+ top: calc((var(--tvp-SearchBox-small-min-height) - var(--tvp-SearchBox-left-icon-font-size)) / 2 - 1px);
394
+ left: 10px;
395
+ }
396
+ .tvp-search-box--small .tvp-search-box__prop {
397
+ font-size: var(--tvp-SearchBox-small-tag-font-size);
398
+ }
399
+ .tvp-search-box--small .tvp-search-box__prop span {
400
+ padding-left: 8px;
401
+ }
@@ -1,4 +1,4 @@
1
- import { defineComponent, reactive, computed, getCurrentInstance, nextTick, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, withModifiers, unref, createVNode, createCommentVNode, Fragment, renderList, createBlock, normalizeClass, withCtx, createElementVNode, toDisplayString, withDirectives, vShow, withKeys, normalizeStyle, renderSlot, mergeProps, createTextVNode } from "vue";
1
+ import { defineComponent, reactive, computed, getCurrentInstance, nextTick, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, withModifiers, unref, normalizeClass, createVNode, createCommentVNode, Fragment, renderList, createBlock, withCtx, createElementVNode, toDisplayString, withDirectives, vShow, withKeys, normalizeStyle, renderSlot, mergeProps, createTextVNode } from "vue";
2
2
  import TinyTag from "@opentiny/vue-tag";
3
3
  import TinyInput from "@opentiny/vue-input";
4
4
  import TinyDropdown from "@opentiny/vue-dropdown";
@@ -132,6 +132,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
132
132
  splitInputValue: {
133
133
  type: String,
134
134
  default: ","
135
+ },
136
+ // 尺寸
137
+ size: {
138
+ type: String,
139
+ default: ""
135
140
  }
136
141
  },
137
142
  emits: ["update:modelValue", "change", "search", "exceed", "first-level-select", "clear"],
@@ -340,7 +345,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
340
345
  });
341
346
  return (_ctx, _cache) => {
342
347
  return openBlock(), createElementBlock("div", {
343
- class: "tvp-search-box",
348
+ class: normalizeClass(["tvp-search-box", __props.size === "small" ? "tvp-search-box--small" : ""]),
344
349
  onClick: _cache[21] || (_cache[21] = withModifiers(($event) => unref(showPopover)(state, false), ["stop"]))
345
350
  }, [
346
351
  createVNode(unref(TinyIconSearch), { class: "tvp-search-box__prefix" }),
@@ -348,6 +353,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
348
353
  return openBlock(), createBlock(unref(TinyTag), {
349
354
  key: tag.field + index,
350
355
  closable: "",
356
+ size: __props.size === "small" ? "small" : "",
351
357
  class: normalizeClass(["tvp-search-box__tag", __props.editable && tag.type !== "map" ? "tvp-search-box__tag-editor" : ""]),
352
358
  title: `${tag.label} ${tag.operator || ":"} ${tag.value}`,
353
359
  onClose: ($event) => unref(deleteTag)(tag),
@@ -357,7 +363,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
357
363
  createElementVNode("span", _hoisted_1, toDisplayString(tag.label) + " " + toDisplayString(tag.operator || ":") + " " + toDisplayString(tag.value), 1)
358
364
  ]),
359
365
  _: 2
360
- }, 1032, ["class", "title", "onClose", "onClick"]);
366
+ }, 1032, ["size", "class", "title", "onClose", "onClick"]);
361
367
  }), 128)),
362
368
  __props.modelValue.length ? (openBlock(), createElementBlock("span", _hoisted_2)) : createCommentVNode("", true),
363
369
  createVNode(unref(TinyForm), {
@@ -365,6 +371,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
365
371
  model: state,
366
372
  rules: state.formRules,
367
373
  "validate-type": state.validType,
374
+ size: __props.size === "small" ? "small" : "",
368
375
  "label-width": "0px",
369
376
  "message-type": "block",
370
377
  class: "tvp-search-box__form"
@@ -386,6 +393,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
386
393
  trigger: "click",
387
394
  class: "tvp-search-box__dropdown",
388
395
  "show-icon": false,
396
+ size: __props.size === "small" ? "small" : "",
389
397
  "lazy-show-popper": "",
390
398
  "close-on-click-outside": true
391
399
  }, {
@@ -498,7 +506,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
498
506
  }, 8, ["modelValue", "placeholder", "maxlength", "onKeydown", "onInput", "onClick"])
499
507
  ]),
500
508
  _: 3
501
- }, 8, ["visible"])
509
+ }, 8, ["visible", "size"])
502
510
  ]),
503
511
  __props.editable ? (openBlock(), createBlock(unref(TinyPopover), {
504
512
  key: 0,
@@ -762,8 +770,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
762
770
  }, 8, ["modelValue"])) : createCommentVNode("", true)
763
771
  ]),
764
772
  _: 3
765
- }, 8, ["model", "rules", "validate-type"])
766
- ]);
773
+ }, 8, ["model", "rules", "validate-type", "size"])
774
+ ], 2);
767
775
  };
768
776
  }
769
777
  });
package/dist/index.css CHANGED
@@ -14,7 +14,9 @@
14
14
  --tvp-SearchBox-right-icon-color-hover: var(--tv-color-icon-hover, #191919);
15
15
  --tvp-SearchBox-left-icon-font-size: var(--tv-font-size-heading-xs, 16px);
16
16
  --tvp-SearchBox-min-height: var(--tv-size-height-md, 32px);
17
+ --tvp-SearchBox-small-min-height: var(--tv-size-height-sm, 28px);
17
18
  --tvp-SearchBox-padding-left: var(--tv-size-height-md, 32px);
19
+ --tvp-SearchBox-small-padding-left: var(--tv-size-height-sm, 28px);
18
20
  --tvp-SearchBox-dropdown-keyword-text-color: var(--tv-color-act-info-text-active, #1476ff);
19
21
  --tvp-SearchBox-dropdown-btn-group-border-color: var(--tv-color-bg-header, #f0f0f0);
20
22
  --tvp-SearchBox-dropdown-btn-group-margin-top: var(--tv-space-md, 8px);
@@ -25,6 +27,7 @@
25
27
  --tvp-SearchBox-place-padding-right: var(--tv-space-sm, 4px);
26
28
  --tvp-SearchBox-tag-bottom-border-color: var(--tv-color-act-primary-text-active, #191919);
27
29
  --tvp-SearchBox-tag-font-size: var(--tv-font-size-md, 14px);
30
+ --tvp-SearchBox-small-tag-font-size: var(--tv-font-size-sm, 12px);
28
31
  --tvp-SearchBox-dropdown-desc-font-size: var(--tv-font-size-md, 14px);
29
32
  --tvp-SearchBox-dropdown-desc-text-color: var(--tv-color-info-text-primary, #191919);
30
33
  width: 232px;
@@ -129,7 +132,9 @@
129
132
  --tvp-SearchBox-right-icon-color-hover: var(--tv-color-icon-hover, #191919);
130
133
  --tvp-SearchBox-left-icon-font-size: var(--tv-font-size-heading-xs, 16px);
131
134
  --tvp-SearchBox-min-height: var(--tv-size-height-md, 32px);
135
+ --tvp-SearchBox-small-min-height: var(--tv-size-height-sm, 28px);
132
136
  --tvp-SearchBox-padding-left: var(--tv-size-height-md, 32px);
137
+ --tvp-SearchBox-small-padding-left: var(--tv-size-height-sm, 28px);
133
138
  --tvp-SearchBox-dropdown-keyword-text-color: var(--tv-color-act-info-text-active, #1476ff);
134
139
  --tvp-SearchBox-dropdown-btn-group-border-color: var(--tv-color-bg-header, #f0f0f0);
135
140
  --tvp-SearchBox-dropdown-btn-group-margin-top: var(--tv-space-md, 8px);
@@ -140,6 +145,7 @@
140
145
  --tvp-SearchBox-place-padding-right: var(--tv-space-sm, 4px);
141
146
  --tvp-SearchBox-tag-bottom-border-color: var(--tv-color-act-primary-text-active, #191919);
142
147
  --tvp-SearchBox-tag-font-size: var(--tv-font-size-md, 14px);
148
+ --tvp-SearchBox-small-tag-font-size: var(--tv-font-size-sm, 12px);
143
149
  --tvp-SearchBox-dropdown-desc-font-size: var(--tv-font-size-md, 14px);
144
150
  --tvp-SearchBox-dropdown-desc-text-color: var(--tv-color-info-text-primary, #191919);
145
151
  display: flex;
@@ -379,3 +385,17 @@
379
385
  .tvp-search-box__input-wrapper .tvp-search-box__dropdown .tvp-search-box__input .tiny-input__inner {
380
386
  padding-left: 0px;
381
387
  }
388
+ .tvp-search-box--small {
389
+ min-height: var(--tvp-SearchBox-small-min-height);
390
+ padding-left: var(--tvp-SearchBox-small-padding-left);
391
+ }
392
+ .tvp-search-box--small > .tvp-search-box__prefix {
393
+ top: calc((var(--tvp-SearchBox-small-min-height) - var(--tvp-SearchBox-left-icon-font-size)) / 2 - 1px);
394
+ left: 10px;
395
+ }
396
+ .tvp-search-box--small .tvp-search-box__prop {
397
+ font-size: var(--tvp-SearchBox-small-tag-font-size);
398
+ }
399
+ .tvp-search-box--small .tvp-search-box__prop span {
400
+ padding-left: 8px;
401
+ }
@@ -14,7 +14,9 @@
14
14
  --tvp-SearchBox-right-icon-color-hover: var(--tv-color-icon-hover, #191919);
15
15
  --tvp-SearchBox-left-icon-font-size: var(--tv-font-size-heading-xs, 16px);
16
16
  --tvp-SearchBox-min-height: var(--tv-size-height-md, 32px);
17
+ --tvp-SearchBox-small-min-height: var(--tv-size-height-sm, 28px);
17
18
  --tvp-SearchBox-padding-left: var(--tv-size-height-md, 32px);
19
+ --tvp-SearchBox-small-padding-left: var(--tv-size-height-sm, 28px);
18
20
  --tvp-SearchBox-dropdown-keyword-text-color: var(--tv-color-act-info-text-active, #1476ff);
19
21
  --tvp-SearchBox-dropdown-btn-group-border-color: var(--tv-color-bg-header, #f0f0f0);
20
22
  --tvp-SearchBox-dropdown-btn-group-margin-top: var(--tv-space-md, 8px);
@@ -25,6 +27,7 @@
25
27
  --tvp-SearchBox-place-padding-right: var(--tv-space-sm, 4px);
26
28
  --tvp-SearchBox-tag-bottom-border-color: var(--tv-color-act-primary-text-active, #191919);
27
29
  --tvp-SearchBox-tag-font-size: var(--tv-font-size-md, 14px);
30
+ --tvp-SearchBox-small-tag-font-size: var(--tv-font-size-sm, 12px);
28
31
  --tvp-SearchBox-dropdown-desc-font-size: var(--tv-font-size-md, 14px);
29
32
  --tvp-SearchBox-dropdown-desc-text-color: var(--tv-color-info-text-primary, #191919);
30
33
  width: 232px;
@@ -129,7 +132,9 @@
129
132
  --tvp-SearchBox-right-icon-color-hover: var(--tv-color-icon-hover, #191919);
130
133
  --tvp-SearchBox-left-icon-font-size: var(--tv-font-size-heading-xs, 16px);
131
134
  --tvp-SearchBox-min-height: var(--tv-size-height-md, 32px);
135
+ --tvp-SearchBox-small-min-height: var(--tv-size-height-sm, 28px);
132
136
  --tvp-SearchBox-padding-left: var(--tv-size-height-md, 32px);
137
+ --tvp-SearchBox-small-padding-left: var(--tv-size-height-sm, 28px);
133
138
  --tvp-SearchBox-dropdown-keyword-text-color: var(--tv-color-act-info-text-active, #1476ff);
134
139
  --tvp-SearchBox-dropdown-btn-group-border-color: var(--tv-color-bg-header, #f0f0f0);
135
140
  --tvp-SearchBox-dropdown-btn-group-margin-top: var(--tv-space-md, 8px);
@@ -140,6 +145,7 @@
140
145
  --tvp-SearchBox-place-padding-right: var(--tv-space-sm, 4px);
141
146
  --tvp-SearchBox-tag-bottom-border-color: var(--tv-color-act-primary-text-active, #191919);
142
147
  --tvp-SearchBox-tag-font-size: var(--tv-font-size-md, 14px);
148
+ --tvp-SearchBox-small-tag-font-size: var(--tv-font-size-sm, 12px);
143
149
  --tvp-SearchBox-dropdown-desc-font-size: var(--tv-font-size-md, 14px);
144
150
  --tvp-SearchBox-dropdown-desc-text-color: var(--tv-color-info-text-primary, #191919);
145
151
  display: flex;
@@ -379,3 +385,17 @@
379
385
  .tvp-search-box__input-wrapper .tvp-search-box__dropdown .tvp-search-box__input .tiny-input__inner {
380
386
  padding-left: 0px;
381
387
  }
388
+ .tvp-search-box--small {
389
+ min-height: var(--tvp-SearchBox-small-min-height);
390
+ padding-left: var(--tvp-SearchBox-small-padding-left);
391
+ }
392
+ .tvp-search-box--small > .tvp-search-box__prefix {
393
+ top: calc((var(--tvp-SearchBox-small-min-height) - var(--tvp-SearchBox-left-icon-font-size)) / 2 - 1px);
394
+ left: 10px;
395
+ }
396
+ .tvp-search-box--small .tvp-search-box__prop {
397
+ font-size: var(--tvp-SearchBox-small-tag-font-size);
398
+ }
399
+ .tvp-search-box--small .tvp-search-box__prop span {
400
+ padding-left: 8px;
401
+ }
@@ -134,6 +134,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
134
134
  splitInputValue: {
135
135
  type: String,
136
136
  default: ","
137
+ },
138
+ // 尺寸
139
+ size: {
140
+ type: String,
141
+ default: ""
137
142
  }
138
143
  },
139
144
  emits: ["update:modelValue", "change", "search", "exceed", "first-level-select", "clear"],
@@ -342,7 +347,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
342
347
  });
343
348
  return (_ctx, _cache) => {
344
349
  return vue.openBlock(), vue.createElementBlock("div", {
345
- class: "tvp-search-box",
350
+ class: vue.normalizeClass(["tvp-search-box", __props.size === "small" ? "tvp-search-box--small" : ""]),
346
351
  onClick: _cache[21] || (_cache[21] = vue.withModifiers(($event) => vue.unref(dropdown.showPopover)(state, false), ["stop"]))
347
352
  }, [
348
353
  vue.createVNode(vue.unref(TinyIconSearch), { class: "tvp-search-box__prefix" }),
@@ -350,6 +355,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
350
355
  return vue.openBlock(), vue.createBlock(vue.unref(TinyTag), {
351
356
  key: tag2.field + index2,
352
357
  closable: "",
358
+ size: __props.size === "small" ? "small" : "",
353
359
  class: vue.normalizeClass(["tvp-search-box__tag", __props.editable && tag2.type !== "map" ? "tvp-search-box__tag-editor" : ""]),
354
360
  title: `${tag2.label} ${tag2.operator || ":"} ${tag2.value}`,
355
361
  onClose: ($event) => vue.unref(deleteTag)(tag2),
@@ -359,7 +365,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
359
365
  vue.createElementVNode("span", _hoisted_1, vue.toDisplayString(tag2.label) + " " + vue.toDisplayString(tag2.operator || ":") + " " + vue.toDisplayString(tag2.value), 1)
360
366
  ]),
361
367
  _: 2
362
- }, 1032, ["class", "title", "onClose", "onClick"]);
368
+ }, 1032, ["size", "class", "title", "onClose", "onClick"]);
363
369
  }), 128)),
364
370
  __props.modelValue.length ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2)) : vue.createCommentVNode("", true),
365
371
  vue.createVNode(vue.unref(TinyForm), {
@@ -367,6 +373,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
367
373
  model: state,
368
374
  rules: state.formRules,
369
375
  "validate-type": state.validType,
376
+ size: __props.size === "small" ? "small" : "",
370
377
  "label-width": "0px",
371
378
  "message-type": "block",
372
379
  class: "tvp-search-box__form"
@@ -388,6 +395,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
388
395
  trigger: "click",
389
396
  class: "tvp-search-box__dropdown",
390
397
  "show-icon": false,
398
+ size: __props.size === "small" ? "small" : "",
391
399
  "lazy-show-popper": "",
392
400
  "close-on-click-outside": true
393
401
  }, {
@@ -500,7 +508,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
500
508
  }, 8, ["modelValue", "placeholder", "maxlength", "onKeydown", "onInput", "onClick"])
501
509
  ]),
502
510
  _: 3
503
- }, 8, ["visible"])
511
+ }, 8, ["visible", "size"])
504
512
  ]),
505
513
  __props.editable ? (vue.openBlock(), vue.createBlock(vue.unref(TinyPopover), {
506
514
  key: 0,
@@ -764,8 +772,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
764
772
  }, 8, ["modelValue"])) : vue.createCommentVNode("", true)
765
773
  ]),
766
774
  _: 3
767
- }, 8, ["model", "rules", "validate-type"])
768
- ]);
775
+ }, 8, ["model", "rules", "validate-type", "size"])
776
+ ], 2);
769
777
  };
770
778
  }
771
779
  });
@@ -186,4 +186,5 @@ export interface ISearchBoxNewTag {
186
186
  */
187
187
  options?: ISearchBoxTag[];
188
188
  }
189
+ export type ISearchBoxSize = '' | 'small';
189
190
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opentiny/vue-search-box",
3
- "version": "0.1.4",
3
+ "version": "0.1.6",
4
4
  "description": "",
5
5
  "homepage": "https://github.com/opentiny/tiny-search-box#readme",
6
6
  "bugs": {
@@ -13,7 +13,7 @@
13
13
  "license": "MIT",
14
14
  "author": "",
15
15
  "type": "module",
16
- "main": "dist/lib/index.cjs.js",
16
+ "main": "dist/es/index.es.js",
17
17
  "module": "dist/es/index.es.js",
18
18
  "types": "dist/types/index.d.ts",
19
19
  "style": "src/index.less",