stellar-ui-plus 1.16.18

package/components/ste-dropdown-menu/ste-dropdown-menu.vue

@@ -0,0 +1,223 @@
+<script lang="ts" setup>
+import { watch, computed, ref, type CSSProperties, getCurrentInstance, defineOptions } from 'vue';
+import { useProvide } from '../../utils/mixin';
+import { DEFAULT_DURATION, MAX_DURATION, MIN_DURATION, DEFAULT_ROOT_QUERY } from './constans';
+import propsData, { DEOP_DOWN_MENU_KEY, dropDownMenuEmits } from './props';
+import type { DropdownItem } from '../ste-dropdown-menu-item/type';
+import { type DropdownMenuItemProps } from '../ste-dropdown-menu-item/props';
+import utils from '../../utils/utils';
+import System from '../../utils/System.js';
+import useColor from '../../config/color';
+let color = useColor();
+
+const props = defineProps(propsData);
+const emits = defineEmits(dropDownMenuEmits);
+const componentName = `ste-dropdown-menu`;
+defineOptions({
+    name: componentName,
+    options: {
+        virtualHost: true,
+    },
+});
+
+const addPx = (val: string | number) => {
+    if (utils.isNumber(String(val))) {
+        return `${val}px`;
+    } else {
+        return 0;
+    }
+};
+
+const showMenu = ref(false);
+const menuRootQuery = ref<typeof DEFAULT_ROOT_QUERY>(DEFAULT_ROOT_QUERY);
+const contentHeight = ref(0);
+const menuTitle = ref<string | undefined>('');
+const hiddenContent = ref(false);
+
+let chooseItems: any[] = [];
+const instance = getCurrentInstance() as unknown as ComponentPublicInstance;
+
+const cmpRootClass = computed(() => {
+    let classArr = [props.direction, showMenu.value ? 'open' : 'close', props.type];
+    return classArr.join(' ');
+});
+
+const cmpRootStyle = computed(() => ({
+    '--duration': cmpDuration.value + 's',
+    '--active-color': props.activeColor ? props.activeColor : color.getColor().steThemeColor,
+    '--inactive-color': props.inactiveColor,
+    '--menu-z-index': props.zIndex,
+}));
+6;
+const cmpMenuPlaceholderStyle = computed(() => {
+    let style: CSSProperties = { height: 0 };
+
+    if (showMenu.value) {
+        if (props.direction == 'down') {
+            style.height = addPx(menuRootQuery.value.top + menuRootQuery.value.height);
+        } else {
+            let windowHeight = System.getWindowInfo().windowHeight;
+            style.height = addPx(windowHeight - menuRootQuery.value.bottom + menuRootQuery.value.height);
+        }
+    }
+
+    return style;
+});
+
+const cmpMenuContentStyle = computed(() => {
+    let style = {
+        height: addPx(contentHeight.value),
+        background: props.showMask ? 'rgba(0, 0, 0, 0.6)' : 'rgba(0, 0, 0, 0)',
+    } as CSSProperties;
+    if (props.direction == 'down') {
+        style.top = addPx(menuRootQuery.value.top + menuRootQuery.value.height);
+    } else {
+        style.top = 0;
+    }
+    return style;
+});
+
+const cmpDuration = computed(() => {
+    if (!utils.isNumber(String(props.duration))) {
+        return DEFAULT_DURATION;
+    }
+    if (Number(props.duration) > MAX_DURATION) {
+        return MAX_DURATION;
+    }
+    if (Number(props.duration) < MIN_DURATION) {
+        return MIN_DURATION;
+    }
+    return props.duration;
+});
+
+watch(
+    () => [props.modelValue, props.value],
+    ([modalVal, val]) => {
+        let v = val ? val : modalVal;
+        if (Array.isArray(v)) {
+            chooseItems = v;
+        } else {
+            v ? (chooseItems = [v]) : '';
+        }
+    },
+    { immediate: true }
+);
+
+let menuItems = ref<DropdownItem[]>([]);
+function updateItems() {
+    let childrens = internalChildren;
+    if (childrens.length !== menuItems.value.length) {
+        menuItems.value = childrens.map(e => e.props as DropdownMenuItemProps);
+        loadMenuTitle();
+    }
+}
+
+function loadMenuTitle() {
+    if (!props.title) {
+        let item = internalChildren.find(e => {
+            return chooseItems.find(v => v == e.props.value);
+        });
+        menuTitle.value = (item?.props as DropdownMenuItemProps).title;
+    } else {
+        menuTitle.value = props.title;
+    }
+}
+function touchmove(e: TouchEvent) {
+    // TODO nvue 取消冒泡
+    e.stopPropagation();
+}
+async function getContentHeight() {
+    let windowHeight = System.getWindowInfo().windowHeight;
+
+    const res = await utils.querySelector<false>('.ste-dropdown-menu-root', instance);
+    menuRootQuery.value = { height: res.height || 0, top: res.top || 0, bottom: res.bottom || 0, left: res.left || 0 };
+    contentHeight.value = props.direction == 'down' ? windowHeight - menuRootQuery.value.bottom : menuRootQuery.value.top;
+}
+async function handleMenuClick() {
+    if (!showMenu.value) {
+        await getContentHeight();
+        open();
+    } else {
+        close();
+    }
+}
+function open() {
+    showMenu.value = true;
+    hiddenContent.value = false;
+    emits('open');
+}
+function close() {
+    showMenu.value = false;
+    setTimeout(
+        () => {
+            hiddenContent.value = true;
+            contentHeight.value = 0;
+            menuRootQuery.value = DEFAULT_ROOT_QUERY;
+            emits('close');
+        },
+        Number(cmpDuration.value) * 1000
+    );
+}
+function choose(item: DropdownItem) {
+    let temp = chooseItems;
+    let index = temp.findIndex(e => e == item.value);
+    let max = props.max < 1 ? 1 : props.max;
+    if (index > -1) {
+        // 当选中项再次被选中时，做取消选中操作
+        temp.splice(index, 1);
+    } else {
+        if (chooseItems.length < max) {
+            temp.push(item.value);
+        } else {
+            temp.shift();
+            temp.push(item.value);
+        }
+    }
+
+    chooseItems = temp;
+    loadMenuTitle();
+    if (chooseItems.length == max) {
+        close();
+    }
+    emits('update:modelValue', chooseItems);
+    emits('change', chooseItems);
+    emits('item-choose', item);
+    triggerChildLoadStatus();
+}
+function handleMaskClick() {
+    if (props.isMaskClick) {
+        close();
+    }
+}
+function handleMenuConentClick() {}
+
+function triggerChildLoadStatus() {
+    internalChildren.forEach(e => {
+        (e.exposed as any).loadStatus();
+    });
+}
+
+const { internalChildren } = useProvide(DEOP_DOWN_MENU_KEY, 'ste-checkbox')({ props, chooseItems, cmpDuration, choose, updateItems });
+defineExpose({ close });
+</script>
+
+<template>
+    <view class="ste-dropdown-menu-root" :class="[cmpRootClass]" :style="[cmpRootStyle]" @touchmove.stop.prevent="touchmove" @wheel.stop.prevent>
+        <view class="dropdown-placeholder" :style="[cmpMenuPlaceholderStyle]" @click="close" @touchmove.stop.prevent="touchmove" @wheel.stop.prevent />
+        <view class="menu-box" @click="handleMenuClick" @touchmove.stop.prevent="touchmove" @wheel.stop.prevent>
+            <text class="title">{{ menuTitle || title }}</text>
+            <view class="menu-title-icon">
+                <ste-icon code="&#xe699;" size="16" color="#bbbbbb"></ste-icon>
+            </view>
+        </view>
+        <view :class="hiddenContent ? 'dropdown-content hidden' : 'dropdown-content'" :style="[cmpMenuContentStyle]" @click="handleMaskClick" @touchmove.stop.prevent="touchmove" @wheel.stop.prevent>
+            <view class="menu-item-content" @click.stop="handleMenuConentClick">
+                <slot></slot>
+            </view>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+@import './ste-dropdown-menu.scss';
+</style>

package/components/ste-dropdown-menu-item/props.ts

@@ -0,0 +1,17 @@
+import type { ExtractPropTypes } from 'vue'
+
+const dropdownMenuItemProps = {
+  value: { type: String, default: '' },
+  title: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  readonly: { type: Boolean, default: false },
+  max: { type: Number, default: 1 },
+}
+
+export type DropdownMenuItemProps = ExtractPropTypes<typeof dropdownMenuItemProps>
+
+export default dropdownMenuItemProps
+
+export const dropdownMenuItemEmits = {
+  click: (suspend: () => void, next: () => void, stop: () => void) => suspend instanceof Function && next instanceof Function && stop instanceof Function,
+}

package/components/ste-dropdown-menu-item/ste-dropdown-menu-item.scss

@@ -0,0 +1,61 @@
+.ste-dropdown-menu-item-root {
+    &.down {
+        border-top: solid 2rpx #f9f9f9;
+    }
+    &.up {
+        border-bottom: solid 2rpx #f9f9f9;
+    }
+    background-color: #ffffff;
+    padding: 24rpx;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--inactive-color);
+    .menu-item-icon {
+        display: none;
+    }
+
+    .text {
+        font-size: var(--font-size-28, 28rpx);
+    }
+
+    &.disabled {
+        color: #cccccc !important;
+    }
+
+    &.active {
+        color: var(--active-color);
+        .menu-item-icon {
+            display: inline-flex;
+            align-items: center;
+        }
+    }
+
+    &.round {
+        display: inline-flex;
+        border: none;
+        padding: 14rpx 10rpx;
+        border-radius: 48rpx;
+        border: 2rpx solid var(--active-color);
+        width: 194rpx;
+        white-space: nowrap;
+        margin-bottom: 20rpx;
+
+        .text {
+            width: 100%;
+            text-align: center;
+            color: var(--active-color);
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+
+        &.active {
+            background-color: var(--active-color);
+            .text {
+                color: #fff;
+            }
+        }
+    }
+}

package/components/ste-dropdown-menu-item/ste-dropdown-menu-item.vue

@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import { ref, computed, type ComputedRef, onMounted } from 'vue';
+import propsData, { dropdownMenuItemEmits } from './props';
+import { type DropDownMenuProps, DEOP_DOWN_MENU_KEY } from '../ste-dropdown-menu/props';
+import type { DropdownItem } from './type';
+import { useInject } from '../../utils/mixin';
+
+const props = defineProps(propsData);
+const emits = defineEmits(dropdownMenuItemEmits);
+const Parent = useInject<{ props: Required<DropDownMenuProps>; chooseItems: any[]; cmpDuration: ComputedRef; choose: (item: DropdownItem) => void; updateItems: () => void }>(DEOP_DOWN_MENU_KEY);
+const parent = Parent.parent;
+const parentProps = Parent.parent?.props as DropDownMenuProps;
+
+const status = ref(false); // 是否选中状态 true: 选中，false: 未选中
+
+const cmpRootClass = computed(() => {
+    let classArr = [parentProps.direction];
+    if (status.value) {
+        classArr.push('active');
+    }
+    if (props.readonly) {
+        classArr.push('readonly');
+    }
+    if (props.disabled) {
+        classArr.push('disabled');
+    }
+    classArr.push(parentProps.type);
+    return classArr.join(' ');
+});
+
+onMounted(() => {
+    parent?.updateItems();
+    loadStatus();
+    // this.parent.$on('item-choose', value => {
+    //     this.loadStatus();
+    // });
+});
+
+function loadStatus() {
+    if (parent?.chooseItems) {
+        status.value = !!parent.chooseItems.find(e => e == props.value);
+    }
+}
+
+let clickTask: Promise<any> | null = null;
+async function handleClick() {
+    if (!props.disabled && !props.readonly) {
+        if (clickTask) {
+            return;
+        }
+        let next = true;
+        clickTask = new Promise((resolve, reject) => {
+            emits(
+                'click',
+                () => (next = false),
+                () => resolve(null),
+                () => reject()
+            );
+        });
+        if (!next) {
+            await clickTask;
+        }
+        parent?.choose({ title: props.title, value: props.value });
+        setTimeout(() => {
+            clickTask = null;
+            loadStatus();
+        }, parent?.cmpDuration.value * 1000);
+    }
+}
+
+defineExpose({ loadStatus });
+</script>
+
+<template>
+    <view class="ste-dropdown-menu-item-root" :class="[cmpRootClass]" @click="handleClick">
+        <text class="text">{{ title }}</text>
+        <view class="menu-item-icon" v-if="parentProps.type == 'block'">
+            <ste-icon code="&#xe67a;" size="32"></ste-icon>
+        </view>
+    </view>
+</template>
+<style lang="scss" scoped>
+@import './ste-dropdown-menu-item.scss';
+</style>

package/components/ste-dropdown-menu-item/type.d.ts

@@ -0,0 +1,4 @@
+export interface DropdownItem {
+  title: string
+  value: string
+}

package/components/ste-icon/ATTRIBUTES.md

@@ -0,0 +1,19 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `code` | 图标名称 | `string` | - | - | - |
+| `color` | 图标颜色 | `string` | - | - | - |
+| `size` | 图标大小，单位rpx | `string / number` | `28` | - | - |
+| `bold` | 图标是否粗体 | `boolean` | `false` | - | - |
+| `marginLeft` | 左外边距，单位rpx | `string / number` | `0` | - | - |
+| `marginRight` | 右外边距，单位rpx | `string / number` | `0` | - | - |
+| `marginTop` | 上外边距，单位rpx | `string / number` | `0` | - | - |
+| `marginBottom` | 下外边距，单位rpx | `string / number` | `0` | - | - |
+| `fontFamily` | 字体名 | `string` | `` | - | - |
+| `inlineBlock` | 容器对齐方式 | `boolean` | `true` | - | - |
+
+
+#### Events
+| 事件名 | 说明  | 事件参数 | 支持版本 |
+| ----- | ----- | ------- | -------- |
+| `click` | 图标点击回调事件 | - | - |

package/components/ste-icon/README.md

@@ -0,0 +1,72 @@
+# Icon 图标
+
+基于字体的图标集，包含了大多数常见场景的图标
+
+---$
+
+## 代码演示
+
+### 基础用法
+
+通过 `code` 属性来指定需要使用的图标，Stellar 组件使用[iconfont 做图标库](https://at.alicdn.com/t/c/font_4041637_pivqtx3f1mq.json?spm=a313x.manage_type_myprojects.i1.49.f7ba3a81fFvJ6W&file=font_4041637_pivqtx3f1mq.json)，
+可以直接传入对应的编码来使用
+
+```html
+<ste-icon code="&#xe653;"></ste-icon>
+```
+
+### 图标颜色
+
+通过 `color` 属性来设置图标的颜色
+
+```html
+<ste-icon code="&#xe684;" color="#1989fa" :size="60" marginRight="30"></ste-icon>
+<ste-icon code="&#xe684;" color="#ee0a24" :size="60"></ste-icon>
+```
+
+### 图标大小
+
+通过 `size` 属性来设置图标的尺寸大小，单位为 rpx，默认`28`
+
+```html
+<ste-icon code="&#xe671;" marginRight="30"></ste-icon>
+<ste-icon code="&#xe671;" marginRight="30" :size="50"></ste-icon>
+<ste-icon code="&#xe671;" marginRight="30" :size="70"></ste-icon>
+```
+
+### 图标是否粗体
+
+通过 `bold` 属性来设置图标是否粗体，默认`false`
+
+```html
+<ste-icon code="&#xe673;" marginRight="30"></ste-icon>
+<ste-icon code="&#xe673;" bold></ste-icon>
+```
+
+### 自定义图标
+
+如果需要在现有 `Icon` 的基础上使用更多图标，可以引入第三方 `iconfont` 对应的字体文件和 `CSS` 文件，之后就可以在 `Icon` 组件中直接使用。
+
+```css
+/* 引入第三方或自定义的字体图标样式 */
+@font-face {
+    font-family: 'iconfont'; /* Project id 2344394 */
+    src: url('//at.alicdn.com/t/c/font_2344394_nltp3ggc4q.woff2?t=1709779088427') format('woff2');
+}
+```
+
+```html
+<!-- 通过 class-prefix 指定类名为 font-family属性的值：如iconfont -->
+<ste-icon fontFamily="iconfont" code="&#xe6cc;" />
+```
+
+---$
+
+### API
+
+<!-- props -->
+
+---$
+{{zyy}}
+
+{{qinpengfei}}

package/components/ste-icon/config.json

@@ -0,0 +1,5 @@
+{
+  "group": "基础组件",
+  "title": "Icon 图标",
+  "icon": "https://image.whzb.com/chain/StellarUI/组件图标/icon.png"
+}

package/components/ste-icon/iconfont.css

@@ -0,0 +1,22 @@
+/* #ifdef APP */
+/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
+@font-face {
+    font-family: 'ste-iconfont-1709689042473';
+    /* Project id 4457057 */
+    src: url('https://at.alicdn.com/t/c/font_4457057_378iyzac6bn.woff2?t=1727661432800') format('woff2'),
+        url('https://at.alicdn.com/t/c/font_4457057_378iyzac6bn.woff?t=1727661432800') format('woff'),
+        url('https://at.alicdn.com/t/c/font_4457057_378iyzac6bn.ttf?t=1727661432800') format('truetype');
+}
+
+/* #endif */
+/* #ifndef APP */
+/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
+@font-face {
+    font-family: 'ste-iconfont-1709689042473';
+    /* Project id 4457057 */
+    src: url('//at.alicdn.com/t/c/font_4457057_378iyzac6bn.woff2?t=1727661432800') format('woff2'),
+        url('//at.alicdn.com/t/c/font_4457057_378iyzac6bn.woff?t=1727661432800') format('woff'),
+        url('//at.alicdn.com/t/c/font_4457057_378iyzac6bn.ttf?t=1727661432800') format('truetype');
+}
+
+/* #endif */

package/components/ste-icon/props.ts

@@ -0,0 +1,14 @@
+export default {
+  code: { type: String, default: '' },
+  size: { type: [String, Number], default: 28 },
+  scale: { type: Number, default: 1 },
+  color: { type: String, default: '' },
+  bold: { type: Boolean, default: false },
+  marginLeft: { type: [String, Number], default: 0 },
+  marginRight: { type: [String, Number], default: 0 },
+  marginTop: { type: [String, Number], default: 0 },
+  marginBottom: { type: [String, Number], default: 0 },
+  fontFamily: { type: String, default: '' },
+  showBorder: { type: Boolean, default: false },
+  inlineBlock: { type: Boolean, default: true },
+}

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

@@ -0,0 +1,71 @@
+{
+    "name": "ste-icon",
+    "description": "图标组件 基于字体的图标集，包含了大多数常见场景的图标",
+    "example": "<ste-icon></ste-icon>",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=icon",
+    "attributes": [
+        {
+            "name": "code",
+            "description": "图标名称",
+            "type": "string"
+        },
+        {
+            "name": "color",
+            "description": "图标颜色",
+            "type": "string"
+        },
+        {
+            "name": "size",
+            "description": "图标大小，单位rpx",
+            "type": "string | number",
+            "default": 28
+        },
+        {
+            "name": "bold",
+            "description": "图标是否粗体",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "marginLeft",
+            "description": "左外边距，单位rpx",
+            "type": "string | number",
+            "default": 0
+        },
+        {
+            "name": "marginRight",
+            "description": "右外边距，单位rpx",
+            "type": "string | number",
+            "default": 0
+        },
+        {
+            "name": "marginTop",
+            "description": "上外边距，单位rpx",
+            "type": "string | number",
+            "default": 0
+        },
+        {
+            "name": "marginBottom",
+            "description": "下外边距，单位rpx",
+            "type": "string | number",
+            "default": 0
+        },
+        {
+            "name": "fontFamily",
+            "description": "字体名",
+            "type": "string",
+            "default": ""
+        },
+        {
+            "name": "inlineBlock",
+            "description": "容器对齐方式",
+            "type": "boolean",
+            "default": true
+        },
+        {
+            "name": "[event]click",
+            "description": "图标点击回调事件",
+            "type": "() => void"
+        }
+    ]
+}

package/components/ste-icon/ste-icon.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed, defineOptions } from 'vue';
+import propsData from './props';
+import utils from '../../utils/utils';
+
+const componentName = `ste-icon`;
+
+defineOptions({
+    name: componentName,
+    options: {
+        virtualHost: true,
+    },
+});
+
+const props = defineProps(propsData);
+const emits = defineEmits<{
+    (e: 'click', event?: Event): void;
+}>();
+
+let defaultFontFamily = 'ste-iconfont-1709689042473';
+
+const cmpCode = computed(() => {
+    // unicode编码转字符
+    if (!props.code) return;
+    if (/[a-zA-Z]/.test(props.code)) {
+        return String.fromCharCode(props.code.replace('&#', '0').replace(';', '') as any);
+    } else {
+        return props.code;
+    }
+});
+
+const cmpCssVar = computed(() => {
+    return {
+        '--border': props.showBorder ? '1px' : '0px',
+        '--color': props.color,
+        '--size': `var(--font-size-${props.size},${utils.formatPx(props.size)})`,
+        '--weight': props.bold ? 'bold' : 'normal',
+        '--margin-left': utils.formatPx(props.marginLeft),
+        '--margin-right': utils.formatPx(props.marginRight),
+        '--margin-top': utils.formatPx(props.marginTop),
+        '--margin-bottom': utils.formatPx(props.marginBottom),
+        '--font-family': props.fontFamily ? props.fontFamily : defaultFontFamily,
+        '--display': props.inlineBlock ? 'inline-block' : 'inline-flex',
+    };
+});
+
+function handleClick(event: any) {
+    emits('click', event);
+}
+</script>
+
+<template>
+    <view class="ste-icon-root" :style="[cmpCssVar]" @click="handleClick">{{ cmpCode }}</view>
+</template>
+
+<style lang="scss" scoped>
+@import './iconfont.css';
+
+.ste-icon-root {
+    display: var(--display);
+    justify-content: center;
+    align-items: center;
+    vertical-align: baseline;
+    border-width: var(--border);
+    border-color: #bbb;
+    border-style: solid;
+
+    margin-left: var(--margin-left) !important;
+    margin-right: var(--margin-right) !important;
+    transform: translateY(calc(var(--margin-bottom) - var(--margin-top))) !important;
+
+    // height: calc(var(--size)) !important;
+    width: calc(var(--size)) !important;
+    line-height: calc(var(--size) - var(--border) * 2) !important;
+    font-family: var(--font-family) !important;
+    font-size: calc(var(--size) - var(--border) * 2) !important;
+    color: var(--color);
+    font-weight: var(--weight) !important;
+}
+</style>