@nextcloud/vue 3.10.2 → 4.1.1

package/src/components/Content/index.js

@@ -1,23 +0,0 @@
-/*
- * @copyright 2018 Christoph Wurst <christoph@winzerhof-wurst.at>
- *
- * @author 2018 Christoph Wurst <christoph@winzerhof-wurst.at>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-import Content from './Content'
-
-export default Content

package/src/components/DatetimePicker/DatetimePicker.vue

@@ -1,195 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
-  -
-  - @author John Molakvoæ <skjnldsv@protonmail.com>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program. If not, see <http://www.gnu.org/licenses/>.
-  -
-  -->
-
-<docs>
-> We're wrapping the awesome datepicker library here https://github.com/mengxiong10/vue2-datepicker
-> Please check there for all the available options.
-
-### Defaults
-- cleareable: false
-- minute-step: 10
-
-### Example
-```vue
-<template>
-	<span>
-		<DatetimePicker
-			v-model="time"
-			type="datetime" />
-		{{ time }}
-	</span>
-</template>
-<script>
-export default {
-	data() {
-		return {
-			time: null,
-		}
-	},
-}
-</script>
-```
-
-### Range picker
-```vue
-<template>
-	<span>
-		<DatetimePicker
-			v-model="time"
-			range
-			type="date" />
-		{{ time }}
-	</span>
-</template>
-<script>
-export default {
-	data() {
-		return {
-			time: null,
-		}
-	},
-}
-</script>
-```
-</docs>
-
-<template>
-	<DatePicker
-		ref="datepicker"
-		:clearable="clearable"
-		:minute-step="minuteStep"
-		:format="format"
-		:formatter="formatter"
-		:type="type"
-		:value="value"
-		:append-to-body="appendToBody"
-		:show-week-number="showWeekNumber"
-		:popup-class="{ 'show-week-number': showWeekNumber }"
-		v-bind="$attrs"
-		v-on="$listeners"
-		@select-year="handleSelectYear"
-		@select-month="handleSelectMonth"
-		@update:value="$emit('update:value', value)">
-		<template v-for="(_, slot) of $scopedSlots" #[slot]="scope">
-			<slot :name="slot" v-bind="scope" />
-		</template>
-	</DatePicker>
-</template>
-
-<script>
-import DatePicker from 'vue2-datepicker'
-
-export default {
-	name: 'DatetimePicker',
-
-	components: {
-		DatePicker,
-	},
-
-	inheritAttrs: false,
-
-	props: {
-		clearable: {
-			type: Boolean,
-			default() {
-				return false
-			},
-		},
-
-		minuteStep: {
-			type: Number,
-			default() {
-				return 10
-			},
-		},
-
-		type: {
-			type: String,
-			default: 'date',
-		},
-
-		format: {
-			type: String,
-			default() {
-				const map = {
-					date: 'YYYY-MM-DD',
-					datetime: 'YYYY-MM-DD H:mm:ss',
-					year: 'YYYY',
-					month: 'YYYY-MM',
-					time: 'H:mm:ss',
-					week: 'w',
-				}
-				return map[this.type] || map.date
-			},
-		},
-
-		formatter: {
-			type: Object,
-			default() {
-				return null
-			},
-		},
-
-		// eslint-disable-next-line
-		value: {
-			default() {
-				return new Date()
-			},
-		},
-
-		appendToBody: {
-			type: Boolean,
-			default: false,
-		},
-
-		showWeekNumber: {
-			type: Boolean,
-			default: false,
-		},
-	},
-
-	methods: {
-		handleSelectYear(year) {
-			const value = this.$refs.datepicker.currentValue
-			if (value) {
-				try {
-					const date = new Date(new Date(value).setFullYear(year))
-					this.$refs.datepicker.selectDate(date)
-				} catch (error) {
-					console.error('Invalid value', value, year)
-				}
-			}
-		},
-		handleSelectMonth(month) {
-			const value = this.$refs.datepicker.currentValue
-			if (value) {
-				try {
-					const date = new Date(new Date(value).setMonth(month))
-					this.$refs.datepicker.selectDate(date)
-				} catch (error) {
-					console.error('Invalid value', value, month)
-				}
-			}
-		},
-	},
-}
-</script>

package/src/components/DatetimePicker/index.js

@@ -1,28 +0,0 @@
-/**
- * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
- *
- * @author John Molakvoæ <skjnldsv@protonmail.com>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-import ScopeComponent from '../../utils/ScopeComponent'
-import DatetimePicker from './DatetimePicker'
-import './index.scss'
-
-ScopeComponent(DatetimePicker)
-
-export default DatetimePicker

package/src/components/DatetimePicker/index.scss

@@ -1,405 +0,0 @@
-$cell_height: 32px;
-
-// import the icons font scss
-@import '../../fonts/scss/iconfont-vue';
-@import '~vue2-datepicker/scss/index.scss';
-
-.mx-datepicker[data-v-#{$scope_version}] {
-	user-select: none;
-	color: var(--color-main-text);
-
-	svg {
-		fill: var(--color-main-text);
-	}
-
-	/* INPUT CONTAINER */
-	.mx-input-wrapper {
-		// input
-		.mx-input {
-			width: 100%;
-			border: 1px solid var(--color-border);
-			background-color: var(--color-main-background);
-			background-clip: content-box;
-		}
-
-		&:disabled,
-		&.disabled {
-			cursor: not-allowed;
-			opacity: $opacity_normal;
-		}
-
-		.mx-icon-calendar,
-		.mx-icon-clear {
-			color: var(--color-text-lighter);
-		}
-	}
-}
-
-// Datepicker popup wrapper
-.mx-datepicker-main {
-	color: var(--color-main-text);
-	border: 1px solid var(--color-border);
-	background-color: var(--color-main-background);
-	font-family: var(--font-face) !important;
-	line-height: 1.5;
-
-	svg {
-		fill: var(--color-main-text);
-	}
-
-	&.mx-datepicker-popup {
-		z-index: 2000;
-		box-shadow: none;
-
-		.mx-datepicker-sidebar + .mx-datepicker-content {
-			border-left: 1px solid var(--color-border);
-		}
-	}
-	
-	&.show-week-number .mx-calendar {
-		width: $cell_height * 8  + 2 * 5px; // week number + 7 days + padding
-	}
-
-	.mx-datepicker-header {
-		border-bottom: 1px solid var(--color-border);
-	}
-
-	.mx-datepicker-footer {
-		border-top: 1px solid var(--color-border);
-	}
-
-	// default popup styles
-	.mx-calendar {
-		width: $cell_height * 7  + 2 * 5px; // 7 days + padding
-		padding: 5px;
-		&.mx-calendar-week-mode {
-			width: $cell_height * 8  + 2 * 5px; // week number + 7 days + padding
-		}
-	}
-
-	.mx-time + .mx-time,
-	.mx-calendar + .mx-calendar {
-		border-left: 1px solid var(--color-border);
-	}
-
-	.mx-range-wrapper {
-		display: flex;
-		overflow: hidden;
-
-		// first active cell, range style on day picker panel only
-		.mx-calendar-content .mx-table-date .cell {
-			&.active {
-				border-radius: var(--border-radius) 0 0 var(--border-radius);
-			}
-			// second selected cell
-			&.in-range + .cell.active {
-				border-radius: 0 var(--border-radius) var(--border-radius) 0;
-			}
-		}
-	}
-
-	// Various panels
-	.mx-table {
-		text-align: center;
-
-		thead > tr > th {
-			text-align: center;
-			opacity: $opacity_disabled;
-			color: var(--color-text-lighter);
-		}
-
-		// Override table rule from server
-		tr:focus,
-		tr:hover,
-		tr:active {
-			background-color: transparent;
-		}
-
-		// regular cell style
-		.cell {
-			transition: all 100ms ease-in-out;
-			text-align: center;
-			opacity: $opacity_normal;
-			border-radius: 50px;
-
-			// force pointer on all content
-			> * {
-				cursor: pointer;
-			}
-
-			// Selected and mouse event
-			&.today {
-				opacity: $opacity_full;
-				color: var(--color-primary-element);
-				font-weight: bold;
-				&:hover,
-				&:focus {
-					color: var(--color-primary-text);
-				}
-			}
-			&.in-range,
-			&.disabled {
-				border-radius: 0;
-				font-weight: normal;
-			}
-			&.in-range {
-				opacity: $opacity_normal;
-			}
-			&.not-current-month {
-				opacity: $opacity_disabled;
-				color: var(--color-text-lighter);
-				&:hover,
-				&:focus {
-					opacity: $opacity_full;
-				}
-			}
-
-			// hover-/focus after the other rules
-			&:hover,
-			&:focus,
-			&.actived,
-			&.active,
-			&.in-range {
-				opacity: $opacity_full;
-				color: var(--color-primary-text);
-				background-color: var(--color-primary-element);
-				font-weight: bold;
-			}
-			&.disabled {
-				opacity: $opacity_disabled;
-				color: var(--color-text-lighter);
-				border-radius: 0;
-				background-color: var(--color-background-darker);
-			}
-		}
-
-		.mx-week-number {
-			text-align: center;
-			opacity: $opacity_normal;
-			border-radius: 50px;
-		}
-
-		// cell that are not in a table
-		span.mx-week-number,
-		li.mx-week-number,
-		span.cell,
-		li.cell {
-			min-height: $cell_height;
-		}
-
-		// Standard grid/flex layout for day/month/year panels
-		&.mx-table-date thead,
-		&.mx-table-date tbody,
-		&.mx-table-year,
-		&.mx-table-month {
-			display: flex;
-			flex-direction: column;
-			justify-content: space-around;
-			tr {
-				display: inline-flex;
-				align-items: center;
-				flex: 1 1 $cell_height;
-				justify-content: space-around;
-				min-height: $cell_height;
-			}
-			// Default cell style
-			th,
-			td {
-				display: flex;
-				align-items: center;
-				// 3 rows with a little spacing
-				flex: 0 1 32%;
-				justify-content: center;
-				min-width: $cell_height;
-				// spacing between rows
-				height: 95%;
-				min-height: $cell_height;
-				transition: background 100ms ease-in-out;
-			}
-		}
-		&.mx-table-year {
-			tr th,
-			tr td {
-				// only two rows in year panel
-				flex-basis: 48%;
-			}
-		}
-		&.mx-table-date {
-			tr th,
-			tr td {
-				// only two rows in year panel
-				flex-basis: $cell_height;
-			}
-		}
-	}
-
-	// default buttons: header...
-	.mx-btn {
-		min-width: $cell_height;
-		height: $cell_height;
-		margin: 0 auto; // center also single element
-		padding: 7px 10px;
-		cursor: pointer;
-		text-decoration: none;
-		opacity: $opacity_disabled;
-		color: var(--color-text-lighter);
-		border-radius: $cell_height;
-		line-height: $cell_height - 12px; // padding minus 2px for better visual
-		// Mouse feedback
-		&:hover,
-		&:focus {
-			opacity: $opacity_full;
-			color: var(--color-main-text);
-			background-color: var(--color-background-darker);
-		}
-	}
-
-	// Header, arrows, years, months
-	.mx-calendar-header {
-		display: inline-flex;
-		align-items: center;
-		justify-content: space-between;
-		width: 100%;
-		height: $clickable-area;
-		margin-bottom: 4px;
-
-		button {
-			min-width: $cell_height;
-			min-height: $cell_height;
-			margin: 0;
-			cursor: pointer;
-			text-align: center;
-			text-decoration: none;
-			opacity: $opacity_normal;
-			color: var(--color-main-text);
-			border-radius: $cell_height;
-			line-height: $cell_height - 12px; // padding minus 2px for better visual
-
-			// Mouse feedback
-			&:hover,
-			&:focus {
-				opacity: $opacity_full;
-				color: var(--color-main-text);
-				background-color: var(--color-background-darker);
-			}
-
-			// Header arrows
-			&.mx-btn-icon-double-left,
-			&.mx-btn-icon-left,
-			&.mx-btn-icon-right,
-			&.mx-btn-icon-double-right {
-				align-items: center;
-				justify-content: center;
-				width: $cell_height;
-				padding: 0; // leave the centering to flex
-
-				// font icons
-				&:before {
-					display: block;
-					font-size: $icon-size;
-				}
-
-				// Hide original icons
-				> i {
-					display: none;
-				}
-			}
-		}
-
-		.mx-calendar-header-label {
-			display: flex;
-		}
-
-		.mx-btn-icon-double-left {
-			@include iconfont('arrow-left-double');
-		}
-
-		.mx-btn-icon-left {
-			@include iconfont('arrow-left');
-		}
-
-		.mx-btn-icon-right {
-			@include iconfont('arrow-right');
-			// arrows are all before month and year
-			// send them to the end of the row
-			//order: 3;
-		}
-
-		.mx-btn-icon-double-right {
-			@include iconfont('arrow-right-double');
-			// arrows are all before month and year
-			// send them to the end of the row
-			//order: 4;
-		}
-
-		button.mx-btn-icon-right {
-			order: 2;
-		}
-
-		button.mx-btn-icon-double-right {
-			order: 3;
-		}
-	}
-
-	// Week panel
-	.mx-calendar-week-mode {
-		// move focus on row and not on cell
-		.mx-date-row {
-			.mx-week-number {
-				font-weight: bold;
-			}
-			&:hover,
-			&.mx-active-week {
-				opacity: $opacity_full;
-				border-radius: 50px;
-				background-color: var(--color-background-dark);
-				td {
-					background-color: transparent;
-					&, &:hover, &:focus {
-						color: inherit;
-					}
-				}
-			}
-			&.mx-active-week {
-				color: var(--color-primary-text);
-				background-color: var(--color-primary-element);
-				// Remove cell feedback on selected rows
-				td {
-					opacity: $opacity_normal;
-					font-weight: normal;
-				}
-			}
-		}
-	}
-
-	// Time panel
-	.mx-time {
-		background-color: var(--color-main-background);
-
-		.mx-time-header {
-			// only one button, center it
-			justify-content: center;
-			border-bottom: 1px solid var(--color-border);
-		}
-
-		.mx-time-column {
-			border-left: 1px solid var(--color-border);
-		}
-
-		.mx-time-option,
-		.mx-time-item {
-			&.active,
-			&:hover {
-				color: var(--color-primary-text);
-				background-color: var(--color-primary-element);
-			}
-
-			&.disabled {
-				cursor: not-allowed;
-				opacity: $opacity_disabled;
-				color: var(--color-main-text);
-				background-color: var(--color-main-background);
-			}
-		}
-	}
-}