@will-ui/vue 1.0.0

package/dist/components/pagination/src/Pagination.js

@@ -0,0 +1,288 @@
+import useComponentConfig from "../../../use/useComponentConfig.js";
+import Icon_default from "../../icon/Icon.js";
+import { effectiveSizeVar, propColorToCssVars, propSizeToCssVars, toCssVarsStyle } from "../../../util/cssVars.js";
+import Btn from "../../btn/Btn.js";
+import Tooltip_default from "../../tooltip/Tooltip.js";
+import { useUII18n } from "../../../use/useUII18n.js";
+import ChooseItem_default from "../../chooseItem/ChooseItem.js";
+import Choose_default from "../../choose/Choose.js";
+import Number_default from "../../number/Number.js";
+import { PAGINATION_FALLBACK } from "./config.js";
+import { computed, createVNode, defineComponent, isVNode, nextTick, ref, watch } from "vue";
+//#region components/pagination/src/Pagination.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var ELLIPSIS = "...";
+var Pagination_default = /* @__PURE__ */ defineComponent({
+	name: "Pagination",
+	components: {
+		Choose: Choose_default,
+		Btn,
+		Tooltip: Tooltip_default,
+		Num: Number_default,
+		ChooseItem: ChooseItem_default,
+		Icon: Icon_default
+	},
+	props: {
+		total: {
+			type: Number,
+			default: 0
+		},
+		pageIndex: {
+			type: Number,
+			default: 1
+		},
+		pageSize: {
+			type: Number,
+			default: 20
+		},
+		sizes: {
+			type: Array,
+			default: void 0
+		},
+		align: {
+			type: String,
+			default: void 0
+		},
+		bordered: {
+			type: Boolean,
+			default: void 0
+		},
+		layout: {
+			type: String,
+			default: void 0
+		},
+		hideWhenNoData: {
+			type: Boolean,
+			default: void 0
+		},
+		/** 控件视觉高度（px），写入 `--w-prop-pagination-item-size` */
+		size: {
+			type: Number,
+			default: void 0
+		},
+		/** 品牌主色 → `--w-prop-pagination-color` */
+		color: {
+			type: String,
+			default: void 0
+		},
+		/** 实例 CSS 变量（如 `--w-prop-pagination-bg-color`） */
+		cssVars: {
+			type: Object,
+			default: void 0
+		}
+	},
+	emits: {
+		"update:pageIndex": (_page) => true,
+		"update:pageSize": (_size) => true,
+		changePageIndex: (_page) => true,
+		changePageSize: (_size) => true
+	},
+	setup(props, { emit }) {
+		const { t } = useUII18n();
+		const cfg = useComponentConfig("Pagination", props, PAGINATION_FALLBACK);
+		const outsize = 10;
+		const max = 5;
+		const max2 = 7;
+		const pi = ref(props.pageIndex);
+		const ps = ref(props.pageSize);
+		const jumpPage = ref();
+		const layoutParts = computed(() => (cfg.value.layout || "").toLocaleLowerCase().split(",").map((s) => s.trim()).filter(Boolean));
+		const totalPages = computed(() => {
+			if (!props.total || !ps.value) return 0;
+			return Math.ceil(props.total / ps.value);
+		});
+		const pagers = computed(() => {
+			const tPages = totalPages.value;
+			const p = pi.value;
+			if (tPages <= 0) return [];
+			if (tPages <= outsize) return Array.from({ length: tPages }, (_, i) => i + 1);
+			const arr = [];
+			if (tPages - p >= max && p > max) {
+				for (let i = p - 2; i <= p + 2; i++) arr.push(i);
+				arr.push(ELLIPSIS, tPages);
+				arr.unshift(1, ELLIPSIS);
+			} else if (p <= max) {
+				for (let i = 1; i <= max2; i++) arr.push(i);
+				arr.push(ELLIPSIS, tPages);
+			} else if (tPages - p < max) {
+				for (let i = tPages; i > tPages - max2; i--) arr.unshift(i);
+				arr.unshift(1, ELLIPSIS);
+			}
+			return arr;
+		});
+		watch(() => [props.pageIndex, props.pageSize], ([i, s]) => {
+			pi.value = i;
+			ps.value = s;
+		});
+		function emitPageChange() {
+			emit("update:pageIndex", pi.value);
+			emit("changePageIndex", pi.value);
+		}
+		function emitSizeChange(size) {
+			emit("update:pageSize", size);
+			emit("changePageSize", size);
+		}
+		function toJump() {
+			const p = Number(jumpPage.value);
+			if (isNaN(p) || p < 1 || p > totalPages.value) return;
+			if (p !== pi.value) {
+				pi.value = p;
+				emitPageChange();
+			}
+		}
+		function toNext() {
+			if (pi.value < totalPages.value) {
+				pi.value += 1;
+				emitPageChange();
+			}
+		}
+		function toPrev() {
+			if (pi.value > 1) {
+				pi.value -= 1;
+				emitPageChange();
+			}
+		}
+		function goPage(page) {
+			if (page === pi.value) return;
+			pi.value = page;
+			nextTick(emitPageChange);
+		}
+		function onSizeChange(size) {
+			ps.value = size;
+			pi.value = 1;
+			emitSizeChange(size);
+			emitPageChange();
+		}
+		function showItem(item) {
+			return layoutParts.value.includes(item);
+		}
+		function setOrder(item) {
+			return layoutParts.value.indexOf(item);
+		}
+		const itemSize = computed(() => cfg.value.size);
+		/** Tooltip portal 脱离树，需把有效尺度写进 layerStyle */
+		const tooltipLayerStyle = computed(() => toCssVarsStyle({
+			...propSizeToCssVars("pagination-item", itemSize.value),
+			"--w-prop-tooltip-size": effectiveSizeVar("pagination-item")
+		}));
+		function renderNav(type, disabled, onClick) {
+			const tip = type === "prev" ? t("pagination.prevPage") : t("pagination.nextPage");
+			return createVNode("li", {
+				"class": ["w-pagination-nav", type === "prev" ? "w-pagination-prev" : "w-pagination-next"],
+				"style": { order: setOrder(type) }
+			}, [createVNode(Tooltip_default, {
+				"placement": "top",
+				"layerStyle": tooltipLayerStyle.value
+			}, {
+				trigger: () => createVNode("button", {
+					"type": "button",
+					"class": ["w-pagination-item", { "w-pagination-item--disabled": disabled }],
+					"disabled": disabled,
+					"aria-label": tip,
+					"onClick": onClick
+				}, [createVNode(Icon_default, {
+					"name": "w-icon-arrow-down",
+					"rotate": true,
+					"direction": "z",
+					"deg": type === "prev" ? 90 : -90
+				}, null)]),
+				default: () => tip
+			})]);
+		}
+		return () => {
+			if (props.total === 0 && cfg.value.hideWhenNoData) return null;
+			const sizeOptions = cfg.value.sizes?.length ? cfg.value.sizes : PAGINATION_FALLBACK.sizes;
+			const chooseSlots = { default: () => sizeOptions.map((s) => {
+				const label = t("pagination.itemsPerPage", { size: s });
+				return createVNode(ChooseItem_default, {
+					"key": s,
+					"label": label,
+					"value": s
+				}, _isSlot(label) ? label : { default: () => [label] });
+			}) };
+			const pageButtons = pagers.value.map((p, i) => {
+				const isEllipsis = p === ELLIPSIS;
+				return createVNode("button", {
+					"key": `${p}-${i}`,
+					"type": "button",
+					"class": ["w-pagination-item", {
+						"w-pagination-item--ellipsis": isEllipsis,
+						"w-pagination-item--disabled": isEllipsis,
+						"w-pagination-item--active": p === pi.value
+					}],
+					"disabled": isEllipsis,
+					"aria-current": p === pi.value ? "page" : void 0,
+					"onClick": () => {
+						if (!isEllipsis && typeof p === "number") goPage(p);
+					}
+				}, [p]);
+			});
+			return createVNode("ol", {
+				"class": [
+					"w-pagination",
+					`w-pagination__${cfg.value.align}`,
+					{ "w-pagination--bordered": cfg.value.bordered }
+				],
+				"style": toCssVarsStyle({
+					...propSizeToCssVars("pagination-item", itemSize.value),
+					...propColorToCssVars("pagination", cfg.value.color),
+					...props.cssVars
+				})
+			}, [
+				showItem("total") && createVNode("li", {
+					"class": "w-pagination-total",
+					"style": { order: setOrder("total") }
+				}, [t("pagination.totalItems", { total: props.total })]),
+				showItem("prev") && renderNav("prev", pi.value <= 1, toPrev),
+				showItem("pager") && createVNode("li", {
+					"class": "w-pagination-pager",
+					"style": { order: setOrder("pager") }
+				}, [pageButtons]),
+				showItem("next") && renderNav("next", totalPages.value === 0 || pi.value >= totalPages.value, toNext),
+				showItem("sizes") && createVNode("li", {
+					"class": "w-pagination-sizes",
+					"style": { order: setOrder("sizes") }
+				}, [createVNode(Choose_default, {
+					modelValue: ps.value,
+					clearable: false,
+					size: itemSize.value,
+					mode: cfg.value.bordered ? "default" : "text",
+					adjustPosition: "top",
+					"onUpdate:modelValue": onSizeChange
+				}, chooseSlots)]),
+				showItem("jumper") && createVNode("li", {
+					"class": "w-pagination-jumper",
+					"style": { order: setOrder("jumper") }
+				}, [
+					createVNode("span", { "class": "w-pagination-jumper-label" }, [t("pagination.goTo")]),
+					createVNode(Number_default, {
+						min: 1,
+						max: totalPages.value || void 0,
+						modelValue: jumpPage.value,
+						size: itemSize.value,
+						"onUpdate:modelValue": (p) => {
+							if (p !== void 0 && p !== "") jumpPage.value = Number(p);
+							else jumpPage.value = void 0;
+						},
+						onKeyup: (e) => {
+							if (e.key.toLowerCase() === "enter") toJump();
+						}
+					}, null),
+					createVNode("span", { "class": "w-pagination-jumper-label" }, [t("pagination.page")]),
+					createVNode(Btn, {
+						"class": "w-pagination-go",
+						"size": itemSize.value,
+						"onClick": toJump,
+						"text": t("pagination.go")
+					}, null)
+				])
+			]);
+		};
+	}
+});
+//#endregion
+export { Pagination_default as default };
+
+//# sourceMappingURL=Pagination.js.map

package/dist/components/pagination/src/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","names":["computed","defineComponent","nextTick","ref","watch","createVNode","_createVNode","isVNode","_isVNode","Num","Choose","ChooseItem","Tooltip","Btn","Icon","useComponentConfig","useUII18n","propSizeToCssVars","propColorToCssVars","effectiveSizeVar","toCssVarsStyle","PAGINATION_FALLBACK","_isSlot","s","Object","prototype","toString","call","ELLIPSIS","name","components","props","total","type","Number","default","pageIndex","pageSize","sizes","Array","undefined","align","String","bordered","Boolean","layout","hideWhenNoData","size","color","cssVars","emits","_page","_size","changePageIndex","changePageSize","setup","emit","t","cfg","outsize","max","max2","pi","ps","jumpPage","layoutParts","value","toLocaleLowerCase","split","map","trim","filter","totalPages","Math","ceil","pagers","tPages","p","from","length","_","i","arr","push","unshift","emitPageChange","emitSizeChange","toJump","isNaN","toNext","toPrev","goPage","page","onSizeChange","showItem","item","includes","setOrder","indexOf","itemSize","tooltipLayerStyle","renderNav","disabled","onClick","tip","order","trigger","sizeOptions","chooseSlots","label","pageButtons","isEllipsis","modelValue","clearable","mode","adjustPosition","min","onKeyup","e","key","toLowerCase"],"sources":["../../../../components/pagination/src/Pagination.tsx"],"sourcesContent":["import {\r\n  computed,\r\n  defineComponent,\r\n  nextTick,\r\n  ref,\r\n  watch,\r\n  type PropType,\r\n} from 'vue'\r\nimport Num from '../../number'\r\nimport Choose from '../../choose/index'\r\nimport ChooseItem from '../../chooseItem/index'\r\nimport Tooltip from '../../tooltip/index'\r\nimport Btn from '../../btn'\r\nimport Icon from '../../icon/Icon'\r\nimport useComponentConfig from '../../../use/useComponentConfig'\r\nimport { useUII18n } from '../../../use/useUII18n'\r\nimport {\r\n  propSizeToCssVars,\r\n  propColorToCssVars,\r\n  effectiveSizeVar,\r\n  toCssVarsStyle,\r\n  type CssVars,\r\n} from '../../../util'\r\nimport { PAGINATION_FALLBACK, type PaginationAlign } from './config'\r\n\r\nexport type { PaginationAlign, PaginationGlobalConfig } from './config'\r\nexport { PAGINATION_FALLBACK } from './config'\r\n\r\nconst ELLIPSIS = '...'\r\n\r\nexport default defineComponent({\r\n  name: 'Pagination',\r\n  components: { Choose, Btn, Tooltip, Num, ChooseItem, Icon },\r\n  props: {\r\n    total: { type: Number, default: 0 },\r\n    pageIndex: { type: Number, default: 1 },\r\n    pageSize: { type: Number, default: 20 },\r\n    sizes: {\r\n      type: Array as PropType<number[]>,\r\n      default: undefined,\r\n    },\r\n    align: {\r\n      type: String as PropType<PaginationAlign>,\r\n      default: undefined,\r\n    },\r\n    bordered: { type: Boolean, default: undefined },\r\n    layout: { type: String, default: undefined },\r\n    hideWhenNoData: { type: Boolean, default: undefined },\r\n    /** 控件视觉高度（px），写入 `--w-prop-pagination-item-size` */\r\n    size: { type: Number, default: undefined },\r\n    /** 品牌主色 → `--w-prop-pagination-color` */\r\n    color: { type: String, default: undefined },\r\n    /** 实例 CSS 变量（如 `--w-prop-pagination-bg-color`） */\r\n    cssVars: { type: Object as PropType<CssVars>, default: undefined },\r\n  },\r\n  emits: {\r\n    'update:pageIndex': (_page: number) => true,\r\n    'update:pageSize': (_size: number) => true,\r\n    changePageIndex: (_page: number) => true,\r\n    changePageSize: (_size: number) => true,\r\n  },\r\n  setup(props, { emit }) {\r\n    const { t } = useUII18n()\r\n    const cfg = useComponentConfig('Pagination', props, PAGINATION_FALLBACK)\r\n\r\n    const outsize = 10\r\n    const max = 5\r\n    const max2 = 7\r\n    const pi = ref(props.pageIndex)\r\n    const ps = ref(props.pageSize)\r\n    const jumpPage = ref<number>()\r\n\r\n    const layoutParts = computed(() =>\r\n      (cfg.value.layout || '')\r\n        .toLocaleLowerCase()\r\n        .split(',')\r\n        .map((s) => s.trim())\r\n        .filter(Boolean),\r\n    )\r\n\r\n    const totalPages = computed(() => {\r\n      if (!props.total || !ps.value) return 0\r\n      return Math.ceil(props.total / ps.value)\r\n    })\r\n\r\n    const pagers = computed(() => {\r\n      const tPages = totalPages.value\r\n      const p = pi.value\r\n      if (tPages <= 0) return [] as (number | string)[]\r\n      if (tPages <= outsize) {\r\n        return Array.from({ length: tPages }, (_, i) => i + 1)\r\n      }\r\n\r\n      const arr: (number | string)[] = []\r\n      if (tPages - p >= max && p > max) {\r\n        for (let i = p - 2; i <= p + 2; i++) arr.push(i)\r\n        arr.push(ELLIPSIS, tPages)\r\n        arr.unshift(1, ELLIPSIS)\r\n      } else if (p <= max) {\r\n        for (let i = 1; i <= max2; i++) arr.push(i)\r\n        arr.push(ELLIPSIS, tPages)\r\n      } else if (tPages - p < max) {\r\n        for (let i = tPages; i > tPages - max2; i--) arr.unshift(i)\r\n        arr.unshift(1, ELLIPSIS)\r\n      }\r\n      return arr\r\n    })\r\n\r\n    watch(\r\n      () => [props.pageIndex, props.pageSize] as const,\r\n      ([i, s]) => {\r\n        pi.value = i\r\n        ps.value = s\r\n      },\r\n    )\r\n\r\n    function emitPageChange() {\r\n      emit('update:pageIndex', pi.value)\r\n      emit('changePageIndex', pi.value)\r\n    }\r\n\r\n    function emitSizeChange(size: number) {\r\n      emit('update:pageSize', size)\r\n      emit('changePageSize', size)\r\n    }\r\n\r\n    function toJump() {\r\n      const p = Number(jumpPage.value)\r\n      if (isNaN(p) || p < 1 || p > totalPages.value) return\r\n      if (p !== pi.value) {\r\n        pi.value = p\r\n        emitPageChange()\r\n      }\r\n    }\r\n\r\n    function toNext() {\r\n      if (pi.value < totalPages.value) {\r\n        pi.value += 1\r\n        emitPageChange()\r\n      }\r\n    }\r\n\r\n    function toPrev() {\r\n      if (pi.value > 1) {\r\n        pi.value -= 1\r\n        emitPageChange()\r\n      }\r\n    }\r\n\r\n    function goPage(page: number) {\r\n      if (page === pi.value) return\r\n      pi.value = page\r\n      nextTick(emitPageChange)\r\n    }\r\n\r\n    function onSizeChange(size: number) {\r\n      ps.value = size\r\n      pi.value = 1\r\n      emitSizeChange(size)\r\n      emitPageChange()\r\n    }\r\n\r\n    function showItem(item: string) {\r\n      return layoutParts.value.includes(item)\r\n    }\r\n\r\n    function setOrder(item: string) {\r\n      return layoutParts.value.indexOf(item)\r\n    }\r\n\r\n    const itemSize = computed(() => cfg.value.size)\r\n\r\n    /** Tooltip portal 脱离树，需把有效尺度写进 layerStyle */\r\n    const tooltipLayerStyle = computed(() =>\r\n      toCssVarsStyle({\r\n        ...propSizeToCssVars('pagination-item', itemSize.value),\r\n        '--w-prop-tooltip-size': effectiveSizeVar('pagination-item'),\r\n      }),\r\n    )\r\n\r\n    function renderNav(\r\n      type: 'prev' | 'next',\r\n      disabled: boolean,\r\n      onClick: () => void,\r\n    ) {\r\n      const tip =\r\n        type === 'prev' ? t('pagination.prevPage') : t('pagination.nextPage')\r\n      return (\r\n        <li\r\n          class={[\r\n            'w-pagination-nav',\r\n            type === 'prev' ? 'w-pagination-prev' : 'w-pagination-next',\r\n          ]}\r\n          style={{ order: setOrder(type) }}>\r\n          <Tooltip\r\n            placement=\"top\"\r\n            layerStyle={tooltipLayerStyle.value}\r\n            v-slots={{\r\n              trigger: () => (\r\n                <button\r\n                  type=\"button\"\r\n                  class={[\r\n                    'w-pagination-item',\r\n                    { 'w-pagination-item--disabled': disabled },\r\n                  ]}\r\n                  disabled={disabled}\r\n                  aria-label={tip}\r\n                  onClick={onClick}>\r\n                  <Icon\r\n                    name=\"w-icon-arrow-down\"\r\n                    rotate\r\n                    direction=\"z\"\r\n                    deg={type === 'prev' ? 90 : -90}\r\n                  />\r\n                </button>\r\n              ),\r\n              default: () => tip,\r\n            }}\r\n          />\r\n        </li>\r\n      )\r\n    }\r\n\r\n    return () => {\r\n      if (props.total === 0 && cfg.value.hideWhenNoData) {\r\n        return null\r\n      }\r\n\r\n      const sizeOptions = cfg.value.sizes?.length\r\n        ? cfg.value.sizes\r\n        : PAGINATION_FALLBACK.sizes\r\n\r\n      const chooseSlots = {\r\n        default: () =>\r\n          sizeOptions.map((s: number) => {\r\n            const label = t('pagination.itemsPerPage', { size: s })\r\n            return (\r\n              <ChooseItem key={s} label={label} value={s}>\r\n                {label}\r\n              </ChooseItem>\r\n            )\r\n          }),\r\n      }\r\n\r\n      const pageButtons = pagers.value.map((p, i) => {\r\n        const isEllipsis = p === ELLIPSIS\r\n        return (\r\n          <button\r\n            key={`${p}-${i}`}\r\n            type=\"button\"\r\n            class={[\r\n              'w-pagination-item',\r\n              {\r\n                'w-pagination-item--ellipsis': isEllipsis,\r\n                'w-pagination-item--disabled': isEllipsis,\r\n                'w-pagination-item--active': p === pi.value,\r\n              },\r\n            ]}\r\n            disabled={isEllipsis}\r\n            aria-current={p === pi.value ? 'page' : undefined}\r\n            onClick={() => {\r\n              if (!isEllipsis && typeof p === 'number') goPage(p)\r\n            }}>\r\n            {p}\r\n          </button>\r\n        )\r\n      })\r\n\r\n      return (\r\n        <ol\r\n          class={[\r\n            'w-pagination',\r\n            `w-pagination__${cfg.value.align}`,\r\n            { 'w-pagination--bordered': cfg.value.bordered },\r\n          ]}\r\n          style={toCssVarsStyle({\r\n            ...propSizeToCssVars('pagination-item', itemSize.value),\r\n            ...propColorToCssVars('pagination', cfg.value.color),\r\n            ...props.cssVars,\r\n          })}>\r\n          {showItem('total') && (\r\n            <li class=\"w-pagination-total\" style={{ order: setOrder('total') }}>\r\n              {t('pagination.totalItems', { total: props.total })}\r\n            </li>\r\n          )}\r\n\r\n          {showItem('prev') && renderNav('prev', pi.value <= 1, toPrev)}\r\n\r\n          {showItem('pager') && (\r\n            <li class=\"w-pagination-pager\" style={{ order: setOrder('pager') }}>\r\n              {pageButtons}\r\n            </li>\r\n          )}\r\n\r\n          {showItem('next') &&\r\n            renderNav(\r\n              'next',\r\n              totalPages.value === 0 || pi.value >= totalPages.value,\r\n              toNext,\r\n            )}\r\n\r\n          {showItem('sizes') && (\r\n            <li class=\"w-pagination-sizes\" style={{ order: setOrder('sizes') }}>\r\n              <Choose\r\n                {...({\r\n                  modelValue: ps.value,\r\n                  clearable: false,\r\n                  size: itemSize.value,\r\n                  mode: cfg.value.bordered ? 'default' : 'text',\r\n                  adjustPosition: 'top',\r\n                  'onUpdate:modelValue': onSizeChange,\r\n                } as any)}\r\n                v-slots={chooseSlots}\r\n              />\r\n            </li>\r\n          )}\r\n\r\n          {showItem('jumper') && (\r\n            <li\r\n              class=\"w-pagination-jumper\"\r\n              style={{ order: setOrder('jumper') }}>\r\n              <span class=\"w-pagination-jumper-label\">\r\n                {t('pagination.goTo')}\r\n              </span>\r\n              <Num\r\n                {...({\r\n                  min: 1,\r\n                  max: totalPages.value || undefined,\r\n                  modelValue: jumpPage.value,\r\n                  size: itemSize.value,\r\n                  'onUpdate:modelValue': (p: number | string | undefined) => {\r\n                    if (p !== undefined && p !== '') {\r\n                      jumpPage.value = Number(p)\r\n                    } else {\r\n                      jumpPage.value = undefined\r\n                    }\r\n                  },\r\n                  onKeyup: (e: KeyboardEvent) => {\r\n                    if (e.key.toLowerCase() === 'enter') toJump()\r\n                  },\r\n                } as any)}\r\n              />\r\n              <span class=\"w-pagination-jumper-label\">\r\n                {t('pagination.page')}\r\n              </span>\r\n              <Btn\r\n                class=\"w-pagination-go\"\r\n                size={itemSize.value}\r\n                onClick={toJump}\r\n                text={t('pagination.go')}\r\n              />\r\n            </li>\r\n          )}\r\n        </ol>\r\n      )\r\n    }\r\n  },\r\n})\r\n"],"mappings":"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"}

package/dist/components/pagination/src/config.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 可通过 `app.use(UI, { components: { Pagination: {...} } })` 配置的项。
+ * Boolean / 可全局覆盖的字段请在 props 设 `default: undefined`。
+ *
+ * 不宜全局配置：total / pageIndex / pageSize（实例数据）。
+ */
+export type PaginationAlign = 'left' | 'center' | 'right';
+export type PaginationGlobalConfig = Partial<{
+    align: PaginationAlign;
+    bordered: boolean;
+    layout: string;
+    sizes: number[];
+    hideWhenNoData: boolean;
+    size: number;
+    color: string;
+}>;
+export declare const PAGINATION_FALLBACK: {
+    align: PaginationAlign;
+    bordered: boolean;
+    layout: string;
+    sizes: number[];
+    hideWhenNoData: boolean;
+    size: number | undefined;
+    color: string | undefined;
+};

package/dist/components/pagination/src/config.js

@@ -0,0 +1,20 @@
+//#region components/pagination/src/config.ts
+var PAGINATION_FALLBACK = {
+	align: "right",
+	bordered: false,
+	layout: "total,prev,pager,next,sizes,jumper",
+	sizes: [
+		20,
+		50,
+		80,
+		100,
+		200
+	],
+	hideWhenNoData: true,
+	size: void 0,
+	color: void 0
+};
+//#endregion
+export { PAGINATION_FALLBACK };
+
+//# sourceMappingURL=config.js.map

package/dist/components/pagination/src/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","names":[],"sources":["../../../../components/pagination/src/config.ts"],"sourcesContent":["/**\r\n * 可通过 `app.use(UI, { components: { Pagination: {...} } })` 配置的项。\r\n * Boolean / 可全局覆盖的字段请在 props 设 `default: undefined`。\r\n *\r\n * 不宜全局配置：total / pageIndex / pageSize（实例数据）。\r\n */\r\nexport type PaginationAlign = 'left' | 'center' | 'right'\r\n\r\nexport type PaginationGlobalConfig = Partial<{\r\n  align: PaginationAlign\r\n  bordered: boolean\r\n  layout: string\r\n  sizes: number[]\r\n  hideWhenNoData: boolean\r\n  size: number\r\n  color: string\r\n}>\r\n\r\nexport const PAGINATION_FALLBACK = {\r\n  align: 'right' as PaginationAlign,\r\n  bordered: false,\r\n  layout: 'total,prev,pager,next,sizes,jumper',\r\n  sizes: [20, 50, 80, 100, 200] as number[],\r\n  hideWhenNoData: true,\r\n  size: undefined as number | undefined,\r\n  color: undefined as string | undefined,\r\n}\r\n"],"mappings":";AAkBA,IAAa,sBAAsB;CACjC,OAAO;CACP,UAAU;CACV,QAAQ;CACR,OAAO;EAAC;EAAI;EAAI;EAAI;EAAK;CAAG;CAC5B,gBAAgB;CAChB,MAAM,KAAA;CACN,OAAO,KAAA;AACT"}

package/dist/components/pagination/src/style/index.css

@@ -0,0 +1 @@
+@import '../../../../theme/tokens/components/pagination.css';

package/dist/components/picture/Picture.d.ts

@@ -0,0 +1,18 @@
+import { CssVars } from '../../util';
+export type { PictureGlobalConfig } from './config';
+export { PICTURE_FALLBACK, normalizePictureImages } from './config';
+export type PictureProps = {
+    /** 图片地址：逗号分隔字符串或数组 */
+    images?: string | string[];
+    size?: number;
+    round?: boolean | string;
+    cssVars?: CssVars;
+};
+export type PictureJSXProps = PictureProps & Omit<JSX.IntrinsicElements['div'], keyof PictureProps | 'ref'>;
+export type PictureComponent = {
+    new (): {
+        $props: PictureJSXProps;
+    };
+};
+declare const _default: PictureComponent;
+export default _default;

package/dist/components/picture/Picture.js

@@ -0,0 +1,254 @@
+import useComponentConfig from "../../use/useComponentConfig.js";
+import Icon_default from "../icon/Icon.js";
+import { propSizeToCssVars, toCssVarsStyle } from "../../util/cssVars.js";
+import useGlobalZIndex from "../../use/useGlobalZIndex.js";
+import useEscStack from "../../use/useEscStack.js";
+import Mask_default from "../mask/Mask.js";
+import Close_default from "../close/Close.js";
+import { useUII18n } from "../../use/useUII18n.js";
+import Toggle_default from "../toggle/Toggle.js";
+import ImageImpl from "../image/Image.js";
+import { createPictureViewport } from "../../use/usePictureViewport.js";
+import { PICTURE_FALLBACK, normalizePictureImages } from "./config.js";
+import { runPictureImgEnter } from "./pictureFlip.js";
+import PictureToolbar from "./PictureToolbar.js";
+import PictureViewport from "./PictureViewport.js";
+import { Fragment, Teleport, computed, createVNode, defineComponent, mergeProps, nextTick, onBeforeUnmount, ref, watch } from "vue";
+//#region components/picture/Picture.tsx
+var INTERACT_SAFE = ".w-picture-viewer__viewport, .w-picture-viewer__img-wrap, .w-picture-viewer__img, .w-picture-viewer__thumb, .w-picture-viewer__nav, .w-picture-viewer__close, .w-picture-viewer__thumbs, .w-picture-viewer__toolbar";
+var PictureImpl = /* @__PURE__ */ defineComponent({
+	name: "Picture",
+	inheritAttrs: false,
+	components: {
+		Image: ImageImpl,
+		Mask: Mask_default,
+		Toggle: Toggle_default,
+		Close: Close_default,
+		Icon: Icon_default,
+		PictureViewport,
+		PictureToolbar
+	},
+	props: {
+		images: {
+			type: [String, Array],
+			default: void 0
+		},
+		size: {
+			type: Number,
+			default: void 0
+		},
+		round: {
+			type: [Boolean, String],
+			default: void 0
+		},
+		cssVars: {
+			type: Object,
+			default: void 0
+		}
+	},
+	emits: {
+		"update:show": (_v) => true,
+		show: (_index) => true,
+		hide: () => true
+	},
+	setup(props, { attrs, emit }) {
+		const cfg = useComponentConfig("Picture", props, PICTURE_FALLBACK);
+		const { t } = useUII18n();
+		const { zIndex, add } = useGlobalZIndex();
+		const show = ref(false);
+		const curIndex = ref(0);
+		const alwaysOneWay = ref(false);
+		const fromRect = ref(null);
+		const interact = ref(false);
+		const viewportApi = ref(null);
+		const viewportController = createPictureViewport();
+		let stopFlip;
+		const list = computed(() => normalizePictureImages(props.images));
+		watch(show, (v) => {
+			emit("update:show", v);
+			if (!v) {
+				emit("hide");
+				stopFlip?.();
+				stopFlip = void 0;
+				fromRect.value = null;
+				interact.value = false;
+				viewportApi.value = null;
+				viewportController.reset();
+			}
+		});
+		watch(curIndex, () => {
+			if (!show.value || !interact.value) return;
+			viewportController.prepareImageChange();
+		});
+		useEscStack(show, () => {
+			show.value = false;
+		}, () => zIndex.value);
+		function enableInteract() {
+			viewportApi.value?.fit(false);
+			interact.value = true;
+		}
+		async function playEnterFlip() {
+			stopFlip?.();
+			stopFlip = void 0;
+			interact.value = false;
+			await nextTick();
+			await new Promise((r) => requestAnimationFrame(() => r()));
+			const el = viewportApi.value?.getFlipEl();
+			const from = fromRect.value;
+			if (!el || !from) {
+				fromRect.value = null;
+				enableInteract();
+				return;
+			}
+			fromRect.value = null;
+			stopFlip = runPictureImgEnter(el, from, { onEnd: () => {
+				enableInteract();
+			} });
+		}
+		function openAt(i, e) {
+			const target = e?.currentTarget ?? null;
+			fromRect.value = target?.getBoundingClientRect() ?? null;
+			viewportController.reset();
+			curIndex.value = i;
+			alwaysOneWay.value = false;
+			interact.value = false;
+			add();
+			show.value = true;
+			emit("show", i);
+			playEnterFlip();
+		}
+		function close() {
+			show.value = false;
+		}
+		function onViewerClick(e) {
+			if (e.target?.closest(INTERACT_SAFE)) return;
+			close();
+		}
+		function onThumbClick(i) {
+			curIndex.value = i;
+			alwaysOneWay.value = false;
+		}
+		function goPrev(prev) {
+			alwaysOneWay.value = true;
+			prev();
+		}
+		function goNext(next) {
+			alwaysOneWay.value = true;
+			next();
+		}
+		function bindViewport(el) {
+			if (el) viewportApi.value = el;
+		}
+		onBeforeUnmount(() => {
+			stopFlip?.();
+		});
+		return () => {
+			const images = list.value;
+			if (!images.length) return null;
+			const rootProps = mergeProps({
+				class: "w-picture",
+				style: toCssVarsStyle({
+					...propSizeToCssVars("picture", cfg.value.size),
+					...props.cssVars
+				})
+			}, attrs);
+			const multi = images.length > 1;
+			return createVNode(Fragment, null, [
+				createVNode("div", rootProps, [images.map((src, i) => createVNode(ImageImpl, {
+					"key": `${src}-${i}`,
+					"class": ["w-picture__thumb", { "is-previewing": show.value && curIndex.value === i }],
+					"src": src,
+					"round": cfg.value.round,
+					"onClick": (e) => openAt(i, e)
+				}, null))]),
+				createVNode(Mask_default, {
+					"show": show.value,
+					"zIndex": zIndex.value,
+					"class": "w-picture-mask",
+					"canCloseByClickSelf": true,
+					"onUpdate:show": (v) => {
+						show.value = v;
+					}
+				}, null),
+				createVNode(Teleport, { "to": "body" }, { default: () => [show.value ? createVNode("div", {
+					"class": "w-picture-viewer",
+					"style": { ["--__w-picture-viewer-z-index"]: zIndex.value + 1 },
+					"onClick": onViewerClick
+				}, [createVNode(Close_default, {
+					"class": "w-picture-viewer__close",
+					"size": 24,
+					"ariaLabel": t("picture.close"),
+					"title": t("picture.close"),
+					"onClick": (e) => {
+						e.stopPropagation();
+						close();
+					}
+				}, null), createVNode(Toggle_default, {
+					"class": "w-picture-viewer__stage",
+					"wheel": false,
+					"index": curIndex.value,
+					"data": images,
+					"itemClass": "w-picture-viewer__item",
+					"transform": "translate",
+					"alwaysOneWay": alwaysOneWay.value,
+					"onUpdate:index": (i) => {
+						curIndex.value = i;
+					}
+				}, {
+					default: ({ item }) => createVNode(PictureViewport, {
+						"key": `${item}-${curIndex.value}`,
+						"ref": bindViewport,
+						"src": item,
+						"interact": interact.value,
+						"controller": viewportController
+					}, null),
+					use: ({ index, prev, next }) => createVNode(Fragment, null, [
+						createVNode(PictureToolbar, {
+							"viewport": viewportApi.value,
+							"disabled": !interact.value
+						}, null),
+						multi ? createVNode("div", { "class": "w-picture-viewer__thumbs" }, [images.map((src, i) => createVNode("img", {
+							"key": `${src}-t-${i}`,
+							"class": ["w-picture-viewer__thumb", { "is-active": i === index }],
+							"src": src,
+							"alt": "",
+							"draggable": false,
+							"onClick": () => onThumbClick(i)
+						}, null))]) : null,
+						multi ? createVNode(Fragment, null, [createVNode(Icon_default, {
+							"class": "w-picture-viewer__nav w-picture-viewer__nav--prev",
+							"name": "w-icon-arrow-down",
+							"rotate": true,
+							"direction": "z",
+							"deg": 90,
+							"size": "var(--w-picture-viewer-nav-size)",
+							"ariaLabel": t("picture.prev"),
+							"title": t("picture.prev"),
+							"onClick": (e) => {
+								e.stopPropagation();
+								goPrev(prev);
+							}
+						}, null), createVNode(Icon_default, {
+							"class": "w-picture-viewer__nav w-picture-viewer__nav--next",
+							"name": "w-icon-arrow-down",
+							"rotate": true,
+							"direction": "z",
+							"deg": -90,
+							"size": "var(--w-picture-viewer-nav-size)",
+							"ariaLabel": t("picture.next"),
+							"title": t("picture.next"),
+							"onClick": (e) => {
+								e.stopPropagation();
+								goNext(next);
+							}
+						}, null)]) : null
+					])
+				})]) : null] })
+			]);
+		};
+	}
+});
+//#endregion
+export { PictureImpl as default };
+
+//# sourceMappingURL=Picture.js.map