@rebnd/ui 0.0.2 → 0.0.3

package/dist/index.d.ts

@@ -13,5 +13,6 @@ export { default as RIcon } from './src/components/RIcon/RIcon';
 export { default as RInput } from './src/components/RInput/RInput';
 export { default as RLink } from './src/components/RLink/RLink';
 export { default as RTab } from './src/components/RTab/RTab';
+export { default as RTable } from './src/components/RTable/RTable';
 export { default as RTabs } from './src/components/RTabs/RTabs';
 export { default as RTextArea } from './src/components/RTextArea/RTextArea';

package/dist/src/components/RTable/RTable.d.ts

@@ -0,0 +1,47 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    columns: {
+        type: import('vue').PropType<import('../../types').TableColumn<unknown>[]>;
+        default: () => never[];
+        required: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rows: {
+        type: import('vue').PropType<unknown[]>;
+        default: () => never[];
+        required: boolean;
+    };
+    selectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    columns: {
+        type: import('vue').PropType<import('../../types').TableColumn<unknown>[]>;
+        default: () => never[];
+        required: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rows: {
+        type: import('vue').PropType<unknown[]>;
+        default: () => never[];
+        required: boolean;
+    };
+    selectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    columns: import('../../types').TableColumn<unknown>[];
+    loading: boolean;
+    rows: unknown[];
+    selectable: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/src/components/RTable/utils/table.props.d.ts

@@ -0,0 +1,23 @@
+import { PropType } from 'vue';
+import { TableColumn } from '../../../types';
+declare const _default: {
+    columns: {
+        type: PropType<TableColumn<unknown>[]>;
+        default: () => never[];
+        required: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rows: {
+        type: PropType<unknown[]>;
+        default: () => never[];
+        required: boolean;
+    };
+    selectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+export default _default;

package/dist/src/components/RTable/utils/table.style.d.ts

@@ -0,0 +1,4 @@
+declare const table: string;
+declare const tableHead: string;
+declare const tableStateCell: string;
+export { table, tableHead, tableStateCell };

package/dist/src/theme/animations.d.ts

@@ -2,5 +2,8 @@ declare const _default: {
     shake: {
         value: string;
     };
+    slide: {
+        value: string;
+    };
 };
 export default _default;

package/dist/src/theme/tokens.d.ts

@@ -3,6 +3,9 @@ declare const _default: {
         shake: {
             value: string;
         };
+        slide: {
+            value: string;
+        };
     };
     colors: {
         blue: {

package/dist/src/types/component.d.ts

@@ -1,3 +1,4 @@
+import { VNode } from 'vue';
 type AccordionDisclosure = {
     id: string;
     title: string;
@@ -22,5 +23,11 @@ type LinkType = 'a' | 'RouterLink' | 'NuxtLink';
 type Position = 'top' | 'bottom' | 'left' | 'right';
 type Rounded = 'none' | Size | 'full';
 type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type TableColumn<T = unknown> = {
+    id: string;
+    key: keyof T | string;
+    title: string;
+    actions?: VNode | ((row: T) => VNode);
+};
 type Variant = 'solid' | 'ghost' | 'outlined';
-export type { AccordionDisclosure, Alignment, AnchorPosition, ButtonType, Color, ComponentName, DropdownAction, Icon, IconName, LinkRel, LinkTarget, LinkType, Position, Rounded, Size, Variant, };
+export type { AccordionDisclosure, Alignment, AnchorPosition, ButtonType, Color, ComponentName, DropdownAction, Icon, IconName, LinkRel, LinkTarget, LinkType, Position, Rounded, Size, TableColumn, Variant, };

package/dist/src/types/index.d.ts

@@ -1,3 +1,3 @@
-import { AccordionDisclosure, Alignment, AnchorPosition, ButtonType, Color, ComponentName, DropdownAction, Icon, IconName, LinkRel, LinkTarget, LinkType, Position, Rounded, Size, Variant } from './component';
+import { AccordionDisclosure, Alignment, AnchorPosition, ButtonType, Color, ComponentName, DropdownAction, Icon, IconName, LinkRel, LinkTarget, LinkType, Position, Rounded, Size, TableColumn, Variant } from './component';
 import { FormError, FormSubmitEvent } from './form';
-export type { AccordionDisclosure, Alignment, AnchorPosition, ButtonType, Color, ComponentName, DropdownAction, FormError, FormSubmitEvent, Icon, IconName, LinkRel, LinkTarget, LinkType, Position, Rounded, Size, Variant, };
+export type { AccordionDisclosure, Alignment, AnchorPosition, ButtonType, Color, ComponentName, DropdownAction, FormError, FormSubmitEvent, Icon, IconName, LinkRel, LinkTarget, LinkType, Position, Rounded, Size, TableColumn, Variant, };

package/dist/styles.css

@@ -425,6 +425,7 @@
     --animations-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --animations-bounce: bounce 1s infinite;
     --animations-shake: shake 1s linear;
+    --animations-slide: slide 3s ease-in infinite;
     --colors-current: currentColor;
     --colors-black: #000;
     --colors-white: #fff;
@@ -813,6 +814,34 @@
     43.5% {
       transform: translateX(2px) rotateY(3deg);
 }
+}
+
+  @keyframes slide {
+    0% {
+      transform: scaleX(1);
+      width: 0%;
+      transform-origin: left;
+      background-color: var(--colors-dash-800);
+}
+
+    50% {
+      transform: scaleX(1);
+      width: 100%;
+      transform-origin: left;
+}
+
+    50.01% {
+      transform: scaleX(1);
+      width: 100%;
+      transform-origin: right;
+      background-color: var(--colors-dash-600);
+}
+
+    100% {
+      transform: scaleX(0);
+      width: 100%;
+      transform-origin: right;
+}
 }
 }
 
@@ -1067,18 +1096,28 @@
     color: #D3D7E4;
 }
 
-  .scale_1 {
-    scale: 1;
+  .p_0\.5rem_1rem {
+    padding: 0.5rem 1rem;
 }
 
-  .trs_all {
-    transition-property: var(--transition-prop, all);
-    transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
-    transition-duration: var(--transition-duration, 150ms);
+  .bd-cl_collapse {
+    border-collapse: collapse;
 }
 
-  .p_0\.5rem_1rem {
-    padding: 0.5rem 1rem;
+  .bdr_2px {
+    border-radius: 2px;
+}
+
+  .bd-b_1px_solid {
+    border-bottom: 1px solid;
+}
+
+  .p_5rem\! {
+    padding: 5rem !important;
+}
+
+  .ta_center {
+    text-align: center;
 }
 
   .c_neutrals\.900 {
@@ -1249,11 +1288,6 @@
     flex-direction: column;
 }
 
-  .trs-dur_400ms {
-    --transition-duration: 400ms;
-    transition-duration: 400ms;
-}
-
   .jc_space-around {
     justify-content: space-around;
 }
@@ -1394,6 +1428,18 @@
     vertical-align: middle;
 }
 
+  .\[\&_td\,_th\]\:p_1rem td,.\[\&_td\,_th\]\:p_1rem th {
+    padding: 1rem;
+}
+
+  .\[\&_td\,_th\]\:white-space_nowrap td,.\[\&_td\,_th\]\:white-space_nowrap th {
+    white-space: nowrap;
+}
+
+  .\[\&_tr\:not\(\:last-child\)\]\:bd-b_1px_solid tr:not(:last-child) {
+    border-bottom: 1px solid;
+}
+
   [data-theme=dark] .dark\:c_neutral\.50 {
     color: var(--colors-neutral-50);
 }
@@ -1578,6 +1624,10 @@
     margin-left: 0.5rem;
 }
 
+  .\[\&_tr\:not\(\:last-child\)\]\:bd-c_neutrals\.100 tr:not(:last-child) {
+    border-color: var(--colors-neutrals-100);
+}
+
   .\[\&_div\]\:bg-c_neutrals\.50 div {
     background-color: var(--colors-neutrals-50);
 }
@@ -1618,10 +1668,6 @@
     color: var(--colors-primary-darker);
 }
 
-  .hover\:scale_0\.95:is(:hover, [data-hover]) {
-    scale: 0.95;
-}
-
   .hover\:bg-c_error\.darker:is(:hover, [data-hover]) {
     background-color: var(--colors-error-darker);
 }
@@ -1732,6 +1778,10 @@
     cursor: not-allowed;
 }
 
+  .\[\&\.loading\]\:\[\&_tbody\]\:pos_relative.loading tbody {
+    position: relative;
+}
+
   .\[\&_details\]\:hover\:bg-c_neutrals\.200 details:is(:hover, [data-hover]) {
     background-color: var(--colors-neutrals-200);
 }
@@ -1784,6 +1834,10 @@
     padding-left: 2rem;
 }
 
+  [data-theme=dark] .\[\&_tr\:not\(\:last-child\)\]\:dark\:bd-c_neutrals\.800 tr:not(:last-child) {
+    border-color: var(--colors-neutrals-800);
+}
+
   [data-theme=dark] .\[\&_div\]\:dark\:bg-c_neutrals\.800 div {
     background-color: var(--colors-neutrals-800);
 }
@@ -1824,6 +1878,30 @@
     background: #0f1015;
 }
 
+  .\[\&\.loading\]\:\[\&_tbody\]\:before\:d_block.loading tbody::before {
+    display: block;
+}
+
+  .\[\&\.loading\]\:\[\&_tbody\]\:before\:pos_absolute.loading tbody::before {
+    position: absolute;
+}
+
+  .\[\&\.loading\]\:\[\&_tbody\]\:before\:h_2px.loading tbody::before {
+    height: 2px;
+}
+
+  .\[\&\.loading\]\:\[\&_tbody\]\:before\:trf-o_right.loading tbody::before {
+    transform-origin: right;
+}
+
+  .\[\&\.loading\]\:\[\&_tbody\]\:before\:bg_dash\.600.loading tbody::before {
+    background: var(--colors-dash-600);
+}
+
+  .\[\&\.loading\]\:\[\&_tbody\]\:before\:anim_slide.loading tbody::before {
+    animation: var(--animations-slide);
+}
+
   [data-theme=dark] .\[\&_details\]\:dark\:hover\:bg-c_neutrals\.800 details:is(:hover, [data-hover]) {
     background-color: var(--colors-neutrals-800);
 }
@@ -1868,6 +1946,18 @@
     background-color: #15171E;
 }
 
+  .\[\&\.loading\]\:\[\&_tbody\]\:before\:content_\"\".loading tbody::before {
+    content: "";
+}
+
+  .\[\&\.loading\]\:\[\&_tbody\]\:before\:top_0.loading tbody::before {
+    top: var(--spacing-0);
+}
+
+  .\[\&\.loading\]\:\[\&_tbody\]\:before\:left_0.loading tbody::before {
+    left: var(--spacing-0);
+}
+
   .\[\&_details\]\:\[\&\[open\]\]\:\[\&_\>_summary\]\:before\:trf_rotate\(-45deg\) details[open] > summary::before {
     transform: rotate(-45deg);
 }