@ruixinkeji/prism-ui 1.0.14 → 1.0.16

package/dist/dev/mp-weixin/components/PrismDateTimePicker/PrismDateTimePicker.wxss

@@ -0,0 +1,309 @@
+/**
+ * Prism UI - SCSS 变量定义
+ * 此文件包含所有设计令牌和变量
+ * 所有变量使用 $prism- 前缀，避免与用户项目冲突
+ *
+ * 主题切换：修改下面的引入文件即可切换主题
+ * 可选主题：blue(默认) / green / purple / orange / red / cyan
+ */
+/**
+ * Prism UI - 蓝色主题（默认）
+ *
+ * 使用方式：在 variables.scss 中修改引入
+ * @import '../theme/blue.scss';
+ *
+ * 颜色值来自 colors.scss 中的 $prism-blue-* 变量
+ */
+/* ============================================================
+   一、浅色模式变量（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+/* -------------------- 主题色 -------------------- */
+/* -------------------- 状态色 -------------------- */
+/* -------------------- 文字颜色 -------------------- */
+/* -------------------- 边框颜色 -------------------- */
+/* -------------------- 背景颜色 -------------------- */
+/* ============================================================
+   二、深色模式变量
+   ============================================================ */
+/* -------------------- 主题色（深色） -------------------- */
+/* -------------------- 状态色（深色） -------------------- */
+/* -------------------- 文字颜色（深色） -------------------- */
+/* -------------------- 边框颜色（深色） -------------------- */
+/* -------------------- 背景颜色（深色） -------------------- */
+/* ============================================================
+   三、主题色透明度（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+/* ============================================================
+   主题色渐变（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+/* ============================================================
+   四、白色透明度
+   ============================================================ */
+/* ============================================================
+   六、第三方品牌色
+   ============================================================ */
+/* ============================================================
+   八、常用阴影（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+/* ============================================================
+   九、统一间距
+   ============================================================ */
+.prism-datetime-picker .picker-trigger {
+  cursor: pointer;
+}
+.prism-datetime-picker .picker-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--prism-mask-bg, rgba(0, 0, 0, 0.5));
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  z-index: 9999;
+}
+.prism-datetime-picker .picker-content {
+  width: 100%;
+  background: var(--prism-bg-color-card, #FFFFFF);
+  border-radius: 24rpx 24rpx 0 0;
+}
+.prism-datetime-picker .picker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24rpx 32rpx;
+  border-bottom: 1rpx solid var(--prism-border-color-light, #E5E6EB);
+}
+.prism-datetime-picker .picker-cancel {
+  font-size: 30rpx;
+  color: var(--prism-text-secondary, #86909C);
+  padding: 8rpx 16rpx;
+}
+.prism-datetime-picker .picker-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: var(--prism-text-primary, #1D2129);
+}
+.prism-datetime-picker .picker-confirm {
+  font-size: 30rpx;
+  color: var(--prism-primary-color, #3478F6);
+  padding: 8rpx 16rpx;
+  font-weight: 500;
+}
+.prism-datetime-picker .picker-body {
+  padding-bottom: env(safe-area-inset-bottom);
+  box-sizing: content-box;
+  position: relative;
+}
+.prism-datetime-picker .picker-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+  font-weight: 500;
+}
+.prism-datetime-picker .picker-indicator {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  border-width: 0 !important;
+  border-style: none !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  z-index: 0 !important;
+}
+.prism-datetime-picker .picker-item {
+  position: relative;
+  z-index: 2;
+}
+.prism-datetime-picker .uni-picker-view-mask {
+  z-index: 1 !important;
+  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)), linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)) !important;
+}
+.prism-datetime-picker .uni-picker-view-indicator {
+  border: none !important;
+  border-top: none !important;
+  border-bottom: none !important;
+  border-color: transparent !important;
+}
+.prism-datetime-picker .calendar-body {
+  padding: 0 24rpx 24rpx;
+  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+  position: relative;
+}
+.prism-datetime-picker .calendar-watermark {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 300rpx;
+  font-weight: bold;
+  color: var(--prism-text-primary, #1D2129);
+  opacity: 0.04;
+  pointer-events: none;
+  z-index: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.prism-datetime-picker .calendar-nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16rpx 0;
+  gap: 16rpx;
+}
+.prism-datetime-picker .nav-btn {
+  width: 64rpx;
+  height: 64rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8rpx;
+  color: var(--prism-text-secondary, #86909C);
+}
+.prism-datetime-picker .nav-btn:active {
+  background: var(--prism-bg-color-container, #F7F8FA);
+}
+.prism-datetime-picker .nav-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: var(--prism-text-primary, #1D2129);
+  min-width: 200rpx;
+  text-align: center;
+}
+.prism-datetime-picker .today-btn {
+  position: absolute;
+  right: 0;
+  background: var(--prism-primary-light, rgba(52, 120, 246, 0.08));
+  color: var(--prism-primary-color, #3478F6);
+  font-size: 24rpx;
+  font-weight: 500;
+}
+.prism-datetime-picker .calendar-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  margin-bottom: 8rpx;
+}
+.prism-datetime-picker .weekday {
+  text-align: center;
+  font-size: 26rpx;
+  color: var(--prism-text-secondary, #86909C);
+  padding: 16rpx 0;
+}
+.prism-datetime-picker .calendar-days {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 8rpx;
+  position: relative;
+  z-index: 1;
+}
+.prism-datetime-picker .calendar-day {
+  aspect-ratio: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12rpx;
+  position: relative;
+}
+.prism-datetime-picker .calendar-day.other-month .day-text {
+  color: var(--prism-text-placeholder, #C9CDD4);
+}
+.prism-datetime-picker .calendar-day.today .day-text {
+  color: #FF6B00;
+  font-weight: 600;
+}
+.prism-datetime-picker .calendar-day.selected {
+  background: var(--prism-primary-color, #3478F6);
+}
+.prism-datetime-picker .calendar-day.selected .day-text {
+  color: #FFFFFF;
+}
+.prism-datetime-picker .calendar-day.selected .today-label {
+  color: rgba(255, 255, 255, 0.8);
+}
+.prism-datetime-picker .calendar-day.today.selected {
+  background: var(--prism-primary-color, #3478F6);
+}
+.prism-datetime-picker .calendar-day.today.selected .day-text {
+  color: #FFFFFF;
+}
+.prism-datetime-picker .calendar-day.today.selected .today-label {
+  color: rgba(255, 255, 255, 0.8);
+}
+.prism-datetime-picker .calendar-day.range-start {
+  background: var(--prism-primary-color, #3478F6);
+  border-radius: 12rpx 0 0 12rpx;
+}
+.prism-datetime-picker .calendar-day.range-start .day-text, .prism-datetime-picker .calendar-day.range-start .lunar-text {
+  color: #FFFFFF;
+}
+.prism-datetime-picker .calendar-day.range-end {
+  background: var(--prism-primary-color, #3478F6);
+  border-radius: 0 12rpx 12rpx 0;
+}
+.prism-datetime-picker .calendar-day.range-end .day-text, .prism-datetime-picker .calendar-day.range-end .lunar-text {
+  color: #FFFFFF;
+}
+.prism-datetime-picker .calendar-day.in-range {
+  background: var(--prism-primary-light, rgba(52, 120, 246, 0.1));
+  border-radius: 0;
+}
+.prism-datetime-picker .calendar-day.range-start.range-end {
+  border-radius: 12rpx;
+}
+.prism-datetime-picker .day-text {
+  font-size: 30rpx;
+  color: var(--prism-text-primary, #1D2129);
+}
+.prism-datetime-picker .lunar-text {
+  font-size: 18rpx;
+  color: var(--prism-text-secondary, #86909C);
+  margin-top: 4rpx;
+}
+.prism-datetime-picker .today-label {
+  font-size: 20rpx;
+  color: #FF6B00;
+  position: absolute;
+  bottom: 6rpx;
+}
+.dark-mode.prism-datetime-picker .picker-content {
+  background: var(--prism-bg-color-card, #1A1A1A);
+}
+.dark-mode.prism-datetime-picker .picker-item {
+  color: var(--prism-text-primary, #E5E6EB);
+}
+.dark-mode.prism-datetime-picker .picker-indicator {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  border-width: 0 !important;
+  border-style: none !important;
+  border-color: transparent !important;
+}
+.dark-mode.prism-datetime-picker .uni-picker-view-indicator {
+  background: transparent !important;
+  border: none !important;
+  border-width: 0 !important;
+  border-color: transparent !important;
+}
+.dark-mode.prism-datetime-picker .uni-picker-view-indicator::before,
+.dark-mode.prism-datetime-picker .uni-picker-view-indicator::after {
+  display: none !important;
+  border: none !important;
+}
+.dark-mode.prism-datetime-picker picker-view-column::before,
+.dark-mode.prism-datetime-picker picker-view-column::after {
+  display: none !important;
+}
+.dark-mode.prism-datetime-picker picker-view {
+  --picker-mask-bg: linear-gradient(180deg, rgba(26, 26, 26, 0.95), rgba(26, 26, 26, 0.6));
+}
+.dark-mode.prism-datetime-picker .uni-picker-view-mask {
+  background-image: linear-gradient(180deg, rgba(26, 26, 26, 0.95), rgba(26, 26, 26, 0.6)), linear-gradient(0deg, rgba(26, 26, 26, 0.95), rgba(26, 26, 26, 0.6)) !important;
+}
+.dark-mode.prism-datetime-picker .nav-btn:active {
+  background: var(--prism-bg-color-container, #2A2A2A);
+}

package/dist/dev/mp-weixin/components/PrismDropdown/PrismDropdown.js

@@ -0,0 +1,63 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+const _sfc_main = {
+  __name: "PrismDropdown",
+  props: {
+    menus: {
+      type: Array,
+      required: true
+      // 格式: [{ title: '排序', value: '综合排序', options: ['综合排序', '销量优先'] }]
+    }
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const activeIndex = common_vendor.ref(-1);
+    const menuList = common_vendor.ref([...props.menus]);
+    common_vendor.watch(() => props.menus, (val) => {
+      menuList.value = [...val];
+    }, { deep: true });
+    function toggleDropdown(index) {
+      activeIndex.value = activeIndex.value === index ? -1 : index;
+    }
+    function closeDropdown() {
+      activeIndex.value = -1;
+    }
+    function selectOption(index, opt) {
+      menuList.value[index].value = opt;
+      activeIndex.value = -1;
+      emit("change", { index, value: opt, menu: menuList.value[index] });
+    }
+    return (_ctx, _cache) => {
+      return {
+        a: common_vendor.f(menuList.value, (item, index, i0) => {
+          return {
+            a: common_vendor.t(item.value),
+            b: index,
+            c: activeIndex.value === index ? 1 : "",
+            d: common_vendor.o(($event) => toggleDropdown(index), index)
+          };
+        }),
+        b: common_vendor.f(menuList.value, (item, index, i0) => {
+          return {
+            a: common_vendor.f(item.options, (opt, k1, i1) => {
+              return {
+                a: common_vendor.t(opt),
+                b: opt,
+                c: item.value === opt ? 1 : "",
+                d: common_vendor.o(($event) => selectOption(index, opt), opt)
+              };
+            }),
+            b: "popup-" + index,
+            c: activeIndex.value === index ? 1 : ""
+          };
+        }),
+        c: activeIndex.value >= 0 ? 1 : "",
+        d: common_vendor.o(closeDropdown)
+      };
+    };
+  }
+};
+wx.createComponent(_sfc_main);
+//# sourceMappingURL=../../../.sourcemap/mp-weixin/components/PrismDropdown/PrismDropdown.js.map

package/dist/dev/mp-weixin/components/PrismDropdown/PrismDropdown.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/dist/dev/mp-weixin/components/PrismDropdown/PrismDropdown.wxml

@@ -0,0 +1 @@
+<view class="prism-dropdown"><view class="prism-dropdown__bar"><view wx:for="{{a}}" wx:for-item="item" wx:key="b" class="{{['prism-dropdown__item', item.c && 'prism-dropdown__item--active']}}" bindtap="{{item.d}}"><text>{{item.a}}</text><text class="prism-dropdown__arrow fa fa-chevron-down"></text></view></view><view wx:for="{{b}}" wx:for-item="item" wx:key="b" class="{{['prism-dropdown__popup', item.c && 'prism-dropdown__popup--show']}}"><view wx:for="{{item.a}}" wx:for-item="opt" wx:key="b" class="{{['prism-dropdown__option', opt.c && 'prism-dropdown__option--selected']}}" bindtap="{{opt.d}}"><text>{{opt.a}}</text><text class="prism-dropdown__check fa fa-check"></text></view></view><view class="{{['prism-dropdown__mask', c && 'prism-dropdown__mask--show']}}" bindtap="{{d}}"></view></view>

package/dist/dev/mp-weixin/components/PrismGroupSticky/PrismGroupSticky.js

@@ -0,0 +1,128 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+const _sfc_main = {
+  __name: "PrismGroupSticky",
+  props: {
+    // 索引列表
+    indexList: {
+      type: Array,
+      default: () => []
+    },
+    // 是否显示索引条
+    showIndexBar: {
+      type: Boolean,
+      default: false
+    },
+    // 容器高度
+    height: {
+      type: String,
+      default: "100%"
+    }
+  },
+  emits: ["index-change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const instance = common_vendor.getCurrentInstance();
+    const currentIndex = common_vendor.ref("");
+    const showIndicator = common_vendor.ref(false);
+    const indicatorTop = common_vendor.ref(0);
+    const scrollTop = common_vendor.ref(0);
+    let indexBarRect = null;
+    let groupPositions = {};
+    const getLetterByTouch = (touchY) => {
+      if (!indexBarRect || !props.indexList.length) return "";
+      const itemHeight = indexBarRect.height / props.indexList.length;
+      const relativeY = touchY - indexBarRect.top;
+      const index = Math.floor(relativeY / itemHeight);
+      if (index < 0) return props.indexList[0];
+      if (index >= props.indexList.length) return props.indexList[props.indexList.length - 1];
+      return props.indexList[index];
+    };
+    const calculateGroupPositions = () => {
+      groupPositions = {};
+      props.indexList.forEach((letter) => {
+        const el = document.getElementById(`group-${letter}`);
+        if (el) {
+          groupPositions[letter] = el.offsetTop;
+        }
+      });
+    };
+    const scrollToLetter = (letter) => {
+      if (!groupPositions[letter]) {
+        calculateGroupPositions();
+      }
+      const targetTop = groupPositions[letter];
+      if (targetTop !== void 0) {
+        scrollTop.value = targetTop + 0.1;
+        common_vendor.nextTick$1(() => {
+          scrollTop.value = targetTop;
+        });
+      }
+    };
+    const onScroll = (e) => {
+      e.detail.scrollTop;
+    };
+    const updateLetter = (touchY) => {
+      indicatorTop.value = touchY;
+      const letter = getLetterByTouch(touchY);
+      if (letter) {
+        currentIndex.value = letter;
+        scrollToLetter(letter);
+        emit("index-change", letter);
+      }
+    };
+    const onIndexTouchStart = (e) => {
+      showIndicator.value = true;
+      const touchY = e.touches[0].clientY;
+      indicatorTop.value = touchY;
+      common_vendor.index.createSelectorQuery().in(instance).select(".prism-index-bar").boundingClientRect((rect) => {
+        if (rect) {
+          indexBarRect = rect;
+          const letter = getLetterByTouch(touchY);
+          if (letter) {
+            currentIndex.value = letter;
+            scrollToLetter(letter);
+            emit("index-change", letter);
+          }
+        }
+      }).exec();
+    };
+    const onIndexTouchMove = (e) => {
+      const touchY = e.touches[0].clientY;
+      if (indexBarRect) {
+        updateLetter(touchY);
+      }
+    };
+    const onIndexTouchEnd = () => {
+      showIndicator.value = false;
+    };
+    return (_ctx, _cache) => {
+      return common_vendor.e({
+        a: scrollTop.value,
+        b: common_vendor.o(onScroll),
+        c: __props.showIndexBar && __props.indexList.length
+      }, __props.showIndexBar && __props.indexList.length ? {
+        d: common_vendor.f(__props.indexList, (item, k0, i0) => {
+          return {
+            a: common_vendor.t(item),
+            b: item,
+            c: currentIndex.value === item ? 1 : ""
+          };
+        }),
+        e: common_vendor.o(onIndexTouchStart),
+        f: common_vendor.o(onIndexTouchMove),
+        g: common_vendor.o(onIndexTouchEnd)
+      } : {}, {
+        h: showIndicator.value
+      }, showIndicator.value ? {
+        i: common_vendor.t(currentIndex.value),
+        j: indicatorTop.value + "px"
+      } : {}, {
+        k: __props.height
+      });
+    };
+  }
+};
+wx.createComponent(_sfc_main);
+//# sourceMappingURL=../../../.sourcemap/mp-weixin/components/PrismGroupSticky/PrismGroupSticky.js.map

package/dist/dev/mp-weixin/components/PrismGroupSticky/PrismGroupSticky.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/dist/dev/mp-weixin/components/PrismGroupSticky/PrismGroupSticky.wxml

@@ -0,0 +1 @@
+<view class="prism-group-sticky-wrapper" style="{{'height:' + k}}"><scroll-view class="prism-group-sticky" scroll-y scroll-top="{{a}}" enhanced="{{true}}" show-scrollbar="{{false}}" style="height:100%" bindscroll="{{b}}"><slot></slot></scroll-view><view wx:if="{{c}}" class="prism-index-bar" bindtouchstart="{{e}}" catchtouchmove="{{f}}" bindtouchend="{{g}}"><view wx:for="{{d}}" wx:for-item="item" wx:key="b" class="{{['index-item', item.c && 'active']}}">{{item.a}}</view></view><view wx:if="{{h}}" class="index-indicator" style="{{'top:' + j}}">{{i}}</view></view>