ct-component-plus 0.0.42 → 0.0.43

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

@@ -1,47 +1,47 @@
-<template>
-  <div :class="[ns.b()]">
-    <span v-if="haveIcon" :class="[ns.e('icon')]">
-      <slot name="icon" :menu="menu" :title="title">
-        <ct-icon v-if="icon" :name="icon"></ct-icon>
-      </slot>
-    </span>
-    <span :class="[ns.e('title')]">
-      <slot name="title" :menu="menu" :title="title">
-        {{ title }}
-      </slot>
-    </span>
-  </div>
-</template>
-
-<script setup>
-import { computed } from "vue";
-import { useNamespace } from "../../../hooks";
-const props = defineProps({
-  menu: {
-    type: Object,
-    default() {
-      return {};
-    },
-  },
-  icon: {
-    type: String,
-    default: "",
-  },
-  title: {
-    type: String,
-    default: "",
-  },
-});
-const ns = useNamespace("menu-item");
-const haveIcon = computed(() => props.icon || props.menu.haveIcon);
-</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);
-  }
-}
+<template>
+  <div :class="[ns.b()]">
+    <span v-if="haveIcon" :class="[ns.e('icon')]">
+      <slot name="icon" :menu="menu" :title="title">
+        <ct-icon v-if="icon" :name="icon"></ct-icon>
+      </slot>
+    </span>
+    <span :class="[ns.e('title')]">
+      <slot name="title" :menu="menu" :title="title">
+        {{ title }}
+      </slot>
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useNamespace } from "../../../hooks";
+const props = defineProps({
+  menu: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+  icon: {
+    type: String,
+    default: "",
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+});
+const ns = useNamespace("menu-item");
+const haveIcon = computed(() => props.icon || props.menu.haveIcon);
+</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/link.vue

@@ -1,29 +1,29 @@
-<template>
-  <Component :is="type" v-bind="linkProps(to)">
-    <slot></slot>
-  </Component>
-</template>
- 
-<script setup>
-const props = defineProps({
-  to: {
-    type: String,
-    required: true,
-  },
-  type: {
-    type: String,
-    required: true,
-  },
-});
-const linkProps = (to) => {
-  if (props.type === "a") {
-    return {
-      href: to,
-      target: "_blank",
-    };
-  }
-  return {
-    to: to,
-  };
-};
+<template>
+  <Component :is="type" v-bind="linkProps(to)">
+    <slot></slot>
+  </Component>
+</template>
+ 
+<script setup>
+const props = defineProps({
+  to: {
+    type: String,
+    required: true,
+  },
+  type: {
+    type: String,
+    required: true,
+  },
+});
+const linkProps = (to) => {
+  if (props.type === "a") {
+    return {
+      href: to,
+      target: "_blank",
+    };
+  }
+  return {
+    to: to,
+  };
+};
 </script>

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

@@ -1,26 +1,26 @@
-<template>
-  <div :class="[ns.b(), ns.is('collapse', collapse)]">
-    <img :class="ns.e('logo')" src="" alt="" />
-    <span :class="ns.e('title')"></span>
-  </div>
-</template>
-
-<script setup>
-import { reactive, onMounted } from "vue";
-import { useNamespace } from "../../../hooks";
-const props = defineProps({
-  collapse: {
-    type: Boolean,
-    default: false,
-  },
-  title: {
-    type: String,
-    default: "",
-  },
-});
-const ns = useNamespace("logo");
-const state = reactive({});
-onMounted(() => {});
-</script>
-<style lang='less'>
+<template>
+  <div :class="[ns.b(), ns.is('collapse', collapse)]">
+    <img :class="ns.e('logo')" src="" alt="" />
+    <span :class="ns.e('title')"></span>
+  </div>
+</template>
+
+<script setup>
+import { reactive, onMounted } from "vue";
+import { useNamespace } from "../../../hooks";
+const props = defineProps({
+  collapse: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+});
+const ns = useNamespace("logo");
+const state = reactive({});
+onMounted(() => {});
+</script>
+<style lang='less'>
 </style>

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

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