[3.0] Progress 컴포넌트 #722
Labels
Comments
kdeun1
added a commit
that referenced
this issue
Nov 19, 2020
############################### - v-model에 걸린 값(0 ~ 100)에 따라서 width가 계산되어지는 진행상황을 표기하는 Progress 컴포넌트 개발 - color로 Progress 박스 색상 변경. color는 헥사값인 문자열을 받을 수 있으며, 정해진 포멧의 배열을 받아서 v-model 값 조건에 따라 색상을 동적으로 변경할 수 있다 - stroke-width로 바의 너비 변경 - 태그 사이에 컨텐츠를 입력함으로서 slot으로 우측에 표기되는 기능 추가 - inner-text로 바 내부에 텍스트 입력하는 기능 추가 - DOCS 페이지 router, 예제 추가 - DOCS 설명 markdown 작성
kdeun1
added a commit
that referenced
this issue
Nov 19, 2020
############################### - 코드리뷰 피드백 후 스타일 변경 - 슬롯을 이용한 라벨 예제 추가 - 불필요한 코드 제거
mmindy
pushed a commit
that referenced
this issue
Nov 19, 2020
* [#722][3.0] Progress 컴포넌트 개발 ############################### - v-model에 걸린 값(0 ~ 100)에 따라서 width가 계산되어지는 진행상황을 표기하는 Progress 컴포넌트 개발 - color로 Progress 박스 색상 변경. color는 헥사값인 문자열을 받을 수 있으며, 정해진 포멧의 배열을 받아서 v-model 값 조건에 따라 색상을 동적으로 변경할 수 있다 - stroke-width로 바의 너비 변경 - 태그 사이에 컨텐츠를 입력함으로서 slot으로 우측에 표기되는 기능 추가 - inner-text로 바 내부에 텍스트 입력하는 기능 추가 - DOCS 페이지 router, 예제 추가 - DOCS 설명 markdown 작성 * [#722][3.0] Progress 컴포넌트 개발 ############################### - 코드리뷰 피드백 후 스타일 변경 - 슬롯을 이용한 라벨 예제 추가 - 불필요한 코드 제거
kdeun1
added a commit
that referenced
this issue
Dec 1, 2020
############################### - Tabs 컴포넌트 레이아웃 개발 - 선택된 Tab의 content가 들어갈 TabPanel 컴포넌트 개발 - lib import, DOCS 페이지 router 로직 추가 - DOCS Page 예제 추가
mmindy
pushed a commit
that referenced
this issue
Dec 3, 2020
* [#724][3.0] Tab 컴포넌트 1차 ######### - 컴포넌트 구성 - 레이아웃 구성 * [#722][3.0] Progress 컴포넌트 개발 ############################### - Tabs 컴포넌트 레이아웃 개발 - 선택된 Tab의 content가 들어갈 TabPanel 컴포넌트 개발 - lib import, DOCS 페이지 router 로직 추가 - DOCS Page 예제 추가 * [#724][3.0] Tabs 컴포넌트 개발 ############################### - Tab의 리스트와 선택된 탭의 value값을 Tabs 태그에서 양방향 바인딩 v-model을 걸어서 렌더링하도록 로직을 변경 - Docs > Tabs 페이지에 탭 추가, 삭제하는 예제 추가 - 컴포넌트가 포함되어있는 배열을 shallowRef로 감싸고 이벤트가 발생한 경우 triggerRef를 실행하여 반응형을 트리거 시키도록 하는 예제 추가 -> defineAsyncComponent 관련 예제로직을 참고하여 다른 방식이 있는지 확인 중 - 탭 목록에서 하나가 삭제된 경우 onBeforeUpdate 훅에서 현재 렌더링된 배열의 메뉴들과 이미 삭제된 탭리스트 간의 비교를 통해 현재 선택된 탭이 삭제되는 경우에 맨 첫번째 탭은 그 다음탭으로, 그 외에는 삭제되는 탭 바로 앞의 인덱스를 선택하도록 함 - 불필요한 코드 삭제 및 모듈 리펙토링 * [#724][3.0] Tabs 컴포넌트 개발 ############################### - Tab 상단 nav 우측에 x 아이콘을 보여주어 자체적으로 닫을 수 있게하는 closable 기능 추가 - Tab 상단 nav의 컨텐츠를 모두 보여주는 stretch 기능 추가 - Tab 상단 nav의 텍스트 좌측에 아이콘을 보여주는 기능 추가. 이때 바인딩되는 리스트 배열 내부 객체 속성에 iconClass를 추가해주어야 한다. - Tab 상단 nav에 길이가 길어지는 경우 자동으로 width를 계산하여 스크롤링이 자동으로 되도록 하는 기능 개발. 상단 양쪽에 화살표 아이콘이 추가되어 클릭 시 200px 씩 좌우이동한다. - 그 외 최초 렌더링 시와 화면 업데이트 시 상단 탭의 엘리먼트를 관찰하여 스크롤링 여부를 판단. - 탭에 바인딩된 리스트가 shallowRef타입인 경우 closable 기능인 탭 자체 x아이콘 클릭 시 리스트가 깊게 반응하지 않아, triggerRef()를 사용하여 강제로 트리거하도록 한다. - Tab 컴포넌트 드래그 앤 드랍 기능 개발. 엘리먼트에 draggable 속성을 사용하여 각 탭이 드래깅되고 드래드엔드 되는 시점에 실제 탭이 변경되도록 개발. - DOCS 문서 수정 (현재 작성 중) * [#724][3.0] Tabs 컴포넌트 개발 ############################### - Tabs 컴포넌트 내 드래그 관련 valid 추가 - DOCS > Tabs 컴포넌트 설명 MD 작성 - DOCS내 각 컴포넌트들의 MD파일 내용 통일 * [#724][3.0] Tabs 컴포넌트 개발 ############################### - 테마별 스타일 변경 - 불필요한 코드 제거 * [#724][3.0] Tabs 컴포넌트 개발 ############################### - 테마별 스타일 변경 - 불필요한 코드 제거 Co-authored-by: mjchoi <mjchoi@ex-em.com>
|
오래된 이슈는 닫고 있어요. 필요하다면 다시 열어주세요. 😄 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
No description provided.
The text was updated successfully, but these errors were encountered: