uview-pro 0.2.4 → 0.3.1

package/components/u-row/u-row.vue

@@ -1,87 +1,105 @@
-<template>
-    <view
-        class="u-row"
-        :style="{
-            alignItems: uAlignItem,
-            justifyContent: uJustify
-        }"
-        @tap="onClick"
-    >
-        <slot />
-    </view>
-</template>
-
-<script setup lang="ts">
-import { computed, provide } from 'vue';
-import { RowProps } from './types';
-
-defineOptions({
-    name: 'u-row'
-});
-
-/**
- * row 行布局
- * @description 通过基础的 12 分栏，迅速简便地创建布局。
- * @tutorial https://uviewpro.cn/zh/components/layout.html#row-props
- * @property {String|Number} gutter 栅格间隔，左右各为此值的一半，单位rpx（默认0）
- * @property {String} justify 水平排列方式(微信小程序暂不支持)默认（start(或flex-start)）
- * @property {String} align 垂直排列方式（默认center）
- * @example <u-row gutter="16"></u-row>
- */
-
-const emit = defineEmits<{ (e: 'click'): void }>();
-
-const props = defineProps(RowProps);
-
-// 提供 gutter 给子组件 u-col 使用
-provide('u-row-gutter', props.gutter);
-
-/**
- * 计算水平排列方式
- * @returns {string}
- */
-const uJustify = computed(() => {
-    if (props.justify === 'end' || props.justify === 'start') return 'flex-' + props.justify;
-    else if (props.justify === 'around' || props.justify === 'between') return 'space-' + props.justify;
-    else return props.justify;
-});
-
-/**
- * 计算垂直对齐方式
- * @returns {string}
- */
-const uAlignItem = computed(() => {
-    if (props.align === 'top') return 'flex-start';
-    if (props.align === 'bottom') return 'flex-end';
-    else return props.align;
-});
-
-/**
- * 点击事件
- * @param e 事件对象
- */
-function onClick(e: Event) {
-    // 触发 click 事件
-    emit('click');
-}
-</script>
-
-<style lang="scss">
-@import '../../libs/css/style.components.scss';
-
-.u-row {
-    // 由于微信小程序编译后奇怪的页面结构，只能使用float布局实现，flex无法实现
-    /* #ifndef MP-WEIXIN || MP-QQ || MP-TOUTIAO */
-    @include vue-flex;
-    /* #endif */
-    flex-wrap: wrap;
-}
-
-.u-row:after {
-    /* #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO */
-    display: table;
-    clear: both;
-    content: '';
-    /* #endif */
-}
-</style>
+<template>
+    <view
+        class="u-row"
+        :style="
+            $u.toStyle(
+                {
+                    alignItems: uAlignItem,
+                    justifyContent: uJustify
+                },
+                customStyle
+            )
+        "
+        @tap="onClick"
+    >
+        <slot />
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-row',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { RowProps } from './types';
+import { $u, useParent } from '../../';
+
+/**
+ * row 行布局
+ * @description 通过基础的 12 分栏，迅速简便地创建布局。
+ * @tutorial https://uviewpro.cn/zh/components/layout.html#row-props
+ * @property {String|Number} gutter 栅格间隔，左右各为此值的一半，单位rpx（默认0）
+ * @property {String} justify 水平排列方式(微信小程序暂不支持)默认（start(或flex-start)）
+ * @property {String} align 垂直排列方式（默认center）
+ * @example <u-row gutter="16"></u-row>
+ */
+
+const emit = defineEmits<{ (e: 'click'): void }>();
+
+const props = defineProps(RowProps);
+
+useParent('u-row');
+
+/**
+ * 计算水平排列方式
+ * @returns {string}
+ */
+const uJustify = computed(() => {
+    if (props.justify === 'end' || props.justify === 'start') return 'flex-' + props.justify;
+    else if (props.justify === 'around' || props.justify === 'between') return 'space-' + props.justify;
+    else return props.justify;
+});
+
+/**
+ * 计算垂直对齐方式
+ * @returns {string}
+ */
+const uAlignItem = computed(() => {
+    if (props.align === 'top') return 'flex-start';
+    if (props.align === 'bottom') return 'flex-end';
+    else return props.align;
+});
+
+/**
+ * 点击事件
+ * @param e 事件对象
+ */
+function onClick(e: Event) {
+    // 触发 click 事件
+    emit('click');
+}
+
+defineExpose({
+    props
+});
+</script>
+
+<style lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.u-row {
+    // 由于微信小程序编译后奇怪的页面结构，只能使用float布局实现，flex无法实现
+    /* #ifndef MP-WEIXIN || MP-QQ || MP-TOUTIAO */
+    @include vue-flex;
+    /* #endif */
+    flex-wrap: wrap;
+}
+
+.u-row:after {
+    /* #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO */
+    display: table;
+    clear: both;
+    content: '';
+    /* #endif */
+}
+</style>

package/components/u-row-notice/types.ts

@@ -1,39 +1,41 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import type { PlayState, ThemeType } from '../../types/global';
-
-/**
- * RowNoticeProps 水平滚动通告栏 props 类型定义
- * @description 水平滚动通告栏，支持主题、图标、关闭等
- */
-export const RowNoticeProps = {
-    /** 显示的内容，数组 */
-    list: { type: Array as PropType<string[]>, default: () => [] },
-    /** 显示的主题，success|error|primary|info|warning|none */
-    type: { type: String as PropType<ThemeType | 'none'>, default: 'warning' },
-    /** 是否显示左侧的音量图标 */
-    volumeIcon: { type: Boolean, default: true },
-    /** 是否显示右侧的右箭头图标 */
-    moreIcon: { type: Boolean, default: false },
-    /** 是否显示右侧的关闭图标 */
-    closeIcon: { type: Boolean, default: false },
-    /** 是否自动播放 */
-    autoplay: { type: Boolean, default: true },
-    /** 文字颜色，各图标也会使用文字颜色 */
-    color: { type: String, default: '' },
-    /** 背景颜色 */
-    bgColor: { type: String, default: '' },
-    /** 是否显示 */
-    show: { type: Boolean, default: true },
-    /** 字体大小，单位rpx */
-    fontSize: { type: [Number, String] as PropType<number | string>, default: 26 },
-    /** 音量喇叭的大小 */
-    volumeSize: { type: [Number, String] as PropType<number | string>, default: 34 },
-    /** 水平滚动时的滚动速度，即每秒滚动多少rpx */
-    speed: { type: [Number, String] as PropType<number | string>, default: 160 },
-    /** 播放状态，play-播放，paused-暂停 */
-    playState: { type: String as PropType<PlayState>, default: 'play' },
-    /** 通知的边距 */
-    padding: { type: [Number, String] as PropType<number | string>, default: '18rpx 24rpx' }
-};
-
-export type RowNoticeProps = ExtractPropTypes<typeof RowNoticeProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { PlayState, ThemeType } from '../../types/global';
+import { baseProps } from '../common/props';
+
+/**
+ * RowNoticeProps 水平滚动通告栏 props 类型定义
+ * @description 水平滚动通告栏，支持主题、图标、关闭等
+ */
+export const RowNoticeProps = {
+    ...baseProps,
+    /** 显示的内容，数组 */
+    list: { type: Array as PropType<string[]>, default: () => [] },
+    /** 显示的主题，success|error|primary|info|warning|none */
+    type: { type: String as PropType<ThemeType | 'none'>, default: 'warning' },
+    /** 是否显示左侧的音量图标 */
+    volumeIcon: { type: Boolean, default: true },
+    /** 是否显示右侧的右箭头图标 */
+    moreIcon: { type: Boolean, default: false },
+    /** 是否显示右侧的关闭图标 */
+    closeIcon: { type: Boolean, default: false },
+    /** 是否自动播放 */
+    autoplay: { type: Boolean, default: true },
+    /** 文字颜色，各图标也会使用文字颜色 */
+    color: { type: String, default: '' },
+    /** 背景颜色 */
+    bgColor: { type: String, default: '' },
+    /** 是否显示 */
+    show: { type: Boolean, default: true },
+    /** 字体大小，单位rpx */
+    fontSize: { type: [Number, String] as PropType<number | string>, default: 26 },
+    /** 音量喇叭的大小 */
+    volumeSize: { type: [Number, String] as PropType<number | string>, default: 34 },
+    /** 水平滚动时的滚动速度，即每秒滚动多少rpx */
+    speed: { type: [Number, String] as PropType<number | string>, default: 160 },
+    /** 播放状态，play-播放，paused-暂停 */
+    playState: { type: String as PropType<PlayState>, default: 'play' },
+    /** 通知的边距 */
+    padding: { type: [Number, String] as PropType<number | string>, default: '18rpx 24rpx' }
+};
+
+export type RowNoticeProps = ExtractPropTypes<typeof RowNoticeProps>;