ui-process-h5 0.1.20 → 0.1.23

package/package.json

@@ -2,7 +2,7 @@
   "name": "ui-process-h5",
   "private": false,
   "description": "流程组件",
-  "version": "0.1.20",
+  "version": "0.1.23",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -18,32 +18,33 @@
   "publicConfig": {
     "registry": "http://registry.npmjs.org/"
   },
-  "main": "./lib/design.umd.js",
-  "module": "./lib/design.mjs",
+  "main": "./lib/index.umd.js",
+  "module": "./lib/index.mjs",
   "exports": {
     ".": {
-      "import": "./lib/design.mjs",
-      "require": "./lib/design.umd.js"
+      "import": "./lib/index.mjs",
+      "require": "./lib/index.umd.js"
     },
     "./lib/style.css": "./lib/style.css"
   },
   "dependencies": {
+    "axios": "^1.3.6",
+    "dayjs": "^1.11.7",
+    "less-loader": "^11.1.0",
     "sass": "^1.62.0",
     "vue": "^3.2.47",
-    "dayjs": "^1.11.7"
+    "vue-demi": "^0.14.0"
   },
   "devDependencies": {
-    "@types/node": "^18.15.12",
-    "@vitejs/plugin-vue": "^4.1.0",
-    "typescript": "^4.9.3",
-    "vite": "^4.2.0",
-    "vue-tsc": "^1.2.0",
     "@commitlint/cli": "^17.0.0",
     "@commitlint/config-conventional": "^17.0.0",
+    "@types/node": "^18.15.12",
     "@types/sass": "^1.43.1",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",
+    "@vitejs/plugin-vue": "^4.1.0",
     "@vitejs/plugin-vue-jsx": "^2.0.0",
+    "axios": "^1.3.5",
     "chalk": "^4.1.2",
     "commitizen": "^4.2.4",
     "cross-env": "^7.0.3",
@@ -53,16 +54,21 @@
     "eslint-define-config": "^1.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^9.1.0",
+    "good-storage": "^1.1.1",
     "husky": "^8.0.1",
+    "js-cookie": "^3.0.1",
     "prettier": "^2.6.2",
     "rimraf": "^3.0.2",
     "sass": "^1.49.7",
     "standard-version": "^9.5.0",
+    "typescript": "^4.9.3",
+    "vite": "^4.2.0",
     "vite-plugin-dts": "^1.2.0",
     "vite-plugin-md": "^0.15.0",
-    "vue": "^3.2.47"
+    "vue": "^3.2.47",
+    "vue-tsc": "^1.2.0"
   },
   "engines": {
     "node": ">=16.0.0"
   }
-}
+}

package/packages/component.ts

@@ -1,5 +1,5 @@
 import TopTab from "./components/tab";
+import TopProcess from "./components/process";
 
-export default [TopTab];
-export { TopTab };
- 
+export default [TopTab, TopProcess];
+export { TopTab, TopProcess };

package/packages/components/button/index.ts

@@ -0,0 +1,9 @@
+import { App, createApp } from "vue";
+import TopButton from "./src/index.vue";
+
+TopButton.install = function (app: App) {
+    // 组件注册，按需引入
+    app.component(TopButton.name, TopButton);
+    return app;
+};
+export default TopButton;

package/packages/components/button/src/index.vue

@@ -0,0 +1,55 @@
+<template>
+    <div
+        class="top-button"
+        :style="`background-color:${style.bckColor};color:${style.textColor}`"
+    >
+        <slot></slot>
+    </div>
+</template>
+<script>
+import { defineComponent, ref, watch, computed, onMounted } from "vue-demi";
+export default defineComponent({
+    name: "TopButton",
+    props: {
+        type: { default: "default", type: String },
+    },
+    setup(props) {
+        const style = ref({
+            textColor: "#fff",
+            bckColor: "3c9cff",
+        });
+
+        switch (props.type) {
+            case "primary":
+                style.value.textColor = "#fff";
+                style.value.bckColor = "#3c9cff";
+                break;
+            case "danger":
+                style.value.textColor = "rgb(255, 96, 96)";
+                style.value.bckColor = "rgb(255, 230, 230)";
+                break;
+            case "default":
+                style.value.textColor = "rgb(51, 51, 51)";
+                style.value.bckColor = "rgb(241, 241, 241)";
+                break;
+        }
+
+        return {
+            style,
+        };
+    },
+});
+</script>
+<style scoped>
+.top-button {
+    width: 100%;
+    border-radius: 20px;
+    height: 36px;
+    background-color: #3c9cff;
+    color: #fff;
+    font-size: 14px;
+    justify-content: center;
+    display: flex;
+    align-items: center;
+}
+</style>

package/packages/components/popup/index.ts

@@ -0,0 +1,11 @@
+import { App, createApp } from "vue";
+import TopPopup from "./src/index.vue";
+
+TopPopup.install = function (app: App) {
+    // 组件注册，按需引入
+    console.log("TopPopup.install",app)
+    app.mount(TopPopup)
+    app.component(TopPopup.name, TopPopup);
+    return app;
+};
+export default TopPopup;

package/packages/components/popup/src/index.vue

@@ -0,0 +1,128 @@
+<template>
+    <div
+        class="top-popup"
+        :style="
+            show ? 'transform: translateY(0)' : 'transform: translateY(100%)'
+        "
+    >
+        <div class="top-popup-header">
+            <div class="header-cancel" @click="handleCancel">
+                {{ cancelText }}
+            </div>
+            <div class="header-title">{{ titleText }}</div>
+            <div class="header-comfig" @click="handleComfig">
+                {{ comfigText }}
+            </div>
+        </div>
+        <div class="top-popup-body">
+            <slot name="default"></slot>
+        </div>
+    </div>
+    <div
+        class="top-popup-mask"
+        v-if="show && isMask"
+        @click="isMaskClose && handleClose()"
+    ></div>
+</template>
+<script lang="ts">
+import { defineComponent, ref, watch, computed, onMounted } from "vue-demi";
+
+export default defineComponent({
+    name: "TopPopup",
+    props: {
+        titleText: { default: "top-popup", type: String },
+        cancelText: { default: "取消", type: String },
+        comfigText: { default: "确定", type: String },
+        comfig: { default: null, type: Function },
+        cancel: { default: null, type: Function },
+        isMask: { require: false, default: true, type: Boolean },
+        isMaskClose: { require: false, default: true, type: Boolean },
+    },
+    setup(props) {
+        const show = ref<boolean>(false);
+
+        const handleOpen = () => {
+            show.value = true;
+        };
+
+        const handleCancel = () => {
+            typeof props.cancel === "function" && props.cancel();
+            handleClose();
+        };
+
+        const handleComfig = () => {
+            typeof props.comfig === "function" && props.comfig();
+        };
+
+        const handleClose = () => {
+            show.value = false;
+        };
+
+        onMounted(() => {
+            const body = document.querySelector("body");
+        });
+
+        return {
+            handleOpen,
+            handleCancel,
+            handleComfig,
+            handleClose,
+            show,
+        };
+    },
+});
+</script>
+<style scoped>
+.top-popup {
+    width: 100%;
+    height: 80vh;
+    position: fixed;
+    left: 0;
+    background-color: #fff;
+    z-index: 199;
+    border-radius: 20px 20px 0 0;
+    padding: 0 10px;
+    box-sizing: border-box;
+    transition: all 0.5s ease;
+    bottom: 0;
+}
+.top-popup-mask {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    background-color: #000;
+    opacity: 0.7;
+    top: 0;
+    left: 0;
+    z-index: 99;
+}
+.top-popup-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 0;
+}
+
+.top-popup-header .header-cancel {
+    color: #1389ff;
+}
+.top-popup-header .header-comfig {
+    color: #1389ff;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: all 0.5s ease;
+}
+
+.fade-enter,
+.fade-leave-to {
+    /* transform: translateY(100%); */
+    bottom: -100%;
+}
+.fade-enter-to,
+.fade-leave {
+    /* transform: translateY(0%); */
+    bottom: 0d;
+}
+</style>

package/packages/components/process/index.ts

@@ -0,0 +1,9 @@
+import { App } from "vue";
+import TopProcess from "./src/index.vue";
+
+TopProcess.install = function (app: App) {
+    // 组件注册，按需引入
+    app.component(TopProcess.name, TopProcess);
+    return app;
+};
+export default TopProcess;