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

package/site/components/progress/Progress.vue

@@ -1,112 +1,112 @@
-<template>
-  <div :class="n()">
-    <div :class="n('linear')" v-if="mode === 'linear'">
-      <div :class="n('linear-block')" :style="{ height: toSizeUnit(lineWidth) }" v-bind="$attrs">
-        <div :class="n('linear-background')" v-if="track" :style="{ background: trackColor }"></div>
-        <div
-          :class="classes(n('linear-certain'), [ripple, n('linear-ripple')])"
-          :style="{ background: color, width: linearProps.width }"
-        ></div>
-      </div>
-      <div :class="n('linear-label')" v-bind="$attrs" v-if="label">
-        <slot>
-          {{ linearProps.roundValue }}
-        </slot>
-      </div>
-    </div>
-
-    <div :class="n('circle')" v-if="mode === 'circle'" :style="{ width: toSizeUnit(size), height: toSizeUnit(size) }">
-      <svg :class="n('circle-svg')" :style="{ transform: `rotate(${rotate - 90}deg)` }" :viewBox="circleProps.viewBox">
-        <circle
-          v-if="track"
-          :class="n('circle-background')"
-          :cx="multiplySizeUnit(size, 0.5)"
-          :cy="multiplySizeUnit(size, 0.5)"
-          :r="circleProps.radius"
-          fill="transparent"
-          :stroke-width="toSizeUnit(lineWidth)"
-          :style="{
-            strokeDasharray: circleProps.perimeter,
-            stroke: trackColor,
-          }"
-        ></circle>
-        <circle
-          :class="n('circle-certain')"
-          :cx="multiplySizeUnit(size, 0.5)"
-          :cy="multiplySizeUnit(size, 0.5)"
-          :r="circleProps.radius"
-          fill="transparent"
-          :stroke-width="toSizeUnit(lineWidth)"
-          :style="{
-            strokeDasharray: circleProps.strokeDasharray,
-            stroke: color,
-          }"
-        ></circle>
-      </svg>
-
-      <div :class="n('circle-label')" v-if="label" v-bind="$attrs">
-        <slot>
-          {{ circleProps.roundValue }}
-        </slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, computed } from 'vue'
-import { props } from './props'
-import { toNumber } from '@varlet/shared'
-import { toSizeUnit, multiplySizeUnit, toPxNum } from '../utils/elements'
-import { createNamespace } from '../utils/components'
-
-const { n, classes } = createNamespace('progress')
-
-export default defineComponent({
-  name: 'VarProgress',
-  inheritAttrs: false,
-  props,
-  setup(props) {
-    const linearProps = computed(() => {
-      const value = toNumber(props.value)
-      const width = value > 100 ? 100 : value
-      const roundValue = value > 100 ? 100 : Math.round(value)
-
-      return {
-        width: `${width}%`,
-        roundValue: `${roundValue}%`,
-      }
-    })
-
-    const circleProps = computed(() => {
-      const { size, lineWidth, value } = props
-      const viewBox = `0 0 ${toPxNum(size)} ${toPxNum(size)}`
-      const roundValue = toNumber(value) > 100 ? 100 : Math.round(toNumber(value))
-      const radius = (toPxNum(size) - toPxNum(lineWidth)) / 2
-      const perimeter = 2 * Math.PI * radius
-      const strokeDasharray = `${(roundValue / 100) * perimeter}, ${perimeter}`
-
-      return {
-        viewBox,
-        radius,
-        strokeDasharray,
-        perimeter,
-        roundValue: `${roundValue}%`,
-      }
-    })
-    return {
-      n,
-      classes,
-      toSizeUnit,
-      multiplySizeUnit,
-      linearProps,
-      circleProps,
-    }
-  },
-})
-</script>
-
-<style lang="less">
-@import '../styles/common';
-@import './progress';
-</style>
+<template>
+  <div :class="n()">
+    <div :class="n('linear')" v-if="mode === 'linear'">
+      <div :class="n('linear-block')" :style="{ height: toSizeUnit(lineWidth) }" v-bind="$attrs">
+        <div :class="n('linear-background')" v-if="track" :style="{ background: trackColor }"></div>
+        <div
+          :class="classes(n('linear-certain'), [ripple, n('linear-ripple')])"
+          :style="{ background: color, width: linearProps.width }"
+        ></div>
+      </div>
+      <div :class="n('linear-label')" v-bind="$attrs" v-if="label">
+        <slot>
+          {{ linearProps.roundValue }}
+        </slot>
+      </div>
+    </div>
+
+    <div :class="n('circle')" v-if="mode === 'circle'" :style="{ width: toSizeUnit(size), height: toSizeUnit(size) }">
+      <svg :class="n('circle-svg')" :style="{ transform: `rotate(${rotate - 90}deg)` }" :viewBox="circleProps.viewBox">
+        <circle
+          v-if="track"
+          :class="n('circle-background')"
+          :cx="multiplySizeUnit(size, 0.5)"
+          :cy="multiplySizeUnit(size, 0.5)"
+          :r="circleProps.radius"
+          fill="transparent"
+          :stroke-width="toSizeUnit(lineWidth)"
+          :style="{
+            strokeDasharray: circleProps.perimeter,
+            stroke: trackColor,
+          }"
+        ></circle>
+        <circle
+          :class="n('circle-certain')"
+          :cx="multiplySizeUnit(size, 0.5)"
+          :cy="multiplySizeUnit(size, 0.5)"
+          :r="circleProps.radius"
+          fill="transparent"
+          :stroke-width="toSizeUnit(lineWidth)"
+          :style="{
+            strokeDasharray: circleProps.strokeDasharray,
+            stroke: color,
+          }"
+        ></circle>
+      </svg>
+
+      <div :class="n('circle-label')" v-if="label" v-bind="$attrs">
+        <slot>
+          {{ circleProps.roundValue }}
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue'
+import { props } from './props'
+import { toNumber } from '@varlet/shared'
+import { toSizeUnit, multiplySizeUnit, toPxNum } from '../utils/elements'
+import { createNamespace } from '../utils/components'
+
+const { n, classes } = createNamespace('progress')
+
+export default defineComponent({
+  name: 'VarProgress',
+  inheritAttrs: false,
+  props,
+  setup(props) {
+    const linearProps = computed(() => {
+      const value = toNumber(props.value)
+      const width = value > 100 ? 100 : value
+      const roundValue = value > 100 ? 100 : Math.round(value)
+
+      return {
+        width: `${width}%`,
+        roundValue: `${roundValue}%`,
+      }
+    })
+
+    const circleProps = computed(() => {
+      const { size, lineWidth, value } = props
+      const viewBox = `0 0 ${toPxNum(size)} ${toPxNum(size)}`
+      const roundValue = toNumber(value) > 100 ? 100 : Math.round(toNumber(value))
+      const radius = (toPxNum(size) - toPxNum(lineWidth)) / 2
+      const perimeter = 2 * Math.PI * radius
+      const strokeDasharray = `${(roundValue / 100) * perimeter}, ${perimeter}`
+
+      return {
+        viewBox,
+        radius,
+        strokeDasharray,
+        perimeter,
+        roundValue: `${roundValue}%`,
+      }
+    })
+    return {
+      n,
+      classes,
+      toSizeUnit,
+      multiplySizeUnit,
+      linearProps,
+      circleProps,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import './progress';
+</style>

package/site/components/progress/index.ts

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

package/site/components/progress/progress.less

@@ -1,101 +1,101 @@
-@site-progress-font-size: var(--site-font-size-sm);
-@site-progress-ripple-color: #fff;
-@site-progress-track-color: #d8d8d8;
-@site-progress-background: var(--color-primary);
-
-:root {
-  --site-progress-font-size: @site-progress-font-size;
-  --site-progress-ripple-color: @site-progress-ripple-color;
-  --site-progress-track-color: @site-progress-track-color;
-  --site-progress-background: @site-progress-background;
-}
-
-.var-site-progress {
-  position: relative;
-  font-size: var(--site-progress-font-size);
-
-  &__linear {
-    display: flex;
-    align-items: center;
-
-    &-block {
-      flex: 1;
-      position: relative;
-      overflow: hidden;
-      height: 4px;
-    }
-
-    &-background,
-    &-certain {
-      width: 100%;
-      height: 100%;
-    }
-
-    &-ripple {
-      &::after {
-        position: absolute;
-        width: 0;
-        background-color: var(--site-progress-ripple-color);
-        height: 100%;
-        opacity: 0;
-        animation: ripple 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-        content: '';
-      }
-    }
-
-    &-background {
-      background-color: var(--site-progress-track-color);
-    }
-
-    &-certain {
-      position: absolute;
-      background-color: var(--site-progress-background);
-      top: 0;
-      left: 0;
-      transition: all 0.2s, background-color 0.8s;
-    }
-
-    &-label {
-      margin-left: 8px;
-      flex: 0;
-    }
-
-    @keyframes ripple {
-      0% {
-        width: 0;
-        opacity: 0.1;
-      }
-      20% {
-        width: 0;
-        opacity: 0.5;
-      }
-      80% {
-        width: 100%;
-        opacity: 0;
-      }
-    }
-  }
-
-  &__circle {
-    position: relative;
-    width: 40px;
-    height: 40px;
-
-    &-background {
-      stroke: var(--site-progress-track-color);
-    }
-
-    &-certain {
-      transition: all 0.2s;
-      stroke: var(--site-progress-background);
-      position: absolute;
-    }
-
-    &-label {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
-}
+@site-progress-font-size: var(--site-font-size-sm);
+@site-progress-ripple-color: #fff;
+@site-progress-track-color: #d8d8d8;
+@site-progress-background: var(--color-primary);
+
+:root {
+  --site-progress-font-size: @site-progress-font-size;
+  --site-progress-ripple-color: @site-progress-ripple-color;
+  --site-progress-track-color: @site-progress-track-color;
+  --site-progress-background: @site-progress-background;
+}
+
+.var-site-progress {
+  position: relative;
+  font-size: var(--site-progress-font-size);
+
+  &__linear {
+    display: flex;
+    align-items: center;
+
+    &-block {
+      flex: 1;
+      position: relative;
+      overflow: hidden;
+      height: 4px;
+    }
+
+    &-background,
+    &-certain {
+      width: 100%;
+      height: 100%;
+    }
+
+    &-ripple {
+      &::after {
+        position: absolute;
+        width: 0;
+        background-color: var(--site-progress-ripple-color);
+        height: 100%;
+        opacity: 0;
+        animation: ripple 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+        content: '';
+      }
+    }
+
+    &-background {
+      background-color: var(--site-progress-track-color);
+    }
+
+    &-certain {
+      position: absolute;
+      background-color: var(--site-progress-background);
+      top: 0;
+      left: 0;
+      transition: all 0.2s, background-color 0.8s;
+    }
+
+    &-label {
+      margin-left: 8px;
+      flex: 0;
+    }
+
+    @keyframes ripple {
+      0% {
+        width: 0;
+        opacity: 0.1;
+      }
+      20% {
+        width: 0;
+        opacity: 0.5;
+      }
+      80% {
+        width: 100%;
+        opacity: 0;
+      }
+    }
+  }
+
+  &__circle {
+    position: relative;
+    width: 40px;
+    height: 40px;
+
+    &-background {
+      stroke: var(--site-progress-track-color);
+    }
+
+    &-certain {
+      transition: all 0.2s;
+      stroke: var(--site-progress-background);
+      position: absolute;
+    }
+
+    &-label {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+}

package/site/components/progress/props.ts

@@ -1,55 +1,55 @@
-function modeValidator(mode: string): boolean {
-  return ['linear', 'circle'].includes(mode)
-}
-
-export const props = {
-  // progress 模式
-  mode: {
-    type: String,
-    default: 'linear',
-    validator: modeValidator,
-  },
-  // progress 线宽
-  lineWidth: {
-    type: [Number, String],
-    default: 4,
-  },
-  // progress 颜色
-  color: {
-    type: String,
-  },
-  // progress 轨道颜色
-  trackColor: {
-    type: String,
-  },
-  // 是否添加水波纹效果
-  ripple: {
-    type: Boolean,
-    default: false,
-  },
-  // progress 值
-  value: {
-    type: [Number, String],
-    default: 0,
-  },
-  // 是否显示label
-  label: {
-    type: Boolean,
-    default: false,
-  },
-  // circle 的尺寸
-  size: {
-    type: [Number, String],
-    default: 40,
-  },
-  // circle的原点
-  rotate: {
-    type: Number,
-    default: 0,
-  },
-  // 是否显示 circle 轨道
-  track: {
-    type: Boolean,
-    default: true,
-  },
-}
+function modeValidator(mode: string): boolean {
+  return ['linear', 'circle'].includes(mode)
+}
+
+export const props = {
+  // progress 模式
+  mode: {
+    type: String,
+    default: 'linear',
+    validator: modeValidator,
+  },
+  // progress 线宽
+  lineWidth: {
+    type: [Number, String],
+    default: 4,
+  },
+  // progress 颜色
+  color: {
+    type: String,
+  },
+  // progress 轨道颜色
+  trackColor: {
+    type: String,
+  },
+  // 是否添加水波纹效果
+  ripple: {
+    type: Boolean,
+    default: false,
+  },
+  // progress 值
+  value: {
+    type: [Number, String],
+    default: 0,
+  },
+  // 是否显示label
+  label: {
+    type: Boolean,
+    default: false,
+  },
+  // circle 的尺寸
+  size: {
+    type: [Number, String],
+    default: 40,
+  },
+  // circle的原点
+  rotate: {
+    type: Number,
+    default: 0,
+  },
+  // 是否显示 circle 轨道
+  track: {
+    type: Boolean,
+    default: true,
+  },
+}