From 5d7503bf51fe2fea508fba6e21bf8f06c29638f8 Mon Sep 17 00:00:00 2001
From: kousum <kousumwork@outlook.com>
Date: Mon, 16 Dec 2024 13:56:40 +0800
Subject: [PATCH] fix: Add the necessary expose

---
 packages/semi-ui-vue/src/App.tsx              |  9 +-
 .../jsonViewer/__test__/JsonViewerDemo.tsx    | 18 ++--
 .../src/components/jsonViewer/index.tsx       |  7 +-
 .../components/toast/__test__/ToastDemo.tsx   | 84 +++++++++++--------
 .../src/components/withVModel/WithVModel.tsx  |  5 +-
 pnpm-lock.yaml                                |  3 +
 6 files changed, 81 insertions(+), 45 deletions(-)

diff --git a/packages/semi-ui-vue/src/App.tsx b/packages/semi-ui-vue/src/App.tsx
index 359b04f7..a3f39699 100755
--- a/packages/semi-ui-vue/src/App.tsx
+++ b/packages/semi-ui-vue/src/App.tsx
@@ -167,6 +167,7 @@ import TreeCheckSimpleJsonDemo from './components/tree/__test__/TreeCheckSimpleJ
 import DragMoveDemo from './components/dragMove/__test__/DragMoveDemo';
 import JsonViewerDemo from './components/jsonViewer/__test__/JsonViewerDemo';
 import SelectTest from './components/select/__test__/SelectTest';
+import { InputVModel } from './components';
 
 export interface ExampleProps {
   name?: string
@@ -189,9 +190,15 @@ const App = defineComponent<ExampleProps>((props, {slots}) => {
   // })
   // console.log(ConfigProvider);
   const a = ref('sdsd')
+  const testRef = ref()
+  watch(testRef, (v)=>{
+    console.log(v, v?.getRef());
+  })
   return () => (
     <div>
       <ConfigProvider locale={zh_CN}>
+        {a.value}
+        <InputVModel ref={testRef} v-model={a.value}/>
         {/*<WithVModelDemo/>*/}
         {/*<CalenderDemo />*/}
         {/*<TransferDemo/>*/}
@@ -328,7 +335,7 @@ const App = defineComponent<ExampleProps>((props, {slots}) => {
         {/*<SelectRenderOptionItem/>*/}
         {/*<SelectDemoToRawTest/>*/}
         {/*<SelectDemo/>*/}
-        <SelectTest/>
+        {/*<SelectTest/>*/}
         {/*<SelectDemo2/>*/}
         {/*<SelectDemo3/>*/}
         {/*<SelectDemo4/>*/}
diff --git a/packages/semi-ui-vue/src/components/jsonViewer/__test__/JsonViewerDemo.tsx b/packages/semi-ui-vue/src/components/jsonViewer/__test__/JsonViewerDemo.tsx
index ef3a7282..c05ba571 100644
--- a/packages/semi-ui-vue/src/components/jsonViewer/__test__/JsonViewerDemo.tsx
+++ b/packages/semi-ui-vue/src/components/jsonViewer/__test__/JsonViewerDemo.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, ref, h, Fragment, useSlots } from 'vue';
+import { defineComponent, ref, h, Fragment, useSlots, onMounted, nextTick } from 'vue';
 import { CombineProps } from '../../interface';
 import JsonViewer from '../index';
 
@@ -6,10 +6,10 @@ interface JsonViewerDemoProps {
   name?: string;
 }
 
-const data = `{
-    "name": "Semi",
-    "version": "0.0.0"
-}`;
+const data = '{' +
+  '"name": "Semi",' +
+  '"version": "0.0.0"' +
+  '}';
 export const vuePropsType: CombineProps<JsonViewerDemoProps> = {
   name: String,
 };
@@ -18,11 +18,17 @@ const JsonViewerDemo = defineComponent({
   name: 'JsonViewerDemo',
   setup(props, { attrs }) {
     const slots = useSlots();
+    const j = ref()
+    onMounted(()=>{
+      nextTick(()=>{
+        // j.value?.format()
+      })
+    })
 
 
     return () => (
       <div style={{ marginBottom: '16px' }}>
-        <JsonViewer height={100} width={400} value={data} />
+        <JsonViewer ref={j} height={100} width={400} value={data} />
       </div>
     );
   },
diff --git a/packages/semi-ui-vue/src/components/jsonViewer/index.tsx b/packages/semi-ui-vue/src/components/jsonViewer/index.tsx
index 9e1ee0b5..3ab6cd0b 100644
--- a/packages/semi-ui-vue/src/components/jsonViewer/index.tsx
+++ b/packages/semi-ui-vue/src/components/jsonViewer/index.tsx
@@ -90,7 +90,7 @@ export const vuePropsType = vuePropsMake(propTypes, defaultProps);
 const JsonViewerCom = defineComponent({
   props: { ...vuePropsType },
   name: 'JsonViewerCom',
-  setup(props, { attrs }) {
+  setup(props, { expose, attrs }) {
     const slots = useSlots();
     const state = reactive<JsonViewerState>({
       searchOptions: {
@@ -155,6 +155,11 @@ const JsonViewerCom = defineComponent({
       foundation.jsonViewer.format();
     }
 
+    expose({
+      getValue,
+      format,
+    })
+
     function getStyle() {
       const { width, height } = props;
       return {
diff --git a/packages/semi-ui-vue/src/components/toast/__test__/ToastDemo.tsx b/packages/semi-ui-vue/src/components/toast/__test__/ToastDemo.tsx
index 5cb09a9b..5e3ca63b 100644
--- a/packages/semi-ui-vue/src/components/toast/__test__/ToastDemo.tsx
+++ b/packages/semi-ui-vue/src/components/toast/__test__/ToastDemo.tsx
@@ -12,7 +12,7 @@ export const vuePropsType = {
 }
 const ToastDemo = defineComponent((props, {}) => {
   const slots = useSlots()
-  const Toast = useToastHook()
+  // const Toast = useToastHook()
   const id = Toast.info({
     content:<div class={"test_class1"}>useToastHook</div>
   })
@@ -46,46 +46,58 @@ const ToastDemo = defineComponent((props, {}) => {
     title: 'This is a success message',
     content: 123,
   };
-  return () => (
-    <div>
-
-      <ToastList ref={(instance: any) => {
-        instance?.add({...{
-            motion: true,
-            zIndex: 1010,
-            content: 'test',
-          }, id: 'id'});
-      }}/>
+  return () => {
+
+    return  <Button onClick={() => {
+      Toast.info('opts.value')
+      // setTimeout(() => {
+      //   opts.value = {
+      //     content: 'Hi, Bytedansssssssssssce dance dance',
+      //     duration: 3,
+      //   }
+      // }, 1000)
+    }}>Display Toast</Button>
+    return (
       <div>
-        <Button onClick={() => {
-          Toast.info(opts.value)
-          // setTimeout(() => {
-          //   opts.value = {
-          //     content: 'Hi, Bytedansssssssssssce dance dance',
-          //     duration: 3,
-          //   }
-          // }, 1000)
-        }}>Display Toast</Button>
-        <br/>
-
-
-        <br/>
-        <Button onClick={throttled} className={'Throttled'}>Throttled Toast</Button>
-
 
+        <ToastList ref={(instance: any) => {
+          instance?.add({...{
+              motion: true,
+              zIndex: 1010,
+              content: 'test',
+            }, id: 'id'});
+        }}/>
         <div>
-          <Button
-            onClick={() => {
-              toast_.success(config);
-            }}
-          >
-            Hook Toast
-          </Button>
+          <Button onClick={() => {
+            Toast.info(opts.value)
+            // setTimeout(() => {
+            //   opts.value = {
+            //     content: 'Hi, Bytedansssssssssssce dance dance',
+            //     duration: 3,
+            //   }
+            // }, 1000)
+          }}>Display Toast</Button>
+          <br/>
+
+
+          <br/>
+          <Button onClick={throttled} className={'Throttled'}>Throttled Toast</Button>
+
+
+          <div>
+            <Button
+              onClick={() => {
+                toast_.success(config);
+              }}
+            >
+              Hook Toast
+            </Button>
+          </div>
+          {contextHolder.value}
         </div>
-        {contextHolder.value}
       </div>
-    </div>
-  )
+    )
+  }
 })
 
 
diff --git a/packages/semi-ui-vue/src/components/withVModel/WithVModel.tsx b/packages/semi-ui-vue/src/components/withVModel/WithVModel.tsx
index b6ed52af..bb9fd650 100644
--- a/packages/semi-ui-vue/src/components/withVModel/WithVModel.tsx
+++ b/packages/semi-ui-vue/src/components/withVModel/WithVModel.tsx
@@ -16,13 +16,16 @@ export default function WithVModel<T>(Comp: DefineSetupFnComponent<T>, opt?: Wit
       const instance = ref();
 
       expose({
-        ...instance.value,
+        getRef(){
+          return instance.value
+        },
       });
       return () => {
         if (props['onUpdate:modelValue']) {
           return (
             //@ts-ignore
             <Comp
+              ref={instance}
               {...omit(props, 'update:modelValue', 'modelValue', opt?.valueKey || 'value', 'onChange')}
               {...{
                 [opt?.valueKey || 'value']: props.modelValue,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f62aa388..02d26b81 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -627,6 +627,9 @@ importers:
       fast-copy:
         specifier: ^3.0.2
         version: 3.0.2
+      jsonc-parser:
+        specifier: 3.3.1
+        version: 3.3.1
       lodash:
         specifier: ^4.17.21
         version: 4.17.21