fix: 解决一些已知问题

nutui-uniapp · Jun 19, 2023 · b00a7c4 · b00a7c4
1 parent 312acf8
commit b00a7c4
Show file tree

Hide file tree

Showing 14 changed files with 316 additions and 602 deletions.
diff --git a/example/package.json b/example/package.json
@@ -39,20 +39,20 @@
     "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "@dcloudio/uni-app": "3.0.0-3080420230531001",
-    "@dcloudio/uni-app-plus": "3.0.0-3080420230531001",
-    "@dcloudio/uni-components": "3.0.0-3080420230531001",
-    "@dcloudio/uni-h5": "3.0.0-3080420230531001",
-    "@dcloudio/uni-mp-alipay": "3.0.0-3080420230531001",
-    "@dcloudio/uni-mp-baidu": "3.0.0-3080420230531001",
-    "@dcloudio/uni-mp-jd": "3.0.0-3080420230531001",
-    "@dcloudio/uni-mp-kuaishou": "3.0.0-3080420230531001",
-    "@dcloudio/uni-mp-lark": "3.0.0-3080420230531001",
-    "@dcloudio/uni-mp-qq": "3.0.0-3080420230531001",
-    "@dcloudio/uni-mp-toutiao": "3.0.0-3080420230531001",
-    "@dcloudio/uni-mp-weixin": "3.0.0-3080420230531001",
+    "@dcloudio/uni-app": "3.0.0-alpha-3080520230616001",
+    "@dcloudio/uni-app-plus": "3.0.0-alpha-3080520230616001",
+    "@dcloudio/uni-components": "3.0.0-alpha-3080520230616001",
+    "@dcloudio/uni-h5": "3.0.0-alpha-3080520230616001",
+    "@dcloudio/uni-mp-alipay": "3.0.0-alpha-3080520230616001",
+    "@dcloudio/uni-mp-baidu": "3.0.0-alpha-3080520230616001",
+    "@dcloudio/uni-mp-jd": "3.0.0-alpha-3080520230616001",
+    "@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-3080520230616001",
+    "@dcloudio/uni-mp-lark": "3.0.0-alpha-3080520230616001",
+    "@dcloudio/uni-mp-qq": "3.0.0-alpha-3080520230616001",
+    "@dcloudio/uni-mp-toutiao": "3.0.0-alpha-3080520230616001",
+    "@dcloudio/uni-mp-weixin": "3.0.0-alpha-3080520230616001",
     "@dcloudio/uni-mp-xhs": "3.0.0-alpha-3080520230616001",
-    "@dcloudio/uni-quickapp-webview": "3.0.0-3080420230531001",
+    "@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3080520230616001",
     "@uni-helper/uni-env": "^0.0.3",
     "pinia": "^2.0.36",
     "uniapp-nutui": "workspace:^",
@@ -61,10 +61,10 @@
   },
   "devDependencies": {
     "@dcloudio/types": "^3.3.3",
-    "@dcloudio/uni-automator": "3.0.0-3080420230531001",
-    "@dcloudio/uni-cli-shared": "3.0.0-3080420230531001",
-    "@dcloudio/uni-stacktracey": "3.0.0-3080420230531001",
-    "@dcloudio/vite-plugin-uni": "3.0.0-3080420230531001",
+    "@dcloudio/uni-automator": "3.0.0-alpha-3080520230616001",
+    "@dcloudio/uni-cli-shared": "3.0.0-alpha-3080520230616001",
+    "@dcloudio/uni-stacktracey": "3.0.0-alpha-3080520230616001",
+    "@dcloudio/vite-plugin-uni": "3.0.0-alpha-3080520230616001",
     "@iconify-json/tabler": "^1.1.79",
     "@uni-helper/uni-app-types": "^0.5.8",
     "@uni-helper/vite-plugin-uni-components": "^0.0.6",
@@ -79,7 +79,7 @@
     "unocss": "^0.53.1",
     "unocss-applet": "^0.5.3",
     "unplugin-auto-import": "^0.16.4",
-    "vite": "4.2.2",
+    "vite": "4.3.9",
     "vue-tsc": "^1.6.5"
   }
 }
diff --git a/example/src/demo/exhibition/pages/avatar/index.vue b/example/src/demo/exhibition/pages/avatar/index.vue
@@ -4,7 +4,7 @@ export default {
   props: {},
   setup() {
     const handleClick = () => {
-      console.log('触发点击头像')
+      uni.showToast({ title: '触发点击头像' })
     }
 
     return { handleClick }
@@ -20,20 +20,17 @@ export default {
     <nut-cell>
       <nut-avatar size="large">
         <image
-          class="w-60px h-60px"
           mode="scaleToFill"
           src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
         />
       </nut-avatar>
       <nut-avatar size="normal">
         <img
-          class="w-40px h-40px"
           src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
         >
       </nut-avatar>
       <nut-avatar size="small">
         <img
-          class="w-30px h-30px"
           src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
         >
       </nut-avatar>
@@ -55,7 +52,7 @@ export default {
     <nut-cell>
       <nut-avatar>
         <img
-          class="w-30px h-30px"
+
           src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
         >
       </nut-avatar>
@@ -95,7 +92,7 @@ export default {
       <nut-avatar-group span="-4">
         <nut-avatar>
           <img
-            class="w-30px h-30px"
+
             src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
           >
         </nut-avatar>
@@ -110,7 +107,7 @@ export default {
       <nut-avatar-group max-count="3" max-color="#fff" max-bg-color="#498ff2">
         <nut-avatar>
           <img
-            class="w-30px h-30px"
+
             src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
           >
         </nut-avatar>
@@ -128,7 +125,7 @@ export default {
       <nut-avatar-group max-count="3" z-index="right" max-content="...">
         <nut-avatar>
           <img
-            class="w-30px h-30px"
+
             src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
           >
         </nut-avatar>

diff --git a/example/src/demo/feedback/pages/switch/index.vue b/example/src/demo/feedback/pages/switch/index.vue
@@ -99,7 +99,9 @@ export default {
     </h2>
     <nut-cell>
       <nut-switch v-model="checked8" loading>
-        <nut-icon name="loading" size="29" color="blue" />
+        <template #icon>
+          <nut-icon name="loading" color="blue" />
+        </template>
       </nut-switch>
     </nut-cell>
   </div>

diff --git a/packages/nutui/components/avatar/avatar.ts b/packages/nutui/components/avatar/avatar.ts
@@ -4,7 +4,7 @@ export type AvatarSize = 'large' | 'normal' | 'small'
 export const avatarProps = {
   size: {
     type: String as PropType<AvatarSize> || Number,
-    default: '',
+    default: 'normal',
   },
   shape: {
     type: String,

diff --git a/packages/nutui/components/avatar/avatar.vue b/packages/nutui/components/avatar/avatar.vue
@@ -1,24 +1,27 @@
 <script setup lang="ts">
-import { type Ref, computed, defineComponent, inject, onMounted, reactive, ref, toRefs } from 'vue'
+import { computed, defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
 import { PREFIX } from '../_utils'
+import { AVATAR_KEY, type AvatarGroupProps } from '../avatargroup'
+import { useInject } from '../_hooks'
 import { avatarProps } from './avatar'
 
 const props = defineProps(avatarProps)
 
 const { size, shape, bgColor, color } = toRefs(props)
 const sizeValue = ['large', 'normal', 'small']
-const avatarGroup: any = inject('avatarGroup', null)
-const avatarRef = ref(null) as Ref
+const avatarRef = ref(null)
 
+const { parent, index } = useInject<{ props: Required<AvatarGroupProps> }>(AVATAR_KEY)
 const state = reactive({
   index: 1,
   showMax: false, // 是否显示的最大头像个数
-  maxIndex: 0, // avatarGroup里的avatar的个数
+  maxIndex: 0, // parent里的avatar的个数
 })
-const { index, showMax, maxIndex } = toRefs(state)
+const { showMax, maxIndex } = toRefs(state)
 
 onMounted(() => {
-  const children = avatarGroup?.avatarGroupRef?.value?.children
+  const children = parent?.internalChildren
+
   if (children)
     avatarLength(children)
 })
@@ -27,38 +30,33 @@ const classes = computed(() => {
   const prefixCls = componentName
   return {
     [prefixCls]: true,
-    [`nut-avatar-${size.value || avatarGroup?.props?.size || 'normal'}`]: true,
-    [`nut-avatar-${shape.value || avatarGroup?.props?.shape || 'normal'}`]: true,
+    [`nut-avatar-${size.value || parent?.props?.size || 'normal'}`]: true,
+    [`nut-avatar-${shape.value || parent?.props?.shape || 'normal'}`]: true,
   }
 })
 
 const styles = computed(() => {
   return {
-    // width: sizeValue.includes(size.value) ? false : `${size.value}px`,
-    // height: sizeValue.includes(size.value) ? false : `${size.value}px`,
+    width: sizeValue.includes(size.value) ? '' : `${size.value}px`,
+    height: sizeValue.includes(size.value) ? '' : `${size.value}px`,
     backgroundColor: `${bgColor.value}`,
     color: `${color.value}`,
-    marginLeft: state.index !== 1 && (avatarGroup?.props?.span ? `${avatarGroup?.props?.span}px` : ''),
-    zIndex: avatarGroup?.props?.zIndex === 'right' ? `${Math.abs(state.maxIndex - state.index)}` : '',
+    marginLeft: state.index !== 1 && (parent?.props?.span ? `${parent?.props?.span}px` : ''),
+    zIndex: parent?.props?.zIndex === 'right' ? `${Math.abs(state.maxIndex - state.index)}` : '',
   }
 })
 
 const maxStyles = computed(() => {
   return {
-    backgroundColor: `${avatarGroup?.props?.maxBgColor}`,
-    color: `${avatarGroup?.props?.maxColor}`,
+    backgroundColor: `${parent?.props?.maxBgColor}`,
+    color: `${parent?.props?.maxColor}`,
   }
 })
 
-function avatarLength(children: any) {
+function avatarLength(children: any[]) {
   state.maxIndex = children.length
-  for (let i = 0; i < children.length; i++)
-    children[i].setAttribute('data-index', i + 1)
-
-  if (avatarRef?.value?.props)
-    state.index = avatarRef?.value?.props['data-index']
-
-  if (state.index === state.maxIndex && state.index !== avatarGroup?.props?.maxCount)
+  state.index = index.value
+  if (state.index === state.maxIndex && state.index !== parent?.props?.maxCount)
     state.showMax = true
 }
 </script>
@@ -70,25 +68,26 @@ export default defineComponent({
   name: componentName,
   options: {
     virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
   },
 })
 </script>
 
 <template>
-  <!-- 头像样式有问题 -->
   <view
-    v-if="showMax || !avatarGroup?.props?.maxCount || index <= avatarGroup?.props?.maxCount"
+    v-if="showMax || !parent?.props?.maxCount || index <= Number(parent?.props?.maxCount)"
     ref="avatarRef"
     :style="!showMax ? styles : maxStyles"
     :class="classes"
   >
-    <template v-if="!avatarGroup?.props?.maxCount || index <= avatarGroup?.props?.maxCount">
+    <template v-if="!parent?.props?.maxCount || index <= Number(parent?.props?.maxCount)">
       <slot />
     </template>
     <!-- 折叠头像 -->
-    <template v-if="showMax && avatarGroup?.props?.maxCount">
+    <template v-if="showMax && parent?.props?.maxCount">
       {{
-        avatarGroup?.props?.maxContent ? avatarGroup?.props?.maxContent : `+ ${maxIndex - avatarGroup?.props?.maxCount}`
+        parent?.props?.maxContent ? parent?.props?.maxContent : `+ ${maxIndex - +parent?.props?.maxCount}`
       }}
     </template>
   </view>

diff --git a/packages/nutui/components/avatar/index.scss b/packages/nutui/components/avatar/index.scss
@@ -7,8 +7,9 @@
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 100% 100%;
-
-  img {
+
+  img,
+  image {
     display: block;
     width: 100%;
     height: 100%;

diff --git a/packages/nutui/components/avatargroup/avatargroup.ts b/packages/nutui/components/avatargroup/avatargroup.ts
@@ -1,5 +1,6 @@
 import type { ExtractPropTypes } from 'vue'
 
+export const AVATAR_KEY = Symbol('avatarGroup')
 export const avatargroupProps = {
   maxContent: {
     type: String,

diff --git a/packages/nutui/components/avatargroup/avatargroup.vue b/packages/nutui/components/avatargroup/avatargroup.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { computed, defineComponent, onMounted, provide, ref } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
 import { PREFIX } from '../_utils'
-import { avatargroupProps } from './avatargroup'
+import { useProvide } from '../_hooks'
+import { AVATAR_KEY, avatargroupProps } from './avatargroup'
 
 const props = defineProps(avatargroupProps)
 
@@ -17,13 +18,7 @@ const classes = computed(() => {
   }
 })
 
-onMounted(() => {})
-
-provide('avatarGroup', {
-  props,
-  avatarGroupRef,
-  index,
-})
+useProvide(AVATAR_KEY, `${PREFIX}-avatar`)({ props, avatarGroupRef, index })
 </script>
 
 <script lang="ts">

diff --git a/packages/nutui/components/sidenavbar/sidenavbar.ts b/packages/nutui/components/sidenavbar/sidenavbar.ts
@@ -1,5 +1,7 @@
 import type { ExtractPropTypes } from 'vue'
 
+export const SIDEN_NAVBAR_KEY = Symbol('sidennavbar')
+
 export const sidenavbarProps = {
   offset: {
     type: [String, Number],

diff --git a/packages/nutui/components/sidenavbar/sidenavbar.vue b/packages/nutui/components/sidenavbar/sidenavbar.vue
@@ -1,10 +1,15 @@
 <script setup lang="ts">
 import { computed, defineComponent } from 'vue'
 import { PREFIX } from '../_utils'
-import { sidenavbarProps } from './sidenavbar'
+import { useProvide } from '../_hooks'
+import { SIDEN_NAVBAR_KEY, sidenavbarProps } from './sidenavbar'
 
 const props = defineProps(sidenavbarProps)
 
+const componentName = `${PREFIX}-grid`
+
+useProvide(SIDEN_NAVBAR_KEY, `${componentName}-item`)({ props })
+
 const classes = computed(() => {
   const prefixCls = componentName
   return {
@@ -14,10 +19,8 @@ const classes = computed(() => {
 </script>
 
 <script lang="ts">
-const componentName = `${PREFIX}-side-navbar`
-
 export default defineComponent({
-  name: componentName,
+  name: `${PREFIX}-side-navbar`,
 })
 </script>
 

diff --git a/packages/nutui/components/sidenavbaritem/sidenavbaritem.vue b/packages/nutui/components/sidenavbaritem/sidenavbaritem.vue
@@ -1,16 +1,31 @@
 <script setup lang="ts">
-import { computed, defineComponent } from 'vue'
+import { type CSSProperties, computed, defineComponent, reactive } from 'vue'
 import { PREFIX } from '../_utils'
+import { useInject } from '../_hooks'
+import { SIDEN_NAVBAR_KEY, type SidenavbarProps } from '../sidenavbar'
 import { sidenavbaritemEmits, sidenavbaritemProps } from './sidenavbaritem'
 
 const props = defineProps(sidenavbaritemProps)
+
 const emit = defineEmits(sidenavbaritemEmits)
+
+const state = reactive({
+  count: 1,
+})
+
 const classes = computed(() => {
   const prefixCls = componentName
   return {
     [prefixCls]: true,
   }
 })
+const Parent = useInject<{ props: Required<SidenavbarProps> }>(SIDEN_NAVBAR_KEY)
+
+const style = computed(() => {
+  return {
+    paddingLeft: `${Number(Parent.parent?.props?.offset) * 2}px`,
+  } as CSSProperties
+})
 
 function handleClick() {
   emit('click')
@@ -26,7 +41,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <view :class="classes" :ikey="ikey" @click.stop="handleClick">
+  <view :class="classes" :style="[style]" :ikey="ikey" @click.stop="handleClick">
     <span class="nut-side-navbar-item__title">
       {{ title }}
     </span>