Compare commits
No commits in common. 'main' and 'v0.2.0' have entirely different histories.
@ -1,4 +0,0 @@
|
|||||||
{
|
|
||||||
"/example/js/example.js": "/example/js/example.js?version=9d63a267947afe1f678c244b7a63ef22",
|
|
||||||
"/example/css/styles.css": "/example/css/styles.css?version=7ff63e2be333e7a434f8609f9510796a"
|
|
||||||
}
|
|
||||||
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
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}")}}]);
|
|
||||||
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 69 KiB |
File diff suppressed because it is too large
Load Diff
@ -1,27 +1,26 @@
|
|||||||
{
|
{
|
||||||
"name": "@tiny-components/datepicker",
|
"name": "@tiny-components/datepicker",
|
||||||
"version": "0.5.0",
|
"version": "0.2.0",
|
||||||
"description": "Datepicker for Desktop and Mobile",
|
"description": "Datepicker for Desktop and Mobile",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git@git.node001.net:tiny-components/datepicker.git"
|
"url": "git@gitea.node001.net:tiny-components/datepicker.git"
|
||||||
},
|
},
|
||||||
"author": "Björn Hase <herrhase@node001.net>",
|
"author": "Björn Hase",
|
||||||
"license": "GPLV3",
|
"license": "MIT",
|
||||||
"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.4"
|
"riot": "^7.1.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@riotjs/webpack-loader": "^10.0.0",
|
"@riotjs/webpack-loader": "^6.0.0",
|
||||||
"@tiny-components/webpack": "^0.6.0",
|
"laravel-mix": "^6.0.49",
|
||||||
"terser-webpack-plugin": "^5.6.1"
|
"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"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 967 B |
|
Before Width: | Height: | Size: 363 B |
|
Before Width: | Height: | Size: 361 B |
@ -0,0 +1,243 @@
|
|||||||
|
import dayjs from 'dayjs'
|
||||||
|
import store from './store.js'
|
||||||
|
|
||||||
|
// add function for iso
|
||||||
|
import isoWeek from 'dayjs/plugin/isoWeek'
|
||||||
|
dayjs.extend(isoWeek)
|
||||||
|
|
||||||
|
// getting local data for names
|
||||||
|
import localeData from 'dayjs/plugin/localeData'
|
||||||
|
dayjs.extend(localeData)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Mixin for extends Riot-Component
|
||||||
|
*
|
||||||
|
* @author Björn Hase
|
||||||
|
* @license http://opensource.org/licenses/MIT The MIT License
|
||||||
|
* @link https://gitea.node001.net/tiny-components/datepicker
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
state: {
|
||||||
|
date: false,
|
||||||
|
weeks: [],
|
||||||
|
|
||||||
|
firstDayOfMonth: false,
|
||||||
|
firstDayOfWeek: false,
|
||||||
|
lastDayOfMonth: false,
|
||||||
|
|
||||||
|
weekdaysNames: [],
|
||||||
|
monthNames: [],
|
||||||
|
|
||||||
|
weekFormat: 'isoWeek',
|
||||||
|
|
||||||
|
isoFormat: true,
|
||||||
|
namespace: ''
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
onBeforeMount() {
|
||||||
|
this.state.monthNames = dayjs.months()
|
||||||
|
this.state.weekdaysNames = dayjs.weekdaysShort()
|
||||||
|
|
||||||
|
if (this.props.date) {
|
||||||
|
this.state.date = dayjs(this.props.date)
|
||||||
|
} else {
|
||||||
|
this.state.date = dayjs()
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.props.namespace) {
|
||||||
|
this.state.namespace = this.props.namespace + '.'
|
||||||
|
}
|
||||||
|
|
||||||
|
// change
|
||||||
|
if (this.props.isoFormat === 0) {
|
||||||
|
this.state.isoFormat = false
|
||||||
|
this.state.weekFormat = 'week'
|
||||||
|
} else {
|
||||||
|
this.state.weekdaysNames.push(this.state.weekdaysNames.shift())
|
||||||
|
}
|
||||||
|
|
||||||
|
store.on('update', (data) => {
|
||||||
|
this.state.date = dayjs(data.date)
|
||||||
|
})
|
||||||
|
|
||||||
|
this.createWeeksAndDays()
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
onBeforeUpdate() {
|
||||||
|
store.trigger(this.state.namespace + 'change', {
|
||||||
|
date: this.state.date
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* create weeks and days
|
||||||
|
*
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
createWeeksAndDays() {
|
||||||
|
|
||||||
|
this.state.weeks = []
|
||||||
|
|
||||||
|
// getting first day of Month
|
||||||
|
this.state.firstDayOfMonth = this.state.date.startOf('month')
|
||||||
|
this.state.firstDayOfWeek = this.state.firstDayOfMonth.startOf(this.state.weekFormat)
|
||||||
|
this.state.lastDayOfMonth = this.state.date.endOf('month')
|
||||||
|
|
||||||
|
const lastDayOfWeek = this.state.lastDayOfMonth.endOf(this.state.weekFormat).startOf('day')
|
||||||
|
|
||||||
|
let day = this.state.firstDayOfWeek.clone()
|
||||||
|
|
||||||
|
do {
|
||||||
|
day = this.fillWeek(day)
|
||||||
|
} while (day.isBefore(lastDayOfWeek))
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* fill week with days
|
||||||
|
*
|
||||||
|
* @param {object} day
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
fillWeek(day) {
|
||||||
|
|
||||||
|
const days = []
|
||||||
|
|
||||||
|
days.push(day)
|
||||||
|
|
||||||
|
do {
|
||||||
|
day = day.add(1, 'day')
|
||||||
|
days.push(day)
|
||||||
|
} while (days.length <= 6)
|
||||||
|
|
||||||
|
this.state.weeks.push(days)
|
||||||
|
|
||||||
|
// raise day for start of week
|
||||||
|
return day.add(1, 'day')
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* select single day
|
||||||
|
*
|
||||||
|
* @param {object} event
|
||||||
|
* @param {object} day
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
handleSelectDay(event, day) {
|
||||||
|
if (day.isSame(this.state.date)) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
this.state.date = day
|
||||||
|
this.update()
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* select month
|
||||||
|
*
|
||||||
|
* @param {object} event
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
handleSelectMonth(event) {
|
||||||
|
this.state.date = this.state.date.month(event.target.value)
|
||||||
|
this.createWeeksAndDays()
|
||||||
|
|
||||||
|
this.update()
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* select year
|
||||||
|
*
|
||||||
|
* @param {object} event
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
handleSelectYear(event) {
|
||||||
|
this.state.date = this.state.date.year(event.target.value)
|
||||||
|
this.createWeeksAndDays()
|
||||||
|
|
||||||
|
this.update()
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* previous month
|
||||||
|
*
|
||||||
|
* @param {object} event
|
||||||
|
* @param {object} day
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
handlePreviousMonth(event) {
|
||||||
|
this.state.date = this.state.date.subtract(1, 'month')
|
||||||
|
this.createWeeksAndDays()
|
||||||
|
|
||||||
|
this.update()
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* next month
|
||||||
|
*
|
||||||
|
* @param {object} event
|
||||||
|
* @param {object} day
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
handleNextMonth(event) {
|
||||||
|
this.state.date = this.state.date.add(1, 'month')
|
||||||
|
this.createWeeksAndDays()
|
||||||
|
|
||||||
|
this.update()
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* previous year
|
||||||
|
*
|
||||||
|
* @param {object} event
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
handlePreviousYear(event) {
|
||||||
|
this.state.date = this.state.date.subtract(1, 'year')
|
||||||
|
this.createWeeksAndDays()
|
||||||
|
|
||||||
|
this.update()
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* next year
|
||||||
|
*
|
||||||
|
* @param {object} event
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
handleNextYear(event) {
|
||||||
|
this.state.date = this.state.date.add(1, 'year')
|
||||||
|
this.createWeeksAndDays()
|
||||||
|
|
||||||
|
this.update()
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* getting classes for single day
|
||||||
|
*
|
||||||
|
* @param {object} event
|
||||||
|
* @param {array} classes
|
||||||
|
* @return {string}
|
||||||
|
*/
|
||||||
|
addClassDay(day, classes) {
|
||||||
|
|
||||||
|
if (day.isSame(this.state.date, 'day')) {
|
||||||
|
classes.push('tiny-datepicker__day--current')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (day.isBefore(this.state.firstDayOfMonth) || day.isAfter(this.state.lastDayOfMonth)) {
|
||||||
|
classes.push('tiny-datepicker__day--not-current')
|
||||||
|
}
|
||||||
|
|
||||||
|
return classes.join(' ')
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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,15 +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 ],
|
|
||||||
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…
Reference in new issue