papayaui 0.2.5 → 0.2.7

package/components/dialog/dialog.ts

@@ -0,0 +1,14 @@
+import { defaultNamespace } from '../../core'
+
+const Dialog = () => {
+  const node = uni
+    .createSelectorQuery()
+    .select(`#${defaultNamespace}-dialog`)
+    .node((result) => {
+      console.log('result', result)
+    })
+    .exec()
+  console.log(node)
+}
+
+export default Dialog

package/components/index.ts

@@ -48,6 +48,7 @@ export * from './section'
 export * from './sidebar'
 export * from './sidebar-item'
 export * from './skeleton'
+export * from './slider'
 export * from './sort-label'
 export * from './steps'
 export * from './sticky'

package/components/sidebar-item/sidebar-item.vue

@@ -10,8 +10,11 @@
     @tap="onSelect"
   >
     <Badge :show="dot || !isUndefined(badge)" :dot="dot" :content="badge">
-      <text :class="ns.e('text')">{{ title }}</text>
+      <slot v-if="$slots.title" name="title" />
+      <text v-else :class="ns.e('text')">{{ title }}</text>
     </Badge>
+
+    <slot v-if="$slots.after" name="after" />
   </view>
 </template>
 

package/components/slider/demo.vue

@@ -0,0 +1,49 @@
+<template>
+  <DocDemoBlock title="基础用法" card>
+    <Demo1 />
+  </DocDemoBlock>
+  <DocDemoBlock title="双滑块" card>
+    <Demo2 />
+  </DocDemoBlock>
+  <DocDemoBlock title="指定范围" card>
+    <Demo3 />
+  </DocDemoBlock>
+  <DocDemoBlock title="设置步长" card>
+    <Demo4 />
+  </DocDemoBlock>
+  <DocDemoBlock title="显示范围" card>
+    <Demo5 />
+  </DocDemoBlock>
+  <DocDemoBlock title="显示标签" card>
+    <Demo6 class="block mt-40" />
+  </DocDemoBlock>
+  <DocDemoBlock title="禁用" card>
+    <Demo7 />
+  </DocDemoBlock>
+  <DocDemoBlock title="自定义样式" card>
+    <Demo8 />
+  </DocDemoBlock>
+  <DocDemoBlock title="自定义按钮" card>
+    <Demo9 />
+  </DocDemoBlock>
+  <DocDemoBlock title="刻度标记" card>
+    <Demo10 />
+  </DocDemoBlock>
+  <pa-safe-bottom class="block mt-30" />
+</template>
+
+<script setup lang="ts">
+import Demo1 from '../../demos/slider/demo-1.vue'
+import Demo2 from '../../demos/slider/demo-2.vue'
+import Demo3 from '../../demos/slider/demo-3.vue'
+import Demo4 from '../../demos/slider/demo-4.vue'
+import Demo5 from '../../demos/slider/demo-5.vue'
+import Demo6 from '../../demos/slider/demo-6.vue'
+import Demo7 from '../../demos/slider/demo-7.vue'
+import Demo8 from '../../demos/slider/demo-8.vue'
+import Demo9 from '../../demos/slider/demo-9.vue'
+import Demo10 from '../../demos/slider/demo-10.vue'
+import DocDemoBlock from '../../doc/doc-demo-block.vue'
+</script>
+
+<style lang="scss" scoped></style>

package/components/slider/index.ts

@@ -0,0 +1,4 @@
+import type Slider from './slider.vue'
+
+export type SliderInstance = InstanceType<typeof Slider>
+export * from './props'

package/components/slider/props.ts

@@ -0,0 +1,88 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { isArray, isNumber } from '../../utils'
+
+export type SliderValue = number | number[]
+
+export const sliderProps = {
+  /**
+   * 当前进度百分比，在双滑块模式下为数组格式
+   */
+  modelValue: {
+    type: [Number, Array] as PropType<SliderValue>,
+    default(rawProps: any) {
+      return rawProps.range ? [0, 100] : 0
+    },
+  },
+  /**
+   * 是否开启双滑块模式
+   */
+  range: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 最小值
+   */
+  min: {
+    type: Number,
+    default: 0,
+  },
+  /**
+   * 最大值
+   */
+  max: {
+    type: Number,
+    default: 100,
+  },
+  /**
+   * 步长
+   */
+  step: {
+    type: Number,
+    default: 1,
+  },
+  /**
+   * 是否禁用滑块
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 是否显示当前进度标签
+   */
+  showTag: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 是否显示范围值
+   */
+  showRange: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 是否显示刻度标记
+   */
+  marks: {
+    type: Object as PropType<Record<number, string>>,
+    default: false,
+  },
+  /**
+   * 进度条颜色
+   */
+  activeColor: String,
+  /**
+   * 进度条非激活态颜色
+   */
+  inactiveColor: String,
+} as const
+
+export const sliderEmits = {
+  'update:modelValue': (value: number | number[]) => isNumber(value) || isArray(value),
+  change: (value: number | number[]) => isNumber(value) || isArray(value),
+}
+
+export type SliderProps = ExtractPropTypes<typeof sliderProps>
+export type SliderEmits = typeof sliderEmits

package/components/slider/slider.scss

@@ -0,0 +1,126 @@
+@import '../../styles/vars.scss';
+
+.#{$prefix}-slider {
+  $default-bg-color: _var(slider-background-color, #ebedf0);
+  $active-bg-color: _var(slider-active-background, _var(color-primary));
+
+  position: relative;
+  width: 100%;
+  height: _var(slider-height, 4px);
+  background-color: $default-bg-color;
+  border-radius: 999px;
+  cursor: pointer;
+
+  &::before {
+    position: absolute;
+    top: -8px;
+    right: 0;
+    bottom: -8px;
+    left: 0;
+    content: '';
+  }
+
+  &-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 4px;
+  }
+
+  &__min,
+  &__max {
+    color: _var(slider-tip-font-color, _var(color-black));
+    font-size: _var(slider-tip-font-size, 12px);
+    user-select: none;
+  }
+
+  &__bar {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-color: $active-bg-color;
+    border-radius: inherit;
+    transition: all _var(slider-duration, 0.2s);
+  }
+
+  &__button-wrapper {
+    position: absolute;
+    cursor: grab;
+    top: 50%;
+
+    &--left {
+      left: 0;
+      transform: translate3d(-50%, -50%, 0);
+    }
+
+    &--right {
+      right: 0;
+      transform: translate3d(50%, -50%, 0);
+    }
+  }
+
+  &__button {
+    width: _var(slider-button-width, 24px);
+    height: _var(slider-button-height, 24px);
+    background: _var(slider-button-background, #fff);
+    border: _var(slider-button-border, 1px solid transparent);
+    border-radius: _var(slider-button-radius, 50%);
+    box-shadow: _var(slider-button-shadow, 0 1px 2px rgba(0, 0, 0, 0.5));
+  }
+
+  &__button-number {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: _var(slider-button-tip-font-color, _var(color-black));
+    font-size: _var(slider-button-tip-font-size, 12px);
+    transform: translate3d(0, -100%, 0);
+    user-select: none;
+  }
+
+  &__mark {
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    font-size: 12px;
+    padding-top: 14px;
+    overflow: visible;
+  }
+
+  &__mark-text {
+    position: absolute;
+    display: inline-block;
+    color: #999;
+    line-height: 16px;
+    text-align: center;
+    transform: translateX(-50%);
+    user-select: none;
+    word-break: keep-all;
+  }
+
+  &__tick {
+    position: absolute;
+    top: -20px;
+    left: 0;
+    width: 11px;
+    height: 11px;
+    border-radius: 50%;
+    background-color: $default-bg-color;
+  }
+
+  &--show-range {
+    margin: _var(slider-margin, 0 15px);
+  }
+
+  &--mark-active &__tick {
+    background-color: $active-bg-color;
+  }
+
+  &--disabled {
+    cursor: not-allowed;
+    opacity: _var(slider-disabled-opacity, 0.5);
+  }
+}

package/components/slider/slider.vue

@@ -0,0 +1,254 @@
+<template>
+  <view :class="ns.b('container')">
+    <text v-if="showRange" :class="ns.e('min')">{{ min }}</text>
+    <view
+      :class="[ns.b(), ns.is('show-range', showRange), ns.is('disabled', disabled)]"
+      :style="ns.style({ backgroundColor: inactiveColor })"
+    >
+      <view v-if="marks" :class="ns.e('mark')">
+        <text
+          v-for="(text, value) in marks"
+          :key="value"
+          :class="[ns.e('mark-text'), ns.is('mark-active', isWithinRange(value))]"
+          :style="ns.style({ left: value + '%' })"
+        >
+          {{ text }}
+          <text :class="ns.e('tick')"></text>
+        </text>
+      </view>
+
+      <view :class="ns.e('bar')" :style="ns.style({ backgroundColor: activeColor })">
+        <template v-for="(type, index) in ['left', 'right']" :key="type">
+          <view
+            v-if="index === 0 ? range : true"
+            :class="[ns.e('button-wrapper'), ns.em('button-wrapper', type)]"
+            :data-index="index"
+            :props="wxsProps"
+            :change:props="wxs.propsChange"
+            :value="wxsModelValue"
+            :change:value="wxs.modelValueChange"
+            @touchstart="wxs.touchstart"
+            @touchmove="wxs.touchmove"
+            @touchend="wxs.touchend"
+          >
+            <slot v-if="$slots.button" name="button" />
+            <view v-else :class="ns.e('button')">
+              <text v-if="showTag" :class="ns.e('button-number')">{{
+                Array.isArray(modelValue) ? modelValue[index] : modelValue
+              }}</text>
+            </view>
+          </view>
+        </template>
+      </view>
+    </view>
+    <text v-if="showRange" :class="ns.e('max')">{{ max }}</text>
+  </view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watch } from 'vue'
+import useNamespace from '../../core/useNamespace'
+import { sliderEmits, sliderProps } from './props'
+
+export default defineComponent({
+  props: sliderProps,
+  emits: sliderEmits,
+  setup(props, { emit }) {
+    const ns = useNamespace('slider')
+
+    let isDragging = false
+
+    const wxsProps = computed(() => {
+      return {
+        mainClassName: ns.b(),
+        barClassName: ns.e('bar'),
+        disabled: props.disabled,
+        range: props.range,
+        min: props.min,
+        max: props.max,
+        step: props.step,
+      }
+    })
+
+    const wxsModelValue = ref(props.modelValue)
+
+    const isRange = computed(() => {
+      return props.range && Array.isArray(props.modelValue)
+    })
+
+    const isWithinRange = (value: number) => {
+      if (isRange.value) {
+        const modelValues = props.modelValue as number[]
+        return value >= modelValues[0] && value <= modelValues[1]
+      }
+      return value <= props.modelValue
+    }
+
+    const updateModelValue = (value: number | number[]) => {
+      isDragging = true
+      // TODO: wxs的bug，为0时会变成{}, 要特殊处理
+      if (!isRange.value && typeof value !== 'number') {
+        value = 0
+      }
+      emit('update:modelValue', value)
+    }
+
+    const emitChange = (value: number | number[]) => {
+      isDragging = false
+      wxsModelValue.value = value
+      emit('change', value)
+    }
+
+    watch(
+      () => props.modelValue,
+      (newValue) => {
+        if (!isDragging) {
+          wxsModelValue.value = newValue
+        }
+      },
+    )
+
+    return {
+      wxs: {} as any,
+      ns,
+      wxsProps,
+      wxsModelValue,
+      isWithinRange,
+      updateModelValue,
+      emitChange,
+    }
+  },
+})
+</script>
+<script module="wxs" lang="wxs">
+var MAIN_WIDTH = 0
+var MAIN_OFFSET_LEFT = 0
+
+function getMainWidth(ownInstance, mainClassName) {
+  if (MAIN_WIDTH) return MAIN_WIDTH
+  var rect = ownInstance.selectComponent('.' + mainClassName).getBoundingClientRect()
+  MAIN_WIDTH = rect.width
+  MAIN_OFFSET_LEFT = rect.left
+  return MAIN_WIDTH
+}
+
+function touchstart(event, ownInstance) {
+  var instance = event.instance
+  var state = instance.getState()
+  if (state.disabled) return
+  getMainWidth(ownInstance, state.mainClassName)
+  state.index = instance.getDataset().index
+}
+
+function touchmove(event, ownInstance) {
+  var instance = event.instance
+  var state = instance.getState()
+  if (state.disabled) return
+  var touch = event.touches[0] || event.changedTouches[0]
+  var moveX = touch.pageX - MAIN_OFFSET_LEFT
+  if (moveX < 0) {
+    moveX = 0
+  } else if (moveX > MAIN_WIDTH) {
+    moveX = MAIN_WIDTH
+  }
+  state.moveX = moveX
+  var offset = calcLeftAndRightOffsetPercent(state)
+  state._offset = offset
+  updateStyle(ownInstance, state.barClassName, offset.left, offset.right)
+  var newModelValue = state.range ? [
+    calcValueByOffsetPercent(offset.left, state.min, state.max, state.step),
+    calcValueByOffsetPercent(offset.right, state.min, state.max, state.step)
+  ] : calcValueByOffsetPercent(offset.right, state.min, state.max, state.step)
+  state._modelValue = newModelValue
+  // 值没有变化不触发事件
+  if (newModelValue.toString() !== state.modelValue.toString()) {
+    ownInstance.callMethod('updateModelValue', newModelValue)
+  }
+  return false
+}
+
+function touchend(event, ownInstance) {
+  var instance = event.instance
+  var state = instance.getState()
+  if (state.disabled) return
+  ownInstance.callMethod('emitChange', state._modelValue)
+}
+
+function calcOffsetPercent(offsetX, width, step) {
+  if (offsetX <= 0) return 0
+  var percentage = Math.floor((offsetX / width) * 100)
+  percentage = percentage - (percentage % step)
+  return percentage
+}
+
+function calcValueByOffsetPercent(percentage, min, max, step) {
+  var value = Math.floor(((max - min) * percentage) / 100 + min)
+  value = value - (value % step)
+  return value
+}
+
+function calcLeftAndRightOffsetPercent(state) {
+  var percentage = calcOffsetPercent(state.moveX, MAIN_WIDTH, state.step)
+  // if (percentage <= 0) return { left: 0, right: 0 }
+  var left = 0
+  var right = 0
+  if (state.range) {
+    left = state.index === 0 ? percentage : state.modelValue[0]
+    right = state.index === 0 ? state.modelValue[1] : percentage
+  } else {
+    right = percentage
+  }
+  return left <= right ? { left, right } : { left: right, right: left }
+}
+
+function updateStyle(ownInstance, barClassName, leftOffsetPercent, rightOffsetPercent) {
+  var width = rightOffsetPercent - leftOffsetPercent
+  var left = leftOffsetPercent
+  ownInstance.selectComponent('.' + barClassName).setStyle({
+    width: width + '%',
+    left: left + '%',
+    transition: 'none 0s ease 0s',
+  })
+}
+
+function propsChange(newValue, oldValue, ownInstance, instance) {
+  if (typeof newValue === 'undefined') return
+  var state = instance.getState()
+  state.mainClassName = newValue.mainClassName
+  state.barClassName = newValue.barClassName
+  state.disabled = newValue.disabled
+  state.range = newValue.range
+  state.min = newValue.min
+  state.max = newValue.max
+  state.step = newValue.step
+}
+
+function modelValueChange(newValue, oldValue, ownInstance, instance) {
+  if (typeof newValue === 'undefined') return
+  var state = instance.getState()
+  state.modelValue = newValue
+  // TODO: wxs的bug，为0时会变成[object Object], 要特殊处理
+  if (!state.range && typeof state.modelValue !== 'number') {
+    state.modelValue = 0
+  }
+  var modelValues = state.range ? state.modelValue : [null, state.modelValue]
+  var offset = [0, 0]
+  for (var i = 0; i < modelValues.length; i++) {
+    if (modelValues[i] === null) continue
+    offset[i] = calcOffsetPercent(modelValues[i] - state.min, state.max - state.min, state.step)
+  }
+  updateStyle(ownInstance, state.barClassName, offset[0], offset[1])
+}
+
+module.exports = {
+  touchstart: touchstart,
+  touchmove: touchmove,
+  touchend: touchend,
+  propsChange: propsChange,
+  modelValueChange: modelValueChange,
+}
+</script>
+
+<style lang="scss">
+@import './slider.scss';
+</style>

package/components/tabs/tabs.scss

@@ -24,7 +24,7 @@
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    padding: 0 4px;
+    padding: _var(tabs-item-padding, 0 4px);
     color: _var(tabs-color, _var(color-black-2));
     font-size: _var(tabs-font-size, 14px);
     line-height: _var(tabs-line-height, 20px);
@@ -39,7 +39,7 @@
     width: _var(tabs-line-width, $tabs-line-width);
     height: _var(tabs-line-height, 3px);
     background-color: _var(color-primary);
-    border-radius: 3rpx;
+    border-radius: _var(tabs-line-radius, 3rpx);
   }
 
   &__content {
@@ -61,7 +61,7 @@
   }
   &--scrollable &__item {
     flex: 1 0 auto;
-    padding: 0 12px;
+    padding: _var(tabs-item-scrollable-padding, 0 12px);
   }
 
   &--animated &__content {

package/components/uploader/uploader.scss

@@ -28,8 +28,8 @@
       position: absolute;
       top: 0;
       right: 0;
-      width: _var(uploader-delete-width, 15%);
-      height: _var(uploader-delete-height, 15%);
+      width: _var(uploader-delete-width, 14px);
+      height: _var(uploader-delete-height, 14px);
       background-color: _var(uploader-delete-bg, rgba(0, 0, 0, 0.7));
       border-radius: 0 _var(uploader-preview-radius, 4px) 0 12px;
       font-size: _var(uploader-delete-icon-size, 12px);

package/demos/slider/demo-1.vue

@@ -0,0 +1,11 @@
+<template>
+  <pa-slider v-model="value" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref(50)
+</script>
+
+<style lang="scss" scoped></style>

package/demos/slider/demo-10.vue

@@ -0,0 +1,22 @@
+<template>
+  <pa-slider v-model="value" :marks="marks" />
+  <pa-slider v-model="value2" :marks="marks" range class="block" style="margin-top: 60px" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref(52)
+const value2 = ref([29, 72])
+
+const marks = {
+  0: '0',
+  20: '20',
+  40: '40',
+  60: '60',
+  80: '80',
+  100: '100',
+}
+</script>
+
+<style lang="scss" scoped></style>

package/demos/slider/demo-2.vue

@@ -0,0 +1,11 @@
+<template>
+  <pa-slider v-model="value" range />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref([20, 50])
+</script>
+
+<style lang="scss" scoped></style>

package/demos/slider/demo-3.vue

@@ -0,0 +1,11 @@
+<template>
+  <pa-slider v-model="value" :min="-10" :max="10" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref(-4)
+</script>
+
+<style lang="scss" scoped></style>

package/demos/slider/demo-4.vue

@@ -0,0 +1,11 @@
+<template>
+  <pa-slider v-model="value" :step="5" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref(20)
+</script>
+
+<style lang="scss" scoped></style>

package/demos/slider/demo-5.vue

@@ -0,0 +1,11 @@
+<template>
+  <pa-slider v-model="value" show-range />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref(25)
+</script>
+
+<style lang="scss" scoped></style>

package/demos/slider/demo-6.vue

@@ -0,0 +1,11 @@
+<template>
+  <pa-slider v-model="value" show-tag />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref(29)
+</script>
+
+<style lang="scss" scoped></style>

package/demos/slider/demo-7.vue

@@ -0,0 +1,11 @@
+<template>
+  <pa-slider v-model="value" disabled />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref(20)
+</script>
+
+<style lang="scss" scoped></style>

package/demos/slider/demo-8.vue

@@ -0,0 +1,11 @@
+<template>
+  <pa-slider v-model="value" active-color="red" inactive-color="#ccc" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref(20)
+</script>
+
+<style lang="scss" scoped></style>

package/demos/slider/demo-9.vue

@@ -0,0 +1,25 @@
+<template>
+  <pa-slider v-model="value">
+    <template #button>
+      <div class="slider-demo-button">{{ value }}</div>
+    </template>
+  </pa-slider>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref(20)
+</script>
+
+<style lang="scss" scoped>
+.slider-demo-button {
+  width: 26px;
+  color: #fff;
+  font-size: 10px;
+  line-height: 18px;
+  text-align: center;
+  background-color: var(--pa-color-primary);
+  border-radius: 100px;
+}
+</style>

package/global.d.ts

@@ -48,6 +48,7 @@ declare module '@vue/runtime-core' {
     PaSidebar: typeof import('papayaui/components/sidebar/sidebar.vue')['default']
     PaSidebarItem: typeof import('papayaui/components/sidebar-item/sidebar-item.vue')['default']
     PaSkeleton: typeof import('papayaui/components/skeleton/skeleton.vue')['default']
+    PaSlider: typeof import('papayaui/components/slider/slider.vue')['default']
     PaSortLabel: typeof import('papayaui/components/sort-label/sort-label.vue')['default']
     PaSteps: typeof import('papayaui/components/steps/steps.vue')['default']
     PaSticky: typeof import('papayaui/components/sticky/sticky.vue')['default']

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "papayaui",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "适用于uniapp的ui扩展库",
   "packageManager": "pnpm@8.6.0",
   "dependencies": {

package/utils/cos.ts

@@ -140,9 +140,9 @@ export interface GetObjectUrlParams {
   /** 操作方法，例如 GET，POST，DELETE，HEAD 等 HTTP 方法，默认为 GET */
   Method?: string
   /** 签名中要签入的请求参数，{key: 'val'} 的格式 */
-  Query?: string
+  Query?: object
   /** 签名中要签入的请求头部，{key: 'val'} 的格式 */
-  Headers?: string
+  Headers?: object
   /** 签名几秒后失效，默认为 900 秒 */
   Expires?: number
 }
@@ -249,6 +249,13 @@ export class PaCOS {
     const cosConfig = await this.getConfig()
     const Key = `${cosConfig.prefix}/${params?.Key ?? filePath.replace(/^.+\/(.+)$/, '$1')}`
     return new Promise<UploadFileResult>((resolve, reject) => {
+      console.log('uploadFile params', {
+        Bucket: cosConfig.bucket,
+        Region: cosConfig.region,
+        FilePath: filePath,
+        ...params,
+        Key,
+      })
       this.cos.uploadFile(
         {
           Bucket: cosConfig.bucket,
@@ -259,6 +266,7 @@ export class PaCOS {
         },
         (err: COSError | null, data: UploadFileResult) => {
           if (err) {
+            console.error(err)
             reject(err)
             return
           }