vdesign-ui 0.3.0 → 0.3.1

package/dist/components/noticebar/style.less

@@ -1,333 +1,333 @@
-@prefix: ~"vd-noticebar";
-
-.@{prefix}-snackbar {
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
-  display: flex;
-  min-height: var(--height-noticebar-snackbar);
-  padding-inline-start: var(--spacing-noticebar-snackbar-padding_left);
-  padding-inline-end: var(--spacing-noticebar-snackbar-padding_right);
-  border-radius: var(--radius-noticebar-snackbar);
-  background-color: var(--color-noticebar-snackbar_info-bg);
-  color: var(--color-noticebar-snackbar_info-text);
-  font-size: var(--en-single-f-c-r-fontSize);
-  font-weight: var(--en-single-f-c-r-fontWeight);
-  line-height: 1.25;
-  z-index: 99;
-
-  .vd-iconfont {
-      font-size: var(--icon-noticebar-snackbar);
-
-      &+.vd-iconfont {
-          margin-inline-start: var(--spacing-noticebar-snackbar_icon-margin_right);
-      }
-  }
-
-  &.@{prefix}-info {
-      background-color: var(--color-noticebar-snackbar_info-bg);
-      color: var(--color-noticebar-snackbar_info-text);
-
-      .vd-iconfont {
-          color: var(--color-noticebar-snackbar_info-icon);
-      }
-  }
-
-  &.@{prefix}-warning {
-      background-color: var(--color-noticebar-snackbar_warning-bg);
-      color: var(--color-noticebar-snackbar_warning-text);
-
-      .vd-noticebar-snackbar__content {
-          &::after {
-              background-image: linear-gradient(270deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_warning-bg) 90%);
-          }
-
-          &::before {
-              background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_warning-bg) 90%);
-          }
-      }
-
-      .vd-iconfont {
-          color: var(--color-noticebar-snackbar_warning-icon);
-      }
-  }
-
-  &.@{prefix}-tips {
-      background-color: var(--color-noticebar-snackbar_tips-bg);
-      color: var(--color-noticebar-snackbar_tips-text);
-
-      .vd-noticebar-snackbar__content {
-          &::after {
-              background-image: linear-gradient(270deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_tips-bg) 90%);
-          }
-
-          &::before {
-              background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_tips-bg) 90%);
-          }
-      }
-
-      .vd-iconfont {
-          color: var(--color-noticebar-snackbar_tips-icon);
-      }
-  }
-
-  &__left,
-  &__right {
-      display: flex;
-      align-items: center;
-  }
-
-  &__content {
-      position: relative;
-      flex: 1;
-      margin: auto;
-      width: auto;
-      white-space: nowrap;
-      overflow: hidden;
-      margin-inline-end: var(--spacing-noticebar-snackbar_text-margin_right);
-
-      &::after {
-          content: "";
-          width: var(--spacing-noticebar-snackbar-padding_left);
-          position: absolute;
-          inset-block: 0;
-          inset-inline-start: 0;
-          background-image: linear-gradient(270deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_info-bg) 90%);
-          z-index: 1;
-      }
-
-      &::before {
-          content: "";
-          width: var(--spacing-noticebar-snackbar-padding_right);
-          position: absolute;
-          inset-block: 0;
-          inset-inline-end: 0;
-          z-index: 1;
-          background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_info-bg) 90%);
-      }
-
-      &--animate {
-          display: inline-block;
-          transition-timing-function: linear;
-      }
-  }
-
-  &__multi {
-      white-space: normal;
-      padding-top: var(--spacing-noticebar-snackbar_text-margin_right);
-      padding-bottom: var(--spacing-noticebar-snackbar_text-margin_right);
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 3;
-  }
-}
-
-
-.@{prefix}-toast {
-  box-sizing: border-box;
-  position: relative;
-  display: inline-flex;
-  max-width: 100%;
-  min-height: var(--height-noticebar-snackbar);
-  padding-inline-start: var(--spacing-noticebar-toast-padding_left);
-  padding-inline-end: var(--spacing-noticebar-toast-padding_right);
-  border-radius: var(--radius-noticebar-toast);
-  background-color: var(--color-noticebar-toast_info-bg);
-  color: var(--color-noticebar-toast_info-text);
-  font-size: var(--en-single-f-c-r-fontSize);
-  font-weight: var(--en-single-f-c-r-fontWeight);
-  line-height: 1.25;
-  z-index: 99;
-
-  .vd-iconfont {
-      font-size: var(--icon-noticebar-toast);
-      margin-inline-end: var(--spacing-noticebar-toast_icon-margin_right);
-  }
-
-  [lang|='ar'] & .vd-iconfont {
-      transform: scaleX(1);
-  }
-  [dir='rtl'] & .vd-iconfont {
-      transform: scaleX(1);
-  }
-  &.@{prefix}-info {
-      background-color: var(--color-noticebar-toast_info-bg);
-      color: var(--color-noticebar-toast_info-text);
-  }
-
-  &.@{prefix}-warning {
-      background-color: var(--color-noticebar-snackbar_warning-bg);
-      color: var(--color-noticebar-snackbar_warning-text);
-
-      .vd-iconfont {
-          color: var(--color-noticebar-toast_warning-icon);
-      }
-  }
-
-  &__left,
-  &__right {
-      display: flex;
-      align-items: center;
-  }
-
-  &__content {
-      flex: 1;
-      margin: auto;
-      width: auto;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      margin-inline-end: var(--spacing-noticebar-snackbar_text-margin_right);
-
-      &--animate {
-          display: inline-block;
-          transition-timing-function: linear;
-      }
-  }
-
-  &__multi {
-      white-space: normal;
-      padding-top: var(--spacing-noticebar-snackbar_text-margin_right);
-      padding-bottom: var(--spacing-noticebar-snackbar_text-margin_right);
-  }
-}
-
-.@{prefix}-notify {
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
-  display: flex;
-  font-size: var(--en-single-f-c-r-fontSize);
-  font-weight: var(--en-single-f-c-r-fontWeight);
-  line-height: 1.25;
-  z-index: 99;
-
-  border-radius: var(--radius-noticebar-notification);
-  background-color: var(--color-noticebar-notification-bg);
-  color: var(--color-noticebar-notification-text);
-  padding-inline-start: var(--spacing-noticebar-notification-padding_left);
-  padding-inline-end: var(--spacing-noticebar-notification-padding_right);
-  padding-top: var(--spacing-noticebar-notification-padding_top);
-  padding-bottom: var(--spacing-noticebar-notification-padding_bottom);
-  box-shadow: var(--shadow-s3);
-
-  &.@{prefix}-action {
-    padding-inline-end: var(--spacing-noticebar-notification_button-padding_right);
-  }
-
-  &__content {
-    flex: 1;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-  }
-
-  &__left,
-  &__right {
-    display: flex;
-    align-items: center;
-  }
-
-  &__message {
-    display: flex;
-    justify-content: space-between;
-    font-size: var(--en-single-f-d-s-fontSize);
-    font-weight: var(--en-single-f-d-s-fontWeight);
-    margin-bottom: var(--spacing-noticebar-notification_title-margin_bottom);
-
-    &--title {
-      flex: 1;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    &--tag {
-      display: flex;
-      align-items: center;
-      margin-inline-start: var(--spacing-extra-tight);
-      border-radius: var(--radius-noticebar-notification_tag);
-      font-size: var(--en-single-f-a-r-fontSize);
-      font-weight: var(--en-single-f-a-r-fontWeight);
-      padding: var(--spacing-extra-tight);
-      line-height: var(--en-single-f-a-r-fontSize);
-
-      .vd-iconfont {
-        margin-inline-end: var(--spacing-extra-tight);
-      }
-
-      [lang|='ar'] & .vd-iconfont {
-        transform: scaleX(1);
-      }
-      [dir='rtl'] & .vd-iconfont {
-        transform: scaleX(1);
-      }
-
-      &.@{prefix}-success {
-        background-color: var(--color-noticebar-notification_tag_success-bg);
-
-        .vd-iconfont {
-          color: var(--tips-color-success);
-        }
-      }
-
-      &.@{prefix}-tips {
-        background-color: var(--color-noticebar-notification_tag_tips-bg);
-
-        .vd-iconfont {
-          color: var(--tips-color-tips);
-        }
-      }
-
-      &.@{prefix}-warning {
-        background-color: var(--color-noticebar-notification_tag_warning-bg);
-
-        .vd-iconfont {
-          color: var(--tips-color-warning);
-        }
-      }
-
-      &.@{prefix}-disable {
-        background-color: var(--color-noticebar-notification_tag_disable-bg);
-
-        .vd-iconfont {
-          color: var(--text-color-h3);
-        }
-      }
-    }
-  }
-
-  &__button {
-    margin-inline-start: var(--spacing-noticebar-notification-button-margin_left);
-  }
-
-  .vd-iconfont {
-    font-size: var(--icon-noticebar-notification);
-  }
-}
-
-[dir="rtl"] {
-  .vd-noticebar-snackbar__content {
-    &::after {
-      background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_info-bg) 90%);
-    }
-
-    &::before {
-      background-image: linear-gradient(270deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_info-bg) 90%);
-    }
-  }
-
-  .@{prefix}-warning {
-    .vd-noticebar-snackbar__content {
-      &::after {
-        background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_warning-bg) 90%);
-      }
-
-      &::before {
-        background-image: linear-gradient(270deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_warning-bg) 90%);
-      }
-    }
-  }
-}
+@prefix: ~"vd-noticebar";
+
+.@{prefix}-snackbar {
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  display: flex;
+  min-height: var(--height-noticebar-snackbar);
+  padding-inline-start: var(--spacing-noticebar-snackbar-padding_left);
+  padding-inline-end: var(--spacing-noticebar-snackbar-padding_right);
+  border-radius: var(--radius-noticebar-snackbar);
+  background-color: var(--color-noticebar-snackbar_info-bg);
+  color: var(--color-noticebar-snackbar_info-text);
+  font-size: var(--en-single-f-c-r-fontSize);
+  font-weight: var(--en-single-f-c-r-fontWeight);
+  line-height: 1.25;
+  z-index: 99;
+
+  .vd-iconfont {
+      font-size: var(--icon-noticebar-snackbar);
+
+      &+.vd-iconfont {
+          margin-inline-start: var(--spacing-noticebar-snackbar_icon-margin_right);
+      }
+  }
+
+  &.@{prefix}-info {
+      background-color: var(--color-noticebar-snackbar_info-bg);
+      color: var(--color-noticebar-snackbar_info-text);
+
+      .vd-iconfont {
+          color: var(--color-noticebar-snackbar_info-icon);
+      }
+  }
+
+  &.@{prefix}-warning {
+      background-color: var(--color-noticebar-snackbar_warning-bg);
+      color: var(--color-noticebar-snackbar_warning-text);
+
+      .vd-noticebar-snackbar__content {
+          &::after {
+              background-image: linear-gradient(270deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_warning-bg) 90%);
+          }
+
+          &::before {
+              background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_warning-bg) 90%);
+          }
+      }
+
+      .vd-iconfont {
+          color: var(--color-noticebar-snackbar_warning-icon);
+      }
+  }
+
+  &.@{prefix}-tips {
+      background-color: var(--color-noticebar-snackbar_tips-bg);
+      color: var(--color-noticebar-snackbar_tips-text);
+
+      .vd-noticebar-snackbar__content {
+          &::after {
+              background-image: linear-gradient(270deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_tips-bg) 90%);
+          }
+
+          &::before {
+              background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_tips-bg) 90%);
+          }
+      }
+
+      .vd-iconfont {
+          color: var(--color-noticebar-snackbar_tips-icon);
+      }
+  }
+
+  &__left,
+  &__right {
+      display: flex;
+      align-items: center;
+  }
+
+  &__content {
+      position: relative;
+      flex: 1;
+      margin: auto;
+      width: auto;
+      white-space: nowrap;
+      overflow: hidden;
+      margin-inline-end: var(--spacing-noticebar-snackbar_text-margin_right);
+
+      &::after {
+          content: "";
+          width: var(--spacing-noticebar-snackbar-padding_left);
+          position: absolute;
+          inset-block: 0;
+          inset-inline-start: 0;
+          background-image: linear-gradient(270deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_info-bg) 90%);
+          z-index: 1;
+      }
+
+      &::before {
+          content: "";
+          width: var(--spacing-noticebar-snackbar-padding_right);
+          position: absolute;
+          inset-block: 0;
+          inset-inline-end: 0;
+          z-index: 1;
+          background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_info-bg) 90%);
+      }
+
+      &--animate {
+          display: inline-block;
+          transition-timing-function: linear;
+      }
+  }
+
+  &__multi {
+      white-space: normal;
+      padding-top: var(--spacing-noticebar-snackbar_text-margin_right);
+      padding-bottom: var(--spacing-noticebar-snackbar_text-margin_right);
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+  }
+}
+
+
+.@{prefix}-toast {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  max-width: 100%;
+  min-height: var(--height-noticebar-snackbar);
+  padding-inline-start: var(--spacing-noticebar-toast-padding_left);
+  padding-inline-end: var(--spacing-noticebar-toast-padding_right);
+  border-radius: var(--radius-noticebar-toast);
+  background-color: var(--color-noticebar-toast_info-bg);
+  color: var(--color-noticebar-toast_info-text);
+  font-size: var(--en-single-f-c-r-fontSize);
+  font-weight: var(--en-single-f-c-r-fontWeight);
+  line-height: 1.25;
+  z-index: 99;
+
+  .vd-iconfont {
+      font-size: var(--icon-noticebar-toast);
+      margin-inline-end: var(--spacing-noticebar-toast_icon-margin_right);
+  }
+
+  [lang|='ar'] & .vd-iconfont {
+      transform: scaleX(1);
+  }
+  [dir='rtl'] & .vd-iconfont {
+      transform: scaleX(1);
+  }
+  &.@{prefix}-info {
+      background-color: var(--color-noticebar-toast_info-bg);
+      color: var(--color-noticebar-toast_info-text);
+  }
+
+  &.@{prefix}-warning {
+      background-color: var(--color-noticebar-snackbar_warning-bg);
+      color: var(--color-noticebar-snackbar_warning-text);
+
+      .vd-iconfont {
+          color: var(--color-noticebar-toast_warning-icon);
+      }
+  }
+
+  &__left,
+  &__right {
+      display: flex;
+      align-items: center;
+  }
+
+  &__content {
+      flex: 1;
+      margin: auto;
+      width: auto;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-inline-end: var(--spacing-noticebar-snackbar_text-margin_right);
+
+      &--animate {
+          display: inline-block;
+          transition-timing-function: linear;
+      }
+  }
+
+  &__multi {
+      white-space: normal;
+      padding-top: var(--spacing-noticebar-snackbar_text-margin_right);
+      padding-bottom: var(--spacing-noticebar-snackbar_text-margin_right);
+  }
+}
+
+.@{prefix}-notify {
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  display: flex;
+  font-size: var(--en-single-f-c-r-fontSize);
+  font-weight: var(--en-single-f-c-r-fontWeight);
+  line-height: 1.25;
+  z-index: 99;
+
+  border-radius: var(--radius-noticebar-notification);
+  background-color: var(--color-noticebar-notification-bg);
+  color: var(--color-noticebar-notification-text);
+  padding-inline-start: var(--spacing-noticebar-notification-padding_left);
+  padding-inline-end: var(--spacing-noticebar-notification-padding_right);
+  padding-top: var(--spacing-noticebar-notification-padding_top);
+  padding-bottom: var(--spacing-noticebar-notification-padding_bottom);
+  box-shadow: var(--shadow-s3);
+
+  &.@{prefix}-action {
+    padding-inline-end: var(--spacing-noticebar-notification_button-padding_right);
+  }
+
+  &__content {
+    flex: 1;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
+
+  &__left,
+  &__right {
+    display: flex;
+    align-items: center;
+  }
+
+  &__message {
+    display: flex;
+    justify-content: space-between;
+    font-size: var(--en-single-f-d-s-fontSize);
+    font-weight: var(--en-single-f-d-s-fontWeight);
+    margin-bottom: var(--spacing-noticebar-notification_title-margin_bottom);
+
+    &--title {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &--tag {
+      display: flex;
+      align-items: center;
+      margin-inline-start: var(--spacing-extra-tight);
+      border-radius: var(--radius-noticebar-notification_tag);
+      font-size: var(--en-single-f-a-r-fontSize);
+      font-weight: var(--en-single-f-a-r-fontWeight);
+      padding: var(--spacing-extra-tight);
+      line-height: var(--en-single-f-a-r-fontSize);
+
+      .vd-iconfont {
+        margin-inline-end: var(--spacing-extra-tight);
+      }
+
+      [lang|='ar'] & .vd-iconfont {
+        transform: scaleX(1);
+      }
+      [dir='rtl'] & .vd-iconfont {
+        transform: scaleX(1);
+      }
+
+      &.@{prefix}-success {
+        background-color: var(--color-noticebar-notification_tag_success-bg);
+
+        .vd-iconfont {
+          color: var(--tips-color-success);
+        }
+      }
+
+      &.@{prefix}-tips {
+        background-color: var(--color-noticebar-notification_tag_tips-bg);
+
+        .vd-iconfont {
+          color: var(--tips-color-tips);
+        }
+      }
+
+      &.@{prefix}-warning {
+        background-color: var(--color-noticebar-notification_tag_warning-bg);
+
+        .vd-iconfont {
+          color: var(--tips-color-warning);
+        }
+      }
+
+      &.@{prefix}-disable {
+        background-color: var(--color-noticebar-notification_tag_disable-bg);
+
+        .vd-iconfont {
+          color: var(--text-color-h3);
+        }
+      }
+    }
+  }
+
+  &__button {
+    margin-inline-start: var(--spacing-noticebar-notification-button-margin_left);
+  }
+
+  .vd-iconfont {
+    font-size: var(--icon-noticebar-notification);
+  }
+}
+
+[dir="rtl"] {
+  .vd-noticebar-snackbar__content {
+    &::after {
+      background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_info-bg) 90%);
+    }
+
+    &::before {
+      background-image: linear-gradient(270deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_info-bg) 90%);
+    }
+  }
+
+  .@{prefix}-warning {
+    .vd-noticebar-snackbar__content {
+      &::after {
+        background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_warning-bg) 90%);
+      }
+
+      &::before {
+        background-image: linear-gradient(270deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_warning-bg) 90%);
+      }
+    }
+  }
+}

package/dist/components/overlay/index.js

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