gomtm 0.0.322 → 0.0.323

package/dist/esm/curd/list-item/ListViewLayoutRender.d.ts

@@ -0,0 +1,15 @@
+import { PlainMessage } from "@bufbuild/protobuf";
+import { PropsWithChildren } from "react";
+import { ListItem, ListViewLayout, PostCardItem } from "../../gomtmpb/mtm/sppb/mtm_pb";
+export declare const ListViewLayoutRender: (props: {
+    layout: ListViewLayout;
+} & PropsWithChildren) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<import("react").AwaitedReactNode> | import("react").JSX.Element | null | undefined;
+export declare const ListItemView: (props: {
+    item: PlainMessage<ListItem>;
+}) => import("react").JSX.Element | null;
+export declare const PostCardListItem: (props: {
+    item: PostCardItem;
+}) => import("react").JSX.Element;
+export declare const PostCardItemActions: (props: {
+    id: string;
+}) => import("react").JSX.Element;

package/dist/esm/curd/list-item/ListViewLayoutRender.js

@@ -0,0 +1,185 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MtLink } from "mtxuilib/common/mtlink";
+import { Icons } from "mtxuilib/icons/icons";
+import { cn } from "mtxuilib/lib/utils";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "mtxuilib/ui/card";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "mtxuilib/ui/dropdown-menu";
+import { title } from "process";
+import { useState } from "react";
+import { MtDateView } from "../../components/MtDate";
+import Tag from "../../components/Tag";
+import { ListViewLayout } from "../../gomtmpb/mtm/sppb/mtm_pb";
+import { useListview } from "../listview/list-store";
+import { CommonListItemView } from "./CommonListItemView";
+const ListViewLayoutRender = (props) => {
+  const { children } = props;
+  switch (props.layout) {
+    case ListViewLayout.simple:
+      return /* @__PURE__ */ jsx("ul", { className: "divide-y divide-gray-200 dark:divide-gray-700", children });
+    case ListViewLayout.grid:
+      return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 grid-rows-3 gap-4 px-4 lg:grid-cols-3", children });
+    case ListViewLayout.card:
+      return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 grid-rows-3 gap-4 px-4 lg:grid-cols-3", children });
+    default:
+      return children;
+  }
+};
+const ListItemView = (props) => {
+  var _a, _b;
+  const { item } = props;
+  if ((_a = item == null ? void 0 : item.item) == null ? void 0 : _a.value) {
+    const itemCase = ((_b = item.item) == null ? void 0 : _b.case) || "";
+    switch (itemCase) {
+      case "commonListItem":
+        return /* @__PURE__ */ jsx(CommonListItemView, { item: item.item.value });
+      case "postCard":
+        return /* @__PURE__ */ jsx(PostCardListItem, { item: item.item.value });
+      default:
+        return /* @__PURE__ */ jsx("span", { className: "bg-red-600 p-2", children: "unknow list item type" });
+    }
+  }
+  return null;
+};
+const PostCardListItem = (props) => {
+  const { item } = props;
+  const slugPath = useListview((x) => x.slugPath);
+  const activateItem = useListview((x) => x.activateItem);
+  const setActivateItem = useListview((x) => x.setActivateItem);
+  if (item.layoutVariant == "list") {
+    return /* @__PURE__ */ jsx("li", { className: "py-12", children: /* @__PURE__ */ jsx("article", { children: /* @__PURE__ */ jsxs("div", { className: "space-y-2 xl:grid xl:grid-cols-4 xl:items-baseline xl:space-y-0", children: [
+      /* @__PURE__ */ jsxs("dl", { children: [
+        /* @__PURE__ */ jsx("dt", { className: "sr-only", children: "Published on" }),
+        /* @__PURE__ */ jsx("dd", { className: "text-base font-medium leading-6 text-gray-500 dark:text-gray-400", children: /* @__PURE__ */ jsx(MtDateView, { date: item.publishDate }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-5 xl:col-span-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold leading-8 tracking-tight", children: /* @__PURE__ */ jsx(
+              MtLink,
+              {
+                href: `/blog/${item.slug}`,
+                className: "text-gray-900 dark:text-gray-100",
+                children: item.title
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-wrap", children: item.tags.map((tag) => /* @__PURE__ */ jsx(Tag, { text: tag }, tag)) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "prose max-w-none text-gray-500 dark:text-gray-400", children: item.summary })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "text-base font-medium leading-6", children: /* @__PURE__ */ jsx(
+          MtLink,
+          {
+            href: `/blog/${item.slug}`,
+            className: "text-primary-500 hover:text-primary-600 dark:hover:text-primary-400",
+            "aria-label": `Read more: "${title}"`,
+            children: "Read more \u2192"
+          }
+        ) })
+      ] })
+    ] }) }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(
+        "m-2 w-[350px]",
+        item.id == (activateItem == null ? void 0 : activateItem.id) && " p-2 shadow-md"
+      ),
+      onClick: () => {
+        setActivateItem(item);
+      },
+      children: [
+        /* @__PURE__ */ jsxs(CardHeader, { children: [
+          /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx(MtLink, { href: `${slugPath}/${item.id}`, className: "pb-4 text-3xl font-bold hover:text-gray-700", children: item == null ? void 0 : item.title }) }),
+          /* @__PURE__ */ jsx(CardDescription, { children: "Deploy your new project in one-click." })
+        ] }),
+        /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("article", { className: "my-4 flex flex-col", children: [
+          /* @__PURE__ */ jsx(MtLink, {
+            href: `${slugPath}/${item.id}`,
+            className: "hover:opacity-75",
+            // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
+            children: item.topImage && /* @__PURE__ */ jsx("img", { src: item.topImage, alt: item.title })
+          }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-start bg-white p-6", children: [
+            /* @__PURE__ */ jsx(MtLink, { href: `${slugPath}/${item.id}`, className: "pb-4 text-sm font-bold uppercase text-blue-700", children: item.category || "news" }),
+            /* @__PURE__ */ jsxs("p", { className: "pb-3 text-sm", children: [
+              "By ",
+              /* @__PURE__ */ jsx(MtLink, { href: "#", children: item.author }),
+              ","
+            ] }),
+            /* @__PURE__ */ jsx("div", { children: item.excerpt })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs(CardFooter, { className: "flex justify-end", children: [
+          /* @__PURE__ */ jsx(MtLink, { variant: "ghost", href: `${slugPath}/${item.id}`, children: "Show" }),
+          /* @__PURE__ */ jsx(PostCardItemActions, { id: item.id })
+        ] })
+      ]
+    }
+  );
+};
+const PostCardItemActions = (props) => {
+  const { id } = props;
+  const setOpenCreate = useListview((x) => x.setOpenCreate);
+  const setOpenRemove = useListview((x) => x.setOpenRemove);
+  const slugPath = useListview((x) => x.slugPath);
+  const [open, setOpen] = useState(false);
+  const setOpenEdit = useListview((x) => x.setOpenEdit);
+  return /* @__PURE__ */ jsxs(DropdownMenu, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      MtLink,
+      {
+        href: `${slugPath}/${id}`,
+        variant: "ghost",
+        className: "data-[state=open]:bg-muted flex size-8 p-0",
+        children: [
+          /* @__PURE__ */ jsx(Icons.chevronRight, { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "more" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-[160px]", children: [
+      /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          onClick: (e) => {
+            e.preventDefault();
+            setOpenCreate(true);
+            setOpen(false);
+          },
+          children: "create"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          onClick: (e) => {
+            e.preventDefault();
+            setOpenEdit(true);
+            setOpen(false);
+          },
+          children: "edit"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          onClick: (e) => {
+            e.preventDefault();
+            setOpenRemove(true);
+            setOpen(false);
+          },
+          children: "remove"
+        }
+      ),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
+    ] })
+  ] });
+};
+export {
+  ListItemView,
+  ListViewLayoutRender,
+  PostCardItemActions,
+  PostCardListItem
+};

package/dist/esm/curd/listview/CommonListView.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const LzListViewLayoutDemo: import("react").LazyExoticComponent<typeof import("./listview-layouts/listviewlayout-demo").default>;
+export declare const LzListViewLayoutDefault: import("react").LazyExoticComponent<typeof import("./listview-layouts/default").default>;
+export declare function CommonListView(): import("react").JSX.Element | null;
+export declare const ListViewActions: () => import("react").JSX.Element;

package/dist/esm/curd/listview/CommonListView.js

@@ -0,0 +1,114 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Icons } from "mtxuilib/icons/icons";
+import { cn } from "mtxuilib/lib/utils";
+import { Dialog, DialogContent, DialogTitle } from "mtxuilib/ui/dialog";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "mtxuilib/ui/dropdown-menu";
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "mtxuilib/ui/pagination";
+import { MtButton } from "mtxuilib/ui/ui-mt/Button";
+import { Suspense, lazy, useMemo, useState } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
+import { MtmErrorView } from "../../components/MtmErrorView";
+import { HOTKEY_Listview_Switchlayout } from "../../consts";
+import { useGomtmSuspenseInfiniteQuery } from "../../gomtmQuery";
+import { CurdCreatePanelTriggerButton } from "../create/CurdCreatePanel";
+import { CurdEditPanelTriggerButton } from "../edit/CurdEditPanel";
+import { ListItemView, ListViewLayoutRender } from "../list-item/ListViewLayoutRender";
+import { useListview } from "./list-store";
+const ALL_Layouts = [
+  "default",
+  "demo"
+];
+const LzListViewLayoutDemo = lazy(() => import("./listview-layouts/listviewlayout-demo"));
+const LzListViewLayoutDefault = lazy(() => import("./listview-layouts/default"));
+function CommonListView() {
+  const svc = useListview((x) => x.svc);
+  const methodList = useListview((x) => x.methodList);
+  const paramList = useListview((x) => x.paramsList);
+  const listQuery = useGomtmSuspenseInfiniteQuery(svc, methodList, paramList);
+  if (!(listQuery == null ? void 0 : listQuery.data)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "w-full"
+          // 滚动设置
+          // " max-h-[700px] overflow-y-auto"
+        ),
+        children: listQuery.data.pages.map((page, i) => {
+          var _a;
+          if (page.errCode) {
+            return /* @__PURE__ */ jsx(MtmErrorView, { unaryError: page }, i);
+          } else {
+            return /* @__PURE__ */ jsx(ListViewLayoutRender, { layout: page.listLayout, children: (_a = page == null ? void 0 : page.items) == null ? void 0 : _a.map((item, j) => /* @__PURE__ */ jsx(ListItemView, { item }, `${i}-${j}`)) }, i);
+          }
+        })
+      }
+    ),
+    listQuery.data.pages && !!listQuery.data.pages.length && /* @__PURE__ */ jsx(Pagination, { children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
+      /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationPrevious, { href: "#" }) }),
+      /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationLink, { href: "#", children: "1" }) }),
+      /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationLink, { href: "#", isActive: true, children: "2" }) }),
+      /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationLink, { href: "#", children: "3" }) }),
+      /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, {}) }),
+      /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationNext, { href: "#" }) })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "absolute right-1 top-1", children: /* @__PURE__ */ jsx(ListViewActions, {}) })
+  ] });
+}
+const ListViewActions = () => {
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(MtButton, { variant: "ghost", className: "m-0 flex h-10 w-10 items-center justify-center border p-0 shadow-sm backdrop-blur", children: /* @__PURE__ */ jsx(Icons.ellipsis, {}) }) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "w-56", children: [
+      /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Edit" }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsxs("div", { className: "bg-yellow-100 p-2", children: [
+        /* @__PURE__ */ jsx(CurdEditPanelTriggerButton, {}),
+        /* @__PURE__ */ jsx(CurdCreatePanelTriggerButton, {})
+      ] }) }) }) }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
+    ] })
+  ] });
+};
+const ListViewLayout = (props) => {
+  const layout = useListview((x) => x.layout);
+  const { children } = props;
+  const Layout = useMemo(() => {
+    switch (layout) {
+      case "demo":
+        return LzListViewLayoutDemo;
+      default:
+        return LzListViewLayoutDefault;
+    }
+  }, [layout]);
+  return /* @__PURE__ */ jsx(Layout, { children });
+};
+const ListViewLayoutSwitch = () => {
+  const layout = useListview((x) => x.layout);
+  const setLayout = useListview((x) => x.setLayout);
+  const [open, setOpen] = useState(false);
+  useHotkeys(HOTKEY_Listview_Switchlayout, () => {
+    setOpen((pre) => !pre);
+  }, [open, setOpen]);
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+    /* @__PURE__ */ jsxs(DialogTitle, { children: [
+      "LayoutSwitch,",
+      layout
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex gap-2 bg-red-100 p-2", children: ALL_Layouts.map((layout2) => {
+      return /* @__PURE__ */ jsx(MtButton, { onClick: () => {
+        setLayout(layout2);
+        setOpen(false);
+      }, children: layout2 }, layout2);
+    }) })
+  ] }) });
+};
+export {
+  CommonListView,
+  ListViewActions,
+  LzListViewLayoutDefault,
+  LzListViewLayoutDemo
+};

package/dist/esm/curd/listview/ListViewRender.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { CommonListView } from "./ListViewProvider";
+import { CommonListView } from "./CommonListView";
 import { Suspense } from "react";
 import CurdCreatePanel from "../create/CurdCreatePanel";
 import CurdEditPanel from "../edit/CurdEditPanel";