@uibit/table 0.1.0 → 0.2.0

package/dist/frameworks/astro/index.d.ts

@@ -4,7 +4,23 @@ import '@uibit/table';
 declare global {
   namespace astroHTML.JSX {
     interface IntrinsicElements {
-      'uibit-table': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes;
+      'uibit-table': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes & {
+      searchable?: boolean;
+      paginated?: boolean;
+      exportable?: boolean;
+      selectable?: boolean;
+      filterable?: boolean;
+      resizable?: boolean;
+      columnChooser?: boolean;
+      striped?: boolean;
+      stickyHeader?: boolean;
+      pageSizes?: string;
+      controlsLayout?: 'inline' | 'menu';
+      infiniteScroll?: boolean;
+      loading?: boolean;
+      locale?: string;
+
+      };
     }
   }
 }

package/dist/frameworks/preact/index.d.ts

@@ -19,6 +19,8 @@ declare module 'preact' {
       controlsLayout?: 'inline' | 'menu';
       infiniteScroll?: boolean;
       loading?: boolean;
+      locale?: string;
+
       };
     }
   }

package/dist/frameworks/react/index.ts

@@ -0,0 +1,193 @@
+import React, { useRef, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
+import type { Table as HTMLElementClass } from '@uibit/table';
+import '@uibit/table';
+const useTypeOfLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+export interface TableProps extends Omit<React.HTMLAttributes<HTMLElementClass>, 'searchable' | 'paginated' | 'exportable' | 'selectable' | 'filterable' | 'resizable' | 'columnChooser' | 'striped' | 'stickyHeader' | 'pageSizes' | 'controlsLayout' | 'infiniteScroll' | 'loading' | 'locale'> {
+    children?: React.ReactNode;
+    searchable?: boolean;
+    paginated?: boolean;
+    exportable?: boolean;
+    selectable?: boolean;
+    filterable?: boolean;
+    resizable?: boolean;
+    columnChooser?: boolean;
+    striped?: boolean;
+    stickyHeader?: boolean;
+    pageSizes?: string;
+    controlsLayout?: 'inline' | 'menu';
+    infiniteScroll?: boolean;
+    loading?: boolean;
+    locale?: string;
+}
+export const Table = ({ ref, children, ...props }: TableProps & {
+    ref?: React.Ref<HTMLElementClass>;
+})=>{
+    const innerRef = useRef<HTMLElementClass>(null);
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    useImperativeHandle(ref, ()=>innerRef.current!);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.searchable !== undefined) {
+            (element as any).searchable = props.searchable;
+        }
+    }, [
+        props.searchable
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.paginated !== undefined) {
+            (element as any).paginated = props.paginated;
+        }
+    }, [
+        props.paginated
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.exportable !== undefined) {
+            (element as any).exportable = props.exportable;
+        }
+    }, [
+        props.exportable
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.selectable !== undefined) {
+            (element as any).selectable = props.selectable;
+        }
+    }, [
+        props.selectable
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.filterable !== undefined) {
+            (element as any).filterable = props.filterable;
+        }
+    }, [
+        props.filterable
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.resizable !== undefined) {
+            (element as any).resizable = props.resizable;
+        }
+    }, [
+        props.resizable
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.columnChooser !== undefined) {
+            (element as any).columnChooser = props.columnChooser;
+        }
+    }, [
+        props.columnChooser
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.striped !== undefined) {
+            (element as any).striped = props.striped;
+        }
+    }, [
+        props.striped
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.stickyHeader !== undefined) {
+            (element as any).stickyHeader = props.stickyHeader;
+        }
+    }, [
+        props.stickyHeader
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.pageSizes !== undefined) {
+            (element as any).pageSizes = props.pageSizes;
+        }
+    }, [
+        props.pageSizes
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.controlsLayout !== undefined) {
+            (element as any).controlsLayout = props.controlsLayout;
+        }
+    }, [
+        props.controlsLayout
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.infiniteScroll !== undefined) {
+            (element as any).infiniteScroll = props.infiniteScroll;
+        }
+    }, [
+        props.infiniteScroll
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.loading !== undefined) {
+            (element as any).loading = props.loading;
+        }
+    }, [
+        props.loading
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.locale !== undefined) {
+            (element as any).locale = props.locale;
+        }
+    }, [
+        props.locale
+    ]);
+    const domProps = {
+        ...props
+    };
+    const customPropNames = [
+        'searchable',
+        'paginated',
+        'exportable',
+        'selectable',
+        'filterable',
+        'resizable',
+        'columnChooser',
+        'striped',
+        'stickyHeader',
+        'pageSizes',
+        'controlsLayout',
+        'infiniteScroll',
+        'loading',
+        'locale'
+    ];
+    for (const key of customPropNames){
+        delete (domProps as any)[key];
+    }
+    return React.createElement('uibit-table', {
+        ref: innerRef,
+        ...domProps
+    }, children);
+};
+declare global {
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                'uibit-table': React.ClassAttributes<HTMLElementClass> & React.HTMLAttributes<HTMLElementClass> & {
+                    children?: React.ReactNode;
+                    class?: string;
+                    searchable?: boolean;
+                    paginated?: boolean;
+                    exportable?: boolean;
+                    selectable?: boolean;
+                    filterable?: boolean;
+                    resizable?: boolean;
+                    columnChooser?: boolean;
+                    striped?: boolean;
+                    stickyHeader?: boolean;
+                    pageSizes?: string;
+                    controlsLayout?: 'inline' | 'menu';
+                    infiniteScroll?: boolean;
+                    loading?: boolean;
+                    locale?: string;
+                };
+            }
+        }
+    }
+}

package/dist/frameworks/solid/index.d.ts

@@ -19,6 +19,7 @@ declare module 'solid-js' {
       controlsLayout?: 'inline' | 'menu';
       infiniteScroll?: boolean;
       loading?: boolean;
+      locale?: string;
 
       };
     }

package/dist/frameworks/stencil/index.d.ts

@@ -18,6 +18,8 @@ declare module '@stencil/core' {
     controlsLayout?: 'inline' | 'menu';
     infiniteScroll?: boolean;
     loading?: boolean;
+    locale?: string;
+
       };
     }
   }

package/dist/frameworks/svelte/index.svelte

@@ -1,24 +1,26 @@
 <script lang="ts">
   import '@uibit/table';
   import type { Table as HTMLElementClass } from '@uibit/table';
-  
-  let {
-    searchable = undefined,
-      paginated = undefined,
-      exportable = undefined,
-      selectable = undefined,
-      filterable = undefined,
-      resizable = undefined,
-      columnChooser = undefined,
-      striped = undefined,
-      stickyHeader = undefined,
-      pageSizes = undefined,
-      controlsLayout = undefined,
-      infiniteScroll = undefined,
-      loading = undefined,
-      children
+
+let {
+    searchable = $bindable(),
+    paginated = $bindable(),
+    exportable = $bindable(),
+    selectable = $bindable(),
+    filterable = $bindable(),
+    resizable = $bindable(),
+    columnChooser = $bindable(),
+    striped = $bindable(),
+    stickyHeader = $bindable(),
+    pageSizes = $bindable(),
+    controlsLayout = $bindable(),
+    infiniteScroll = $bindable(),
+    loading = $bindable(),
+    locale = $bindable(),
+    children,
+    ...restProps
   } = $props<{
-    children?: any;
+    children?: import('svelte').Snippet;
     searchable?: boolean;
     paginated?: boolean;
     exportable?: boolean;
@@ -32,56 +34,121 @@
     controlsLayout?: 'inline' | 'menu';
     infiniteScroll?: boolean;
     loading?: boolean;
-  
+    locale?: string;
+
+    [key: string]: any;
   }>();
-  
-  let elementRef: HTMLElementClass | null = $state(null);
-  
-  $effect(() => {
-    if (elementRef && searchable !== undefined) {
+
+let elementRef: HTMLElementClass | null = $state(null);
+
+$effect(() => {
+    if (elementRef && searchable !== undefined && elementRef.searchable !== searchable) {
       elementRef.searchable = searchable;
     }
-    if (elementRef && paginated !== undefined) {
+    if (elementRef && paginated !== undefined && elementRef.paginated !== paginated) {
       elementRef.paginated = paginated;
     }
-    if (elementRef && exportable !== undefined) {
+    if (elementRef && exportable !== undefined && elementRef.exportable !== exportable) {
       elementRef.exportable = exportable;
     }
-    if (elementRef && selectable !== undefined) {
+    if (elementRef && selectable !== undefined && elementRef.selectable !== selectable) {
       elementRef.selectable = selectable;
     }
-    if (elementRef && filterable !== undefined) {
+    if (elementRef && filterable !== undefined && elementRef.filterable !== filterable) {
       elementRef.filterable = filterable;
     }
-    if (elementRef && resizable !== undefined) {
+    if (elementRef && resizable !== undefined && elementRef.resizable !== resizable) {
       elementRef.resizable = resizable;
     }
-    if (elementRef && columnChooser !== undefined) {
+    if (elementRef && columnChooser !== undefined && elementRef.columnChooser !== columnChooser) {
       elementRef.columnChooser = columnChooser;
     }
-    if (elementRef && striped !== undefined) {
+    if (elementRef && striped !== undefined && elementRef.striped !== striped) {
       elementRef.striped = striped;
     }
-    if (elementRef && stickyHeader !== undefined) {
+    if (elementRef && stickyHeader !== undefined && elementRef.stickyHeader !== stickyHeader) {
       elementRef.stickyHeader = stickyHeader;
     }
-    if (elementRef && pageSizes !== undefined) {
+    if (elementRef && pageSizes !== undefined && elementRef.pageSizes !== pageSizes) {
       elementRef.pageSizes = pageSizes;
     }
-    if (elementRef && controlsLayout !== undefined) {
+    if (elementRef && controlsLayout !== undefined && elementRef.controlsLayout !== controlsLayout) {
       elementRef.controlsLayout = controlsLayout;
     }
-    if (elementRef && infiniteScroll !== undefined) {
+    if (elementRef && infiniteScroll !== undefined && elementRef.infiniteScroll !== infiniteScroll) {
       elementRef.infiniteScroll = infiniteScroll;
     }
-    if (elementRef && loading !== undefined) {
+    if (elementRef && loading !== undefined && elementRef.loading !== loading) {
       elementRef.loading = loading;
     }
+    if (elementRef && locale !== undefined && elementRef.locale !== locale) {
+      elementRef.locale = locale;
+    }
   });
-  
+
+$effect(() => {
+    const element = elementRef;
+    if (!element) return;
+
+    const handleEvent = () => {
+      if (searchable !== element.searchable) {
+        searchable = element.searchable as any;
+      }
+      if (paginated !== element.paginated) {
+        paginated = element.paginated as any;
+      }
+      if (exportable !== element.exportable) {
+        exportable = element.exportable as any;
+      }
+      if (selectable !== element.selectable) {
+        selectable = element.selectable as any;
+      }
+      if (filterable !== element.filterable) {
+        filterable = element.filterable as any;
+      }
+      if (resizable !== element.resizable) {
+        resizable = element.resizable as any;
+      }
+      if (columnChooser !== element.columnChooser) {
+        columnChooser = element.columnChooser as any;
+      }
+      if (striped !== element.striped) {
+        striped = element.striped as any;
+      }
+      if (stickyHeader !== element.stickyHeader) {
+        stickyHeader = element.stickyHeader as any;
+      }
+      if (pageSizes !== element.pageSizes) {
+        pageSizes = element.pageSizes as any;
+      }
+      if (controlsLayout !== element.controlsLayout) {
+        controlsLayout = element.controlsLayout as any;
+      }
+      if (infiniteScroll !== element.infiniteScroll) {
+        infiniteScroll = element.infiniteScroll as any;
+      }
+      if (loading !== element.loading) {
+        loading = element.loading as any;
+      }
+      if (locale !== element.locale) {
+        locale = element.locale as any;
+      }
+    };
+
+    const events = ['change', 'input'];
+    for (const event of events) {
+      element.addEventListener(event, handleEvent);
+    }
+    return () => {
+      for (const event of events) {
+        element.removeEventListener(event, handleEvent);
+      }
+    };
+  });
+
 </script>
 
-<uibit-table bind:this={elementRef} {...$$restProps}>
+<uibit-table bind:this={elementRef} {...restProps}>
 
   {#if children}
     {@render children()}

package/dist/frameworks/vue/index.ts

@@ -1,34 +1,232 @@
-import { defineComponent, h } from 'vue';
+import { defineComponent, h, ref, watch } from 'vue';
 import type { Table as HTMLElementClass } from '@uibit/table';
 import '@uibit/table';
-
 export const Table = defineComponent({
-  name: 'Table',
-  props: {
-    searchable: { type: [String, Number, Boolean, Array, Object] as any },
-    paginated: { type: [String, Number, Boolean, Array, Object] as any },
-    exportable: { type: [String, Number, Boolean, Array, Object] as any },
-    selectable: { type: [String, Number, Boolean, Array, Object] as any },
-    filterable: { type: [String, Number, Boolean, Array, Object] as any },
-    resizable: { type: [String, Number, Boolean, Array, Object] as any },
-    columnChooser: { type: [String, Number, Boolean, Array, Object] as any },
-    striped: { type: [String, Number, Boolean, Array, Object] as any },
-    stickyHeader: { type: [String, Number, Boolean, Array, Object] as any },
-    pageSizes: { type: [String, Number, Boolean, Array, Object] as any },
-    controlsLayout: { type: [String, Number, Boolean, Array, Object] as any },
-    infiniteScroll: { type: [String, Number, Boolean, Array, Object] as any },
-    loading: { type: [String, Number, Boolean, Array, Object] as any }
-  },
-  emits: [],
-  setup(props, { slots, emit }) {
-    return () => {
-      const eventListeners: Record<string, any> = {};
-
-
-      return h('uibit-table', {
-        ...props,
-        ...eventListeners
-      }, slots.default?.());
-    };
-  }
+    name: 'Table',
+    props: {
+        searchable: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        paginated: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        exportable: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        selectable: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        filterable: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        resizable: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        columnChooser: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        striped: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        stickyHeader: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        pageSizes: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        controlsLayout: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        infiniteScroll: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        loading: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        locale: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        }
+    },
+    emits: [],
+    setup (props, { slots, emit }) {
+        const elementRef = ref<HTMLElementClass | null>(null);
+        if (false) {
+            watch(()=>props.modelValue, (newVal)=>{
+                if (elementRef.value && newVal !== undefined && elementRef.value.value !== newVal) {
+                    elementRef.value.value = newVal;
+                }
+            });
+            watch(()=>props.value, (newVal)=>{
+                if (elementRef.value && newVal !== undefined && elementRef.value.value !== newVal) {
+                    elementRef.value.value = newVal;
+                }
+            });
+        }
+        watch(()=>props.searchable, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).searchable = newVal;
+            }
+        });
+        watch(()=>props.paginated, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).paginated = newVal;
+            }
+        });
+        watch(()=>props.exportable, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).exportable = newVal;
+            }
+        });
+        watch(()=>props.selectable, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).selectable = newVal;
+            }
+        });
+        watch(()=>props.filterable, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).filterable = newVal;
+            }
+        });
+        watch(()=>props.resizable, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).resizable = newVal;
+            }
+        });
+        watch(()=>props.columnChooser, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).columnChooser = newVal;
+            }
+        });
+        watch(()=>props.striped, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).striped = newVal;
+            }
+        });
+        watch(()=>props.stickyHeader, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).stickyHeader = newVal;
+            }
+        });
+        watch(()=>props.pageSizes, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).pageSizes = newVal;
+            }
+        });
+        watch(()=>props.controlsLayout, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).controlsLayout = newVal;
+            }
+        });
+        watch(()=>props.infiniteScroll, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).infiniteScroll = newVal;
+            }
+        });
+        watch(()=>props.loading, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).loading = newVal;
+            }
+        });
+        watch(()=>props.locale, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).locale = newVal;
+            }
+        });
+        return ()=>{
+            const eventListeners: Record<string, any> = {};
+            const mergedProps = {
+                ...props,
+                ...eventListeners,
+                ref: elementRef
+            };
+            if (false && props.modelValue !== undefined) {
+                (mergedProps as any).value = props.modelValue;
+            }
+            return h('uibit-table', mergedProps, slots.default?.());
+        };
+    }
 });