@varlet/cli 2.15.1 → 2.16.0-alpha.1693852004525

package/site/components/popup/Popup.tsx

@@ -1,102 +0,0 @@
-import { defineComponent, watch, Transition, Teleport } from 'vue'
-import { props } from './props'
-import { useLock } from '../context/lock'
-import { useZIndex } from '../context/zIndex'
-import { useRouteListener, useTeleport, createNamespace } from '../utils/components'
-
-import '../styles/common.less'
-import './popup.less'
-
-const { n, classes } = createNamespace('popup')
-
-export default defineComponent({
-  name: 'VarPopup',
-  inheritAttrs: false,
-  props,
-  setup(props, { slots, attrs }) {
-    const { zIndex } = useZIndex(() => props.show, 3)
-    const { disabled } = useTeleport()
-
-    const hidePopup = () => {
-      const { closeOnClickOverlay, onClickOverlay } = props
-
-      onClickOverlay?.()
-
-      if (!closeOnClickOverlay) {
-        return
-      }
-
-      props['onUpdate:show']?.(false)
-    }
-
-    useLock(
-      () => props.show,
-      () => props.lockScroll
-    )
-
-    watch(
-      () => props.show,
-      (newValue: boolean) => {
-        const { onOpen, onClose } = props
-        newValue ? onOpen?.() : onClose?.()
-      }
-    )
-
-    // internal for Dialog
-    useRouteListener(() => props.onRouteChange?.())
-
-    const renderOverlay = () => {
-      const { overlayClass = '', overlayStyle } = props
-
-      return (
-        <div
-          class={classes(n('overlay'), overlayClass)}
-          style={{
-            zIndex: zIndex.value - 1,
-            ...overlayStyle,
-          }}
-          onClick={hidePopup}
-        />
-      )
-    }
-
-    const renderContent = () => {
-      return (
-        <div
-          class={classes(n('content'), 'var-site-elevation--3', n(`--${props.position}`))}
-          style={{ zIndex: zIndex.value }}
-          {...attrs}
-        >
-          {slots.default?.()}
-        </div>
-      )
-    }
-
-    const renderPopup = () => {
-      const { onOpened, onClosed, show, overlay, transition, position } = props
-
-      return (
-        <Transition name="var-site-fade" onAfterEnter={onOpened} onAfterLeave={onClosed}>
-          <div class={classes('var-site--box', n())} style={{ zIndex: zIndex.value - 2 }} v-show={show}>
-            {overlay && renderOverlay()}
-            <Transition name={transition || `var-site-pop-${position}`}>{show && renderContent()}</Transition>
-          </div>
-        </Transition>
-      )
-    }
-
-    return () => {
-      const { teleport } = props
-
-      if (teleport) {
-        return (
-          <Teleport to={teleport} disabled={disabled.value}>
-            {renderPopup()}
-          </Teleport>
-        )
-      }
-
-      return renderPopup()
-    }
-  },
-})

package/site/components/popup/index.ts

@@ -1,10 +0,0 @@
-import type { App } from 'vue'
-import Popup from './Popup'
-
-Popup.install = function (app: App) {
-  app.component(Popup.name, Popup)
-}
-
-export const _PopupComponent = Popup
-
-export default Popup

package/site/components/popup/popup.less

@@ -1,125 +0,0 @@
-@site-popup-overlay-background-color: rgba(0, 0, 0, 0.6);
-@site-popup-content-background-color: #fff;
-
-:root {
-  --site-popup-overlay-background-color: @site-popup-overlay-background-color;
-  --site-popup-content-background-color: @site-popup-content-background-color;
-}
-
-.var-site {
-  &-fade-enter-from,
-  &-fade-leave-to {
-    opacity: 0;
-  }
-  &-fade-enter-active,
-  &-fade-leave-active {
-    transition: opacity 0.25s;
-  }
-
-  &-pop-center-enter-from,
-  &-pop-center-leave-to {
-    transform: scale(0.3);
-  }
-  &-pop-center-enter-active,
-  &-pop-center-leave-active {
-    transition: all 0.25s;
-  }
-
-  &-pop-bottom-enter-from,
-  &-pop-bottom-leave-to {
-    transform: translateY(100%);
-  }
-  &-pop-bottom-enter-active,
-  &-pop-bottom-leave-active {
-    transition: all 0.25s;
-  }
-
-  &-pop-top-enter-from,
-  &-pop-top-leave-to {
-    transform: translateY(-100%);
-  }
-  &-pop-top-enter-active,
-  &-pop-top-leave-active {
-    transition: all 0.25s;
-  }
-
-  &-pop-left-enter-from,
-  &-pop-left-leave-to {
-    transform: translateX(-100%);
-  }
-  &-pop-left-enter-active,
-  &-pop-left-leave-active {
-    transition: all 0.25s;
-  }
-
-  &-pop-right-enter-from,
-  &-pop-right-leave-to {
-    transform: translateX(100%);
-  }
-  &-pop-right-enter-active,
-  &-pop-right-leave-active {
-    transition: all 0.25s;
-  }
-}
-
-.var-site-popup {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-
-  &__overlay {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: var(--site-popup-overlay-background-color);
-    transition: all 0.25s;
-  }
-
-  &__content {
-    overflow: auto;
-    background-color: var(--site-popup-content-background-color);
-    transition: all 0.25s;
-  }
-
-  &--center {
-    position: relative;
-  }
-
-  &--bottom {
-    min-width: 100%;
-    position: absolute;
-    left: 0;
-    bottom: 0;
-  }
-
-  &--top {
-    min-width: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-  }
-
-  &--left {
-    min-height: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-  }
-
-  &--right {
-    min-height: 100%;
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-}

package/site/components/popup/props.ts

@@ -1,63 +0,0 @@
-import type { PropType, TeleportProps } from 'vue'
-
-function positionValidator(position: string): boolean {
-  return ['top', 'bottom', 'right', 'left', 'center'].includes(position)
-}
-
-export const props = {
-  show: {
-    type: Boolean,
-    default: false,
-  },
-  position: {
-    type: String as PropType<'top' | 'bottom' | 'right' | 'left' | 'center'>,
-    default: 'center',
-    validator: positionValidator,
-  },
-  transition: {
-    type: String,
-  },
-  overlay: {
-    type: Boolean,
-    default: true,
-  },
-  overlayClass: {
-    type: String,
-  },
-  overlayStyle: {
-    type: Object,
-  },
-  lockScroll: {
-    type: Boolean,
-    default: true,
-  },
-  closeOnClickOverlay: {
-    type: Boolean,
-    default: true,
-  },
-  teleport: {
-    type: String as PropType<TeleportProps['to']>,
-  },
-  onOpen: {
-    type: Function as PropType<() => void>,
-  },
-  onOpened: {
-    type: Function as PropType<() => void>,
-  },
-  onClose: {
-    type: Function as PropType<() => void>,
-  },
-  onClosed: {
-    type: Function as PropType<() => void>,
-  },
-  onClickOverlay: {
-    type: Function as PropType<() => void>,
-  },
-  // internal for Dialog
-  onRouteChange: {
-    type: Function as PropType<() => void>,
-  },
-  'onUpdate:show': {
-    type: Function as PropType<(show: boolean) => void>,
-  },
-}

package/site/components/ripple/index.ts

@@ -1,188 +0,0 @@
-import context from '../context'
-import './ripple.less'
-import '../styles/common.less'
-import { supportTouch } from '../utils/elements'
-import { createNamespace } from '../utils/components'
-import type { Directive, Plugin, App } from 'vue'
-import type { DirectiveBinding } from '@vue/runtime-core'
-
-const { n } = createNamespace('ripple')
-
-interface RippleStyles {
-  x: number
-  y: number
-  centerX: number
-  centerY: number
-  size: number
-}
-
-interface RippleOptions {
-  removeRipple: any
-  touchmoveForbid: boolean
-  color?: string
-  disabled?: boolean
-  tasker?: number | null
-}
-
-interface RippleHTMLElement extends HTMLElement {
-  _ripple?: RippleOptions
-}
-
-const ANIMATION_DURATION = 250
-
-function setStyles(element: RippleHTMLElement) {
-  const { zIndex, position } = window.getComputedStyle(element)
-
-  element.style.overflow = 'hidden'
-  element.style.overflowX = 'hidden'
-  element.style.overflowY = 'hidden'
-  position === 'static' && (element.style.position = 'relative')
-  zIndex === 'auto' && (element.style.zIndex = '1')
-}
-
-function computeRippleStyles(element: RippleHTMLElement, event: TouchEvent): RippleStyles {
-  const { top, left }: DOMRect = element.getBoundingClientRect()
-  const { clientWidth, clientHeight } = element
-
-  const radius: number = Math.sqrt(clientWidth ** 2 + clientHeight ** 2) / 2
-  const size: number = radius * 2
-
-  const localX: number = event.touches[0].clientX - left
-  const localY: number = event.touches[0].clientY - top
-
-  const centerX: number = (clientWidth - radius * 2) / 2
-  const centerY: number = (clientHeight - radius * 2) / 2
-
-  const x: number = localX - radius
-  const y: number = localY - radius
-
-  return { x, y, centerX, centerY, size }
-}
-
-function createRipple(this: RippleHTMLElement, event: TouchEvent) {
-  const _ripple = this._ripple as RippleOptions
-  _ripple.removeRipple()
-
-  if (_ripple.disabled || _ripple.tasker) {
-    return
-  }
-
-  const task = () => {
-    _ripple.tasker = null
-
-    const { x, y, centerX, centerY, size }: RippleStyles = computeRippleStyles(this, event)
-    const ripple: RippleHTMLElement = document.createElement('div')
-    ripple.classList.add(n())
-    ripple.style.opacity = `0`
-    ripple.style.transform = `translate(${x}px, ${y}px) scale3d(.3, .3, .3)`
-    ripple.style.width = `${size}px`
-    ripple.style.height = `${size}px`
-    _ripple.color && (ripple.style.backgroundColor = _ripple.color)
-    ripple.dataset.createdAt = String(performance.now())
-
-    setStyles(this)
-
-    this.appendChild(ripple)
-
-    window.setTimeout(() => {
-      ripple.style.transform = `translate(${centerX}px, ${centerY}px) scale3d(1, 1, 1)`
-      ripple.style.opacity = `.25`
-    }, 20)
-  }
-
-  _ripple.tasker = window.setTimeout(task, 60)
-}
-
-function removeRipple(this: RippleHTMLElement) {
-  const _ripple = this._ripple as RippleOptions
-
-  const task = () => {
-    const ripples: NodeListOf<RippleHTMLElement> = this.querySelectorAll(`.${n()}`)
-    if (!ripples.length) {
-      return
-    }
-
-    const lastRipple: RippleHTMLElement = ripples[ripples.length - 1]
-    const delay: number = ANIMATION_DURATION - performance.now() + Number(lastRipple.dataset.createdAt)
-
-    setTimeout(() => {
-      lastRipple.style.opacity = `0`
-
-      setTimeout(() => lastRipple.parentNode?.removeChild(lastRipple), ANIMATION_DURATION)
-    }, delay)
-  }
-
-  _ripple.tasker ? setTimeout(task, 60) : task()
-}
-
-function forbidRippleTask(this: RippleHTMLElement) {
-  const _ripple = this._ripple as RippleOptions
-
-  if (!supportTouch()) {
-    return
-  }
-
-  if (!_ripple.touchmoveForbid) {
-    return
-  }
-
-  _ripple.tasker && window.clearTimeout(_ripple.tasker)
-  _ripple.tasker = null
-}
-
-function mounted(el: RippleHTMLElement, binding: DirectiveBinding<RippleOptions>) {
-  el._ripple = {
-    tasker: null,
-    ...(binding.value ?? {}),
-    touchmoveForbid: binding.value?.touchmoveForbid ?? context.touchmoveForbid,
-    removeRipple: removeRipple.bind(el),
-  }
-
-  el.addEventListener('touchstart', createRipple, { passive: true })
-  el.addEventListener('touchmove', forbidRippleTask, { passive: true })
-  el.addEventListener('dragstart', removeRipple, { passive: true })
-  document.addEventListener('touchend', el._ripple.removeRipple, { passive: true })
-  document.addEventListener('touchcancel', el._ripple.removeRipple, { passive: true })
-}
-
-function unmounted(el: RippleHTMLElement) {
-  el.removeEventListener('touchstart', createRipple)
-  el.removeEventListener('touchmove', forbidRippleTask)
-  el.removeEventListener('dragstart', removeRipple)
-  document.removeEventListener('touchend', el._ripple!.removeRipple)
-  document.removeEventListener('touchcancel', el._ripple!.removeRipple)
-}
-
-function updated(el: RippleHTMLElement, binding: DirectiveBinding<RippleOptions>) {
-  const newBinding = {
-    touchmoveForbid: binding.value?.touchmoveForbid ?? context.touchmoveForbid,
-    color: binding.value?.color,
-    disabled: binding.value?.disabled,
-  }
-
-  const diff =
-    newBinding.touchmoveForbid !== el._ripple?.touchmoveForbid ||
-    newBinding.color !== el._ripple?.color ||
-    newBinding.disabled !== el._ripple?.disabled
-
-  if (diff) {
-    el._ripple = {
-      tasker: newBinding.disabled ? null : el._ripple?.tasker,
-      removeRipple: el._ripple?.removeRipple,
-      ...newBinding,
-    }
-  }
-}
-
-const Ripple: Directive & Plugin = {
-  mounted,
-  unmounted,
-  updated,
-  install(app: App) {
-    app.directive('ripple', this)
-  },
-}
-
-export const _RippleComponent = Ripple
-
-export default Ripple

package/site/components/ripple/ripple.less

@@ -1,20 +0,0 @@
-@site-ripple-cubic-bezier: cubic-bezier(0.68, 0.01, 0.62, 0.6);
-@site-ripple-color: currentColor;
-
-:root {
-  --site-ripple-cubic-bezier: @site-ripple-cubic-bezier;
-  --site-ripple-color: @site-ripple-color;
-}
-
-.var-site-ripple {
-  position: absolute;
-  transition: transform 0.2s var(--site-ripple-cubic-bezier), opacity 0.14s linear;
-  top: 0;
-  left: 0;
-  border-radius: 50%;
-  opacity: 0;
-  will-change: transform, opacity;
-  pointer-events: none;
-  z-index: 100;
-  background-color: var(--site-ripple-color);
-}

package/site/components/snackbar/Snackbar.vue

@@ -1,41 +0,0 @@
-<template>
-  <teleport :to="teleport" :disabled="disabled">
-    <transition :name="`${n()}-fade`" @after-enter="onOpened" @after-leave="onClosed">
-      <var-snackbar-core v-bind="$props" :class="n('transition')">
-        <slot>{{ content }}</slot>
-        <template #action>
-          <slot name="action" />
-        </template>
-      </var-snackbar-core>
-    </transition>
-  </teleport>
-</template>
-
-<script>
-import { defineComponent } from 'vue'
-import VarSnackbarCore from './core'
-import { createNamespace, useTeleport } from '../utils/components'
-import { props } from './props'
-
-const { n } = createNamespace('snackbar')
-
-export default defineComponent({
-  name: 'VarSnackbar',
-  components: {
-    VarSnackbarCore,
-  },
-  props,
-  setup() {
-    const { disabled } = useTeleport()
-
-    return {
-      n,
-      disabled,
-    }
-  },
-})
-</script>
-
-<style lang="less">
-@import '../styles/common';
-</style>

package/site/components/snackbar/core.vue

@@ -1,132 +0,0 @@
-<template>
-  <div :class="n()" :style="{ pointerEvents: isForbidClick ? 'auto' : 'none', zIndex }" v-show="show">
-    <div
-      :class="
-        classes(
-          n('wrapper'),
-          n(`wrapper-${position}`),
-          'var-site-elevation--4',
-          [vertical, n('vertical')],
-          [type && SNACKBAR_TYPE.includes(type), n(`wrapper-${type}`)]
-        )
-      "
-      :style="{ zIndex }"
-    >
-      <div :class="[n('content'), contentClass]">
-        <slot>{{ content }}</slot>
-      </div>
-      <div :class="n('action')">
-        <var-icon v-if="iconName" :name="iconName" />
-        <var-loading
-          v-if="type === 'loading'"
-          :type="loadingType"
-          :size="loadingSize"
-          :color="loadingColor"
-          :radius="loadingRadius"
-        />
-        <slot name="action" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, watch, ref, onMounted, computed } from 'vue'
-import VarLoading from '../loading'
-import VarIcon from '../icon'
-import { useZIndex } from '../context/zIndex'
-import { props } from './props'
-import { useLock } from '../context/lock'
-import { SNACKBAR_TYPE } from './index'
-import type { Ref, ComputedRef } from 'vue'
-import type { SnackbarType } from './index'
-import { createNamespace } from '../utils/components'
-
-const { n, classes } = createNamespace('snackbar')
-
-const ICON_TYPE_DICT: Record<SnackbarType, string> = {
-  success: 'checkbox-marked-circle',
-  warning: 'warning',
-  info: 'information',
-  error: 'error',
-  loading: '',
-}
-
-export default defineComponent({
-  name: 'VarSiteSnackbarCore',
-  components: {
-    VarLoading,
-    VarIcon,
-  },
-  props,
-  setup(props) {
-    const timer: Ref = ref(null)
-    const { zIndex } = useZIndex(() => props.show, 1)
-
-    useLock(
-      () => props.show,
-      () => props.lockScroll
-    )
-
-    const isForbidClick: ComputedRef<boolean> = computed(() => props.type === 'loading' || props.forbidClick)
-
-    const iconName: ComputedRef<string> = computed(() => {
-      if (!props.type) return ''
-
-      return ICON_TYPE_DICT[props.type]
-    })
-
-    const updateAfterDuration = () => {
-      timer.value = setTimeout(() => {
-        props.type !== 'loading' && props['onUpdate:show']?.(false)
-      }, props.duration)
-    }
-
-    watch(
-      () => props.show,
-      (show) => {
-        if (show) {
-          props.onOpen?.()
-          updateAfterDuration()
-        } else if (show === false) {
-          clearTimeout(timer.value)
-          props.onClose?.()
-        }
-      }
-    )
-
-    watch(
-      () => props._update,
-      () => {
-        clearTimeout(timer.value)
-        updateAfterDuration()
-      }
-    )
-
-    onMounted(() => {
-      if (props.show) {
-        props.onOpen?.()
-        updateAfterDuration()
-      }
-    })
-
-    return {
-      SNACKBAR_TYPE,
-      n,
-      classes,
-      zIndex,
-      iconName,
-      isForbidClick,
-    }
-  },
-})
-</script>
-
-<style lang="less">
-@import '../styles/common';
-@import '../styles/elevation';
-@import '../loading/loading';
-@import '../button/button';
-@import '../icon/icon';
-@import './snackbar';
-</style>