nuxt-ui-tools 0.1.2 → 1.0.0

package/dist/runtime/table/components/filters/panel/BooleanFilterPanelField.vue

@@ -1,108 +0,0 @@
-<script setup>
-import UIcon from "@nuxt/ui/components/Icon.vue";
-import URadioGroup from "@nuxt/ui/components/RadioGroup.vue";
-import USkeleton from "@nuxt/ui/components/Skeleton.vue";
-import { computed, ref } from "vue";
-import { useTableFilterOptions } from "../../../composables/use-table-filter-options";
-import { useTableInternals } from "../../../composables/use-table-internals";
-import { resolveBooleanFilterUi } from "../../../utils";
-import FilterPanelFieldShell from "./FilterPanelFieldShell.vue";
-const props = defineProps({
-  definition: { type: Object, required: true }
-});
-const internals = useTableInternals();
-const searchQuery = ref("");
-const optionSource = useTableFilterOptions({
-  definition: props.definition,
-  searchQuery,
-  active: internals.filterPresentation.panelOpen,
-  filters: internals.filters,
-  queryContent: internals.queryContent,
-  schema: internals.schema
-});
-const filterUi = computed(() => resolveBooleanFilterUi(props.definition, "is"));
-const isActive = computed(
-  () => internals.filterPresentation.getPanelDraftFilterState({ key: props.definition.key }) != null
-);
-const entries = computed(
-  () => optionSource.filteredEntries.value.filter((entry) => typeof entry.value === "boolean").map((entry) => ({
-    ...entry,
-    label: entry.value === true ? filterUi.value.labels.true : filterUi.value.labels.false,
-    icon: entry.value === true ? filterUi.value.icons.true : filterUi.value.icons.false
-  }))
-);
-const radioItems = computed(
-  () => entries.value.map((entry) => ({
-    label: entry.label,
-    value: String(entry.value),
-    count: entry.count,
-    icon: entry.icon
-  }))
-);
-const radioValue = computed({
-  get: () => {
-    const value = internals.filterPresentation.getPanelDraftFilterState({
-      key: props.definition.key
-    })?.value;
-    return value === true || value === false ? String(value) : void 0;
-  },
-  set: (value) => {
-    if (value === "true") {
-      internals.filterPresentation.setPanelScalarFilterValue({
-        key: props.definition.key,
-        value: true
-      });
-      return;
-    }
-    if (value === "false") {
-      internals.filterPresentation.setPanelScalarFilterValue({
-        key: props.definition.key,
-        value: false
-      });
-      return;
-    }
-    internals.filterPresentation.clearPanelFilter({ key: props.definition.key });
-  }
-});
-</script>
-
-<template>
-  <FilterPanelFieldShell
-    :label="internals.filters.getFilterLabelText({ label: definition.label })"
-    :active="isActive"
-  >
-    <URadioGroup
-      v-model="radioValue"
-      :items="radioItems"
-      color="neutral"
-      variant="list"
-      :ui="{
-  root: 'w-full',
-  fieldset: 'grid gap-0.5',
-  item: 'flex items-center rounded-md transition-colors hover:bg-elevated data-[state=checked]:bg-elevated',
-  container: 'self-center pl-3',
-  base: 'cursor-pointer',
-  wrapper: 'min-w-0 flex-1 py-2 pr-3',
-  label: 'w-full cursor-pointer text-sm text-default'
-}"
-    >
-      <template #label="{ item }">
-        <div class="flex min-w-0 items-center gap-3">
-          <UIcon
-            v-if="typeof item.icon === 'string'"
-            :name="item.icon"
-            class="size-4 shrink-0 text-muted"
-          />
-
-          <span class="min-w-0 flex-1 truncate">
-            {{ item.label }}
-          </span>
-          <USkeleton v-if="optionSource.isCountLoading.value" class="ml-3 h-3.5 w-6 shrink-0" />
-          <span v-else-if="item.count != null" class="ml-3 shrink-0 text-muted">
-            {{ item.count }}
-          </span>
-        </div>
-      </template>
-    </URadioGroup>
-  </FilterPanelFieldShell>
-</template>

package/dist/runtime/table/components/filters/panel/FilterPanel.vue

@@ -1,132 +0,0 @@
-<script setup>
-import UBadge from "@nuxt/ui/components/Badge.vue";
-import UButton from "@nuxt/ui/components/Button.vue";
-import USlideover from "@nuxt/ui/components/Slideover.vue";
-import { computed } from "vue";
-import { useUiToolsLocale } from "#ui-tools/i18n";
-import { useDataListUi } from "../../../composables/use-data-list-ui";
-import { useTableInternals } from "../../../composables/use-table-internals";
-import { mergeDataListUiClass } from "../../../utils";
-import { resolveFilterPanelComponent } from "./registry";
-const props = defineProps({
-  size: { type: String, required: false },
-  ui: { type: Object, required: false }
-});
-const internals = useTableInternals();
-const dataListUi = useDataListUi();
-const { t } = useUiToolsLocale();
-const resolvedUi = computed(() => ({
-  ...dataListUi.ui.value.filterPanel?.ui,
-  ...props.ui
-}));
-defineSlots();
-function toggle() {
-  if (internals.filterPresentation.panelOpen.value) internals.filterPresentation.closePanel();
-  else internals.filterPresentation.openPanel();
-}
-</script>
-
-<template>
-  <USlideover
-    :open="internals.filterPresentation.panelOpen.value"
-    side="right"
-    inset
-    :overlay="true"
-    :title="t('table.filters.panel.trigger')"
-    :ui="{
-  overlay: resolvedUi.overlay,
-  content: resolvedUi.content,
-  header: resolvedUi.header,
-  wrapper: resolvedUi.wrapper,
-  body: resolvedUi.body,
-  footer: resolvedUi.footer,
-  title: resolvedUi.title,
-  description: resolvedUi.description,
-  close: resolvedUi.close
-}"
-    @update:open="
-  $event ? internals.filterPresentation.openPanel() : internals.filterPresentation.closePanel()
-"
-  >
-    <slot
-      name="trigger"
-      :open="internals.filterPresentation.openPanel"
-      :close="internals.filterPresentation.closePanel"
-      :toggle="toggle"
-      :open-state="internals.filterPresentation.panelOpen.value"
-      :trigger-props="{
-  type: 'button',
-  'aria-expanded': internals.filterPresentation.panelOpen.value
-}"
-    >
-      <UButton
-        color="neutral"
-        variant="outline"
-        :size="props.size ?? dataListUi.ui.value.filterPanel?.size ?? dataListUi.controlSize.value"
-        icon="i-lucide-funnel"
-        :ui="{
-  base: mergeDataListUiClass('shrink-0', void 0, resolvedUi.trigger)
-}"
-      >
-        <span
-          :class="
-  mergeDataListUiClass('flex items-center gap-2', void 0, resolvedUi.triggerContent)
-"
-        >
-          <span>{{ t("table.filters.panel.trigger") }}</span>
-          <UBadge
-            v-if="internals.filterPresentation.activePanelCount.value > 0"
-            color="neutral"
-            variant="subtle"
-            size="sm"
-            :label="String(internals.filterPresentation.activePanelCount.value)"
-            :class="resolvedUi.count"
-          />
-        </span>
-      </UButton>
-    </slot>
-
-    <template #body>
-      <div class="min-h-0 overflow-y-auto">
-        <div :class="mergeDataListUiClass('grid gap-5', void 0, resolvedUi.fields)">
-          <component
-            :is="resolveFilterPanelComponent(definition)"
-            v-for="definition in internals.filterPresentation.panelDefinitions.value"
-            :key="definition.key"
-            :definition="definition"
-          />
-        </div>
-      </div>
-    </template>
-
-    <template #footer>
-      <div
-        :class="
-  mergeDataListUiClass(
-    'flex w-full items-center justify-between gap-3',
-    void 0,
-    resolvedUi.footerActions
-  )
-"
-      >
-        <UButton
-          color="neutral"
-          variant="ghost"
-          size="sm"
-          :label="t('table.filters.panel.clearAll')"
-          :ui="{ base: resolvedUi.clear }"
-          @click="internals.filterPresentation.clearPanelDraft()"
-        />
-
-        <UButton
-          color="neutral"
-          variant="subtle"
-          size="sm"
-          :label="t('table.filters.panel.apply')"
-          :ui="{ base: resolvedUi.apply }"
-          @click="internals.filterPresentation.applyPanelDraft()"
-        />
-      </div>
-    </template>
-  </USlideover>
-</template>

package/dist/runtime/table/components/filters/panel/FilterPanelFieldShell.vue

@@ -1,25 +0,0 @@
-<script setup>
-defineProps({
-  label: { type: String, required: true },
-  active: { type: Boolean, required: false }
-});
-defineSlots();
-</script>
-
-<template>
-  <section class="relative grid gap-1.5">
-    <div class="min-w-0 pr-24">
-      <div class="min-w-0">
-        <h3 class="truncate text-sm font-medium text-highlighted">
-          {{ label }}
-        </h3>
-      </div>
-    </div>
-
-    <div class="absolute right-0 top-0 flex shrink-0 items-center gap-2">
-      <slot name="actions" />
-    </div>
-
-    <slot />
-  </section>
-</template>

package/dist/runtime/table/components/filters/panel/FilterPanelInputTrigger.vue

@@ -1,22 +0,0 @@
-<script setup>
-import UButton from "@nuxt/ui/components/Button.vue";
-import UIcon from "@nuxt/ui/components/Icon.vue";
-defineProps({
-  value: { type: String, required: false },
-  placeholder: { type: String, required: true },
-  icon: { type: String, required: false }
-});
-</script>
-
-<template>
-  <UButton color="neutral" variant="outline" size="md" class="w-full justify-between text-left">
-    <span class="flex min-w-0 items-center gap-3">
-      <UIcon v-if="icon" :name="icon" class="size-4 shrink-0 text-muted" />
-      <span class="min-w-0 truncate" :class="value ? 'text-default' : 'text-muted'">
-        {{ value || placeholder }}
-      </span>
-    </span>
-
-    <UIcon name="i-lucide-chevron-down" class="size-4 shrink-0 text-muted" />
-  </UButton>
-</template>

package/dist/runtime/table/components/filters/shared/FilterMatchModeButton.vue

@@ -1,58 +0,0 @@
-<script setup>
-import UButton from "@nuxt/ui/components/Button.vue";
-import UDropdownMenu from "@nuxt/ui/components/DropdownMenu.vue";
-import { computed } from "vue";
-import { useDataListUi } from "../../../composables/use-data-list-ui";
-import { mergeDataListUiClass } from "../../../utils";
-const props = defineProps({
-  label: { type: String, required: true },
-  items: { type: Array, required: false, default: () => [] },
-  variant: { type: String, required: false, default: "default" },
-  size: { type: String, required: false },
-  ui: { type: Object, required: false }
-});
-const dataListUi = useDataListUi();
-const inheritedPart = computed(
-  () => props.variant === "compact" ? dataListUi.ui.value.filterPanel : dataListUi.ui.value.filterTags
-);
-const resolvedSize = computed(
-  () => props.size ?? inheritedPart.value?.size ?? dataListUi.controlSize.value
-);
-const resolvedUi = computed(() => ({ ...inheritedPart.value?.ui, ...props.ui }));
-const emit = defineEmits(["select"]);
-</script>
-
-<template>
-  <UDropdownMenu
-    :size="resolvedSize"
-    :items="[
-  items.map((item) => ({
-    label: item.label,
-    onSelect: () => emit('select', item.value)
-  }))
-]"
-    :content="{ side: 'bottom', align: 'end', sideOffset: 6 }"
-    :ui="{
-  content: mergeDataListUiClass('w-fit p-1', void 0, resolvedUi.operatorContent),
-  item: resolvedUi.operatorItem,
-  itemLabel: resolvedUi.operatorLabel
-}"
-  >
-    <UButton
-      color="neutral"
-      :variant="variant === 'compact' ? 'ghost' : 'outline'"
-      :size="resolvedSize"
-      :label="label"
-      trailing-icon="i-lucide-chevron-down"
-      :ui="{
-  base: mergeDataListUiClass(
-    variant === 'compact' ? 'px-2.5' : void 0,
-    void 0,
-    resolvedUi.operatorTrigger
-  )
-}"
-      @pointerdown.stop
-      @click.stop
-    />
-  </UDropdownMenu>
-</template>

package/dist/runtime/table/components/filters/shared/FilterMatchModePanel.vue

@@ -1,47 +0,0 @@
-<script setup>
-import UIcon from "@nuxt/ui/components/Icon.vue";
-import { mergeDataListUiClass, resolveFilterEditorSizeClasses } from "../../../utils";
-const props = defineProps({
-  items: { type: Array, required: true },
-  selected: { type: String, required: false },
-  size: { type: String, required: false },
-  ui: { type: Object, required: false }
-});
-const emit = defineEmits(["select"]);
-const sizeClasses = resolveFilterEditorSizeClasses(props.size);
-</script>
-
-<template>
-  <div :class="mergeDataListUiClass(sizeClasses.scrollArea, void 0, ui?.list)">
-    <button
-      v-for="item in items"
-      :key="item.value"
-      type="button"
-      :class="
-  mergeDataListUiClass(
-    `flex w-full items-center rounded-md text-left transition-colors hover:bg-elevated/70 ${sizeClasses.option}`,
-    void 0,
-    ui?.operatorItem
-  )
-"
-      @click="emit('select', item.value)"
-    >
-      <span
-        :class="
-  mergeDataListUiClass(
-    `min-w-0 flex-1 truncate text-default ${sizeClasses.optionLabel}`,
-    void 0,
-    ui?.operatorLabel
-  )
-"
-      >
-        {{ item.label }}
-      </span>
-      <UIcon
-        v-if="item.value === selected"
-        name="i-lucide-check"
-        :class="`${sizeClasses.optionIcon} shrink-0 text-muted`"
-      />
-    </button>
-  </div>
-</template>

package/dist/runtime/table/components/filters/shared/FilterOptionMultipleList.vue

@@ -1,49 +0,0 @@
-<script setup>
-import { computed } from "vue";
-import { useDataListUi } from "../../../composables/use-data-list-ui";
-import { mergeDataListUiClass } from "../../../utils";
-import FilterOptionRow from "./FilterOptionRow.vue";
-const props = defineProps({
-  sections: { type: Array, required: true },
-  showCounts: { type: Boolean, required: true },
-  countLoading: { type: Boolean, required: true },
-  selectedIcon: { type: String, required: false },
-  truncate: { type: Boolean, required: false },
-  size: { type: String, required: false },
-  ui: { type: Object, required: false }
-});
-const emit = defineEmits(["select"]);
-const dataListUi = useDataListUi();
-const ui = computed(() => props.ui ?? dataListUi.ui.value.filterTags?.ui);
-</script>
-
-<template>
-  <div :class="mergeDataListUiClass('grid gap-0.5', void 0, ui?.list)">
-    <template v-for="section in props.sections" :key="section.key">
-      <div
-        v-if="section.dividerBefore && section.entries.length"
-        :class="mergeDataListUiClass('my-1 border-t border-default', void 0, ui?.listDivider)"
-      />
-
-      <button
-        v-for="(entry, index) in section.entries"
-        :key="entry.value == null ? entry.label : String(entry.value)"
-        type="button"
-        class="block w-full"
-        @click="emit('select', { event: $event, entry, index, sectionKey: section.key })"
-      >
-        <FilterOptionRow
-          :label="entry.label"
-          :count="props.showCounts ? entry.count : void 0"
-          :count-loading="props.showCounts && props.countLoading"
-          :selected="entry.selected ?? false"
-          :leading-icon="entry.icon"
-          :selected-icon="props.selectedIcon"
-          :truncate="props.truncate"
-          :size="props.size"
-          :ui="props.ui"
-        />
-      </button>
-    </template>
-  </div>
-</template>

package/dist/runtime/table/components/filters/shared/FilterOptionRow.vue

@@ -1,75 +0,0 @@
-<script setup>
-import UCheckbox from "@nuxt/ui/components/Checkbox.vue";
-import UIcon from "@nuxt/ui/components/Icon.vue";
-import USkeleton from "@nuxt/ui/components/Skeleton.vue";
-import { computed } from "vue";
-import { useDataListUi } from "../../../composables/use-data-list-ui";
-import { mergeDataListUiClass, resolveFilterEditorSizeClasses } from "../../../utils";
-const props = defineProps({
-  label: { type: String, required: true },
-  count: { type: Number, required: false },
-  countLoading: { type: Boolean, required: false },
-  selected: { type: Boolean, required: true },
-  leadingIcon: { type: String, required: false },
-  selectedIcon: { type: String, required: false },
-  truncate: { type: Boolean, required: false },
-  size: { type: String, required: false },
-  ui: { type: Object, required: false }
-});
-const dataListUi = useDataListUi();
-const size = computed(
-  () => props.size ?? dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value
-);
-const ui = computed(() => props.ui ?? dataListUi.ui.value.filterTags?.ui);
-const sizeClasses = computed(() => resolveFilterEditorSizeClasses(size.value));
-</script>
-
-<template>
-  <div
-    :class="
-  mergeDataListUiClass(
-    `flex w-full items-center rounded-md text-left transition-colors hover:bg-elevated ${sizeClasses.option} ${selected ? 'bg-elevated text-highlighted' : 'text-default'}`,
-    void 0,
-    ui?.option
-  )
-"
-  >
-    <UCheckbox
-      :model-value="selected"
-      color="neutral"
-      :size="size"
-      tabindex="-1"
-      :icon="selectedIcon"
-      :ui="{ base: ui?.optionCheckbox }"
-    />
-
-    <UIcon
-      v-if="leadingIcon"
-      :name="leadingIcon"
-      :class="
-  mergeDataListUiClass(
-    `${sizeClasses.optionIcon} shrink-0 text-muted`,
-    void 0,
-    ui?.optionIcon
-  )
-"
-    />
-
-    <span
-      :class="
-  mergeDataListUiClass(
-    `min-w-0 flex-1 ${sizeClasses.optionLabel} ${truncate ?? true ? 'truncate' : ''}`,
-    void 0,
-    ui?.optionLabel
-  )
-"
-      >{{ label }}</span
-    >
-    <USkeleton v-if="countLoading" class="ml-3 h-3.5 w-6 shrink-0" />
-    <span
-      v-else-if="count != null"
-      :class="mergeDataListUiClass('ml-3 shrink-0 text-muted', void 0, ui?.optionCount)"
-      >{{ count }}</span
-    >
-  </div>
-</template>