ct-component-plus 0.0.1

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

@@ -0,0 +1,98 @@
+<template>
+  <div :class="[ns.b(), ns.m(type)]">
+    <div :class="ns.e('container')">
+      <template v-if="imgSrc">
+        <img :src="imgSrc" alt="" :class="[ns.e('img')]" />
+      </template>
+      <template v-else>
+        <img :src="showSrc" alt="" :class="[ns.e('img')]" />
+      </template>
+      <div :class="ns.em('img', 'inner')" v-if="innerText">{{ innerText }}</div>
+      <div :class="ns.em('img', 'inner')" v-else>
+        <slot name="inner"></slot>
+      </div>
+    </div>
+    <div :class="ns.e('hint')" v-if="outerText">{{ outerText }}</div>
+    <div :class="ns.e('hint')" v-else>
+      <slot name="outer"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed } from "vue";
+import { useNamespace } from "../../../hooks/use-namespace";
+
+const ns = useNamespace("empty");
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: "no-data",
+  },
+  imgSrc: {
+    type: String,
+  },
+  innerText: {
+    type: String,
+  },
+  outerText: {
+    type: String,
+  },
+});
+
+const srcList = [
+  {
+    type: "no-data",
+    src: "http://ctfront.oss-cn-hangzhou.aliyuncs.com/Front/cingta-component/v2/no_data.png",
+  },
+  {
+    type: "404",
+    src: "http://ctfront.oss-cn-hangzhou.aliyuncs.com/Front/cingta-component/v2/404.png",
+  },
+  {
+    type: "500",
+    src: "http://ctfront.oss-cn-hangzhou.aliyuncs.com/Front/cingta-component/v2/500.png",
+  },
+  {
+    type: "502",
+    src: "http://ctfront.oss-cn-hangzhou.aliyuncs.com/Front/cingta-component/v2/502.png",
+  },
+];
+const showSrc = computed(() => {
+  return srcList.find((item) => item.type === props.type)?.src;
+});
+</script>
+
+<style lang='less'>
+.ct-empty {
+  width: 100%;
+  height: 100%;
+  min-height: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  &__container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__img {
+    width: 300px;
+    height: 300px;
+
+    &--inner {
+      position: absolute;
+      bottom: 10px;
+      color: var(--ct-color-grey-transition);
+    }
+  }
+  &__hint {
+    margin-top: 10px;
+    color: var(--ct-color-grey-transition);
+  }
+}
+</style>

package/packages/components/index.js

@@ -0,0 +1,71 @@
+import button from './button';
+import radio from './radio';
+import checkbox from './checkbox';
+import input from './input';
+import inputRange from './input-range';
+import select from './select';
+import yearSelect from './year-select';
+import datePicker from './date-picker';
+import cascader from './cascader';
+import tabs from './tabs';
+import pagination from './pagination';
+import menu from './menu';
+
+import searchBox from './search-box';
+import table from './table';
+import empty from "./empty";
+import dialog from "./dialog";
+import messageBox from './message-box';
+import CtMessage from './message';
+
+import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import cingtaIcon from 'cingta-icon';
+// import cingtaIcon from '../../icon/components/index';
+import { isObject } from '../utils';
+
+const components = [
+  button,
+  radio,
+  checkbox,
+  input,
+  inputRange,
+  select,
+  yearSelect,
+  datePicker,
+  cascader,
+  tabs,
+  pagination,
+  menu,
+  searchBox,
+  table,
+  empty,
+  dialog,
+  messageBox,
+  CtMessage
+]
+
+const serviceConfig = {
+  defaultMethod: 'post'
+}
+
+const install = function (app, options) {
+  components.forEach(c => app.use(c))
+  app.use(ElementPlus, { locale: zhCn, });
+  app.use(cingtaIcon)
+  let serviceOptions = {}
+  if (isObject(options)) {
+    if (!options.baseDao) {
+      console.warn('当前使用的组件库没有配置baseDao')
+    } else {
+      app.provide('$ctBaseDao', options.baseDao)
+    }
+    if (isObject(options.serviceOptions)) serviceOptions = options.serviceOptions;
+    if (isObject(options.searchBoxComponent)) app.provide('$userDefinedSearchComponent', options.searchBoxComponent)
+  }
+  app.provide('$ctServiceConfig', { ...serviceConfig, ...serviceOptions })
+}
+
+export default {
+  install
+}

package/packages/components/input/index.js

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

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

@@ -0,0 +1,14 @@
+import { buriedParamsKey, searchComponentProps } from '../../../hooks';
+
+export const inputEmits = ["update:modelValue", buriedParamsKey];
+export const inputProps = {
+  ...searchComponentProps,
+  modelValue: String,
+  password: Boolean,
+  clearable: Boolean,
+  type: {
+    type: String,
+    default: "text",
+  },
+  unit: String,
+}

package/packages/components/input/src/input.vue

@@ -0,0 +1,107 @@
+<template>
+  <el-input
+    :class="[ns.b()]"
+    v-model="showValue"
+    v-bind="rawAttr"
+    :type="currType"
+    ref="inputRef"
+  >
+    <template #prefix>
+      <slot name="prefix"></slot>
+    </template>
+    <template #suffix>
+      <slot name="suffix"> </slot>
+      <span v-if="unit" :class="[ns.e('unit')]">{{ unit }}</span>
+      <ct-icon
+        v-if="clearable && showValue"
+        :class="[ns.e('clearable')]"
+        name="close_line"
+        @click="showValue = ''"
+      />
+      <template v-if="password && showValue">
+        <span :class="[ns.e('password')]" @click="switchPassword">
+          <ct-icon v-if="currType === 'password'" name="preview-close2_line" />
+          <ct-icon v-else name="preview-open_line" />
+        </span>
+      </template>
+    </template>
+  </el-input>
+</template>
+
+<script setup>
+import { onMounted, computed, ref } from "vue";
+import { useNamespace, useBuriedParams } from "../../../hooks";
+import { inputEmits, inputProps } from "./index";
+const props = defineProps(inputProps);
+const emit = defineEmits(inputEmits);
+
+useBuriedParams(props, emit);
+const ns = useNamespace("input");
+
+const inputRef = ref(null);
+const currType = ref(props.type);
+const showValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(newValue) {
+    emit("update:modelValue", newValue);
+  },
+});
+
+const switchPassword = () => {
+  currType.value = currType.value === "password" ? "text" : "password";
+};
+
+onMounted(() => {
+  if (props.password) {
+    currType.value = "password";
+  }
+});
+defineExpose({
+  ref: inputRef,
+});
+</script>
+<style lang='less'>
+.ct-input {
+  @R: .ct-input;
+  --ct-input-focus-color: var(--ct-color-primary);
+  --ct-input-focus-hover-color: var(--ct-color-primary);
+  --ct-input-default-width: var(--ct-component-width);
+  &.el-input {
+    width: var(--ct-input-default-width);
+  }
+  &__unit {
+    color: var(--ct-color-grey-sub);
+  }
+  &__clearable {
+    // --ct-input-focus-hover-color: var(--ct-color-danger);
+  }
+  & &__clearable {
+    cursor: pointer;
+    opacity: 0;
+  }
+  &__password {
+    cursor: pointer;
+    color: var(--ct-color-black);
+  }
+  .el-input__inner {
+    &:focus {
+      & + .el-input__suffix {
+        @{R}__clearable {
+          opacity: 1;
+          color: var(--ct-input-focus-color);
+          &:hover {
+            color: var(--ct-input-focus-hover-color);
+          }
+        }
+      }
+    }
+  }
+  &:hover {
+    @{R}__clearable {
+      opacity: 1;
+    }
+  }
+}
+</style>

package/packages/components/input-range/index.js

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

package/packages/components/input-range/src/index.js

@@ -0,0 +1,30 @@
+import { buriedParamsKey, searchComponentProps } from '../../../hooks';
+
+export const inputEmits = [
+  "update:modelValue",
+  buriedParamsKey,
+  'blur',
+  'focus',
+  'change',
+  'input',
+  'clear'
+];
+export const inputProps = {
+  ...searchComponentProps,
+  placeholder: {
+    type: Array,
+    default: () => [],
+  },
+  startPlaceholder: String,
+  endPlaceholder: String,
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
+  disabled: Boolean,
+  clearable: Boolean,
+  separator: {
+    type: [String, Object],
+    default: '-'
+  }
+}

package/packages/components/input-range/src/input-range.vue

@@ -0,0 +1,234 @@
+<template>
+  <div
+    :class="[
+      ns.b(),
+      ns.is('disabled', disabled),
+      ns.is('clearable', clearable),
+    ]"
+  >
+    <div :class="[ns.e('wrapper')]">
+      <span :class="[ns.e('prefix')]">
+        <slot name="prefix"></slot>
+      </span>
+      <input
+        ref="inputRef1"
+        :class="[ns.e('inner')]"
+        :placeholder="placeholderShow[0]"
+        v-model="inputModel1"
+        :disabled="disabled"
+        @blur="handleBlur($event, 0)"
+        @focus="handleFocus($event, 0)"
+        @keydown.enter="handleEnter($event, 0)"
+      />
+      <span :class="[ns.e('separator')]">
+        <slot name="separator">
+          <template v-if="isString(separator)">{{ separator }}</template>
+          <component v-else :is="separator" />
+        </slot>
+      </span>
+      <input
+        ref="inputRef2"
+        :class="[ns.e('inner')]"
+        :placeholder="placeholderShow[1]"
+        v-model="inputModel2"
+        :disabled="disabled"
+        @blur="handleBlur($event, 1)"
+        @focus="handleFocus($event, 1)"
+        @keydown.enter="handleEnter($event, 1)"
+      />
+      <span :class="[ns.e('suffix')]">
+        <slot name="suffix"></slot>
+        <ct-icon
+          v-if="clearable && haveValue"
+          :class="[ns.e('clearable')]"
+          name="close_line"
+          @click="clearValue"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, computed, ref, watch, nextTick } from "vue";
+import { useNamespace, useBuriedParams } from "../../../hooks";
+import { isArray, isString } from "../../../utils";
+import { inputEmits, inputProps } from "./index";
+const props = defineProps(inputProps);
+const emit = defineEmits(inputEmits);
+
+useBuriedParams(props, emit);
+const ns = useNamespace("input-range");
+
+const inputRef1 = ref(null);
+const inputRef2 = ref(null);
+const isChange = ref(false);
+
+const inputModel1 = computed({
+  get() {
+    return isArray(props.modelValue) ? props.modelValue[0] : "";
+  },
+  set(newValue) {
+    emit("update:modelValue", [newValue, inputModel2.value || ""]);
+  },
+});
+const inputModel2 = computed({
+  get() {
+    return isArray(props.modelValue) ? props.modelValue[1] : "";
+  },
+  set(newValue) {
+    emit("update:modelValue", [inputModel1.value || "", newValue]);
+  },
+});
+const placeholderShow = computed(() => {
+  return isArray(props.placeholder)
+    ? props.placeholder
+    : [props.startPlaceholder, props.endPlaceholder];
+});
+const haveValue = computed(() => {
+  return inputModel1.value || inputModel2.value;
+});
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    isChange.value = true;
+    emit("input", newValue);
+  }
+);
+
+const emitChange = (e, index) => {
+  isChange.value && emit("change", props.modelValue, index, e);
+  isChange.value = false;
+};
+const handleEnter = (e, index) => {
+  emitChange(e, index);
+};
+const clearValue = () => {
+  emit("update:modelValue", []);
+  emit("clear");
+};
+const handleBlur = (e, index) => {
+  emit("blur", e, index);
+  emitChange(e, index);
+};
+const handleFocus = (e, index) => {
+  emit("focus", e, index);
+};
+
+const focus = async (index) => {
+  // see: https://github.com/ElemeFE/element/issues/18573
+  await nextTick();
+  if (inputRef1.value && !index) {
+    inputRef1.value.focus();
+  }
+  if (index == 1 && inputRef2.value) {
+    inputRef2.value.focus();
+  }
+};
+
+const blur = (index) => {
+  const blurIndex = index === undefined ? [0, 1] : [index];
+  if (inputRef1.value && blurIndex.includes(0)) {
+    inputRef1.value.blur();
+  }
+  if (inputRef2.value && blurIndex.includes(1)) {
+    inputRef2.value.blur();
+  }
+};
+
+defineExpose({
+  ref: [inputRef1, inputRef2],
+  clearValue,
+  haveValue,
+  isChange,
+  blur,
+  focus,
+});
+onMounted(() => {});
+</script>
+<style lang='less'>
+.ct-input-range {
+  position: relative;
+  display: inline-flex;
+  width: var(--ct-component-width);
+  font-size: var(--ct-font-size);
+  color: var(--ct-border-color);
+  box-sizing: border-box;
+  vertical-align: middle;
+  @R: .ct-input-range;
+  &.is-disabled {
+    cursor: not-allowed;
+    --ct-component-fill-color: var(--ct-component-disabled-bg-color);
+    @{R}__wrapper {
+      input {
+        cursor: not-allowed;
+      }
+    }
+  }
+  &:not(.is-disabled):hover {
+    --ct-component-border-color: var(--ct-color-grey-transition);
+  }
+  &.is-clearable {
+    @{R}__wrapper {
+      // padding-right: var(--ct-component-inner-padding);
+      @{R}__inner {
+        padding-right: 30px;
+      }
+    }
+    &:hover {
+      @{R}__clearable {
+        display: inline-block;
+      }
+    }
+  }
+  &__wrapper {
+    display: inline-flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+    padding: 1px 0;
+    background-color: var(--ct-component-fill-color);
+    background-image: none;
+    border-radius: var(--ct-component-border-radius);
+    transition: var(--el-transition-box-shadow);
+    transform: translate3d(0, 0, 0);
+    box-shadow: 0 0 0 1px var(--ct-component-border-color) inset;
+    &:focus-within {
+      --ct-component-border-color: var(--ct-color-primary);
+      .el-icon,
+      .ct-icon {
+        color: var(--ct-component-border-color);
+      }
+    }
+  }
+  &__inner {
+    width: 50%;
+    flex-grow: 1;
+    padding: 0 var(--ct-component-inner-padding);
+    -webkit-appearance: none;
+    color: var(--ct-component-color);
+    font-size: inherit;
+    height: var(--ct-component-inner-height);
+    line-height: var(--ct-component-inner-height);
+    outline: 0;
+    border: none;
+    background: 0 0;
+    box-sizing: border-box;
+  }
+  &__clearable {
+    cursor: pointer;
+    display: none;
+    position: absolute;
+    right: var(--ct-component-inner-padding);
+    top: 50%;
+    transform: translateY(-50%);
+    &.ct-icon {
+      display: none;
+    }
+    &:hover {
+      // color: var(--ct-color-danger);
+    }
+  }
+}
+</style>

package/packages/components/menu/index.js

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

package/packages/components/menu/src/assets/plus_line.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.6 3.172a.5.5 0 01.5.5V10.9l6.956.001a.5.5 0 01.5.5v1.2a.5.5 0 01-.5.5h-6.957l.001 7.228a.5.5 0 01-.5.5h-1.2a.5.5 0 01-.5-.5v-7.229l-6.956.001a.5.5 0 01-.5-.5v-1.2a.5.5 0 01.5-.5H10.9l.001-7.228a.5.5 0 01.5-.5h1.2z" fill="#8F99A3"/></svg>

package/packages/components/menu/src/item.vue

@@ -0,0 +1,47 @@
+<template>
+  <div :class="[ns.b()]">
+    <span v-if="haveIcon" :class="[ns.e('icon')]">
+      <slot name="icon" :menu="menu" :title="title">
+        <ct-icon v-if="icon" :name="icon"></ct-icon>
+      </slot>
+    </span>
+    <span :class="[ns.e('title')]">
+      <slot name="title" :menu="menu" :title="title">
+        {{ title }}
+      </slot>
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useNamespace } from "../../../hooks";
+const props = defineProps({
+  menu: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+  icon: {
+    type: String,
+    default: "",
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+});
+const ns = useNamespace("menu-item");
+const haveIcon = computed(() => props.icon || props.menu.haveIcon);
+</script>
+<style lang='less'>
+.ct-menu-item {
+  display: flex;
+  align-items: center;
+  &__icon {
+    margin-right: var(--ct-menu-icon-margin);
+    font-size: var(--ct-menu-icon-size);
+  }
+}
+</style>

package/packages/components/menu/src/link.vue

@@ -0,0 +1,29 @@
+<template>
+  <Component :is="type" v-bind="linkProps(to)">
+    <slot></slot>
+  </Component>
+</template>
+ 
+<script setup>
+const props = defineProps({
+  to: {
+    type: String,
+    required: true,
+  },
+  type: {
+    type: String,
+    required: true,
+  },
+});
+const linkProps = (to) => {
+  if (props.type === "a") {
+    return {
+      href: to,
+      target: "_blank",
+    };
+  }
+  return {
+    to: to,
+  };
+};
+</script>

package/packages/components/menu/src/logo.vue

@@ -0,0 +1,26 @@
+<template>
+  <div :class="[ns.b(), ns.is('collapse', collapse)]">
+    <img :class="ns.e('logo')" src="" alt="" />
+    <span :class="ns.e('title')"></span>
+  </div>
+</template>
+
+<script setup>
+import { reactive, onMounted } from "vue";
+import { useNamespace } from "../../../hooks";
+const props = defineProps({
+  collapse: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+});
+const ns = useNamespace("logo");
+const state = reactive({});
+onMounted(() => {});
+</script>
+<style lang='less'>
+</style>