persagy-vant 0.0.28 → 0.0.29

package/es/slider/Slider.tsx

@@ -0,0 +1,347 @@
+import {
+  ref,
+  computed,
+  defineComponent,
+  type PropType,
+  type CSSProperties,
+  type ExtractPropTypes,
+} from 'vue';
+
+// Utils
+import {
+  clamp,
+  addUnit,
+  addNumber,
+  numericProp,
+  getSizeStyle,
+  preventDefault,
+  stopPropagation,
+  createNamespace,
+  makeNumericProp,
+} from '../utils';
+
+// Composables
+import { useRect, useCustomFieldValue, useEventListener } from '@vant/use';
+import { useTouch } from '../composables/use-touch';
+
+const [name, bem] = createNamespace('slider');
+
+type NumberRange = [number, number];
+
+type SliderValue = number | NumberRange;
+
+const sliderProps = {
+  min: makeNumericProp(0),
+  max: makeNumericProp(100),
+  step: makeNumericProp(1),
+  range: Boolean,
+  reverse: Boolean,
+  disabled: Boolean,
+  readonly: Boolean,
+  vertical: Boolean,
+  barHeight: numericProp,
+  buttonSize: numericProp,
+  activeColor: String,
+  inactiveColor: String,
+  modelValue: {
+    type: [Number, Array] as PropType<SliderValue>,
+    default: 0,
+  },
+};
+
+export type SliderProps = ExtractPropTypes<typeof sliderProps>;
+
+export default defineComponent({
+  name,
+
+  props: sliderProps,
+
+  emits: ['change', 'drag-end', 'drag-start', 'update:modelValue'],
+
+  setup(props, { emit, slots }) {
+    let buttonIndex: 0 | 1;
+    let current: SliderValue;
+    let startValue: SliderValue;
+
+    const root = ref<HTMLElement>();
+    const slider = ref<HTMLElement>();
+    const dragStatus = ref<'start' | 'dragging' | ''>();
+    const touch = useTouch();
+
+    const scope = computed(() => Number(props.max) - Number(props.min));
+
+    const wrapperStyle = computed(() => {
+      const crossAxis = props.vertical ? 'width' : 'height';
+      return {
+        background: props.inactiveColor,
+        [crossAxis]: addUnit(props.barHeight),
+      };
+    });
+
+    const isRange = (val: unknown): val is NumberRange =>
+      props.range && Array.isArray(val);
+
+    // 计算选中条的长度百分比
+    const calcMainAxis = () => {
+      const { modelValue, min } = props;
+      if (isRange(modelValue)) {
+        return `${((modelValue[1] - modelValue[0]) * 100) / scope.value}%`;
+      }
+      return `${((modelValue - Number(min)) * 100) / scope.value}%`;
+    };
+
+    // 计算选中条的开始位置的偏移量
+    const calcOffset = () => {
+      const { modelValue, min } = props;
+      if (isRange(modelValue)) {
+        return `${((modelValue[0] - Number(min)) * 100) / scope.value}%`;
+      }
+      return '0%';
+    };
+
+    const barStyle = computed(() => {
+      const mainAxis = props.vertical ? 'height' : 'width';
+      const style: CSSProperties = {
+        [mainAxis]: calcMainAxis(),
+        background: props.activeColor,
+      };
+
+      if (dragStatus.value) {
+        style.transition = 'none';
+      }
+
+      const getPositionKey = () => {
+        if (props.vertical) {
+          return props.reverse ? 'bottom' : 'top';
+        }
+        return props.reverse ? 'right' : 'left';
+      };
+
+      style[getPositionKey()] = calcOffset();
+
+      return style;
+    });
+
+    const format = (value: number) => {
+      const min = +props.min;
+      const max = +props.max;
+      const step = +props.step;
+
+      value = clamp(value, min, max);
+      const diff = Math.round((value - min) / step) * step;
+      return addNumber(min, diff);
+    };
+
+    const isSameValue = (newValue: SliderValue, oldValue: SliderValue) =>
+      JSON.stringify(newValue) === JSON.stringify(oldValue);
+
+    const handleRangeValue = (value: NumberRange) => {
+      // 设置默认值
+      const left = value[0] ?? Number(props.min);
+      const right = value[1] ?? Number(props.max);
+      // 处理两个滑块重叠之后的情况
+      return left > right ? [right, left] : [left, right];
+    };
+
+    const updateValue = (value: SliderValue, end?: boolean) => {
+      if (isRange(value)) {
+        value = handleRangeValue(value).map(format) as NumberRange;
+      } else {
+        value = format(value);
+      }
+
+      if (!isSameValue(value, props.modelValue)) {
+        emit('update:modelValue', value);
+      }
+
+      if (end && !isSameValue(value, startValue)) {
+        emit('change', value);
+      }
+    };
+
+    const onClick = (event: MouseEvent) => {
+      event.stopPropagation();
+
+      if (props.disabled || props.readonly) {
+        return;
+      }
+
+      const { min, reverse, vertical, modelValue } = props;
+      const rect = useRect(root);
+
+      const getDelta = () => {
+        if (vertical) {
+          if (reverse) {
+            return rect.bottom - event.clientY;
+          }
+          return event.clientY - rect.top;
+        }
+        if (reverse) {
+          return rect.right - event.clientX;
+        }
+        return event.clientX - rect.left;
+      };
+
+      const total = vertical ? rect.height : rect.width;
+      const value = Number(min) + (getDelta() / total) * scope.value;
+
+      if (isRange(modelValue)) {
+        const [left, right] = modelValue;
+        const middle = (left + right) / 2;
+
+        if (value <= middle) {
+          updateValue([value, right], true);
+        } else {
+          updateValue([left, value], true);
+        }
+      } else {
+        updateValue(value, true);
+      }
+    };
+
+    const onTouchStart = (event: TouchEvent) => {
+      if (props.disabled || props.readonly) {
+        return;
+      }
+
+      touch.start(event);
+      current = props.modelValue;
+
+      if (isRange(current)) {
+        startValue = current.map(format) as NumberRange;
+      } else {
+        startValue = format(current);
+      }
+
+      dragStatus.value = 'start';
+    };
+
+    const onTouchMove = (event: TouchEvent) => {
+      if (props.disabled || props.readonly) {
+        return;
+      }
+
+      if (dragStatus.value === 'start') {
+        emit('drag-start', event);
+      }
+
+      preventDefault(event, true);
+      touch.move(event);
+      dragStatus.value = 'dragging';
+
+      const rect = useRect(root);
+      const delta = props.vertical ? touch.deltaY.value : touch.deltaX.value;
+      const total = props.vertical ? rect.height : rect.width;
+
+      let diff = (delta / total) * scope.value;
+      if (props.reverse) {
+        diff = -diff;
+      }
+
+      if (isRange(startValue)) {
+        const index = props.reverse ? 1 - buttonIndex : buttonIndex;
+        (current as NumberRange)[index] = startValue[index] + diff;
+      } else {
+        current = startValue + diff;
+      }
+      updateValue(current);
+    };
+
+    const onTouchEnd = (event: TouchEvent) => {
+      if (props.disabled || props.readonly) {
+        return;
+      }
+
+      if (dragStatus.value === 'dragging') {
+        updateValue(current, true);
+        emit('drag-end', event);
+      }
+
+      dragStatus.value = '';
+    };
+
+    const getButtonClassName = (index?: 0 | 1) => {
+      if (typeof index === 'number') {
+        const position = ['left', 'right'];
+        return bem(`button-wrapper`, position[index]);
+      }
+      return bem('button-wrapper', props.reverse ? 'left' : 'right');
+    };
+
+    const renderButtonContent = (value: number, index?: 0 | 1) => {
+      if (typeof index === 'number') {
+        const slot = slots[index === 0 ? 'left-button' : 'right-button'];
+        if (slot) {
+          return slot({ value });
+        }
+      }
+
+      if (slots.button) {
+        return slots.button({ value });
+      }
+
+      return (
+        <div class={bem('button')} style={getSizeStyle(props.buttonSize)} />
+      );
+    };
+
+    const renderButton = (index?: 0 | 1) => {
+      const current =
+        typeof index === 'number'
+          ? (props.modelValue as NumberRange)[index]
+          : (props.modelValue as number);
+
+      return (
+        <div
+          ref={slider}
+          role="slider"
+          class={getButtonClassName(index)}
+          tabindex={props.disabled ? undefined : 0}
+          aria-valuemin={props.min}
+          aria-valuenow={current}
+          aria-valuemax={props.max}
+          aria-disabled={props.disabled || undefined}
+          aria-readonly={props.readonly || undefined}
+          aria-orientation={props.vertical ? 'vertical' : 'horizontal'}
+          onTouchstartPassive={(event) => {
+            if (typeof index === 'number') {
+              // save index of current button
+              buttonIndex = index;
+            }
+            onTouchStart(event);
+          }}
+          onTouchend={onTouchEnd}
+          onTouchcancel={onTouchEnd}
+          onClick={stopPropagation}
+        >
+          {renderButtonContent(current, index)}
+        </div>
+      );
+    };
+
+    // format initial value
+    updateValue(props.modelValue);
+    useCustomFieldValue(() => props.modelValue);
+
+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+	  useEventListener('touchmove', onTouchMove as EventListener, {
+      target: slider,
+    });
+
+    return () => (
+      <div
+        ref={root}
+        style={wrapperStyle.value}
+        class={bem({
+          vertical: props.vertical,
+          disabled: props.disabled,
+        })}
+        onClick={onClick}
+      >
+        <div class={bem('bar')} style={barStyle.value}>
+          {props.range ? [renderButton(0), renderButton(1)] : renderButton()}
+        </div>
+      </div>
+    );
+  },
+});

package/es/slider/index.ts

@@ -0,0 +1,12 @@
+import { withInstall } from '../utils';
+import _Slider from './Slider';
+
+export const Slider = withInstall(_Slider);
+export default Slider;
+export type { SliderProps } from './Slider';
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    VanSlider: typeof Slider;
+  }
+}

package/es/slider/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/base.css';
+import '../index.css';

package/es/slider/style/less.js

@@ -0,0 +1,2 @@
+import '../../style/base.less';
+import '../index.less';

package/es/space/README.md

@@ -0,0 +1,130 @@
+# Space
+
+### Intro
+
+Set the spacing between elements, requires `vant >= v3.6.0`.
+
+### Install
+
+Register component globally via `app.use`, refer to [Component Registration](#/en-US/advanced-usage#zu-jian-zhu-ce) for more registration ways.
+
+```js
+import { createApp } from 'vue';
+import { Space } from 'vant';
+
+const app = createApp();
+app.use(Space);
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<van-space>
+  <van-button type="primary">Button</van-button>
+  <van-button type="primary">Button</van-button>
+  <van-button type="primary">Button</van-button>
+  <van-button type="primary">Button</van-button>
+</van-space>
+```
+
+### Vertical
+
+```html
+<van-space direction="vertical" fill>
+  <van-button type="primary" block>Button</van-button>
+  <van-button type="primary" block>Button</van-button>
+  <van-button type="primary" block>Button</van-button>
+</van-space>
+```
+
+### Custom Size
+
+```html
+<!-- 20px -->
+<van-space :size="20">
+  <van-button type="primary">Button</van-button>
+  <van-button type="primary">Button</van-button>
+  <van-button type="primary">Button</van-button>
+</van-space>
+
+<!-- 2rem -->
+<van-space size="2rem">
+  <van-button type="primary">Button</van-button>
+  <van-button type="primary">Button</van-button>
+  <van-button type="primary">Button</van-button>
+</van-space>
+```
+
+### Alignment
+
+```html
+<van-radio-group
+  v-model="align"
+  direction="horizontal"
+  style="margin-bottom: 16px"
+>
+  <van-radio name="start">start</van-radio>
+  <van-radio name="center">center</van-radio>
+  <van-radio name="end">end</van-radio>
+  <van-radio name="baseline">baseline</van-radio>
+</van-radio-group>
+
+<van-space :align="align" style="padding: 16px; background: #f3f2f5">
+  <van-button type="primary">{{ align }}</van-button>
+  <div style="padding: 40px 20px; background: #fff">Block</div>
+</van-space>
+```
+
+```js
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const align = ref('center');
+    return { align };
+  },
+};
+```
+
+### Auto Wrap
+
+```html
+<van-space wrap>
+  <van-button type="primary" block>Button</van-button>
+  <van-button type="primary" block>Button</van-button>
+  <van-button type="primary" block>Button</van-button>
+  <van-button type="primary" block>Button</van-button>
+  <van-button type="primary" block>Button</van-button>
+  <van-button type="primary" block>Button</van-button>
+  <van-button type="primary" block>Button</van-button>
+  <van-button type="primary" block>Button</van-button>
+</van-space>
+```
+
+## API
+
+### Props
+
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| direction | Spacing direction | _vertical \| horizontal_ | `horizontal` |
+| size | Spacing size, such as `20px` `2em`. The default unit is px, supports using array to set horizontal and vertical spacing | _number \| string \| number[] \| string[]_ | `8px` |
+| align | Spacing alignment | _start \| end \| center \| baseline_ | - |
+| wrap | Whether to wrap automatically, only for horizontal alignment | _boolean_ | `false` |
+| fill | Whether to render Space as a block element and fill the parent element | _boolean_ | `false` |
+
+### Slots
+
+| Name    | Description  |
+| ------- | ------------ |
+| default | Default slot |
+
+### Types
+
+The component exports the following type definitions:
+
+```ts
+import type { SpaceProps, SpaceSize, SpaceAlign } from 'vant';
+```

package/es/space/README.zh-CN.md

@@ -0,0 +1,140 @@
+# 间距 Space
+
+### 介绍
+
+设置元素之间的间距，从 `v3.6.0` 版本开始支持。
+
+### 引入
+
+通过以下方式来全局注册组件，更多注册方式请参考[组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce)。
+
+```js
+import { createApp } from 'vue';
+import { Space } from 'vant';
+
+const app = createApp();
+app.use(Space);
+```
+
+## 代码演示
+
+### 基础用法
+
+Space 组件会在各个子组件之间设置一定的间距，默认间距为 `8px`。
+
+```html
+<van-space>
+  <van-button type="primary">按钮</van-button>
+  <van-button type="primary">按钮</van-button>
+  <van-button type="primary">按钮</van-button>
+  <van-button type="primary">按钮</van-button>
+</van-space>
+```
+
+### 垂直排列
+
+将 `direction` 属性设置为 `vertical`，可以设置垂直方向排列的间距。
+
+```html
+<van-space direction="vertical" fill>
+  <van-button type="primary" block>按钮</van-button>
+  <van-button type="primary" block>按钮</van-button>
+  <van-button type="primary" block>按钮</van-button>
+</van-space>
+```
+
+### 自定义间距
+
+通过调整 `size` 的值来控制间距的大小。传入 `number` 类型时，会默认使用 `px` 单位；也可以传入 `string` 类型，比如 `2rem` 或 `5vw` 等带有单位的值。
+
+```html
+<!-- 20px -->
+<van-space :size="20">
+  <van-button type="primary">按钮</van-button>
+  <van-button type="primary">按钮</van-button>
+  <van-button type="primary">按钮</van-button>
+</van-space>
+
+<!-- 2rem -->
+<van-space size="2rem">
+  <van-button type="primary">按钮</van-button>
+  <van-button type="primary">按钮</van-button>
+  <van-button type="primary">按钮</van-button>
+</van-space>
+```
+
+### 对齐方式
+
+通过调整 `align` 的值来设置子元素的对齐方式, 可选值为 `start`, `center` ,`end` ,`baseline`，在水平模式下的默认值为 `center`。
+
+```html
+<van-radio-group
+  v-model="align"
+  direction="horizontal"
+  style="margin-bottom: 16px"
+>
+  <van-radio name="start">start</van-radio>
+  <van-radio name="center">center</van-radio>
+  <van-radio name="end">end</van-radio>
+  <van-radio name="baseline">baseline</van-radio>
+</van-radio-group>
+
+<van-space :align="align" style="padding: 16px; background: #f3f2f5">
+  <van-button type="primary">{{ align }}</van-button>
+  <div style="padding: 40px 20px; background: #fff">Block</div>
+</van-space>
+```
+
+```js
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const align = ref('center');
+    return { align };
+  },
+};
+```
+
+### 自动换行
+
+在水平模式下, 通过 `wrap` 属性来控制子元素是否自动换行。
+
+```html
+<van-space wrap>
+  <van-button type="primary" block>按钮</van-button>
+  <van-button type="primary" block>按钮</van-button>
+  <van-button type="primary" block>按钮</van-button>
+  <van-button type="primary" block>按钮</van-button>
+  <van-button type="primary" block>按钮</van-button>
+  <van-button type="primary" block>按钮</van-button>
+  <van-button type="primary" block>按钮</van-button>
+  <van-button type="primary" block>按钮</van-button>
+</van-space>
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| direction | 间距方向 | _vertical \| horizontal_ | `horizontal` |
+| size | 间距大小，如 `20px` `2em`，默认单位为 `px`，支持数组形式来分别设置横向和纵向间距 | _number \| string \| number[] \| string[]_ | `8px` |
+| align | 设置子元素的对齐方式 | _start \| end \| center \| baseline_ | - |
+| wrap | 是否自动换行，仅适用于水平方向排列 | _boolean_ | `false` |
+| fill | 是否让 Space 变为一个块级元素，填充整个父元素 | _boolean_ | `false` |
+
+### Slots
+
+| 名称    | 说明         |
+| ------- | ------------ |
+| default | 间距组件内容 |
+
+### 类型定义
+
+组件导出以下类型定义：
+
+```js
+import type { SpaceProps, SpaceSize, SpaceAlign } from 'vant';
+```