@weni/unnnic-system 3.12.3-alpha.4 → 3.12.3-alpha.5

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 (31) hide show
  1. package/dist/components/DateFilter/DateFilter.vue.d.ts +37 -10
  2. package/dist/components/Input/BaseInput.vue.d.ts +12 -3
  3. package/dist/components/Input/BaseInput.vue.d.ts.map +1 -1
  4. package/dist/components/Input/Input.vue.d.ts +37 -10
  5. package/dist/components/Input/Input.vue.d.ts.map +1 -1
  6. package/dist/components/Input/TextInput.vue.d.ts +25 -7
  7. package/dist/components/Input/TextInput.vue.d.ts.map +1 -1
  8. package/dist/components/ModalNext/ModalNext.vue.d.ts +37 -10
  9. package/dist/components/MultiSelect/index.vue.d.ts.map +1 -1
  10. package/dist/components/Select/index.vue.d.ts.map +1 -1
  11. package/dist/components/SelectSmart/SelectSmart.vue.d.ts +25 -7
  12. package/dist/components/SelectTime/index.vue.d.ts +25 -7
  13. package/dist/components/index.d.ts +222 -60
  14. package/dist/components/index.d.ts.map +1 -1
  15. package/dist/{es-e4e4f53d.mjs → es-a9e51a05.mjs} +1 -1
  16. package/dist/{index-492e2532.mjs → index-ade761d4.mjs} +37 -26
  17. package/dist/{pt-br-ac2463c3.mjs → pt-br-5395459d.mjs} +1 -1
  18. package/dist/style.css +1 -1
  19. package/dist/unnnic.mjs +1 -1
  20. package/dist/unnnic.umd.js +2 -2
  21. package/package.json +1 -1
  22. package/src/components/Input/BaseInput.vue +7 -6
  23. package/src/components/Input/Input.scss +1 -1
  24. package/src/components/Input/Input.vue +7 -2
  25. package/src/components/Input/TextInput.vue +8 -5
  26. package/src/components/Input/__test__/TextInput.spec.js +1 -1
  27. package/src/components/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +5 -5
  28. package/src/components/MultiSelect/index.vue +2 -1
  29. package/src/components/Select/__tests__/__snapshots__/Select.spec.js.snap +4 -4
  30. package/src/components/Select/index.vue +2 -1
  31. package/src/stories/Input.mdx +3 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@weni/unnnic-system",
3
- "version": "3.12.3-alpha.4",
3
+ "version": "3.12.3-alpha.5",
4
4
  "type": "commonjs",
5
5
  "files": [
6
6
  "dist",
package/src/components/Input/BaseInput.vue CHANGED
@@ -4,7 +4,7 @@
4
4
  v-mask="mask"
5
5
  v-bind="attributes"
6
6
  :value="fullySanitize(modelValue)"
7
- :class="[classes, { focus: forceActiveStatus }]"
7
+ :class="[classes, { focus, 'use-focus-prop': useFocusProp }]"
8
8
  :type="nativeType"
9
9
  :readonly="readonly"
10
10
  />
@@ -12,7 +12,7 @@
12
12
  v-else
13
13
  v-bind="attributes"
14
14
  :value="fullySanitize(modelValue)"
15
- :class="[classes, { focus: forceActiveStatus }]"
15
+ :class="[classes, { focus, 'use-focus-prop': useFocusProp }]"
16
16
  :type="nativeType"
17
17
  :maxlength="maxlength"
18
18
  :readonly="readonly"
@@ -60,15 +60,16 @@ export default {
60
60
  type: Boolean,
61
61
  default: false,
62
62
  },
63
- forceActiveStatus: {
63
+ useFocusProp: {
64
+ type: Boolean,
65
+ default: false,
66
+ },
67
+ focus: {
64
68
  type: Boolean,
65
69
  default: false,
66
70
  },
67
71
  },
68
72
  emits: ['update:modelValue'],
69
- data() {
70
- return {};
71
- },
72
73
  computed: {
73
74
  attributes() {
74
75
  return {
package/src/components/Input/Input.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  caret-color: $unnnic-color-fg-muted;
10
10
  font: $unnnic-font-body;
11
11
 
12
- &:focus,
12
+ &:focus:not(.use-focus-prop),
13
13
  &.focus {
14
14
  border-color: $unnnic-color-border-active;
15
15
  }
package/src/components/Input/Input.vue CHANGED
@@ -13,7 +13,8 @@
13
13
  v-bind="$attrs"
14
14
  v-model="val"
15
15
  class="unnnic-form-input"
16
- :forceActiveStatus="forceActiveStatus"
16
+ :useFocusProp="useFocusProp"
17
+ :focus="focus"
17
18
  :placeholder="placeholder"
18
19
  :iconLeft="iconLeft"
19
20
  :iconRight="iconRight"
@@ -135,7 +136,11 @@ export default {
135
136
  type: Boolean,
136
137
  default: false,
137
138
  },
138
- forceActiveStatus: {
139
+ useFocusProp: {
140
+ type: Boolean,
141
+ default: false,
142
+ },
143
+ focus: {
139
144
  type: Boolean,
140
145
  default: false,
141
146
  },
package/src/components/Input/TextInput.vue CHANGED
@@ -15,9 +15,8 @@
15
15
  :hasClearIcon="showClear"
16
16
  :maxlength="maxlength"
17
17
  :readonly="readonly"
18
- :forceActiveStatus="forceActiveStatus"
19
- @focus="onFocus"
20
- @blur="onBlur"
18
+ :useFocusProp="useFocusProp"
19
+ :focus="focus"
21
20
  />
22
21
 
23
22
  <UnnnicIcon
@@ -120,7 +119,11 @@ export default {
120
119
  type: Boolean,
121
120
  default: false,
122
121
  },
123
- forceActiveStatus: {
122
+ useFocusProp: {
123
+ type: Boolean,
124
+ default: false,
125
+ },
126
+ focus: {
124
127
  type: Boolean,
125
128
  default: false,
126
129
  },
@@ -162,7 +165,7 @@ export default {
162
165
  },
163
166
 
164
167
  methods: {
165
- focus() {
168
+ focusInput() {
166
169
  this.$refs['base-input'].$el.focus();
167
170
  },
168
171
 
package/src/components/Input/__test__/TextInput.spec.js CHANGED
@@ -129,7 +129,7 @@ describe('TextInput.vue', () => {
129
129
 
130
130
  test('focus method calls focus on base input element', () => {
131
131
  const focusSpy = vi.spyOn(wrapper.vm.$refs['base-input'].$el, 'focus');
132
- wrapper.vm.focus();
132
+ wrapper.vm.focusInput();
133
133
 
134
134
  expect(focusSpy).toHaveBeenCalled();
135
135
  focusSpy.mockRestore();
package/src/components/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap CHANGED
@@ -4,7 +4,7 @@ exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with defaul
4
4
  "<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
5
5
  <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-03c7fb50="" class="unnnic-form-element unnnic-form md unnnic-multi-select__input" data-testid="form-element">
6
6
  <!--v-if-->
7
- <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right unnnic-multi-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="">
7
+ <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right use-focus-prop unnnic-multi-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="">
8
8
  <!--v-if-->
9
9
  <section data-v-a0d36167="" class="icon-right-container">
10
10
  <!--v-if--><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span>
@@ -22,7 +22,7 @@ exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with disabl
22
22
  "<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
23
23
  <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-03c7fb50="" class="unnnic-form-element unnnic-form-element--disabled unnnic-form md unnnic-multi-select__input" data-testid="form-element">
24
24
  <!--v-if-->
25
- <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right unnnic-multi-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="" disabled="">
25
+ <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right use-focus-prop unnnic-multi-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="" disabled="">
26
26
  <!--v-if-->
27
27
  <section data-v-a0d36167="" class="icon-right-container">
28
28
  <!--v-if--><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-muted unnnic-icon-size--ant unnnic-icon__size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span>
@@ -40,7 +40,7 @@ exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with multip
40
40
  "<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
41
41
  <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-03c7fb50="" class="unnnic-form-element unnnic-form md unnnic-multi-select__input" data-testid="form-element">
42
42
  <!--v-if-->
43
- <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon unnnic-multi-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="true" type="text" readonly="" value="Option 1, Option 2">
43
+ <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon use-focus-prop unnnic-multi-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="true" type="text" readonly="" value="Option 1, Option 2">
44
44
  <!--v-if-->
45
45
  <section data-v-a0d36167="" class="icon-right-container"><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable icon-clear" data-testid="material-icon" translate="no">close</span><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span></section>
46
46
  </div>
@@ -56,7 +56,7 @@ exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with search
56
56
  "<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
57
57
  <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-03c7fb50="" class="unnnic-form-element unnnic-form md unnnic-multi-select__input" data-testid="form-element">
58
58
  <!--v-if-->
59
- <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right unnnic-multi-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="">
59
+ <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right use-focus-prop unnnic-multi-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="">
60
60
  <!--v-if-->
61
61
  <section data-v-a0d36167="" class="icon-right-container">
62
62
  <!--v-if--><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span>
@@ -74,7 +74,7 @@ exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with select
74
74
  "<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
75
75
  <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-03c7fb50="" class="unnnic-form-element unnnic-form md unnnic-multi-select__input" data-testid="form-element">
76
76
  <!--v-if-->
77
- <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon unnnic-multi-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="true" type="text" readonly="" value="Option 1">
77
+ <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon use-focus-prop unnnic-multi-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="true" type="text" readonly="" value="Option 1">
78
78
  <!--v-if-->
79
79
  <section data-v-a0d36167="" class="icon-right-container"><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable icon-clear" data-testid="material-icon" translate="no">close</span><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span></section>
80
80
  </div>
package/src/components/MultiSelect/index.vue CHANGED
@@ -9,7 +9,8 @@
9
9
  :modelValue="inputValue"
10
10
  class="unnnic-multi-select__input"
11
11
  readonly
12
- :forceActiveStatus="openPopover"
12
+ useFocusProp
13
+ :focus="openPopover"
13
14
  :size="props.size"
14
15
  :placeholder="props.placeholder"
15
16
  :label="props.label"
package/src/components/Select/__tests__/__snapshots__/Select.spec.js.snap CHANGED
@@ -4,7 +4,7 @@ exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with default pro
4
4
  "<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
5
5
  <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-6077efb7="" class="unnnic-form-element unnnic-form md unnnic-select__input" data-testid="form-element">
6
6
  <!--v-if-->
7
- <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right unnnic-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="">
7
+ <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right use-focus-prop unnnic-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="">
8
8
  <!--v-if-->
9
9
  <section data-v-a0d36167="" class="icon-right-container">
10
10
  <!--v-if--><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span>
@@ -22,7 +22,7 @@ exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with disabled st
22
22
  "<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
23
23
  <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-6077efb7="" class="unnnic-form-element unnnic-form-element--disabled unnnic-form md unnnic-select__input" data-testid="form-element">
24
24
  <!--v-if-->
25
- <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right unnnic-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="" disabled="">
25
+ <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right use-focus-prop unnnic-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="" disabled="">
26
26
  <!--v-if-->
27
27
  <section data-v-a0d36167="" class="icon-right-container">
28
28
  <!--v-if--><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-muted unnnic-icon-size--ant unnnic-icon__size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span>
@@ -40,7 +40,7 @@ exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with search enab
40
40
  "<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
41
41
  <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-6077efb7="" class="unnnic-form-element unnnic-form md unnnic-select__input" data-testid="form-element">
42
42
  <!--v-if-->
43
- <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right unnnic-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="">
43
+ <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right use-focus-prop unnnic-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="">
44
44
  <!--v-if-->
45
45
  <section data-v-a0d36167="" class="icon-right-container">
46
46
  <!--v-if--><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span>
@@ -58,7 +58,7 @@ exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with selected va
58
58
  "<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
59
59
  <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-6077efb7="" class="unnnic-form-element unnnic-form md unnnic-select__input" data-testid="form-element">
60
60
  <!--v-if-->
61
- <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon unnnic-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="true" type="text" readonly="" value="Option 1">
61
+ <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon use-focus-prop unnnic-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="true" type="text" readonly="" value="Option 1">
62
62
  <!--v-if-->
63
63
  <section data-v-a0d36167="" class="icon-right-container"><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable icon-clear" data-testid="material-icon" translate="no">close</span><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_down</span></section>
64
64
  </div>
package/src/components/Select/index.vue CHANGED
@@ -12,7 +12,8 @@
12
12
  :modelValue="inputValue"
13
13
  class="unnnic-select__input"
14
14
  readonly
15
- :forceActiveStatus="openPopover"
15
+ useFocusProp
16
+ :focus="openPopover"
16
17
  :size="props.size"
17
18
  :placeholder="props.placeholder"
18
19
  :label="props.label"
package/src/stories/Input.mdx CHANGED
@@ -42,6 +42,9 @@ The `Input` component is designed to provide an input field for users to enter t
42
42
  | placeholder | `String` of the native input placeholder | `String` | `''` |
43
43
  | iconLeft | `String` of the left icon | `String` | `undefined` |
44
44
  | iconRight | `String` of the right icon | `String` | `false` |
45
+ | useFocusProp | `Boolean` to enable use focus by prop (ignore native css) | `true` \| `false` | `false` |
46
+ | focus | `Boolean` to enable focus component status | `true` \| `false` | `false` |
47
+
45
48
 
46
49
  ## Example
47
50
  Some examples of uses of the `UnnnicInput`