@mittwald/flow-react-components 1.3.0-next.26 → 1.3.0-next.28
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.
- package/MIGRATION.md +24 -0
- package/USAGE.md +14 -6
- package/dist/assets/component-index.json +1 -1
- package/dist/assets/doc-properties.json +1 -1
- package/dist/css/all-layered.css +1 -1
- package/dist/css/all.css +1 -1
- package/dist/js/packages/components/src/components/Image/Image.mjs +2 -2
- package/dist/js/packages/components/src/components/Image/Image.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Image/Image.module.mjs +3 -1
- package/dist/js/packages/components/src/components/Image/Image.module.mjs.map +1 -1
- package/dist/js/packages/design-tokens/dist/json-runtime/all-dark.mjs +1 -1
- package/dist/js/packages/design-tokens/dist/json-runtime/all-dark.mjs.map +1 -1
- package/dist/js/packages/design-tokens/dist/json-runtime/all-light.mjs +1 -1
- package/dist/js/packages/design-tokens/dist/json-runtime/all-light.mjs.map +1 -1
- package/dist/types/components/Image/Image.d.ts +7 -1
- package/package.json +9 -9
|
@@ -7,8 +7,8 @@ import { jsx } from "react/jsx-runtime";
|
|
|
7
7
|
//#region src/components/Image/Image.tsx
|
|
8
8
|
/** @flr-generate all */
|
|
9
9
|
var Image = flowComponent("Image", (props) => {
|
|
10
|
-
const { className, withBorder, style, aspectRatio, width, height, ref, ...rest } = props;
|
|
11
|
-
const rootClassName = clsx(Image_module_default.image, withBorder && Image_module_default.border, aspectRatio && Image_module_default.aspectRatio, className);
|
|
10
|
+
const { className, withBorder, withRoundedCorners = true, style, aspectRatio, width, height, ref, ...rest } = props;
|
|
11
|
+
const rootClassName = clsx(Image_module_default.image, withBorder && Image_module_default.border, withRoundedCorners && Image_module_default.roundedCorners, aspectRatio && Image_module_default.aspectRatio, className);
|
|
12
12
|
return /* @__PURE__ */ jsx("img", {
|
|
13
13
|
ref,
|
|
14
14
|
className: rootClassName,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.mjs","names":[],"sources":["../../../../../../../src/components/Image/Image.tsx"],"sourcesContent":["import type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { ComponentProps } from \"react\";\nimport styles from \"./Image.module.scss\";\n\nexport interface ImageProps\n extends\n Omit<ComponentProps<\"img\">, \"ref\">,\n FlowComponentProps<HTMLImageElement> {\n /** Display the image with border
|
|
1
|
+
{"version":3,"file":"Image.mjs","names":[],"sources":["../../../../../../../src/components/Image/Image.tsx"],"sourcesContent":["import type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { ComponentProps } from \"react\";\nimport styles from \"./Image.module.scss\";\n\nexport interface ImageProps\n extends\n Omit<ComponentProps<\"img\">, \"ref\">,\n FlowComponentProps<HTMLImageElement> {\n /** Display the image with a border. */\n withBorder?: boolean;\n /**\n * Display the image with rounded corners.\n *\n * @default true\n */\n withRoundedCorners?: boolean;\n /**\n * The aspect ratio of the images container. Larger images will be centered\n * and their overflow will be hidden.\n */\n aspectRatio?: number;\n}\n\n/** @flr-generate all */\nexport const Image = flowComponent(\"Image\", (props) => {\n const {\n className,\n withBorder,\n withRoundedCorners = true,\n style,\n aspectRatio,\n width,\n height,\n ref,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.image,\n withBorder && styles.border,\n withRoundedCorners && styles.roundedCorners,\n aspectRatio && styles.aspectRatio,\n className,\n );\n\n return (\n <img\n ref={ref}\n className={rootClassName}\n style={{\n ...style,\n ...(aspectRatio !== undefined && { aspectRatio }),\n ...(width !== undefined && { width }),\n ...(height !== undefined && { height }),\n }}\n {...rest}\n />\n );\n});\n\nexport default Image;\n"],"mappings":";;;;;;;;AA0BA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,WACA,YACA,qBAAqB,MACrB,OACA,aACA,OACA,QACA,KACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,qBAAO,OACP,cAAc,qBAAO,QACrB,sBAAsB,qBAAO,gBAC7B,eAAe,qBAAO,aACtB,SACF;CAEA,OACE,oBAAC,OAAD;EACO;EACL,WAAW;EACX,OAAO;GACL,GAAG;GACH,GAAI,gBAAgB,KAAA,KAAa,EAAE,YAAY;GAC/C,GAAI,UAAU,KAAA,KAAa,EAAE,MAAM;GACnC,GAAI,WAAW,KAAA,KAAa,EAAE,OAAO;EACvC;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}
|
|
@@ -3,13 +3,15 @@
|
|
|
3
3
|
//#region src/components/Image/Image.module.scss
|
|
4
4
|
var image = "flow--image";
|
|
5
5
|
var border = "flow--image--border";
|
|
6
|
+
var roundedCorners = "flow--image--rounded-corners";
|
|
6
7
|
var aspectRatio = "flow--image--aspect-ratio";
|
|
7
8
|
var Image_module_default = {
|
|
8
9
|
image,
|
|
9
10
|
border,
|
|
11
|
+
roundedCorners,
|
|
10
12
|
aspectRatio
|
|
11
13
|
};
|
|
12
14
|
//#endregion
|
|
13
|
-
export { aspectRatio, border, Image_module_default as default, image };
|
|
15
|
+
export { aspectRatio, border, Image_module_default as default, image, roundedCorners };
|
|
14
16
|
|
|
15
17
|
//# sourceMappingURL=Image.module.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.module.mjs","names":[],"sources":["../../../../../../../src/components/Image/Image.module.scss"],"sourcesContent":[".image {\n max-width: 100%;\n\n &.border {\n border-width: var(--image--border-width);\n border-style: var(--image--border-style);\n border-
|
|
1
|
+
{"version":3,"file":"Image.module.mjs","names":[],"sources":["../../../../../../../src/components/Image/Image.module.scss"],"sourcesContent":[".image {\n max-width: 100%;\n\n &.border {\n border-width: var(--image--border-width);\n border-style: var(--image--border-style);\n border-color: var(--image--border-color);\n }\n\n &.roundedCorners {\n border-radius: var(--image--corner-radius);\n overflow: hidden;\n }\n\n &:where(.aspectRatio) {\n overflow-clip-margin: unset;\n object-fit: cover;\n width: fit-content;\n overflow: hidden;\n }\n}\n"],"mappings":""}
|