JSFiddle - React, Tailwind, and code Playground

by uiwwnw

HTML

{
    "presets": [
        [
            "env",
            {
                "modules": false,
                "useBuiltIns": true
            }
        ]
    ]
}

CSS

# easy select
## 손쉽게 select 태그를 커스터마이징하는 E A S Y S E L E C T!!!
## [데모 사이트](https://jsfiddle.net/uiwwnw/h5j3gdrp/)
## div[selector]>ul[data-id]>li[value] 로 다양한 디자인을 구성한 뒤, 이벤트 호출만 하면 끝!!!!!

## 설치
```
npm install easy-select
```

## 사용방법
```html
<!-- 공통 -->
<!-- div[selector]>ul[data-id]>li[value] -->
<!-- 싱글타입 -->
<div class="selector"><!-- class나 id등등의 selector가 필요합니다. -->
  <ul data-id="age"><!-- name의 역할을 하는 data-id를 입력해주세요. -->
    <li value="값" selected disabled><!-- 옵션의 value값, 초기 세팅 값 1개 이상, 클릭 불가능 필요 시 추가 -->
    <!-- 텍스트 또는 html -->
  </ul>
</div>
<!--멀티타입(체크모양)-->
<div class="selector"><!-- class나 id등등의 selector가 필요합니다. -->
  <ul data-id="favorite"><!-- name의 역할을 하는 data-id를 입력해주세요. -->
    <li value="값" checked disabled><!-- 옵션의 value값, 초기 세팅 값 1개 이상, 클릭 불가능 필요 시 추가 -->
    <!-- 텍스트 또는 html -->
    </li>
  </ul>
</div>
```

```javascript
//for mvc
import EasySelect from 'easy-select';
import '@/easy-select/dist/style.min.css';
const select = new EasySelect('.selector'); 
//or const select = new EasySelect('.selector', {options}); 
```

```html
<!-- for html -->
<script src="ease-select.min.js"></script>
<link href="style.min.css">
<script>
  var select = new EasySelect('.selector');
  //or const select = new EasySelect('.selector', {options}); 
</script>
```


## 옵션
```javascript
{
  search: Boolean, // 검색기능
  length: Boolean, // 옵션 총 갯수 노출 여부
  resultLength: Boolean, // 검색결과 노출 여부
  emptyText: String'검색결과없는글자수정',
  placeHolder: String'검색어 입력 기본 글자 수정',
  frontOnlyText: Boolean, // 버튼엔 text만 적용할 경우
  selectToClose: Boolean, // 선택 후 닫기
  onchange: Function, // 온체인지, 벨류가 인자값
  oninvalid: Function, // 벨리데이션, 벨리데이션 텍스트

  //멀티(체크)일때옵션
  check: Boolean,
  min: Number, // 멀티 최소 체크 갯수
  max: Number, // 멀티 최대 체크 갯수
  invalid: { //벨리데이션 텍스트
    min: String, 
    max: String,
    disabled: String
  }
}
```

## getter
```javascript
var select = new EasySelect('.selector');
select.id[data-id].getValue();
//ex select.id.age.getValue();
```

##...

JavaScript

enum dir {
    start,
    end
}

interface Options {
    className?: string; //클래스명 변경
    willChange?: (currentIndex, nextIndex) => {}; // 체인지 콜백
    changed?: (currentIndex) => {}; //체인지 완료후 콜백
    nestingAction?: boolean; //무한 클릭 허용 여부
    autoPlay?: {
        duration: number; // 자동 재생 시간
        clickAndStop: boolean; //클릭 후 자동재생 정지 여부
    };
    button?: boolean; // 버튼 여부
    page?: boolean; // 페이징 여부
    duration?: number; //슬라이드 속도
}

interface elementRect {
    bottom: number;
    height: number;
    left: number;
    right: number;
    top: number;
    width: number;
    x: number;
    y: number;
}

interface Elements {
    carousel?: any;
    items?: any;
    wrap: any;
    button: any;
    page: any;
}

const fakeNext: symbol = Symbol.for('fakeNext');
const noFake: symbol = Symbol.for('noFake');
const fakePrev: symbol = Symbol.for('fakePrev');

const on: symbol = Symbol.for('on');
const off: symbol = Symbol.for('off');
const ing: symbol = Symbol.for('ing');
const done: symbol = Symbol.for('done');

const optionsType = {
    className: 'string',
    willChange: 'function',
    changed: 'function',
    nestingAction: 'boolean',
    autoPlay: {
        duration: 'number',
        clickAndStop: 'boolean'
    },
    button: 'boolean',
    page: 'boolean',
    duration: 'number'
};

const defaultOptions: Options = {
    button: true,
    page: true,
    nestingAction: true,
    duration: 1400,
    className: 'carousel'
};

class Carousel {
    readonly id: string;
    private width: number;
    private status: symbol;
    private autoCheck: symbol;
    private fakeLength: number;
    private sto: any;
    private options: Options;
    private fake: symbol;
    private element: any;
    private length: number;
    private index: number;
    private wrapPosition: number;
    private startPosition: number;
    private endPosition: number;
    private transitionTime: number;

    constructor(e, options: Options) {
        this.id = e;
        const optCheck =...