nuxt-ui-tools 0.1.0

package/dist/runtime/table/components/filters/tags/OptionFilterTag.vue.d.ts

@@ -0,0 +1,35 @@
+import type { TableOptionFilterDefinition } from '../../../types/index.js';
+type __VLS_Props = {
+    definition: TableOptionFilterDefinition;
+    dynamic?: boolean;
+    session?: boolean;
+    activationToken?: number;
+};
+declare var __VLS_10: {
+    preview: import("../../../utils/index.js").FilterPreviewResult;
+    active: boolean;
+    open: boolean;
+    triggerProps: {
+        type: string;
+        'aria-haspopup': string;
+        'aria-expanded': boolean;
+    };
+};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    dismiss: () => any;
+    sessionClosed: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDismiss?: (() => any) | undefined;
+    onSessionClosed?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/table/components/filters/tags/TextFilterTag.d.vue.ts

@@ -0,0 +1,35 @@
+import type { TableTextFilterDefinition } from '../../../types/index.js';
+type __VLS_Props = {
+    definition: TableTextFilterDefinition;
+    dynamic?: boolean;
+    session?: boolean;
+    activationToken?: number;
+};
+declare var __VLS_10: {
+    preview: import("../../../utils/index.js").FilterPreviewResult;
+    active: boolean;
+    open: boolean;
+    triggerProps: {
+        type: string;
+        'aria-haspopup': string;
+        'aria-expanded': boolean;
+    };
+};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    dismiss: () => any;
+    sessionClosed: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDismiss?: (() => any) | undefined;
+    onSessionClosed?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/table/components/filters/tags/TextFilterTag.vue

@@ -0,0 +1,171 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UInput from "@nuxt/ui/components/Input.vue";
+import UPopover from "@nuxt/ui/components/Popover.vue";
+import { computed, ref, toRef } from "vue";
+import { useFilterTagSession } from "../../../composables/use-filter-tag-session";
+import { useTableInternals } from "../../../composables/use-table-internals";
+import { resolveFilterTriggerIcon, resolveTextFilterUi } from "../../../utils";
+import TableFilterTrigger from "../shared/FilterTriggerTag.vue";
+const props = defineProps({
+  definition: { type: Object, required: true },
+  dynamic: { type: Boolean, required: false },
+  session: { type: Boolean, required: false },
+  activationToken: { type: Number, required: false }
+});
+const emit = defineEmits(["dismiss", "sessionClosed"]);
+const internals = useTableInternals();
+const pendingOperator = ref();
+const localValue = ref("");
+const preview = computed(
+  () => internals.filters.getFilterPreview({
+    key: props.definition.key
+  })
+);
+const operator = computed(() => {
+  const value = pendingOperator.value ?? internals.filters.getFilterOperator({
+    key: props.definition.key
+  });
+  return value === "is" || value === "isNot" ? value : "contains";
+});
+const operatorLabel = computed(
+  () => internals.filters.getFilterOperatorOptions({
+    key: props.definition.key
+  }).find((item) => item.value === operator.value)?.label ?? "contains"
+);
+const operatorItems = computed(
+  () => internals.filters.getFilterOperatorOptions({
+    key: props.definition.key
+  })
+);
+const filterUi = computed(() => resolveTextFilterUi(props.definition, operator.value));
+function initLocalState() {
+  const value = internals.filters.getFilterState({ key: props.definition.key })?.value;
+  localValue.value = value == null ? "" : String(value);
+}
+const session = useFilterTagSession({
+  activationToken: toRef(props, "activationToken"),
+  session: props.session,
+  dynamic: props.dynamic,
+  hasCommittedState: () => internals.filters.getFilterState({ key: props.definition.key }) != null,
+  onActivated: () => handleActivate(operator.value),
+  onOpen: initLocalState,
+  onClose: () => {
+    pendingOperator.value = void 0;
+  },
+  onSessionClosed: () => emit("sessionClosed"),
+  onDismiss: () => emit("dismiss")
+});
+function handleActivate(op) {
+  pendingOperator.value = op;
+  session.openWithLock();
+}
+function applyFilter() {
+  const op = pendingOperator.value;
+  pendingOperator.value = void 0;
+  internals.filters.setScalarFilterValue({
+    key: props.definition.key,
+    value: localValue.value.trim() || void 0,
+    operator: op
+  });
+  session.close();
+}
+function clearFilter() {
+  internals.filters.clearFilter({ key: props.definition.key });
+  session.close();
+}
+function handleOperatorChange(op) {
+  if (filterUi.value.clearOnOperatorChange) {
+    internals.filters.clearFilter({ key: props.definition.key });
+  }
+  localValue.value = "";
+  if (filterUi.value.reopenOnOperatorChange) handleActivate(op);
+  else pendingOperator.value = op;
+}
+function handleValueUpdate(value) {
+  localValue.value = value == null ? "" : String(value);
+  if (filterUi.value.commitMode === "auto") {
+    internals.filters.setScalarFilterValue({
+      key: props.definition.key,
+      value: localValue.value.trim() || void 0,
+      operator: pendingOperator.value
+    });
+  }
+}
+</script>
+
+<template>
+  <UPopover
+    :open="session.isOpen.value"
+    :content="{ side: 'bottom', align: 'start', sideOffset: 8 }"
+    :ui="{
+  content: 'w-fit overflow-hidden p-0 shadow-none'
+}"
+    @update:open="session.handleOpenChange"
+  >
+    <slot
+      name="trigger"
+      :preview="preview"
+      :active="preview.active"
+      :open="session.isOpen.value"
+      :trigger-props="{
+  type: 'button',
+  'aria-haspopup': 'dialog',
+  'aria-expanded': session.isOpen.value
+}"
+    >
+      <TableFilterTrigger
+        :label="internals.filters.getFilterLabelText({ label: definition.label })"
+        :leading-icon="resolveFilterTriggerIcon(definition)"
+        :operator-label="operatorLabel"
+        :operator-items="operatorItems"
+        :preview-summary="preview.summary"
+        :active="preview.active"
+        @select-operator="handleOperatorChange"
+        @activate="handleActivate"
+        @clear="clearFilter"
+      />
+    </slot>
+
+    <template #content>
+      <div class="w-fit max-w-[calc(100vw-1rem)] bg-default">
+        <div class="border-b border-default p-2">
+          <UInput
+            :model-value="localValue"
+            :type="filterUi.inputType"
+            :icon="filterUi.leadingIcon"
+            :placeholder="filterUi.placeholder"
+            :autocomplete="filterUi.autocomplete"
+            :autofocus="filterUi.input.autofocus"
+            :highlight="filterUi.input.highlight"
+            :fixed="filterUi.input.fixed"
+            class="w-[min(13rem,calc(100vw-3rem))] max-w-full"
+            :ui="{ base: 'rounded-md' }"
+            @update:model-value="handleValueUpdate"
+            @keydown.enter.prevent="applyFilter"
+          />
+        </div>
+
+        <div
+          v-if="filterUi.commitMode === 'manual'"
+          class="flex items-center justify-between border-t border-default p-2"
+        >
+          <UButton
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            :label="filterUi.actions.clear"
+            @click="clearFilter"
+          />
+          <UButton
+            color="neutral"
+            variant="subtle"
+            size="sm"
+            :label="filterUi.actions.apply"
+            @click="applyFilter"
+          />
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>

package/dist/runtime/table/components/filters/tags/TextFilterTag.vue.d.ts

@@ -0,0 +1,35 @@
+import type { TableTextFilterDefinition } from '../../../types/index.js';
+type __VLS_Props = {
+    definition: TableTextFilterDefinition;
+    dynamic?: boolean;
+    session?: boolean;
+    activationToken?: number;
+};
+declare var __VLS_10: {
+    preview: import("../../../utils/index.js").FilterPreviewResult;
+    active: boolean;
+    open: boolean;
+    triggerProps: {
+        type: string;
+        'aria-haspopup': string;
+        'aria-expanded': boolean;
+    };
+};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    dismiss: () => any;
+    sessionClosed: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDismiss?: (() => any) | undefined;
+    onSessionClosed?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/table/components/filters/tags/registry.d.ts

@@ -0,0 +1,3 @@
+import type { Component } from 'vue';
+import type { TableUiFilterDefinition } from '../../../types/index.js';
+export declare function resolveFilterTagComponent(definition: TableUiFilterDefinition): Component;

package/dist/runtime/table/components/filters/tags/registry.js

@@ -0,0 +1,15 @@
+import BooleanFilterTag from "./BooleanFilterTag.vue";
+import DateFilterTag from "./DateFilterTag.vue";
+import NumberFilterTag from "./NumberFilterTag.vue";
+import OptionFilterTag from "./OptionFilterTag.vue";
+import TextFilterTag from "./TextFilterTag.vue";
+const FILTER_TAG_COMPONENTS = {
+  option: OptionFilterTag,
+  boolean: BooleanFilterTag,
+  date: DateFilterTag,
+  number: NumberFilterTag,
+  text: TextFilterTag
+};
+export function resolveFilterTagComponent(definition) {
+  return FILTER_TAG_COMPONENTS[definition.kind];
+}

package/dist/runtime/table/components/grid/GridCard.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    rowIndex?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/grid/GridCard.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { computed, defineComponent } from "vue";
+import { useGridRow, useProvideGridRow } from "../../composables/use-grid-row";
+import { useTableInternals } from "../../composables/use-table-internals";
+import TableRowScopeProvider from "../actions/TableRowScopeProvider.vue";
+const props = defineProps({
+  rowIndex: { type: Number, required: false }
+});
+const internals = useTableInternals();
+const injectedRowIndex = props.rowIndex === void 0 ? useGridRow() : null;
+const localRowIndex = computed(() => props.rowIndex ?? injectedRowIndex ?? 0);
+const rowData = computed(() => internals.grid.rows.value[localRowIndex.value]);
+useProvideGridRow(localRowIndex.value);
+const rowParams = computed(
+  () => createGridRenderParams({
+    row: rowData.value ?? {},
+    index: localRowIndex.value,
+    context: toPlainRecord(internals.queryContent.contextData.value),
+    pageContext: toPlainRecord(internals.queryContent.pageContextData.value),
+    tableApi: internals.tableApi,
+    layout: "grid"
+  })
+);
+const RenderGridCard = defineComponent({
+  name: "RenderGridCard",
+  setup() {
+    return () => internals.schema.value.grid?.renderItem?.(rowParams.value) ?? null;
+  }
+});
+function createGridRenderParams(params) {
+  return params;
+}
+function toPlainRecord(value) {
+  return Object.fromEntries(Object.entries(value));
+}
+</script>
+
+<template>
+  <div class="min-w-0 h-full">
+    <TableRowScopeProvider :scope="rowParams">
+      <RenderGridCard />
+    </TableRowScopeProvider>
+  </div>
+</template>

package/dist/runtime/table/components/grid/GridCard.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    rowIndex?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/grid/GridRenderer.d.vue.ts

@@ -0,0 +1,20 @@
+import type { DataListGridUi } from '../../types/index.js';
+type __VLS_Props = {
+    height?: string;
+    ui?: DataListGridUi;
+};
+declare var __VLS_36: {}, __VLS_102: {};
+type __VLS_Slots = {} & {
+    empty?: (props: typeof __VLS_36) => any;
+} & {
+    empty?: (props: typeof __VLS_102) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};