vdesign-ui 0.1.21 → 0.1.22

package/dist/components/list/style.less

@@ -0,0 +1,292 @@
+@title-prefix-cls: vd-list;
+
+.@{title-prefix-cls} {
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: var(--bg-color-1);
+
+    &--right {
+        display: flex;
+        align-items: center;
+    }
+
+    &-content {
+        display: flex;
+        align-items: center;
+    }
+
+    &-content-common {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    // &-inner__title{
+    //     color: var(--color-title-head);
+    // }
+
+    &__subtext {
+        margin-block-start: calc(var(--spacing-title-subtitle-margin_top) * 1px);
+        color: var(--color-title-text);
+    }
+
+    &-arrow {
+        // color:var(--color-title-icon_arrow);
+        display: flex;
+        margin-inline-start: calc(var(--spacing-list-info_icon-margin_y) * 1px);
+
+        .vd-iconfont {
+            font-size: calc(var(--icon-small) * 1px);
+            color: var(--text-color-h2);
+        }
+    }
+
+    &__multext {
+        font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
+        font-weight: var(--en-single-f-c-s-fontWeight);
+        color: var(--text-color-h1);
+    }
+
+    &-xs {
+        padding-block-start: calc(var(--spacing-list-info_s-padding_top) * 1px);
+        padding-block-end: calc(var(--spacing-list-info_s-padding_bottom) * 1px);
+        // &__icon--left{
+        //     margin-inline-end: calc(var(--spacing-title-primary_icon-margin_y) * 1px);
+        //     font-size: calc(var(--icon-title-primary) * 1px);  
+        // }
+
+        &__icon--right {
+            font-size: 16px;
+            color: var(--text-color-h2);
+        }
+
+        &__title {
+            margin-inline-end: calc(var(--spacing-list-info_icon-margin_y) * 1px);
+            color: var(--text-color-h2);
+            font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+            font-weight: var(--en-single-f-c-r-fontWeight);
+        }
+
+        &__text--right {
+            font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+            font-weight: var(--en-single-f-c-r-fontWeight);
+            color: var(--text-color-h1);
+        }
+
+        // &__subtext{
+        //     font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+        //     font-weight: var(--en-single-f-c-r-fontWeight);
+        // }
+    }
+
+    &-s {
+        padding-block-start: calc(var(--spacing-list-info_m-padding_top) * 1px);
+        padding-block-end: calc(var(--spacing-list-info_m-padding_bottom) * 1px);
+
+        // &__icon--left{
+        //     margin-inline-end: calc(var(--spacing-title-secondary_icon-margin_y) * 1px);
+        //     font-size: calc(var(--icon-title-secondary) * 1px);
+        // }
+
+        &__icon--right {
+            font-size: 16px;
+            color: var(--text-color-h2);
+        }
+
+        &__title {
+            margin-inline-end: calc(var(--spacing-list-info_icon-margin_y) * 1px);
+            color: var(--text-color-h1);
+            font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+            font-weight: var(--en-single-f-c-r-fontWeight);
+        }
+
+        &__text--right {
+            font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
+            font-weight: var(--en-single-f-c-s-fontWeight);
+            color: var(--text-color-h1);
+        }
+
+        // &__subtext{
+        //     font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
+        //     font-weight: var(--en-single-f-b-r-fontWeight);
+        // }
+    }
+
+    &-m {
+        padding-block-start: calc(var(--spacing-list-info_l-padding_top) * 1px);
+        padding-block-end: calc(var(--spacing-list-info_l-padding_bottom) * 1px);
+
+        // &__icon--left{
+        //     margin-inline-end: calc(var(--spacing-title-tertiary_icon-margin_y) * 1px);
+        //     font-size: calc(var(--icon-title-tertiary) * 1px);
+        // }
+
+        &__icon--right {
+            // margin-inline-start: calc(var(--spacing-title-tertiary_icon-margin_y) * 1px);
+            font-size: 16px;
+            color: var(--text-color-h2);
+        }
+
+        &__title {
+            margin-inline-end: calc(var(--spacing-list-info_icon-margin_y) * 1px);
+            color: var(--text-color-h2);
+            font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+            font-weight: var(--en-single-f-c-r-fontWeight);
+        }
+
+        &__text--right {
+            font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
+            font-weight: var(--en-single-f-d-r-fontWeight);
+            color: var(--text-color-h1);
+        }
+
+        // &__subtext{
+        //     font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
+        //     font-weight: var(--en-single-f-b-r-fontSize);
+        // }
+    }
+
+    &-l {
+        height: calc(var(--height-super-large) * 1px);
+
+        // &__icon--left{
+        //     margin-inline-end: calc(var(--spacing-title-quaternary_icon-margin_y) * 1px);
+        //     font-size: calc(var(--icon-title-quaternary) * 1px);
+        // }
+
+        &__icon--right {
+            font-size: 16px;
+            color: var(--text-color-h2);
+        }
+
+        &__title {
+            margin-inline-end: calc(var(--spacing-list-info_icon-margin_y) * 1px);
+            color: var(--text-color-h1);
+            font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+            font-weight: var(--en-single-f-c-r-fontWeight);
+        }
+
+        &__text--right {
+            text-align: end;
+            font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+            font-weight: var(--en-single-f-d-s-fontWeight);
+            color: var(--text-color-h1);
+        }
+
+        // &__subtext{
+        //     font-size: calc(var(--en-single-f-a-r-fontSize) * 1px);
+        //     font-weight: var(--en-single-f-a-r-fontSize);
+        // }
+    }
+
+    &-common {
+        padding-block-start: calc(var(--spacing-list-common-padding_x) * 1px);
+        padding-block-end: calc(var(--spacing-list-common-padding_x) * 1px);
+        padding-inline-start: calc(var(--spacing-list-common-padding_y) * 1px);
+        padding-inline-end: calc(var(--spacing-list-common-padding_y) * 1px);
+
+
+        &--left {
+            display: flex;
+            align-items: center;
+        }
+
+
+        &__icon--leftcus {
+            margin-inline-end: calc(var(--spacing-list-common_icon-margin_right) * 1px);
+            font-size: calc(var(--icon-large) * 1px);
+            color: var(--text-color-h2);
+        }
+
+        // &__icon--left{
+        //     margin-inline-end: calc(var(--spacing-title-quaternary_icon-margin_y) * 1px);
+        //     font-size: calc(var(--icon-title-quaternary) * 1px);
+        // }
+
+        // &__icon--right{
+        //     margin-inline-start: calc(var(--spacing-title-quaternary_icon-margin_y) * 1px);
+        //     font-size: calc(var(--icon-title-quaternary) * 1px);
+        // }
+
+        &__title {
+            // word-break: break-all;
+            // text-overflow: ellipsis;
+            // display: -webkit-box;
+            // -webkit-box-orient: vertical;
+            // -webkit-line-clamp: 2; /* 超出几行省略 */
+            // overflow: hidden;
+            color: var(--color-list-title);
+            font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+            font-weight: var(--en-single-f-d-s-fontWeight);
+        }
+
+        &__text--right {
+            text-align: end;
+            margin-inline-start: calc(var(--spacing-list-common_describe-margin_xy) * 1px);
+            font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+            font-weight: var(--en-single-f-c-r-fontWeight);
+            color: var(--color-list-text);
+
+        }
+
+        &__subtext {
+            line-height: 21px;
+            color: var(--color-list-text);
+            font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+            font-weight: var(--en-single-f-c-r-fontWeight);
+        }
+
+        &__badge {
+            margin-inline-start: calc(var(--spacing-list-common_badge-margin_left) * 1px);
+        }
+    }
+
+
+    &-check {
+        padding-block-start: calc(var(--spacing-list-common-padding_x) * 1px);
+        padding-block-end: calc(var(--spacing-list-common-padding_x) * 1px);
+
+        &--active {
+
+            .@{title-prefix-cls}-check__select {
+                margin-inline-start: calc(var(--spacing-list-check-margin_left) * 1px);
+
+                .vd-iconfont {
+                    transform: scaleX(1) !important;
+                    direction: ltr;
+                    font-size: calc(var(--icon-list-check) * 1px);
+                }
+            }
+
+            .@{title-prefix-cls}-check__title {
+                font-size: calc(var(--en-multi-f-d-s-fontSize) * 1px);
+                font-weight: var(--en-multi-f-d-s-fontWeight);
+            }
+        }
+
+        &__title {
+            color: var(--color-list-title);
+            font-size: calc(var(--en-multi-f-d-r-fontSize) * 1px);
+            font-weight: var(--en-multi-f-d-r-fontWeight);
+        }
+
+        &__icon--leftcus {
+            margin-inline-end: calc(var(--spacing-list-check_icon-margin_right) * 1px);
+            font-size: calc(var(--icon-large) * 1px);
+            color: var(--text-color-h2);
+        }
+    }
+
+    &__icon--extra {
+        font-size: 16px;
+        margin-inline-end: calc(var(--spacing-list-info_icon-margin_y) * 1px);
+        color: var(--text-color-h2);
+    }
+
+    &__switch {
+        display: flex;
+        margin-inline-start: calc(var(--spacing-list-common_switch-margin_left) * 1px);
+    }
+}

package/dist/components/loading/index.js

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

package/dist/components/loading/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="vd-loading-wrapper">
+
+    <div class="vd-loading" v-if="loading">
+      <slot>
+        <img src="./loading.png" alt="">
+      </slot>
+      <span class="vd-loading__text" v-if="text">{{ text }}</span>
+    </div>
+    <div class="vd-refresh" :class="refreshClasses" v-else>
+      <img src="./refresh.png" alt="">
+    </div>
+  </div>
+</template> 
+
+<script>
+export default {
+    name:'vd-loading',
+    props:{
+      text:{
+        type: String,
+        default:''
+      },
+      loading:{
+        type: Boolean,
+        default:true
+      },
+      size:{
+        type: String,
+        default:'large'
+      }
+    },
+    computed:{
+      refreshClasses() {
+        return [
+          'vd-refresh',
+          {
+            [`vd-refresh--${this.size}`]:this.size
+          }
+        ]
+      }
+    },
+    methods:{
+    },
+    mounted(){
+    
+    }
+}
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/loading/style.less

@@ -0,0 +1,48 @@
+
+.vd-loading{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    margin-block-start: -16px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    width: fit-content;
+    min-height: calc(var(--height-loading-small) * 1px);
+    min-width: calc(var(--width-loading-small) * 1px);
+    max-width: calc(var(--width-loading-large) * 1px);
+    background-color: var(--color-loading-bg);
+    border-radius: calc(var(--radius-loading-size) * 1px);
+    padding: calc(var(--spacing-loading-padding_x) * 1px) calc(var(--spacing-loading-padding_y) * 1px);
+    &__text{
+        margin-block-start: calc(var(--spacing-loading-icon-margin_bottom) * 1px);
+        font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+        color: var(--color-loading-text);
+    }
+
+    img{
+        margin: 0 auto;
+        width: calc(var(--icon-loading-size) * 1px);
+    }
+}
+
+
+.vd-refresh{
+
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+
+    &--large{
+        width: calc(var(--icon-loading-refres_large) * 1px);
+    }
+    
+    &--small{
+        width: calc(var(--icon-loading-refres_small ) * 1px);
+    }
+
+}
+

package/dist/components/mixins/clickoutside.js

@@ -0,0 +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];
+  }
+};

package/dist/components/mixins/dom.js

@@ -0,0 +1,41 @@
+/* istanbul ignore next */
+
+import Vue from 'vue';
+
+const isServer = Vue.prototype.$isServer;
+/* istanbul ignore next */
+export const on = (function () {
+  // 添加事件监听器
+  if (!isServer && document.addEventListener) {
+    return function (element, event, handler) {
+      if (element && event && handler) {
+        element.addEventListener(event, handler, false);
+      }
+    };
+  } else {
+    // IE8 及其以下版本没有 addEventListener 方法
+    return function (element, event, handler) {
+      if (element && event && handler) {
+        element.attachEvent('on' + event, handler);
+      }
+    };
+  }
+})();
+
+/* istanbul ignore next */
+export const off = (function () {
+  // 移除事件监听器
+  if (!isServer && document.removeEventListener) {
+    return function (element, event, handler) {
+      if (element && event) {
+        element.removeEventListener(event, handler, false);
+      }
+    };
+  } else {
+    return function (element, event, handler) {
+      if (element && event) {
+        element.detachEvent('on' + event, handler);
+      }
+    };
+  }
+})();

package/dist/components/mixins/languageMixin.js

@@ -0,0 +1,38 @@
+// src/mixins/languageMixin.js
+export default {
+  data() {
+    return {
+      language: document.documentElement.lang || 'en' // 初始语言
+    }
+  },
+  mounted() {
+    this.updateLanguage();
+    this.setupLanguageObserver();
+  },
+  methods: {
+    updateLanguage() {
+      this.language = document.documentElement.lang || 'en';
+    },
+    setupLanguageObserver() {
+      const observer = new MutationObserver(() => {
+        this.updateLanguage();
+      });
+
+      observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['lang']
+      });
+
+      // 在组件销毁时断开观察者
+      this.$once('hook:beforeDestroy', () => {
+        observer.disconnect();
+      });
+    }
+  },
+  watch: {
+    // language(newLang) {
+    //   // 当 language 变化时执行的操作
+    //   console.log('Language changed to:', newLang);
+    // }
+  }
+}

package/dist/components/mixins/outlineConfigPlugin.js

@@ -0,0 +1,40 @@
+// outlineConfigPlugin.js
+
+// __debug=1&__debug_vdesign_token=1
+const OutlineConfig = {
+    install(Vue,  options = {}) {
+      const outlineConfig = Vue.observable({
+        outlineEnabled:  options.outlineEnabled ||false,
+      });
+  
+      Vue.prototype.$outlineConfig = 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 });
+        },
+        methods:{
+          shouldEnableOutline() {
+            // 获取URL的查询参数部分
+            const searchParams = new URLSearchParams(window.location.search);
+            // 对于哈希模式，也解析哈希中的查询字符串
+            const hashParams = window.location.hash.split('?')[1] ? new URLSearchParams(window.location.hash.split('?')[1]) : null;
+          
+            // 检查查询参数或哈希中的参数
+            const debug = searchParams.has('__debug') || (hashParams && hashParams.has('__debug')) ? searchParams.get('__debug') === '1' || (hashParams && hashParams.get('__debug') === '1') : false;
+            const vdesignToken = searchParams.has('__debug_vdesign_token') || (hashParams && hashParams.has('__debug_vdesign_token')) ? searchParams.get('__debug_vdesign_token') === '1' || (hashParams && hashParams.get('__debug_vdesign_token') === '1') : false;
+          
+            return debug && vdesignToken;
+          }
+        }
+      });
+    }
+};
+  
+
+
+export default OutlineConfig;

package/dist/components/mixins/router-link.js

@@ -0,0 +1,23 @@
+/**
+ * add Vue-Router support
+ */
+
+export default {
+    props: {
+      url: String,
+      replace: Boolean,
+      to: [String, Object]
+    },
+  
+    methods: {
+      routerLink() {
+        const { to, url, $router, replace } = this;
+        if (to && $router) {
+          $router[replace ? 'replace' : 'push'](to);
+        } else if (url) {
+          replace ? location.replace(url) : location.href = url;
+        }
+      }
+    }
+  };
+  

package/dist/components/mixins/themeMixin.js

@@ -0,0 +1,29 @@
+export const themeMixin = {
+    data() {
+        return {
+            theme: document.documentElement.getAttribute('theme') || 'light'  // 初始化主题
+        };
+    },
+    mounted() {
+        this.observeThemeChanges();  // 组件挂载时开始监视主题变化
+    },
+    methods: {
+        observeThemeChanges() {
+            // 创建一个 MutationObserver 实例
+            const observer = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    // 检查变化的属性是否为 'theme'
+                    if (mutation.attributeName === 'theme') {
+                        // 更新组件的主题
+                        this.theme = document.documentElement.getAttribute('theme') || 'light';
+                    }
+                });
+            });
+
+            // 配置观察器，监视 html 元素的属性变化
+            observer.observe(document.documentElement, {
+                attributes: true  // 仅监视属性变化
+            });
+        }
+    }
+};

package/dist/components/noticebar/index.js

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