vdesign-ui 0.2.19 → 0.3.0

package/dist/components/datetime-picker/index.js

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

package/dist/components/datetime-picker/index.vue

@@ -1,39 +1,39 @@
-<template>
-  <van-datetime-picker v-if="!picker" class="vd-datetime-picker" v-on="$listeners" v-bind="$attrs" />
-  <van-picker v-else class="vd-datetime-picker" v-on="$listeners" v-bind="$attrs" />
-</template>
-
-<script>
-// import Vue from 'vue'
-import { DatetimePicker } from 'vant';
-import { Picker } from 'vant';
-// import 'vant/lib/datetime-picker/style';
-// import 'vant/lib/picker/style';
-
-
-// Vue.use(Picker);
-// Vue.use(DatetimePicker)
-
-
-export default {
-  name: 'vd-datetime-picker',
-  components: {
-    'van-picker': Picker,
-    'van-datetime-picker': DatetimePicker
-  },
-  props: {
-    picker: {
-      type: Boolean,
-      default: false,
-    }
-  },
-  data() {
-    return {
-    };
-  },
-};
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>
+<template>
+  <van-datetime-picker v-if="!picker" class="vd-datetime-picker" v-on="$listeners" v-bind="$attrs" />
+  <van-picker v-else class="vd-datetime-picker" v-on="$listeners" v-bind="$attrs" />
+</template>
+
+<script>
+// import Vue from 'vue'
+import { DatetimePicker } from 'vant';
+import { Picker } from 'vant';
+// import 'vant/lib/datetime-picker/style';
+// import 'vant/lib/picker/style';
+
+
+// Vue.use(Picker);
+// Vue.use(DatetimePicker)
+
+
+export default {
+  name: 'vd-datetime-picker',
+  components: {
+    'van-picker': Picker,
+    'van-datetime-picker': DatetimePicker
+  },
+  props: {
+    picker: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  data() {
+    return {
+    };
+  },
+};
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/datetime-picker/style.less

@@ -1,24 +1,24 @@
-.vd-datetime-picker {
-
-    .van-picker__columns {
-        padding: 0 var(--spacing-datepicker-padding_y);
-    }
-
-    .van-picker-column__item {
-        height: var(--height-datepicker-roll_bg);
-        font-size: var(--en-single-f-d-s-fontSize);
-        font-weight: var(--en-single-f-d-s-fontWeight);
-        color: var(--color-datepicker-date-text-disable);
-
-        &--selected {
-            font-size: var(--en-single-f-e-s-fontSize);
-            font-weight: var(--en-single-f-e-s-fontWeight);
-            color: var(--color-datepicker-date-text-default);
-        }
-    }
-
-    .van-picker__frame {
-        background: var(--color-datepicker-date_mask-bg-active);
-        border-radius: var(--radius-datepicker-roll_bg);
-    }
+.vd-datetime-picker {
+
+    .van-picker__columns {
+        padding: 0 var(--spacing-datepicker-padding_y);
+    }
+
+    .van-picker-column__item {
+        height: var(--height-datepicker-roll_bg);
+        font-size: var(--en-single-f-d-s-fontSize);
+        font-weight: var(--en-single-f-d-s-fontWeight);
+        color: var(--color-datepicker-date-text-disable);
+
+        &--selected {
+            font-size: var(--en-single-f-e-s-fontSize);
+            font-weight: var(--en-single-f-e-s-fontWeight);
+            color: var(--color-datepicker-date-text-default);
+        }
+    }
+
+    .van-picker__frame {
+        background: var(--color-datepicker-date_mask-bg-active);
+        border-radius: var(--radius-datepicker-roll_bg);
+    }
 }

package/dist/components/dialog/index.js

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

package/dist/components/dialog/index.vue

@@ -1,164 +1,164 @@
-<template>
-    <div class="vd-dialog-wrap">
-        <div class="vd-dialog__overlay" v-if="visible && isOverlayVisible &&  overlay" :style="{ zIndex: overlayZIndex }"
-        @click="handleOverlayClick"></div>
-        <transition name="vd-dialog-fade">
-            <div class="vd-dialog"  v-if="visible" :class="computedClassName" :style="{width : width, zIndex: overlayZIndex + 1}">
-                <header class="vd-dialog__header" :class="{ 'vd-dialog__header--img': $slots.imgs }">
-                    <div class="vd-dialog__header--img-content" v-if="$slots.imgs">
-                        <slot name="imgs"></slot>
-                    </div>
-                    <div class="vd-dialog__title" v-if="title || $slots.title">
-                        <slot name="title">
-                            {{ title }}
-                        </slot>
-                    </div>
-                </header>
-                <div class="vd-dialog__content">
-                    <div class="vd-dialog__message" :class="{ 'vd-dialog__message--head': !title }"
-                        v-if="message || $slots.content">
-                        <slot name="content">{{message}}</slot>
-                    </div>
-                </div>
-                <footer class="vd-dialog__footer">
-                    <div class="vd-dialog__btns" v-if="btns">
-                        <vd-button type="tertiary_grey" size="large" @click="cancel">{{ cancelButtonText ||
-                            $t("alert.cancel") }}</vd-button>
-                        <vd-button type="large" @click="confirm">{{ confirmButtonText || $t("alert.confirm") }} </vd-button>
-                    </div>
-                    <div class="vd-dialog__btn" v-if="btn">
-                        <vd-button type="large" @click="confirm" block>{{ confirmButtonText || $t("alert.confirm")
-                            }}</vd-button>
-                    </div>
-                    <div class="vd-dialog__btns--text" v-if="btnsText">
-                        <vd-button type="tertiary_text" size="large" @click="cancel">{{ cancelButtonText ||
-                            $t("alert.cancel")
-                            }}</vd-button>
-                        <vd-button type="primary_text" size="large" @click="confirm">{{ confirmButtonText ||
-                            $t("alert.confirm") }}</vd-button>
-                    </div>
-                    <div class="vd-dialog__btn--text-block" v-if="btnTextBlock">
-                        <vd-button type="primary_text" size="large" block @click="confirm">{{ confirmButtonText ||
-                            $t("alert.confirm") }}</vd-button>
-                    </div>
-                    <div class="vd-dialog__btns-block" v-if="btnsBlock">
-                        <vd-button type="primary" block size="large" @click="confirm">{{ confirmButtonText ||
-                            $t("alert.confirm") }}</vd-button>
-                        <vd-button type="primary_text" block size="large" @click="cancel">{{ cancelButtonText ||
-                            $t("alert.cancel") }}</vd-button>
-                    </div>
-                    <div class="vd-dialog__btns--text" v-if="$slots['extra-btn']">
-                        <slot name="extra-btn"></slot>
-                    </div>
-                </footer>
-            </div>
-        </transition>
-    </div>
-</template>
-
-<script>
-
-import { OverlayManager } from './overlay-manager.js';
-import VdButton from '../button';
-
-export default {
-    name: 'vd-dialog',
-    components: {
-        VdButton
-    },
-    props: {
-        value: Boolean,
-        btns: Boolean,
-        btnsBlock: Boolean,
-        btn: Boolean,
-        btnsText: Boolean,
-        btnTextBlock: Boolean,
-        message: String,
-        title: String,
-        className: String,
-        overlay: {
-            type: Boolean,
-            default: true
-        },
-        confirmButtonText: String,
-        cancelButtonText: String,
-        closeOnOverlay: {
-            type: Boolean,
-            default: true
-        },
-        width: [Number, String],
-    },
-    data() {
-        return {
-            isOverlayVisible: false,
-            overlayZIndex: 2000
-        }
-    },
-    watch: {
-        visible: {
-            immediate: true,
-            handler(val) {
-                if (val) {
-                this.showOverlayLayer();
-                } else {
-                this.hideOverlayLayer();
-                }
-            },
-        },
-    },
-    computed: {
-        visible() {
-            return this.value
-        },
-        computedClassName() {
-            return this.className ? `vd-dialog--${this.className}` : '';
-        },
-    },
-    methods: {
-        showOverlayLayer() {
-            if (this.overlay) {
-                OverlayManager.increment();
-                this.isOverlayVisible = OverlayManager.isOverlayVisible();
-                this.overlayZIndex = OverlayManager.getZIndex();
-            }
-        },
-        hideOverlayLayer() {
-            if (this.overlay) {
-                OverlayManager.decrement();
-                this.isOverlayVisible = OverlayManager.isOverlayVisible();
-                this.overlayZIndex = OverlayManager.getZIndex(); // 更新 z-index，以便其他遮罩正确显示
-            }
-        },
-        handleOverlayClick() {
-            if (this.closeOnOverlay) {
-                this.closeDialog();
-            }
-        },
-        closeDialog() {
-            this.$emit('input', false);
-        },
-        cancel() {
-            this.closeDialog();
-            this.$emit('cancel');
-        },
-        confirm() {
-            this.closeDialog();
-            this.$emit('confirm');
-        },
-    },
-    mounted() {
-        if (this.visible) {
-            this.showOverlayLayer();
-        }
-    },
-    beforeDestroy() {
-        if (this.visible) {
-            this.hideOverlayLayer();
-        }
-    }
-}
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>
+<template>
+    <div class="vd-dialog-wrap">
+        <div class="vd-dialog__overlay" v-if="visible && isOverlayVisible &&  overlay" :style="{ zIndex: overlayZIndex }"
+        @click="handleOverlayClick"></div>
+        <transition name="vd-dialog-fade">
+            <div class="vd-dialog"  v-if="visible" :class="computedClassName" :style="{width : width, zIndex: overlayZIndex + 1}">
+                <header class="vd-dialog__header" :class="{ 'vd-dialog__header--img': $slots.imgs }">
+                    <div class="vd-dialog__header--img-content" v-if="$slots.imgs">
+                        <slot name="imgs"></slot>
+                    </div>
+                    <div class="vd-dialog__title" v-if="title || $slots.title">
+                        <slot name="title">
+                            {{ title }}
+                        </slot>
+                    </div>
+                </header>
+                <div class="vd-dialog__content">
+                    <div class="vd-dialog__message" :class="{ 'vd-dialog__message--head': !title }"
+                        v-if="message || $slots.content">
+                        <slot name="content">{{message}}</slot>
+                    </div>
+                </div>
+                <footer class="vd-dialog__footer">
+                    <div class="vd-dialog__btns" v-if="btns">
+                        <vd-button type="tertiary_grey" size="large" @click="cancel">{{ cancelButtonText ||
+                            $t("alert.cancel") }}</vd-button>
+                        <vd-button type="large" @click="confirm">{{ confirmButtonText || $t("alert.confirm") }} </vd-button>
+                    </div>
+                    <div class="vd-dialog__btn" v-if="btn">
+                        <vd-button type="large" @click="confirm" block>{{ confirmButtonText || $t("alert.confirm")
+                            }}</vd-button>
+                    </div>
+                    <div class="vd-dialog__btns--text" v-if="btnsText">
+                        <vd-button type="tertiary_text" size="large" @click="cancel">{{ cancelButtonText ||
+                            $t("alert.cancel")
+                            }}</vd-button>
+                        <vd-button type="primary_text" size="large" @click="confirm">{{ confirmButtonText ||
+                            $t("alert.confirm") }}</vd-button>
+                    </div>
+                    <div class="vd-dialog__btn--text-block" v-if="btnTextBlock">
+                        <vd-button type="primary_text" size="large" block @click="confirm">{{ confirmButtonText ||
+                            $t("alert.confirm") }}</vd-button>
+                    </div>
+                    <div class="vd-dialog__btns-block" v-if="btnsBlock">
+                        <vd-button type="primary" block size="large" @click="confirm">{{ confirmButtonText ||
+                            $t("alert.confirm") }}</vd-button>
+                        <vd-button type="primary_text" block size="large" @click="cancel">{{ cancelButtonText ||
+                            $t("alert.cancel") }}</vd-button>
+                    </div>
+                    <div class="vd-dialog__btns--text" v-if="$slots['extra-btn']">
+                        <slot name="extra-btn"></slot>
+                    </div>
+                </footer>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+
+import { OverlayManager } from './overlay-manager.js';
+import VdButton from '../button';
+
+export default {
+    name: 'vd-dialog',
+    components: {
+        VdButton
+    },
+    props: {
+        value: Boolean,
+        btns: Boolean,
+        btnsBlock: Boolean,
+        btn: Boolean,
+        btnsText: Boolean,
+        btnTextBlock: Boolean,
+        message: String,
+        title: String,
+        className: String,
+        overlay: {
+            type: Boolean,
+            default: true
+        },
+        confirmButtonText: String,
+        cancelButtonText: String,
+        closeOnOverlay: {
+            type: Boolean,
+            default: true
+        },
+        width: [Number, String],
+    },
+    data() {
+        return {
+            isOverlayVisible: false,
+            overlayZIndex: 2000
+        }
+    },
+    watch: {
+        visible: {
+            immediate: true,
+            handler(val) {
+                if (val) {
+                this.showOverlayLayer();
+                } else {
+                this.hideOverlayLayer();
+                }
+            },
+        },
+    },
+    computed: {
+        visible() {
+            return this.value
+        },
+        computedClassName() {
+            return this.className ? `vd-dialog--${this.className}` : '';
+        },
+    },
+    methods: {
+        showOverlayLayer() {
+            if (this.overlay) {
+                OverlayManager.increment();
+                this.isOverlayVisible = OverlayManager.isOverlayVisible();
+                this.overlayZIndex = OverlayManager.getZIndex();
+            }
+        },
+        hideOverlayLayer() {
+            if (this.overlay) {
+                OverlayManager.decrement();
+                this.isOverlayVisible = OverlayManager.isOverlayVisible();
+                this.overlayZIndex = OverlayManager.getZIndex(); // 更新 z-index，以便其他遮罩正确显示
+            }
+        },
+        handleOverlayClick() {
+            if (this.closeOnOverlay) {
+                this.closeDialog();
+            }
+        },
+        closeDialog() {
+            this.$emit('input', false);
+        },
+        cancel() {
+            this.closeDialog();
+            this.$emit('cancel');
+        },
+        confirm() {
+            this.closeDialog();
+            this.$emit('confirm');
+        },
+    },
+    mounted() {
+        if (this.visible) {
+            this.showOverlayLayer();
+        }
+    },
+    beforeDestroy() {
+        if (this.visible) {
+            this.hideOverlayLayer();
+        }
+    }
+}
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/dialog/overlay-manager.js

@@ -1,18 +1,18 @@
-
-let overlayCount = 0;
-
-export const OverlayManager = {
-  increment() {
-    overlayCount += 1;
-  },
-  decrement() {
-    overlayCount -= 1;
-    if (overlayCount < 0) overlayCount = 0;
-  },
-  isOverlayVisible() {
-    return overlayCount > 0;
-  },
-  getZIndex() {
-    return 2000 + overlayCount; // 每个遮罩层递增的 z-index
-  }
-};
+
+let overlayCount = 0;
+
+export const OverlayManager = {
+  increment() {
+    overlayCount += 1;
+  },
+  decrement() {
+    overlayCount -= 1;
+    if (overlayCount < 0) overlayCount = 0;
+  },
+  isOverlayVisible() {
+    return overlayCount > 0;
+  },
+  getZIndex() {
+    return 2000 + overlayCount; // 每个遮罩层递增的 z-index
+  }
+};