chore: merge src and src-next

src/tree-select/README.md

@@ -15,9 +15,9 @@ Vue.use(TreeSelect);
 
 ```html
 <van-tree-select
+  v-model:active-id="activeId"
+  v-model:main-active-index="activeIndex"
   :items="items"
-  :active-id.sync="activeId"
-  :main-active-index.sync="activeIndex"
 />
 ```
 
@@ -37,9 +37,9 @@ export default {
 
 ```html
 <van-tree-select
+  v-model:active-id="activeIds"
+  v-model:main-active-index="activeIndex"
   :items="items"
-  :active-id.sync="activeIds"
-  :main-active-index.sync="activeIndex"
 />
 ```
 
@@ -58,7 +58,7 @@ export default {
 ### Custom Content
 
 ```html
-<van-tree-select height="55vw" :items="items" :main-active-index.sync="active">
+<van-tree-select v-model:main-active-index="active" height="55vw" :items="items">
   <template #content>
     <van-image
       v-if="active === 0"
@@ -87,9 +87,9 @@ export default {
 
 ```html
 <van-tree-select
+  v-model:main-active-index="activeIndex"
   height="55vw"
   :items="items"
-  :main-active-index.sync="activeIndex"
 />
 ```
 

src/tree-select/README.zh-CN.md

@@ -17,9 +17,9 @@ Vue.use(TreeSelect);
 
 ```html
 <van-tree-select
+  v-model:active-id="activeId"
+  v-model:main-active-index="activeIndex"
   :items="items"
-  :active-id.sync="activeId"
-  :main-active-index.sync="activeIndex"
 />
 ```
 
@@ -41,9 +41,9 @@ export default {
 
 ```html
 <van-tree-select
+  v-model:active-id="activeIds"
+  v-model:main-active-index="activeIndex"
   :items="items"
-  :active-id.sync="activeIds"
-  :main-active-index.sync="activeIndex"
 />
 ```
 
@@ -64,7 +64,11 @@ export default {
 通过`content`插槽可以自定义右侧区域的内容
 
 ```html
-<van-tree-select height="55vw" :items="items" :main-active-index.sync="active">
+<van-tree-select
+  v-model:main-active-index="active"
+  height="55vw"
+  :items="items"
+>
   <template #content>
     <van-image
       v-if="active === 0"
@@ -95,9 +99,9 @@ export default {
 
 ```html
 <van-tree-select
+  v-model:main-active-index="activeIndex"
   height="55vw"
   :items="items"
-  :main-active-index.sync="activeIndex"
 />
 ```
 

src/tree-select/demo/index.vue

@@ -2,25 +2,25 @@
   <demo-section>
     <demo-block :title="t('radioMode')">
       <van-tree-select
+        v-model:active-id="activeId"
+        v-model:main-active-index="activeIndex"
         :items="items"
-        :active-id.sync="activeId"
-        :main-active-index.sync="activeIndex"
       />
     </demo-block>
 
     <demo-block :title="t('multipleMode')">
       <van-tree-select
+        v-model:active-id="activeIds"
+        v-model:main-active-index="activeIndex2"
         :items="items"
-        :active-id.sync="activeIds"
-        :main-active-index.sync="activeIndex2"
       />
     </demo-block>
 
     <demo-block :title="t('customContent')">
       <van-tree-select
+        v-model:main-active-index="activeIndex3"
         height="55vw"
         :items="simpleItems"
-        :main-active-index.sync="activeIndex3"
       >
         <template slot="content">
           <van-image
@@ -39,10 +39,10 @@
 
     <demo-block :title="t('showBadge')">
       <van-tree-select
+        v-model:active-id="activeId2"
+        v-model:main-active-index="activeIndex4"
         height="55vw"
         :items="badgeItems"
-        :active-id.sync="activeId2"
-        :main-active-index.sync="activeIndex4"
       />
     </demo-block>
   </demo-section>

src/tree-select/index.js

@@ -0,0 +1,128 @@
+// Utils
+import { createNamespace, addUnit, isDef } from '../utils';
+
+// Components
+import Icon from '../icon';
+import Sidebar from '../sidebar';
+import SidebarItem from '../sidebar-item';
+
+const [createComponent, bem] = createNamespace('tree-select');
+
+export default createComponent({
+  props: {
+    max: {
+      type: [Number, String],
+      default: Infinity,
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    height: {
+      type: [Number, String],
+      default: 300,
+    },
+    activeId: {
+      type: [Number, String, Array],
+      default: 0,
+    },
+    selectedIcon: {
+      type: String,
+      default: 'success',
+    },
+    mainActiveIndex: {
+      type: [Number, String],
+      default: 0,
+    },
+  },
+
+  emits: [
+    'click-nav',
+    'click-item',
+    'update:activeId',
+    'update:mainActiveIndex',
+  ],
+
+  setup(props, { emit, slots }) {
+    return function () {
+      const { items, height, activeId, selectedIcon, mainActiveIndex } = props;
+
+      const selectedItem = items[+mainActiveIndex] || {};
+      const subItems = selectedItem.children || [];
+      const isMultiple = Array.isArray(activeId);
+
+      function isActiveItem(id) {
+        return isMultiple ? activeId.indexOf(id) !== -1 : activeId === id;
+      }
+
+      const Navs = items.map((item) => (
+        <SidebarItem
+          dot={item.dot}
+          info={isDef(item.badge) ? item.badge : item.info}
+          title={item.text}
+          disabled={item.disabled}
+          class={[bem('nav-item'), item.className]}
+        />
+      ));
+
+      function Content() {
+        if (slots.content) {
+          return slots.content();
+        }
+
+        return subItems.map((item) => (
+          <div
+            key={item.id}
+            class={[
+              'van-ellipsis',
+              bem('item', {
+                active: isActiveItem(item.id),
+                disabled: item.disabled,
+              }),
+            ]}
+            onClick={() => {
+              if (!item.disabled) {
+                let newActiveId = item.id;
+                if (isMultiple) {
+                  newActiveId = activeId.slice();
+
+                  const index = newActiveId.indexOf(item.id);
+
+                  if (index !== -1) {
+                    newActiveId.splice(index, 1);
+                  } else if (newActiveId.length < props.max) {
+                    newActiveId.push(item.id);
+                  }
+                }
+
+                emit('update:activeId', newActiveId);
+                emit('click-item', item);
+              }
+            }}
+          >
+            {item.text}
+            {isActiveItem(item.id) && (
+              <Icon name={selectedIcon} class={bem('selected')} />
+            )}
+          </div>
+        ));
+      }
+
+      return (
+        <div class={bem()} style={{ height: addUnit(height) }}>
+          <Sidebar
+            class={bem('nav')}
+            modelValue={mainActiveIndex}
+            onChange={(index) => {
+              emit('update:mainActiveIndex', index);
+              emit('click-nav', index);
+            }}
+          >
+            {Navs}
+          </Sidebar>
+          <div class={bem('content')}>{Content()}</div>
+        </div>
+      );
+    };
+  },
+});

src/tree-select/index.tsx

@@ -1,166 +0,0 @@
-// Utils
-import { createNamespace, addUnit, isDef } from '../utils';
-import { emit, inherit } from '../utils/functional';
-
-// Components
-import Icon from '../icon';
-import Sidebar from '../sidebar';
-import SidebarItem from '../sidebar-item';
-
-// Types
-import { CreateElement, RenderContext } from 'vue/types';
-import { DefaultSlots, ScopedSlot } from '../utils/types';
-
-export type TreeSelectItem = {
-  text: string;
-  dot?: boolean;
-  info?: string | number;
-  badge?: string | number;
-  disabled?: boolean;
-  className?: any;
-  children: TreeSelectChildren[];
-};
-
-export type TreeSelectChildren = {
-  id: number;
-  text: string;
-  disabled?: boolean;
-};
-
-export type TreeSelectActiveId = number | string | (number | string)[];
-
-export type TreeSelectProps = {
-  max: number | string;
-  height: number | string;
-  items: TreeSelectItem[];
-  activeId: TreeSelectActiveId;
-  selectedIcon: string;
-  mainActiveIndex: number | string;
-};
-
-export type TreeSelectSlots = DefaultSlots & {
-  content?: ScopedSlot;
-};
-
-const [createComponent, bem] = createNamespace('tree-select');
-
-function TreeSelect(
-  h: CreateElement,
-  props: TreeSelectProps,
-  slots: TreeSelectSlots,
-  ctx: RenderContext<TreeSelectProps>
-) {
-  const { items, height, activeId, selectedIcon, mainActiveIndex } = props;
-
-  const selectedItem: Partial<TreeSelectItem> = items[+mainActiveIndex] || {};
-  const subItems = selectedItem.children || [];
-  const isMultiple = Array.isArray(activeId);
-
-  function isActiveItem(id: number | string) {
-    return isMultiple
-      ? (activeId as (number | string)[]).indexOf(id) !== -1
-      : activeId === id;
-  }
-
-  const Navs = items.map((item) => (
-    <SidebarItem
-      dot={item.dot}
-      info={isDef(item.badge) ? item.badge : item.info}
-      title={item.text}
-      disabled={item.disabled}
-      class={[bem('nav-item'), item.className]}
-    />
-  ));
-
-  function Content() {
-    if (slots.content) {
-      return slots.content();
-    }
-
-    return subItems.map((item) => (
-      <div
-        key={item.id}
-        class={[
-          'van-ellipsis',
-          bem('item', {
-            active: isActiveItem(item.id),
-            disabled: item.disabled,
-          }),
-        ]}
-        onClick={() => {
-          if (!item.disabled) {
-            let newActiveId: TreeSelectActiveId = item.id;
-            if (isMultiple) {
-              newActiveId = (activeId as (string | number)[]).slice();
-
-              const index = newActiveId.indexOf(item.id);
-
-              if (index !== -1) {
-                newActiveId.splice(index, 1);
-              } else if (newActiveId.length < props.max) {
-                newActiveId.push(item.id);
-              }
-            }
-
-            emit(ctx, 'update:active-id', newActiveId);
-            emit(ctx, 'click-item', item);
-            // compatible with legacy usage, should be removed in next major version
-            emit(ctx, 'itemclick', item);
-          }
-        }}
-      >
-        {item.text}
-        {isActiveItem(item.id) && (
-          <Icon name={selectedIcon} class={bem('selected')} />
-        )}
-      </div>
-    ));
-  }
-
-  return (
-    <div class={bem()} style={{ height: addUnit(height) }} {...inherit(ctx)}>
-      <Sidebar
-        class={bem('nav')}
-        activeKey={mainActiveIndex}
-        onChange={(index: number) => {
-          emit(ctx, 'update:main-active-index', index);
-          emit(ctx, 'click-nav', index);
-          // compatible with legacy usage, should be removed in next major version
-          emit(ctx, 'navclick', index);
-        }}
-      >
-        {Navs}
-      </Sidebar>
-      <div class={bem('content')}>{Content()}</div>
-    </div>
-  );
-}
-
-TreeSelect.props = {
-  max: {
-    type: [Number, String],
-    default: Infinity,
-  },
-  items: {
-    type: Array,
-    default: () => [],
-  },
-  height: {
-    type: [Number, String],
-    default: 300,
-  },
-  activeId: {
-    type: [Number, String, Array],
-    default: 0,
-  },
-  selectedIcon: {
-    type: String,
-    default: 'success',
-  },
-  mainActiveIndex: {
-    type: [Number, String],
-    default: 0,
-  },
-};
-
-export default createComponent<TreeSelectProps>(TreeSelect);