[#646] select 컴포넌트 코드리뷰 수정 (#649)

* [#646] Select 컴포넌트 1차 개발
################
- select 컴포넌트 1차 개발
- select 컴포넌트 공통기본 예시 작성
- 사용자 지정 디렉티브 clickoutside 로직 모듈화
- checkbox 예시에서 잘못 바인딩된 값 변경
- checkbox 컴포넌트 내 불필요한 props, computed 로직 제거

* [#646] Select 컴포넌트 1차 개발
################
- 드랍다운 박스 좌표 계산 로직 수정
- 컴포넌트 내 clickoutside 로직 수정
- readonly props, change event 추가
- 불명확한 이벤트명 수정 및 불필요한 이벤트, watch 로직 삭제
- 컴포넌트 설명 markdown 내용 작성

* [#646] Select 컴포넌트 1차 개발
################
- 가독성을 위해 markdown 내용 수정
- 템플릿 내 custom tag 사용 시 kebab-case 사용
- select markdown 내용 추가
- class명에 'is-'접두어 be동사 제거
- dropdown box의 좌표를 클릭 시에만 계산하도록 변경
- alias에 'docs' 추가

docs/views/checkbox/api/checkbox.md

@@ -20,36 +20,33 @@
 > 1) 체크박스 그룹 사용 시
 >> <체크박스그룹>
 >
-> |    이름     |   디폴트  |  타입   |          설명            |                    종류                           |
-  |------------ |-----------|---------|-------------------------|---------------------------------------------------|
-  | v-model     | null      | Array   | <체크박스그룹>내 선택된 <체크박스> label 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
+> | 이름 | 디폴트 | 타입 | 설명 | 종류 |
+  |----- |--------|------|------|------|
+  | v-model | null | Array | <체크박스그룹>내 선택된 <체크박스> label 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
 >> <체크박스>
 >
-> |    이름     |   디폴트  |  타입   |          설명            |                    종류                           |
+> | 이름 | 디폴트 | 타입 | 설명 | 종류 |
   |------------ |-----------|---------|-------------------------|---------------------------------------------------|
-  | v-model     |   null    | String, Number, Boolean, Symbol, Array   | <체크박스그룹>내 선택된 <체크박스> label 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
-  | label       |   null    | String  | HTML element value (required)    |  |
-  | disabled    |   false   | Boolean | HTML element disabled attribute    |  |
+  | v-model | null | String, Number, Boolean, Symbol, Array | <체크박스그룹>내 선택된 <체크박스> label 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
+  | label | null | String  | HTML element value (required) |  |
+  | disabled | false | Boolean | HTML element disabled attribute |  |
 >
 
 >
 > 2) 체크박스만 사용 시
 >> <체크박스>
 >
->  |    이름     |   디폴트   |  타입   |          설명            |                    종류                           |
+> | 이름 | 디폴트 | 타입 | 설명 | 종류 |
   |------------ |-----------|---------|-------------------------|---------------------------------------------------|
-  | v-model       |         | String or Boolean | <체크박스>의 value    |  |
-  | value       |           | String  | HTML element value    |  |
-  | size       |           | String  | 체크박스의 크기 | '', 'small' |
-  | type       |           | String  | 체크박스 박스의 모양 (default : 테두리 원) | '', 'square' |
-  | after-type |           | String  | 체크박스 내부 체크모양 (deault : 내부 원) | '', 'minus', 'check' |
-  | disabled    |   false   | Boolean | HTML element disabled attribute    |  |
+  | v-model | null | String, Number, Boolean, Symbol, Array | <체크박스그룹>내 선택된 <체크박스> label 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
+  | label | null | String  | HTML element value (required) |  |
+  | disabled | false | Boolean | HTML element disabled attribute |  |
 
 >### Event
 >> <체크박스그룹>
-
- | 이름 | 파라미터 | 설명 |
- | ---- | ------- | ---- |
+>
+>| 이름 | 파라미터 | 설명 |
+ |------|----------|------|
  | change | event | <체크박스그룹> 내 <체크박스> 변화 이벤트 감지 |
 
 >### 참고

docs/views/checkbox/example/CheckboxGroup.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="case">
     <p class="case-title">Group</p>
-    <EvCheckboxGroup
+    <ev-checkbox-group
       v-model="checkboxGroup"
     >
-      <EvCheckbox label="Option A">A</EvCheckbox>
-      <EvCheckbox label="Option B" />
-      <EvCheckbox label="Option C" />
-      <EvCheckbox label="Option D" />
-    </EvCheckboxGroup>
+      <ev-checkbox label="Option A">A</ev-checkbox>
+      <ev-checkbox label="Option B" />
+      <ev-checkbox label="Option C" />
+      <ev-checkbox label="Option D" />
+    </ev-checkbox-group>
     <div class="description">
       <span class="badge">
         checkboxGroup
@@ -18,14 +18,14 @@
   </div>
   <div class="case">
     <p class="case-title">Event</p>
-    <EvCheckboxGroup
+    <ev-checkbox-group
       v-model="checkboxGroup2"
     >
-      <EvCheckbox label="Option A">A</EvCheckbox>
-      <EvCheckbox label="Option B">B</EvCheckbox>
-      <EvCheckbox label="Option C" />
-      <EvCheckbox label="Option D" />
-    </EvCheckboxGroup>
+      <ev-checkbox label="Option A">A</ev-checkbox>
+      <ev-checkbox label="Option B">B</ev-checkbox>
+      <ev-checkbox label="Option C" />
+      <ev-checkbox label="Option D" />
+    </ev-checkbox-group>
     <div class="description">
       <span class="badge">
         checkboxGroup2
@@ -41,27 +41,27 @@
   </div>
   <div class="case">
     <p class="case-title">All Check</p>
-    <EvCheckboxGroup
+    <ev-checkbox-group
       v-model="checkboxGroup3"
     >
-      <EvCheckbox
+      <ev-checkbox
         v-for="(info, idx) in checkboxList3"
         :key="idx"
         :label="info.label"
       >
         {{ info.text }}
-      </EvCheckbox>
-    </EvCheckboxGroup>
+      </ev-checkbox>
+    </ev-checkbox-group>
     <div class="description">
       <span class="badge">
         checkboxGroup3
       </span>
-      <EvCheckbox
+      <ev-checkbox
         v-model="allCheck"
         @change="changeAllCheck"
       >
         ALL CHECK
-      </EvCheckbox>
+      </ev-checkbox>
       {{ checkboxGroup3 }}
     </div>
   </div>
@@ -70,8 +70,10 @@
 <script>
 import { ref, watch } from 'vue';
 import { isEqual, sortBy } from 'lodash-es';
+import EvCheckboxGroup from '@/components/checkboxGroup/CheckboxGroup';
 
 export default {
+  components: { EvCheckboxGroup },
   setup() {
     const checkboxGroup = ref(['Option A', 'Option B']);
 

docs/views/checkbox/example/Default.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="case">
     <p class="case-title">Common</p>
-    <EvCheckbox
+    <ev-checkbox
       v-model="checkVal1"
     >
       Checkbox
-    </EvCheckbox>
+    </ev-checkbox>
     <div class="description">
       <button
         class="btn"
@@ -18,12 +18,12 @@
   </div>
   <div class="case">
     <p class="case-title">Use Change Event</p>
-    <EvCheckbox
+    <ev-checkbox
       v-model="checkVal2"
       @change="changeVal2"
     >
       Single Checkbox
-    </EvCheckbox>
+    </ev-checkbox>
     <div class="description">
       <span class="badge">
         Value in changeEvent
@@ -39,12 +39,12 @@
   </div>
   <div class="case">
     <p class="case-title">Disabled</p>
-    <EvCheckbox
+    <ev-checkbox
       v-model="checkVal3"
       :disabled="isDisable"
     >
       DISABLED
-    </EvCheckbox>
+    </ev-checkbox>
     <div class="description">
       <button
         class="btn"

docs/views/checkbox/index.vue

@@ -2,7 +2,7 @@
   <h2 class="content-title">
     Checkbox
   </h2>
-  <Example
+  <example
     v-for="(component, index) in components"
     :key="`${component.title}_${index}`"
     :title="component.title"
@@ -11,20 +11,20 @@
     :url="component.url"
     :code-text="component.codeText"
   />
-  <MarkdownView
+  <markdown-view
     :source="mdText"
   />
 </template>
 
 <script>
 import { defineAsyncComponent } from 'vue';
 import { parseComponent } from 'vue-template-compiler';
-import Example from '../../components/Example';
+import Example from 'docs/components/Example';
+import MarkdownView from 'docs/components/MarkdownView';
 import Default from './example/Default';
 import CheckboxGroup from './example/CheckboxGroup';
 import DefaultRaw from '!!raw-loader!./example/Default';
 import CheckboxGroupRaw from '!!raw-loader!./example/CheckboxGroup';
-import MarkdownView from '../../components/MarkdownView';
 import CheckboxMd from '!!raw-loader!./api/checkbox.md';
 
 export default {

docs/views/select/api/select.md

@@ -1,44 +1,47 @@
 
 >### Desc
- - 태그는 &lt;EvSelect&gt;(이하 <셀렉트>)로 정의
+ - 태그는 &lt;ev-select&gt;(이하 <셀렉트>)로 정의
+ - &lt;EvSelect&gt; 클릭시 나타나는 영역은 dropdown box(이하 <드랍다운 박스>)로 정의
 
 ```
-<EvSelect
+<ev-select
     v-model="초기값(value)"
     :items="[{...}, {...}, {...}]"
 />
 ```
 
  - <셀렉트> 컴포넌트는 `<input type="text" />` 를 래핑하는 구조를 가지고 있다.
- - <셀릭트> 컴포넌트를 클릭하였을 때, :items 속성에 1개 이상의 객체를 가진 배열이 존재하는 경우,
+ - <셀렉트> 컴포넌트를 클릭하였을 때, :items 속성에 1개 이상의 객체를 가진 배열이 존재하는 경우,
    하단에 선택할 리스트 데이터를 보여주는 <드랍다운 박스>가 나타난다.
  - <드랍다운 박스>가 열린 상태에서 <셀렉트>를 한번더 클릭할 시 <드랍다운 박스>는 사라진다. 
  - <드랍다운 박스>는 Vue 3의 `<teleport />` 기능을 사용하여 `body` DOM에 렌더링시킨다.
    이 기능은 애플리케이션 UI를 Vue 앱 외부의 DOM으로 이동시키지만, 코드를 <셀렉트> 컴포넌트에서
    관리하기 위함이다. 
+ - <셀렉트> 컴포넌트의 기본 width는 100%이다.
+   다른 형태를 위해서는 ev-select 클래스에 스타일을 래핑해야한다.
+ - 기본적으로 <드랍다운 박스>의 너비는 <셀렉트> 컴포넌트의 너비와 동일하게 맞춰져 있다.
 
 >### Props
 > 1) 기본 셀렉트 사용 시
 >> <셀렉트>
 >
-> |    이름     |   디폴트  |  타입   |          설명            |                    종류                           |
-  |------------ |-----------|---------|-------------------------|---------------------------------------------------|
-  | v-model     |   null    | Boolean, String, Number   | <셀렉트>에서 선택된 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
-  | placeholder |   ''      | String  | <셀렉트>의 표기문구 |  |
-  | items       |   []      | Array   | <셀렉트> 선택가능한 리스트 |  |
+> | 이름 | 디폴트 | 타입 | 설명 | 종류 |
+  |------|--------|------|------|------|
+  | v-model | null | Boolean, String, Number | <셀렉트>에서 선택된 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
+  | items | [] | Array | <셀렉트> 선택가능한 리스트 |  |
+  | placeholder | '' | String | <셀렉트>의 표기문구 |  |
 > - <셀렉트> 클릭 시 <드랍다운 박스>가 나타나며, 목록 선택 시 <드랍다운 박스>가 닫혀야한다.
 >
 
 >
 > 2) 복수선택 셀렉트 사용 시
 >> <셀렉트>
->
-> |    이름     |   디폴트  |  타입   |          설명            |                    종류                           |
-  |------------ |-----------|---------|-------------------------|---------------------------------------------------|
-  | v-model     |   null    | Boolean, String, Number   | <셀렉트>에서 선택된 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
-  | placeholder |   ''      | String  | <셀렉트>의 표기문구 |  |
-  | items       |   []      | Array   | <셀렉트> 선택가능한 리스트 |  |
-  | multiple    |   false   | Boolean | <셀렉트> 복수 선택 가능여부 |  |
+> | 이름 | 디폴트 | 타입 | 설명 | 종류 |
+  |------|--------|------|------|------|
+  | v-model | null | Boolean, String, Number | <셀렉트>에서 선택된 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
+  | placeholder | '' | String | <셀렉트>의 표기문구 |  |
+  | items | [] | Array | <셀렉트> 선택가능한 리스트 |  |
+  | multiple | false | Boolean | <셀렉트> 복수 선택 가능여부 |  |
 > - <셀렉트> 클릭 시 <드랍다운 박스>가 나타나며, 목록 선택 시 <드랍다운 박스>가 닫히지 말아야 한다.
 >
 

docs/views/select/example/Default.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="case">
     <p class="case-title">Common</p>
-    <EvSelect
+    <ev-select
       v-if="isShow"
       v-model="selectVal1"
       :items="items1"
     />
     <br>
-    <EvSelect
+    <ev-select
       v-model="selectVal2"
       :placeholder="'phdsfsdfjsdhfdfgdfgdfsdjkfhsjkdhjkk'"
       :items="items1"

docs/views/select/index.vue

@@ -2,7 +2,7 @@
   <h2 class="content-title">
     Select
   </h2>
-  <Example
+  <example
     v-for="(component, index) in components"
     :key="`${component.title}_${index}`"
     :title="component.title"
@@ -11,18 +11,18 @@
     :url="component.url"
     :code-text="component.codeText"
   />
-  <MarkdownView
+  <markdown-view
     :source="mdText"
   />
 </template>
 
 <script>
 import { defineAsyncComponent } from 'vue';
 import { parseComponent } from 'vue-template-compiler';
-import Example from '../../components/Example';
+import Example from 'docs/components/Example';
+import MarkdownView from 'docs/components/MarkdownView';
 import Default from './example/Default';
 import DefaultRaw from '!!raw-loader!./example/Default';
-import MarkdownView from '../../components/MarkdownView';
 import apiMd from '!!raw-loader!./api/select.md';
 
 export default {

src/components/checkbox/Checkbox.vue

@@ -3,8 +3,8 @@
     role="checkbox"
     class="ev-checkbox"
     :class="[
-      { 'is-disabled': disabled },
-      { 'is-checked': isChecked },
+      { disabled: disabled },
+      { checked: checked },
     ]"
   >
     <input
@@ -41,7 +41,7 @@ export default {
     },
     label: {
       type: [String, Number, Boolean, Symbol],
-      default: null,
+      required: true,
     },
     disabled: {
       type: Boolean,
@@ -62,7 +62,7 @@ export default {
     );
     const refLabel = computed(() => props.label);
 
-    const isChecked = computed(() => {
+    const checked = computed(() => {
       if (Array.isArray(mv.value)) {
         return mv.value.includes(refLabel.value);
       }
@@ -76,7 +76,7 @@ export default {
 
     return {
       mv,
-      isChecked,
+      checked,
       changeMv,
     };
   },
@@ -93,7 +93,7 @@ export default {
   input {
     cursor: pointer;
   }
-  &.is-disabled {
+  &.disabled {
     cursor: not-allowed;
 
     @include evThemify() {