ct-component-plus 0.0.43 → 0.0.44

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

@@ -1,192 +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;
-      }
-    }
-  }
-}
+<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

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

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

@@ -1,25 +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>
+<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

@@ -1,25 +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>
+<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

@@ -1,25 +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>
+<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

@@ -1,25 +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>
+<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

@@ -1,9 +1,9 @@
-import CtMessage from './src/method.js';
-
-/* istanbul ignore next */
-CtMessage.install = function (app) {
-  app.config.globalProperties['CtMessage'] = CtMessage;
-  app.provide('CtMessage', CtMessage);
-};
-
+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;