first commit

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+/dist/index.html
+npm-debug.log

README.md

@@ -0,0 +1,59 @@
+<h1 align="center">ESelector</h1>
+
+> A simple and beautiful selector
+
+## Introduction
+
+ESelector is a simple and beautiful selector kit
+
+**[Docs](https://eselector.js.org)**
+
+**[中文文档](https://eselector.js.org/#/zh-Hans/)**
+
+## Quick Start
+
+```html
+<link rel="stylesheet" type="text/css" href="ESelector.min.css" />
+<div class="input-wrap">
+    <input id="eselector-target" type="text">
+    <div id="eselector"></div>
+</div>
+<script src="ESelector.min.js"></script>
+```
+
+```js
+const es = new ESelector({
+    container: document.getElementById('eselector'),
+    target: document.getElementById('eselector-target')
+});
+```
+
+## Selector Types
+
+### Calendar
+
+## Join the Discussion
+
+[QQ Group](): Not yet.
+
+## Contributors
+
+This project exists thanks to all the people who contribute.
+
+## Donate
+
+ESelector is an MIT licensed open source project and completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.
+
+## One-time Donations
+
+We accept donations through these channels:
+
+-   [WeChat Pay]()
+-   [Alipay]()
+
+# Author
+
+**ESelector** © [Eling486](https://github.com/Eling486), Released under the [MIT](./LICENSE) License.<br>
+Authored and maintained by Eling486 with help from contributors ([list](https://github.com/Eling486/ESelector/contributors)).
+
+> [Blog](https://elingweb.com) · GitHub [@Eling486](https://github.com/Eling486)

package.json

@@ -0,0 +1,49 @@
+{
+  "name": "eselector",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/ESelector.min.js",
+  "scripts": {
+    "dev": "webpack --config webpack/dev.config.js",
+    "build": "webpack --config webpack/prod.config.js",
+    "docs:dev": "vuepress dev docs",
+    "docs:build": "vuepress build docs"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "selector",
+    "html5"
+  ],
+  "author": "Eling",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "art-template": "^4.13.2",
+    "art-template-loader": "^1.4.3",
+    "autoprefixer": "^9.6.1",
+    "babel-loader": "^8.2.2",
+    "css-loader": "^5.0.1",
+    "cssnano": "^4.1.10",
+    "exports-loader": "^2.0.0",
+    "file-loader": "^6.2.0",
+    "mini-css-extract-plugin": "^1.3.0",
+    "node-sass": "^5.0.0",
+    "postcss-loader": "^3.0.0",
+    "postcss-modules-values": "^4.0.0",
+    "sass-loader": "^10.1.1",
+    "source-map": "^0.7.3",
+    "style-loader": "^2.0.0",
+    "svg-inline-loader": "^0.8.2",
+    "template-string-optimize-loader": "^3.0.0",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.16.0",
+    "webpack-cli": "^4.3.1",
+    "webpack-dev-server": "^3.11.2"
+  },
+  "dependencies": {
+    "lodash": "^4.17.20"
+  }
+}

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: [
+      require('autoprefixer')
+    ]
+  }

src/css/index.scss

@@ -0,0 +1,148 @@
+.eselector-body {
+    font-family: Arial, Helvetica, sans-serif;
+    overflow: hidden;
+    user-select: none;
+    box-sizing: content-box;
+    --eselector_bgcolor: #ffffff;
+    --eselector_txtcolor: #000000;
+    --eselector_shadow_color: 21, 101, 192;
+    --eselector_bgcolor_able: #ffffff;
+    --eselector_txtcolor_able: #1565C0;
+    --eselector_bgcolor_disabled: #ededed;
+    --eselector_txtcolor_disabled: #888888;
+    --eselector_bgcolor_hover: #6999d3;
+    --eselector_txtcolor_hover: #ffffff;
+}
+
+.eselector-body.date-selector{
+  position: relative;
+  display: block;
+  top: 0;
+  width: 200px;
+  height: 0px;
+  margin: 5px;
+  background-color: var(--eselector_bgcolor);
+  color: var(--eselector_txtcolor);
+  border-radius: 5px;
+  z-index: 10;
+  font-size: 14px;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  user-select: none;
+  transition: all .4s;
+  -webkit-transition: all .4s;
+}
+
+.eselector-body.date-selector.active {
+    height: 220px;
+    padding: 8px;
+    border: #ededed solid 1px;
+    box-shadow: 0 2px 2px 0 rgba(var(--eselector_shadow_color), 0.1),
+    0 4px 8px 0 rgba(var(--eselector_shadow_color), 0.2);
+  }
+
+  .eselector-body *{
+    box-sizing: content-box;
+  }
+
+  .eselector-body.date-selector .control-wrap {
+    text-align: center;
+  }
+
+  .eselector-body.date-selector .control-wrap button.btn {
+    display: inline-block;
+    font-size: 1.3em;
+    width: 25px;
+    height: 25px;
+    background-color: transparent;
+    border: none;
+    margin: 0;
+    outline: none;
+    opacity: .8;
+    vertical-align: middle;
+    padding: 0;
+    font-size: 12px;
+    transition: all .15s;
+    -webkit-transition: all .15s;
+  }
+
+  .eselector-body.date-selector .control-wrap button.btn:hover {
+    cursor: not-allowed;
+  }
+
+  .eselector-body.date-selector .control-wrap button.btn.active:hover {
+    background-color: var(--eselector_bgcolor_hover);
+    color: var(--eselector_txtcolor_hover);
+    cursor: pointer;
+  }
+  .eselector-body.date-selector .control-wrap button span.eselector-icon{
+    display: inline-block;
+    vertical-align:middle;
+    width: 15px;
+    height: 15px;
+    color: var(--eselector_txtcolor);
+  }
+  .eselector-body.date-selector .control-wrap button.btn.active:hover span.eselector-icon{
+    color: var(--eselector_bgcolor_able);
+  }
+  .eselector-body.date-selector .control-wrap .text#year-month {
+    display: inline-block;
+    vertical-align:middle;
+    line-height: 25px;
+  }
+
+  .eselector-body.date-selector .calendar-content {
+    text-align: center;
+    margin: 3px auto;
+  }
+  .eselector-body.date-selector .calendar-content td.calendar-item,
+  .eselector-body.date-selector .calendar-content td.calendar-row-title {
+    display: inline-block;
+    line-height: 25px;
+    width: 25px;
+    text-align: center;
+    margin: 0;
+    padding: 1px;
+  }
+  .eselector-body.date-selector .calendar-content td.calendar-row-title{
+    background-color: var(--eselector_bgcolor);
+  }
+  .eselector-body.date-selector .calendar-content td.calendar-item{
+    background-color: var(--eselector_bgcolor_able);
+  }
+
+  .eselector-body.date-selector .calendar-content td.calendar-item {
+    background-color: var(--eselector_bgcolor_disabled);
+    color: var(--eselector_txtcolor_disabled);
+    transition: all .15s;
+    -webkit-transition: all .15s;
+  }
+
+  .eselector-body.date-selector .calendar-content td.calendar-item.this:hover {
+    cursor: not-allowed;
+  }
+
+  .eselector-body.date-selector .calendar-content td.calendar-item.this.optional {
+    background-color: var(--eselector_bgcolor_able);
+    color: var(--eselector_txtcolor_able);
+  }
+
+  .eselector-body.date-selector .calendar-content td.calendar-item.this.optional:hover {
+    background-color: var(--eselector_bgcolor_hover);
+    color: var(--eselector_txtcolor_hover);
+    cursor: pointer;
+  }
+
+  .eselector-body.date-selector .calendar-content td.calendar-item.this.selected {
+    background-color: var(--eselector_txtcolor_able);
+    color: var(--eselector_bgcolor_able);
+  }
+
+  .eselector-body.date-selector .calendar-content td.calendar-item.prev:hover,
+  .eselector-body.date-selector .calendar-content td.calendar-item.next:hover {
+    cursor: pointer;
+  }
+
+  .eselector-body.date-selector .calendar-content td.calendar-item.not-allow:hover {
+    cursor: not-allowed;
+  }

src/js/controllers/calendar.js

@@ -0,0 +1,74 @@
+import utils from '../utils';
+
+class Controller {
+    constructor(selector) {
+        this.selector = selector;
+        this.options = selector.options
+
+        this.addTargetListener()
+        this.initNextMonthButton();
+        this.initNextYearButton();
+        this.initPrevMonthButton();
+        this.initPrevYearButton();
+        this.initCancelButton();
+        this.initCalendarItems();
+    }
+
+    addTargetListener(){
+        this.options.target.addEventListener('focus', () => {
+            this.selector.showCalendar();
+        });
+    }
+    initNextMonthButton() {
+        this.selector.template.nextMonthButton.addEventListener('click', () => {
+            if(this.selector.template.control.next_month == true){
+                this.selector.changeCalender('nextMonth');
+            }
+        });
+    }
+
+    initNextYearButton() {
+        this.selector.template.nextYearButton.addEventListener('click', () => {
+            if(this.selector.template.control.next_year == true){
+                this.selector.changeCalender('nextYear');
+            }
+        });
+    }
+
+    initPrevMonthButton() {
+        this.selector.template.prevMonthButton.addEventListener('click', () => {
+            if(this.selector.template.control.prev_month == true){
+                this.selector.changeCalender('prevMonth');
+            }
+        });
+    }
+
+    initPrevYearButton() {
+        this.selector.template.prevYearButton.addEventListener('click', () => {
+            if(this.selector.template.control.prev_year == true){
+                this.selector.changeCalender('prevYear');
+            }
+        });
+    }
+    initCancelButton() {
+        this.selector.template.cancelButton.addEventListener('click', () => {
+            this.selector.selectNone();
+        });
+    }
+
+    initCalendarItems() {
+        this.selector.template.calendarContent.addEventListener('click', (e) => {
+            if(e.target.classList[2] == 'this' && e.target.classList[3] == 'optional'){
+                this.selector.selectDate(e.target.innerHTML)
+            }
+            if(e.target.classList[2] == 'prev' && this.selector.template.control.prev_month == true){
+                this.selector.changeCalender('prevMonth', this.options);
+            }
+            if(e.target.classList[2] == 'next' && this.selector.template.control.next_month == true){
+                this.selector.changeCalender('nextMonth', this.options);
+            }
+        });
+    }
+}
+
+export default Controller;