From 7e8e8aec9409aec98bfb2a95caeb874e29957b65 Mon Sep 17 00:00:00 2001
From: David Nixon <david_nixon@us.ibm.com>
Date: Mon, 31 Jul 2023 14:38:26 -0400
Subject: [PATCH] feat: add v-model

---
 src/components/CvSearch/CvSearch.stories.mdx | 80 ++++++++++++++++++--
 1 file changed, 72 insertions(+), 8 deletions(-)

diff --git a/src/components/CvSearch/CvSearch.stories.mdx b/src/components/CvSearch/CvSearch.stories.mdx
index 088b4a8ab..54c8c8c94 100644
--- a/src/components/CvSearch/CvSearch.stories.mdx
+++ b/src/components/CvSearch/CvSearch.stories.mdx
@@ -4,8 +4,7 @@ import { sbCompPrefix } from '../../global/storybook-utils';
 import { SEARCH_SIZES } from './index';
 import { action } from '@storybook/addon-actions';
 import { ref } from 'vue';
-const myValue = ref('searching');
-
+const myValue = ref('searching galaxies');
 
 <Meta title={`${sbCompPrefix}/CvSearch`} component={CvSearch} />
 
@@ -26,14 +25,14 @@ export const Template = args => ({
       formItem: args.formItem,
       expandable: args.expandable,
       value: args.value,
+      myValue: myValue,
       onInput: action('input'),
-      onVModel: action('update:value'),
     };
   },
   template: args.template,
 });
 const defaultTemplate = `
-  <cv-search
+<cv-search
   :light="light"
   :label="label"
   :placeholder="placeholder"
@@ -44,16 +43,39 @@ const defaultTemplate = `
   :form-item="formItem"
   :aria-label="ariaLabel"
   :clear-aria-label="clearArialabel"
+  @input="onInput"
   >
 </cv-search>
 `;
+const vModelTemplate = `
+<div>
+  <cv-search
+    v-model:value="myValue"
+    :light="light"
+    :label="label"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :size="size"
+    :expandable="expandable"
+    :form-item="formItem"
+    :aria-label="ariaLabel"
+    :clear-aria-label="clearArialabel"
+    >
+  </cv-search>
+  <div style="margin-top:1rem; background-color: #888888;  padding:1rem">
+    <div style="padding:1rem">v-model value: {{ myValue }}</div>
+    <input type="search" v-model="myValue"/>
+  </div>
+</div>
+`;
 
 # CvSearch
 
 Migration notes:
 
-- The `v-model` is different in Vue 3 than Vue 2.If you specify it you will see an error deprecation message in the log.
+- The `v-model` is different in Vue 3 than Vue 2. If you specify it you will see an error deprecation message in the log.
   Please use `v-model:value=something` instead.
+- The "toolbar" mode is removed in this version. Please use the `expandable` mode instead.
 
 <Canvas>
   <Story
@@ -67,7 +89,8 @@ Migration notes:
           'update:modelValue',
           'update:value',
           'large',
-          'small','toolbarAriaLabel',
+          'small',
+          'toolbarAriaLabel',
           'kind',
         ],
       },
@@ -77,7 +100,7 @@ Migration notes:
       template: defaultTemplate,
       light: false,
       disabled: false,
-      placeholder: 'JWST: search for light from the first stars'
+      placeholder: 'JWST: search for light from the first stars',
     }}
     argTypes={{
       light: {
@@ -99,5 +122,46 @@ Migration notes:
 # v-model
 
 - The `v-model` is different in Vue 3 than Vue 2.If you specify it you will see an error deprecation message in the log.
-Please use `v-model:value=something` instead.
+  Please use `v-model:value=something` instead.
 
+<Canvas>
+  <Story
+    name="v-model"
+    parameters={{
+      controls: {
+        exclude: [
+          'input',
+          'modelValue',
+          'template',
+          'update:modelValue',
+          'update:value',
+          'large',
+          'small',
+          'toolbarAriaLabel',
+          'kind',
+        ],
+      },
+      docs: { source: { code: vModelTemplate } },
+    }}
+    args={{
+      template: vModelTemplate,
+      light: false,
+      disabled: false,
+      placeholder: 'JWST: search for light from the first stars',
+    }}
+    argTypes={{
+      light: {
+        description: '`true` to use the light version.',
+        table: { category: 'props', defaultValue: { summary: false } },
+      },
+      size: {
+        control: 'select',
+        default: 'xl',
+        options: SEARCH_SIZES,
+        table: { defaultValue: { summary: 'xl' } },
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>