@cck-ui/core 0.18.4 → 0.19.0

package/lib/components/image/image.types.d.ts

@@ -0,0 +1,33 @@
+import { Properties } from 'csstype';
+import { BoxProps, CRadius, PolymorphicFactory, StylesApiProps } from '../../core';
+export type ImageStylesNames = 'root';
+export type ImageCssVariables = {
+    root: '--image-radius' | '--image-object-fit';
+};
+export interface ImageProps extends BoxProps, StylesApiProps<ImageFactory> {
+    /**
+     * @description Key of `theme.radius` or any valid CSS value to set `border-radius`
+     * @default 0
+     */
+    radius?: CRadius;
+    /**
+     * @description Controls `object-fit` style
+     * @default 'cover'
+     */
+    fit?: Properties['objectFit'];
+    /**
+     * @description Image url used as a fallback if the image cannot be loaded
+     */
+    fallbackSrc?: string;
+    /**
+     * @description Image url
+     */
+    src?: any;
+}
+export type ImageFactory = PolymorphicFactory<{
+    props: ImageProps;
+    defaultRef: HTMLImageElement;
+    defaultComponent: 'img';
+    stylesNames: ImageStylesNames;
+    vars: ImageCssVariables;
+}>;

package/lib/components/image/image.utils.d.ts

@@ -0,0 +1,7 @@
+export declare const varsResolver: import("../..").VarsResolver<{
+    props: import("./image.types").ImageProps;
+    defaultRef: HTMLImageElement;
+    defaultComponent: "img";
+    stylesNames: import("./image.types").ImageStylesNames;
+    vars: import("./image.types").ImageCssVariables;
+}>;

package/lib/components/image/index.d.ts

@@ -0,0 +1,6 @@
+import { SFCWithInstallAndClasses } from '../../core';
+import Image from './image.vue';
+import classes from './image.module.css';
+export declare const CImage: SFCWithInstallAndClasses<typeof Image, typeof classes>;
+export default CImage;
+export * from './image.types';

package/lib/components/index.d.ts

@@ -9,6 +9,7 @@ export * from './empty-state';
 export * from './flex';
 export * from './grid';
 export * from './group';
+export * from './image';
 export * from './loader';
 export * from './paper';
 export * from './semi-circle-progress';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cck-ui/core",
-  "version": "0.18.4",
+  "version": "0.19.0",
   "description": "Vue component library focused on usability, accessibility and developer experience",
   "homepage": "https://cck-ui.jackatlas.xyz",
   "license": "ISC",

package/styles/image.css

@@ -0,0 +1,6 @@
+.m_273f9a14 {
+  display: block;
+  object-fit: var(--image-object-fit, cover);
+  width: 100%;
+  border-radius: var(--image-radius, 0);
+}

package/styles/image.layer.css

@@ -0,0 +1,7 @@
+@layer cck {.m_273f9a14 {
+  display: block;
+  object-fit: var(--image-object-fit, cover);
+  width: 100%;
+  border-radius: var(--image-radius, 0);
+}
+}

package/styles.css

@@ -1450,6 +1450,13 @@ fieldset:disabled .c-active:active {
       max-width: var(--group-child-width);
     }
 
+.m_273f9a14 {
+  display: block;
+  object-fit: var(--image-object-fit, cover);
+  width: 100%;
+  border-radius: var(--image-radius, 0);
+}
+
 .m_a244865c {
   --loader-size-xs: calc(1.125rem * var(--c-scale));
   --loader-size-sm: calc(1.375rem * var(--c-scale));

package/styles.layer.css

@@ -1450,6 +1450,13 @@ fieldset:disabled .c-active:active {
       max-width: var(--group-child-width);
     }
 
+.m_273f9a14 {
+  display: block;
+  object-fit: var(--image-object-fit, cover);
+  width: 100%;
+  border-radius: var(--image-radius, 0);
+}
+
 .m_a244865c {
   --loader-size-xs: calc(1.125rem * var(--c-scale));
   --loader-size-sm: calc(1.375rem * var(--c-scale));