ct-component-plus 0.0.43 → 0.0.45

package/README.md

@@ -1,3 +1,3 @@
-# Vue 3 + Vite
-
-青塔组件库的 Vue 3 版本，使用 Vite 构建。
+# Vue 3 + Vite
+
+青塔组件库的 Vue 3 版本，使用 Vite 构建。

package/package.json

@@ -1,36 +1,36 @@
-{
-  "name": "ct-component-plus",
-  "private": false,
-  "version": "0.0.43",
-  "type": "module",
-  "main": "packages/components/index.js",
-  "files": [
-    "packages"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "docs:dev": "vuepress dev docs",
-    "docs:build": "vuepress build docs"
-  },
-  "dependencies": {
-    "cingta-icon": "^2.1.6",
-    "element-plus": "~2.3.4",
-    "vue": "^3.2.47"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^4.1.0",
-    "@vuepress/bundler-webpack": "^2.0.0-beta.63",
-    "axios": "^1.4.0",
-    "cingta-animation": "^0.2.5",
-    "clipboard-copy": "^4.0.1",
-    "echarts": "^5.4.2",
-    "less": "^4.1.3",
-    "less-loader": "^11.1.0",
-    "vite": "^4.3.2",
-    "vue-echarts": "^6.5.5",
-    "vuepress": "^2.0.0-beta.63",
-    "vuepress-plugin-demo-container": "^0.2.0"
-  }
-}
+{
+  "name": "ct-component-plus",
+  "private": false,
+  "version": "0.0.45",
+  "type": "module",
+  "main": "packages/components/index.js",
+  "files": [
+    "packages"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "docs:dev": "vuepress dev docs",
+    "docs:build": "vuepress build docs"
+  },
+  "dependencies": {
+    "cingta-icon": "^2.1.6",
+    "element-plus": "~2.3.4",
+    "vue": "^3.2.47"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.1.0",
+    "@vuepress/bundler-webpack": "^2.0.0-beta.63",
+    "axios": "^1.4.0",
+    "cingta-animation": "^0.2.5",
+    "clipboard-copy": "^4.0.1",
+    "echarts": "^5.4.2",
+    "less": "^4.1.3",
+    "less-loader": "^11.1.0",
+    "vite": "^4.3.2",
+    "vue-echarts": "^6.5.5",
+    "vuepress": "^2.0.0-beta.63",
+    "vuepress-plugin-demo-container": "^0.2.0"
+  }
+}

package/packages/components/button/index.js

@@ -1,9 +1,9 @@
-import CtButton from './src/button.vue';
-
-/* istanbul ignore next */
-CtButton.install = function (Vue) {
-  // TODO 这里的组件名是这这里写死的，不是使用CtButton.name的形式，因为setup里面不可以直接什么组件的name属性，故而这里没有这个属性，后续可以考虑使用defineOptions（需要安装unplugin-vue-macros插件）
-  Vue.component('CtButton', CtButton);
-};
-
+import CtButton from './src/button.vue';
+
+/* istanbul ignore next */
+CtButton.install = function (Vue) {
+  // TODO 这里的组件名是这这里写死的，不是使用CtButton.name的形式，因为setup里面不可以直接什么组件的name属性，故而这里没有这个属性，后续可以考虑使用defineOptions（需要安装unplugin-vue-macros插件）
+  Vue.component('CtButton', CtButton);
+};
+
 export default CtButton;

package/packages/components/button/src/button.vue

@@ -1,171 +1,171 @@
-<template>
-  <component
-    :is="tag"
-    ref="_ref"
-    :data-size="mapSize"
-    :class="[
-      ns.b(),
-      ns.m(type),
-      ns.m(mapSize),
-      ns.is('disabled', disabled),
-      ns.is('text', isText),
-    ]"
-    v-bind="$attrs"
-    @click="handleClick">
-    <span v-if="$slots.default" :class="[ns.e('text')]">
-      <slot />
-    </span>
-  </component>
-</template>
-
-<script setup>
-import { computed, onMounted, ref } from "vue";
-import { useNamespace } from "../../../hooks";
-const props = defineProps({
-  tag: {
-    type: String,
-    default: "button",
-  },
-  type: {
-    type: String,
-    default: "default",
-  },
-  size: String,
-  disabled: Boolean,
-});
-const emit = defineEmits(["click"]);
-const ns = useNamespace("button");
-const _ref = ref(null);
-const isText = computed(() => props.type.includes("text"));
-const mapSize = computed(() => {
-  if (props.size === "default") return "";
-  return props.size || (isText.value ? "small" : "");
-});
-const handleClick = (evt) => {
-  if (!props.disabled) {
-    // 禁用状态，点击事件也禁用
-    emit("click", evt);
-  }
-};
-defineExpose({
-  ref: _ref,
-});
-</script>
-<style lang="less">
-.ct-button {
-  cursor: pointer;
-  box-sizing: border-box;
-  text-align: center;
-  height: 32px;
-  padding: 0 16px;
-  border-radius: 3px;
-  border: none;
-  background-color: var(--ct-color-primary);
-  color: #fff;
-  --button-hover-opacity: 0.8;
-  &.is-text {
-    font-size: 15px;
-  }
-  &.is-disabled {
-    cursor: not-allowed;
-  }
-  &--default {
-    &:hover:not(.is-disabled) {
-      opacity: var(--button-hover-opacity);
-    }
-    &.is-disabled {
-      background: #a4afbb;
-    }
-  }
-  &--plain {
-    background-color: #f0f3f9;
-    color: var(--ct-color-black);
-    &:hover:not(.is-disabled) {
-      background-color: var(--ct-color-primary-bg);
-    }
-    &.is-disabled {
-      color: var(--ct-color-disabled);
-    }
-  }
-  &--border {
-    border: 1px solid var(--ct-color-primary);
-    background-color: #fff;
-    color: var(--ct-color-primary);
-    &:hover:not(.is-disabled) {
-      background-color: #f3f4ff;
-    }
-    &.is-disabled {
-      border-color: var(--ct-color-disabled);
-      color: var(--ct-color-disabled);
-    }
-  }
-  &--border-plain {
-    border: 1px solid var(--ct-border-color);
-    background-color: #fff;
-    color: var(--ct-color-black);
-    &:hover:not(.is-disabled) {
-      border-color: var(--ct-color-primary);
-      color: var(--ct-color-primary);
-    }
-    &.is-disabled {
-      border-color: var(--ct-color-disabled);
-      color: var(--ct-color-disabled);
-    }
-  }
-  &--text {
-    background-color: transparent;
-    color: var(--ct-color-primary);
-    &:hover:not(.is-disabled) {
-      opacity: var(--button-hover-opacity);
-    }
-    &.is-disabled {
-      color: var(--ct-color-disabled);
-    }
-  }
-  &--text-plain {
-    background-color: transparent;
-    color: var(--ct-color-black);
-    &:hover:not(.is-disabled) {
-      color: var(--ct-color-primary);
-    }
-    &.is-disabled {
-      color: var(--ct-color-disabled);
-    }
-  }
-  &--mini {
-    height: 24px;
-    padding: 0 12px;
-    font-size: 12px;
-    &.is-text {
-      font-size: 13px;
-    }
-  }
-  &--small {
-    height: 28px;
-    padding: 0 14px;
-    font-size: 13px;
-    &.is-text {
-      font-size: 14px;
-    }
-  }
-  &--default {
-    font-size: 14px;
-  }
-  &--large {
-    height: 36px;
-    padding: 0 20px;
-    font-size: 14px;
-    &.is-text {
-      font-size: 16px;
-    }
-  }
-  &__text {
-    display: inline-flex;
-    align-items: center;
-  }
-
-  & + & {
-    margin-left: 8px;
-  }
-}
-</style>
+<template>
+  <component
+    :is="tag"
+    ref="_ref"
+    :data-size="mapSize"
+    :class="[
+      ns.b(),
+      ns.m(type),
+      ns.m(mapSize),
+      ns.is('disabled', disabled),
+      ns.is('text', isText),
+    ]"
+    v-bind="$attrs"
+    @click="handleClick">
+    <span v-if="$slots.default" :class="[ns.e('text')]">
+      <slot />
+    </span>
+  </component>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { useNamespace } from "../../../hooks";
+const props = defineProps({
+  tag: {
+    type: String,
+    default: "button",
+  },
+  type: {
+    type: String,
+    default: "default",
+  },
+  size: String,
+  disabled: Boolean,
+});
+const emit = defineEmits(["click"]);
+const ns = useNamespace("button");
+const _ref = ref(null);
+const isText = computed(() => props.type.includes("text"));
+const mapSize = computed(() => {
+  if (props.size === "default") return "";
+  return props.size || (isText.value ? "small" : "");
+});
+const handleClick = (evt) => {
+  if (!props.disabled) {
+    // 禁用状态，点击事件也禁用
+    emit("click", evt);
+  }
+};
+defineExpose({
+  ref: _ref,
+});
+</script>
+<style lang="less">
+.ct-button {
+  cursor: pointer;
+  box-sizing: border-box;
+  text-align: center;
+  height: 32px;
+  padding: 0 16px;
+  border-radius: 3px;
+  border: none;
+  background-color: var(--ct-color-primary);
+  color: #fff;
+  --button-hover-opacity: 0.8;
+  &.is-text {
+    font-size: 15px;
+  }
+  &.is-disabled {
+    cursor: not-allowed;
+  }
+  &--default {
+    &:hover:not(.is-disabled) {
+      opacity: var(--button-hover-opacity);
+    }
+    &.is-disabled {
+      background: #a4afbb;
+    }
+  }
+  &--plain {
+    background-color: #f0f3f9;
+    color: var(--ct-color-black);
+    &:hover:not(.is-disabled) {
+      background-color: var(--ct-color-primary-bg);
+    }
+    &.is-disabled {
+      color: var(--ct-color-disabled);
+    }
+  }
+  &--border {
+    border: 1px solid var(--ct-color-primary);
+    background-color: #fff;
+    color: var(--ct-color-primary);
+    &:hover:not(.is-disabled) {
+      background-color: #f3f4ff;
+    }
+    &.is-disabled {
+      border-color: var(--ct-color-disabled);
+      color: var(--ct-color-disabled);
+    }
+  }
+  &--border-plain {
+    border: 1px solid var(--ct-border-color);
+    background-color: #fff;
+    color: var(--ct-color-black);
+    &:hover:not(.is-disabled) {
+      border-color: var(--ct-color-primary);
+      color: var(--ct-color-primary);
+    }
+    &.is-disabled {
+      border-color: var(--ct-color-disabled);
+      color: var(--ct-color-disabled);
+    }
+  }
+  &--text {
+    background-color: transparent;
+    color: var(--ct-color-primary);
+    &:hover:not(.is-disabled) {
+      opacity: var(--button-hover-opacity);
+    }
+    &.is-disabled {
+      color: var(--ct-color-disabled);
+    }
+  }
+  &--text-plain {
+    background-color: transparent;
+    color: var(--ct-color-black);
+    &:hover:not(.is-disabled) {
+      color: var(--ct-color-primary);
+    }
+    &.is-disabled {
+      color: var(--ct-color-disabled);
+    }
+  }
+  &--mini {
+    height: 24px;
+    padding: 0 12px;
+    font-size: 12px;
+    &.is-text {
+      font-size: 13px;
+    }
+  }
+  &--small {
+    height: 28px;
+    padding: 0 14px;
+    font-size: 13px;
+    &.is-text {
+      font-size: 14px;
+    }
+  }
+  &--default {
+    font-size: 14px;
+  }
+  &--large {
+    height: 36px;
+    padding: 0 20px;
+    font-size: 14px;
+    &.is-text {
+      font-size: 16px;
+    }
+  }
+  &__text {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  & + & {
+    margin-left: 8px;
+  }
+}
+</style>

package/packages/components/cascader/index.js

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