ct-component-plus 0.0.42 → 0.0.43

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

@@ -1,30 +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: '-'
-  }
+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

@@ -1,234 +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-component-hover-border-color);
-  }
-  &.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);
-    }
-  }
-}
+<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-component-hover-border-color);
+  }
+  &.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/loading/index.js

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