vdesign-ui 0.2.9 → 0.2.12

package/dist/components/checkbox/index.vue

@@ -1,161 +1,161 @@
-<template>
-  <label :class="wrapClasses" v-if="!checkboxButton">
-    <span :class="checkboxClasses">
-      <!-- 处理分组和单个情况的输入元素 -->
-      <span :class="innerClasses"></span>
-        <!-- 处理分组和单个情况的输入元素 -->
-      <input v-if="group" type="checkbox" :class="inputClasses" :disabled="disabled" :value="name" v-model="model"
-        @change="change" />
-      <input v-else type="checkbox" :class="inputClasses" :disabled="disabled" :checked="currentValue"
-        @change="change" />
-    </span>
-    <!-- 标签和可选的描述 -->
-    <div class="vd-checkbox__label" v-if="$slots.default">
-      <p class="vd-checkbox__text">
-        <slot></slot>
-      </p>
-      <p class="vd-checkbox__description" v-if="extra">{{ extra }}</p>
-    </div>
-  </label>
-
-    <!-- 复选框按钮变体 -->
-  <label class="vd-checkbox vd-checkbox-button" :class="checkboxButtonClasses" v-else>
-    <input type="checkbox" :class="inputClasses" :disabled="disabled" :checked="currentValue" @change="change" />
-    <template v-if="type === 'small'">
-      <vd-icon v-if="icon" :name="icon" class="vd-checkbox-button__icon--small"></vd-icon>
-      <span class="vd-checkbox-button__text">
-        <slot></slot>
-      </span>
-    </template>
-
-    <template v-if="type === 'medium'">
-      <span class="vd-checkbox-button__text">
-        <slot></slot>
-      </span>
-      <span class="vd-checkbox-button__description" v-if="extra">{{ extra }}</span>
-    </template>
-
-    <template v-if="type === 'large'">
-      <vd-icon v-if="icon" :name="icon" class="vd-checkbox-button__icon--large"></vd-icon>
-      <span class="vd-checkbox-button__text">
-        <slot></slot>
-      </span>
-    </template>
-  </label>
-</template>
-<script>
-import { findComponentUpward } from "../utils/assist";
-import VdIcon from '../icon';
-const prefixCls = "vd-checkbox";
-
-export default {
-  name: "vd-checkbox",
-  components: {
-    VdIcon
-  },
-  props: {
-    value: [String, Number, Boolean], // 复选框的当前值
-    checkboxButton: Boolean, // 是否为复选框按钮
-    disabled: Boolean,  // 是否禁用
-    extra: String, // 额外的描述文本
-    trueValue: {
-      type: [String, Number, Boolean],
-      default: true,  // 复选框被选中时的值
-    },
-    falseValue: {
-      type: [String, Number, Boolean],
-      default: false,  // 复选框未被选中时的值
-    },
-    name: null,  //复选框的 name 属性
-    indeterminate: Boolean,  // 复选框的不确定状态
-    icon: String,  // 使用复选框按钮时显示的图标
-    type: String,   // 复选框按钮的尺寸类型（'small'，'medium'，'large'）
-  },
-  data() {
-    return {
-      model: [],  // 复选框组的模型值
-      currentValue: this.value,  // 复选框的当前值
-      group: false,  // 是否为复选框组
-      parent: null, // 对父级复选框组组件的引用
-    };
-  },
-  computed: {
-    wrapClasses() {
-      return [
-        `${prefixCls}`,
-        {
-          [`${prefixCls}--checked`]: this.currentValue,
-          [`${prefixCls}--disabled`]: this.disabled,
-        },
-      ];
-    },
-    checkboxClasses() {
-      return [
-        `${prefixCls}__input`,
-        {
-          [`${prefixCls}--indeterminate`]: this.indeterminate,
-        },
-      ];
-    },
-    innerClasses() {
-      return [`${prefixCls}__icon`];
-    },
-    inputClasses() {
-      return `${prefixCls}__original`;
-    },
-    checkboxButtonClasses() {
-      return [
-        {
-          [`${prefixCls}-button--checked`]: this.currentValue,
-          [`${prefixCls}-button--${this.type}`]: this.type,
-          [`${prefixCls}-button--disabled`]: this.disabled,
-        },
-      ];
-    },
-  },
-  mounted() {
-    this.parent = findComponentUpward(this, "vd-checkbox-group");
-    if (this.parent) {
-      this.isGroup = true;
-      this.parent.updateModel(true);
-    } else {
-      this.updateModel();
-    }
-  },
-  methods: {
-    change(event) {
-      if (this.disabled) {
-        return false;
-      }
-
-      const checked = event.target.checked;
-      this.currentValue = checked;
-
-      const value = checked ? this.trueValue : this.falseValue;
-      this.$emit("input", value);
-
-      if (this.group) {
-        this.parent.change(this.model);
-      } else {
-        this.$emit("change", value);
-      }
-    },
-    updateModel() {
-      this.currentValue = this.value === this.trueValue;
-    },
-  },
-  watch: {
-    value(val) {
-      if (val === this.trueValue || val === this.falseValue) {
-        this.updateModel();
-      } else {
-        throw "Value should be trueValue or falseValue.";
-      }
-    },
-  },
-};
-</script>
-
-<style lang="less">
-@import "./style.less";
-</style>
+<template>
+  <label :class="wrapClasses" v-if="!checkboxButton">
+    <span :class="checkboxClasses">
+      <!-- 处理分组和单个情况的输入元素 -->
+      <span :class="innerClasses"></span>
+        <!-- 处理分组和单个情况的输入元素 -->
+      <input v-if="group" type="checkbox" :class="inputClasses" :disabled="disabled" :value="name" v-model="model"
+        @change="change" />
+      <input v-else type="checkbox" :class="inputClasses" :disabled="disabled" :checked="currentValue"
+        @change="change" />
+    </span>
+    <!-- 标签和可选的描述 -->
+    <div class="vd-checkbox__label" v-if="$slots.default">
+      <p class="vd-checkbox__text">
+        <slot></slot>
+      </p>
+      <p class="vd-checkbox__description" v-if="extra">{{ extra }}</p>
+    </div>
+  </label>
+
+    <!-- 复选框按钮变体 -->
+  <label class="vd-checkbox vd-checkbox-button" :class="checkboxButtonClasses" v-else>
+    <input type="checkbox" :class="inputClasses" :disabled="disabled" :checked="currentValue" @change="change" />
+    <template v-if="type === 'small'">
+      <vd-icon v-if="icon" :name="icon" class="vd-checkbox-button__icon--small"></vd-icon>
+      <span class="vd-checkbox-button__text">
+        <slot></slot>
+      </span>
+    </template>
+
+    <template v-if="type === 'medium'">
+      <span class="vd-checkbox-button__text">
+        <slot></slot>
+      </span>
+      <span class="vd-checkbox-button__description" v-if="extra">{{ extra }}</span>
+    </template>
+
+    <template v-if="type === 'large'">
+      <vd-icon v-if="icon" :name="icon" class="vd-checkbox-button__icon--large"></vd-icon>
+      <span class="vd-checkbox-button__text">
+        <slot></slot>
+      </span>
+    </template>
+  </label>
+</template>
+<script>
+import { findComponentUpward } from "../utils/assist";
+import VdIcon from '../icon';
+const prefixCls = "vd-checkbox";
+
+export default {
+  name: "vd-checkbox",
+  components: {
+    VdIcon
+  },
+  props: {
+    value: [String, Number, Boolean], // 复选框的当前值
+    checkboxButton: Boolean, // 是否为复选框按钮
+    disabled: Boolean,  // 是否禁用
+    extra: String, // 额外的描述文本
+    trueValue: {
+      type: [String, Number, Boolean],
+      default: true,  // 复选框被选中时的值
+    },
+    falseValue: {
+      type: [String, Number, Boolean],
+      default: false,  // 复选框未被选中时的值
+    },
+    name: null,  //复选框的 name 属性
+    indeterminate: Boolean,  // 复选框的不确定状态
+    icon: String,  // 使用复选框按钮时显示的图标
+    type: String,   // 复选框按钮的尺寸类型（'small'，'medium'，'large'）
+  },
+  data() {
+    return {
+      model: [],  // 复选框组的模型值
+      currentValue: this.value,  // 复选框的当前值
+      group: false,  // 是否为复选框组
+      parent: null, // 对父级复选框组组件的引用
+    };
+  },
+  computed: {
+    wrapClasses() {
+      return [
+        `${prefixCls}`,
+        {
+          [`${prefixCls}--checked`]: this.currentValue,
+          [`${prefixCls}--disabled`]: this.disabled,
+        },
+      ];
+    },
+    checkboxClasses() {
+      return [
+        `${prefixCls}__input`,
+        {
+          [`${prefixCls}--indeterminate`]: this.indeterminate,
+        },
+      ];
+    },
+    innerClasses() {
+      return [`${prefixCls}__icon`];
+    },
+    inputClasses() {
+      return `${prefixCls}__original`;
+    },
+    checkboxButtonClasses() {
+      return [
+        {
+          [`${prefixCls}-button--checked`]: this.currentValue,
+          [`${prefixCls}-button--${this.type}`]: this.type,
+          [`${prefixCls}-button--disabled`]: this.disabled,
+        },
+      ];
+    },
+  },
+  mounted() {
+    this.parent = findComponentUpward(this, "vd-checkbox-group");
+    if (this.parent) {
+      this.isGroup = true;
+      this.parent.updateModel(true);
+    } else {
+      this.updateModel();
+    }
+  },
+  methods: {
+    change(event) {
+      if (this.disabled) {
+        return false;
+      }
+
+      const checked = event.target.checked;
+      this.currentValue = checked;
+
+      const value = checked ? this.trueValue : this.falseValue;
+      this.$emit("input", value);
+
+      if (this.group) {
+        this.parent.change(this.model);
+      } else {
+        this.$emit("change", value);
+      }
+    },
+    updateModel() {
+      this.currentValue = this.value === this.trueValue;
+    },
+  },
+  watch: {
+    value(val) {
+      if (val === this.trueValue || val === this.falseValue) {
+        this.updateModel();
+      } else {
+        throw "Value should be trueValue or falseValue.";
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less">
+@import "./style.less";
+</style>