ct-component-plus 0.0.1

package/packages/components/radio/src/radio.vue

@@ -0,0 +1,48 @@
+<template>
+  <el-radio-group :class="[ns.b()]" v-model="showValue" ref="radioRef">
+    <el-radio
+      :class="[ns.e('item')]"
+      v-for="item in optionList"
+      :key="item.value"
+      :label="item.value"
+      :disabled="item.disabled"
+      >{{ item.label }}</el-radio
+    >
+  </el-radio-group>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { useNamespace, useBuriedParams } from "../../../hooks";
+import { radioEmits, radioProps } from "./index";
+const props = defineProps(radioProps);
+const emit = defineEmits(radioEmits);
+
+const ns = useNamespace("radio");
+const radioRef = 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: radioRef,
+});
+onMounted(() => {});
+</script>
+<style lang='less'>
+</style>

package/packages/components/search-box/index.js

@@ -0,0 +1,25 @@
+import CtSearchBox from './src/search-box.vue';
+
+import CtInput from '../input';
+import CtSelect from '../select';
+import CtDatePicker from '../date-picker';
+import CtCascader from '../cascader';
+import CtYearSelect from '../year-select';
+
+export const searchComponents = {
+  CtInput,
+  CtSelect,
+  CtDatePicker,
+  CtCascader,
+  CtYearSelect
+}
+
+/* istanbul ignore next */
+CtSearchBox.install = function (Vue) {
+  Vue.component('CtSearchBox', CtSearchBox);
+  // for (const key in searchComponents) {
+  //   Vue.component(key, searchComponents[key]);
+  // }
+};
+
+export default CtSearchBox;

package/packages/components/search-box/src/index.js

@@ -0,0 +1,30 @@
+
+export const searchBoxEmits = [
+  "update:modelValue",
+  'update:searchParams',
+  'update:searchParamsCurrent',
+  'doSearch',
+  'doReset'
+];
+export const searchBoxProps = {
+  modelValue: Object,
+  rowNumber: {
+    type: Number,
+    default: 5,
+  },
+  searchList: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  },
+  outerBorder: {
+    type: Boolean,
+    default: true,
+  },
+  haveReset: Boolean,
+  searchBtnName: {
+    type: String,
+    default: '查询'
+  }
+}

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

@@ -0,0 +1,240 @@
+<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 handleBuriedParams = (params) => {
+  console.log(params);
+};
+const getComponentProps = (item) => {
+  const bpKey = toFirstUpperCase(buriedParamsKey);
+  // const
+  return {
+    param: item.param,
+    label: item.label,
+    options: item.list,
+    placeholder: item.placeholder,
+    multiple: item.multiple,
+    clearable: item.clearable,
+    disabled: item.disabled,
+    range: item.range,
+    mapObj: item.mapObj,
+    name: item.param, //用作插槽名
+
+    ["on" + bpKey]: handleBuriedParams,
+  };
+};
+const getComponent = (type) => {
+  return isObject(type) ? type : componentAll.value[type] || type;
+};
+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,
+});
+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;
+      --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-transition);
+      }
+      &:focus-within {
+        --ct-search-box-border-color: var(--ct-color-primary);
+      }
+      .el-input__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

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

package/packages/components/select/index.js

@@ -0,0 +1,8 @@
+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

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

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

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

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

@@ -0,0 +1,14 @@
+<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

@@ -0,0 +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,
+}