zartui 3.1.2 → 3.1.4

package/README.md

@@ -0,0 +1,25 @@
+# ZartUI
+
+[ZartUI](https://zartui.egova.com.cn) 是数字政通基于 Vue 研发的一款面向政务场景的移动端组件库。
+
+Zart（读音 /zɑːt/）的命名，灵感源自数字政通秉承的理念：让城市治理变得更智慧。Zart = zt + smart， zt是政通的首字母缩写，smart代表公司理念中的“智慧”，将smart中间的“ar”字母包裹于zt之间，体现了ZartUI的核心目标：追求极致的用户体验，致力于做灵活智能的组件库。
+
+## 特性
+
+1）【组件重构】【组件审核】提供60多个高质量组件，覆盖移动端各类场景；
+
+2）【UI重构】基于全新的视觉规范；
+
+3）【在线网站】完善的文档、示例、演示效果；
+
+4）支持主题定制、按需引入；
+
+5）支持vue3.0、TypeScript；
+
+6）性能佳，组件平均体积小(min+gzip);
+
+7）单元测试覆盖率 90%+，提供稳定性保障。
+
+## 浏览器支持
+
+ZartUI 3 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一致）。

package/es/cascader/index.css

@@ -1 +1 @@
-:root{--zt-cascader-header-height: 44px;--zt-cascader-header-padding: 0 var(--zt-padding-sm);--zt-cascader-title-font-size: var(--zt-font-size-md);--zt-cascader-title-line-height: 44px;--zt-cascader-title-color: var(--zt-gray-a4);--zt-cascader-close-icon-size: 24px;--zt-cascader-close-icon-color: var(--zt-gray-5);--zt-cascader-selected-icon-size: 18px;--zt-cascader-tabs-height: 44px;--zt-cascader-active-color: var(--zt-primary-color);--zt-cascader-height: 75vh;--zt-cascader-option-disabled-color: var(--zt-text-color-3);--zt-cascader-tab-color: var(--zt-text-color);--zt-cascader-unselected-tab-color: var(--zt-gray-a4);--zt-cascader-tabs-margin: 0 8px;--zt-cascader-tabs-padding: 8px;--zt-cascader-tabs-line-height: 44px;--zt-cascader-option-disabled-active-color: rgba(0, 0, 0, .04);--zt-cascader-cancel-margin: 8px 16px;--zt-cascader-cancel-background: rgba(45, 75, 115, .04);--zt-cascader-cancel-width:calc(100% - 32px);--zt-cascader-cancel-border-radius: 20.5px}.zt-cascader{display:flex;justify-content:space-between;flex-direction:column;height:var(--zt-cascader-height)}.zt-cascader__header{display:flex;align-items:center;justify-content:center;flex-shrink:0;height:var(--zt-cascader-header-height);padding:var(--zt-cascader-header-padding)}.zt-cascader__title{font-size:var(--zt-cascader-title-font-size);line-height:var(--zt-cascader-title-line-height);color:var(--zt-cascader-title-color)}.zt-cascader__close-icon{color:var(--zt-cascader-close-icon-color);font-size:var(--zt-cascader-close-icon-size)}.zt-cascader__tabs{flex:1}.zt-cascader__tabs .zt-tab{flex:none;margin:var(--zt-cascader-tabs-margin);padding:0}.zt-cascader__tabs .zt-tabs__wrap{position:relative;height:var(--zt-cascader-tabs-height)}.zt-cascader__tabs .zt-tabs__wrap:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid var(--zt-border-color);transform:scaleY(.5)}.zt-cascader__tabs .zt-tabs__nav--complete{padding-right:var(--zt-cascader-tabs-padding);padding-left:var(--zt-cascader-tabs-padding)}.zt-cascader__tab{color:var(--zt-cascader-tab-color);font-weight:var(--zt-font-bold);line-height:var(--zt-cascader-tabs-line-height);font-size:var(--zt-font-size-md)}.zt-cascader__tab--unselected{color:var(--zt-cascader-unselected-tab-color);font-weight:400}.zt-cascader__option{display:flex;align-items:center;justify-content:space-between;color:var(--zt-text-color);padding:0 var(--zt-padding-md);font-size:var(--zt-font-size-md);line-height:var(--zt-cascader-tabs-line-height);cursor:pointer;font-weight:400}.zt-cascader__option:active{background-color:var(--zt-active-color)}.zt-cascader__option--selected{color:var(--zt-cascader-active-color);font-weight:var(--zt-font-bold)}.zt-cascader__option--disabled{color:var(--zt-cascader-option-disabled-color);cursor:not-allowed}.zt-cascader__option--disabled:active{background-color:var(--zt-cascader-option-disabled-active-color)}.zt-cascader__selected-icon{font-size:var(--zt-cascader-selected-icon-size)}.zt-cascader__options{box-sizing:border-box;overflow-y:auto;-webkit-overflow-scrolling:touch}.zt-cascader .zt-tabs__nav{background:var(--zt-background-2)}.zt-cascader__cancel{margin:var(--zt-cascader-cancel-margin);width:var(--zt-cascader-cancel-width);background:var(--zt-cascader-cancel-background);border-radius:var(--zt-cascader-cancel-border-radius);color:var(--zt-text-color);border:0}.zt-theme-dark{--zt-cascader-cancel-background: var(--zt-background-card)}
+:root{--zt-cascader-header-height: 44px;--zt-cascader-header-padding: 0 var(--zt-padding-sm);--zt-cascader-title-font-size: var(--zt-font-size-md);--zt-cascader-title-line-height: 44px;--zt-cascader-title-color: var(--zt-gray-a4);--zt-cascader-close-icon-size: 24px;--zt-cascader-close-icon-color: var(--zt-gray-5);--zt-cascader-selected-icon-size: 18px;--zt-cascader-tabs-height: 44px;--zt-cascader-active-color: var(--zt-primary-color);--zt-cascader-height: 75vh;--zt-cascader-option-disabled-color: var(--zt-text-color-3);--zt-cascader-tab-color: var(--zt-text-color);--zt-cascader-unselected-tab-color: var(--zt-gray-a4);--zt-cascader-tabs-margin: 0 8px;--zt-cascader-tabs-padding: 8px;--zt-cascader-tabs-line-height: 44px;--zt-cascader-option-disabled-active-color: rgba(0, 0, 0, .04);--zt-cascader-cancel-margin: 8px 16px;--zt-cascader-cancel-background: rgba(45, 75, 115, .04);--zt-cascader-cancel-width:calc(100% - 32px);--zt-cascader-cancel-border-radius: 20.5px}.zt-cascader{display:flex;justify-content:space-between;flex-direction:column;height:var(--zt-cascader-height)}.zt-cascader__header{display:flex;align-items:center;justify-content:center;flex-shrink:0;height:var(--zt-cascader-header-height);padding:var(--zt-cascader-header-padding)}.zt-cascader__title{font-size:var(--zt-cascader-title-font-size);line-height:var(--zt-cascader-title-line-height);color:var(--zt-cascader-title-color)}.zt-cascader__close-icon{color:var(--zt-cascader-close-icon-color);font-size:var(--zt-cascader-close-icon-size)}.zt-cascader__tabs{flex:1;min-height:0}.zt-cascader__tabs .zt-tab{flex:none;margin:var(--zt-cascader-tabs-margin);padding:0}.zt-cascader__tabs .zt-tabs__wrap{position:relative;height:var(--zt-cascader-tabs-height)}.zt-cascader__tabs .zt-tabs__wrap:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid var(--zt-border-color);transform:scaleY(.5)}.zt-cascader__tabs .zt-tabs__nav--complete{padding-right:var(--zt-cascader-tabs-padding);padding-left:var(--zt-cascader-tabs-padding)}.zt-cascader__tabs .zt-tabs__content{height:calc(100% - var(--zt-cascader-tabs-height))}.zt-cascader__tabs .zt-tab__panel{height:100%}.zt-cascader__tab{color:var(--zt-cascader-tab-color);font-weight:var(--zt-font-bold);line-height:var(--zt-cascader-tabs-line-height);font-size:var(--zt-font-size-md)}.zt-cascader__tab--unselected{color:var(--zt-cascader-unselected-tab-color);font-weight:400}.zt-cascader__option{display:flex;align-items:center;justify-content:space-between;color:var(--zt-text-color);padding:0 var(--zt-padding-md);font-size:var(--zt-font-size-md);line-height:var(--zt-cascader-tabs-line-height);cursor:pointer;font-weight:400}.zt-cascader__option:active{background-color:var(--zt-active-color)}.zt-cascader__option--selected{color:var(--zt-cascader-active-color);font-weight:var(--zt-font-bold)}.zt-cascader__option--disabled{color:var(--zt-cascader-option-disabled-color);cursor:not-allowed}.zt-cascader__option--disabled:active{background-color:var(--zt-cascader-option-disabled-active-color)}.zt-cascader__selected-icon{font-size:var(--zt-cascader-selected-icon-size)}.zt-cascader__options{height:100%;box-sizing:border-box;overflow-y:auto;-webkit-overflow-scrolling:touch}.zt-cascader .zt-tabs__nav{background:var(--zt-background-2)}.zt-cascader__cancel{margin:var(--zt-cascader-cancel-margin);width:var(--zt-cascader-cancel-width);background:var(--zt-cascader-cancel-background);border-radius:var(--zt-cascader-cancel-border-radius);color:var(--zt-text-color);border:0}.zt-theme-dark{--zt-cascader-cancel-background: var(--zt-background-card)}

package/es/date-time-picker/DateTimePickerWrapper.mjs

@@ -1,7 +1,7 @@
 import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
 import { ref, watch, computed, defineComponent } from "vue";
 import { pick, extend, isSameValue, createNamespace, truthProp, makeArrayProp, isDate, padZero } from "../utils/index.mjs";
-import { genOptions, getMonthEndDay, pickerInheritKeys, sharedProps } from "./utils.mjs";
+import { formatValueRange, genOptions, getMonthEndDay, pickerInheritKeys, sharedProps } from "./utils.mjs";
 import Picker from "../picker/index.mjs";
 import TimePicker from "../time-picker/index.mjs";
 import { Divider } from "../divider/index.mjs";
@@ -178,10 +178,12 @@ var stdin_default = defineComponent({
       });
       return result;
     });
-    watch(dateValuesRef, (newValues) => {
+    watch(dateValuesRef, (newValues, oldValues) => {
       const date = parseDateValues(props.modelValue);
-      if (!isSameValue(newValues, date)) {
-        currentValuesRef.value = genResult(newValues, timeValuesRef.value);
+      if (!isSameValue(newValues, date) && !isSameValue(newValues, oldValues)) {
+        const formatRangeNewValues = formatValueRange(newValues, dateColumns.value);
+        currentValuesRef.value = genResult(formatRangeNewValues, timeValuesRef.value);
+        dateValuesRef.value = formatRangeNewValues;
       }
     });
     watch(timeValuesRef, (newValues) => {

package/es/date-time-picker/utils.d.ts

@@ -50,4 +50,5 @@ export declare const pickerInheritKeys: ("title" | "readonly" | "loading" | "sho
 export declare function times<T>(n: number, iteratee: (index: number) => T): T[];
 export declare const getMonthEndDay: (year: number, month: number) => number;
 export declare const genOptions: <T extends string>(min: number, max: number, type: T, formatter: Formatter, filter?: Filter) => PickerOption[];
+export declare const formatValueRange: (values: string[], columns: PickerOption[][]) => string[];
 export {};

package/es/date-time-picker/utils.mjs

@@ -1,4 +1,4 @@
-import { extend, padZero, makeArrayProp } from "../utils/index.mjs";
+import { extend, padZero, makeArrayProp, clamp } from "../utils/index.mjs";
 import { pickerSharedProps } from "../picker/Picker.mjs";
 const sharedProps = extend({}, pickerSharedProps, {
   modelValue: makeArrayProp(),
@@ -33,7 +33,17 @@ const genOptions = (min, max, type, formatter, filter) => {
   });
   return filter ? filter(type, options) : options;
 };
+const formatValueRange = (values, columns) => values.map((value, index) => {
+  const column = columns[index];
+  if (column.length) {
+    const minValue = +column[0].value;
+    const maxValue = +column[column.length - 1].value;
+    return padZero(clamp(+value, minValue, maxValue));
+  }
+  return value;
+});
 export {
+  formatValueRange,
   genOptions,
   getMonthEndDay,
   pickerInheritKeys,

package/es/index.d.ts

@@ -47,6 +47,7 @@ export * from "./popup";
 export * from "./pull-refresh";
 export * from "./radio";
 export * from "./radio-group";
+export * from "./radio-picker";
 export * from "./rate";
 export * from "./row";
 export * from "./search";
@@ -77,4 +78,4 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "3.1.2";
+export const version: "3.1.4";

package/es/index.mjs

@@ -46,6 +46,7 @@ import { Popup } from "./popup/index.mjs";
 import { PullRefresh } from "./pull-refresh/index.mjs";
 import { Radio } from "./radio/index.mjs";
 import { RadioGroup } from "./radio-group/index.mjs";
+import { RadioPicker } from "./radio-picker/index.mjs";
 import { Rate } from "./rate/index.mjs";
 import { Row } from "./row/index.mjs";
 import { Search } from "./search/index.mjs";
@@ -70,7 +71,7 @@ import { TimePicker } from "./time-picker/index.mjs";
 import { Timeline } from "./timeline/index.mjs";
 import { Toast } from "./toast/index.mjs";
 import { Uploader } from "./uploader/index.mjs";
-const version = "3.1.2";
+const version = "3.1.4";
 function install(app) {
   const components = [
     ActionSheet,
@@ -121,6 +122,7 @@ function install(app) {
     PullRefresh,
     Radio,
     RadioGroup,
+    RadioPicker,
     Rate,
     Row,
     Search,
@@ -203,6 +205,7 @@ export * from "./popup/index.mjs";
 export * from "./pull-refresh/index.mjs";
 export * from "./radio/index.mjs";
 export * from "./radio-group/index.mjs";
+export * from "./radio-picker/index.mjs";
 export * from "./rate/index.mjs";
 export * from "./row/index.mjs";
 export * from "./search/index.mjs";

package/es/lazyload/vue-lazyload/index.d.ts

@@ -1,55 +1,55 @@
-import type { App } from 'vue';
-
-declare type ListenEvent =
-  | 'scroll'
-  | 'wheel'
-  | 'mousewheel'
-  | 'resize'
-  | 'animationend'
-  | 'transitionend'
-  | 'touchmove';
-
-// eslint-disable-next-line
-declare type Callback = (listener: any, options: LazyloadOptions) => void;
-
-declare type Filter = {
-  webp?: Callback;
-  progressive?: Callback;
-};
-
-declare type Adapter = {
-  error?: Callback;
-  loaded?: Callback;
-  loading?: Callback;
-};
-
-export declare type LazyloadOptions = {
-  error?: string;
-  filter?: Filter;
-  silent?: boolean;
-  adapter?: Adapter;
-  loading?: string;
-  attempt?: number;
-  preLoad?: number;
-  observer?: boolean;
-  lazyImage?: boolean;
-  throttleWait?: number;
-  listenEvents?: ListenEvent[];
-  dispatchEvent?: boolean;
-  lazyComponent?: boolean;
-  observerOptions?: IntersectionObserverInit;
-};
-
-export declare const Lazyload: {
-  install(app: App, options?: LazyloadOptions): void;
-};
-
-declare module '@vue/runtime-core' {
-  interface ComponentCustomProperties {
-    $Lazyload: {
-      $on: (event: string, handler: Callback) => void;
-      $off: (event: string, handler?: Callback) => void;
-      $once: (event: string, handler: Callback) => void;
-    };
-  }
-}
+import type { App } from 'vue';
+
+declare type ListenEvent =
+  | 'scroll'
+  | 'wheel'
+  | 'mousewheel'
+  | 'resize'
+  | 'animationend'
+  | 'transitionend'
+  | 'touchmove';
+
+// eslint-disable-next-line
+declare type Callback = (listener: any, options: LazyloadOptions) => void;
+
+declare type Filter = {
+  webp?: Callback;
+  progressive?: Callback;
+};
+
+declare type Adapter = {
+  error?: Callback;
+  loaded?: Callback;
+  loading?: Callback;
+};
+
+export declare type LazyloadOptions = {
+  error?: string;
+  filter?: Filter;
+  silent?: boolean;
+  adapter?: Adapter;
+  loading?: string;
+  attempt?: number;
+  preLoad?: number;
+  observer?: boolean;
+  lazyImage?: boolean;
+  throttleWait?: number;
+  listenEvents?: ListenEvent[];
+  dispatchEvent?: boolean;
+  lazyComponent?: boolean;
+  observerOptions?: IntersectionObserverInit;
+};
+
+export declare const Lazyload: {
+  install(app: App, options?: LazyloadOptions): void;
+};
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $Lazyload: {
+      $on: (event: string, handler: Callback) => void;
+      $off: (event: string, handler?: Callback) => void;
+      $once: (event: string, handler: Callback) => void;
+    };
+  }
+}

package/es/radio-picker/RadioPicker.d.ts

@@ -0,0 +1,207 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import { Numeric } from '../utils';
+import type { PickerColumn, PickerFieldNames, RadioPickerOption } from './types';
+export declare const pickerSharedProps: {
+    loading: BooleanConstructor;
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    showToolbar: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showTitle: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
+} & {
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+};
+export declare const radioPickerProps: {
+    loading: BooleanConstructor;
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    showToolbar: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showTitle: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
+} & {
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+} & {
+    columns: {
+        type: PropType<(PickerColumn | RadioPickerOption)[]>;
+        default: () => (PickerColumn | RadioPickerOption)[];
+    };
+    modelValue: {
+        type: PropType<Numeric[]>;
+        default: () => Numeric[];
+    };
+    columnsFieldNames: PropType<PickerFieldNames>;
+    wrapHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    showPicker: BooleanConstructor;
+    popup: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    searchable: BooleanConstructor;
+    autoSearch: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    searchPlaceholder: {
+        type: PropType<string>;
+        default: string;
+    };
+};
+export type RadioPickerProps = ExtractPropTypes<typeof radioPickerProps>;
+declare const _default: import("vue").DefineComponent<{
+    loading: BooleanConstructor;
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    showToolbar: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showTitle: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
+} & {
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+} & {
+    columns: {
+        type: PropType<(PickerColumn | RadioPickerOption)[]>;
+        default: () => (PickerColumn | RadioPickerOption)[];
+    };
+    modelValue: {
+        type: PropType<Numeric[]>;
+        default: () => Numeric[];
+    };
+    columnsFieldNames: PropType<PickerFieldNames>;
+    wrapHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    showPicker: BooleanConstructor;
+    popup: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    searchable: BooleanConstructor;
+    autoSearch: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    searchPlaceholder: {
+        type: PropType<string>;
+        default: string;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "cancel" | "change" | "confirm" | "clickOption" | "update:showPicker")[], "update:modelValue" | "cancel" | "change" | "confirm" | "clickOption" | "update:showPicker", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    loading: BooleanConstructor;
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    showToolbar: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showTitle: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
+} & {
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+} & {
+    columns: {
+        type: PropType<(PickerColumn | RadioPickerOption)[]>;
+        default: () => (PickerColumn | RadioPickerOption)[];
+    };
+    modelValue: {
+        type: PropType<Numeric[]>;
+        default: () => Numeric[];
+    };
+    columnsFieldNames: PropType<PickerFieldNames>;
+    wrapHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    showPicker: BooleanConstructor;
+    popup: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    searchable: BooleanConstructor;
+    autoSearch: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    searchPlaceholder: {
+        type: PropType<string>;
+        default: string;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+    onClickOption?: ((...args: any[]) => any) | undefined;
+    "onUpdate:showPicker"?: ((...args: any[]) => any) | undefined;
+}, {
+    title: string;
+    modelValue: Numeric[];
+    readonly: boolean;
+    popup: boolean;
+    loading: boolean;
+    showTitle: boolean;
+    columns: (PickerColumn | RadioPickerOption)[];
+    allowHtml: boolean;
+    showToolbar: boolean;
+    swipeDuration: string | number;
+    showPicker: boolean;
+    wrapHeight: string | number;
+    searchable: boolean;
+    autoSearch: boolean;
+    searchPlaceholder: string;
+}, {}>;
+export default _default;