@ebiz/designer-components 0.0.18-tj.1

package/src/components/TdesignSelect.vue

@@ -0,0 +1,445 @@
+<template>
+    <t-select 
+        :autoWidth="autoWidth"
+        :borderless="borderless"
+        :clearable="clearable"
+        :collapsedItems="collapsedItems"
+        :creatable="creatable"
+        :disabled="disabled"
+        :empty="empty"
+        :filter="filter"
+        :filterable="filterable"
+        :keys="keys"
+        :label="label"
+        :loading="loading"
+        :loadingText="loadingText"
+        :max="max"
+        :minCollapsedNum="minCollapsedNum"
+        :multiple="multiple"
+        :options="options"
+        :placeholder="placeholder"
+        :popupProps="popupProps"
+        :popupVisible="popupVisible"
+        :prefixIcon="prefixIcon"
+        :readonly="readonly"
+        :reserveKeyword="reserveKeyword"
+        :scroll="scroll"
+        :selectInputProps="selectInputProps"
+        :showArrow="showArrow"
+        :size="size"
+        :status="status"
+        :tagInputProps="tagInputProps"
+        :tagProps="tagProps"
+        :tips="tips"
+        :valueDisplay="valueDisplay"
+        :valueType="valueType"
+        :onPaste="onPaste"
+        v-model="selectedValue"
+        @blur="handleBlur"
+        @change="handleChange"
+        @clear="handleClear"
+        @create="handleCreate"
+        @dropdown-visible-change="handleDropdownVisibleChange"
+        @enter="handleEnter"
+        @focus="handleFocus"
+        @keydown="handleKeydown"
+        @mouseenter="handleMouseenter"
+        @mouseleave="handleMouseleave"
+        @paste="handlePaste"
+        @popup-visible-change="handlePopupVisibleChange"
+        @remove="handleRemove"
+        @scroll="handleScroll"
+        @search="handleSearch"
+    >
+        <!-- 选项插槽 -->
+        <template v-if="$slots.options" #options>
+            <slot name="options"></slot>
+        </template>
+        
+        <!-- 前缀图标插槽 -->
+        <template v-if="$slots.prefixIcon" #prefixIcon>
+            <slot name="prefixIcon"></slot>
+        </template>
+        
+        <!-- 后缀图标插槽 -->
+        <template v-if="$slots.suffixIcon" #suffixIcon>
+            <slot name="suffixIcon"></slot>
+        </template>
+        
+        <!-- 后缀内容插槽 -->
+        <template v-if="$slots.suffix" #suffix>
+            <slot name="suffix"></slot>
+        </template>
+        
+        <!-- 空数据插槽 -->
+        <template v-if="$slots.empty" #empty>
+            <slot name="empty"></slot>
+        </template>
+        
+        <!-- 选项显示插槽 -->
+        <template v-if="$slots.valueDisplay" #valueDisplay>
+            <slot name="valueDisplay"></slot>
+        </template>
+        
+        <!-- 面板底部内容插槽 -->
+        <template v-if="$slots.panelBottomContent" #panelBottomContent>
+            <slot name="panelBottomContent"></slot>
+        </template>
+        
+        <!-- 面板顶部内容插槽 -->
+        <template v-if="$slots.panelTopContent" #panelTopContent>
+            <slot name="panelTopContent"></slot>
+        </template>
+        
+        <!-- 选项标签插槽 -->
+        <template v-if="$slots.tag" #tag>
+            <slot name="tag"></slot>
+        </template>
+        
+        <!-- 加载中插槽 -->
+        <template v-if="$slots.loadingText" #loadingText>
+            <slot name="loadingText"></slot>
+        </template>
+        
+        <!-- 折叠项插槽 -->
+        <template v-if="$slots.collapsedItems" #collapsedItems>
+            <slot name="collapsedItems"></slot>
+        </template>
+
+        <!-- 选择框自定义首部内容插槽 -->
+        <template v-if="$slots.header" #header>
+            <slot name="header"></slot>
+        </template>
+
+        <!-- 选择框自定义底部内容插槽 -->
+        <template v-if="$slots.footer" #footer>
+            <slot name="footer"></slot>
+        </template>
+
+        <!-- 输入框前置内容插槽 -->
+        <template v-if="$slots.prepend" #prepend>
+            <slot name="prepend"></slot>
+        </template>
+
+        <!-- 输入框后置内容插槽 -->
+        <template v-if="$slots.append" #append>
+            <slot name="append"></slot>
+        </template>
+
+        <!-- 选项内容插槽 -->
+        <template v-if="$slots.default" #default>
+            <slot></slot>
+        </template>
+
+        <!-- 选项分组标题插槽 -->
+        <template v-if="$slots.optionGroup" #optionGroup>
+            <slot name="optionGroup"></slot>
+        </template>
+    </t-select>
+</template>
+
+<script>
+export default {
+    name: "EbizTdesignSelect"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+import { Select as TSelect } from 'tdesign-vue-next';
+
+const props = defineProps({
+    // 选择器的值
+    modelValue: {
+        type: [String, Number, Object, Array],
+        default: undefined
+    },
+    // 宽度随内容自适应
+    autoWidth: {
+        type: Boolean,
+        default: false
+    },
+    // 无边框模式
+    borderless: {
+        type: Boolean,
+        default: false
+    },
+    // 是否可以清空选项
+    clearable: {
+        type: Boolean,
+        default: false
+    },
+    // 用于控制多选数量超出时，折叠选项的内容
+    collapsedItems: {
+        type: [Function, Boolean],
+        default: undefined
+    },
+    // 是否允许用户创建新条目
+    creatable: {
+        type: Boolean,
+        default: false
+    },
+    // 是否禁用选择器
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    // 当下拉列表为空时显示的内容
+    empty: {
+        type: String,
+        default: undefined
+    },
+    // 自定义过滤方法
+    filter: {
+        type: Function,
+        default: undefined
+    },
+    // 是否可搜索
+    filterable: {
+        type: Boolean,
+        default: false
+    },
+    // 用来定义选项中的字段别名
+    keys: {
+        type: Object,
+        default: () => ({})
+    },
+    // 左侧文本
+    label: {
+        type: [String, Function],
+        default: undefined
+    },
+    // 是否为加载状态
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    // 远程加载时显示的文字
+    loadingText: {
+        type: String,
+        default: undefined
+    },
+    // 用于控制多选数量，值为 0 则不限制
+    max: {
+        type: Number,
+        default: 0
+    },
+    // 最小折叠数量，用于多选情况下折叠选中项
+    minCollapsedNum: {
+        type: Number,
+        default: 0
+    },
+    // 是否允许多选
+    multiple: {
+        type: Boolean,
+        default: false
+    },
+    // 数据化配置选项内容
+    options: {
+        type: Array,
+        default: () => []
+    },
+    // 占位符
+    placeholder: {
+        type: String,
+        default: undefined
+    },
+    // 弹出层的定位方式，同 Popup 组件
+    popupProps: {
+        type: Object,
+        default: () => ({})
+    },
+    // 是否显示下拉框
+    popupVisible: {
+        type: Boolean,
+        default: undefined
+    },
+    // 前缀图标
+    prefixIcon: {
+        type: [Function, String],
+        default: undefined
+    },
+    // 只读状态
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    // 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词
+    reserveKeyword: {
+        type: Boolean,
+        default: false
+    },
+    // 懒加载和虚拟滚动配置
+    scroll: {
+        type: Object,
+        default: () => ({})
+    },
+    // 透传 SelectInput 筛选器输入框组件的全部属性
+    selectInputProps: {
+        type: Object,
+        default: () => ({})
+    },
+    // 是否显示右侧箭头
+    showArrow: {
+        type: Boolean,
+        default: true
+    },
+    // 组件尺寸
+    size: {
+        type: String,
+        default: 'medium',
+        validator: (val) => ['small', 'medium', 'large'].includes(val)
+    },
+    // 输入框状态
+    status: {
+        type: String,
+        default: undefined,
+        validator: (val) => ['default', 'success', 'warning', 'error'].includes(val)
+    },
+    // 后置图标前的后置内容
+    suffix: {
+        type: String,
+        default: undefined
+    },
+    // 后置图标
+    suffixIcon: {
+        type: [Function, String],
+        default: undefined
+    },
+    // 透传 TagInput 标签输入框组件的全部属性
+    tagInputProps: {
+        type: Object,
+        default: () => ({})
+    },
+    // 透传 Tag 标签组件的全部属性
+    tagProps: {
+        type: Object,
+        default: () => ({})
+    },
+    // 输入框下方提示文本，会根据不同的 status 呈现不同的样式
+    tips: {
+        type: String,
+        default: ''
+    },
+    // 自定义选中项呈现方式
+    valueDisplay: {
+        type: Function,
+        default: undefined
+    },
+    // 用于控制选中值的类型
+    valueType: {
+        type: String,
+        default: undefined,
+        validator: (val) => ['value', 'object'].includes(val)
+    },
+    // 粘贴事件回调函数，参数为粘贴板内容
+    onPaste: {
+        type: Function,
+        default: undefined
+    }
+});
+
+// 选择器的值
+const selectedValue = computed({
+    get: () => props.modelValue,
+    set: (value) => emit('update:modelValue', value)
+});
+
+const emit = defineEmits([
+    'update:modelValue',
+    'blur',
+    'change',
+    'clear',
+    'create',
+    'dropdown-visible-change',
+    'enter',
+    'focus',
+    'keydown',
+    'mouseenter',
+    'mouseleave',
+    'paste',
+    'popup-visible-change',
+    'remove',
+    'scroll',
+    'search'
+]);
+
+// 失去焦点时触发
+const handleBlur = (value, context) => {
+    emit('blur', value, context);
+};
+
+// 选中值变化时触发
+const handleChange = (value, context) => {
+    emit('change', value, context);
+};
+
+// 点击清除按钮时触发
+const handleClear = (context) => {
+    emit('clear', context);
+};
+
+// 当新增选项时触发
+const handleCreate = (value, context) => {
+    emit('create', value, context);
+};
+
+// 下拉框显示状态变化时触发
+const handleDropdownVisibleChange = (visible) => {
+    emit('dropdown-visible-change', visible);
+};
+
+// 按下回车键时触发
+const handleEnter = (context) => {
+    emit('enter', context);
+};
+
+// 获得焦点时触发
+const handleFocus = (context) => {
+    emit('focus', context);
+};
+
+// 键盘按下时触发
+const handleKeydown = (value, context) => {
+    emit('keydown', value, context);
+};
+
+// 鼠标进入时触发
+const handleMouseenter = (context) => {
+    emit('mouseenter', context);
+};
+
+// 鼠标离开时触发
+const handleMouseleave = (context) => {
+    emit('mouseleave', context);
+};
+
+// 粘贴事件触发
+const handlePaste = (context) => {
+    emit('paste', context);
+};
+
+// 下拉框显示或隐藏时触发
+const handlePopupVisibleChange = (visible, context) => {
+    emit('popup-visible-change', visible, context);
+};
+
+// 多选模式下移除tag时触发
+const handleRemove = (options) => {
+    emit('remove', options);
+};
+
+// 滚动事件触发
+const handleScroll = ({ scrollTop, scrollBottom }) => {
+    emit('scroll', { scrollTop, scrollBottom });
+};
+
+// 搜索时触发
+const handleSearch = (filterWords) => {
+    emit('search', filterWords);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/TdesignTag.vue

@@ -0,0 +1,118 @@
+<template>
+    <t-tag
+        :theme="theme"
+        :size="size"
+        :variant="variant"
+        :maxWidth="maxWidth"
+        :icon="icon"
+        :content="content"
+        :closable="closable"
+        :checkable="checkable"
+        :checked="checked"
+        :disabled="disabled"
+        @click="handleClick"
+        @close="handleClose"
+        @change="handleChange"
+    >
+        <!-- 图标插槽 -->
+        <template v-if="$slots.icon" #icon>
+            <slot name="icon"></slot>
+        </template>
+        
+        <!-- 内容插槽 -->
+        <template v-if="$slots.content" #content>
+            <slot name="content"></slot>
+        </template>
+        
+        <!-- 默认插槽 -->
+        <slot>{{ content }}</slot>
+    </t-tag>
+</template>
+
+<script>
+export default {
+    name: "EbizTag"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Tag as TTag } from 'tdesign-vue-next';
+
+defineProps({
+    // 标签主题
+    theme: {
+        type: String,
+        default: 'default',
+        validator: (val) => ['default', 'primary', 'warning', 'danger', 'success'].includes(val)
+    },
+    // 标签尺寸
+    size: {
+        type: String,
+        default: 'medium',
+        validator: (val) => ['small', 'medium', 'large'].includes(val)
+    },
+    // 标签形式
+    variant: {
+        type: String,
+        default: 'dark',
+        validator: (val) => ['dark', 'light', 'outline', 'light-outline'].includes(val)
+    },
+    // 最大宽度
+    maxWidth: {
+        type: [String, Number],
+        default: undefined
+    },
+    // 图标
+    icon: {
+        type: [String, Function],
+        default: ''
+    },
+    // 标签内容
+    content: {
+        type: String,
+        default: ''
+    },
+    // 是否可关闭
+    closable: {
+        type: Boolean,
+        default: false
+    },
+    // 是否可选中
+    checkable: {
+        type: Boolean,
+        default: false
+    },
+    // 是否选中
+    checked: {
+        type: Boolean,
+        default: false
+    },
+    // 是否禁用
+    disabled: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits(['click', 'close', 'change']);
+
+// 点击事件
+const handleClick = (e) => {
+    emit('click', e);
+};
+
+// 关闭事件
+const handleClose = (e) => {
+    emit('close', e);
+};
+
+// 选中状态变化事件
+const handleChange = (checked, context) => {
+    emit('change', checked, context);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/charts/chart.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import core from './core';
+import Register from './register';
+import { isFunction } from './util/type';
+
+// 图表核心对象，通过 Register 全量引入图表给 HuiCharts 渲染，打包容量较大
+export default class HuiCharts extends core {
+  constructor() {
+    super();
+    // 图表名称
+    this.chartName = null;
+  }
+
+  /**
+   * 传入配置项
+   * @param {图表类型, 当为string型时需要转换为对应图表class} chart 
+   * @param {配置项} iChartOption 
+   * @param {三方插件} plugins 
+   * @param {是否初始渲染} isInit 
+   */
+  setSimpleOption(chart, iChartOption, plugins = {}, isInit = true) {
+    let ChartClass = null; 
+    if(isFunction(chart)){
+      this.chartName = chart.name;
+      ChartClass = chart;
+    } else {
+      this.chartName = chart;
+      ChartClass = this.getChartClass(chart);
+    }
+    super.setSimpleOption(ChartClass, iChartOption, plugins, isInit);
+  }
+
+  // 获取图表类
+  getChartClass(name) {
+    return Register.getRegisteredComp(name);
+  }
+}

package/src/components/charts/components/AssembleBubbleChart/BaseOption.js

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+const BaseOption = {
+  dataset: [
+    {
+      source: [],
+    },
+  ],
+  // 图例颜色
+  color: [],
+  legend: {
+    data: [],
+    icon: 'circle',
+    left: 'center',
+    bottom: 0,
+    textStyle: {},
+  },
+  hoverLayerThreshold: Infinity,
+  series: [
+    {
+      type: 'custom',
+      colorBy: 'data',
+      renderItem: "",
+      name: 'custom',
+      coordinateSystem: 'none',
+      encode: {
+        tooltip: 'value',
+        itemName: 'id',
+      },
+    },
+  ],
+};
+
+const CHARTTYPE = {
+  NON_NESTED: 'non-nested', // 非嵌套式
+  NON_NESTED_AGGREGATE: 'non-nested-aggregate', // 非嵌套聚合式
+  NESTED: 'nested', // 嵌套式
+};
+
+export default BaseOption;
+export { CHARTTYPE };

package/src/components/charts/components/AssembleBubbleChart/chartToken.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import Token from '../../feature/token';
+import {CHART_TYPE} from '../../util/constants'
+
+const chartToken = Token.getTokenByName(CHART_TYPE.ASSEMBLE_BUBBLE)
+
+export default chartToken;