@cck-ui/core 0.35.0 → 0.37.0

package/lib/components/data-list/data-list.types.d.ts

@@ -0,0 +1,50 @@
+import { Properties } from 'csstype';
+import { BoxProps, CSize, CSpacing, ElementProps, Factory, StylesApiProps } from '../../core';
+import { DataListItemLabelStylesNames } from './data-list-item-label/data-list-item-label.types';
+import { DataListItemValueStylesNames } from './data-list-item-value/data-list-item-value.types';
+import { DataListItemStylesNames } from './data-list-item/data-list-item.types';
+import DataListItem from './data-list-item/data-list-item.vue';
+import DataListItemLabel from './data-list-item-label/data-list-item-label.vue';
+import DataListItemValue from './data-list-item-value/data-list-item-value.vue';
+export type DataListStylesNames = 'root' | DataListItemStylesNames | DataListItemLabelStylesNames | DataListItemValueStylesNames;
+export type DataListCssVariables = {
+    root: '--data-list-fz' | '--data-list-lh' | '--data-list-gap' | '--data-list-label-width';
+};
+export interface DataListProps extends BoxProps, StylesApiProps<DataListFactory>, /* @vue-ignore */ ElementProps<'div'> {
+    /**
+     * Controls `font-size` and `line-height`
+     * @default 'sm'
+     */
+    size?: CSize;
+    /**
+     * Key of `theme.spacing` or any valid CSS value to set gap between items
+     * @default 'sm'
+     */
+    gap?: CSpacing;
+    /**
+     * Controls arrangement of label and value within each item. `horizontal` renders label and value side by side, `vertical` stacks label on top of value
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Adds border between items
+     * @default false
+     */
+    withDivider?: boolean;
+    /**
+     * Controls min-width of the label (dt) element, any valid CSS value
+     * @default '120px'
+     */
+    labelWidth?: Properties['minWidth'];
+}
+export type DataListFactory = Factory<{
+    props: DataListProps;
+    ref: HTMLDivElement;
+    stylesNames: DataListStylesNames;
+    vars: DataListCssVariables;
+    staticComponents: {
+        Item: typeof DataListItem;
+        ItemLabel: typeof DataListItemLabel;
+        ItemValue: typeof DataListItemValue;
+    };
+}>;

package/lib/components/data-list/data-list.utils.d.ts

@@ -0,0 +1,11 @@
+export declare const varsResolver: import("../..").VarsResolver<{
+    props: import("./data-list.types").DataListProps;
+    ref: HTMLDivElement;
+    stylesNames: import("./data-list.types").DataListStylesNames;
+    vars: import("./data-list.types").DataListCssVariables;
+    staticComponents: {
+        Item: typeof import("*.vue");
+        ItemLabel: typeof import("*.vue");
+        ItemValue: typeof import("*.vue");
+    };
+}>;

package/lib/components/data-list/index.d.ts

@@ -0,0 +1,18 @@
+import { SFCWithInstallAndClasses } from '../../core';
+import DataList from './data-list.vue';
+import DataListItem from './data-list-item/data-list-item.vue';
+import DataListItemLabel from './data-list-item-label/data-list-item-label.vue';
+import DataListItemValue from './data-list-item-value/data-list-item-value.vue';
+export declare const CDataListItem: SFCWithInstallAndClasses<typeof DataListItem>;
+export declare const CDataListItemLabel: SFCWithInstallAndClasses<typeof DataListItemLabel>;
+export declare const CDataListItemValue: SFCWithInstallAndClasses<typeof DataListItemValue>;
+export declare const CDataList: SFCWithInstallAndClasses<typeof DataList> & {
+    Item: typeof DataListItem;
+    Label: typeof DataListItemLabel;
+    Value: typeof DataListItemValue;
+};
+export default CDataList;
+export * from './data-list-item/data-list-item.types';
+export * from './data-list-item-label/data-list-item-label.types';
+export * from './data-list-item-value/data-list-item-value.types';
+export * from './data-list.types';

package/lib/components/index.d.ts

@@ -15,6 +15,7 @@ export * from './close-button';
 export * from './color-swatch';
 export * from './container';
 export * from './copy-button';
+export * from './data-list';
 export * from './divider';
 export * from './empty-state';
 export * from './file-button';
@@ -23,6 +24,7 @@ export * from './focus-trap';
 export * from './grid';
 export * from './group';
 export * from './image';
+export * from './indicator';
 export * from './loader';
 export * from './paper';
 export * from './portal';

package/lib/components/indicator/get-position-variables/get-position-variables.d.ts

@@ -0,0 +1,5 @@
+import type { IndicatorPosition, IndicatorPositionVariables } from '../indicator.types';
+export declare function getPositionVariables(_position?: IndicatorPosition, offset?: number | {
+    x: number;
+    y: number;
+}): Record<IndicatorPositionVariables, string | undefined>;

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

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

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

@@ -0,0 +1,82 @@
+import { BoxProps, CColor, CRadius, ElementProps, Factory, StylesApiProps } from '../../core';
+type Position = 'top' | 'middle' | 'bottom';
+type Placement = 'start' | 'center' | 'end';
+export type IndicatorPosition = `${Position}-${Placement}`;
+export type IndicatorPositionVariables = '--indicator-top' | '--indicator-bottom' | '--indicator-left' | '--indicator-right' | '--indicator-translate-x' | '--indicator-translate-y';
+export type IndicatorStylesNames = 'root' | 'indicator';
+export type IndicatorCssVariables = {
+    root: '--indicator-color' | '--indicator-text-color' | '--indicator-size' | '--indicator-radius' | '--indicator-z-index' | IndicatorPositionVariables;
+};
+export interface IndicatorProps extends BoxProps, StylesApiProps<IndicatorFactory>, /* @vue-ignore */ ElementProps<'div'> {
+    /**
+     * Indicator position relative to the target element
+     * @default 'top-end'
+     */
+    position?: IndicatorPosition;
+    /**
+     * Distance in pixels to offset the indicator from its default position, useful for elements with border-radius.
+     * Can be a number for uniform offset or an object with `x` and `y` properties for separate horizontal and vertical offsets
+     * @default 0
+     */
+    offset?: number | {
+        x: number;
+        y: number;
+    };
+    /**
+     * Changes container display from block to inline-block, use when wrapping elements with fixed width
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * Indicator width and height
+     * @default 10
+     */
+    size?: number | string;
+    /** Label displayed inside the indicator, for example, notification count */
+    label?: string | number;
+    /**
+     * Key of `theme.radius` or any valid CSS value to set `border-radius`
+     * @default 100
+     */
+    radius?: CRadius;
+    /**
+     * Key of `theme.colors` or any valid CSS color value
+     * @default theme.primaryColor
+     */
+    color?: CColor;
+    /** Adds border to the root element */
+    withBorder?: boolean;
+    /** Hides the indicator when set */
+    disabled?: boolean;
+    /**
+     * If set, the indicator has processing animation
+     * @default false
+     */
+    processing?: boolean;
+    /**
+     * Indicator z-index
+     * @default 200
+     */
+    zIndex?: string;
+    /** If set, adjusts text color based on background color */
+    autoContrast?: boolean;
+    /**
+     * Maximum value to display.
+     * If label is a number greater than this value, it will be displayed as `${maxValue}+`.
+     * Only works when `label` prop is set as a valid number
+     */
+    maxValue?: number;
+    /**
+     * Determines whether indicator with label `0` should be displayed
+     * Only works when `label` prop is set as a valid number
+     * @default true
+     */
+    showZero?: boolean;
+}
+export type IndicatorFactory = Factory<{
+    props: IndicatorProps;
+    ref: HTMLDivElement;
+    stylesNames: IndicatorStylesNames;
+    vars: IndicatorCssVariables;
+}>;
+export {};

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

@@ -0,0 +1,6 @@
+export declare const varsResolver: import("../..").VarsResolver<{
+    props: import("./indicator.types").IndicatorProps;
+    ref: HTMLDivElement;
+    stylesNames: import("./indicator.types").IndicatorStylesNames;
+    vars: import("./indicator.types").IndicatorCssVariables;
+}>;

package/package.json

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

package/styles/data-list.css

@@ -0,0 +1,54 @@
+.m_a6a06a4e {
+  --data-list-fz: var(--c-font-size-sm);
+  --data-list-lh: var(--c-line-height-sm);
+  --data-list-gap: var(--c-spacing-sm);
+  --data-list-label-width: calc(7.5rem * var(--c-scale));
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--data-list-gap);
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  margin: 0;
+  padding: 0;
+}
+
+  .m_a6a06a4e:where([data-with-divider]) {
+    gap: 0;
+  }
+
+.m_a69c647f {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  gap: var(--c-spacing-xs);
+}
+
+.m_a6a06a4e:where([data-orientation='vertical']) > .m_a69c647f {
+  flex-direction: column;
+  gap: 0;
+}
+
+.m_9c9621b5 {
+  color: var(--c-color-dimmed);
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  min-width: var(--data-list-label-width);
+  margin: 0;
+}
+
+.m_a6a06a4e:where([data-orientation='vertical']) .m_9c9621b5 {
+  min-width: 100%;
+}
+
+.m_9d233432 {
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  margin: 0;
+}
+
+.m_a6a06a4e:where([data-with-divider]) > .m_a69c647f:where(:not(:first-of-type)) {
+  border-top: calc(0.0625rem * var(--c-scale)) solid var(--c-color-default-border);
+  padding-top: var(--data-list-gap);
+  margin-top: var(--data-list-gap);
+}

package/styles/data-list.layer.css

@@ -0,0 +1,55 @@
+@layer cck {.m_a6a06a4e {
+  --data-list-fz: var(--c-font-size-sm);
+  --data-list-lh: var(--c-line-height-sm);
+  --data-list-gap: var(--c-spacing-sm);
+  --data-list-label-width: calc(7.5rem * var(--c-scale));
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--data-list-gap);
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  margin: 0;
+  padding: 0;
+}
+
+  .m_a6a06a4e:where([data-with-divider]) {
+    gap: 0;
+  }
+
+.m_a69c647f {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  gap: var(--c-spacing-xs);
+}
+
+.m_a6a06a4e:where([data-orientation='vertical']) > .m_a69c647f {
+  flex-direction: column;
+  gap: 0;
+}
+
+.m_9c9621b5 {
+  color: var(--c-color-dimmed);
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  min-width: var(--data-list-label-width);
+  margin: 0;
+}
+
+.m_a6a06a4e:where([data-orientation='vertical']) .m_9c9621b5 {
+  min-width: 100%;
+}
+
+.m_9d233432 {
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  margin: 0;
+}
+
+.m_a6a06a4e:where([data-with-divider]) > .m_a69c647f:where(:not(:first-of-type)) {
+  border-top: calc(0.0625rem * var(--c-scale)) solid var(--c-color-default-border);
+  padding-top: var(--data-list-gap);
+  margin-top: var(--data-list-gap);
+}
+}

package/styles/indicator.css

@@ -0,0 +1,64 @@
+@keyframes m_7c93cd91 {
+  0% {
+    opacity: 0.6;
+    transform: scale(0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(2.8);
+  }
+}
+
+.m_20df55e0 {
+  --indicator-size: calc(0.625rem * var(--c-scale));
+  --indicator-color: var(--c-primary-color-filled);
+
+  position: relative;
+  display: block;
+}
+
+.m_20df55e0:where([data-inline]) {
+    display: inline-block;
+  }
+
+.m_2b5957d1 {
+  position: absolute;
+  top: var(--indicator-top);
+  left: var(--indicator-left);
+  right: var(--indicator-right);
+  bottom: var(--indicator-bottom);
+  transform: translate(var(--indicator-translate-x), var(--indicator-translate-y));
+  min-width: var(--indicator-size);
+  height: var(--indicator-size);
+  border-radius: var(--indicator-radius, 1000rem);
+  z-index: var(--indicator-z-index, 200);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--c-font-size-xs);
+  background-color: var(--indicator-color);
+  color: var(--indicator-text-color, var(--c-color-white));
+  white-space: nowrap;
+}
+
+.m_2b5957d1::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: var(--indicator-color);
+    border-radius: var(--indicator-radius, 1000rem);
+    z-index: -1;
+  }
+
+.m_2b5957d1:where([data-with-label]) {
+    padding-inline: calc(var(--c-spacing-xs) / 2);
+  }
+
+.m_2b5957d1:where([data-with-border]) {
+    border: 2px solid var(--c-color-body);
+  }
+
+.m_2b5957d1[data-processing]::before {
+      animation: m_7c93cd91 1000ms linear infinite;
+    }

package/styles/indicator.layer.css

@@ -0,0 +1,65 @@
+@layer cck {@keyframes m_7c93cd91 {
+  0% {
+    opacity: 0.6;
+    transform: scale(0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(2.8);
+  }
+}
+
+.m_20df55e0 {
+  --indicator-size: calc(0.625rem * var(--c-scale));
+  --indicator-color: var(--c-primary-color-filled);
+
+  position: relative;
+  display: block;
+}
+
+.m_20df55e0:where([data-inline]) {
+    display: inline-block;
+  }
+
+.m_2b5957d1 {
+  position: absolute;
+  top: var(--indicator-top);
+  left: var(--indicator-left);
+  right: var(--indicator-right);
+  bottom: var(--indicator-bottom);
+  transform: translate(var(--indicator-translate-x), var(--indicator-translate-y));
+  min-width: var(--indicator-size);
+  height: var(--indicator-size);
+  border-radius: var(--indicator-radius, 1000rem);
+  z-index: var(--indicator-z-index, 200);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--c-font-size-xs);
+  background-color: var(--indicator-color);
+  color: var(--indicator-text-color, var(--c-color-white));
+  white-space: nowrap;
+}
+
+.m_2b5957d1::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: var(--indicator-color);
+    border-radius: var(--indicator-radius, 1000rem);
+    z-index: -1;
+  }
+
+.m_2b5957d1:where([data-with-label]) {
+    padding-inline: calc(var(--c-spacing-xs) / 2);
+  }
+
+.m_2b5957d1:where([data-with-border]) {
+    border: 2px solid var(--c-color-body);
+  }
+
+.m_2b5957d1[data-processing]::before {
+      animation: m_7c93cd91 1000ms linear infinite;
+    }
+}

package/styles.css

@@ -1881,6 +1881,61 @@ fieldset:disabled .c-active:active {
         margin-inline: auto;
       }
 
+.m_a6a06a4e {
+  --data-list-fz: var(--c-font-size-sm);
+  --data-list-lh: var(--c-line-height-sm);
+  --data-list-gap: var(--c-spacing-sm);
+  --data-list-label-width: calc(7.5rem * var(--c-scale));
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--data-list-gap);
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  margin: 0;
+  padding: 0;
+}
+
+  .m_a6a06a4e:where([data-with-divider]) {
+    gap: 0;
+  }
+
+.m_a69c647f {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  gap: var(--c-spacing-xs);
+}
+
+.m_a6a06a4e:where([data-orientation='vertical']) > .m_a69c647f {
+  flex-direction: column;
+  gap: 0;
+}
+
+.m_9c9621b5 {
+  color: var(--c-color-dimmed);
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  min-width: var(--data-list-label-width);
+  margin: 0;
+}
+
+.m_a6a06a4e:where([data-orientation='vertical']) .m_9c9621b5 {
+  min-width: 100%;
+}
+
+.m_9d233432 {
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  margin: 0;
+}
+
+.m_a6a06a4e:where([data-with-divider]) > .m_a69c647f:where(:not(:first-of-type)) {
+  border-top: calc(0.0625rem * var(--c-scale)) solid var(--c-color-default-border);
+  padding-top: var(--data-list-gap);
+  margin-top: var(--data-list-gap);
+}
+
 .m_35209716 {
   --divider-size-xs: calc(0.0625rem * var(--c-scale));
   --divider-size-sm: calc(0.125rem * var(--c-scale));
@@ -2125,6 +2180,71 @@ fieldset:disabled .c-active:active {
   border-radius: var(--image-radius, 0);
 }
 
+@keyframes m_7c93cd91 {
+  0% {
+    opacity: 0.6;
+    transform: scale(0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(2.8);
+  }
+}
+
+.m_20df55e0 {
+  --indicator-size: calc(0.625rem * var(--c-scale));
+  --indicator-color: var(--c-primary-color-filled);
+
+  position: relative;
+  display: block;
+}
+
+.m_20df55e0:where([data-inline]) {
+    display: inline-block;
+  }
+
+.m_2b5957d1 {
+  position: absolute;
+  top: var(--indicator-top);
+  left: var(--indicator-left);
+  right: var(--indicator-right);
+  bottom: var(--indicator-bottom);
+  transform: translate(var(--indicator-translate-x), var(--indicator-translate-y));
+  min-width: var(--indicator-size);
+  height: var(--indicator-size);
+  border-radius: var(--indicator-radius, 1000rem);
+  z-index: var(--indicator-z-index, 200);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--c-font-size-xs);
+  background-color: var(--indicator-color);
+  color: var(--indicator-text-color, var(--c-color-white));
+  white-space: nowrap;
+}
+
+.m_2b5957d1::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: var(--indicator-color);
+    border-radius: var(--indicator-radius, 1000rem);
+    z-index: -1;
+  }
+
+.m_2b5957d1:where([data-with-label]) {
+    padding-inline: calc(var(--c-spacing-xs) / 2);
+  }
+
+.m_2b5957d1:where([data-with-border]) {
+    border: 2px solid var(--c-color-body);
+  }
+
+.m_2b5957d1[data-processing]::before {
+      animation: m_7c93cd91 1000ms linear infinite;
+    }
+
 .m_a244865c {
   --loader-size-xs: calc(1.125rem * var(--c-scale));
   --loader-size-sm: calc(1.375rem * var(--c-scale));