@expcat/tigercat-vue 2.0.0-preview.5 → 2.0.0-preview.6

package/dist/{chunk-QNPBLZZT.mjs → chunk-2Y7W7IML.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-U6OGGZBY.mjs";
 import {
   List
-} from "./chunk-2YLUE5CW.mjs";
+} from "./chunk-GIOEFFG6.mjs";
 import {
   Button
 } from "./chunk-YZBQ6IR7.mjs";

package/dist/{chunk-4M2TNB2Z.mjs → chunk-4JG6AG4W.mjs}

@@ -4,6 +4,9 @@ import {
 import {
   Radio
 } from "./chunk-6BDDX2R4.mjs";
+import {
+  Pagination
+} from "./chunk-N6GLO7U5.mjs";
 import {
   Empty
 } from "./chunk-SJINC5NF.mjs";
@@ -1232,97 +1235,65 @@ function renderSummaryRow(ctx, props) {
 // src/components/Table/render-pagination.ts
 import { h as h5 } from "vue";
 import {
-  formatIntlNumber,
-  formatPaginationTotal,
   formatPaginationPageIndicator,
+  formatPaginationTotal,
+  getBuiltInPaginationContainerClasses,
   getPaginationLabels,
-  getSimplePaginationContainerClasses,
-  getSimplePaginationTotalClasses,
-  getSimplePaginationControlsClasses,
-  getSimplePaginationSelectClasses,
-  getSimplePaginationButtonClasses,
-  getSimplePaginationPageIndicatorClasses,
-  getSimplePaginationButtonsWrapperClasses
+  resolvePaginationDisplayMode
 } from "@expcat/tigercat-core";
 function renderPagination(ctx, props, view) {
   if (props.pagination === false || !ctx.paginationInfo.value) {
     return null;
   }
-  const { totalPages, startIndex, endIndex, hasNext, hasPrev } = ctx.paginationInfo.value;
+  const { totalPages } = ctx.paginationInfo.value;
   const paginationConfig = props.pagination;
   const total = paginationConfig.total !== void 0 && paginationConfig.total > 0 ? paginationConfig.total : ctx.processedData.value.length;
   const locale = view?.disableI18n ? void 0 : view?.locale;
   const labels = getPaginationLabels(locale);
   const localeCode = locale?.locale;
-  const finalTotalText = paginationConfig.totalText ? paginationConfig.totalText(total, [startIndex, endIndex]) : formatPaginationTotal(labels.totalText, total, [startIndex, endIndex], localeCode);
-  const finalPrevText = paginationConfig.prevText || labels.prevPageAriaLabel;
-  const finalNextText = paginationConfig.nextText || labels.nextPageAriaLabel;
-  const finalPageIndicatorText = paginationConfig.pageIndicatorText ? paginationConfig.pageIndicatorText(ctx.currentPage.value, totalPages) : formatPaginationPageIndicator(
-    labels.pageIndicatorText,
-    ctx.currentPage.value,
-    totalPages,
-    localeCode
-  );
-  const finalPrevAriaLabel = view?.disableI18n ? finalPrevText : labels.prevPageAriaLabel;
-  const finalNextAriaLabel = view?.disableI18n ? finalNextText : labels.nextPageAriaLabel;
-  const normalizedPageSizeOptions = paginationConfig.pageSizeOptions || [
+  const { simple, showQuickJumper } = resolvePaginationDisplayMode(totalPages, paginationConfig);
+  const totalText = paginationConfig.totalText ?? ((value, range) => formatPaginationTotal(labels.totalText, value, range, localeCode));
+  const pageIndicatorText = paginationConfig.pageIndicatorText ?? ((current, pages) => formatPaginationPageIndicator(labels.pageIndicatorText, current, pages, localeCode));
+  const overrides = view?.disableI18n ? { ...labels } : {};
+  if (paginationConfig.prevText) overrides.prevPageAriaLabel = paginationConfig.prevText;
+  if (paginationConfig.nextText) overrides.nextPageAriaLabel = paginationConfig.nextText;
+  const labelsOverride = Object.keys(overrides).length > 0 ? overrides : void 0;
+  const pageSizeOptions = paginationConfig.pageSizeOptions ?? [
     10,
     20,
     50,
     100
   ];
-  return h5("div", { class: getSimplePaginationContainerClasses() }, [
-    paginationConfig.showTotal !== false && h5("div", { class: getSimplePaginationTotalClasses() }, finalTotalText),
-    h5("div", { class: getSimplePaginationControlsClasses() }, [
-      paginationConfig.showSizeChanger !== false && h5(
-        "select",
-        {
-          class: getSimplePaginationSelectClasses(),
-          value: ctx.currentPageSize.value,
-          "aria-label": labels.itemsPerPageText,
-          onChange: (e) => ctx.handlePageSizeChange(Number(e.target.value))
-        },
-        normalizedPageSizeOptions.map((option) => {
-          const value = typeof option === "number" ? option : option.value;
-          const label = typeof option === "number" ? `${formatIntlNumber(value, localeCode)} ${labels.itemsPerPageText}` : option.label ?? `${formatIntlNumber(value, localeCode)} ${labels.itemsPerPageText}`;
-          return h5(
-            "option",
-            { value, key: value },
-            paginationConfig.pageSizeText ? paginationConfig.pageSizeText(value) : label
-          );
-        })
-      ),
-      h5("div", { class: getSimplePaginationButtonsWrapperClasses() }, [
-        h5(
-          "button",
-          {
-            class: getSimplePaginationButtonClasses(!hasPrev),
-            disabled: !hasPrev,
-            "aria-label": finalPrevAriaLabel,
-            onClick: () => ctx.handlePageChange(ctx.currentPage.value - 1)
-          },
-          finalPrevText
-        ),
-        h5(
-          "span",
-          {
-            class: getSimplePaginationPageIndicatorClasses(),
-            "aria-label": finalPageIndicatorText
-          },
-          finalPageIndicatorText
-        ),
-        h5(
-          "button",
-          {
-            class: getSimplePaginationButtonClasses(!hasNext),
-            disabled: !hasNext,
-            "aria-label": finalNextAriaLabel,
-            onClick: () => ctx.handlePageChange(ctx.currentPage.value + 1)
-          },
-          finalNextText
-        )
-      ])
-    ])
+  const pageSizeText = paginationConfig.pageSizeText;
+  const normalizedPageSizeOptions = pageSizeText ? pageSizeOptions.map((option) => {
+    if (typeof option === "number") {
+      return { value: option, label: pageSizeText(option) };
+    }
+    return { value: option.value, label: option.label ?? pageSizeText(option.value) };
+  }) : pageSizeOptions;
+  return h5("div", { class: getBuiltInPaginationContainerClasses() }, [
+    h5(Pagination, {
+      size: "small",
+      align: "right",
+      current: ctx.currentPage.value,
+      pageSize: ctx.currentPageSize.value,
+      total,
+      simple,
+      showQuickJumper,
+      showSizeChanger: paginationConfig.showSizeChanger !== false,
+      showTotal: paginationConfig.showTotal !== false,
+      totalText,
+      pageIndicatorText,
+      pageSizeOptions: normalizedPageSizeOptions,
+      locale,
+      labels: labelsOverride,
+      onChange: (page, pageSize) => {
+        if (pageSize === ctx.currentPageSize.value) {
+          ctx.handlePageChange(page);
+        }
+      },
+      onPageSizeChange: (_page, pageSize) => ctx.handlePageSizeChange(pageSize)
+    })
   ]);
 }
 

package/dist/{chunk-2YLUE5CW.mjs → chunk-GIOEFFG6.mjs}

@@ -1,3 +1,6 @@
+import {
+  Pagination
+} from "./chunk-N6GLO7U5.mjs";
 import {
   VirtualList
 } from "./chunk-HS4YQGZQ.mjs";
@@ -39,13 +42,8 @@ import {
   getSpinnerSVG,
   normalizeSvgAttrs,
   getLoadingOverlaySpinnerClasses,
-  getSimplePaginationContainerClasses,
-  getSimplePaginationTotalClasses,
-  getSimplePaginationControlsClasses,
-  getSimplePaginationSelectClasses,
-  getSimplePaginationButtonClasses,
-  getSimplePaginationPageIndicatorClasses,
-  getSimplePaginationButtonsWrapperClasses,
+  getBuiltInPaginationContainerClasses,
+  resolvePaginationDisplayMode,
   getPaginationLabels,
   formatPaginationTotal,
   formatPaginationPageIndicator
@@ -446,72 +444,44 @@ var List = defineComponent({
       if (props.pagination === false || !paginationInfo.value) {
         return null;
       }
-      const { totalPages, startIndex, endIndex, hasNext, hasPrev } = paginationInfo.value;
+      const { totalPages } = paginationInfo.value;
       const total = paginationTotal.value;
       const paginationConfig = props.pagination;
       const paginationLabels = getPaginationLabels(mergedLocale.value);
       const localeCode = mergedLocale.value?.locale;
-      return h("div", { class: getSimplePaginationContainerClasses() }, [
-        // Total info
-        paginationConfig.showTotal !== false && h(
-          "div",
-          { class: getSimplePaginationTotalClasses() },
-          paginationConfig.totalText ? paginationConfig.totalText(total, [startIndex, endIndex]) : formatPaginationTotal(
-            paginationLabels.totalText,
-            total,
-            [startIndex, endIndex],
-            localeCode
-          )
-        ),
-        // Pagination controls
-        h("div", { class: getSimplePaginationControlsClasses() }, [
-          // Page size selector
-          paginationConfig.showSizeChanger !== false && h(
-            "select",
-            {
-              class: getSimplePaginationSelectClasses(),
-              value: currentPageSize.value,
-              onChange: (e) => handlePageSizeChange(Number(e.target.value))
-            },
-            (paginationConfig.pageSizeOptions || [10, 20, 50, 100]).map(
-              (size) => h("option", { value: size }, `${size} ${paginationLabels.itemsPerPageText}`)
-            )
-          ),
-          // Page buttons
-          h("div", { class: getSimplePaginationButtonsWrapperClasses() }, [
-            // Previous button
-            h(
-              "button",
-              {
-                class: getSimplePaginationButtonClasses(!hasPrev),
-                disabled: !hasPrev,
-                onClick: () => handlePageChange(currentPage.value - 1)
-              },
-              paginationLabels.prevPageAriaLabel
-            ),
-            // Current page indicator
-            h(
-              "span",
-              { class: getSimplePaginationPageIndicatorClasses() },
-              formatPaginationPageIndicator(
-                paginationLabels.pageIndicatorText,
-                currentPage.value,
-                totalPages,
-                localeCode
-              )
-            ),
-            // Next button
-            h(
-              "button",
-              {
-                class: getSimplePaginationButtonClasses(!hasNext),
-                disabled: !hasNext,
-                onClick: () => handlePageChange(currentPage.value + 1)
-              },
-              paginationLabels.nextPageAriaLabel
-            )
-          ])
-        ])
+      const { simple, showQuickJumper } = resolvePaginationDisplayMode(
+        totalPages,
+        paginationConfig
+      );
+      const totalText = paginationConfig.totalText ?? ((value, range) => formatPaginationTotal(paginationLabels.totalText, value, range, localeCode));
+      const pageIndicatorText = (current, pages) => formatPaginationPageIndicator(
+        paginationLabels.pageIndicatorText,
+        current,
+        pages,
+        localeCode
+      );
+      return h("div", { class: getBuiltInPaginationContainerClasses() }, [
+        h(Pagination, {
+          size: "small",
+          align: "right",
+          current: currentPage.value,
+          pageSize: currentPageSize.value,
+          total,
+          simple,
+          showQuickJumper,
+          showSizeChanger: paginationConfig.showSizeChanger !== false,
+          showTotal: paginationConfig.showTotal !== false,
+          totalText,
+          pageIndicatorText,
+          pageSizeOptions: paginationConfig.pageSizeOptions || [10, 20, 50, 100],
+          locale: mergedLocale.value,
+          onChange: (page, pageSize) => {
+            if (pageSize === currentPageSize.value) {
+              handlePageChange(page);
+            }
+          },
+          onPageSizeChange: (_page, pageSize) => handlePageSizeChange(pageSize)
+        })
       ]);
     }
     return () => {

package/dist/chunk-H26JXVJX.mjs

@@ -0,0 +1,156 @@
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownMenu
+} from "./chunk-BNNTDSLJ.mjs";
+import {
+  useTigerConfig
+} from "./chunk-UOJOJBEU.mjs";
+
+// src/components/DataExport.ts
+import { computed, defineComponent, h, ref } from "vue";
+import {
+  classNames,
+  getDataExportLabels,
+  mergeTigerLocale,
+  tableExportButtonClasses
+} from "@expcat/tigercat-core";
+var dataExportModulePromise = null;
+function loadDataExportModule() {
+  dataExportModulePromise ??= import("@expcat/tigercat-core/utils/data-export");
+  return dataExportModulePromise;
+}
+var DataExport = defineComponent({
+  name: "TigerDataExport",
+  props: {
+    columns: {
+      type: Array,
+      required: true
+    },
+    dataSource: {
+      type: Array,
+      required: true
+    },
+    /**
+     * Formats offered to the user. A single format renders a plain button,
+     * multiple formats render a dropdown menu.
+     */
+    formats: {
+      type: Array,
+      default: () => ["xlsx", "markdown"]
+    },
+    /** Download file name without extension */
+    fileName: {
+      type: String,
+      default: "export"
+    },
+    /** Worksheet name used for xlsx output */
+    sheetName: {
+      type: String,
+      default: void 0
+    },
+    /** Transform a cell value before serialization */
+    cellFormatter: {
+      type: Function,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    /** Locale overrides merged on top of ConfigProvider locale */
+    locale: {
+      type: Object,
+      default: void 0
+    },
+    /** UI labels for custom text. Takes precedence over locale and ConfigProvider text. */
+    labels: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: {
+    export: (_format) => true,
+    error: (_error) => true
+  },
+  setup(props, { emit }) {
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const resolvedLabels = computed(() => getDataExportLabels(mergedLocale.value, props.labels));
+    const exporting = ref(false);
+    const handleExport = async (format) => {
+      if (props.disabled || exporting.value) return;
+      exporting.value = true;
+      try {
+        const mod = await loadDataExportModule();
+        const content = mod.exportData(props.columns, props.dataSource, format, {
+          sheetName: props.sheetName,
+          cellFormatter: props.cellFormatter
+        });
+        mod.downloadDataExport(content, props.fileName, format);
+        emit("export", format);
+      } catch (error) {
+        emit("error", error);
+      } finally {
+        exporting.value = false;
+      }
+    };
+    const formatLabel = (format) => format === "xlsx" ? resolvedLabels.value.xlsxText : resolvedLabels.value.markdownText;
+    const renderTrigger = (text, onClick) => h(
+      "button",
+      {
+        type: "button",
+        class: classNames(tableExportButtonClasses, onClick ? props.className : void 0),
+        "aria-label": resolvedLabels.value.triggerAriaLabel,
+        disabled: props.disabled || exporting.value,
+        onClick
+      },
+      text
+    );
+    return () => {
+      if (props.formats.length === 0) return null;
+      if (props.formats.length === 1) {
+        const format = props.formats[0];
+        return renderTrigger(
+          exporting.value ? resolvedLabels.value.exportingText : formatLabel(format),
+          () => void handleExport(format)
+        );
+      }
+      return h(
+        Dropdown,
+        {
+          trigger: "click",
+          disabled: props.disabled || exporting.value,
+          className: props.className
+        },
+        {
+          default: () => [
+            renderTrigger(
+              exporting.value ? resolvedLabels.value.exportingText : resolvedLabels.value.triggerText
+            ),
+            h(DropdownMenu, null, {
+              default: () => props.formats.map(
+                (format) => h(
+                  DropdownItem,
+                  {
+                    key: format,
+                    onClick: () => void handleExport(format)
+                  },
+                  { default: () => formatLabel(format) }
+                )
+              )
+            })
+          ]
+        }
+      );
+    };
+  }
+});
+
+export {
+  DataExport
+};

package/dist/{chunk-KZ5AIM4G.mjs → chunk-JPKC5T4O.mjs}

@@ -1,6 +1,6 @@
 import {
   Table
-} from "./chunk-4M2TNB2Z.mjs";
+} from "./chunk-4JG6AG4W.mjs";
 import {
   Select
 } from "./chunk-N7LWKAYS.mjs";

package/dist/{chunk-4SLYX5GK.mjs → chunk-N6GLO7U5.mjs}

@@ -131,6 +131,14 @@ var Pagination = defineComponent({
       type: Boolean,
       default: false
     },
+    /**
+     * Custom text renderer for the simple-mode page indicator.
+     * Defaults to `{current} / {totalPages}` when not provided.
+     */
+    pageIndicatorText: {
+      type: Function,
+      default: void 0
+    },
     /**
      * Size of pagination
      * @default 'medium'
@@ -367,8 +375,13 @@ var Pagination = defineComponent({
         )
       );
       if (props.simple) {
+        const indicatorText = props.pageIndicatorText ? props.pageIndicatorText(page, pages) : `${page} / ${pages}`;
         elements.push(
-          h("span", { class: classNames("mx-2", getSizeTextClasses(size)) }, `${page} / ${pages}`)
+          h(
+            "span",
+            { class: classNames("mx-2", getSizeTextClasses(size)), "aria-label": indicatorText },
+            indicatorText
+          )
         );
       } else {
         getPageNumbers(page, pages, props.showLessItems).forEach((pageNum) => {

package/dist/components/ActivityFeed.d.mts

@@ -107,18 +107,18 @@ declare const ActivityFeed: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
 }>> & Readonly<{}>, {
+    loadingText: string;
+    emptyText: string;
+    className: string;
+    style: Record<string, string | number>;
+    loading: boolean;
+    groupBy: (item: ActivityItem) => string;
     items: ActivityItem[];
     groups: ActivityGroup[];
-    groupBy: (item: ActivityItem) => string;
     groupOrder: string[];
-    loading: boolean;
-    loadingText: string;
-    emptyText: string;
     showAvatar: boolean;
     showTime: boolean;
     showGroupTitle: boolean;
-    className: string;
-    style: Record<string, string | number>;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 export { ActivityFeed, type VueActivityFeedProps, ActivityFeed as default };

package/dist/components/Alert.d.mts

@@ -204,14 +204,14 @@ declare const Alert: vue.DefineComponent<vue.ExtractPropTypes<{
 }>> & Readonly<{
     onClose?: ((...args: any[]) => any) | undefined;
 }>, {
+    type: AlertType;
+    closeAriaLabel: string;
     size: AlertSize;
     className: string;
     style: Record<string, string | number>;
-    type: AlertType;
     title: string;
-    closable: boolean;
-    closeAriaLabel: string;
     description: string;
+    closable: boolean;
     showIcon: boolean;
     duration: number;
     banner: boolean;

package/dist/components/Anchor.d.mts

@@ -236,9 +236,9 @@ declare const Anchor: vue.DefineComponent<vue.ExtractPropTypes<{
     onChange?: ((...args: any[]) => any) | undefined;
     onClick?: ((...args: any[]) => any) | undefined;
 }>, {
+    direction: AnchorDirection;
     className: string;
     style: Record<string, unknown>;
-    direction: AnchorDirection;
     offsetTop: number;
     targetOffset: number;
     bounds: number;

package/dist/components/AreaChart.d.mts

@@ -421,12 +421,12 @@ declare const AreaChart: vue.DefineComponent<vue.ExtractPropTypes<{
     "onSeries-click"?: ((...args: any[]) => any) | undefined;
     "onSeries-hover"?: ((...args: any[]) => any) | undefined;
 }>, {
-    padding: ChartPadding;
-    hoverable: boolean;
-    strokeWidth: number;
     width: number;
     height: number;
+    padding: ChartPadding;
     gradient: boolean;
+    hoverable: boolean;
+    strokeWidth: number;
     fillOpacity: number;
     selectable: boolean;
     responsive: boolean;

package/dist/components/AutoComplete.d.mts

@@ -58,7 +58,7 @@ declare const AutoComplete: vue.DefineComponent<vue.ExtractPropTypes<{
     };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "select" | "update:modelValue" | "update:searchValue" | "search-change")[], "change" | "select" | "update:modelValue" | "update:searchValue" | "search-change", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("select" | "change" | "update:modelValue" | "update:searchValue" | "search-change")[], "select" | "change" | "update:modelValue" | "update:searchValue" | "search-change", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     modelValue: {
         type: PropType<string | number>;
         default: string;
@@ -112,17 +112,17 @@ declare const AutoComplete: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
 }>> & Readonly<{
-    onChange?: ((...args: any[]) => any) | undefined;
     onSelect?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onUpdate:searchValue"?: ((...args: any[]) => any) | undefined;
     "onSearch-change"?: ((...args: any[]) => any) | undefined;
 }>, {
-    size: ComponentSize;
-    emptyText: string;
     locale: Partial<TigerLocale>;
-    disabled: boolean;
+    emptyText: string;
     placeholder: string;
+    size: ComponentSize;
+    disabled: boolean;
     modelValue: string | number;
     options: AutoCompleteOption[];
     searchValue: string;

package/dist/components/Avatar.d.mts

@@ -151,9 +151,9 @@ declare const Avatar: vue.DefineComponent<vue.ExtractPropTypes<{
     size: AvatarSize;
     className: string;
     style: Record<string, string | number>;
+    text: string;
     src: string;
     alt: string;
-    text: string;
     shape: AvatarShape;
     bgColor: string;
     textColor: string;

package/dist/components/AvatarGroup.d.mts

@@ -63,10 +63,10 @@ declare const AvatarGroup: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
 }>> & Readonly<{}>, {
-    size: AvatarSize;
-    className: string;
     locale: Partial<TigerLocale>;
     labels: Partial<TigerLocaleAvatarGroup>;
+    size: AvatarSize;
+    className: string;
     max: number;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 

package/dist/components/BackTop.d.mts

@@ -104,8 +104,8 @@ declare const BackTop: vue.DefineComponent<vue.ExtractPropTypes<{
 }>, {
     className: string;
     style: Record<string, unknown>;
-    position: BackTopPosition;
     target: () => HTMLElement | Window | null;
+    position: BackTopPosition;
     offset: ViewportOffset;
     placement: ViewportPlacement;
     duration: number;

package/dist/components/Badge.d.mts

@@ -100,15 +100,15 @@ declare const Badge: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
 }>> & Readonly<{}>, {
+    locale: Partial<TigerLocale>;
+    type: BadgeType;
     size: BadgeSize;
     className: string;
     style: Record<string, string | number>;
-    type: BadgeType;
     variant: BadgeVariant;
-    locale: Partial<TigerLocale>;
-    position: BadgePosition;
-    content: string | number;
     max: number;
+    content: string | number;
+    position: BadgePosition;
     showZero: boolean;
     standalone: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

package/dist/components/BarChart.d.mts

@@ -382,11 +382,11 @@ declare const BarChart: vue.DefineComponent<vue.ExtractPropTypes<{
     "onBar-click"?: ((...args: any[]) => any) | undefined;
     "onBar-hover"?: ((...args: any[]) => any) | undefined;
 }>, {
-    padding: ChartPadding;
-    hoverable: boolean;
     width: number;
     height: number;
+    padding: ChartPadding;
     gradient: boolean;
+    hoverable: boolean;
     selectable: boolean;
     responsive: boolean;
     xTicks: number;