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

package/site/components/loading/props.ts

@@ -1,42 +1,42 @@
-import type { PropType } from 'vue'
-
-export type LoadingType = 'circle' | 'wave' | 'cube' | 'rect' | 'disappear'
-
-export type LoadingSize = 'normal' | 'mini' | 'small' | 'large'
-
-export function typeValidator(type: string): boolean {
-  return ['circle', 'wave', 'cube', 'rect', 'disappear'].includes(type)
-}
-
-export function sizeValidator(size: string): boolean {
-  return ['normal', 'mini', 'small', 'large'].includes(size)
-}
-
-export const props = {
-  // loading类型
-  type: {
-    type: String as PropType<LoadingType>,
-    default: 'circle',
-    validator: typeValidator,
-  },
-  radius: {
-    type: [String, Number],
-  },
-  // loading尺寸
-  size: {
-    type: String as PropType<LoadingSize>,
-    default: 'normal',
-    validator: sizeValidator,
-  },
-  // loading颜色
-  color: {
-    type: String,
-  },
-  description: {
-    type: String,
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-}
+import type { PropType } from 'vue'
+
+export type LoadingType = 'circle' | 'wave' | 'cube' | 'rect' | 'disappear'
+
+export type LoadingSize = 'normal' | 'mini' | 'small' | 'large'
+
+export function typeValidator(type: string): boolean {
+  return ['circle', 'wave', 'cube', 'rect', 'disappear'].includes(type)
+}
+
+export function sizeValidator(size: string): boolean {
+  return ['normal', 'mini', 'small', 'large'].includes(size)
+}
+
+export const props = {
+  // loading类型
+  type: {
+    type: String as PropType<LoadingType>,
+    default: 'circle',
+    validator: typeValidator,
+  },
+  radius: {
+    type: [String, Number],
+  },
+  // loading尺寸
+  size: {
+    type: String as PropType<LoadingSize>,
+    default: 'normal',
+    validator: sizeValidator,
+  },
+  // loading颜色
+  color: {
+    type: String,
+  },
+  description: {
+    type: String,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+}

package/site/components/popup/Popup.tsx

@@ -1,102 +1,102 @@
-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()
-    }
-  },
-})
+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 +1,10 @@
-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
+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 +1,125 @@
-@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;
-  }
-}
+@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 +1,63 @@
-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>,
-  },
-}
+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>,
+  },
+}