@uxda/appkit 4.1.20 → 4.1.22

package/dist/appkit.css

@@ -440,7 +440,7 @@ page {
   --text-color-dark-mode: #eee;
 }
 .number {
-  font-family: 'DIN alternate', 'Roboto', sans-serif-condensed-light;
+  font-family: 'DIN alternate', 'Barlow Condensed', 'Roboto Condensed', sans-serif-condensed-light;
 }
 .account-card .card {
   background: #2f2f2f;
@@ -623,14 +623,14 @@ page {
   top: 11px;
   background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iNDIiIHZpZXdCb3g9IjAgMCA0MiA0MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggb3BhY2l0eT0iMC4wMSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00MSA0MUgxVjFINDFWNDFaIiBmaWxsPSIjRDhEOEQ4IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utb3BhY2l0eT0iMC4wMSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIzLjM1NjEgMjAuOTk5OUwzMy45NjM3IDMxLjYwNzJDMzQuNjE0NiAzMi4yNTgxIDM0LjYxNDYgMzMuMzEzNCAzMy45NjM3IDMzLjk2NDJDMzMuMzQyNSAzNC41ODU1IDMyLjM1MjcgMzQuNjEzOCAzMS42OTc5IDM0LjA0ODlMMjAuOTk5NCAyMy4zNTY2TDEwLjM5MzUgMzMuOTY0MkM5Ljc0MjY1IDM0LjYxNTEgOC42ODczOCAzNC42MTUxIDguMDM2NSAzMy45NjQyQzcuNDE1MTkgMzMuMzQyOSA3LjM4Njk3IDMyLjM1MzIgNy45NTE3OSAzMS42OTg0TDE4LjY0MjggMjAuOTk5OUw4LjAzNjUgMTAuMzk0QzcuMzg1NjMgOS43NDMxNCA3LjM4NTYzIDguNjg3ODcgOC4wMzY1IDguMDM2OTlDOC42NTc3OSA3LjQxNTY4IDkuNjQ3NTQgNy4zODc0NiAxMC4zMDIzIDcuOTUyMjdMMjAuOTk5NCAxOC42NDMzTDMxLjYwNjcgOC4wMzY5OUMzMi4yNTc2IDcuMzg2MTIgMzMuMzEyOSA3LjM4NjEyIDMzLjk2MzcgOC4wMzY5OUMzNC41ODUgOC42NTgyOCAzNC42MTMzIDkuNjQ4MDMgMzQuMDQ4NSAxMC4zMDI4TDIzLjM1NjEgMjAuOTk5OVoiIGZpbGw9IiMxNzFBMUQiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS1vcGFjaXR5PSIwLjAxIi8+Cjwvc3ZnPgo=");
 }
-.consumption-date-filter {
+.appkit-date-filter {
   height: 100%;
   display: flex;
   flex-direction: column;
   width: 100%;
   position: relative;
 }
-.consumption-date-filter .date-filter-header {
+.appkit-date-filter .date-filter-header {
   text-align: center;
   height: 44px;
   line-height: 44px;
@@ -638,42 +638,42 @@ page {
   font-size: 17px;
   background-color: #f5f5f5;
 }
-.consumption-date-filter .content {
+.appkit-date-filter .content {
   flex: 1;
   margin: 15px;
   overflow-y: scroll;
   color: #353535;
   font-size: 13px;
 }
-.consumption-date-filter .content .title {
+.appkit-date-filter .content .title {
   opacity: 0.6;
   line-height: 18px;
 }
-.consumption-date-filter .content .info {
+.appkit-date-filter .content .info {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-gap: 10px;
   margin: 10px 0;
 }
-.consumption-date-filter .content .info .item {
+.appkit-date-filter .content .info .item {
   height: 30px;
   line-height: 30px;
   border: 1px solid #ccc;
   border-radius: 6px;
   text-align: center;
 }
-.consumption-date-filter .content .info .current {
+.appkit-date-filter .content .info .current {
   border: 1px solid;
   border-image-source: linear-gradient(180deg, rgba(239, 208, 130, 0.8) 0%, rgba(255, 185, 120, 0.8) 100%);
   background: linear-gradient(180deg, rgba(239, 208, 130, 0.8) 0%, rgba(255, 185, 120, 0.8) 100%), linear-gradient(180deg, #fff7e3 0%, #fefde6 100%);
 }
-.consumption-date-filter .buttons {
-  margin: 0 15px;
+.appkit-date-filter .buttons {
+  margin: 32px 15px 0 15px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-.consumption-date-filter .buttons .btn {
+.appkit-date-filter .buttons .btn {
   flex: 1;
   height: 40px;
   line-height: 40px;
@@ -684,22 +684,22 @@ page {
   font-size: 16px;
   border-radius: 6px;
 }
-.consumption-date-filter .buttons .confirm {
+.appkit-date-filter .buttons .confirm {
   margin-left: 11px;
   color: #000;
   border: none;
   background: linear-gradient(90deg, #ffebc1 0%, #ffd7a7 52.29%, #ffb875 100%);
 }
-.consumption-date-filter .time {
+.appkit-date-filter .time {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   margin: 10px 0 30px 0;
 }
-.consumption-date-filter .time .line {
+.appkit-date-filter .time .line {
   margin: 0 8px;
 }
-.consumption-date-filter .time .item {
+.appkit-date-filter .time .item {
   height: 30px;
   line-height: 30px;
   padding: 0 15px;
@@ -710,13 +710,16 @@ page {
   background: rgba(245, 245, 245, 0.8);
   border-radius: 6px;
 }
-.consumption-date-filter .time .current {
+.appkit-date-filter .time .current {
   border: 1px solid #353535;
 }
-.consumption-date-filter .bottom {
+.appkit-date-filter .bottom {
   height: 32px;
   background: #fff;
 }
+.nut-overlay.date-filter-picker-overlay {
+  height: 100vh;
+}
 .consumption-rules .title {
   line-height: 16px;
   font-weight: 500;
@@ -1462,7 +1465,7 @@ page {
   padding-left: 6px;
 }
 .notice-entry {
-  position: fixed;
+  position: absolute;
   right: 0;
   top: 120px;
   min-width: 66px;

package/dist/index.js

@@ -7,7 +7,7 @@ import '@nutui/nutui-taro/dist/packages/griditem/style/css';
 import Taro, { useDidShow, useRouter } from '@tarojs/taro';
 import '@nutui/nutui-taro/dist/packages/popup/style/css';
 import { isIdentityCard, isMobilePhone } from 'validator';
-import { NsForm, NsInput, NsButton, NsIcon, useNutshell } from '@uxda/nutshell/taro';
+import { NsForm, NsInput, NsButton, NsIcon, usePopup, useNutshell } from '@uxda/nutshell/taro';
 import debounce from 'lodash/debounce';
 import '@nutui/nutui-taro/dist/packages/dialog/style/css';
 import '@nutui/nutui-taro/dist/packages/datepicker/style/css';
@@ -2217,7 +2217,7 @@ var script$u = /* @__PURE__ */ defineComponent({
 
 script$u.__file = "src/balance/components/ConsumptionFilter.vue";
 
-const _hoisted_1$p = { class: "consumption-date-filter" };
+const _hoisted_1$p = { class: "appkit-date-filter" };
 const _hoisted_2$g = { class: "content" };
 const _hoisted_3$b = { class: "time" };
 var script$t = /* @__PURE__ */ defineComponent({
@@ -2229,7 +2229,7 @@ var script$t = /* @__PURE__ */ defineComponent({
   emits: ["complete", "reset"],
   setup(__props, { emit: __emit }) {
     const props = __props;
-    const emit = __emit;
+    const emit = __emit, state = usePopup();
     watch(
       () => `${props.from}${props.to}`,
       () => {
@@ -2243,6 +2243,10 @@ var script$t = /* @__PURE__ */ defineComponent({
     const minDate = ref();
     const maxDate = ref(/* @__PURE__ */ new Date());
     const datePickerOpen = ref(false);
+    state.beforeClose = () => {
+      datePickerOpen.value = false;
+      return true;
+    };
     function reset() {
       emit("reset");
     }
@@ -2261,6 +2265,11 @@ var script$t = /* @__PURE__ */ defineComponent({
         result.to = time;
       }
       datePickerOpen.value = false;
+      state.couldClose = true;
+    }
+    function onDatePickerCancel() {
+      datePickerOpen.value = false;
+      state.couldClose = true;
     }
     function switchDateInput(shift) {
       if (shift === "from") {
@@ -2273,12 +2282,13 @@ var script$t = /* @__PURE__ */ defineComponent({
       focusedDate.value = new Date(result[shift]);
       focused.value = shift;
       datePickerOpen.value = true;
+      state.couldClose = false;
     }
     return (_ctx, _cache) => {
       const _component_nut_date_picker = DatePicker;
       const _component_nut_popup = Popup;
       return openBlock(), createElementBlock("div", _hoisted_1$p, [
-        _cache[7] || (_cache[7] = createElementVNode(
+        _cache[6] || (_cache[6] = createElementVNode(
           "div",
           { class: "date-filter-header" },
           "\u65E5\u671F\u9009\u62E9",
@@ -2286,7 +2296,7 @@ var script$t = /* @__PURE__ */ defineComponent({
           /* HOISTED */
         )),
         createElementVNode("div", _hoisted_2$g, [
-          _cache[6] || (_cache[6] = createElementVNode(
+          _cache[5] || (_cache[5] = createElementVNode(
             "div",
             { class: "title" },
             "\u81EA\u5B9A\u4E49",
@@ -2304,7 +2314,7 @@ var script$t = /* @__PURE__ */ defineComponent({
               3
               /* TEXT, CLASS */
             ),
-            _cache[5] || (_cache[5] = createElementVNode(
+            _cache[4] || (_cache[4] = createElementVNode(
               "div",
               { class: "line" },
               "-",
@@ -2333,7 +2343,7 @@ var script$t = /* @__PURE__ */ defineComponent({
             onClick: onOkClick
           }, "\u786E\u5B9A")
         ]),
-        _cache[8] || (_cache[8] = createElementVNode(
+        _cache[7] || (_cache[7] = createElementVNode(
           "div",
           { class: "bottom" },
           null,
@@ -2342,8 +2352,10 @@ var script$t = /* @__PURE__ */ defineComponent({
         )),
         createVNode(_component_nut_popup, {
           visible: datePickerOpen.value,
-          "onUpdate:visible": _cache[4] || (_cache[4] = ($event) => datePickerOpen.value = $event),
-          position: "bottom"
+          "onUpdate:visible": _cache[3] || (_cache[3] = ($event) => datePickerOpen.value = $event),
+          class: "appkit-date-filter-picker-popup",
+          position: "bottom",
+          "overlay-class": "appkit-date-filter-picker-overlay"
         }, {
           default: withCtx(() => [
             createVNode(_component_nut_date_picker, {
@@ -2353,7 +2365,7 @@ var script$t = /* @__PURE__ */ defineComponent({
               "max-date": maxDate.value,
               "is-show-chinese": false,
               "three-dimensional": false,
-              onCancel: _cache[3] || (_cache[3] = ($event) => datePickerOpen.value = false),
+              onCancel: onDatePickerCancel,
               onConfirm: onDatePickerComplete
             }, null, 8, ["modelValue", "min-date", "max-date"])
           ]),
@@ -3198,14 +3210,18 @@ var script$n = /* @__PURE__ */ defineComponent({
     const $n = useNutshell();
     const model = useModel(__props, "modelValue");
     const openDateRangePicker = () => {
+      const child = ref();
       $n.sheet({
         component: script$t,
+        ref: child,
         props: {
           from: model.value.from,
           to: model.value.to
         },
+        modal: true,
+        // 不允许点击 overlay 关闭弹窗
+        mask: true,
         onComplete(result) {
-          console.log("===openDateFilter complete", result);
           model.value = {
             from: result.from,
             to: result.to

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxda/appkit",
-  "version": "4.1.20",
+  "version": "4.1.22",
   "description": "小程序应用开发包",
   "main": "dist/index.js",
   "module": "dist/index.ts",
@@ -20,7 +20,7 @@
   ],
   "author": "",
   "dependencies": {
-    "@babel/runtime": "^7.7.7",
+    "@babel/runtime": "^7.25.6",
     "@nutui/auto-import-resolver": "^1.0.0",
     "@nutui/icons-vue-taro": "^0.0.9",
     "@nutui/nutui-taro": "^4.3.11",
@@ -34,7 +34,6 @@
     "@tarojs/shared": "^4.0.0",
     "@tarojs/taro": "^4.0.0",
     "@types/wechat-miniprogram": "^3.4.7",
-    "@uxda/nutshell": "^1.0.0",
     "dayjs": "^1.11.10",
     "validator": "^13.12.0",
     "vue": "^3.5.0"
@@ -71,5 +70,8 @@
     "unplugin-auto-import": "^0.18.2",
     "unplugin-vue-components": "^0.27.3",
     "webpack": "^5.78.0"
+  },
+  "peerDependencies": {
+    "@uxda/nutshell": "^1.0.0"
   }
 }

package/src/balance/components/DateFilter.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="consumption-date-filter">
+  <div class="appkit-date-filter">
     <div class="date-filter-header">日期选择</div>
     <div class="content">
       <div class="title">自定义</div>
@@ -22,22 +22,25 @@
       <div class="btn confirm" @click="onOkClick">确定</div>
     </div>
     <div class="bottom"></div>
-    <nut-popup v-model:visible="datePickerOpen" position="bottom">
+    <nut-popup v-model:visible="datePickerOpen"
+      class="appkit-date-filter-picker-popup"
+      position="bottom"
+      overlay-class="appkit-date-filter-picker-overlay">
       <nut-date-picker
         v-model="focusedDate"
         :min-date="minDate"
         :max-date="maxDate"
         :is-show-chinese="false"
         :three-dimensional="false"
-        @cancel="datePickerOpen = false"
-        @confirm="onDatePickerComplete"
-      ></nut-date-picker>
+        @cancel="onDatePickerCancel"
+        @confirm="onDatePickerComplete" />
     </nut-popup>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { reactive, ref, watch } from 'vue'
+import { usePopup } from '@uxda/nutshell/taro'
 
 type DateFilterProps = {
   from: string
@@ -46,7 +49,8 @@ type DateFilterProps = {
 
 const props = defineProps<DateFilterProps>()
 
-const emit = defineEmits(['complete', 'reset'])
+const emit = defineEmits(['complete', 'reset']),
+  state = usePopup()
 
 watch(
   () => `${props.from}${props.to}`,
@@ -71,6 +75,11 @@ const minDate = ref<any>()
 const maxDate = ref<Date>(new Date())
 const datePickerOpen = ref<boolean>(false)
 
+state.beforeClose = () => {
+  datePickerOpen.value = false
+  return true
+}
+
 /**
  * 日期重置
  */
@@ -99,6 +108,12 @@ function onDatePickerComplete({ selectedValue, selectedOptions }) {
     result.to = time
   }
   datePickerOpen.value = false
+  state.couldClose = true
+}
+
+function onDatePickerCancel () {
+  datePickerOpen.value = false
+  state.couldClose = true
 }
 
 /**
@@ -106,7 +121,7 @@ function onDatePickerComplete({ selectedValue, selectedOptions }) {
  * 当选择开始时间大于结束时间，结束时间改为开始时间
  * 时间选择器都要小于当前时间，结束时间的时间选择器要以开始时间为最小值，
  */
-function switchDateInput(shift: string) {
+function switchDateInput (shift: string) {
   // 要设置一下结束时间的起始值 开始时间往前倒5年
   if (shift === 'from') {
     let time = result.from.split('-').map(Number)
@@ -118,10 +133,12 @@ function switchDateInput(shift: string) {
   focusedDate.value = new Date(result[shift])
   focused.value = shift
   datePickerOpen.value = true
+  // 不允许浮窗关闭
+  state.couldClose = false
 }
 </script>
 <style lang="scss">
-.consumption-date-filter {
+.appkit-date-filter {
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -174,7 +191,7 @@ function switchDateInput(shift: string) {
     }
   }
   .buttons {
-    margin: 0 15px;
+    margin: 32px 15px 0 15px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -224,4 +241,9 @@ function switchDateInput(shift: string) {
     background: #fff;
   }
 }
+.nut-overlay {
+  &.date-filter-picker-overlay {
+    height: 100vh;
+  }
+}
 </style>

package/src/balance/components/DateRange.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType, reactive } from 'vue'
+import { computed, PropType, ref } from 'vue'
 import { useNutshell } from '@uxda/nutshell/taro'
 import DateFilter from './DateFilter.vue'
 import dayjs from 'dayjs'
@@ -32,14 +32,17 @@ const model = defineModel({
 })
 
 const openDateRangePicker = () => {
+  const child = ref()
   $n.sheet({
     component: DateFilter,
+    ref: child,
     props: {
       from: model.value.from,
       to: model.value.to,
     },
+    modal: true, // 不允许点击 overlay 关闭弹窗
+    mask: true,
     onComplete (result: any) {
-      console.log('===openDateFilter complete', result)
       model.value = {
         from: result.from,
         to: result.to

package/src/notice/components/NoticeEntry.vue

@@ -66,7 +66,7 @@ async function getNotice() {
 
 <style lang="scss">
 .notice-entry {
-  position: fixed;
+  position: absolute;
   right: 0;
   top: 120px;
   min-width: 66px;

package/src/styles/fonts.scss

@@ -1,3 +1,3 @@
 .number {
-  font-family: 'DIN alternate', 'Roboto', sans-serif-condensed-light;
+  font-family: 'DIN alternate', 'Barlow Condensed', 'Roboto Condensed', sans-serif-condensed-light;
 }