@lobehub/ui 5.28.0 → 5.28.1
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.
|
@@ -61,24 +61,44 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
61
61
|
min-width: 0;
|
|
62
62
|
min-height: 0;
|
|
63
63
|
|
|
64
|
-
/*
|
|
65
|
-
|
|
66
|
-
background: ${cssVar.
|
|
67
|
-
|
|
68
|
-
/*
|
|
69
|
-
|
|
70
|
-
|
|
64
|
+
/* Container, not elevated: the antd-based Drawer paints its panel on container, and in dark
|
|
65
|
+
themes elevated is a visibly lighter step — the two drawers must read as the same surface. */
|
|
66
|
+
background: ${cssVar.colorBgContainer};
|
|
67
|
+
|
|
68
|
+
/* Geometry and alphas are antd's boxShadowDrawer{Left,Right,Up,Down} verbatim, so both drawers
|
|
69
|
+
cast identically. antd builds those by scaling colorShadow's *own* alpha by 8/12/5%, and
|
|
70
|
+
colorShadow flips from opaque black to rgba(255,255,255,0.2) in dark — hence the color-mix
|
|
71
|
+
against the raw var rather than a literal black (colorShadow has no AliasToken typing, so
|
|
72
|
+
cssVar cannot reach it). An edge-anchored panel casts along its placement axis rather than
|
|
73
|
+
downward like a centred dialog would: direction classes set the sign, weight classes scale
|
|
74
|
+
the alpha, so the two compose without a class per combination. */
|
|
71
75
|
box-shadow:
|
|
72
|
-
calc(var(--drawer-cast-x, 0) * 6px) calc(var(--drawer-cast-y, 0) * 6px)
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
+
calc(var(--drawer-cast-x, 0) * 6px) calc(var(--drawer-cast-y, 0) * 6px) 16px 0
|
|
77
|
+
color-mix(
|
|
78
|
+
in srgb,
|
|
79
|
+
var(--ant-color-shadow, #000) calc(8% * var(--drawer-cast-alpha, 1)),
|
|
80
|
+
transparent
|
|
81
|
+
),
|
|
82
|
+
calc(var(--drawer-cast-x, 0) * 3px) calc(var(--drawer-cast-y, 0) * 3px) 6px -4px
|
|
83
|
+
color-mix(
|
|
84
|
+
in srgb,
|
|
85
|
+
var(--ant-color-shadow, #000) calc(12% * var(--drawer-cast-alpha, 1)),
|
|
86
|
+
transparent
|
|
87
|
+
),
|
|
88
|
+
calc(var(--drawer-cast-x, 0) * 9px) calc(var(--drawer-cast-y, 0) * 9px) 28px 8px
|
|
89
|
+
color-mix(
|
|
90
|
+
in srgb,
|
|
91
|
+
var(--ant-color-shadow, #000) calc(5% * var(--drawer-cast-alpha, 1)),
|
|
92
|
+
transparent
|
|
93
|
+
);
|
|
76
94
|
|
|
77
95
|
transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
|
|
78
96
|
`,
|
|
79
97
|
panelLeft: css`
|
|
80
98
|
--drawer-cast-x: 1;
|
|
81
99
|
|
|
100
|
+
border-inline-end: var(--drawer-edge-width, 1px) solid ${cssVar.colorBorder};
|
|
101
|
+
|
|
82
102
|
&[data-starting-style],
|
|
83
103
|
&[data-ending-style] {
|
|
84
104
|
transform: translateX(-100%);
|
|
@@ -87,6 +107,8 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
87
107
|
panelRight: css`
|
|
88
108
|
--drawer-cast-x: -1;
|
|
89
109
|
|
|
110
|
+
border-inline-start: var(--drawer-edge-width, 1px) solid ${cssVar.colorBorder};
|
|
111
|
+
|
|
90
112
|
&[data-starting-style],
|
|
91
113
|
&[data-ending-style] {
|
|
92
114
|
transform: translateX(100%);
|
|
@@ -95,6 +117,8 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
95
117
|
panelTop: css`
|
|
96
118
|
--drawer-cast-y: 1;
|
|
97
119
|
|
|
120
|
+
border-block-end: var(--drawer-edge-width, 1px) solid ${cssVar.colorBorder};
|
|
121
|
+
|
|
98
122
|
&[data-starting-style],
|
|
99
123
|
&[data-ending-style] {
|
|
100
124
|
transform: translateY(-100%);
|
|
@@ -103,6 +127,8 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
103
127
|
panelBottom: css`
|
|
104
128
|
--drawer-cast-y: -1;
|
|
105
129
|
|
|
130
|
+
border-block-start: var(--drawer-edge-width, 1px) solid ${cssVar.colorBorder};
|
|
131
|
+
|
|
106
132
|
&[data-starting-style],
|
|
107
133
|
&[data-ending-style] {
|
|
108
134
|
transform: translateY(100%);
|
|
@@ -125,16 +151,14 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
125
151
|
border-start-end-radius: 12px;
|
|
126
152
|
`,
|
|
127
153
|
panelFlush: css`
|
|
128
|
-
--drawer-cast-
|
|
129
|
-
--drawer-
|
|
154
|
+
--drawer-cast-alpha: 0;
|
|
155
|
+
--drawer-edge-width: 0;
|
|
130
156
|
`,
|
|
131
157
|
panelBoosted: css`
|
|
132
|
-
--drawer-cast-
|
|
133
|
-
--drawer-cast-near: 7%;
|
|
158
|
+
--drawer-cast-alpha: 1.75;
|
|
134
159
|
`,
|
|
135
160
|
panelRecessed: css`
|
|
136
|
-
--drawer-cast-
|
|
137
|
-
--drawer-cast-near: 2%;
|
|
161
|
+
--drawer-cast-alpha: 0.5;
|
|
138
162
|
`,
|
|
139
163
|
header: css`
|
|
140
164
|
display: flex;
|
|
@@ -263,11 +287,9 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
263
287
|
|
|
264
288
|
padding-block: 12px;
|
|
265
289
|
padding-inline: 16px;
|
|
266
|
-
border-inline-end: 1px solid ${cssVar.
|
|
290
|
+
border-inline-end: 1px solid ${cssVar.colorBorderSecondary};
|
|
267
291
|
|
|
268
|
-
|
|
269
|
-
page-level layout colour would punch a hole through an elevated panel in dark themes. */
|
|
270
|
-
background: ${cssVar.colorFillTertiary};
|
|
292
|
+
background: ${cssVar.colorBgLayout};
|
|
271
293
|
`,
|
|
272
294
|
sidebarContent: css`
|
|
273
295
|
overflow: hidden auto;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Drawer/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n backdrop: css`\n position: fixed;\n z-index: 1200;\n inset: 0;\n\n background: ${cssVar.colorBgMask};\n\n transition: opacity 180ms cubic-bezier(0.32, 0.72, 0, 1);\n\n &[data-starting-style],\n &[data-ending-style] {\n opacity: 0;\n }\n `,\n\n popup: css`\n pointer-events: none;\n\n position: fixed;\n z-index: 1201;\n\n display: flex;\n\n /* clamp here rather than on the panel, so an oversized size prop shrinks the\n box instead of detaching the panel from its anchored edge */\n max-width: 100dvw;\n max-height: 100dvh;\n `,\n\n popupLeft: css`\n inset-block: 0;\n inset-inline-start: 0;\n `,\n\n popupRight: css`\n inset-block: 0;\n inset-inline-end: 0;\n `,\n\n popupTop: css`\n inset-block-start: 0;\n inset-inline: 0;\n `,\n\n popupBottom: css`\n inset-block-end: 0;\n inset-inline: 0;\n `,\n\n panel: css`\n pointer-events: auto;\n\n position: relative;\n\n /* push offset rides on CSS vars so [data-starting-style] can override the whole transform */\n transform: translate(var(--drawer-push-x, 0), var(--drawer-push-y, 0));\n\n overflow: hidden;\n display: flex;\n flex: 1;\n flex-direction: column;\n\n box-sizing: border-box;\n min-width: 0;\n min-height: 0;\n\n /*
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Drawer/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n backdrop: css`\n position: fixed;\n z-index: 1200;\n inset: 0;\n\n background: ${cssVar.colorBgMask};\n\n transition: opacity 180ms cubic-bezier(0.32, 0.72, 0, 1);\n\n &[data-starting-style],\n &[data-ending-style] {\n opacity: 0;\n }\n `,\n\n popup: css`\n pointer-events: none;\n\n position: fixed;\n z-index: 1201;\n\n display: flex;\n\n /* clamp here rather than on the panel, so an oversized size prop shrinks the\n box instead of detaching the panel from its anchored edge */\n max-width: 100dvw;\n max-height: 100dvh;\n `,\n\n popupLeft: css`\n inset-block: 0;\n inset-inline-start: 0;\n `,\n\n popupRight: css`\n inset-block: 0;\n inset-inline-end: 0;\n `,\n\n popupTop: css`\n inset-block-start: 0;\n inset-inline: 0;\n `,\n\n popupBottom: css`\n inset-block-end: 0;\n inset-inline: 0;\n `,\n\n panel: css`\n pointer-events: auto;\n\n position: relative;\n\n /* push offset rides on CSS vars so [data-starting-style] can override the whole transform */\n transform: translate(var(--drawer-push-x, 0), var(--drawer-push-y, 0));\n\n overflow: hidden;\n display: flex;\n flex: 1;\n flex-direction: column;\n\n box-sizing: border-box;\n min-width: 0;\n min-height: 0;\n\n /* Container, not elevated: the antd-based Drawer paints its panel on container, and in dark\n themes elevated is a visibly lighter step — the two drawers must read as the same surface. */\n background: ${cssVar.colorBgContainer};\n\n /* Geometry and alphas are antd's boxShadowDrawer{Left,Right,Up,Down} verbatim, so both drawers\n cast identically. antd builds those by scaling colorShadow's *own* alpha by 8/12/5%, and\n colorShadow flips from opaque black to rgba(255,255,255,0.2) in dark — hence the color-mix\n against the raw var rather than a literal black (colorShadow has no AliasToken typing, so\n cssVar cannot reach it). An edge-anchored panel casts along its placement axis rather than\n downward like a centred dialog would: direction classes set the sign, weight classes scale\n the alpha, so the two compose without a class per combination. */\n box-shadow:\n calc(var(--drawer-cast-x, 0) * 6px) calc(var(--drawer-cast-y, 0) * 6px) 16px 0\n color-mix(\n in srgb,\n var(--ant-color-shadow, #000) calc(8% * var(--drawer-cast-alpha, 1)),\n transparent\n ),\n calc(var(--drawer-cast-x, 0) * 3px) calc(var(--drawer-cast-y, 0) * 3px) 6px -4px\n color-mix(\n in srgb,\n var(--ant-color-shadow, #000) calc(12% * var(--drawer-cast-alpha, 1)),\n transparent\n ),\n calc(var(--drawer-cast-x, 0) * 9px) calc(var(--drawer-cast-y, 0) * 9px) 28px 8px\n color-mix(\n in srgb,\n var(--ant-color-shadow, #000) calc(5% * var(--drawer-cast-alpha, 1)),\n transparent\n );\n\n transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);\n `,\n\n panelLeft: css`\n --drawer-cast-x: 1;\n\n border-inline-end: var(--drawer-edge-width, 1px) solid ${cssVar.colorBorder};\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: translateX(-100%);\n }\n `,\n\n panelRight: css`\n --drawer-cast-x: -1;\n\n border-inline-start: var(--drawer-edge-width, 1px) solid ${cssVar.colorBorder};\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: translateX(100%);\n }\n `,\n\n panelTop: css`\n --drawer-cast-y: 1;\n\n border-block-end: var(--drawer-edge-width, 1px) solid ${cssVar.colorBorder};\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: translateY(-100%);\n }\n `,\n\n panelBottom: css`\n --drawer-cast-y: -1;\n\n border-block-start: var(--drawer-edge-width, 1px) solid ${cssVar.colorBorder};\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: translateY(100%);\n }\n `,\n\n /* Only the edges facing content get rounded; the anchored edge stays flush with the viewport.\n Kept apart from the direction classes so a flush panel can drop the radius by omitting the\n class rather than by out-specifying it. */\n panelRoundedLeft: css`\n border-start-end-radius: 12px;\n border-end-end-radius: 12px;\n `,\n\n panelRoundedRight: css`\n border-start-start-radius: 12px;\n border-end-start-radius: 12px;\n `,\n\n panelRoundedTop: css`\n border-end-start-radius: 12px;\n border-end-end-radius: 12px;\n `,\n\n panelRoundedBottom: css`\n border-start-start-radius: 12px;\n border-start-end-radius: 12px;\n `,\n\n /* Filling the viewport leaves nothing to cast onto or to divide from — the shadow and the edge\n rule would only dirty the seam against the viewport. */\n panelFlush: css`\n --drawer-cast-alpha: 0;\n --drawer-edge-width: 0;\n `,\n\n /* Without a backdrop the panel has to earn its separation from live content behind it. */\n panelBoosted: css`\n --drawer-cast-alpha: 1.75;\n `,\n\n /* A pushed ancestor has receded behind its child; stacking full-weight casts would silt up. */\n panelRecessed: css`\n --drawer-cast-alpha: 0.5;\n `,\n\n header: css`\n display: flex;\n flex: none;\n gap: 8px;\n align-items: center;\n justify-content: space-between;\n\n min-height: 56px;\n padding-block: 12px;\n padding-inline: 16px;\n border-block-end: 1px solid ${cssVar.colorSplit};\n `,\n\n containerInner: css`\n display: flex;\n flex: 1;\n gap: 8px;\n align-items: center;\n justify-content: space-between;\n\n width: 100%;\n margin-inline: auto;\n `,\n\n containerInnerFooter: css`\n justify-content: flex-end;\n `,\n\n title: css`\n margin: 0;\n\n font-size: 17px;\n font-weight: 600;\n line-height: 1.4;\n color: ${cssVar.colorText};\n letter-spacing: -0.005em;\n `,\n\n extra: css`\n display: flex;\n flex: none;\n gap: 4px;\n align-items: center;\n\n margin-inline-end: -4px;\n `,\n\n extraFloating: css`\n position: absolute;\n z-index: 1;\n inset-block-start: 12px;\n inset-inline-end: 12px;\n\n margin-inline-end: 0;\n `,\n\n close: css`\n cursor: pointer;\n\n position: relative;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: 8px;\n\n color: ${cssVar.colorTextTertiary};\n\n background: transparent;\n\n transition:\n color 160ms cubic-bezier(0.32, 0.72, 0, 1),\n background 160ms cubic-bezier(0.32, 0.72, 0, 1),\n transform 160ms cubic-bezier(0.32, 0.72, 0, 1);\n\n /* Restores the 40px target the 32px visual box gives up, without nudging the header layout. */\n &::after {\n content: '';\n position: absolute;\n inset: -4px;\n }\n\n &:hover {\n transform: scale(1.04);\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillSecondary};\n }\n\n &:active {\n transform: scale(0.96);\n }\n\n &:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBorder};\n }\n `,\n\n content: css`\n overflow: hidden auto;\n display: flex;\n flex: 1;\n min-height: 0;\n `,\n\n bodyContent: css`\n display: flex;\n flex-direction: column;\n\n width: 100%;\n min-height: 100%;\n margin-inline: auto;\n padding-block: 12px;\n padding-inline: 16px;\n `,\n\n contentSidebar: css`\n overflow: hidden;\n `,\n\n bodyContentSidebar: css`\n flex-direction: row;\n height: 100%;\n min-height: 0;\n padding: 0;\n `,\n\n sidebar: css`\n overflow: hidden auto;\n flex: none;\n\n padding-block: 12px;\n padding-inline: 16px;\n border-inline-end: 1px solid ${cssVar.colorBorderSecondary};\n\n background: ${cssVar.colorBgLayout};\n `,\n\n sidebarContent: css`\n overflow: hidden auto;\n flex: 1;\n\n min-width: 0;\n padding-block: 12px;\n padding-inline: 16px;\n `,\n\n footer: css`\n display: flex;\n flex: none;\n gap: 8px;\n align-items: center;\n justify-content: flex-end;\n\n padding-block: 12px;\n padding-inline: 16px;\n border-block-start: 1px solid ${cssVar.colorSplit};\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,UAAU,GAAG;;;;;kBAKG,OAAO,YAAY;;;;;;;;;CAUnC,OAAO,GAAG;;;;;;;;;;;;;CAcV,WAAW,GAAG;;;;CAKd,YAAY,GAAG;;;;CAKf,UAAU,GAAG;;;;CAKb,aAAa,GAAG;;;;CAKhB,OAAO,GAAG;;;;;;;;;;;;;;;;;;;kBAmBM,OAAO,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCxC,WAAW,GAAG;;;6DAG6C,OAAO,YAAY;;;;;;;CAQ9E,YAAY,GAAG;;;+DAG8C,OAAO,YAAY;;;;;;;CAQhF,UAAU,GAAG;;;4DAG6C,OAAO,YAAY;;;;;;;CAQ7E,aAAa,GAAG;;;8DAG4C,OAAO,YAAY;;;;;;;CAW/E,kBAAkB,GAAG;;;;CAKrB,mBAAmB,GAAG;;;;CAKtB,iBAAiB,GAAG;;;;CAKpB,oBAAoB,GAAG;;;;CAOvB,YAAY,GAAG;;;;CAMf,cAAc,GAAG;;;CAKjB,eAAe,GAAG;;;CAIlB,QAAQ,GAAG;;;;;;;;;;kCAUqB,OAAO,WAAW;;CAGlD,gBAAgB,GAAG;;;;;;;;;;CAWnB,sBAAsB,GAAG;;;CAIzB,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;;CAI5B,OAAO,GAAG;;;;;;;;CASV,eAAe,GAAG;;;;;;;;CASlB,OAAO,GAAG;;;;;;;;;;;;;;;aAeC,OAAO,kBAAkB;;;;;;;;;;;;;;;;;;eAkBvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;;;;;;8BAShB,OAAO,mBAAmB;;;CAItD,SAAS,GAAG;;;;;;CAOZ,aAAa,GAAG;;;;;;;;;;CAWhB,gBAAgB,GAAG;;;CAInB,oBAAoB,GAAG;;;;;;CAOvB,SAAS,GAAG;;;;;;mCAMqB,OAAO,qBAAqB;;kBAE7C,OAAO,cAAc;;CAGrC,gBAAgB,GAAG;;;;;;;;CASnB,QAAQ,GAAG;;;;;;;;;oCASuB,OAAO,WAAW;;AAEtD,EAAE"}
|
package/es/eslint/index.mjs
CHANGED
package/es/eslint/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/eslint/index.ts"],"sourcesContent":["const DEPRECATED_UI_COMPONENTS = ['Button', 'Modal', 'Segmented', 'Select', 'Tabs'];\n\nexport const restrictedImports = {\n rules: {\n 'no-restricted-imports': [\n 'error',\n {\n paths: [\n {\n importNames: DEPRECATED_UI_COMPONENTS,\n message:\n 'The antd-based wrapper is deprecated. Import from \"@lobehub/ui/base-ui\" instead.',\n name: '@lobehub/ui',\n },\n {\n importNames: ['createStyles'],\n message:\n '`createStyles` is banned in this project. Use `createStaticStyles` from \"antd-style\" instead.',\n name: 'antd-style',\n },\n {\n importNames: DEPRECATED_UI_COMPONENTS,\n message:\n 'Direct antd import is deprecated. Import from \"@lobehub/ui\" or \"@lobehub/ui/base-ui\" instead.',\n name: 'antd',\n },\n ],\n },\n ],\n },\n};\n\nexport default [restrictedImports];\n"],"mappings":";AAAA,MAAM,2BAA2B;CAAC;CAAU;CAAS;CAAa;CAAU;AAAM;
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/eslint/index.ts"],"sourcesContent":["const DEPRECATED_UI_COMPONENTS = ['Button', 'Drawer', 'Modal', 'Segmented', 'Select', 'Tabs'];\n\nexport const restrictedImports = {\n rules: {\n 'no-restricted-imports': [\n 'error',\n {\n paths: [\n {\n importNames: DEPRECATED_UI_COMPONENTS,\n message:\n 'The antd-based wrapper is deprecated. Import from \"@lobehub/ui/base-ui\" instead.',\n name: '@lobehub/ui',\n },\n {\n importNames: ['createStyles'],\n message:\n '`createStyles` is banned in this project. Use `createStaticStyles` from \"antd-style\" instead.',\n name: 'antd-style',\n },\n {\n importNames: DEPRECATED_UI_COMPONENTS,\n message:\n 'Direct antd import is deprecated. Import from \"@lobehub/ui\" or \"@lobehub/ui/base-ui\" instead.',\n name: 'antd',\n },\n ],\n },\n ],\n },\n};\n\nexport default [restrictedImports];\n"],"mappings":";AAAA,MAAM,2BAA2B;CAAC;CAAU;CAAU;CAAS;CAAa;CAAU;AAAM;AAE5F,MAAa,oBAAoB,EAC/B,OAAO,EACL,yBAAyB,CACvB,SACA,EACE,OAAO;CACL;EACE,aAAa;EACb,SACE;EACF,MAAM;CACR;CACA;EACE,aAAa,CAAC,cAAc;EAC5B,SACE;EACF,MAAM;CACR;CACA;EACE,aAAa;EACb,SACE;EACF,MAAM;CACR;AACF,EACF,CACF,EACF,EACF;AAEA,IAAA,iBAAe,CAAC,iBAAiB"}
|