bitboss-ui 2.0.165 → 2.0.166

package/dist/index121.js

@@ -1,156 +1,488 @@
-import { defineComponent as H, ref as o, watch as I, computed as z, openBlock as B, createElementBlock as R, mergeProps as S, createElementVNode as p, renderSlot as C, normalizeProps as U, guardReactiveProps as W, unref as u, createVNode as j, withCtx as L, createBlock as q, createCommentVNode as A } from "vue";
-import { useFloating as G, arrow as J } from "./index258.js";
-import { useId as K } from "./index8.js";
-import { wait as Q } from "./index130.js";
-import X from "./index13.js";
+import { defineComponent as ue, ref as K, computed as h, toRef as O, watch as D, reactive as pe, createBlock as Q, openBlock as n, resolveDynamicComponent as me, normalizeClass as p, unref as v, withCtx as fe, createElementBlock as d, createCommentVNode as g, createElementVNode as o, toDisplayString as m, renderSlot as f, Fragment as A, renderList as B, createVNode as X, createTextVNode as ye, mergeProps as he } from "vue";
+import { add as ve } from "./index279.js";
+import { clamp as ke } from "./index208.js";
+import { isNil as T } from "./index235.js";
+import { useId as _e } from "./index8.js";
+import { useItemValue as ge } from "./index277.js";
+import { when as Ce } from "./index210.js";
+import Y from "./index17.js";
 /* empty css        */
-import { throttle as b } from "./index271.js";
-import { waitFor as Y } from "./index245.js";
-import Z from "./index211.js";
-/* empty css         */
-import { useLocale as x } from "./index218.js";
-import { autoUpdate as ee, flip as te, shift as oe, hide as ae } from "./index265.js";
-const ne = { class: "bb-tooltip__content" }, ge = /* @__PURE__ */ H({
-  __name: "BbTooltip",
+import we from "./index31.js";
+/* empty css        */
+import { hash as E } from "./index255.js";
+import { useItemsGetter as Ie } from "./index258.js";
+import { usePrefill as Ve } from "./index261.js";
+import { useIndexById as Ae } from "./index249.js";
+import { useBaseOptions as Be } from "./index248.js";
+import { useHashedWatcher as Te } from "./index260.js";
+import { useLocale as $e } from "./index216.js";
+const xe = {
+  key: 0,
+  class: "sr-only"
+}, Le = ["aria-rowindex"], Ne = { class: "bb-table-header__content" }, De = { class: "bb-table-check__label-text sr-only" }, Se = {
+  key: 1,
+  class: "bb-table-radio__label-text sr-only"
+}, He = ["aria-sort"], Re = { class: "bb-table-header__content" }, Pe = { class: "bb-table-header__content sr-only" }, Oe = ["aria-rowindex"], Ee = ["colspan"], je = { class: "bb-table-loading__text sr-only" }, qe = {
+  class: "bb-table-skeleton__container",
+  role: "status"
+}, ze = ["aria-rowindex"], Fe = ["colspan"], Me = { class: "bb-table-no-data__text" }, Ue = ["aria-rowindex", "onClick", "onContextmenu", "onDblclick"], We = { class: "bb-table-check__label-text sr-only" }, Ge = { class: "bb-table-radio__label-text sr-only" }, ul = /* @__PURE__ */ ue({
+  __name: "BbTable",
   props: {
-    arrowPadding: { default: 10 },
-    block: { type: Boolean },
+    accessibleLabel: {},
+    actions: { type: Boolean },
+    actionsText: { default: "Azioni" },
+    align: { default: "left" },
+    allowSelectAll: { type: Boolean, default: !0 },
+    caption: {},
+    columns: { default: () => [] },
+    compact: { type: Boolean },
+    dependencies: { default: () => [] },
+    depsDebounceTime: { default: 0 },
     disabled: { type: Boolean },
-    eager: { type: Boolean },
-    id: {},
-    offset: {},
-    padding: { default: 10 },
-    placement: { default: "top" },
-    showClose: { type: Boolean, default: !0 },
-    teleportTarget: {},
-    theme: { default: "default" },
-    transitionDuration: { default: 250 },
-    timeout: { default: 0 }
+    displayCaption: { type: Boolean },
+    fixed: { type: Boolean },
+    fixedColumns: { default: () => [] },
+    fixedHeaders: { type: Boolean },
+    items: { type: [Array, Function], default: () => [] },
+    itemValue: {},
+    legend: {},
+    loading: { type: Boolean },
+    loadingText: {},
+    max: { default: 1 / 0 },
+    modelValue: { default: () => [] },
+    multiple: { type: Boolean, default: !0 },
+    name: {},
+    noDataText: {},
+    page: {},
+    perPage: {},
+    readonly: { type: Boolean },
+    selectAll: { type: Boolean },
+    selectable: { type: [Boolean, Function] },
+    selectAllLabel: {},
+    selectText: {},
+    tdClass: {},
+    thClass: {},
+    totalItems: {},
+    unselectedItems: { default: () => [] }
   },
-  setup(T) {
-    const t = T, { t: _ } = x(), c = `bb_${t.id ?? K().id.value}`, l = o(), D = o(), M = o(), { placement: g, middlewareData: P } = G(l, D, {
-      placement: t.placement,
-      whileElementsMounted: ee,
-      middleware: [
-        te(),
-        oe({ padding: t.padding }),
-        J({
-          element: M,
-          padding: t.arrowPadding
-        }),
-        ae()
-      ]
-    });
-    let w = () => {
+  emits: ["click:row", "contextmenu:row", "dblclick:row", "update:modelValue", "update:selectAll", "update:unselectedItems", "item:selected", "item:unselected"],
+  setup(Z, { emit: ee }) {
+    const { getItemValue: le } = ge(), j = _e().id.value, t = Z, c = ee, { t: C } = $e(), $ = K(), te = (e) => [C("table.select").value].concat(e.map((s) => s.content)).join(" "), ae = h(() => t.selectable ? "fieldset" : "div"), q = h(() => t.loading || se.value), w = h(
+      () => !T(t.page) && !T(t.perPage) && !T(t.totalItems)
+    ), z = h(() => [!!t.selectable, !!t.actions].reduce(
+      (e, s) => e + +!!s,
+      t.columns.length
+    )), F = h(
+      () => t.columns.reduce(
+        (e, s) => {
+          const l = s.key.split(/\W+/g).join("_").toLowerCase();
+          return e[s.key] = l, e;
+        },
+        {}
+      )
+    ), {
+      getter: M,
+      items: S,
+      loading: se
+    } = Ie({
+      items: O(t, "items")
+    }), { hasPrefilled: oe } = Ve({
+      onStart: !0,
+      currentValue: t.modelValue,
+      multiple: t.multiple,
+      fn: async ({ prefill: e }) => {
+        await M(e, t.modelValue);
+      }
+    }), { data: U } = Ae({
+      items: O(t, "modelValue")
+    }), { options: x } = Be({
+      disabled: O(t, "disabled"),
+      items: S,
+      itemText: void 0,
+      itemValue: t.itemValue,
+      max: t.max,
+      selectable: !0,
+      selectedIndexedByHash: U
+    }), ne = async (e) => {
+      t.multiple ? c("update:modelValue", t.modelValue.concat(e.value)) : c("update:modelValue", e.value);
+    }, de = async (e) => {
+      if (t.multiple) {
+        const s = { ...U.value };
+        delete s[e.valueHash], c("update:modelValue", Object.values(s));
+      } else
+        c("update:modelValue", null);
     };
-    const h = o(!0), n = o(!1), r = o(!1), s = o(!1), d = o(!0);
-    let m;
-    const k = () => {
-      r.value || n.value || t.disabled || (clearTimeout(m), document.addEventListener("mousemove", y, { passive: !0 }), m = setTimeout(() => {
-        N(), document.addEventListener("keydown", E, { passive: !0 });
-      }, t.timeout));
-    }, $ = k;
-    let f = null;
-    const y = b((e) => {
-      const a = e.target;
-      if (a && a instanceof HTMLElement) {
-        let v = !0;
-        l.value && l.value.contains(a) && (v = !1), f ?? (f = document.getElementById(c)), f && f.contains(a) && (v = !1), v && i();
+    Te(
+      () => [t.dependencies, t.items],
+      async () => {
+        oe.value && await M(!1, t.modelValue);
+      },
+      {
+        debounce: t.depsDebounceTime
       }
-    }, t.transitionDuration), E = (e) => {
-      r.value && e.key === "Escape" && i();
-    }, O = () => {
-      h.value = !1, i();
-    }, F = o(!1), N = b(async () => {
-      h.value && (F.value = !0, d.value = !1, s.value = !1, n.value = !0, await Q(50), r.value = !0, n.value = !1, w = I(
-        () => {
-          var e;
-          return (e = P.value.hide) == null ? void 0 : e.referenceHidden;
-        },
-        async (e) => {
-          !s.value && !d.value && e && await i();
+    );
+    const ce = h(
+      () => t.columns.map(
+        (e) => {
+          const s = e.align || "left", { label: l, key: u } = e, I = `header:${F.value[e.key]}`;
+          let i = [`bb-table-header--${s}`];
+          t.thClass && (i = i.concat(t.thClass)), e.thClass && (i = i.concat(e.thClass));
+          const r = e.sorted ? e.sorted === "asc" ? "ascending" : "descending" : void 0;
+          return {
+            align: s,
+            key: u,
+            label: l,
+            slotName: I,
+            classes: i,
+            sortDirection: r
+          };
         }
+      )
+    ), W = h(() => x.value.map(
+      (e, s) => {
+        let l = !t.selectable;
+        typeof t.selectable == "function" && (l = !t.selectable(e.item)), l = l || !!e.disabled;
+        const u = w.value ? s + (t.page - 1) * t.perPage + 2 : void 0, I = t.columns.map(
+          (a) => {
+            const L = F.value[a.key], N = a.align || "left", { label: R, key: P } = a;
+            let y = le(e.item, a.key);
+            a.formatter && // By default the formatter runs anyway
+            (!T(y) || a.formatOnNull !== !1) && (y = a.formatter(y, a.key, e.item)), a.placeholder && T(y) && (y = a.placeholder);
+            let b = [`bb-table-data__cell--${N}`];
+            if (t.tdClass)
+              if (typeof t.tdClass == "function") {
+                let V = t.tdClass(y, a.key, e.item);
+                V && (b = b.concat(V));
+              } else b = b.concat(t.tdClass);
+            if (a.tdClass)
+              if (typeof a.tdClass == "function") {
+                let V = a.tdClass(y, a.key, e.item);
+                V && (b = b.concat(V));
+              } else b = b.concat(a.tdClass);
+            return {
+              align: N,
+              classes: b,
+              content: y,
+              key: P,
+              label: R,
+              slotName: L
+            };
+          }
+        );
+        return {
+          accessibleLabel: te(I),
+          cols: I,
+          onRowClick: (a) => c("click:row", a, e, !!e.selected),
+          onRowContextMenu: (a) => c("contextmenu:row", a, e, !!e.selected),
+          onRowDblClick: (a) => c("dblclick:row", a, e, !!e.selected),
+          item: e.item,
+          text: e.text,
+          rowIndex: u,
+          valueHash: e.valueHash,
+          value: e.value,
+          selected: e.selected,
+          disabled: l
+        };
+      }
+    )), k = K(t.selectAll);
+    D(
+      () => t.selectAll,
+      () => {
+        k.value = t.selectAll;
+      }
+    ), D(k, () => {
+      _.clear(), c("update:unselectedItems", []), c("update:modelValue", []);
+    });
+    const G = h(() => {
+      var e;
+      return (e = t.modelValue) != null && e.length && !t.selectAll ? !0 : !!(k.value && _.size);
+    }), _ = pe(/* @__PURE__ */ new Set());
+    D(
+      () => t.unselectedItems,
+      () => {
+        _.clear(), t.unselectedItems.forEach((e) => {
+          _.add(E(e));
+        });
+      }
+    );
+    const J = (e) => {
+      H(e) ? (de(e), c("item:unselected", e.value), _.add(e.valueHash), c("update:unselectedItems", [...t.unselectedItems, e.value])) : (k.value || ne(e), c("item:selected", e.value), _.delete(e.valueHash), c(
+        "update:unselectedItems",
+        t.unselectedItems.filter((s) => E(s) !== E(e.value))
       ));
-    }, t.transitionDuration), i = b(async () => {
-      clearTimeout(m), await Y(() => !n.value), document.removeEventListener("mousemove", y), document.removeEventListener("keydown", E), r.value = !1, n.value = !1, s.value = !0, s.value = !1, d.value = !0, w();
-    }, t.transitionDuration), V = z(() => ({
-      class: {
-        "bb-tooltip--block": t.block,
-        [`bb-tooltip--${t.theme}`]: t.theme
+    }, H = (e) => _.has(e.valueHash) ? !1 : e.selected || k.value, ie = Ce(
+      (e) => typeof e != "string",
+      JSON.stringify
+    ), re = h(() => [].concat(t.modelValue).map((e) => {
+      const s = ie(e);
+      return {
+        disabled: t.disabled,
+        name: t.name,
+        type: "hidden",
+        value: s
+      };
+    })), be = h(() => ke(x.value.length, 4, 10));
+    return D(
+      () => W.value,
+      () => {
+        var e;
+        if (t.fixedColumns.length && t.items && $.value) {
+          const s = Array.from(
+            $.value.querySelectorAll("thead th")
+          ), l = t.fixedColumns.reduce(
+            (i, r) => {
+              const a = typeof r == "number" ? r : r.index, L = typeof r == "number" ? "left" : r.position, N = s[a].getBoundingClientRect(), R = Math.floor(N.width), P = i.filter((b) => b.position === L).map((b) => b.width).reduce(ve, 0), y = {
+                index: a,
+                position: L,
+                width: R,
+                offset: P
+              };
+              return i.push(y), i;
+            },
+            []
+          );
+          Array.from((e = $.value) == null ? void 0 : e.querySelectorAll("tr")).map(
+            (i) => Array.from(
+              i.querySelectorAll(
+                l.map((r) => `:scope > :nth-child(${r.index + 1})`).join(", ")
+              )
+            )
+          ).forEach((i) => {
+            i.forEach((r, a) => {
+              r.style.position = "sticky", l[a].position === "left" ? r.style.left = `${l[a].offset}px` : r.style.right = `${l[a].offset}px`;
+            });
+          });
+        }
+      },
+      {
+        flush: "post"
       }
-    }));
-    return (e, a) => (B(), R("span", S({ class: "bb-tooltip" }, V.value), [
-      p("span", {
-        ref_key: "wrapper",
-        ref: l,
-        class: "bb-tooltip__wrapper"
-      }, [
-        C(e.$slots, "activator", U(W({
-          props: {
-            "aria-describedby": c,
-            onMouseenter: k,
-            onFocus: u($),
-            onBlur: u(i),
-            disabled: e.disabled
-          },
-          closed: d.value,
-          closing: s.value,
-          disabled: e.disabled,
-          open: r.value,
-          opening: n.value,
-          placement: u(g)
-        })))
-      ], 512),
-      j(Z, {
-        "arrow-padding": e.arrowPadding,
-        "base-class": "bb-tooltip",
-        "container-attributes": {
-          id: c
-        },
-        eager: e.eager,
-        offset: e.offset,
-        open: r.value,
-        padding: e.padding,
-        placement: u(g),
-        "teleport-target": e.teleportTarget,
-        theme: e.theme,
-        "transition-duration": e.transitionDuration,
-        wrapper: l.value
-      }, {
-        default: L(() => [
-          p("span", ne, [
-            e.showClose ? (B(), q(X, {
+    ), (e, s) => (n(), Q(me(ae.value), {
+      ref_key: "container",
+      ref: $,
+      "aria-rowcount": w.value ? e.totalItems : void 0,
+      class: p({
+        "bb-table": !0,
+        [`bb-table--align-${e.align}`]: !0,
+        "bb-table--compact": e.compact,
+        "bb-table--fixed": e.fixed,
+        "bb-table--fixed-header": e.fixedHeaders,
+        "bb-table--loading": q.value,
+        "bb-table--empty": !v(x).length,
+        "bb-table--selectable": e.selectable
+      })
+    }, {
+      default: fe(() => [
+        e.selectable ? (n(), d("legend", xe, m(e.legend), 1)) : g("", !0),
+        o("table", null, [
+          e.caption ? (n(), d("caption", {
+            key: 0,
+            class: p({
+              "bb-table-caption": !0,
+              "sr-only": !e.displayCaption
+            })
+          }, m(e.caption), 3)) : g("", !0),
+          o("thead", null, [
+            f(e.$slots, "thead", {}, () => [
+              o("tr", {
+                "aria-rowindex": w.value ? 1 : void 0,
+                class: "bb-table-header-row"
+              }, [
+                e.selectable ? (n(), d("th", {
+                  key: 0,
+                  class: p(["bb-table-header bb-table-header--select", e.thClass]),
+                  scope: "col"
+                }, [
+                  f(e.$slots, "header:select", {
+                    multiple: e.multiple,
+                    selectAll: !!k.value,
+                    text: e.selectText || v(C)("table.selectText").value
+                  }, () => [
+                    o("span", Ne, [
+                      e.allowSelectAll && e.multiple ? (n(), d("label", {
+                        key: 0,
+                        class: p(["bb-table-check__label", {
+                          "bb-table-check__label--disabled": e.disabled
+                        }])
+                      }, [
+                        (n(), Q(Y, {
+                          key: G.value.toString(),
+                          modelValue: k.value,
+                          "onUpdate:modelValue": [
+                            s[0] || (s[0] = (l) => k.value = l),
+                            s[1] || (s[1] = (l) => c("update:selectAll", l))
+                          ],
+                          class: "bb-table-check",
+                          disabled: e.disabled,
+                          indeterminate: G.value,
+                          name: `select_all_${e.name || ""}`,
+                          readonly: e.readonly
+                        }, null, 8, ["modelValue", "disabled", "indeterminate", "name", "readonly"])),
+                        o("span", De, m(e.selectAllLabel || v(C)("table.selectAllLabel").value), 1)
+                      ], 2)) : e.multiple ? g("", !0) : (n(), d("span", Se, m(e.selectText || v(C)("table.selectText").value), 1))
+                    ])
+                  ])
+                ], 2)) : g("", !0),
+                (n(!0), d(A, null, B(ce.value, (l) => (n(), d("th", {
+                  key: l.key,
+                  "aria-sort": l.sortDirection,
+                  class: p(["bb-table-header", l.classes]),
+                  scope: "col"
+                }, [
+                  f(e.$slots, l.slotName, {
+                    classes: l.classes,
+                    items: v(S),
+                    label: l.label
+                  }, () => [
+                    o("span", Re, m(l.label), 1)
+                  ])
+                ], 10, He))), 128)),
+                e.actions ? (n(), d("th", {
+                  key: 1,
+                  class: p(["bb-table-header bb-table-header--actions", e.thClass]),
+                  scope: "col"
+                }, [
+                  f(e.$slots, "header:actions", { text: e.actionsText }, () => [
+                    o("span", Pe, m(e.actionsText), 1)
+                  ])
+                ], 2)) : g("", !0)
+              ], 8, Le)
+            ])
+          ]),
+          o("tbody", null, [
+            q.value ? f(e.$slots, "loading", {
               key: 0,
-              "aria-hidden": "true",
-              "aria-label": u(_)("common.closeLabel").value,
-              class: "bb-tooltip__close",
-              tabindex: "-1",
-              onClick: O
-            }, {
-              default: L(() => a[0] || (a[0] = [
-                p("svg", {
-                  fill: "none",
-                  viewBox: "0 0 24 24",
-                  xmlns: "http://www.w3.org/2000/svg"
+              items: v(S)
+            }, () => [
+              o("tr", {
+                "aria-rowindex": w.value ? 2 : void 0,
+                class: "bb-table-loading__row"
+              }, [
+                o("td", {
+                  class: "bb-table-loading__cell",
+                  colspan: z.value
                 }, [
-                  p("path", {
-                    d: "M23 23L1 1M23 1L1 23",
-                    stroke: "currentColor",
-                    "stroke-linecap": "round",
-                    "stroke-width": "2"
+                  o("span", je, m(e.loadingText), 1),
+                  o("div", qe, [
+                    (n(!0), d(A, null, B(be.value, (l) => (n(), d("div", {
+                      key: l,
+                      class: "bb-table-skeleton-item"
+                    }, s[2] || (s[2] = [
+                      o("div", { class: "bb-table-skeleton-item__avatar-container" }, [
+                        o("div", { class: "bb-table-skeleton-item__avatar" })
+                      ], -1),
+                      o("div", { class: "bb-table-skeleton-item__text" }, [
+                        o("div", { class: "bb-table-skeleton-item__line" }),
+                        o("div", { class: "bb-table-skeleton-item__line" })
+                      ], -1)
+                    ])))), 128))
+                  ])
+                ], 8, Ee)
+              ], 8, Oe)
+            ]) : v(x).length ? f(e.$slots, "tbody", { key: 2 }, () => [
+              (n(!0), d(A, null, B(W.value, (l) => (n(), d("tr", {
+                key: l.valueHash,
+                "aria-rowindex": l.rowIndex,
+                class: "bb-table-data__row",
+                onClick: l.onRowClick,
+                onContextmenu: l.onRowContextMenu,
+                onDblclick: l.onRowDblClick
+              }, [
+                e.selectable ? (n(), d("td", {
+                  key: 0,
+                  class: p(["bb-table-data__cell bb-table-data__cell--select", e.tdClass])
+                }, [
+                  f(e.$slots, "select", {
+                    checked: H(l),
+                    disabled: !!l.disabled,
+                    inputName: v(j),
+                    item: l.item,
+                    readonly: !!e.readonly,
+                    value: l.value
+                  }, () => [
+                    e.multiple ? (n(), d("label", {
+                      key: 0,
+                      class: p(["bb-table-check__label", {
+                        "bb-table-check__label--disabled": l.disabled
+                      }])
+                    }, [
+                      X(Y, {
+                        checked: H(l),
+                        class: "bb-table-check",
+                        disabled: l.disabled,
+                        readonly: e.readonly,
+                        onChange: () => J(l)
+                      }, null, 8, ["checked", "disabled", "readonly", "onChange"]),
+                      o("span", We, m(l.accessibleLabel), 1)
+                    ], 2)) : (n(), d("label", {
+                      key: 1,
+                      class: p(["bb-table-radio__label", {
+                        "bb-table-radio__label--disabled": l.disabled
+                      }])
+                    }, [
+                      X(we, {
+                        checked: l.selected,
+                        class: "bb-table-radio",
+                        disabled: l.disabled,
+                        name: v(j),
+                        readonly: e.readonly,
+                        value: l.value,
+                        onChange: () => J(l)
+                      }, null, 8, ["checked", "disabled", "name", "readonly", "value", "onChange"]),
+                      o("span", Ge, m(l.accessibleLabel), 1)
+                    ], 2))
+                  ])
+                ], 2)) : g("", !0),
+                (n(!0), d(A, null, B(l.cols, (u) => (n(), d("td", {
+                  key: u.key,
+                  class: p(["bb-table-data__cell", u.classes])
+                }, [
+                  f(e.$slots, u.slotName, {
+                    classes: u.classes,
+                    content: u.content,
+                    item: l.item,
+                    value: l.value
+                  }, () => [
+                    ye(m(u.content), 1)
+                  ])
+                ], 2))), 128)),
+                e.actions ? (n(), d("td", {
+                  key: 1,
+                  class: p(["bb-table__cell bb-table__cell--actions", e.tdClass])
+                }, [
+                  f(e.$slots, "actions", {
+                    item: l.item,
+                    value: l.value
                   })
-                ], -1)
-              ])),
-              _: 1
-            }, 8, ["aria-label"])) : A("", !0),
-            C(e.$slots, "default")
+                ], 2)) : g("", !0)
+              ], 40, Ue))), 128))
+            ]) : f(e.$slots, "no-data", { key: 1 }, () => [
+              o("tr", {
+                "aria-rowindex": w.value ? 2 : void 0,
+                class: "bb-table-no-data__row"
+              }, [
+                o("td", {
+                  class: "bb-table-no-data__cell",
+                  colspan: z.value
+                }, [
+                  o("span", Me, m(e.noDataText || v(C)("table.noDataText").value), 1)
+                ], 8, Fe)
+              ], 8, ze)
+            ])
+          ]),
+          o("tfoot", null, [
+            f(e.$slots, "tfoot")
           ])
         ]),
-        _: 3
-      }, 8, ["arrow-padding", "container-attributes", "eager", "offset", "open", "padding", "placement", "teleport-target", "theme", "transition-duration", "wrapper"])
-    ], 16));
+        (n(!0), d(A, null, B(re.value, (l) => (n(), d("input", he({
+          key: l.value,
+          ref_for: !0
+        }, l), null, 16))), 128))
+      ]),
+      _: 3
+    }, 8, ["aria-rowcount", "class"]));
   }
 });
 export {
-  ge as default
+  ul as default
 };