@pequity/squirrel 7.1.0 → 7.1.2

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.
Files changed (11) hide show
  1. package/dist/cjs/p-input-search.js +48 -28
  2. package/dist/es/p-input-search.js +49 -29
  3. package/dist/squirrel/components/p-input-search/p-input-search.vue.d.ts +9 -6
  4. package/dist/squirrel.css +3 -51
  5. package/package.json +1 -1
  6. package/squirrel/components/p-dropdown-select/p-dropdown-select.spec.js +1 -1
  7. package/squirrel/components/p-input-search/p-input-search.spec.js +1 -1
  8. package/squirrel/components/p-input-search/p-input-search.vue +54 -78
  9. package/squirrel/components/p-select-list/p-select-list.spec.js +1 -1
  10. package/squirrel/assets/clear-input-faded.svg +0 -10
  11. package/squirrel/assets/clear-input-hovered.svg +0 -10
package/dist/cjs/p-input-search.js CHANGED
@@ -10,7 +10,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
10
10
  inheritAttrs: false
11
11
  },
12
12
  __name: "p-input-search",
13
- props: /* @__PURE__ */ vue.mergeModels({
13
+ props: {
14
+ modelValue: {
15
+ type: String,
16
+ default: ""
17
+ },
14
18
  size: {
15
19
  type: String,
16
20
  default: "md",
@@ -22,43 +26,54 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
22
26
  type: Boolean,
23
27
  default: false
24
28
  }
25
- }, {
26
- "modelValue": { default: "" },
27
- "modelModifiers": {}
28
- }),
29
- emits: /* @__PURE__ */ vue.mergeModels(["enter"], ["update:modelValue"]),
29
+ },
30
+ emits: ["update:modelValue", "enter"],
30
31
  setup(__props, { emit: __emit }) {
32
+ const emit = __emit;
33
+ const props = __props;
31
34
  const searchIconClasses = {
32
35
  sm: "text-xs top-2.5 left-2",
33
36
  md: "text-base top-3 left-3",
34
37
  lg: "text-lg top-4 left-5"
35
38
  };
36
- const model = vue.useModel(__props, "modelValue");
39
+ const clearIconClasses = {
40
+ sm: "text-base top-1.5 right-2",
41
+ md: "text-xl top-2 right-2.5",
42
+ lg: "text-3xl top-[5px] right-2.5"
43
+ };
44
+ const enterIconClasses = {
45
+ sm: "bg-[length:1rem_1rem] w-[1rem] h-[1rem] right-7 top-2",
46
+ md: "bg-[length:1.5rem_1.5rem] w-[1.5rem] h-[1.5rem] right-9 top-2",
47
+ lg: "bg-[length:2rem_2rem] w-[2rem] h-[2rem] right-[46px] top-2"
48
+ };
37
49
  const showEnterIconOnFocus = vue.ref(false);
38
- const searchInput = vue.useTemplateRef("searchInput");
39
- const emit = __emit;
40
- const props = __props;
41
- const enterIconClasses = vue.computed(() => `enter enter-${props.size}`);
42
- const clearIconClasses = vue.computed(() => `clear clear-${props.size}`);
50
+ const input = vue.useTemplateRef("pInput");
51
+ const query = vue.ref(props.modelValue);
52
+ vue.watch(
53
+ () => props.modelValue,
54
+ (nV) => {
55
+ query.value = nV;
56
+ }
57
+ );
58
+ vue.watch(query, (nV) => {
59
+ emit("update:modelValue", nV);
60
+ });
43
61
  const clearSearch = () => {
44
- model.value = "";
62
+ query.value = "";
45
63
  requestAnimationFrame(() => {
46
64
  var _a;
47
- (_a = searchInput.value) == null ? void 0 : _a.$el.querySelector("input").focus();
65
+ (_a = input.value) == null ? void 0 : _a.$el.querySelector("input").focus();
48
66
  });
49
67
  };
50
68
  const keydownEnter = () => {
51
- emit("enter", model.value);
69
+ emit("enter", query.value);
52
70
  };
53
71
  return (_ctx, _cache) => {
54
72
  const _directive_tooltip = vue.resolveDirective("tooltip");
55
- return vue.openBlock(), vue.createBlock(pInput_vue_vue_type_script_setup_true_lang._sfc_main, vue.mergeProps({
56
- ref_key: "searchInput",
57
- ref: searchInput,
58
- modelValue: model.value,
59
- "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
60
- size: __props.size
61
- }, _ctx.$attrs, {
73
+ return vue.openBlock(), vue.createBlock(pInput_vue_vue_type_script_setup_true_lang._sfc_main, vue.mergeProps({ ref: "pInput" }, _ctx.$attrs, {
74
+ modelValue: query.value,
75
+ "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
76
+ size: __props.size,
62
77
  role: "searchbox",
63
78
  rounded: "",
64
79
  onFocus: _cache[1] || (_cache[1] = ($event) => showEnterIconOnFocus.value = true),
@@ -72,9 +87,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
72
87
  }, null, 8, ["class"])
73
88
  ]),
74
89
  suffix: vue.withCtx(() => [
75
- model.value && __props.showEnterIcon && showEnterIconOnFocus.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("i", {
90
+ query.value && __props.showEnterIcon && showEnterIconOnFocus.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("i", {
76
91
  key: 0,
77
- class: vue.normalizeClass(["icon absolute bg-no-repeat outline-none", enterIconClasses.value])
92
+ class: vue.normalizeClass(["enter absolute bg-no-repeat outline-none", enterIconClasses[__props.size]])
78
93
  }, null, 2)), [
79
94
  [
80
95
  _directive_tooltip,
@@ -83,18 +98,23 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
83
98
  { bottom: true }
84
99
  ]
85
100
  ]) : vue.createCommentVNode("", true),
86
- model.value ? (vue.openBlock(), vue.createElementBlock("button", {
101
+ query.value ? (vue.openBlock(), vue.createElementBlock("button", {
87
102
  key: 1,
88
103
  role: "button",
89
104
  "aria-label": "Clear search input",
90
- class: vue.normalizeClass(["icon absolute cursor-pointer bg-no-repeat", clearIconClasses.value]),
105
+ class: vue.normalizeClass(["absolute cursor-pointer", clearIconClasses[__props.size]]),
91
106
  onClick: clearSearch
92
- }, null, 2)) : vue.createCommentVNode("", true)
107
+ }, [
108
+ vue.createVNode(pIcon_vue_vue_type_script_setup_true_lang._sfc_main, {
109
+ icon: "cancel-circle",
110
+ class: "text-p-gray-40 hover:text-p-gray-50"
111
+ })
112
+ ], 2)) : vue.createCommentVNode("", true)
93
113
  ]),
94
114
  _: 1
95
115
  }, 16, ["modelValue", "size"]);
96
116
  };
97
117
  }
98
118
  });
99
- const PInputSearch = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-f50c12df"]]);
119
+ const PInputSearch = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-0e51ff56"]]);
100
120
  module.exports = PInputSearch;
package/dist/es/p-input-search.js CHANGED
@@ -1,4 +1,4 @@
1
- import { defineComponent, mergeModels, useModel, ref, useTemplateRef, computed, resolveDirective, createBlock, openBlock, mergeProps, withKeys, withCtx, withDirectives, createCommentVNode, createElementBlock, normalizeClass, createVNode } from "vue";
1
+ import { defineComponent, ref, useTemplateRef, watch, resolveDirective, createBlock, openBlock, mergeProps, withKeys, withCtx, withDirectives, createCommentVNode, createElementBlock, normalizeClass, createVNode } from "vue";
2
2
  import { S as SIZES } from "./chunks/p-btn.types.js";
3
3
  import { _ as _sfc_main$2 } from "./chunks/p-icon.js";
4
4
  import { _ as _sfc_main$1 } from "./chunks/p-input.js";
@@ -9,7 +9,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
9
9
  inheritAttrs: false
10
10
  },
11
11
  __name: "p-input-search",
12
- props: /* @__PURE__ */ mergeModels({
12
+ props: {
13
+ modelValue: {
14
+ type: String,
15
+ default: ""
16
+ },
13
17
  size: {
14
18
  type: String,
15
19
  default: "md",
@@ -21,43 +25,54 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
21
25
  type: Boolean,
22
26
  default: false
23
27
  }
24
- }, {
25
- "modelValue": { default: "" },
26
- "modelModifiers": {}
27
- }),
28
- emits: /* @__PURE__ */ mergeModels(["enter"], ["update:modelValue"]),
28
+ },
29
+ emits: ["update:modelValue", "enter"],
29
30
  setup(__props, { emit: __emit }) {
31
+ const emit = __emit;
32
+ const props = __props;
30
33
  const searchIconClasses = {
31
34
  sm: "text-xs top-2.5 left-2",
32
35
  md: "text-base top-3 left-3",
33
36
  lg: "text-lg top-4 left-5"
34
37
  };
35
- const model = useModel(__props, "modelValue");
38
+ const clearIconClasses = {
39
+ sm: "text-base top-1.5 right-2",
40
+ md: "text-xl top-2 right-2.5",
41
+ lg: "text-3xl top-[5px] right-2.5"
42
+ };
43
+ const enterIconClasses = {
44
+ sm: "bg-[length:1rem_1rem] w-[1rem] h-[1rem] right-7 top-2",
45
+ md: "bg-[length:1.5rem_1.5rem] w-[1.5rem] h-[1.5rem] right-9 top-2",
46
+ lg: "bg-[length:2rem_2rem] w-[2rem] h-[2rem] right-[46px] top-2"
47
+ };
36
48
  const showEnterIconOnFocus = ref(false);
37
- const searchInput = useTemplateRef("searchInput");
38
- const emit = __emit;
39
- const props = __props;
40
- const enterIconClasses = computed(() => `enter enter-${props.size}`);
41
- const clearIconClasses = computed(() => `clear clear-${props.size}`);
49
+ const input = useTemplateRef("pInput");
50
+ const query = ref(props.modelValue);
51
+ watch(
52
+ () => props.modelValue,
53
+ (nV) => {
54
+ query.value = nV;
55
+ }
56
+ );
57
+ watch(query, (nV) => {
58
+ emit("update:modelValue", nV);
59
+ });
42
60
  const clearSearch = () => {
43
- model.value = "";
61
+ query.value = "";
44
62
  requestAnimationFrame(() => {
45
63
  var _a;
46
- (_a = searchInput.value) == null ? void 0 : _a.$el.querySelector("input").focus();
64
+ (_a = input.value) == null ? void 0 : _a.$el.querySelector("input").focus();
47
65
  });
48
66
  };
49
67
  const keydownEnter = () => {
50
- emit("enter", model.value);
68
+ emit("enter", query.value);
51
69
  };
52
70
  return (_ctx, _cache) => {
53
71
  const _directive_tooltip = resolveDirective("tooltip");
54
- return openBlock(), createBlock(_sfc_main$1, mergeProps({
55
- ref_key: "searchInput",
56
- ref: searchInput,
57
- modelValue: model.value,
58
- "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
59
- size: __props.size
60
- }, _ctx.$attrs, {
72
+ return openBlock(), createBlock(_sfc_main$1, mergeProps({ ref: "pInput" }, _ctx.$attrs, {
73
+ modelValue: query.value,
74
+ "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
75
+ size: __props.size,
61
76
  role: "searchbox",
62
77
  rounded: "",
63
78
  onFocus: _cache[1] || (_cache[1] = ($event) => showEnterIconOnFocus.value = true),
@@ -71,9 +86,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
71
86
  }, null, 8, ["class"])
72
87
  ]),
73
88
  suffix: withCtx(() => [
74
- model.value && __props.showEnterIcon && showEnterIconOnFocus.value ? withDirectives((openBlock(), createElementBlock("i", {
89
+ query.value && __props.showEnterIcon && showEnterIconOnFocus.value ? withDirectives((openBlock(), createElementBlock("i", {
75
90
  key: 0,
76
- class: normalizeClass(["icon absolute bg-no-repeat outline-none", enterIconClasses.value])
91
+ class: normalizeClass(["enter absolute bg-no-repeat outline-none", enterIconClasses[__props.size]])
77
92
  }, null, 2)), [
78
93
  [
79
94
  _directive_tooltip,
@@ -82,20 +97,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
82
97
  { bottom: true }
83
98
  ]
84
99
  ]) : createCommentVNode("", true),
85
- model.value ? (openBlock(), createElementBlock("button", {
100
+ query.value ? (openBlock(), createElementBlock("button", {
86
101
  key: 1,
87
102
  role: "button",
88
103
  "aria-label": "Clear search input",
89
- class: normalizeClass(["icon absolute cursor-pointer bg-no-repeat", clearIconClasses.value]),
104
+ class: normalizeClass(["absolute cursor-pointer", clearIconClasses[__props.size]]),
90
105
  onClick: clearSearch
91
- }, null, 2)) : createCommentVNode("", true)
106
+ }, [
107
+ createVNode(_sfc_main$2, {
108
+ icon: "cancel-circle",
109
+ class: "text-p-gray-40 hover:text-p-gray-50"
110
+ })
111
+ ], 2)) : createCommentVNode("", true)
92
112
  ]),
93
113
  _: 1
94
114
  }, 16, ["modelValue", "size"]);
95
115
  };
96
116
  }
97
117
  });
98
- const PInputSearch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f50c12df"]]);
118
+ const PInputSearch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0e51ff56"]]);
99
119
  export {
100
120
  PInputSearch as default
101
121
  };
package/dist/squirrel/components/p-input-search/p-input-search.vue.d.ts CHANGED
@@ -1,6 +1,10 @@
1
1
  import { type Size } from '../p-btn/p-btn.types';
2
2
  import { type PropType } from 'vue';
3
3
  declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
4
+ modelValue: {
5
+ type: StringConstructor;
6
+ default: string;
7
+ };
4
8
  size: {
5
9
  type: PropType<Size>;
6
10
  default: string;
@@ -10,13 +14,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
10
14
  type: BooleanConstructor;
11
15
  default: boolean;
12
16
  };
13
- modelValue: {
14
- type: PropType<string>;
15
- };
16
17
  }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
17
18
  "update:modelValue": (value: string) => any;
18
19
  enter: (value: string) => any;
19
20
  }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
21
+ modelValue: {
22
+ type: StringConstructor;
23
+ default: string;
24
+ };
20
25
  size: {
21
26
  type: PropType<Size>;
22
27
  default: string;
@@ -26,14 +31,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
26
31
  type: BooleanConstructor;
27
32
  default: boolean;
28
33
  };
29
- modelValue: {
30
- type: PropType<string>;
31
- };
32
34
  }>> & Readonly<{
33
35
  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
34
36
  onEnter?: ((value: string) => any) | undefined;
35
37
  }>, {
36
38
  size: "sm" | "md" | "lg";
39
+ modelValue: string;
37
40
  showEnterIcon: boolean;
38
41
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
39
42
  export default _default;
package/dist/squirrel.css CHANGED
@@ -263,59 +263,11 @@ from {
263
263
  to {
264
264
  opacity: 0;
265
265
  }
266
- }.icon.clear[data-v-f50c12df] {
267
- background-image: url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_1634_880)'%3e%3cpath%20d='M16%208C16%206.41775%2015.5308%204.87104%2014.6518%203.55544C13.7727%202.23985%2012.5233%201.21447%2011.0615%200.608967C9.59966%200.00346629%207.99113%20-0.15496%206.43928%200.153721C4.88743%200.462403%203.46197%201.22433%202.34315%202.34315C1.22433%203.46197%200.462403%204.88743%200.153721%206.43928C-0.15496%207.99113%200.00346629%209.59966%200.608967%2011.0615C1.21447%2012.5233%202.23985%2013.7727%203.55544%2014.6518C4.87104%2015.5308%206.41775%2016%208%2016C10.1217%2016%2012.1566%2015.1571%2013.6569%2013.6569C15.1571%2012.1566%2016%2010.1217%2016%208ZM11.14%2010.1867C11.2642%2010.3116%2011.3339%2010.4805%2011.3339%2010.6567C11.3339%2010.8328%2011.2642%2011.0018%2011.14%2011.1267C11.078%2011.1892%2011.0043%2011.2388%2010.9231%2011.2726C10.8418%2011.3064%2010.7547%2011.3239%2010.6667%2011.3239C10.5787%2011.3239%2010.4915%2011.3064%2010.4103%2011.2726C10.329%2011.2388%2010.2553%2011.1892%2010.1933%2011.1267L8.12%209.05334C8.08809%209.02429%208.04649%209.0082%208.00334%209.0082C7.96019%209.0082%207.91858%209.02429%207.88667%209.05334L5.81334%2011.1267C5.6858%2011.2359%205.52175%2011.293%205.35397%2011.2865C5.18618%2011.28%205.02702%2011.2104%204.90829%2011.0917C4.78957%2010.973%204.72001%2010.8138%204.71353%2010.646C4.70705%2010.4783%204.76412%2010.3142%204.87334%2010.1867L6.94667%208.11334C6.97572%208.08142%206.99181%208.03982%206.99181%207.99667C6.99181%207.95352%206.97572%207.91192%206.94667%207.88L4.87334%205.80667C4.81085%205.7447%204.76126%205.67096%204.72741%205.58972C4.69356%205.50848%204.67614%205.42135%204.67614%205.33334C4.67614%205.24533%204.69356%205.15819%204.72741%205.07695C4.76126%204.99571%204.81085%204.92198%204.87334%204.86C4.99825%204.73584%205.16721%204.66614%205.34334%204.66614C5.51946%204.66614%205.68843%204.73584%205.81334%204.86L7.88667%206.93334C7.90163%206.94928%207.91971%206.96199%207.93977%206.97068C7.95984%206.97936%207.98147%206.98384%208.00334%206.98384C8.0252%206.98384%208.04684%206.97936%208.0669%206.97068C8.08697%206.96199%208.10504%206.94928%208.12%206.93334L10.1933%204.86C10.2555%204.79784%2010.3293%204.74854%2010.4105%204.7149C10.4917%204.68126%2010.5788%204.66394%2010.6667%204.66394C10.7546%204.66394%2010.8416%204.68126%2010.9228%204.7149C11.0041%204.74854%2011.0778%204.79784%2011.14%204.86C11.2022%204.92216%2011.2515%204.99596%2011.2851%205.07717C11.3188%205.15839%2011.3361%205.24543%2011.3361%205.33334C11.3361%205.42124%2011.3188%205.50829%2011.2851%205.5895C11.2515%205.67072%2011.2022%205.74451%2011.14%205.80667L9.06667%207.88C9.05073%207.89497%209.03802%207.91304%209.02933%207.93311C9.02065%207.95317%209.01616%207.97481%209.01616%207.99667C9.01616%208.01854%209.02065%208.04017%209.02933%208.06024C9.03802%208.0803%209.05073%208.09837%209.06667%208.11334L11.14%2010.1867Z'%20fill='%23A0AEC0'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1634_880'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
268
- background-position: center center;
269
- transition: background-image 0.4s;
270
- }
271
- .icon.clear-sm[data-v-f50c12df] {
272
- background-size: 0.875rem 0.875rem;
273
- width: 0.875rem;
274
- height: 0.875rem;
275
- bottom: 0.5rem;
276
- right: 0.375rem;
277
- }
278
- .icon.clear-md[data-v-f50c12df] {
279
- background-size: 1rem 1rem;
280
- height: 1rem;
281
- width: 1rem;
282
- bottom: 0.75rem;
283
- right: 0.5rem;
284
- }
285
- .icon.clear-lg[data-v-f50c12df] {
286
- background-size: 1rem 1rem;
287
- height: 1rem;
288
- width: 1rem;
289
- bottom: 1rem;
290
- right: 0.5rem;
291
- }
292
- .icon.clear[data-v-f50c12df]:hover {
293
- background-image: url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_1634_896)'%3e%3cpath%20d='M16%208C16%206.41775%2015.5308%204.87104%2014.6518%203.55544C13.7727%202.23985%2012.5233%201.21447%2011.0615%200.608967C9.59966%200.00346629%207.99113%20-0.15496%206.43928%200.153721C4.88743%200.462403%203.46197%201.22433%202.34315%202.34315C1.22433%203.46197%200.462403%204.88743%200.153721%206.43928C-0.15496%207.99113%200.00346629%209.59966%200.608967%2011.0615C1.21447%2012.5233%202.23985%2013.7727%203.55544%2014.6518C4.87104%2015.5308%206.41775%2016%208%2016C10.1217%2016%2012.1566%2015.1571%2013.6569%2013.6569C15.1571%2012.1566%2016%2010.1217%2016%208ZM11.14%2010.1867C11.2642%2010.3116%2011.3339%2010.4805%2011.3339%2010.6567C11.3339%2010.8328%2011.2642%2011.0018%2011.14%2011.1267C11.078%2011.1892%2011.0043%2011.2388%2010.9231%2011.2726C10.8418%2011.3064%2010.7547%2011.3239%2010.6667%2011.3239C10.5787%2011.3239%2010.4915%2011.3064%2010.4103%2011.2726C10.329%2011.2388%2010.2553%2011.1892%2010.1933%2011.1267L8.12%209.05334C8.08809%209.02429%208.04649%209.0082%208.00334%209.0082C7.96019%209.0082%207.91858%209.02429%207.88667%209.05334L5.81334%2011.1267C5.6858%2011.2359%205.52175%2011.293%205.35397%2011.2865C5.18618%2011.28%205.02702%2011.2104%204.90829%2011.0917C4.78957%2010.973%204.72001%2010.8138%204.71353%2010.646C4.70705%2010.4783%204.76412%2010.3142%204.87334%2010.1867L6.94667%208.11334C6.97572%208.08142%206.99181%208.03982%206.99181%207.99667C6.99181%207.95352%206.97572%207.91192%206.94667%207.88L4.87334%205.80667C4.81085%205.7447%204.76126%205.67096%204.72741%205.58972C4.69356%205.50848%204.67614%205.42135%204.67614%205.33334C4.67614%205.24533%204.69356%205.15819%204.72741%205.07695C4.76126%204.99571%204.81085%204.92198%204.87334%204.86C4.99825%204.73584%205.16721%204.66614%205.34334%204.66614C5.51946%204.66614%205.68843%204.73584%205.81334%204.86L7.88667%206.93334C7.90163%206.94928%207.91971%206.96199%207.93977%206.97068C7.95984%206.97936%207.98147%206.98384%208.00334%206.98384C8.0252%206.98384%208.04684%206.97936%208.0669%206.97068C8.08697%206.96199%208.10504%206.94928%208.12%206.93334L10.1933%204.86C10.2555%204.79784%2010.3293%204.74854%2010.4105%204.7149C10.4917%204.68126%2010.5788%204.66394%2010.6667%204.66394C10.7546%204.66394%2010.8416%204.68126%2010.9228%204.7149C11.0041%204.74854%2011.0778%204.79784%2011.14%204.86C11.2022%204.92216%2011.2515%204.99596%2011.2851%205.07717C11.3188%205.15839%2011.3361%205.24543%2011.3361%205.33334C11.3361%205.42124%2011.3188%205.50829%2011.2851%205.5895C11.2515%205.67072%2011.2022%205.74451%2011.14%205.80667L9.06667%207.88C9.05073%207.89497%209.03802%207.91304%209.02933%207.93311C9.02065%207.95317%209.01616%207.97481%209.01616%207.99667C9.01616%208.01854%209.02065%208.04017%209.02933%208.06024C9.03802%208.0803%209.05073%208.09837%209.06667%208.11334L11.14%2010.1867Z'%20fill='%23424E6E'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1634_896'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
294
- }
295
- .icon.enter[data-v-f50c12df] {
266
+ }
267
+ .enter[data-v-0e51ff56] {
296
268
  background-image: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_1627_786)'%3e%3crect%20width='24'%20height='24'%20rx='5'%20fill='%23ECF1FF'/%3e%3cpath%20d='M19.17%201.03744e-05H4.83C4.19619%20-0.00130459%203.56834%200.122398%202.98239%200.364037C2.39645%200.605676%201.86392%200.960506%201.41528%201.40822C0.966641%201.85592%200.610708%202.38772%200.367855%202.97316C0.125002%203.55861%20-1.36406e-06%204.1862%200%204.82001L0%2019.17C0%2020.451%200.508874%2021.6795%201.41467%2022.5853C2.32048%2023.4911%203.549%2024%204.83%2024H19.17C20.4502%2023.9974%2021.6772%2023.4876%2022.5824%2022.5824C23.4876%2021.6772%2023.9974%2020.4502%2024%2019.17V4.82001C23.9974%203.54075%2023.4873%202.31479%2022.5818%201.41115C21.6763%200.507508%2020.4493%207.63258e-06%2019.17%201.03744e-05ZM22%2019.17C22%2019.9206%2021.7018%2020.6404%2021.1711%2021.1711C20.6404%2021.7018%2019.9206%2022%2019.17%2022H4.83C4.07944%2022%203.35962%2021.7018%202.82889%2021.1711C2.29816%2020.6404%202%2019.9206%202%2019.17V4.82001C2.00265%204.07118%202.30197%203.35393%202.83242%202.82536C3.36286%202.29679%204.08117%202.00001%204.83%202.00001H19.17C19.9188%202.00001%2020.6371%202.29679%2021.1676%202.82536C21.698%203.35393%2021.9974%204.07118%2022%204.82001V19.17Z'%20fill='%234750EB'/%3e%3cpath%20d='M17.5%207.5C17.2348%207.5%2016.9804%207.60536%2016.7929%207.79289C16.6054%207.98043%2016.5%208.23478%2016.5%208.5V11.25C16.5%2011.3163%2016.4737%2011.3799%2016.4268%2011.4268C16.3799%2011.4737%2016.3163%2011.5%2016.25%2011.5H10.75C10.6837%2011.5%2010.6201%2011.4737%2010.5732%2011.4268C10.5263%2011.3799%2010.5%2011.3163%2010.5%2011.25V9.5C10.5012%209.30138%2010.4431%209.10691%2010.3333%208.94139C10.2235%208.77587%2010.0669%208.6468%209.88348%208.57063C9.70004%208.49446%209.49807%208.47465%209.30332%208.51372C9.10857%208.55279%208.92987%208.64897%208.79%208.79L5.79%2011.79C5.60375%2011.9774%205.49921%2012.2308%205.49921%2012.495C5.49921%2012.7592%205.60375%2013.0126%205.79%2013.2L8.79%2016.2C8.88261%2016.2945%208.99306%2016.3697%209.11493%2016.4212C9.23681%2016.4727%209.36769%2016.4995%209.5%2016.5C9.76522%2016.5%2010.0196%2016.3946%2010.2071%2016.2071C10.3946%2016.0196%2010.5%2015.7652%2010.5%2015.5V13.75C10.5%2013.6837%2010.5263%2013.6201%2010.5732%2013.5732C10.6201%2013.5263%2010.6837%2013.5%2010.75%2013.5H16.5C17.0304%2013.5%2017.5391%2013.2893%2017.9142%2012.9142C18.2893%2012.5391%2018.5%2012.0304%2018.5%2011.5V8.5C18.5%208.23478%2018.3946%207.98043%2018.2071%207.79289C18.0196%207.60536%2017.7652%207.5%2017.5%207.5Z'%20fill='%234750EB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1627_786'%3e%3crect%20width='24'%20height='24'%20rx='5'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
297
269
  }
298
- .icon.enter-sm[data-v-f50c12df] {
299
- background-size: 1rem 1rem;
300
- width: 1rem;
301
- height: 1rem;
302
- right: 1.5rem;
303
- bottom: 0.5rem;
304
- }
305
- .icon.enter-md[data-v-f50c12df] {
306
- background-size: 1.5rem 1.5rem;
307
- width: 1.5rem;
308
- height: 1.5rem;
309
- right: 2.0625rem;
310
- bottom: 0.5rem;
311
- }
312
- .icon.enter-lg[data-v-f50c12df] {
313
- background-size: 1.5rem 1.5rem;
314
- width: 1.5rem;
315
- height: 1.5rem;
316
- right: 2.5rem;
317
- bottom: 0.75rem;
318
- }.fadeInDown[data-v-9ad56d4f] {
270
+ .fadeInDown[data-v-9ad56d4f] {
319
271
  animation-duration: 0.4s;
320
272
  animation-fill-mode: both;
321
273
  animation-name: fadeInDown-9ad56d4f;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pequity/squirrel",
3
3
  "description": "Squirrel component library",
4
- "version": "7.1.0",
4
+ "version": "7.1.2",
5
5
  "packageManager": "pnpm@9.15.9",
6
6
  "type": "module",
7
7
  "scripts": {
package/squirrel/components/p-dropdown-select/p-dropdown-select.spec.js CHANGED
@@ -595,7 +595,7 @@ describe('PDropdownSelect.vue', () => {
595
595
 
596
596
  await wrapper.findByText('ff-a57d-beba44884da2').trigger('click');
597
597
 
598
- await wrapper.find('button.clear').trigger('click');
598
+ await wrapper.find('button[aria-label="Clear search input"]').trigger('click');
599
599
 
600
600
  const newItems = wrapper.findAll('[p-select-list-option-item]');
601
601
 
package/squirrel/components/p-input-search/p-input-search.spec.js CHANGED
@@ -39,7 +39,7 @@ describe('PInputSearch.vue', () => {
39
39
 
40
40
  await wrapper.find('input').setValue('test');
41
41
 
42
- const button = await wrapper.find('button.cursor-pointer');
42
+ const button = await wrapper.find('button[aria-label="Clear search input"]');
43
43
 
44
44
  expect(button.exists()).toBe(true);
45
45
  });
package/squirrel/components/p-input-search/p-input-search.vue CHANGED
@@ -1,9 +1,9 @@
1
1
  <template>
2
2
  <PInput
3
- ref="searchInput"
4
- v-model="model"
5
- :size="size"
3
+ ref="pInput"
6
4
  v-bind="$attrs"
5
+ v-model="query"
6
+ :size="size"
7
7
  role="searchbox"
8
8
  rounded
9
9
  @focus="showEnterIconOnFocus = true"
@@ -15,19 +15,21 @@
15
15
  </template>
16
16
  <template #suffix>
17
17
  <i
18
- v-if="model && showEnterIcon && showEnterIconOnFocus"
18
+ v-if="query && showEnterIcon && showEnterIconOnFocus"
19
19
  v-tooltip.bottom="{ content: 'Press enter to search', delay: { show: 100, hide: 0 } }"
20
- class="icon absolute bg-no-repeat outline-none"
21
- :class="enterIconClasses"
20
+ class="enter absolute bg-no-repeat outline-none"
21
+ :class="enterIconClasses[size]"
22
22
  ></i>
23
23
  <button
24
- v-if="model"
24
+ v-if="query"
25
25
  role="button"
26
26
  aria-label="Clear search input"
27
- class="icon absolute cursor-pointer bg-no-repeat"
28
- :class="clearIconClasses"
27
+ class="absolute cursor-pointer"
28
+ :class="clearIconClasses[size]"
29
29
  @click="clearSearch"
30
- ></button>
30
+ >
31
+ <PIcon icon="cancel-circle" class="text-p-gray-40 hover:text-p-gray-50" />
32
+ </button>
31
33
  </template>
32
34
  </PInput>
33
35
  </template>
@@ -36,30 +38,25 @@
36
38
  import { type Size, SIZES } from '@squirrel/components/p-btn/p-btn.types';
37
39
  import PIcon from '@squirrel/components/p-icon/p-icon.vue';
38
40
  import PInput from '@squirrel/components/p-input/p-input.vue';
39
- import { computed, type PropType, ref, useTemplateRef } from 'vue';
41
+ import { type PropType, ref, useTemplateRef, watch } from 'vue';
40
42
 
41
43
  type PInputInstance = InstanceType<typeof PInput>;
42
44
 
43
- const searchIconClasses = {
44
- sm: 'text-xs top-2.5 left-2',
45
- md: 'text-base top-3 left-3',
46
- lg: 'text-lg top-4 left-5',
47
- } as const;
48
-
49
45
  defineOptions({
50
46
  name: 'PInputSearch',
51
47
  inheritAttrs: false,
52
48
  });
53
49
 
54
- const model = defineModel<string>({ default: '' });
55
- const showEnterIconOnFocus = ref(false);
56
- const searchInput = useTemplateRef<PInputInstance>('searchInput');
57
-
58
50
  const emit = defineEmits<{
51
+ 'update:modelValue': [value: string];
59
52
  enter: [value: string];
60
53
  }>();
61
54
 
62
55
  const props = defineProps({
56
+ modelValue: {
57
+ type: String,
58
+ default: '',
59
+ },
63
60
  size: {
64
61
  type: String as PropType<Size>,
65
62
  default: 'md',
@@ -73,75 +70,54 @@ const props = defineProps({
73
70
  },
74
71
  });
75
72
 
76
- const enterIconClasses = computed(() => `enter enter-${props.size}`);
73
+ // Data
74
+ const searchIconClasses = {
75
+ sm: 'text-xs top-2.5 left-2',
76
+ md: 'text-base top-3 left-3',
77
+ lg: 'text-lg top-4 left-5',
78
+ } as const;
79
+ const clearIconClasses = {
80
+ sm: 'text-base top-1.5 right-2',
81
+ md: 'text-xl top-2 right-2.5',
82
+ lg: 'text-3xl top-[5px] right-2.5',
83
+ } as const;
84
+ const enterIconClasses = {
85
+ sm: 'bg-[length:1rem_1rem] w-[1rem] h-[1rem] right-7 top-2',
86
+ md: 'bg-[length:1.5rem_1.5rem] w-[1.5rem] h-[1.5rem] right-9 top-2',
87
+ lg: 'bg-[length:2rem_2rem] w-[2rem] h-[2rem] right-[46px] top-2',
88
+ } as const;
89
+ const showEnterIconOnFocus = ref(false);
90
+ const input = useTemplateRef<PInputInstance>('pInput');
91
+ const query = ref(props.modelValue);
77
92
 
78
- const clearIconClasses = computed(() => `clear clear-${props.size}`);
93
+ // Watchers
94
+ watch(
95
+ () => props.modelValue,
96
+ (nV) => {
97
+ query.value = nV;
98
+ }
99
+ );
79
100
 
101
+ watch(query, (nV) => {
102
+ emit('update:modelValue', nV);
103
+ });
104
+
105
+ // Methods
80
106
  const clearSearch = () => {
81
- model.value = '';
107
+ query.value = '';
82
108
 
83
109
  requestAnimationFrame(() => {
84
- searchInput.value?.$el.querySelector('input').focus();
110
+ input.value?.$el.querySelector('input').focus();
85
111
  });
86
112
  };
87
113
 
88
114
  const keydownEnter = () => {
89
- emit('enter', model.value);
115
+ emit('enter', query.value);
90
116
  };
91
117
  </script>
92
118
 
93
- <style scoped lang="scss">
94
- .icon.clear {
95
- background-image: url('@squirrel/assets/clear-input-faded.svg');
96
- background-position: center center;
97
- transition: background-image 0.4s;
98
- }
99
- .icon.clear-sm {
100
- background-size: 0.875rem 0.875rem;
101
- width: 0.875rem;
102
- height: 0.875rem;
103
- bottom: 0.5rem;
104
- right: 0.375rem;
105
- }
106
- .icon.clear-md {
107
- background-size: 1rem 1rem;
108
- height: 1rem;
109
- width: 1rem;
110
- bottom: 0.75rem;
111
- right: 0.5rem;
112
- }
113
- .icon.clear-lg {
114
- background-size: 1rem 1rem;
115
- height: 1rem;
116
- width: 1rem;
117
- bottom: 1rem;
118
- right: 0.5rem;
119
- }
120
- .icon.clear:hover {
121
- background-image: url('@squirrel/assets/clear-input-hovered.svg');
122
- }
123
- .icon.enter {
119
+ <style scoped>
120
+ .enter {
124
121
  background-image: url('@squirrel/assets/keyboard-press-enter.svg');
125
122
  }
126
- .icon.enter-sm {
127
- background-size: 1rem 1rem;
128
- width: 1rem;
129
- height: 1rem;
130
- right: 1.5rem;
131
- bottom: 0.5rem;
132
- }
133
- .icon.enter-md {
134
- background-size: 1.5rem 1.5rem;
135
- width: 1.5rem;
136
- height: 1.5rem;
137
- right: 2.0625rem;
138
- bottom: 0.5rem;
139
- }
140
- .icon.enter-lg {
141
- background-size: 1.5rem 1.5rem;
142
- width: 1.5rem;
143
- height: 1.5rem;
144
- right: 2.5rem;
145
- bottom: 0.75rem;
146
- }
147
123
  </style>
package/squirrel/components/p-select-list/p-select-list.spec.js CHANGED
@@ -471,7 +471,7 @@ describe('PSelectList.vue', () => {
471
471
 
472
472
  await wrapper.findByText('ff-a57d-beba44884da2').trigger('click');
473
473
 
474
- await wrapper.find('button.clear').trigger('click');
474
+ await wrapper.find('button[aria-label="Clear search input"]').trigger('click');
475
475
 
476
476
  const newItems = wrapper.findAll('[p-select-list-option-item]');
477
477
 
package/squirrel/assets/clear-input-faded.svg DELETED
@@ -1,10 +0,0 @@
1
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <g clip-path="url(#clip0_1634_880)">
3
- <path d="M16 8C16 6.41775 15.5308 4.87104 14.6518 3.55544C13.7727 2.23985 12.5233 1.21447 11.0615 0.608967C9.59966 0.00346629 7.99113 -0.15496 6.43928 0.153721C4.88743 0.462403 3.46197 1.22433 2.34315 2.34315C1.22433 3.46197 0.462403 4.88743 0.153721 6.43928C-0.15496 7.99113 0.00346629 9.59966 0.608967 11.0615C1.21447 12.5233 2.23985 13.7727 3.55544 14.6518C4.87104 15.5308 6.41775 16 8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8ZM11.14 10.1867C11.2642 10.3116 11.3339 10.4805 11.3339 10.6567C11.3339 10.8328 11.2642 11.0018 11.14 11.1267C11.078 11.1892 11.0043 11.2388 10.9231 11.2726C10.8418 11.3064 10.7547 11.3239 10.6667 11.3239C10.5787 11.3239 10.4915 11.3064 10.4103 11.2726C10.329 11.2388 10.2553 11.1892 10.1933 11.1267L8.12 9.05334C8.08809 9.02429 8.04649 9.0082 8.00334 9.0082C7.96019 9.0082 7.91858 9.02429 7.88667 9.05334L5.81334 11.1267C5.6858 11.2359 5.52175 11.293 5.35397 11.2865C5.18618 11.28 5.02702 11.2104 4.90829 11.0917C4.78957 10.973 4.72001 10.8138 4.71353 10.646C4.70705 10.4783 4.76412 10.3142 4.87334 10.1867L6.94667 8.11334C6.97572 8.08142 6.99181 8.03982 6.99181 7.99667C6.99181 7.95352 6.97572 7.91192 6.94667 7.88L4.87334 5.80667C4.81085 5.7447 4.76126 5.67096 4.72741 5.58972C4.69356 5.50848 4.67614 5.42135 4.67614 5.33334C4.67614 5.24533 4.69356 5.15819 4.72741 5.07695C4.76126 4.99571 4.81085 4.92198 4.87334 4.86C4.99825 4.73584 5.16721 4.66614 5.34334 4.66614C5.51946 4.66614 5.68843 4.73584 5.81334 4.86L7.88667 6.93334C7.90163 6.94928 7.91971 6.96199 7.93977 6.97068C7.95984 6.97936 7.98147 6.98384 8.00334 6.98384C8.0252 6.98384 8.04684 6.97936 8.0669 6.97068C8.08697 6.96199 8.10504 6.94928 8.12 6.93334L10.1933 4.86C10.2555 4.79784 10.3293 4.74854 10.4105 4.7149C10.4917 4.68126 10.5788 4.66394 10.6667 4.66394C10.7546 4.66394 10.8416 4.68126 10.9228 4.7149C11.0041 4.74854 11.0778 4.79784 11.14 4.86C11.2022 4.92216 11.2515 4.99596 11.2851 5.07717C11.3188 5.15839 11.3361 5.24543 11.3361 5.33334C11.3361 5.42124 11.3188 5.50829 11.2851 5.5895C11.2515 5.67072 11.2022 5.74451 11.14 5.80667L9.06667 7.88C9.05073 7.89497 9.03802 7.91304 9.02933 7.93311C9.02065 7.95317 9.01616 7.97481 9.01616 7.99667C9.01616 8.01854 9.02065 8.04017 9.02933 8.06024C9.03802 8.0803 9.05073 8.09837 9.06667 8.11334L11.14 10.1867Z" fill="#A0AEC0"/>
4
- </g>
5
- <defs>
6
- <clipPath id="clip0_1634_880">
7
- <rect width="16" height="16" fill="white"/>
8
- </clipPath>
9
- </defs>
10
- </svg>
package/squirrel/assets/clear-input-hovered.svg DELETED
@@ -1,10 +0,0 @@
1
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <g clip-path="url(#clip0_1634_896)">
3
- <path d="M16 8C16 6.41775 15.5308 4.87104 14.6518 3.55544C13.7727 2.23985 12.5233 1.21447 11.0615 0.608967C9.59966 0.00346629 7.99113 -0.15496 6.43928 0.153721C4.88743 0.462403 3.46197 1.22433 2.34315 2.34315C1.22433 3.46197 0.462403 4.88743 0.153721 6.43928C-0.15496 7.99113 0.00346629 9.59966 0.608967 11.0615C1.21447 12.5233 2.23985 13.7727 3.55544 14.6518C4.87104 15.5308 6.41775 16 8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8ZM11.14 10.1867C11.2642 10.3116 11.3339 10.4805 11.3339 10.6567C11.3339 10.8328 11.2642 11.0018 11.14 11.1267C11.078 11.1892 11.0043 11.2388 10.9231 11.2726C10.8418 11.3064 10.7547 11.3239 10.6667 11.3239C10.5787 11.3239 10.4915 11.3064 10.4103 11.2726C10.329 11.2388 10.2553 11.1892 10.1933 11.1267L8.12 9.05334C8.08809 9.02429 8.04649 9.0082 8.00334 9.0082C7.96019 9.0082 7.91858 9.02429 7.88667 9.05334L5.81334 11.1267C5.6858 11.2359 5.52175 11.293 5.35397 11.2865C5.18618 11.28 5.02702 11.2104 4.90829 11.0917C4.78957 10.973 4.72001 10.8138 4.71353 10.646C4.70705 10.4783 4.76412 10.3142 4.87334 10.1867L6.94667 8.11334C6.97572 8.08142 6.99181 8.03982 6.99181 7.99667C6.99181 7.95352 6.97572 7.91192 6.94667 7.88L4.87334 5.80667C4.81085 5.7447 4.76126 5.67096 4.72741 5.58972C4.69356 5.50848 4.67614 5.42135 4.67614 5.33334C4.67614 5.24533 4.69356 5.15819 4.72741 5.07695C4.76126 4.99571 4.81085 4.92198 4.87334 4.86C4.99825 4.73584 5.16721 4.66614 5.34334 4.66614C5.51946 4.66614 5.68843 4.73584 5.81334 4.86L7.88667 6.93334C7.90163 6.94928 7.91971 6.96199 7.93977 6.97068C7.95984 6.97936 7.98147 6.98384 8.00334 6.98384C8.0252 6.98384 8.04684 6.97936 8.0669 6.97068C8.08697 6.96199 8.10504 6.94928 8.12 6.93334L10.1933 4.86C10.2555 4.79784 10.3293 4.74854 10.4105 4.7149C10.4917 4.68126 10.5788 4.66394 10.6667 4.66394C10.7546 4.66394 10.8416 4.68126 10.9228 4.7149C11.0041 4.74854 11.0778 4.79784 11.14 4.86C11.2022 4.92216 11.2515 4.99596 11.2851 5.07717C11.3188 5.15839 11.3361 5.24543 11.3361 5.33334C11.3361 5.42124 11.3188 5.50829 11.2851 5.5895C11.2515 5.67072 11.2022 5.74451 11.14 5.80667L9.06667 7.88C9.05073 7.89497 9.03802 7.91304 9.02933 7.93311C9.02065 7.95317 9.01616 7.97481 9.01616 7.99667C9.01616 8.01854 9.02065 8.04017 9.02933 8.06024C9.03802 8.0803 9.05073 8.09837 9.06667 8.11334L11.14 10.1867Z" fill="#424E6E"/>
4
- </g>
5
- <defs>
6
- <clipPath id="clip0_1634_896">
7
- <rect width="16" height="16" fill="white"/>
8
- </clipPath>
9
- </defs>
10
- </svg>