@varlet/cli 2.15.1 → 2.16.0-alpha.1693852004525

package/site/components/styles/var.less

@@ -1,27 +0,0 @@
-// 文字
-@site-font-size-xs: 10px;
-@site-font-size-sm: 12px;
-@site-font-size-md: 14px;
-@site-font-size-lg: 16px;
-
-// 图标
-@site-icon-size-xs: 16px;
-@site-icon-size-sm: 18px;
-@site-icon-size-md: 20px;
-@site-icon-size-lg: 22px;
-
-//颜色
-@site-color-primary: #3a7afe;
-@site-color-info: #00afef;
-@site-color-success: #00c48f;
-@site-color-warning: #ff9f00;
-@site-color-danger: #f44336;
-@site-color-disabled: #e0e0e0;
-
-// 动画函数
-@site-cubic-bezier: cubic-bezier(0.25, 0.8, 0.5, 1);
-
-// 阴影
-@site-shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2);
-@site-shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14);
-@site-shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12);

package/site/components/utils/components.ts

@@ -1,114 +0,0 @@
-import { createApp, h, onActivated, onDeactivated, onMounted, onUnmounted, ref, Ref } from 'vue'
-import type { Component } from 'vue'
-import { isArray } from '@varlet/shared'
-
-export interface MountInstance {
-  instance: any
-  unmount: () => void
-}
-
-export function pickProps(props: any, propsKey: string): any
-export function pickProps(props: any, propsKey: string[]): any
-export function pickProps(props: any, propsKey: any): any {
-  return Array.isArray(propsKey)
-    ? propsKey.reduce((pickedProps: any, key) => {
-      pickedProps[key] = props[key]
-      return pickedProps
-    }, {})
-    : props[propsKey]
-}
-
-export function mount(component: Component): MountInstance {
-  const app = createApp(component)
-  const host = document.createElement('div')
-  document.body.appendChild(host)
-
-  return {
-    instance: app.mount(host),
-    unmount() {
-      app.unmount()
-      document.body.removeChild(host)
-    }
-  }
-}
-
-export function mountInstance(
-  component: any,
-  props: Record<string, any> = {},
-  eventListener: Record<string, any> = {}
-): {
-  unmountInstance: () => void
-} {
-  const Host = {
-    setup() {
-      return () =>
-        h(component, {
-          ...props,
-          ...eventListener
-        })
-    }
-  }
-
-  const { unmount } = mount(Host)
-  return { unmountInstance: unmount }
-}
-
-export function useTeleport() {
-  const disabled: Ref<boolean> = ref(false)
-
-  onActivated(() => {
-    disabled.value = false
-  })
-
-  onDeactivated(() => {
-    disabled.value = true
-  })
-
-  return {
-    disabled,
-  }
-}
-
-type ClassName = string | undefined | null
-type Classes = (ClassName | [any, ClassName, ClassName?])[]
-
-export function createNamespace(name: string) {
-  const namespace = `var-site-${name}`
-
-  const createBEM = (suffix?: string): string => {
-    if (!suffix) return namespace
-
-    return suffix.startsWith('--') ? `${namespace}${suffix}` : `${namespace}__${suffix}`
-  }
-
-  const classes = (...classes: Classes): any[] => {
-    return classes.map((className) => {
-      if (isArray(className)) {
-        const [condition, truthy, falsy = null] = className
-        return condition ? truthy : falsy
-      }
-
-      return className
-    })
-  }
-
-  return {
-    n: createBEM,
-    classes,
-  }
-}
-
-export function call<P extends any[], R>(fn?: ((...arg: P) => R) | null, ...arg: P): R | undefined {
-  if (fn) return fn(...arg)
-}
-
-export function useRouteListener(cb: () => void) {
-  onMounted(() => {
-    window.addEventListener('hashchange', cb)
-    window.addEventListener('popstate', cb)
-  })
-  onUnmounted(() => {
-    window.removeEventListener('hashchange', cb)
-    window.removeEventListener('popstate', cb)
-  })
-}

package/site/components/utils/elements.ts

@@ -1,104 +0,0 @@
-import { isNumber, isString, toNumber, kebabCase } from '@varlet/shared'
-import type { StyleVars } from '@varlet/cli/client'
-
-export function getLeft(element: HTMLElement): number {
-  const { left } = element.getBoundingClientRect()
-
-  return left + (document.body.scrollLeft || document.documentElement.scrollLeft)
-}
-
-// example 1rem
-export const isRem = (value: unknown): value is string => isString(value) && value.endsWith('rem')
-
-// example 1 || 1px
-export const isPx = (value: unknown): value is string | number =>
-  (isString(value) && value.endsWith('px')) || isNumber(value)
-
-// example 1%
-export const isPercent = (value: unknown): value is string => isString(value) && value.endsWith('%')
-
-// example 1vw
-export const isVw = (value: unknown): value is string => isString(value) && value.endsWith('vw')
-
-// example 1vh
-export const isVh = (value: unknown): value is string => isString(value) && value.endsWith('vh')
-
-// example return 1
-export const toPxNum = (value: unknown): number => {
-  if (isNumber(value)) {
-    return value
-  }
-
-  if (isPx(value)) {
-    return +(value as string).replace('px', '')
-  }
-
-  if (isVw(value)) {
-    return (+(value as string).replace('vw', '') * window.innerWidth) / 100
-  }
-
-  if (isVh(value)) {
-    return (+(value as string).replace('vh', '') * window.innerHeight) / 100
-  }
-
-  if (isRem(value)) {
-    const num = +(value as string).replace('rem', '')
-    const rootFontSize = window.getComputedStyle(document.documentElement).fontSize
-
-    return num * parseFloat(rootFontSize)
-  }
-
-  if (isString(value)) {
-    return toNumber(value)
-  }
-
-  // % and other
-  return 0
-}
-
-// example return 1px 1% 1vw 1vh 1rem null
-export const toSizeUnit = (value: unknown) => {
-  if (value == null) {
-    return undefined
-  }
-
-  if (isPercent(value) || isVw(value) || isVh(value) || isRem(value)) {
-    return value
-  }
-
-  return `${toPxNum(value)}px`
-}
-
-export function formatStyleVars(styleVars: StyleVars | null) {
-  return Object.entries(styleVars ?? {}).reduce((styles, [key, value]) => {
-    const cssVar = key.startsWith('--') ? key : `--${kebabCase(key)}`
-    styles[cssVar] = value
-
-    return styles
-  }, {} as StyleVars)
-}
-
-export function doubleRaf() {
-  return new Promise((resolve) => {
-    requestAnimationFrame(() => {
-      requestAnimationFrame(resolve)
-    })
-  })
-}
-
-export function supportTouch() {
-  const inBrowser = typeof window !== 'undefined'
-  return inBrowser && 'ontouchstart' in window
-}
-
-export const multiplySizeUnit = (value: unknown, quantity = 1) => {
-  if (value == null) {
-    return undefined
-  }
-
-  const legalSize = toSizeUnit(value) as string
-
-  const unit = legalSize.match(/(vh|%|rem|px|vw)$/)![0]
-
-  return `${parseFloat(legalSize) * quantity}${unit}`
-}

package/site/mobile/components/app-bar/AppBar.vue

@@ -1,65 +0,0 @@
-<template>
-  <div
-    :class="classes(n(), [elevation, 'var-site-elevation--3'])"
-    :style="{
-      background: color,
-      color: textColor,
-    }"
-  >
-    <div :class="n('left')">
-      <slot name="left" />
-      <div :class="n('title')" :style="{ paddingLeft }" v-if="titlePosition === 'left'">
-        <slot>{{ title }}</slot>
-      </div>
-    </div>
-
-    <div :class="n('title')" v-if="titlePosition === 'center'">
-      <slot>{{ title }}</slot>
-    </div>
-
-    <div :class="n('right')">
-      <div :class="n('title')" :style="{ paddingRight }" v-if="titlePosition === 'right'">
-        <slot>{{ title }}</slot>
-      </div>
-      <slot name="right" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, Ref, onMounted, onUpdated } from 'vue'
-import { props } from './props'
-import { createNamespace } from '../../../components/utils/components'
-
-const { n, classes } = createNamespace('app-bar')
-
-export default defineComponent({
-  name: 'VarAppBar',
-  props,
-  setup(props, { slots }) {
-    const paddingLeft: Ref<number | undefined> = ref()
-    const paddingRight: Ref<number | undefined> = ref()
-
-    const computePadding = () => {
-      paddingLeft.value = slots.left ? 0 : undefined
-      paddingRight.value = slots.right ? 0 : undefined
-    }
-
-    onMounted(computePadding)
-    onUpdated(computePadding)
-
-    return {
-      n,
-      classes,
-      paddingLeft,
-      paddingRight,
-    }
-  },
-})
-</script>
-
-<style lang="less">
-@import '../../../components/styles/common';
-@import '../../../components/styles/elevation';
-@import './appBar';
-</style>

package/site/mobile/components/app-bar/appBar.less

@@ -1,57 +0,0 @@
-@site-app-bar-color: var(--site-color-primary);
-@site-app-bar-height: 54px;
-@site-app-bar-text-color: #fff;
-@site-app-bar-title-padding: 0 12px;
-@site-app-bar-left-gap: 6px;
-@site-app-bar-right-gap: 6px;
-
-:root {
-  --site-app-bar-color: @site-app-bar-color;
-  --site-app-bar-title-padding: @site-app-bar-title-padding;
-  --site-app-bar-text-color: #fff;
-  --site-app-bar-height: @site-app-bar-height;
-  --site-app-bar-left-gap: @site-app-bar-left-gap;
-  --site-app-bar-right-gap: @site-app-bar-right-gap;
-}
-
-.var-site-app-bar {
-  position: relative;
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-  height: var(--site-app-bar-height);
-  background: var(--site-app-bar-color);
-  color: var(--site-app-bar-text-color);
-  transition: background-color 0.25s;
-
-  &__title {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    padding: var(--site-app-bar-title-padding);
-  }
-
-  &__left,
-  &__right {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    z-index: 2;
-  }
-
-  &__left {
-    position: absolute;
-    top: 0;
-    left: var(--site-app-bar-left-gap);
-  }
-
-  &__right {
-    position: absolute;
-    top: 0;
-    right: var(--site-app-bar-right-gap);
-  }
-}

package/site/mobile/components/app-bar/index.ts

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

package/site/mobile/components/app-bar/props.ts

@@ -1,25 +0,0 @@
-export function positionValidator(position: string): boolean {
-  const validPositions = ['left', 'center', 'right']
-  return validPositions.includes(position)
-}
-
-export const props = {
-  color: {
-    type: String,
-  },
-  textColor: {
-    type: String,
-  },
-  title: {
-    type: String,
-  },
-  titlePosition: {
-    type: String,
-    default: 'left',
-    validator: positionValidator,
-  },
-  elevation: {
-    type: Boolean,
-    default: true,
-  },
-}

package/site/pc/components/AnimationBox.vue

@@ -1,62 +0,0 @@
-<script lang="ts">
-import { defineComponent, onMounted, onUnmounted, ref, useAttrs } from 'vue'
-import { animationBoxData, animationEl, animationElClientRect, isMountedCount } from '../floating'
-
-export default defineComponent({
-  name: 'AnimationBox',
-  setup() {
-    const varletLogoAnimationRef = ref<HTMLElement>()
-    const domObserve = new MutationObserver(_onDomChanged)
-    animationBoxData.attrs = useAttrs()
-
-    onMounted(() => {
-      animationEl.value = varletLogoAnimationRef.value
-      varletLogoAnimationRef.value && domObserve.observe(varletLogoAnimationRef.value, { childList: true })
-
-
-      isMountedCount.value <= 2 && (isMountedCount.value += 1)
-    })
-
-    function _onDomChanged(mutations: MutationRecord[]) {
-      if (!mutations.length || !varletLogoAnimationRef.value) return;
-      const normal = animationEl.value?.getBoundingClientRect()
-      const hasFloat: boolean = _onGetNodePosition(varletLogoAnimationRef.value);
-
-      animationElClientRect.value = hasFloat ? normal : {
-        top: (animationEl.value?.getBoundingClientRect().top || 0) + window.scrollY,
-        left: (animationEl.value?.getBoundingClientRect().left || 0),
-        width: animationEl.value?.getBoundingClientRect().width || 0,
-        height: animationEl.value?.getBoundingClientRect().height || 0,
-      }
-    }
-
-    function _onGetNodePosition(node: Element, stopNode = document.body): boolean {
-      const css = window.getComputedStyle(node, null);
-      if (css.position === 'fixed') {
-        return true
-      }
-      if (node === stopNode) {
-        return false
-      }
-
-      return _onGetNodePosition(node.parentElement || document.body)
-    }
-
-    onUnmounted(() => {
-      domObserve.disconnect()
-      varletLogoAnimationRef.value = undefined
-      animationEl.value = undefined
-      animationElClientRect.value = undefined
-    })
-
-    return {
-      varletLogoAnimationRef,
-    }
-  },
-})
-</script>
-
-<template>
-  <div ref="varletLogoAnimationRef"></div>
-</template>
-

package/site/pc/components/LogoAnimation.vue

@@ -1,119 +0,0 @@
-<script lang="ts">
-import config from '@config'
-import { get } from 'lodash-es'
-import { computed, defineComponent, onMounted, onBeforeUnmount, ref, watch, nextTick } from 'vue'
-import { animationBoxData, animationEl, animationElClientRect, isMountedCount } from '../floating'
-
-import type { Ref, StyleValue } from 'vue'
-import type { Rect } from '../floating'
-
-export default defineComponent({
-  name: 'LogoAnimation',
-  setup() {
-    const logo: Ref<string> = get(config, 'logo')
-    const proxyRect: Ref<Rect | undefined> = ref<Rect>()
-    const floatingState: Ref<boolean> = ref<boolean>(false)
-
-    watch(animationElClientRect, async (newClientRect) => {
-      if (newClientRect) {
-        isMountedCount.value > 1 && (floatingState.value = true)
-
-        proxyRect.value = newClientRect
-      }
-    })
-
-    const styles: Ref<StyleValue | undefined> = computed(() => ({
-      width: `${proxyRect.value?.width}px`,
-      height: `${proxyRect.value?.height}px`,
-      top: `${proxyRect.value?.top}px`,
-      left: `${proxyRect.value?.left}px`,
-    }))
-
-    onMounted(() => {
-      window.addEventListener('resize', resetPosition, false)
-    })
-
-    onBeforeUnmount(() => {
-      resetTimer && clearTimeout(resetTimer)
-      window.removeEventListener('resize', resetPosition)
-    })
-
-    const land = () => {
-      floatingState.value = false
-    }
-
-    let resetTimer: number
-
-    const resetPosition = async () => {
-      if (floatingState.value) {
-        floatingState.value = false
-        await nextTick()
-      }
-      clearTimeout(resetTimer)
-
-      const newBRect = animationEl.value?.getBoundingClientRect()
-      if (newBRect) {
-        resetTimer = window.setTimeout(() => {
-          proxyRect.value = newBRect
-        }, 200)
-      }
-    }
-
-    return {
-      logo,
-      animationBoxData,
-      styles,
-      animationEl,
-      floatingState,
-      land,
-    }
-  },
-})
-</script>
-
-<template>
-  <Teleport :to="animationEl || 'body'">
-    <img 
-      v-if="logo && animationEl"
-      v-bind="animationBoxData.attrs" 
-      :class="{ 'varlet-cli-logo-position': !animationEl, 'varlet-cli-logo-show': !floatingState }" 
-      :style="styles" 
-      :src="logo" 
-      class="varlet-cli-logo-entity"
-      alt="logo" 
-    />
-  </Teleport>
-  <img 
-    v-if="logo && animationEl"
-    v-bind="animationBoxData.attrs" 
-    :class="{ 'varlet-cli-logo-show': floatingState }" 
-    :style="styles" 
-    :src="logo" 
-    @transitionend="land" 
-    class="varlet-cli-logo-entity varlet-cli-logo-position varlet-cli-logo-transition"
-    alt="logo"
-  />
-</template>
-
-<style lang="less">
-.varlet-cli-logo-transition {
-  width: 100%;
-  height: 100%;
-}
-
-.varlet-cli-logo-entity {
-  z-index: 10;
-  pointer-events: none;
-  opacity: 0;
-}
-
-.varlet-cli-logo-position {
-  position: fixed;
-  transition: 0.5s ease-in-out;
-  transition-property: left, top, height, width;
-}
-
-.varlet-cli-logo-show {
-  opacity: 1;
-}
-</style>