ct-component-plus 0.0.42 → 0.0.43

package/packages/hooks/use-echarts/use-bar/index.js

@@ -1,73 +1,73 @@
-import { ref, watch, inject } from "vue";
-import { baseBarOption, seriesItem } from "../../../echarts/bar";
-import { copyObj, getOpacityColor, objectMerge } from "../../../utils";
-
-/**
- * 
- * @param {string} type -柱状图的类型，目前只有basic基本柱状图
- * @param {Object} option -用户想要进行灵活配置所传入的参数
- * @param {Array} data - 图表数据
- */
-export const useBarEcharts = (type, option, data) => {
-  const themeColor = inject('themeColor', null); //获取系统主题
-  const barOption = ref(copyObj(baseBarOption));
-  const itemTemplate = ref({});
-
-  //判断折线图图表类型，确定seriesItem格式
-  if (type == 'basic') {
-    itemTemplate.value = copyObj(seriesItem);
-  }
-  function initColor() {
-    barOption.value.color.splice(0, 1, themeColor);//调整调色板第一个主题色
-  }
-  if (themeColor) {
-    initColor();
-  }
-  function update(data) {
-    //数据更新方式
-    if (data.length == 0) {
-      console.warn('用户没有传入图表数据，请在hooks外处理');
-      return;
-    }
-    if (data.length > 1) {
-      barOption.value.legend.data = data.map((item) => item.name);
-    }
-    barOption.value.series.splice(0);
-    data.forEach((item, index) => {
-      let row = copyObj(itemTemplate.value);
-      let colorBoard = barOption.value.color;
-      row.itemStyle.borderColor.colorStops = [
-        {
-          offset: 0,
-          color: getOpacityColor(colorBoard[index % colorBoard.length], '0.5')
-        },
-        {
-          offset: 1,
-          color: getOpacityColor(colorBoard[index % colorBoard.length], '1')
-        }
-      ]
-      row.data = item.data;
-      row.name = item.name;
-      row.label.show = item.showLabel ? true : false;
-      row.emphasis.label.show = item.showLabel ? true : false;
-      barOption.value.series.push(row);
-    })
-  }
-  watch(() => data, (val) => {
-    update(val);
-  },
-    { deep: true, immediate: true }
-  );
-  // 灵活配置并入option
-
-  watch(() => option, (val) => {
-    objectMerge(barOption.value, option);
-  },
-    {
-      deep: true, immediate: true
-    })
-  return {
-    barOption,
-    itemTemplate
-  }
+import { ref, watch, inject } from "vue";
+import { baseBarOption, seriesItem } from "../../../echarts/bar";
+import { copyObj, getOpacityColor, objectMerge } from "../../../utils";
+
+/**
+ * 
+ * @param {string} type -柱状图的类型，目前只有basic基本柱状图
+ * @param {Object} option -用户想要进行灵活配置所传入的参数
+ * @param {Array} data - 图表数据
+ */
+export const useBarEcharts = (type, option, data) => {
+  const themeColor = inject('themeColor', null); //获取系统主题
+  const barOption = ref(copyObj(baseBarOption));
+  const itemTemplate = ref({});
+
+  //判断折线图图表类型，确定seriesItem格式
+  if (type == 'basic') {
+    itemTemplate.value = copyObj(seriesItem);
+  }
+  function initColor() {
+    barOption.value.color.splice(0, 1, themeColor);//调整调色板第一个主题色
+  }
+  if (themeColor) {
+    initColor();
+  }
+  function update(data) {
+    //数据更新方式
+    if (data.length == 0) {
+      console.warn('用户没有传入图表数据，请在hooks外处理');
+      return;
+    }
+    if (data.length > 1) {
+      barOption.value.legend.data = data.map((item) => item.name);
+    }
+    barOption.value.series.splice(0);
+    data.forEach((item, index) => {
+      let row = copyObj(itemTemplate.value);
+      let colorBoard = barOption.value.color;
+      row.itemStyle.borderColor.colorStops = [
+        {
+          offset: 0,
+          color: getOpacityColor(colorBoard[index % colorBoard.length], '0.5')
+        },
+        {
+          offset: 1,
+          color: getOpacityColor(colorBoard[index % colorBoard.length], '1')
+        }
+      ]
+      row.data = item.data;
+      row.name = item.name;
+      row.label.show = item.showLabel ? true : false;
+      row.emphasis.label.show = item.showLabel ? true : false;
+      barOption.value.series.push(row);
+    })
+  }
+  watch(() => data, (val) => {
+    update(val);
+  },
+    { deep: true, immediate: true }
+  );
+  // 灵活配置并入option
+
+  watch(() => option, (val) => {
+    objectMerge(barOption.value, option);
+  },
+    {
+      deep: true, immediate: true
+    })
+  return {
+    barOption,
+    itemTemplate
+  }
 }

package/packages/hooks/use-echarts/use-line/index.js

@@ -1,88 +1,88 @@
-import { ref, watch, inject } from "vue";
-import {
-  baseLineOption, seriesItem, areaSeriesItem
-} from "../../../echarts/line";
-import { copyObj, getOpacityColor, objectMerge } from "../../../utils";
-/**
- * 
- * @param {string} type - 折线图的类型 basic-基础折线图 area-面积折线图
- * @param {Object} option -用户想要进行灵活配置所传入的参数
- * @param {Array} data - 图表数据
- */
-export const useLineEcharts = (type, option, data) => {
-  const themeColor = inject('themeColor', null); //获取系统主题
-  const lineOption = ref(copyObj(baseLineOption));
-  const itemTemplate = ref({});
-
-  //判断折线图图表类型，确定seriesItem格式
-  if (type == 'basic') {
-    itemTemplate.value = copyObj(seriesItem);
-  } else if (type == 'area') {
-    itemTemplate.value = copyObj(areaSeriesItem);
-  }
-  function initColor() {
-    lineOption.value.color.splice(0, 1, themeColor);//调整调色板第一个主题色
-  }
-  if (themeColor) {
-    initColor();
-  }
-
-  function update(data) {
-    //数据更新方式
-    if (data.length == 0) {
-      console.warn('用户没有传入图表数据，请在hooks外处理');
-      return;
-    }
-    if (data.length > 1) {
-      lineOption.value.legend.data = data.map((item) => item.name);
-    }
-    lineOption.value.series.splice(0);
-    data.forEach((item, index) => {
-      let row = copyObj(itemTemplate.value);
-      row.name = item.name;
-      row.data = item.data;
-      row.smooth = item.smooth ? true : false;
-      row.label = {
-        show: item.showLabel ? true : false
-      }
-      row.emphasis.label = {
-        show: item.showLabel ? true : false,
-        fontWeight: 600,
-        color: 'inherit'
-      }
-      if (type == 'area') {
-        //更新面积折线图面积颜色
-        let colorBoard = lineOption.value.color;
-        row.areaStyle.color.colorStops = [
-          {
-            offset: 0,
-            color: getOpacityColor(colorBoard[index % colorBoard.length], '0.22')
-          },
-          {
-            offset: 1,
-            color: getOpacityColor(colorBoard[index % colorBoard.length], '0')
-          }
-        ]
-      }
-      lineOption.value.series.push(row);
-    })
-  }
-  watch(() => data, (val) => {
-    update(val);
-  },
-    { deep: true, immediate: true }
-  );
-  // 灵活配置并入option
-  watch(() => option, (val) => {
-    objectMerge(lineOption.value, option);
-  }, {
-    deep: true, immediate: true
-  })
-
-  return {
-    lineOption,
-    itemTemplate
-  }
-}
-
-
+import { ref, watch, inject } from "vue";
+import {
+  baseLineOption, seriesItem, areaSeriesItem
+} from "../../../echarts/line";
+import { copyObj, getOpacityColor, objectMerge } from "../../../utils";
+/**
+ * 
+ * @param {string} type - 折线图的类型 basic-基础折线图 area-面积折线图
+ * @param {Object} option -用户想要进行灵活配置所传入的参数
+ * @param {Array} data - 图表数据
+ */
+export const useLineEcharts = (type, option, data) => {
+  const themeColor = inject('themeColor', null); //获取系统主题
+  const lineOption = ref(copyObj(baseLineOption));
+  const itemTemplate = ref({});
+
+  //判断折线图图表类型，确定seriesItem格式
+  if (type == 'basic') {
+    itemTemplate.value = copyObj(seriesItem);
+  } else if (type == 'area') {
+    itemTemplate.value = copyObj(areaSeriesItem);
+  }
+  function initColor() {
+    lineOption.value.color.splice(0, 1, themeColor);//调整调色板第一个主题色
+  }
+  if (themeColor) {
+    initColor();
+  }
+
+  function update(data) {
+    //数据更新方式
+    if (data.length == 0) {
+      console.warn('用户没有传入图表数据，请在hooks外处理');
+      return;
+    }
+    if (data.length > 1) {
+      lineOption.value.legend.data = data.map((item) => item.name);
+    }
+    lineOption.value.series.splice(0);
+    data.forEach((item, index) => {
+      let row = copyObj(itemTemplate.value);
+      row.name = item.name;
+      row.data = item.data;
+      row.smooth = item.smooth ? true : false;
+      row.label = {
+        show: item.showLabel ? true : false
+      }
+      row.emphasis.label = {
+        show: item.showLabel ? true : false,
+        fontWeight: 600,
+        color: 'inherit'
+      }
+      if (type == 'area') {
+        //更新面积折线图面积颜色
+        let colorBoard = lineOption.value.color;
+        row.areaStyle.color.colorStops = [
+          {
+            offset: 0,
+            color: getOpacityColor(colorBoard[index % colorBoard.length], '0.22')
+          },
+          {
+            offset: 1,
+            color: getOpacityColor(colorBoard[index % colorBoard.length], '0')
+          }
+        ]
+      }
+      lineOption.value.series.push(row);
+    })
+  }
+  watch(() => data, (val) => {
+    update(val);
+  },
+    { deep: true, immediate: true }
+  );
+  // 灵活配置并入option
+  watch(() => option, (val) => {
+    objectMerge(lineOption.value, option);
+  }, {
+    deep: true, immediate: true
+  })
+
+  return {
+    lineOption,
+    itemTemplate
+  }
+}
+
+

package/packages/hooks/use-namespace/index.js

@@ -1,66 +1,66 @@
-
-export const defaultNamespace = 'ct'
-/**
- * 处理生成BEM命名规则的类名
- * @param options BEM字段配置项
- * @returns BEM命名规则的类名
- */
-const _bem = (options = {}) => {
-  let cls = `${defaultNamespace}`;
-  if (options.block) cls += `-${options.block}`;
-  if (options.blockSuffix) cls += `-${options.blockSuffix}`;
-  if (options.element) cls += `__${options.element}`;
-  if (options.modifier) cls += `--${options.modifier}`;
-  return cls
-}
-const statePrefix = 'is-'
-
-/**
- * 采用BEM命名的hooks
- * @param block BEM的B,模块名
- * @returns 
- */
-export const useNamespace = (block) => {
-  const options = { block };  //默认的BEM配置
-
-  // 给BEM的B赋值，取使用hook时传入的block
-  const b = () => _bem(options);
-  // 给BEM的E赋值
-  const e = (element) => element ? _bem({ ...options, element, }) : '';
-  // 给BEM的M赋值
-  const m = (modifier) => modifier ? _bem({ ...options, modifier, }) : '';
-  // 给BEM的BE赋值
-  const be = (blockSuffix, element) =>
-    blockSuffix && element
-      ? _bem({ ...options, blockSuffix, element })
-      : '';
-  // 给BEM的EM赋值
-  const em = (element, modifier) =>
-    element && modifier
-      ? _bem({ ...options, element, modifier })
-      : '';
-  // 给BEM的BM赋值,这里的B是block的后缀名
-  const bm = (blockSuffix, modifier) =>
-    blockSuffix && modifier
-      ? _bem({ ...options, blockSuffix, modifier })
-      : '';
-  // 给BEM的BM赋值,这里的B是block的后缀名
-  const bem = (blockSuffix, element, modifier) =>
-    blockSuffix && element && modifier
-      ? _bem({ ...options, blockSuffix, element, modifier })
-      : '';
-  const is = (name, ...args) => {
-    const state = args.length >= 1 ? !!args[0] : true
-    return name && state ? `${statePrefix}${name}` : ''
-  }
-  return {
-    b,
-    e,
-    m,
-    be,
-    em,
-    bm,
-    bem,
-    is
-  }
+
+export const defaultNamespace = 'ct'
+/**
+ * 处理生成BEM命名规则的类名
+ * @param options BEM字段配置项
+ * @returns BEM命名规则的类名
+ */
+const _bem = (options = {}) => {
+  let cls = `${defaultNamespace}`;
+  if (options.block) cls += `-${options.block}`;
+  if (options.blockSuffix) cls += `-${options.blockSuffix}`;
+  if (options.element) cls += `__${options.element}`;
+  if (options.modifier) cls += `--${options.modifier}`;
+  return cls
+}
+const statePrefix = 'is-'
+
+/**
+ * 采用BEM命名的hooks
+ * @param block BEM的B,模块名
+ * @returns 
+ */
+export const useNamespace = (block) => {
+  const options = { block };  //默认的BEM配置
+
+  // 给BEM的B赋值，取使用hook时传入的block
+  const b = () => _bem(options);
+  // 给BEM的E赋值
+  const e = (element) => element ? _bem({ ...options, element, }) : '';
+  // 给BEM的M赋值
+  const m = (modifier) => modifier ? _bem({ ...options, modifier, }) : '';
+  // 给BEM的BE赋值
+  const be = (blockSuffix, element) =>
+    blockSuffix && element
+      ? _bem({ ...options, blockSuffix, element })
+      : '';
+  // 给BEM的EM赋值
+  const em = (element, modifier) =>
+    element && modifier
+      ? _bem({ ...options, element, modifier })
+      : '';
+  // 给BEM的BM赋值,这里的B是block的后缀名
+  const bm = (blockSuffix, modifier) =>
+    blockSuffix && modifier
+      ? _bem({ ...options, blockSuffix, modifier })
+      : '';
+  // 给BEM的BM赋值,这里的B是block的后缀名
+  const bem = (blockSuffix, element, modifier) =>
+    blockSuffix && element && modifier
+      ? _bem({ ...options, blockSuffix, element, modifier })
+      : '';
+  const is = (name, ...args) => {
+    const state = args.length >= 1 ? !!args[0] : true
+    return name && state ? `${statePrefix}${name}` : ''
+  }
+  return {
+    b,
+    e,
+    m,
+    be,
+    em,
+    bm,
+    bem,
+    is
+  }
 }

package/packages/hooks/use-search-component/index.js

@@ -1,29 +1,29 @@
-
-
-export const searchComponentProps = {
-  param: String,
-  label: String,
-  rawAttr: {
-    type: Object,
-    default() {
-      return {};
-    },
-  },
-  cbs: {
-    type: Object,
-    default() {
-      return {};
-    },
-  },
-  buried: {
-    type: Boolean,
-    default: true,
-  },
-}
-
-export const useSearchComponent = () => {
-
-  return {
-    props: searchComponentProps,
-  }
+
+
+export const searchComponentProps = {
+  param: String,
+  label: String,
+  rawAttr: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+  cbs: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+  buried: {
+    type: Boolean,
+    default: true,
+  },
+}
+
+export const useSearchComponent = () => {
+
+  return {
+    props: searchComponentProps,
+  }
 }