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

package/site/components/context/lock.ts

@@ -1,92 +1,92 @@
-import { watch, onBeforeMount, onUnmounted, onDeactivated, onActivated, getCurrentInstance } from 'vue'
-import type { ComponentInternalInstance } from 'vue'
-import context from '.'
-
-export function resolveLock() {
-  const lockCounts: number = Object.keys(context.locks).length
-  lockCounts <= 0 ? document.body.classList.remove('var-site--lock') : document.body.classList.add('var-site--lock')
-}
-
-export function addLock(uid: number) {
-  context.locks[uid] = 1
-  resolveLock()
-}
-
-export function releaseLock(uid: number) {
-  delete context.locks[uid]
-  resolveLock()
-}
-
-export function useLock(source: any, useSource?: any) {
-  const { uid } = getCurrentInstance() as ComponentInternalInstance
-
-  if (useSource) {
-    watch(useSource, (newValue: boolean) => {
-      if (newValue === false) {
-        // 改变为禁用状态 组件解锁
-        releaseLock(uid)
-      } else if (newValue === true && source() === true) {
-        // 改变为启用状态 并且popup处于开启状态 组件加锁
-        addLock(uid)
-      }
-    })
-  }
-
-  watch(source, (newValue: boolean) => {
-    if (useSource && useSource() === false) {
-      return
-    }
-
-    if (newValue === true) {
-      // popup开启 组件加锁
-      addLock(uid)
-    } else {
-      // popup关闭 组件解锁
-      releaseLock(uid)
-    }
-  })
-
-  onBeforeMount(() => {
-    if (useSource && useSource() === false) {
-      return
-    }
-
-    if (source() === true) {
-      // popup处于开启状态 组件挂载 组件加锁
-      addLock(uid)
-    }
-  })
-
-  onUnmounted(() => {
-    if (useSource && useSource() === false) {
-      return
-    }
-
-    if (source() === true) {
-      // popup处于开启状态 组件卸载 组件解锁
-      releaseLock(uid)
-    }
-  })
-
-  onActivated(() => {
-    if (useSource && useSource() === false) {
-      return
-    }
-
-    if (source() === true) {
-      // popup处于开启状态 组件处于keepalive前台 组件加锁
-      addLock(uid)
-    }
-  })
-
-  onDeactivated(() => {
-    if (useSource && useSource() === false) {
-      return
-    }
-
-    if (source() === true) {
-      // popup处于开启状态 组件处于keepalive后台 组件解锁
-      releaseLock(uid)
-    }
-  })
-}
+import { watch, onBeforeMount, onUnmounted, onDeactivated, onActivated, getCurrentInstance } from 'vue'
+import type { ComponentInternalInstance } from 'vue'
+import context from '.'
+
+export function resolveLock() {
+  const lockCounts: number = Object.keys(context.locks).length
+  lockCounts <= 0 ? document.body.classList.remove('var-site--lock') : document.body.classList.add('var-site--lock')
+}
+
+export function addLock(uid: number) {
+  context.locks[uid] = 1
+  resolveLock()
+}
+
+export function releaseLock(uid: number) {
+  delete context.locks[uid]
+  resolveLock()
+}
+
+export function useLock(source: any, useSource?: any) {
+  const { uid } = getCurrentInstance() as ComponentInternalInstance
+
+  if (useSource) {
+    watch(useSource, (newValue: boolean) => {
+      if (newValue === false) {
+        // 改变为禁用状态 组件解锁
+        releaseLock(uid)
+      } else if (newValue === true && source() === true) {
+        // 改变为启用状态 并且popup处于开启状态 组件加锁
+        addLock(uid)
+      }
+    })
+  }
+
+  watch(source, (newValue: boolean) => {
+    if (useSource && useSource() === false) {
+      return
+    }
+
+    if (newValue === true) {
+      // popup开启 组件加锁
+      addLock(uid)
+    } else {
+      // popup关闭 组件解锁
+      releaseLock(uid)
+    }
+  })
+
+  onBeforeMount(() => {
+    if (useSource && useSource() === false) {
+      return
+    }
+
+    if (source() === true) {
+      // popup处于开启状态 组件挂载 组件加锁
+      addLock(uid)
+    }
+  })
+
+  onUnmounted(() => {
+    if (useSource && useSource() === false) {
+      return
+    }
+
+    if (source() === true) {
+      // popup处于开启状态 组件卸载 组件解锁
+      releaseLock(uid)
+    }
+  })
+
+  onActivated(() => {
+    if (useSource && useSource() === false) {
+      return
+    }
+
+    if (source() === true) {
+      // popup处于开启状态 组件处于keepalive前台 组件加锁
+      addLock(uid)
+    }
+  })
+
+  onDeactivated(() => {
+    if (useSource && useSource() === false) {
+      return
+    }
+
+    if (source() === true) {
+      // popup处于开启状态 组件处于keepalive后台 组件解锁
+      releaseLock(uid)
+    }
+  })
+}

package/site/components/context/zIndex.ts

@@ -1,20 +1,20 @@
-import context from './index'
-import { watch, ref } from 'vue'
-import type { Ref } from 'vue'
-
-export function useZIndex(source: any, count: number) {
-  const zIndex: Ref<number> = ref(context.zIndex)
-
-  watch(
-    source,
-    (newValue) => {
-      if (newValue) {
-        context.zIndex += count
-        zIndex.value = context.zIndex
-      }
-    },
-    { immediate: true }
-  )
-
-  return { zIndex }
-}
+import context from './index'
+import { watch, ref } from 'vue'
+import type { Ref } from 'vue'
+
+export function useZIndex(source: any, count: number) {
+  const zIndex: Ref<number> = ref(context.zIndex)
+
+  watch(
+    source,
+    (newValue) => {
+      if (newValue) {
+        context.zIndex += count
+        zIndex.value = context.zIndex
+      }
+    },
+    { immediate: true }
+  )
+
+  return { zIndex }
+}

package/site/components/icon/Icon.vue

@@ -1,75 +1,75 @@
-<template>
-  <component
-    :is="isURL(name) ? 'img' : 'i'"
-    :class="
-      classes(
-        n(),
-        `${namespace}--set`,
-        [isURL(name), n('image'), `${namespace}-${nextName}`],
-        [shrinking, n('--shrinking')]
-      )
-    "
-    :style="{
-      color,
-      transition: `transform ${toNumber(transition)}ms`,
-      width: isURL(name) ? toSizeUnit(size) : null,
-      height: isURL(name) ? toSizeUnit(size) : null,
-      fontSize: toSizeUnit(size),
-    }"
-    :src="isURL(name) ? nextName : null"
-    @click="onClick"
-  />
-</template>
-
-<script lang="ts">
-import { defineComponent, watch, ref, nextTick } from 'vue'
-import { isURL, toNumber } from '@varlet/shared'
-import { props } from './props'
-import { toSizeUnit } from '../utils/elements'
-import type { Ref } from 'vue'
-import { createNamespace } from '../utils/components'
-
-const { n, classes } = createNamespace('icon')
-
-export default defineComponent({
-  name: 'VarIcon',
-  props,
-  setup(props) {
-    const nextName: Ref<string | undefined> = ref('')
-    const shrinking: Ref<boolean> = ref(false)
-
-    const handleNameChange = async (newName: string | undefined, oldName: string | undefined) => {
-      const { transition } = props
-
-      if (oldName == null || toNumber(transition) === 0) {
-        nextName.value = newName
-        return
-      }
-
-      shrinking.value = true
-      await nextTick()
-      setTimeout(() => {
-        oldName != null && (nextName.value = newName)
-        shrinking.value = false
-      }, toNumber(transition))
-    }
-
-    watch(() => props.name, handleNameChange, { immediate: true })
-
-    return {
-      n,
-      classes,
-      nextName,
-      shrinking,
-      isURL,
-      toNumber,
-      toSizeUnit,
-    }
-  },
-})
-</script>
-
-<style lang="less">
-@import '../styles/common';
-@import './icon';
-</style>
+<template>
+  <component
+    :is="isURL(name) ? 'img' : 'i'"
+    :class="
+      classes(
+        n(),
+        `${namespace}--set`,
+        [isURL(name), n('image'), `${namespace}-${nextName}`],
+        [shrinking, n('--shrinking')]
+      )
+    "
+    :style="{
+      color,
+      transition: `transform ${toNumber(transition)}ms`,
+      width: isURL(name) ? toSizeUnit(size) : null,
+      height: isURL(name) ? toSizeUnit(size) : null,
+      fontSize: toSizeUnit(size),
+    }"
+    :src="isURL(name) ? nextName : null"
+    @click="onClick"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, watch, ref, nextTick } from 'vue'
+import { isURL, toNumber } from '@varlet/shared'
+import { props } from './props'
+import { toSizeUnit } from '../utils/elements'
+import type { Ref } from 'vue'
+import { createNamespace } from '../utils/components'
+
+const { n, classes } = createNamespace('icon')
+
+export default defineComponent({
+  name: 'VarIcon',
+  props,
+  setup(props) {
+    const nextName: Ref<string | undefined> = ref('')
+    const shrinking: Ref<boolean> = ref(false)
+
+    const handleNameChange = async (newName: string | undefined, oldName: string | undefined) => {
+      const { transition } = props
+
+      if (oldName == null || toNumber(transition) === 0) {
+        nextName.value = newName
+        return
+      }
+
+      shrinking.value = true
+      await nextTick()
+      setTimeout(() => {
+        oldName != null && (nextName.value = newName)
+        shrinking.value = false
+      }, toNumber(transition))
+    }
+
+    watch(() => props.name, handleNameChange, { immediate: true })
+
+    return {
+      n,
+      classes,
+      nextName,
+      shrinking,
+      isURL,
+      toNumber,
+      toSizeUnit,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import './icon';
+</style>

package/site/components/icon/icon.less

@@ -1,26 +1,26 @@
-@import '@varlet/icons/dist/css/varlet-icons.less';
-
-@site-icon-size: 20px;
-
-:root {
-  --site-icon-size: @site-icon-size;
-}
-
-.var-site-icon {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  font-size: var(--site-icon-size);
-  color: inherit;
-  vertical-align: bottom;
-
-  &--shrinking {
-    transform: scale(0);
-  }
-
-  &__image {
-    width: var(--site-icon-size);
-    height: var(--site-icon-size);
-    object-fit: cover;
-  }
-}
+@import '@varlet/icons/dist/css/varlet-icons.less';
+
+@site-icon-size: 20px;
+
+:root {
+  --site-icon-size: @site-icon-size;
+}
+
+.var-site-icon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--site-icon-size);
+  color: inherit;
+  vertical-align: bottom;
+
+  &--shrinking {
+    transform: scale(0);
+  }
+
+  &__image {
+    width: var(--site-icon-size);
+    height: var(--site-icon-size);
+    object-fit: cover;
+  }
+}

package/site/components/icon/index.ts

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

package/site/components/icon/props.ts

@@ -1,24 +1,24 @@
-import type { PropType } from 'vue'
-
-export const props = {
-  name: {
-    type: String,
-  },
-  size: {
-    type: [Number, String],
-  },
-  color: {
-    type: String,
-  },
-  namespace: {
-    type: String,
-    default: 'var-icon',
-  },
-  transition: {
-    type: [Number, String],
-    default: 0,
-  },
-  onClick: {
-    type: Function as PropType<(event: Event) => void>,
-  },
-}
+import type { PropType } from 'vue'
+
+export const props = {
+  name: {
+    type: String,
+  },
+  size: {
+    type: [Number, String],
+  },
+  color: {
+    type: String,
+  },
+  namespace: {
+    type: String,
+    default: 'var-icon',
+  },
+  transition: {
+    type: [Number, String],
+    default: 0,
+  },
+  onClick: {
+    type: Function as PropType<(event: Event) => void>,
+  },
+}

package/site/components/loading/Loading.vue

@@ -1,84 +1,84 @@
-<template>
-  <div :class="n()">
-    <div :class="classes(n('content'), [loading, n('content--active')])" v-if="$slots.default">
-      <slot />
-      <div :class="n('content-mask')" v-if="loading"></div>
-    </div>
-    <div :class="classes('var-site--box', n('body'), [$slots.default, n('inside')])" v-if="isShow">
-      <div :class="n('circle')" v-if="type === 'circle'">
-        <span
-          :class="classes(n('circle-block'), n(`circle-block--${size}`))"
-          :style="{
-            width: multiplySizeUnit(radius, 2),
-            height: multiplySizeUnit(radius, 2),
-            color,
-          }"
-        >
-          <svg viewBox="25 25 50 50">
-            <circle cx="50" cy="50" r="20" fill="none"></circle>
-          </svg>
-        </span>
-      </div>
-
-      <template v-for="(nums, key) in loadingTypeDict" :key="key">
-        <div :class="classes(n(key), n(`${key}--${size}`))" v-if="type === key">
-          <div
-            v-for="num in nums"
-            :key="num + key"
-            :style="{ backgroundColor: color }"
-            :class="classes(n(`${key}-item`), n(`${key}-item--${size}`))"
-          ></div>
-        </div>
-      </template>
-      <div
-        :class="classes(n('description'), n(`description--${size}`))"
-        :style="{ color }"
-        v-if="$slots.description || description"
-      >
-        <slot name="description">{{ description }}</slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent } from 'vue'
-import { props } from './props'
-import { createNamespace, call } from '../utils/components'
-import { multiplySizeUnit } from '../utils/elements'
-import type { ComputedRef } from 'vue'
-
-const { n, classes } = createNamespace('loading')
-
-export default defineComponent({
-  name: 'VarLoading',
-  props,
-  setup(props, { slots }) {
-    const loadingTypeDict = {
-      wave: 5,
-      cube: 4,
-      rect: 8,
-      disappear: 3,
-    }
-
-    const isShow: ComputedRef<boolean> = computed(() => {
-      if (!call(slots.default)) return true
-
-      return props.loading
-    })
-
-    return {
-      n,
-      classes,
-      multiplySizeUnit,
-      loadingTypeDict,
-      isShow,
-    }
-  },
-})
-</script>
-
-<style lang="less">
-@import '../styles/common';
-@import './loading';
-</style>
+<template>
+  <div :class="n()">
+    <div :class="classes(n('content'), [loading, n('content--active')])" v-if="$slots.default">
+      <slot />
+      <div :class="n('content-mask')" v-if="loading"></div>
+    </div>
+    <div :class="classes('var-site--box', n('body'), [$slots.default, n('inside')])" v-if="isShow">
+      <div :class="n('circle')" v-if="type === 'circle'">
+        <span
+          :class="classes(n('circle-block'), n(`circle-block--${size}`))"
+          :style="{
+            width: multiplySizeUnit(radius, 2),
+            height: multiplySizeUnit(radius, 2),
+            color,
+          }"
+        >
+          <svg viewBox="25 25 50 50">
+            <circle cx="50" cy="50" r="20" fill="none"></circle>
+          </svg>
+        </span>
+      </div>
+
+      <template v-for="(nums, key) in loadingTypeDict" :key="key">
+        <div :class="classes(n(key), n(`${key}--${size}`))" v-if="type === key">
+          <div
+            v-for="num in nums"
+            :key="num + key"
+            :style="{ backgroundColor: color }"
+            :class="classes(n(`${key}-item`), n(`${key}-item--${size}`))"
+          ></div>
+        </div>
+      </template>
+      <div
+        :class="classes(n('description'), n(`description--${size}`))"
+        :style="{ color }"
+        v-if="$slots.description || description"
+      >
+        <slot name="description">{{ description }}</slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
+import { props } from './props'
+import { createNamespace, call } from '../utils/components'
+import { multiplySizeUnit } from '../utils/elements'
+import type { ComputedRef } from 'vue'
+
+const { n, classes } = createNamespace('loading')
+
+export default defineComponent({
+  name: 'VarLoading',
+  props,
+  setup(props, { slots }) {
+    const loadingTypeDict = {
+      wave: 5,
+      cube: 4,
+      rect: 8,
+      disappear: 3,
+    }
+
+    const isShow: ComputedRef<boolean> = computed(() => {
+      if (!call(slots.default)) return true
+
+      return props.loading
+    })
+
+    return {
+      n,
+      classes,
+      multiplySizeUnit,
+      loadingTypeDict,
+      isShow,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import './loading';
+</style>