jobdone-shared-files 0.0.1-beta.84 → 0.0.1-beta.86
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ProjectManagement/projectNavbar.vue +345 -345
- package/common/directives/collapse.js +12 -12
- package/common/directives/popovers.js +10 -10
- package/common/directives/tooltip.js +10 -10
- package/common/format.js +26 -26
- package/index.js +14 -14
- package/lightboxWithOverview.vue +131 -131
- package/package.json +19 -19
- package/paginate.vue +138 -138
- package/style/css/vue-loading-overlay/index.css +40 -40
- package/style/scss/Common/Animation.scss +5 -5
- package/style/scss/Common/SelectableTable.scss +30 -30
- package/style/scss/Common/filepond.scss +27 -27
- package/style/scss/Common/thumbnail-group.scss +14 -14
- package/style/scss/Layout/LayoutBase.scss +1018 -1018
- package/style/scss/Layout/LayoutMobile.scss +202 -202
- package/style/scss/Layout/LayoutProject.scss +122 -122
- package/style/scss/Layout/LayoutSinglePage.scss +13 -13
- package/style/scss/Layout/LayoutTwoColumn.scss +56 -56
- package/style/scss/Settings/_Mixins.scss +229 -229
- package/style/scss/Settings/_MobileVariables.scss +11 -11
- package/style/scss/Settings/_basic-import.scss +5 -5
- package/style/scss/Settings/_bs-variables-dark.scss +70 -70
- package/style/scss/Settings/_bs-variables.scss +1743 -1743
- package/style/scss/Settings/_color-mode.scss +122 -122
- package/style/scss/Settings/_custom-variables.scss +13 -13
- package/tagEditor.vue +263 -263
- package/tree.vue +69 -69
- package/treeItem.vue +367 -366
- package/vueLoadingOverlay.vue +78 -70
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { Collapse } from 'bootstrap'
|
|
2
|
-
|
|
3
|
-
export default {
|
|
4
|
-
mounted(el) {
|
|
5
|
-
Collapse.getOrCreateInstance(el, {
|
|
6
|
-
toggle: false
|
|
7
|
-
});
|
|
8
|
-
},
|
|
9
|
-
unmounted(el) {
|
|
10
|
-
var instance = Collapse.getOrCreateInstance(el);
|
|
11
|
-
instance.dispose();
|
|
12
|
-
}
|
|
1
|
+
import { Collapse } from 'bootstrap'
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
mounted(el) {
|
|
5
|
+
Collapse.getOrCreateInstance(el, {
|
|
6
|
+
toggle: false
|
|
7
|
+
});
|
|
8
|
+
},
|
|
9
|
+
unmounted(el) {
|
|
10
|
+
var instance = Collapse.getOrCreateInstance(el);
|
|
11
|
+
instance.dispose();
|
|
12
|
+
}
|
|
13
13
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { Popover } from 'bootstrap'
|
|
2
|
-
|
|
3
|
-
export default {
|
|
4
|
-
mounted(el) {
|
|
5
|
-
Popover.getOrCreateInstance(el);
|
|
6
|
-
},
|
|
7
|
-
unmounted(el) {
|
|
8
|
-
var instance = Popover.getOrCreateInstance(el);
|
|
9
|
-
instance.dispose();
|
|
10
|
-
}
|
|
1
|
+
import { Popover } from 'bootstrap'
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
mounted(el) {
|
|
5
|
+
Popover.getOrCreateInstance(el);
|
|
6
|
+
},
|
|
7
|
+
unmounted(el) {
|
|
8
|
+
var instance = Popover.getOrCreateInstance(el);
|
|
9
|
+
instance.dispose();
|
|
10
|
+
}
|
|
11
11
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { Tooltip } from 'bootstrap'
|
|
2
|
-
|
|
3
|
-
export default {
|
|
4
|
-
mounted(el) {
|
|
5
|
-
Tooltip.getOrCreateInstance(el);
|
|
6
|
-
},
|
|
7
|
-
unmounted(el) {
|
|
8
|
-
var instance = Tooltip.getOrCreateInstance(el);
|
|
9
|
-
instance.dispose();
|
|
10
|
-
}
|
|
1
|
+
import { Tooltip } from 'bootstrap'
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
mounted(el) {
|
|
5
|
+
Tooltip.getOrCreateInstance(el);
|
|
6
|
+
},
|
|
7
|
+
unmounted(el) {
|
|
8
|
+
var instance = Tooltip.getOrCreateInstance(el);
|
|
9
|
+
instance.dispose();
|
|
10
|
+
}
|
|
11
11
|
}
|
package/common/format.js
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
import dayjs from 'dayjs';
|
|
2
|
-
import { computed } from 'vue';
|
|
3
|
-
|
|
4
|
-
// 時間格式
|
|
5
|
-
export const formatDate = (value) => {
|
|
6
|
-
if (value === null || !value) {
|
|
7
|
-
return value;
|
|
8
|
-
} else {
|
|
9
|
-
return dayjs(value).format('YYYY-MM-DD');
|
|
10
|
-
}
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
export const formatDT = (value) => {
|
|
14
|
-
if (value === null || !value) {
|
|
15
|
-
return value;
|
|
16
|
-
} else {
|
|
17
|
-
return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
|
|
18
|
-
}
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
// 千分位格式
|
|
23
|
-
export const formatThousands = computed(() => {
|
|
24
|
-
return function(number){
|
|
25
|
-
return new Intl.NumberFormat().format(number);
|
|
26
|
-
}
|
|
1
|
+
import dayjs from 'dayjs';
|
|
2
|
+
import { computed } from 'vue';
|
|
3
|
+
|
|
4
|
+
// 時間格式
|
|
5
|
+
export const formatDate = (value) => {
|
|
6
|
+
if (value === null || !value) {
|
|
7
|
+
return value;
|
|
8
|
+
} else {
|
|
9
|
+
return dayjs(value).format('YYYY-MM-DD');
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export const formatDT = (value) => {
|
|
14
|
+
if (value === null || !value) {
|
|
15
|
+
return value;
|
|
16
|
+
} else {
|
|
17
|
+
return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
// 千分位格式
|
|
23
|
+
export const formatThousands = computed(() => {
|
|
24
|
+
return function(number){
|
|
25
|
+
return new Intl.NumberFormat().format(number);
|
|
26
|
+
}
|
|
27
27
|
});
|
package/index.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import paginate from "./paginate.vue";
|
|
2
|
-
import tagEditor from "./tagEditor.vue";
|
|
3
|
-
import tree from "./tree.vue";
|
|
4
|
-
import vueLoadingOverlay from "./vueLoadingOverlay.vue";
|
|
5
|
-
import projectNavbar from "./ProjectManagement/projectNavbar.vue";
|
|
6
|
-
|
|
7
|
-
export default {
|
|
8
|
-
paginate,
|
|
9
|
-
tagEditor,
|
|
10
|
-
tree,
|
|
11
|
-
vueLoadingOverlay,
|
|
12
|
-
|
|
13
|
-
// ProjectManagement
|
|
14
|
-
projectNavbar
|
|
1
|
+
import paginate from "./paginate.vue";
|
|
2
|
+
import tagEditor from "./tagEditor.vue";
|
|
3
|
+
import tree from "./tree.vue";
|
|
4
|
+
import vueLoadingOverlay from "./vueLoadingOverlay.vue";
|
|
5
|
+
import projectNavbar from "./ProjectManagement/projectNavbar.vue";
|
|
6
|
+
|
|
7
|
+
export default {
|
|
8
|
+
paginate,
|
|
9
|
+
tagEditor,
|
|
10
|
+
tree,
|
|
11
|
+
vueLoadingOverlay,
|
|
12
|
+
|
|
13
|
+
// ProjectManagement
|
|
14
|
+
projectNavbar
|
|
15
15
|
}
|
package/lightboxWithOverview.vue
CHANGED
|
@@ -1,132 +1,132 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<vue-easy-lightbox :visible="lightboxVisibleRef" :imgs="picturesData" :index="picturesIndexRef"
|
|
3
|
-
@hide="hideLightbox" @on-prev-click="picturesIndexRef--" @on-next-click="picturesIndexRef++"></vue-easy-lightbox>
|
|
4
|
-
<div class="lightbox-thumbnail-toolbar text-center overflow-hidden" v-if="lightboxVisibleRef">
|
|
5
|
-
<div class="text-nowrap overflow-x-auto pt-3 px-2 pb-1">
|
|
6
|
-
<div class="d-inline-block">
|
|
7
|
-
<div class="d-inline-block thumbnail-content rounded hover-border"
|
|
8
|
-
:class="{'active': index == picturesIndexRef}" :style="'background-image: url(' + item.src +');'"
|
|
9
|
-
@click="changePictureIndex(index)" v-for="(item, index) in picturesData"></div>
|
|
10
|
-
</div>
|
|
11
|
-
</div>
|
|
12
|
-
</div>
|
|
13
|
-
</template>
|
|
14
|
-
|
|
15
|
-
<script>
|
|
16
|
-
import { ref, computed } from 'vue';
|
|
17
|
-
import VueEasyLightbox from 'vue-easy-lightbox';
|
|
18
|
-
|
|
19
|
-
export default {
|
|
20
|
-
props: {
|
|
21
|
-
previewCount: {
|
|
22
|
-
type: Number,
|
|
23
|
-
required: false,
|
|
24
|
-
default: 5
|
|
25
|
-
},
|
|
26
|
-
picturesData: {
|
|
27
|
-
type: Array,
|
|
28
|
-
required: true
|
|
29
|
-
},
|
|
30
|
-
displayIndex: {
|
|
31
|
-
type: Number,
|
|
32
|
-
required: false,
|
|
33
|
-
default: 0
|
|
34
|
-
},
|
|
35
|
-
},
|
|
36
|
-
components: {
|
|
37
|
-
VueEasyLightbox
|
|
38
|
-
},
|
|
39
|
-
setup(props) {
|
|
40
|
-
const previewPictures = computed(() => {
|
|
41
|
-
return props.picturesData.slice(0, props.previewCount)
|
|
42
|
-
});
|
|
43
|
-
const otherPictureCount = computed(() => {
|
|
44
|
-
var count = props.picturesData.length - props.previewCount;
|
|
45
|
-
return count < 0 ? 0 : count;
|
|
46
|
-
});
|
|
47
|
-
const lightboxVisibleRef = ref(false);
|
|
48
|
-
const picturesIndexRef = ref(props.displayIndex);
|
|
49
|
-
|
|
50
|
-
const changePictureIndex = (index) => {
|
|
51
|
-
picturesIndexRef.value = index;
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
const showLightbox = (index) => {
|
|
55
|
-
changePictureIndex(index);
|
|
56
|
-
lightboxVisibleRef.value = true;
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
const hideLightbox = () => {
|
|
60
|
-
lightboxVisibleRef.value = false;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
return {
|
|
64
|
-
lightboxVisibleRef,
|
|
65
|
-
picturesIndexRef, changePictureIndex,
|
|
66
|
-
showLightbox, hideLightbox,
|
|
67
|
-
previewCount: props.previewCount,
|
|
68
|
-
previewPictures,
|
|
69
|
-
otherPictureCount
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
</script>
|
|
74
|
-
|
|
75
|
-
<style scoped lang="scss">
|
|
76
|
-
@import "./style/scss/Settings/basic-import";
|
|
77
|
-
.hover-border{
|
|
78
|
-
transition: $transition-base;
|
|
79
|
-
&:hover{
|
|
80
|
-
box-shadow: $focus-ring-box-shadow;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.vel-modal{
|
|
85
|
-
backdrop-filter: var(--backdrop-blur);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.lightbox-thumbnail-toolbar .thumbnail-content{
|
|
89
|
-
cursor: pointer;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.lightbox-thumbnail-toolbar{
|
|
93
|
-
$padding-x: 10vw;
|
|
94
|
-
position: fixed;
|
|
95
|
-
top: 0;
|
|
96
|
-
left: $padding-x;
|
|
97
|
-
right: $padding-x;
|
|
98
|
-
margin: auto;
|
|
99
|
-
z-index: 10000;
|
|
100
|
-
animation: fadeIn .5s;
|
|
101
|
-
pointer-events: none;
|
|
102
|
-
.overflow-x-auto{
|
|
103
|
-
display: inline-block;
|
|
104
|
-
max-width: 100%;
|
|
105
|
-
pointer-events: auto;
|
|
106
|
-
}
|
|
107
|
-
.thumbnail-content{
|
|
108
|
-
--bs-border-color: rgba(0,0,0, 0.12);
|
|
109
|
-
@include solid-size(40px);
|
|
110
|
-
filter: brightness(0.5);
|
|
111
|
-
transition: $transition-base;
|
|
112
|
-
&:not(:last-child){
|
|
113
|
-
margin-right: 1rem;
|
|
114
|
-
}
|
|
115
|
-
&:hover{
|
|
116
|
-
filter: brightness(.8);
|
|
117
|
-
}
|
|
118
|
-
&.active{
|
|
119
|
-
filter: brightness(1);
|
|
120
|
-
}
|
|
121
|
-
&:hover, &.active{
|
|
122
|
-
--bs-border-color: rgba(255,255,255, 0.3);
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
.hover-border:hover{
|
|
126
|
-
box-shadow: 0 0 $focus-ring-blur $focus-ring-width rgba(255,255,255, .25);
|
|
127
|
-
}
|
|
128
|
-
.overflow-x-auto{
|
|
129
|
-
--bs-emphasis-color-rgb: 255, 255, 255;
|
|
130
|
-
}
|
|
131
|
-
}
|
|
1
|
+
<template>
|
|
2
|
+
<vue-easy-lightbox :visible="lightboxVisibleRef" :imgs="picturesData" :index="picturesIndexRef"
|
|
3
|
+
@hide="hideLightbox" @on-prev-click="picturesIndexRef--" @on-next-click="picturesIndexRef++"></vue-easy-lightbox>
|
|
4
|
+
<div class="lightbox-thumbnail-toolbar text-center overflow-hidden" v-if="lightboxVisibleRef">
|
|
5
|
+
<div class="text-nowrap overflow-x-auto pt-3 px-2 pb-1">
|
|
6
|
+
<div class="d-inline-block">
|
|
7
|
+
<div class="d-inline-block thumbnail-content rounded hover-border"
|
|
8
|
+
:class="{'active': index == picturesIndexRef}" :style="'background-image: url(' + item.src +');'"
|
|
9
|
+
@click="changePictureIndex(index)" v-for="(item, index) in picturesData"></div>
|
|
10
|
+
</div>
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
</template>
|
|
14
|
+
|
|
15
|
+
<script>
|
|
16
|
+
import { ref, computed } from 'vue';
|
|
17
|
+
import VueEasyLightbox from 'vue-easy-lightbox';
|
|
18
|
+
|
|
19
|
+
export default {
|
|
20
|
+
props: {
|
|
21
|
+
previewCount: {
|
|
22
|
+
type: Number,
|
|
23
|
+
required: false,
|
|
24
|
+
default: 5
|
|
25
|
+
},
|
|
26
|
+
picturesData: {
|
|
27
|
+
type: Array,
|
|
28
|
+
required: true
|
|
29
|
+
},
|
|
30
|
+
displayIndex: {
|
|
31
|
+
type: Number,
|
|
32
|
+
required: false,
|
|
33
|
+
default: 0
|
|
34
|
+
},
|
|
35
|
+
},
|
|
36
|
+
components: {
|
|
37
|
+
VueEasyLightbox
|
|
38
|
+
},
|
|
39
|
+
setup(props) {
|
|
40
|
+
const previewPictures = computed(() => {
|
|
41
|
+
return props.picturesData.slice(0, props.previewCount)
|
|
42
|
+
});
|
|
43
|
+
const otherPictureCount = computed(() => {
|
|
44
|
+
var count = props.picturesData.length - props.previewCount;
|
|
45
|
+
return count < 0 ? 0 : count;
|
|
46
|
+
});
|
|
47
|
+
const lightboxVisibleRef = ref(false);
|
|
48
|
+
const picturesIndexRef = ref(props.displayIndex);
|
|
49
|
+
|
|
50
|
+
const changePictureIndex = (index) => {
|
|
51
|
+
picturesIndexRef.value = index;
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
const showLightbox = (index) => {
|
|
55
|
+
changePictureIndex(index);
|
|
56
|
+
lightboxVisibleRef.value = true;
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
const hideLightbox = () => {
|
|
60
|
+
lightboxVisibleRef.value = false;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
return {
|
|
64
|
+
lightboxVisibleRef,
|
|
65
|
+
picturesIndexRef, changePictureIndex,
|
|
66
|
+
showLightbox, hideLightbox,
|
|
67
|
+
previewCount: props.previewCount,
|
|
68
|
+
previewPictures,
|
|
69
|
+
otherPictureCount
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
</script>
|
|
74
|
+
|
|
75
|
+
<style scoped lang="scss">
|
|
76
|
+
@import "./style/scss/Settings/basic-import";
|
|
77
|
+
.hover-border{
|
|
78
|
+
transition: $transition-base;
|
|
79
|
+
&:hover{
|
|
80
|
+
box-shadow: $focus-ring-box-shadow;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.vel-modal{
|
|
85
|
+
backdrop-filter: var(--backdrop-blur);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.lightbox-thumbnail-toolbar .thumbnail-content{
|
|
89
|
+
cursor: pointer;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.lightbox-thumbnail-toolbar{
|
|
93
|
+
$padding-x: 10vw;
|
|
94
|
+
position: fixed;
|
|
95
|
+
top: 0;
|
|
96
|
+
left: $padding-x;
|
|
97
|
+
right: $padding-x;
|
|
98
|
+
margin: auto;
|
|
99
|
+
z-index: 10000;
|
|
100
|
+
animation: fadeIn .5s;
|
|
101
|
+
pointer-events: none;
|
|
102
|
+
.overflow-x-auto{
|
|
103
|
+
display: inline-block;
|
|
104
|
+
max-width: 100%;
|
|
105
|
+
pointer-events: auto;
|
|
106
|
+
}
|
|
107
|
+
.thumbnail-content{
|
|
108
|
+
--bs-border-color: rgba(0,0,0, 0.12);
|
|
109
|
+
@include solid-size(40px);
|
|
110
|
+
filter: brightness(0.5);
|
|
111
|
+
transition: $transition-base;
|
|
112
|
+
&:not(:last-child){
|
|
113
|
+
margin-right: 1rem;
|
|
114
|
+
}
|
|
115
|
+
&:hover{
|
|
116
|
+
filter: brightness(.8);
|
|
117
|
+
}
|
|
118
|
+
&.active{
|
|
119
|
+
filter: brightness(1);
|
|
120
|
+
}
|
|
121
|
+
&:hover, &.active{
|
|
122
|
+
--bs-border-color: rgba(255,255,255, 0.3);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
.hover-border:hover{
|
|
126
|
+
box-shadow: 0 0 $focus-ring-blur $focus-ring-width rgba(255,255,255, .25);
|
|
127
|
+
}
|
|
128
|
+
.overflow-x-auto{
|
|
129
|
+
--bs-emphasis-color-rgb: 255, 255, 255;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
132
|
</style>
|
package/package.json
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "jobdone-shared-files",
|
|
3
|
-
"version": "0.0.1-beta.
|
|
4
|
-
"description": "Shared JS and SCSS for Jobdone Enterprise.",
|
|
5
|
-
"main": "index.js",
|
|
6
|
-
"scripts": {
|
|
7
|
-
"test": "echo \"Error: no test specified\" && exit 1"
|
|
8
|
-
},
|
|
9
|
-
"author": "Pyramius",
|
|
10
|
-
"license": "MIT",
|
|
11
|
-
"dependencies": {
|
|
12
|
-
"axios": "^1.2.2",
|
|
13
|
-
"vue": "^3.2.45",
|
|
14
|
-
"vue-loading-overlay": "^6.0.3",
|
|
15
|
-
"bootstrap": "^5.3.0",
|
|
16
|
-
"dayjs": "^1.11.7",
|
|
17
|
-
"vue-easy-lightbox": "^1.16.0"
|
|
18
|
-
}
|
|
19
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "jobdone-shared-files",
|
|
3
|
+
"version": "0.0.1-beta.86",
|
|
4
|
+
"description": "Shared JS and SCSS for Jobdone Enterprise.",
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
8
|
+
},
|
|
9
|
+
"author": "Pyramius",
|
|
10
|
+
"license": "MIT",
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"axios": "^1.2.2",
|
|
13
|
+
"vue": "^3.2.45",
|
|
14
|
+
"vue-loading-overlay": "^6.0.3",
|
|
15
|
+
"bootstrap": "^5.3.0",
|
|
16
|
+
"dayjs": "^1.11.7",
|
|
17
|
+
"vue-easy-lightbox": "^1.16.0"
|
|
18
|
+
}
|
|
19
|
+
}
|