[#646] [3.0] Select 컴포넌트 개발 (#657)

* [#646] 3.0 Select 컴포넌트 개발 ################ - 3.0버전의 select 컴포넌트 기능 재개발 및 리펙토링 - 단일 셀렉트와 멀티 셀렉트로 구분 - 해당 컴포넌트 클릭 시 드랍다운 박스가 컴포넌트 위치를 찾아 하단에 보여짐 - 드랍다운 박스를 위해 셀렉트 컴포넌트 생성 시 body에 해당 컴포넌트 전용 div가 추가되며, 해당 div 하위로 드랍다운의 DOM이 위치함 - 선택한 항목 전체 삭제 기능 clearable 기능 개발 - 멀티 셀렉트에서 선택한 항목을 태그로 보여주며, 해당 태그의 [x] 아이콘을 통해 단일 삭제 가능 - 멀티 셀렉트에서 선택한 전체 항목을 태그로 보여주는게 기본이며, 이를 생략하여 최초 선택항 항목과 더불어 몇 개가 더 선택되었는지 확인하는 collapse-tags 기능 개발 - DOCS > select 컴포넌트 예제 수정 및 API MD파일 작성 - DOCS > highlight파일 모듈화 * [#646] 3.0 Select 컴포넌트 개발 ################ - filtering 모드 시 검색어 placeholder props 추가 - filtering 검색결과가 없는 경우의 문구 props 추가 - 추가된 props의 MD 문서 추가 - 불필요한 이벤트 옵션 제거
ex-em · Oct 7, 2020 · ad40db0 · ad40db0
1 parent f346771
commit ad40db0
Show file tree

Hide file tree

Showing 10 changed files with 801 additions and 121 deletions.
diff --git a/docs/components/Example.vue b/docs/components/Example.vue
@@ -43,19 +43,12 @@
 
 <script>
 import { ref, onMounted } from 'vue';
-import hljs from 'highlight.js';
+import highlight from 'docs/directives/highlight';
 
 export default {
   name: 'Example',
   directives: {
-    highlight: {
-      mounted(el) {
-        const blocks = el.querySelectorAll('pre');
-        blocks.forEach((block) => {
-          hljs.highlightBlock(block);
-        });
-      },
-    },
+    highlight,
   },
   props: {
     title: {

diff --git a/docs/components/MarkdownView.vue b/docs/components/MarkdownView.vue
@@ -12,19 +12,12 @@
 <script>
 import { computed } from 'vue';
 import marked from 'marked';
-import hljs from 'highlight.js';
+import highlight from 'docs/directives/highlight';
 
 export default {
   name: 'Example',
   directives: {
-    highlight: {
-      mounted(el) {
-        const blocks = el.querySelectorAll('pre');
-        blocks.forEach((block) => {
-          hljs.highlightBlock(block);
-        });
-      },
-    },
+    highlight,
   },
   components: {
   },

diff --git a/docs/directives/highlight.js b/docs/directives/highlight.js
@@ -0,0 +1,12 @@
+import hljs from 'highlight.js';
+
+const highlight = {
+  mounted(el) {
+    const blocks = el.querySelectorAll('pre');
+    blocks.forEach((block) => {
+      hljs.highlightBlock(block);
+    });
+  },
+};
+
+export default highlight;
diff --git a/docs/views/select/api/select.md b/docs/views/select/api/select.md
@@ -1,7 +1,7 @@
 
 >### Desc
  - 태그는 &lt;ev-select&gt;(이하 <셀렉트>)로 정의
- - &lt;EvSelect&gt; 클릭시 나타나는 영역은 dropdown box(이하 <드랍다운 박스>)로 정의
+ - &lt;ev-select&gt; 클릭시 나타나는 영역은 dropdown box(이하 <드랍다운 박스>)로 정의
 
 ```
 <ev-select
@@ -22,26 +22,36 @@
  - 기본적으로 <드랍다운 박스>의 너비는 <셀렉트> 컴포넌트의 너비와 동일하게 맞춰져 있다.
 
 >### Props
-> 1) 기본 셀렉트 사용 시
->> <셀렉트>
+> 1) 셀렉트 사용 시
 >
 > | 이름 | 디폴트 | 타입 | 설명 | 종류 |
   |------|--------|------|------|------|
   | v-model | null | Boolean, String, Number | <셀렉트>에서 선택된 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
   | items | [] | Array | <셀렉트> 선택가능한 리스트 |  |
   | placeholder | '' | String | <셀렉트>의 표기문구 |  |
+  | disabled | false | Boolean | <셀렉트> 사용가능 여부 |  |
+  | clearable | false | Boolean | <셀렉트>에 선택된 항목들 모두 clear기능 사용여부 |  |
+  | filterable | false | Boolean | <셀렉트> 항목들 필터링 기능 사용여부 |  |
+  | searchPlaceholder | '' | String | <셀렉트> 필터링의 표기문구 |  |
+  | noMatchingText | '' | String | <셀렉트> 필터링 결과가 없을 시 표기문구 |  |
 > - <셀렉트> 클릭 시 <드랍다운 박스>가 나타나며, 목록 선택 시 <드랍다운 박스>가 닫혀야한다.
 >
 
 >
-> 2) 복수선택 셀렉트 사용 시
->> <셀렉트>
+> 2) 멀티 셀렉트 사용 시
+>
 > | 이름 | 디폴트 | 타입 | 설명 | 종류 |
   |------|--------|------|------|------|
   | v-model | null | Boolean, String, Number | <셀렉트>에서 선택된 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
-  | placeholder | '' | String | <셀렉트>의 표기문구 |  |
   | items | [] | Array | <셀렉트> 선택가능한 리스트 |  |
+  | placeholder | '' | String | <셀렉트>의 표기문구 |  |
   | multiple | false | Boolean | <셀렉트> 복수 선택 가능여부 |  |
+  | disabled | false | Boolean | <셀렉트> 사용가능 여부 |  |
+  | clearable | false | Boolean | <셀렉트>에 선택된 항목들 모두 clear기능 사용여부 |  |
+  | collapse-tags | false | Boolean | <셀렉트>에 선택된 항목의 생략 태그기능 사용여부 | { 항목1 (x) } { +1 } |
+  | filterable | false | Boolean | <셀렉트> 항목들 필터링 기능 사용여부 |  |
+  | searchPlaceholder | '' | String | <셀렉트> 필터링의 표기문구 |  |
+  | noMatchingText | '' | String | <셀렉트> 필터링 결과가 없을 시 표기문구 |  |
 > - <셀렉트> 클릭 시 <드랍다운 박스>가 나타나며, 목록 선택 시 <드랍다운 박스>가 닫히지 말아야 한다.
 >
 
@@ -53,4 +63,4 @@
  | change | event | <셀렉트> 내 v-model 변화 이벤트 감지 |
 
 >### 참고
- - 현재 개발 진행 중
+ - 
diff --git a/docs/views/select/example/Default.vue b/docs/views/select/example/Default.vue
@@ -2,15 +2,10 @@
   <div class="case">
     <p class="case-title">Common</p>
     <ev-select
-      v-if="isShow"
       v-model="selectVal1"
       :items="items1"
-    />
-    <br>
-    <ev-select
-      v-model="selectVal2"
-      :placeholder="'phdsfsdfjsdhfdfgdfgdfsdjkfhsjkdhjkk'"
-      :items="items1"
+      placeholder="Please select value."
+      @change="changeSelect1"
     />
     <div class="description">
       <button
@@ -20,23 +15,71 @@
       </button>
       first selectbox value : {{ selectVal1 }}
     </div>
+    <div class="description">
+      change val : {{ selectEventVal.val }} / change e : {{ selectEventVal.e }}
+    </div>
+  </div>
+  <div class="case">
+    <p class="case-title">Disabled Item</p>
+    <ev-select
+      v-model="selectVal3"
+      :items="items3"
+    />
+    <div class="description">
+      <button
+        @click="disableIdx1"
+      >
+        Disable Items[1]
+      </button>
+      selected value : {{ selectVal3 }}
+    </div>
+    <div class="description">
+      items : {{ items3 }}
+    </div>
+  </div>
+  <div class="case">
+    <p class="case-title">Disabled Select</p>
+    <ev-select
+      v-model="selectVal4"
+      :items="items4"
+      :disabled="isDisabled"
+    />
+    <br>
     <div class="description">
       <button
-        @click="toggleEvSelect"
+        @click="disableSelect"
       >
-        ON / OFF
+        Disable Selectbox
       </button>
+      selected value : {{ selectVal4 }}
     </div>
   </div>
+  <div class="case">
+    <p class="case-title">Clearable Select</p>
+    <ev-select
+      v-model="selectVal4"
+      :items="items4"
+      placeholder="Please Select Item."
+      clearable
+    />
+  </div>
+  <div class="case">
+    <p class="case-title">Filterable Select</p>
+    <ev-select
+      v-model="selectVal4"
+      :items="items4"
+      placeholder="Please Select Item."
+      filterable
+    />
+  </div>
 </template>
 
 <script>
-import { ref } from 'vue';
+import { ref, reactive } from 'vue';
 
 export default {
   setup() {
-    const selectVal1 = ref('value4');
-    const selectVal2 = ref('');
+    const selectVal1 = ref('');
     const items1 = ref([
       {
         name: 'name0name0name0name0name0',
@@ -75,24 +118,88 @@ export default {
         value: 'value8',
       },
     ]);
+    const selectEventVal = reactive({
+      e: null,
+      val: null,
+    });
 
-    const isShow = ref(true);
-    const toggleEvSelect = () => { isShow.value = !isShow.value; };
     const addItem = () => {
       const count = items1.value.length;
       items1.value.push({
         name: `name${count}`,
         value: `value${count}`,
       });
     };
+    const changeSelect1 = (val, e) => {
+      selectEventVal.val = val;
+      selectEventVal.e = e;
+    };
+
+    const selectVal3 = ref('value1');
+    const items3 = ref([
+      {
+        name: 'name1',
+        value: 'value1',
+      },
+      {
+        name: 'name2',
+        value: 'value2',
+        disabled: true,
+      },
+      {
+        name: 'name3',
+        value: 'value3',
+      },
+    ]);
+    const disableIdx1 = () => {
+      items3.value[1].disabled = !items3.value[1].disabled;
+    };
+
+    const selectVal4 = ref('value2');
+    const items4 = ref([
+      {
+        name: 'name1',
+        value: 'value1',
+      },
+      {
+        name: 'name2',
+        value: 'value2',
+      },
+      {
+        name: 'name3',
+        value: 'value3',
+      },
+      {
+        name: 'name13',
+        value: 'value13',
+      },
+      {
+        name: 'name23',
+        value: 'value23',
+      },
+      {
+        name: 'name33',
+        value: 'value33',
+      },
+    ]);
+    const isDisabled = ref(true);
+    const disableSelect = () => { isDisabled.value = !isDisabled.value; };
 
     return {
-      isShow,
-      toggleEvSelect,
       selectVal1,
-      selectVal2,
       items1,
+      selectEventVal,
       addItem,
+      changeSelect1,
+
+      selectVal3,
+      items3,
+      disableIdx1,
+
+      selectVal4,
+      items4,
+      isDisabled,
+      disableSelect,
     };
   },
 };