ct-component-plus 0.0.42 → 0.0.43

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

@@ -1,274 +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-component-hover-border-color);
-  }
-  &.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;
-      }
-    }
-  }
-}
+<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-component-hover-border-color);
+  }
+  &.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/echarts/bar/index.js

@@ -1,64 +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: [],
+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: [],
 }