re-added v-model for the vue wrapper example apps, code cleanup, rena…

…ming to search-field

examples/wrapper-components/react-javascript/src/App.js

@@ -1,14 +1,16 @@
 import './App.css';
 import Link from './components/Link/Link';
-import SearchInput from './components/SearchInput/SearchInput';
+import SearchField from './components/SearchField/SearchField';
 import Spinner from './components/Spinner/Spinner';
 import NumberIndicator from './components/NumberIndicator/NumberIndicator';
 
 function App() {
   return (
     <div>
+      <h1>Stencil Framework integration - React + TS </h1>
+
       <h2>Search Field</h2>
-      <SearchInput />
+      <SearchField />
       <br />
 
       <h2>Spinner</h2>

examples/wrapper-components/react-javascript/src/components/SearchBar/SearchBar.js

@@ -3,7 +3,7 @@ import { IfxSearchBar } from '@infineon/infineon-design-system-react';
 
 function SearchBar() {
   const handleSearch = (event) => {
-    console.log("handling search: ", event.detail?.detail)
+    console.log("handling search: ", event.detail)
   };
   return (
     <div  >

examples/wrapper-components/react-javascript/src/components/SearchField/SearchField.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { IfxSearchField } from '@infineon/infineon-design-system-react';
+
+function SearchField() {
+  const handleSearch = (event) => {
+    console.log("handling input: ", event.detail)
+  };
+
+  return (
+    <div  >
+      <IfxSearchField disabled="false" size='m' show-delete-icon="true" onIfxInput={handleSearch}></IfxSearchField>
+    </div>
+  )
+}
+
+export default SearchField;
+
+

examples/wrapper-components/react-typescript/src/App.tsx

@@ -8,11 +8,11 @@ import SearchBar from './components/SearchBar/SearchBar';
 import Accordion from './components/Accordion/Accordion';
 import RadioButton from './components/RadioButton/RadioButton';
 
-import Spinner from './Components/Spinner/Spinner'
+import Spinner from './components/Spinner'
 
 import NumberIndicator from './components/NumberIndicator/NumberIndicator'
 
-import SearchInput from './components/SearchInput/SearchInput'
+import SearchField from './components/SearchField/SearchField'
 
 function App() {
 
@@ -56,7 +56,7 @@ function App() {
       <br />
 
       <h2>Search Field</h2>
-       <SearchInput />
+       <SearchField />
        <br />
 
        <h2>Search Bar</h2>

examples/wrapper-components/react-typescript/src/components/SearchBar/SearchBar.tsx

@@ -2,7 +2,7 @@ import { IfxSearchBar } from '@infineon/infineon-design-system-react';
 
 function SearchBar() {
   const handleSearch = (event: CustomEvent) => {
-    console.log("handling search: ", event.detail?.detail)
+    console.log("handling search: ", event.detail)
   };
   return (
     <div  >

examples/wrapper-components/react-typescript/src/components/SearchField/SearchField.tsx

@@ -0,0 +1,17 @@
+import {  IfxSearchField } from '@infineon/infineon-design-system-react';
+
+function SearchField() {
+  const handleSearch = (event: CustomEvent) => {
+    console.log("handling input: ", event.detail)
+  };
+
+  return (
+    <div  >
+        <IfxSearchField disabled={false} size='m' show-delete-icon="true" onIfxInput={handleSearch}></IfxSearchField>
+    </div>
+  )
+}
+
+export default SearchField;
+
+

examples/wrapper-components/vue-javascript/src/App.vue

@@ -1,13 +1,13 @@
 
 <template>
-  <SearchInput />
   <h1 class="header">Stencil Framework integration - Vue + JS </h1>
   <Alert />
   <Button />
   <Checkbox />
   <RadioButton />
   <ProgressBar />
   <Search />
+  <SearchField />
   <TextInput />
   <Spinner />
   <Link />
@@ -16,8 +16,7 @@
 
 
 <script lang="ts" setup>
-import SearchInput from './components/SearchInput.vue'
-
+import SearchField from './components/SearchField.vue'
 import Alert from './components/Alert.vue'
 import Button from './components/Button.vue'
 import Checkbox from './components/Checkbox.vue'
@@ -31,6 +30,4 @@ import Link from './components/Link.vue'
 
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

examples/wrapper-components/vue-javascript/src/components/Link.vue

@@ -2,7 +2,10 @@
 
 <template>
   <div>
+    <h2>Link</h2>
     <ifx-link href="http://google.com" color="secondary" target="_blank" bold="" underline="">link</ifx-link>
+    <br />
+    <br />
   </div>
 </template>
 

examples/wrapper-components/vue-javascript/src/components/Search.vue

@@ -1,13 +1,6 @@
 <template>
   <div>
-    <h2>Search-Input</h2>
-    <h3>Using v-model</h3>
-    <br />
-    <ifx-search-input v-model="searchInput" style="width: 100%" show-close-button="true"></ifx-search-input>
-    <p>Search input: {{ searchInput }}</p>
-
-    <br />
-    <h2>Ifx-Search-Bar</h2>
+    <h2>Search-Bar</h2>
     <h3>Using v-model</h3>
     <ifx-search-bar v-model="searchBarModel" style="width: 100%" show-close-button="true"></ifx-search-bar>
     <p>Search bar : {{ searchBar }}</p>
@@ -20,7 +13,6 @@
 import { ref, computed, onMounted } from 'vue'
 
 const searchBar = ref('');
-const searchInput = ref('');
 
 const searchBarModel = computed({
   get: () => searchBar.value,
@@ -37,7 +29,6 @@ onMounted(() => {
 
 function updateSearchBarAndSearchInput() {
   console.log("updating search input and search bar from parent component")
-  searchInput.value = searchInput.value + "+1";
   searchBar.value = searchBar.value + "+2";
 }
 

examples/wrapper-components/vue-javascript/src/components/SearchField.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <h2>Search-Field</h2>
+    <h3>Using v-model</h3>
+
+    <ifx-search-field v-model="searchInput" disabled="false" size='m' show-delete-icon="true"></ifx-search-field>
+    <p>Search field: {{ searchInput }}</p>
+    <br />
+    <br />
+  </div>
+</template>
+
+<script  setup>
+import { ref, onMounted } from 'vue'
+const searchInput = ref('');
+
+onMounted(() => {
+  updateSearchBarAndSearchInput();
+  setInterval(updateSearchBarAndSearchInput, 10000);
+})
+
+
+function updateSearchBarAndSearchInput() {
+  console.log("updating search field")
+  searchInput.value = searchInput.value + "+1";
+}
+
+</script>
+
+<style scoped></style>

examples/wrapper-components/vue-javascript/src/components/TextInput.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <h2>Text Input</h2>
+    <h3>Using v-model</h3>
     <div>
       <ifx-text-input v-model="inputValue" error="false" disabled="false" success="false" placeholder="Placeholder"
         errorMessage="">Label</ifx-text-input>

examples/wrapper-components/vue-typescript/src/App.vue

@@ -7,7 +7,7 @@
   <Checkbox />
   <RadioButton />
   <ProgressBar />
-  <SearchInput />
+  <SearchField />
   <TextInput />
   <Spinner />
   <Link />
@@ -23,7 +23,7 @@ import Button from './components/Button.vue'
 import Checkbox from './components/Checkbox.vue'
 import NumberIndicator from './components/NumberIndicator.vue'
 import ProgressBar from './components/ProgressBar.vue'
-import SearchInput from './components/SearchInput.vue'
+import SearchField from './components/SearchField.vue'
 import RadioButton from './components/RadioButton.vue'
 import TextInput from './components/TextInput.vue'
 import Spinner from './components/Spinner.vue'

examples/wrapper-components/vue-typescript/src/components/Link.vue

@@ -2,7 +2,11 @@
 
 <template>
   <div>
+    <h2>Link</h2>
     <ifx-link href="http://google.com" color="secondary" target="_blank" bold="" underline="">link</ifx-link>
+
+    <br />
+    <br />
   </div>
 </template>
 

examples/wrapper-components/vue-typescript/src/components/NumberIndicator.vue

@@ -7,6 +7,8 @@
     <ifx-number-indicator inverted="false">1</ifx-number-indicator>
     <button @click="increaseNumber">+</button>
     <button @click="decreaseNumber">-</button>
+    <br />
+    <br />
   </div>
 </template>
 

examples/wrapper-components/vue-typescript/src/components/Search.vue

@@ -2,13 +2,7 @@
 
 <template>
   <div>
-    <h2>Ifx-Search-Input</h2>
-    <h3>Using v-model</h3>
-    <ifx-search-input v-model="searchInputQuery" style="width: 100%" show-close-button="true"></ifx-search-input>
-    <p>Search input: {{ searchInput }}</p>
-
-    <br />
-    <h2>Ifx-Search-Bar</h2>
+    <h2>Search-Bar</h2>
     <h3>Using v-model</h3>
     <ifx-search-bar v-model="searchBarQuery" style="width: 100%" show-close-button="true"></ifx-search-bar>
     <p>Search bar: {{ searchBar }}</p>
@@ -21,13 +15,7 @@
 import { computed, ref } from 'vue'
 
 const searchBar = ref('');
-const searchInput = ref('');
 
-// Computed property to retrieve the query value
-const searchInputQuery = computed({
-  get: () => searchInput.value,
-  set: (newValue) => handleSearchInput(newValue)
-});
 
 // Computed property to retrieve the query value
 const searchBarQuery = computed({
@@ -43,9 +31,6 @@ function handleSearch(event: any) {
   searchBar.value = event.detail;//search input emits an event and even though the search bar event is accessed automatically in v-model, we need to go one layer down to the detail of the search input event
 }
 
-function handleSearchInput(event: string) {
-  console.log("updating search input: ", event)
-  searchInput.value = event; //v-model automatically accesses event.detail
-};
+
 </script>
 

examples/wrapper-components/vue-typescript/src/components/SearchField.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <h2>Search Field</h2>
+    <h3>Using v-model</h3>
+
+    <ifx-search-field v-model="searchInput" disabled="false" size='m' show-delete-icon="true"></ifx-search-field>
+    <br />
+    <br />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+const searchInput = ref('');
+
+onMounted(() => {
+  updateSearchBarAndSearchInput();
+  setInterval(updateSearchBarAndSearchInput, 10000);
+})
+
+
+function updateSearchBarAndSearchInput() {
+  console.log("updating search field")
+  searchInput.value = searchInput.value + "+1";
+}
+</script>
+
+<style scoped></style>