ct-component-plus 0.0.43 → 0.0.44

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

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

@@ -1,51 +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 {}
-    }
-  },
+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

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