zartui 3.1.81 → 3.1.82

package/es/index.d.ts

@@ -43,6 +43,7 @@ export * from "./notice-bar";
 export * from "./notify";
 export * from "./number-keyboard";
 export * from "./overlay";
+export * from "./pagination";
 export * from "./password-input";
 export * from "./picker";
 export * from "./popover";
@@ -84,4 +85,4 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "3.1.81";
+export const version: "3.1.82";

package/es/index.mjs

@@ -42,6 +42,7 @@ import { NoticeBar } from "./notice-bar/index.mjs";
 import { Notify } from "./notify/index.mjs";
 import { NumberKeyboard } from "./number-keyboard/index.mjs";
 import { Overlay } from "./overlay/index.mjs";
+import { Pagination } from "./pagination/index.mjs";
 import { PasswordInput } from "./password-input/index.mjs";
 import { Picker } from "./picker/index.mjs";
 import { Popover } from "./popover/index.mjs";
@@ -77,7 +78,7 @@ import { Timeline } from "./timeline/index.mjs";
 import { Toast } from "./toast/index.mjs";
 import { Uploader } from "./uploader/index.mjs";
 import { Video } from "./video/index.mjs";
-const version = "3.1.81";
+const version = "3.1.82";
 function install(app) {
   const components = [
     ActionSheet,
@@ -124,6 +125,7 @@ function install(app) {
     Notify,
     NumberKeyboard,
     Overlay,
+    Pagination,
     PasswordInput,
     Picker,
     Popover,
@@ -213,6 +215,7 @@ export * from "./notice-bar/index.mjs";
 export * from "./notify/index.mjs";
 export * from "./number-keyboard/index.mjs";
 export * from "./overlay/index.mjs";
+export * from "./pagination/index.mjs";
 export * from "./password-input/index.mjs";
 export * from "./picker/index.mjs";
 export * from "./popover/index.mjs";

package/es/pagination/Pagination.d.ts

@@ -0,0 +1,38 @@
+import type { ExtractPropTypes } from 'vue';
+export declare const paginationProps: {
+    modelValue: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    totalPage: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+};
+export type PaginationProps = ExtractPropTypes<typeof paginationProps>;
+declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
+    modelValue: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    totalPage: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue").PublicProps, Readonly<ExtractPropTypes<{
+    modelValue: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    totalPage: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    modelValue: string | number;
+    totalPage: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/pagination/Pagination.mjs

@@ -0,0 +1,119 @@
+import { computed, defineComponent, ref, Fragment as _Fragment, createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
+import ZtIcon from "../icon/index.mjs";
+import ZtPopup from "../popup/index.mjs";
+import ZtButton from "../button/index.mjs";
+import { createNamespace, makeNumericProp } from "../utils/index.mjs";
+const [name, bem] = createNamespace("pagination");
+const paginationProps = {
+  modelValue: makeNumericProp(1),
+  totalPage: makeNumericProp(0)
+};
+var stdin_default = defineComponent({
+  name,
+  props: paginationProps,
+  emits: ["change", "update:modelValue"],
+  setup(props, {
+    emit
+  }) {
+    const popupVisible = ref(false);
+    const currentPage = computed(() => Number(props.modelValue));
+    const total = computed(() => Number(props.totalPage));
+    const pages = computed(() => Array.from({
+      length: Math.max(total.value, 0)
+    }, (_, index) => index + 1));
+    const prevDisabled = computed(() => currentPage.value <= 1);
+    const nextDisabled = computed(() => currentPage.value >= total.value);
+    const setPage = (value) => {
+      emit("update:modelValue", value);
+      emit("change", value);
+    };
+    const onPrev = () => {
+      if (!prevDisabled.value) {
+        setPage(currentPage.value - 1);
+      }
+    };
+    const onNext = () => {
+      if (!nextDisabled.value) {
+        setPage(currentPage.value + 1);
+      }
+    };
+    const onSelect = (value) => {
+      if (value !== currentPage.value) {
+        setPage(value);
+      }
+      popupVisible.value = false;
+    };
+    const closePopup = () => {
+      popupVisible.value = false;
+    };
+    return () => _createVNode(_Fragment, null, [_createVNode("div", {
+      "class": bem()
+    }, [_createVNode("button", {
+      "type": "button",
+      "class": [bem("button"), bem("prev"), {
+        [bem("button", {
+          disabled: true
+        })]: prevDisabled.value
+      }],
+      "aria-disabled": prevDisabled.value || void 0,
+      "onClick": onPrev
+    }, [_createVNode(ZtIcon, {
+      "name": "back",
+      "size": "24"
+    }, null)]), _createVNode("button", {
+      "type": "button",
+      "class": bem("page"),
+      "onClick": () => popupVisible.value = true
+    }, [_createVNode("span", {
+      "class": bem("text")
+    }, [currentPage.value, _createTextVNode("/"), total.value])]), _createVNode("button", {
+      "type": "button",
+      "class": [bem("button"), bem("next"), {
+        [bem("button", {
+          disabled: true
+        })]: nextDisabled.value
+      }],
+      "aria-disabled": nextDisabled.value || void 0,
+      "onClick": onNext
+    }, [_createVNode(ZtIcon, {
+      "name": "back",
+      "size": "24",
+      "class": bem("next-icon")
+    }, null)])]), _createVNode(ZtPopup, {
+      "show": popupVisible.value,
+      "onUpdate:show": ($event) => popupVisible.value = $event,
+      "round": true,
+      "closeable": true,
+      "position": "bottom",
+      "lockScroll": true,
+      "safeAreaInsetBottom": true,
+      "style": {
+        height: "80%"
+      }
+    }, {
+      default: () => [_createVNode("div", {
+        "class": bem("popup")
+      }, [_createVNode("div", {
+        "class": bem("popup-title")
+      }, [_createTextVNode("\u8DF3\u8F6C\u7FFB\u9875")]), _createVNode("div", {
+        "class": bem("popup-pages")
+      }, [pages.value.map((page) => _createVNode("button", {
+        "type": "button",
+        "class": bem("popup-page"),
+        "onClick": () => onSelect(page)
+      }, [page]))]), _createVNode("div", {
+        "class": bem("popup-footer")
+      }, [_createVNode(ZtButton, {
+        "type": "default",
+        "block": true,
+        "onClick": closePopup
+      }, {
+        default: () => [_createTextVNode("\u53D6\u6D88")]
+      })])])]
+    })]);
+  }
+});
+export {
+  stdin_default as default,
+  paginationProps
+};

package/es/pagination/index.css

@@ -0,0 +1 @@
+:root{--zt-pagination-bottom: 29px;--zt-pagination-item-size: 44px;--zt-pagination-gap: 16px;--zt-pagination-background: #2d4b7380;--zt-pagination-backdrop-filter: blur(5.44px);--zt-pagination-box-shadow: 0 4px 8px 0 #2d4b7333;--zt-pagination-text-color: #fff;--zt-pagination-disabled-icon-color: rgba(255, 255, 255, .45);--zt-pagination-font-size: 14px;--zt-pagination-text-line-height: 17px;--zt-pagination-z-index: 100}.zt-pagination{position:fixed;left:0;right:0;bottom:var(--zt-pagination-bottom);z-index:var(--zt-pagination-z-index);display:flex;align-items:center;justify-content:center;pointer-events:none}.zt-pagination__button,.zt-pagination__page{height:var(--zt-pagination-item-size);background:var(--zt-pagination-background);-webkit-backdrop-filter:var(--zt-pagination-backdrop-filter);backdrop-filter:var(--zt-pagination-backdrop-filter);box-shadow:var(--zt-pagination-box-shadow)}.zt-pagination__button{width:var(--zt-pagination-item-size);padding:0;border:0;border-radius:50%;color:var(--zt-pagination-text-color);display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;transition:opacity var(--zt-duration-fast),transform var(--zt-duration-fast)}.zt-pagination__button:not(.zt-pagination__button--disabled):hover{opacity:.88;transform:scale(1.04)}.zt-pagination__button:not(.zt-pagination__button--disabled):active{opacity:.75;transform:scale(.96)}.zt-pagination__button--disabled{color:var(--zt-pagination-disabled-icon-color);cursor:default}.zt-pagination__page{margin:0 var(--zt-pagination-gap);padding:0 27px;border:0;border-radius:22px;display:flex;align-items:center;justify-content:center;color:var(--zt-pagination-text-color);cursor:pointer;pointer-events:auto;-webkit-appearance:none;-moz-appearance:none;appearance:none}.zt-pagination__text{height:var(--zt-pagination-text-line-height);color:var(--zt-pagination-text-color);font-size:var(--zt-pagination-font-size);line-height:var(--zt-pagination-text-line-height)}.zt-pagination__next-icon{transform:rotate(180deg)}.zt-pagination__popup{height:100%;display:flex;flex-direction:column;background:#fff}.zt-pagination__popup-title{padding-top:var(--zt-popup-close-icon-margin);color:#2d4b73;font-size:18px;font-weight:600;text-align:center}.zt-pagination__popup-pages{flex:1;display:grid;grid-template-columns:repeat(5,40px);grid-auto-rows:40px;justify-content:space-around;row-gap:24px;padding:24px 0;overflow-y:auto}.zt-pagination__popup-page{width:40px;height:40px;padding:0;border:0;border-radius:50%;color:#2d4b73;background:rgba(45,75,115,.04);font-size:16px;line-height:24px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:background-color var(--zt-duration-fast),transform var(--zt-duration-fast),opacity var(--zt-duration-fast)}.zt-pagination__popup-page:hover{background:rgba(45,75,115,.1);transform:scale(1.04)}.zt-pagination__popup-page:active{opacity:.75;transform:scale(.96)}.zt-pagination__popup-footer{padding:8px 16px;border-top:1px solid var(--zt-border-color)}

package/es/pagination/index.d.ts

@@ -0,0 +1,33 @@
+export declare const Pagination: import("../utils").WithInstall<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    totalPage: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    totalPage: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    modelValue: string | number;
+    totalPage: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+export default Pagination;
+export type { PaginationProps } from './Pagination';
+export type { PaginationThemeVars } from './types';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtPagination: typeof Pagination;
+    }
+}

package/es/pagination/index.mjs

@@ -0,0 +1,8 @@
+import { withInstall } from "../utils/index.mjs";
+import _Pagination from "./Pagination.mjs";
+const Pagination = withInstall(_Pagination);
+var stdin_default = Pagination;
+export {
+  Pagination,
+  stdin_default as default
+};

package/es/pagination/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/es/pagination/style/index.mjs

@@ -0,0 +1,8 @@
+import "../../style/base.css";
+import "../../badge/index.css";
+import "../../icon/index.css";
+import "../../overlay/index.css";
+import "../../popup/index.css";
+import "../../loading/index.css";
+import "../../button/index.css";
+import "../index.css";

package/es/pagination/types.d.ts

@@ -0,0 +1,11 @@
+export type PaginationThemeVars = {
+    paginationBottom?: string;
+    paginationItemSize?: string;
+    paginationGap?: string;
+    paginationBackground?: string;
+    paginationBackdropFilter?: string;
+    paginationBoxShadow?: string;
+    paginationTextColor?: string;
+    paginationFontSize?: string;
+    paginationTextLineHeight?: string;
+};