persagy-vant 0.0.29 → 0.0.30

package/lib/datetime-picker/utils.ts

@@ -1,76 +0,0 @@
-import { extend } from '../utils';
-import { pickerSharedProps } from '../picker/Picker';
-import type { PropType } from 'vue';
-import type { PickerInstance } from '../picker';
-import type { DatetimePickerColumnType } from './types';
-
-export const sharedProps = extend({}, pickerSharedProps, {
-  filter: Function as PropType<(type: string, values: string[]) => string[]>,
-  columnsOrder: Array as PropType<DatetimePickerColumnType[]>,
-  formatter: {
-    type: Function as PropType<(type: string, value: string) => string>,
-    default: (type: string, value: string) => value,
-  },
-});
-
-export const pickerInheritKeys = Object.keys(pickerSharedProps) as Array<
-  keyof typeof pickerSharedProps
->;
-
-export function times<T>(n: number, iteratee: (index: number) => T) {
-  if (n < 0) {
-    return [];
-  }
-
-  const result: T[] = Array(n);
-
-  let index = -1;
-  while (++index < n) {
-    result[index] = iteratee(index);
-  }
-
-  return result;
-}
-
-export function getTrueValue(value: string | undefined): number {
-  if (!value) {
-    return 0;
-  }
-
-  while (Number.isNaN(parseInt(value, 10))) {
-    if (value.length > 1) {
-      value = value.slice(1);
-    } else {
-      return 0;
-    }
-  }
-
-  return parseInt(value, 10);
-}
-
-export const getMonthEndDay = (year: number, month: number): number =>
-  32 - new Date(year, month - 1, 32).getDate();
-
-// https://github.com/vant-ui/vant/issues/10013
-export const proxyPickerMethods = (
-  picker: PickerInstance,
-  callback: () => void
-) => {
-  const methods = [
-    'setValues',
-    'setIndexes',
-    'setColumnIndex',
-    'setColumnValue',
-  ];
-  return new Proxy(picker, {
-    get: (target, prop: keyof PickerInstance) => {
-      if (methods.includes(prop)) {
-        return (...args: unknown[]) => {
-          target[prop](...args);
-          callback();
-        };
-      }
-      return target[prop];
-    },
-  });
-};

package/lib/dialog/Dialog.tsx

@@ -1,333 +0,0 @@
-import {
-  ref,
-  reactive,
-  withKeys,
-  defineComponent,
-  type PropType,
-  type ExtractPropTypes,
-} from 'vue';
-
-// Utils
-import {
-  noop,
-  pick,
-  extend,
-  addUnit,
-  truthProp,
-  isFunction,
-  BORDER_TOP,
-  BORDER_LEFT,
-  unknownProp,
-  numericProp,
-  makeStringProp,
-  callInterceptor,
-  createNamespace,
-  type ComponentInstance,
-} from '../utils';
-import { popupSharedProps, popupSharedPropKeys } from '../popup/shared';
-
-// Components
-import { Popup } from '../popup';
-import { Button } from '../button';
-import { Field } from '../field';
-import { ActionBar } from '../action-bar';
-import { ActionBarButton } from '../action-bar-button';
-
-// Types
-import type {
-  DialogTheme,
-  DialogAction,
-  DialogMessage,
-  DialogMessageAlign,
-} from './types';
-
-const [name, bem, t] = createNamespace('dialog');
-
-const dialogProps = extend({}, popupSharedProps, {
-  title: String,
-  theme: String as PropType<DialogTheme>,
-  width: numericProp,
-  message: [String, Function] as PropType<DialogMessage>,
-  callback: Function as PropType<(action?: DialogAction) => void>,
-  allowHtml: Boolean,
-  className: unknownProp,
-  transition: makeStringProp('van-dialog-bounce'),
-  messageAlign: String as PropType<DialogMessageAlign>,
-  showInput: Boolean,
-  inputValue: makeStringProp(''),
-  inputPlaceholder: makeStringProp('请输入'),
-  inputAutofocus: Boolean,
-  closeOnPopstate: truthProp,
-  showCancelButton: Boolean,
-  cancelButtonText: String,
-  cancelButtonColor: String,
-  cancelButtonDisabled: Boolean,
-  showThirdButton: Boolean,
-  thirdButtonText: String,
-  thirdButtonColor: String,
-  thirdButtonDisabled: Boolean,
-  confirmButtonText: String,
-  confirmButtonColor: String,
-  confirmButtonDisabled: Boolean,
-  showConfirmButton: truthProp,
-  closeOnClickOverlay: Boolean,
-});
-
-export type DialogProps = ExtractPropTypes<typeof dialogProps>;
-
-const popupInheritKeys = [
-  ...popupSharedPropKeys,
-  'transition',
-  'closeOnPopstate',
-] as const;
-
-export default defineComponent({
-  name,
-
-  props: dialogProps,
-
-  emits: [
-    'confirm',
-    'cancel',
-    'third',
-    'keydown',
-    'input',
-    'update:show',
-    'update:inputValue',
-  ],
-
-  setup(props, { emit, slots }) {
-    const root = ref<ComponentInstance>();
-    const loading = reactive({
-      confirm: false,
-      cancel: false,
-      third: false,
-    });
-
-    const updateShow = (value: boolean) => emit('update:show', value);
-
-    const close = (action: DialogAction) => {
-      updateShow(false);
-      props.callback?.(action);
-    };
-
-    const getActionHandler = (action: DialogAction) => () => {
-      // should not trigger close event when hidden
-      if (!props.show) {
-        return;
-      }
-
-      emit(action);
-
-      if (props.beforeClose) {
-        loading[action] = true;
-        callInterceptor(props.beforeClose, {
-          args: [action],
-          done() {
-            close(action);
-            loading[action] = false;
-          },
-          canceled() {
-            loading[action] = false;
-          },
-        });
-      } else {
-        close(action);
-      }
-    };
-
-    const onCancel = getActionHandler('cancel');
-    const onConfirm = getActionHandler('confirm');
-    const onThird = getActionHandler('third');
-    const onKeydown = withKeys(
-      (event: KeyboardEvent) => {
-        // skip keyboard events of child elements
-        if (event.target !== root.value?.popupRef?.value) {
-          return;
-        }
-
-        const onEventType: Record<string, () => void> = {
-          Enter: props.showConfirmButton ? onConfirm : noop,
-          Escape: props.showCancelButton ? onCancel : noop,
-        };
-
-        onEventType[event.key]();
-        emit('keydown', event);
-      },
-      ['enter', 'esc']
-    );
-
-    const renderTitle = () => {
-      const title = slots.title ? slots.title() : props.title;
-      if (title) {
-        return (
-          <div
-            class={bem('header', {
-              isolated: !props.message && !props.showInput && !slots.default,
-            })}
-          >
-            {title}
-          </div>
-        );
-      }
-    };
-
-    const renderMessage = (hasTitle: boolean) => {
-      const { message, allowHtml, messageAlign } = props;
-      const classNames = bem('message', {
-        'has-title': hasTitle,
-        [messageAlign as string]: messageAlign,
-      });
-
-      const content = isFunction(message) ? message() : message;
-
-      if (allowHtml && typeof content === 'string') {
-        return <div class={classNames} innerHTML={content} />;
-      }
-
-      return <div class={classNames}>{content}</div>;
-    };
-
-    const renderInput = () => {
-      if (!props.showInput) {
-        return;
-      }
-
-      const onInput = (value: string) => {
-        emit('update:inputValue', value);
-        emit('input', value);
-      };
-
-      return (
-        <Field
-          size="normal"
-          border={false}
-          class={bem('input')}
-          modelValue={props.inputValue}
-          placeholder={props.inputPlaceholder}
-          autofocus={props.inputAutofocus}
-          onUpdate:modelValue={onInput}
-        />
-      );
-    };
-
-    const renderContent = () => {
-      const { title, message, allowHtml, showInput } = props;
-      if (slots.default || message || showInput) {
-        const hasTitle = !!(title || slots.title);
-        return (
-          <div
-            // add key to force re-render
-            // see: https://github.com/vant-ui/vant/issues/7963
-            key={allowHtml ? 1 : 0}
-            class={bem('content', {
-              isolated: !hasTitle,
-              'with-input': showInput,
-            })}
-          >
-            {slots.default ? slots.default() : message && renderMessage(hasTitle)}
-            {renderInput()}
-          </div>
-        );
-      }
-    };
-
-    const renderButtons = () => (
-      <div class={[BORDER_TOP, bem('footer', { vertical: props.showThirdButton })]}>
-        {props.showCancelButton && (
-          <Button
-            size="large"
-            text={props.cancelButtonText || t('cancel')}
-            class={bem('cancel')}
-            style={{ color: props.cancelButtonColor }}
-            loading={loading.cancel}
-            disabled={props.cancelButtonDisabled}
-            onClick={onCancel}
-          />
-        )}
-        {props.showConfirmButton && (
-          <Button
-            size="large"
-            text={props.confirmButtonText || t('confirm')}
-            class={[
-              bem('confirm'),
-              { [BORDER_LEFT]: props.showCancelButton && !props.showThirdButton },
-            ]}
-            style={{ color: props.confirmButtonColor }}
-            loading={loading.confirm}
-            disabled={props.confirmButtonDisabled}
-            onClick={onConfirm}
-          />
-        )}
-        {props.showThirdButton && (
-          <Button
-            size="large"
-            text={props.thirdButtonText}
-            class={bem('third')}
-            style={{ color: props.thirdButtonColor }}
-            loading={loading.third}
-            disabled={props.thirdButtonDisabled}
-            onClick={onThird}
-          />
-        )}
-      </div>
-    );
-
-    const renderRoundButtons = () => (
-      <ActionBar class={bem('footer')}>
-        {props.showCancelButton && (
-          <ActionBarButton
-            type="warning"
-            text={props.cancelButtonText || t('cancel')}
-            class={bem('cancel')}
-            color={props.cancelButtonColor}
-            loading={loading.cancel}
-            disabled={props.cancelButtonDisabled}
-            onClick={onCancel}
-          />
-        )}
-        {props.showConfirmButton && (
-          <ActionBarButton
-            type="primary"
-            text={props.confirmButtonText || t('confirm')}
-            class={bem('confirm')}
-            color={props.confirmButtonColor}
-            loading={loading.confirm}
-            disabled={props.confirmButtonDisabled}
-            onClick={onConfirm}
-          />
-        )}
-      </ActionBar>
-    );
-
-    const renderFooter = () => {
-      if (slots.footer) {
-        return slots.footer();
-      }
-      return props.theme === 'round-button'
-        ? renderRoundButtons()
-        : renderButtons();
-    };
-
-    return () => {
-      const { width, title, theme, message, className } = props;
-      return (
-        <Popup
-          ref={root}
-          role="dialog"
-          class={[bem([theme]), className]}
-          style={{ width: addUnit(width) }}
-          tabindex={0}
-          aria-labelledby={title || message}
-          onKeydown={onKeydown}
-          onUpdate:show={updateShow}
-          {...pick(props, popupInheritKeys)}
-        >
-          {renderTitle()}
-          {renderContent()}
-          {renderFooter()}
-        </Popup>
-      );
-    };
-  },
-});

package/lib/dialog/README.md

@@ -1,270 +0,0 @@
-# Dialog
-
-### Intro
-
-A modal box pops up on the page, which is often used for message prompts, message confirmation, or to complete specific interactive operations in the current page. It supports two methods: function call and component call.
-
-### 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 { Dialog } from 'vant';
-
-const app = createApp();
-app.use(Dialog);
-```
-
-## Usage
-
-### Alert dialog
-
-Used to prompt for some messages, only including one confirm button.
-
-```js
-Dialog.alert({
-  title: 'Title',
-  message: 'Content',
-}).then(() => {
-  // on close
-});
-
-Dialog.alert({
-  message: 'Content',
-}).then(() => {
-  // on close
-});
-```
-
-### Confirm dialog
-
-Used to confirm some messages, including a confirm button and a cancel button.
-
-```js
-Dialog.confirm({
-  title: 'Title',
-  message: 'Content',
-})
-  .then(() => {
-    // on confirm
-  })
-  .catch(() => {
-    // on cancel
-  });
-```
-
-### Round Button Style
-
-Use round button style.
-
-```js
-Dialog.alert({
-  title: 'Title',
-  message: 'Content',
-  theme: 'round-button',
-}).then(() => {
-  // on close
-});
-
-Dialog.alert({
-  message: 'Content',
-  theme: 'round-button',
-}).then(() => {
-  // on close
-});
-```
-
-### Async Close
-
-```js
-const beforeClose = (action) =>
-  new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(action === 'confirm');
-    }, 1000);
-  });
-
-Dialog.confirm({
-  title: 'Title',
-  message: 'Content',
-  beforeClose,
-});
-```
-
-### Global Method
-
-After registering the Dialog component through `app.use`, the `$dialog` method will be automatically mounted on all subComponents of the app.
-
-```js
-export default {
-  mounted() {
-    this.$dialog.alert({
-      message: 'Content',
-    });
-  },
-};
-```
-
-### Advanced Usage
-
-If you need to render vue components within a dialog, you can use dialog component.
-
-```html
-<van-dialog v-model:show="show" title="Title" show-cancel-button>
-  <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />
-</van-dialog>
-```
-
-```js
-import { ref } from 'vue';
-
-export default {
-  setup() {
-    const show = ref(false);
-    return { show };
-  },
-};
-```
-
-## API
-
-### Methods
-
-| Name | Description | Attribute | Return value |
-| --- | --- | --- | --- |
-| Dialog | Show dialog | _options: DialogOptions_ | `Promise<void>` |
-| Dialog.alert | Show alert dialog | _options: DialogOptions_ | `Promise<void>` |
-| Dialog.confirm | Show confirm dialog | _options: DialogOptions_ | `Promise<void>` |
-| Dialog.setDefaultOptions | Set default options of all dialogs | _options: DialogOptions_ | `void` |
-| Dialog.resetDefaultOptions | Reset default options of all dialogs | - | `void` |
-| Dialog.close | Close dialog | - | `void` |
-
-### DialogOptions
-
-| Attribute | Description | Type | Default |
-| --- | --- | --- | --- |
-| title | Title | _string_ | - |
-| width | Dialog width | _number \| string_ | `320px` |
-| message | Message | _string \| () => JSX.ELement_ | - |
-| messageAlign | Message text align, can be set to `left` `right` | _string_ | `center` |
-| theme | Theme style, can be set to `round-button` | _string_ | `default` |
-| className | Custom className | _string \| Array \| object_ | - |
-| showConfirmButton | Whether to show confirm button | _boolean_ | `true` |
-| showCancelButton | Whether to show cancel button | _boolean_ | `false` |
-| showInput | Whether to show the input field style | _boolean_ | `false` |
-| inputValue | Current input value | _string_ | `''` |
-| inputPlaceholder | Input placeholder text | _string_ | `Please enter` |
-| inputAutofocus | Whether to autofocus the input field | _boolean_ | `false` |
-| cancelButtonText | Cancel button text | _string_ | `Cancel` |
-| cancelButtonColor | Cancel button color | _string_ | `black` |
-| confirmButtonDisabled `v3.5.0` | Whether to disable cancel button | _boolean_ | `false` |
-| confirmButtonText | Confirm button text | _string_ | `Confirm` |
-| confirmButtonColor | Confirm button color | _string_ | `var(--van-primary-color)` |
-| confirmButtonDisabled `v3.5.0` | Whether to disable confirm button | _boolean_ | `false` |
-| overlay | Whether to show overlay | _boolean_ | `true` |
-| overlayClass | Custom overlay class | _string \| Array \| object_ | - |
-| overlayStyle | Custom overlay style | _object_ | - |
-| closeOnPopstate | Whether to close when popstate | _boolean_ | `true` |
-| closeOnClickOverlay | Whether to close when overlay is clicked | _boolean_ | `false` |
-| lockScroll | Whether to lock body scroll | _boolean_ | `true` |
-| allowHtml | Whether to allow HTML rendering in message | _boolean_ | `false` |
-| beforeClose | Callback function before close | _(action: string) => boolean \| Promise\<boolean\>_ | - |
-| transition | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | - |
-| teleport | Specifies a target element where Dialog will be mounted | _string \| Element_ | `body` |
-
-### Props
-
-| Attribute | Description | Type | Default |
-| --- | --- | --- | --- |
-| v-model:show | Whether to show dialog | _boolean_ | - |
-| title | Title | _string_ | - |
-| width | Width | _number \| string_ | `320px` |
-| message | Message | _string \| () => JSX.ELement_ | - |
-| message-align | Message align, can be set to `left` `right` `justify` | _string_ | `center` |
-| theme | Theme style, can be set to `round-button` | _string_ | `default` |
-| show-confirm-button | Whether to show confirm button | _boolean_ | `true` |
-| show-cancel-button | Whether to show cancel button | _boolean_ | `false` |
-| show-input | Whether to show the input field style | _boolean_ | `false` |
-| v-model:input-value | Current input value | _string_ | `''` |
-| input-placeholder | Input placeholder text | _string_ | `Please enter` |
-| input-autofocus | Whether to autofocus the input field | _boolean_ | `false` |
-| cancel-button-text | Cancel button text | _string_ | `Cancel` |
-| cancel-button-color | Cancel button color | _string_ | `black` |
-| cancel-button-disabled `v3.5.0` | Whether to disable cancel button | _boolean_ | `false` |
-| confirm-button-text | Confirm button text | _string_ | `Confirm` |
-| confirm-button-color | Confirm button color | _string_ | `var(--van-primary-color)` |
-| confirm-button-disabled `v3.5.0` | Whether to disable confirm button | _boolean_ | `false` |
-| overlay | Whether to show overlay | _boolean_ | `true` |
-| overlay-class | Custom overlay class | _string_ | - |
-| overlay-style | Custom overlay style | _object_ | - |
-| close-on-popstate | Whether to close when popstate | _boolean_ | `true` |
-| close-on-click-overlay | Whether to close when overlay is clicked | _boolean_ | `false` |
-| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` |
-| lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
-| allow-html | Whether to allow HTML rendering in message | _boolean_ | `false` |
-| before-close | Callback function before close | _(action: string) => boolean \| Promise\<boolean\>_ | - |
-| transition | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | - |
-| teleport | Specifies a target element where Dialog will be mounted | _string \| Element_ | - |
-
-### Events
-
-| Event   | Description                                | Parameters |
-| ------- | ------------------------------------------ | ---------- |
-| confirm | Emitted when the confirm button is clicked | -          |
-| cancel  | Emitted when the cancel button is clicked  | -          |
-| input | Emitted when the input value changes | _value: string_ |
-| open    | Emitted when opening Dialog                | -          |
-| close   | Emitted when closing Dialog                | -          |
-| opened  | Emitted when Dialog is opened              | -          |
-| closed  | Emitted when Dialog is closed              | -          |
-
-### Slots
-
-| Name             | Description    |
-| ---------------- | -------------- |
-| default          | Custom message |
-| title            | Custom title   |
-| footer `v3.0.11` | Custom footer  |
-
-### Types
-
-The component exports the following type definitions:
-
-```ts
-import type {
-  DialogProps,
-  DialogTheme,
-  DialogMessage,
-  DialogOptions,
-  DialogMessageAlign,
-} from 'vant';
-```
-
-## Theming
-
-### CSS Variables
-
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
-
-| Name | Default Value | Description |
-| --- | --- | --- |
-| --van-dialog-width | _320px_ | - |
-| --van-dialog-small-screen-width | _90%_ | - |
-| --van-dialog-font-size | _var(--van-font-size-lg)_ | - |
-| --van-dialog-transition | _var(--van-animation-duration-base)_ | - |
-| --van-dialog-border-radius | _16px_ | - |
-| --van-dialog-background-color | _var(--van-background-color-light)_ | - |
-| --van-dialog-header-font-weight | _var(--van-font-weight-bold)_ | - |
-| --van-dialog-header-line-height | _24px_ | - |
-| --van-dialog-header-padding-top | _26px_ | - |
-| --van-dialog-header-isolated-padding | _var(--van-padding-lg) 0_ | - |
-| --van-dialog-message-padding | _var(--van-padding-lg)_ | - |
-| --van-dialog-message-font-size | _var(--van-font-size-md)_ | - |
-| --van-dialog-message-line-height | _var(--van-line-height-md)_ | - |
-| --van-dialog-message-max-height | _60vh_ | - |
-| --van-dialog-has-title-message-text-color | _var(--van-gray-7)_ | - |
-| --van-dialog-has-title-message-padding-top | _var(--van-padding-xs)_ | - |
-| --van-dialog-button-height | _48px_ | - |
-| --van-dialog-round-button-height | _36px_ | - |
-| --van-dialog-confirm-button-text-color | _var(--van-primary-color)_ | - |