Changes to UI and other stuff

2025-11-20 18:11:43 +01:00
parent b7fa2d261b
commit 3b284fa4bd
87 changed files with 7872 additions and 2330 deletions
@@ -0,0 +1,109 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { ListboxRoot, useFilter, useForwardPropsEmits } from "reka-ui";
+import { reactive, ref, watch } from "vue";
+import { cn } from "@/lib/utils";
+import { provideCommandContext } from ".";
+
+const props = defineProps({
+  modelValue: { type: null, required: false, default: "" },
+  defaultValue: { type: null, required: false },
+  multiple: { type: Boolean, required: false },
+  orientation: { type: String, required: false },
+  dir: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  selectionBehavior: { type: String, required: false },
+  highlightOnHover: { type: Boolean, required: false },
+  by: { type: [String, Function], required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  class: { type: null, required: false },
+});
+
+const emits = defineEmits([
+  "update:modelValue",
+  "highlight",
+  "entryFocus",
+  "leave",
+]);
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const allItems = ref(new Map());
+const allGroups = ref(new Map());
+
+const { contains } = useFilter({ sensitivity: "base" });
+const filterState = reactive({
+  search: "",
+  filtered: {
+    /** The count of all visible items. */
+    count: 0,
+    /** Map from visible item id to its search score. */
+    items: new Map(),
+    /** Set of groups with at least one visible item. */
+    groups: new Set(),
+  },
+});
+
+function filterItems() {
+  if (!filterState.search) {
+    filterState.filtered.count = allItems.value.size;
+    // Do nothing, each item will know to show itself because search is empty
+    return;
+  }
+
+  // Reset the groups
+  filterState.filtered.groups = new Set();
+  let itemCount = 0;
+
+  // Check which items should be included
+  for (const [id, value] of allItems.value) {
+    const score = contains(value, filterState.search);
+    filterState.filtered.items.set(id, score ? 1 : 0);
+    if (score) itemCount++;
+  }
+
+  // Check which groups have at least 1 item shown
+  for (const [groupId, group] of allGroups.value) {
+    for (const itemId of group) {
+      if (filterState.filtered.items.get(itemId) > 0) {
+        filterState.filtered.groups.add(groupId);
+        break;
+      }
+    }
+  }
+
+  filterState.filtered.count = itemCount;
+}
+
+watch(
+  () => filterState.search,
+  () => {
+    filterItems();
+  },
+);
+
+provideCommandContext({
+  allItems,
+  allGroups,
+  filterState,
+});
+</script>
+
+<template>
+  <ListboxRoot
+    v-bind="forwarded"
+    :class="
+      cn(
+        'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </ListboxRoot>
+</template>
@@ -0,0 +1,26 @@
+<script setup>
+import { useForwardPropsEmits } from "reka-ui";
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+import Command from "./Command.vue";
+
+const props = defineProps({
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  modal: { type: Boolean, required: false },
+});
+const emits = defineEmits(["update:open"]);
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <Dialog v-bind="forwarded">
+    <DialogContent class="overflow-hidden p-0 shadow-lg">
+      <Command
+        class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
+      >
+        <slot />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>
@@ -0,0 +1,30 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { Primitive } from "reka-ui";
+import { computed } from "vue";
+import { cn } from "@/lib/utils";
+import { useCommand } from ".";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const { filterState } = useCommand();
+const isRender = computed(
+  () => !!filterState.search && filterState.filtered.count === 0,
+);
+</script>
+
+<template>
+  <Primitive
+    v-if="isRender"
+    v-bind="delegatedProps"
+    :class="cn('py-6 text-center text-sm', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
@@ -0,0 +1,53 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { ListboxGroup, ListboxGroupLabel, useId } from "reka-ui";
+import { computed, onMounted, onUnmounted } from "vue";
+import { cn } from "@/lib/utils";
+import { provideCommandGroupContext, useCommand } from ".";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+  heading: { type: String, required: false },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const { allGroups, filterState } = useCommand();
+const id = useId();
+
+const isRender = computed(() =>
+  !filterState.search ? true : filterState.filtered.groups.has(id),
+);
+
+provideCommandGroupContext({ id });
+onMounted(() => {
+  if (!allGroups.value.has(id)) allGroups.value.set(id, new Set());
+});
+onUnmounted(() => {
+  allGroups.value.delete(id);
+});
+</script>
+
+<template>
+  <ListboxGroup
+    v-bind="delegatedProps"
+    :id="id"
+    :class="
+      cn(
+        'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+        props.class,
+      )
+    "
+    :hidden="isRender ? undefined : true"
+  >
+    <ListboxGroupLabel
+      v-if="heading"
+      class="px-2 py-1.5 text-xs font-medium text-muted-foreground"
+    >
+      {{ heading }}
+    </ListboxGroupLabel>
+    <slot />
+  </ListboxGroup>
+</template>
@@ -0,0 +1,43 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { Search } from "lucide-vue-next";
+import { ListboxFilter, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { useCommand } from ".";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  modelValue: { type: String, required: false },
+  autoFocus: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+
+const { filterState } = useCommand();
+</script>
+
+<template>
+  <div class="flex items-center border-b px-3" cmdk-input-wrapper>
+    <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <ListboxFilter
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      v-model="filterState.search"
+      auto-focus
+      :class="
+        cn(
+          'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+          props.class,
+        )
+      "
+    />
+  </div>
+</template>
@@ -0,0 +1,86 @@
+<script setup>
+import { reactiveOmit, useCurrentElement } from "@vueuse/core";
+import { ListboxItem, useForwardPropsEmits, useId } from "reka-ui";
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import { cn } from "@/lib/utils";
+import { useCommand, useCommandGroup } from ".";
+
+const props = defineProps({
+  value: { type: null, required: true },
+  disabled: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+const emits = defineEmits(["select"]);
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const id = useId();
+const { filterState, allItems, allGroups } = useCommand();
+const groupContext = useCommandGroup();
+
+const isRender = computed(() => {
+  if (!filterState.search) {
+    return true;
+  } else {
+    const filteredCurrentItem = filterState.filtered.items.get(id);
+    // If the filtered items is undefined means not in the all times map yet
+    // Do the first render to add into the map
+    if (filteredCurrentItem === undefined) {
+      return true;
+    }
+
+    // Check with filter
+    return filteredCurrentItem > 0;
+  }
+});
+
+const itemRef = ref();
+const currentElement = useCurrentElement(itemRef);
+onMounted(() => {
+  if (!(currentElement.value instanceof HTMLElement)) return;
+
+  // textValue to perform filter
+  allItems.value.set(
+    id,
+    currentElement.value.textContent ?? props?.value.toString(),
+  );
+
+  const groupId = groupContext?.id;
+  if (groupId) {
+    if (!allGroups.value.has(groupId)) {
+      allGroups.value.set(groupId, new Set([id]));
+    } else {
+      allGroups.value.get(groupId)?.add(id);
+    }
+  }
+});
+onUnmounted(() => {
+  allItems.value.delete(id);
+});
+</script>
+
+<template>
+  <ListboxItem
+    v-if="isRender"
+    v-bind="forwarded"
+    :id="id"
+    ref="itemRef"
+    :class="
+      cn(
+        'relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0',
+        props.class,
+      )
+    "
+    @select="
+      () => {
+        filterState.search = '';
+      }
+    "
+  >
+    <slot />
+  </ListboxItem>
+</template>
@@ -0,0 +1,26 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { ListboxContent, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <ListboxContent
+    v-bind="forwarded"
+    :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)"
+  >
+    <div role="presentation">
+      <slot />
+    </div>
+  </ListboxContent>
+</template>
@@ -0,0 +1,24 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { Separator } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  orientation: { type: String, required: false },
+  decorative: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <Separator
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 h-px bg-border', props.class)"
+  >
+    <slot />
+  </Separator>
+</template>
@@ -0,0 +1,17 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <span
+    :class="
+      cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)
+    "
+  >
+    <slot />
+  </span>
+</template>
@@ -0,0 +1,16 @@
+import { createContext } from "reka-ui";
+
+export { default as Command } from "./Command.vue";
+export { default as CommandDialog } from "./CommandDialog.vue";
+export { default as CommandEmpty } from "./CommandEmpty.vue";
+export { default as CommandGroup } from "./CommandGroup.vue";
+export { default as CommandInput } from "./CommandInput.vue";
+export { default as CommandItem } from "./CommandItem.vue";
+export { default as CommandList } from "./CommandList.vue";
+export { default as CommandSeparator } from "./CommandSeparator.vue";
+export { default as CommandShortcut } from "./CommandShortcut.vue";
+
+export const [useCommand, provideCommandContext] = createContext("Command");
+
+export const [useCommandGroup, provideCommandGroupContext] =
+  createContext("CommandGroup");