diff --git a/README.md b/README.md index 6e6f722..9ad2b11 100644 --- a/README.md +++ b/README.md @@ -2,8 +2,8 @@ Datepicker -Source: [https://gitea.node001.net/tiny-components/raw](https://gitea.node001.net/tiny-components/raw) -Mirror: [https://github.com/node001-net/tiny-components-raw](https://github.com/node001-net/tiny-components-raw) +Source: [https://gitea.node001.net/tiny-components/datepicker](https://gitea.node001.net/tiny-components/datepicker) +Mirror: [https://github.com/node001-net/tiny-components-datepicker](https://github.com/node001-net/tiny-components-datepicker) ## Installation @@ -16,18 +16,16 @@ Setup this registry in your project .npmrc file: Install with npm or yarn ``` -npm i --save @tiny-components/raw -yarn add @tiny-components/raw +npm i --save @tiny-components/datepicker +yarn add @tiny-components/datepicker ``` ## Using -Thats all, html in String will not escaped. ``` - + ``` - ## i18n [List of locales](https://github.com/iamkun/dayjs/tree/dev/src/locale) diff --git a/example/example.css b/example/example.css index 375142a..6d00d2c 100644 --- a/example/example.css +++ b/example/example.css @@ -14840,3 +14840,12 @@ svg.field-choice__checked { .tiny-datepicker__button { padding: 0.5em 0.75em; } + +.console { + overflow-y: scroll; + max-height: 350px; + background: gray; + padding: 1em 1.5em; + background: #ddd; + border: 1px solid #b3b3b3; +} diff --git a/example/example.js b/example/example.js index 1f1ea91..1d71d2e 100644 --- a/example/example.js +++ b/example/example.js @@ -361,16 +361,26 @@ __webpack_require__.r(__webpack_exports__); "use strict"; __webpack_require__.r(__webpack_exports__); -/* harmony import */ var riot__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! riot */ "./node_modules/riot/esm/api/register.js"); -/* harmony import */ var riot__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! riot */ "./node_modules/riot/esm/riot.js"); +/* harmony import */ var riot__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! riot */ "./node_modules/riot/esm/api/register.js"); +/* harmony import */ var riot__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! riot */ "./node_modules/riot/esm/riot.js"); /* harmony import */ var _datepicker_riot__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./datepicker.riot */ "./src/datepicker.riot"); -/* harmony import */ var dayjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! dayjs */ "./node_modules/dayjs/dayjs.min.js"); -/* harmony import */ var dayjs__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(dayjs__WEBPACK_IMPORTED_MODULE_2__); +/* harmony import */ var _store_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./store.js */ "./src/store.js"); +/* harmony import */ var dayjs__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! dayjs */ "./node_modules/dayjs/dayjs.min.js"); +/* harmony import */ var dayjs__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(dayjs__WEBPACK_IMPORTED_MODULE_3__); + -riot__WEBPACK_IMPORTED_MODULE_1__.register('tiny-datepicker', _datepicker_riot__WEBPACK_IMPORTED_MODULE_0__["default"]); +riot__WEBPACK_IMPORTED_MODULE_2__.register('tiny-datepicker', _datepicker_riot__WEBPACK_IMPORTED_MODULE_0__["default"]); -window.riot = riot__WEBPACK_IMPORTED_MODULE_3__; +window.riot = riot__WEBPACK_IMPORTED_MODULE_4__; +document.addEventListener("DOMContentLoaded", function (event) { + var console = document.querySelector('.console'); + _store_js__WEBPACK_IMPORTED_MODULE_1__["default"].on('change', function (data) { + var element = document.createElement('div'); + element.append('Event => Change, ' + data.date.format('YYYY-MM-DD')); + console.append(element); + }); +}); /***/ }), @@ -395,8 +405,12 @@ __webpack_require__.r(__webpack_exports__); +// add function for iso + dayjs__WEBPACK_IMPORTED_MODULE_0___default().extend((dayjs_plugin_isoWeek__WEBPACK_IMPORTED_MODULE_2___default())); +// getting local data for names + dayjs__WEBPACK_IMPORTED_MODULE_0___default().extend((dayjs_plugin_localeData__WEBPACK_IMPORTED_MODULE_3___default())); /** @@ -433,6 +447,8 @@ dayjs__WEBPACK_IMPORTED_MODULE_0___default().extend((dayjs_plugin_localeData__WE } else { this.state.date = dayjs__WEBPACK_IMPORTED_MODULE_0___default()(); } + + // change if (this.props.isoFormat === 0) { this.state.isoFormat = false; this.state.weekFormat = 'week'; diff --git a/example/index.html b/example/index.html index 9ac6a1f..d8e63cd 100644 --- a/example/index.html +++ b/example/index.html @@ -36,9 +36,14 @@
-
+
+
+
+ +
+
diff --git a/example/symbol-defs.svg b/example/symbol-defs.svg index 250cd5e..c533c87 100644 --- a/example/symbol-defs.svg +++ b/example/symbol-defs.svg @@ -1 +1 @@ -addarchivearrow-downarrow-left-downarrow-left-uparrow-leftarrow-right-downarrow-right-uparrow-rightarrow-upattachmentbackspacebanbar-chart-altbar-chartboardboldbookbookmarkcalendarcallcameracaret-downcaret-leftcaret-rightcaret-upcheckcheckbox-checkedcheckboxchevron-double-downchevron-double-leftchevron-double-rightchevron-double-upchevron-downchevron-leftchevron-rightchevron-upcircle-addcircle-arrow-downcircle-arrow-leftcircle-arrow-rightcircle-arrow-upcircle-checkcircle-errorcircle-helpcircle-informationcircle-removecircle-warningcircleclipboard-checkclipboard-listclipboardclockclosecloud-downloadcloud-uploadcloudcloudycommentcompasscomputercopycredit-carddatabasedelete-altdeletedocument-adddocument-checkdocument-downloaddocument-emptydocument-removedocumentdownloaddragdropedit-alteditemailenterexpandexportexternal-linkeye-offeyefavoritefilter-1filter-altfilterflagfogfolder-addfolder-checkfolder-downloadfolder-removefoldergridhearthomeimageinboxitaliclaptoplayerslayoutlink-altlinklistlocationlocklog-inlog-outmapmegaphonemenumessage-altmessageminimizemobilemoonnextnotification-offnotificationoptions-horizontaloptions-verticalpausepenpercentagepinplaypreviousprintrainrefreshremovereorder-altreorderrepeatsavesearchselectsendsettingsshareshopping-cart-addshopping-cartshufflesnowsnowflakesortspeakersstopstormstrikethroughsunsunrise-altsunrisesunsetswitchtabletablettagtemperaturetextthree-rowstwo-columnstwo-rowsunderlineundounlockuser-adduser-checkuser-removeuserusersvolume-offvolume-upwarningwebcamwindwindowzoom-inzoom-out \ No newline at end of file +addarchivearrow-downarrow-left-downarrow-left-uparrow-leftarrow-right-downarrow-right-uparrow-rightarrow-upattachmentbackspacebanbar-chart-altbar-chartboardboldbookbookmarkcalendarcallcameracaret-downcaret-leftcaret-rightcaret-upcheckcheckbox-checkedcheckboxchevron-double-downchevron-double-leftchevron-double-rightchevron-double-upchevron-downchevron-leftchevron-rightchevron-upcircle-addcircle-arrow-downcircle-arrow-leftcircle-arrow-rightcircle-arrow-upcircle-checkcircle-errorcircle-helpcircle-informationcircle-removecircle-warningcircleclipboard-checkclipboard-listclipboardclockclosecloud-downloadcloud-uploadcloudcloudycommentcompasscomputercopycredit-carddatabasedelete-altdeletedocument-adddocument-checkdocument-downloaddocument-emptydocument-removedocumentdownloaddragdropedit-alteditemailenterexpandexportexternal-linkeye-offeyefavoritefilter-1filter-altfilterflagfogfolder-addfolder-checkfolder-downloadfolder-removefoldergridhearthomeimageinboxitaliclaptoplayerslayoutlink-altlinklistlocationlocklog-inlog-outmapmegaphonemenumessage-altmessageminimizemobilemoonnextnotification-offnotificationoptions-horizontaloptions-verticalpausepenpercentagepinplaypreviousprintrainrefreshremovereorder-altreorderrepeatsavesearchselectsendsettingsshareshopping-cart-addshopping-cartshufflesnowsnowflakesortspeakersstopstormstrikethroughsunsunrise-altsunrisesunsetswitchtabletablettagtemperaturetextthree-rowstwo-columnstwo-rowsunderlineundounlockuser-adduser-checkuser-removeuserusersvolume-offvolume-upwarningwebcamwindwindowzoom-inzoom-outgiteagithub \ No newline at end of file diff --git a/src/example.js b/src/example.js index e2114f4..e3072d2 100644 --- a/src/example.js +++ b/src/example.js @@ -1,8 +1,21 @@ import * as riot from 'riot' import Datepicker from './datepicker.riot' +import store from './store.js' riot.register('tiny-datepicker', Datepicker) import dayjs from 'dayjs' window.riot = riot + +document.addEventListener("DOMContentLoaded", (event) => { + + const console = document.querySelector('.console') + + store.on('change', (data) => { + const element = document.createElement('div') + + element.append('Event => Change, ' + data.date.format('YYYY-MM-DD')) + console.append(element) + }) +}) diff --git a/src/example.scss b/src/example.scss index 262d5fe..f6afc9e 100644 --- a/src/example.scss +++ b/src/example.scss @@ -1,3 +1,12 @@ @import '../node_modules/@tiny-components/plain-ui/src/scss/plain-ui', 'styles'; + +.console { + overflow-y: scroll; + max-height: 350px; + background: gray; + padding: 1em 1.5em; + background: #ddd; + border: 1px solid #b3b3b3; +} diff --git a/src/icons/brands/gitea.svg b/src/icons/brands/gitea.svg new file mode 100644 index 0000000..1c70e3c --- /dev/null +++ b/src/icons/brands/gitea.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/icons/brands/github.svg b/src/icons/brands/github.svg new file mode 100644 index 0000000..93af7db --- /dev/null +++ b/src/icons/brands/github.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/webpack.mix.js b/webpack.mix.js index 86078d0..93d642e 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -31,7 +31,10 @@ mix.webpackConfig({ } ]}, plugins: [ - new SvgSpritemapPlugin('node_modules/@tiny-components/plain-ui/src/icons/mono-icons/svg/*.svg', { + new SvgSpritemapPlugin([ + 'node_modules/@tiny-components/plain-ui/src/icons/mono-icons/svg/*.svg', + 'src/icons/brands/*.svg' + ], { output: { filename: 'symbol-defs.svg', chunk: {