@eslamdevui/ui 3.2.0-beta.1

package/dist/runtime/components/Stepper.vue.d.ts

@@ -0,0 +1,85 @@
+import type { StepperRootProps, StepperRootEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/stepper';
+import type { DynamicSlots, ComponentConfig } from '../types/utils';
+type Stepper = ComponentConfig<typeof theme, AppConfig, 'stepper'>;
+export interface StepperItem {
+    slot?: string;
+    value?: string | number;
+    title?: string;
+    description?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: string;
+    content?: string;
+    disabled?: boolean;
+    class?: any;
+    ui?: Pick<Stepper['slots'], 'item' | 'container' | 'trigger' | 'indicator' | 'icon' | 'separator' | 'wrapper' | 'title' | 'description'>;
+    [key: string]: any;
+}
+export interface StepperProps<T extends StepperItem = StepperItem> extends Pick<StepperRootProps, 'linear'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    items: T[];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: Stepper['variants']['size'];
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: Stepper['variants']['color'];
+    /**
+     * The orientation of the stepper.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: Stepper['variants']['orientation'];
+    /**
+     * The value of the step that should be active when initially rendered. Use when you do not need to control the state of the steps.
+     */
+    defaultValue?: string | number;
+    disabled?: boolean;
+    class?: any;
+    ui?: Stepper['slots'];
+}
+export type StepperEmits<T extends StepperItem = StepperItem> = Omit<StepperRootEmits, 'update:modelValue'> & {
+    next: [payload: T];
+    prev: [payload: T];
+};
+type SlotProps<T extends StepperItem> = (props: {
+    item: T;
+}) => any;
+export type StepperSlots<T extends StepperItem = StepperItem> = {
+    indicator: SlotProps<T>;
+    title: SlotProps<T>;
+    description: SlotProps<T>;
+    content: SlotProps<T>;
+} & DynamicSlots<T>;
+declare const _default: <T extends StepperItem>(__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<{}> & Omit<{
+        readonly onPrev?: ((payload: T) => any) | undefined;
+        readonly onNext?: ((payload: T) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onPrev" | "onNext"> & (StepperProps<T> & {
+        modelValue?: string | number;
+    }) & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{
+        next(): void;
+        prev(): void;
+        hasNext: import("vue").ComputedRef<boolean>;
+        hasPrev: import("vue").ComputedRef<boolean>;
+    }>): void;
+    attrs: any;
+    slots: StepperSlots<T>;
+    emit: (((evt: "prev", payload: T) => void) & ((evt: "next", payload: T) => void)) & ((evt: "update:modelValue", value: string | number | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/Switch.vue

@@ -0,0 +1,89 @@
+<script>
+import theme from "#build/ui/switch";
+</script>
+
+<script setup>
+import { computed, useId } from "vue";
+import { Primitive, SwitchRoot, SwitchThumb, useForwardProps, Label } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useFormField } from "../composables/useFormField";
+import { tv } from "../utils/tv";
+import UIcon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: String, required: false },
+  checkedIcon: { type: String, required: false },
+  uncheckedIcon: { type: String, required: false },
+  label: { type: String, required: false },
+  description: { type: String, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  value: { type: String, required: false },
+  defaultValue: { type: Boolean, required: false }
+});
+const slots = defineSlots();
+const emits = defineEmits(["change"]);
+const modelValue = defineModel({ type: Boolean, ...{ default: void 0 } });
+const appConfig = useAppConfig();
+const rootProps = useForwardProps(reactivePick(props, "required", "value", "defaultValue"));
+const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField(props);
+const id = _id.value ?? useId();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.switch || {} })({
+  size: size.value,
+  color: color.value,
+  required: props.required,
+  loading: props.loading,
+  disabled: disabled.value || props.loading
+}));
+function onUpdate(value) {
+  const event = new Event("change", { target: { value } });
+  emits("change", event);
+  emitFormChange();
+  emitFormInput();
+}
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div :class="ui.container({ class: props.ui?.container })">
+      <SwitchRoot
+        :id="id"
+        v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
+        v-model="modelValue"
+        :name="name"
+        :disabled="disabled || loading"
+        :class="ui.base({ class: props.ui?.base })"
+        @update:model-value="onUpdate"
+      >
+        <SwitchThumb :class="ui.thumb({ class: props.ui?.thumb })">
+          <UIcon v-if="loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.icon({ class: props.ui?.icon, checked: true, unchecked: true })" />
+          <template v-else>
+            <UIcon v-if="checkedIcon" :name="checkedIcon" :class="ui.icon({ class: props.ui?.icon, checked: true })" />
+            <UIcon v-if="uncheckedIcon" :name="uncheckedIcon" :class="ui.icon({ class: props.ui?.icon, unchecked: true })" />
+          </template>
+        </SwitchThumb>
+      </SwitchRoot>
+    </div>
+    <div v-if="label || !!slots.label || (description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <Label v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
+        <slot name="label" :label="label">
+          {{ label }}
+        </slot>
+      </Label>
+      <p v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+        <slot name="description" :description="description">
+          {{ description }}
+        </slot>
+      </p>
+    </div>
+  </Primitive>
+</template>

package/dist/runtime/components/Switch.vue.d.ts

@@ -0,0 +1,70 @@
+import type { SwitchRootProps } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/switch';
+import type { ComponentConfig } from '../types/utils';
+type Switch = ComponentConfig<typeof theme, AppConfig, 'switch'>;
+export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: Switch['variants']['color'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: Switch['variants']['size'];
+    /** When `true`, the loading icon will be displayed. */
+    loading?: boolean;
+    /**
+     * The icon when the `loading` prop is `true`.
+     * @defaultValue appConfig.ui.icons.loading
+     * @IconifyIcon
+     */
+    loadingIcon?: string;
+    /**
+     * Display an icon when the switch is checked.
+     * @IconifyIcon
+     */
+    checkedIcon?: string;
+    /**
+     * Display an icon when the switch is unchecked.
+     * @IconifyIcon
+     */
+    uncheckedIcon?: string;
+    label?: string;
+    description?: string;
+    class?: any;
+    ui?: Switch['slots'];
+}
+export type SwitchEmits = {
+    change: [payload: Event];
+};
+export interface SwitchSlots {
+    label(props: {
+        label?: string;
+    }): any;
+    description(props: {
+        description?: string;
+    }): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SwitchProps & {
+    modelValue?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (payload: Event) => any;
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<SwitchProps & {
+    modelValue?: boolean;
+}> & Readonly<{
+    onChange?: ((payload: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SwitchSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Table.vue

@@ -0,0 +1,286 @@
+<script>
+import theme from "#build/ui/table";
+</script>
+
+<script setup>
+import { computed, ref, watch } from "vue";
+import { Primitive } from "reka-ui";
+import { upperFirst } from "scule";
+import { FlexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getExpandedRowModel, useVueTable } from "@tanstack/vue-table";
+import { reactiveOmit } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  data: { type: Array, required: false },
+  columns: { type: Array, required: false },
+  caption: { type: String, required: false },
+  meta: { type: Object, required: false },
+  empty: { type: String, required: false },
+  sticky: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  loadingColor: { type: null, required: false },
+  loadingAnimation: { type: null, required: false },
+  watchOptions: { type: Object, required: false, default: () => ({
+    deep: true
+  }) },
+  globalFilterOptions: { type: Object, required: false },
+  columnFiltersOptions: { type: Object, required: false },
+  columnPinningOptions: { type: Object, required: false },
+  columnSizingOptions: { type: Object, required: false },
+  visibilityOptions: { type: Object, required: false },
+  sortingOptions: { type: Object, required: false },
+  groupingOptions: { type: Object, required: false },
+  expandedOptions: { type: Object, required: false },
+  rowSelectionOptions: { type: Object, required: false },
+  rowPinningOptions: { type: Object, required: false },
+  paginationOptions: { type: Object, required: false },
+  facetedOptions: { type: Object, required: false },
+  onSelect: { type: Function, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  state: { type: Object, required: false },
+  onStateChange: { type: Function, required: false },
+  renderFallbackValue: { type: null, required: false },
+  _features: { type: Array, required: false },
+  autoResetAll: { type: Boolean, required: false },
+  debugAll: { type: Boolean, required: false },
+  debugCells: { type: Boolean, required: false },
+  debugColumns: { type: Boolean, required: false },
+  debugHeaders: { type: Boolean, required: false },
+  debugRows: { type: Boolean, required: false },
+  debugTable: { type: Boolean, required: false },
+  defaultColumn: { type: Object, required: false },
+  getRowId: { type: Function, required: false },
+  getSubRows: { type: Function, required: false },
+  initialState: { type: Object, required: false },
+  mergeOptions: { type: Function, required: false }
+});
+const slots = defineSlots();
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const data = ref(props.data ?? []);
+const columns = computed(() => props.columns ?? Object.keys(data.value[0] ?? {}).map((accessorKey) => ({ accessorKey, header: upperFirst(accessorKey) })));
+const meta = computed(() => props.meta ?? {});
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.table || {} })({
+  sticky: props.sticky,
+  loading: props.loading,
+  loadingColor: props.loadingColor,
+  loadingAnimation: props.loadingAnimation
+}));
+const globalFilterState = defineModel("globalFilter", { type: String, ...{ default: void 0 } });
+const columnFiltersState = defineModel("columnFilters", { type: Array, ...{ default: [] } });
+const columnOrderState = defineModel("columnOrder", { type: Array, ...{ default: [] } });
+const columnVisibilityState = defineModel("columnVisibility", { type: Object, ...{ default: {} } });
+const columnPinningState = defineModel("columnPinning", { type: Object, ...{ default: {} } });
+const columnSizingState = defineModel("columnSizing", { type: Object, ...{ default: {} } });
+const columnSizingInfoState = defineModel("columnSizingInfo", { type: Object, ...{ default: {} } });
+const rowSelectionState = defineModel("rowSelection", { type: Object, ...{ default: {} } });
+const rowPinningState = defineModel("rowPinning", { type: Object, ...{ default: {} } });
+const sortingState = defineModel("sorting", { type: Array, ...{ default: [] } });
+const groupingState = defineModel("grouping", { type: Array, ...{ default: [] } });
+const expandedState = defineModel("expanded", { type: [Boolean, Object], ...{ default: {} } });
+const paginationState = defineModel("pagination", { type: Object, ...{ default: {} } });
+const tableRef = ref(null);
+const tableApi = useVueTable({
+  ...reactiveOmit(props, "as", "data", "columns", "caption", "sticky", "loading", "loadingColor", "loadingAnimation", "class", "ui"),
+  data,
+  columns: columns.value,
+  meta: meta.value,
+  getCoreRowModel: getCoreRowModel(),
+  ...props.globalFilterOptions || {},
+  onGlobalFilterChange: (updaterOrValue) => valueUpdater(updaterOrValue, globalFilterState),
+  ...props.columnFiltersOptions || {},
+  getFilteredRowModel: getFilteredRowModel(),
+  onColumnFiltersChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnFiltersState),
+  onColumnOrderChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnOrderState),
+  ...props.visibilityOptions || {},
+  onColumnVisibilityChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnVisibilityState),
+  ...props.columnPinningOptions || {},
+  onColumnPinningChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnPinningState),
+  ...props.columnSizingOptions || {},
+  onColumnSizingChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnSizingState),
+  onColumnSizingInfoChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnSizingInfoState),
+  ...props.rowSelectionOptions || {},
+  onRowSelectionChange: (updaterOrValue) => valueUpdater(updaterOrValue, rowSelectionState),
+  ...props.rowPinningOptions || {},
+  onRowPinningChange: (updaterOrValue) => valueUpdater(updaterOrValue, rowPinningState),
+  ...props.sortingOptions || {},
+  getSortedRowModel: getSortedRowModel(),
+  onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sortingState),
+  ...props.groupingOptions || {},
+  onGroupingChange: (updaterOrValue) => valueUpdater(updaterOrValue, groupingState),
+  ...props.expandedOptions || {},
+  getExpandedRowModel: getExpandedRowModel(),
+  onExpandedChange: (updaterOrValue) => valueUpdater(updaterOrValue, expandedState),
+  ...props.paginationOptions || {},
+  onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, paginationState),
+  ...props.facetedOptions || {},
+  state: {
+    get globalFilter() {
+      return globalFilterState.value;
+    },
+    get columnFilters() {
+      return columnFiltersState.value;
+    },
+    get columnOrder() {
+      return columnOrderState.value;
+    },
+    get columnVisibility() {
+      return columnVisibilityState.value;
+    },
+    get columnPinning() {
+      return columnPinningState.value;
+    },
+    get expanded() {
+      return expandedState.value;
+    },
+    get rowSelection() {
+      return rowSelectionState.value;
+    },
+    get sorting() {
+      return sortingState.value;
+    },
+    get grouping() {
+      return groupingState.value;
+    },
+    get rowPinning() {
+      return rowPinningState.value;
+    },
+    get columnSizing() {
+      return columnSizingState.value;
+    },
+    get columnSizingInfo() {
+      return columnSizingInfoState.value;
+    },
+    get pagination() {
+      return paginationState.value;
+    }
+  }
+});
+function valueUpdater(updaterOrValue, ref2) {
+  ref2.value = typeof updaterOrValue === "function" ? updaterOrValue(ref2.value) : updaterOrValue;
+}
+function handleRowSelect(row, e) {
+  if (!props.onSelect) {
+    return;
+  }
+  const target = e.target;
+  const isInteractive = target.closest("button") || target.closest("a");
+  if (isInteractive) {
+    return;
+  }
+  e.preventDefault();
+  e.stopPropagation();
+  props.onSelect(row, e);
+}
+watch(
+  () => props.data,
+  () => {
+    data.value = props.data ? [...props.data] : [];
+  },
+  props.watchOptions
+);
+defineExpose({
+  tableRef,
+  tableApi
+});
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <table ref="tableRef" :class="ui.base({ class: [props.ui?.base] })">
+      <caption v-if="caption || !!slots.caption" :class="ui.caption({ class: [props.ui?.caption] })">
+        <slot name="caption">
+          {{ caption }}
+        </slot>
+      </caption>
+
+      <thead :class="ui.thead({ class: [props.ui?.thead] })">
+        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" :class="ui.tr({ class: [props.ui?.tr] })">
+          <th
+            v-for="header in headerGroup.headers"
+            :key="header.id"
+            :data-pinned="header.column.getIsPinned()"
+            :colspan="header.colSpan > 1 ? header.colSpan : void 0"
+            :class="ui.th({
+  class: [
+    props.ui?.th,
+    typeof header.column.columnDef.meta?.class?.th === 'function' ? header.column.columnDef.meta.class.th(header) : header.column.columnDef.meta?.class?.th
+  ],
+  pinned: !!header.column.getIsPinned()
+})"
+          >
+            <slot :name="`${header.id}-header`" v-bind="header.getContext()">
+              <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
+            </slot>
+          </th>
+        </tr>
+
+        <tr :class="ui.separator({ class: [props.ui?.separator] })" />
+      </thead>
+
+      <tbody :class="ui.tbody({ class: [props.ui?.tbody] })">
+        <slot name="body-top" />
+
+        <template v-if="tableApi.getRowModel().rows?.length">
+          <template v-for="row in tableApi.getRowModel().rows" :key="row.id">
+            <tr
+              :data-selected="row.getIsSelected()"
+              :data-selectable="!!props.onSelect"
+              :data-expanded="row.getIsExpanded()"
+              :role="props.onSelect ? 'button' : void 0"
+              :tabindex="props.onSelect ? 0 : void 0"
+              :class="ui.tr({
+  class: [
+    props.ui?.tr,
+    typeof tableApi.options.meta?.class?.tr === 'function' ? tableApi.options.meta.class.tr(row) : tableApi.options.meta?.class?.tr
+  ]
+})"
+              @click="handleRowSelect(row, $event)"
+            >
+              <td
+                v-for="cell in row.getVisibleCells()"
+                :key="cell.id"
+                :data-pinned="cell.column.getIsPinned()"
+                :class="ui.td({
+  class: [
+    props.ui?.td,
+    typeof cell.column.columnDef.meta?.class?.td === 'function' ? cell.column.columnDef.meta.class.td(cell) : cell.column.columnDef.meta?.class?.td
+  ],
+  pinned: !!cell.column.getIsPinned()
+})"
+              >
+                <slot :name="`${cell.column.id}-cell`" v-bind="cell.getContext()">
+                  <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+                </slot>
+              </td>
+            </tr>
+            <tr v-if="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })">
+              <td :colspan="row.getAllCells().length" :class="ui.td({ class: [props.ui?.td] })">
+                <slot name="expanded" :row="row" />
+              </td>
+            </tr>
+          </template>
+        </template>
+
+        <tr v-else-if="loading && !!slots['loading']">
+          <td :colspan="columns?.length" :class="ui.loading({ class: props.ui?.loading })">
+            <slot name="loading" />
+          </td>
+        </tr>
+
+        <tr v-else>
+          <td :colspan="columns?.length" :class="ui.empty({ class: props.ui?.empty })">
+            <slot name="empty">
+              {{ empty || t("table.noData") }}
+            </slot>
+          </td>
+        </tr>
+
+        <slot name="body-bottom" />
+      </tbody>
+    </table>
+  </Primitive>
+</template>