@varlet/cli 2.0.0-alpha.1663499244572 → 2.0.0-alpha.1664031123039

package/site/components/snackbar/props.ts

@@ -1,97 +1,97 @@
-import { pickProps } from '../utils/components'
-import { props as loadingProps } from '../loading/props'
-import { SNACKBAR_TYPE, SnackbarType } from './index'
-import type { PropType, TeleportProps } from 'vue'
-
-export function positionValidator(position: string): boolean {
-  const validPositions = ['top', 'center', 'bottom']
-  return validPositions.includes(position)
-}
-
-export function typeValidator(type: SnackbarType): boolean {
-  return SNACKBAR_TYPE.includes(type)
-}
-
-export const props = {
-  type: {
-    type: String as PropType<SnackbarType>,
-    validator: typeValidator,
-  },
-  // snackbar显示的位置
-  position: {
-    type: String,
-    default: 'top',
-    validator: positionValidator,
-  },
-  // content内容
-  content: {
-    type: String,
-  },
-  // 为snackbar content添加自定义类名
-  contentClass: {
-    type: String,
-  },
-  // snackbar 持续时间
-  duration: {
-    type: Number,
-    default: 3000,
-  },
-  // 是否将消息条内容堆叠在操作（按钮）之上
-  vertical: {
-    type: Boolean,
-    default: false,
-  },
-  loadingType: pickProps(loadingProps, 'type'),
-  loadingSize: pickProps(loadingProps, 'size'),
-  loadingRadius: pickProps(loadingProps, 'radius'),
-  loadingColor: {
-    ...pickProps(loadingProps, 'color'),
-    default: 'currentColor',
-  },
-  // 是否禁止滚动穿透
-  lockScroll: {
-    type: Boolean,
-    default: false,
-  },
-  // 控制组件可见还是隐藏
-  show: {
-    type: Boolean,
-    default: false,
-  },
-  // teleport
-  teleport: {
-    type: String as PropType<TeleportProps['to']>,
-    default: 'body',
-  },
-  // 是否禁止点击背景
-  forbidClick: {
-    type: Boolean,
-    default: false,
-  },
-  // 打开时的回调函数
-  onOpen: {
-    type: Function as PropType<() => void>,
-    default: () => {},
-  },
-  // 打开动画结束时的回调
-  onOpened: {
-    type: Function as PropType<() => void>,
-    default: () => {},
-  },
-  // 关闭时的回调函数
-  onClose: {
-    type: Function as PropType<() => void>,
-    default: () => {},
-  },
-  // 关闭动画结束时的回调
-  onClosed: {
-    type: Function as PropType<() => void>,
-    default: () => {},
-  },
-  'onUpdate:show': {
-    type: Function as PropType<(show: boolean) => void>,
-  },
-  _update: {
-    type: String,
-  },
-}
+import { pickProps } from '../utils/components'
+import { props as loadingProps } from '../loading/props'
+import { SNACKBAR_TYPE, SnackbarType } from './index'
+import type { PropType, TeleportProps } from 'vue'
+
+export function positionValidator(position: string): boolean {
+  const validPositions = ['top', 'center', 'bottom']
+  return validPositions.includes(position)
+}
+
+export function typeValidator(type: SnackbarType): boolean {
+  return SNACKBAR_TYPE.includes(type)
+}
+
+export const props = {
+  type: {
+    type: String as PropType<SnackbarType>,
+    validator: typeValidator,
+  },
+  // snackbar显示的位置
+  position: {
+    type: String,
+    default: 'top',
+    validator: positionValidator,
+  },
+  // content内容
+  content: {
+    type: String,
+  },
+  // 为snackbar content添加自定义类名
+  contentClass: {
+    type: String,
+  },
+  // snackbar 持续时间
+  duration: {
+    type: Number,
+    default: 3000,
+  },
+  // 是否将消息条内容堆叠在操作（按钮）之上
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+  loadingType: pickProps(loadingProps, 'type'),
+  loadingSize: pickProps(loadingProps, 'size'),
+  loadingRadius: pickProps(loadingProps, 'radius'),
+  loadingColor: {
+    ...pickProps(loadingProps, 'color'),
+    default: 'currentColor',
+  },
+  // 是否禁止滚动穿透
+  lockScroll: {
+    type: Boolean,
+    default: false,
+  },
+  // 控制组件可见还是隐藏
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  // teleport
+  teleport: {
+    type: String as PropType<TeleportProps['to']>,
+    default: 'body',
+  },
+  // 是否禁止点击背景
+  forbidClick: {
+    type: Boolean,
+    default: false,
+  },
+  // 打开时的回调函数
+  onOpen: {
+    type: Function as PropType<() => void>,
+    default: () => {},
+  },
+  // 打开动画结束时的回调
+  onOpened: {
+    type: Function as PropType<() => void>,
+    default: () => {},
+  },
+  // 关闭时的回调函数
+  onClose: {
+    type: Function as PropType<() => void>,
+    default: () => {},
+  },
+  // 关闭动画结束时的回调
+  onClosed: {
+    type: Function as PropType<() => void>,
+    default: () => {},
+  },
+  'onUpdate:show': {
+    type: Function as PropType<(show: boolean) => void>,
+  },
+  _update: {
+    type: String,
+  },
+}

package/site/components/snackbar/snackbar.less

@@ -1,135 +1,135 @@
-@site-snackbar-width: 256px;
-@site-snackbar-color: rgba(255, 255, 255, 0.87);
-@site-snackbar-border-radius: 4px;
-@site-snackbar-background: #333;
-@site-snackbar-font-size: var(--site-font-size-md);
-@site-snackbar-margin: 6px 24px;
-@site-snackbar-border-color: currentColor;
-@site-snackbar-success-background: var(--site-color-success);
-@site-snackbar-info-background: var(--site-color-info);
-@site-snackbar-error-background: var(--site-color-danger);
-@site-snackbar-warning-background: var(--site-color-warning);
-@site-snackbar-content-padding: 14px 16px;
-@site-snackbar-action-margin: 0 16px 0 0;
-
-:root {
-  --site-snackbar-width: @site-snackbar-width;
-  --site-snackbar-color: @site-snackbar-color;
-  --site-snackbar-border-radius: @site-snackbar-border-radius;
-  --site-snackbar-background: @site-snackbar-background;
-  --site-snackbar-font-size: @site-snackbar-font-size;
-  --site-snackbar-margin: @site-snackbar-margin;
-  --site-snackbar-border-color: @site-snackbar-border-color;
-  --site-snackbar-success-background: @site-snackbar-success-background;
-  --site-snackbar-info-background: @site-snackbar-info-background;
-  --site-snackbar-error-background: @site-snackbar-error-background;
-  --site-snackbar-warning-background: @site-snackbar-warning-background;
-  --site-snackbar-content-padding: @site-snackbar-content-padding;
-  --site-snackbar-action-margin: @site-snackbar-action-margin;
-}
-
-.var-site-transition-group {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  pointer-events: none;
-}
-
-.var-site-pointer-auto {
-  pointer-events: auto;
-}
-
-.var-site {
-  &-snackbar {
-    display: flex;
-    justify-content: center;
-    align-items: baseline;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    transition: all 0.15s var(--site-cubic-bezier);
-
-    &__wrapper {
-      width: var(--site-snackbar-width);
-      display: flex;
-      border-radius: var(--site-snackbar-border-radius);
-      color: var(--site-snackbar-color);
-      background: var(--site-snackbar-background);
-      font-size: var(--site-snackbar-font-size);
-      margin: var(--site-snackbar-margin);
-      align-items: center;
-      border-color: var(--site-snackbar-border-color);
-      pointer-events: auto;
-      transition: 0.3s var(--site-cubic-bezier);
-
-      &-success {
-        background: var(--site-snackbar-success-background);
-      }
-
-      &-info {
-        background: var(--site-snackbar-info-background);
-      }
-
-      &-warning {
-        background: var(--site-snackbar-warning-background);
-      }
-
-      &-error {
-        background: var(--site-snackbar-error-background);
-      }
-    }
-
-    &__content {
-      flex-grow: 1;
-      padding: var(--site-snackbar-content-padding);
-    }
-
-    &__action {
-      margin: var(--site-snackbar-action-margin);
-      display: flex;
-    }
-
-    &__vertical {
-      flex-direction: column;
-      align-items: flex-start;
-
-      .var-site-snackbar__action {
-        align-self: flex-end;
-        margin-bottom: 8px;
-      }
-    }
-
-    &-fade-leave-active {
-      position: absolute;
-    }
-
-    &-fade-enter-from,
-    &-fade-leave-to {
-      opacity: 0;
-      transform: translateY(-30px);
-    }
-  }
-
-  &-snackbar-transition {
-    top: 0;
-    position: fixed;
-
-    .var-site-snackbar__wrapper {
-      position: absolute;
-
-      &-top {
-        top: 5%;
-      }
-
-      &-center {
-        top: 45%;
-      }
-
-      &-bottom {
-        bottom: 5%;
-      }
-    }
-  }
-}
+@site-snackbar-width: 256px;
+@site-snackbar-color: rgba(255, 255, 255, 0.87);
+@site-snackbar-border-radius: 4px;
+@site-snackbar-background: #333;
+@site-snackbar-font-size: var(--site-font-size-md);
+@site-snackbar-margin: 6px 24px;
+@site-snackbar-border-color: currentColor;
+@site-snackbar-success-background: var(--site-color-success);
+@site-snackbar-info-background: var(--site-color-info);
+@site-snackbar-error-background: var(--site-color-danger);
+@site-snackbar-warning-background: var(--site-color-warning);
+@site-snackbar-content-padding: 14px 16px;
+@site-snackbar-action-margin: 0 16px 0 0;
+
+:root {
+  --site-snackbar-width: @site-snackbar-width;
+  --site-snackbar-color: @site-snackbar-color;
+  --site-snackbar-border-radius: @site-snackbar-border-radius;
+  --site-snackbar-background: @site-snackbar-background;
+  --site-snackbar-font-size: @site-snackbar-font-size;
+  --site-snackbar-margin: @site-snackbar-margin;
+  --site-snackbar-border-color: @site-snackbar-border-color;
+  --site-snackbar-success-background: @site-snackbar-success-background;
+  --site-snackbar-info-background: @site-snackbar-info-background;
+  --site-snackbar-error-background: @site-snackbar-error-background;
+  --site-snackbar-warning-background: @site-snackbar-warning-background;
+  --site-snackbar-content-padding: @site-snackbar-content-padding;
+  --site-snackbar-action-margin: @site-snackbar-action-margin;
+}
+
+.var-site-transition-group {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+
+.var-site-pointer-auto {
+  pointer-events: auto;
+}
+
+.var-site {
+  &-snackbar {
+    display: flex;
+    justify-content: center;
+    align-items: baseline;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    transition: all 0.15s var(--site-cubic-bezier);
+
+    &__wrapper {
+      width: var(--site-snackbar-width);
+      display: flex;
+      border-radius: var(--site-snackbar-border-radius);
+      color: var(--site-snackbar-color);
+      background: var(--site-snackbar-background);
+      font-size: var(--site-snackbar-font-size);
+      margin: var(--site-snackbar-margin);
+      align-items: center;
+      border-color: var(--site-snackbar-border-color);
+      pointer-events: auto;
+      transition: 0.3s var(--site-cubic-bezier);
+
+      &-success {
+        background: var(--site-snackbar-success-background);
+      }
+
+      &-info {
+        background: var(--site-snackbar-info-background);
+      }
+
+      &-warning {
+        background: var(--site-snackbar-warning-background);
+      }
+
+      &-error {
+        background: var(--site-snackbar-error-background);
+      }
+    }
+
+    &__content {
+      flex-grow: 1;
+      padding: var(--site-snackbar-content-padding);
+    }
+
+    &__action {
+      margin: var(--site-snackbar-action-margin);
+      display: flex;
+    }
+
+    &__vertical {
+      flex-direction: column;
+      align-items: flex-start;
+
+      .var-site-snackbar__action {
+        align-self: flex-end;
+        margin-bottom: 8px;
+      }
+    }
+
+    &-fade-leave-active {
+      position: absolute;
+    }
+
+    &-fade-enter-from,
+    &-fade-leave-to {
+      opacity: 0;
+      transform: translateY(-30px);
+    }
+  }
+
+  &-snackbar-transition {
+    top: 0;
+    position: fixed;
+
+    .var-site-snackbar__wrapper {
+      position: absolute;
+
+      &-top {
+        top: 5%;
+      }
+
+      &-center {
+        top: 45%;
+      }
+
+      &-bottom {
+        bottom: 5%;
+      }
+    }
+  }
+}

package/site/components/styles/common.less

@@ -1,64 +1,64 @@
-@import './var';
-
-.var-site {
-  &--box {
-    box-sizing: border-box;
-
-    * {
-      box-sizing: border-box;
-    }
-  }
-
-  &--relative {
-    position: relative;
-  }
-
-  &--absolute {
-    position: absolute;
-  }
-
-  &--hidden {
-    overflow: hidden;
-  }
-
-  &--lock {
-    overflow: hidden;
-  }
-
-  &--block {
-    display: block;
-  }
-
-  &--inline-block {
-    display: inline-block;
-  }
-
-  &--flex {
-    display: flex;
-  }
-
-  &--inline-flex {
-    display: inline-flex;
-  }
-}
-
-:root {
-  --site-font-size-xs: @site-font-size-xs;
-  --site-font-size-sm: @site-font-size-sm;
-  --site-font-size-md: @site-font-size-md;
-  --site-font-size-lg: @site-font-size-lg;
-  --site-icon-size-xs: @site-icon-size-xs;
-  --site-icon-size-sm: @site-icon-size-sm;
-  --site-icon-size-md: @site-icon-size-md;
-  --site-icon-size-lg: @site-icon-size-lg;
-  --site-color-primary: @site-color-primary;
-  --site-color-info: @site-color-info;
-  --site-color-success: @site-color-success;
-  --site-color-warning: @site-color-warning;
-  --site-color-danger: @site-color-danger;
-  --site-color-disabled: @site-color-disabled;
-  --site-cubic-bezier: @site-cubic-bezier;
-  --site-shadow-key-umbra-opacity: @site-shadow-key-umbra-opacity;
-  --site-shadow-key-penumbra-opacity: @site-shadow-key-penumbra-opacity;
-  --site-shadow-key-ambient-opacity: @site-shadow-key-ambient-opacity;
-}
+@import './var';
+
+.var-site {
+  &--box {
+    box-sizing: border-box;
+
+    * {
+      box-sizing: border-box;
+    }
+  }
+
+  &--relative {
+    position: relative;
+  }
+
+  &--absolute {
+    position: absolute;
+  }
+
+  &--hidden {
+    overflow: hidden;
+  }
+
+  &--lock {
+    overflow: hidden;
+  }
+
+  &--block {
+    display: block;
+  }
+
+  &--inline-block {
+    display: inline-block;
+  }
+
+  &--flex {
+    display: flex;
+  }
+
+  &--inline-flex {
+    display: inline-flex;
+  }
+}
+
+:root {
+  --site-font-size-xs: @site-font-size-xs;
+  --site-font-size-sm: @site-font-size-sm;
+  --site-font-size-md: @site-font-size-md;
+  --site-font-size-lg: @site-font-size-lg;
+  --site-icon-size-xs: @site-icon-size-xs;
+  --site-icon-size-sm: @site-icon-size-sm;
+  --site-icon-size-md: @site-icon-size-md;
+  --site-icon-size-lg: @site-icon-size-lg;
+  --site-color-primary: @site-color-primary;
+  --site-color-info: @site-color-info;
+  --site-color-success: @site-color-success;
+  --site-color-warning: @site-color-warning;
+  --site-color-danger: @site-color-danger;
+  --site-color-disabled: @site-color-disabled;
+  --site-cubic-bezier: @site-cubic-bezier;
+  --site-shadow-key-umbra-opacity: @site-shadow-key-umbra-opacity;
+  --site-shadow-key-penumbra-opacity: @site-shadow-key-penumbra-opacity;
+  --site-shadow-key-ambient-opacity: @site-shadow-key-ambient-opacity;
+}