@scx-js/scx-ui 0.0.1

package/index.js

@@ -0,0 +1,44 @@
+export * from "./scx-context-menu/index.js";
+export * from "./scx-drag/index.js";
+
+import ScxGroup from "./scx-group/index.vue";
+import ScxIcon from "./scx-icon/index.vue";
+import ScxInput from "./scx-input/index.vue";
+import ScxPanel from "./scx-panel/index.vue";
+import ScxPanelItem from "./scx-panel/scx-panel-item.vue";
+import ScxProgress from "./scx-progress/index.vue";
+import ScxSwitch from "./scx-switch/index.vue";
+import ScxUpload from "./scx-upload/index.vue";
+import ScxUploadList from "./scx-upload-list/index.vue";
+import {ScxContextMenuDirective} from "./scx-context-menu/index.js";
+import {ScxDragDirective} from "./scx-drag/index.js";
+
+//以下为组件
+const components = [ScxGroup, ScxIcon, ScxInput, ScxPanel, ScxPanelItem, ScxProgress, ScxSwitch, ScxUpload, ScxUploadList];
+
+//以下为指令
+const directives = [ScxContextMenuDirective, ScxDragDirective];
+
+const ScxComponent = {
+    install: (app) => {
+        //安装组件
+        components.forEach(c => app.component(c.name, c));
+        //安装指令
+        directives.forEach(d => app.directive(d.name, d));
+    },
+};
+
+export {
+    ScxGroup,
+    ScxIcon,
+    ScxInput,
+    ScxPanel,
+    ScxPanelItem,
+    ScxProgress,
+    ScxSwitch,
+    ScxUpload,
+    ScxUploadList,
+    ScxContextMenuDirective,
+    ScxDragDirective,
+    ScxComponent,
+};

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@scx-js/scx-ui",
+  "version": "0.0.1",
+  "description": "SCX UI",
+  "license": "MIT",
+  "author": "scx567888",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "dev:test": "vite _test --host",
+    "build:test": "vite build _test",
+    "preview:test": "vite preview _test --host"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scx567888/scx-js.git"
+  },
+  "dependencies": {
+    "@scx-js/scx-common": "0.0.1",
+    "@scx-js/scx-app-x": "0.0.1",
+    "@scx-js/scx-dom": "0.0.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "clipboard": "^2.0.0",
+    "vite": "^6.0.0",
+    "vue-router": "^4.0.0"
+  }
+}

package/scx-context-menu/index.css

@@ -0,0 +1,51 @@
+/*全局右键菜单*/
+.scx-context-menu {
+    margin: 0;
+    background: var(--scx-glass-bg);
+    z-index: 3000;
+    position: absolute;
+    list-style-type: none;
+    padding: 3px;
+    border-radius: 2px;
+    font-size: 12px;
+    font-weight: 400;
+    box-shadow: var(--scx-box-shadow);
+    max-height: 500px;
+    overflow: auto;
+    backdrop-filter: var(--scx-glass-bg-filter);
+    box-sizing: border-box;
+    width: max-content;
+}
+
+@keyframes from-top {
+    0% {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+}
+
+@keyframes from-bottom {
+    0% {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+}
+
+.scx-context-menu.top {
+    animation: from-top 200ms cubic-bezier(.23, 1, .32, 1);
+}
+
+.scx-context-menu.bottom {
+    animation: from-bottom 200ms cubic-bezier(.23, 1, .32, 1);
+}
+
+.scx-context-menu-item {
+    margin: 0;
+    padding: 7px 16px;
+    cursor: pointer;
+}
+
+.scx-context-menu-item:hover {
+    background: var(--scx-theme);
+    color: var(--scx-bg);
+}

package/scx-context-menu/index.js

@@ -0,0 +1,65 @@
+import ScxContextMenu from "./index.vue";
+import {h, render} from "vue";
+
+// 这里因为 vite 每次导入时都使用不同的 上下文导致 contextMenuInstance 为空 这里直接绑定到 window 上
+// let contextMenuInstance;
+
+function getInstance() {
+    return window["__SCX_CONTEXT_MENU_INSTANCE__"];
+}
+
+function setInstance(instance) {
+    return window["__SCX_CONTEXT_MENU_INSTANCE__"] = instance;
+}
+
+function bodyClick(e) {
+    let isOnContextmenu = e.target.closest(".scx-context-menu");
+
+    if (!isOnContextmenu && getInstance()) {
+        closeContextMenu();
+    }
+}
+
+function showContextMenu(e, value) {
+    //默认阻止事件冒泡
+    e.stopPropagation();
+    const instance = getInstance();
+    if (instance) {
+        document.body.removeChild(instance);
+    }
+    const container = document.createElement("div");
+    let vm = h(ScxContextMenu, {
+        mouseEvent: e,
+        contextMenuItems: value,
+    });
+    render(vm, container);
+    setInstance(container);
+    document.body.appendChild(container);
+    document.body.addEventListener("click", bodyClick);
+}
+
+function closeContextMenu() {
+    document.body.removeChild(getInstance());
+    setInstance(null);
+    document.body.removeEventListener("click", bodyClick);
+}
+
+const ScxContextMenuDirective = {
+    name: "contextmenu",
+    //待处理
+    mounted(el, {value}) {
+        el.oncontextmenu = (e) => {
+            showContextMenu(e, value);
+            return false;
+        };
+    },
+    updated(el, {value}) {
+
+    },
+};
+
+export {
+    ScxContextMenuDirective,
+    showContextMenu,
+    closeContextMenu,
+};

package/scx-context-menu/index.vue

@@ -0,0 +1,86 @@
+<template>
+    <div ref="scxContextMenuRef" class="scx-context-menu" @contextmenu.prevent="">
+        <div v-for="item in contextMenuItems" class="scx-context-menu-item" @click="callItemCallBack(item)">
+            <component :is="renderLabel(item)"></component>
+        </div>
+    </div>
+</template>
+
+<script>
+//todo 多级菜单 ?
+import "./index.css";
+import {nextTick, onMounted, ref} from "vue";
+import {closeContextMenu} from "./index.js";
+import {isFunction} from "../../scx-common/index.js";
+
+export default {
+    name: "scx-context-menu",
+    props: {
+        mouseEvent: MouseEvent,
+        contextMenuItems: Array
+    },
+    setup(props, context) {
+        const scxContextMenuRef = ref(null);
+
+        //设置初始状态 保证元素可以正确的获取的内容大小以便后续计算
+        function initStatus() {
+            scxContextMenuRef.value.style.top = 0;
+            scxContextMenuRef.value.style.left = 0;
+            scxContextMenuRef.value.style.visibility = "hidden";
+        }
+
+        function setStatus(top, left, type) {
+            scxContextMenuRef.value.classList.add(type);
+            scxContextMenuRef.value.style.top = top + "px";
+            scxContextMenuRef.value.style.left = left + "px";
+            scxContextMenuRef.value.style.visibility = "unset";
+        }
+
+        function show(mouseEvent) {
+            initStatus();
+            //todo 或者用 clientX ?
+            let x = mouseEvent.pageX;
+            let y = mouseEvent.pageY;
+            const clientWidth = window.innerWidth;
+            const clientHeight = window.innerHeight;
+            nextTick(() => {
+                const {
+                    width,
+                    height
+                } = scxContextMenuRef.value.getBoundingClientRect();
+                //todo 这里还可以做优化 以保证 菜单展示不下的时候出现滚动条 通过设置 height 和 width 实现
+                const top = clientHeight > height + y ? y : y - height;
+                const type = clientHeight > height + y ? "top" : "bottom";
+                const left = clientWidth > width + x ? x : x - width;
+                setStatus(top, left, type);
+            });
+        }
+
+        function callItemCallBack(item) {
+            if (item.callback) {
+                item.callback(closeContextMenu);
+            } else {
+                closeContextMenu();
+            }
+        }
+
+        function renderLabel(c) {
+            const {label} = c;
+            if (isFunction(label)) {
+                return label;
+            } else {
+                return () => label;
+            }
+        }
+
+        onMounted(() => show(props.mouseEvent));
+
+        return {
+            scxContextMenuRef,
+            callItemCallBack,
+            renderLabel
+        };
+    }
+
+};
+</script>

package/scx-drag/index.js

@@ -0,0 +1,30 @@
+import {onBeforeUnmount} from "vue";
+import {ScxDrag} from "@scx-js/scx-dom";
+
+/**
+ *
+ * @param targetElement
+ * @param options {{dragElement, callback, bounds}}}
+ * @return {ScxDrag}
+ */
+function useScxDrag(targetElement, options = {}) {
+    const scxDrag = new ScxDrag(targetElement, options);
+    scxDrag.enable();
+    onBeforeUnmount(() => scxDrag.disable());
+    return scxDrag;
+}
+
+const ScxDragDirective = {
+    name: "drag",
+    mounted(el, {value}) {
+        useScxDrag(el, value);
+    },
+    updated(el, {value}) {
+
+    },
+};
+
+export {
+    useScxDrag,
+    ScxDragDirective,
+};

package/scx-group/index.css

@@ -0,0 +1,66 @@
+.scx-group {
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+    /* 特有 css */
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    align-items: center;
+}
+
+.scx-group-item {
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+    /* 特有 css */
+    border: 1px dashed var(--scx-text-placeholder-color);
+    background-color: var(--scx-theme-bg);
+    transition: transform 600ms ease, opacity 600ms ease;
+}
+
+.scx-group-item-operation {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+}
+
+.scx-group-item-move-up-button {
+    /* 占位用 方便开发者覆盖 css */
+}
+
+.scx-group-item-move-down-button {
+    /* 占位用 方便开发者覆盖 css */
+}
+
+.scx-group-item-remove-button {
+    /* 占位用 方便开发者覆盖 css */
+}
+
+/*简单设置一下 默认占位按钮的样式*/
+.scx-group-item-operation .placeholder-button {
+    display: flex;
+    height: 22px;
+    width: 22px;
+    justify-content: center;
+    align-items: center;
+}
+
+/*以下为 vue 动画*/
+.scx-group-list-enter-from {
+    opacity: 0;
+    transform: scale(0.98);
+}
+
+.scx-group-list-leave-to {
+    opacity: 0;
+    transform: scale(0.98);
+}
+
+/* 重要 !!!!!  避免嵌套动画延迟 */
+.scx-group-list-move .scx-group-list-move {
+    transition: unset;
+}

package/scx-group/index.vue

@@ -0,0 +1,154 @@
+<template>
+    <div class="scx-group">
+        <slot name="before"></slot>
+        <transition-group name="scx-group-list" @before-leave="fixedElement">
+            <div v-for="(item,i) in list" :key="item" class="scx-group-item">
+                <slot :index="i" :item="item"></slot>
+                <div class="scx-group-item-operation">
+                    <slot :index="i" :item="item" name="itemOperation"></slot>
+                    <div v-if="showMoveUp(i)" class="scx-group-item-move-up-button" @click="groupItemMoveUp(i)">
+                        <slot name="moveUpButton">
+                            <button class="placeholder-button" type="button">↑</button>
+                        </slot>
+                    </div>
+                    <div v-if="showMoveDown(i)" class="scx-group-item-move-down-button" @click="groupItemMoveDown(i)">
+                        <slot name="moveDownButton">
+                            <button class="placeholder-button" type="button">↓</button>
+                        </slot>
+                    </div>
+                    <div v-if="showRemoveButton" class="scx-group-item-remove-button" @click="groupItemRemove(i)">
+                        <slot name="removeButton">
+                            <button class="placeholder-button" type="button">X</button>
+                        </slot>
+                    </div>
+                </div>
+            </div>
+        </transition-group>
+        <slot name="after"></slot>
+    </div>
+</template>
+
+<script>
+import "./index.css";
+import {computed} from "vue";
+import {fixedElement, moveDownByIndex, moveUpByIndex, removeByIndex} from "../../scx-common/index.js";
+
+export default {
+    name: "scx-group",
+    props: {
+        modelValue: {
+            type: Array,
+            required: true,
+            default: [],
+        },
+        beforeRemove: {
+            type: Function,
+            default: null
+        },
+        beforeMoveUp: {
+            type: Function,
+            default: null
+        },
+        beforeMoveDown: {
+            type: Function,
+            default: null
+        },
+        loop: {
+            type: Boolean,
+            default: true
+        },
+        showRemoveButton: {
+            type: Boolean,
+            default: true
+        },
+        showMoveButton: {
+            type: Boolean,
+            default: true
+        }
+    },
+    setup(props, ctx) {
+
+        if (!props.modelValue) {
+            ctx.emit("update:modelValue", []);
+        }
+
+        const list = computed({
+            get() {
+                return props.modelValue;
+            },
+            set(value) {
+                ctx.emit("update:modelValue", value);
+            }
+        });
+
+        async function groupItemRemove(index) {
+            if (props.beforeRemove) {
+                //如果返回值是 false 则不添加
+                const result = await props.beforeRemove(list.value[index]);
+                if (!result) {
+                    return;
+                }
+            }
+            removeByIndex(list.value, index);
+        }
+
+        async function groupItemMoveUp(index) {
+            if (props.beforeMoveUp) {
+                //如果返回值是 false 则不添加
+                const result = await props.beforeMoveUp(index);
+                if (!result) {
+                    return;
+                }
+            }
+            moveUpByIndex(list.value, index, props.loop);
+        }
+
+        async function groupItemMoveDown(index) {
+            if (props.beforeMoveDown) {
+                //如果返回值是 false 则不添加
+                const result = await props.beforeMoveDown(index);
+                if (!result) {
+                    return;
+                }
+            }
+            moveDownByIndex(list.value, index, props.loop);
+        }
+
+        function showMoveUp(i) {
+            if (!props.showMoveButton) {
+                return false;
+            }
+            const minIndex = 0;
+            //数据量小的时候没必要显示
+            if (list.value.length <= 2 && i === minIndex) {
+                return false;
+            } else {//数据量大的时候 如果没启用循环 第一项不显示
+                return props.loop ? true : i !== minIndex;
+            }
+        }
+
+        function showMoveDown(i) {
+            if (!props.showMoveButton) {
+                return false;
+            }
+            const maxIndex = list.value.length - 1;
+            //数据量小的时候没必要显示
+            if (list.value.length <= 2 && i === maxIndex) {
+                return false;
+            } else { //数据量大的时候 如果没启用循环 最后一项不显示
+                return props.loop ? true : i !== maxIndex;
+            }
+        }
+
+        return {
+            list,
+            groupItemRemove,
+            fixedElement,
+            groupItemMoveUp,
+            groupItemMoveDown,
+            showMoveUp,
+            showMoveDown
+        };
+    }
+};
+</script>

package/scx-icon/index.css

@@ -0,0 +1,4 @@
+.scx-icon {
+    width: 1em;
+    height: 1em;
+}

package/scx-icon/index.vue

@@ -0,0 +1,20 @@
+<template>
+    <svg class="scx-icon">
+        <use :href="'#scx-icon_' + icon"></use>
+    </svg>
+</template>
+
+<script>
+import "./index.css";
+
+export default {
+    name: "scx-icon",
+    props: {
+        icon: {
+            type: String,
+            default: "",
+            required: true
+        }
+    }
+};
+</script>

package/scx-input/index.css

@@ -0,0 +1,39 @@
+.scx-input {
+    display: flex;
+    justify-content: space-between;
+    align-self: center;
+    align-items: center;
+    /* 32px 是当前这个元素的高度 默认被内部的 input 撑起来的高度*/
+    border-radius: calc(32px / 2);
+    background: var(--scx-input_bg);
+    box-shadow: var(--scx-input_box-shadow);
+    transition: all 100ms cubic-bezier(0.23, 1, 0.32, 1);
+    padding-left: 10px;
+    padding-right: 10px;
+    box-sizing: border-box;
+}
+
+.scx-input > input {
+    width: 100%;
+    outline: none;
+    font-size: 15px;
+    height: 30px;
+    border: 0;
+    background-color: transparent;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.scx-input > input::placeholder {
+    color: var(--scx-text-placeholder-color);
+}
+
+.scx-input > svg {
+    width: 20px;
+    flex-shrink: 0;
+    cursor: pointer;
+}
+
+.scx-input:focus-within {
+    box-shadow: var(--scx-input-hover_box-shadow);
+}

package/scx-input/index.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="scx-input">
+        <scx-icon v-if="icon" :icon="icon"/>
+        <input v-model="m" :placeholder="placeholder" type="text"/>
+        <scx-icon v-show="m!==''" icon="outlined-close" @click="m=''"/>
+    </div>
+</template>
+
+<script>
+import "./index.css";
+import {computed} from "vue";
+
+export default {
+    name: "scx-input",
+    props: {
+        modelValue: {
+            type: String,
+            required: true,
+            default: "",
+        },
+        placeholder: {
+            type: String,
+            default: "输入名称搜索",
+        },
+        icon: {
+            type: String,
+            default: null
+        }
+    },
+    setup(props, context) {
+
+        const m = computed({
+            get() {
+                return props.modelValue;
+            },
+            set(value) {
+                context.emit("update:modelValue", value);
+            }
+        });
+
+        return {m};
+    }
+};
+</script>

package/scx-panel/index.css

@@ -0,0 +1,47 @@
+.scx-panel {
+    border-radius: 4px;
+    padding: 10px;
+    background: var(--scx-glass-bg);
+    transition: background-color 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
+    backdrop-filter: var(--scx-glass-bg-filter);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    box-shadow: var(--scx-box-shadow-center);
+}
+
+/********************* vue 过渡动画 *******************/
+.scx-panel-t_left-bottom-enter-active,
+.scx-panel-t_left-bottom-leave-active,
+.scx-panel-t_left-top-enter-active,
+.scx-panel-t_left-top-leave-active,
+.scx-panel-t_top-enter-active,
+.scx-panel-t_top-leave-active {
+    opacity: 1;
+    transition: transform 200ms cubic-bezier(.23, 1, .32, 1), opacity 100ms cubic-bezier(.23, 1, .32, 1);
+}
+
+.scx-panel-t_left-top-enter-from,
+.scx-panel-t_left-top-leave-to,
+.scx-panel-t_left-bottom-enter-from,
+.scx-panel-t_left-bottom-leave-to,
+.scx-panel-t_top-enter-from,
+.scx-panel-t_top-leave-to {
+    opacity: 0;
+    transform: scale(0.95);
+}
+
+.scx-panel-t_left-bottom-enter-active,
+.scx-panel-t_left-bottom-leave-active {
+    transform-origin: left bottom;
+}
+
+.scx-panel-t_left-top-enter-active,
+.scx-panel-t_left-top-leave-active {
+    transform-origin: left top;
+}
+
+.scx-panel-t_top-enter-active,
+.scx-panel-t_top-leave-active {
+    transform-origin: top;
+}