ct-component-plus 0.0.1

package/packages/components/table/src/table.vue

@@ -0,0 +1,249 @@
+<template>
+  <div :class="[ns.b()]">
+    <div :class="[ns.e('container')]">
+      <el-table
+        ref="tableRef"
+        :class="[ns.e('body')]"
+        :data="showData"
+        :span-method="spanMethod"
+        @selection-change="handleSelectChange"
+        row-key="rowKey"
+        v-bind="$attrs"
+      >
+        <el-table-column
+          v-if="isMultiSelect"
+          type="selection"
+          width="88"
+          :reserve-selection="true"
+        ></el-table-column>
+        <el-table-column
+          v-for="(column, index) in columnData"
+          :key="column.value + '-' + column.label"
+          :label="column.label + ''"
+          :prop="column.value || ''"
+          :width="judgeWidth(column, index)"
+          :min-width="judgeMinWidth(column, index)"
+          :sort-orders="['ascending', 'descending']"
+          :sortable="column.sortable ? 'custom' : false"
+          :align="column.align || 'center'"
+          :fixed="column.fixed || false"
+        >
+          <template #header v-if="column.slotHeader">
+            <slot :name="column.value + 'Header'"></slot>
+          </template>
+          <template #default="scope">
+            <slot
+              :name="column.value"
+              :value="scope.row[column.value]"
+              v-bind="scope"
+              :column="column"
+            >
+              <span>{{ scope.row[column.value] }}</span>
+            </slot>
+            <el-table-column
+              v-for="(column1, index) in column.children"
+              :key="column1.value + '-' + column1.label"
+              :label="column1.label + ''"
+              :prop="column1.value"
+              :width="judgeWidth(column1, index)"
+              :min-width="judgeMinWidth(column1, index)"
+              :sort-orders="['ascending', 'descending']"
+              :sortable="column1.sortable ? 'custom' : false"
+              :align="column1.align || 'center'"
+              :fixed="column1.fixed || false"
+              show-overflow-tooltip
+            >
+              <template #default="scope">
+                <slot
+                  :name="column1.value"
+                  :value="scope.row[column1.value]"
+                  v-bind="scope"
+                  :column="column1"
+                >
+                  <span>{{ scope.row[column1.value] }}</span>
+                </slot>
+              </template>
+            </el-table-column>
+          </template>
+        </el-table-column>
+      </el-table>
+      <ct-pagination
+        :class="ns.e('pagination')"
+        :pageSize="pageSize"
+        :total="total"
+        :current-page="pageNo"
+        v-if="pageSize"
+        @current-change="handleCurrentChange"
+      ></ct-pagination>
+    </div>
+    <Teleport :to="`#${teleportDom}`" v-if="teleportDom && teleportStatus">
+      <table-sort v-model:sort-obj="sortObj" :sort-list="sortList"></table-sort>
+    </Teleport>
+  </div>
+</template>
+
+<script setup>
+import {
+  computed,
+  defineAsyncComponent,
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+} from "vue";
+import { useNamespace } from "../../../hooks";
+import { copyObj } from "../../../utils";
+import { tableEmits, tableProps } from "./index";
+import TableSort from "./TableSort.vue";
+const props = defineProps(tableProps);
+const emit = defineEmits(tableEmits);
+
+const ns = useNamespace("table");
+const tableRef = ref(null);
+const total = computed(() => {
+  return props.tableProps.tableData?.length;
+});
+const pageSize = computed(() => {
+  return Number(props.pagination);
+});
+const pageNo = ref(1);
+const handleCurrentChange = (val) => {
+  pageNo.value = val;
+};
+const showData = computed(() => {
+  const table = props.tableProps.tableData.map((item, index) => {
+    return {
+      ...item,
+      rowKey: `ct-row-${index}`,
+    };
+  });
+  if (props.pagination) {
+    return table.slice(
+      (pageNo.value - 1) * pageSize.value,
+      pageNo.value * pageSize.value
+    );
+  } else {
+    return table || [];
+  }
+});
+const columnData = computed(() => {
+  return props.tableProps.columnData || [];
+});
+const judgeWidth = (column, index) => {
+  // 判断处理column的width
+  const columnWidth = props.columnWidth;
+  return (
+    column.fixedWidth ||
+    (columnWidth &&
+      typeof columnWidth[index] === "object" &&
+      columnWidth[index].fixed) ||
+    ""
+  );
+};
+const judgeMinWidth = (column, index) => {
+  // 判断处理column的min-width
+  const columnWidth = props.columnWidth;
+  if (column.width) {
+    return column.width;
+  }
+  if (columnWidth && columnWidth[index]) {
+    return typeof columnWidth[index] === "object"
+      ? columnWidth[index].width
+      : columnWidth[index];
+  }
+  return "auto";
+};
+
+let spanObj = {};
+watch(
+  () => props.mergeList,
+  (newVal, oldVal) => {
+    let res = {};
+    if (Array.isArray(newVal)) {
+      newVal.forEach((item) => {
+        const { row, col, span } = item;
+        const spanRow = span ? span[0] : 0;
+        const spanCol = span ? span[1] : 0;
+        // 处理一项合并单元格数据，设置对应的行和列的合并数据，以及涉及到的其他行和列都需要被合并
+        for (let i = 1; i <= spanRow; i++) {
+          for (let j = 1; j <= spanCol; j++) {
+            // 除了起始行、起始列，其他行和列都是需要被合并的，即都需要设置为[0,0]
+            let res = i === 1 && j === 1 ? span : [0, 0];
+            const rowKey = row + i - 1;
+            const colKey = col + j - 1;
+            if (res[rowKey]) {
+              res[rowKey][colKey] = res;
+            } else {
+              res[rowKey] = {
+                [colKey]: res,
+              };
+            }
+          }
+        }
+      });
+    }
+    spanObj = res;
+  },
+  { immediate: true }
+);
+const spanMethod = ({ rowIndex, columnIndex }) => {
+  const rowKey = rowIndex + 1;
+  const colKey = columnIndex + 1;
+
+  if (spanObj[rowKey]) {
+    if (spanObj[rowKey][colKey]) {
+      return spanObj[rowKey][colKey];
+    }
+  }
+  return [1, 1];
+};
+
+const selectedArr = computed({
+  get() {
+    return props.multiSelect || [];
+  },
+  set(val) {
+    emit("update:multiSelect", val);
+  },
+});
+watch(
+  () => props.multiSelect,
+  (val, oldVal) => {
+    if (val && val.length == 0) {
+      tableRef.value.clearSelection();
+    }
+  }
+);
+function handleSelectChange(val) {
+  selectedArr.value = copyObj(val);
+}
+
+const teleportStatus = ref(false);
+const sortObj = computed({
+  get() {
+    return props.defaultSort;
+  },
+  set(val) {
+    emit("update:defaultSort", val);
+  },
+});
+const sortList = computed(() => {
+  return columnData.value.filter((item) => item.sortable);
+});
+onMounted(() => {
+  teleportStatus.value = true; //直到dom挂载完毕再挂载teleport组件
+});
+
+defineExpose({ tableRef });
+</script>
+<style lang='less' scoped>
+.ct-table__body {
+  width: 100%;
+}
+.ct-table__pagination {
+  margin-top: 24px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

package/packages/components/tabs/index.js

@@ -0,0 +1,8 @@
+import CtTabs from './src/tabs.vue';
+
+/* istanbul ignore next */
+CtTabs.install = function (Vue) {
+  Vue.component('CtTabs', CtTabs);
+};
+
+export default CtTabs;

package/packages/components/tabs/src/tabs.vue

@@ -0,0 +1,226 @@
+<template>
+  <div :class="[ns.b(), ns.m(type), ns.is('nav', nav)]" ref="_ref">
+    <div
+      v-for="(item, index) in list"
+      :key="index"
+      :class="[
+        ns.e('item'),
+        ns.is('disabled', item.disabled),
+        ns.is('active', modelValue === item.value),
+      ]"
+      @click="handleClick(item, index)"
+    >
+      <slot>
+        <span :class="ns.e('item-text')">{{ item.label }}</span>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import { useNamespace } from "../../../hooks";
+const ns = useNamespace("tabs");
+const props = defineProps({
+  nav: {
+    type: Boolean,
+    default: false,
+  },
+  type: {
+    type: String,
+    default: "default",
+  },
+  modelValue: {
+    type: [String, Number],
+    default: "",
+  },
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  beforeLeave: Function,
+});
+const emit = defineEmits(["click", "change", "update:modelValue"]);
+const _ref = ref(null);
+
+const handleClick = async (item, index) => {
+  if (item.disabled) return;
+  try {
+    emit("click", item.value, index, item);
+    if (item.value === props.modelValue) return;
+    // 可以继续的标志
+    let canContinue = true;
+    if (props.beforeLeave) {
+      canContinue = await props.beforeLeave(item.value, index, item);
+    }
+    if (canContinue !== false) {
+      emit("update:modelValue", item.value);
+      emit("change", item.value, index, item);
+    }
+  } catch (error) {
+    console.error(error);
+    return;
+  }
+};
+onMounted(() => {
+  if (!props.modelValue && props.list.length) {
+    handleClick(props.list[0], 0);
+  }
+});
+defineExpose({
+  ref: _ref,
+});
+</script>
+<style lang='less'>
+.ct-tabs {
+  display: inline-flex;
+  align-items: center;
+  @R: .ct-tabs;
+  --tabs-button-border-radius: var(--ct-border-radius);
+  &__item {
+    cursor: pointer;
+    &.is-disabled {
+      cursor: not-allowed;
+    }
+  }
+  &--default {
+    @{R}__item {
+      position: relative;
+      padding: 12px 0;
+      margin-right: 32px;
+      line-height: 20px;
+      &:last-child {
+        margin-right: 0;
+      }
+      &.is-active {
+        font-weight: 600;
+        color: var(--ct-color-primary);
+        &::after {
+          content: "";
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 2px;
+          background-color: var(--ct-color-primary);
+        }
+      }
+      &.is-disabled {
+        color: var(--ct-color-disabled);
+      }
+      &:not(.is-disabled):hover {
+        color: var(--ct-color-primary);
+      }
+    }
+  }
+  &--block {
+    @{R}__item {
+      padding: 5px 12px;
+      margin-right: 8px;
+      background-color: var(--ct-color-bg);
+      border-radius: 3px;
+      line-height: 18px;
+      &:last-child {
+        margin-right: 0;
+      }
+      &.is-active {
+        font-weight: 600;
+        background-color: var(--ct-color-primary-bg);
+        color: var(--ct-color-primary);
+      }
+      &.is-disabled {
+        color: var(--ct-color-disabled);
+      }
+      &:not(.is-disabled):hover {
+        background-color: var(--ct-color-primary-bg);
+      }
+    }
+  }
+  &--button {
+    box-sizing: border-box;
+    border-radius: var(--tabs-button-border-radius);
+    @{R}__item {
+      padding: 5px 12px;
+      border: 1px solid #a4afbb;
+      border-right-width: 0;
+      &:first-child {
+        border-radius: var(--tabs-button-border-radius) 0 0
+          var(--tabs-button-border-radius);
+      }
+      &:last-child {
+        border-right-width: 1px;
+        border-radius: 0 var(--tabs-button-border-radius)
+          var(--tabs-button-border-radius) 0;
+      }
+      &.is-active {
+        font-weight: 600;
+        background-color: var(--ct-color-primary);
+        color: #fff;
+        border-color: var(--ct-color-primary);
+        border-right-width: 0;
+        & + div {
+          border-left-color: transparent;
+        }
+      }
+      &.is-disabled {
+        color: var(--ct-color-disabled);
+      }
+      &:not(.is-disabled):not(.is-active):hover {
+        color: var(--ct-color-primary);
+      }
+    }
+  }
+  &--button-bg {
+    background-color: var(--ct-color-bg);
+    border-radius: var(--tabs-button-border-radius);
+    @{R}__item {
+      position: relative;
+      padding: 5px 12px;
+      background-color: var(--ct-color-bg);
+      border-radius: 3px;
+      line-height: 18px;
+      &::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        width: 1px;
+        height: 16px;
+        background-color: var(--ct-color-separator);
+      }
+      &:first-child {
+        &::before {
+          display: none;
+        }
+      }
+      &.is-active {
+        font-weight: 600;
+        background-color: var(--ct-color-primary);
+        color: #fff;
+        &::before {
+          display: none;
+        }
+      }
+      &.is-disabled {
+        color: var(--ct-color-disabled);
+      }
+      &:not(.is-disabled):not(.is-active):hover {
+        color: var(--ct-color-primary);
+      }
+    }
+  }
+  &.is-nav {
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 22px;
+    @{R}__item {
+      padding: 23px 0;
+      margin-right: 36px;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+}
+</style>

package/packages/components/year-select/index.js

@@ -0,0 +1,8 @@
+import CtYearSelect from './src/year-select.vue';
+
+/* istanbul ignore next */
+CtYearSelect.install = function (Vue) {
+  Vue.component('CtYearSelect', CtYearSelect);
+};
+
+export default CtYearSelect;

package/packages/components/year-select/src/index.js

@@ -0,0 +1,45 @@
+import { buriedParamsKey, searchComponentProps } from '../../../hooks';
+
+export const yearSelectEmits = [
+  "update:modelValue",
+  buriedParamsKey,
+  'change',
+  'change-select',
+  'visible-change',
+  'blur',
+  'focus'
+];
+export const yearSelectProps = {
+  ...searchComponentProps,
+  modelValue: [Number, String, Array],
+  disabled: Boolean,
+  multiple: {
+    type: Boolean,
+    default: true
+  },
+  startPlaceholder: String,
+  endPlaceholder: String,
+  range: {
+    type: Array,
+    default() {
+      return [1950, new Date().getFullYear()];
+    },
+    validator(valueArr) {
+      if (valueArr.length !== 2) {
+        throw `请输入合理的年份取值范围：${valueArr}`;
+      }
+      let count = 0;
+      valueArr.forEach((item) => {
+        count += /\d{4}/.test(item) ? 1 : 0;
+      });
+      if (count !== 2) {
+        throw `请确保传入的两个范围都是年份：${valueArr}`;
+      }
+      return true;
+    },
+  },
+  separator: {
+    type: [String, Object],
+    default: "至",
+  },
+}