@shifl-inc/ui 0.1.0

package/dist/shifl-ui.js

@@ -0,0 +1,685 @@
+import {
+  ref as C,
+  computed as k,
+  defineComponent as O,
+  createElementBlock as p,
+  openBlock as b,
+  createElementVNode as n,
+  toDisplayString as _,
+  createTextVNode as U,
+  Fragment as $,
+  renderList as S,
+  withModifiers as N,
+  normalizeClass as j,
+  watch as V,
+  createBlock as H,
+  createCommentVNode as M,
+  unref as g,
+  normalizeStyle as R,
+  provide as Y,
+  inject as q,
+  onMounted as Q,
+  onUnmounted as X
+} from 'vue';
+function Z(e) {
+  const i = (e.columns || []).map((r) => ({
+    ...r,
+    frozen: r.frozen ?? r.fixed ?? !1,
+    visible: r.visible ?? !0
+  }));
+  return {
+    ...e,
+    columns: i,
+    rows: e.rows ?? [],
+    search: e.search ?? [],
+    filters: e.filters ?? [],
+    paginationMeta: e.paginationMeta ?? {}
+  };
+}
+function ee(e) {
+  const i = [...e],
+    r = C([...e]);
+  function c(o) {
+    r.value = r.value.map((t) => (t.key === o ? { ...t, visible: !t.visible } : t));
+  }
+  function l(o) {
+    r.value = r.value.map((t) => ({ ...t, visible: o }));
+  }
+  function f(o) {
+    const t = r.value.map((v) => (v.key === o ? { ...v, frozen: !v.frozen } : v)),
+      m = t.filter((v) => v.frozen),
+      y = t.filter((v) => !v.frozen);
+    r.value = [...m, ...y];
+  }
+  function h(o, t) {
+    if (o === t || t < 0 || t >= r.value.length) return;
+    const m = r.value.findIndex((G) => !G.frozen),
+      y = m === -1 ? r.value.length : m;
+    if (o < y || t < y) return;
+    const v = [...r.value],
+      [z] = v.splice(o, 1);
+    (v.splice(t, 0, z), (r.value = v));
+  }
+  function w() {
+    r.value = [...i];
+  }
+  const s = k(() => r.value.filter((o) => o.visible));
+  return {
+    columns: r,
+    visibleColumns: s,
+    toggleColumnVisibility: c,
+    setAllVisible: l,
+    toggleFrozen: f,
+    moveColumn: h,
+    resetColumns: w
+  };
+}
+function te(e) {
+  const i = C(e);
+  function r(l) {
+    var f;
+    i.value =
+      ((f = i.value) == null ? void 0 : f.key) === l && i.value.order === 'asc'
+        ? { key: l, order: 'desc' }
+        : { key: l, order: 'asc' };
+  }
+  function c(l) {
+    if (!i.value) return l;
+    const { key: f, order: h } = i.value;
+    return [...l].sort((w, s) => {
+      const o = w[f],
+        t = s[f];
+      if (o === t) return 0;
+      if (o == null) return 1;
+      if (t == null) return -1;
+      const m = String(o).localeCompare(String(t), void 0, {
+        numeric: !0
+      });
+      return h === 'asc' ? m : -m;
+    });
+  }
+  return {
+    sort: i,
+    setSort: r,
+    applySort: c
+  };
+}
+function ne() {
+  const e = C('');
+  function i(c) {
+    e.value = c;
+  }
+  function r(c, l) {
+    const f = e.value.trim().toLowerCase();
+    return f
+      ? c.filter((h) =>
+          (l && l.length ? l.map((s) => h[s]) : Object.values(h)).some((s) =>
+            String(s ?? '')
+              .toLowerCase()
+              .includes(f)
+          )
+        )
+      : c;
+  }
+  return {
+    globalFilter: e,
+    setGlobalFilter: i,
+    applyGlobalFilter: r
+  };
+}
+const oe = { class: 'fixed inset-0 z-40 flex justify-end bg-black/20' },
+  re = {
+    class: 'flex h-full w-full max-w-md flex-col bg-white shadow-xl ring-1 ring-black/5',
+    role: 'dialog',
+    'aria-modal': 'true'
+  },
+  le = { class: 'flex items-center justify-between border-b border-gray-200 px-6 py-4' },
+  se = { class: 'min-w-0' },
+  ie = { class: 'text-xs font-medium text-gray-400' },
+  ue = { class: 'flex items-center justify-between border-b border-gray-200 px-6 py-3 text-xs' },
+  ae = { class: 'flex gap-3 font-medium text-gray-600' },
+  de = { class: 'flex-1 overflow-y-auto px-4 py-4' },
+  ce = { class: 'space-y-2' },
+  fe = ['draggable', 'onDragstart', 'onDragover', 'onDrop'],
+  ve = { class: 'flex items-center gap-3' },
+  ge = ['aria-label'],
+  be = { class: 'flex items-center gap-2' },
+  me = ['checked', 'onChange'],
+  pe = { class: 'text-gray-800' },
+  ye = { class: 'flex items-center gap-2 text-gray-400' },
+  he = ['onClick'],
+  xe = { class: 'flex justify-end gap-3 border-t border-gray-200 px-6 py-3' },
+  we = /* @__PURE__ */ O({
+    __name: 'GridColumnManager',
+    props: {
+      titlePrefix: {},
+      columns: {}
+    },
+    emits: [
+      'close',
+      'toggle',
+      'move',
+      'toggleFrozen',
+      'selectAll',
+      'deselectAll',
+      'restoreDefault'
+    ],
+    setup(e, { emit: i }) {
+      const r = e,
+        c = i,
+        l = C(null);
+      function f(s) {
+        var o;
+        ((o = r.columns[s]) != null && o.frozen) || (l.value = s);
+      }
+      function h(s) {}
+      function w(s) {
+        l.value === null || l.value === s || (c('move', l.value, s), (l.value = null));
+      }
+      return (s, o) => (
+        b(),
+        p('div', oe, [
+          n('div', re, [
+            n('header', le, [
+              n('div', se, [
+                n('p', ie, _(e.titlePrefix), 1),
+                o[6] ||
+                  (o[6] = n(
+                    'h2',
+                    { class: 'truncate text-base font-semibold text-gray-900' },
+                    ' Edit Columns ',
+                    -1
+                  ))
+              ]),
+              n(
+                'button',
+                {
+                  type: 'button',
+                  class:
+                    'inline-flex h-8 w-8 items-center justify-center rounded-full text-gray-400 hover:bg-gray-100 hover:text-gray-600',
+                  onClick: o[0] || (o[0] = (t) => s.$emit('close'))
+                },
+                [...(o[7] || (o[7] = [n('span', { class: 'sr-only' }, 'Close', -1), U(' ✕ ', -1)]))]
+              )
+            ]),
+            n('div', ue, [
+              n('div', ae, [
+                n(
+                  'button',
+                  {
+                    type: 'button',
+                    class: 'hover:text-blue-600',
+                    onClick: o[1] || (o[1] = (t) => s.$emit('selectAll'))
+                  },
+                  ' Select All '
+                ),
+                n(
+                  'button',
+                  {
+                    type: 'button',
+                    class: 'hover:text-blue-600',
+                    onClick: o[2] || (o[2] = (t) => s.$emit('deselectAll'))
+                  },
+                  ' Deselect All '
+                )
+              ]),
+              n(
+                'button',
+                {
+                  type: 'button',
+                  class: 'text-xs font-medium text-blue-600 hover:text-blue-700',
+                  onClick: o[3] || (o[3] = (t) => s.$emit('restoreDefault'))
+                },
+                ' Restore Default '
+              )
+            ]),
+            n('div', de, [
+              n('ul', ce, [
+                (b(!0),
+                p(
+                  $,
+                  null,
+                  S(
+                    e.columns,
+                    (t, m) => (
+                      b(),
+                      p(
+                        'li',
+                        {
+                          key: t.key,
+                          class:
+                            'flex items-center justify-between rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 text-sm shadow-[0_1px_0_rgba(15,23,42,0.02)]',
+                          draggable: !t.frozen,
+                          onDragstart: (y) => f(m),
+                          onDragover: N((y) => void 0, ['prevent']),
+                          onDrop: N((y) => w(m), ['prevent'])
+                        },
+                        [
+                          n('div', ve, [
+                            n(
+                              'button',
+                              {
+                                type: 'button',
+                                class: j([
+                                  'cursor-grab text-gray-300 hover:text-gray-500',
+                                  { 'opacity-40 cursor-not-allowed': t.frozen }
+                                ]),
+                                'aria-label': `Move ${t.label}`
+                              },
+                              ' ⋮⋮ ',
+                              10,
+                              ge
+                            ),
+                            n('label', be, [
+                              n(
+                                'input',
+                                {
+                                  type: 'checkbox',
+                                  class:
+                                    'h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500',
+                                  checked: t.visible,
+                                  onChange: (y) => s.$emit('toggle', t.key)
+                                },
+                                null,
+                                40,
+                                me
+                              ),
+                              n('span', pe, _(t.label), 1)
+                            ])
+                          ]),
+                          n('div', ye, [
+                            n(
+                              'button',
+                              {
+                                type: 'button',
+                                class: j([
+                                  'h-7 w-7 rounded-full border border-transparent text-xs font-medium text-gray-500 hover:border-blue-200 hover:bg-blue-50 hover:text-blue-600 disabled:opacity-40',
+                                  {
+                                    'bg-blue-50 text-blue-600 border-blue-200': t.frozen
+                                  }
+                                ]),
+                                onClick: (y) => s.$emit('toggleFrozen', t.key)
+                              },
+                              ' Pin ',
+                              10,
+                              he
+                            )
+                          ])
+                        ],
+                        40,
+                        fe
+                      )
+                    )
+                  ),
+                  128
+                ))
+              ])
+            ]),
+            n('footer', xe, [
+              n(
+                'button',
+                {
+                  type: 'button',
+                  class:
+                    'rounded-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50',
+                  onClick: o[4] || (o[4] = (t) => s.$emit('close'))
+                },
+                ' Cancel '
+              ),
+              n(
+                'button',
+                {
+                  type: 'button',
+                  class:
+                    'rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700',
+                  onClick: o[5] || (o[5] = (t) => s.$emit('close'))
+                },
+                ' Update '
+              )
+            ])
+          ])
+        ])
+      );
+    }
+  }),
+  _e = { class: 'shifl-grid relative' },
+  ke = { class: 'shifl-grid__controls' },
+  Ce = ['value'],
+  $e = { class: 'shifl-grid__header flex items-center justify-between' },
+  Se = { class: 'text-xs font-medium text-gray-500' },
+  ze = { class: 'shifl-grid__viewport' },
+  Ge = { class: 'shifl-grid__table' },
+  De = ['onClick'],
+  Fe = { key: 0 },
+  Ae = { key: 0 },
+  Me = ['colspan'],
+  Te = /* @__PURE__ */ O({
+    __name: 'ShiflGrid',
+    props: {
+      config: {}
+    },
+    setup(e) {
+      const i = e,
+        r = k(() => Z(i.config)),
+        {
+          columns: c,
+          visibleColumns: l,
+          toggleColumnVisibility: f,
+          setAllVisible: h,
+          toggleFrozen: w,
+          moveColumn: s,
+          resetColumns: o
+        } = ee(r.value.columns),
+        { sort: t, setSort: m, applySort: y } = te(r.value.sort),
+        { globalFilter: v, setGlobalFilter: z, applyGlobalFilter: G } = ne(),
+        D = C(!1);
+      (V(
+        () => r.value.columns,
+        (u) => {
+          c.value = [...u];
+        },
+        { deep: !0 }
+      ),
+        V(
+          () => r.value.sort,
+          (u) => {
+            u && (t.value = u);
+          },
+          { deep: !0 }
+        ));
+      const P = k(() => G(r.value.rows, r.value.search)),
+        F = k(() => y(P.value)),
+        K = k(() => {
+          let u = 0;
+          const a = {};
+          for (const d of l.value) {
+            d.frozen && (a[d.key] = u);
+            const x = parseInt(d.width ?? '160', 10);
+            Number.isNaN(x) || (u += x);
+          }
+          return a;
+        });
+      function W(u) {
+        const a = c.value.find((d) => d.key === u);
+        a != null && a.sortable && m(u);
+      }
+      function I(u) {
+        const a = u.target.value;
+        z(a);
+      }
+      function J(u) {
+        return u == null ? '' : typeof u == 'object' ? JSON.stringify(u) : String(u);
+      }
+      function E(u, a = !0) {
+        const d = {
+          width: u.width ?? '160px',
+          minWidth: u.width ?? '160px'
+        };
+        if (!u.frozen) return d;
+        const x = K.value[u.key] ?? 0;
+        return {
+          ...d,
+          position: 'sticky',
+          left: `${x}px`,
+          zIndex: a ? 30 : 10,
+          background: '#ffffff'
+        };
+      }
+      return (u, a) => (
+        b(),
+        p('div', _e, [
+          n('div', ke, [
+            n(
+              'input',
+              {
+                class: 'flex-1 rounded border border-gray-300 px-3 py-2 text-sm',
+                type: 'text',
+                value: g(v),
+                onInput: I,
+                placeholder: 'Search anything...'
+              },
+              null,
+              40,
+              Ce
+            ),
+            n(
+              'button',
+              {
+                type: 'button',
+                class: 'shifl-grid__pill-button whitespace-nowrap',
+                onClick: a[0] || (a[0] = (d) => (D.value = !0))
+              },
+              ' Edit Columns '
+            )
+          ]),
+          n('div', $e, [
+            n('span', null, _(e.config.name ?? 'Shifl Grid'), 1),
+            n('span', Se, ' Showing ' + _(F.value.length) + ' of ' + _(r.value.rows.length), 1)
+          ]),
+          n('div', ze, [
+            n('table', Ge, [
+              n('thead', null, [
+                n('tr', null, [
+                  (b(!0),
+                  p(
+                    $,
+                    null,
+                    S(g(l), (d) => {
+                      var x;
+                      return (
+                        b(),
+                        p(
+                          'th',
+                          {
+                            key: d.key,
+                            style: R(E(d, !0)),
+                            onClick: () => W(d.key)
+                          },
+                          [
+                            n('span', null, _(d.label), 1),
+                            ((x = g(t)) == null ? void 0 : x.key) === d.key
+                              ? (b(), p('span', Fe, _(g(t).order === 'asc' ? '▲' : '▼'), 1))
+                              : M('', !0)
+                          ],
+                          12,
+                          De
+                        )
+                      );
+                    }),
+                    128
+                  ))
+                ])
+              ]),
+              n('tbody', null, [
+                F.value.length
+                  ? M('', !0)
+                  : (b(),
+                    p('tr', Ae, [
+                      n(
+                        'td',
+                        {
+                          colspan: g(l).length,
+                          class: 'text-center text-gray-500 py-6'
+                        },
+                        ' No data ',
+                        8,
+                        Me
+                      )
+                    ])),
+                (b(!0),
+                p(
+                  $,
+                  null,
+                  S(
+                    F.value,
+                    (d, x) => (
+                      b(),
+                      p('tr', { key: x }, [
+                        (b(!0),
+                        p(
+                          $,
+                          null,
+                          S(
+                            g(l),
+                            (A) => (
+                              b(),
+                              p(
+                                'td',
+                                {
+                                  key: A.key,
+                                  style: R(E(A, !1))
+                                },
+                                _(J(d[A.key])),
+                                5
+                              )
+                            )
+                          ),
+                          128
+                        ))
+                      ])
+                    )
+                  ),
+                  128
+                ))
+              ])
+            ])
+          ]),
+          a[4] ||
+            (a[4] = n(
+              'div',
+              { class: 'shifl-grid__footer text-xs text-gray-600' },
+              ' Row per page 20 ▾ ',
+              -1
+            )),
+          D.value
+            ? (b(),
+              H(
+                we,
+                {
+                  key: 0,
+                  'title-prefix': e.config.name,
+                  columns: g(c),
+                  onClose: a[1] || (a[1] = (d) => (D.value = !1)),
+                  onToggle: g(f),
+                  onToggleFrozen: g(w),
+                  onMove: g(s),
+                  onSelectAll: a[2] || (a[2] = (d) => g(h)(!0)),
+                  onDeselectAll: a[3] || (a[3] = (d) => g(h)(!1)),
+                  onRestoreDefault: g(o)
+                },
+                null,
+                8,
+                [
+                  'title-prefix',
+                  'columns',
+                  'onToggle',
+                  'onToggleFrozen',
+                  'onMove',
+                  'onRestoreDefault'
+                ]
+              ))
+            : M('', !0)
+        ])
+      );
+    }
+  }),
+  Ne = {
+    install(e) {
+      e.component('ShiflGrid', Te);
+    }
+  };
+function je(e) {
+  return {
+    rows: e.rows
+  };
+}
+function Ve() {
+  const e = C(/* @__PURE__ */ new Set());
+  function i(r) {
+    const c = r.id ?? JSON.stringify(r),
+      l = new Set(e.value);
+    (l.has(c) ? l.delete(c) : l.add(c), (e.value = l));
+  }
+  return {
+    selectedKeys: e,
+    toggleRow: i
+  };
+}
+function Re() {
+  return {
+    // placeholder
+  };
+}
+const B = Symbol('shifl-grid-theme'),
+  L = {
+    surface: 'var(--shifl-surface)',
+    surfaceAlt: 'var(--shifl-surface-alt)',
+    border: 'var(--shifl-border)',
+    text: 'var(--shifl-text)',
+    textMuted: 'var(--shifl-text-muted)',
+    accent: 'var(--shifl-accent)',
+    accentStrong: 'var(--shifl-accent-strong)',
+    focus: 'var(--shifl-focus)'
+  };
+function Oe(e) {
+  const i = C({ ...L, ...e });
+  return (Y(B, i), i);
+}
+function Be() {
+  const e = q(B);
+  return k(() => (e == null ? void 0 : e.value) ?? L);
+}
+const T = {
+  sm: 640,
+  lg: 1024
+};
+function Le() {
+  const e = C(typeof window < 'u' ? window.innerWidth : 0);
+  function i() {
+    e.value = window.innerWidth;
+  }
+  return (
+    Q(() => {
+      window.addEventListener('resize', i);
+    }),
+    X(() => {
+      window.removeEventListener('resize', i);
+    }),
+    {
+      width: e,
+      isMobile: k(() => e.value < T.sm),
+      isTablet: k(() => e.value >= T.sm && e.value < T.lg)
+    }
+  );
+}
+function Pe() {
+  return {
+    // placeholder
+  };
+}
+function Ke() {
+  return {
+    // placeholder
+  };
+}
+function We() {
+  return {
+    // placeholder
+  };
+}
+export {
+  Te as ShiflGrid,
+  Ne as ShiflGridPlugin,
+  Oe as provideGridTheme,
+  Le as useBreakpoints,
+  ee as useGridColumns,
+  je as useGridData,
+  Re as useGridEditing,
+  ne as useGridFilter,
+  Pe as useGridInfiniteScroll,
+  Ve as useGridSelection,
+  te as useGridSort,
+  Be as useGridTheme,
+  We as useGridTour,
+  Ke as useVirtualScroll
+};