@scx-js/scx-ui 0.0.1

package/scx-panel/index.vue

@@ -0,0 +1,28 @@
+<template>
+    <transition :name="'scx-panel-t_'+transitionType">
+        <div v-show="modelValue" class="scx-panel">
+            <slot/>
+        </div>
+    </transition>
+</template>
+
+<script>
+import "./index.css";
+
+export default {
+    name: "scx-panel",
+    props: {
+        modelValue: {
+            type: Boolean,
+            default: false
+        },
+        transitionType: {
+            type: String,
+            default: "left-top"
+        }
+    },
+    setup(props, context) {
+
+    }
+};
+</script>

package/scx-panel/scx-panel-item.css

@@ -0,0 +1,36 @@
+.scx-panel-item {
+    flex-shrink: 0;
+    height: 40px;
+    display: flex;
+    border-radius: 2px;
+    align-items: center;
+    cursor: pointer;
+    border: 2px solid var(--scx-panel-item_border-color);
+    box-sizing: border-box;
+    padding-left: 5px;
+    padding-right: 5px;
+    transition: all ease 100ms;
+    background: var(--scx-panel-item_bg);
+}
+
+.scx-panel-item:hover,
+.scx-panel-item.active {
+    background: var(--scx-panel-item_hover-bg);
+    border: 2px solid var(--scx-panel-item_hover-border-color);
+    color: var(--scx-panel-item_hover-color);
+}
+
+.scx-panel-item > svg {
+    flex-shrink: 0;
+    margin-left: 10px;
+    margin-right: 10px;
+    fill: currentColor;
+}
+
+.scx-panel-item > span {
+    font-weight: 600;
+    padding-right: 5px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

package/scx-panel/scx-panel-item.vue

@@ -0,0 +1,22 @@
+<template>
+    <div :class="{active}" class="scx-panel-item">
+        <slot/>
+    </div>
+</template>
+
+<script>
+import "./scx-panel-item.css";
+
+export default {
+    name: "scx-panel-item",
+    props: {
+        active: {
+            type: Boolean,
+            default: false
+        }
+    },
+    setup() {
+
+    }
+};
+</script>

package/scx-progress/index.css

@@ -0,0 +1,33 @@
+.scx-progress {
+    display: flex;
+    height: 1rem;
+    overflow: hidden;
+    font-size: .75rem;
+    background-color: #c0c0c0;
+    border-radius: .25rem;
+}
+
+.scx-progress-bar {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    color: #fff;
+    text-align: right;
+    white-space: nowrap;
+    background-color: #0d6efd;
+    transition: width .6s ease;
+    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+    background-size: 1rem 1rem;
+    animation: 1s linear infinite scx-progress-bar-stripes;
+}
+
+.scx-progress-bar-text {
+    font-weight: 600;
+    margin: 0 5px;
+}
+
+@keyframes scx-progress-bar-stripes {
+    0% {
+        background-position-x: 1rem;
+    }
+}

package/scx-progress/index.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="scx-progress">
+        <div :style="{width: modelValue+'%',backgroundColor:color}" class="scx-progress-bar">
+            <div class="scx-progress-bar-text">{{ modelValue }} %</div>
+        </div>
+    </div>
+</template>
+
+<script>
+import "./index.css";
+
+export default {
+    name: "scx-progress",
+    props: {
+        modelValue: {
+            type: Number,
+            default: 0
+        },
+        color: {
+            type: String,
+            default: ""
+        }
+    }
+};
+</script>
+
+<style scoped>
+
+</style>

package/scx-switch/index.css

@@ -0,0 +1,109 @@
+.scx-switch + .scx-switch {
+    margin: 2px;
+}
+
+.scx-switch {
+    height: 22px;
+    width: 44px;
+    border: none;
+    background: rgba(0, 0, 0, .25);
+    border-radius: 11px;
+    position: relative;
+    vertical-align: middle;
+    transition: background-color 150ms, box-shadow 150ms;
+    cursor: pointer;
+    padding: 0;
+}
+
+.scx-switch:hover {
+    box-shadow: 0 0 0 0.1rem var(--scx-text-placeholder-color);
+}
+
+.scx-switch > .scx-switch-icon {
+    box-shadow: rgba(0, 35, 11, 0.2) 0 2px 4px 0;
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    height: 18px;
+    width: 18px;
+    background: white;
+    border-radius: 9px;
+    transition: left 150ms ease-in-out, width 200ms ease-in-out, margin-left 200ms ease-in-out;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+}
+
+.scx-switch.scx-switch-checked {
+    background: var(--scx-theme);
+}
+
+.scx-switch.scx-switch-checked > .scx-switch-icon {
+    left: calc(100% - 18px - 2px);
+}
+
+.scx-switch.scx-switch-checked:active > .scx-switch-icon {
+    width: 22px;
+    margin-left: -4px;
+}
+
+.scx-switch:active > .scx-switch-icon {
+    width: 22px;
+    margin-left: 0;
+}
+
+.scx-switch > .scx-switch-label {
+    position: absolute;
+    top: 2px;
+    display: flex;
+    align-items: center;
+    right: 8px;
+}
+
+.scx-switch.scx-switch-checked > .scx-switch-label {
+    left: 8px;
+}
+
+.scx-switch:focus {
+    outline: none;
+}
+
+.scx-switch[disabled] {
+    cursor: not-allowed;
+    opacity: 0.4;
+}
+
+.scx-switch.scx-switch-checked:active {
+    animation: scx-switch-close-tips 1500ms infinite linear;
+}
+
+.scx-switch:active {
+    animation: scx-switch-open-tips 1500ms infinite linear;
+}
+
+@keyframes scx-switch-close-tips {
+    0% {
+        box-shadow: 0 0 0 0.1rem rgba(99, 172, 255, 0.5);
+    }
+    50% {
+
+        box-shadow: 0 0 0 0.2rem rgba(255, 38, 103, 0.5)
+    }
+    100% {
+        box-shadow: 0 0 0 0.1rem rgba(99, 172, 255, 0.5);
+    }
+}
+
+@keyframes scx-switch-open-tips {
+    0% {
+        box-shadow: 0 0 0 0.1rem rgba(99, 172, 255, 0.5);
+    }
+    50% {
+
+        box-shadow: 0 0 0 0.2rem rgba(17, 141, 47, 0.5);
+    }
+    100% {
+        box-shadow: 0 0 0 0.1rem rgba(99, 172, 255, 0.5);
+    }
+}

package/scx-switch/index.vue

@@ -0,0 +1,31 @@
+<template>
+    <button :class="{'scx-switch-checked': modelValue}" class="scx-switch" type="button" @click="changeSwitchState">
+        <span class="scx-switch-icon">
+            <slot name="icon"/>
+        </span>
+        <span class="scx-switch-label">
+            <slot name="label"/>
+        </span>
+    </button>
+</template>
+<script>
+import "./index.css";
+
+export default {
+    name: "scx-switch",
+    props: {
+        modelValue: Boolean,
+        default: false
+    },
+    emits: ["update:modelValue", "change"],
+    setup(props, context) {
+        function changeSwitchState() {
+            const val = !props.modelValue;
+            context.emit("update:modelValue", val);
+            context.emit("change", val);
+        }
+
+        return {changeSwitchState};
+    }
+};
+</script>

package/scx-upload/helper.js

@@ -0,0 +1,177 @@
+class UploadInfo {
+
+    /**
+     * a
+     * @type {string}
+     */
+    fileName = "";
+
+    /**
+     * a
+     * @type {string}
+     */
+    previewURL = null;
+
+    /**
+     *
+     * @type {string}
+     */
+    downloadURL = null;
+
+    /**
+     *
+     * @type {number}
+     */
+    progressValue = 0;
+
+    /**
+     * a
+     * @type {string}
+     */
+    progressState = "";
+
+    /**
+     * a
+     * @type {boolean}
+     */
+    progressVisible = false;
+
+    /**
+     *
+     * @type {File}
+     */
+    file = null;
+
+    /**
+     * a
+     * @type {string}
+     */
+    fileID = "";
+
+    /**
+     * 上传时间
+     * @type {null}
+     */
+    uploadTime = null;
+
+    /**
+     * 文件大小
+     * @type {null}
+     */
+    fileSizeDisplay = null;
+
+    /**
+     * 文件实际大小
+     * @type {null}
+     */
+    fileSize = null;
+
+    /**
+     * 文件 fssObjectID
+     * @type {null}
+     */
+    fssObjectID = null;
+
+    reset() {
+        this.fileName = null;
+        this.previewURL = null;
+        this.downloadURL = null;
+        this.uploadTime = null;
+        this.fileSizeDisplay = null;
+        this.fileSize = null;
+        this.fssObjectID = null;
+        return this;
+    }
+
+    fill(rawOptions) {
+        const {
+            fileName,
+            previewURL,
+            downloadURL,
+            uploadTime,
+            fileSizeDisplay,
+            fileSize,
+            fssObjectID,
+        } = rawOptions;
+        this.fileName = fileName;
+        this.previewURL = previewURL;
+        this.downloadURL = downloadURL;
+        this.uploadTime = uploadTime;
+        this.fileSizeDisplay = fileSizeDisplay;
+        this.fileSize = fileSize;
+        this.fssObjectID = fssObjectID;
+        return this;
+    }
+
+    copy() {
+        return new UploadInfo().fill(this);
+    }
+
+}
+
+class ScxFSSHelper {
+
+    /**
+     * @type ScxFSS
+     */
+    scxFSS;
+
+    constructor(scxFSS) {
+        this.scxFSS = scxFSS;
+    }
+
+    /**
+     *  默认的 scx-fss 的 fileInfoHandler
+     *
+     * @param fileID
+     * @returns {Promise<{fileName: string}|{[p: string]: *}>}
+     */
+    fileInfoHandler(fileID) {
+        const previewURL = this.scxFSS.joinImageURL(fileID, {
+            w: 150,
+            h: 150,
+        });
+        const downloadURL = this.scxFSS.joinDownloadURL(fileID);
+        return new Promise((resolve, reject) => {
+            this.scxFSS.info(fileID).then(item => {
+                if (item) {
+                    resolve({
+                        ...item,
+                        previewURL,
+                        downloadURL,
+                    });
+                } else {
+                    resolve({fileName: "文件无法读取 !!! id : " + fileID});
+                }
+            }).catch(e => reject(e));
+        });
+    }
+
+    /**
+     * 默认的 scx-fss 的上传 handler
+     * @param needUploadFile
+     * @param progress
+     * @returns {Promise<unknown>}
+     */
+    uploadHandler(needUploadFile, progress) {
+        const onProgress = (state, value) => {
+            // todo 这里没有使用 ScxFSS.CHECKING() 而是直接引入字符串的原因
+            // todo 请参照 https://github.com/vitejs/vite/issues/7775
+            //前 50% 是校验 md5 后 50% 才是真正的文件上传
+            if (state === "checking") {
+                progress(value * 0.5, "校验中");
+            } else if (state === "uploading") {
+                progress(50 + value * 0.5, "上传中");
+            }
+        };
+        return new Promise((resolve, reject) => {
+            this.scxFSS.upload(needUploadFile, onProgress).then(d => {
+                resolve(d.item.fssObjectID);
+            }).catch(e => reject(e));
+        });
+    }
+
+}
+
+export {UploadInfo, ScxFSSHelper};
+	

package/scx-upload/index.css

@@ -0,0 +1,204 @@
+/* 主区域 */
+.scx-upload {
+    background: var(--scx-overlay-bg);
+    border: 3px dashed var(--scx-text-placeholder-color);
+    border-radius: 6px;
+    position: relative;
+    overflow: hidden;
+    width: 150px;
+    height: 150px;
+    transition: border 200ms;
+}
+
+/* border 变化 */
+.scx-upload:hover {
+    border-color: var(--scx-theme);
+}
+
+/* 预览区域 */
+.scx-upload > .preview {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* 预览图片 */
+.scx-upload .preview-image {
+    min-height: 50%;
+    min-width: 50%;
+    height: 100%;
+    width: 100%;
+}
+
+/* 预览文字 */
+.scx-upload .preview-text {
+    font-size: 15px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    overflow: auto;
+}
+
+.scx-upload .preview-text > div {
+    /**
+        这里并没有在 .scx-upload .preview-text 中使用
+            justify-content: center;
+            align-items: center;
+        来进行居中 而是在子元素(也就是当前注释)中使用
+            margin: auto;
+        请参阅
+            https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container
+    */
+    margin: auto;
+    word-break: break-all;
+}
+
+/* 预览中操作 */
+.scx-upload .operation {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 30px;
+    display: flex;
+}
+
+/*操作项子元素*/
+.scx-upload .operation > div,
+.scx-upload .operation > a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+    opacity: 50%;
+    transition: 200ms ease-in-out opacity;
+    cursor: pointer;
+    color: white;
+    font-weight: 600;
+    text-decoration: unset;
+}
+
+.scx-upload .operation > div:hover,
+.scx-upload .operation > a:hover {
+    opacity: 100%;
+}
+
+.scx-upload .item-download {
+    background: #44be16;
+}
+
+.scx-upload .item-replace {
+    background: #29aaf5;
+}
+
+.scx-upload .item-delete {
+    background: #f44336;
+}
+
+/* 没有预览时 */
+.scx-upload > .no-preview {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    flex-direction: column;
+    row-gap: 10px;
+}
+
+/* 图标 */
+.scx-upload > .no-preview > .scx-icon {
+    fill: var(--scx-text-placeholder-color);
+    height: 40px;
+    width: 40px;
+    pointer-events: none;
+    flex-shrink: 0;
+}
+
+/* 提示拖拽文字 */
+.scx-upload > .no-preview > span {
+    font-weight: 600;
+    font-size: 20px;
+    color: var(--scx-text-placeholder-color);
+    pointer-events: none;
+    flex-shrink: 0;
+}
+
+/* 拖动时蓝色背景 */
+.scx-upload > .no-preview.dragover::after {
+    content: " ";
+    width: 100%;
+    height: 100%;
+    background: var(--scx-theme-bg);
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+}
+
+.scx-upload > .progress-preview {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+}
+
+/* 进度条 */
+.scx-upload > .progress {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: rgba(50, 50, 50, 40%);
+    backdrop-filter: blur(2px);
+    color: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.scx-upload .temp-file-name {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    overflow: auto;
+}
+
+.scx-upload .temp-file-name > div {
+    /**
+        参照 44 行
+     */
+    margin: auto;
+    word-break: break-all;
+}
+
+.scx-upload .progress-state {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    font-weight: 600;
+    flex-shrink: 0;
+    padding: 5px;
+    box-sizing: border-box;
+    row-gap: 5px;
+}
+
+.scx-upload .progress-state > .progress-state-text {
+    flex-shrink: 0;
+    font-weight: 600;
+    font-size: 14px;
+}
+
+.scx-upload .progress-state > .scx-progress {
+    width: 100%;
+}
+