@privyid/persona 1.2.1 → 1.2.2-dev.1

package/dist/components/table-flex/TableFlex.vue

@@ -0,0 +1,309 @@
+<template>
+  <div
+    data-testid="table-flex"
+    class="table-flex"
+    :class="classNames">
+    <Draggable
+      v-if="Array.isArray(items) && items.length > 0"
+      v-model="rows"
+      class="table-flex__body"
+      handle=".table-flex__drag"
+      item-key="_key"
+      :disabled="!draggable">
+      <template #item="{ element, index }">
+        <div
+          class="table-flex__row"
+          :class="trClass"
+          data-role="row">
+          <div
+            v-if="draggable"
+            class="table-flex__cell table-flex__drag"
+            data-testid="table-flex-drag-handle">
+            <IconDrag />
+          </div>
+
+          <div
+            v-if="selectable"
+            class="table-flex__cell table-flex__checkbox">
+            <Checkbox
+              v-model="model"
+              data-testid="table-flex-select"
+              :value="withoutKey(element)"
+              :disabled="element._selectable === false" />
+          </div>
+
+          <slot
+            name="row"
+            :index="index"
+            :item="element">
+            <div
+              v-for="field in fields"
+              :key="field.key"
+              class="table-flex__cell"
+              data-testid="table-flex-cell"
+              :class="field.tdClass"
+              :style="field.width ? { '--p-table-flex-cell-width': withUnit(field.width) } : { flex: '1 1 0%' }"
+              :data-cell="field.key">
+              <div
+                class="table-flex__header"
+                :class="field.thClass">
+                <slot
+                  :name="`head(${field.key})`"
+                  :label="field.label"
+                  :field="field"
+                  :data-header="field.key">
+                  {{ field.label }}
+                </slot>
+              </div>
+              <slot
+                :name="`cell(${field.key})`"
+                :index="index"
+                :item="element">
+                {{ field.formatter(element[field.key], element) }}
+              </slot>
+            </div>
+          </slot>
+        </div>
+      </template>
+    </Draggable>
+
+    <div
+      v-else
+      class="table-flex__body table-flex--empty">
+      <div
+        class="table-flex__row"
+        :class="trClass">
+        <div
+          v-for="field in fields"
+          :key="field.key"
+          class="table-flex__cell table-flex__cell--empty"
+          data-testid="table-flex-cell-empty"
+          :class="field.tdClass"
+          :style="field.width ? { '--p-table-flex-cell-width': withUnit(field.width) } : { flex: '1 1 0%' }"
+          :data-cell="field.key">
+          <div
+            class="table-flex__header"
+            :class="field.thClass">
+            <slot
+              :name="`head(${field.key})`"
+              :label="field.label"
+              :field="field"
+              :data-header="field.key">
+              {{ field.label }}
+            </slot>
+          </div>
+        </div>
+        <div
+          data-testid="table-flex-empty"
+          class="table-flex__cell table-flex__cell--empty table-flex__state-empty">
+          <slot name="empty">
+            <span class="flex items-center justify-center text-subtle dark:text-dark-subtle">
+              {{ emptyLabel }}
+            </span>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  computed
+} from "vue";
+import {
+  withKey,
+  withoutKey,
+  withUnit
+} from "../table";
+import Checkbox from "../checkbox/Checkbox.vue";
+import { useVModel } from "../input";
+import IconDrag from "@privyid/persona-icon/vue/draggable/20.vue";
+import Draggable from "vuedraggable";
+const props = defineProps({
+  apperance: {
+    type: String,
+    default: "card"
+  },
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  fields: {
+    type: Array,
+    default: () => []
+  },
+  items: {
+    type: Array,
+    default: () => []
+  },
+  selectable: {
+    type: Boolean,
+    default: false
+  },
+  draggable: {
+    type: Boolean,
+    default: false
+  },
+  emptyLabel: {
+    type: String,
+    default: "There are no records to show"
+  },
+  noLabel: {
+    type: Boolean,
+    default: false
+  },
+  tableClass: {
+    type: [
+      String,
+      Array,
+      Object
+    ],
+    default: void 0
+  },
+  trClass: {
+    type: [
+      String,
+      Array,
+      Object
+    ],
+    default: void 0
+  }
+});
+const model = useVModel(props);
+const emit = defineEmits(["update:modelValue", "update:items"]);
+const rows = computed({
+  get() {
+    return props.items.map((item) => {
+      return withKey(item);
+    });
+  },
+  set(items) {
+    emit("update:items", items);
+  }
+});
+const classNames = computed(() => {
+  const results = [];
+  if (props.apperance)
+    results.push(`table-flex--${props.apperance}`);
+  if (props.selectable)
+    results.push("table-flex--selectable");
+  if (props.draggable)
+    results.push("table-flex--draggable");
+  if (props.noLabel)
+    results.push("table-flex--no-label");
+  return results;
+});
+defineSlots();
+</script>
+
+<style lang="postcss">
+.table-flex {
+  --p-table-bg: theme(backgroundColor.default.DEFAULT);
+  --p-table-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
+  --p-table-border: theme(borderColor.default.DEFAULT);
+  --p-table-border-dark: theme(borderColor.dark.default.DEFAULT);
+
+  @apply flex flex-col w-full;
+
+  .table-flex__header {
+    @apply text-subtle text-xs font-bold pb-3;
+    @apply dark:text-dark-subtle;
+  }
+
+  &__row {
+    @apply max-sm:relative;
+    @apply flex flex-col md:flex-row w-full items-start flex-wrap;
+
+    & > :not([hidden]) {
+      ~ .basis-full {
+        @apply ml-0;
+      }
+    }
+
+    .table-flex--empty & {
+      @apply flex-row;
+    }
+  }
+
+  &__cell {
+    @apply max-sm:w-full md:w-[var(--p-table-flex-cell-width)];
+    @apply py-4 px-3 text-sm text-default break-all;
+    @apply dark:text-dark-default;
+
+    & > .table-flex__header {
+      @apply text-xs;
+    }
+
+    &.table-flex__checkbox,
+    &.table-flex__drag {
+      @apply max-sm:absolute max-sm:left-0 max-sm:top-1/2 max-sm:-translate-y-1/2;
+      @apply shrink-0 grow-0 self-center w-auto;
+    }
+
+    &.table-flex__checkbox {
+      > .checkbox {
+        @apply md:gap-0;
+      }
+    }
+
+    &.table-flex__drag {
+      @apply cursor-grabbing md:mx-3;
+    }
+
+    &--empty {
+      @apply pt-4 pb-0 px-3 text-sm text-default;
+      @apply dark:text-dark-default;
+
+      &.basis-full {
+        @apply pb-4;
+      }
+    }
+  }
+
+  &__state-empty {
+    @apply basis-full;
+  }
+
+  &__body {
+    @apply flex flex-col;
+  }
+
+  &--card {
+    .table-flex__body {
+      @apply space-y-3;
+    }
+
+    .table-flex__row {
+      @apply rounded border border-[color:var(--p-table-border)] bg-[color:var(--p-table-bg)];
+      @apply dark:border-[color:var(--p-table-border-dark)] dark:bg-[color:var(--p-table-bg-dark)];
+    }
+  }
+
+  &--no-label {
+    .table-flex__header {
+      @apply hidden;
+    }
+  }
+
+  &--table {
+    .table-flex__body {
+      @apply border-b border-b-[color:var(--p-table-border)] divide-y divide-[color:var(--p-table-border)] bg-[color:var(--p-table-bg)];
+      @apply dark:border-b-[color:var(--p-table-border-dark)] dark:divide-[color:var(--p-table-border-dark)] dark:bg-[color:var(--p-table-bg-dark)];
+    }
+  }
+
+  &--selectable,
+  &--draggable {
+    .table-flex__row {
+      @apply max-sm:pl-10;
+    }
+  }
+
+  &.table-flex--selectable.table-flex--draggable {
+    .table-flex__drag {
+      @apply top-0 translate-y-0;
+    }
+  }
+}
+</style>

package/dist/components/table-flex/TableFlex.vue.d.ts

@@ -0,0 +1,77 @@
+import type { VNode } from 'vue';
+import type { ApperanceVariant, TableField, KeyType } from '../table';
+declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{
+        modelValue: T[];
+        items: T[];
+        draggable: boolean;
+        selectable: boolean;
+        fields: TableField<T>[];
+        emptyLabel: string;
+        noLabel: boolean;
+        apperance: ApperanceVariant;
+        tableClass: any;
+        trClass: any;
+    }> & Omit<{
+        readonly modelValue: T[];
+        readonly items: T[];
+        readonly draggable: boolean;
+        readonly selectable: boolean;
+        readonly fields: TableField<T>[];
+        readonly emptyLabel: string;
+        readonly noLabel: boolean;
+        readonly apperance: ApperanceVariant;
+        readonly tableClass?: any;
+        readonly trClass?: any;
+        readonly "onUpdate:modelValue"?: ((args_0: T[]) => any) | undefined;
+        readonly "onUpdate:items"?: ((args_0: T[]) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "modelValue" | "items" | "draggable" | "selectable" | "fields" | "emptyLabel" | "noLabel" | "apperance" | "tableClass" | "trClass">, "onUpdate:modelValue" | "onUpdate:items" | ("modelValue" | "items" | "draggable" | "selectable" | "fields" | "emptyLabel" | "noLabel" | "apperance" | "tableClass" | "trClass")> & Partial<{}> & {}> & (import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps);
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: Readonly<{
+        [K: `cell(${string})`]: (props: {
+            index: number;
+        }) => VNode[];
+        [K: `head(${string})`]: (props: {
+            field: TableField<T>;
+            label: string;
+        }) => VNode[];
+        empty(): VNode[];
+        row(props: {
+            index: number;
+            item: T;
+        }): VNode[];
+    } & { [K in KeyType<T> as `cell(${K})`]: (props: {
+        item: T;
+        index: number;
+    }) => VNode[]; } & { [K_1 in KeyType<T> as `head(${K_1})`]: (props: {
+        field: TableField<T>;
+        label: string;
+    }) => VNode[]; }> & {
+        [K: `cell(${string})`]: (props: {
+            index: number;
+        }) => VNode[];
+        [K: `head(${string})`]: (props: {
+            field: TableField<T>;
+            label: string;
+        }) => VNode[];
+        empty(): VNode[];
+        row(props: {
+            index: number;
+            item: T;
+        }): VNode[];
+    } & { [K in KeyType<T> as `cell(${K})`]: (props: {
+        item: T;
+        index: number;
+    }) => VNode[]; } & { [K_1 in KeyType<T> as `head(${K_1})`]: (props: {
+        field: TableField<T>;
+        label: string;
+    }) => VNode[]; };
+    emit: ((evt: "update:modelValue", args_0: T[]) => void) & ((evt: "update:items", args_0: T[]) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};