@cck-ui/core 0.35.0 → 0.36.0

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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cck-ui/core",
-  "version": "0.35.0",
+  "version": "0.36.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.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));

package/styles.layer.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));