jobdone-shared-files 0.0.1-beta.2

package/style/scss/Settings/_color-mode.scss

@@ -0,0 +1,123 @@
+$auto-dark-mode: false;
+
+$grays-light-mode: (
+    "000": $white,
+    "100": $gray-100,
+    "200": $gray-200,
+    "300": $gray-300,
+    "400": $gray-400,
+    "500": $gray-500,
+    "600": $gray-600,
+    "700": $gray-700,
+    "800": $gray-800,
+    "900": $gray-900,
+    "1000": $black,
+) !default;
+
+$grays-dark-mode: (
+    "000": darken($gray-900, 5%),
+    "100": $gray-900,
+    "200": $gray-800,
+    "300": $gray-700,
+    "400": $gray-600,
+    "500": $gray-500,
+    "600": $gray-400,
+    "700": $gray-300,
+    "800": $gray-200,
+    "900": $gray-100,
+    "1000": $white,
+) !default;
+
+
+:root{
+    @each $color, $value in $grays-light-mode {
+        --gray-#{$color}: #{$value};
+    }
+}
+
+// class --------------------------------------------
+@each $color, $value in $grays-light-mode {
+    .bg-gray-#{$color}{
+        background-color: var(--gray-#{$color});
+    }
+    .text-gray-#{$color}{
+        color: var(--gray-#{$color});
+    }
+}
+// class --------------------------------------------
+
+
+// dark setting --------------------------------------------
+@if $auto-dark-mode {
+    @media (prefers-color-scheme: dark) {
+        :root{
+            @each $color, $value in $grays-dark-mode {
+                --gray-#{$color}: #{$value};
+            }
+
+            // copy from bootstrap (5.3.0-alpha1)
+            
+            // scss-docs-start root-dark-mode-vars
+            --bs-body-color: #{$body-color-dark};
+            --bs-body-color-rgb: #{to-rgb($body-color-dark)};
+            --bs-body-bg: #{$body-bg-dark};
+            --bs-body-bg-rgb: #{to-rgb($body-bg-dark)};
+        
+            --bs-emphasis-color: #{$body-emphasis-color-dark};
+            --bs-emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
+        
+            --bs-secondary-color: #{$body-secondary-color-dark};
+            --bs-secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
+            --bs-secondary-bg: #{$body-secondary-bg-dark};
+            --bs-secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
+        
+            --bs-tertiary-color: #{$body-tertiary-color-dark};
+            --bs-tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
+            --bs-tertiary-bg: #{$body-tertiary-bg-dark};
+            --bs-tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
+        
+            --bs-emphasis-color: #{$emphasis-color-dark};
+        
+            --bs-primary-text: #{$primary-text-dark};
+            --bs-secondary-text: #{$secondary-text-dark};
+            --bs-success-text: #{$success-text-dark};
+            --bs-info-text: #{$info-text-dark};
+            --bs-warning-text: #{$warning-text-dark};
+            --bs-danger-text: #{$danger-text-dark};
+            --bs-light-text: #{$light-text-dark};
+            --bs-dark-text: #{$dark-text-dark};
+        
+            --bs-primary-bg-subtle: #{$primary-bg-subtle-dark};
+            --bs-secondary-bg-subtle: #{$secondary-bg-subtle-dark};
+            --bs-success-bg-subtle: #{$success-bg-subtle-dark};
+            --bs-info-bg-subtle: #{$info-bg-subtle-dark};
+            --bs-warning-bg-subtle: #{$warning-bg-subtle-dark};
+            --bs-danger-bg-subtle: #{$danger-bg-subtle-dark};
+            --bs-light-bg-subtle: #{$light-bg-subtle-dark};
+            --bs-dark-bg-subtle: #{$dark-bg-subtle-dark};
+        
+            --bs-primary-border-subtle: #{$primary-border-subtle-dark};
+            --bs-secondary-border-subtle: #{$secondary-border-subtle-dark};
+            --bs-success-border-subtle: #{$success-border-subtle-dark};
+            --bs-info-border-subtle: #{$info-border-subtle-dark};
+            --bs-warning-border-subtle: #{$warning-border-subtle-dark};
+            --bs-danger-border-subtle: #{$danger-border-subtle-dark};
+            --bs-light-border-subtle: #{$light-border-subtle-dark};
+            --bs-dark-border-subtle: #{$dark-border-subtle-dark};
+        
+            --bs-heading-color: #{$headings-color-dark};
+        
+            --bs-link-color: #{$link-color-dark};
+            --bs-link-hover-color: #{$link-hover-color-dark};
+            --bs-link-color-rgb: #{to-rgb($link-color-dark)};
+            --bs-link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
+        
+            --bs-code-color: #{$code-color-dark};
+        
+            --bs-border-color: #{$border-color-dark};
+            --bs-border-color-translucent: #{$border-color-translucent-dark};
+            // scss-docs-end root-dark-mode-vars
+        }
+    }
+}
+// dark setting --------------------------------------------

package/style/scss/Settings/_custom-variables.scss

@@ -0,0 +1,7 @@
+$gradient-blue: linear-gradient(295deg, #4483E0 13.42%, #C6DDFF 95.81%);
+$gradient-blue-light: linear-gradient(295deg, rgba(#4483E0, .1) 13.42%, rgba(#C6DDFF, .1) 95.81%);
+
+$primary-bg-light: rgba(var(--bs-link-color-rgb), .07);
+$primary-sub-highlight: rgba(var(--bs-link-color-rgb), .5);
+
+$zindex-max: 2000 !default;

package/tagEditor.vue

@@ -0,0 +1,264 @@
+<template>
+    <div class="tag-editor" v-if="tagAry">
+        <div class="main-cont">
+            <div class="form-control form-control-sm" :class="disabled ? 'is-disabled' : ''">
+                <template v-if="tagAry.length">
+                    <div class="badge rounded-pill" :class="disabled ? 'badge-outline-gray ' : 'badge-outline-purple'"
+                        v-for="(tag, index) in tagAry" :key="index" :title="tag">
+                        <div class="tag-text">{{ tag }}</div>
+                        <div class="remove-btn-box" v-if="!disabled">
+                            <button type="button" class="remove-btn" @click="removeTag(index)"><span
+                                    class="material-icons">close</span>
+                            </button>
+                        </div>
+                    </div>
+                </template>
+                <input v-if="!disabled" class="new-tag-input" list="datalistOptions" type="text" :placeholder="placeholder"
+                    v-model.trim="newTag" @keydown.enter="addTag" @keyup="keyupFunction">
+                <datalist id="datalistOptions" v-if="autoCompleteShow">
+                    <option :value="opt" v-for="(opt, idx) in autoCompleteOption" :key="idx">{{ opt }}</option>
+                </datalist>
+            </div>
+        </div>
+        <div class="helper-text-box" v-if="!disabled">
+            <small class="helper-text">在輸入框中輸入文字後，按下鍵盤的"Enter"鍵，即可增加標籤。(標籤僅接受中文、英文、數字、下底線)</small>
+        </div>
+    </div>
+</template>
+<script>
+// enum Data & Functions
+// import { } from '../common/enum.js'
+
+// vue & bootstrap
+import { ref, reactive, onMounted, computed } from 'vue'
+// import {  } from 'bootstrap';
+
+// plugins
+// import { v4 as uuidv4 } from 'uuid';
+// import { useVuelidate } from '@vuelidate/core'
+// import { required } from '@vuelidate/validators'
+// import { SwalSuccess, SwalConfirmDelete } from '../common/sweetalert.js';
+
+// vue components
+// import Loading from "./vueLoadingOverlay.vue";
+
+export default {
+    props: {
+        defaultTagList: {
+            type: Array,
+            default: () => []
+        },
+        placeholder: {
+            type: String,
+            default: '請在此處輸入標籤文字'
+        },
+        autoComplete: {
+            type: Boolean,
+            default: true
+        },
+        autoCompleteOption: {
+            type: Array,
+            default: () => []
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        }
+    },
+    setup(props, { emit }) {
+        // 基本資料
+        const tagAry = reactive([])
+        const newTag = ref('')
+
+        const autoCompleteShow = computed(() => {
+            let show = props.autoComplete
+            if (!newTag.value || props.autoCompleteOption.length < 1) {
+                show = false
+            }
+            return show
+        })
+        // 輸入時 AutoComplete
+        var autoCompleteTimer
+        function updateAutoCompleteOption() {
+            clearTimeout(autoCompleteTimer);
+            if (newTag.value) {
+                autoCompleteTimer = setTimeout(() => {
+                    emit('update-auto-complete-option', newTag.value);
+                }, 500);
+            }
+        }
+
+        // 刷新預設選中內容
+        function getDefaultTag(updateData = []) {
+            tagAry.splice(0, tagAry.length, ...updateData)
+        }
+        function keyupFunction() {
+            if (props.autoCompleteOption) {
+                updateAutoCompleteOption()
+            }
+            newTag.value = newTag.value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g, '_')
+        }
+
+        // 重複標籤禁止新增
+        var isDuplicate = computed(() => {
+            return newTag.value ? !!tagAry.find(tag => tag == newTag.value) : false
+        })
+
+        // 增加Tag
+        function addTag() {
+            if (newTag.value && !isDuplicate.value) {
+                tagAry.push(newTag.value)
+            }
+            newTag.value = ''
+        }
+        // 移除Tag
+        function removeTag(index) {
+            tagAry.splice(index, 1)
+        }
+        function reset() {
+            tagAry.splice(0, tagAry.length)
+            newTag.value = ''
+        }
+
+        onMounted(() => {
+            getDefaultTag(props.defaultTagList)
+        })
+        return {
+            tagAry,
+            newTag,
+            addTag,
+            removeTag,
+            updateAutoCompleteOption,
+            autoCompleteTimer,
+            autoCompleteShow,
+            reset,
+            keyupFunction,
+            isDuplicate,
+            getDefaultTag
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.tag-editor {
+    background: var(--bs-gray-100);
+    border-radius: var(--bs-border-radius);
+    padding: .5rem;
+
+    .helper-text-box {
+        text-align: start;
+
+        .helper-text {
+            font-size: 0.75rem;
+            color: var(--bs-gray-500);
+        }
+    }
+
+    .main-cont {
+        position: relative;
+
+        .auto-complete-box {
+            all: unset;
+            display: none;
+            visibility: hidden;
+            position: absolute;
+            width: 90%;
+            overflow: hidden;
+
+            &.show {
+                visibility: visible;
+                display: block;
+                position: absolute;
+                top: calc(100% + 0.25rem);
+                background: #fff;
+                border: 1px solid var(--bs-gray-300);
+                border-radius: var(--bs-border-radius);
+                box-shadow: var(--bs-box-shadow);
+            }
+
+            .opt-item {
+                padding: 0.5rem;
+                cursor: pointer;
+                overflow: hidden;
+                text-overflow: ellipsis;
+
+                &:not(:last-child) {
+                    border-bottom: 1px solid var(--bs-gray-300);
+                }
+            }
+        }
+    }
+
+    .form-control {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        padding: .5rem .5rem .25rem .5rem;
+
+        &.is-disabled:hover {
+            cursor: not-allowed;
+        }
+    }
+
+    .new-tag-input {
+        all: unset;
+        flex-grow: 1;
+        margin-bottom: .25rem;
+        background: var(--bs-gray-100);
+        padding: .25rem .75rem;
+        border-radius: 99px;
+        border: 1px solid rgba(#000, 0);
+    }
+
+    .badge.rounded-pill {
+        margin: 0 .25rem .25rem 0;
+        display: inline-flex;
+        align-items: stretch;
+        overflow: hidden;
+
+        .tag-text {
+            margin: auto;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .remove-btn-box {
+            display: flex;
+            align-items: stretch;
+
+            &::before {
+                display: block;
+                content: ' ';
+                height: 100%;
+                border-left: 1px solid var(--bs-gray-300);
+                margin: 0 0.25rem;
+            }
+        }
+
+        .remove-btn {
+            all: unset;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .material-icons {
+                font-size: 16px;
+                line-height: 16px;
+                color: var(--bs-purple);
+                opacity: .5;
+                transition: .3s;
+            }
+
+            &:hover {
+                cursor: pointer;
+
+                .material-icons {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+
+}
+</style>

package/tree.vue

@@ -0,0 +1,62 @@
+<template>
+    <tree-item v-for="(item, index) in items" :key="item.id" :item="item" :index="index" :click-item="clickItem" :active-id="activeId" :tree-item-class="treeItemClass">
+        <template v-slot:icon>
+            <slot name="icon"></slot>
+        </template>
+    </tree-item>
+</template>
+
+<script>
+    import { ref, computed } from 'vue';
+    import TreeItem from './treeItem.vue';
+    export default {
+        props: {
+            items: {
+                type: Array,
+                default: function () {
+                    return [];
+                }
+            },
+            clickItem: {
+                type: Function
+            },
+            size: {
+                type: String,
+                default:""
+            },
+            bgColor: {
+                type: String,
+                default:""
+            }
+        },
+        components: {
+            TreeItem
+        },
+        setup(props, { emit }) {
+            const activeId = ref("");
+            const clickItem = (item) => {
+                activeId.value = item.id;
+                props.clickItem(item);
+            };
+            const treeItemClass = computed(() => {
+                var classList = [];
+                if (props.size == 'sm') {
+                    classList.push('tree-item-sm');
+                }
+                if (props.bgColor == 'white') {
+                    classList.push('tree-item-in-white');
+                }
+                return classList;
+            });
+            
+            return {
+                treeItemClass: treeItemClass,
+                activeId: activeId,
+                clickItem: clickItem
+            };
+        }
+    }
+</script>
+<style>
+
+</style>