ct-component-plus 0.0.1

package/packages/components/year-select/src/year-select.vue

@@ -0,0 +1,274 @@
+<template>
+  <div
+    :class="[ns.b(), ns.is('disabled', disabled), ns.is('multiple', multiple)]"
+  >
+    <div :class="[ns.e('wrapper')]">
+      <span :class="[ns.e('prefix')]">
+        <slot name="prefix"></slot>
+      </span>
+      <el-select
+        ref="selectRef1"
+        :class="[ns.e('select'), ns.is('start')]"
+        v-model="selectYearS"
+        :placeholder="startPlaceholder"
+        :disabled="disabled"
+        filterable
+        v-bind="eventList0"
+      >
+        <el-option
+          v-for="item in yearList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+      <template v-if="multiple">
+        <span :class="[ns.e('separator')]">
+          <slot name="separator">
+            <template v-if="isString(separator)">{{ separator }}</template>
+            <component v-else :is="separator" />
+          </slot>
+        </span>
+        <el-select
+          ref="selectRef2"
+          :class="[ns.e('select'), ns.is('end')]"
+          v-model="selectYearE"
+          :placeholder="endPlaceholder"
+          filterable
+          :disabled="disabled"
+          :filter-method="filterHandleE"
+          v-bind="eventList1"
+        >
+          <el-option
+            v-for="item in yearList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </template>
+      <span :class="[ns.e('suffix')]">
+        <slot name="suffix"></slot>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { useNamespace, useBuriedParams } from "../../../hooks";
+import { isArray, isString } from "../../../utils";
+import { yearSelectEmits, yearSelectProps } from "./index";
+const props = defineProps(yearSelectProps);
+const emit = defineEmits(yearSelectEmits);
+
+const ns = useNamespace("year-select");
+
+const selectRef1 = ref(null);
+const selectRef2 = ref(null);
+const yearList = ref([]);
+const selectYearS = computed({
+  get() {
+    if (props.multiple) {
+      if (isArray(props.modelValue)) {
+        return props.modelValue[0];
+      }
+      return "";
+    }
+    return props.modelValue;
+  },
+  set(value) {
+    let newValue = "";
+    if (props.multiple) {
+      newValue = [toNumber(value), toNumber(selectYearE)];
+    } else {
+      newValue = toNumber(value);
+    }
+    handleNewValue(newValue);
+  },
+});
+const selectYearE = computed({
+  get() {
+    if (isArray(props.modelValue)) {
+      return props.modelValue[1];
+    }
+    return "";
+  },
+  set(value) {
+    let newValue = [toNumber(selectYearS), toNumber(value)];
+    handleNewValue(newValue);
+  },
+});
+
+const handleNewValue = (newValue) => {
+  let newArr = JSON.parse(JSON.stringify(newValue));
+  if (isArray(newValue)) {
+    if (newArr[0] && newArr[1] && newArr[0] > newArr[1]) {
+      newArr = [newValue[1], newValue[0]];
+    }
+  }
+  emit("update:modelValue", newArr);
+  emit("change", newArr);
+};
+const toNumber = (value) => {
+  const res = value.value || value;
+  const num = Number(res);
+  return isNaN(num) ? "" : num;
+};
+const judgeYear = (str) => {
+  let reg = /\d{4}/;
+  return reg.test(str);
+};
+const judgeRange = (str) => {
+  const range = props.range;
+  return str <= range[1] && range[0] <= str;
+};
+const getYearList = () => {
+  const yearRang = props.range;
+  const start = yearRang[0];
+  const end = yearRang[1];
+  let yearArr = [];
+  for (let i = end; i >= start; i--) {
+    yearArr.push({ label: i + "", value: i });
+  }
+  yearList.value = yearArr;
+};
+const filterHandleE = (str) => {
+  //处理结束年
+  if (judgeYear(str) && judgeRange(str)) {
+    selectYearE.value = str;
+  }
+};
+const filterHandleS = (str) => {
+  //通过该方法把输入的年份放进数据里面
+  if (judgeYear(str) && judgeRange(str)) {
+    selectYearS.value = str;
+  }
+};
+const clearValue = () => {
+  selectYearS.value = "";
+  selectYearE.value = "";
+};
+
+// 绑定在select上的事件
+const eventList0 = {
+  onChange: (value) => {
+    onChange(value, 0);
+  },
+  onVisibleChange: (value) => {
+    onVisibleChange(value, 0);
+  },
+  onBlur: (value) => {
+    onBlur(value, 0);
+  },
+  onFocus: (value) => {
+    onFocus(value, 0);
+  },
+};
+const eventList1 = {
+  onChange: (value) => {
+    onChange(value, 1);
+  },
+  onVisibleChange: (value) => {
+    onVisibleChange(value, 1);
+  },
+  onBlur: (value) => {
+    onBlur(value, 1);
+  },
+  onFocus: (value) => {
+    onFocus(value, 1);
+  },
+};
+const onChange = (value, index) => {
+  emit("changeSelect", value, index);
+};
+const onVisibleChange = (value, index) => {
+  emit("visible-change", value, index);
+};
+const onBlur = (value, index) => {
+  emit("blur", value, index);
+};
+const onFocus = (value, index) => {
+  emit("focus", value, index);
+};
+
+useBuriedParams(props, emit);
+defineExpose({
+  ref: props.multiple ? [selectRef1, selectRef2] : selectRef1,
+  clearValue,
+  yearList,
+});
+onMounted(() => {
+  getYearList();
+});
+</script>
+<style lang='less'>
+.ct-year-select {
+  --el-select-input-focus-border-color: transparent;
+  --ct-year-select-select-inner-box-shadow: none;
+  position: relative;
+  display: inline-flex;
+  width: var(--ct-component-width);
+  font-size: var(--ct-font-size);
+  color: var(--ct-border-color);
+  box-sizing: border-box;
+  vertical-align: middle;
+  @R: .ct-year-select;
+  &:not(.is-disabled):hover {
+    --ct-component-border-color: var(--ct-color-grey-transition);
+  }
+  &.is-disabled {
+    cursor: not-allowed;
+    --ct-component-fill-color: var(--ct-component-disabled-bg-color);
+  }
+  &__wrapper {
+    display: inline-flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+    padding: 1px 0;
+    background-color: var(--ct-component-fill-color);
+    background-image: none;
+    border-radius: var(--ct-component-border-radius);
+    transition: var(--el-transition-box-shadow);
+    transform: translate3d(0, 0, 0);
+    box-shadow: 0 0 0 1px var(--ct-component-border-color) inset;
+    &:focus-within {
+      --ct-component-border-color: var(--ct-color-primary);
+      .el-input {
+        .el-icon,
+        .ct-icon {
+          color: var(--ct-component-border-color);
+        }
+      }
+    }
+  }
+  &__select {
+    width: 50%;
+    flex-grow: 1;
+    padding: 0 1px;
+    -webkit-appearance: none;
+    color: var(--ct-component-color);
+    font-size: inherit;
+    height: var(--ct-component-inner-height);
+    line-height: var(--ct-component-inner-height);
+    outline: 0;
+    border: none;
+    background: 0 0;
+    box-sizing: border-box;
+    .el-input {
+      --el-input-height: var(--ct-component-inner-height);
+    }
+  }
+  & &__select {
+    .el-input.is-focus,
+    .el-input {
+      .el-input__wrapper {
+        box-shadow: var(--ct-year-select-select-inner-box-shadow) !important;
+      }
+    }
+  }
+}
+</style>

package/packages/constants/aria.ts

@@ -0,0 +1,17 @@
+export const EVENT_CODE = {
+  tab: 'Tab',
+  enter: 'Enter',
+  space: 'Space',
+  left: 'ArrowLeft', // 37
+  up: 'ArrowUp', // 38
+  right: 'ArrowRight', // 39
+  down: 'ArrowDown', // 40
+  esc: 'Escape',
+  delete: 'Delete',
+  backspace: 'Backspace',
+  numpadEnter: 'NumpadEnter',
+  pageUp: 'PageUp',
+  pageDown: 'PageDown',
+  home: 'Home',
+  end: 'End',
+}

package/packages/constants/index.ts

@@ -0,0 +1 @@
+export * from './aria'

package/packages/directives/click-outside/index.ts

@@ -0,0 +1,118 @@
+import { isClient, isElement } from '../../utils'
+
+import type {
+  ComponentPublicInstance,
+  DirectiveBinding,
+  ObjectDirective,
+} from 'vue'
+
+type DocumentHandler = <T extends MouseEvent>(mouseup: T, mousedown: T) => void
+type FlushList = Map<
+  HTMLElement,
+  {
+    documentHandler: DocumentHandler
+    bindingFn: (...args: unknown[]) => unknown
+  }[]
+>
+
+const nodeList: FlushList = new Map()
+
+let startClick: MouseEvent
+
+if (isClient) {
+  document.addEventListener('mousedown', (e: MouseEvent) => (startClick = e))
+  document.addEventListener('mouseup', (e: MouseEvent) => {
+    for (const handlers of nodeList.values()) {
+      for (const { documentHandler } of handlers) {
+        documentHandler(e as MouseEvent, startClick)
+      }
+    }
+  })
+}
+
+function createDocumentHandler(
+  el: HTMLElement,
+  binding: DirectiveBinding
+): DocumentHandler {
+  let excludes: HTMLElement[] = []
+  if (Array.isArray(binding.arg)) {
+    excludes = binding.arg
+  } else if (isElement(binding.arg)) {
+    // due to current implementation on binding type is wrong the type casting is necessary here
+    excludes.push(binding.arg as unknown as HTMLElement)
+  }
+  return function (mouseup, mousedown) {
+    const popperRef = (
+      binding.instance as ComponentPublicInstance<{
+        popperRef: HTMLElement
+      }>
+    ).popperRef
+    const mouseUpTarget = mouseup.target as Node
+    const mouseDownTarget = mousedown?.target as Node
+    const isBound = !binding || !binding.instance
+    const isTargetExists = !mouseUpTarget || !mouseDownTarget
+    const isContainedByEl =
+      el.contains(mouseUpTarget) || el.contains(mouseDownTarget)
+    const isSelf = el === mouseUpTarget
+
+    const isTargetExcluded =
+      (excludes.length &&
+        excludes.some((item) => item?.contains(mouseUpTarget))) ||
+      (excludes.length && excludes.includes(mouseDownTarget as HTMLElement))
+    const isContainedByPopper =
+      popperRef &&
+      (popperRef.contains(mouseUpTarget) || popperRef.contains(mouseDownTarget))
+    if (
+      isBound ||
+      isTargetExists ||
+      isContainedByEl ||
+      isSelf ||
+      isTargetExcluded ||
+      isContainedByPopper
+    ) {
+      return
+    }
+    binding.value(mouseup, mousedown)
+  }
+}
+
+const ClickOutside: ObjectDirective = {
+  beforeMount(el: HTMLElement, binding: DirectiveBinding) {
+    // there could be multiple handlers on the element
+    if (!nodeList.has(el)) {
+      nodeList.set(el, [])
+    }
+
+    nodeList.get(el)!.push({
+      documentHandler: createDocumentHandler(el, binding),
+      bindingFn: binding.value,
+    })
+  },
+  updated(el: HTMLElement, binding: DirectiveBinding) {
+    if (!nodeList.has(el)) {
+      nodeList.set(el, [])
+    }
+
+    const handlers = nodeList.get(el)!
+    const oldHandlerIndex = handlers.findIndex(
+      (item) => item.bindingFn === binding.oldValue
+    )
+    const newHandler = {
+      documentHandler: createDocumentHandler(el, binding),
+      bindingFn: binding.value,
+    }
+
+    if (oldHandlerIndex >= 0) {
+      // replace the old handler to the new handler
+      handlers.splice(oldHandlerIndex, 1, newHandler)
+    } else {
+      handlers.push(newHandler)
+    }
+  },
+  unmounted(el: HTMLElement) {
+    // remove all listeners when a component unmounted
+    nodeList.delete(el)
+  },
+}
+
+export default ClickOutside

package/packages/directives/index.js

@@ -0,0 +1 @@
+export { default as ClickOutside } from './click-outside'

package/packages/echarts/bar/index.js

@@ -0,0 +1,64 @@
+import { baseOption } from "../base"
+export const baseBarOption = {
+  ...baseOption,
+  color: [
+    'rgba(77, 100, 255, 1)',
+    "rgba(255, 173, 44, 1)",
+    "rgba(30, 183, 173, 1)",
+    "rgba(255, 146, 24, 1)",
+    "rgba(66, 166, 255, 1)",
+    "rgba(136, 206, 119, 1)",
+  ],
+  axisPointer: {
+    lineStyle: {
+      opacity: 0
+    },
+  },
+  series: []
+}
+
+export const seriesItem = {
+  name: "",
+  type: 'bar',
+  silent: true,
+  barWidth: 28,
+  barGap: '50%',
+  barCategoryGap: 0,
+  label: {
+    show: false,
+    position: "outside",
+    fontSize: 14,
+    color: '#141617',
+    fontWeight: 400,
+  },
+  emphasis: {
+    label: {
+      show: false,
+      position: "outside",
+      fontSize: 14,
+      color: '#141617',
+      fontWeight: 400,
+    },
+  },
+  itemStyle: {
+    borderRadius: [4, 4, 0, 0],
+    borderWidth: 4,
+    borderColor: {
+      type: 'linear',
+      x: 0,
+      y: 0,
+      x2: 0,
+      y2: 1,
+      colorStops: [{
+        offset: 0, color: '#999CFF' // 0% 处的颜色
+      }, {
+        offset: 1, color: '#696EFF' // 100% 处的颜色
+      }],
+      global: false // 缺省为 false
+    }
+  },
+  labelLayout: {
+    draggable: true,
+  },
+  data: [],
+}

package/packages/echarts/base.js

@@ -0,0 +1,96 @@
+//存放基础通用配置
+
+export const baseOption = {
+  tooltip: {
+    trigger: "axis",
+    // 设置边框样式
+    borderColor: '#fff',
+    borderWidth: 1,
+    borderRadius: 4,
+    // 设置阴影效果
+    shadowColor: 'rgba(102, 114, 144, 0.16)',
+    shadowBlur: 14,
+    shadowOffsetX: 0,
+    shadowOffsetY: 4,
+    padding: [14, 16, 18, 16],
+    formatter: (param) => {
+      let dom = `<div style="color: #141617;font-size:14px;font-weight:600;line-height: 18px;margin-bottom:18px;">${param[0].name}</div>`;
+      param.forEach((p, index) => {
+        dom += `<div style="color:#141617;font-size:14px;line-height: 18px;display:flex;align-items:center;margin-bottom:${index + 1 == param.length ? '' : '12px'};">
+        <span style="margin-right:32px;display:inline-flex;align-items:center">
+          <span style="display:inline-block;margin-right:8px;border-radius:6px;width:6px;height:6px;background-color:${p.color};"></span>
+          ${p.seriesName}
+        </span>
+        <span>${p.value}</span>
+        </div>`
+      })
+      return dom
+    }
+  },
+  legend: {
+    show: true,
+    bottom: 0,
+    itemWidth: 14,
+    itemHeight: 14,
+    itemGap: 32,
+    borderRadius: 2,
+    icon: "roundRect",
+    textStyle: {
+      fontWeight: 400,
+      fontSize: 14
+    },
+    data: [],
+  },
+  grid: {
+    left: 0,
+    right: 0,
+    bottom: 40,
+    top: 30,
+    containLabel: true,
+  },
+  xAxis: {
+    type: "category",
+    boundaryGap: true,
+    axisLabel: {
+      margin: 11,
+      color: "#8F99A3",
+      fontSize: 14,
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#A4AFBB",
+      },
+    },
+    axisPointer: {
+      snap: true,
+    },
+    data: [],
+  },
+  yAxis: {
+    type: "value",
+    inverse: false,
+    axisLine: {
+      show: false,
+      lineStyle: {
+        color: "#C0CCD7",
+      },
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        type: "dashed",
+        color: "#DDE2EB",
+        dashOffset: 10,
+      },
+    },
+    axisLabel: {
+      margin: 8,
+      color: "#8F99A3",
+      fontSize: 13,
+    },
+  },
+}

package/packages/echarts/line/index.js

@@ -0,0 +1,107 @@
+import { baseOption } from "../base";
+export const baseLineOption = {
+  color: [
+    'rgba(77, 100, 255, 1)',
+    "rgba(255, 173, 44, 1)",
+    "rgba(30, 183, 173, 1)",
+    "rgba(255, 146, 24, 1)",
+    "rgba(66, 166, 255, 1)",
+    "rgba(136, 206, 119, 1)",
+  ],
+  axisPointer: {
+    lineStyle: {
+      color: "#D8DEE8",
+    },
+  },
+  ...baseOption,
+  series: [],
+}
+
+export const seriesItem = {
+  name: "",
+  type: "line",
+  symbol: "circle",
+  // showSymbol: false,
+  symbolSize: 6,
+  lineStyle: {
+    width: 3,
+  },
+  itemStyle: {
+    borderColor: "#fff",
+    borderWidth: 2,
+    shadowColor: "rgba(72, 80, 119, 0.12)",
+    shadowBlur: 4,
+    shadowOffsetX: 0,
+    shadowOffsetY: 2,
+  },
+  emphasis: {
+    scale: 1.33,
+    itemStyle: {
+      borderColor: "#fff",
+      borderWidth: 2.25,
+      shadowColor: "rgba(72,80,119,0.22)",
+      shadowBlur: 8,
+      shadowOffsetX: 0,
+      shadowOffsetY: 2,
+    },
+  },
+  data: [],
+}
+
+export const areaSeriesItem = {
+  name: "",
+  type: "line",
+  symbol: "circle",
+  showSymbol: true,
+  symbolSize: 6,
+  lineStyle: {
+    width: 3,
+  },
+  label: {
+    show: false
+  },
+  areaStyle: {
+    color: {
+      type: "linear",
+      x: 0,
+      y: 0,
+      x2: 0,
+      y2: 1,
+      colorStops: [
+        {
+          offset: 0,
+          color: "rgba(77, 100, 255, 0.22)", // 0% 处的颜色 
+        },
+        {
+          offset: 1,
+          color: "rgba(77, 100, 255, 0)", // 100% 处的颜色
+        },
+      ],
+      global: false, // 缺省为 false
+    },
+    origin: "start",
+  },
+  itemStyle: {
+    borderColor: "#fff",
+    borderWidth: 2,
+    shadowColor: "rgba(72, 80, 119, 0.22)",
+    shadowBlur: 4,
+    shadowOffsetX: 0,
+    shadowOffsetY: 2,
+  },
+  emphasis: {
+    scale: 1.33,
+    label: {
+      show: false
+    },
+    itemStyle: {
+      borderColor: "#fff",
+      borderWidth: 2.25,
+      shadowColor: "rgba(72,80,119,0.22)",
+      shadowBlur: 8,
+      shadowOffsetX: 0,
+      shadowOffsetY: 2,
+    },
+  },
+  data: [],
+}

package/packages/hooks/index.js

@@ -0,0 +1,6 @@
+
+export * from './use-namespace'
+export * from './use-buried'
+export * from './use-search-component'
+export * from './use-checked-all'
+export * from "./use-echarts"