ct-component-plus 0.0.42 → 0.0.43

package/packages/components/table/index.js

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

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

@@ -1,180 +1,180 @@
-<template>
-  <div :class="ns.b()">
-    <el-popover
-      placement="bottom-start"
-      :popper-class="ns.e('popover')"
-      trigger="click"
-    >
-      <template #reference>
-        <div :class="ns.e('btn')">
-          <ct-icon name="sort2-down_line" size="16"></ct-icon>
-          排序
-        </div>
-      </template>
-      <div :class="ns.e('content')">
-        <div :class="ns.e('order')">
-          <div
-            :class="[
-              ns.em('order', 'item'),
-              ns.e('item'),
-              ns.is('active', sortOrder === item.value),
-            ]"
-            v-for="item in popover.orderList"
-            :key="item.value"
-            @click="handleOrder(item)"
-          >
-            <ct-icon name="check_line" :class="ns.em('item', 'icon')"></ct-icon>
-            {{ item.label }}
-          </div>
-        </div>
-        <div :class="ns.e('list')">
-          <div
-            :class="[
-              ns.em('list', 'item'),
-              ns.e('item'),
-              ns.is('active', sortProp === item.value),
-            ]"
-            v-for="item in sortList"
-            :key="item.value"
-            @click="handleProp(item)"
-          >
-            <ct-icon name="check_line" :class="ns.em('item', 'icon')"></ct-icon>
-            {{ item.label }}
-          </div>
-        </div>
-      </div>
-    </el-popover>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, onMounted, computed } from "vue";
-import { useNamespace } from "../../../hooks";
-
-const ns = useNamespace("table-sort");
-const props = defineProps({
-  sortList: {
-    //需要排序的字段列表
-    type: Array,
-  },
-  sortObj: {
-    //双向绑定的排序参数对象
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-});
-const emit = defineEmits(["update:sortObj"]);
-
-const popover = reactive({
-  visible: false,
-  orderList: [
-    { label: "升序", value: "ascending" },
-    { label: "降序", value: "descending" },
-  ],
-});
-const sortOrder = computed({
-  get() {
-    return props.sortObj.order;
-  },
-  set(val) {
-    const newSortObj = {
-      ...props.sortObj,
-      order: val,
-    };
-    emit("update:sortObj", newSortObj);
-  },
-});
-const handleOrder = (item) => {
-  if (sortOrder.value !== item.value) {
-    sortOrder.value = item.value;
-  }
-};
-const sortProp = computed({
-  get() {
-    return props.sortObj.prop;
-  },
-  set(val) {
-    const newSortObj = {
-      ...props.sortObj,
-      prop: val,
-    };
-    emit("update:sortObj", newSortObj);
-  },
-});
-const handleProp = (item) => {
-  if (sortProp.value !== item.value) {
-    sortProp.value = item.value;
-  }
-};
-</script>
-
-<style scoped lang='less'>
-.ct-table-sort {
-  @R:.ct-table-sort;
-  width: fit-content;
-  &__btn {
-    color: var(--ct-color-sub-blue);
-    line-height: 18px;
-    display: flex;
-    align-items: center;
-    width: fit-content;
-    cursor: pointer;
-  }
-  &__content {
-    @{R}__item{
-      line-height: 20px;
-      padding: 5px 16px;
-      border-radius: 4px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      &:not(:last-child){
-        margin-bottom: 2px;
-      }
-      &--icon{
-        margin-right: 6px;
-        height: 14px;
-        color:#fff;
-      }
-      &.is-active{
-        @R:.ct-table-sort__item;
-        background: var(--ct-component-hover-color);
-        color: var(--ct-color-sub-blue);
-        @{R}--icon{
-          color: var(--ct-color-sub-blue);
-        }
-      }
-      &:hover{
-        color: var(--ct-color-sub-blue);
-      }
-    }
-    @{R}__order{
-      border-bottom: var(--ct-border-color-light) solid 1px;
-    }
-    @{R}__order--item{
-      &:last-child{
-        margin-bottom: 9px;
-      }
-    }
-    @{R}__list{
-      margin-top: 8px;
-      max-height: 300px;
-      overflow-y: auto;
-    }
-    @{R}__list--item{
-
-    }
-  }
-}
-</style>
-
-<style lang="less">
-.el-popover.el-popper.ct-table-sort__popover {
-  padding: 11px 6px;
-  min-width: 134px;
-  box-shadow: 0px 4px 14px 0px rgba(102, 114, 144, 0.1);
-  border-radius: 4px;
-}
+<template>
+  <div :class="ns.b()">
+    <el-popover
+      placement="bottom-start"
+      :popper-class="ns.e('popover')"
+      trigger="click"
+    >
+      <template #reference>
+        <div :class="ns.e('btn')">
+          <ct-icon name="sort2-down_line" size="16"></ct-icon>
+          排序
+        </div>
+      </template>
+      <div :class="ns.e('content')">
+        <div :class="ns.e('order')">
+          <div
+            :class="[
+              ns.em('order', 'item'),
+              ns.e('item'),
+              ns.is('active', sortOrder === item.value),
+            ]"
+            v-for="item in popover.orderList"
+            :key="item.value"
+            @click="handleOrder(item)"
+          >
+            <ct-icon name="check_line" :class="ns.em('item', 'icon')"></ct-icon>
+            {{ item.label }}
+          </div>
+        </div>
+        <div :class="ns.e('list')">
+          <div
+            :class="[
+              ns.em('list', 'item'),
+              ns.e('item'),
+              ns.is('active', sortProp === item.value),
+            ]"
+            v-for="item in sortList"
+            :key="item.value"
+            @click="handleProp(item)"
+          >
+            <ct-icon name="check_line" :class="ns.em('item', 'icon')"></ct-icon>
+            {{ item.label }}
+          </div>
+        </div>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed } from "vue";
+import { useNamespace } from "../../../hooks";
+
+const ns = useNamespace("table-sort");
+const props = defineProps({
+  sortList: {
+    //需要排序的字段列表
+    type: Array,
+  },
+  sortObj: {
+    //双向绑定的排序参数对象
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+});
+const emit = defineEmits(["update:sortObj"]);
+
+const popover = reactive({
+  visible: false,
+  orderList: [
+    { label: "升序", value: "ascending" },
+    { label: "降序", value: "descending" },
+  ],
+});
+const sortOrder = computed({
+  get() {
+    return props.sortObj.order;
+  },
+  set(val) {
+    const newSortObj = {
+      ...props.sortObj,
+      order: val,
+    };
+    emit("update:sortObj", newSortObj);
+  },
+});
+const handleOrder = (item) => {
+  if (sortOrder.value !== item.value) {
+    sortOrder.value = item.value;
+  }
+};
+const sortProp = computed({
+  get() {
+    return props.sortObj.prop;
+  },
+  set(val) {
+    const newSortObj = {
+      ...props.sortObj,
+      prop: val,
+    };
+    emit("update:sortObj", newSortObj);
+  },
+});
+const handleProp = (item) => {
+  if (sortProp.value !== item.value) {
+    sortProp.value = item.value;
+  }
+};
+</script>
+
+<style scoped lang='less'>
+.ct-table-sort {
+  @R:.ct-table-sort;
+  width: fit-content;
+  &__btn {
+    color: var(--ct-color-sub-blue);
+    line-height: 18px;
+    display: flex;
+    align-items: center;
+    width: fit-content;
+    cursor: pointer;
+  }
+  &__content {
+    @{R}__item{
+      line-height: 20px;
+      padding: 5px 16px;
+      border-radius: 4px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      &:not(:last-child){
+        margin-bottom: 2px;
+      }
+      &--icon{
+        margin-right: 6px;
+        height: 14px;
+        color:#fff;
+      }
+      &.is-active{
+        @R:.ct-table-sort__item;
+        background: var(--ct-component-hover-color);
+        color: var(--ct-color-sub-blue);
+        @{R}--icon{
+          color: var(--ct-color-sub-blue);
+        }
+      }
+      &:hover{
+        color: var(--ct-color-sub-blue);
+      }
+    }
+    @{R}__order{
+      border-bottom: var(--ct-border-color-light) solid 1px;
+    }
+    @{R}__order--item{
+      &:last-child{
+        margin-bottom: 9px;
+      }
+    }
+    @{R}__list{
+      margin-top: 8px;
+      max-height: 300px;
+      overflow-y: auto;
+    }
+    @{R}__list--item{
+
+    }
+  }
+}
+</style>
+
+<style lang="less">
+.el-popover.el-popper.ct-table-sort__popover {
+  padding: 11px 6px;
+  min-width: 134px;
+  box-shadow: 0px 4px 14px 0px rgba(102, 114, 144, 0.1);
+  border-radius: 4px;
+}
 </style>

package/packages/components/table/src/index.js

@@ -1,67 +1,71 @@
-import { ref } from "vue";
-
-export const tableEmits = ["update:multiSelect", "update:defaultSort"];
-export const tableProps = {
-  tableProps: {
-    type: Object,
-    default() {
-      return {
-        tableData: [],
-        columnData: [],
-      };
-    },
-    validator(value) {
-      // 必须有 tableData和columnData 字段
-      const keys = Object.keys(value);
-      return ["tableData", "columnData"].every(
-        (key) => keys.indexOf(key) !== -1
-      );
-    },
-  },
-  columnWidth: {
-    type: Array,
-    default: () => {
-      return []
-    }
-  },
-  isMultiSelect: {//是否开启多选
-    type: Boolean,
-    default: false
-  },
-  multiSelect: {//多选数组
-    type: Array,
-    default: [],
-  },
-  multiSelectAttr: {
-    type: Object,
-    default: () => {
-      return {
-        width: '88'
-      }
-    }
-  },
-  selectableFn: {
-    //判断每行是否可选
-    type: Function
-  },
-  teleportDom: {
-    type: [String, Object],
-  },
-  defaultSort: {
-    type: Object,
-    default: () => {
-      return {}
-    }
-  },
-  pagination: {
-    type: [Number, String],
-  },
-  emptyText: {
-    type: String,
-    default: "暂无数据",
-  },
-  mergeList: Array,
-  alignLeftKeys: Array,
-  alignRightKeys: Array,
-  rowKey: String,
+import { ref } from "vue";
+
+export const tableEmits = ["update:multiSelect", "update:defaultSort"];
+export const tableProps = {
+  tableProps: {
+    type: Object,
+    default() {
+      return {
+        tableData: [],
+        columnData: [],
+      };
+    },
+    validator(value) {
+      // 必须有 tableData和columnData 字段
+      const keys = Object.keys(value);
+      return ["tableData", "columnData"].every(
+        (key) => keys.indexOf(key) !== -1
+      );
+    },
+  },
+  columnWidth: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  },
+  isMultiSelect: {//是否开启多选
+    type: Boolean,
+    default: false
+  },
+  multiSelect: {//多选数组
+    type: Array,
+    default: [],
+  },
+  multiSelectAttr: {
+    type: Object,
+    default: () => {
+      return {
+        width: '88'
+      }
+    }
+  },
+  selectableFn: {
+    //判断每行是否可选
+    type: Function
+  },
+  teleportDom: {
+    type: [String, Object],
+  },
+  defaultSort: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  },
+  pagination: {
+    type: [Number, String],
+  },
+  emptyText: {
+    type: String,
+    default: "暂无数据",
+  },
+  mergeList: Array,
+  alignLeftKeys: Array,
+  alignRightKeys: Array,
+  rowKey: String,
+  showOverflowTooltip: {
+    type: Boolean,
+    default: true
+  }
 }