Compare commits

..

No commits in common. 'main' and 'v0.2.0' have entirely different histories.
main ... v0.2.0

@ -28,15 +28,6 @@ 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>
``` ```
@ -58,7 +49,9 @@ For setting date on start,
If Date will "change", If Date will "change",
``` ```
dispatcher.on('change', (data) => { import store from './store.js'
store.on('change', (data) => {
console.log(data.date.format('YYYY-MM-DD')) console.log(data.date.format('YYYY-MM-DD'))
}) })
@ -67,7 +60,9 @@ dispatcher.on('change', (data) => {
Send Datepicker a new Date, Send Datepicker a new Date,
``` ```
dispatcher.trigger('update', { import store from './store.js'
store.trigger('update', {
date: '2012-10-20' date: '2012-10-20'
}) })

Binary file not shown.

@ -1,6 +0,0 @@
{
"/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"
}

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

@ -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="/css/styles.css" rel="stylesheet" type="text/css"> <link href="/example.css" rel="stylesheet" type="text/css">
</head> </head>
<body> <body>
@ -18,12 +18,18 @@
</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://git.node001.net/tiny-components/datepicker" rel="noopener" target="_blank"> <a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.node001.net/tiny-components/slider" 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>
@ -40,12 +46,10 @@
</div> </div>
</div> </div>
</div> </div>
<script defer src="/js/example.js"></script> <script defer src="/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>

File diff suppressed because one or more lines are too long

@ -1 +0,0 @@
(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}")}}]);

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 69 KiB

4
package-lock.json generated

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

@ -1,6 +1,6 @@
{ {
"name": "@tiny-components/datepicker", "name": "@tiny-components/datepicker",
"version": "0.4.0", "version": "0.2.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.19", "dayjs": "^1.11.7",
"hammerjs": "^2.0.8", "hammerjs": "^2.0.8",
"riot": "^10.1.2" "riot": "^7.1.0"
}, },
"devDependencies": { "devDependencies": {
"@riotjs/webpack-loader": "^6.0.0", "@riotjs/webpack-loader": "^6.0.0",
"@tiny-components/webpack": "^0.6.0" "laravel-mix": "^6.0.49",
}, "laravel-mix-purgecss": "^6.0.0",
"scripts": { "sass": "^1.62.1",
"build": "webpack --mode development --config webpack.config.js", "sass-loader": "^12.6.0",
"build-production": "webpack --mode production --config webpack.config.js" "svg-spritemap-webpack-plugin": "^4.5.0"
} }
} }

@ -20,9 +20,7 @@
<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) }}>
<svg class="icon fill-text" aria-hidden="true"> &lArr;
<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) }}>
@ -30,25 +28,19 @@
</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) }}>
<svg class="icon fill-text" aria-hidden="true"> &rArr;
<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) }}>
<svg class="icon fill-text" aria-hidden="true"> &lArr;
<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) }}>
<svg class="icon fill-text" aria-hidden="true"> &rArr;
<use xlink:href="/symbol-defs.svg#icon-right"></use>
</svg>
</button> </button>
</div> </div>
</div> </div>

@ -1,17 +1,18 @@
import * as riot from 'riot' import * as riot from 'riot'
import Datepicker from './datepicker.riot' import Datepicker from './datepicker.riot'
import observable from '@riotjs/observable' import store from './store.js'
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')
window.dispatcher.on('change', (data) => { store.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'))

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

@ -0,0 +1,3 @@
<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>

After

Width:  |  Height:  |  Size: 967 B

@ -1,4 +0,0 @@
<?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>

Before

Width:  |  Height:  |  Size: 363 B

@ -1,4 +0,0 @@
<?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>

Before

Width:  |  Height:  |  Size: 361 B

@ -1,4 +1,5 @@
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'
@ -19,7 +20,7 @@ dayjs.extend(localeData)
export default { export default {
state: { state: {
date: dayjs(), date: false,
weeks: [], weeks: [],
firstDayOfMonth: false, firstDayOfMonth: false,
@ -40,17 +41,15 @@ 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 + '.'
} }
@ -63,18 +62,23 @@ export default {
this.state.weekdaysNames.push(this.state.weekdaysNames.shift()) this.state.weekdaysNames.push(this.state.weekdaysNames.shift())
} }
this.props.dispatcher.on('update', (data) => { store.on('update', (data) => {
this.state.date = dayjs(data.date) this.state.date = dayjs(data.date)
}) })
this.props.dispatcher.on('update-props', (data) => {
this.state.date = dayjs(this.props.date)
this.update()
})
this.createWeeksAndDays() this.createWeeksAndDays()
}, },
/**
*
*
*/
onBeforeUpdate() {
store.trigger(this.state.namespace + 'change', {
date: this.state.date
})
},
/** /**
* create weeks and days * create weeks and days
* *
@ -133,8 +137,6 @@ export default {
return false return false
} }
this.trigger('select-day')
this.state.date = day this.state.date = day
this.update() this.update()
}, },
@ -148,7 +150,6 @@ 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')
this.update() this.update()
}, },
@ -162,7 +163,6 @@ 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')
this.update() this.update()
}, },
@ -177,7 +177,6 @@ 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')
this.update() this.update()
}, },
@ -192,7 +191,6 @@ 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')
this.update() this.update()
}, },
@ -206,7 +204,6 @@ 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')
this.update() this.update()
}, },
@ -220,24 +217,10 @@ 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')
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
* *

@ -0,0 +1,14 @@
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({
})

@ -1,20 +0,0 @@
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, './**')
}
})

@ -0,0 +1,84 @@
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')
Loading…
Cancel
Save