tiny-components
/
datepicker
1
0
Fork 0
Code Issues Pull Requests Projects Releases 6 Wiki Activity

adding new logic for dispatcher, change icons

Browse Source
main
HerrHase 4 days ago
parent 88e096c5d4
commit 05ace91e25
30 changed files with 2464 additions and 19275 deletions
Show Stats Download Patch File Download Diff File

17
README.md
Unescape View File

@ -28,6 +28,15 @@ yarn add @tiny-components/datepicker
## Using ## Using
```
const dispatcher = observable()
riot.register('tiny-datepicker', Datepicker)
riot.mount('tiny-datepicker', {
'dispatcher': dispatcher
})
```
``` ```
<tiny-datepicker></tiny-datepicker> <tiny-datepicker></tiny-datepicker>
``` ```
@ -49,9 +58,7 @@ For setting date on start,
If Date will "change", If Date will "change",
``` ```
import store from './store.js' dispatcher.on('change', (data) => {
store.on('change', (data) => {
console.log(data.date.format('YYYY-MM-DD')) console.log(data.date.format('YYYY-MM-DD'))
}) })
@ -60,9 +67,7 @@ store.on('change', (data) => {
Send Datepicker a new Date, Send Datepicker a new Date,
``` ```
import store from './store.js' dispatcher.trigger('update', {
store.trigger('update', {
date: '2012-10-20' date: '2012-10-20'
}) })

BIN
bun.lockb
View File

Binary file not shown.

6
example/assets-manifest.json
Unescape View File

@ -0,0 +1,6 @@
{
"/example/js/spritemap.js": "/example/js/spritemap.js?version=f464bb8bff227fdb32109459b97ac778",
"/example/symbol-defs.svg": "/example/symbol-defs.svg?version=a8d884258d50d4545fa128d8c1164151",
"/example/js/example.js": "/example/js/example.js?version=cc8851cc28fbd291bb48f30f0021d2a6",
"/example/css/styles.css": "/example/css/styles.css?version=265d430becfad1bc25c71c1ac373d0b1"
}

0
example/IBMPlexMono-Bold.eot → example/css/IBMPlexMono-Bold.eot
Unescape View File

0
example/IBMPlexMono-Bold.ttf → example/css/IBMPlexMono-Bold.ttf
Unescape View File

0
example/IBMPlexMono-Bold.woff → example/css/IBMPlexMono-Bold.woff
Unescape View File

0
example/IBMPlexMono-Bold.woff2 → example/css/IBMPlexMono-Bold.woff2
Unescape View File

0
example/IBMPlexMono.eot → example/css/IBMPlexMono.eot
Unescape View File

0
example/IBMPlexMono.ttf → example/css/IBMPlexMono.ttf
Unescape View File

0
example/IBMPlexMono.woff → example/css/IBMPlexMono.woff
Unescape View File

0
example/IBMPlexMono.woff2 → example/css/IBMPlexMono.woff2
Unescape View File

2357
example/css/styles.css
View File

File diff suppressed because it is too large Load Diff

14851
example/example.css
View File

File diff suppressed because it is too large Load Diff

4253
example/example.js
View File

File diff suppressed because one or more lines are too long

16
example/index.html
Unescape View File

@ -5,7 +5,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Tiny Components | Datepicker</title> <title>Tiny Components | Datepicker</title>
<link rel="icon" href="data:,"> <link rel="icon" href="data:,">
<link href="/example.css" rel="stylesheet" type="text/css"> <link href="/css/styles.css" rel="stylesheet" type="text/css">
</head> </head>
<body> <body>
@ -18,18 +18,12 @@
</h1> </h1>
</div> </div>
<div class="bar__main justify-end"> <div class="bar__main justify-end">
<a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.node001.net/tiny-components/slider" rel="noopener" target="_blank"> <a class="button button--small m-left-sm-3 m-bottom-0" href="https://git.node001.net/tiny-components/datepicker" rel="noopener" target="_blank">
Gitea Gitea
<svg class="m-left-3 icon fill-text" aria-hidden="true"> <svg class="m-left-3 icon fill-text" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-gitea"></use> <use xlink:href="/symbol-defs.svg#icon-gitea"></use>
</svg> </svg>
</a> </a>
<a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.node001.net/tiny-components/slider" rel="noopener" target="_blank">
Github
<svg class="m-left-3 icon fill-text" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-github"></use>
</svg>
</a>
</div> </div>
</div> </div>
</header> </header>
@ -46,10 +40,12 @@
</div> </div>
</div> </div>
</div> </div>
<script defer src="/example.js"></script> <script defer src="/js/example.js"></script>
<script defer> <script defer>
window.addEventListener('DOMContentLoaded', (event) => { window.addEventListener('DOMContentLoaded', (event) => {
riot.mount('tiny-datepicker') riot.mount('tiny-datepicker', {
'dispatcher': window.dispatcher
})
}) })
</script> </script>

1
example/js/example.js
View File

File diff suppressed because one or more lines are too long

1
example/js/spritemap.js
Unescape View File

@ -0,0 +1 @@
(self.webpackChunk_tiny_components_datepicker=self.webpackChunk_tiny_components_datepicker||[]).push([["spritemap"],{"?4e0c"(){eval("{\n\n//# sourceURL=webpack://@tiny-components/datepicker/spritemap-dummy-module?\n}")}}]);

2
example/symbol-defs.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

4
package-lock.json generated
Unescape View File

@ -1,12 +1,12 @@
{ {
"name": "@tiny-components/datepicker", "name": "@tiny-components/datepicker",
"version": "0.1.0", "version": "0.3.2",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@tiny-components/datepicker", "name": "@tiny-components/datepicker",
"version": "0.1.0", "version": "0.3.2",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@riotjs/observable": "^4.1.1", "@riotjs/observable": "^4.1.1",

16
package.json
Unescape View File

@ -1,6 +1,6 @@
{ {
"name": "@tiny-components/datepicker", "name": "@tiny-components/datepicker",
"version": "0.3.2", "version": "0.4.0",
"description": "Datepicker for Desktop and Mobile", "description": "Datepicker for Desktop and Mobile",
"repository": { "repository": {
"type": "git", "type": "git",
@ -11,16 +11,16 @@
"dependencies": { "dependencies": {
"@riotjs/observable": "^4.1.1", "@riotjs/observable": "^4.1.1",
"@tiny-components/plain-ui": "^0.6.0", "@tiny-components/plain-ui": "^0.6.0",
"dayjs": "^1.11.7", "dayjs": "^1.11.19",
"hammerjs": "^2.0.8", "hammerjs": "^2.0.8",
"riot": "^7.1.0" "riot": "^10.1.2"
}, },
"devDependencies": { "devDependencies": {
"@riotjs/webpack-loader": "^6.0.0", "@riotjs/webpack-loader": "^6.0.0",
"laravel-mix": "^6.0.49", "@tiny-components/webpack": "^0.6.0"
"laravel-mix-purgecss": "^6.0.0", },
"sass": "^1.62.1", "scripts": {
"sass-loader": "^12.6.0", "build": "webpack --mode development --config webpack.config.js",
"svg-spritemap-webpack-plugin": "^4.5.0" "build-production": "webpack --mode production --config webpack.config.js"
} }
} }

16
src/datepicker.riot
Unescape View File

@ -20,7 +20,9 @@
<div class="tiny-datepicker__select m-top-3 m-bottom-3"> <div class="tiny-datepicker__select m-top-3 m-bottom-3">
<button class="button m-bottom-0 tiny-datepicker__button" onclick={ () => { handlePreviousMonth(event) }}> <button class="button m-bottom-0 tiny-datepicker__button" onclick={ () => { handlePreviousMonth(event) }}>
&lArr; <svg class="icon fill-text" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-left"></use>
</svg>
</button> </button>
<div class="tiny-datepicker__label m-top-3 m-bottom-3"> <div class="tiny-datepicker__label m-top-3 m-bottom-3">
<select class="field-choice" onchange={ (event) => { handleSelectMonth(event) }}> <select class="field-choice" onchange={ (event) => { handleSelectMonth(event) }}>
@ -28,19 +30,25 @@
</select> </select>
</div> </div>
<button class="button m-bottom-0 tiny-datepicker__button" onclick={ () => { handleNextMonth(event) }}> <button class="button m-bottom-0 tiny-datepicker__button" onclick={ () => { handleNextMonth(event) }}>
&rArr; <svg class="icon fill-text" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-right"></use>
</svg>
</button> </button>
</div> </div>
<div class="tiny-datepicker__select m-top-3 m-bottom-3"> <div class="tiny-datepicker__select m-top-3 m-bottom-3">
<button class="button m-bottom-0 tiny-datepicker__button" onclick={ () => { handlePreviousYear(event) }}> <button class="button m-bottom-0 tiny-datepicker__button" onclick={ () => { handlePreviousYear(event) }}>
&lArr; <svg class="icon fill-text" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-left"></use>
</svg>
</button> </button>
<div class="tiny-datepicker__label"> <div class="tiny-datepicker__label">
<input class="field-text" value="{ state.date.format('YYYY') }" onkeyup={ (event) => { handleSelectYear(event) }} /> <input class="field-text" value="{ state.date.format('YYYY') }" onkeyup={ (event) => { handleSelectYear(event) }} />
</div> </div>
<button class="button m-bottom-0 tiny-datepicker__button" onclick={ () => { handleNextYear(event) }}> <button class="button m-bottom-0 tiny-datepicker__button" onclick={ () => { handleNextYear(event) }}>
&rArr; <svg class="icon fill-text" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-right"></use>
</svg>
</button> </button>
</div> </div>
</div> </div>

7
src/example.js
Unescape View File

@ -1,18 +1,17 @@
import * as riot from 'riot' import * as riot from 'riot'
import Datepicker from './datepicker.riot' import Datepicker from './datepicker.riot'
import store from './store.js' import observable from '@riotjs/observable'
riot.register('tiny-datepicker', Datepicker) riot.register('tiny-datepicker', Datepicker)
import dayjs from 'dayjs'
window.riot = riot window.riot = riot
window.dispatcher = observable()
document.addEventListener("DOMContentLoaded", (event) => { document.addEventListener("DOMContentLoaded", (event) => {
const console = document.querySelector('.console') const console = document.querySelector('.console')
store.on('change', (data) => { window.dispatcher.on('change', (data) => {
const element = document.createElement('div') const element = document.createElement('div')
element.append('Event => Change, ' + data.date.format('YYYY-MM-DD')) element.append('Event => Change, ' + data.date.format('YYYY-MM-DD'))

3
src/icons/brands/github.svg
Unescape View File

@ -1,3 +0,0 @@
<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="#1B1F23"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 967 B

0
src/icons/brands/gitea.svg → src/icons/gitea.svg
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

4
src/icons/left.svg
Unescape View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 5v2h-2V5h2zm-4 4V7h2v2h-2zm-2 2V9h2v2h-2zm0 2H8v-2h2v2zm2 2v-2h-2v2h2zm0 0h2v2h-2v-2zm4 4v-2h-2v2h2z" fill="#000000"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 363 B

4
src/icons/right.svg
Unescape View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 5v2h2V5H8zm4 4V7h-2v2h2zm2 2V9h-2v2h2zm0 2h2v-2h-2v2zm-2 2v-2h2v2h-2zm0 0h-2v2h2v-2zm-4 4v-2h2v2H8z" fill="#000000"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 361 B

63
src/mixin.js
Unescape View File

@ -1,5 +1,4 @@
import dayjs from 'dayjs' import dayjs from 'dayjs'
import store from './store.js'
// add function for iso // add function for iso
import isoWeek from 'dayjs/plugin/isoWeek' import isoWeek from 'dayjs/plugin/isoWeek'
@ -20,7 +19,7 @@ dayjs.extend(localeData)
export default { export default {
state: { state: {
date: false, date: dayjs(),
weeks: [], weeks: [],
firstDayOfMonth: false, firstDayOfMonth: false,
@ -41,15 +40,17 @@ export default {
* *
*/ */
onBeforeMount() { onBeforeMount() {
// getting names for language
this.state.monthNames = dayjs.months() this.state.monthNames = dayjs.months()
this.state.weekdaysNames = dayjs.weekdaysShort() this.state.weekdaysNames = dayjs.weekdaysShort()
// check for date prop
if (this.props.date) { if (this.props.date) {
this.state.date = dayjs(this.props.date) this.state.date = dayjs(this.props.date)
} else {
this.state.date = dayjs()
} }
// check for namespace
if (this.props.namespace) { if (this.props.namespace) {
this.state.namespace = this.props.namespace + '.' this.state.namespace = this.props.namespace + '.'
} }
@ -62,11 +63,11 @@ export default {
this.state.weekdaysNames.push(this.state.weekdaysNames.shift()) this.state.weekdaysNames.push(this.state.weekdaysNames.shift())
} }
store.on('update', (data) => { this.props.dispatcher.on('update', (data) => {
this.state.date = dayjs(data.date) this.state.date = dayjs(data.date)
}) })
store.on('update-props', (data) => { this.props.dispatcher.on('update-props', (data) => {
this.state.date = dayjs(this.props.date) this.state.date = dayjs(this.props.date)
this.update() this.update()
}) })
@ -132,12 +133,9 @@ export default {
return false return false
} }
this.state.date = day this.trigger('select-day')
store.trigger(this.state.namespace + 'change', {
date: this.state.date.clone()
})
this.state.date = day
this.update() this.update()
}, },
@ -150,10 +148,7 @@ export default {
handleSelectMonth(event) { handleSelectMonth(event) {
this.state.date = this.state.date.month(event.target.value) this.state.date = this.state.date.month(event.target.value)
this.createWeeksAndDays() this.createWeeksAndDays()
this.trigger('select-month')
store.trigger(this.state.namespace + 'change', {
date: this.state.date.clone()
})
this.update() this.update()
}, },
@ -167,10 +162,7 @@ export default {
handleSelectYear(event) { handleSelectYear(event) {
this.state.date = this.state.date.year(event.target.value) this.state.date = this.state.date.year(event.target.value)
this.createWeeksAndDays() this.createWeeksAndDays()
this.trigger('select-year')
store.trigger(this.state.namespace + 'change', {
date: this.state.date.clone()
})
this.update() this.update()
}, },
@ -185,10 +177,7 @@ export default {
handlePreviousMonth(event) { handlePreviousMonth(event) {
this.state.date = this.state.date.subtract(1, 'month') this.state.date = this.state.date.subtract(1, 'month')
this.createWeeksAndDays() this.createWeeksAndDays()
this.trigger('previous-month')
store.trigger(this.state.namespace + 'change', {
date: this.state.date.clone()
})
this.update() this.update()
}, },
@ -203,10 +192,7 @@ export default {
handleNextMonth(event) { handleNextMonth(event) {
this.state.date = this.state.date.add(1, 'month') this.state.date = this.state.date.add(1, 'month')
this.createWeeksAndDays() this.createWeeksAndDays()
this.trigger('next-month')
store.trigger(this.state.namespace + 'change', {
date: this.state.date.clone()
})
this.update() this.update()
}, },
@ -220,10 +206,7 @@ export default {
handlePreviousYear(event) { handlePreviousYear(event) {
this.state.date = this.state.date.subtract(1, 'year') this.state.date = this.state.date.subtract(1, 'year')
this.createWeeksAndDays() this.createWeeksAndDays()
this.trigger('previous-year')
store.trigger(this.state.namespace + 'change', {
date: this.state.date.clone()
})
this.update() this.update()
}, },
@ -237,14 +220,24 @@ export default {
handleNextYear(event) { handleNextYear(event) {
this.state.date = this.state.date.add(1, 'year') this.state.date = this.state.date.add(1, 'year')
this.createWeeksAndDays() this.createWeeksAndDays()
this.trigger('next-year')
store.trigger(this.state.namespace + 'change', {
date: this.state.date.clone()
})
this.update() this.update()
}, },
/**
* trigger event & change for specific
*
*/
trigger(eventName) {
const data = {
'date': this.state.date.clone()
}
this.props.dispatcher.trigger(this.state.namespace + eventName, data)
this.props.dispatcher.trigger(this.state.namespace + 'change', data)
},
/** /**
* getting classes for single day * getting classes for single day
* *

14
src/store.js
Unescape View File

@ -1,14 +0,0 @@
import observable from '@riotjs/observable'
/**
* store for datepicker
*
* @author Björn Hase
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/confirm
*
*/
export default observable({
})

20
webpack.config.js
Unescape View File

@ -0,0 +1,20 @@
const tinyComponentsWebpack = require('@tiny-components/webpack')
const riotRules = require('@tiny-components/webpack/rules/riot')
const path = require('path')
module.exports = tinyComponentsWebpack({
example: [ './src/example.js' ],
styles: [ './src/example.scss' ],
}, {
publicPath: '/example/',
destination: path.resolve(process.cwd(), 'example'),
rules: [ riotRules ],
svg: {
src: [
'./src/icons/*.svg'
]
},
purge: {
src: path.join(__dirname, './**')
}
})

84
webpack.mix.js
Unescape View File

@ -1,84 +0,0 @@
const mix = require('laravel-mix')
const path = require('path')
require('laravel-mix-purgecss')
// plugins
const SvgSpritemapPlugin = require('svg-spritemap-webpack-plugin')
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.webpackConfig({
module: {
rules: [{
test: /\.riot$/,
use: [{
loader: '@riotjs/webpack-loader',
options: {
hot: false
}
}]
}
]},
plugins: [
new SvgSpritemapPlugin([
'node_modules/@tiny-components/plain-ui/src/icons/mono-icons/svg/*.svg',
'src/icons/brands/*.svg'
], {
output: {
filename: 'symbol-defs.svg',
chunk: {
keep: true
},
svgo: {
plugins: [{
name: 'convertStyleToAttrs',
active: true
},{
name: 'removeStyleElement',
active: true
}, {
name: 'removeAttrs',
params: {
attrs: 'fill'
}
}]
}
},
sprite: {
prefix: 'icon-'
}
})
]
})
mix
.setPublicPath('./example')
.js('src/example.js', 'example')
.sass('src/example.scss', 'example')
.purgeCss({
extend: {
content: [
path.join(__dirname, 'src/**.riot'),
path.join(__dirname, 'src/**.js'),
path.join(__dirname, 'example/index.html')
]
}
})
.options({
terser: {
extractComments: false,
},
processCssUrls: false
})
.copyDirectory('node_modules/@tiny-components/plain-ui/src/fonts/IBM*', 'example')
Write Preview
Loading…
Cancel
Save