nuxt-ui-tools 0.1.3 → 1.0.0

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>

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

@@ -1,139 +0,0 @@
-<script setup>
-import UBadge from "@nuxt/ui/components/Badge.vue";
-import UButton from "@nuxt/ui/components/Button.vue";
-import UFieldGroup from "@nuxt/ui/components/FieldGroup.vue";
-import UIcon from "@nuxt/ui/components/Icon.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 },
-  leadingIcon: { type: String, required: true },
-  operator: { type: String, required: true },
-  operatorLabel: { type: String, required: true },
-  operatorItems: { type: Array, required: true },
-  previewTags: { type: Array, required: false },
-  previewSummary: { type: String, required: false },
-  active: { type: Boolean, required: false }
-});
-const emit = defineEmits(["activate", "requestMatchMode", "clear"]);
-const showMatchMode = computed(() => props.operatorItems.length > 1);
-const showOperatorPickerFirst = computed(() => !props.active && showMatchMode.value);
-const dataListUi = useDataListUi();
-const size = computed(() => dataListUi.ui.value.filterTags?.size ?? dataListUi.controlSize.value);
-const ui = computed(() => dataListUi.ui.value.filterTags?.ui);
-</script>
-
-<template>
-  <div
-    :class="mergeDataListUiClass('inline-flex min-w-0 max-w-full align-top', void 0, ui?.root)"
-  >
-    <template v-if="showOperatorPickerFirst">
-      <UButton
-        color="neutral"
-        :variant="props.active ? 'subtle' : 'outline'"
-        :size="size"
-        :ui="{
-  base: mergeDataListUiClass('min-w-0 shrink-0', void 0, ui?.trigger)
-}"
-        @click.stop="emit('requestMatchMode')"
-      >
-        <span
-          :class="mergeDataListUiClass('flex min-w-0 items-center gap-2', void 0, ui?.label)"
-        >
-          <UIcon :name="props.leadingIcon" class="size-4 shrink-0 text-muted" />
-          <span class="truncate">{{ props.label }}</span>
-        </span>
-      </UButton>
-    </template>
-
-    <UButton
-      v-else-if="!props.active"
-      color="neutral"
-      variant="outline"
-      :size="size"
-      :ui="{
-  base: mergeDataListUiClass('min-w-0 shrink-0', void 0, ui?.trigger)
-}"
-      @click.stop="emit('activate', props.operator)"
-    >
-      <span :class="mergeDataListUiClass('flex min-w-0 items-center gap-2', void 0, ui?.label)">
-        <UIcon :name="props.leadingIcon" class="size-4 shrink-0 text-muted" />
-        <span class="truncate">{{ props.label }}</span>
-      </span>
-    </UButton>
-
-    <UFieldGroup v-else :size="size" class="min-w-0 max-w-full">
-      <UButton
-        color="neutral"
-        variant="subtle"
-        :size="size"
-        :ui="{ base: mergeDataListUiClass('shrink-0', void 0, ui?.trigger) }"
-        @click.stop="emit('activate', props.operator)"
-      >
-        <span
-          :class="mergeDataListUiClass('flex min-w-0 items-center gap-2', void 0, ui?.label)"
-        >
-          <UIcon :name="props.leadingIcon" class="size-4 shrink-0 text-muted" />
-          <span class="truncate">{{ props.label }}</span>
-        </span>
-      </UButton>
-
-      <UButton
-        v-if="showMatchMode"
-        color="neutral"
-        variant="subtle"
-        :size="size"
-        :label="props.operatorLabel"
-        trailing-icon="i-lucide-chevron-down"
-        :ui="{
-  base: mergeDataListUiClass('shrink-0', void 0, ui?.operatorTrigger)
-}"
-        @click.stop="emit('requestMatchMode')"
-      />
-
-      <UButton
-        color="neutral"
-        variant="subtle"
-        :size="size"
-        :ui="{
-  base: mergeDataListUiClass('min-w-0 max-w-full', void 0, ui?.value)
-}"
-        @click.stop="emit('activate', props.operator)"
-      >
-        <span class="flex min-w-0 items-center gap-2">
-          <UBadge
-            color="neutral"
-            size="sm"
-            variant="subtle"
-            v-for="tag in props.previewTags ?? []"
-            :key="tag"
-          >
-            {{ tag }}
-          </UBadge>
-
-          <span v-if="props.previewSummary">
-            {{ props.previewSummary }}
-          </span>
-
-          <span
-            v-if="!(props.previewTags?.length ?? 0) && !props.previewSummary"
-            class="text-muted"
-          >
-            Select…
-          </span>
-        </span>
-      </UButton>
-
-      <UButton
-        color="neutral"
-        variant="subtle"
-        :size="size"
-        icon="i-lucide-x"
-        :ui="{ base: mergeDataListUiClass('shrink-0', void 0, ui?.dismiss) }"
-        @pointerdown.stop
-        @click.stop="emit('clear')"
-      />
-    </UFieldGroup>
-  </div>
-</template>