@varlet/cli 1.27.20 → 2.0.0-alpha.1663499244572

package/site/components/styles/elevation.less

@@ -1,126 +1,126 @@
-.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);
-  }
-}
+.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);
+  }
+}

package/site/components/styles/var.less

@@ -1,27 +1,27 @@
-// 文字
-@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);
+// 文字
+@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,69 +1,117 @@
-import { createApp, h, onActivated, onDeactivated, ref, Ref } from 'vue'
-import type { Component } from 'vue'
-
-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,
-  }
-}
+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<F extends (...arg: any) => any, P extends Parameters<F>>(
+  fn?: F | null,
+  ...arg: P
+): ReturnType<F> | 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)
+  })
+}