[#722][3.0] Progress 컴포넌트 개발

docs/router/index.js

@@ -19,6 +19,7 @@ import contextMenuProps from 'docs/views/contextMenu/props';
 import windowProps from 'docs/views/window/props';
 import schedulerProps from 'docs/views/scheduler/props';
 import loadingProps from 'docs/views/loading/props';
+import progressProps from 'docs/views/progress/props';
 
 const routes = [
   {
@@ -91,6 +92,12 @@ const routes = [
     component: PageView,
     props: sliderProps,
   },
+  {
+    path: '/progress',
+    name: 'Progress',
+    component: PageView,
+    props: progressProps,
+  },
   {
     path: '/grid',
     name: 'Grid',

docs/views/progress/api/progress.md

@@ -0,0 +1,26 @@
+
+>### Desc
+ - 태그는 &lt;ev-progress&gt;(이하 <프로그레스>)으로 정의
+
+```
+<ev-progress
+    v-mode="바인딩값"
+    :color="색상값 문자열 또는 색상값조건의 배열"
+    :stroke-width="바 너비"
+    :inner-text="바 내부 텍스트"
+>
+    컨텐츠
+</ev-progress>
+```
+
+ - <프로그레스>는 현재 작업의 진행상황을 표기하고 사용자에게 현재 상태를 알리는데 사용됩니다.
+ - <프로그레스>태그 내부의 컨텐츠는 <프로그레스>바 우측 영역에 컨텐츠를 보여줄 때 사용됩니다.
+
+
+>### Props
+| 이름 | 타입 | 디폴트 | 설명 | 종류 |
+| --- | ---- | ----- | ---- | --- |
+| v-mode | Number | 0 | <프로그레스>의 값 | 0 ~ 100 |
+| color | String, Array | '#409EFF' | <프로그래스>의 기본 색상 | |
+| stroke-width | Number | 6 | <프로그래스>바의 너비 | |
+| inner-text | String | '' | <프로그래스>바 내부의 텍스트 | |

docs/views/progress/example/Default.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="case">
+    <p class="case-title">Common</p>
+    <ev-progress
+      v-model="progressVal1"
+    />
+    <br>
+    <ev-progress
+      v-model="progressVal1"
+      color="#67C23A"
+    >
+      <div class="label-cls">
+        <p>{{ progressVal1 }} %</p>
+      </div>
+    </ev-progress>
+    <br>
+    <ev-progress
+      v-model="progressVal1"
+      color="#F56C6C"
+    >
+      <div class="label-cls">
+        <p>{{ progressVal1 }} / 100</p>
+      </div>
+    </ev-progress>
+    <br>
+    <ev-progress
+      v-model="progressVal1"
+      color="#FADE4C"
+      :stroke-width="15"
+    />
+    <br>
+    <ev-progress
+      v-model="progressVal1"
+      :color="customColors"
+      :stroke-width="20"
+      :inner-text="`${progressVal1}%`"
+    />
+    <div class="description">
+      <button
+        class="btn"
+        @click="changeVal1"
+      >
+        Change Value : {{ progressVal1 }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const progressVal1 = ref(50);
+    const changeVal1 = () => {
+      if (progressVal1.value === 100) {
+        progressVal1.value = 0;
+      } else {
+        progressVal1.value += 10;
+      }
+    };
+    const customColors = [
+      { color: '#F56C6C', value: 20 },
+      { color: '#1989FA', value: 80 },
+      { color: '#E6A23C', value: 40 },
+      { color: '#6F7AD3', value: 100 },
+      { color: '#5CB87A', value: 60 },
+    ];
+
+    return {
+      progressVal1,
+      changeVal1,
+      customColors,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.label-cls {
+  width: 70px;
+}
+</style>

docs/views/progress/props.js

@@ -0,0 +1,15 @@
+import { parseComponent } from 'vue-template-compiler';
+import mdText from 'raw-loader!./api/progress.md';
+import Default from './example/Default';
+import DefaultRaw from '!!raw-loader!./example/Default';
+
+export default {
+  mdText,
+  components: {
+    Default: {
+      description: '현재 작업의 진행상황을 표기하고 사용자에게 현재 상태를 알리는데 사용됩니다.',
+      component: Default,
+      parsedData: parseComponent(DefaultRaw),
+    },
+  },
+};

src/components/progress/Progress.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="ev-progress">
+    <div
+      class="ev-progress-wrapper"
+      :style="wrapperStyle"
+    >
+      <div
+        class="ev-progress-inner"
+        :style="innerStyle"
+      >
+        <div
+          v-if="innerText"
+          class="ev-progress-inner-text"
+        >
+          {{ innerText }}
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="$slots.default"
+      class="ev-progress-label"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue';
+
+export default {
+  name: 'EvProgress',
+  props: {
+    modelValue: {
+      type: Number,
+      default: 0,
+      validator: val => (val >= 0 && val <= 100),
+    },
+    color: {
+      type: [String, Array],
+      default: '#409EFF',
+    },
+    strokeWidth: {
+      type: Number,
+      default: 6,
+    },
+    innerText: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: {
+  },
+  setup(props) {
+    const wrapperStyle = computed(() => ({
+      height: `${props.strokeWidth}px`,
+    }));
+    const innerStyle = computed(() => {
+      if (Array.isArray(props.color)) {
+        const sortedColorList = [...props.color].sort((curr, next) => curr.value - next.value);
+        let color = sortedColorList[0].color;
+        if (!props.modelValue) {
+          return {
+            width: `${props.modelValue}%`,
+            'background-color': color,
+          };
+        }
+        for (let i = 0; i < sortedColorList.length; i++) {
+          const prevValue = i === 0 ? 0 : sortedColorList[i - 1].value;
+          const currValue = sortedColorList[i].value;
+          if (props.modelValue > prevValue && props.modelValue <= currValue) {
+            color = sortedColorList[i].color;
+            break;
+          }
+        }
+        return {
+          width: `${props.modelValue}%`,
+          'background-color': color,
+        };
+      }
+      return {
+        width: `${props.modelValue}%`,
+        'background-color': props.color,
+      };
+    });
+
+    return {
+      wrapperStyle,
+      innerStyle,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../style/index.scss';
+
+.ev-progress {
+  display: flex;
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  user-select: none;
+
+  &-wrapper {
+    position: relative;
+    height: 6px;
+    border-radius: 100px;
+    background-color: #EBEEF5;
+    overflow: hidden;
+    flex: 1;
+    align-self: center;
+  }
+
+  &-inner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    border-radius: 100px;
+    text-align: right;
+    white-space: nowrap;
+    transition: width .6s ease;
+  }
+
+  &-inner-text {
+    display: inline-block;
+    margin: 0 5px;
+    color: #FFFFFF;
+    font-size: 12px;
+  }
+
+  &-label {
+    min-width: 55px;
+    text-align: right;
+    margin-left: 10px;
+  }
+}
+</style>

src/components/progress/index.js

@@ -0,0 +1,7 @@
+import EvProgress from './Progress';
+
+EvProgress.install = (app) => {
+  app.component(EvProgress.name, EvProgress);
+};
+
+export default EvProgress;

src/main.js

@@ -19,6 +19,7 @@ import EvScheduler from '@/components/scheduler/';
 import EvContextMenu from '@/components/contextMenu/';
 import EvWindow from '@/components/window/';
 import EvLoading from '@/components/loading/';
+import EvProgress from '@/components/progress';
 import { version } from '../package.json';
 
 const components = [
@@ -40,6 +41,7 @@ const components = [
   EvContextMenu,
   EvWindow,
   EvLoading,
+  EvProgress,
 ];
 
 const install = (app) => {
@@ -80,6 +82,7 @@ export {
   EvContextMenu,
   EvWindow,
   EvLoading,
+  EvProgress,
 };
 
 export default EVUI;