hw-cus-ui 1.0.22 → 1.0.24

package/DraggableBottomPopup/DraggableBottomPopup.vue

@@ -0,0 +1,195 @@
+<template>
+  <view class="draggable-popup-mask">
+    <view
+      class="draggable-popup-container"
+      :style="{
+        top: popupTop + 'px',
+        position: isDrag ? 'fixed' : 'initial',
+        borderTopLeftRadius: isDrag ? '20rpx' : '0',
+        borderTopRightRadius: isDrag ? '20rpx' : '0'
+      }"
+    >
+      <view
+        v-if="isDrag"
+        class="draggable-popup-handle"
+        @touchstart="handleTouchStart"
+        @touchmove="handleTouchMove"
+        @touchend="handleTouchEnd"
+        @touchcancel="handleTouchEnd"
+      >
+        <view class="draggable-popup-handle-line"></view>
+      </view>
+      <view class="draggable-popup-content" :style="{ height: isDrag ? contentPopupTop + 'px' : 'auto' }">
+        <slot></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { useDebounceFn } from '@vueuse/core';
+export default {
+  name: 'DraggableBottomPopup',
+  props: {
+    heightCalc: {
+      type: String,
+      default: '0.4'
+    },
+    isDrag: {
+      type: Boolean,
+      default: () => true
+    }
+  },
+  data() {
+    return {
+      startY: 0,
+      startTop: 0,
+      popupTop: 0,
+      windowHeight: 0,
+      contentPopupTop: 0,
+      isMoving: false,
+      containerHeight: 0, // 容器高度
+      updateContentPopupTop: null // 防抖函数
+    };
+  },
+
+  mounted() {
+    this.getWindowInfo();
+    this.initPopupPosition();
+    // 初始化防抖函数
+    this.updateContentPopupTop = useDebounceFn(() => {
+      this.contentPopupTop = this.windowHeight - this.popupTop - 25;
+    }, 300);
+  },
+  methods: {
+    getWindowInfo() {
+      const systemInfo = uni.getSystemInfoSync();
+      this.windowHeight = systemInfo.windowHeight;
+      // 初始位置在屏幕外，隐藏状态
+      this.popupTop = this.windowHeight;
+    },
+
+    initPopupPosition() {
+      this.$nextTick(() => {
+        // 获取内容高度
+        const query = uni.createSelectorQuery().in(this);
+        query
+          .select('.draggable-popup-container')
+          .boundingClientRect((data) => {
+            if (data) {
+              this.containerHeight = data.height;
+              // 默认显示屏幕高度的60%
+              this.popupTop = this.windowHeight * this.heightCalc;
+              this.contentPopupTop = this.windowHeight - this.popupTop - 25;
+              this.changeTop();
+            }
+          })
+          .exec();
+      });
+    },
+
+    handleTouchStart(e) {
+      this.isMoving = true;
+      this.startY = e.touches[0].clientY;
+      this.startTop = this.popupTop;
+    },
+
+    handleTouchMove(e) {
+      if (!this.isMoving) return;
+
+      const moveY = e.touches[0].clientY - this.startY;
+      let newTop = this.startTop + moveY;
+
+      // 限制拖动范围，但允许拖出屏幕一定距离
+      const maxDragDistance = 100; // 最大可拖出屏幕的距离
+
+      if (newTop < -maxDragDistance) {
+        newTop = -maxDragDistance;
+      }
+
+      // 保留一部分在屏幕内，方便拖回
+      if (this.containerHeight > 0) {
+        const maxTop = this.windowHeight - 50; // 至少保留50px在屏幕内
+        if (newTop > maxTop) {
+          newTop = maxTop;
+        }
+      }
+      this.popupTop = newTop;
+      this.changeTop();
+      // 调用防抖函数而不是创建它
+      this.updateContentPopupTop();
+    },
+
+    handleTouchEnd(e) {
+      if (!this.isMoving) return;
+      this.isMoving = false;
+
+      // 修改：拖动结束后停留在当前位置，不自动展开或收起
+      // 只要确保popupTop在有效范围内即可
+
+      if (this.popupTop < 0) {
+        this.popupTop = 110;
+        this.contentPopupTop = this.windowHeight - this.popupTop - 25;
+      } else if (this.popupTop > this.windowHeight) {
+        this.popupTop = this.windowHeight - 60;
+        this.contentPopupTop = this.windowHeight - this.popupTop - 25;
+      } else if (this.popupTop < 110) {
+        this.popupTop = 110;
+        this.contentPopupTop = this.windowHeight - this.popupTop - 25;
+      }
+      this.changeTop();
+    },
+    changeTop() {
+      this.$emit('changeTop', this.popupTop);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+/* .draggable-popup-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 98;
+} */
+
+.draggable-popup-container {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ffffff;
+  border-top-left-radius: 20rpx;
+  border-top-right-radius: 20rpx;
+  transition: top 0.1s ease; /* 减少过渡时间使拖动更流畅 */
+  z-index: 99;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.draggable-popup-handle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20rpx 0;
+  cursor: move;
+}
+
+.draggable-popup-handle-line {
+  width: 60rpx;
+  height: 8rpx;
+  border-radius: 4rpx;
+  background-color: rgba(23, 26, 29, 0.24);
+}
+
+.draggable-popup-content {
+  overflow: auto;
+  position: relative;
+  z-index: 100;
+}
+</style>

package/DraggableBottomPopup/index.ts

@@ -0,0 +1,10 @@
+// index.ts
+import type { App } from 'vue';
+import DraggableBottomPopup from './DraggableBottomPopup.vue';
+
+// 使用install方法，在app.use挂载
+DraggableBottomPopup.install = (app: App) => {
+  app.component(DraggableBottomPopup.__name as string, DraggableBottomPopup); //注册组件
+};
+
+export default DraggableBottomPopup;

package/HwBtn/HwBtn.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="btn">我的按钮</div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+  .btn {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    color: #ffffff;
+  }
+</style>

package/HwBtn/index.ts

@@ -0,0 +1,10 @@
+// index.ts
+import type { App } from 'vue'
+import HwBtn from "./HwBtn.vue"
+
+// 使用install方法，在app.use挂载
+HwBtn.install = (app: App) => {
+    app.component(HwBtn.__name as string, HwBtn) //注册组件
+}
+
+export default HwBtn

package/index.d.ts

@@ -0,0 +1,11 @@
+import { App } from 'vue';
+import { HwBtn } from './HwBtn';
+import { DraggableBottomPopup } from './DraggableBottomPopup';
+
+export { HwBtn, DraggableBottomPopup };
+
+export declare const hwCusUi: {
+  install: (app: App) => void;
+};
+
+export default hwCusUi;

package/index.ts

@@ -0,0 +1,21 @@
+// index.ts
+import type { App } from 'vue';
+import HwBtn from './HwBtn';
+import DraggableBottomPopup from './DraggableBottomPopup';
+
+// 所有组件列表
+const components = [HwBtn, DraggableBottomPopup];
+
+// 定义 install 方法
+const install = (app: App): void => {
+  // 遍历注册所有组件
+  components.forEach((component) => app.component(component.__name as string, component));
+};
+
+export { HwBtn, DraggableBottomPopup };
+
+const hwCusUi = {
+  install
+};
+
+export default hwCusUi;

package/package.json

@@ -1,45 +1,14 @@
-{
-  "name": "hw-cus-ui",
-  "version": "1.0.22",
-  "type": "module",
-  "main": "./dist/hw-cus-ui.umd.cjs",
-  "module": "./dist/hw-cus-ui.es.cjs",
-  "types": "./dist/types/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/hw-cus-ui.es.cjs",
-      "require": "./dist/hw-cus-ui.umd.cjs",
-      "types": "./dist/types/index.d.ts"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc -b && vite build && vue-tsc -p tsconfig.types.json",
-    "preview": "vite preview",
-    "lib": "vue-tsc -b && vite build --mode lib"
-  },
-  "dependencies": {
-    "vue": "^3.5.24"
-  },
-  "devDependencies": {
-    "@types/node": "^24.10.1",
-    "@vitejs/plugin-vue": "^6.0.1",
-    "@vue/tsconfig": "^0.8.1",
-    "typescript": "~5.9.3",
-    "vite": "npm:rolldown-vite@7.2.5",
-    "vue-tsc": "^3.1.4"
-  },
-  "resolutions": {
-    "vite": "npm:rolldown-vite@7.2.5"
-  },
-  "peerDependencies": {
-    "vue": "^3.5.24"
-  },
-  "description": "一个基于 Vue 3 的组件库，包含常用的UI组件。",
-  "keywords": [],
-  "author": "",
-  "license": "ISC"
-}
+{
+  "name": "hw-cus-ui",
+  "version": "1.0.24",
+  "description": "",
+  "main": "index.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "types": "./index.d.ts"
+}

package/README.md

@@ -1,70 +0,0 @@
-# hw-cus-ui
-
-一个基于 Vue 3 的组件库，包含常用的UI组件。
-
-## 安装
-
-```bash
-npm install @yourname/hw-cus-ui
-```
-
-## 使用
-
-### 全局注册
-
-```ts
-import { createApp } from 'vue'
-import App from './App.vue'
-import hwCusUi from '@yourname/hw-cus-ui'
-import '@yourname/hw-cus-ui/dist/hw-cus-ui.css'
-
-const app = createApp(App)
-
-app.use(hwCusUi)
-app.mount('#app')
-```
-
-### 按需引入
-
-```ts
-import { createApp } from 'vue'
-import App from './App.vue'
-import { HwBtn } from 'hw-cus-ui'
-import '@yourname/hw-cus-ui/dist/hw-cus-ui.css'
-
-const app = createApp(App)
-
-app.component('HwBtn', HwBtn)
-app.mount('#app')
-```
-
-## 组件列表
-
-- HwBtn (按钮组件)
-
-## 开发
-
-```bash
-# 安装依赖
-npm install
-
-# 启动开发服务器
-npm run dev
-
-# 构建组件库
-npm run build
-```
-
-## 发布到npm
-
-在发布前，请注意：
-
-1. 将 package.json 中的 `@yourname/hw-cus-ui` 替换为你的实际npm用户名
-2. 登录npm账户: `npm login`
-3. 确保版本号更新
-4. 运行构建命令: `npm run build`
-5. 发布: `npm publish`
-
-## License
-
-MIT

package/dist/hw-cus-ui.css

@@ -1,2 +0,0 @@
-.btn[data-v-6693a7d0]{color:#fff;background-color:red;width:100px;height:100px}
-/*$vite$:1*/

package/dist/hw-cus-ui.es.cjs

@@ -1,17 +0,0 @@
-import { createElementBlock, openBlock } from "vue";
-var __plugin_vue_export_helper_default = (e, s) => {
-	let c = e.__vccOpts || e;
-	for (let [e, l] of s) c[e] = l;
-	return c;
-}, _sfc_main = {}, _hoisted_1 = { class: "btn" };
-function _sfc_render(c, l) {
-	return openBlock(), createElementBlock("div", _hoisted_1, "我的按钮");
-}
-var HwBtn_default$1 = /* @__PURE__ */ __plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-6693a7d0"]]);
-HwBtn_default$1.install = (e) => {
-	e.component(HwBtn_default$1.__name, HwBtn_default$1);
-};
-var HwBtn_default = HwBtn_default$1, components = [HwBtn_default], components_default = { install: (e) => {
-	components.forEach((s) => e.component(s.__name, s));
-} };
-export { HwBtn_default as HwBtn, components_default as default };

package/dist/hw-cus-ui.umd.cjs

@@ -1 +0,0 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.hwCusUi={},e.Vue))})(this,function(e,t){Object.defineProperty(e,`__esModule`,{value:!0});var n=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},r={},i={class:`btn`};function a(e,n){return(0,t.openBlock)(),(0,t.createElementBlock)(`div`,i,`我的按钮`)}var o=n(r,[[`render`,a],[`__scopeId`,`data-v-6693a7d0`]]);o.install=e=>{e.component(o.__name,o)};var s=o,c=[s];e.HwBtn=s,e.default={install:e=>{c.forEach(t=>e.component(t.__name,t))}}});

package/dist/types/components/HwBtn/HwBtn.vue.d.ts

@@ -1,3 +0,0 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/types/components/HwBtn/index.d.ts

@@ -1,2 +0,0 @@
-import HwBtn from "./HwBtn.vue";
-export default HwBtn;

package/dist/types/components/index.d.ts

@@ -1,7 +0,0 @@
-import type { App } from 'vue';
-import HwBtn from './HwBtn';
-export { HwBtn, };
-declare const hwCusUi: {
-    install: (app: App) => void;
-};
-export default hwCusUi;

package/dist/types/index.d.ts

@@ -1,3 +0,0 @@
-import hwCusUi from './components';
-export * from './components';
-export { hwCusUi };

package/dist/vite.svg

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