change icons & structure

main
HerrHase 4 days ago
parent 05ace91e25
commit d4135672c9

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

@ -1997,9 +1997,6 @@ svg.field-choice__checked {
* *
* *
*/ */
.w-1 {
width: 1px;
}
.h-1 { .h-1 {
height: 1px; height: 1px;
} }
@ -2009,24 +2006,12 @@ svg.field-choice__checked {
.w-col-12 { .w-col-12 {
width: 100%; width: 100%;
} }
.w-1 {
width: 0.5rem;
}
.h-1 { .h-1 {
height: 0.5rem; height: 0.5rem;
} }
.h-2 {
height: 1rem;
}
.h-3 {
height: 1.5rem;
}
.h-6 { .h-6 {
height: 3rem; height: 3rem;
} }
.h-11 {
height: 5.5rem;
}
.h-70 { .h-70 {
height: 35rem; height: 35rem;
} }
@ -2116,15 +2101,9 @@ svg.field-choice__checked {
.p-1 { .p-1 {
padding: 0rem; padding: 0rem;
} }
.p-2 {
padding: 0.125rem;
}
.p-3 { .p-3 {
padding: 0.5rem; padding: 0.5rem;
} }
.p-8 {
padding: 6.125rem;
}
/** /**
* colors * colors
* *
@ -2264,9 +2243,6 @@ svg.field-choice__checked {
* *
* *
*/ */
.display-flex {
display: flex;
}
/** /**
* for hidden-xs etc, show https://reflexgrid.com/#visibility-helpers * for hidden-xs etc, show https://reflexgrid.com/#visibility-helpers
* *
@ -2343,6 +2319,10 @@ svg.field-choice__checked {
.tiny-datepicker__button { .tiny-datepicker__button {
padding: 0.5em 0.75em; padding: 0.5em 0.75em;
} }
.tiny-datepicker .icon-arrow {
position: relative;
top: -0.1em;
}
.console { .console {
overflow-y: scroll; overflow-y: scroll;

File diff suppressed because one or more lines are too long

17771
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -1,23 +1,24 @@
{ {
"name": "@tiny-components/datepicker", "name": "@tiny-components/datepicker",
"version": "0.4.0", "version": "0.5.0",
"description": "Datepicker for Desktop and Mobile", "description": "Datepicker for Desktop and Mobile",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git@gitea.node001.net:tiny-components/datepicker.git" "url": "git@git.node001.net:tiny-components/datepicker.git"
}, },
"author": "Björn Hase", "author": "Björn Hase <herrhase@node001.net>",
"license": "MIT", "license": "GPLV3",
"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.19",
"hammerjs": "^2.0.8", "hammerjs": "^2.0.8",
"riot": "^10.1.2" "riot": "^10.1.4"
}, },
"devDependencies": { "devDependencies": {
"@riotjs/webpack-loader": "^6.0.0", "@riotjs/webpack-loader": "^10.0.0",
"@tiny-components/webpack": "^0.6.0" "@tiny-components/webpack": "^0.6.0",
"terser-webpack-plugin": "^5.6.1"
}, },
"scripts": { "scripts": {
"build": "webpack --mode development --config webpack.config.js", "build": "webpack --mode development --config webpack.config.js",

@ -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"> <span class="icon-arrow">&#10094;</span>
<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"> <span class="icon-arrow">&#10095;</span>
<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"> <span class="icon-arrow">&#10094;</span>
<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"> <span class="icon-arrow">&#10095;</span>
<use xlink:href="/symbol-defs.svg#icon-right"></use>
</svg>
</button> </button>
</div> </div>
</div> </div>
@ -56,14 +48,252 @@
<script> <script>
// mixin import dayjs from 'dayjs'
import datepickerMixin from './mixin.js'
export default () => { // add function for iso
return { import isoWeek from 'dayjs/plugin/isoWeek'
dayjs.extend(isoWeek)
...datepickerMixin // getting local data for names
import localeData from 'dayjs/plugin/localeData'
dayjs.extend(localeData)
export default {
/**
*
*
*/
onBeforeMount() {
this.state = {
date: dayjs(),
weeks: [],
firstDayOfMonth: false,
firstDayOfWeek: false,
lastDayOfMonth: false,
// getting names for language
monthNames: dayjs.months(),
weekdaysNames: dayjs.weekdaysShort(),
weekFormat: 'isoWeek',
isoFormat: true,
namespace: ''
}
// check for date prop
if (this.props.date) {
this.state.date = dayjs(this.props.date)
}
// check for namespace
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())
}
this.props.dispatcher.on('update', (data) => {
this.state.date = dayjs(data.date)
})
this.props.dispatcher.on('update-props', (data) => {
this.state.date = dayjs(this.props.date)
this.update()
})
this.createWeeksAndDays()
},
/**
* 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.trigger('select-day')
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.trigger('select-month')
this.update()
},
/**
* select year
*
* @param {object} event
*
*/
handleSelectYear(event) {
this.state.date = this.state.date.year(event.target.value)
this.createWeeksAndDays()
this.trigger('select-year')
this.update()
},
/**
* previous month
*
* @param {object} event
* @param {object} day
*
*/
handlePreviousMonth(event) {
this.state.date = this.state.date.subtract(1, 'month')
this.createWeeksAndDays()
this.trigger('previous-month')
this.update()
},
/**
* next month
*
* @param {object} event
* @param {object} day
*
*/
handleNextMonth(event) {
this.state.date = this.state.date.add(1, 'month')
this.createWeeksAndDays()
this.trigger('next-month')
this.update()
},
/**
* previous year
*
* @param {object} event
*
*/
handlePreviousYear(event) {
this.state.date = this.state.date.subtract(1, 'year')
this.createWeeksAndDays()
this.trigger('previous-year')
this.update()
},
/**
* next year
*
* @param {object} event
*
*/
handleNextYear(event) {
this.state.date = this.state.date.add(1, 'year')
this.createWeeksAndDays()
this.trigger('next-year')
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
*
* @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(' ')
} }
} }
</script> </script>

@ -1,260 +0,0 @@
import dayjs from 'dayjs'
// 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: dayjs(),
weeks: [],
firstDayOfMonth: false,
firstDayOfWeek: false,
lastDayOfMonth: false,
weekdaysNames: [],
monthNames: [],
weekFormat: 'isoWeek',
isoFormat: true,
namespace: ''
},
/**
*
*
*/
onBeforeMount() {
// getting names for language
this.state.monthNames = dayjs.months()
this.state.weekdaysNames = dayjs.weekdaysShort()
// check for date prop
if (this.props.date) {
this.state.date = dayjs(this.props.date)
}
// check for namespace
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())
}
this.props.dispatcher.on('update', (data) => {
this.state.date = dayjs(data.date)
})
this.props.dispatcher.on('update-props', (data) => {
this.state.date = dayjs(this.props.date)
this.update()
})
this.createWeeksAndDays()
},
/**
* 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.trigger('select-day')
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.trigger('select-month')
this.update()
},
/**
* select year
*
* @param {object} event
*
*/
handleSelectYear(event) {
this.state.date = this.state.date.year(event.target.value)
this.createWeeksAndDays()
this.trigger('select-year')
this.update()
},
/**
* previous month
*
* @param {object} event
* @param {object} day
*
*/
handlePreviousMonth(event) {
this.state.date = this.state.date.subtract(1, 'month')
this.createWeeksAndDays()
this.trigger('previous-month')
this.update()
},
/**
* next month
*
* @param {object} event
* @param {object} day
*
*/
handleNextMonth(event) {
this.state.date = this.state.date.add(1, 'month')
this.createWeeksAndDays()
this.trigger('next-month')
this.update()
},
/**
* previous year
*
* @param {object} event
*
*/
handlePreviousYear(event) {
this.state.date = this.state.date.subtract(1, 'year')
this.createWeeksAndDays()
this.trigger('previous-year')
this.update()
},
/**
* next year
*
* @param {object} event
*
*/
handleNextYear(event) {
this.state.date = this.state.date.add(1, 'year')
this.createWeeksAndDays()
this.trigger('next-year')
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
*
* @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(' ')
}
}

@ -68,4 +68,9 @@
&__button { &__button {
padding: 0.5em 0.75em; padding: 0.5em 0.75em;
} }
.icon-arrow {
position: relative;
top: -0.1em
}
} }

@ -9,11 +9,6 @@ module.exports = tinyComponentsWebpack({
publicPath: '/example/', publicPath: '/example/',
destination: path.resolve(process.cwd(), 'example'), destination: path.resolve(process.cwd(), 'example'),
rules: [ riotRules ], rules: [ riotRules ],
svg: {
src: [
'./src/icons/*.svg'
]
},
purge: { purge: {
src: path.join(__dirname, './**') src: path.join(__dirname, './**')
} }

Loading…
Cancel
Save