@varlet/cli 1.27.20 → 2.0.0-alpha.1663499244572

package/site/components/icon/Icon.vue

@@ -1,68 +1,75 @@
-<template>
-  <component
-    class="var-site-icon"
-    :is="isURL(name) ? 'img' : 'i'"
-    :class="[
-      `${namespace}--set`,
-      isURL(name) ? 'var-site-icon__image' : `${namespace}-${nextName}`,
-      shrinking ? 'var-site-icon--shrinking' : null,
-    ]"
-    :style="{
-      color,
-      transition: `all ${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 { toSizeUnit } from '../utils/elements'
-import { props } from './props'
-import type { Ref } from 'vue'
-
-export default defineComponent({
-  name: 'VarSiteIcon',
-  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 {
-      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,55 +1,84 @@
-<template>
-  <div class="var-site--box var-site-loading">
-    <div class="var-site-loading__circle" v-if="type === 'circle'">
-      <span
-        class="var-site-loading__circle-block"
-        :style="{
-          width: radius * 2 + 'px',
-          height: radius * 2 + 'px',
-        }"
-      >
-        <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="`var-site-loading__${key} var-site-loading__${key}-${size}`" v-if="type === key">
-        <div
-          v-for="num in nums"
-          :key="num + key"
-          :style="{ backgroundColor: color }"
-          :class="`var-site-loading__${key}-item var-site-loading__${key}-item-${size}`"
-        ></div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { props } from './props'
-
-export default defineComponent({
-  name: 'VarSiteLoading',
-  props,
-  setup() {
-    const loadingTypeDict = {
-      wave: 5,
-      cube: 4,
-      rect: 8,
-      disappear: 3,
-    }
-
-    return {
-      loadingTypeDict,
-    }
-  },
-})
-</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>

package/site/components/loading/index.ts

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