papayaui 0.2.4 → 0.2.6

package/components/cascader/cascader.vue

@@ -18,7 +18,7 @@
     @closed="emit('closed')"
   >
     <view :class="ns.b('content')">
-      <Search v-if="showSearch" v-model="searchText" :class="ns.b('search')" />
+      <Search v-if="showSearch" v-model="searchText" v-bind="searchProps" :class="ns.b('search')" />
       <view v-if="show" :class="ns.b('tab')">
         <Tabs v-model="tabActive" :tabs="tabList" label-key="name" scrollable shrink />
       </view>

package/components/cascader/props.ts

@@ -3,6 +3,7 @@ import type { TreeNode, UseTreeFieldNames } from '../../core/useTree'
 import { defaultFieldNames } from '../../core/useTree'
 import { isArray, isObject } from '../../utils'
 import { bottomPopupEmits, bottomPopupProps } from '../bottom-popup/props'
+import type { SearchProps } from '../search'
 
 export interface CascaderNode<T = any> {
   props: T
@@ -50,6 +51,13 @@ export const cascaderProps = {
    * 是否显示搜索
    */
   showSearch: Boolean,
+  /**
+   * 搜索框的props
+   */
+  searchProps: {
+    type: Object as PropType<Partial<SearchProps>>,
+    default: () => ({}),
+  },
   /**
    * 动态获取下一级节点数据
    */

package/components/cell/cell.vue

@@ -22,11 +22,11 @@
         <view v-if="label" :class="ns.e('label')">{{ label }}</view>
       </template>
     </view>
-    <view :class="[ns.e('value'), valueClass]">
+    <view :class="[ns.e('value'), valueClass]" :style="{ textAlign: valueAlign }">
       <slot v-if="$slots.default" />
       <text v-else :selectable="selectable" :user-select="selectable">{{ value }}</text>
 
-      <view v-if="errorMessage" :class="ns.e('error-message')" :style="{ textAlign: valueAlign }">
+      <view v-if="errorMessage" :class="ns.e('error-message')">
         {{ errorMessage }}
       </view>
     </view>

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/picker-popup/picker-popup.vue

@@ -20,9 +20,11 @@
     @confirm="onOk"
   >
     <view :class="ns.e('content')">
+      <slot name="before" />
       <Search
         v-if="showSearch"
         v-model="searchText"
+        v-bind="searchProps"
         :class="ns.e('search')"
         @change="debounceSearchChange"
       />
@@ -56,7 +58,7 @@
         <ButtonComponent
           v-if="showView.create"
           :class="ns.e('create-button')"
-          :type="props.multiple ? 'default' : 'primary'"
+          :type="showView.confirm ? 'default' : 'primary'"
           ellipsis
           block
           @click="onCreate"
@@ -138,7 +140,7 @@ const filterOptions = computed(() => {
 
 const showView = computed(() => {
   const create = props.allowCreate && !!searchText.value
-  const confirm = props.multiple
+  const confirm = props.multiple || props.showConfirm
   return {
     footer: create || confirm,
     create,
@@ -225,7 +227,7 @@ const onCreate = async () => {
 }
 
 const onSelect = async (value: OptionValue) => {
-  if (_onSelect(value) && !multiple.value) {
+  if (_onSelect(value) && !showView.value.confirm) {
     onOk()
   }
 }

package/components/picker-popup/props.ts

@@ -2,6 +2,7 @@ import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'
 import type { UseListProps } from '../../core/useList'
 import { isArray, isNumber, isObject, isString } from '../../utils'
 import { bottomPopupEmits, bottomPopupProps } from '../bottom-popup/props'
+import type { SearchProps } from '../search'
 
 export type Option = any
 export type OptionValue = number | string
@@ -37,6 +38,13 @@ export const pickerPopupProps = {
    * 是否显示搜索
    */
   showSearch: Boolean,
+  /**
+   * 搜索框的props
+   */
+  searchProps: {
+    type: Object as PropType<Partial<SearchProps>>,
+    default: () => ({}),
+  },
   /**
    * 是否多选
    */
@@ -84,6 +92,10 @@ export const pickerPopupProps = {
    * 确定后是否重置数据
    */
   resetAfterConfirm: Boolean,
+  /**
+   * 是否显示确认按钮，多选时强制开启
+   */
+  showConfirm: Boolean,
   /**
    * 是否允许用户创建新条目，需配合 showSearch 使用
    */

package/components/popup/popup.scss

@@ -3,7 +3,7 @@
   &__content {
     position: relative;
     max-width: _var(popup-max-width, 100%);
-    background-color: #fff;
+    background-color: _var(popup-background, #fff);
     border-radius: _var(popup-radius, 0);
   }
 

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

@@ -10,7 +10,8 @@
     @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>
   </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/textarea/textarea.scss

@@ -33,7 +33,7 @@
   }
 
   &--auto-height {
-    line-height: _var(textarea-line-height, _var(textarea-font-size));
+    line-height: _var(textarea-line-height, _var(textarea-font-size, 14px));
   }
 
   &--disabled {

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/cell/demo-1.vue

@@ -1,3 +1,4 @@
 <template>
   <pa-cell title="单元格" value="内容" />
+  <pa-cell title="单元格" label="描述信息" value="内容" />
 </template>

package/demos/cell/demo-2.vue

@@ -1,6 +1,6 @@
 <template>
   <pa-cell-group inset>
     <pa-cell title="单元格" value="内容" />
-    <pa-cell title="单元格" value="内容" />
+    <pa-cell title="单元格" label="描述信息" value="内容" />
   </pa-cell-group>
 </template>

package/demos/cell/demo-7.vue

@@ -4,4 +4,5 @@
     value="内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容"
     center
   />
+  <pa-cell title="单元格" label="描述信息" value="内容" center />
 </template>

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.4",
+  "version": "0.2.6",
   "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
           }