ct-component-plus 0.0.1

package/packages/components/menu/src/menu-item.vue

@@ -0,0 +1,104 @@
+<template>
+  <template v-if="isLastOne">
+    <app-link :to="routerLink" :type="linkType" @click="clickLinkMenu(menu)">
+      <el-tooltip
+        :disabled="!collapse && menu.label.length <= 10"
+        effect="dark"
+        :content="menu.label"
+        placement="right"
+      >
+        <el-menu-item :index="menuIndex" class="ct-menu-item">
+          <i v-if="haveIcon" class="ct-menu-item__icon">
+            <slot name="icon" :menu="menu" :title="menu.label"> </slot>
+          </i>
+          <template #title>
+            <slot name="title" :menu="menu" :title="menu.label">
+              {{ menu.label }}
+            </slot>
+          </template>
+        </el-menu-item>
+      </el-tooltip>
+    </app-link>
+  </template>
+  <el-sub-menu v-else :index="menuIndex" popper-class="ct-menu">
+    <template #title>
+      <i class="ct-menu-item__icon">
+        <slot name="icon" :menu="menu" :title="menu.label"></slot>
+      </i>
+      <span>
+        <slot name="title" :menu="menu" :title="menu.label">
+          {{ menu.label }}
+        </slot>
+      </span>
+    </template>
+    <menu-item
+      v-for="child in menu.children"
+      :key="child.router || child.value"
+      :menu="child"
+      :is-nest="true"
+      class="is-nest-menu"
+      @clickMenu="clickLinkMenu"
+    >
+      <template #icon="{ menu }">
+        <slot name="icon" :menu="menu">
+          <ct-icon v-if="menu.icon" :name="menu.icon"></ct-icon>
+        </slot>
+      </template>
+      <template #title="{ menu }">
+        <slot name="title" :menu="menu"> {{ menu.label }} </slot>
+      </template>
+    </menu-item>
+  </el-sub-menu>
+</template>
+
+<script setup>
+import { onMounted, computed } from "vue";
+import appLink from "./link.vue";
+import { getMenuIndex } from "./utils";
+const props = defineProps({
+  menu: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+  isNest: {
+    type: Boolean,
+    default: false,
+  },
+  collapse: Boolean,
+});
+const emit = defineEmits(["clickMenu"]);
+const isLastOne = computed(() => {
+  const item = props.menu;
+  return !item.children || !item.children.length;
+});
+const menuIndex = computed(() => {
+  return getMenuIndex(props.menu);
+});
+const routerLink = computed(() => {
+  return props.menu.outLink || props.menu.router;
+});
+const linkType = computed(() => {
+  //判断跳转链接的方式是a标签还是router-link
+  if (props.menu.linkType) return props.menu.linkType;
+  let type = "router-link";
+  if (props.menu.outLink) type = "a";
+  return type;
+});
+const haveIcon = computed(() => props.menu.icon || props.menu.haveIcon);
+const clickLinkMenu = (menu) => {
+  emit("clickMenu", menu);
+};
+onMounted(() => {});
+</script>
+<style lang='less'>
+.ct-menu-item {
+  display: flex;
+  align-items: center;
+  &__icon {
+    margin-right: var(--ct-menu-icon-margin);
+    font-size: var(--ct-menu-icon-size);
+  }
+}
+</style>

package/packages/components/menu/src/menu.vue

@@ -0,0 +1,192 @@
+<template>
+  <div :class="[ns.b(), ns.is('collapse', collapse)]">
+    <el-menu
+      :default-active="defaultActive"
+      ref="menuRef"
+      :collapse="collapse"
+      :collapse-transition="collapseTransition"
+      @select="selectMenu"
+      v-bind="$attrs"
+    >
+      <div :class="[ns.e('logo'), ns.is('collapse', collapse)]" v-if="showLogo">
+        <slot name="logo" :collapse="collapse"></slot>
+      </div>
+      <menu-item
+        v-for="menu in menuList"
+        :key="menu.router || menu.value"
+        :menu="menu"
+        :collapse="collapse"
+        @click-menu="clickMenu"
+      >
+        <template #icon="{ menu }">
+          <slot
+            name="menu-icon"
+            :menu="menu"
+            :is-active="activeMenuIndex === getMenuIndex(menu)"
+          >
+            <ct-icon v-if="menu.icon" :name="menu.icon"></ct-icon>
+          </slot>
+        </template>
+        <template #title="{ menu }">
+          <slot
+            name="menu-title"
+            :menu="menu"
+            :is-active="activeMenuIndex === getMenuIndex(menu)"
+          >
+            {{ menu.label }}
+          </slot>
+        </template>
+      </menu-item>
+    </el-menu>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import { useNamespace } from "../../../hooks";
+import menuItem from "./menu-item.vue";
+import { getMenuIndex } from "./utils";
+const props = defineProps({
+  menuList: {
+    type: Array,
+    default: () => [],
+  },
+  defaultActive: {
+    type: String,
+    default: "",
+  },
+  collapseTransition: {
+    //这里默认关闭折叠动画
+    type: Boolean,
+    default: true,
+  },
+  showLogo: Boolean,
+  collapse: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["clickMenu", "select"]);
+const ns = useNamespace("menu");
+const menuRef = ref(null);
+const isCollapse = ref(false);
+const activeMenuIndex = ref("");
+const clickMenu = (menu) => {
+  emit("clickMenu", menu);
+};
+const selectMenu = (...args) => {
+  activeMenuIndex.value = args[0];
+  emit("select", ...args);
+};
+onMounted(() => {
+  activeMenuIndex.value = props.defaultActive || "";
+});
+
+defineExpose({
+  menuRef,
+  collapse: isCollapse,
+});
+</script>
+<style lang='less'>
+body {
+  --ct-menu-bg-color: #d7e0ea;
+  --ct-menu-popper-width: 224px;
+  --ct-menu-item-height: 38px;
+  --ct-menu-line-space: 12px;
+  --ct-menu-item-border-radius: 5px;
+  --ct-menu-icon-margin: 10px;
+  --ct-menu-icon-size: 16px;
+  --el-menu-icon-width: var(--ct-menu-icon-size);
+  --el-menu-item-height: var(--ct-menu-item-height);
+  --el-menu-sub-item-height: var(--ct-menu-item-height);
+  --el-menu-bg-color: var(--ct-menu-bg-color);
+  --el-menu-base-level-padding: 12px;
+  --el-menu-level-padding: 26px;
+  --el-menu-hover-bg-color: rgba(255, 255, 255, 0.6);
+  --el-menu-text-color: var(--ct-color-black);
+}
+.ct-menu {
+  width: var(--ct-layout-menu-width, 224px);
+  &__logo {
+    background-color: var(--ct-menu-bg-color);
+    // &.is-collapse {
+    //   width: var(--ct-layout-menu-width_collapse);
+    // }
+  }
+  & > .el-menu {
+    padding: 8px 12px;
+  }
+  .el-menu {
+    border-right: none;
+    &--collapse {
+      width: var(--ct-layout-menu-width_collapse);
+      --ct-menu-icon-margin: 0;
+      --ct-menu-icon-size: 18px;
+      --ct-menu-line-space: 14px;
+      .ct-menu-item {
+        &__title {
+          display: none;
+        }
+      }
+      .el-sub-menu {
+        &.is-active {
+          background-color: #fff;
+          box-shadow: 0px 4px 20px 0px rgba(130, 146, 181, 0.06);
+          border-radius: 5px;
+          .ct-icon {
+            color: var(--el-menu-active-color);
+          }
+        }
+      }
+    }
+  }
+  .el-menu-item,
+  .el-sub-menu__title {
+    margin-top: var(--ct-menu-line-space);
+    border-radius: var(--ct-menu-item-border-radius);
+    font-weight: 600;
+    * {
+      vertical-align: unset;
+    }
+    &.is-active {
+      background-color: #fff;
+      box-shadow: 0px 4px 20px 0px rgba(130, 146, 181, 0.06);
+    }
+  }
+  .el-sub-menu {
+    &__title {
+      font-weight: 600;
+    }
+    .el-sub-menu__icon-arrow {
+      width: 14px;
+      height: 14px;
+      background: url("./assets/plus_line.svg") no-repeat center center;
+      > svg {
+        display: none;
+      }
+    }
+  }
+  .is-nest-menu {
+    .el-menu-item {
+      &:not(.is-active) {
+        font-weight: 400;
+      }
+    }
+  }
+  &.el-popper {
+    --ct-layout-menu-width: 175px;
+    --ct-menu-line-space: 6px;
+    --el-menu-base-level-padding: 16px;
+    transform: translateX(15px);
+    &.is-light {
+      border: none;
+    }
+    .el-menu {
+      &--popup {
+        min-width: unset;
+        padding: 4px 12px 10px;
+      }
+    }
+  }
+}
+</style>

package/packages/components/menu/src/utils/index.js

@@ -0,0 +1,5 @@
+
+export const getMenuIndex = (menu) => {
+  if (!menu) return '';
+  return menu.router || menu.value || menu.label
+} 

package/packages/components/message/icon/ErrorIcon.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+    :width="size + 'px'"
+    :height="size + 'px'"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M12.001 1.559c5.767 0 10.442 4.674 10.442 10.441S17.768 22.441 12 22.441c-5.766 0-10.44-4.674-10.44-10.441S6.234 1.559 12 1.559zM9.457 8.183a.5.5 0 00-.707 0l-.566.566a.5.5 0 000 .707L10.728 12l-2.544 2.544a.5.5 0 000 .707l.566.566a.5.5 0 00.707 0l2.544-2.544 2.545 2.544a.5.5 0 00.707 0l.565-.566a.5.5 0 000-.707L13.274 12l2.544-2.544a.5.5 0 000-.707l-.565-.566a.5.5 0 00-.707 0L12 10.727z"
+      fill="var(--ct-color-danger)"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "ErrorIcon",
+  props: {
+    size: {
+      type: [Number, String],
+      default: 18,
+    },
+  },
+};
+</script>

package/packages/components/message/icon/InfoIcon.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+    :width="size + 'px'"
+    :height="size + 'px'"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M12.003 1.559c5.766 0 10.44 4.674 10.44 10.441s-4.674 10.441-10.44 10.441C6.236 22.441 1.56 17.767 1.56 12S6.236 1.559 12.003 1.559zm.576 8.315H10.77a.5.5 0 00-.5.5v.7a.5.5 0 00.5.5h.609v4.303h-.866a.5.5 0 00-.5.5v.7a.5.5 0 00.5.5h3.332a.5.5 0 00.5-.5v-.7a.5.5 0 00-.5-.5h-.766v-5.503a.5.5 0 00-.5-.5zm.032-3.315h-1.217a.5.5 0 00-.5.5v1.217a.5.5 0 00.5.5h1.217a.5.5 0 00.5-.5V7.06a.5.5 0 00-.5-.5z"
+      fill="var(--ct-color-primary)"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "InfoIcon",
+  props: {
+    size: {
+      type: [Number, String],
+      default: 18,
+    },
+  },
+};
+</script>

package/packages/components/message/icon/SuccessIcon.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+    :width="size + 'px'"
+    :height="size + 'px'"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M12 1.559c5.767 0 10.441 4.674 10.441 10.441S17.767 22.441 12 22.441 1.559 17.767 1.559 12 6.233 1.559 12 1.559zm5.012 6.81a.5.5 0 00-.708 0l-5.236 5.236-2.649-2.65a.5.5 0 00-.707 0l-.566.567a.5.5 0 000 .707l3.286 3.285a.9.9 0 001.273 0l5.872-5.872a.5.5 0 000-.708z"
+      fill="var(--ct-color-success)"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "SuccessIcon",
+  props: {
+    size: {
+      type: [Number, String],
+      default: 18,
+    },
+  },
+};
+</script>

package/packages/components/message/icon/WarningIcon.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+    :width="size + 'px'"
+    :height="size + 'px'"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M12 1.559c5.767 0 10.441 4.674 10.441 10.441S17.767 22.441 12 22.441 1.559 17.767 1.559 12 6.233 1.559 12 1.559zm.609 13.474H11.39a.5.5 0 00-.5.5v1.217a.5.5 0 00.5.5h1.218a.5.5 0 00.5-.5v-1.217a.5.5 0 00-.5-.5zm-.209-8.8h-.8a.5.5 0 00-.5.5v6.702a.5.5 0 00.5.5h.8a.5.5 0 00.5-.5V6.732a.5.5 0 00-.5-.5z"
+      fill="var(--ct-color-warning)"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "WarningIcon",
+  props: {
+    size: {
+      type: [Number, String],
+      default: 18,
+    },
+  },
+};
+</script>

package/packages/components/message/index.js

@@ -0,0 +1,9 @@
+import CtMessage from './src/method.js';
+
+/* istanbul ignore next */
+CtMessage.install = function (app) {
+  app.config.globalProperties['CtMessage'] = CtMessage;
+  app.provide('CtMessage', CtMessage);
+};
+
+export default CtMessage;

package/packages/components/message/src/method.js

@@ -0,0 +1,55 @@
+import { ElMessage } from "element-plus";
+import SuccessIcon from "../icon/SuccessIcon.vue";
+import InfoIcon from "../icon/InfoIcon.vue";
+import WarningIcon from "../icon/WarningIcon.vue";
+import ErrorIcon from "../icon/ErrorIcon.vue";
+const success = (message, option) => {
+  ElMessage({
+    type: 'success',
+    customClass: 'ct-message--success',
+    message: message,
+    duration: 3000,
+    showClose: true,
+    icon: SuccessIcon,
+    ...option
+  })
+}
+const info = (message, option) => {
+  ElMessage({
+    type: 'info',
+    customClass: 'ct-message--info',
+    message: message,
+    duration: 3000,
+    showClose: true,
+    icon: InfoIcon,
+    ...option
+  })
+}
+const warning = (message, option) => {
+  ElMessage({
+    type: 'warning',
+    customClass: 'ct-message--warning',
+    message: message,
+    duration: 3000,
+    showClose: true,
+    icon: WarningIcon,
+    ...option
+  })
+}
+const error = (message, option) => {
+  ElMessage({
+    type: 'error',
+    customClass: 'ct-message--error',
+    message: message,
+    duration: 3000,
+    showClose: true,
+    icon: ErrorIcon,
+    ...option
+  })
+}
+export default {
+  success,
+  info,
+  warning,
+  error
+}

package/packages/components/message-box/index.js

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

package/packages/components/message-box/src/message-box.vue

@@ -0,0 +1,108 @@
+<template>
+  <el-dialog
+    :class="[ns.b()]"
+    v-model="dialogVisible"
+    :title="title"
+    :width="width"
+    :show-close="false"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+  >
+    <template #header="{ titleId, titleClass }">
+      <div :id="titleId" :class="[titleClass, ns.e('title')]">
+        <ct-icon
+          name="tip_solid"
+          :color="iconColor"
+          size="26"
+          :style="{ color: iconColor }"
+        ></ct-icon>
+        {{ title }}
+      </div>
+    </template>
+    <slot></slot>
+    <template #footer>
+      <el-button :type="buttonType" @click="handleConfirm">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed } from "vue";
+import { useNamespace } from "../../../hooks";
+const ns = useNamespace("message-box");
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: "登录异常通知",
+  },
+  width: {
+    type: [String, Number],
+    default: 480,
+  },
+  type: {
+    type: String,
+    default: "info",
+  },
+});
+const emit = defineEmits(["update:modelValue", "handleConfirm"]);
+
+const dialogVisible = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit("update:modelValue", val);
+  },
+});
+const buttonType = computed(() => {
+  return props.type == "info"
+    ? "primary"
+    : props.type == "error"
+    ? "danger"
+    : "warning";
+});
+const iconColor = computed(() => {
+  return props.type == "info"
+    ? "#4D64FF"
+    : props.type == "error"
+    ? "#FF4D4D"
+    : "#FFAD2C";
+});
+const handleConfirm = () => {
+  emit("handleConfirm");
+};
+</script>
+
+<style lang='less'>
+.el-dialog.ct-message-box{
+  border-radius: var(--ct-border-radius-l);
+  @R: .el-dialog;
+  @{R}__header {
+    padding: 24px 40px !important;
+    margin-right: 0 !important;
+    position: relative;
+  }
+  @{R}__title{
+    display: flex;
+    align-items: center;
+    line-height: 26px;
+    .ct-icon{
+      margin-right: 14px;
+    }
+  }
+  @{R}__body {
+    padding: 0 40px 32px !important;
+    font-size: 15px;
+    line-height: 28px;
+  }
+  @{R}__footer {
+    padding: 0 40px 32px !important;
+  }
+}
+</style>

package/packages/components/pagination/index.js

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

package/packages/components/pagination/src/pagination.vue

@@ -0,0 +1,37 @@
+<template>
+  <el-pagination
+    :layout="$attrs.layout || paginationLayout"
+    :background="background"
+    :class="{ [ns.b()]: true, 'have-border': !background && border }"
+    :pager-count="9"
+  />
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useNamespace } from "../../../hooks";
+const props = defineProps({
+  border: {
+    type: Boolean,
+    default: true,
+  },
+  background: {
+    type: Boolean,
+    default: false,
+  },
+  showJump: {
+    type: Boolean,
+    default: false,
+  },
+});
+const ns = useNamespace("pagination");
+const paginationLayout = computed(() => {
+  const layout = ["prev", "pager", "next"];
+  if (props.showJump) {
+    layout.push("jumper");
+  }
+  return layout.join(",");
+});
+</script>
+<style lang='less'>
+</style>

package/packages/components/radio/index.js

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

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

@@ -0,0 +1,13 @@
+import { buriedParamsKey, searchComponentProps } from '../../../hooks';
+
+export const radioEmits = ["update:modelValue", buriedParamsKey];
+export const radioProps = {
+  ...searchComponentProps,
+  modelValue: String,
+  options: {
+    type: Array,
+    default() {
+      return []
+    }
+  }
+}