stellar-ui-plus 1.16.18

package/components/ste-checkbox/ste-checkbox.vue

@@ -0,0 +1,206 @@
+<script lang="ts" setup>
+import { useSlots, computed, ref, type CSSProperties } from 'vue';
+import useColor from '../../config/color';
+let color = useColor();
+import utils from '../../utils/utils';
+import propsData, { CHECKBOX_KEY, type CheckboxEmits } from './props';
+import type { CheckboxGroupProps } from '../ste-checkbox-group/props';
+import { useInject } from '../../utils/mixin';
+const componentName = `ste-checkbox`;
+defineOptions({
+    name: componentName,
+    options: {
+        virtualHost: true,
+    },
+});
+const props = defineProps(propsData);
+const emits = defineEmits<CheckboxEmits>();
+const slots = useSlots();
+
+const Parent = useInject<{ props: Required<CheckboxGroupProps>; updateValue: (value: any[]) => void }>(CHECKBOX_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 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(() => {
+    let v = num.value && parentProps.value ? parentProps.value.modelValue.includes(props.name) : props.modelValue;
+    return v;
+});
+
+const cmpDisabled = computed(() => {
+    let disabled = getDefaultData('disabled', false);
+    // 限制最大可选数
+    if (parentProps.value && parentProps.value.max) {
+        if (!cmpChecked.value && parentProps.value.modelValue.length >= parentProps.value.max) {
+            disabled = true;
+        }
+    }
+    return disabled;
+});
+// 强制更新选中状态
+let num = ref(1);
+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;
+            }
+        }
+
+        let value: boolean | any[];
+        if (parentProps.value) {
+            value = parentProps.value.modelValue;
+            if (cmpChecked.value) {
+                value = value.filter(value => value != props.name);
+            } else {
+                value.push(props.name);
+            }
+            Parent.parent?.updateValue(value);
+            num.value++;
+        } else {
+            value = !cmpChecked.value;
+            emits('update:modelValue', !cmpChecked.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-checkbox--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-checkbox--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-checkbox/type.d.ts

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

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

@@ -0,0 +1,34 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import type { ShapeType, TextPositionType } from '../ste-checkbox/type'
+
+type DirectionType = 'row' | 'column'
+
+export const checkboxGroupProps = {
+  modelValue: { type: Array, default: [] },
+  direction: { type: String as PropType<DirectionType>, default: 'column' },
+  max: { type: Number, default: 0 },
+  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 checkboxGroupProps
+
+export type CheckboxGroupProps = ExtractPropTypes<typeof checkboxGroupProps>
+
+export const checkboxGroupEmits = {
+  'change': (value: any[]) => Array.isArray(value),
+  'update:modelValue': (value: any[]) => Array.isArray(value),
+}
+
+export type CheckboxGroupEmits = typeof checkboxGroupEmits

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

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

package/components/ste-code-input/ATTRIBUTES.md

@@ -0,0 +1,22 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `value` | 初始内容，支持双向绑定 | `string / number` | - | - | - |
+| `mode` | 输入框类型 | `string` | `box` | `box`：盒子模式<br/>`line`：底部横线模式 | - |
+| `maxlength` | 最大长度 | `number` | `6` | - | - |
+| `space` | 字符间的距离 | `string / number` | `16` | - | - |
+| `fontColor` | 字体颜色 | `String` | `#000000` | - | - |
+| `borderColor` | 边框颜色 | `String` | `#DDDDDD` | - | - |
+| `fontSize` | 字体大小 | `string / number` | `28` | - | - |
+| `size` | 输入框的大小，宽等于高 | `string / number` | `64` | - | - |
+| `formatter` | 替换输入值 | `string / number` | - | - | - |
+| `focus` | 是否自动获取焦点 | `boolean ` | `false` | - | - |
+| `disabledDot` | 是否禁止输入点符号 默认 true | `boolean` | `true` | - | - |
+| `readOnly` | 是否只读 | `boolean` | `false` | - | - |
+
+
+#### Events
+| 事件名 | 说明  | 事件参数 | 支持版本 |
+| ----- | ----- | ------- | -------- |
+| `change` | 改变时触发 | - | - |
+| `finish` | 输入完成触发 | - | - |

package/components/ste-code-input/README.md

@@ -0,0 +1,56 @@
+# CodeInput 验证码输入
+
+用于验证码输入或短密码输入
+
+---$
+
+### 代码演示
+
+#### 基础使用
+
+```html
+<ste-code-input :maxlength="4"></ste-code-input>
+<ste-code-input :maxlength="4" borderColor="rgba(0, 0, 0,0)"></ste-code-input>
+```
+
+#### 横线模式
+
+```html
+<ste-code-input mode="line" :maxlength="4"></ste-code-input>
+```
+
+#### 设置长度
+
+```html
+<ste-code-input :maxlength="5"></ste-code-input>
+```
+
+#### 设置间距
+
+```html
+<ste-code-input :space="0" :maxlength="4"></ste-code-input>
+```
+
+#### 调整颜色
+
+```html
+<ste-code-input  :maxlength="4" fontColor="#f56c6c" borderColor="#f56c6c"></ste-code-input>
+
+<ste-code-input mode="line" :maxlength="4 fontColor="#0090FF" borderColor="#0090FF"></ste-code-input>
+```
+
+#### 自定义显示
+
+```html
+<ste-code-input formatter="·" :fontSize="100" :maxlength="4" value="1"></ste-code-input>
+<ste-code-input mode="line" formatter="*" :space="0" :maxlength="4" value="12"></ste-code-input>
+```
+
+---$
+
+### API
+
+<!-- props -->
+
+---$
+{{fuyuwei}}

package/components/ste-code-input/config.json

@@ -0,0 +1,5 @@
+{
+    "group": "表单组件",
+    "title": "CodeInput 验证码输入",
+    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/code-input.png?1721804124305"
+}

package/components/ste-code-input/props.ts

@@ -0,0 +1,19 @@
+import type { PropType } from 'vue'
+import type { SizeType } from '../../types/index'
+
+type ModeType = 'box' | 'line'
+
+export default {
+  value: { type: [String, Number], default: '' },
+  mode: { type: String as PropType<ModeType>, default: 'box' },
+  maxlength: { type: [String, Number] as PropType<SizeType>, default: 6 },
+  space: { type: [String, Number] as PropType<SizeType>, default: 16 },
+  fontColor: { type: String, default: '#000000' },
+  borderColor: { type: String, default: '#dddddd' },
+  fontSize: { type: [String, Number] as PropType<SizeType>, default: 28 },
+  size: { type: [String, Number] as PropType<SizeType>, default: 64 },
+  formatter: { type: [String, Number] as PropType<SizeType>, default: '' },
+  focus: { type: Boolean, default: false },
+  disabledDot: { type: Boolean, default: true },
+  readOnly: { type: Boolean, default: false },
+}

package/components/ste-code-input/ste-code-input.easycom.json

@@ -0,0 +1,99 @@
+{
+    "name": "ste-code-input",
+    "description": "验证码输入",
+    "example": "<ste-code-input></ste-code-input>",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=code-input",
+    "attributes": [
+        {
+            "name": "value",
+            "description": "初始内容，支持双向绑定",
+            "type": "string | number"
+        },
+        {
+            "name": "mode",
+            "description": "输入框类型",
+            "type": "string",
+            "values": [
+                {
+                    "name": "box",
+                    "description": "盒子模式"
+                },
+                {
+                    "name": "line",
+                    "description": "底部横线模式"
+                }
+            ],
+            "default": "box"
+        },
+        {
+            "name": "maxlength",
+            "description": "最大长度",
+            "type": "number",
+            "default": 6
+        },
+        {
+            "name": "space",
+            "description": "字符间的距离",
+            "type": "string | number",
+            "default": 16
+        },
+
+        {
+            "name": "fontColor",
+            "description": "字体颜色",
+            "type": "String",
+            "default": "#000000"
+        },
+        {
+            "name": "borderColor",
+            "description": "边框颜色",
+            "type": "String",
+            "default": "#DDDDDD"
+        },
+        {
+            "name": "fontSize",
+            "description": "字体大小",
+            "type": "string | number",
+            "default": 28
+        },
+        {
+            "name": "size",
+            "description": "输入框的大小，宽等于高",
+            "type": "string | number",
+            "default": 64
+        },
+        {
+            "name": "formatter",
+            "description": "替换输入值",
+            "type": "string | number"
+        },
+        {
+            "name": "focus",
+            "description": "是否自动获取焦点",
+            "type": "boolean ",
+            "default": false
+        },
+        {
+            "name": "disabledDot",
+            "description": "是否禁止输入点符号 默认 true",
+            "type": "boolean",
+            "default": true
+        },
+        {
+            "name": "readOnly",
+            "description": "是否只读",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "[event]change",
+            "description": "改变时触发",
+            "type": "(value: string | number) => void"
+        },
+        {
+            "name": "[event]finish",
+            "description": "输入完成触发",
+            "type": "(value: string | number) => void"
+        }
+    ]
+}