jobdone-shared-files 0.0.1-beta.85 → 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.
@@ -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
  }
@@ -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.85",
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
+ }