fix: Add the necessary expose

rashagu · Dec 16, 2024 · 5d7503b · 5d7503b
1 parent cb8baa6
commit 5d7503b
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 45 deletions.
diff --git 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
@@ -1,15 +1,15 @@
-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';
 
 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
@@ -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
@@ -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
@@ -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