@varlet/cli 1.27.14 → 1.27.17-alpha.1656907860130

package/site/components/loading/props.ts

@@ -1,37 +1,37 @@
-import type { PropType } from 'vue'
-
-export type LoadingType = 'circle' | 'wave' | 'cube' | 'rect' | 'disappear'
-
-export type LoadingSize = 'normal' | 'mini' | 'small' | 'large'
-
-export function typeValidator(type: string): boolean {
-  return ['circle', 'wave', 'cube', 'rect', 'disappear'].includes(type)
-}
-
-export function sizeValidator(size: string): boolean {
-  return ['normal', 'mini', 'small', 'large'].includes(size)
-}
-
-export const props = {
-  // loading类型
-  type: {
-    type: String as PropType<LoadingType>,
-    default: 'circle',
-    validator: typeValidator,
-  },
-  radius: {
-    type: [String, Number],
-    default: 15,
-  },
-  // loading尺寸
-  size: {
-    type: String as PropType<LoadingSize>,
-    default: 'normal',
-    validator: sizeValidator,
-  },
-  // loading颜色
-  color: {
-    type: String,
-    default: 'currentColor',
-  },
-}
+import type { PropType } from 'vue'
+
+export type LoadingType = 'circle' | 'wave' | 'cube' | 'rect' | 'disappear'
+
+export type LoadingSize = 'normal' | 'mini' | 'small' | 'large'
+
+export function typeValidator(type: string): boolean {
+  return ['circle', 'wave', 'cube', 'rect', 'disappear'].includes(type)
+}
+
+export function sizeValidator(size: string): boolean {
+  return ['normal', 'mini', 'small', 'large'].includes(size)
+}
+
+export const props = {
+  // loading类型
+  type: {
+    type: String as PropType<LoadingType>,
+    default: 'circle',
+    validator: typeValidator,
+  },
+  radius: {
+    type: [String, Number],
+    default: 15,
+  },
+  // loading尺寸
+  size: {
+    type: String as PropType<LoadingSize>,
+    default: 'normal',
+    validator: sizeValidator,
+  },
+  // loading颜色
+  color: {
+    type: String,
+    default: 'currentColor',
+  },
+}

package/site/components/progress/Progress.vue

@@ -1,108 +1,108 @@
-<template>
-  <div class="var-site-progress">
-    <div class="var-site-progress-linear" v-if="mode === 'linear'">
-      <div class="var-site-progress-linear__block" :style="{ height: `${lineWidth}px` }" v-bind="$attrs">
-        <div class="var-site-progress-linear__background" v-if="track" :style="{ background: trackColor }"></div>
-        <div
-          :class="`var-site-progress-linear__certain${ripple ? ' var-site-progress-linear__ripple' : ''}`"
-          :style="{ background: color, width: linearProps.width }"
-        ></div>
-      </div>
-      <div class="var-site-progress-linear__label" v-bind="$attrs" v-if="label">
-        <slot>
-          {{ linearProps.roundValue }}
-        </slot>
-      </div>
-    </div>
-
-    <div class="var-site-progress-circle" v-if="mode === 'circle'" :style="{ width: `${size}px`, height: `${size}px` }">
-      <svg
-        class="var-site-progress-circle__svg"
-        :style="{ transform: `rotate(${rotate - 90}deg)` }"
-        :viewBox="circleProps.viewBox"
-      >
-        <circle
-          v-if="track"
-          class="var-site-progress-circle__background"
-          :cx="size / 2"
-          :cy="size / 2"
-          :r="circleProps.radius"
-          fill="transparent"
-          :stroke-width="lineWidth"
-          :style="{
-            strokeDasharray: circleProps.perimeter,
-            stroke: trackColor,
-          }"
-        ></circle>
-        <circle
-          class="var-site-progress-circle__certain"
-          :cx="size / 2"
-          :cy="size / 2"
-          :r="circleProps.radius"
-          fill="transparent"
-          :stroke-width="lineWidth"
-          :style="{
-            strokeDasharray: circleProps.strokeDasharray,
-            stroke: color,
-          }"
-        ></circle>
-      </svg>
-
-      <div class="var-site-progress-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 '../utils/shared'
-
-export default defineComponent({
-  name: 'VarSiteProgress',
-  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 ${size} ${size}`
-      const roundValue = toNumber(value) > 100 ? 100 : Math.round(toNumber(value))
-      const radius = (size - toNumber(lineWidth)) / 2
-      const perimeter = 2 * Math.PI * radius
-      const strokeDasharray = `${(roundValue / 100) * perimeter}, ${perimeter}`
-
-      return {
-        viewBox,
-        radius,
-        strokeDasharray,
-        perimeter,
-        roundValue: `${roundValue}%`,
-      }
-    })
-    return {
-      linearProps,
-      circleProps,
-    }
-  },
-})
-</script>
-
-<style lang="less">
-@import '../styles/common';
-@import './progress';
-</style>
+<template>
+  <div class="var-site-progress">
+    <div class="var-site-progress-linear" v-if="mode === 'linear'">
+      <div class="var-site-progress-linear__block" :style="{ height: `${lineWidth}px` }" v-bind="$attrs">
+        <div class="var-site-progress-linear__background" v-if="track" :style="{ background: trackColor }"></div>
+        <div
+          :class="`var-site-progress-linear__certain${ripple ? ' var-site-progress-linear__ripple' : ''}`"
+          :style="{ background: color, width: linearProps.width }"
+        ></div>
+      </div>
+      <div class="var-site-progress-linear__label" v-bind="$attrs" v-if="label">
+        <slot>
+          {{ linearProps.roundValue }}
+        </slot>
+      </div>
+    </div>
+
+    <div class="var-site-progress-circle" v-if="mode === 'circle'" :style="{ width: `${size}px`, height: `${size}px` }">
+      <svg
+        class="var-site-progress-circle__svg"
+        :style="{ transform: `rotate(${rotate - 90}deg)` }"
+        :viewBox="circleProps.viewBox"
+      >
+        <circle
+          v-if="track"
+          class="var-site-progress-circle__background"
+          :cx="size / 2"
+          :cy="size / 2"
+          :r="circleProps.radius"
+          fill="transparent"
+          :stroke-width="lineWidth"
+          :style="{
+            strokeDasharray: circleProps.perimeter,
+            stroke: trackColor,
+          }"
+        ></circle>
+        <circle
+          class="var-site-progress-circle__certain"
+          :cx="size / 2"
+          :cy="size / 2"
+          :r="circleProps.radius"
+          fill="transparent"
+          :stroke-width="lineWidth"
+          :style="{
+            strokeDasharray: circleProps.strokeDasharray,
+            stroke: color,
+          }"
+        ></circle>
+      </svg>
+
+      <div class="var-site-progress-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'
+
+export default defineComponent({
+  name: 'VarSiteProgress',
+  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 ${size} ${size}`
+      const roundValue = toNumber(value) > 100 ? 100 : Math.round(toNumber(value))
+      const radius = (size - toNumber(lineWidth)) / 2
+      const perimeter = 2 * Math.PI * radius
+      const strokeDasharray = `${(roundValue / 100) * perimeter}, ${perimeter}`
+
+      return {
+        viewBox,
+        radius,
+        strokeDasharray,
+        perimeter,
+        roundValue: `${roundValue}%`,
+      }
+    })
+    return {
+      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,98 +1,98 @@
-@site-progress-font-size: var(--site-font-size-sm);
-@site-progress-ripple-color: #fff;
-@site-progress-track-color: #d8d8d8;
-@site-progress-background: var(--site-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;
-    }
-
-    &__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;
-
-    &__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(--site-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;
+    }
+
+    &__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;
+
+    &__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,
-    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,
+    default: 40,
+  },
+  // circle的原点
+  rotate: {
+    type: Number,
+    default: 0,
+  },
+  // 是否显示 circle 轨道
+  track: {
+    type: Boolean,
+    default: true,
+  },
+}