ct-component-plus 0.0.42 → 0.0.43

package/packages/components/page/src/modules/TableTitle.vue

@@ -1,151 +1,151 @@
-<template>
-  <div :class="[ns.b()]">
-    <div :class="[ns.e('container')]">
-      <div :class="[ns.e('left')]">
-        <slot name="table-title">
-          <ct-icon
-            :class="[ns.e('total-icon')]"
-            name="content-search_line"></ct-icon>
-          <span>查询结果：</span>
-          <span>共{{ total }}条记录</span>
-          <span>，每页显示{{ pageSize }}条</span>
-          <slot name="table-desc"></slot>
-        </slot>
-      </div>
-      <div :class="[ns.e('right')]">
-        <slot name="table-handle">
-          <slot name="table-handle-before"></slot>
-          <div :class="[ns.e('handle')]">
-            <div
-              :class="[ns.e('handle-item'), ns.is(item, true)]"
-              v-for="(item, index) in handleList"
-              :key="index"
-              v-show="handleItemShow(item)">
-              <component
-                v-if="handleItemShow(item)"
-                :is="getHandleComponent(item)"
-                v-bind="handleOptionsBind(item)"
-                v-model:sortObj="modelSort"
-                @download="download" />
-            </div>
-          </div>
-          <slot name="table-handle-after"></slot>
-        </slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { reactive, onMounted, ref, computed } from "vue";
-import { useNamespace } from "../../../../hooks";
-import DownloadButton from "./DownloadButton.vue";
-import TableSort from "../../../table/src/TableSort.vue";
-const props = defineProps({
-  total: Number,
-  pageSize: Number,
-  handleList: {
-    type: Array,
-    default: () => {
-      return ["sort", "download"];
-    },
-  },
-  sortList: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  sortObj: {
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-});
-const emit = defineEmits(["update:sortObj", "changeSort", "download"]);
-const ns = useNamespace("page-table-title");
-const modelSort = computed({
-  get() {
-    return props.sortObj;
-  },
-  set(val) {
-    emit("update:sortObj", val);
-    if (val.prop && val.order) {
-      emit("changeSort", val);
-    }
-  },
-});
-const getHandleComponent = (type) => {
-  const componentMap = {
-    sort: TableSort,
-    download: DownloadButton,
-  };
-  return componentMap[type] || "div";
-};
-const handleOptionsBind = (item) => {
-  if (item === "sort") {
-    return { sortList: props.sortList };
-  }
-  return {};
-};
-const download = () => {
-  emit("download");
-};
-const handleItemShow = (item) => {
-  if (item === "sort") {
-    return props.sortList.length > 0;
-  }
-  return true;
-};
-onMounted(() => {});
-</script>
-<style lang="less" scoped>
-.ct-page-table-title {
-  &__container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 56px;
-    background-color: #fff;
-  }
-  &__left {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-  }
-  &__total-icon {
-    margin-right: 8px;
-  }
-  &__right {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-  &__handle {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    &-item {
-      &:not(:last-child) {
-        margin-right: 12px;
-      }
-      display: inline-flex;
-      align-items: center;
-      height: 28px;
-      padding: 0 9px;
-      color: var(--ct-color-primary);
-      border: 1px solid var(--ct-color-primary);
-      border-radius: 3px;
-      background-color: #fff;
-      cursor: pointer;
-      &:hover {
-        background-color: var(--ct-color-primary-bg);
-      }
-      :deep(.ct-icon) {
-        margin-right: 4px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div :class="[ns.b()]">
+    <div :class="[ns.e('container')]">
+      <div :class="[ns.e('left')]">
+        <slot name="table-title">
+          <ct-icon
+            :class="[ns.e('total-icon')]"
+            name="content-search_line"></ct-icon>
+          <span>查询结果：</span>
+          <span>共{{ total }}条记录</span>
+          <span>，每页显示{{ pageSize }}条</span>
+          <slot name="table-desc"></slot>
+        </slot>
+      </div>
+      <div :class="[ns.e('right')]">
+        <slot name="table-handle">
+          <slot name="table-handle-before"></slot>
+          <div :class="[ns.e('handle')]">
+            <div
+              :class="[ns.e('handle-item'), ns.is(item, true)]"
+              v-for="(item, index) in handleList"
+              :key="index"
+              v-show="handleItemShow(item)">
+              <component
+                v-if="handleItemShow(item)"
+                :is="getHandleComponent(item)"
+                v-bind="handleOptionsBind(item)"
+                v-model:sortObj="modelSort"
+                @download="download" />
+            </div>
+          </div>
+          <slot name="table-handle-after"></slot>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, onMounted, ref, computed } from "vue";
+import { useNamespace } from "../../../../hooks";
+import DownloadButton from "./DownloadButton.vue";
+import TableSort from "../../../table/src/TableSort.vue";
+const props = defineProps({
+  total: Number,
+  pageSize: Number,
+  handleList: {
+    type: Array,
+    default: () => {
+      return ["sort", "download"];
+    },
+  },
+  sortList: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  sortObj: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+});
+const emit = defineEmits(["update:sortObj", "changeSort", "download"]);
+const ns = useNamespace("page-table-title");
+const modelSort = computed({
+  get() {
+    return props.sortObj;
+  },
+  set(val) {
+    emit("update:sortObj", val);
+    if (val.prop && val.order) {
+      emit("changeSort", val);
+    }
+  },
+});
+const getHandleComponent = (type) => {
+  const componentMap = {
+    sort: TableSort,
+    download: DownloadButton,
+  };
+  return componentMap[type] || "div";
+};
+const handleOptionsBind = (item) => {
+  if (item === "sort") {
+    return { sortList: props.sortList };
+  }
+  return {};
+};
+const download = () => {
+  emit("download");
+};
+const handleItemShow = (item) => {
+  if (item === "sort") {
+    return props.sortList.length > 0;
+  }
+  return true;
+};
+onMounted(() => {});
+</script>
+<style lang="less" scoped>
+.ct-page-table-title {
+  &__container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 56px;
+    background-color: #fff;
+  }
+  &__left {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+  &__total-icon {
+    margin-right: 8px;
+  }
+  &__right {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+  &__handle {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    &-item {
+      &:not(:last-child) {
+        margin-right: 12px;
+      }
+      display: inline-flex;
+      align-items: center;
+      height: 28px;
+      padding: 0 9px;
+      color: var(--ct-color-primary);
+      border: 1px solid var(--ct-color-primary);
+      border-radius: 3px;
+      background-color: #fff;
+      cursor: pointer;
+      &:hover {
+        background-color: var(--ct-color-primary-bg);
+      }
+      :deep(.ct-icon) {
+        margin-right: 4px;
+      }
+    }
+  }
+}
+</style>