uview-pro 0.2.4 → 0.3.0

package/components/u-divider/types.ts

@@ -1,11 +1,13 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { ThemeType } from '../../types/global';
+import { baseProps } from '../common/props';
 
 /**
  * u-divider 分割线 Props
  * @description 区隔内容的分割线，一般用于页面底部"没有更多"的提示。
  */
 export const DividerProps = {
+    ...baseProps,
     /** 单一边divider横线的宽度(数值)，单位rpx。或者百分比 */
     halfWidth: { type: [Number, String] as PropType<number | string>, default: 150 },
     /** divider横线的颜色，如设置 */

package/components/u-divider/u-divider.vue

@@ -1,12 +1,18 @@
 <template>
     <view
         class="u-divider"
-        :style="{
-            height: height === 'auto' ? 'auto' : height + 'rpx',
-            backgroundColor: bgColor,
-            marginBottom: marginBottom + 'rpx',
-            marginTop: marginTop + 'rpx'
-        }"
+        :class="customClass"
+        :style="
+            $u.toStyle(
+                {
+                    height: height === 'auto' ? 'auto' : height + 'rpx',
+                    backgroundColor: bgColor,
+                    marginBottom: marginBottom + 'rpx',
+                    marginTop: marginTop + 'rpx'
+                },
+                customStyle
+            )
+        "
         @tap="onClick"
     >
         <view
@@ -31,13 +37,23 @@
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-divider',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { computed } from 'vue';
 import { DividerProps } from './types';
-
-defineOptions({
-    name: 'u-divider'
-});
+import { $u } from '../../';
 
 /**
  * divider 分割线

package/components/u-dropdown/types.ts

@@ -1,10 +1,12 @@
 import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
 
 /**
  * u-dropdown 下拉菜单 Props
  * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
  */
 export const DropdownProps = {
+    ...baseProps,
     /** 菜单标题和选项的激活态颜色 */
     activeColor: { type: String, default: '#2979ff' },
     /** 菜单标题和选项的未激活态颜色 */

package/components/u-dropdown/u-dropdown.vue

@@ -1,5 +1,5 @@
 <template>
-    <view class="u-dropdown">
+    <view class="u-dropdown" :style="$u.toStyle(styles, customStyle)" :class="customClass">
         <view
             class="u-dropdown__menu"
             :style="{ height: $u.addUnit(height) }"
@@ -61,13 +61,24 @@
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-dropdown',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
-import { ref, computed, onMounted, getCurrentInstance } from 'vue';
-import { $u } from '../..';
+import { ref, computed, onMounted, getCurrentInstance, nextTick } from 'vue';
+import { $u, useParent } from '../..';
 import { DropdownProps } from './types';
 
-defineOptions({ name: 'u-dropdown' });
-
 /**
  * dropdown 下拉菜单
  * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
@@ -87,14 +98,11 @@ defineOptions({ name: 'u-dropdown' });
  */
 
 const props = defineProps(DropdownProps);
-
-// emits 定义
 const emit = defineEmits(['open', 'close']);
 
+const { children } = useParent('u-dropdown');
 // 菜单列表
 const menuList = ref<any[]>([]);
-// 是否打开下拉菜单
-const showDropdown = ref(true);
 // 下拉菜单的状态
 const active = ref(false);
 // 当前激活菜单索引
@@ -108,9 +116,15 @@ const highlightIndex = ref<number>(99999);
 // 下拉内容高度
 const contentHeight = ref<number>(0);
 // 子组件引用
-// 引用所有子组件(u-dropdown-item)的this，不能在data中声明变量，否则在微信小程序会造成循环引用而报错
-const children = ref<any[]>([]);
 const instance = getCurrentInstance();
+// 兼容头条样式
+const styles = computed(() => {
+    const style: any = {};
+    // #ifdef MP-TOUTIAO
+    style.width = '100vw';
+    // #endif
+    return style;
+});
 
 // 下拉出来部分的样式
 const popupStyle = computed<any>(() => {
@@ -127,9 +141,6 @@ onMounted(() => {
     getContentHeight();
 });
 
-// 引用所有子组件(u-dropdown-item)的this，不能在data中声明变量，否则在微信小程序会造成循环引用而报错
-children.value = [];
-
 /**
  * 初始化所有子组件
  * 当某个子组件内容变化时，触发父组件的init，父组件再让每一个子组件重新初始化一遍
@@ -137,8 +148,11 @@ children.value = [];
  */
 function init() {
     menuList.value = [];
-    children.value.forEach(child => {
-        child.init && child.init();
+    children.forEach(child => {
+        menuList.value.push({
+            title: child?.getExposed()?.props.title ?? '',
+            disabled: child?.getExposed()?.props.disabled ?? false
+        });
     });
 }
 
@@ -154,7 +168,7 @@ function menuClick(index: number) {
         close();
         // 等动画结束后，再移除下拉菜单中的内容，否则直接移除，也就没有下拉菜单收起的效果了
         setTimeout(() => {
-            if (children.value[index]) children.value[index].active = false;
+            if (children[index]) children[index]?.getExposed()?.setActive(false);
         }, Number(props.duration));
         return;
     }
@@ -177,8 +191,8 @@ function open(index: number) {
     current.value = index;
     // 历遍所有的子元素，将索引匹配的项标记为激活状态，因为子元素是通过v-if控制切换的
     // 之所以不是因display: none，是因为nvue没有display这个属性
-    children.value.forEach((val, idx) => {
-        val.exposed.setActive && val.exposed.setActive(index == idx ? true : false);
+    children.forEach((child, idx) => {
+        child?.getExposed()?.setActive(index == idx ? true : false);
     });
     emit('open', current.value);
 }
@@ -230,8 +244,22 @@ function getContentHeight() {
     });
 }
 
+onMounted(() => {
+    nextTick(() => {
+        init();
+    });
+});
+
 // 暴露方法
-defineExpose({ init, close, open, highlight, getContentHeight, children, menuList });
+defineExpose({
+    init,
+    close,
+    open,
+    highlight,
+    getContentHeight,
+    children,
+    menuList
+});
 </script>
 
 <style scoped lang="scss">

package/components/u-dropdown-item/types.ts

@@ -1,5 +1,6 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { OptionType } from '../../types/global';
+import { baseProps } from '../common/props';
 
 /**
  * u-dropdown-item 下拉菜单项 Props
@@ -12,6 +13,7 @@ import type { OptionType } from '../../types/global';
  */
 
 export const DropdownItemProps = {
+    ...baseProps,
     /** 当前选中项的value值 */
     modelValue: { type: [Number, String, Array] as PropType<number | string | any[]>, default: '' },
     /** 菜单项标题 */

package/components/u-dropdown-item/u-dropdown-item.vue

@@ -1,5 +1,12 @@
 <template>
-    <view class="u-dropdown-item" v-if="active" @touchmove.stop.prevent @tap.stop.prevent>
+    <view
+        v-if="active"
+        class="u-dropdown-item"
+        :class="customClass"
+        :style="$u.toStyle(customStyle)"
+        @touchmove.stop.prevent
+        @tap.stop.prevent
+    >
         <block v-if="!slots.default && !slots.$default">
             <scroll-view scroll-y="true" :style="{ height: $u.addUnit(height) }">
                 <view class="u-dropdown-item__options">
@@ -27,13 +34,24 @@
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-dropdown-item',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
-import { ref, computed, onMounted, getCurrentInstance, useSlots, watch } from 'vue';
-import { $u } from '../..';
+import { ref, computed, useSlots, watch } from 'vue';
+import { $u, useChildren } from '../..';
 import { DropdownItemProps } from './types';
 
-defineOptions({ name: 'u-dropdown-item' });
-
 /**
  * dropdown-item 下拉菜单
  * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
@@ -56,49 +74,23 @@ const emit = defineEmits(['update:modelValue', 'change']);
 // 插槽
 const slots = useSlots();
 
+const { parentExposed, emitToParent } = useChildren('u-dropdown-item', 'u-dropdown');
+
 // 当前项是否处于展开状态
 const active = ref(false);
 // 激活时左边文字和右边对勾图标的颜色
-const activeColor = ref<string>('#2979ff');
+const activeColor = computed(() => parentExposed.value?.activeColor || $u.color.primary);
 // 未激活时左边文字和右边对勾图标的颜色
-const inactiveColor = ref<string>('#606266');
-// 父组件实例
-const parent = ref<any>(null);
+const inactiveColor = computed(() => parentExposed.value?.inactiveColor || $u.color.contentColor);
 
 // 监听props变化，通知父组件重新初始化
 const propsChange = computed(() => `${props.title}-${props.disabled}`);
 
 // 监听propsChange变化，通知父组件重新init
 watch(propsChange, () => {
-    if (parent.value && parent.value.init) parent.value.init();
+    emitToParent('init');
 });
 
-/**
- * 初始化本组件，注册到父组件
- */
-function init() {
-    // 获取父组件u-dropdown
-    const instance = getCurrentInstance();
-    if (!instance) return;
-    const parentComp = $u.$parent('u-dropdown');
-    if (parentComp && parentComp.proxy) {
-        const parentProxy = parentComp.proxy as any;
-        parent.value = parentComp;
-        // 继承父组件的激活/未激活颜色
-        activeColor.value = parentProxy.activeColor;
-        inactiveColor.value = parentProxy.inactiveColor;
-        // 注册到父组件children
-        // 将本组件的this，放入到父组件的children数组中，让父组件可以操作本(子)组件的方法和属性
-        // push进去前，显判断是否已经存在了本实例，因为在子组件内部数据变化时，会通过父组件重新初始化子组件
-        const exist = parentComp?.exposed?.children.value.find((val: any) => val === instance);
-        if (!exist) parentComp?.exposed?.children.value.push(instance);
-        if (parentComp?.exposed?.children.value.length === 1) active.value = true;
-        // 向父组件menuList注册本项
-        // 父组件无法监听children的变化，故将子组件的title，传入父组件的menuList数组中
-        parentComp?.exposed?.menuList.value.push({ title: props.title, disabled: props.disabled });
-    }
-}
-
 /**
  * cell被点击
  * @param value 选中值
@@ -107,7 +99,7 @@ function cellClick(value: string | number | any) {
     // 修改通过v-model绑定的值
     emit('update:modelValue', value);
     // 通知父组件(u-dropdown)收起菜单
-    parent.value?.exposed?.close();
+    emitToParent('close');
     // 发出事件，抛出当前勾选项的value
     emit('change', value);
 }
@@ -116,11 +108,11 @@ function setActive(value: boolean) {
     active.value = value;
 }
 
-onMounted(() => {
-    init();
+defineExpose({
+    cellClick,
+    setActive,
+    props
 });
-
-defineExpose({ init, cellClick, setActive });
 </script>
 
 <style scoped lang="scss">

package/components/u-empty/types.ts

@@ -1,9 +1,11 @@
 import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
 
 /**
  * u-empty 组件 Props 类型定义
  */
 export const EmptyProps = {
+    ...baseProps,
     /** 图标路径 */
     src: { type: String, default: '' },
     /** 提示文字 */

package/components/u-empty/u-empty.vue

@@ -1,5 +1,10 @@
 <template>
-    <view class="u-empty" v-if="show" :style="{ marginTop: marginTop + 'rpx' }">
+    <view
+        v-if="show"
+        class="u-empty"
+        :class="customClass"
+        :style="$u.toStyle({ marginTop: marginTop + 'rpx' }, customStyle)"
+    >
         <u-icon
             :name="src ? src : 'empty-' + mode"
             :custom-style="iconStyle"
@@ -17,12 +22,22 @@
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-empty',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { EmptyProps } from './types';
-
-defineOptions({
-    name: 'u-empty'
-});
+import { $u } from '../../';
 
 /**
  * empty 内容为空

package/components/u-field/types.ts

@@ -1,11 +1,13 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { InputAlign, InputConfirmType, InputLabelPosition, InputType } from '../../types/global';
+import { baseProps } from '../common/props';
 
 /**
  * u-field 组件 Props 类型定义
  * @description 表单输入框属性
  */
 export const FieldProps = {
+    ...baseProps,
     /** label左边的图标，限uView的图标名称 */
     icon: String,
     /** 输入框右边的图标名称，限uView的图标名称（默认false） */

package/components/u-field/u-field.vue

@@ -1,5 +1,9 @@
 <template>
-    <view class="u-field" :class="{ 'u-border-top': props.borderTop, 'u-border-bottom': props.borderBottom }">
+    <view
+        class="u-field"
+        :class="[{ 'u-border-top': props.borderTop, 'u-border-bottom': props.borderBottom }, customClass]"
+        :style="$u.toStyle(customStyle)"
+    >
         <view
             class="u-field-inner"
             :class="[props.type === 'textarea' ? 'u-textarea-inner' : '', 'u-label-postion-' + props.labelPosition]"
@@ -97,13 +101,24 @@
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-field',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { FieldProps } from './types';
 import { ref, computed } from 'vue';
 import { $u } from '../..';
 
-defineOptions({ name: 'u-field' });
-
 /**
  * field 输入框
  * @description 借助此组件，可以实现表单的输入， 有"text"和"textarea"类型的，此外，借助uView的picker和actionSheet组件可以快速实现上拉菜单，时间，地区选择等， 为表单解决方案的利器。

package/components/u-form/types.ts

@@ -1,11 +1,13 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { FormRules, InputAlign, FormErrorType, InputLabelPosition } from '../../types/global';
+import { baseProps } from '../common/props';
 
 /**
  * u-form 组件 Props 类型定义
  * @description 表单组件属性
  */
 export const FormProps = {
+    ...baseProps,
     /** 当前form的需要验证字段的集合 */
     model: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
     /** 表单验证规则 */

package/components/u-form/u-form.vue

@@ -1,15 +1,26 @@
 <template>
-    <view class="u-form"><slot /></view>
+    <view class="u-form" :class="customClass" :style="$u.toStyle(customStyle)">
+        <slot />
+    </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-form',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { FormProps } from './types';
-import { ref, provide } from 'vue';
-import { $u } from '../..';
-
-defineOptions({
-    name: 'u-form'
-});
+import { ref } from 'vue';
+import { $u, useParent } from '../..';
 
 /**
  * form 表单
@@ -28,31 +39,14 @@ defineOptions({
 
 const props = defineProps(FormProps);
 
+useParent('u-form');
+
 // 存储当前form下的所有u-form-item的实例
 const fields = ref<any[]>([]);
 
 // 校验规则
 const rules = ref<Record<string, any>>(props.rules);
 
-// 提供 uForm 实例给子组件（注册方法供 u-form-item 调用）
-const uForm = {
-    addField(field: any) {
-        if (!fields.value.includes(field)) fields.value.push(field);
-    },
-    removeField(field: any) {
-        fields.value = fields.value.filter(f => f !== field);
-    },
-    // 兼容老用法
-    setRules,
-    resetFields,
-    validate,
-    fields,
-    rules,
-    props,
-    model: props.model
-};
-provide('u-form', uForm);
-
 /**
  * 设置校验规则
  * @param newRules 校验规则对象

package/components/u-form-item/types.ts

@@ -1,10 +1,12 @@
 import type { PropType, ExtractPropTypes } from 'vue';
 import type { InputAlign, InputLabelPosition } from '../../types/global';
+import { baseProps } from '../common/props';
 
 /**
  * form-item 表单item Props
  */
 export const FormItemProps = {
+    ...baseProps,
     /** input的label提示语 */
     label: {
         type: String,