@varlet/cli 1.27.20 → 2.0.0-alpha.1663499244572

package/site/components/ripple/ripple.less

@@ -1,17 +1,20 @@
-@site-ripple-cubic-bezier: cubic-bezier(0.68, 0.01, 0.62, 0.6);
-
-:root {
-  --site-ripple-cubic-bezier: @site-ripple-cubic-bezier;
-}
-
-.var-site-ripple {
-  position: absolute;
-  transition: transform 0.2s var(--site-ripple-cubic-bezier), opacity 0.14s linear;
-  top: 0;
-  left: 0;
-  border-radius: 50%;
-  opacity: 0;
-  will-change: transform, opacity;
-  pointer-events: none;
-  z-index: 100;
-}
+@site-ripple-cubic-bezier: cubic-bezier(0.68, 0.01, 0.62, 0.6);
+@site-ripple-color: currentColor;
+
+:root {
+  --site-ripple-cubic-bezier: @site-ripple-cubic-bezier;
+  --site-ripple-color: @site-ripple-color;
+}
+
+.var-site-ripple {
+  position: absolute;
+  transition: transform 0.2s var(--site-ripple-cubic-bezier), opacity 0.14s linear;
+  top: 0;
+  left: 0;
+  border-radius: 50%;
+  opacity: 0;
+  will-change: transform, opacity;
+  pointer-events: none;
+  z-index: 100;
+  background-color: var(--site-ripple-color);
+}

package/site/components/snackbar/Snackbar.vue

@@ -1,38 +1,41 @@
-<template>
-  <teleport :to="teleport" :disabled="disabled">
-    <transition name="var-site-snackbar-fade" @after-enter="onOpened" @after-leave="onClosed">
-      <var-site-snackbar-core v-bind="$props" class="var-site-snackbar-transition">
-        <slot>{{ content }}</slot>
-        <template #action>
-          <slot name="action" />
-        </template>
-      </var-site-snackbar-core>
-    </transition>
-  </teleport>
-</template>
-
-<script>
-import VarSiteSnackbarCore from './core'
-import { defineComponent } from 'vue'
-import { useTeleport } from '../utils/components'
-import { props } from './props'
-
-export default defineComponent({
-  name: 'VarSiteSnackbar',
-  components: {
-    VarSiteSnackbarCore,
-  },
-  props,
-  setup() {
-    const { disabled } = useTeleport()
-
-    return {
-      disabled,
-    }
-  },
-})
-</script>
-
-<style lang="less">
-@import '../styles/common';
-</style>
+<template>
+  <teleport :to="teleport" :disabled="disabled">
+    <transition :name="`${n()}-fade`" @after-enter="onOpened" @after-leave="onClosed">
+      <var-snackbar-core v-bind="$props" :class="n('transition')">
+        <slot>{{ content }}</slot>
+        <template #action>
+          <slot name="action" />
+        </template>
+      </var-snackbar-core>
+    </transition>
+  </teleport>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import VarSnackbarCore from './core'
+import { createNamespace, useTeleport } from '../utils/components'
+import { props } from './props'
+
+const { n } = createNamespace('snackbar')
+
+export default defineComponent({
+  name: 'VarSnackbar',
+  components: {
+    VarSnackbarCore,
+  },
+  props,
+  setup() {
+    const { disabled } = useTeleport()
+
+    return {
+      n,
+      disabled,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+</style>

package/site/components/snackbar/core.vue

@@ -1,117 +1,132 @@
-<template>
-  <div class="var-site-snackbar" :style="{ pointerEvents: isForbidClick ? 'auto' : 'none', zIndex }" v-show="show">
-    <div :class="snackbarClass" :style="{ zIndex }">
-      <div class="var-site-snackbar__content" :class="[contentClass]">
-        <slot>{{ content }}</slot>
-      </div>
-      <div class="var-site-snackbar__action">
-        <var-site-icon v-if="iconName" :name="iconName" />
-        <var-site-loading v-if="type === 'loading'" :type="loadingType" :size="loadingSize" />
-        <slot name="action" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, watch, ref, onMounted, computed } from 'vue'
-import VarSiteLoading from '../loading'
-import VarSiteIcon from '../icon'
-import { useZIndex } from '../context/zIndex'
-import { props } from './props'
-import { useLock } from '../context/lock'
-import { SNACKBAR_TYPE } from './index'
-import type { Ref, ComputedRef } from 'vue'
-import type { SnackbarType } from './index'
-
-const ICON_TYPE_DICT: Record<SnackbarType, string> = {
-  success: 'checkbox-marked-circle',
-  warning: 'warning',
-  info: 'information',
-  error: 'error',
-  loading: '',
-}
-
-export default defineComponent({
-  name: 'VarSiteSnackbarCore',
-  components: {
-    VarSiteLoading,
-    VarSiteIcon,
-  },
-  props,
-  setup(props) {
-    const timer: Ref = ref(null)
-    const { zIndex } = useZIndex(() => props.show, 1)
-
-    useLock(props, 'show', 'lockScroll')
-
-    const snackbarClass: ComputedRef<string> = computed(() => {
-      const { position, vertical, type } = props
-
-      const baseClass = `var-site-snackbar__wrapper var-site-snackbar__wrapper-${position} var-site-elevation--4`
-      const verticalClass = vertical ? ' var-site-snackbar__vertical' : ''
-      const typeClass = type && SNACKBAR_TYPE.includes(type) ? ` var-site-snackbar__wrapper-${type}` : ''
-
-      return `${baseClass}${verticalClass}${typeClass}`
-    })
-
-    const isForbidClick: ComputedRef<boolean> = computed(() => props.type === 'loading' || props.forbidClick)
-
-    const iconName: ComputedRef<string> = computed(() => {
-      if (!props.type) return ''
-
-      return ICON_TYPE_DICT[props.type]
-    })
-
-    const updateAfterDuration = () => {
-      timer.value = setTimeout(() => {
-        props.type !== 'loading' && props['onUpdate:show']?.(false)
-      }, props.duration)
-    }
-
-    watch(
-      () => props.show,
-      (show) => {
-        if (show) {
-          props.onOpen?.()
-          updateAfterDuration()
-        } else if (show === false) {
-          clearTimeout(timer.value)
-          props.onClose?.()
-        }
-      }
-    )
-
-    watch(
-      () => props._update,
-      () => {
-        clearTimeout(timer.value)
-        updateAfterDuration()
-      }
-    )
-
-    onMounted(() => {
-      if (props.show) {
-        props.onOpen?.()
-        updateAfterDuration()
-      }
-    })
-
-    return {
-      zIndex,
-      snackbarClass,
-      iconName,
-      isForbidClick,
-    }
-  },
-})
-</script>
-
-<style lang="less">
-@import '../styles/common';
-@import '../styles/elevation';
-@import '../loading/loading';
-@import '../button/button';
-@import '../icon/icon';
-@import './snackbar';
-</style>
+<template>
+  <div :class="n()" :style="{ pointerEvents: isForbidClick ? 'auto' : 'none', zIndex }" v-show="show">
+    <div
+      :class="
+        classes(
+          n('wrapper'),
+          n(`wrapper-${position}`),
+          'var-site-elevation--4',
+          [vertical, n('vertical')],
+          [type && SNACKBAR_TYPE.includes(type), n(`wrapper-${type}`)]
+        )
+      "
+      :style="{ zIndex }"
+    >
+      <div :class="[n('content'), contentClass]">
+        <slot>{{ content }}</slot>
+      </div>
+      <div :class="n('action')">
+        <var-icon v-if="iconName" :name="iconName" />
+        <var-loading
+          v-if="type === 'loading'"
+          :type="loadingType"
+          :size="loadingSize"
+          :color="loadingColor"
+          :radius="loadingRadius"
+        />
+        <slot name="action" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, watch, ref, onMounted, computed } from 'vue'
+import VarLoading from '../loading'
+import VarIcon from '../icon'
+import { useZIndex } from '../context/zIndex'
+import { props } from './props'
+import { useLock } from '../context/lock'
+import { SNACKBAR_TYPE } from './index'
+import type { Ref, ComputedRef } from 'vue'
+import type { SnackbarType } from './index'
+import { createNamespace } from '../utils/components'
+
+const { n, classes } = createNamespace('snackbar')
+
+const ICON_TYPE_DICT: Record<SnackbarType, string> = {
+  success: 'checkbox-marked-circle',
+  warning: 'warning',
+  info: 'information',
+  error: 'error',
+  loading: '',
+}
+
+export default defineComponent({
+  name: 'VarSiteSnackbarCore',
+  components: {
+    VarLoading,
+    VarIcon,
+  },
+  props,
+  setup(props) {
+    const timer: Ref = ref(null)
+    const { zIndex } = useZIndex(() => props.show, 1)
+
+    useLock(
+      () => props.show,
+      () => props.lockScroll
+    )
+
+    const isForbidClick: ComputedRef<boolean> = computed(() => props.type === 'loading' || props.forbidClick)
+
+    const iconName: ComputedRef<string> = computed(() => {
+      if (!props.type) return ''
+
+      return ICON_TYPE_DICT[props.type]
+    })
+
+    const updateAfterDuration = () => {
+      timer.value = setTimeout(() => {
+        props.type !== 'loading' && props['onUpdate:show']?.(false)
+      }, props.duration)
+    }
+
+    watch(
+      () => props.show,
+      (show) => {
+        if (show) {
+          props.onOpen?.()
+          updateAfterDuration()
+        } else if (show === false) {
+          clearTimeout(timer.value)
+          props.onClose?.()
+        }
+      }
+    )
+
+    watch(
+      () => props._update,
+      () => {
+        clearTimeout(timer.value)
+        updateAfterDuration()
+      }
+    )
+
+    onMounted(() => {
+      if (props.show) {
+        props.onOpen?.()
+        updateAfterDuration()
+      }
+    })
+
+    return {
+      SNACKBAR_TYPE,
+      n,
+      classes,
+      zIndex,
+      iconName,
+      isForbidClick,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import '../styles/elevation';
+@import '../loading/loading';
+@import '../button/button';
+@import '../icon/icon';
+@import './snackbar';
+</style>