ct-component-plus 0.0.42 → 0.0.43

package/packages/components/tabs/src/tabs.vue

@@ -1,226 +1,226 @@
-<template>
-  <div :class="[ns.b(), ns.m(type), ns.is('nav', nav)]" ref="_ref">
-    <div
-      v-for="(item, index) in list"
-      :key="index"
-      :class="[
-        ns.e('item'),
-        ns.is('disabled', item.disabled),
-        ns.is('active', modelValue === item.value),
-      ]"
-      @click="handleClick(item, index)"
-    >
-      <slot :index="index" :item="item">
-        <span :class="ns.e('item-text')">{{ item.label }}</span>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { onMounted, ref } from "vue";
-import { useNamespace } from "../../../hooks";
-const ns = useNamespace("tabs");
-const props = defineProps({
-  nav: {
-    type: Boolean,
-    default: false,
-  },
-  type: {
-    type: String,
-    default: "default",
-  },
-  modelValue: {
-    type: [String, Number],
-    default: "",
-  },
-  list: {
-    type: Array,
-    default: () => [],
-  },
-  beforeLeave: Function,
-});
-const emit = defineEmits(["click", "change", "update:modelValue"]);
-const _ref = ref(null);
-
-const handleClick = async (item, index) => {
-  if (item.disabled) return;
-  try {
-    emit("click", item.value, index, item);
-    if (item.value === props.modelValue) return;
-    // 可以继续的标志
-    let canContinue = true;
-    if (props.beforeLeave) {
-      canContinue = await props.beforeLeave(item.value, index, item);
-    }
-    if (canContinue !== false) {
-      emit("update:modelValue", item.value);
-      emit("change", item.value, index, item);
-    }
-  } catch (error) {
-    console.error(error);
-    return;
-  }
-};
-onMounted(() => {
-  if (!props.modelValue && props.list.length) {
-    handleClick(props.list[0], 0);
-  }
-});
-defineExpose({
-  ref: _ref,
-});
-</script>
-<style lang='less'>
-.ct-tabs {
-  display: inline-flex;
-  align-items: center;
-  @R: .ct-tabs;
-  --tabs-button-border-radius: var(--ct-border-radius);
-  &__item {
-    cursor: pointer;
-    &.is-disabled {
-      cursor: not-allowed;
-    }
-  }
-  &--default {
-    @{R}__item {
-      position: relative;
-      padding: 12px 0;
-      margin-right: 32px;
-      line-height: 20px;
-      &:last-child {
-        margin-right: 0;
-      }
-      &.is-active {
-        font-weight: 600;
-        color: var(--ct-color-primary);
-        &::after {
-          content: "";
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          width: 100%;
-          height: 2px;
-          background-color: var(--ct-color-primary);
-        }
-      }
-      &.is-disabled {
-        color: var(--ct-color-disabled);
-      }
-      &:not(.is-disabled):hover {
-        color: var(--ct-color-primary);
-      }
-    }
-  }
-  &--block {
-    @{R}__item {
-      padding: 5px 12px;
-      margin-right: 8px;
-      background-color: var(--ct-color-bg);
-      border-radius: 3px;
-      line-height: 18px;
-      &:last-child {
-        margin-right: 0;
-      }
-      &.is-active {
-        font-weight: 600;
-        background-color: var(--ct-color-primary-bg);
-        color: var(--ct-color-primary);
-      }
-      &.is-disabled {
-        color: var(--ct-color-disabled);
-      }
-      &:not(.is-disabled):hover {
-        background-color: var(--ct-color-primary-bg);
-      }
-    }
-  }
-  &--button {
-    box-sizing: border-box;
-    border-radius: var(--tabs-button-border-radius);
-    @{R}__item {
-      padding: 5px 12px;
-      border: 1px solid #a4afbb;
-      border-right-width: 0;
-      &:first-child {
-        border-radius: var(--tabs-button-border-radius) 0 0
-          var(--tabs-button-border-radius);
-      }
-      &:last-child {
-        border-right-width: 1px;
-        border-radius: 0 var(--tabs-button-border-radius)
-          var(--tabs-button-border-radius) 0;
-      }
-      &.is-active {
-        font-weight: 600;
-        background-color: var(--ct-color-primary);
-        color: #fff;
-        border-color: var(--ct-color-primary);
-        border-right-width: 0;
-        & + div {
-          border-left-color: transparent;
-        }
-      }
-      &.is-disabled {
-        color: var(--ct-color-disabled);
-      }
-      &:not(.is-disabled):not(.is-active):hover {
-        color: var(--ct-color-primary);
-      }
-    }
-  }
-  &--button-bg {
-    background-color: var(--ct-color-bg);
-    border-radius: var(--tabs-button-border-radius);
-    @{R}__item {
-      position: relative;
-      padding: 5px 12px;
-      background-color: var(--ct-color-bg);
-      border-radius: 3px;
-      line-height: 18px;
-      &::before {
-        content: "";
-        position: absolute;
-        top: 50%;
-        left: 0;
-        transform: translateY(-50%);
-        width: 1px;
-        height: 16px;
-        background-color: var(--ct-color-separator);
-      }
-      &:first-child {
-        &::before {
-          display: none;
-        }
-      }
-      &.is-active {
-        font-weight: 600;
-        background-color: var(--ct-color-primary);
-        color: #fff;
-        &::before {
-          display: none;
-        }
-      }
-      &.is-disabled {
-        color: var(--ct-color-disabled);
-      }
-      &:not(.is-disabled):not(.is-active):hover {
-        color: var(--ct-color-primary);
-      }
-    }
-  }
-  &.is-nav {
-    font-size: 18px;
-    font-weight: 600;
-    line-height: 22px;
-    @{R}__item {
-      padding: 23px 0;
-      margin-right: 36px;
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-  }
-}
+<template>
+  <div :class="[ns.b(), ns.m(type), ns.is('nav', nav)]" ref="_ref">
+    <div
+      v-for="(item, index) in list"
+      :key="index"
+      :class="[
+        ns.e('item'),
+        ns.is('disabled', item.disabled),
+        ns.is('active', modelValue === item.value),
+      ]"
+      @click="handleClick(item, index)"
+    >
+      <slot :index="index" :item="item">
+        <span :class="ns.e('item-text')">{{ item.label }}</span>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import { useNamespace } from "../../../hooks";
+const ns = useNamespace("tabs");
+const props = defineProps({
+  nav: {
+    type: Boolean,
+    default: false,
+  },
+  type: {
+    type: String,
+    default: "default",
+  },
+  modelValue: {
+    type: [String, Number],
+    default: "",
+  },
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  beforeLeave: Function,
+});
+const emit = defineEmits(["click", "change", "update:modelValue"]);
+const _ref = ref(null);
+
+const handleClick = async (item, index) => {
+  if (item.disabled) return;
+  try {
+    emit("click", item.value, index, item);
+    if (item.value === props.modelValue) return;
+    // 可以继续的标志
+    let canContinue = true;
+    if (props.beforeLeave) {
+      canContinue = await props.beforeLeave(item.value, index, item);
+    }
+    if (canContinue !== false) {
+      emit("update:modelValue", item.value);
+      emit("change", item.value, index, item);
+    }
+  } catch (error) {
+    console.error(error);
+    return;
+  }
+};
+onMounted(() => {
+  if (!props.modelValue && props.list.length) {
+    handleClick(props.list[0], 0);
+  }
+});
+defineExpose({
+  ref: _ref,
+});
+</script>
+<style lang='less'>
+.ct-tabs {
+  display: inline-flex;
+  align-items: center;
+  @R: .ct-tabs;
+  --tabs-button-border-radius: var(--ct-border-radius);
+  &__item {
+    cursor: pointer;
+    &.is-disabled {
+      cursor: not-allowed;
+    }
+  }
+  &--default {
+    @{R}__item {
+      position: relative;
+      padding: 12px 0;
+      margin-right: 32px;
+      line-height: 20px;
+      &:last-child {
+        margin-right: 0;
+      }
+      &.is-active {
+        font-weight: 600;
+        color: var(--ct-color-primary);
+        &::after {
+          content: "";
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 2px;
+          background-color: var(--ct-color-primary);
+        }
+      }
+      &.is-disabled {
+        color: var(--ct-color-disabled);
+      }
+      &:not(.is-disabled):hover {
+        color: var(--ct-color-primary);
+      }
+    }
+  }
+  &--block {
+    @{R}__item {
+      padding: 5px 12px;
+      margin-right: 8px;
+      background-color: var(--ct-color-bg);
+      border-radius: 3px;
+      line-height: 18px;
+      &:last-child {
+        margin-right: 0;
+      }
+      &.is-active {
+        font-weight: 600;
+        background-color: var(--ct-color-primary-bg);
+        color: var(--ct-color-primary);
+      }
+      &.is-disabled {
+        color: var(--ct-color-disabled);
+      }
+      &:not(.is-disabled):hover {
+        background-color: var(--ct-color-primary-bg);
+      }
+    }
+  }
+  &--button {
+    box-sizing: border-box;
+    border-radius: var(--tabs-button-border-radius);
+    @{R}__item {
+      padding: 5px 12px;
+      border: 1px solid #a4afbb;
+      border-right-width: 0;
+      &:first-child {
+        border-radius: var(--tabs-button-border-radius) 0 0
+          var(--tabs-button-border-radius);
+      }
+      &:last-child {
+        border-right-width: 1px;
+        border-radius: 0 var(--tabs-button-border-radius)
+          var(--tabs-button-border-radius) 0;
+      }
+      &.is-active {
+        font-weight: 600;
+        background-color: var(--ct-color-primary);
+        color: #fff;
+        border-color: var(--ct-color-primary);
+        border-right-width: 0;
+        & + div {
+          border-left-color: transparent;
+        }
+      }
+      &.is-disabled {
+        color: var(--ct-color-disabled);
+      }
+      &:not(.is-disabled):not(.is-active):hover {
+        color: var(--ct-color-primary);
+      }
+    }
+  }
+  &--button-bg {
+    background-color: var(--ct-color-bg);
+    border-radius: var(--tabs-button-border-radius);
+    @{R}__item {
+      position: relative;
+      padding: 5px 12px;
+      background-color: var(--ct-color-bg);
+      border-radius: 3px;
+      line-height: 18px;
+      &::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        width: 1px;
+        height: 16px;
+        background-color: var(--ct-color-separator);
+      }
+      &:first-child {
+        &::before {
+          display: none;
+        }
+      }
+      &.is-active {
+        font-weight: 600;
+        background-color: var(--ct-color-primary);
+        color: #fff;
+        &::before {
+          display: none;
+        }
+      }
+      &.is-disabled {
+        color: var(--ct-color-disabled);
+      }
+      &:not(.is-disabled):not(.is-active):hover {
+        color: var(--ct-color-primary);
+      }
+    }
+  }
+  &.is-nav {
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 22px;
+    @{R}__item {
+      padding: 23px 0;
+      margin-right: 36px;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+}
 </style>

package/packages/components/year-select/index.js

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

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

@@ -1,45 +1,45 @@
-import { buriedParamsKey, searchComponentProps } from '../../../hooks';
-
-export const yearSelectEmits = [
-  "update:modelValue",
-  buriedParamsKey,
-  'change',
-  'change-select',
-  'visible-change',
-  'blur',
-  'focus'
-];
-export const yearSelectProps = {
-  ...searchComponentProps,
-  modelValue: [Number, String, Array],
-  disabled: Boolean,
-  multiple: {
-    type: Boolean,
-    default: true
-  },
-  startPlaceholder: String,
-  endPlaceholder: String,
-  range: {
-    type: Array,
-    default() {
-      return [1950, new Date().getFullYear()];
-    },
-    validator(valueArr) {
-      if (valueArr.length !== 2) {
-        throw `请输入合理的年份取值范围：${valueArr}`;
-      }
-      let count = 0;
-      valueArr.forEach((item) => {
-        count += /\d{4}/.test(item) ? 1 : 0;
-      });
-      if (count !== 2) {
-        throw `请确保传入的两个范围都是年份：${valueArr}`;
-      }
-      return true;
-    },
-  },
-  separator: {
-    type: [String, Object],
-    default: "至",
-  },
+import { buriedParamsKey, searchComponentProps } from '../../../hooks';
+
+export const yearSelectEmits = [
+  "update:modelValue",
+  buriedParamsKey,
+  'change',
+  'change-select',
+  'visible-change',
+  'blur',
+  'focus'
+];
+export const yearSelectProps = {
+  ...searchComponentProps,
+  modelValue: [Number, String, Array],
+  disabled: Boolean,
+  multiple: {
+    type: Boolean,
+    default: true
+  },
+  startPlaceholder: String,
+  endPlaceholder: String,
+  range: {
+    type: Array,
+    default() {
+      return [1950, new Date().getFullYear()];
+    },
+    validator(valueArr) {
+      if (valueArr.length !== 2) {
+        throw `请输入合理的年份取值范围：${valueArr}`;
+      }
+      let count = 0;
+      valueArr.forEach((item) => {
+        count += /\d{4}/.test(item) ? 1 : 0;
+      });
+      if (count !== 2) {
+        throw `请确保传入的两个范围都是年份：${valueArr}`;
+      }
+      return true;
+    },
+  },
+  separator: {
+    type: [String, Object],
+    default: "至",
+  },
 }