uview-pro 0.2.4 → 0.3.1

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

@@ -1,129 +1,145 @@
-<template>
-    <view
-        class="u-divider"
-        :style="{
-            height: height === 'auto' ? 'auto' : height + 'rpx',
-            backgroundColor: bgColor,
-            marginBottom: marginBottom + 'rpx',
-            marginTop: marginTop + 'rpx'
-        }"
-        @tap="onClick"
-    >
-        <view
-            class="u-divider-line"
-            :class="[type ? 'u-divider-line--bordercolor--' + type : '']"
-            :style="lineStyle"
-        ></view>
-        <view
-            v-if="useSlot"
-            class="u-divider-text"
-            :style="{
-                color: color,
-                fontSize: fontSize + 'rpx'
-            }"
-            ><slot
-        /></view>
-        <view
-            class="u-divider-line"
-            :class="[type ? 'u-divider-line--bordercolor--' + type : '']"
-            :style="lineStyle"
-        ></view>
-    </view>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { DividerProps } from './types';
-
-defineOptions({
-    name: 'u-divider'
-});
-
-/**
- * divider 分割线
- * @description 区隔内容的分割线，一般用于页面底部"没有更多"的提示。
- * @tutorial https://uviewpro.cn/zh/components/divider.html
- * @property {String Number} half-width 文字左或右边线条宽度，数值或百分比，数值时单位为rpx
- * @property {String} border-color 线条颜色，优先级高于type（默认#dcdfe6）
- * @property {String} color 文字颜色（默认#909399）
- * @property {String Number} fontSize 字体大小，单位rpx（默认26）
- * @property {String} bg-color 整个divider的背景颜色（默认呢#ffffff）
- * @property {String Number} height 整个divider的高度，单位rpx（默认40）
- * @property {String} type 将线条设置主题色（默认primary）
- * @property {Boolean} useSlot 是否使用slot传入内容，如果不传入，中间不会有空隙（默认true）
- * @property {String Number} margin-top 与前一个组件的距离，单位rpx（默认0）
- * @property {String Number} margin-bottom 与后一个组件的距离，单位rpx（0）
- * @event {Function} click divider组件被点击时触发
- * @example <u-divider color="#fa3534">长河落日圆</u-divider>
- */
-const props = defineProps(DividerProps);
-
-const emit = defineEmits(['click']);
-
-/**
- * divider横线样式
- */
-const lineStyle = computed(() => {
-    let style: Record<string, string> = {};
-    if (String(props.halfWidth).indexOf('%') !== -1) style.width = String(props.halfWidth);
-    else style.width = props.halfWidth + 'rpx';
-    // borderColor优先级高于type值
-    if (props.borderColor) style.borderColor = props.borderColor;
-    return style;
-});
-
-/**
- * divider组件被点击时触发
- */
-function onClick() {
-    emit('click');
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-.u-divider {
-    width: 100%;
-    position: relative;
-    text-align: center;
-    @include vue-flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-    flex-direction: row;
-}
-
-.u-divider-line {
-    border-bottom: 1px solid $u-border-color;
-    transform: scale(1, 0.5);
-    transform-origin: center;
-
-    &--bordercolor--primary {
-        border-color: $u-type-primary;
-    }
-
-    &--bordercolor--success {
-        border-color: $u-type-success;
-    }
-
-    &--bordercolor--error {
-        border-color: $u-type-primary;
-    }
-
-    &--bordercolor--info {
-        border-color: $u-type-info;
-    }
-
-    &--bordercolor--warning {
-        border-color: $u-type-warning;
-    }
-}
-
-.u-divider-text {
-    white-space: nowrap;
-    padding: 0 16rpx;
-    /* #ifndef APP-NVUE */
-    display: inline-flex;
-    /* #endif */
-}
-</style>
+<template>
+    <view
+        class="u-divider"
+        :class="customClass"
+        :style="
+            $u.toStyle(
+                {
+                    height: height === 'auto' ? 'auto' : height + 'rpx',
+                    backgroundColor: bgColor,
+                    marginBottom: marginBottom + 'rpx',
+                    marginTop: marginTop + 'rpx'
+                },
+                customStyle
+            )
+        "
+        @tap="onClick"
+    >
+        <view
+            class="u-divider-line"
+            :class="[type ? 'u-divider-line--bordercolor--' + type : '']"
+            :style="lineStyle"
+        ></view>
+        <view
+            v-if="useSlot"
+            class="u-divider-text"
+            :style="{
+                color: color,
+                fontSize: fontSize + 'rpx'
+            }"
+            ><slot
+        /></view>
+        <view
+            class="u-divider-line"
+            :class="[type ? 'u-divider-line--bordercolor--' + type : '']"
+            :style="lineStyle"
+        ></view>
+    </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';
+import { $u } from '../../';
+
+/**
+ * divider 分割线
+ * @description 区隔内容的分割线，一般用于页面底部"没有更多"的提示。
+ * @tutorial https://uviewpro.cn/zh/components/divider.html
+ * @property {String Number} half-width 文字左或右边线条宽度，数值或百分比，数值时单位为rpx
+ * @property {String} border-color 线条颜色，优先级高于type（默认#dcdfe6）
+ * @property {String} color 文字颜色（默认#909399）
+ * @property {String Number} fontSize 字体大小，单位rpx（默认26）
+ * @property {String} bg-color 整个divider的背景颜色（默认呢#ffffff）
+ * @property {String Number} height 整个divider的高度，单位rpx（默认40）
+ * @property {String} type 将线条设置主题色（默认primary）
+ * @property {Boolean} useSlot 是否使用slot传入内容，如果不传入，中间不会有空隙（默认true）
+ * @property {String Number} margin-top 与前一个组件的距离，单位rpx（默认0）
+ * @property {String Number} margin-bottom 与后一个组件的距离，单位rpx（0）
+ * @event {Function} click divider组件被点击时触发
+ * @example <u-divider color="#fa3534">长河落日圆</u-divider>
+ */
+const props = defineProps(DividerProps);
+
+const emit = defineEmits(['click']);
+
+/**
+ * divider横线样式
+ */
+const lineStyle = computed(() => {
+    let style: Record<string, string> = {};
+    if (String(props.halfWidth).indexOf('%') !== -1) style.width = String(props.halfWidth);
+    else style.width = props.halfWidth + 'rpx';
+    // borderColor优先级高于type值
+    if (props.borderColor) style.borderColor = props.borderColor;
+    return style;
+});
+
+/**
+ * divider组件被点击时触发
+ */
+function onClick() {
+    emit('click');
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+.u-divider {
+    width: 100%;
+    position: relative;
+    text-align: center;
+    @include vue-flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    flex-direction: row;
+}
+
+.u-divider-line {
+    border-bottom: 1px solid $u-border-color;
+    transform: scale(1, 0.5);
+    transform-origin: center;
+
+    &--bordercolor--primary {
+        border-color: $u-type-primary;
+    }
+
+    &--bordercolor--success {
+        border-color: $u-type-success;
+    }
+
+    &--bordercolor--error {
+        border-color: $u-type-primary;
+    }
+
+    &--bordercolor--info {
+        border-color: $u-type-info;
+    }
+
+    &--bordercolor--warning {
+        border-color: $u-type-warning;
+    }
+}
+
+.u-divider-text {
+    white-space: nowrap;
+    padding: 0 16rpx;
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+}
+</style>

package/components/u-dropdown/types.ts

@@ -1,32 +1,34 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-
-/**
- * u-dropdown 下拉菜单 Props
- * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
- */
-export const DropdownProps = {
-    /** 菜单标题和选项的激活态颜色 */
-    activeColor: { type: String, default: '#2979ff' },
-    /** 菜单标题和选项的未激活态颜色 */
-    inactiveColor: { type: String, default: '#606266' },
-    /** 点击遮罩是否关闭菜单 */
-    closeOnClickMask: { type: Boolean, default: true },
-    /** 点击当前激活项标题是否关闭菜单 */
-    closeOnClickSelf: { type: Boolean, default: true },
-    /** 过渡时间 */
-    duration: { type: [Number, String] as PropType<number | string>, default: 300 },
-    /** 标题菜单的高度，单位任意，数值默认为rpx单位 */
-    height: { type: [Number, String] as PropType<number | string>, default: 80 },
-    /** 是否显示下边框 */
-    borderBottom: { type: Boolean, default: false },
-    /** 标题的字体大小 */
-    titleSize: { type: [Number, String] as PropType<number | string>, default: 28 },
-    /** 下拉出来的内容部分的圆角值 */
-    borderRadius: { type: [Number, String] as PropType<number | string>, default: 0 },
-    /** 菜单右侧的icon图标 */
-    menuIcon: { type: String, default: 'arrow-down' },
-    /** 菜单右侧图标的大小 */
-    menuIconSize: { type: [Number, String] as PropType<number | string>, default: 26 }
-};
-
-export type DropdownProps = ExtractPropTypes<typeof DropdownProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
+
+/**
+ * u-dropdown 下拉菜单 Props
+ * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
+ */
+export const DropdownProps = {
+    ...baseProps,
+    /** 菜单标题和选项的激活态颜色 */
+    activeColor: { type: String, default: '#2979ff' },
+    /** 菜单标题和选项的未激活态颜色 */
+    inactiveColor: { type: String, default: '#606266' },
+    /** 点击遮罩是否关闭菜单 */
+    closeOnClickMask: { type: Boolean, default: true },
+    /** 点击当前激活项标题是否关闭菜单 */
+    closeOnClickSelf: { type: Boolean, default: true },
+    /** 过渡时间 */
+    duration: { type: [Number, String] as PropType<number | string>, default: 300 },
+    /** 标题菜单的高度，单位任意，数值默认为rpx单位 */
+    height: { type: [Number, String] as PropType<number | string>, default: 80 },
+    /** 是否显示下边框 */
+    borderBottom: { type: Boolean, default: false },
+    /** 标题的字体大小 */
+    titleSize: { type: [Number, String] as PropType<number | string>, default: 28 },
+    /** 下拉出来的内容部分的圆角值 */
+    borderRadius: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 菜单右侧的icon图标 */
+    menuIcon: { type: String, default: 'arrow-down' },
+    /** 菜单右侧图标的大小 */
+    menuIconSize: { type: [Number, String] as PropType<number | string>, default: 26 }
+};
+
+export type DropdownProps = ExtractPropTypes<typeof DropdownProps>;