@cloudbase/weda-ui 0.2.15 → 1.0.21

package/src/mp/components/calendar/index.wxss

@@ -0,0 +1,178 @@
+@import '../../style/weda-ui.wxss';
+
+/* components/calendar.wxss */
+.weda-calendar {
+  background: rgb(255, 255, 255);
+  width: 100%;
+  opacity: 0.9;
+}
+
+.weda-calendar .weda-calendar__control {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 32rpx 32rpx 0;
+  position: relative;
+  text-align: center;
+}
+
+.weda-calendar .weda-calendar__current-date {
+  font-weight: bold;
+  font-size: 28rpx;
+  line-height: 44rpx;
+}
+
+.weda-calendar .weda-calendar__prevMonth,
+.weda-calendar .weda-calendar__nextMonth {
+  position: absolute;
+  width: 32rpx;
+  height: 32rpx;
+  vertical-align: middle;
+  top: 34rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.weda-calendar .weda-calendar__prevMonth .weda-calendar__prevMonth-icon,
+.weda-calendar .weda-calendar__nextMonth .weda-calendar__nextMonth-icon {
+  width: 100%;
+  height: 100%;
+}
+
+.weda-calendar .weda-calendar__prevMonth {
+  transform: rotate(180deg);
+  left: 32rpx;
+}
+
+.weda-calendar .weda-calendar__nextMonth {
+  right: 32rpx;
+}
+
+.weda-calendar .weda-calendar__panel {
+  height: 612rpx;
+  padding: 40rpx 32rpx 32rpx 32rpx;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.weda-calendar .weda-calendar__table {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-self: start;
+  align-items: flex-start;
+}
+
+.weda-calendar .weda-calendar__table-head {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.weda-calendar .weda-calendar__table-head-row {
+  width: 100%;
+  padding-bottom: 0;
+  display: flex;
+}
+
+.weda-calendar .weda-calendar__table-head-cell {
+  flex: 1 1 0%;
+  display: flex;
+  color: rgba(0, 0, 0, 0.6);
+  position: relative;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  font-size: 24rpx;
+  line-height: 40rpx;
+  box-sizing: border-box;
+}
+
+.weda-calendar .weda-calendar__table-body {
+  display: flex;
+  flex-direction: column;
+  justify-self: center;
+  align-items: center;
+  flex: 1 1 0%;
+  width: 100%;
+}
+
+.weda-calendar .weda-calendar__table-body-row {
+  width: 100%;
+  display: flex;
+  flex: 1 1 0%;
+}
+
+.weda-calendar .weda-calendar__table-body-cell {
+  flex: 1 1 0%;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  font-size: 24rpx;
+  line-height: 40rpx;
+  box-sizing: border-box;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+
+.weda-calendar .weda-calendar__table-body-cell-value {
+  font-size: 28rpx;
+  text-align: center;
+  border-radius: 50%;
+  width: 80rpx;
+  line-height: 80rpx;
+  box-sizing: border-box;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.9);
+  position: relative;
+}
+
+.weda-calendar .weda-calendar__table-body-cell.is-disabled,
+.weda-calendar .weda-calendar__table-body-cell.is-invalid {
+  cursor: not-allowed;
+}
+
+.weda-calendar
+  .weda-calendar__table-body-cell.is-disabled
+  .weda-calendar__table-body-cell-value {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.weda-calendar
+  .weda-calendar__table-body-cell.is-invalid
+  .weda-calendar__table-body-cell-value {
+  color: #c5c5c5;
+}
+
+.weda-calendar
+  .weda-calendar__table-body-cell.is-now
+  .weda-calendar__table-body-cell-value {
+  color: #fff;
+}
+
+.weda-calendar
+  .weda-calendar__table-body-cell.is-now
+  .weda-calendar__table-body-cell-bg {
+  position: absolute;
+  width: 48rpx;
+  height: 48rpx;
+  background: #0052d9;
+  border-radius: 100%;
+  left: calc(50% - 24rpx);
+  top: calc(50% - 24rpx);
+  z-index: -1;
+}
+
+.weda-calendar .weda-calendar__table-body-cell-marked {
+  position: absolute;
+  border-radius: 50%;
+  left: 50%;
+  transform: translate(-50%);
+  bottom: -20rpx;
+  width: 8rpx;
+  height: 8rpx;
+  top: calc(50% + 28rpx);
+}

package/src/mp/components/carousel/index.js

@@ -0,0 +1,88 @@
+Component({
+  options: {
+    virtualHost: true,
+  },
+  properties: {
+    id: {
+      type: String,
+      value: '',
+    },
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    indicatorDots: {
+      value: true,
+      type: Boolean,
+    },
+    autoplay: {
+      value: true,
+      type: Boolean,
+    },
+    current: {
+      value: 0,
+      type: Number,
+    },
+    interval: {
+      value: 5000,
+      type: Number,
+    },
+    duration: {
+      value: 500,
+      type: Number,
+    },
+    circular: {
+      value: true,
+      type: Boolean,
+    },
+    vertical: {
+      value: false,
+      type: Boolean,
+    },
+    indicatorColor: {
+      type: String,
+      value: 'rgba(200, 200, 200, 0.9)',
+    },
+    indicatorActiveColor: {
+      type: String,
+      value: 'rgba(0, 0, 0, 0.9)',
+    },
+    images: {
+      type: Array,
+      value: [],
+    },
+    insideUrl: {
+      type: String,
+      value: '',
+    },
+  },
+  methods: {
+    changeCurrent(event) {
+      const { current } = event.detail;
+      this.triggerEvent('change', { current });
+    },
+    tapImg: (event) => {
+      const { tapmode, insideurl, params } = event.currentTarget.dataset;
+      if (tapmode === 'inside' && insideurl) {
+        let paramObj =
+          params &&
+          params.length > 0 &&
+          params.reduce((p, x) => {
+            p[x.key] = x.value;
+            return p;
+          }, {});
+        let { app } = getApp();
+        app.navigateTo({
+          pageId: insideurl,
+          packageName: '',
+          mode: 'weDa',
+          params: paramObj,
+        });
+      }
+    },
+  },
+});

package/src/mp/components/carousel/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "Img":"../image"
+  }
+}

package/src/mp/components/carousel/index.wxml

@@ -0,0 +1,6 @@
+<!--components/carousel/index.wxml-->
+<swiper id="{{id}}" class="weda-ui {{className}}" style="{{style}}" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" current="{{current}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" vertical="{{vertical}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{indicatorActiveColor}}" bindchange="changeCurrent">
+  <swiper-item class="carousle-swiper-item" bindtap="tapImg" wx:for="{{images}}" wx:key="index" data-tapMode="{{item.tapMode}}" data-insideUrl="{{item.insideUrl}}" data-params="{{item.params}}" >
+    <Img class="carousle-image" src="{{item.image}}" fit="{{item.fit}}" style="{{'height:'+item.height+';'+'width:'+item.width}}" />
+  </swiper-item>
+</swiper>

package/src/mp/components/chart/bar/index.js

@@ -0,0 +1,258 @@
+import * as echarts from '../common/lib/echarts.min';
+import EchartBar from '../common/core/eChartBar';
+Component({
+  options: {
+    virtualHost: true,
+    multipleSlots: true,
+  },
+  properties: {
+    id: {
+      type: String,
+      value: '',
+    },
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    directionType: {
+      // 柱状图方向
+      type: String,
+      value: 'lengthways',
+    },
+    isPile: {
+      // 柱状图方向
+      type: Boolean,
+      value: false,
+    },
+    title: {
+      // 图表标题
+      type: String,
+    },
+    isTitle: {
+      // 是否显示标题
+      type: Boolean,
+      value: false,
+    },
+    titleLocation: {
+      type: String,
+      value: 'top',
+    },
+    dataSource: {
+      // 数据源
+      type: Object,
+    },
+    filterData: {
+      // 数据筛选
+      type: Array,
+      value: [],
+    },
+    setColor: {
+      // 设置颜色
+      type: Array,
+      value: [],
+    },
+    xField: {
+      // x轴字段选择
+      type: Object,
+      value: {
+        format: '',
+        type: '', // 数据源字段 类型
+        title: '', // 字段名中文
+        name: '', // 字段名英文
+      },
+    },
+    xStatistics: {
+      // x轴统计维度
+      type: String,
+      value: '', // 统计纬度, 只有选择时间类型才有，y 年，m月，d 日，w周，h时，min 分，s秒
+    },
+    groupKey: {
+      // x轴字段选择
+      type: Object,
+      value: {
+        format: '',
+        type: '', // 数据源字段 类型
+        title: '', // 字段名中文
+        name: '', // 字段名英文
+      },
+    },
+    groupKeyTimeSpan: {
+      // x轴统计维度
+      type: String,
+      value: '', // 统计纬度, 只有选择时间类型才有，y 年，m月，d 日，w周，h时，min 分，s秒
+    },
+    xIsCountEmpty: {
+      // x轴 是否统计空值
+      type: Boolean,
+      value: false,
+    },
+    yField: {
+      // Y轴字段，分组字段，是否分组
+      type: Object,
+      value: {
+        numValue: [{ key: '', operationType: '' }],
+        groupKey: '',
+      },
+    },
+    isLegend: {
+      // 是否显示图例
+      type: Boolean,
+      value: false,
+    },
+    legend: {
+      // 图例
+      type: String,
+      value: 'bottom', //  上top，下 bottom
+    },
+
+    // 高级属性
+    isXaxisName: {
+      // 是否显示坐标轴名称
+      type: Boolean,
+      value: true,
+    },
+    xAxisName: {
+      // 是否显示坐标轴名称
+      type: String,
+      value: '',
+    },
+    isXaxisAxisLabelShow: {
+      // 是否显示标签
+      type: Boolean,
+      value: true,
+    },
+    isXaxisAxisTickShow: {
+      // 显示X轴刻度线
+      type: Boolean,
+      value: true,
+    },
+    isXaxisAxisLabelRotate: {
+      // 文字自动倾斜
+      type: Boolean,
+      value: false,
+    },
+    isYAxisShow: {
+      // 是否显示 Y 轴刻度线
+      type: Boolean,
+      value: true,
+    },
+    isYAxisName: {
+      // 是否显示 Y坐标轴名称
+      type: Boolean,
+      value: true,
+    },
+    isYAxisSplitlineLinestyleWidth: {
+      // 是否显示网格线 ,yAxis.splitLine.lineStyle.width设置为0
+      type: Boolean,
+      value: true,
+    },
+    yAxisSplitlineLinestyleType: {
+      // 网格线线条类型 solid,dashed,dotted
+      type: String,
+      value: 'dashed',
+    },
+    yAxisName: {
+      // Y坐标轴名称  显示名称后需要设置居中，轴线距离属性 yAxis.nameLocation='middle' yAxis.nameGap =20
+      type: String,
+      value: '',
+    },
+    yAxisMin: {
+      // Y轴刻度最小值
+      type: Number,
+      value: 0,
+    },
+    yAxisMax: {
+      // Y轴刻度最大值, 切记如果为0时，则不设置
+      type: Number,
+      value: 0,
+    },
+    isSeriesShowSymbol: {
+      // 是否显示数据标签 开启后 属性 series.label.show 要同时设置为true
+      type: Boolean,
+      value: true,
+    },
+    isUnit: {
+      // 显示单位
+      type: Boolean,
+      value: false,
+    },
+    unit: {
+      // 数字显示的单位 百分比，千分比，千，万，百万，亿，十亿
+      type: String,
+      value: '%',
+    },
+    decimalDigits: {
+      // 小数位数
+      type: Number,
+      value: 0,
+    },
+    suffix: {
+      // 后缀
+      type: String,
+      value: '',
+    },
+
+  },
+  data: {
+    ec: {},
+    canvas_id: {
+      type: String,
+      value: `canvas_bar_${Date.now()}_${Math.random() * 100}`,
+    },
+  },
+  lifetimes: {
+    attached() {
+      // 在组件实例进入页面节点树时执行
+      this.initData();
+    },
+    detached() {
+      // 在组件实例被从页面节点树移除时执行
+    },
+  },
+  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
+  attached() {
+    // 在组件实例进入页面节点树时执行
+    this.initData();
+  },
+  detached() {
+    // 在组件实例被从页面节点树移除时执行
+  },
+  observers: {
+    // 当参数变化时
+    '**': async function() {
+      const objEChartBar = new EchartBar();
+      await objEChartBar.setOptions(this.properties);
+      const options = await objEChartBar.getOptions();
+      this._chart && this._chart.setOption(options);
+    },
+  },
+  methods: {
+    initData() {
+      this.setData({
+        ec: {
+          onInit: this.initChart.bind(this),
+        },
+      });
+    },
+    async initChart(canvas, width, height, dpr) {
+      const objEchart = echarts.init(canvas, null, {
+        width,
+        height,
+        devicePixelRatio: dpr,
+      });
+      canvas.setChart(objEchart);
+      const objEChartBar = new EchartBar();
+      await objEChartBar.setOptions(this.properties);
+      const options = await objEChartBar.getOptions();
+      // objEchart.clear();
+      console.log('设置前参数bar', options);
+      objEchart.setOption(options);
+      this._chart = objEchart;
+      return objEchart;
+    },
+  },
+});

package/src/mp/components/chart/bar/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "ec-canvas": "../ec-canvas/ec-canvas"
+  }
+}

package/src/mp/components/chart/bar/index.wxml

@@ -0,0 +1,3 @@
+<view wx:if="ec" class="{{className}} ec_container" style="{{style}}" id="{{id}}">
+    <ec-canvas canvas-id="{{canvas_id}}" ec="{{ ec }}"></ec-canvas>
+</view>

package/src/mp/components/chart/bar/index.wxss

@@ -0,0 +1,9 @@
+/**index.wxss**/
+ec-canvas {
+  width: 100%;
+  height: 100%;
+}
+.ec_container {
+  width: 100%;
+  height: 380px;
+}

package/src/mp/components/chart/common/config/bar.js

@@ -0,0 +1,50 @@
+/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
+const getConfig = () => {
+  const barH5 = {
+    xAxis: {
+      name: 'X轴名',
+      nameTextStyle: { align: 'center' },
+      axisLabel: {
+        show: true, // 刻度标签显示
+        rotate: 0, // 字体倾斜
+      },
+      axisTick: {
+        show: true, // 刻度显示
+      },
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      inverse:false,
+    },
+    yAxis: {
+      type: 'value',
+      show: true, // y轴刻度线
+      name: 'Y轴名',
+      splitLine: {
+        lineStyle: {
+          width: 1, // 网格线宽度，为0则不显示
+          type: 'dashed', //solid,dashed,dotted
+        },
+      },
+      axisLabel: { padding: [0, -10, 0, 0] },
+      min: null,
+      max: null,
+    },
+    series: [
+      {
+        name: 'demo',
+        data: [820, 932, 901, 934, 1290, 1330, 1320],
+        type: 'bar',
+        itemStyle: {
+          color: 'green',
+        },
+        smooth: true,
+        showSymbol: true, //是否显示线条上数据标签
+        label: {
+          show: true, // 显示线条上的数据
+        },
+      },
+    ],
+  };
+  return barH5;
+};
+export default getConfig;

package/src/mp/components/chart/common/config/global.js

@@ -0,0 +1,16 @@
+/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
+const getConfig = () => {
+  const globalH5 = {
+    title: {
+      text: 'demo实例',
+      show: true,
+      left: '45%',
+    },
+    legend: {
+      top: '83%',
+    },
+    tooltip: {},
+  };
+  return globalH5;
+};
+export default getConfig;

package/src/mp/components/chart/common/config/line.js

@@ -0,0 +1,48 @@
+/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
+const getConfig = () => {
+  const lineH5 = {
+    xAxis: {
+      name: 'X轴名',
+      nameTextStyle: { align: 'center' },
+      axisLabel: {
+        show: true, // 刻度标签显示
+        rotate: 0, // 字体倾斜
+      },
+      axisTick: {
+        show: true, // 刻度显示
+      },
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    },
+    yAxis: {
+      type: 'value',
+      show: true, // y轴刻度线
+      name: 'Y轴名',
+      splitLine: {
+        lineStyle: {
+          width: 1, // 网格线宽度，为0则不显示
+          type: 'dashed', //solid,dashed,dotted
+        },
+      },
+      axisLabel: {
+        padding: [0, -10, 0, 0],
+      },
+      min: null,
+      max: null,
+    },
+    series: [
+      {
+        name: 'demo',
+        data: [820, 932, 901, 934, 1290, 1330, 1320],
+        type: 'line',
+        smooth: true,
+        showSymbol: true, //是否显示线条上数据标签
+        label: {
+          show: true, // 显示线条上的数据
+        },
+      },
+    ],
+  };
+  return lineH5;
+};
+export default getConfig;