stellar-ui-plus 1.16.18

package/components/ste-radio/ste-radio.easycom.json

@@ -0,0 +1,150 @@
+{
+    "name": "ste-radio",
+    "description": "单选框组件, 在一组备选项中进行单选。",
+    "example": "<ste-checkbox>单选框</ste-checkbox>",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=radio",
+    "attributes": [
+        {
+            "name": "v-model",
+            "description": "当前值",
+            "type": "string"
+        },
+        {
+            "name": "name",
+            "description": "选项的值",
+            "type": "number | string"
+        },
+        {
+            "name": "disabled",
+            "description": "禁用",
+            "type": "boolean",
+            "default": "false"
+        },
+        {
+            "name": "readonly",
+            "description": "只读（不置灰）",
+            "type": "boolean",
+            "default": "false"
+        },
+        {
+            "name": "shape",
+            "description": "形状",
+            "type": "string",
+            "default": "circle",
+            "values": [
+                {
+                    "name": "circle",
+                    "description": "圆形"
+                },
+                {
+                    "name": "square",
+                    "description": "方形"
+                }
+            ]
+        },
+        {
+            "name": "iconSize",
+            "description": "图标大小，单位rpx",
+            "type": "number | string",
+            "default": "36"
+        },
+        {
+            "name": "checkedColor",
+            "description": "选中状态的图标颜色",
+            "type": "string",
+            "default": "#0090FF"
+        },
+        {
+            "name": "textPosition",
+            "description": "文本的位置",
+            "type": "string",
+            "default": "right",
+            "values": [
+                {
+                    "name": "right",
+                    "description": "右"
+                },
+                {
+                    "name": "left",
+                    "description": "左"
+                }
+            ]
+        },
+        {
+            "name": "textSize",
+            "description": "文本字体大小，单位rpx",
+            "type": "number | string",
+            "default": "28"
+        },
+        {
+            "name": "textInactiveColor",
+            "description": "未选中的文本颜色",
+            "type": "string",
+            "default": "#000000"
+        },
+        {
+            "name": "textActiveColor",
+            "description": "选中的文本颜色",
+            "type": "string",
+            "default": "#000000"
+        },
+        {
+            "name": "textDisabled",
+            "description": "禁用文本点击",
+            "type": "boolean",
+            "default": "false"
+        },
+        {
+            "name": "marginLeft",
+            "description": "左边距，单位rpx",
+            "type": "number | string",
+            "default": "0"
+        },
+        {
+            "name": "marginRight",
+            "description": "右边距，单位rpx",
+            "type": "number | string",
+            "default": "0"
+        },
+        {
+            "name": "columnGap",
+            "description": "单选框和文本间距，单位rpx",
+            "type": "number | string",
+            "default": "16"
+        },
+        {
+            "name": "[event]click",
+            "description": "点击复选框时触发的事件",
+            "type": "(value:string | number,suspend: ()=>void,next: ()=>void,stop: ()=>void) => void",
+            "params": [
+                {
+                    "name": "value",
+                    "description": "当前复选框的绑定值"
+                },
+                {
+                    "name": "suspend",
+                    "description": "等待"
+                },
+                {
+                    "name": "next",
+                    "description": "继续"
+                },
+                {
+                    "name": "stop",
+                    "description": "停止"
+                }
+            ]
+        },
+        {
+            "name": "[event]change",
+            "description": "当绑定值变化时触发的事件",
+            "type": "(value: string | number) => void",
+            "params": [
+                {
+                    "name": "value",
+                    "description": "当前复选框的绑定值"
+                }
+            ]
+        }
+    ]
+}

package/components/ste-radio/ste-radio.vue

@@ -0,0 +1,188 @@
+<script lang="ts" setup>
+import { useSlots, computed, type CSSProperties } from 'vue';
+import useColor from '../../config/color';
+let color = useColor();
+import utils from '../../utils/utils';
+import propsData, { RADIO_KEY, type RadioEmits } from './props';
+import type { RadioGroupProps } from '../ste-radio-group/props';
+import { useInject } from '../../utils/mixin';
+const componentName = `ste-radio`;
+defineOptions({
+    name: componentName,
+    options: {
+        virtualHost: true,
+    },
+});
+const props = defineProps(propsData);
+const emits = defineEmits<RadioEmits>();
+const slots = useSlots();
+
+const Parent = useInject<{ props: Required<RadioGroupProps>; updateValue: (value: string) => void }>(RADIO_KEY);
+
+const parentProps = computed(() => Parent?.parent?.props);
+
+const cmpReadonly = computed(() => getDefaultData('readonly', false));
+const cmpShape = computed(() => getDefaultData('shape', 'circle'));
+const cmpIconSize = computed(() => getDefaultData('iconSize', 36));
+const cmpCheckedColor = computed(() => getDefaultData('checkedColor', color.getColor().steThemeColor));
+const cmpTextPosition = computed(() => getDefaultData('textPosition', 'right'));
+const cmpTextSize = computed(() => getDefaultData('textSize', 28));
+const cmpTextInactiveColor = computed(() => getDefaultData('textInactiveColor', '#000000'));
+const cmpTextActiveColor = computed(() => getDefaultData('textActiveColor', '#000000'));
+const cmpTextDisabled = computed(() => getDefaultData('textDisabled', false));
+const cmpMarginLeft = computed(() => getDefaultData('marginLeft', '0'));
+const cmpMarginRight = computed(() => getDefaultData('marginRight', '0'));
+const cmpColumnGap = computed(() => getDefaultData('columnGap', '16'));
+const cmpDisabled = computed(() => getDefaultData('disabled', false));
+const cmpSlotProps = computed(() => ({ checked: cmpChecked.value, disabled: cmpDisabled.value, readonly: cmpReadonly.value }));
+
+const cmpRootStyle = computed(() => {
+    let style: CSSProperties = {};
+    style['fontSize'] = `var(--font-size-${cmpTextSize.value},${utils.formatPx(cmpTextSize.value)})`;
+    style['color'] = cmpChecked.value ? cmpTextActiveColor.value : cmpTextInactiveColor.value;
+    style['flexDirection'] = cmpTextPosition.value == 'right' ? 'row' : 'row-reverse';
+    style['marginLeft'] = utils.formatPx(cmpMarginLeft.value);
+    style['marginRight'] = utils.formatPx(cmpMarginRight.value);
+    // #ifdef H5
+    if (cmpDisabled.value || cmpReadonly.value) {
+        style['cursor'] = 'not-allowed';
+    } else if (cmpTextDisabled.value) {
+        style['cursor'] = 'default';
+    } else {
+        style['cursor'] = 'pointer';
+    }
+    // #endif
+    if (cmpTextDisabled.value) {
+        style['pointerEvents'] = 'none';
+    }
+    return style;
+});
+
+const cmpIconStyle = computed(() => {
+    let style: CSSProperties = {};
+    style['marginRight'] = utils.formatPx(cmpColumnGap.value);
+    return style;
+});
+
+const cmpInputStyle = computed(() => {
+    let style: CSSProperties = {};
+    // 没有icon 则默认样式
+    style['borderRadius'] = cmpShape.value == 'circle' ? '50%' : '0';
+    style['border'] = `${utils.formatPx(2)} solid ${cmpChecked.value ? cmpCheckedColor.value : '#BBBBBB'}`;
+    style['background'] = cmpChecked.value ? cmpCheckedColor.value : '#FFFFFF';
+    style['width'] = `var(--font-size-${cmpIconSize.value},${utils.formatPx(cmpIconSize.value)})`;
+    style['height'] = `var(--font-size-${cmpIconSize.value},${utils.formatPx(cmpIconSize.value)})`;
+    style['lineHeight'] = `var(--font-size-${cmpIconSize.value},${utils.formatPx(cmpIconSize.value)})`;
+    // #ifdef H5
+    if (cmpDisabled.value || cmpReadonly.value) {
+        style['cursor'] = 'not-allowed';
+    } else {
+        style['cursor'] = 'pointer';
+    }
+    // #endif
+    if (cmpDisabled.value) {
+        style['background'] = '#eeeeee';
+        style['borderColor'] = '#bbbbbb';
+    }
+
+    // 在没有使用插槽内容时去掉边距
+    if (!slots.default) {
+        style['columnGap'] = 0;
+    }
+    return style;
+});
+
+const cmpChecked = computed(() => {
+    return parentProps.value ? parentProps.value.modelValue == props.name : props.modelValue == props.name;
+});
+
+async function click() {
+    if (!cmpDisabled.value && !cmpReadonly.value) {
+        let next = true;
+        const stop = new Promise((resolve, reject) => {
+            emits(
+                'click',
+                props.modelValue,
+                () => (next = false),
+                () => resolve(props.modelValue),
+                () => reject()
+            );
+        });
+        if (!next) {
+            try {
+                await stop;
+            } catch (e) {
+                return;
+            }
+        }
+
+        if (!cmpChecked.value) {
+            let value = String(props.name);
+            if (parentProps.value) {
+                Parent.parent?.updateValue(value);
+            } else {
+                emits('update:modelValue', value);
+            }
+            emits('change', value);
+        }
+    }
+}
+
+type PropsKeyTypee = keyof typeof props;
+function getDefaultData(key: PropsKeyTypee, value: any) {
+    try {
+        if (Object.hasOwn(props, key)) {
+            if (props[key]) {
+                return props[key];
+            } else {
+                return value;
+            }
+        }
+    } catch (e) {
+        return value;
+    }
+}
+</script>
+
+<template>
+    <view class="ste-radio-root" :style="[cmpRootStyle]" @click="click">
+        <view class="icon" :style="[cmpIconStyle]">
+            <slot name="icon" :slotProps="cmpSlotProps">
+                <view class="input-icon" :style="[cmpInputStyle]">
+                    <ste-icon v-if="cmpChecked && cmpIconSize" :size="cmpIconSize * 0.8" code="&#xe67a;" :color="cmpDisabled ? '#bbbbbb' : '#fff'" bold></ste-icon>
+                </view>
+            </slot>
+        </view>
+        <view class="text">
+            <!-- #ifdef MP -->
+            <slot></slot>
+            <!-- #endif -->
+            <slot :slotProps="cmpSlotProps"></slot>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.ste-radio-root {
+    width: auto;
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    .input-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .icon {
+        pointer-events: all;
+    }
+
+    .text {
+        display: flex;
+        align-items: center;
+        height: 100%;
+    }
+}
+</style>

package/components/ste-radio/type.d.ts

@@ -0,0 +1,2 @@
+export type ShapeType = 'square' | 'circle' | undefined
+export type TextPositionType = 'left' | 'right' | undefined

package/components/ste-radio-group/props.ts

@@ -0,0 +1,33 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import type { ShapeType, TextPositionType } from '../ste-radio/type'
+
+type DirectionType = 'row' | 'column'
+
+export const radioGroupProps = {
+  modelValue: String,
+  direction: { type: String as PropType<DirectionType>, default: 'column' },
+  disabled: { type: Boolean as PropType<boolean | undefined>, default: undefined },
+  readonly: { type: Boolean as PropType<boolean | undefined>, default: undefined },
+  shape: { type: [String, undefined] as PropType<ShapeType>, default: undefined },
+  iconSize: { type: [Number, String] as PropType<string | number | undefined>, default: undefined },
+  checkedColor: { type: [Number, String] as PropType<string | number | undefined>, default: undefined },
+  textPosition: { type: [String, undefined] as PropType<TextPositionType>, default: undefined },
+  textSize: { type: [Number, String] as PropType<string | number | undefined>, default: undefined },
+  textInactiveColor: { type: String as PropType<string | undefined>, default: undefined },
+  textActiveColor: { type: String as PropType<string | undefined>, default: undefined },
+  textDisabled: { type: Boolean as PropType<boolean | undefined>, default: undefined },
+  marginLeft: { type: [Number, String] as PropType<string | number | undefined>, default: undefined },
+  marginRight: { type: [Number, String] as PropType<string | number | undefined>, default: undefined },
+  columnGap: { type: [Number, String] as PropType<string | number | undefined>, default: undefined },
+}
+
+export default radioGroupProps
+
+export type RadioGroupProps = ExtractPropTypes<typeof radioGroupProps>
+
+export const radioGroupEmits = {
+  'change': (value: string) => typeof value === 'string',
+  'update:modelValue': (value: string) => typeof value === 'string',
+}
+
+export type RadioGroupEmits = typeof radioGroupEmits

package/components/ste-radio-group/ste-radio-group.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { computed, type CSSProperties } from 'vue';
+import propsData, { radioGroupEmits } from './props';
+import { useProvide } from '../../utils/mixin';
+import { RADIO_KEY } from '../ste-radio/props';
+const props = defineProps(propsData);
+const emits = defineEmits(radioGroupEmits);
+
+useProvide(RADIO_KEY, 'ste-radio')({ props, updateValue });
+
+const cmpRootStyle = computed(() => {
+    return {
+        flexDirection: props.direction,
+    } as CSSProperties;
+});
+
+function updateValue(value: string) {
+    emits('change', value);
+    emits('update:modelValue', value);
+}
+</script>
+
+<template>
+    <view class="ste-radio-group-root" :style="[cmpRootStyle]">
+        <slot></slot>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.ste-radio-group-root {
+    display: grid;
+    row-gap: 16rpx;
+}
+</style>

package/components/ste-rate/ATTRIBUTES.md

@@ -0,0 +1,21 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `modelValue` | 当前评分数（支持v-model双向绑定） | `Number` | `0` | - | - |
+| `count` | 图标总数 | `Number` | `5` | - | - |
+| `score` | 每颗星星代表的分数 | `Number` | `1` | - | - |
+| `disabled` | 禁用 | `Boolean` | `false` | - | - |
+| `readonly` | 只读（不置灰） | `Boolean` | `false` | - | - |
+| `size` | 评分图标的大小，单位rpx | `Number/String` | `44` | - | - |
+| `inactiveColor` | 未选中的颜色 | `String` | `#dddddd` | - | - |
+| `activeColor` | 选中的颜色 | `String` | `#0090FF` | - | - |
+| `inactiveCode` | 未选中的图标code | `String` | `&#xe681` | - | - |
+| `activeCode` | 选中的图标code | `String` | `&#xe684` | - | - |
+| `gutter` | 每个图标之间的距离，单位rpx | `Number/String` | `10` | - | - |
+| `iconData` | 每个分值对应的图标code | `Array` | `() => []` | - | - |
+
+
+#### Events
+| 事件名 | 说明  | 事件参数 | 支持版本 |
+| ----- | ----- | ------- | -------- |
+| `change` | 当前分值变化时触发的事件 | - | - |

package/components/ste-rate/README.md

@@ -0,0 +1,97 @@
+# Rate 评分
+
+用于对事物进行评级操作。
+
+---$
+
+### 代码演示
+
+JavaScript后面的演示代码中涉及到的变量和方法都使用本`javascript`代码
+
+```javascript
+import { ref } from 'vue';
+let value = ref(2);
+let value1 = ref(2);
+let value2 = ref(2);
+let value3 = ref(2.6);
+let value4 = ref(2.5);
+let value5 = ref(2);
+```
+
+#### 基础用法
+
+通过`value`属性，双向绑定，设置评分的值
+
+```
+<ste-rate v-model="value"></ste-rate>
+```
+
+#### 自定义图标
+
+-   通过`inactiveCode`属性，设置未选中的图标code，默认`&#xe681;`。
+-   通过`activeCode`属性，设置选中的图标code，默认`&#xe684;`。
+-   使用自定义code时，图标内容应该撑满盒子，避免内容距盒子距离太大，导致选中的颜色计算有偏差。
+
+```
+<!--选中和未选中 图标一样-->
+<ste-rate v-model="value1" inactiveCode="&#xe685;" activeCode="&#xe685;"></ste-rate>
+<!--选中和未选中 图标不一样-->
+<ste-rate v-model="value1" inactiveCode="&#xe685;" activeCode="&#xe687;"></ste-rate>
+```
+
+#### 自定义样式
+
+-   通过`inactiveColor`属性，设置未选中的颜色，默认`#dddddd`。
+-   通过`activeColor`属性，设置选中的颜色，默认`#0090FF`。
+-   通过`size`属性，设置评分图标的大小，单位`rpx`，默认`44`。
+-   通过`gutter`属性，设置每个图标之间的距离，单位`rpx`，默认`10`。
+
+```
+<ste-rate v-model="value2" inactiveColor="#F8D5D5" activeColor="#d276a3" size="80" :gutter="20"></ste-rate>
+```
+
+#### 只读
+
+通过`readonly `属性，设置只读，不可切换评分，样式不置灰，可部分星， 默认`false`。
+
+```
+<ste-rate v-model="value3" readonly></ste-rate>
+```
+
+#### 禁用
+
+通过`disabled`属性，设置禁用，不可切换评分，样式置灰，可部分星，默认`false`。
+
+```
+<ste-rate v-model="value3" disabled></ste-rate>
+```
+
+#### 自定义数量和自定义分值
+
+-   通过`count`属性，设置图标总数，默认`5`。
+-   通过`score`属性，设置每颗图标代表的分数，默认`1`。
+
+```
+<!--星星数量为1，分值为5, 分数为2.5-->
+<ste-rate v-model="value4" :count="1" :score="5"></ste-rate>
+```
+
+#### 自定义分值图标
+
+-   需要传入图标code对应的数组, 此时`inactiveColor`和`activeColor`将失效
+-   会根据当前评分数对应的图标数量来取`iconData`中的值为当前图标的`code`
+
+```
+<ste-rate v-model="value5" :iconData="iconData"></ste-rate>
+
+let iconData = ref(['&#xe686;', '', '&#xe671;', '&#xe66a;', '&#xe66b;']);
+```
+
+---$
+
+### API
+
+<!-- props -->
+
+---$
+{{qinpengfei}}

package/components/ste-rate/config.json

@@ -0,0 +1,5 @@
+{
+    "group": "表单组件",
+    "title": "Rate 评分",
+    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/rate.png"
+}

package/components/ste-rate/props.ts

@@ -0,0 +1,16 @@
+import type { PropType } from 'vue'
+
+export default {
+  modelValue: { type: Number, default: 0 },
+  count: { type: Number, default: 5 },
+  score: { type: Number, default: 1 },
+  disabled: { type: Boolean, default: false },
+  readonly: { type: Boolean, default: false },
+  size: { type: [String, Number], default: 44 },
+  inactiveColor: { type: String, default: '#dddddd' },
+  activeColor: { type: String, default: '' },
+  inactiveCode: { type: String, default: '' },
+  activeCode: { type: String, default: '' },
+  gutter: { type: [String, Number], default: 10 },
+  iconData: { type: Array as PropType<string[]>, default: () => [] },
+}

package/components/ste-rate/ste-rate.easycom.json

@@ -0,0 +1,85 @@
+{
+    "name": "ste-rate",
+    "description": "评分组件,用于对事物进行评级操作。",
+    "example": "<ste-rate v-model='value'></ste-rate>",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=rate",
+    "attributes": [
+        {
+            "name": "modelValue",
+            "description": "当前评分数（支持v-model双向绑定）",
+            "type": "Number",
+            "default": 0
+        },
+        {
+            "name": "count",
+            "description": "图标总数",
+            "type": "Number",
+            "default": 5
+        },
+        {
+            "name": "score",
+            "description": "每颗星星代表的分数",
+            "type": "Number",
+            "default": 1
+        },
+        {
+            "name": "disabled",
+            "description": "禁用",
+            "type": "Boolean",
+            "default": false
+        },
+        {
+            "name": "readonly",
+            "description": "只读（不置灰）",
+            "type": "Boolean",
+            "default": false
+        },
+        {
+            "name": "size",
+            "description": "评分图标的大小，单位rpx",
+            "type": "Number|String",
+            "default": 44
+        },
+        {
+            "name": "inactiveColor",
+            "description": "未选中的颜色",
+            "type": "String",
+            "default": "#dddddd"
+        },
+        {
+            "name": "activeColor",
+            "description": "选中的颜色",
+            "type": "String",
+            "default": "#0090FF"
+        },
+        {
+            "name": "inactiveCode",
+            "description": "未选中的图标code",
+            "type": "String",
+            "default": "&#xe681"
+        },
+        {
+            "name": "activeCode",
+            "description": "选中的图标code",
+            "type": "String",
+            "default": "&#xe684"
+        },
+        {
+            "name": "gutter",
+            "description": "每个图标之间的距离，单位rpx",
+            "type": "Number|String",
+            "default": 10
+        },
+        {
+            "name": "iconData",
+            "description": "每个分值对应的图标code",
+            "type": "Array",
+            "default": "() => []"
+        },
+        {
+            "name": "[event]change",
+            "description": "当前分值变化时触发的事件",
+            "type": "() => void"
+        }
+    ]
+}