@varlet/cli 2.15.1 → 2.16.0-alpha.1693852004525

package/site/components/snackbar/index.tsx

@@ -1,270 +0,0 @@
-import VarSnackbarCore from './core.vue'
-import VarSnackbar from './Snackbar.vue'
-import context from '../context'
-import { reactive, TransitionGroup } from 'vue'
-import { mountInstance } from '../utils/components'
-import { isNumber, isPlainObject, isString, toNumber } from '@varlet/shared'
-import type { LoadingType, LoadingSize } from '../loading/props'
-import type { App, Component, TeleportProps } from 'vue'
-
-export type SnackbarType = 'success' | 'warning' | 'info' | 'error' | 'loading'
-
-export const SNACKBAR_TYPE: Array<SnackbarType> = ['loading', 'success', 'warning', 'info', 'error']
-
-interface SnackbarHandel {
-  clear: () => void
-}
-
-interface SnackbarOptions {
-  type?: SnackbarType
-  content?: string
-  position?: 'top' | 'center' | 'bottom'
-  loadingType?: LoadingType
-  loadingSize?: LoadingSize
-  lockScroll?: boolean
-  contentClass?: string
-  duration?: number
-  vertical?: boolean
-  show?: boolean
-  forbidClick?: boolean
-  onOpen?: () => void
-  onClose?: () => void
-  onOpened?: () => void
-  onClosed?: () => void
-  // internal
-  teleport?: TeleportProps['to']
-}
-
-interface UniqSnackbarOptions {
-  id: number
-  reactiveSnackOptions: SnackbarOptions
-  _update?: string
-  animationEnd?: boolean
-}
-
-interface Snackbar {
-  (options: SnackbarOptions | string): SnackbarHandel
-
-  install(app: App): void
-
-  allowMultiple(bool: boolean): void
-
-  success(options: SnackbarOptions | string): SnackbarHandel
-
-  warning(options: SnackbarOptions | string): SnackbarHandel
-
-  info(options: SnackbarOptions | string): SnackbarHandel
-
-  error(options: SnackbarOptions | string): SnackbarHandel
-
-  loading(options: SnackbarOptions | string): SnackbarHandel
-
-  clear(): void
-
-  Component: Component
-}
-
-let sid = 0
-let isMount = false
-let unmount: () => void
-let isAllowMultiple = false
-let uniqSnackbarOptions: Array<UniqSnackbarOptions> = reactive<UniqSnackbarOptions[]>([])
-
-const defaultOption: Partial<Record<keyof SnackbarOptions, any>> = {
-  type: undefined,
-  content: '',
-  position: 'top',
-  duration: 3000,
-  vertical: false,
-  contentClass: undefined,
-  loadingType: 'circle',
-  loadingSize: 'normal',
-  lockScroll: false,
-  teleport: 'body',
-  forbidClick: false,
-  onOpen: () => {},
-  onOpened: () => {},
-  onClose: () => {},
-  onClosed: () => {},
-}
-
-const transitionGroupProps: any = {
-  name: 'var-site-snackbar-fade',
-  tag: 'div',
-  class: 'var-site-transition-group',
-}
-
-const TransitionGroupHost = {
-  setup() {
-    return () => {
-      const snackbarList = uniqSnackbarOptions.map(({ id, reactiveSnackOptions, _update }: UniqSnackbarOptions) => {
-        const transitionGroupEl = document.querySelector('.var-site-transition-group')
-        if (reactiveSnackOptions.forbidClick || reactiveSnackOptions.type === 'loading') {
-          ;(transitionGroupEl as HTMLElement).classList.add('var-site-pointer-auto')
-        } else {
-          ;(transitionGroupEl as HTMLElement).classList.remove('var-site-pointer-auto')
-        }
-
-        if (isAllowMultiple) reactiveSnackOptions.position = 'top'
-
-        const position = isAllowMultiple ? 'relative' : 'absolute'
-
-        const style = {
-          position,
-          ...getTop(reactiveSnackOptions.position),
-        }
-
-        return (
-          <VarSnackbarCore
-            {...reactiveSnackOptions}
-            key={id}
-            style={style}
-            data-id={id}
-            _update={_update}
-            v-model={[reactiveSnackOptions.show, 'show']}
-          />
-        )
-      })
-
-      const zindex = context.zIndex
-
-      return (
-        <TransitionGroup
-          {...transitionGroupProps}
-          style={{ zIndex: zindex }}
-          onAfterEnter={opened}
-          onAfterLeave={removeUniqOption}
-        >
-          {snackbarList}
-        </TransitionGroup>
-      )
-    }
-  },
-}
-
-const Snackbar: Snackbar = function (options: SnackbarOptions | string | number): SnackbarHandel {
-  const snackOptions: SnackbarOptions = isString(options) || isNumber(options) ? { content: String(options) } : options
-  const reactiveSnackOptions: SnackbarOptions = reactive<SnackbarOptions>({
-    ...defaultOption,
-    ...snackOptions,
-  })
-  reactiveSnackOptions.show = true
-
-  if (!isMount) {
-    isMount = true
-    unmount = mountInstance(TransitionGroupHost).unmountInstance
-  }
-
-  const { length } = uniqSnackbarOptions
-  const uniqSnackbarOptionItem: UniqSnackbarOptions = {
-    id: sid++,
-    reactiveSnackOptions,
-  }
-
-  if (length === 0 || isAllowMultiple) {
-    addUniqOption(uniqSnackbarOptionItem)
-  } else {
-    const _update = `update-${sid}`
-    updateUniqOption(reactiveSnackOptions, _update)
-  }
-
-  return {
-    clear() {
-      if (!isAllowMultiple && uniqSnackbarOptions.length) {
-        uniqSnackbarOptions[0].reactiveSnackOptions.show = false
-      } else {
-        reactiveSnackOptions.show = false
-      }
-    },
-  }
-} as Snackbar
-
-SNACKBAR_TYPE.forEach((type) => {
-  Snackbar[type] = (options: SnackbarOptions | string): SnackbarHandel => {
-    if (isPlainObject(options)) {
-      options.type = type
-    } else {
-      options = {
-        content: options,
-        type,
-      }
-    }
-    return Snackbar(options)
-  }
-})
-
-Snackbar.install = function (app: App) {
-  app.component(VarSnackbar.name, VarSnackbar)
-}
-
-Snackbar.allowMultiple = function (bool = false) {
-  if (bool !== isAllowMultiple) {
-    uniqSnackbarOptions.forEach((option: UniqSnackbarOptions) => {
-      option.reactiveSnackOptions.show = false
-    })
-
-    isAllowMultiple = bool
-  }
-}
-
-Snackbar.clear = function () {
-  uniqSnackbarOptions.forEach((option: UniqSnackbarOptions) => {
-    option.reactiveSnackOptions.show = false
-  })
-}
-
-Snackbar.Component = VarSnackbar
-
-function opened(element: HTMLElement): void {
-  const id = element.getAttribute('data-id')
-  const option = uniqSnackbarOptions.find((option) => option.id === toNumber(id))
-  if (option) option.reactiveSnackOptions.onOpened?.()
-}
-
-function removeUniqOption(element: HTMLElement): void {
-  element.parentElement && element.parentElement.classList.remove('var-site-pointer-auto')
-  const id = element.getAttribute('data-id')
-
-  const option = uniqSnackbarOptions.find((option) => option.id === toNumber(id))
-  if (option) {
-    option.animationEnd = true
-    option.reactiveSnackOptions.onClosed?.()
-  }
-
-  const isAllAnimationEnd = uniqSnackbarOptions.every((option) => option.animationEnd)
-
-  if (isAllAnimationEnd) {
-    unmount?.()
-    uniqSnackbarOptions = reactive<UniqSnackbarOptions[]>([])
-    isMount = false
-  }
-}
-
-function addUniqOption(uniqSnackbarOptionItem: UniqSnackbarOptions) {
-  uniqSnackbarOptions.push(uniqSnackbarOptionItem)
-}
-
-function updateUniqOption(reactiveSnackOptions: SnackbarOptions, _update: string) {
-  const [firstOption] = uniqSnackbarOptions
-
-  firstOption.reactiveSnackOptions = {
-    ...firstOption.reactiveSnackOptions,
-    ...reactiveSnackOptions,
-  }
-
-  firstOption._update = _update
-}
-
-function getTop(position = 'top') {
-  if (position === 'bottom') return { [position]: '5%' }
-
-  return { top: position === 'top' ? '5%' : '45%' }
-}
-
-VarSnackbar.install = function (app: App) {
-  app.component(VarSnackbar.name, VarSnackbar)
-}
-
-export const _SnackbarComponent = VarSnackbar
-
-export default Snackbar

package/site/components/snackbar/props.ts

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

package/site/components/styles/elevation.less

@@ -1,126 +0,0 @@
-.var-site-elevation {
-  &--0 {
-    box-shadow: 0 0 0 0 var(--site-shadow-key-umbra-opacity), 0 0 0 0 var(--site-shadow-key-penumbra-opacity),
-      0 0 0 0 var(--site-shadow-key-ambient-opacity);
-  }
-
-  &--1 {
-    box-shadow: 0 2px 1px -1px var(--site-shadow-key-umbra-opacity), 0 1px 1px 0 var(--site-shadow-key-penumbra-opacity),
-      0 1px 3px 0 var(--site-shadow-key-ambient-opacity);
-  }
-
-  &--2 {
-    box-shadow: 0 3px 1px -2px var(--site-shadow-key-umbra-opacity), 0 2px 2px 0 var(--site-shadow-key-penumbra-opacity),
-      0 1px 5px 0 var(--site-shadow-key-ambient-opacity);
-  }
-
-  &--3 {
-    box-shadow: 0 3px 3px -2px var(--site-shadow-key-umbra-opacity), 0 3px 4px 0 var(--site-shadow-key-penumbra-opacity),
-      0 1px 8px 0 var(--site-shadow-key-ambient-opacity);
-  }
-
-  &--4 {
-    box-shadow: 0 2px 4px -1px var(--site-shadow-key-umbra-opacity), 0 4px 5px 0 var(--site-shadow-key-penumbra-opacity),
-      0 1px 10px 0 var(--site-shadow-key-ambient-opacity);
-  }
-
-  &--5 {
-    box-shadow: 0 3px 5px -1px var(--site-shadow-key-umbra-opacity), 0 5px 8px 0 var(--site-shadow-key-penumbra-opacity),
-      0 1px 14px 0 var(--site-shadow-key-ambient-opacity);
-  }
-
-  &--6 {
-    box-shadow: 0 3px 5px -1px var(--site-shadow-key-umbra-opacity), 0 6px 10px 0 var(--site-shadow-key-penumbra-opacity),
-      0 1px 18px 0 var(--site-shadow-key-ambient-opacity);
-  }
-
-  &--7 {
-    box-shadow: 0 4px 5px -2px var(--site-shadow-key-umbra-opacity), 0 7px 10px 1px var(--site-shadow-key-penumbra-opacity),
-      0 2px 16px 1px var(--site-shadow-key-ambient-opacity);
-  }
-
-  &--8 {
-    box-shadow: 0 5px 5px -3px var(--site-shadow-key-umbra-opacity), 0 8px 10px 1px var(--site-shadow-key-penumbra-opacity),
-      0 3px 14px 2px var(--site-shadow-key-ambient-opacity);
-  }
-
-  &--9 {
-    box-shadow: 0 5px 6px -3px var(--site-shadow-key-umbra-opacity), 0 9px 12px 1px var(--site-shadow-key-penumbra-opacity),
-      0 3px 16px 2px var(--site-shadow-key-ambient-opacity);
-  }
-
-  &--10 {
-    box-shadow: 0 6px 6px -3px var(--site-shadow-key-umbra-opacity), 0 10px 14px 1px var(--site-shadow-key-penumbra-opacity),
-      0 4px 18px 3px var(--site-shadow-key-ambient-opacity);
-  }
-
-  &--11 {
-    box-shadow: 0 6px 7px -4px var(--site-shadow-key-umbra-opacity), 0 11px 15px 1px var(--site-shadow-key-penumbra-opacity),
-      0 4px 20px 3px var(--site-shadow-key-ambient-opacity);
-  }
-
-  &--12 {
-    box-shadow: 0 7px 8px -4px var(--site-shadow-key-umbra-opacity), 0 12px 17px 2px var(--site-shadow-key-penumbra-opacity),
-      0 5px 22px 4px var(--site-shadow-key-ambient-opacity);
-  }
-
-  &--13 {
-    box-shadow: 0 7px 8px -4px var(--site-shadow-key-umbra-opacity), 0 13px 19px 2px var(--site-shadow-key-penumbra-opacity),
-      0 5px 24px 4px var(--site-shadow-key-ambient-opacity);
-  }
-
-  &--14 {
-    box-shadow: 0 7px 9px -4px var(--site-shadow-key-umbra-opacity), 0 14px 21px 2px var(--site-shadow-key-penumbra-opacity),
-      0 5px 26px 4px var(--site-shadow-key-ambient-opacity);
-  }
-
-  &--15 {
-    box-shadow: 0 8px 9px -5px var(--site-shadow-key-umbra-opacity), 0 15px 22px 2px var(--site-shadow-key-penumbra-opacity),
-      0 6px 28px 5px var(--site-shadow-key-ambient-opacity);
-  }
-
-  &--16 {
-    box-shadow: 0 8px 10px -5px var(--site-shadow-key-umbra-opacity), 0 16px 24px 2px var(--site-shadow-key-penumbra-opacity),
-      0 6px 30px 5px var(--site-shadow-key-ambient-opacity);
-  }
-
-  &--17 {
-    box-shadow: 0 8px 11px -5px var(--site-shadow-key-umbra-opacity), 0 17px 26px 2px var(--site-shadow-key-penumbra-opacity),
-      0 6px 32px 5px var(--site-shadow-key-ambient-opacity);
-  }
-
-  &--18 {
-    box-shadow: 0 9px 11px -5px var(--site-shadow-key-umbra-opacity), 0 18px 28px 2px var(--site-shadow-key-penumbra-opacity),
-      0 7px 34px 6px var(--site-shadow-key-ambient-opacity);
-  }
-
-  &--19 {
-    box-shadow: 0 9px 12px -6px var(--site-shadow-key-umbra-opacity), 0 19px 29px 2px var(--site-shadow-key-penumbra-opacity),
-      0 7px 36px 6px var(--site-shadow-key-ambient-opacity);
-  }
-
-  &--20 {
-    box-shadow: 0 10px 13px -6px var(--site-shadow-key-umbra-opacity), 0 20px 31px 3px var(--site-shadow-key-penumbra-opacity),
-      0 8px 38px 7px var(--site-shadow-key-ambient-opacity);
-  }
-
-  &--21 {
-    box-shadow: 0 10px 13px -6px var(--site-shadow-key-umbra-opacity), 0 21px 33px 3px var(--site-shadow-key-penumbra-opacity),
-      0 8px 40px 7px var(--site-shadow-key-ambient-opacity);
-  }
-
-  &--22 {
-    box-shadow: 0 10px 14px -6px var(--site-shadow-key-umbra-opacity), 0 22px 35px 3px var(--site-shadow-key-penumbra-opacity),
-      0 8px 42px 7px var(--site-shadow-key-ambient-opacity);
-  }
-
-  &--23 {
-    box-shadow: 0 11px 14px -7px var(--site-shadow-key-umbra-opacity), 0 23px 36px 3px var(--site-shadow-key-penumbra-opacity),
-      0 9px 44px 8px var(--site-shadow-key-ambient-opacity);
-  }
-
-  &--24 {
-    box-shadow: 0 11px 15px -7px var(--site-shadow-key-umbra-opacity), 0 24px 38px 3px var(--site-shadow-key-penumbra-opacity),
-      0 9px 46px 8px var(--site-shadow-key-ambient-opacity);
-  }
-}