jobdone-shared-files 1.0.44 → 1.0.45

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.
Files changed (39) hide show
  1. package/ModuleInfo/LayoutNav.vue +251 -251
  2. package/ModuleInfo/logo-with-text.svg +22 -22
  3. package/ModuleInfo/navButton.vue +218 -218
  4. package/ProjectManagement/projectNavbar.vue +363 -363
  5. package/README.md +2 -0
  6. package/autocompleteSelect.vue +467 -467
  7. package/common/directives/collapse.js +12 -12
  8. package/common/directives/popovers.js +10 -10
  9. package/common/directives/selectPlaceholder.js +52 -52
  10. package/common/directives/textareaAutoHeight.js +10 -10
  11. package/common/directives/tooltip.js +10 -10
  12. package/common/format.js +26 -26
  13. package/index.js +14 -14
  14. package/lightboxWithOverview.vue +156 -156
  15. package/package.json +19 -19
  16. package/paginate.vue +141 -141
  17. package/style/css/vue-loading-overlay/index.css +40 -40
  18. package/style/scss/Common/Animation.scss +9 -9
  19. package/style/scss/Common/SelectableTable.scss +36 -36
  20. package/style/scss/Common/Tree.scss +282 -0
  21. package/style/scss/Common/filepond.scss +31 -31
  22. package/style/scss/Common/thumbnail-group.scss +14 -14
  23. package/style/scss/Layout/LayoutBase.scss +1032 -1032
  24. package/style/scss/Layout/LayoutInnerColumn.scss +263 -263
  25. package/style/scss/Layout/LayoutProject.scss +126 -126
  26. package/style/scss/Layout/LayoutSinglePage.scss +17 -17
  27. package/style/scss/Layout/LayoutTwoColumn.scss +60 -60
  28. package/style/scss/Settings/_Mixins.scss +232 -232
  29. package/style/scss/Settings/_MobileVariables.scss +11 -11
  30. package/style/scss/Settings/_bs-variables-dark.scss +70 -70
  31. package/style/scss/Settings/_bs-variables.scss +1743 -1743
  32. package/style/scss/Settings/_color-mode.scss +122 -122
  33. package/style/scss/Settings/_custom-variables.scss +10 -10
  34. package/tagEditor.vue +249 -249
  35. package/tree.vue +71 -71
  36. package/treeItem.vue +358 -358
  37. package/treeItemV2.vue +79 -0
  38. package/treeV2.vue +71 -0
  39. package/vueLoadingOverlay.vue +74 -74
package/ModuleInfo/navButton.vue CHANGED
@@ -1,218 +1,218 @@
1
- <template>
2
- <div class="dropdown dropdown-main-menu border-end">
3
- <input type="checkbox" id="main-menu-toggle">
4
- <label for="main-menu-toggle" class="btn btn-link btn-link-light-bg btn-square" title="開啟選單" @click="checkReload()">
5
- <span class="material-icons">apps</span>
6
- </label>
7
- <label for="main-menu-toggle" class="menu-backdrop"></label>
8
- <ul class="dropdown-menu rounded-4">
9
- <li><a class="dropdown-item" :href="indexLink">
10
- <span class="material-icons me-2 align-middle">home</span>
11
- <span class="align-middle">
12
- Jobdone
13
- <span v-if="result.moduleInfo">{{result?.moduleInfo?.name}}</span>
14
- <span v-else>個人方案</span>
15
- </span>
16
- </a></li>
17
- <li>
18
- <hr class="dropdown-divider">
19
- </li>
20
- <template v-if="result.generalLinks?.length > 0">
21
- <li>
22
- <h6 class="dropdown-header text-body-tertiary">我的待辦事項</h6>
23
- </li>
24
- <div class="d-flex flex-wrap">
25
- <li class="w-50" v-for="(item, index) in result.generalLinks" :key="index">
26
- <a class="dropdown-item" :href="item.url">
27
- <span class="material-icons me-2 align-middle">{{ item.iconName }}</span>
28
- <span class="align-middle">{{ item.name }}</span>
29
- </a>
30
- </li>
31
- </div>
32
- <li>
33
- <hr class="dropdown-divider" v-if="!result.isPersonal">
34
- </li>
35
- </template>
36
- <li>
37
- <h6 class="dropdown-header text-body-tertiary" v-if="!result.isPersonal">公司資訊</h6>
38
- </li>
39
- <div class="d-flex flex-wrap" v-if="!result.isPersonal">
40
- <li class="w-50"><a class="dropdown-item" :href="finalRootDomain + '/CompanyOrderDetail?tab=0'">
41
- <span class="material-icons me-2 align-middle">text_snippet</span>
42
- <span class="align-middle">目前方案</span>
43
- </a></li>
44
- <li class="w-50" v-if="result.isPaymentAdmin"><a class="dropdown-item" :href="finalRootDomain + '/CompanyOrderDetail?tab=1'">
45
- <span class="material-icons me-2 align-middle">history_edu</span>
46
- <span class="align-middle">歷史訂單</span>
47
- </a></li>
48
- <li class="w-50"><a class="dropdown-item" :href="finalRootDomain + '/CompanyOrderDetail?tab=2'">
49
- <span class="material-icons me-2 align-middle">business</span>
50
- <span class="align-middle">公司資訊</span>
51
- </a></li>
52
- <li class="w-50" v-if="result.isPaymentAdmin"><a class="dropdown-item" :href="finalRootDomain + '/CompanyOrderDetail?tab=3'">
53
- <span class="material-icons me-2 align-middle">payment</span>
54
- <span class="align-middle">帳務資訊</span>
55
- </a></li>
56
- <li class="w-50"><a class="dropdown-item" :href="finalRootDomain + '/UserManagement'">
57
- <span class="material-icons me-2 align-middle">supervised_user_circle</span>
58
- <span class="align-middle">成員清單</span>
59
- </a></li>
60
- </div>
61
- <li>
62
- <hr class="dropdown-divider">
63
- </li>
64
- <li>
65
- <h6 class="dropdown-header text-body-tertiary">個人</h6>
66
- </li>
67
- <div class="d-flex flex-wrap">
68
- <li class="w-50"><a class="dropdown-item" :href="finalRootDomain + '/Profile'">
69
- <span class="material-icons me-2 align-middle">person</span>
70
- <span class="align-middle">個人資料</span>
71
- </a></li>
72
- <li class="w-50"><a class="dropdown-item" :href="finalRootDomain + '/MyContacts'">
73
- <span class="material-icons me-2 align-middle">people</span>
74
- <span class="align-middle">我的聯絡人</span>
75
- </a></li>
76
- </div>
77
- <li>
78
- <hr class="dropdown-divider">
79
- </li>
80
- <li><a class="dropdown-item" :href="logoutLink">
81
- <span class="material-icons me-2 align-middle">logout</span>
82
- <span class="align-middle">登出</span>
83
- </a></li>
84
- </ul>
85
- </div>
86
- </template>
87
-
88
- <script>
89
- import { ref, computed, onMounted } from "vue";
90
- import axios from 'axios';
91
- import '../../bootstrap/js/dist/dropdown.js';
92
-
93
- export default {
94
- name: "navButton",
95
- props: {
96
- rootDomain: {
97
- type: String,
98
- required: false,
99
- default: ""
100
- },
101
-
102
- // module
103
- moduleInfo: {
104
- type: [String, Object],
105
- required: true,
106
- default: ""
107
- },
108
- indexLink: {
109
- type: String,
110
- required: false,
111
- default: "/Index"
112
- },
113
- logoutLink: {
114
- type: String,
115
- required: false,
116
- default: "/Logout"
117
- },
118
- },
119
- setup(props) {
120
- let result = ref({
121
- moduleInfo: {
122
- name: "",
123
- iconName: ""
124
- }
125
- });
126
-
127
- function getModuleInfo(data) {
128
- if (typeof data === 'string') {
129
- axios.get(data).then((res) => {
130
- result.value = res.data;
131
- });
132
- return result.value;
133
- } else if (typeof data === 'object') {
134
- result.value = data;
135
- }
136
- }
137
-
138
- function checkReload() {
139
- if (!result.value.moduleInfo.name) {
140
- getModuleInfo(props.moduleInfo);
141
- }
142
- }
143
-
144
- const finalRootDomain = computed(() => {
145
- if (props.rootDomain.substr(-1) === "/") {
146
- return props.rootDomain.slice(0, -1);
147
- }
148
- return props.rootDomain;
149
- });
150
-
151
- onMounted(async () => {
152
- getModuleInfo(props.moduleInfo);
153
- });
154
-
155
- return {
156
- result,
157
- getModuleInfo,
158
- checkReload,
159
- finalRootDomain
160
- };
161
- },
162
- };
163
- </script>
164
-
165
- <style lang="scss">
166
- @import "../../../node_modules/bootstrap/scss/functions";
167
- @import "../../../node_modules/jobdone-shared-files/style/scss/Settings/bs-variables";
168
- @import "../../../node_modules/bootstrap/scss/mixins";
169
- @import "../../../node_modules/jobdone-shared-files/style/scss/Settings/custom-variables";
170
- @import "../../../node_modules/jobdone-shared-files/style/scss/Settings/Mixins";
171
-
172
- #main-menu-toggle{
173
- position: absolute;
174
- @include size(0);
175
- opacity: 0;
176
- pointer-events: none;
177
- &:checked ~{
178
- .dropdown-menu, .menu-backdrop{
179
- display: block;
180
- }
181
- .menu-backdrop{
182
- pointer-events: auto;
183
- }
184
- }
185
- }
186
-
187
- .btn-square[for="main-menu-toggle"]{
188
- @include flex-center();
189
- }
190
-
191
- .dropdown-main-menu .dropdown-menu{
192
- --bs-dropdown-min-width: 25rem;
193
- box-shadow: 0 1rem 3rem rgba(73, 85, 98, 0.35);
194
- margin: 2px 0;
195
- z-index: $zindex-toast + 2;
196
- .dropdown-header{
197
- --bs-dropdown-header-padding-x: 2rem;
198
- }
199
- .dropdown-item{
200
- --bs-dropdown-item-padding-x: 2rem;
201
- --bs-dropdown-item-padding-y: .5rem;
202
- }
203
- }
204
-
205
- .menu-backdrop{
206
- display: none;
207
- position: fixed;
208
- top: 0;
209
- left: 0;
210
- right: 0;
211
- bottom: 0;
212
- width: 100%;
213
- height: 100%;
214
- z-index: $zindex-toast + 1;
215
- pointer-events: none;
216
- }
217
-
218
- </style>
1
+ <template>
2
+ <div class="dropdown dropdown-main-menu border-end">
3
+ <input type="checkbox" id="main-menu-toggle">
4
+ <label for="main-menu-toggle" class="btn btn-link btn-link-light-bg btn-square" title="開啟選單" @click="checkReload()">
5
+ <span class="material-icons">apps</span>
6
+ </label>
7
+ <label for="main-menu-toggle" class="menu-backdrop"></label>
8
+ <ul class="dropdown-menu rounded-4">
9
+ <li><a class="dropdown-item" :href="indexLink">
10
+ <span class="material-icons me-2 align-middle">home</span>
11
+ <span class="align-middle">
12
+ Jobdone
13
+ <span v-if="result.moduleInfo">{{result?.moduleInfo?.name}}</span>
14
+ <span v-else>個人方案</span>
15
+ </span>
16
+ </a></li>
17
+ <li>
18
+ <hr class="dropdown-divider">
19
+ </li>
20
+ <template v-if="result.generalLinks?.length > 0">
21
+ <li>
22
+ <h6 class="dropdown-header text-body-tertiary">我的待辦事項</h6>
23
+ </li>
24
+ <div class="d-flex flex-wrap">
25
+ <li class="w-50" v-for="(item, index) in result.generalLinks" :key="index">
26
+ <a class="dropdown-item" :href="item.url">
27
+ <span class="material-icons me-2 align-middle">{{ item.iconName }}</span>
28
+ <span class="align-middle">{{ item.name }}</span>
29
+ </a>
30
+ </li>
31
+ </div>
32
+ <li>
33
+ <hr class="dropdown-divider" v-if="!result.isPersonal">
34
+ </li>
35
+ </template>
36
+ <li>
37
+ <h6 class="dropdown-header text-body-tertiary" v-if="!result.isPersonal">公司資訊</h6>
38
+ </li>
39
+ <div class="d-flex flex-wrap" v-if="!result.isPersonal">
40
+ <li class="w-50"><a class="dropdown-item" :href="finalRootDomain + '/CompanyOrderDetail?tab=0'">
41
+ <span class="material-icons me-2 align-middle">text_snippet</span>
42
+ <span class="align-middle">目前方案</span>
43
+ </a></li>
44
+ <li class="w-50" v-if="result.isPaymentAdmin"><a class="dropdown-item" :href="finalRootDomain + '/CompanyOrderDetail?tab=1'">
45
+ <span class="material-icons me-2 align-middle">history_edu</span>
46
+ <span class="align-middle">歷史訂單</span>
47
+ </a></li>
48
+ <li class="w-50"><a class="dropdown-item" :href="finalRootDomain + '/CompanyOrderDetail?tab=2'">
49
+ <span class="material-icons me-2 align-middle">business</span>
50
+ <span class="align-middle">公司資訊</span>
51
+ </a></li>
52
+ <li class="w-50" v-if="result.isPaymentAdmin"><a class="dropdown-item" :href="finalRootDomain + '/CompanyOrderDetail?tab=3'">
53
+ <span class="material-icons me-2 align-middle">payment</span>
54
+ <span class="align-middle">帳務資訊</span>
55
+ </a></li>
56
+ <li class="w-50"><a class="dropdown-item" :href="finalRootDomain + '/UserManagement'">
57
+ <span class="material-icons me-2 align-middle">supervised_user_circle</span>
58
+ <span class="align-middle">成員清單</span>
59
+ </a></li>
60
+ </div>
61
+ <li>
62
+ <hr class="dropdown-divider">
63
+ </li>
64
+ <li>
65
+ <h6 class="dropdown-header text-body-tertiary">個人</h6>
66
+ </li>
67
+ <div class="d-flex flex-wrap">
68
+ <li class="w-50"><a class="dropdown-item" :href="finalRootDomain + '/Profile'">
69
+ <span class="material-icons me-2 align-middle">person</span>
70
+ <span class="align-middle">個人資料</span>
71
+ </a></li>
72
+ <li class="w-50"><a class="dropdown-item" :href="finalRootDomain + '/MyContacts'">
73
+ <span class="material-icons me-2 align-middle">people</span>
74
+ <span class="align-middle">我的聯絡人</span>
75
+ </a></li>
76
+ </div>
77
+ <li>
78
+ <hr class="dropdown-divider">
79
+ </li>
80
+ <li><a class="dropdown-item" :href="logoutLink">
81
+ <span class="material-icons me-2 align-middle">logout</span>
82
+ <span class="align-middle">登出</span>
83
+ </a></li>
84
+ </ul>
85
+ </div>
86
+ </template>
87
+
88
+ <script>
89
+ import { ref, computed, onMounted } from "vue";
90
+ import axios from 'axios';
91
+ import '../../bootstrap/js/dist/dropdown.js';
92
+
93
+ export default {
94
+ name: "navButton",
95
+ props: {
96
+ rootDomain: {
97
+ type: String,
98
+ required: false,
99
+ default: ""
100
+ },
101
+
102
+ // module
103
+ moduleInfo: {
104
+ type: [String, Object],
105
+ required: true,
106
+ default: ""
107
+ },
108
+ indexLink: {
109
+ type: String,
110
+ required: false,
111
+ default: "/Index"
112
+ },
113
+ logoutLink: {
114
+ type: String,
115
+ required: false,
116
+ default: "/Logout"
117
+ },
118
+ },
119
+ setup(props) {
120
+ let result = ref({
121
+ moduleInfo: {
122
+ name: "",
123
+ iconName: ""
124
+ }
125
+ });
126
+
127
+ function getModuleInfo(data) {
128
+ if (typeof data === 'string') {
129
+ axios.get(data).then((res) => {
130
+ result.value = res.data;
131
+ });
132
+ return result.value;
133
+ } else if (typeof data === 'object') {
134
+ result.value = data;
135
+ }
136
+ }
137
+
138
+ function checkReload() {
139
+ if (!result.value.moduleInfo.name) {
140
+ getModuleInfo(props.moduleInfo);
141
+ }
142
+ }
143
+
144
+ const finalRootDomain = computed(() => {
145
+ if (props.rootDomain.substr(-1) === "/") {
146
+ return props.rootDomain.slice(0, -1);
147
+ }
148
+ return props.rootDomain;
149
+ });
150
+
151
+ onMounted(async () => {
152
+ getModuleInfo(props.moduleInfo);
153
+ });
154
+
155
+ return {
156
+ result,
157
+ getModuleInfo,
158
+ checkReload,
159
+ finalRootDomain
160
+ };
161
+ },
162
+ };
163
+ </script>
164
+
165
+ <style lang="scss">
166
+ @import "../../../node_modules/bootstrap/scss/functions";
167
+ @import "../../../node_modules/jobdone-shared-files/style/scss/Settings/bs-variables";
168
+ @import "../../../node_modules/bootstrap/scss/mixins";
169
+ @import "../../../node_modules/jobdone-shared-files/style/scss/Settings/custom-variables";
170
+ @import "../../../node_modules/jobdone-shared-files/style/scss/Settings/Mixins";
171
+
172
+ #main-menu-toggle{
173
+ position: absolute;
174
+ @include size(0);
175
+ opacity: 0;
176
+ pointer-events: none;
177
+ &:checked ~{
178
+ .dropdown-menu, .menu-backdrop{
179
+ display: block;
180
+ }
181
+ .menu-backdrop{
182
+ pointer-events: auto;
183
+ }
184
+ }
185
+ }
186
+
187
+ .btn-square[for="main-menu-toggle"]{
188
+ @include flex-center();
189
+ }
190
+
191
+ .dropdown-main-menu .dropdown-menu{
192
+ --bs-dropdown-min-width: 25rem;
193
+ box-shadow: 0 1rem 3rem rgba(73, 85, 98, 0.35);
194
+ margin: 2px 0;
195
+ z-index: $zindex-toast + 2;
196
+ .dropdown-header{
197
+ --bs-dropdown-header-padding-x: 2rem;
198
+ }
199
+ .dropdown-item{
200
+ --bs-dropdown-item-padding-x: 2rem;
201
+ --bs-dropdown-item-padding-y: .5rem;
202
+ }
203
+ }
204
+
205
+ .menu-backdrop{
206
+ display: none;
207
+ position: fixed;
208
+ top: 0;
209
+ left: 0;
210
+ right: 0;
211
+ bottom: 0;
212
+ width: 100%;
213
+ height: 100%;
214
+ z-index: $zindex-toast + 1;
215
+ pointer-events: none;
216
+ }
217
+
218
+ </style>