jobdone-shared-files 0.0.1-beta.8 → 0.0.1-beta.80

package/lightboxWithOverview.vue

@@ -0,0 +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;
+        }
+    }
+</style>

package/package.json

@@ -1,18 +1,19 @@
-{
-  "name": "jobdone-shared-files",
-  "version": "0.0.1-beta.8",
-  "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-alpha1",
-    "dayjs": "^1.11.7"
-  }
-}
+{
+  "name": "jobdone-shared-files",
+  "version": "0.0.1-beta.80",
+  "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"
+  }
+}

package/paginate.vue

@@ -1,139 +1,139 @@
-<template>
-    <ul class="pagination pagination-round mb-0" :class="containerClass">
-        <li class="page-item" :class="{'disabled':!pagination.ShowToPrev}">
-            <button type="button" class="page-link" @click="toPage(1)">
-                <span class="material-icons">first_page</span>
-            </button>
-        </li>
-        <li class="page-item" :class="{'disabled':!pagination.ShowToPrev}">
-            <button type="button" class="page-link" @click="toPage(currentPage-1)">
-                <span class="material-icons icon-18">chevron_left</span>
-            </button>
-        </li>
-        <li class="page-item page-item-ellipsis" v-if="pagination.ShowPrevPageMore">
-            <span>⋯</span>
-        </li>
-        <li class="page-item" v-for="n in range" :class="{'active':n===currentPage}">
-            <button type="button" class="page-link" @click="toPage(n)">{{n}}</button>
-        </li>
-        <li class="page-item page-item-ellipsis" v-if="pagination.ShowNextPageMore">
-            <span>⋯</span>
-        </li>
-        <li class="page-item" :class="{'disabled':!pagination.ShowToNext}">
-            <button type="button" class="page-link" @click="toPage(currentPage+1)">
-                <span class="material-icons icon-18">chevron_right</span>
-            </button>
-        </li>
-        <li class="page-item" :class="{'disabled':!pagination.ShowToNext}">
-            <button type="button" class="page-link" @click="toPage(totalPages)">
-                <span class="material-icons">last_page</span>
-            </button>
-        </li>
-    </ul>
-</template>
-
-<script>
-    import { computed } from 'vue';
-    export default {
-        props: {
-            currentPage: {
-                type: Number,
-                default: 1
-            },
-            totalPages: {
-                type: Number,
-                default: 1
-            },
-            pageRange: {
-                type: Number,
-                default: 5
-            },
-            containerClass: {
-                type: String,
-                default: ""
-            },
-            pageItemClass: {
-                type: String,
-                default: ""
-            },
-            clickHandler: {
-                type: Function
-            }
-        },
-        setup(props, { emit}) {
-            const range = computed(() => {
-                let min = 1;
-                let max = 1;
-                if (props.pageRange < props.totalPages) {
-                    max = props.currentPage + Math.floor(props.pageRange / 2);
-                    max = (max > props.totalPages) ? props.totalPages : max;
-                    if (max - props.pageRange < 1) {
-                        min = 1;
-                        max = props.pageRange;
-                    } else {
-                        min = max - props.pageRange + 1;
-                    }
-                } else {
-                    min = 1;
-                    max = props.totalPages;
-                }
-                const range = [];
-                for (var i = min; i <= max; i++) {
-                    range.push(i);
-                }
-                return range;
-            });
-            const pagination = computed(() => {
-                return {
-                    ShowToPrev: props.currentPage > 1,
-                    ShowPrevPageMore: range.value[0] > 2,
-                    ShowNextPageMore: range.value[range.value.length - 1] < props.totalPages - 1,
-                    ShowToNext: props.currentPage < props.totalPages
-                }
-            });
-            const toPage = (pageNum) => {
-                emit('to-page', pageNum);
-            }
-            return {
-                range,
-                pagination,
-                toPage
-            };
-        }
-    }
-</script>
-
-<style scoped lang="scss">
-    @import "./style/scss/Settings/basic-import";
-
-    .page-link{
-        height: 100%;
-    }
-
-    .pagination.pagination-round .page-item{
-        &:not(:last-child){
-            margin-right: .5em;
-        }
-        .page-link{
-            @include flex-center();
-            @include size(35px);
-            border-radius: 50%;
-            overflow: hidden;
-            .material-icons{
-                font-size: 130%;
-            }
-        }
-    }
-    .pagination-sm.pagination-round .page-item .page-link{
-        @include size(30px);
-    }
-    .pagination-lg.pagination-round .page-item .page-link{
-        @include size(60px);
-    }
-    .page-item-ellipsis{
-        display: flex;
-        align-items: center;
-        color: var(--gray-500);
-        font-size: var(--bs-pagination-font-size);
-    }
+<template>
+    <ul class="pagination pagination-round mb-0" :class="containerClass">
+        <li class="page-item" :class="{'disabled':!pagination.ShowToPrev}">
+            <button type="button" class="page-link" @click="toPage(1)">
+                <span class="material-icons">first_page</span>
+            </button>
+        </li>
+        <li class="page-item" :class="{'disabled':!pagination.ShowToPrev}">
+            <button type="button" class="page-link" @click="toPage(currentPage-1)">
+                <span class="material-icons icon-18">chevron_left</span>
+            </button>
+        </li>
+        <li class="page-item page-item-ellipsis" v-if="pagination.ShowPrevPageMore">
+            <span>⋯</span>
+        </li>
+        <li class="page-item" v-for="n in range" :class="{'active':n===currentPage}">
+            <button type="button" class="page-link" @click="toPage(n)">{{n}}</button>
+        </li>
+        <li class="page-item page-item-ellipsis" v-if="pagination.ShowNextPageMore">
+            <span>⋯</span>
+        </li>
+        <li class="page-item" :class="{'disabled':!pagination.ShowToNext}">
+            <button type="button" class="page-link" @click="toPage(currentPage+1)">
+                <span class="material-icons icon-18">chevron_right</span>
+            </button>
+        </li>
+        <li class="page-item" :class="{'disabled':!pagination.ShowToNext}">
+            <button type="button" class="page-link" @click="toPage(totalPages)">
+                <span class="material-icons">last_page</span>
+            </button>
+        </li>
+    </ul>
+</template>
+
+<script>
+    import { computed } from 'vue';
+    export default {
+        props: {
+            currentPage: {
+                type: Number,
+                default: 1
+            },
+            totalPages: {
+                type: Number,
+                default: 1
+            },
+            pageRange: {
+                type: Number,
+                default: 5
+            },
+            containerClass: {
+                type: String,
+                default: ""
+            },
+            pageItemClass: {
+                type: String,
+                default: ""
+            },
+            clickHandler: {
+                type: Function
+            }
+        },
+        setup(props, { emit}) {
+            const range = computed(() => {
+                let min = 1;
+                let max = 1;
+                if (props.pageRange < props.totalPages) {
+                    max = props.currentPage + Math.floor(props.pageRange / 2);
+                    max = (max > props.totalPages) ? props.totalPages : max;
+                    if (max - props.pageRange < 1) {
+                        min = 1;
+                        max = props.pageRange;
+                    } else {
+                        min = max - props.pageRange + 1;
+                    }
+                } else {
+                    min = 1;
+                    max = props.totalPages;
+                }
+                const range = [];
+                for (var i = min; i <= max; i++) {
+                    range.push(i);
+                }
+                return range;
+            });
+            const pagination = computed(() => {
+                return {
+                    ShowToPrev: props.currentPage > 1,
+                    ShowPrevPageMore: range.value[0] > 2,
+                    ShowNextPageMore: range.value[range.value.length - 1] < props.totalPages - 1,
+                    ShowToNext: props.currentPage < props.totalPages
+                }
+            });
+            const toPage = (pageNum) => {
+                emit('to-page', pageNum);
+            }
+            return {
+                range,
+                pagination,
+                toPage
+            };
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "./style/scss/Settings/basic-import";
+
+    .page-link{
+        height: 100%;
+    }
+
+    .pagination.pagination-round .page-item{
+        &:not(:last-child){
+            margin-right: .5em;
+        }
+        .page-link{
+            @include flex-center();
+            @include size(35px);
+            border-radius: 50%;
+            overflow: hidden;
+            .material-icons{
+                font-size: 130%;
+            }
+        }
+    }
+    .pagination-sm.pagination-round .page-item .page-link{
+        @include size(30px);
+    }
+    .pagination-lg.pagination-round .page-item .page-link{
+        @include size(60px);
+    }
+    .page-item-ellipsis{
+        display: flex;
+        align-items: center;
+        color: var(--gray-500);
+        font-size: var(--bs-pagination-font-size);
+    }
 </style>

package/style/css/vue-loading-overlay/index.css

@@ -1,40 +1,40 @@
-.vl-shown {
-  overflow: hidden;
-}
-
-.vl-overlay {
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  align-items: center;
-  display: none;
-  justify-content: center;
-  overflow: hidden;
-  z-index: 9999;
-}
-
-.vl-overlay.vl-active {
-  display: flex;
-}
-
-.vl-overlay.vl-full-page {
-  z-index: 9999;
-  position: fixed;
-}
-
-.vl-overlay .vl-background {
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  background: #fff;
-  opacity: 0.5;
-}
-
-.vl-overlay .vl-icon, .vl-parent {
-  position: relative;
-}
-
+.vl-shown {
+  overflow: hidden;
+}
+
+.vl-overlay {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  align-items: center;
+  display: none;
+  justify-content: center;
+  overflow: hidden;
+  z-index: 9999;
+}
+
+.vl-overlay.vl-active {
+  display: flex;
+}
+
+.vl-overlay.vl-full-page {
+  z-index: 9999;
+  position: fixed;
+}
+
+.vl-overlay .vl-background {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  background: #fff;
+  opacity: 0.5;
+}
+
+.vl-overlay .vl-icon, .vl-parent {
+  position: relative;
+}
+

package/style/scss/Common/Animation.scss

@@ -0,0 +1,6 @@
+@import "../Settings/basic-import";
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}

package/style/scss/Common/SelectableTable.scss

@@ -0,0 +1,31 @@
+@import "../Settings/basic-import";
+
+th.bg-secondary{
+    position: relative;
+    &:after{
+        content: "";
+        position: absolute;
+        left: 0;
+        bottom: -$border-width;
+        height: $border-width;
+        width: 100%;
+        background-color: $secondary;
+    }
+}
+
+.table{
+    background-color: $white;
+}
+
+tr:has(input[type="checkbox"]:checked) > td:not([scope="col"]){
+    --bs-table-accent-bg: transparent;
+    --bs-table-bg: rgba(var(--bs-primary-rgb), .1);
+    color: var(--bs-table-hover-color);
+}
+
+.td-check, .td-avatar-sm{
+    width: 2rem;
+}
+.td-avatar-md{
+    width: 3rem;
+}

package/style/scss/Common/filepond.scss

@@ -0,0 +1,28 @@
+@import "../Settings/basic-import";
+
+.can-click{
+    cursor: pointer;
+}
+
+.filepond--root.filepond--hopper {
+    border: 1px dashed var(--bs-gray-400);
+    border-radius: 0.5em;
+    overflow: hidden;
+}
+
+.filepond--drop-label {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.filepond-label-box-cus {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+}
+
+.filepond--panel-root {
+    background-color: $blue-100 !important;
+}

package/style/scss/Common/thumbnail-group.scss

@@ -0,0 +1,14 @@
+
+.thumbnail-group{
+    $offset: .5rem;
+    position: relative;
+    display: inline-flex;
+    margin-right: $offset;
+    margin-bottom: $offset;
+    .thumbnail-pin{
+        position: absolute;
+        right: -$offset;
+        bottom: -$offset;
+        box-shadow: $box-shadow;
+    }
+}