@lobehub/ui 5.9.1 → 5.9.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -18,7 +18,7 @@ const styles = createStaticStyles(({ cssVar, css }) => {
|
|
|
18
18
|
|
|
19
19
|
font-size: var(--lobe-markdown-font-size);
|
|
20
20
|
line-height: var(--lobe-markdown-line-height);
|
|
21
|
-
|
|
21
|
+
overflow-wrap: break-word;
|
|
22
22
|
`;
|
|
23
23
|
const a = css`
|
|
24
24
|
a {
|
|
@@ -54,7 +54,7 @@ const styles = createStaticStyles(({ cssVar, css }) => {
|
|
|
54
54
|
font-family: ${cssVar.fontFamilyCode};
|
|
55
55
|
font-size: 0.875em;
|
|
56
56
|
line-height: 1;
|
|
57
|
-
|
|
57
|
+
overflow-wrap: break-word;
|
|
58
58
|
white-space: break-spaces;
|
|
59
59
|
|
|
60
60
|
background: ${cssVar.colorFillSecondary};
|
|
@@ -295,11 +295,10 @@ const styles = createStaticStyles(({ cssVar, css }) => {
|
|
|
295
295
|
word-break: auto-phrase;
|
|
296
296
|
overflow-wrap: break-word;
|
|
297
297
|
|
|
298
|
-
background: ${cssVar.colorFillQuaternary};
|
|
299
298
|
box-shadow: 0 0 0 1px ${cssVar.colorBorderSecondary};
|
|
300
299
|
|
|
301
300
|
code {
|
|
302
|
-
|
|
301
|
+
overflow-wrap: break-word;
|
|
303
302
|
}
|
|
304
303
|
|
|
305
304
|
thead {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"markdown.style.mjs","names":[],"sources":["../../src/Markdown/markdown.style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nconst IGNORE_CLASSNAME = '.ignore-markdown-style';\n\nexport const styles = createStaticStyles(({ cssVar, css }) => {\n const __root = css`\n --lobe-markdown-font-size: 16px;\n --lobe-markdown-header-multiple: 1;\n --lobe-markdown-margin-multiple: 2;\n --lobe-markdown-line-height: 1.8;\n --lobe-markdown-border-radius: ${cssVar.borderRadiusLG};\n --lobe-markdown-border-color: ${cssVar.colorFillQuaternary};\n\n position: relative;\n\n width: 100%;\n max-width: 100%;\n padding-inline: 1px;\n\n font-size: var(--lobe-markdown-font-size);\n line-height: var(--lobe-markdown-line-height);\n word-break: break-word;\n `;\n const a = css`\n a {\n color: ${cssVar.colorInfoText};\n\n &:hover {\n color: ${cssVar.colorInfoHover};\n }\n }\n `;\n\n const blockquote = css`\n blockquote {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n margin-inline: 0;\n padding-block: 0;\n padding-inline: 1em;\n border-inline-start: solid 4px ${cssVar.colorBorder};\n\n color: ${cssVar.colorTextSecondary};\n }\n `;\n\n const code = css`\n code {\n &:not(:has(span)) {\n display: inline;\n\n margin-inline: 0.25em;\n padding-block: 0.2em;\n padding-inline: 0.4em;\n border: 1px solid var(--lobe-markdown-border-color);\n border-radius: 0.25em;\n\n font-family: ${cssVar.fontFamilyCode};\n font-size: 0.875em;\n line-height: 1;\n word-break: break-word;\n white-space: break-spaces;\n\n background: ${cssVar.colorFillSecondary};\n }\n }\n `;\n\n const del = css`\n del {\n color: ${cssVar.colorTextDescription};\n text-decoration: line-through;\n }\n `;\n\n const details = css`\n details {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n padding-block: 0.75em;\n padding-inline: 1em;\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n\n background: ${cssVar.colorFillTertiary};\n box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n\n summary {\n cursor: pointer;\n display: flex;\n align-items: center;\n list-style: none;\n\n &::before {\n content: '';\n\n position: absolute;\n inset-inline-end: 1.25em;\n transform: rotateZ(-45deg);\n\n display: block;\n\n width: 0.4em;\n height: 0.4em;\n border-block-end: 1.5px solid ${cssVar.colorTextSecondary};\n border-inline-end: 1.5px solid ${cssVar.colorTextSecondary};\n\n font-family: ${cssVar.fontFamily};\n\n transition: transform 200ms ${cssVar.motionEaseOut};\n }\n }\n\n &[open] {\n summary {\n padding-block-end: 0.75em;\n border-block-end: 1px dashed ${cssVar.colorBorder};\n\n &::before {\n transform: rotateZ(45deg);\n }\n }\n }\n }\n `;\n const header = css`\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin-block: max(\n calc(var(--lobe-markdown-header-multiple) * var(--lobe-markdown-margin-multiple) * 0.4em),\n var(--lobe-markdown-font-size)\n );\n font-weight: bold;\n line-height: 1.25;\n }\n\n h1 {\n font-size: calc(\n var(--lobe-markdown-font-size) * (1 + 1.5 * var(--lobe-markdown-header-multiple))\n );\n }\n\n h2 {\n font-size: calc(var(--lobe-markdown-font-size) * (1 + var(--lobe-markdown-header-multiple)));\n }\n\n h3 {\n font-size: calc(\n var(--lobe-markdown-font-size) * (1 + 0.5 * var(--lobe-markdown-header-multiple))\n );\n }\n\n h4 {\n font-size: calc(\n var(--lobe-markdown-font-size) * (1 + 0.25 * var(--lobe-markdown-header-multiple))\n );\n }\n\n h5,\n h6 {\n font-size: calc(var(--lobe-markdown-font-size) * 1);\n }\n `;\n const hr = css`\n hr {\n width: 100%;\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 1.5em);\n border-color: ${cssVar.colorBorder};\n border-style: dashed;\n border-width: 1px;\n border-block-start: none;\n border-inline-start: none;\n border-inline-end: none;\n }\n `;\n const img = css`\n img {\n max-width: 100%;\n }\n\n > img,\n > p > img {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n }\n `;\n\n const list = css`\n li {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.33em);\n\n p:first-child {\n display: inline;\n }\n }\n\n ul,\n ol {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n margin-inline-start: 1em;\n padding-inline-start: 0;\n list-style-position: outside;\n\n > ul,\n > ol {\n margin-block: 0;\n }\n\n > li {\n margin-inline-start: 1em;\n }\n }\n\n ol {\n list-style: auto;\n }\n\n ul {\n list-style-type: none;\n\n > li {\n &::before {\n content: '-';\n\n position: absolute;\n\n display: inline-block;\n\n margin-inline: -1em 0.5em;\n\n opacity: 0.5;\n }\n }\n }\n\n .task-list-item {\n &::before {\n display: none !important;\n }\n\n input[type='checkbox'] {\n margin-block: 0 0.25em;\n margin-inline: -1.6em 0.2em;\n vertical-align: middle;\n }\n\n input[type='checkbox']:dir(rtl) {\n margin: 0 -1.6em 0.25em 0.2em;\n }\n }\n `;\n const p = css`\n p {\n margin-block: 4px;\n line-height: var(--lobe-markdown-line-height);\n letter-spacing: 0.02em;\n\n &:not(:first-child) {\n margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n }\n\n &:not(:last-child) {\n margin-block-end: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n }\n }\n `;\n const pre = css`\n pre {\n font-size: calc(var(--lobe-markdown-font-size) * 0.85);\n }\n `;\n const strong = css`\n strong {\n font-weight: 600;\n }\n `;\n const svg = css`\n svg {\n line-height: 1;\n }\n `;\n const table = css`\n table {\n unicode-bidi: isolate;\n overflow: auto hidden;\n display: block;\n border-spacing: 0;\n border-collapse: collapse;\n\n box-sizing: border-box;\n width: max-content;\n max-width: 100%;\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n\n text-align: start;\n text-indent: initial;\n text-wrap: pretty;\n word-break: auto-phrase;\n overflow-wrap: break-word;\n\n background: ${cssVar.colorFillQuaternary};\n box-shadow: 0 0 0 1px ${cssVar.colorBorderSecondary};\n\n code {\n word-break: break-word;\n }\n\n thead {\n background: ${cssVar.colorFillQuaternary};\n }\n\n tr {\n box-shadow: 0 1px 0 ${cssVar.colorBorderSecondary};\n }\n\n th,\n td {\n min-width: 120px;\n padding-block: 0.75em;\n padding-inline: 1em;\n text-align: start;\n }\n }\n `;\n const video = css`\n > video,\n > p > video {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n }\n\n video {\n max-width: 100%;\n }\n `;\n\n const footnote = css`\n .footnotes {\n margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 1em);\n font-size: smaller;\n color: #8b949e;\n\n #footnote-label {\n display: none;\n }\n\n > ol {\n margin: 0 !important;\n }\n }\n `;\n\n const sup = css`\n sup {\n position: relative;\n inset-block-start: -0.25em;\n\n font-size: 0.75em;\n line-height: var(--lobe-markdown-line-height);\n vertical-align: baseline;\n }\n `;\n\n const sub = css`\n sub {\n position: relative;\n inset-block-end: -0.25em;\n\n font-size: 0.75em;\n line-height: var(--lobe-markdown-line-height);\n vertical-align: baseline;\n }\n `;\n\n return {\n root: css`\n :not(:has(${IGNORE_CLASSNAME})),\n .markdown {\n ${[\n __root,\n a,\n blockquote,\n code,\n del,\n details,\n header,\n hr,\n img,\n list,\n p,\n pre,\n strong,\n svg,\n table,\n video,\n footnote,\n sub,\n sup,\n ]}\n }\n `,\n };\n});\n"],"mappings":";;AAEA,MAAM,mBAAmB;AAEzB,MAAa,SAAS,oBAAoB,EAAE,QAAQ,UAAU;CAC5D,MAAM,SAAS,GAAG;;;;;qCAKiB,OAAO,eAAe;oCACvB,OAAO,oBAAoB;;;;;;;;;;;;CAY7D,MAAM,IAAI,GAAG;;eAEA,OAAO,cAAc;;;iBAGnB,OAAO,eAAe;;;;CAKrC,MAAM,aAAa,GAAG;;;;;;uCAMe,OAAO,YAAY;;eAE3C,OAAO,mBAAmB;;;CAIvC,MAAM,OAAO,GAAG;;;;;;;;;;;uBAWK,OAAO,eAAe;;;;;;sBAMvB,OAAO,mBAAmB;;;;CAK9C,MAAM,MAAM,GAAG;;eAEF,OAAO,qBAAqB;;;;CAKzC,MAAM,UAAU,GAAG;;;;;;;oBAOD,OAAO,kBAAkB;;;;;;;;;;;;;;;;;;;;0CAoBH,OAAO,mBAAmB;2CACzB,OAAO,mBAAmB;;yBAE5C,OAAO,WAAW;;wCAEH,OAAO,cAAc;;;;;;;yCAOpB,OAAO,YAAY;;;;;;;;;CAS1D,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ClB,MAAM,KAAK,GAAG;;;;sBAIM,OAAO,YAAY;;;;;;;;CAQvC,MAAM,MAAM,GAAG;;;;;;;;;;;;CAaf,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEhB,MAAM,IAAI,GAAG;;;;;;;;;;;;;;;CAeb,MAAM,MAAM,GAAG;;;;;CAKf,MAAM,SAAS,GAAG;;;;;CAKlB,MAAM,MAAM,GAAG;;;;;CAKf,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;;;;;;;oBAoBC,OAAO,oBAAoB;8BACjB,OAAO,qBAAqB;;;;;;;sBAOpC,OAAO,oBAAoB;;;;8BAInB,OAAO,qBAAqB;;;;;;;;;;;;CAYxD,MAAM,QAAQ,GAAG;;;;;;;;;;;;CAajB,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;CAgBpB,MAAM,MAAM,GAAG;;;;;;;;;;AAsBf,QAAO,EACL,MAAM,GAAG;kBACK,iBAAiB;;UAEzB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAhCI,GAAG;;;;;;;;;;EAkCP;EACD,CAAC;;OAGP;EACD"}
|
|
1
|
+
{"version":3,"file":"markdown.style.mjs","names":[],"sources":["../../src/Markdown/markdown.style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nconst IGNORE_CLASSNAME = '.ignore-markdown-style';\n\nexport const styles = createStaticStyles(({ cssVar, css }) => {\n const __root = css`\n --lobe-markdown-font-size: 16px;\n --lobe-markdown-header-multiple: 1;\n --lobe-markdown-margin-multiple: 2;\n --lobe-markdown-line-height: 1.8;\n --lobe-markdown-border-radius: ${cssVar.borderRadiusLG};\n --lobe-markdown-border-color: ${cssVar.colorFillQuaternary};\n\n position: relative;\n\n width: 100%;\n max-width: 100%;\n padding-inline: 1px;\n\n font-size: var(--lobe-markdown-font-size);\n line-height: var(--lobe-markdown-line-height);\n overflow-wrap: break-word;\n `;\n const a = css`\n a {\n color: ${cssVar.colorInfoText};\n\n &:hover {\n color: ${cssVar.colorInfoHover};\n }\n }\n `;\n\n const blockquote = css`\n blockquote {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n margin-inline: 0;\n padding-block: 0;\n padding-inline: 1em;\n border-inline-start: solid 4px ${cssVar.colorBorder};\n\n color: ${cssVar.colorTextSecondary};\n }\n `;\n\n const code = css`\n code {\n &:not(:has(span)) {\n display: inline;\n\n margin-inline: 0.25em;\n padding-block: 0.2em;\n padding-inline: 0.4em;\n border: 1px solid var(--lobe-markdown-border-color);\n border-radius: 0.25em;\n\n font-family: ${cssVar.fontFamilyCode};\n font-size: 0.875em;\n line-height: 1;\n overflow-wrap: break-word;\n white-space: break-spaces;\n\n background: ${cssVar.colorFillSecondary};\n }\n }\n `;\n\n const del = css`\n del {\n color: ${cssVar.colorTextDescription};\n text-decoration: line-through;\n }\n `;\n\n const details = css`\n details {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n padding-block: 0.75em;\n padding-inline: 1em;\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n\n background: ${cssVar.colorFillTertiary};\n box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n\n summary {\n cursor: pointer;\n display: flex;\n align-items: center;\n list-style: none;\n\n &::before {\n content: '';\n\n position: absolute;\n inset-inline-end: 1.25em;\n transform: rotateZ(-45deg);\n\n display: block;\n\n width: 0.4em;\n height: 0.4em;\n border-block-end: 1.5px solid ${cssVar.colorTextSecondary};\n border-inline-end: 1.5px solid ${cssVar.colorTextSecondary};\n\n font-family: ${cssVar.fontFamily};\n\n transition: transform 200ms ${cssVar.motionEaseOut};\n }\n }\n\n &[open] {\n summary {\n padding-block-end: 0.75em;\n border-block-end: 1px dashed ${cssVar.colorBorder};\n\n &::before {\n transform: rotateZ(45deg);\n }\n }\n }\n }\n `;\n const header = css`\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin-block: max(\n calc(var(--lobe-markdown-header-multiple) * var(--lobe-markdown-margin-multiple) * 0.4em),\n var(--lobe-markdown-font-size)\n );\n font-weight: bold;\n line-height: 1.25;\n }\n\n h1 {\n font-size: calc(\n var(--lobe-markdown-font-size) * (1 + 1.5 * var(--lobe-markdown-header-multiple))\n );\n }\n\n h2 {\n font-size: calc(var(--lobe-markdown-font-size) * (1 + var(--lobe-markdown-header-multiple)));\n }\n\n h3 {\n font-size: calc(\n var(--lobe-markdown-font-size) * (1 + 0.5 * var(--lobe-markdown-header-multiple))\n );\n }\n\n h4 {\n font-size: calc(\n var(--lobe-markdown-font-size) * (1 + 0.25 * var(--lobe-markdown-header-multiple))\n );\n }\n\n h5,\n h6 {\n font-size: calc(var(--lobe-markdown-font-size) * 1);\n }\n `;\n const hr = css`\n hr {\n width: 100%;\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 1.5em);\n border-color: ${cssVar.colorBorder};\n border-style: dashed;\n border-width: 1px;\n border-block-start: none;\n border-inline-start: none;\n border-inline-end: none;\n }\n `;\n const img = css`\n img {\n max-width: 100%;\n }\n\n > img,\n > p > img {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n }\n `;\n\n const list = css`\n li {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.33em);\n\n p:first-child {\n display: inline;\n }\n }\n\n ul,\n ol {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n margin-inline-start: 1em;\n padding-inline-start: 0;\n list-style-position: outside;\n\n > ul,\n > ol {\n margin-block: 0;\n }\n\n > li {\n margin-inline-start: 1em;\n }\n }\n\n ol {\n list-style: auto;\n }\n\n ul {\n list-style-type: none;\n\n > li {\n &::before {\n content: '-';\n\n position: absolute;\n\n display: inline-block;\n\n margin-inline: -1em 0.5em;\n\n opacity: 0.5;\n }\n }\n }\n\n .task-list-item {\n &::before {\n display: none !important;\n }\n\n input[type='checkbox'] {\n margin-block: 0 0.25em;\n margin-inline: -1.6em 0.2em;\n vertical-align: middle;\n }\n\n input[type='checkbox']:dir(rtl) {\n margin: 0 -1.6em 0.25em 0.2em;\n }\n }\n `;\n const p = css`\n p {\n margin-block: 4px;\n line-height: var(--lobe-markdown-line-height);\n letter-spacing: 0.02em;\n\n &:not(:first-child) {\n margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n }\n\n &:not(:last-child) {\n margin-block-end: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n }\n }\n `;\n const pre = css`\n pre {\n font-size: calc(var(--lobe-markdown-font-size) * 0.85);\n }\n `;\n const strong = css`\n strong {\n font-weight: 600;\n }\n `;\n const svg = css`\n svg {\n line-height: 1;\n }\n `;\n const table = css`\n table {\n unicode-bidi: isolate;\n overflow: auto hidden;\n display: block;\n border-spacing: 0;\n border-collapse: collapse;\n\n box-sizing: border-box;\n width: max-content;\n max-width: 100%;\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n\n text-align: start;\n text-indent: initial;\n text-wrap: pretty;\n word-break: auto-phrase;\n overflow-wrap: break-word;\n\n box-shadow: 0 0 0 1px ${cssVar.colorBorderSecondary};\n\n code {\n overflow-wrap: break-word;\n }\n\n thead {\n background: ${cssVar.colorFillQuaternary};\n }\n\n tr {\n box-shadow: 0 1px 0 ${cssVar.colorBorderSecondary};\n }\n\n th,\n td {\n min-width: 120px;\n padding-block: 0.75em;\n padding-inline: 1em;\n text-align: start;\n }\n }\n `;\n const video = css`\n > video,\n > p > video {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n }\n\n video {\n max-width: 100%;\n }\n `;\n\n const footnote = css`\n .footnotes {\n margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 1em);\n font-size: smaller;\n color: #8b949e;\n\n #footnote-label {\n display: none;\n }\n\n > ol {\n margin: 0 !important;\n }\n }\n `;\n\n const sup = css`\n sup {\n position: relative;\n inset-block-start: -0.25em;\n\n font-size: 0.75em;\n line-height: var(--lobe-markdown-line-height);\n vertical-align: baseline;\n }\n `;\n\n const sub = css`\n sub {\n position: relative;\n inset-block-end: -0.25em;\n\n font-size: 0.75em;\n line-height: var(--lobe-markdown-line-height);\n vertical-align: baseline;\n }\n `;\n\n return {\n root: css`\n :not(:has(${IGNORE_CLASSNAME})),\n .markdown {\n ${[\n __root,\n a,\n blockquote,\n code,\n del,\n details,\n header,\n hr,\n img,\n list,\n p,\n pre,\n strong,\n svg,\n table,\n video,\n footnote,\n sub,\n sup,\n ]}\n }\n `,\n };\n});\n"],"mappings":";;AAEA,MAAM,mBAAmB;AAEzB,MAAa,SAAS,oBAAoB,EAAE,QAAQ,UAAU;CAC5D,MAAM,SAAS,GAAG;;;;;qCAKiB,OAAO,eAAe;oCACvB,OAAO,oBAAoB;;;;;;;;;;;;CAY7D,MAAM,IAAI,GAAG;;eAEA,OAAO,cAAc;;;iBAGnB,OAAO,eAAe;;;;CAKrC,MAAM,aAAa,GAAG;;;;;;uCAMe,OAAO,YAAY;;eAE3C,OAAO,mBAAmB;;;CAIvC,MAAM,OAAO,GAAG;;;;;;;;;;;uBAWK,OAAO,eAAe;;;;;;sBAMvB,OAAO,mBAAmB;;;;CAK9C,MAAM,MAAM,GAAG;;eAEF,OAAO,qBAAqB;;;;CAKzC,MAAM,UAAU,GAAG;;;;;;;oBAOD,OAAO,kBAAkB;;;;;;;;;;;;;;;;;;;;0CAoBH,OAAO,mBAAmB;2CACzB,OAAO,mBAAmB;;yBAE5C,OAAO,WAAW;;wCAEH,OAAO,cAAc;;;;;;;yCAOpB,OAAO,YAAY;;;;;;;;;CAS1D,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ClB,MAAM,KAAK,GAAG;;;;sBAIM,OAAO,YAAY;;;;;;;;CAQvC,MAAM,MAAM,GAAG;;;;;;;;;;;;CAaf,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEhB,MAAM,IAAI,GAAG;;;;;;;;;;;;;;;CAeb,MAAM,MAAM,GAAG;;;;;CAKf,MAAM,SAAS,GAAG;;;;;CAKlB,MAAM,MAAM,GAAG;;;;;CAKf,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;;;;;;;8BAoBW,OAAO,qBAAqB;;;;;;;sBAOpC,OAAO,oBAAoB;;;;8BAInB,OAAO,qBAAqB;;;;;;;;;;;;CAYxD,MAAM,QAAQ,GAAG;;;;;;;;;;;;CAajB,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;CAgBpB,MAAM,MAAM,GAAG;;;;;;;;;;AAsBf,QAAO,EACL,MAAM,GAAG;kBACK,iBAAiB;;UAEzB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAhCI,GAAG;;;;;;;;;;EAkCP;EACD,CAAC;;OAGP;EACD"}
|
|
@@ -6,15 +6,19 @@ import DragHandle from "./components/DragHandle.mjs";
|
|
|
6
6
|
import SortableOverlay from "./components/SortableOverlay.mjs";
|
|
7
7
|
import { Fragment, memo, useMemo, useState } from "react";
|
|
8
8
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
-
import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
|
|
9
|
+
import { DndContext, KeyboardSensor, MeasuringStrategy, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
|
|
10
10
|
import { restrictToVerticalAxis, restrictToWindowEdges } from "@dnd-kit/modifiers";
|
|
11
11
|
import { SortableContext, arrayMove, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable";
|
|
12
12
|
//#region src/SortableList/SortableList.tsx
|
|
13
|
-
const
|
|
13
|
+
const measuringConfig = { droppable: { strategy: MeasuringStrategy.Always } };
|
|
14
|
+
const SortableListParent = memo(({ ref, items, onChange, renderItem, renderOverlay, gap = 8, ...rest }) => {
|
|
14
15
|
const [active, setActive] = useState(null);
|
|
15
16
|
const activeItem = useMemo(() => items.find((item) => item.id === active?.id), [active, items]);
|
|
16
17
|
const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
|
|
18
|
+
const overlayRenderer = renderOverlay ?? renderItem;
|
|
17
19
|
return /* @__PURE__ */ jsxs(DndContext, {
|
|
20
|
+
collisionDetection: closestCenter,
|
|
21
|
+
measuring: measuringConfig,
|
|
18
22
|
modifiers: [restrictToVerticalAxis, restrictToWindowEdges],
|
|
19
23
|
sensors,
|
|
20
24
|
onDragCancel: () => {
|
|
@@ -38,7 +42,7 @@ const SortableListParent = memo(({ ref, items, onChange, renderItem, gap = 8, ..
|
|
|
38
42
|
...rest,
|
|
39
43
|
children: items.map((item) => /* @__PURE__ */ jsx(Fragment, { children: renderItem(item) }, item.id))
|
|
40
44
|
})
|
|
41
|
-
}), /* @__PURE__ */ jsx(SortableOverlay, { children: activeItem ?
|
|
45
|
+
}), /* @__PURE__ */ jsx(SortableOverlay, { children: activeItem ? overlayRenderer(activeItem) : null })]
|
|
42
46
|
});
|
|
43
47
|
});
|
|
44
48
|
SortableListParent.displayName = "SortableList";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SortableList.mjs","names":["Flexbox"],"sources":["../../src/SortableList/SortableList.tsx"],"sourcesContent":["'use client';\n\nimport {\n type Active,\n DndContext,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport { restrictToVerticalAxis, restrictToWindowEdges } from '@dnd-kit/modifiers';\nimport {\n arrayMove,\n SortableContext,\n sortableKeyboardCoordinates,\n verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { Fragment, memo, type ReactNode, useMemo, useState } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport DragHandle from './components/DragHandle';\nimport SortableItem from './components/SortableItem';\nimport SortableOverlay from './components/SortableOverlay';\nimport { styles } from './style';\nimport { type SortableListItem, type SortableListProps } from './type';\n\nconst SortableListParent = memo<SortableListProps>(\n ({ ref, items, onChange, renderItem, gap = 8, ...rest }) => {\n const [active, setActive] = useState<Active | null>(null);\n const activeItem = useMemo(() => items.find((item) => item.id === active?.id), [active, items]);\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor, {\n coordinateGetter: sortableKeyboardCoordinates,\n }),\n );\n\n return (\n <DndContext\n modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n sensors={sensors}\n onDragCancel={() => {\n setActive(null);\n }}\n onDragEnd={({ active, over }) => {\n if (over && active.id !== over?.id) {\n const activeIndex = items.findIndex(({ id }) => id === active.id);\n const overIndex = items.findIndex(({ id }) => id === over.id);\n\n onChange(arrayMove(items, activeIndex, overIndex));\n }\n setActive(null);\n }}\n onDragStart={({ active }) => {\n setActive(active);\n }}\n >\n <SortableContext items={items} strategy={verticalListSortingStrategy}>\n <Flexbox as={'ul'} className={styles.container} gap={gap} ref={ref} {...rest}>\n {items.map((item) => (\n <Fragment key={item.id}>{renderItem(item)}</Fragment>\n ))}\n </Flexbox>\n </SortableContext>\n <SortableOverlay>{activeItem ?
|
|
1
|
+
{"version":3,"file":"SortableList.mjs","names":["Flexbox"],"sources":["../../src/SortableList/SortableList.tsx"],"sourcesContent":["'use client';\n\nimport {\n type Active,\n closestCenter,\n DndContext,\n KeyboardSensor,\n MeasuringStrategy,\n PointerSensor,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport { restrictToVerticalAxis, restrictToWindowEdges } from '@dnd-kit/modifiers';\nimport {\n arrayMove,\n SortableContext,\n sortableKeyboardCoordinates,\n verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { Fragment, memo, type ReactNode, useMemo, useState } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport DragHandle from './components/DragHandle';\nimport SortableItem from './components/SortableItem';\nimport SortableOverlay from './components/SortableOverlay';\nimport { styles } from './style';\nimport { type SortableListItem, type SortableListProps } from './type';\n\nconst measuringConfig = {\n droppable: {\n strategy: MeasuringStrategy.Always,\n },\n};\n\nconst SortableListParent = memo<SortableListProps>(\n ({ ref, items, onChange, renderItem, renderOverlay, gap = 8, ...rest }) => {\n const [active, setActive] = useState<Active | null>(null);\n const activeItem = useMemo(() => items.find((item) => item.id === active?.id), [active, items]);\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor, {\n coordinateGetter: sortableKeyboardCoordinates,\n }),\n );\n\n const overlayRenderer = renderOverlay ?? renderItem;\n\n return (\n <DndContext\n collisionDetection={closestCenter}\n measuring={measuringConfig}\n modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n sensors={sensors}\n onDragCancel={() => {\n setActive(null);\n }}\n onDragEnd={({ active, over }) => {\n if (over && active.id !== over?.id) {\n const activeIndex = items.findIndex(({ id }) => id === active.id);\n const overIndex = items.findIndex(({ id }) => id === over.id);\n\n onChange(arrayMove(items, activeIndex, overIndex));\n }\n setActive(null);\n }}\n onDragStart={({ active }) => {\n setActive(active);\n }}\n >\n <SortableContext items={items} strategy={verticalListSortingStrategy}>\n <Flexbox as={'ul'} className={styles.container} gap={gap} ref={ref} {...rest}>\n {items.map((item) => (\n <Fragment key={item.id}>{renderItem(item)}</Fragment>\n ))}\n </Flexbox>\n </SortableContext>\n <SortableOverlay>{activeItem ? overlayRenderer(activeItem) : null}</SortableOverlay>\n </DndContext>\n );\n },\n);\n\nSortableListParent.displayName = 'SortableList';\n\nexport interface ISortableList {\n <T extends SortableListItem = SortableListItem>(props: SortableListProps<T>): ReactNode;\n DragHandle: typeof DragHandle;\n Item: typeof SortableItem;\n}\n\nconst SortableList = SortableListParent as unknown as ISortableList;\n\nSortableList.Item = SortableItem;\nSortableList.DragHandle = DragHandle;\n\nexport default SortableList;\n"],"mappings":";;;;;;;;;;;;AA6BA,MAAM,kBAAkB,EACtB,WAAW,EACT,UAAU,kBAAkB,QAC7B,EACF;AAED,MAAM,qBAAqB,MACxB,EAAE,KAAK,OAAO,UAAU,YAAY,eAAe,MAAM,GAAG,GAAG,WAAW;CACzE,MAAM,CAAC,QAAQ,aAAa,SAAwB,KAAK;CACzD,MAAM,aAAa,cAAc,MAAM,MAAM,SAAS,KAAK,OAAO,QAAQ,GAAG,EAAE,CAAC,QAAQ,MAAM,CAAC;CAC/F,MAAM,UAAU,WACd,UAAU,cAAc,EACxB,UAAU,gBAAgB,EACxB,kBAAkB,6BACnB,CAAC,CACH;CAED,MAAM,kBAAkB,iBAAiB;AAEzC,QACE,qBAAC,YAAD;EACE,oBAAoB;EACpB,WAAW;EACX,WAAW,CAAC,wBAAwB,sBAAsB;EACjD;EACT,oBAAoB;AAClB,aAAU,KAAK;;EAEjB,YAAY,EAAE,QAAQ,WAAW;AAC/B,OAAI,QAAQ,OAAO,OAAO,MAAM,GAI9B,UAAS,UAAU,OAHC,MAAM,WAAW,EAAE,SAAS,OAAO,OAAO,GAAG,EAC/C,MAAM,WAAW,EAAE,SAAS,OAAO,KAAK,GAAG,CAEZ,CAAC;AAEpD,aAAU,KAAK;;EAEjB,cAAc,EAAE,aAAa;AAC3B,aAAU,OAAO;;YAlBrB,CAqBE,oBAAC,iBAAD;GAAwB;GAAO,UAAU;aACvC,oBAACA,mBAAD;IAAS,IAAI;IAAM,WAAW,OAAO;IAAgB;IAAU;IAAK,GAAI;cACrE,MAAM,KAAK,SACV,oBAAC,UAAD,EAAA,UAAyB,WAAW,KAAK,EAAY,EAAtC,KAAK,GAAiC,CACrD;IACM,CAAA;GACM,CAAA,EAClB,oBAAC,iBAAD,EAAA,UAAkB,aAAa,gBAAgB,WAAW,GAAG,MAAuB,CAAA,CACzE;;EAGlB;AAED,mBAAmB,cAAc;AAQjC,MAAM,eAAe;AAErB,aAAa,OAAO;AACpB,aAAa,aAAa"}
|
|
@@ -11,6 +11,11 @@ interface SortableListProps<T extends SortableListItem = SortableListItem> exten
|
|
|
11
11
|
onChange: (items: T[]) => void;
|
|
12
12
|
ref?: Ref<HTMLUListElement>;
|
|
13
13
|
renderItem: (item: T) => ReactNode;
|
|
14
|
+
/**
|
|
15
|
+
* Custom render function for the drag overlay
|
|
16
|
+
* If not provided, renderItem will be used
|
|
17
|
+
*/
|
|
18
|
+
renderOverlay?: (item: T) => ReactNode;
|
|
14
19
|
}
|
|
15
20
|
//#endregion
|
|
16
21
|
export { SortableListItem, SortableListProps };
|