@rxdrag/website-lib 0.0.5 → 0.0.7

package/src/components/PopverPanel.astro

@@ -0,0 +1,22 @@
+---
+import { CSSProperties } from "react";
+import { DATA_POPUP_ROLE, PopupRole } from "@rxdrag/website-lib-core";
+import Popup from "./Popup.astro";
+import { IMotionProps } from "./MotionTypes";
+
+interface Props extends IMotionProps {
+  popupKey?: string;
+  class?: string;
+  style?: string | CSSProperties;
+}
+
+const roleProps = {
+  [DATA_POPUP_ROLE]: PopupRole.PopoverPanel,
+};
+---
+
+<Popup {...roleProps} {...Astro.props}>
+  <slot />
+</Popup>
+
+<script></script>

package/src/components/RichTextView.astro

@@ -0,0 +1,34 @@
+---
+import { mdxToSlate } from "@rxdrag/slate-preview/src/mdx";
+import {
+  LeafPreviewView,
+  slatePreviews,
+  TSlateLeaf,
+} from "@rxdrag/slate-preview";
+import { ElementPreview } from "@rxdrag/slate-preview";
+import { PRODUCT_KEY, ProductCard } from "@rxdrag/website-lib-core";
+
+interface Props {
+  value?: string;
+  class?: string;
+  style?: string | Record<string, string | number>;
+}
+
+const { value = "", class: className, style } = Astro.props;
+const previews = { ...slatePreviews, [PRODUCT_KEY]: ProductCard };
+const nodes = mdxToSlate(value);
+---
+
+<div class={className} style={style}>
+  {
+    nodes?.map((node, index) => {
+      return (
+        <ElementPreview node={node} previews={previews}>
+          {node.children?.map((child) => {
+            return <LeafPreviewView node={child as TSlateLeaf} />;
+          })}
+        </ElementPreview>
+      );
+    })
+  }
+</div>

package/src/components/Tabs.astro

@@ -0,0 +1,124 @@
+---
+import Motion from "./Motion.astro";
+import { IMotionProps } from "./MotionTypes";
+import { DATA_TABS, DATA_TABS_SELECTION } from "./TabsLogic";
+
+interface Props extends IMotionProps {
+  name?: string;
+  class?: string;
+  selection?: number;
+}
+
+const id =
+  Astro.props.name || `tabs-${Math.random().toString(36).substring(2, 9)}`;
+const { selection, ...rest } = Astro.props;
+const dataProps = {
+  [DATA_TABS]: id,
+  [DATA_TABS_SELECTION]: selection || 1,
+};
+---
+
+<Motion {...rest} {...dataProps}>
+  <slot />
+</Motion>
+
+<script>
+  import {
+    onEverySwap,
+    onPageLoaded,
+    select,
+    unselect,
+  } from "@rxdrag/website-lib-core";
+  import {
+    DATA_TABS,
+    DATA_TABS_PANEL,
+    DATA_TABS_SELECTION,
+    DATA_TABS_TAB,
+  } from "./TabsLogic";
+
+  // 使用WeakMap存储Tab的事件处理函数引用
+  const tabHandlers = new WeakMap<HTMLElement, (event: Event) => void>();
+
+  const initTabs = () => {
+    const tabsList = document.querySelectorAll(`[${DATA_TABS}]`);
+    tabsList.forEach((tabs) => {
+      const tabsId = tabs.getAttribute(DATA_TABS);
+      const tabsSelection = tabs.getAttribute(DATA_TABS_SELECTION);
+      const tabsTabs = tabs.querySelectorAll(`[${DATA_TABS_TAB}]`);
+      const tabsPanels = tabs.querySelectorAll(`[${DATA_TABS_PANEL}]`);
+      if (!tabsId) {
+        return;
+      }
+      // 初始化选中标签
+      tabsTabs.forEach((tab, index) => {
+        if (tabsSelection && tabsSelection === (index + 1).toString()) {
+          tab.classList.add("selected");
+        } else {
+          tab.classList.remove("selected");
+        }
+
+        // 先移除旧的事件监听器（如果存在）
+        const oldHandler = tabHandlers.get(tab as HTMLElement);
+        if (oldHandler) {
+          tab.removeEventListener("click", oldHandler);
+        }
+
+        // 给标签添加点击事件
+        const handleTabClick = (event: Event) => {
+          const oldSeledction = tabs.getAttribute(DATA_TABS_SELECTION);
+          const newSelection = (index + 1).toString();
+          // 如果标签已经选中，则不进行操作
+          if (oldSeledction === newSelection) {
+            return;
+          }
+          // 设置选中的标签
+          tabs.setAttribute(DATA_TABS_SELECTION, newSelection);
+          // 发出选中事件
+          select(tabsId, tab as HTMLElement, newSelection);
+          // 移除所有标签的选中状态
+          tabsTabs.forEach((tab, subIndex) => {
+            const tabKey = (subIndex + 1).toString();
+            if (oldSeledction === tabKey) {
+              tab.classList.remove("selected");
+              // 取消选中
+              unselect(tabsId, tab as HTMLElement, tabKey);
+            }
+          });
+          tab.classList.add("selected");
+
+          // 设置选中的面板
+          tabsPanels.forEach((panel, subIndex) => {
+            panel.classList.remove("selected");
+            if (index === subIndex) {
+              panel.classList.add("selected");
+            }
+          });
+        };
+
+        // 保存新的事件处理函数引用
+        tabHandlers.set(tab as HTMLElement, handleTabClick);
+
+        // 添加新的事件监听器
+        tab.addEventListener("click", handleTabClick);
+      });
+
+      // 初始化选中面板
+      tabsPanels.forEach((panel, index) => {
+        if (tabsSelection && tabsSelection === (index + 1).toString()) {
+          panel.classList.add("selected");
+        } else {
+          panel.classList.remove("selected");
+        }
+      });
+    });
+  };
+
+  // 在页面加载和每次页面转场后都初始化Tabs
+  onPageLoaded(() => {
+    initTabs();
+  });
+  
+  onEverySwap(() => {
+    initTabs();
+  });
+</script>

package/src/components/TabsBody.astro

@@ -0,0 +1,19 @@
+---
+import Motion from "./Motion.astro";
+import { IMotionProps } from "./MotionTypes";
+import { DATA_TABS_BODY } from "./TabsLogic";
+
+interface Props extends IMotionProps {
+  name?: string;
+  class?: string;
+  selection?: number;
+}
+
+const dataProps = {
+  [DATA_TABS_BODY]: true,
+};
+---
+
+<Motion {...Astro.props} {...dataProps}>
+  <slot />
+</Motion>

package/src/components/TabsHeader.astro

@@ -0,0 +1,19 @@
+---
+import Motion from "./Motion.astro";
+import { IMotionProps } from "./MotionTypes";
+import { DATA_TABS_HEADER } from "./TabsLogic";
+
+interface Props extends IMotionProps {
+  name?: string;
+  class?: string;
+  selection?: number;
+}
+
+const dataProps = {
+  [DATA_TABS_HEADER]: true,
+};
+---
+
+<Motion as="ul" {...Astro.props} {...dataProps}>
+  <slot />
+</Motion>

package/src/components/TabsLogic.ts

@@ -0,0 +1,10 @@
+export const DATA_TABS = "data-tabs";
+export const DATA_TABS_HEADER = "data-tabs-header";
+export const DATA_TABS_PANEL = "data-tabs-panel";
+export const DATA_TABS_TAB = "data-tabs-tab";
+export const DATA_TABS_BODY = "data-tabs-body";
+//当前选中的选项卡
+export const DATA_TABS_SELECTION = "data-tabs-selection";
+//选中动画,存动画数据
+export const DATA_MOTION_SELECTION = "data-motion-selection";
+export const DATA_MOTION_FLIP = "data-motion-flip";

package/src/components/TabsPanel.astro

@@ -0,0 +1,17 @@
+---
+import { DATA_TABS_PANEL } from "./TabsLogic";
+import Motion from "./Motion.astro";
+import { IMotionProps } from "./MotionTypes";
+
+interface Props extends IMotionProps {
+  class?: string;
+}
+
+const dataProps = {
+  [DATA_TABS_PANEL]: true,
+};
+---
+
+<Motion {...Astro.props} {...dataProps}>
+  <slot />
+</Motion>

package/src/components/TabsTab.astro

@@ -0,0 +1,18 @@
+---
+import { DATA_TABS_TAB } from "./TabsLogic";
+import Motion from "./Motion.astro";
+import { IMotionProps } from "./MotionTypes";
+interface Props extends IMotionProps {
+  class?: string;
+}
+
+const dataProps = {
+  [DATA_TABS_TAB]: true,
+};
+
+const { class: className, ...props } = Astro.props;
+---
+
+<Motion as="li" {...props} {...dataProps} class={className}>
+  <slot />
+</Motion>

package/src/components/index.ts

@@ -0,0 +1,19 @@
+export { default as AnimationNumber } from "./AnimationNumber.astro";
+export { default as AttachmentIcon } from "./AttachmentIcon.astro";
+export { default as Flip } from "./Flip.astro";
+export { default as Link } from "./Link.astro";
+export * from "./LinkLogic";
+export { default as Meta } from "./Meta.astro";
+export { default as Modal } from "./Modal.astro";
+export { default as ModalCloser } from "./ModalCloser.astro";
+export { default as ModalPanel } from "./ModalPanel.astro";
+export { default as ModalTrigger } from "./ModalTrigger.astro";
+export { default as Motion } from "./Motion.astro";
+export { default as Popover } from "./Popover.astro";
+export { default as PopoverPanel } from "./PopverPanel.astro";
+export { default as RichTextView } from "./RichTextView.astro";
+export { default as Tabs } from "./Tabs.astro";
+export { default as TabsBody } from "./TabsBody.astro";
+export { default as TabsHeader } from "./TabsHeader.astro";
+export { default as TabsPanel } from "./TabsPanel.astro";
+export { default as TabsTab } from "./TabsTab.astro";

package/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference path="../.astro/types.d.ts" />

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./components";
+export * from "./lib";

package/src/lib/formatDate.ts

@@ -0,0 +1,15 @@
+/**
+ * 格式化日期为可读字符串
+ * @param date 日期对象或日期字符串
+ * @returns 格式化后的日期字符串，例如：2023年1月1日
+ */
+export function formatDate(date: Date | string | number): string {
+  const d = new Date(date);
+  
+  // 使用 Intl.DateTimeFormat 进行本地化日期格式化
+  return new Intl.DateTimeFormat('zh-CN', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  }).format(d);
+}

package/src/lib/index.ts

@@ -0,0 +1,2 @@
+export * from "./pagination";
+export * from "./formatDate";

package/src/lib/pagination.ts

@@ -0,0 +1,114 @@
+export type PageItem = number | "ellipsis";
+
+export interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  baseUrl: string;
+}
+
+export interface PaginationData {
+  pages: PageItem[];
+  hasPreviousPage: boolean;
+  hasNextPage: boolean;
+  previousPageUrl: string;
+  nextPageUrl: string;
+  pageUrls: Record<number, string>;
+  currentPage: number;
+}
+
+export function generatePagination(current: number, total: number) {
+  const result: PageItem[] = [];
+  const edgePageCount = 1; // 边缘页数
+  const middlePagesSiblingCount = 2; // 中间页数的兄弟数量
+  const totalVisiblePages = edgePageCount * 2 + middlePagesSiblingCount * 2 + 1;
+
+  // 如果总页数较少，直接显示所有页码
+  if (total <= totalVisiblePages) {
+    for (let i = 1; i <= total; i++) {
+      result.push(i);
+    }
+    return result;
+  }
+
+  // 始终显示第一页
+  result.push(1);
+
+  // 计算中间区域的起始和结束
+  let leftIndex = Math.max(
+    edgePageCount + 1,
+    current - middlePagesSiblingCount
+  );
+  let rightIndex = Math.min(
+    total - edgePageCount,
+    current + middlePagesSiblingCount
+  );
+
+  // 调整以保持固定数量的页码
+  if (leftIndex <= edgePageCount + 1) {
+    rightIndex = Math.min(
+      total - edgePageCount,
+      totalVisiblePages - edgePageCount - 1
+    );
+  }
+  if (rightIndex >= total - edgePageCount) {
+    leftIndex = Math.max(
+      edgePageCount + 1,
+      total - totalVisiblePages + edgePageCount + 1
+    );
+  }
+
+  // 添加左省略号
+  if (leftIndex > edgePageCount + 1) {
+    result.push("ellipsis");
+  }
+
+  // 添加中间页码
+  for (let i = leftIndex; i <= rightIndex; i++) {
+    result.push(i);
+  }
+
+  // 添加右省略号
+  if (rightIndex < total - edgePageCount) {
+    result.push("ellipsis");
+  }
+
+  // 始终显示最后一页
+  if (total > 1) {
+    result.push(total);
+  }
+
+  return result;
+}
+
+export function paginate(props: PaginationProps): PaginationData {
+  const { currentPage, totalPages, baseUrl } = props;
+
+  // 生成页码数组
+  const pages = generatePagination(currentPage, totalPages);
+
+  // 判断是否有上一页和下一页
+  const hasPreviousPage = currentPage > 1;
+  const hasNextPage = currentPage < totalPages;
+
+  // 生成上一页和下一页的URL
+  const previousPageUrl = `${baseUrl}${currentPage - 1}`;
+  const nextPageUrl = `${baseUrl}${currentPage + 1}`;
+
+  // 生成每个页码对应的URL
+  const pageUrls: Record<number, string> = {};
+  pages.forEach((page) => {
+    if (typeof page === "number") {
+      pageUrls[page] = `${baseUrl}${page}`;
+    }
+  });
+
+  return {
+    pages,
+    hasPreviousPage,
+    hasNextPage,
+    previousPageUrl,
+    nextPageUrl,
+    pageUrls,
+    currentPage,
+  };
+}

package/dist/_astro/client.D-vx6DWE.js

@@ -1,170 +0,0 @@
-import { createElement, startTransition } from 'react';
-import require$$0 from 'react-dom';
-
-var hydrateRoot;
-var createRoot;
-
-var m = require$$0;
-if (process.env.NODE_ENV === 'production') {
-  createRoot = m.createRoot;
-  hydrateRoot = m.hydrateRoot;
-} else {
-  var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-  createRoot = function(c, o) {
-    i.usingClientEntryPoint = true;
-    try {
-      return m.createRoot(c, o);
-    } finally {
-      i.usingClientEntryPoint = false;
-    }
-  };
-  hydrateRoot = function(c, h, o) {
-    i.usingClientEntryPoint = true;
-    try {
-      return m.hydrateRoot(c, h, o);
-    } finally {
-      i.usingClientEntryPoint = false;
-    }
-  };
-}
-
-/**
- * Astro passes `children` as a string of HTML, so we need
- * a wrapper `div` to render that content as VNodes.
- *
- * As a bonus, we can signal to React that this subtree is
- * entirely static and will never change via `shouldComponentUpdate`.
- */
-const StaticHtml = ({ value, name, hydrate = true }) => {
-	if (!value) return null;
-	const tagName = hydrate ? 'astro-slot' : 'astro-static-slot';
-	return createElement(tagName, {
-		name,
-		suppressHydrationWarning: true,
-		dangerouslySetInnerHTML: { __html: value },
-	});
-};
-
-/**
- * This tells React to opt-out of re-rendering this subtree,
- * In addition to being a performance optimization,
- * this also allows other frameworks to attach to `children`.
- *
- * See https://preactjs.com/guide/v8/external-dom-mutations
- */
-StaticHtml.shouldComponentUpdate = () => false;
-
-function isAlreadyHydrated(element) {
-	for (const key in element) {
-		if (key.startsWith('__reactContainer')) {
-			return key;
-		}
-	}
-}
-
-function createReactElementFromDOMElement(element) {
-	let attrs = {};
-	for (const attr of element.attributes) {
-		attrs[attr.name] = attr.value;
-	}
-	// If the element has no children, we can create a simple React element
-	if (element.firstChild === null) {
-		return createElement(element.localName, attrs);
-	}
-
-	return createElement(
-		element.localName,
-		attrs,
-		Array.from(element.childNodes)
-			.map((c) => {
-				if (c.nodeType === Node.TEXT_NODE) {
-					return c.data;
-				} else if (c.nodeType === Node.ELEMENT_NODE) {
-					return createReactElementFromDOMElement(c);
-				} else {
-					return undefined;
-				}
-			})
-			.filter((a) => !!a),
-	);
-}
-
-function getChildren(childString, experimentalReactChildren) {
-	if (experimentalReactChildren && childString) {
-		let children = [];
-		let template = document.createElement('template');
-		template.innerHTML = childString;
-		for (let child of template.content.children) {
-			children.push(createReactElementFromDOMElement(child));
-		}
-		return children;
-	} else if (childString) {
-		return createElement(StaticHtml, { value: childString });
-	} else {
-		return undefined;
-	}
-}
-
-// Keep a map of roots so we can reuse them on re-renders
-let rootMap = new WeakMap();
-const getOrCreateRoot = (element, creator) => {
-	let root = rootMap.get(element);
-	if (!root) {
-		root = creator();
-		rootMap.set(element, root);
-	}
-	return root;
-};
-
-const client = (element) =>
-	(Component, props, { default: children, ...slotted }, { client }) => {
-		if (!element.hasAttribute('ssr')) return;
-
-		const actionKey = element.getAttribute('data-action-key');
-		const actionName = element.getAttribute('data-action-name');
-		const stringifiedActionResult = element.getAttribute('data-action-result');
-
-		const formState =
-			actionKey && actionName && stringifiedActionResult
-				? [JSON.parse(stringifiedActionResult), actionKey, actionName]
-				: undefined;
-
-		const renderOptions = {
-			identifierPrefix: element.getAttribute('prefix'),
-			formState,
-		};
-		for (const [key, value] of Object.entries(slotted)) {
-			props[key] = createElement(StaticHtml, { value, name: key });
-		}
-
-		const componentEl = createElement(
-			Component,
-			props,
-			getChildren(children, element.hasAttribute('data-react-children')),
-		);
-		const rootKey = isAlreadyHydrated(element);
-		// HACK: delete internal react marker for nested components to suppress aggressive warnings
-		if (rootKey) {
-			delete element[rootKey];
-		}
-		if (client === 'only') {
-			return startTransition(() => {
-				const root = getOrCreateRoot(element, () => {
-					const r = createRoot(element);
-					element.addEventListener('astro:unmount', () => r.unmount(), { once: true });
-					return r;
-				});
-				root.render(componentEl);
-			});
-		}
-		startTransition(() => {
-			const root = getOrCreateRoot(element, () => {
-				const r = hydrateRoot(element, componentEl, renderOptions);
-				element.addEventListener('astro:unmount', () => r.unmount(), { once: true });
-				return r;
-			});
-			root.render(componentEl);
-		});
-	};
-
-export { client as default };