uview-pro 0.1.0 → 0.2.0

package/components/u-col/u-col.vue

@@ -1,123 +1,123 @@
-<template>
-    <view class="u-col" :class="['u-col-' + span]" :style="colStyle" @tap="onClick">
-        <slot></slot>
-    </view>
-</template>
-
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-import { ColProps } from './types';
-
-defineOptions({
-    name: 'u-col'
-});
-
-/**
- * col 布局单元格
- * @description 通过基础的 12 分栏，迅速简便地创建布局（搭配<u-row>使用）
- * @tutorial https://uviewpro.cn/zh/components/layout.html
- * @property {String|Number} span 栅格占据的列数，总12等分（默认0）
- * @property {String} text-align 文字水平对齐方式（默认left）
- * @property {String|Number} offset 分栏左边偏移，计算方式与span相同（默认0）
- * @example <u-col span="3"><view class="demo-layout bg-purple"></view></u-col>
- */
-
-const emit = defineEmits<{ (e: 'click'): void }>();
-
-const props = defineProps(ColProps);
-
-/**
- * gutter 给col添加间距，左右边距各占一半，从父组件u-row获取
- */
-const gutter = inject('u-row-gutter', 20);
-
-/**
- * 计算水平排列方式
- * @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;
-});
-
-/**
- * 计算样式对象
- */
-const colStyle = computed<any>(() => ({
-    padding: `0 ${Number(gutter) / 2}rpx`,
-    marginLeft: `${(100 / 12) * Number(props.offset)}%`,
-    flex: `0 0 ${(100 / 12) * Number(props.span)}%`,
-    alignItems: uAlignItem.value,
-    justifyContent: uJustify.value,
-    textAlign: props.textAlign
-}));
-
-/**
- * 点击事件
- * @param e 事件对象
- */
-function onClick(e: Event) {
-    emit('click');
-}
-</script>
-
-<style lang="scss">
-@import '../../libs/css/style.components.scss';
-
-.u-col {
-    /* #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO */
-    float: left;
-    /* #endif */
-}
-
-.u-col-0 {
-    width: 0;
-}
-.u-col-1 {
-    width: calc(100% / 12);
-}
-.u-col-2 {
-    width: calc(100% / 12 * 2);
-}
-.u-col-3 {
-    width: calc(100% / 12 * 3);
-}
-.u-col-4 {
-    width: calc(100% / 12 * 4);
-}
-.u-col-5 {
-    width: calc(100% / 12 * 5);
-}
-.u-col-6 {
-    width: calc(100% / 12 * 6);
-}
-.u-col-7 {
-    width: calc(100% / 12 * 7);
-}
-.u-col-8 {
-    width: calc(100% / 12 * 8);
-}
-.u-col-9 {
-    width: calc(100% / 12 * 9);
-}
-.u-col-10 {
-    width: calc(100% / 12 * 10);
-}
-.u-col-11 {
-    width: calc(100% / 12 * 11);
-}
-.u-col-12 {
-    width: calc(100% / 12 * 12);
-}
-</style>
+<template>
+    <view class="u-col" :class="['u-col-' + span]" :style="colStyle" @tap="onClick">
+        <slot></slot>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { ColProps } from './types';
+
+defineOptions({
+    name: 'u-col'
+});
+
+/**
+ * col 布局单元格
+ * @description 通过基础的 12 分栏，迅速简便地创建布局（搭配<u-row>使用）
+ * @tutorial https://uviewpro.cn/zh/components/layout.html
+ * @property {String|Number} span 栅格占据的列数，总12等分（默认0）
+ * @property {String} text-align 文字水平对齐方式（默认left）
+ * @property {String|Number} offset 分栏左边偏移，计算方式与span相同（默认0）
+ * @example <u-col span="3"><view class="demo-layout bg-purple"></view></u-col>
+ */
+
+const emit = defineEmits<{ (e: 'click'): void }>();
+
+const props = defineProps(ColProps);
+
+/**
+ * gutter 给col添加间距，左右边距各占一半，从父组件u-row获取
+ */
+const gutter = inject('u-row-gutter', 20);
+
+/**
+ * 计算水平排列方式
+ * @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;
+});
+
+/**
+ * 计算样式对象
+ */
+const colStyle = computed<any>(() => ({
+    padding: `0 ${Number(gutter) / 2}rpx`,
+    marginLeft: `${(100 / 12) * Number(props.offset)}%`,
+    flex: `0 0 ${(100 / 12) * Number(props.span)}%`,
+    alignItems: uAlignItem.value,
+    justifyContent: uJustify.value,
+    textAlign: props.textAlign
+}));
+
+/**
+ * 点击事件
+ * @param e 事件对象
+ */
+function onClick(e: Event) {
+    emit('click');
+}
+</script>
+
+<style lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.u-col {
+    /* #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO */
+    float: left;
+    /* #endif */
+}
+
+.u-col-0 {
+    width: 0;
+}
+.u-col-1 {
+    width: calc(100% / 12);
+}
+.u-col-2 {
+    width: calc(100% / 12 * 2);
+}
+.u-col-3 {
+    width: calc(100% / 12 * 3);
+}
+.u-col-4 {
+    width: calc(100% / 12 * 4);
+}
+.u-col-5 {
+    width: calc(100% / 12 * 5);
+}
+.u-col-6 {
+    width: calc(100% / 12 * 6);
+}
+.u-col-7 {
+    width: calc(100% / 12 * 7);
+}
+.u-col-8 {
+    width: calc(100% / 12 * 8);
+}
+.u-col-9 {
+    width: calc(100% / 12 * 9);
+}
+.u-col-10 {
+    width: calc(100% / 12 * 10);
+}
+.u-col-11 {
+    width: calc(100% / 12 * 11);
+}
+.u-col-12 {
+    width: calc(100% / 12 * 12);
+}
+</style>

package/components/u-collapse/types.ts

@@ -1,31 +1,33 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-
-/**
- * u-collapse 手风琴 Props
- * @description 通过折叠面板收纳内容区域
- * @property {Boolean} accordion 是否手风琴模式（默认true）
- * @property {Object} headStyle 标题自定义样式，对象形式
- * @property {Object} bodyStyle 主体自定义样式，对象形式
- * @property {Object} itemStyle 每一个item的样式，对象形式
- * @property {Boolean} arrow 是否显示标题右侧的箭头（默认true）
- * @property {String} arrowColor 标题右侧箭头的颜色（默认#909399）
- * @property {String} hoverClass 样式类名，按下时有效（默认u-hover-class）
- */
-export const CollapseProps = {
-    /** 是否手风琴模式 */
-    accordion: { type: Boolean, default: true },
-    /** 头部的样式 */
-    headStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
-    /** 主体的样式 */
-    bodyStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
-    /** 每一个item的样式 */
-    itemStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
-    /** 是否显示右侧的箭头 */
-    arrow: { type: Boolean, default: true },
-    /** 箭头的颜色 */
-    arrowColor: { type: String, default: '#909399' },
-    /** 标题部分按压时的样式类，"none"为无效果 */
-    hoverClass: { type: String, default: 'u-hover-class' }
-};
-
-export type CollapseProps = ExtractPropTypes<typeof CollapseProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
+
+/**
+ * u-collapse 手风琴 Props
+ * @description 通过折叠面板收纳内容区域
+ * @property {Boolean} accordion 是否手风琴模式（默认true）
+ * @property {Object} headStyle 标题自定义样式，对象形式
+ * @property {Object} bodyStyle 主体自定义样式，对象形式
+ * @property {Object} itemStyle 每一个item的样式，对象形式
+ * @property {Boolean} arrow 是否显示标题右侧的箭头（默认true）
+ * @property {String} arrowColor 标题右侧箭头的颜色（默认#909399）
+ * @property {String} hoverClass 样式类名，按下时有效（默认u-hover-class）
+ */
+export const CollapseProps = {
+    ...baseProps,
+    /** 是否手风琴模式 */
+    accordion: { type: Boolean, default: true },
+    /** 头部的样式 */
+    headStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 主体的样式 */
+    bodyStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 每一个item的样式 */
+    itemStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 是否显示右侧的箭头 */
+    arrow: { type: Boolean, default: true },
+    /** 箭头的颜色 */
+    arrowColor: { type: String, default: '#909399' },
+    /** 标题部分按压时的样式类，"none"为无效果 */
+    hoverClass: { type: String, default: 'u-hover-class' }
+};
+
+export type CollapseProps = ExtractPropTypes<typeof CollapseProps>;

package/components/u-collapse/u-collapse.vue

@@ -1,68 +1,69 @@
-<template>
-    <view class="u-collapse">
-        <slot />
-    </view>
-</template>
-
-<script setup lang="ts">
-import { ref, provide } from 'vue';
-import { CollapseProps } from './types';
-
-defineOptions({
-    name: 'u-collapse'
-});
-
-/**
- * collapse 手风琴
- * @description 通过折叠面板收纳内容区域
- * @tutorial https://uviewpro.cn/zh/components/collapse.html
- * @property {Boolean} accordion 是否手风琴模式（默认true）
- * @property {Boolean} arrow 是否显示标题右侧的箭头（默认true）
- * @property {String} arrow-color 标题右侧箭头的颜色（默认#909399）
- * @property {Object} head-style 标题自定义样式，对象形式
- * @property {Object} body-style 主体自定义样式，对象形式
- * @property {String} hover-class 样式类名，按下时有效（默认u-hover-class）
- * @event {Function} change 当前激活面板展开时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array)
- * @example <u-collapse></u-collapse>
- */
-const props = defineProps(CollapseProps);
-
-const emit = defineEmits(['change']);
-
-// 子元素集合
-const children = ref<any[]>([]);
-
-/**
- * 重新初始化一次内部的所有子元素的高度计算，用于异步获取数据渲染的情况
- */
-function init() {
-    children.value.forEach((vm, index) => {
-        vm.init && vm.init();
-    });
-}
-
-/**
- * collapse item被点击，由collapse item调用父组件方法
- */
-function onChange(index: string | number) {
-    emit('change', index);
-}
-
-provide('u-collapse', {
-    children,
-    props,
-    init,
-    onChange
-});
-
-defineExpose({
-    props,
-    children,
-    init,
-    onChange
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-</style>
+<template>
+    <view class="u-collapse" :style="$u.toStyle(customStyle)" :class="customClass">
+        <slot />
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-collapse',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { CollapseProps } from './types';
+import { $u } from '../../';
+
+/**
+ * collapse 手风琴
+ * @description 通过折叠面板收纳内容区域
+ * @tutorial https://uviewpro.cn/zh/components/collapse.html
+ * @property {Boolean} accordion 是否手风琴模式（默认true）
+ * @property {Boolean} arrow 是否显示标题右侧的箭头（默认true）
+ * @property {String} arrow-color 标题右侧箭头的颜色（默认#909399）
+ * @property {Object} head-style 标题自定义样式，对象形式
+ * @property {Object} body-style 主体自定义样式，对象形式
+ * @property {String} hover-class 样式类名，按下时有效（默认u-hover-class）
+ * @event {Function} change 当前激活面板展开时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array)
+ * @example <u-collapse></u-collapse>
+ */
+const props = defineProps(CollapseProps);
+
+const emit = defineEmits(['change']);
+
+// 子元素集合
+const children = ref<any[]>([]);
+
+/**
+ * 重新初始化一次内部的所有子元素的高度计算，用于异步获取数据渲染的情况
+ */
+function init() {
+    children.value.forEach((vm, index) => {
+        vm.init && vm.init();
+    });
+}
+
+/**
+ * collapse item被点击，由collapse item调用父组件方法
+ */
+function onChange(index: string | number) {
+    emit('change', index);
+}
+
+defineExpose({
+    props,
+    children,
+    init,
+    onChange
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+</style>

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

@@ -1,25 +1,27 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import type { TextAlign } from '../../types/global';
-
-/**
- * u-collapse-item 手风琴Item Props
- * @description 通过折叠面板收纳内容区域（搭配u-collapse使用）
- */
-export const CollapseItemProps = {
-    /** 标题 */
-    title: { type: String, default: '' },
-    /** 标题的对齐方式 */
-    align: { type: String as PropType<TextAlign>, default: 'left' },
-    /** 是否可以点击收起 */
-    disabled: { type: Boolean, default: false },
-    /** collapse显示与否 */
-    open: { type: Boolean, default: false },
-    /** 唯一标识符 */
-    name: { type: [Number, String] as PropType<number | string>, default: '' },
-    /** 活动样式 */
-    activeStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
-    /** 标识当前为第几个 */
-    index: { type: [String, Number] as PropType<string | number>, default: '' }
-};
-
-export type CollapseItemProps = ExtractPropTypes<typeof CollapseItemProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { TextAlign } from '../../types/global';
+import { baseProps } from '../common/props';
+
+/**
+ * u-collapse-item 手风琴Item Props
+ * @description 通过折叠面板收纳内容区域（搭配u-collapse使用）
+ */
+export const CollapseItemProps = {
+    ...baseProps,
+    /** 标题 */
+    title: { type: String, default: '' },
+    /** 标题的对齐方式 */
+    align: { type: String as PropType<TextAlign>, default: 'left' },
+    /** 是否可以点击收起 */
+    disabled: { type: Boolean, default: false },
+    /** collapse显示与否 */
+    open: { type: Boolean, default: false },
+    /** 唯一标识符 */
+    name: { type: [Number, String] as PropType<number | string>, default: '' },
+    /** 活动样式 */
+    activeStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 标识当前为第几个 */
+    index: { type: [String, Number] as PropType<string | number>, default: '' }
+};
+
+export type CollapseItemProps = ExtractPropTypes<typeof CollapseItemProps>;