persagy-vant 0.0.28 → 0.0.29

package/es/rate/Rate.tsx

@@ -0,0 +1,293 @@
+import { computed, defineComponent, ref, type ExtractPropTypes } from 'vue';
+
+// Utils
+import {
+  addUnit,
+  truthProp,
+  numericProp,
+  preventDefault,
+  makeStringProp,
+  makeNumberProp,
+  makeNumericProp,
+  createNamespace,
+} from '../utils';
+
+// Composables
+import { useRect, useCustomFieldValue, useEventListener } from '@vant/use';
+import { useRefs } from '../composables/use-refs';
+import { useTouch } from '../composables/use-touch';
+
+// Components
+import { Icon } from '../icon';
+
+const [name, bem] = createNamespace('rate');
+
+type RateStatus = 'full' | 'half' | 'void';
+
+type RateListItem = {
+  value: number;
+  status: RateStatus;
+};
+
+function getRateStatus(
+  value: number,
+  index: number,
+  allowHalf: boolean,
+  readonly: boolean
+): RateListItem {
+  if (value >= index) {
+    return { status: 'full', value: 1 };
+  }
+
+  if (value + 0.5 >= index && allowHalf && !readonly) {
+    return { status: 'half', value: 0.5 };
+  }
+
+  if (value + 1 >= index && allowHalf && readonly) {
+    const cardinal = 10 ** 10;
+    return {
+      status: 'half',
+      value: Math.round((value - index + 1) * cardinal) / cardinal,
+    };
+  }
+
+  return { status: 'void', value: 0 };
+}
+
+export const rateProps = {
+  size: numericProp,
+  icon: makeStringProp('star'),
+  color: String,
+  count: makeNumericProp(5),
+  gutter: numericProp,
+  readonly: Boolean,
+  disabled: Boolean,
+  voidIcon: makeStringProp('star-o'),
+  allowHalf: Boolean,
+  voidColor: String,
+  touchable: truthProp,
+  iconPrefix: String,
+  modelValue: makeNumberProp(0),
+  disabledColor: String,
+};
+
+export type RateProps = ExtractPropTypes<typeof rateProps>;
+
+export default defineComponent({
+  name,
+
+  props: rateProps,
+
+  emits: ['change', 'update:modelValue'],
+
+  setup(props, { emit }) {
+    const touch = useTouch();
+    const [itemRefs, setItemRefs] = useRefs();
+    const groupRef = ref<Element>();
+
+    const untouchable = () =>
+      props.readonly || props.disabled || !props.touchable;
+
+    const list = computed<RateListItem[]>(() =>
+      Array(+props.count)
+        .fill('')
+        .map((_, i) =>
+          getRateStatus(
+            props.modelValue,
+            i + 1,
+            props.allowHalf,
+            props.readonly
+          )
+        )
+    );
+
+    let ranges: Array<{
+      left: number;
+      top: number;
+      height: number;
+      score: number;
+    }>;
+
+    let groupRefRect: DOMRect;
+    let minRectTop = Number.MAX_SAFE_INTEGER;
+    let maxRectTop = Number.MIN_SAFE_INTEGER;
+
+    const updateRanges = () => {
+      groupRefRect = useRect(groupRef);
+
+      const rects = itemRefs.value.map(useRect);
+
+      ranges = [];
+      rects.forEach((rect, index) => {
+        minRectTop = Math.min(rect.top, minRectTop);
+        maxRectTop = Math.max(rect.top, maxRectTop);
+
+        if (props.allowHalf) {
+          ranges.push(
+            {
+              score: index + 0.5,
+              left: rect.left,
+              top: rect.top,
+              height: rect.height,
+            },
+            {
+              score: index + 1,
+              left: rect.left + rect.width / 2,
+              top: rect.top,
+              height: rect.height,
+            }
+          );
+        } else {
+          ranges.push({
+            score: index + 1,
+            left: rect.left,
+            top: rect.top,
+            height: rect.height,
+          });
+        }
+      });
+    };
+
+    const getScoreByPosition = (x: number, y: number) => {
+      for (let i = ranges.length - 1; i > 0; i--) {
+        if (y >= groupRefRect.top && y <= groupRefRect.bottom) {
+          if (
+            x > ranges[i].left &&
+            y >= ranges[i].top &&
+            y <= ranges[i].top + ranges[i].height
+          ) {
+            return ranges[i].score;
+          }
+        } else {
+          const curTop = y < groupRefRect.top ? minRectTop : maxRectTop;
+
+          if (x > ranges[i].left && ranges[i].top === curTop) {
+            return ranges[i].score;
+          }
+        }
+      }
+      return props.allowHalf ? 0.5 : 1;
+    };
+
+    const select = (index: number) => {
+      if (!props.disabled && !props.readonly && index !== props.modelValue) {
+        emit('update:modelValue', index);
+        emit('change', index);
+      }
+    };
+
+    const onTouchStart = (event: TouchEvent) => {
+      if (untouchable()) {
+        return;
+      }
+
+      touch.start(event);
+      updateRanges();
+    };
+
+    const onTouchMove = (event: TouchEvent) => {
+      if (untouchable()) {
+        return;
+      }
+
+      touch.move(event);
+
+      if (touch.isHorizontal()) {
+        const { clientX, clientY } = event.touches[0];
+        preventDefault(event);
+        select(getScoreByPosition(clientX, clientY));
+      }
+    };
+
+    const renderStar = (item: RateListItem, index: number) => {
+      const {
+        icon,
+        size,
+        color,
+        count,
+        gutter,
+        voidIcon,
+        disabled,
+        voidColor,
+        allowHalf,
+        iconPrefix,
+        disabledColor,
+      } = props;
+      const score = index + 1;
+      const isFull = item.status === 'full';
+      const isVoid = item.status === 'void';
+      const renderHalf = allowHalf && item.value > 0 && item.value < 1;
+
+      let style;
+      if (gutter && score !== +count) {
+        style = {
+          paddingRight: addUnit(gutter),
+        };
+      }
+
+      const onClickItem = (event: MouseEvent) => {
+        updateRanges();
+        select(
+          allowHalf ? getScoreByPosition(event.clientX, event.clientY) : score
+        );
+      };
+
+      return (
+        <div
+          key={index}
+          ref={setItemRefs(index)}
+          role="radio"
+          style={style}
+          class={bem('item')}
+          tabindex={disabled ? undefined : 0}
+          aria-setsize={count}
+          aria-posinset={score}
+          aria-checked={!isVoid}
+          onClick={onClickItem}
+        >
+          <Icon
+            size={size}
+            name={isFull ? icon : voidIcon}
+            class={bem('icon', { disabled, full: isFull })}
+            color={disabled ? disabledColor : isFull ? color : voidColor}
+            classPrefix={iconPrefix}
+          />
+          {renderHalf && (
+            <Icon
+              size={size}
+              style={{ width: item.value + 'em' }}
+              name={isVoid ? voidIcon : icon}
+              class={bem('icon', ['half', { disabled, full: !isVoid }])}
+              color={disabled ? disabledColor : isVoid ? voidColor : color}
+              classPrefix={iconPrefix}
+            />
+          )}
+        </div>
+      );
+    };
+
+    useCustomFieldValue(() => props.modelValue);
+
+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+	  useEventListener('touchmove', onTouchMove as EventListener, {
+      target: groupRef,
+    });
+
+    return () => (
+      <div
+        ref={groupRef}
+        role="radiogroup"
+        class={bem({
+          readonly: props.readonly,
+          disabled: props.disabled,
+        })}
+        tabindex={props.disabled ? undefined : 0}
+        aria-disabled={props.disabled}
+        aria-readonly={props.readonly}
+        onTouchstartPassive={onTouchStart}
+      >
+        {list.value.map(renderStar)}
+      </div>
+    );
+  },
+});

package/es/rate/RateCell.tsx

@@ -0,0 +1,80 @@
+import { defineComponent, type ExtractPropTypes, type PropType } from 'vue';
+import {
+  createNamespace,
+  extend,
+  makeNumericProp,
+  makeStringProp,
+  truthProp,
+} from '../utils';
+import { Cell } from '../cell';
+import Rate, { rateProps } from './Rate';
+
+const [name, bem] = createNamespace('rate-cell');
+
+export type RateCellLayout = 'default' | 'between';
+
+const rateCellProps = extend({}, rateProps, {
+  size: makeNumericProp(22),
+  gutter: makeNumericProp(6),
+  title: makeStringProp('服务满意度'),
+  required: Boolean,
+  description: String,
+  showDescription: truthProp,
+  layout: {
+    type: String as PropType<RateCellLayout>,
+    default: 'default' as RateCellLayout,
+  },
+  border: truthProp,
+});
+
+export type RateCellProps = ExtractPropTypes<typeof rateCellProps>;
+
+export default defineComponent({
+  name,
+  props: rateCellProps,
+  emits: ['change', 'update:modelValue'],
+  setup(props, { emit }) {
+    const renderRate = () => (
+      <Rate
+        modelValue={props.modelValue}
+        size={props.size}
+        icon={props.icon}
+        color={props.color}
+        count={props.count}
+        gutter={props.gutter}
+        readonly={props.readonly}
+        disabled={props.disabled}
+        voidIcon={props.voidIcon}
+        allowHalf={props.allowHalf}
+        voidColor={props.voidColor}
+        touchable={props.touchable}
+        iconPrefix={props.iconPrefix}
+        disabledColor={props.disabledColor}
+        onChange={(value: number) => emit('change', value)}
+        onUpdate:modelValue={(value: number) => emit('update:modelValue', value)}
+      />
+    );
+
+    return () => (
+      <Cell
+        title={props.title}
+        required={props.required}
+        border={props.border}
+        class={bem(props.layout)}
+      >
+        {{
+          value: () => (
+            <div class={bem('content')}>
+              {renderRate()}
+              {props.layout === 'default' &&
+                props.showDescription &&
+                props.description && (
+                  <span class={bem('description')}>{props.description}</span>
+                )}
+            </div>
+          ),
+        }}
+      </Cell>
+    );
+  },
+});

package/es/rate/index.ts

@@ -0,0 +1,23 @@
+import { withInstall } from '../utils';
+import _Rate from './Rate';
+import _RateCell from './RateCell';
+
+export const Rate = withInstall(_Rate);
+export const RateCell = withInstall(_RateCell);
+
+const installRate = Rate.install;
+Rate.install = (app) => {
+  installRate(app);
+  app.use(RateCell);
+};
+
+export default Rate;
+export type { RateProps } from './Rate';
+export type { RateCellLayout, RateCellProps } from './RateCell';
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    VanRate: typeof Rate;
+    VanRateCell: typeof RateCell;
+  }
+}

package/es/rate/style/index.js

@@ -0,0 +1,9 @@
+import '../../style/base.css';
+import '../../badge/index.css';
+import '../../icon/index.css';
+import '../../checkbox-group/index.css';
+import '../../checkbox/index.css';
+import '../../radio-group/index.css';
+import '../../radio/index.css';
+import '../../cell/index.css';
+import '../index.css';

package/es/rate/style/less.js

@@ -0,0 +1,9 @@
+import '../../style/base.less';
+import '../../badge/index.less';
+import '../../icon/index.less';
+import '../../checkbox-group/index.less';
+import '../../checkbox/index.less';
+import '../../radio-group/index.less';
+import '../../radio/index.less';
+import '../../cell/index.less';
+import '../index.less';

package/es/row/Row.tsx

@@ -0,0 +1,114 @@
+import {
+  computed,
+  defineComponent,
+  type PropType,
+  type ComputedRef,
+  type InjectionKey,
+  type ExtractPropTypes,
+} from 'vue';
+import {
+  truthProp,
+  makeStringProp,
+  makeNumericProp,
+  createNamespace,
+} from '../utils';
+import { useChildren } from '@vant/use';
+
+const [name, bem] = createNamespace('row');
+
+export type RowSpaces = { left?: number; right: number }[];
+
+export type RowProvide = {
+  spaces: ComputedRef<RowSpaces>;
+};
+
+export const ROW_KEY: InjectionKey<RowProvide> = Symbol(name);
+
+export type RowAlign = 'top' | 'center' | 'bottom';
+
+export type RowJustify =
+  | 'start'
+  | 'end'
+  | 'center'
+  | 'space-around'
+  | 'space-between';
+
+const rowProps = {
+  tag: makeStringProp<keyof HTMLElementTagNameMap>('div'),
+  wrap: truthProp,
+  align: String as PropType<RowAlign>,
+  gutter: makeNumericProp(0),
+  justify: String as PropType<RowJustify>,
+};
+
+export type RowProps = ExtractPropTypes<typeof rowProps>;
+
+export default defineComponent({
+  name,
+
+  props: rowProps,
+
+  setup(props, { slots }) {
+    const { children, linkChildren } = useChildren(ROW_KEY);
+
+    const groups = computed(() => {
+      const groups: number[][] = [[]];
+
+      let totalSpan = 0;
+      children.forEach((child, index) => {
+        totalSpan += Number(child.span);
+
+        if (totalSpan > 24) {
+          groups.push([index]);
+          totalSpan -= 24;
+        } else {
+          groups[groups.length - 1].push(index);
+        }
+      });
+
+      return groups;
+    });
+
+    const spaces = computed(() => {
+      const gutter = Number(props.gutter);
+      const spaces: RowSpaces = [];
+
+      if (!gutter) {
+        return spaces;
+      }
+
+      groups.value.forEach((group) => {
+        const averagePadding = (gutter * (group.length - 1)) / group.length;
+
+        group.forEach((item, index) => {
+          if (index === 0) {
+            spaces.push({ right: averagePadding });
+          } else {
+            const left = gutter - spaces[item - 1].right;
+            const right = averagePadding - left;
+            spaces.push({ left, right });
+          }
+        });
+      });
+
+      return spaces;
+    });
+
+    linkChildren({ spaces });
+
+    return () => {
+      const { tag, wrap, align, justify } = props;
+      return (
+        <tag
+          class={bem({
+            [`align-${align}`]: align,
+            [`justify-${justify}`]: justify,
+            nowrap: !wrap,
+          })}
+        >
+          {slots.default?.()}
+        </tag>
+      );
+    };
+  },
+});

package/es/row/index.ts

@@ -0,0 +1,12 @@
+import { withInstall } from '../utils';
+import _Row from './Row';
+
+export const Row = withInstall(_Row);
+export default Row;
+export type { RowProps, RowAlign, RowJustify } from './Row';
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    VanRow: typeof Row;
+  }
+}

package/es/row/style/index.js

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

package/es/row/style/less.js

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