nuxt-ui-tools 0.1.3 → 1.0.1

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

@@ -1,256 +0,0 @@
-<script setup>
-import UButton from "@nuxt/ui/components/Button.vue";
-import UIcon from "@nuxt/ui/components/Icon.vue";
-import UPopover from "@nuxt/ui/components/Popover.vue";
-import { computed, nextTick, ref } 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,
-  resolveFilterEditorSizeClasses,
-  resolveFilterTriggerIcon
-} from "../../../utils";
-import { resolveFilterTagComponent } from "../tags/registry";
-import FilterMatchModePanel from "./FilterMatchModePanel.vue";
-import FilterSearchablePanel from "./FilterSearchablePanel.vue";
-import FilterStageTransition from "./FilterStageTransition.vue";
-const props = defineProps({
-  definitions: { type: Array, required: true },
-  sessionDefinition: { type: null, required: false },
-  getLabel: { type: Function, required: true },
-  size: { type: String, required: false },
-  ui: { type: Object, required: false }
-});
-const emit = defineEmits(["select", "release"]);
-const { t } = useUiToolsLocale();
-const internals = useTableInternals();
-const dataListUi = useDataListUi();
-const isOpen = ref(false);
-const searchQuery = ref("");
-const selectedKey = ref(null);
-const pendingOperator = ref();
-const stage = ref("picker");
-const stageDirection = ref("forward");
-const stageTransitioning = ref(false);
-let releaseAfterCommit = false;
-const size = computed(
-  () => props.size ?? dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value
-);
-const sizeClasses = computed(() => resolveFilterEditorSizeClasses(size.value));
-const selectedDefinition = computed(() => {
-  if (selectedKey.value == null) return void 0;
-  if (props.sessionDefinition?.key === selectedKey.value) return props.sessionDefinition;
-  return props.definitions.find((definition) => definition.key === selectedKey.value);
-});
-const operatorItems = computed(
-  () => selectedKey.value == null ? [] : internals.filters.getFilterOperatorOptions({ key: selectedKey.value })
-);
-const filteredDefinitions = computed(() => {
-  const search = searchQuery.value.trim().toLowerCase();
-  if (!search) return props.definitions;
-  return props.definitions.filter(
-    (definition) => props.getLabel(definition).toLowerCase().includes(search)
-  );
-});
-async function handleSelect(key) {
-  selectedKey.value = key;
-  searchQuery.value = "";
-  const items = internals.filters.getFilterOperatorOptions({ key });
-  if (items.length > 1) {
-    pendingOperator.value = internals.filters.getFilterOperator({ key });
-    stageDirection.value = "forward";
-    stageTransitioning.value = true;
-    stage.value = "match-mode";
-    return;
-  }
-  const defaultOperator = items[0]?.value;
-  if (!defaultOperator) return;
-  await openEditor(defaultOperator);
-}
-async function openEditor(operator) {
-  const key = selectedKey.value;
-  if (!key) return;
-  pendingOperator.value = operator;
-  emit("select", key);
-  await nextTick();
-  stageDirection.value = "forward";
-  stageTransitioning.value = true;
-  stage.value = "editor";
-}
-function handleFocusOutside(event) {
-  if (stageTransitioning.value) event.preventDefault();
-}
-function handleOpenChange(nextOpen) {
-  isOpen.value = nextOpen;
-  if (!nextOpen && !releaseAfterCommit) releaseSession();
-}
-function handleSessionClosed() {
-  isOpen.value = false;
-  releaseAfterCommit = true;
-  queueMicrotask(() => {
-    releaseSession();
-    releaseAfterCommit = false;
-  });
-}
-function releaseSession() {
-  const key = selectedKey.value;
-  selectedKey.value = null;
-  pendingOperator.value = void 0;
-  searchQuery.value = "";
-  stage.value = "picker";
-  stageDirection.value = "backward";
-  if (key) emit("release", key);
-}
-function open() {
-  isOpen.value = true;
-}
-function close() {
-  isOpen.value = false;
-  releaseSession();
-}
-function toggle() {
-  if (isOpen.value) close();
-  else open();
-}
-</script>
-
-<template>
-  <UPopover
-    :open="isOpen"
-    mode="click"
-    :content="{
-  side: 'bottom',
-  align: 'start',
-  sideOffset: 8,
-  onFocusOutside: handleFocusOutside
-}"
-    :ui="{
-  content: mergeDataListUiClass(
-    'w-fit max-w-[calc(100vw-1rem)] overflow-hidden p-0',
-    void 0,
-    ui?.popoverContent
-  )
-}"
-    @update:open="handleOpenChange"
-  >
-    <slot
-      v-if="$slots.trigger"
-      name="trigger"
-      :open="open"
-      :close="close"
-      :toggle="toggle"
-      :open-state="isOpen"
-      :stage="stage"
-      :definition="selectedDefinition"
-      :trigger-props="{
-  type: 'button',
-  'aria-expanded': isOpen
-}"
-    />
-    <UButton
-      v-else
-      color="neutral"
-      variant="outline"
-      :size="size"
-      :icon="selectedDefinition ? resolveFilterTriggerIcon(selectedDefinition) : 'i-lucide-plus'"
-      :label="selectedDefinition ? getLabel(selectedDefinition) : t('table.controls.addFilter')"
-      :ui="{
-  base: mergeDataListUiClass(
-    `shrink-0 ${selectedDefinition ? '' : 'border-dashed'}`,
-    void 0,
-    ui?.trigger
-  )
-}"
-    />
-
-    <template #content>
-      <FilterStageTransition
-        :stage-key="`${stage}:${selectedKey ?? ''}:${pendingOperator ?? ''}`"
-        :direction="stageDirection"
-        @settled="stageTransitioning = false"
-      >
-        <div
-          v-if="stage === 'picker'"
-          :class="mergeDataListUiClass(sizeClasses.editor, void 0, ui?.panel)"
-        >
-          <FilterSearchablePanel
-            v-model:search-query="searchQuery"
-            searchable
-            autofocus
-            :search-placeholder="t('table.controls.searchFilters')"
-            :show-empty="!filteredDefinitions.length"
-            :empty-label="t('table.controls.noMatchingFilters')"
-            max-height-class="max-h-72"
-            :size="size"
-            :ui="ui"
-          >
-            <button
-              v-for="definition in filteredDefinitions"
-              :key="definition.key"
-              type="button"
-              :class="
-  mergeDataListUiClass(
-    `flex min-w-0 items-center rounded-md text-left transition-colors hover:bg-elevated/70 ${sizeClasses.option}`,
-    void 0,
-    ui?.option
-  )
-"
-              @click="handleSelect(definition.key)"
-            >
-              <UIcon
-                :name="resolveFilterTriggerIcon(definition)"
-                :class="
-  mergeDataListUiClass(
-    `${sizeClasses.optionIcon} shrink-0 text-muted`,
-    void 0,
-    ui?.optionIcon
-  )
-"
-              />
-              <span
-                :class="
-  mergeDataListUiClass(
-    `min-w-0 flex-1 truncate text-default ${sizeClasses.optionLabel}`,
-    void 0,
-    ui?.optionLabel
-  )
-"
-              >
-                {{ getLabel(definition) }}
-              </span>
-              <span :class="mergeDataListUiClass('text-muted', void 0, ui?.optionTrailingIcon)">
-                <UIcon name="i-lucide-arrow-right" class="size-4" />
-              </span>
-            </button>
-          </FilterSearchablePanel>
-        </div>
-
-        <div
-          v-else-if="stage === 'match-mode'"
-          :class="mergeDataListUiClass(sizeClasses.editor, void 0, ui?.panel)"
-        >
-          <FilterMatchModePanel
-            :items="operatorItems"
-            :selected="pendingOperator"
-            :size="size"
-            :ui="ui"
-            @select="openEditor"
-          />
-        </div>
-
-        <component
-          :is="resolveFilterTagComponent(sessionDefinition)"
-          v-else-if="stage === 'editor' && sessionDefinition"
-          :definition="sessionDefinition"
-          dynamic
-          session
-          embedded
-          :initial-operator="pendingOperator"
-          @dismiss="handleSessionClosed"
-          @session-closed="handleSessionClosed"
-        />
-      </FilterStageTransition>
-    </template>
-  </UPopover>
-</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>

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

@@ -1,180 +0,0 @@
-<script setup>
-import UCheckbox from "@nuxt/ui/components/Checkbox.vue";
-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 } from "vue";
-import { useDataListUi } from "../../../composables/use-data-list-ui";
-import { mergeDataListUiClass, resolveFilterEditorSizeClasses } from "../../../utils";
-const props = defineProps({
-  entries: { type: Array, required: true },
-  items: { type: Array, required: true },
-  multiple: { type: Boolean, required: true },
-  countLoading: { type: Boolean, required: true },
-  selectedIcon: { type: String, required: false },
-  size: { type: String, required: false },
-  ui: { type: Object, required: false }
-});
-const emit = defineEmits(["toggleEntry", "toggleExpanded"]);
-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));
-const modelValue = defineModel({ type: null, ...{
-  default: void 0
-} });
-function getTreeIndentStyle(depth) {
-  return {
-    paddingInlineStart: `${depth * 10}px`
-  };
-}
-</script>
-
-<template>
-  <div v-if="multiple" :class="mergeDataListUiClass('grid gap-0.5', void 0, ui?.list)">
-    <button
-      v-for="entry in entries"
-      :key="entry.id"
-      type="button"
-      class="block w-full"
-      @click="emit('toggleEntry', entry.id)"
-    >
-      <div
-        :class="
-  mergeDataListUiClass(
-    `flex items-center rounded-md text-left transition-colors hover:bg-elevated ${sizeClasses.option} ${entry.selected ? 'bg-elevated text-highlighted' : 'text-default'}`,
-    void 0,
-    ui?.option
-  )
-"
-      >
-        <div
-          class="flex min-w-0 flex-1 items-center gap-2"
-          :style="getTreeIndentStyle(entry.depth)"
-        >
-          <button
-            v-if="entry.expandable"
-            type="button"
-            :class="
-  mergeDataListUiClass(
-    `flex size-4 shrink-0 items-center justify-center text-muted transition-transform ${entry.expanded ? 'rotate-90' : ''}`,
-    void 0,
-    ui?.optionExpander
-  )
-"
-            @click.stop="emit('toggleExpanded', entry.id)"
-          >
-            <UIcon name="i-lucide-chevron-right" class="size-4" />
-          </button>
-          <span
-            v-else
-            :class="mergeDataListUiClass('size-4 shrink-0', void 0, ui?.optionSpacer)"
-          />
-
-          <UCheckbox
-            v-if="entry.selectable || entry.branchSelectable"
-            :model-value="entry.indeterminate ? 'indeterminate' : entry.selected"
-            color="neutral"
-            :size="size"
-            tabindex="-1"
-            :icon="selectedIcon"
-            :ui="{ base: ui?.optionCheckbox }"
-          />
-          <span
-            v-else
-            :class="mergeDataListUiClass('size-5 shrink-0', void 0, ui?.optionSpacer)"
-          />
-
-          <UIcon
-            v-if="entry.icon"
-            :name="entry.icon"
-            :class="
-  mergeDataListUiClass(
-    `${sizeClasses.optionIcon} shrink-0 text-muted`,
-    void 0,
-    ui?.optionIcon
-  )
-"
-          />
-
-          <span
-            :class="
-  mergeDataListUiClass(
-    `min-w-0 flex-1 ${sizeClasses.optionLabel} ${entry.truncate ? 'truncate' : ''}`,
-    void 0,
-    ui?.optionLabel
-  )
-"
-          >
-            {{ entry.label }}
-          </span>
-        </div>
-
-        <USkeleton v-if="countLoading" class="ml-3 h-3.5 w-6 shrink-0" />
-        <span
-          v-else-if="entry.count != null"
-          :class="mergeDataListUiClass('ml-3 shrink-0 text-muted', void 0, ui?.optionCount)"
-        >
-          {{ entry.count }}
-        </span>
-      </div>
-    </button>
-  </div>
-
-  <URadioGroup
-    v-else-if="items.length"
-    v-model="modelValue"
-    :items="items"
-    color="neutral"
-    variant="list"
-    :size="size"
-    :ui="{
-  root: 'w-full',
-  fieldset: mergeDataListUiClass('grid gap-0.5', void 0, ui?.list),
-  item: mergeDataListUiClass(
-    `flex items-center rounded-md transition-colors hover:bg-elevated data-[state=checked]:bg-elevated ${sizeClasses.option}`,
-    void 0,
-    ui?.option
-  ),
-  container: 'self-center',
-  base: 'cursor-pointer',
-  wrapper: 'min-w-0 flex-1',
-  label: mergeDataListUiClass(
-    `w-full cursor-pointer text-default ${sizeClasses.optionLabel}`,
-    void 0,
-    ui?.optionLabel
-  )
-}"
-  >
-    <template #label="{ item }">
-      <div class="flex min-w-0 items-center gap-3" :style="getTreeIndentStyle(item.depth)">
-        <button
-          v-if="item.expandable"
-          type="button"
-          class="flex size-4 shrink-0 items-center justify-center text-muted transition-transform"
-          :class="item.expanded ? 'rotate-90' : ''"
-          @click.stop.prevent="emit('toggleExpanded', item.id)"
-        >
-          <UIcon name="i-lucide-chevron-right" class="size-4" />
-        </button>
-        <span v-else class="size-4 shrink-0" />
-
-        <UIcon
-          v-if="typeof item.icon === 'string'"
-          :name="item.icon"
-          class="size-4 shrink-0 text-muted"
-        />
-
-        <span class="min-w-0 flex-1" :class="item.truncate ? 'truncate' : ''">
-          {{ item.label }}
-        </span>
-        <USkeleton v-if="countLoading" 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>
-</template>