vdesign-ui 0.2.4 → 0.2.6

package/dist/components/popup/index.vue

@@ -1,243 +0,0 @@
-<template>
-  <div>
-    <!-- 遮罩层 -->
-    <div
-      v-if="overlay && value"
-      class="popup-overlay"
-      :style="overlayCustomStyle"
-      @click="onClickOverlay"
-    ></div>
-
-    <!-- 弹出层 -->
-    <transition :name="transitionName">
-      <div
-       v-if="value"
-        :class="['popup', positionClass]"
-        :style="[popupStyle, transitionStyle]"
-      >
-        <slot></slot>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Popup',
-  props: {
-    // 弹出位置，可选值：'top'、'bottom'、'left'、'right'、'center'
-    position: {
-      type: String,
-      default: 'center',
-    },
-    // 动画持续时间，单位毫秒
-    duration: {
-      type: Number,
-      default: 300,
-    },
-    // 指定挂载的容器，可以是选择器字符串或返回元素的函数
-    getContainer: {
-      type: [String, Function],
-      default: 'body',
-    },
-    // 是否锁定滚动
-    lockScroll: {
-      type: Boolean,
-      default: true,
-    },
-    // 是否适配底部安全区（针对全面屏手机）
-    safeAreaInsetBottom: {
-      type: Boolean,
-      default: false,
-    },
-    // 控制弹层显示或隐藏，支持 v-model 双向绑定
-    value: {
-      type: Boolean,
-      default: false,
-    },
-    // 是否显示遮罩层
-    overlay: {
-      type: Boolean,
-      default: true,
-    },
-    // 遮罩层的自定义样式
-    overlayStyle: {
-      type: Object,
-      default: () => ({}),
-    },
-    // 是否点击遮罩层关闭弹出层
-    closeOnClickOverlay: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  computed: {
-    // 根据 position 属性计算对应的类名
-    positionClass() {
-      return `popup-${this.position}`;
-    },
-    // 根据 position 属性计算对应的过渡名称
-    transitionName() {
-      return `popup-slide-${this.position}`;
-    },
-    // 根据 safeAreaInsetBottom 属性计算弹出层的样式
-    popupStyle() {
-      const style = {};
-      if (this.safeAreaInsetBottom && (this.position === 'bottom' || this.position === 'center')) {
-        style.paddingBottom = 'env(safe-area-inset-bottom)';
-      }
-      return style;
-    },
-    // 动态设置过渡持续时间的样式
-    transitionStyle() {
-      return {
-        transitionDuration: `${this.duration}ms`,
-      };
-    },
-    // 合并遮罩层的自定义样式
-    overlayCustomStyle() {
-      return Object.assign(
-        {
-          backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        },
-        this.overlayStyle
-      );
-    },
-  },
-  watch: {
-    // 监听 value 属性的变化，控制弹出层的显示和隐藏
-    value(val) {
-      if (val) {
-        this.openPopup();
-      } else {
-        this.closePopup();
-      }
-    },
-  },
-  mounted() {
-    // 组件挂载时，根据初始的 value 值决定是否打开弹出层
-    if (this.value) {
-      this.openPopup();
-    }
-  },
-  methods: {
-    // 打开弹出层
-    openPopup() {
-      if (this.lockScroll) {
-        document.body.style.overflow = 'hidden';
-      }
-      this.appendToContainer();
-    },
-    // 关闭弹出层
-    closePopup() {
-      if (this.lockScroll) {
-        document.body.style.overflow = '';
-      }
-    },
-    // 将弹出层添加到指定的容器中
-    appendToContainer() {
-      const container =
-        typeof this.getContainer === 'function'
-          ? this.getContainer()
-          : document.querySelector(this.getContainer);
-      if (container && container !== this.$el.parentNode) {
-        container.appendChild(this.$el);
-      }
-    },
-    // 点击遮罩层关闭弹出层
-    onClickOverlay() {
-      if (this.closeOnClickOverlay) {
-        this.$emit('input', false);
-      }
-    },
-  },
-  beforeDestroy() {
-    // 组件销毁前，恢复滚动
-    if (this.lockScroll) {
-      document.body.style.overflow = '';
-    }
-  },
-};
-</script>
-
-<style scoped>
-.popup-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 999;
-}
-
-.popup {
-  position: fixed;
-  z-index: 1000;
-}
-
-.popup-center {
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.popup-top {
-  top: 0;
-  left: 0;
-  width: 100%;
-}
-
-.popup-bottom {
-  bottom: 0;
-  left: 0;
-  width: 100%;
-}
-
-.popup-left {
-  top: 0;
-  left: 0;
-  height: 100%;
-}
-
-.popup-right {
-  top: 0;
-  right: 0;
-  height: 100%;
-}
-
-/* 过渡效果 */
-.popup-slide-center-enter-active,
-.popup-slide-center-leave-active,
-.popup-slide-top-enter-active,
-.popup-slide-top-leave-active,
-.popup-slide-bottom-enter-active,
-.popup-slide-bottom-leave-active,
-.popup-slide-left-enter-active,
-.popup-slide-left-leave-active,
-.popup-slide-right-enter-active,
-.popup-slide-right-leave-active {
-  transition-property: all;
-  transition-timing-function: ease;
-}
-
-.popup-slide-top-enter,
-.popup-slide-top-leave-to {
-  transform: translateY(-100%);
-}
-.popup-slide-bottom-enter,
-.popup-slide-bottom-leave-to {
-  transform: translateY(100%);
-}
-.popup-slide-left-enter,
-.popup-slide-left-leave-to {
-  transform: translateX(-100%);
-}
-.popup-slide-right-enter,
-.popup-slide-right-leave-to {
-  transform: translateX(100%);
-}
-.popup-slide-center-enter,
-.popup-slide-center-leave-to {
-  opacity: 0;
-}
-</style>

package/dist/components/radio/index.js

@@ -1,8 +0,0 @@
-import Radio from './index.vue';
-import './style.less';
-
-Radio.install = function (Vue) {
-  Vue.component(Radio.name, Radio);
-};
-
-export default Radio;

package/dist/components/radio/index.vue

@@ -1,184 +0,0 @@
-<template>
-    <!-- 常规单选框 -->
-    <label :class="wrapClasses" v-if="!radioButton">
-      <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="isDisabled"
-        :checked="currentValue"
-        @change="handleChange"
-      >
-      <span class="vd-radio-button-text">
-        <slot></slot>
-      </span>
-    </label>
-  </template>
-  <script>
-import { findComponentUpward } from "../utils/assist";
-  
-  const prefixCls = 'vd-radio';
-  
-  export default {
-    name: 'vd-radio',
-    props: {
-     // 组件的值，用于 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 === this.trueValue,
-        // 是否属于单选框组
-        isGroup: false,
-        // 父级单选框组的引用
-        parentGroup: null,
-      };
-    },
-    computed: {
-      // 计算禁用状态，优先级：自身 > 组
-      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() {
-      // 查找父级 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;
-        }
-  
-        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 {
-          // 否则，触发自身的 change 事件
-          this.$emit('change', value);
-        }
-      },
-      // 更新 currentValue
-      updateValue() {
-        if (this.isGroup) {
-          // 组内，通过比较组的值和自身的 name 来确定是否选中
-          this.currentValue = this.parentGroup.value === this.name;
-        } else {
-          // 组外，通过比较 value 和 trueValue
-          this.currentValue = this.value === this.trueValue;
-        }
-      },
-    },
-    watch: {
-      // 监听 value 的变化
-      value() {
-        this.updateValue();
-      },
-      // 如果在组内，监听组的 value 变化
-      'parentGroup.value'() {
-        this.updateValue();
-      },
-    },
-  };
-  </script>
-  
-<style lang="less">
-@import "./style.less";
-</style>