vdesign-ui 0.2.12 → 0.2.14

package/dist/components/skeleton/style.less

@@ -1,197 +1,197 @@
-@skeleton-prefix-cls: vd-skeleton;
-
-.@{skeleton-prefix-cls} {
-    display: flex;
-    padding: 0 var(--spacing-base-loose);
-
-    &__img, &__title, &__button, &__img--s, &__paragraph, &__avatar, &__text,
-    &__stock--data, &__stock--subdatax, &__stock--subdatal, &__stock--center, &__stock--title, 
-    &__stock--text, &__stock--content, &__stock--maindata {
-        background: var(--color-skeleton-bg);
-    }
-
-    &--animate &__img, &__title, &__button, &__img--s, &__paragraph, &__avatar, &__text,
-    &__stock--data, &__stock--subdatax, &__stock--subdatal, &__stock--center, &__stock--title, 
-    &__stock--text, &__stock--content, &__stock--maindata {
-        background: linear-gradient(
-            90deg,
-            var(--color-skeleton-bg) 25%,
-            var(--color-skeleton-loading_gradient-bg-active) 44%,
-            var(--color-skeleton-bg) 88%
-        );
-        background-size: 400% 100%;
-        animation: skeleton-loading 1.4s ease infinite;
-        animation-fill-mode: forwards;
-    }
-
-    &__img {
-        width: 100%;
-        height: var(--height-skeleton-img);
-        border-radius: var(--radius-skeleton-img);
-    }
-
-    &__title {
-        width: var(--width-skeleton-head);
-
-        &--l {
-            height: var(--height-skeleton-text_l);
-            border-radius: var(--radius-skeleton-text_l);
-        }
-        &--m {
-            height: var(--height-skeleton-text_m);
-            border-radius: var(--radius-skeleton-text_s);
-        }
-        &--s {
-            height: var(--height-skeleton-text_s);
-            border-radius: var(--radius-skeleton-text_s);
-        }
-    }
-
-    &__button {
-        width: var(--width-skeleton-button);
-        height: var(--height-skeleton-button);
-        border-radius: var(--radius-skeleton-button);
-    }
-
-    &__img--s {
-        width: var(--width-skeleton-img_small);
-        height: var(--height-skeleton-small_shapes);
-        border-radius: var(--radius-skeleton-small_shapes);
-    }
-
-    &__content {
-        width: 100%;
-        .is-last {
-            width: 80%;
-            margin-block-end: 0;
-        }
-    }
-
-    &__paragraph {
-        width: 100%;
-        height: var(--height-skeleton-text_s);
-        margin-block-end: var(--spacing-skeleton-text-margin_bottom);
-        border-radius: var(--radius-skeleton-text_s);
-    }
-
-    &__avatar {
-        flex-shrink: 0;
-        border-radius: 50%;
-        margin-inline-end: var(--spacing-skeleton-avatar-margin_right);
-
-        &--l {
-            width: var(--width-skeleton-avatar_l);
-            height: var(--width-skeleton-avatar_l);
-        }
-        &--m {
-            width: var(--width-skeleton-avatar_m);
-            height: var(--width-skeleton-avatar_m);
-        }
-        &--s {
-            width: var(--width-skeleton-avatar_s);
-            height: var(--width-skeleton-avatar_s);
-        }
-    }
-
-    &__text {
-        margin: var(--spacing-skeleton-avatar-margin_bottom) 0;
-        width: var(--width-skeleton-avatar_text);
-        height: var(--height-skeleton-text_m);
-        border-radius: var(--radius-skeleton-text_s);
-    }
-
-    &__stock {
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-
-        &--left {
-            display: flex;
-            flex-direction: column;
-        }
-        &--data {
-            width: var(--width-skeleton-stock_data_s);
-            height: var(--height-skeleton-text_m);
-            border-radius: var(--radius-skeleton-text_s);
-        }
-        &--subdatax {
-            margin-block-start: var(--spacing-skeleton-stock-padding_x);
-            width: var(--width-skeleton-stock_data_xl);
-            height: var(--height-skeleton-text_s);
-            border-radius: var(--radius-skeleton-text_s);
-        }
-        &--subdatal {
-            margin-block-start: var(--spacing-skeleton-stock-padding_x);
-            width: var(--width-skeleton-stock_data_l);
-            height: var(--height-skeleton-text_s);
-            border-radius: var(--radius-skeleton-text_s);
-        }
-        &--center {
-            width: var(--width-skeleton-stock_data_m);
-            height: var(--height-skeleton-text_l);
-            border-radius: var(--radius-skeleton-text_s);
-        }
-        &--right {
-            margin-inline-start: var(--spacing-skeleton-data-padding_y);
-            display: flex;
-            align-items: flex-end;
-            flex-direction: column;
-        }
-        &--title {
-            width: var(--width-skeleton-stock_data_l);
-            height: var(--height-skeleton-text_m);
-            border-radius: var(--radius-skeleton-text_s);
-        }
-        &--text {
-            margin-block-start: var(--spacing-skeleton-stock-padding_x);
-            width: var(--width-skeleton-stock_data_s);
-            height: var(--height-skeleton-text_s);
-            border-radius: var(--radius-skeleton-text_s);
-        }
-        &--content {
-            display: flex;
-            align-items: flex-end;
-            flex-direction: column;
-        }
-        &--maindata {
-            width: var(--width-skeleton-stock_data_m);
-            height: var(--height-skeleton-text_m);
-            border-radius: var(--radius-skeleton-text_s);
-        }
-    }
-
-    &--space {
-        display: flex;
-        align-items: center;
-
-        .spacing {
-            margin-inline-start: var(--spacing-skeleton-stock-padding_y);
-        }
-    }
-
-    &__equally {
-        display: flex;
-        width: 100%;
-        gap: var(--spacing-skeleton-avatar-margin_right);
-    }
-}
-
-@keyframes skeleton-loading {
-    0% {
-        background-position: 100% 50%;
-    }
-    100% {
-        background-position: 0 50%;
-    }
-}
-
-
-@keyframes skeleton-loading {
-    0%{
-        background-position: 100% 50%;
-    }
-
-    100% {
-        background-position: 0 50%;
-    }
+@skeleton-prefix-cls: vd-skeleton;
+
+.@{skeleton-prefix-cls} {
+    display: flex;
+    padding: 0 var(--spacing-base-loose);
+
+    &__img, &__title, &__button, &__img--s, &__paragraph, &__avatar, &__text,
+    &__stock--data, &__stock--subdatax, &__stock--subdatal, &__stock--center, &__stock--title, 
+    &__stock--text, &__stock--content, &__stock--maindata {
+        background: var(--color-skeleton-bg);
+    }
+
+    &--animate &__img, &__title, &__button, &__img--s, &__paragraph, &__avatar, &__text,
+    &__stock--data, &__stock--subdatax, &__stock--subdatal, &__stock--center, &__stock--title, 
+    &__stock--text, &__stock--content, &__stock--maindata {
+        background: linear-gradient(
+            90deg,
+            var(--color-skeleton-bg) 25%,
+            var(--color-skeleton-loading_gradient-bg-active) 44%,
+            var(--color-skeleton-bg) 88%
+        );
+        background-size: 400% 100%;
+        animation: skeleton-loading 1.4s ease infinite;
+        animation-fill-mode: forwards;
+    }
+
+    &__img {
+        width: 100%;
+        height: var(--height-skeleton-img);
+        border-radius: var(--radius-skeleton-img);
+    }
+
+    &__title {
+        width: var(--width-skeleton-head);
+
+        &--l {
+            height: var(--height-skeleton-text_l);
+            border-radius: var(--radius-skeleton-text_l);
+        }
+        &--m {
+            height: var(--height-skeleton-text_m);
+            border-radius: var(--radius-skeleton-text_s);
+        }
+        &--s {
+            height: var(--height-skeleton-text_s);
+            border-radius: var(--radius-skeleton-text_s);
+        }
+    }
+
+    &__button {
+        width: var(--width-skeleton-button);
+        height: var(--height-skeleton-button);
+        border-radius: var(--radius-skeleton-button);
+    }
+
+    &__img--s {
+        width: var(--width-skeleton-img_small);
+        height: var(--height-skeleton-small_shapes);
+        border-radius: var(--radius-skeleton-small_shapes);
+    }
+
+    &__content {
+        width: 100%;
+        .is-last {
+            width: 80%;
+            margin-block-end: 0;
+        }
+    }
+
+    &__paragraph {
+        width: 100%;
+        height: var(--height-skeleton-text_s);
+        margin-block-end: var(--spacing-skeleton-text-margin_bottom);
+        border-radius: var(--radius-skeleton-text_s);
+    }
+
+    &__avatar {
+        flex-shrink: 0;
+        border-radius: 50%;
+        margin-inline-end: var(--spacing-skeleton-avatar-margin_right);
+
+        &--l {
+            width: var(--width-skeleton-avatar_l);
+            height: var(--width-skeleton-avatar_l);
+        }
+        &--m {
+            width: var(--width-skeleton-avatar_m);
+            height: var(--width-skeleton-avatar_m);
+        }
+        &--s {
+            width: var(--width-skeleton-avatar_s);
+            height: var(--width-skeleton-avatar_s);
+        }
+    }
+
+    &__text {
+        margin: var(--spacing-skeleton-avatar-margin_bottom) 0;
+        width: var(--width-skeleton-avatar_text);
+        height: var(--height-skeleton-text_m);
+        border-radius: var(--radius-skeleton-text_s);
+    }
+
+    &__stock {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        &--left {
+            display: flex;
+            flex-direction: column;
+        }
+        &--data {
+            width: var(--width-skeleton-stock_data_s);
+            height: var(--height-skeleton-text_m);
+            border-radius: var(--radius-skeleton-text_s);
+        }
+        &--subdatax {
+            margin-block-start: var(--spacing-skeleton-stock-padding_x);
+            width: var(--width-skeleton-stock_data_xl);
+            height: var(--height-skeleton-text_s);
+            border-radius: var(--radius-skeleton-text_s);
+        }
+        &--subdatal {
+            margin-block-start: var(--spacing-skeleton-stock-padding_x);
+            width: var(--width-skeleton-stock_data_l);
+            height: var(--height-skeleton-text_s);
+            border-radius: var(--radius-skeleton-text_s);
+        }
+        &--center {
+            width: var(--width-skeleton-stock_data_m);
+            height: var(--height-skeleton-text_l);
+            border-radius: var(--radius-skeleton-text_s);
+        }
+        &--right {
+            margin-inline-start: var(--spacing-skeleton-data-padding_y);
+            display: flex;
+            align-items: flex-end;
+            flex-direction: column;
+        }
+        &--title {
+            width: var(--width-skeleton-stock_data_l);
+            height: var(--height-skeleton-text_m);
+            border-radius: var(--radius-skeleton-text_s);
+        }
+        &--text {
+            margin-block-start: var(--spacing-skeleton-stock-padding_x);
+            width: var(--width-skeleton-stock_data_s);
+            height: var(--height-skeleton-text_s);
+            border-radius: var(--radius-skeleton-text_s);
+        }
+        &--content {
+            display: flex;
+            align-items: flex-end;
+            flex-direction: column;
+        }
+        &--maindata {
+            width: var(--width-skeleton-stock_data_m);
+            height: var(--height-skeleton-text_m);
+            border-radius: var(--radius-skeleton-text_s);
+        }
+    }
+
+    &--space {
+        display: flex;
+        align-items: center;
+
+        .spacing {
+            margin-inline-start: var(--spacing-skeleton-stock-padding_y);
+        }
+    }
+
+    &__equally {
+        display: flex;
+        width: 100%;
+        gap: var(--spacing-skeleton-avatar-margin_right);
+    }
+}
+
+@keyframes skeleton-loading {
+    0% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0 50%;
+    }
+}
+
+
+@keyframes skeleton-loading {
+    0%{
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0 50%;
+    }
 }

package/dist/components/slider/draggable.js

@@ -1,49 +1,49 @@
-let isDragging = false;
-import Vue from 'vue';
-const supportTouch = !Vue.prototype.$isServer && 'ontouchstart' in window;
-
-export default function(element, options) {
-  const moveFn = function(event) {
-    if (options.drag) {
-      options.drag(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
-    }
-  };
-
-  const endFn = function(event) {
-    if (!supportTouch) {
-      document.removeEventListener('mousemove', moveFn);
-      document.removeEventListener('mouseup', endFn);
-    }
-    document.onselectstart = null;
-    document.ondragstart = null;
-
-    isDragging = false;
-
-    if (options.end) {
-      options.end(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
-    }
-  };
-
-  element.addEventListener(supportTouch ? 'touchstart' : 'mousedown', function(event) {
-    if (isDragging) return;
-    event.preventDefault();
-    document.onselectstart = function() { return false; };
-    document.ondragstart = function() { return false; };
-
-    if (!supportTouch) {
-      document.addEventListener('mousemove', moveFn);
-      document.addEventListener('mouseup', endFn);
-    }
-    isDragging = true;
-
-    if (options.start) {
-      options.start(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
-    }
-  });
-
-  if (supportTouch) {
-    element.addEventListener('touchmove', moveFn);
-    element.addEventListener('touchend', endFn);
-    element.addEventListener('touchcancel', endFn);
-  }
-}
+let isDragging = false;
+import Vue from 'vue';
+const supportTouch = !Vue.prototype.$isServer && 'ontouchstart' in window;
+
+export default function(element, options) {
+  const moveFn = function(event) {
+    if (options.drag) {
+      options.drag(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
+    }
+  };
+
+  const endFn = function(event) {
+    if (!supportTouch) {
+      document.removeEventListener('mousemove', moveFn);
+      document.removeEventListener('mouseup', endFn);
+    }
+    document.onselectstart = null;
+    document.ondragstart = null;
+
+    isDragging = false;
+
+    if (options.end) {
+      options.end(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
+    }
+  };
+
+  element.addEventListener(supportTouch ? 'touchstart' : 'mousedown', function(event) {
+    if (isDragging) return;
+    event.preventDefault();
+    document.onselectstart = function() { return false; };
+    document.ondragstart = function() { return false; };
+
+    if (!supportTouch) {
+      document.addEventListener('mousemove', moveFn);
+      document.addEventListener('mouseup', endFn);
+    }
+    isDragging = true;
+
+    if (options.start) {
+      options.start(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
+    }
+  });
+
+  if (supportTouch) {
+    element.addEventListener('touchmove', moveFn);
+    element.addEventListener('touchend', endFn);
+    element.addEventListener('touchcancel', endFn);
+  }
+}

package/dist/components/slider/index.js

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