ct-component-plus 0.0.1

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

@@ -0,0 +1,47 @@
+
+export const buriedParamsKey = 'changeBuriedParams'
+import { isFunction, isObject } from '../../utils';
+import { watch } from 'vue';
+export const useBuriedParams = (props, emitApp, options) => {
+  const emitKey = buriedParamsKey;
+  const { label, param } = (props || {});
+
+  const get = (content) => {
+    const params = {
+      label,
+      value: param,
+      content
+    }
+    if (options && isFunction(options.getContent)) {
+      params.content = options.getContent(params.content)
+    }
+    return params
+  }
+  const emit = (content) => {
+    if (isFunction(emitApp)) {
+      const params = get(content);
+      if (params.label) {
+        emitApp(emitKey, params)
+      }
+    }
+  }
+
+  const _emitBuriedParams = () => {
+    // 发送埋点数据
+    props.buried && emit(props.modelValue);
+  };
+  watch(
+    () => props.modelValue,
+    (newValue) => {
+      _emitBuriedParams();
+    },
+    {
+      immediate: true,
+    }
+  );
+  return {
+    get,
+    emit,
+    emitKey,
+  }
+}

package/packages/hooks/use-checked-all/index.js

@@ -0,0 +1,37 @@
+import { computed } from "vue"
+import { isArray, isObject } from '../../utils';
+
+export const useCheckedAll = (list, selects, options = {}) => {
+  const { key = 'value' } = (isObject(options) ? options : {})
+  const listKeys = computed(() => {
+    if (isArray(list.value)) return list.value.map(item => item[key])
+    return []
+  })
+
+  const checkedAll = computed({
+    get() {
+      if (isArray(list.value) && isArray(selects.value) && list.value.length && selects.value.length) {
+        if (list.value.length > selects.value.length) {
+          return false;
+        } else {
+          return listKeys.value.every(item => selects.value.includes(item))
+          return selects.value.every(item => listKeys.value.includes(item))
+        }
+      } else {
+        return false
+      }
+    },
+    set(newValue) {
+      if (!newValue) {
+        // 去掉全选
+        selects.value = selects.value.filter(item => !listKeys.value.includes(item))
+      } else {
+        // 全选
+        selects.value = selects.value.concat(listKeys.value.filter(item => !selects.value.includes(item)))
+      }
+    }
+  })
+  return {
+    checkedAll
+  }
+}

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

@@ -0,0 +1,2 @@
+export * from "./use-line";
+export * from "./use-bar";

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

@@ -0,0 +1,67 @@
+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.log('用户没有传入图表数据，请在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
+  objectMerge(barOption.value, option);
+  return {
+    barOption,
+    itemTemplate
+  }
+}

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

@@ -0,0 +1,83 @@
+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.log('用户没有传入图表数据，请在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
+  objectMerge(lineOption.value, option);
+  return {
+    lineOption,
+    itemTemplate
+  }
+}
+
+

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

@@ -0,0 +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
+  }
+}

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

@@ -0,0 +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,
+  }
+}