ct-component-plus 0.0.1

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

@@ -0,0 +1,261 @@
+<template>
+  <el-tooltip
+    ref="tooltipRef"
+    :visible="popperVisible"
+    :teleported="teleported"
+    :popper-class="[nsCascader.e('dropdown'), popperClass]"
+    :popper-options="popperOptions"
+    :fallback-placements="fallbackPlacements"
+    :stop-popper-mouse-event="false"
+    :gpu-acceleration="false"
+    placement="bottom-start"
+    transition="el-cascader-zoom-in-top"
+    effect="light"
+    pure
+    persistent
+    @hide="hideSuggestionPanel"
+  >
+    <template #default>
+      <div
+        v-clickoutside:[contentRef]="() => togglePopperVisible(false)"
+        :class="cascaderKls"
+        :style="cascaderStyle"
+        @click="() => togglePopperVisible(readonly ? undefined : true)"
+        @keydown="handleKeyDown"
+        @mouseenter="inputHover = true"
+        @mouseleave="inputHover = false"
+      >
+        <el-input
+          ref="input"
+          v-model="inputValue"
+          :placeholder="currentPlaceholder"
+          :readonly="readonly"
+          :disabled="isDisabled"
+          :validate-event="false"
+          :class="inputClass"
+          :tabindex="multiple && filterable && !isDisabled ? -1 : undefined"
+          @compositionstart="handleComposition"
+          @compositionupdate="handleComposition"
+          @compositionend="handleComposition"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @input="handleInput"
+        >
+        </el-input>
+      </div>
+    </template>
+    <template #content>
+      <el-cascader-panel
+        v-show="!filtering"
+        ref="cascaderPanelRef"
+        v-model="checkedValue"
+        :options="options"
+        :props="props.props"
+        :border="false"
+        :render-label="$slots.default"
+        @expand-change="handleExpandChange"
+        @close="$nextTick(() => togglePopperVisible(false))"
+      />
+    </template>
+  </el-tooltip>
+</template>
+
+<script setup>
+import { onMounted, computed, nextTick, ref, useAttrs } from "vue";
+import { cascaderEmits, cascaderProps } from "./index";
+import { useNamespace, useBuriedParams } from "../../../hooks";
+import { ClickOutside as vClickoutside } from "../../../directives";
+import { EVENT_CODE } from "../../../constants";
+const props = defineProps(cascaderProps);
+const emit = defineEmits(cascaderEmits);
+const attrs = useAttrs();
+
+const nsCascader = useNamespace("cascader");
+
+const inputPlaceholder = computed(() => props.placeholder || "请选择");
+const isDisabled = computed(() => props.disabled);
+const multiple = computed(() => !!props.props.multiple);
+const readonly = computed(() => !props.filterable || multiple.value);
+const tooltipRef = ref(null);
+const popperVisible = ref(false);
+const popperOptions = {
+  modifiers: [
+    {
+      name: "arrowPosition",
+      enabled: true,
+      phase: "main",
+      fn: ({ state }) => {
+        const { modifiersData, placement } = state;
+        if (["right", "left", "bottom", "top"].includes(placement)) return;
+        modifiersData.arrow.x = 35;
+      },
+      requires: ["arrow"],
+    },
+  ],
+};
+const fallbackPlacements = [
+  "bottom-start",
+  "bottom",
+  "top-start",
+  "top",
+  "right",
+  "left",
+];
+
+const isOnComposition = ref(false);
+const contentRef = computed(() => {
+  return tooltipRef.value
+    ? tooltipRef.value.popperRef
+      ? tooltipRef.value.popperRef.contentRef
+      : ""
+    : "";
+});
+const cascaderKls = computed(() => {
+  return [
+    "el-cascader",
+    nsCascader.b(),
+    nsCascader.is("disabled", isDisabled.value),
+    attrs.class,
+  ];
+});
+const cascaderStyle = computed(() => {
+  return attrs.style;
+});
+const inputClass = computed(() => {
+  return nsCascader.is("focus", popperVisible.value);
+});
+const input = ref(null);
+const inputHover = ref(false);
+const filtering = ref(false);
+const inputValue = ref("");
+const currentPlaceholder = computed(() => {
+  return isOnComposition.value ? "" : inputPlaceholder.value;
+});
+const checkedNodes = computed(() => cascaderPanelRef.value?.checkedNodes || []);
+const cascaderPanelRef = ref(null);
+const presentText = computed(() => {
+  const { showAllLevels, separator } = props;
+  const nodes = checkedNodes.value;
+  return nodes.length
+    ? multiple.value
+      ? ""
+      : nodes[0].calcText(showAllLevels, separator)
+    : "";
+});
+
+const suggestionPanel = ref(null);
+const checkedValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit("update:modelValue", val);
+    emit("change", val);
+  },
+});
+
+const handleExpandChange = (value) => {
+  updatePopperPosition();
+  emit("expandChange", value);
+};
+const handleFocus = (e) => {
+  emit("focus", e);
+};
+
+const handleBlur = (e) => {
+  emit("blur", e);
+};
+const handleInput = (val, e) => {
+  !popperVisible.value && togglePopperVisible(true);
+
+  if (e?.isComposing) return;
+};
+const handleComposition = (event) => {
+  const text = event.target?.value;
+  if (event.type === "compositionend") {
+    isOnComposition.value = false;
+    nextTick(() => handleInput(text));
+  } else {
+    isOnComposition.value = true;
+  }
+};
+const handleKeyDown = (e) => {
+  if (isOnComposition.value) return;
+
+  switch (e.code) {
+    case EVENT_CODE.enter:
+      togglePopperVisible();
+      break;
+    case EVENT_CODE.down:
+      togglePopperVisible(true);
+      nextTick(focusFirstNode);
+      e.preventDefault();
+      break;
+    case EVENT_CODE.esc:
+      if (popperVisible.value === true) {
+        e.preventDefault();
+        e.stopPropagation();
+        togglePopperVisible(false);
+      }
+      break;
+    case EVENT_CODE.tab:
+      togglePopperVisible(false);
+      break;
+  }
+};
+const focusFirstNode = () => {
+  let firstNode = null;
+
+  if (filtering.value && suggestionPanel.value) {
+    firstNode = suggestionPanel.value.$el.querySelector(
+      ".el-cascader__suggestion-item"
+    );
+  } else {
+    firstNode = cascaderPanelRef.value?.$el.querySelector(
+      '.el-cascader-node[tabindex="-1"]'
+    );
+  }
+
+  if (firstNode) {
+    firstNode.focus();
+    !filtering.value && firstNode.click();
+  }
+};
+const togglePopperVisible = (visible) => {
+  if (isDisabled.value) return;
+
+  visible = visible ?? !popperVisible.value;
+
+  if (visible !== popperVisible.value) {
+    popperVisible.value = visible;
+    input.value?.input?.setAttribute("aria-expanded", `${visible}`);
+
+    if (visible) {
+      updatePopperPosition();
+      nextTick(cascaderPanelRef.value?.scrollToExpandingNode);
+    } else if (props.filterable) {
+      syncPresentTextValue();
+    }
+
+    emit("visibleChange", visible);
+  }
+};
+const syncPresentTextValue = () => {
+  const { value } = presentText;
+  inputValue.value = value;
+  searchInputValue.value = value;
+};
+const updatePopperPosition = () => {
+  nextTick(() => {
+    tooltipRef.value?.updatePopper();
+  });
+};
+const hideSuggestionPanel = () => {
+  filtering.value = false;
+};
+
+useBuriedParams(props, emit);
+onMounted(() => {});
+</script>
+<style lang='less'>
+</style>

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

@@ -0,0 +1,51 @@
+import { buriedParamsKey, searchComponentProps } from '../../../hooks';
+
+export const cascaderEmits = [
+  "update:modelValue",
+  buriedParamsKey,
+];
+export const cascaderProps = {
+  ...searchComponentProps,
+  modelValue: [String, Number, Array],
+  multiple: Boolean,
+  options: {
+    type: Array,
+    default() {
+      return []
+    }
+  },
+  props: {
+    type: Object,
+    default() {
+      return {}
+    }
+  },
+  disabled: Boolean,
+  showAllLevels: {
+    type: Boolean,
+    default: false
+  },
+  separator: {
+    type: String,
+    default: '/',
+  },
+  separatorMultiple: {
+    type: String,
+    default: '、',
+  },
+  filterable: Boolean,
+  clearable: {
+    type: Boolean,
+    default: true
+  },
+  popperClass: String,
+  api: String,
+  serviceMethod: String,
+  serviceParams: Object,
+  mapObj: {
+    type: Object,
+    default() {
+      return {}
+    }
+  },
+}

package/packages/components/checkbox/index.js

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

package/packages/components/checkbox/src/checkbox.vue

@@ -0,0 +1,48 @@
+<template>
+  <el-checkbox-group :class="[ns.b()]" v-model="showValue" ref="checkboxRef">
+    <el-checkbox
+      :class="[ns.e('item')]"
+      v-for="item in optionList"
+      :key="item.value"
+      :label="item.value"
+      :disabled="item.disabled"
+      >{{ item.label }}</el-checkbox
+    >
+  </el-checkbox-group>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { useNamespace, useBuriedParams } from "../../../hooks";
+import { checkboxEmits, checkboxProps } from "./index";
+const props = defineProps(checkboxProps);
+const emit = defineEmits(checkboxEmits);
+
+const ns = useNamespace("checkbox");
+const checkboxRef = ref(null);
+const showValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(newValue) {
+    emit("update:modelValue", newValue);
+  },
+});
+const optionList = computed(() => {
+  return props.options;
+});
+
+useBuriedParams(props, emit, {
+  getContent: (value) => {
+    const item = optionList.value.find((item) => item.value === value);
+    return item ? item.label : "";
+  },
+});
+
+defineExpose({
+  ref: checkboxRef,
+});
+onMounted(() => {});
+</script>
+<style lang='less'>
+</style>

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

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

package/packages/components/date-picker/index.js

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

package/packages/components/date-picker/src/clear-icon.vue

@@ -0,0 +1,3 @@
+<template>
+  <ct-icon name="close_line"></ct-icon>
+</template>

package/packages/components/date-picker/src/date-icon.vue

@@ -0,0 +1,3 @@
+<template>
+  <ct-icon name="date_line"></ct-icon>
+</template>

package/packages/components/date-picker/src/date-picker.vue

@@ -0,0 +1,77 @@
+<template>
+  <el-date-picker
+    :class="[ns.b()]"
+    v-model="showValue"
+    :value-format="valueFormat"
+    :range-separator="rangeSeparator"
+    :clear-icon="clearIcon"
+    :prefix-icon="prefixIcon"
+    :unlink-panels="unlinkPanels"
+    v-bind="rawAttr"
+  >
+    <template #default="cell">
+      <slot v-bind="cell"></slot>
+    </template>
+  </el-date-picker>
+</template>
+
+<script setup>
+import { computed, onMounted, useAttrs } from "vue";
+import { useNamespace, useBuriedParams } from "../../../hooks";
+import { isFunction, isArray } from "../../../utils";
+import { datePickerEmits, datePickerProps } from "./index";
+const props = defineProps(datePickerProps);
+const emit = defineEmits(datePickerEmits);
+const attr = useAttrs();
+const ns = useNamespace("date-picker");
+
+const showValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(newValue) {
+    let val = newValue;
+    const defaultCount = 24 * 60 * 60 * 1000 - 1000;
+    try {
+      if (props.valueFormat === "x") {
+        if (isFunction(props.addTimestamp)) {
+          val = props.addTimestamp(val);
+        } else if (isArray(val)) {
+          if (isArray(props.addTimestamp)) {
+            console.log(val);
+            val = val.map((item, index) => {
+              if (!item) return item;
+              return +props.addTimestamp[index] + item;
+            });
+          } else {
+            if (attr.type !== "dates") {
+              val[1] = val[1] ? val[1] + defaultCount : val[1];
+            } else {
+              val.forEach((item) => item + defaultCount);
+            }
+          }
+        } else if (val) {
+          val = val + (props.addTimestamp || defaultCount);
+        }
+      }
+    } catch (error) {
+      console.error(error);
+    }
+    emit("update:modelValue", val);
+  },
+});
+useBuriedParams(props, emit, {
+  getContent: (val) => {
+    if (!val) return "";
+    try {
+      return new Date(val).toLocaleString();
+    } catch (error) {
+      console.error(error);
+      return val;
+    }
+  },
+});
+onMounted(() => {});
+</script>
+<style lang='less'>
+</style>

package/packages/components/date-picker/src/index.js

@@ -0,0 +1,34 @@
+import { buriedParamsKey, searchComponentProps } from '../../../hooks';
+import clearIcon from './clear-icon.vue';
+import dateIcon from './date-icon.vue';
+
+export const datePickerEmits = ["update:modelValue", buriedParamsKey];
+export const datePickerProps = {
+  ...searchComponentProps,
+  modelValue: [Date, Number, String, Array],
+  valueFormat: {
+    type: String,
+    default: 'x'
+  },
+  addTimestamp: [Number, String, Array, Function],
+  rangeSeparator: {
+    type: String,
+    default: '至',
+  },
+  clearIcon: {
+    type: [String, Object],
+    default() {
+      return clearIcon
+    }
+  },
+  prefixIcon: {
+    type: [String, Object],
+    default() {
+      return dateIcon
+    }
+  },
+  unlinkPanels: {
+    type: Boolean,
+    default: true
+  }
+}

package/packages/components/dialog/index.js

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

package/packages/components/dialog/src/dialog.vue

@@ -0,0 +1,104 @@
+<template>
+  <el-dialog
+    :class="[ns.b()]"
+    v-model="dialogVisible"
+    :title="title"
+    :width="width"
+    :show-close="false"
+    v-bind="$attrs"
+  >
+    <template #header="{ close, titleId, titleClass }">
+      <div :id="titleId" :class="[titleClass, ns.e('title')]">{{ title }}</div>
+      <ct-icon
+        :class="ns.e('close-btn')"
+        name="close_line"
+        size="16"
+        color="#d9dee7"
+        @click="close"
+      ></ct-icon>
+    </template>
+    <slot></slot>
+    <template #footer>
+      <div :class="ns.e('footer')" v-if="!hasFooter">
+        <ct-button @click="handleConfirm">确定</ct-button>
+      </div>
+      <slot name="footer" v-else></slot>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed } from "vue";
+import { useNamespace } from "../../../hooks";
+const ns = useNamespace("dialog");
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true,
+  },
+  title: {
+    type: String,
+  },
+  width: {
+    type: [String, Number],
+    default: 480,
+  },
+  hasFooter: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["update:modelValue", "handleConfirm"]);
+
+const dialogVisible = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit("update:modelValue", val);
+  },
+});
+
+const handleConfirm = () => {
+  emit("handleConfirm");
+  dialogVisible.value = false;
+};
+</script>
+
+<style lang='less'>
+.el-dialog.ct-dialog {
+  @R: .el-dialog;
+  @{R}__header {
+    padding: 26px 40px !important;
+    margin-right: 0 !important;
+    position: relative;
+  }
+  @{R}__title {
+    display: flex;
+    align-items: center;
+    &::before {
+      content: "";
+      width: 8px;
+      height: 8px;
+      border-radius: var(--ct-border-radius-s);
+      margin-right: 12px;
+      background: var(--ct-color-primary);
+    }
+  }
+  .ct-dialog__close-btn {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    cursor: pointer;
+  }
+  @{R}__body {
+    padding: 0 40px 32px !important;
+    font-size: 15px;
+    line-height: 28px;
+  }
+  @{R}__footer {
+    padding: 0 40px 32px !important;
+  }
+}
+</style>

package/packages/components/empty/index.js

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