parent
6e68f7d828
commit
fa9fe9b551
@ -1,2 +1,38 @@
|
||||
# datepicker
|
||||
|
||||
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)
|
||||
|
||||
## Installation
|
||||
|
||||
Setup this registry in your project .npmrc file:
|
||||
|
||||
```
|
||||
@tiny-components:registry=https://gitea.node001.net/api/packages/tiny-components/npm/
|
||||
```
|
||||
|
||||
Install with npm or yarn
|
||||
|
||||
```
|
||||
npm i --save @tiny-components/raw
|
||||
yarn add @tiny-components/raw
|
||||
```
|
||||
|
||||
## Using
|
||||
|
||||
Thats all, html in String will not escaped.
|
||||
```
|
||||
<tiny-raw html={ htmlString }></tiny-raw>
|
||||
```
|
||||
|
||||
|
||||
## i18n
|
||||
|
||||
[List of locales](https://github.com/iamkun/dayjs/tree/dev/src/locale)
|
||||
|
||||
```
|
||||
import de from 'dayjs/locale/de'
|
||||
dayjs.locale('de')
|
||||
```
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tiny Components | Datepicker</title>
|
||||
<link rel="icon" href="data:,">
|
||||
<link href="/example.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header class="header">
|
||||
<div class="bar">
|
||||
<div class="bar__start">
|
||||
<h1 class="m-top-4 m-bottom-4 h4">
|
||||
@tiny-components/datepicker
|
||||
</h1>
|
||||
</div>
|
||||
<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">
|
||||
Gitea
|
||||
<svg class="m-left-3 icon fill-text" aria-hidden="true">
|
||||
<use xlink:href="/symbol-defs.svg#icon-gitea"></use>
|
||||
</svg>
|
||||
</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>
|
||||
</header>
|
||||
|
||||
<div class="container m-top-6">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<tiny-datepicker></tiny-datepicker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script defer src="/example.js"></script>
|
||||
<script defer>
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
riot.mount('tiny-datepicker')
|
||||
})
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,14 @@
|
||||
{
|
||||
"/spritemap.js": "/spritemap.js",
|
||||
"/symbol-defs.svg": "/symbol-defs.svg",
|
||||
"/example.js": "/example.js",
|
||||
"/.css": "/.css",
|
||||
"/IBMPlexMono-Bold.eot": "/IBMPlexMono-Bold.eot",
|
||||
"/IBMPlexMono-Bold.ttf": "/IBMPlexMono-Bold.ttf",
|
||||
"/IBMPlexMono-Bold.woff": "/IBMPlexMono-Bold.woff",
|
||||
"/IBMPlexMono-Bold.woff2": "/IBMPlexMono-Bold.woff2",
|
||||
"/IBMPlexMono.eot": "/IBMPlexMono.eot",
|
||||
"/IBMPlexMono.ttf": "/IBMPlexMono.ttf",
|
||||
"/IBMPlexMono.woff": "/IBMPlexMono.woff",
|
||||
"/IBMPlexMono.woff2": "/IBMPlexMono.woff2"
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
(self["webpackChunk_tiny_components_datepicker"] = self["webpackChunk_tiny_components_datepicker"] || []).push([["spritemap"],{
|
||||
|
||||
/***/ "?c20d":
|
||||
/*!******************************!*\
|
||||
!*** spritemap-dummy-module ***!
|
||||
\******************************/
|
||||
/***/ (() => {
|
||||
|
||||
|
||||
|
||||
/***/ })
|
||||
|
||||
}]);
|
||||
|
After Width: | Height: | Size: 66 KiB |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,26 @@
|
||||
{
|
||||
"name": "@tiny-components/datepicker",
|
||||
"version": "0.1.0",
|
||||
"description": "Small fast slider for Desktop and Mobile",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@gitea.node001.net:tiny-components/slider.git"
|
||||
},
|
||||
"author": "Björn Hase",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@riotjs/observable": "^4.1.1",
|
||||
"@tiny-components/plain-ui": "^0.6.0",
|
||||
"dayjs": "^1.11.7",
|
||||
"hammerjs": "^2.0.8",
|
||||
"riot": "^7.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@riotjs/webpack-loader": "^6.0.0",
|
||||
"laravel-mix": "^6.0.49",
|
||||
"laravel-mix-purgecss": "^6.0.0",
|
||||
"sass": "^1.62.1",
|
||||
"sass-loader": "^12.6.0",
|
||||
"svg-spritemap-webpack-plugin": "^4.5.0"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,62 @@
|
||||
<tiny-datepicker>
|
||||
<div class="tiny-datepicker">
|
||||
<div class="tiny-datepicker__calendar">
|
||||
<div class="tiny-datepicker__date">
|
||||
{ state.date.format('dddd, DD. MMMM YYYY') }
|
||||
</div>
|
||||
|
||||
<div class="tiny-datepicker__days">
|
||||
<div class="tiny-datepicker__week">
|
||||
<div class="tiny-datepicker__day tiny-datepicker__day--header" each={ name in state.weekdaysNames }>
|
||||
{ name }
|
||||
</div>
|
||||
</div>
|
||||
<div class="tiny-datepicker__week" each={ week in state.weeks }>
|
||||
<div class="{ addClassDay(day, ['tiny-datepicker__day']) }" each={ day in week } onclick={ (event) => { handleSelectDay(event, day) }}>
|
||||
{ day.date() }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tiny-datepicker__select m-top-3 m-bottom-3">
|
||||
<button class="button m-bottom-0 tiny-datepicker__button" onclick={ () => { handlePreviousMonth(event) }}>
|
||||
⇐
|
||||
</button>
|
||||
<div class="tiny-datepicker__label m-top-3 m-bottom-3">
|
||||
<select class="field-choice" onchange={ (event) => { handleSelectMonth(event) }}>
|
||||
<option each={ (name, index) in state.monthNames } value={ index } selected={ state.date.month() === index }>{ name }</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="button m-bottom-0 tiny-datepicker__button" onclick={ () => { handleNextMonth(event) }}>
|
||||
⇒
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="tiny-datepicker__select m-top-3 m-bottom-3">
|
||||
<button class="button m-bottom-0 tiny-datepicker__button" onclick={ () => { handlePreviousYear(event) }}>
|
||||
⇐
|
||||
</button>
|
||||
<div class="tiny-datepicker__label">
|
||||
<input class="field-text" value="{ state.date.format('YYYY') }" onkeyup={ (event) => { handleSelectYear(event) }} />
|
||||
</div>
|
||||
<button class="button m-bottom-0 tiny-datepicker__button" onclick={ () => { handleNextYear(event) }}>
|
||||
⇒
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// mixin
|
||||
import datepickerMixin from './mixin.js'
|
||||
|
||||
export default () => {
|
||||
return {
|
||||
|
||||
...datepickerMixin
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</tiny-datepicker>
|
||||
@ -0,0 +1,8 @@
|
||||
import * as riot from 'riot'
|
||||
import Datepicker from './datepicker.riot'
|
||||
|
||||
riot.register('tiny-datepicker', Datepicker)
|
||||
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
window.riot = riot
|
||||
@ -0,0 +1,3 @@
|
||||
@import
|
||||
'../node_modules/@tiny-components/plain-ui/src/scss/plain-ui',
|
||||
'styles';
|
||||
@ -0,0 +1,238 @@
|
||||
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
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
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()
|
||||
}
|
||||
|
||||
// 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('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({
|
||||
|
||||
})
|
||||
@ -0,0 +1,71 @@
|
||||
.tiny-datepicker {
|
||||
|
||||
max-width: fit-content;
|
||||
|
||||
&__week {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__date {
|
||||
font-weight: bold;
|
||||
margin: 0 0 0.75em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__days {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
&__day {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: $color__active;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&--current {
|
||||
border: 1px solid $color__border;
|
||||
}
|
||||
|
||||
&--not-current {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&--header {
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
input.field-text, select.field-choice {
|
||||
margin: 0 0.5em 0 0.5em;
|
||||
padding: 0.55em 1em;
|
||||
}
|
||||
|
||||
select.field-choice {
|
||||
width: calc(100% - 1em);
|
||||
}
|
||||
|
||||
input.field-text {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__button {
|
||||
padding: 0.5em 0.75em;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,81 @@
|
||||
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', {
|
||||
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