@datametria/vue-components 2.3.1 → 2.4.0

package/src/components/DatametriaProgress.vue

@@ -1,226 +1,230 @@
-<template>
-  <div class="datametria-progress" :class="classes">
-    <div v-if="type === 'line'" class="datametria-progress-bar">
-      <div class="datametria-progress-bar__outer" :style="{ height: `${strokeWidth}px` }">
-        <div class="datametria-progress-bar__inner" :style="barStyle">
-          <div v-if="showText && textInside" class="datametria-progress-bar__innerText">
-            {{ percentage }}%
-          </div>
-        </div>
-      </div>
-      <div v-if="showText && !textInside" class="datametria-progress__text">
-        <slot>{{ percentage }}%</slot>
-      </div>
-    </div>
-
-    <div v-else class="datametria-progress-circle">
-      <svg :width="circleSize" :height="circleSize" viewBox="0 0 100 100">
-        <path
-          class="datametria-progress-circle__track"
-          :d="trackPath"
-          :stroke-width="relativeStrokeWidth"
-          fill="none"
-        />
-        <path
-          class="datametria-progress-circle__path"
-          :d="trackPath"
-          :stroke-width="relativeStrokeWidth"
-          :stroke-dasharray="perimeter"
-          :stroke-dashoffset="circlePathOffset"
-          :style="circlePathStyle"
-          fill="none"
-        />
-      </svg>
-      <div v-if="showText" class="datametria-progress__text">
-        <slot>{{ percentage }}%</slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-type ProgressType = 'line' | 'circle' | 'dashboard'
-type ProgressStatus = 'success' | 'warning' | 'error' | ''
-
-interface Props {
-  percentage?: number
-  type?: ProgressType
-  status?: ProgressStatus
-  strokeWidth?: number
-  showText?: boolean
-  textInside?: boolean
-  width?: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  percentage: 0,
-  type: 'line',
-  status: '',
-  strokeWidth: 6,
-  showText: true,
-  textInside: false,
-  width: 126
-})
-
-const classes = computed(() => ({
-  [`datametria-progress--${props.type}`]: true,
-  [`datametria-progress--${props.status}`]: props.status,
-  'datametria-progress--text-inside': props.textInside
-}))
-
-const barStyle = computed(() => ({
-  width: `${props.percentage}%`,
-  backgroundColor: statusColor.value
-}))
-
-const statusColor = computed(() => {
-  const colors = {
-    success: 'var(--datametria-success-color, #67c23a)',
-    warning: 'var(--datametria-warning-color, #e6a23c)',
-    error: 'var(--datametria-error-color, #f56c6c)',
-    '': 'var(--datametria-primary-color, #0072ce)'
-  }
-  return colors[props.status]
-})
-
-const circleSize = computed(() => props.width)
-
-const relativeStrokeWidth = computed(() => {
-  return ((props.strokeWidth / props.width) * 100).toFixed(1)
-})
-
-const radius = computed(() => {
-  if (props.type === 'circle') {
-    return 50 - parseFloat(relativeStrokeWidth.value) / 2
-  }
-  return 50 - parseFloat(relativeStrokeWidth.value) / 2
-})
-
-const trackPath = computed(() => {
-  const r = radius.value
-  const isDashboard = props.type === 'dashboard'
-  return isDashboard
-    ? `M 50 50 m 0 ${r} a ${r} ${r} 0 1 1 0 -${r * 2} a ${r} ${r} 0 1 1 0 ${r * 2}`
-    : `M 50 50 m 0 -${r} a ${r} ${r} 0 1 1 0 ${r * 2} a ${r} ${r} 0 1 1 0 -${r * 2}`
-})
-
-const perimeter = computed(() => {
-  return 2 * Math.PI * radius.value
-})
-
-const circlePathOffset = computed(() => {
-  const rate = props.type === 'dashboard' ? 0.75 : 1
-  return perimeter.value * (1 - props.percentage / 100) * rate
-})
-
-const circlePathStyle = computed(() => ({
-  stroke: statusColor.value,
-  strokeLinecap: 'round'
-}))
-</script>
-
-<style scoped>
-.datametria-progress {
-  position: relative;
-  line-height: 1;
-}
-
-.datametria-progress--line {
-  display: flex;
-  align-items: center;
-}
-
-.datametria-progress-bar {
-  flex: 1;
-  display: flex;
-  align-items: center;
-}
-
-.datametria-progress-bar__outer {
-  width: 100%;
-  background-color: var(--datametria-border-color-light, #e4e7ed);
-  border-radius: 100px;
-  overflow: hidden;
-}
-
-.datametria-progress-bar__inner {
-  height: 100%;
-  border-radius: 100px;
-  background-color: var(--datametria-primary-color, #0072ce);
-  transition: width 0.6s ease;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding-right: 8px;
-}
-
-.datametria-progress-bar__innerText {
-  color: #ffffff;
-  font-size: 12px;
-  white-space: nowrap;
-}
-
-.datametria-progress__text {
-  margin-left: 8px;
-  font-size: 14px;
-  color: var(--datametria-text-primary, #303133);
-  white-space: nowrap;
-}
-
-.datametria-progress--circle,
-.datametria-progress--dashboard {
-  display: inline-block;
-  position: relative;
-}
-
-.datametria-progress-circle {
-  position: relative;
-  display: inline-block;
-}
-
-.datametria-progress-circle__track {
-  stroke: var(--datametria-border-color-light, #e4e7ed);
-}
-
-.datametria-progress-circle__path {
-  transition: stroke-dashoffset 0.6s ease;
-}
-
-.datametria-progress--circle .datametria-progress__text,
-.datametria-progress--dashboard .datametria-progress__text {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  margin: 0;
-  font-size: 14px;
-}
-
-.datametria-progress--success .datametria-progress-bar__inner {
-  background-color: var(--datametria-success-color, #67c23a);
-}
-
-.datametria-progress--warning .datametria-progress-bar__inner {
-  background-color: var(--datametria-warning-color, #e6a23c);
-}
-
-.datametria-progress--error .datametria-progress-bar__inner {
-  background-color: var(--datametria-error-color, #f56c6c);
-}
-
-@media (prefers-color-scheme: dark) {
-  .datametria-progress-bar__outer {
-    background-color: var(--datametria-border-color-light, #4c4d4f);
-  }
-
-  .datametria-progress__text {
-    color: var(--datametria-text-primary, #e5eaf3);
+<template>
+  <div class="datametria-progress" :class="classes">
+    <div v-if="type === 'line'" class="datametria-progress-bar">
+      <div class="datametria-progress-bar__outer" :style="{ height: `${strokeWidth}px` }">
+        <div class="datametria-progress-bar__inner" :style="barStyle">
+          <div v-if="showText && textInside" class="datametria-progress-bar__innerText">
+            {{ percentage }}%
+          </div>
+        </div>
+      </div>
+      <div v-if="showText && !textInside" class="datametria-progress__text">
+        <slot>{{ percentage }}%</slot>
+      </div>
+    </div>
+
+    <div v-else class="datametria-progress-circle">
+      <svg :width="circleSize" :height="circleSize" viewBox="0 0 100 100">
+        <path
+          class="datametria-progress-circle__track"
+          :d="trackPath"
+          :stroke-width="relativeStrokeWidth"
+          fill="none"
+        />
+        <path
+          class="datametria-progress-circle__path"
+          :d="trackPath"
+          :stroke-width="relativeStrokeWidth"
+          :stroke-dasharray="perimeter"
+          :stroke-dashoffset="circlePathOffset"
+          :style="circlePathStyle"
+          fill="none"
+        />
+      </svg>
+      <div v-if="showText" class="datametria-progress__text">
+        <slot>{{ percentage }}%</slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type ProgressType = 'line' | 'circle' | 'dashboard'
+type ProgressStatus = 'success' | 'warning' | 'error' | ''
+
+interface Props {
+  percentage?: number
+  type?: ProgressType
+  status?: ProgressStatus
+  strokeWidth?: number
+  showText?: boolean
+  textInside?: boolean
+  width?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  percentage: 0,
+  type: 'line',
+  status: '',
+  strokeWidth: 6,
+  showText: true,
+  textInside: false,
+  width: 126
+})
+
+const classes = computed(() => ({
+  [`datametria-progress--${props.type}`]: true,
+  [`datametria-progress--${props.status}`]: props.status,
+  'datametria-progress--text-inside': props.textInside
+}))
+
+const barStyle = computed(() => ({
+  width: `${props.percentage}%`,
+  backgroundColor: statusColor.value
+}))
+
+const statusColor = computed(() => {
+  const colors = {
+    success: 'var(--datametria-success-color, #67c23a)',
+    warning: 'var(--datametria-warning-color, #e6a23c)',
+    error: 'var(--datametria-error-color, #f56c6c)',
+    '': 'var(--datametria-primary-color, #0072ce)'
+  }
+  return colors[props.status]
+})
+
+const circleSize = computed(() => props.width)
+
+const relativeStrokeWidth = computed(() => {
+  return ((props.strokeWidth / props.width) * 100).toFixed(1)
+})
+
+const radius = computed(() => {
+  if (props.type === 'circle') {
+    return 50 - parseFloat(relativeStrokeWidth.value) / 2
+  }
+  return 50 - parseFloat(relativeStrokeWidth.value) / 2
+})
+
+const trackPath = computed(() => {
+  const r = radius.value
+  const isDashboard = props.type === 'dashboard'
+  return isDashboard
+    ? `M 50 50 m 0 ${r} a ${r} ${r} 0 1 1 0 -${r * 2} a ${r} ${r} 0 1 1 0 ${r * 2}`
+    : `M 50 50 m 0 -${r} a ${r} ${r} 0 1 1 0 ${r * 2} a ${r} ${r} 0 1 1 0 -${r * 2}`
+})
+
+const perimeter = computed(() => {
+  return 2 * Math.PI * radius.value
+})
+
+const circlePathOffset = computed(() => {
+  const rate = props.type === 'dashboard' ? 0.75 : 1
+  return perimeter.value * (1 - props.percentage / 100) * rate
+})
+
+const circlePathStyle = computed(() => ({
+  stroke: statusColor.value,
+  strokeLinecap: 'round'
+}))
+</script>
+
+<style scoped>
+.datametria-progress {
+  position: relative;
+  line-height: 1;
+}
+
+.datametria-progress--line {
+  display: flex;
+  align-items: center;
+}
+
+.datametria-progress-bar {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.datametria-progress-bar__outer {
+  width: 100%;
+  background-color: var(--datametria-border-color-light, #e4e7ed);
+  border-radius: 100px;
+  overflow: hidden;
+}
+
+.datametria-progress-bar__inner {
+  height: 100%;
+  border-radius: 100px;
+  background-color: var(--datametria-primary-color, #0072ce);
+  transition: width 0.6s ease;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 8px;
+}
+
+.datametria-progress-bar__innerText {
+  color: #ffffff;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.datametria-progress__text {
+  margin-left: 8px;
+  font-size: 14px;
+  color: var(--datametria-text-primary, #303133);
+  white-space: nowrap;
+}
+
+.datametria-progress--circle,
+.datametria-progress--dashboard {
+  display: inline-block;
+  position: relative;
+}
+
+.datametria-progress-circle {
+  position: relative;
+  display: inline-block;
+}
+
+.datametria-progress-circle__track {
+  stroke: var(--datametria-border-color-light, #e4e7ed);
+}
+
+.datametria-progress-circle__path {
+  transition: stroke-dashoffset 0.6s ease;
+}
+
+.datametria-progress--circle .datametria-progress__text,
+.datametria-progress--dashboard .datametria-progress__text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
+  font-size: 14px;
+}
+
+.datametria-progress--success .datametria-progress-bar__inner {
+  background-color: var(--datametria-success-color, #67c23a);
+}
+
+.datametria-progress--warning .datametria-progress-bar__inner {
+  background-color: var(--datametria-warning-color, #e6a23c);
+}
+
+.datametria-progress--error .datametria-progress-bar__inner {
+  background-color: var(--datametria-error-color, #f56c6c);
+}
+
+@media (prefers-color-scheme: dark) {
+  .datametria-progress-bar__outer {
+    background-color: var(--datametria-border-color-light, #4c4d4f);
   }
 
-  .datametria-progress-circle__track {
-    stroke: var(--datametria-border-color-light, #4c4d4f);
-  }
-}
-</style>
+[data-theme="dark"] .datametria-progress-bar__outer {
+background-color: var(--datametria-border-color-light, #4c4d4f);
+}
+
+  .datametria-progress__text {
+    color: var(--datametria-text-primary, #e5eaf3);
+  }
+
+  .datametria-progress-circle__track {
+    stroke: var(--datametria-border-color-light, #4c4d4f);
+  }
+}
+</style>