lkb-fields-document 1.0.0

package/dist/layouts-e653b908.node.esm.js

@@ -0,0 +1,189 @@
+'use client';
+import { createContext, useContext, useMemo } from 'react';
+import { Transforms } from 'slate';
+import { useSlateStatic, ReactEditor } from 'slate-react';
+import { Icon } from '@keystar/ui/icon';
+import { columnsIcon } from '@keystar/ui/icon/icons/columnsIcon';
+import { trash2Icon } from '@keystar/ui/icon/icons/trash2Icon';
+import { j as isElementActive } from './utils-200ff260.node.esm.js';
+import { j as blockElementSpacing, B as BlockPopoverTrigger, c as BlockPopover, d as useToolbarState } from './toolbar-state-945823b8.node.esm.js';
+import { i as insertLayout } from './shared-5e864055.node.esm.js';
+import { css, tokenSchema } from '@keystar/ui/style';
+import { ActionGroup } from '@keystar/ui/action-group';
+import { ActionButton } from '@keystar/ui/button';
+import { Flex } from '@keystar/ui/layout';
+import { Item } from '@keystar/ui/tag';
+import { TooltipTrigger, Tooltip } from '@keystar/ui/tooltip';
+import { EditorToolbarButton } from '@keystar/ui/editor';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '@keystar/ui/typography';
+import './api-c32e360e.node.esm.js';
+import 'lkb-core';
+import '@keystar/ui/drag-and-drop';
+import './index-586adb8f.node.esm.js';
+import '@braintree/sanitize-url';
+import '@react-aria/i18n';
+import '@keystar/ui/number-field';
+import '@keystar/ui/picker';
+import '@keystar/ui/combobox';
+import '@keystar/ui/text-field';
+import '@keystar/ui/checkbox';
+import './form-from-preview-5df6e492.node.esm.js';
+import 'lkb-core/admin-ui/context';
+import 'lkb-core/fields/types/relationship/views';
+import 'lkb-core/admin-ui/utils';
+import '@keystar/ui/dialog';
+import '@keystar/ui/field';
+import '@keystar/ui/list-view';
+import '@keystar/ui/slots';
+import '@keystar/ui/icon/icons/trashIcon';
+import '@react-aria/overlays';
+import '@react-aria/utils';
+import '@react-stately/overlays';
+import '@keystar/ui/overlays';
+import '@emotion/weak-memoize';
+import './layouts-e653b908.node.esm.js';
+
+const LayoutOptionsContext = /*#__PURE__*/createContext([]);
+const LayoutOptionsProvider = LayoutOptionsContext.Provider;
+
+// UI Components
+const LayoutContainer = ({
+  attributes,
+  children,
+  element
+}) => {
+  const editor = useSlateStatic();
+  const layout = element.layout;
+  const layoutOptions = useContext(LayoutOptionsContext);
+  const currentLayoutIndex = layoutOptions.findIndex(x => x.toString() === layout.toString());
+  return /*#__PURE__*/jsx("div", {
+    className: blockElementSpacing,
+    ...attributes,
+    children: /*#__PURE__*/jsxs(BlockPopoverTrigger, {
+      element: element,
+      children: [/*#__PURE__*/jsx("div", {
+        className: css({
+          columnGap: tokenSchema.size.space.regular,
+          display: 'grid'
+        }),
+        style: {
+          gridTemplateColumns: layout.map(x => `${x}fr`).join(' ')
+        },
+        children: children
+      }), /*#__PURE__*/jsx(BlockPopover, {
+        children: /*#__PURE__*/jsxs(Flex, {
+          padding: "regular",
+          gap: "regular",
+          children: [/*#__PURE__*/jsx(ActionGroup, {
+            selectionMode: "single",
+            prominence: "low",
+            density: "compact",
+            onAction: key => {
+              const path = ReactEditor.findPath(editor, element);
+              const layoutOption = layoutOptions[key];
+              Transforms.setNodes(editor, {
+                type: 'layout',
+                layout: layoutOption
+              }, {
+                at: path
+              });
+              ReactEditor.focus(editor);
+            },
+            selectedKeys: currentLayoutIndex !== -1 ? [currentLayoutIndex.toString()] : [],
+            children: layoutOptions.map((layoutOption, i) => /*#__PURE__*/jsx(Item, {
+              children: makeLayoutIcon(layoutOption)
+            }, i))
+          }), /*#__PURE__*/jsxs(TooltipTrigger, {
+            children: [/*#__PURE__*/jsx(ActionButton, {
+              prominence: "low",
+              onPress: () => {
+                const path = ReactEditor.findPath(editor, element);
+                Transforms.removeNodes(editor, {
+                  at: path
+                });
+              },
+              children: /*#__PURE__*/jsx(Icon, {
+                src: trash2Icon
+              })
+            }), /*#__PURE__*/jsx(Tooltip, {
+              tone: "critical",
+              children: "\u5220\u9664"
+            })]
+          })]
+        })
+      })]
+    })
+  });
+};
+const LayoutArea = ({
+  attributes,
+  children
+}) => {
+  return /*#__PURE__*/jsx("div", {
+    className: css({
+      borderColor: tokenSchema.color.border.neutral,
+      borderRadius: tokenSchema.size.radius.regular,
+      borderStyle: 'dashed',
+      borderWidth: tokenSchema.size.border.regular,
+      padding: tokenSchema.size.space.medium
+    }),
+    ...attributes,
+    children: children
+  });
+};
+function makeLayoutIcon(ratios) {
+  const size = 16;
+  const element = /*#__PURE__*/jsx("div", {
+    role: "img",
+    className: css({
+      display: 'grid',
+      gridTemplateColumns: ratios.map(r => `${r}fr`).join(' '),
+      gap: 2,
+      width: size,
+      height: size
+    }),
+    children: ratios.map((_, i) => {
+      return /*#__PURE__*/jsx("div", {
+        className: css({
+          backgroundColor: 'currentcolor',
+          borderRadius: 1
+        })
+      }, i);
+    })
+  });
+  return element;
+}
+const layoutsIcon = /*#__PURE__*/jsx(Icon, {
+  src: columnsIcon
+});
+const LayoutsButton = ({
+  layouts
+}) => {
+  const {
+    editor,
+    layouts: {
+      isSelected
+    }
+  } = useToolbarState();
+  return useMemo(() => /*#__PURE__*/jsxs(TooltipTrigger, {
+    children: [/*#__PURE__*/jsx(EditorToolbarButton, {
+      isSelected: isSelected,
+      onPress: () => {
+        if (isElementActive(editor, 'layout')) {
+          Transforms.unwrapNodes(editor, {
+            match: node => node.type === 'layout'
+          });
+        } else {
+          insertLayout(editor, layouts[0]);
+        }
+        ReactEditor.focus(editor);
+      },
+      children: layoutsIcon
+    }), /*#__PURE__*/jsx(Tooltip, {
+      children: "\u5E03\u5C40"
+    })]
+  }), [editor, isSelected, layouts]);
+};
+
+export { LayoutArea, LayoutContainer, LayoutOptionsProvider, LayoutsButton };

package/dist/lkb-fields-document.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./declarations/src/index.js";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGtiLWZpZWxkcy1kb2N1bWVudC5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4vZGVjbGFyYXRpb25zL3NyYy9pbmRleC5kLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIn0=