[Component] Search

[elisegriset92]

❓ Types of changes

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• 📦 New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Closes #23

📝 Checklist

• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes

[ga-devfront]

Thank you for your work ! Here is a small review of what I think could be improved.
Don't forget to rebase for resolve conflicts.

[ga-devfront]

Really thank you for your work ! I have just a little one proposition for improving your component.

[ga-devfront]

Thank you for all your work, I think we can merge it !
Just don't forget to rebase.

[ga-devfront]

@aAmorim27 possible de compléter ma review pour être sur de ne rien avoir oublié avant de merge ?

[aAmorim27]

I'm having an Uncaught RangeError: Maximum call stack size exceeded when i delete the text in search after pressing the submit button
Otherwise there is small improvements to do and it's seems that the confirm button is missing from html/css snippets of the documentation

[aAmorim27]

Suggested change

	setup() {
	return { args }
	},
	setup() {
	const myValue = ref('')
	return { args, myValue }
	},

Add a v-model on this story or otherwise we won't be able to use the search because the value will dispear when unfocusing the element

[elisegriset92]

@aAmorim27 need other review ?

[ga-devfront]

@aAmorim27 need other review ?

yes I think is cool if you can review it

[aAmorim27]

Ok for me 👍 , just some quick fixes to do on the storybook docs

[aAmorim27]

The rounded prop is missing in the controls list

[aAmorim27]

Suggested change

	<!--VueJS Snippet-->
	<puik-search v-model="myValue" rounded :autocomplete="'test'"/>
	<!--HTML/CSS Snippet-->
	<div class="puik-search">
	<div class="puik-search__wrapper puik-search__wrapper--rounded-input">
	<input class="puik-search__field" type="text" rounded :autocomplete="'test'"/>
	</div>
	</div>
	<!--VueJS Snippet-->
	<puik-search v-model="myValue" rounded autocomplete="search"/>
	<!--HTML/CSS Snippet-->
	<div class="puik-search">
	<div class="puik-search__wrapper puik-search__wrapper--rounded-input">
	<span class="puik-search__icon puik-h2">search</span>
	<input class="puik-search__field" type="text" autocomplete="search" />
	</div>
	</div>

The icon is missing & use search as autocomplete value,

[kktos]

just a thought but what about a generic way for this ?
e.g:
enhanced the input text component so it can display icons in its zone. On the left or on the right.
With the ability to bind an action.
Then, the search component will be simply a use of this input text component with one icon (x) on the right side with a "clear text" action.

[kktos]

We have some searchbox already in our code that's why I'm pretty interested by this component ;)
Kudos for your work.

[mattgoud]

outdated (based on v1)