ct-component-plus 0.0.1

package/README.md

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

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "ct-component-plus",
+  "private": false,
+  "version": "0.0.1",
+  "type": "module",
+  "main": "packages/index.js",
+  "files": [
+    "packages"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lib": "vite build --target lib --outDir lib  packages/index.js",
+    "preview": "vite preview",
+    "docs:dev": "vuepress dev docs",
+    "docs:build": "vuepress build docs"
+  },
+  "dependencies": {
+    "cingta-animation": "^0.2.3",
+    "cingta-icon": "^2.0.0",
+    "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",
+    "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

@@ -0,0 +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);
+};
+
+export default CtButton;

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

@@ -0,0 +1,172 @@
+<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: var(--ct-color-primary-bg);
+    }
+    &.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: #fff;
+    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: #fff;
+    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

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

package/packages/components/cascader/src/cascader.vue

@@ -0,0 +1,224 @@
+<template>
+  <el-cascader
+    ref="cascaderRef"
+    :class="[
+      ns.b(),
+      ns.is('disabled', disabled),
+      ns.is('filterable', filterable),
+    ]"
+    v-model="showValue"
+    :props="propsShow"
+    :options="optionsShow"
+    :show-all-levels="showAllLevels"
+    :filterable="filterable"
+    :clearable="clearable"
+    :popper-class="popperClassShow"
+    v-bind="{ ...$attrs, ...rawAttr }"
+  />
+  <!-- <Teleport :to="appendPanelDom">
+    <span>大写的六</span>
+  </Teleport> -->
+</template>
+
+<script setup>
+import { onMounted, computed, ref, watch, inject, watchEffect } from "vue";
+import { cascaderEmits, cascaderProps } from "./index";
+import { useNamespace, useBuriedParams } from "../../../hooks";
+import { isArray, isFunction } from "../../../utils";
+const props = defineProps(cascaderProps);
+const emit = defineEmits(cascaderEmits);
+const baseDao = inject("$ctBaseDao");
+const serviceConfig = inject("$ctServiceConfig");
+
+const ns = useNamespace("cascader");
+const cascaderRef = ref(null);
+const checkedText = ref("");
+const propsShow = computed(() => {
+  return {
+    ...(props.props || {}),
+    multiple: props.multiple || props.props?.multiple || false,
+    label: props.mapObj?.label || "label",
+    value: props.mapObj?.value || "value",
+    children: props.mapObj?.children || "children",
+  };
+});
+const optionsByApi = ref([]);
+const optionsShow = computed(() => {
+  return optionsByApi.value.length ? optionsByApi.value : props.options;
+});
+const showValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(newValue) {
+    emit("update:modelValue", newValue);
+  },
+});
+const popperClassShow = computed(() => {
+  let popperClass = ns.e("dropdown");
+  popperClass += props.popperClass || "";
+  if (propsShow.value.multiple) {
+    popperClass += " " + ns.is("multiple");
+  }
+  return popperClass;
+});
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    getCheckedText();
+  }
+);
+const appendPanelDom = document.createElement("div");
+
+const getCheckedText = () => {
+  const getCheckedNodes = cascaderRef.value?.getCheckedNodes;
+  if (getCheckedNodes) {
+    const textArr = getCheckedNodes();
+    if (props.showAllLevels)
+      checkedText.value = textArr
+        .map((item) => {
+          if (isArray(item.pathLabels))
+            return item.pathLabels.join(props.separator);
+          return item.label;
+        })
+        .join(props.separatorMultiple);
+    else {
+      checkedText.value = textArr
+        .map((item) => item.label)
+        .join(props.separatorMultiple);
+    }
+  }
+};
+
+const appendDom2Panel = () => {
+  const dom = cascaderRef.value?.contentRef;
+  if (dom) {
+    const referenceNode = dom?.children[0];
+    // appendPanelDom = document.createElement("div");
+    appendPanelDom.setAttribute("id", "cascader-panel-append");
+    dom.insertBefore(appendPanelDom, referenceNode);
+    // dom.appendChild(div);
+  }
+};
+useBuriedParams(props, emit);
+watchEffect(async () => {
+  // 通过api获取数据，会监听api以及serviceParams的改变（收集到的依赖改变）都会触发重新查询
+  const cbs = props.cbs || {};
+  if (props.api && baseDao) {
+    try {
+      const method = props.serviceMethod || serviceConfig.defaultMethod;
+      let params = props.serviceParams || {};
+      if (isFunction(cbs.beforeSearch)) {
+        const paramsHandle = await cbs.beforeSearch(params);
+        if (paramsHandle === false) return;
+        params = paramsHandle || params;
+      }
+
+      baseDao[method](props.api, params).then((res) => {
+        const mapObj = props.mapObj || {};
+        const { list } = mapObj; //其他参数放入propsShow
+        let data = [];
+        if (list) {
+          data = res[list];
+        } else {
+          data = res;
+        }
+
+        optionsByApi.value = data;
+        if (isFunction(cbs.afterSearch)) {
+          cbs.afterSearch(res, optionsByApi, showValue);
+        }
+      });
+    } catch (error) {}
+  }
+  if (isFunction(cbs.defineSearch)) {
+    try {
+      const defineSearchHandle = await cbs.defineSearch(
+        optionsByApi,
+        showValue
+      );
+      if (defineSearchHandle === false) return;
+      if (defineSearchHandle) {
+        optionsByApi.value = defineSearchHandle;
+      }
+    } catch (error) {}
+  }
+});
+onMounted(() => {
+  appendDom2Panel();
+});
+</script>
+<style lang='less'>
+.ct-cascader {
+  width: var(--ct-component-width);
+  --ct-cascader-inner-height: var(--ct-component-inner-height);
+  &.is-filterable {
+    .el-cascader__tags {
+      &:focus-within {
+        .el-tag {
+          display: none;
+        }
+      }
+    }
+  }
+  .el-cascader__tags {
+    display: inline-flex;
+    // display: inline-block;
+    align-items: center;
+    flex-wrap: nowrap;
+    height: var(--ct-cascader-inner-height);
+    padding-left: var(--ct-component-inner-padding);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    .el-tag {
+      display: inline;
+      height: auto;
+      padding: 0;
+      margin: 0;
+      background-color: inherit;
+      font-size: var(--ct-font-size);
+      color: var(--ct-color-black);
+      &:not(:last-of-type)::after {
+        content: "、";
+      }
+    }
+    .el-tag__close {
+      display: none;
+    }
+  }
+  &__dropdown {
+    &:not(.is-multiple) {
+      .el-cascader__suggestion-item {
+        &.is-checked {
+          .el-icon {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+  .el-cascader__search-input {
+    position: absolute;
+    left: var(--ct-component-inner-padding);
+    top: 50%;
+    transform: translateY(-50%);
+    height: var(--ct-cascader-inner-height);
+    width: calc(100% - var(--ct-component-inner-padding));
+    font-size: var(--ct-font-size);
+    margin: 0;
+  }
+  .el-input__wrapper {
+    position: relative;
+    .el-input__inner {
+      height: var(--ct-cascader-inner-height) !important;
+    }
+    &::after {
+      position: absolute;
+      content: v-bind(checkedText);
+      // content: "11111";
+      left: var(--ct-component-inner-padding);
+    }
+  }
+}
+</style>