@scx-js/scx-ui 0.0.1 → 0.0.2

package/index.js

@@ -1,44 +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,
-};
+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

@@ -1,29 +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"
-  }
-}
+{
+  "name": "@scx-js/scx-ui",
+  "version": "0.0.2",
+  "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.2",
+    "@scx-js/scx-app-x": "0.0.2",
+    "@scx-js/scx-dom": "0.0.2"
+  },
+  "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

@@ -1,51 +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);
+/*全局右键菜单*/
+.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

@@ -1,65 +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,
-};
+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

@@ -1,86 +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>
+<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

@@ -1,30 +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,
-};
+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,
+};