ui-process-h5 0.1.15 → 0.1.22

package/lib/style.css

@@ -0,0 +1 @@
+.tops-tab[data-v-baad7ff1]{height:100%}.tops-tab-header[data-v-baad7ff1]{display:flex;width:100%;height:45px;font-size:14px;color:#333;padding:10px 17px;font-weight:500;box-sizing:border-box;overflow-x:auto;white-space:nowrap;flex-wrap:nowrap;flex-shrink:0;-ms-overflow-style:none;position:relative;background-color:#fff}.tops-tab-header[data-v-baad7ff1]:after{content:"";position:absolute;width:100%;height:1px;background-color:#f2f2f2;left:0;bottom:0;z-index:10}.tops-tab-header[data-v-baad7ff1]::-webkit-scrollbar{display:none}.tops-tab-header-items[data-v-baad7ff1]{white-space:nowrap;padding-right:10px;box-sizing:border-box;display:inline-block;height:100%;text-align:center;margin-right:32px;font-weight:400;font-size:15px;text-align:left;color:#333;display:flex;align-items:center}.tops-tab-header-items[data-v-baad7ff1]:last-child{padding-right:0;margin-right:0}.tops-tab-header .active[data-v-baad7ff1]{position:relative;color:#1389ff;font-family:PingFang SC Bold;font-weight:700;font-size:15px;text-align:left}.tops-tab-header .bottom-line[data-v-baad7ff1]{width:30px;height:3px;border-radius:1.5px;background-color:#1389ff;position:absolute;bottom:1px;left:0;z-index:12}.tops-tab-body[data-v-baad7ff1]{height:100%}.seal-list__item[data-v-baad7ff1]{padding:6px 10px 0;margin:10px 10px 0;background-color:#fff;border-radius:10px;box-sizing:border-box}.seal-list__item[data-v-baad7ff1]:last-child{margin-bottom:70px}.seal-list__item .seal-list__item--header[data-v-baad7ff1]{margin-bottom:6px;display:flex;align-items:center}.seal-list__item .seal-list__item--header span[data-v-baad7ff1]:first-of-type{font-size:15px;margin-right:6px;font-weight:700}.seal-list__item .seal-list__item--option[data-v-baad7ff1]{display:flex;justify-content:space-between;align-items:center;font-size:14px;padding:10px 0;color:#333}.seal-list__item .seal-list__item--option span[data-v-baad7ff1]:last-child{max-width:144px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#888}.seal-list__item .seal-list__item--attch[data-v-baad7ff1]{font-size:14px;padding:10px 0;color:#333;text-align:right;color:#1389ff}.seal-list__item .seal-list__item--actions[data-v-baad7ff1]{margin-top:12px;position:relative;display:flex;justify-content:space-around;align-items:center}.seal-list__item .seal-list__item--actions[data-v-baad7ff1] :before{content:"";top:0;width:100%;transform:scaleY(.5);transform-origin:top;border-top:1px #e8e8e8 solid;position:absolute}.seal-list__item .seal-list__item--actions .van-button[data-v-baad7ff1]{width:50%}.seal-list__item .seal-list__item--actions .van-button[data-v-baad7ff1] :after{content:"";height:60%;border-left:1px #e8e8e8 solid;position:absolute;left:100%;top:50%;transform:translate(-50%,-50%) scaleX(.5);transform-origin:left}.seal-list__item .seal-list__item--actions .van-button[data-v-baad7ff1]:last-child :after{content:none}.top-popup[data-v-474e328a]{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 .5s ease;bottom:0}.top-popup-mask[data-v-474e328a]{position:fixed;width:100vw;height:100vh;background-color:#000;opacity:.7;top:0;left:0;z-index:99}.top-popup-header[data-v-474e328a]{display:flex;justify-content:space-between;align-items:center;padding:10px 0}.top-popup-header .header-cancel[data-v-474e328a],.top-popup-header .header-comfig[data-v-474e328a]{color:#1389ff}.fade-enter-active[data-v-474e328a],.fade-leave-active[data-v-474e328a]{transition:all .5s ease}.fade-enter[data-v-474e328a],.fade-leave-to[data-v-474e328a]{bottom:-100%}.fade-enter-to[data-v-474e328a],.fade-leave[data-v-474e328a]{bottom:0d}.top-button[data-v-156a54e6]{width:100%;border-radius:20px;height:36px;background-color:#3c9cff;color:#fff;font-size:14px;justify-content:center;display:flex;align-items:center}.process-warp[data-v-41bcbb23]{overflow:hidden;height:100vh;width:100%;position:relative;background-color:#f3f3f7}.process-main[data-v-41bcbb23]{display:flex;justify-content:space-between;flex-direction:column;align-items:center;padding:0 17px;background:#fff;margin:0 0 10px}.process-main .border[data-v-41bcbb23]{border-bottom:#e8e8e8 1px solid}.process-main .process-ml-item[data-v-41bcbb23]{display:flex;align-items:center;font-size:15px;font-weight:400;width:100%;justify-content:space-between;height:44px}.process-main .process-ml-item .process-mli-name[data-v-41bcbb23]{color:#333}.process-main .process-ml-item .process-mli-value[data-v-41bcbb23]{color:#888}.process-main .process-ml-item .process-mli-value .process-mliv-dd[data-v-41bcbb23]{height:26px;min-width:30px;padding:0 12px;border-radius:20px;background:#1389ff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px}.process-main .process-ml-item .process-mli-value .process-mliv-jd[data-v-41bcbb23]{color:#1389ff}.process-btn[data-v-41bcbb23]{display:flex;min-height:60px;padding-top:5px;background:#fff;border-top:1px solid #dddddf9e;box-sizing:border-box;justify-content:center;align-items:center;flex-direction:row-reverse}.process-btn .top-button[data-v-41bcbb23],.process-btn .elips[data-v-41bcbb23]{margin:0 5px}.elips[data-v-41bcbb23]{min-width:60px;height:100%;background-color:#fff;display:flex;justify-content:center;align-items:center}.elips .circle[data-v-41bcbb23]{width:6px;height:6px;margin:0 2px;background-color:#333;border-radius:50%}

package/lib/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -1,41 +1,74 @@
 {
   "name": "ui-process-h5",
-  "version": "0.1.15",
   "private": false,
   "description": "流程组件",
-  "main": "lib/index.min.js",
-  "module": "lib/index.esm.js",
-  "typings": "lib/index.d.ts",
-  "keyword": "vue3",
+  "version": "0.1.22",
+  "type": "module",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "yarn build:clean && yarn build:lib && yarn build:esm-bundle && rimraf lib/demo.html",
-    "build:clean": "rimraf lib",
-    "build:lib": "vue-cli-service build --target lib --name index --dest lib packages/index.ts",
-    "build:esm-bundle": "rollup --config ./build/rollup.config.js"
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "files": [
+    "lib/*",
+    "packages/*",
+    "Readme.md",
+    "package.json"
+  ],
+  "publicConfig": {
+    "registry": "http://registry.npmjs.org/"
+  },
+  "main": "./lib/design.umd.js",
+  "module": "./lib/design.mjs",
+  "exports": {
+    ".": {
+      "import": "./lib/design.mjs",
+      "require": "./lib/design.umd.js"
+    },
+    "./lib/style.css": "./lib/style.css"
   },
   "dependencies": {
-    "autoprefixer": "^10.4.14",
-    "bpmn-moddle": "^8.0.1",
-    "core-js": "^3.8.3",
-    "rollup-plugin-postcss": "^4.0.2",
-    "vue": "^3.2.13"
+    "axios": "^1.3.6",
+    "dayjs": "^1.11.7",
+    "less-loader": "^11.1.0",
+    "sass": "^1.62.0",
+    "vue": "^3.2.47",
+    "vue-demi": "^0.14.0"
   },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^13.0.5",
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-typescript": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
-    "@vue/compiler-sfc": "^3.0.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",
+    "cz-conventional-changelog": "^3.3.0",
+    "eslint": "^8.17.0",
+    "eslint-config-prettier": "^8.5.0",
+    "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",
-    "rollup": "^2.58.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.30.0",
-    "rollup-plugin-vue": "^6.0.0",
-    "sass": "^1.32.7",
-    "sass-loader": "^12.0.0",
-    "typescript": "~4.5.5"
+    "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-tsc": "^1.2.0"
+  },
+  "engines": {
+    "node": ">=16.0.0"
   }
-}
+}

package/packages/component.ts

@@ -0,0 +1,5 @@
+import TopTab from "./components/tab";
+import TopProcess from "./components/process";
+
+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;