jobdone-shared-files 0.0.1-beta.85 → 0.0.1-beta.87

package/README.md

@@ -40,7 +40,20 @@
 | 4.   | 開啟loading        | `isLoading.value = true;`                    |
 | 5.   | 關閉loading        | `isLoading.value = false;`                   |
 
-
+### vue-loading-overlay 可用變數：
+| #   | 參數 Attribute | 型別 Type | 預設值 Default | 說明Description                                      |
+| --- | -------------- | --------- | -------------- | ---------------------------------------------------- |
+| 1.   | full-page      | `Boolean` | `true`         | 是否填滿整個視窗。<br>為False時,則填滿放置位置的父層 |
+
+>其他可用變數(統一樣式不推薦修改)：
+>
+| #   | 參數 Attribute | 型別 Type | 預設值 Default | 說明Description    |
+| --- | -------------- | --------- | -------------- | ------------------ |
+| 1.  | is-active      | `Boolean` | `false`        | 開啟 / 關閉 |
+| 2.  | loader      | `String` | `bars`      | 圖案樣式<br>spinner / dots / bars 三種可選|
+| 3.  | colors      | `String` | `#fff`      | 圖案顏色|
+| 4.  | background-color      | `String` | `#000`      | 遮罩顏色|
+| 5.  | opacity      | `Number	` | `0.5`      | 遮罩透明度|
 
 
 ----

package/common/directives/collapse.js

@@ -1,13 +1,13 @@
-import { Collapse } from 'bootstrap'
-
-export default {
-    mounted(el) {
-        Collapse.getOrCreateInstance(el, {
-            toggle: false
-        });
-    },
-    unmounted(el) {
-        var instance = Collapse.getOrCreateInstance(el);
-        instance.dispose();
-    }
+import { Collapse } from 'bootstrap'
+
+export default {
+    mounted(el) {
+        Collapse.getOrCreateInstance(el, {
+            toggle: false
+        });
+    },
+    unmounted(el) {
+        var instance = Collapse.getOrCreateInstance(el);
+        instance.dispose();
+    }
 }

package/common/directives/popovers.js

@@ -1,11 +1,11 @@
-import { Popover } from 'bootstrap'
-
-export default {
-    mounted(el) {
-        Popover.getOrCreateInstance(el);
-    },
-    unmounted(el) {
-        var instance = Popover.getOrCreateInstance(el);
-        instance.dispose();
-    }
+import { Popover } from 'bootstrap'
+
+export default {
+    mounted(el) {
+        Popover.getOrCreateInstance(el);
+    },
+    unmounted(el) {
+        var instance = Popover.getOrCreateInstance(el);
+        instance.dispose();
+    }
 }

package/common/directives/tooltip.js

@@ -1,11 +1,11 @@
-import { Tooltip } from 'bootstrap'
-
-export default {
-    mounted(el) {
-        Tooltip.getOrCreateInstance(el);
-    },
-    unmounted(el) {
-        var instance = Tooltip.getOrCreateInstance(el);
-        instance.dispose();
-    }
+import { Tooltip } from 'bootstrap'
+
+export default {
+    mounted(el) {
+        Tooltip.getOrCreateInstance(el);
+    },
+    unmounted(el) {
+        var instance = Tooltip.getOrCreateInstance(el);
+        instance.dispose();
+    }
 }

package/common/format.js

@@ -1,27 +1,27 @@
-import dayjs from 'dayjs';
-import { computed } from 'vue';
-
-// 時間格式
-export const formatDate = (value) => {
-    if (value === null || !value) {
-        return value;
-    } else {
-        return dayjs(value).format('YYYY-MM-DD');
-    }
-};
-
-export const formatDT = (value) => {
-    if (value === null || !value) {
-        return value;
-    } else {
-        return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
-    }
-};
-
-
-// 千分位格式
-export const formatThousands = computed(() => {
-    return function(number){
-        return new Intl.NumberFormat().format(number);
-    }
+import dayjs from 'dayjs';
+import { computed } from 'vue';
+
+// 時間格式
+export const formatDate = (value) => {
+    if (value === null || !value) {
+        return value;
+    } else {
+        return dayjs(value).format('YYYY-MM-DD');
+    }
+};
+
+export const formatDT = (value) => {
+    if (value === null || !value) {
+        return value;
+    } else {
+        return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
+    }
+};
+
+
+// 千分位格式
+export const formatThousands = computed(() => {
+    return function(number){
+        return new Intl.NumberFormat().format(number);
+    }
 });

package/index.js

@@ -1,15 +1,15 @@
-import paginate from "./paginate.vue";
-import tagEditor from "./tagEditor.vue";
-import tree from "./tree.vue";
-import vueLoadingOverlay from "./vueLoadingOverlay.vue";
-import projectNavbar from "./ProjectManagement/projectNavbar.vue";
-
-export default {
-    paginate,
-    tagEditor,
-    tree,
-    vueLoadingOverlay,
-
-    // ProjectManagement
-    projectNavbar
+import paginate from "./paginate.vue";
+import tagEditor from "./tagEditor.vue";
+import tree from "./tree.vue";
+import vueLoadingOverlay from "./vueLoadingOverlay.vue";
+import projectNavbar from "./ProjectManagement/projectNavbar.vue";
+
+export default {
+    paginate,
+    tagEditor,
+    tree,
+    vueLoadingOverlay,
+
+    // ProjectManagement
+    projectNavbar
 }

package/lightboxWithOverview.vue

@@ -1,132 +1,132 @@
-<template>
-    <vue-easy-lightbox :visible="lightboxVisibleRef" :imgs="picturesData" :index="picturesIndexRef"
-                        @hide="hideLightbox" @on-prev-click="picturesIndexRef--" @on-next-click="picturesIndexRef++"></vue-easy-lightbox>
-    <div class="lightbox-thumbnail-toolbar text-center overflow-hidden" v-if="lightboxVisibleRef">
-        <div class="text-nowrap overflow-x-auto pt-3 px-2 pb-1">
-            <div class="d-inline-block">
-                <div class="d-inline-block thumbnail-content rounded hover-border"
-                    :class="{'active': index == picturesIndexRef}" :style="'background-image: url(' + item.src +');'"
-                    @click="changePictureIndex(index)" v-for="(item, index) in picturesData"></div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    import { ref, computed } from 'vue';
-    import VueEasyLightbox from 'vue-easy-lightbox';
-
-    export default {
-        props: {
-            previewCount: {
-                type: Number,
-                required: false,
-                default: 5
-            },
-            picturesData: {
-                type: Array,
-                required: true
-            },
-            displayIndex: {
-                type: Number,
-                required: false,
-                default: 0
-            },
-        },
-        components: {
-            VueEasyLightbox
-        },
-        setup(props) {
-            const previewPictures = computed(() => {
-                return props.picturesData.slice(0, props.previewCount)
-            });
-            const otherPictureCount = computed(() => {
-                var count = props.picturesData.length - props.previewCount;
-                return count < 0 ? 0 : count;
-            });
-            const lightboxVisibleRef = ref(false);
-            const picturesIndexRef = ref(props.displayIndex);
-
-            const changePictureIndex = (index) => {
-                picturesIndexRef.value = index;
-            };
-
-            const showLightbox = (index) => {
-                changePictureIndex(index);
-                lightboxVisibleRef.value = true;
-            };
-
-            const hideLightbox = () => {
-                lightboxVisibleRef.value = false;
-            }
-
-            return {
-                lightboxVisibleRef,
-                picturesIndexRef, changePictureIndex,
-                showLightbox, hideLightbox,
-                previewCount: props.previewCount,
-                previewPictures,
-                otherPictureCount
-            }
-        }
-    }
-</script>
-
-<style scoped lang="scss">
-    @import "./style/scss/Settings/basic-import";
-    .hover-border{
-        transition: $transition-base;
-        &:hover{
-            box-shadow: $focus-ring-box-shadow;
-        }
-    }
-
-    .vel-modal{
-        backdrop-filter: var(--backdrop-blur);
-    }
-
-    .lightbox-thumbnail-toolbar .thumbnail-content{
-        cursor: pointer;
-    }
-
-    .lightbox-thumbnail-toolbar{
-        $padding-x: 10vw;
-        position: fixed;
-        top: 0;
-        left: $padding-x;
-        right: $padding-x;
-        margin: auto;
-        z-index: 10000;
-        animation: fadeIn .5s;
-        pointer-events: none;
-        .overflow-x-auto{
-            display: inline-block;
-            max-width: 100%;
-            pointer-events: auto;
-        }
-        .thumbnail-content{
-            --bs-border-color: rgba(0,0,0, 0.12);
-            @include solid-size(40px);
-            filter: brightness(0.5);
-            transition: $transition-base;
-            &:not(:last-child){
-                margin-right: 1rem;
-            }
-            &:hover{
-                filter: brightness(.8);
-            }
-            &.active{
-                filter: brightness(1);
-            }
-            &:hover, &.active{
-                --bs-border-color: rgba(255,255,255, 0.3);
-            }
-        }
-        .hover-border:hover{
-            box-shadow: 0 0 $focus-ring-blur $focus-ring-width rgba(255,255,255, .25);
-        }
-        .overflow-x-auto{
-            --bs-emphasis-color-rgb: 255, 255, 255;
-        }
-    }
+<template>
+    <vue-easy-lightbox :visible="lightboxVisibleRef" :imgs="picturesData" :index="picturesIndexRef"
+                        @hide="hideLightbox" @on-prev-click="picturesIndexRef--" @on-next-click="picturesIndexRef++"></vue-easy-lightbox>
+    <div class="lightbox-thumbnail-toolbar text-center overflow-hidden" v-if="lightboxVisibleRef">
+        <div class="text-nowrap overflow-x-auto pt-3 px-2 pb-1">
+            <div class="d-inline-block">
+                <div class="d-inline-block thumbnail-content rounded hover-border"
+                    :class="{'active': index == picturesIndexRef}" :style="'background-image: url(' + item.src +');'"
+                    @click="changePictureIndex(index)" v-for="(item, index) in picturesData"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { ref, computed } from 'vue';
+    import VueEasyLightbox from 'vue-easy-lightbox';
+
+    export default {
+        props: {
+            previewCount: {
+                type: Number,
+                required: false,
+                default: 5
+            },
+            picturesData: {
+                type: Array,
+                required: true
+            },
+            displayIndex: {
+                type: Number,
+                required: false,
+                default: 0
+            },
+        },
+        components: {
+            VueEasyLightbox
+        },
+        setup(props) {
+            const previewPictures = computed(() => {
+                return props.picturesData.slice(0, props.previewCount)
+            });
+            const otherPictureCount = computed(() => {
+                var count = props.picturesData.length - props.previewCount;
+                return count < 0 ? 0 : count;
+            });
+            const lightboxVisibleRef = ref(false);
+            const picturesIndexRef = ref(props.displayIndex);
+
+            const changePictureIndex = (index) => {
+                picturesIndexRef.value = index;
+            };
+
+            const showLightbox = (index) => {
+                changePictureIndex(index);
+                lightboxVisibleRef.value = true;
+            };
+
+            const hideLightbox = () => {
+                lightboxVisibleRef.value = false;
+            }
+
+            return {
+                lightboxVisibleRef,
+                picturesIndexRef, changePictureIndex,
+                showLightbox, hideLightbox,
+                previewCount: props.previewCount,
+                previewPictures,
+                otherPictureCount
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "./style/scss/Settings/basic-import";
+    .hover-border{
+        transition: $transition-base;
+        &:hover{
+            box-shadow: $focus-ring-box-shadow;
+        }
+    }
+
+    .vel-modal{
+        backdrop-filter: var(--backdrop-blur);
+    }
+
+    .lightbox-thumbnail-toolbar .thumbnail-content{
+        cursor: pointer;
+    }
+
+    .lightbox-thumbnail-toolbar{
+        $padding-x: 10vw;
+        position: fixed;
+        top: 0;
+        left: $padding-x;
+        right: $padding-x;
+        margin: auto;
+        z-index: 10000;
+        animation: fadeIn .5s;
+        pointer-events: none;
+        .overflow-x-auto{
+            display: inline-block;
+            max-width: 100%;
+            pointer-events: auto;
+        }
+        .thumbnail-content{
+            --bs-border-color: rgba(0,0,0, 0.12);
+            @include solid-size(40px);
+            filter: brightness(0.5);
+            transition: $transition-base;
+            &:not(:last-child){
+                margin-right: 1rem;
+            }
+            &:hover{
+                filter: brightness(.8);
+            }
+            &.active{
+                filter: brightness(1);
+            }
+            &:hover, &.active{
+                --bs-border-color: rgba(255,255,255, 0.3);
+            }
+        }
+        .hover-border:hover{
+            box-shadow: 0 0 $focus-ring-blur $focus-ring-width rgba(255,255,255, .25);
+        }
+        .overflow-x-auto{
+            --bs-emphasis-color-rgb: 255, 255, 255;
+        }
+    }
 </style>

package/package.json

@@ -1,19 +1,19 @@
-{
-  "name": "jobdone-shared-files",
-  "version": "0.0.1-beta.85",
-  "description": "Shared JS and SCSS for Jobdone Enterprise.",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "Pyramius",
-  "license": "MIT",
-  "dependencies": {
-    "axios": "^1.2.2",
-    "vue": "^3.2.45",
-    "vue-loading-overlay": "^6.0.3",
-    "bootstrap": "^5.3.0",
-    "dayjs": "^1.11.7",
-    "vue-easy-lightbox": "^1.16.0"
-  }
-}
+{
+  "name": "jobdone-shared-files",
+  "version": "0.0.1-beta.87",
+  "description": "Shared JS and SCSS for Jobdone Enterprise.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Pyramius",
+  "license": "MIT",
+  "dependencies": {
+    "axios": "^1.2.2",
+    "vue": "^3.2.45",
+    "vue-loading-overlay": "^6.0.3",
+    "bootstrap": "^5.3.0",
+    "dayjs": "^1.11.7",
+    "vue-easy-lightbox": "^1.16.0"
+  }
+}