vdesign-ui 0.1.24 → 0.2.0

package/dist/components/mixins/clickoutside.js

@@ -1,81 +1,81 @@
-import Vue from 'vue';
-import { on } from './dom';
-// 定义一个空数组 nodeList，用于存储绑定了该指令的元素。
-const nodeList = [];
-//定义一个常量 ctx，用于标识特殊属性名。
-const ctx = '@@clickoutsideContext';
-// 定义一个变量 startClick，用于存储点击开始时的事件对象。
-let startClick;
-// 定义一个变量 seed，用作节点标识的种子。
-let seed = 0;
-// 在文档上添加一个 mousedown 事件监听器，用于记录点击开始时的事件对象。
-!Vue.prototype.$isServer && on(document, 'mousedown', e => (startClick = e));
-// 添加一个 mouseup 事件监听器。当鼠标放开时，
-!Vue.prototype.$isServer && on(document, 'mouseup', e => {
-  // 遍历 nodeList 数组中的每个元素，并执行它们的 documentHandler 函数。
-  nodeList.forEach(node => node[ctx].documentHandler(e, startClick));
-});
-// 创建一个处理文档点击事件的函数。
-// 该函数返回一个闭包函数，用于检查点击事件是否发生在绑定的元素外部，并执行相应的回调函数。
-function createDocumentHandler(el, binding, vnode) {
-  return function (mouseup = {}, mousedown = {}) {
-    if (!vnode ||
-      !vnode.context ||
-      !mouseup.target ||
-      !mousedown.target ||
-      el.contains(mouseup.target) ||
-      el.contains(mousedown.target) ||
-      el === mouseup.target ||
-      (vnode.context.popperElm &&
-        (vnode.context.popperElm.contains(mouseup.target) ||
-          vnode.context.popperElm.contains(mousedown.target)))) return;
-
-    if (binding.expression &&
-      el[ctx].methodName &&
-      vnode.context[el[ctx].methodName]) {
-      vnode.context[el[ctx].methodName]();
-    } else {
-      el[ctx].bindingFn && el[ctx].bindingFn();
-    }
-  };
-}
-
-/**
- * v-clickoutside
- * @desc 点击元素外面才会触发的事件
- * @example
- * ```vue
- * <div v-element-clickoutside="handleClose">
- * ```
- */
-export default {
-  // 将元素添加到 nodeList 数组中，并为该元素添加一个包含事件处理函数的特殊属性。
-  bind(el, binding, vnode) {
-    nodeList.push(el);
-    const id = seed++;
-    el[ctx] = {
-      id,
-      documentHandler: createDocumentHandler(el, binding, vnode),
-      methodName: binding.expression,
-      bindingFn: binding.value
-    };
-  },
-  // 当指令所在组件的 VNode 更新时调用，更新元素的事件处理函数和绑定方法。
-  update(el, binding, vnode) {
-    el[ctx].documentHandler = createDocumentHandler(el, binding, vnode);
-    el[ctx].methodName = binding.expression;
-    el[ctx].bindingFn = binding.value;
-  },
-  // 从 nodeList 中移除对应的元素，并删除特殊属性。
-  unbind(el) {
-    let len = nodeList.length;
-
-    for (let i = 0; i < len; i++) {
-      if (nodeList[i][ctx].id === el[ctx].id) {
-        nodeList.splice(i, 1);
-        break;
-      }
-    }
-    delete el[ctx];
-  }
-};
+import Vue from 'vue';
+import { on } from './dom';
+// 定义一个空数组 nodeList，用于存储绑定了该指令的元素。
+const nodeList = [];
+//定义一个常量 ctx，用于标识特殊属性名。
+const ctx = '@@clickoutsideContext';
+// 定义一个变量 startClick，用于存储点击开始时的事件对象。
+let startClick;
+// 定义一个变量 seed，用作节点标识的种子。
+let seed = 0;
+// 在文档上添加一个 mousedown 事件监听器，用于记录点击开始时的事件对象。
+!Vue.prototype.$isServer && on(document, 'mousedown', e => (startClick = e));
+// 添加一个 mouseup 事件监听器。当鼠标放开时，
+!Vue.prototype.$isServer && on(document, 'mouseup', e => {
+  // 遍历 nodeList 数组中的每个元素，并执行它们的 documentHandler 函数。
+  nodeList.forEach(node => node[ctx].documentHandler(e, startClick));
+});
+// 创建一个处理文档点击事件的函数。
+// 该函数返回一个闭包函数，用于检查点击事件是否发生在绑定的元素外部，并执行相应的回调函数。
+function createDocumentHandler(el, binding, vnode) {
+  return function (mouseup = {}, mousedown = {}) {
+    if (!vnode ||
+      !vnode.context ||
+      !mouseup.target ||
+      !mousedown.target ||
+      el.contains(mouseup.target) ||
+      el.contains(mousedown.target) ||
+      el === mouseup.target ||
+      (vnode.context.popperElm &&
+        (vnode.context.popperElm.contains(mouseup.target) ||
+          vnode.context.popperElm.contains(mousedown.target)))) return;
+
+    if (binding.expression &&
+      el[ctx].methodName &&
+      vnode.context[el[ctx].methodName]) {
+      vnode.context[el[ctx].methodName](mouseup.target);
+    } else {
+      el[ctx].bindingFn && el[ctx].bindingFn();
+    }
+  };
+}
+
+/**
+ * v-clickoutside
+ * @desc 点击元素外面才会触发的事件
+ * @example
+ * ```vue
+ * <div v-element-clickoutside="handleClose">
+ * ```
+ */
+export default {
+  // 将元素添加到 nodeList 数组中，并为该元素添加一个包含事件处理函数的特殊属性。
+  bind(el, binding, vnode) {
+    nodeList.push(el);
+    const id = seed++;
+    el[ctx] = {
+      id,
+      documentHandler: createDocumentHandler(el, binding, vnode),
+      methodName: binding.expression,
+      bindingFn: binding.value
+    };
+  },
+  // 当指令所在组件的 VNode 更新时调用，更新元素的事件处理函数和绑定方法。
+  update(el, binding, vnode) {
+    el[ctx].documentHandler = createDocumentHandler(el, binding, vnode);
+    el[ctx].methodName = binding.expression;
+    el[ctx].bindingFn = binding.value;
+  },
+  // 从 nodeList 中移除对应的元素，并删除特殊属性。
+  unbind(el) {
+    let len = nodeList.length;
+
+    for (let i = 0; i < len; i++) {
+      if (nodeList[i][ctx].id === el[ctx].id) {
+        nodeList.splice(i, 1);
+        break;
+      }
+    }
+    delete el[ctx];
+  }
+};

package/dist/components/mixins/outlineConfigPlugin.js

@@ -1,5 +1,5 @@
 // outlineConfigPlugin.js
-
+import { inBrowser } from '@p/utils/env'
 // __debug=1&__debug_vdesign_token=1
 const OutlineConfig = {
     install(Vue,  options = {}) {
@@ -11,14 +11,19 @@ const OutlineConfig = {
   
       Vue.mixin({
         created() {
-          this.$outlineConfig.outlineEnabled = this.shouldEnableOutline()
-
-          this.$watch('$outlineConfig.outlineEnabled', (newValue) => {
-            document.documentElement.style.setProperty('--outline-visible', newValue ? '1px' : '0');
-          }, { immediate: true });
+          if (inBrowser) {
+            this.$outlineConfig.outlineEnabled = this.shouldEnableOutline()
+            this.$watch('$outlineConfig.outlineEnabled', (newValue) => {
+              document.documentElement.style.setProperty('--outline-visible', newValue ? '1px' : '0');
+            }, { immediate: true });
+          }
         },
         methods:{
           shouldEnableOutline() {
+            if (!inBrowser) {
+              // 如果是在服务端渲染，返回默认值 false
+              return false;
+            }
             // 获取URL的查询参数部分
             const searchParams = new URLSearchParams(window.location.search);
             // 对于哈希模式，也解析哈希中的查询字符串

package/dist/components/noticebar/index.vue

@@ -66,6 +66,7 @@
 </template>
 
 <script>
+import { inBrowser } from '@p/utils/env'
 export default {
   name: 'vd-noticebar',
   props: {
@@ -173,12 +174,16 @@ export default {
   },
 
   updated() {
-    this.$_checkOverflow()
+    if (inBrowser) {
+      this.$_checkOverflow();
+    }
   },
 
   mounted() {
-    this.$_checkOverflow()
-    this.init()
+    if (inBrowser) {
+      this.$_checkOverflow();
+      this.init();
+    }
   },
 
   methods: {
@@ -209,7 +214,7 @@ export default {
 
     },
     init() {
-
+      if (!inBrowser) return; // 确保只在浏览器环境执行
       const { wrap, content } = this.$refs
       if (wrap && content) {
         // const _width = window.innerWidth

package/dist/components/pagebreak/index.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="vd-page-break">
-    <template v-if="drop">
+    <template v-if="drop === 'dropdot'">
       <div v-for="pageNumber in totalPages" class="vd-page-break__cell"
         :class="{ 'vd-page-break__cell--active': pageNumber === currentPage }" :key="pageNumber"
         @click="changePage(pageNumber)">
       </div>
     </template>
 
-    <div class="vd-page-break__number" v-else>
-      <span class="vd-page-break__number--active" v-html="number"></span>
+    <div class="vd-page-break__number"  v-else-if="drop === 'dropnum'">
+      <span class="vd-page-break__number--active" v-if="number">{{ number }}</span>
       <span class="vd-page-break__number--line">/</span>
       <span class="vd-page-break__number--total">{{ total }}</span>
     </div>
@@ -19,36 +19,43 @@
 export default {
   name: 'vd-page-break',
   props: {
+    drop: {
+      type: String,
+      default: 'dropdot'
+    },
     totalPages: {
       type: Number,
       default: 5
     },
-    drop: {
-      type: Boolean,
-      default: true
-    },
-    number: {
+    activePage: {
       type: Number,
-      default: 1
+      default: 1 // 默认显示第一页
     },
     total: {
       type: Number,
       default: 9
-    }
+    },
+    number: {
+      type: Number,
+      default: 1
+    },
+
   },
   data() {
     return {
-      currentPage: 1,
+      currentPage: this.activePage // 从外部传入的值初始化,
     }
   },
-  computed: {
-
+  watch: {
+    activePage(newVal) {
+      this.currentPage = newVal; // 外部传入值变化时更新当前页
+    }
   },
   methods: {
     changePage(pageNumber) {
       if (pageNumber >= 1 && pageNumber <= this.totalPages) {
         this.currentPage = pageNumber;
-        this.$emit('page-changed', pageNumber);
+        this.$emit('change', pageNumber);
       }
     },
   },

package/dist/components/radio/index.vue

@@ -1,155 +1,184 @@
 <template>
+    <!-- 常规单选框 -->
     <label :class="wrapClasses" v-if="!radioButton">
-        <span :class="radioClasses">
-            <span :class="innerClasses"></span>
-            <input type="radio" :class="inputClasses" :disabled="disabled" :checked="currentValue" @change="change">
-        </span>
-        <div class="vd-radio__label" v-if="$slots.default">
-            <div class="vd-radio__text">
-                <slot></slot>
-            </div>
-            <!-- <p class="vd-radio__description" v-if="extra">{{ extra }}</p> -->
+      <span :class="radioClasses">
+        <span :class="innerClasses"></span>
+        <input
+          type="radio"
+          :class="inputClasses"
+          :disabled="isDisabled"
+          :checked="currentValue"
+          @change="handleChange"
+        >
+      </span>
+      <!-- 标签内容 -->
+      <div class="vd-radio__label" v-if="$slots.default">
+        <div class="vd-radio__text">
+          <slot></slot>
         </div>
+      </div>
     </label>
-
-
-    <label class="vd-radio vd-radio-button" :class="radioButtonClasses" v-else>
-        <input type="radio" :class="inputClasses" :disabled="disabled" :checked="currentValue" @change="change">
-        <span class="vd-radio-button-text">
-            <slot></slot>
-        </span>
+  
+    <!-- 按钮样式的单选框 -->
+    <label
+      class="vd-radio vd-radio-button"
+      :class="radioButtonClasses"
+      v-else
+    >
+      <input
+        type="radio"
+        :class="inputClasses"
+        :disabled="isDisabled"
+        :checked="currentValue"
+        @change="handleChange"
+      >
+      <span class="vd-radio-button-text">
+        <slot></slot>
+      </span>
     </label>
-</template>
-<script>
-import { findComponentUpward } from './assist';
-const prefixCls = 'vd-radio';
-
-export default {
+  </template>
+  <script>
+  import { findComponentUpward } from './assist';
+  
+  const prefixCls = 'vd-radio';
+  
+  export default {
     name: 'vd-radio',
     props: {
-        radioButton: {
-            type: Boolean,
-            default: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        value: {
-            type: [String, Number, Boolean],
-            default: false
-        },
-        trueValue: {
-            type: [String, Number, Boolean],
-            default: true
-        },
-        falseValue: {
-            type: [String, Number, Boolean],
-            default: false
-        },
-        name: {
-            type: [String, Number, Boolean]
-        },
-        type: {
-            type: String,
-            default: ''
-        },
+     // 组件的值，用于 v-model 绑定
+      value: {
+        type: [String, Number, Boolean],
+        default: false,
+      },
+      // 是否为按钮样式
+      radioButton: Boolean,
+      // 是否禁用
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      // 选中时的值
+      trueValue: {
+        type: [String, Number, Boolean],
+        default: true,
+      },
+      // 未选中时的值
+      falseValue: {
+        type: [String, Number, Boolean],
+        default: false,
+      },
+      // 单选框的标识名称，在组内使用
+      name: {
+        type: [String, Number, Boolean],
+      },
+      // 类型，用于样式
+      type: String,
     },
     data() {
-        return {
-            currentValue: this.value,
-            group: false,
-            parent: findComponentUpward(this, 'vd-radio-group'),
-            // parent: this.$parent,
-            focusWrapper: false,
-            focusInner: false
-        };
+      return {
+        // 当前是否选中
+        currentValue: this.value === this.trueValue,
+        // 是否属于单选框组
+        isGroup: false,
+        // 父级单选框组的引用
+        parentGroup: null,
+      };
     },
     computed: {
-        wrapClasses() {
-            return [
-                `${prefixCls}`,
-                {
-                    [`${prefixCls}--checked`]: this.currentValue,
-                    [`${prefixCls}--disabled`]: this.disabled,
-                }
-            ];
-        },
-        radioClasses() {
-            return [
-                `${prefixCls}__input`,
-            ];
-        },
-        innerClasses() {
-            return [
-                `${prefixCls}__icon`,
-            ];
-        },
-        inputClasses() {
-            return `${prefixCls}__original`;
-        },
-        radioButtonClasses() {
-            return [
-                {
-                    [`${prefixCls}-button--checked`]: this.currentValue,
-                    [`${prefixCls}-button--${this.type}`]: this.type,
-                    [`${prefixCls}-button--disabled`]: this.disabled,
-                }
-            ]
-
-        }
+      // 计算禁用状态，优先级：自身 > 组
+      isDisabled() {
+        return this.disabled || (this.isGroup && this.parentGroup.disabled);
+      },
+      // 包裹类名
+      wrapClasses() {
+        return [
+          `${prefixCls}`,
+          {
+            [`${prefixCls}--checked`]: this.currentValue,
+            [`${prefixCls}--disabled`]: this.isDisabled,
+          },
+        ];
+      },
+      // 单选框的类名
+      radioClasses() {
+        return [`${prefixCls}__input`];
+      },
+      // 图标的类名
+      innerClasses() {
+        return [`${prefixCls}__icon`];
+      },
+      // 输入框的类名
+      inputClasses() {
+        return `${prefixCls}__original`;
+      },
+      // 按钮样式的类名
+      radioButtonClasses() {
+        return [
+          {
+            [`${prefixCls}-button--checked`]: this.currentValue,
+            [`${prefixCls}-button--${this.type}`]: this.type,
+            [`${prefixCls}-button--disabled`]: this.isDisabled,
+          },
+        ];
+      },
     },
     mounted() {
-        if (this.parent) {
-            this.group = true;
+      // 查找父级 vd-radio-group 组件
+      this.parentGroup = findComponentUpward(this, 'vd-radio-group');
+      this.isGroup = !!this.parentGroup;
+  
+      if (this.isGroup) {
+        // 如果在组内，注册到组中
+        this.parentGroup.updateValue();
+      } else {
+        // 如果不在组内，更新自身的选中状态
+        this.updateValue();
+      }
+    },
+    methods: {
+      // 处理 change 事件
+      handleChange(event) {
+        if (this.isDisabled) {
+          return;
         }
-
-        if (this.group) {
-            this.parent.updateValue();
+  
+        const checked = event.target.checked;
+        this.currentValue = checked;
+        const value = checked ? this.trueValue : this.falseValue;
+        this.$emit('input', value);
+  
+        if (this.isGroup) {
+          // 如果在组内，通知组更新
+          this.parentGroup.change(this.name);
         } else {
-            this.updateValue();
+          // 否则，触发自身的 change 事件
+          this.$emit('change', value);
         }
-    },
-    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) {
-                if (this.name !== undefined) {
-                    this.parent.change({
-                        value: this.name,
-                        checked: this.value
-                    });
-                }
-            } else {
-                this.$emit('change', value);
-            }
-        },
-        updateValue() {
-            this.currentValue = this.value === this.trueValue;
-        },
-
+      },
+      // 更新 currentValue
+      updateValue() {
+        if (this.isGroup) {
+          // 组内，通过比较组的值和自身的 name 来确定是否选中
+          this.currentValue = this.parentGroup.value === this.name;
+        } else {
+          // 组外，通过比较 value 和 trueValue
+          this.currentValue = this.value === this.trueValue;
+        }
+      },
     },
     watch: {
-        value(val) {
-            if (val === this.trueValue || val === this.falseValue) {
-                this.updateValue();
-            } else {
-                throw 'Value should be trueValue or falseValue.';
-            }
-        }
-    }
-};
-</script>
-
+      // 监听 value 的变化
+      value() {
+        this.updateValue();
+      },
+      // 如果在组内，监听组的 value 变化
+      'parentGroup.value'() {
+        this.updateValue();
+      },
+    },
+  };
+  </script>
+  
 <style lang="less">
-@import './style.less';
+@import "./style.less";
 </style>