ct-component-plus 0.0.43 → 0.0.44

package/packages/components/search-box/src/search-box.vue

@@ -1,250 +1,250 @@
-<template>
-  <div :class="[ns.b()]">
-    <div :class="[ns.e('container')]">
-      <div :class="[ns.e('list')]">
-        <div
-          v-for="(item, index) in searchList"
-          :class="[
-            ns.e('item'),
-            ...getComponentClass(item),
-            ns.is('outer-border', outerBorder),
-          ]"
-          :key="item.param || index"
-          :style="{ ...getComponentStyle(item) }">
-          <slot v-bind="getComponentSlotScope(item)">
-            <slot name="item-before" v-bind="getComponentSlotScope(item)">
-            </slot>
-            <span
-              :class="[
-                ns.e('item-label'),
-                ns.is('required', item.required),
-                ns.is('outer-border', outerBorder),
-              ]">
-              <span>{{ item.label }}</span>
-              <span :class="[ns.is('required')]" v-if="!outerBorder">：</span>
-            </span>
-            <div :class="[ns.e('item-component')]">
-              <slot
-                :name="item.componentName || item.param"
-                v-bind="getComponentSlotScope(item)">
-                <component
-                  :is="getComponent(item.type)"
-                  v-model="searchParamsCurrent[item.param]"
-                  v-bind="getComponentProps(item)">
-                </component>
-              </slot>
-            </div>
-            <slot name="item-after" v-bind="getComponentSlotScope(item)"></slot>
-          </slot>
-        </div>
-        <div :class="[ns.e('buttons')]">
-          <slot name="solt-search">
-            <ct-button type="border-plain" @click="resetData" v-if="haveReset"
-              >重置</ct-button
-            >
-            <ct-button type="border" @click="doSearch">{{
-              searchBtnName
-            }}</ct-button>
-          </slot>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, inject, onMounted, ref, watch } from "vue";
-import { searchBoxEmits, searchBoxProps } from "./index";
-import { useNamespace, buriedParamsKey } from "../../../hooks";
-import { isObject, isString, isArray, toFirstUpperCase } from "../../../utils";
-import { searchComponents } from "../index";
-const userDefinedSearchComponent = inject("$userDefinedSearchComponent", {});
-const searchBoxConfig = inject("$searchBoxConfig", {});
-const props = defineProps(searchBoxProps);
-const emit = defineEmits(searchBoxEmits);
-
-const ns = useNamespace("search-box");
-
-const searchParamsCurrent = ref({});
-watch(searchParamsCurrent, (newVal) => {
-  emit("update:searchParamsCurrent", newVal);
-});
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    searchParamsCurrent.value = newValue || {};
-  },
-  { immediate: true }
-);
-
-const getComponentClass = (item) => {
-  const classList = [];
-  if (item.componentClass) {
-    const cla = item.componentClass;
-    if (isString(cla)) classList.push(cla);
-    if (isArray(cla)) classList.push(...cla);
-  }
-  return classList;
-};
-const getComponentStyle = (item) => {
-  const style = {};
-  if (item.componentStyle) {
-    const sty = item.componentStyle;
-    if (isObject(sty)) Object.assign(style, sty);
-  }
-  return style;
-};
-const componentAll = computed(() => {
-  const { CtInput, CtSelect, CtDatePicker, CtCascader, CtYearSelect } =
-    searchComponents;
-  const componentMap = {
-    0: CtInput,
-    1: CtSelect,
-    2: CtCascader,
-    4: CtDatePicker,
-    12: CtYearSelect,
-    13: "div",
-    ...userDefinedSearchComponent,
-  };
-  return componentMap;
-});
-const buriedParams = ref({});
-const handleBuriedParams = (params) => {
-  const key = params.value;
-  if (key) {
-    buriedParams.value[key] = params;
-  }
-};
-const getComponentProps = (item) => {
-  const bpKey = toFirstUpperCase(buriedParamsKey);
-  const attrObj = {
-    ...item,
-  };
-  delete attrObj.type;
-  // const
-  return {
-    ...attrObj,
-    // param: item.param,
-    // label: item.label,
-    // multiple: item.multiple,
-    // api: item.api,
-    // placeholder: item.placeholder,
-    // clearable: item.clearable,
-    // disabled: item.disabled,
-    // range: item.range,
-    // mapObj: item.mapObj,
-    options: item.list,
-    name: item.param, //用作插槽名
-    // rawAttr: item.rawAttr,
-
-    ["on" + bpKey]: handleBuriedParams,
-  };
-};
-const getComponent = (type) => {
-  return isObject(type) ? type : componentAll.value[type] || "div";
-};
-const getComponentSlotScope = (item) => {
-  return isObject(item) ? item : {};
-};
-
-const haveReset = computed(() => {
-  return props.haveReset;
-});
-const resetData = () => {
-  const keys = Object.keys(searchParamsCurrent.value);
-  keys.forEach((key) => {
-    const oldValue = searchParamsCurrent.value[key];
-    searchParamsCurrent.value[key] = Array.isArray(oldValue) ? [] : "";
-  });
-  emit("doReset");
-};
-const doSearch = () => {
-  emit("update:searchParams", searchParamsCurrent);
-  emit("doSearch", searchParamsCurrent.value);
-};
-
-defineExpose({
-  searchParamsCurrent,
-  componentAll: componentAll.value,
-  getComponent,
-  buriedParams,
-  doSearch,
-});
-onMounted(() => {});
-</script>
-<style lang="less">
-.ct-search-box {
-  --ct-search-box-item-margin-right: 16px;
-  --ct-search-box-item-margin-top: 14px;
-  .el-input {
-    --ct-input-default-width: auto;
-  }
-  &__list {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    margin-right: calc(-1 * var(--ct-search-box-item-margin-right));
-    margin-top: calc(-1 * var(--ct-search-box-item-margin-top));
-    > * {
-      margin-right: var(--ct-search-box-item-margin-right);
-      margin-top: var(--ct-search-box-item-margin-top);
-    }
-  }
-  &__item {
-    display: flex;
-    align-items: center;
-    width: calc(
-      (100% - v-bind(rowNumber) * var(--ct-search-box-item-margin-right)) /
-        v-bind(rowNumber)
-    );
-    --ct-search-box-item-component-width: 100%;
-    &.is-outer-border {
-      --ct-font-size: 13px;
-      --el-font-size-base: var(--ct-font-size, 13px);
-      --ct-search-box-border-color: var(--ct-border-color);
-      --ct-search-box-inner-border-color: transparent;
-      font-size: var(--ct-font-size);
-      height: 36px;
-      padding-left: 14px;
-      box-shadow: 0 0 0 1px var(--ct-search-box-border-color);
-      border-radius: var(--ct-border-radius);
-      &:hover {
-        --ct-search-box-border-color: var(--ct-color-grey-sub);
-      }
-      &:focus-within {
-        --ct-search-box-border-color: var(--ct-color-primary);
-      }
-      .el-input__wrapper,
-      .el-select__wrapper,
-      .ct-year-select__wrapper {
-        --el-select-input-focus-border-color: var(
-          --ct-search-box-inner-border-color
-        );
-        box-shadow: 0 0 0 1px var(--ct-search-box-inner-border-color) !important;
-      }
-    }
-    &-label {
-      line-height: 1;
-      &.is-outer-border {
-        color: var(--ct-color-grey-sub);
-      }
-    }
-    &-component {
-      flex: 1;
-      > * {
-        width: var(--ct-search-box-item-component-width) !important;
-      }
-    }
-  }
-  &__buttons {
-    margin-left: auto;
-    button {
-      width: 96px;
-      padding: 0;
-      height: 34px;
-      line-height: 34px;
-      border-radius: 4px;
-    }
-  }
-}
-</style>
+<template>
+  <div :class="[ns.b()]">
+    <div :class="[ns.e('container')]">
+      <div :class="[ns.e('list')]">
+        <div
+          v-for="(item, index) in searchList"
+          :class="[
+            ns.e('item'),
+            ...getComponentClass(item),
+            ns.is('outer-border', outerBorder),
+          ]"
+          :key="item.param || index"
+          :style="{ ...getComponentStyle(item) }">
+          <slot v-bind="getComponentSlotScope(item)">
+            <slot name="item-before" v-bind="getComponentSlotScope(item)">
+            </slot>
+            <span
+              :class="[
+                ns.e('item-label'),
+                ns.is('required', item.required),
+                ns.is('outer-border', outerBorder),
+              ]">
+              <span>{{ item.label }}</span>
+              <span :class="[ns.is('required')]" v-if="!outerBorder">：</span>
+            </span>
+            <div :class="[ns.e('item-component')]">
+              <slot
+                :name="item.componentName || item.param"
+                v-bind="getComponentSlotScope(item)">
+                <component
+                  :is="getComponent(item.type)"
+                  v-model="searchParamsCurrent[item.param]"
+                  v-bind="getComponentProps(item)">
+                </component>
+              </slot>
+            </div>
+            <slot name="item-after" v-bind="getComponentSlotScope(item)"></slot>
+          </slot>
+        </div>
+        <div :class="[ns.e('buttons')]">
+          <slot name="solt-search">
+            <ct-button type="border-plain" @click="resetData" v-if="haveReset"
+              >重置</ct-button
+            >
+            <ct-button type="border" @click="doSearch">{{
+              searchBtnName
+            }}</ct-button>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, inject, onMounted, ref, watch } from "vue";
+import { searchBoxEmits, searchBoxProps } from "./index";
+import { useNamespace, buriedParamsKey } from "../../../hooks";
+import { isObject, isString, isArray, toFirstUpperCase } from "../../../utils";
+import { searchComponents } from "../index";
+const userDefinedSearchComponent = inject("$userDefinedSearchComponent", {});
+const searchBoxConfig = inject("$searchBoxConfig", {});
+const props = defineProps(searchBoxProps);
+const emit = defineEmits(searchBoxEmits);
+
+const ns = useNamespace("search-box");
+
+const searchParamsCurrent = ref({});
+watch(searchParamsCurrent, (newVal) => {
+  emit("update:searchParamsCurrent", newVal);
+});
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    searchParamsCurrent.value = newValue || {};
+  },
+  { immediate: true }
+);
+
+const getComponentClass = (item) => {
+  const classList = [];
+  if (item.componentClass) {
+    const cla = item.componentClass;
+    if (isString(cla)) classList.push(cla);
+    if (isArray(cla)) classList.push(...cla);
+  }
+  return classList;
+};
+const getComponentStyle = (item) => {
+  const style = {};
+  if (item.componentStyle) {
+    const sty = item.componentStyle;
+    if (isObject(sty)) Object.assign(style, sty);
+  }
+  return style;
+};
+const componentAll = computed(() => {
+  const { CtInput, CtSelect, CtDatePicker, CtCascader, CtYearSelect } =
+    searchComponents;
+  const componentMap = {
+    0: CtInput,
+    1: CtSelect,
+    2: CtCascader,
+    4: CtDatePicker,
+    12: CtYearSelect,
+    13: "div",
+    ...userDefinedSearchComponent,
+  };
+  return componentMap;
+});
+const buriedParams = ref({});
+const handleBuriedParams = (params) => {
+  const key = params.value;
+  if (key) {
+    buriedParams.value[key] = params;
+  }
+};
+const getComponentProps = (item) => {
+  const bpKey = toFirstUpperCase(buriedParamsKey);
+  const attrObj = {
+    ...item,
+  };
+  delete attrObj.type;
+  // const
+  return {
+    ...attrObj,
+    // param: item.param,
+    // label: item.label,
+    // multiple: item.multiple,
+    // api: item.api,
+    // placeholder: item.placeholder,
+    // clearable: item.clearable,
+    // disabled: item.disabled,
+    // range: item.range,
+    // mapObj: item.mapObj,
+    options: item.list,
+    name: item.param, //用作插槽名
+    // rawAttr: item.rawAttr,
+
+    ["on" + bpKey]: handleBuriedParams,
+  };
+};
+const getComponent = (type) => {
+  return isObject(type) ? type : componentAll.value[type] || "div";
+};
+const getComponentSlotScope = (item) => {
+  return isObject(item) ? item : {};
+};
+
+const haveReset = computed(() => {
+  return props.haveReset;
+});
+const resetData = () => {
+  const keys = Object.keys(searchParamsCurrent.value);
+  keys.forEach((key) => {
+    const oldValue = searchParamsCurrent.value[key];
+    searchParamsCurrent.value[key] = Array.isArray(oldValue) ? [] : "";
+  });
+  emit("doReset");
+};
+const doSearch = () => {
+  emit("update:searchParams", searchParamsCurrent);
+  emit("doSearch", searchParamsCurrent.value);
+};
+
+defineExpose({
+  searchParamsCurrent,
+  componentAll: componentAll.value,
+  getComponent,
+  buriedParams,
+  doSearch,
+});
+onMounted(() => {});
+</script>
+<style lang="less">
+.ct-search-box {
+  --ct-search-box-item-margin-right: 16px;
+  --ct-search-box-item-margin-top: 14px;
+  .el-input {
+    --ct-input-default-width: auto;
+  }
+  &__list {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-right: calc(-1 * var(--ct-search-box-item-margin-right));
+    margin-top: calc(-1 * var(--ct-search-box-item-margin-top));
+    > * {
+      margin-right: var(--ct-search-box-item-margin-right);
+      margin-top: var(--ct-search-box-item-margin-top);
+    }
+  }
+  &__item {
+    display: flex;
+    align-items: center;
+    width: calc(
+      (100% - v-bind(rowNumber) * var(--ct-search-box-item-margin-right)) /
+        v-bind(rowNumber)
+    );
+    --ct-search-box-item-component-width: 100%;
+    &.is-outer-border {
+      --ct-font-size: 13px;
+      --el-font-size-base: var(--ct-font-size, 13px);
+      --ct-search-box-border-color: var(--ct-border-color);
+      --ct-search-box-inner-border-color: transparent;
+      font-size: var(--ct-font-size);
+      height: 36px;
+      padding-left: 14px;
+      box-shadow: 0 0 0 1px var(--ct-search-box-border-color);
+      border-radius: var(--ct-border-radius);
+      &:hover {
+        --ct-search-box-border-color: var(--ct-color-grey-sub);
+      }
+      &:focus-within {
+        --ct-search-box-border-color: var(--ct-color-primary);
+      }
+      .el-input__wrapper,
+      .el-select__wrapper,
+      .ct-year-select__wrapper {
+        --el-select-input-focus-border-color: var(
+          --ct-search-box-inner-border-color
+        );
+        box-shadow: 0 0 0 1px var(--ct-search-box-inner-border-color) !important;
+      }
+    }
+    &-label {
+      line-height: 1;
+      &.is-outer-border {
+        color: var(--ct-color-grey-sub);
+      }
+    }
+    &-component {
+      flex: 1;
+      > * {
+        width: var(--ct-search-box-item-component-width) !important;
+      }
+    }
+  }
+  &__buttons {
+    margin-left: auto;
+    button {
+      width: 96px;
+      padding: 0;
+      height: 34px;
+      line-height: 34px;
+      border-radius: 4px;
+    }
+  }
+}
+</style>

package/packages/components/search-box/src/slot.vue

@@ -1,5 +1,5 @@
-<template>
-  <div>
-    <slot></slot>
-  </div>
+<template>
+  <div>
+    <slot></slot>
+  </div>
 </template>

package/packages/components/select/index.js

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

package/packages/components/select/src/arrow-down.vue

@@ -1,3 +1,3 @@
-<template>
-  <ct-icon name="arrow-down_line"></ct-icon>
+<template>
+  <ct-icon name="arrow-down_line"></ct-icon>
 </template>

package/packages/components/select/src/clear-icon.vue

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

package/packages/components/select/src/empty.vue

@@ -1,14 +1,14 @@
-<template>
-  <div class="ct-select__empty">
-    <span>{{ text }}</span>
-  </div>
-</template>
-
-<script setup>
-defineProps({
-  text: {
-    type: String,
-    default: "暂无数据",
-  },
-});
+<template>
+  <div class="ct-select__empty">
+    <span>{{ text }}</span>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  text: {
+    type: String,
+    default: "暂无数据",
+  },
+});
 </script>

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

@@ -1,52 +1,52 @@
-import { buriedParamsKey, searchComponentProps } from '../../../hooks';
-import arrowDown from './arrow-down.vue';
-import clearIcon from './clear-icon.vue';
-
-export const selectEmits = ["update:modelValue", buriedParamsKey];
-export const selectProps = {
-  ...searchComponentProps,
-  modelValue: [String, Number, Array],
-  multiple: Boolean,
-  options: {
-    type: Array,
-    default() {
-      return []
-    }
-  },
-  filterable: Boolean,
-  api: String,
-  serviceMethod: String,
-  serviceParams: Object,
-  mapObj: {
-    type: Object,
-    default() {
-      return {}
-    }
-  },
-  selectAllText: {
-    type: String,
-    default: '全部'
-  },
-  connectors: {
-    type: String,
-    default: '、'
-  },
-  fitInputWidth: {
-    type: Boolean,
-    default: true,
-  },
-  clearIcon: {
-    type: [String, Object],
-    default() {
-      return clearIcon
-    }
-  },
-  suffixIcon: {
-    type: [String, Object],
-    default() {
-      return arrowDown
-    }
-  },
-  noMatchText: String,
-  noDataText: String,
+import { buriedParamsKey, searchComponentProps } from '../../../hooks';
+import arrowDown from './arrow-down.vue';
+import clearIcon from './clear-icon.vue';
+
+export const selectEmits = ["update:modelValue", buriedParamsKey];
+export const selectProps = {
+  ...searchComponentProps,
+  modelValue: [String, Number, Array],
+  multiple: Boolean,
+  options: {
+    type: Array,
+    default() {
+      return []
+    }
+  },
+  filterable: Boolean,
+  api: String,
+  serviceMethod: String,
+  serviceParams: Object,
+  mapObj: {
+    type: Object,
+    default() {
+      return {}
+    }
+  },
+  selectAllText: {
+    type: String,
+    default: '全部'
+  },
+  connectors: {
+    type: String,
+    default: '、'
+  },
+  fitInputWidth: {
+    type: Boolean,
+    default: true,
+  },
+  clearIcon: {
+    type: [String, Object],
+    default() {
+      return clearIcon
+    }
+  },
+  suffixIcon: {
+    type: [String, Object],
+    default() {
+      return arrowDown
+    }
+  },
+  noMatchText: String,
+  noDataText: String,
 }