Merge branch 'opentiny:dev' into dufu1991/feat-site-ptimize-typesetting

opentiny · Dec 25, 2024 · 5236677 · 5236677
2 parents de5ae7c + a86fffc
commit 5236677
Show file tree

Hide file tree

Showing 14 changed files with 66 additions and 38 deletions.
diff --git a/examples/sites/demos/apis/actionsheet.js b/examples/sites/demos/apis/actionsheet.js
@@ -37,6 +37,17 @@ export default {
           },
           mode: ['mobile'],
           mobileDemo: 'ellipsis'
+        },
+        {
+          name: 'content-position',
+          type: 'Boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否显示action插槽',
+            'en-US': 'Whether to display action slots '
+          },
+          mode: ['mobile'],
+          mobileDemo: 'slot-action'
         }
       ],
       events: [
@@ -70,12 +81,22 @@ export default {
           name: 'action',
           defaultValue: '',
           desc: {
-            'zh-CN': '<p>自定义操作项内容</p>',
+            'zh-CN': '<p>action插槽</p>',
             'en-US': 'Click'
           },
           mode: ['mobile'],
           mobileDemo: 'slot-action'
         },
+        {
+          name: 'item',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>item插槽</p>',
+            'en-US': 'Click'
+          },
+          mode: ['mobile'],
+          mobileDemo: 'slot-item'
+        },
         {
           mode: []
         }

diff --git a/examples/sites/demos/mobile/app/actionsheet/clickfn.vue b/examples/sites/demos/mobile/app/actionsheet/clickfn.vue
@@ -11,7 +11,6 @@
       :visible="boxVisibility"
       @update:visible="boxVisibility = $event"
       @click="clickItem"
-      content-position
     ></tiny-action-sheet>
   </div>
 </template>

diff --git a/examples/sites/demos/mobile/app/actionsheet/ellipsis.vue b/examples/sites/demos/mobile/app/actionsheet/ellipsis.vue
@@ -11,7 +11,6 @@
       ellipsis
       :visible="boxVisibility"
       @update:visible="boxVisibility = $event"
-      content-position
     ></tiny-action-sheet>
   </div>
 </template>

diff --git a/examples/sites/demos/mobile/app/actionsheet/slot-action.vue b/examples/sites/demos/mobile/app/actionsheet/slot-action.vue
@@ -12,7 +12,13 @@
       :visible="boxVisibility"
       @update:visible="boxVisibility = $event"
       content-position
-    ></tiny-action-sheet>
+    >
+      <template #item="data">
+        <div>
+          {{ data.item.label }}
+        </div>
+      </template>
+    </tiny-action-sheet>
   </div>
 </template>
 

diff --git a/examples/sites/demos/mobile/app/actionsheet/slot-item.vue b/examples/sites/demos/mobile/app/actionsheet/slot-item.vue
@@ -10,7 +10,6 @@
       :menus="menus"
       :visible="boxVisibility"
       @update:visible="boxVisibility = $event"
-      content-position
     >
       <template #item="data">
         <div>

diff --git a/examples/sites/demos/mobile/app/actionsheet/webdoc/actionsheet.js b/examples/sites/demos/mobile/app/actionsheet/webdoc/actionsheet.js
@@ -29,7 +29,7 @@ export default {
     {
       demoId: 'slot-item',
       name: {
-        'zh-CN': '插槽',
+        'zh-CN': '数据插槽',
         'en-US': 'events'
       },
       desc: {
@@ -41,7 +41,7 @@ export default {
     {
       demoId: 'slot-action',
       name: {
-        'zh-CN': '插槽',
+        'zh-CN': 'action插槽',
         'en-US': 'events'
       },
       desc: {

diff --git a/examples/sites/demos/mobile/app/exception/buttonText.vue b/examples/sites/demos/mobile/app/exception/buttonText.vue
@@ -1,11 +1,6 @@
 <template>
   <div class="tiny-mobile-exception-demo">
-    <tiny-exception
-      type="nodata"
-      button-text="重试"
-      :imageUrl="imageUrl"
-      message="网络异常，请稍后再试，或者联系管理员给您处理"
-    ></tiny-exception>
+    <tiny-exception type="nodata" button-text="重试" :imageUrl="imageUrl"></tiny-exception>
   </div>
 </template>
 

diff --git a/examples/sites/demos/mobile/app/exception/exceptionClass.vue b/examples/sites/demos/mobile/app/exception/exceptionClass.vue
@@ -4,27 +4,31 @@
       type="nodata"
       button-text="重试"
       :imageUrl="imageUrl"
+      :exception-class="exceptionClass"
       message="网络异常，请稍后再试，或者联系管理员给您处理"
     ></tiny-exception>
   </div>
 </template>
 
 <script lang="jsx">
-import { TinyException } from '@opentiny/vue-mobile'
+import { Exception } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyException
+    TinyException: Exception
   },
   data() {
     return {
-      imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`
+      imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`,
+      exceptionClass: 'no-problem'
     }
   },
-  methods: {
-    test() {
-      alert(11)
-    }
-  }
+  methods: {}
 }
 </script>
+
+<style lang="less">
+.no-problem {
+  background-color: pink;
+}
+</style>
diff --git a/examples/sites/demos/mobile/app/exception/message.vue b/examples/sites/demos/mobile/app/exception/message.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="tiny-mobile-exception-demo">
-    <tiny-exception type="nodata" message="自定义文本内容" :imageUrl="imageUrl" @btn-click="test"></tiny-exception>
+    <tiny-exception type="nodata" message="自定义文本内容" @btn-click="test"></tiny-exception>
   </div>
 </template>
 
@@ -12,9 +12,7 @@ export default {
     TinyException
   },
   data() {
-    return {
-      imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`
-    }
+    return {}
   },
   methods: {
     test() {

diff --git a/packages/mobile/components/exception/src/exception.ts b/packages/mobile/components/exception/src/exception.ts
@@ -3,6 +3,7 @@ export const exceptionProps = {
     type: String,
     default: 'nodata'
   },
+  buttonText: String,
   message: String,
   subMessage: String,
   exceptionClass: String,

diff --git a/packages/mobile/components/exception/src/mobile.vue b/packages/mobile/components/exception/src/mobile.vue
@@ -17,7 +17,7 @@
       <slot name="content">
         <div class="tiny-mobile-exception__content-message">
           <div class="main-message">
-            {{ state.message }}
+            {{ message }}
           </div>
           <div v-if="subMessage" class="sub-message">
             {{ subMessage }}

diff --git a/packages/mobile/components/pull-refresh/src/mobile.vue b/packages/mobile/components/pull-refresh/src/mobile.vue
@@ -60,13 +60,14 @@
 </template>
 
 <script lang="tsx">
-import { $prefix, setup, defineComponent, props } from '../../../vue-common'
+import { $prefix, setup, defineComponent } from '../../../vue-common'
 import { renderless, api } from './renderless/vue'
 import { pullRefreshProps } from './pull-refresh'
 import '@opentiny/vue-theme-mobile/pull-refresh/index.less'
 
 export default defineComponent({
   name: $prefix + 'PullRefresh',
+  componentName: 'PullRefresh',
   props: pullRefreshProps,
   setup(props, context) {
     return setup({ props, context, renderless, api })

diff --git a/packages/mobile/components/pull-refresh/src/pull-refresh.ts b/packages/mobile/components/pull-refresh/src/pull-refresh.ts
@@ -41,12 +41,16 @@ export const pullRefreshProps = {
     type: Boolean,
     default: true
   },
-
-  // mobile-first的props
-  headHeight: { type: [Number, String], default: $constants.DEFAULT_HEAD_HEIGHT },
-  pullingText: { type: String, default: t('ui.pullRefresh.pulling') },
-  loadingText: { type: String, default: $constants.STATUS.LOADING },
-  pullDistance: [Number, String],
-  loadingOptions: { type: Object, default: () => ({}) },
-  selfSimulate: { type: Boolean, default: false }
+  pullUpLoadingText: {
+    type: String,
+    default: ''
+  },
+  pullDownLoadingText: {
+    type: String,
+    default: ''
+  },
+  disabledPullUp: {
+    type: Boolean,
+    default: false
+  }
 }
diff --git a/packages/theme-mobile/src/action-sheet/index.less b/packages/theme-mobile/src/action-sheet/index.less
@@ -19,9 +19,8 @@
 .@{action-sheet-prefix-cls} {
   .component-css-vars-action-sheet();
 
-  position: absolute;
-  bottom: 0;
-  width: 100%;
+  position: relative;
+  height: 100%;
 
   &__mask {
     top: 0;
@@ -42,6 +41,7 @@
     transition: transform 0.3s;
     z-index: 500;
     overflow-y: scroll;
+    backface-visibility: hidden;
     border-radius: 16px 16px 0px 0px;
     &.is-toggle {
       transform: translate(0, 0);
@@ -103,6 +103,7 @@
 
   &__action {
     width: 100%;
+    position: absolute;
     background-color: var(--ti-mobile-action-sheet-action-bg-color, #fff);
   }
 }