@baybreezy/docd 0.0.1

package/app/components/Ui/Command/Command.vue

@@ -0,0 +1,115 @@
+<template>
+  <ListboxRoot
+    cmdk-root
+    v-bind="forwarded"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+    data-slot="command"
+  >
+    <slot />
+  </ListboxRoot>
+</template>
+<script lang="ts">
+  import { reactiveOmit } from "@vueuse/core";
+  import { createContext, ListboxRoot, useFilter, useForwardPropsEmits } from "reka-ui";
+  import type { ListboxRootEmits, ListboxRootProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  export const [useCommand, provideCommandContext] = createContext<{
+    allItems: Ref<Map<string, string>>;
+    allGroups: Ref<Map<string, Set<string>>>;
+    filterState: {
+      search: string;
+      filtered: { count: number; items: Map<string, number>; groups: Set<string> };
+    };
+  }>("Command");
+
+  export const [useCommandGroup, provideCommandGroupContext] = createContext<{
+    id?: string;
+  }>("CommandGroup");
+</script>
+
+<script setup lang="ts">
+  const props = withDefaults(
+    defineProps<ListboxRootProps & { class?: HTMLAttributes["class"] }>(),
+    {
+      modelValue: "",
+    }
+  );
+
+  const emits = defineEmits<ListboxRootEmits>();
+  const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);
+
+  const styles = tv({
+    base: "flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground has-data-[slot=command-footer]:p-0",
+  });
+
+  const allItems = ref<Map<string, string>>(new Map());
+  const allGroups = ref<Map<string, Set<string>>>(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() as Map<string, number>,
+      /** Set of groups with at least one visible item. */
+      groups: new Set() as Set<string>,
+    },
+  });
+
+  function filterItems() {
+    const tokens = filterState.search
+      .trim()
+      .split(/\s+/)
+      .map((token) => token.trim())
+      .filter(Boolean);
+
+    if (!tokens.length) {
+      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) {
+      let score = 0;
+      for (const token of tokens) {
+        if (!contains(value, token)) {
+          score = 0;
+          break;
+        }
+        score += 1;
+      }
+
+      filterState.filtered.items.set(id, score);
+      if (score > 0) 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>

package/app/components/Ui/Command/Dialog.vue

@@ -0,0 +1,65 @@
+<template>
+  <UiDialog v-bind="forwarded">
+    <UiDialogContent
+      :hide-close="showCloseButton"
+      :translucent="translucent"
+      class="overflow-hidden rounded-xl! p-0 shadow-lg"
+    >
+      <UiDialogHeader class="sr-only">
+        <UiDialogTitle :title />
+        <UiDialogDescription :description />
+      </UiDialogHeader>
+      <UiCommand :highlight-on-hover>
+        <slot />
+      </UiCommand>
+    </UiDialogContent>
+  </UiDialog>
+</template>
+
+<script lang="ts" setup>
+  import { useForwardPropsEmits } from "reka-ui";
+  import type { DialogRootEmits, DialogRootProps } from "reka-ui";
+
+  const props = withDefaults(
+    defineProps<
+      DialogRootProps & {
+        /**
+         * The title of the command dialog.
+         *
+         * @default "Command Palette"
+         */
+        title?: string;
+        /**
+         * The description of the command dialog.
+         *
+         * @default "Search for a command to run...".
+         */
+        description?: string;
+        /**
+         * Whether to show the close button in the dialog header.
+         *
+         * @default true
+         */
+        showCloseButton?: boolean;
+        /**
+         * Whether to render the dialog content with a translucent surface.
+         */
+        translucent?: boolean;
+        /**
+         * When `true`, hover over item will trigger highlight
+         */
+        highlightOnHover?: boolean;
+      }
+    >(),
+    {
+      title: "Command Palette",
+      description: "Search for a command to run...",
+    }
+  );
+  const emits = defineEmits<DialogRootEmits>();
+
+  const forwarded = useForwardPropsEmits(
+    reactiveOmit(props, "translucent", "highlightOnHover"),
+    emits
+  );
+</script>

package/app/components/Ui/Command/Empty.vue

@@ -0,0 +1,32 @@
+<template>
+  <Primitive
+    v-if="isRender"
+    v-bind="forwarded"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+    data-slot="command-empty"
+    cmdk-empty
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<script setup lang="ts">
+  import { reactiveOmit } from "@vueuse/core";
+  import { Primitive } from "reka-ui";
+  import type { PrimitiveProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  import { useCommand } from "./Command.vue";
+
+  const props = defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>();
+
+  const forwarded = reactiveOmit(props, "class");
+
+  const { filterState } = useCommand();
+  const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0);
+
+  const styles = tv({
+    base: "py-6 text-center text-sm",
+  });
+</script>

package/app/components/Ui/Command/Footer.vue

@@ -0,0 +1,40 @@
+<template>
+  <Primitive
+    data-slot="command-footer"
+    :as
+    :as-child
+    :class="styles({ class: normalizeClass(props.class) })"
+  >
+    <slot>
+      <slot name="navigate">
+        <div class="flex items-center gap-1">
+          <UiKbd variant="outline">↑</UiKbd>
+          <UiKbd variant="outline">↓</UiKbd>
+          <span class="text-xs">to navigate</span>
+        </div>
+      </slot>
+      <slot name="escape">
+        <div class="flex items-center gap-1">
+          <UiKbd variant="outline">esc</UiKbd>
+          <span class="text-xs">to close</span>
+        </div>
+      </slot>
+    </slot>
+  </Primitive>
+</template>
+
+<script lang="ts">
+  import { Primitive, type PrimitiveProps } from "reka-ui";
+  import { normalizeClass, type HTMLAttributes } from "vue";
+  export type CommandFooterProps = PrimitiveProps & {
+    /** Custom class(es) to add to the element */
+    class?: HTMLAttributes["class"];
+  };
+  const styles = tv({
+    base: "z-5 flex items-center gap-2 border-t bg-input/30 p-2 px-3 text-sm",
+  });
+</script>
+
+<script lang="ts" setup>
+  const props = defineProps<CommandFooterProps>();
+</script>

package/app/components/Ui/Command/Group.vue

@@ -0,0 +1,58 @@
+<template>
+  <ListboxGroup
+    v-bind="forwarded"
+    :id="id"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+    data-slot="command-group"
+    :hidden="isRender ? undefined : true"
+    cmdk-group
+  >
+    <ListboxGroupLabel
+      v-if="heading"
+      cmdk-group-heading
+      class="px-2 py-1.5 text-xs font-medium text-muted-foreground"
+    >
+      {{ heading }}
+    </ListboxGroupLabel>
+    <slot />
+  </ListboxGroup>
+</template>
+
+<script setup lang="ts">
+  import { reactiveOmit } from "@vueuse/core";
+  import { ListboxGroup, ListboxGroupLabel } from "reka-ui";
+  import type { ListboxGroupProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  import { provideCommandGroupContext, useCommand } from "./Command.vue";
+
+  const props = defineProps<
+    ListboxGroupProps & {
+      /** Custom class(es) to add to the element */
+      class?: HTMLAttributes["class"];
+      heading?: string;
+    }
+  >();
+
+  const styles = tv({
+    base: "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",
+  });
+
+  const forwarded = 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>

package/app/components/Ui/Command/Input.vue

@@ -0,0 +1,57 @@
+<template>
+  <div data-slot="command-input-wrapper" class="p-1 pb-0" cmdk-input-wrapper>
+    <UiInputGroup
+      class="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!"
+    >
+      <ListboxFilter
+        v-bind="{ ...forwardedProps, ...$attrs }"
+        v-model="filterState.search"
+        data-slot="command-input"
+        auto-focus
+        cmdk-input
+        :class="styles({ class: normalizeClass(props.class) || undefined })"
+      />
+      <UiInputGroupAddon>
+        <Icon :name="icon" class="size-4 shrink-0 opacity-50" />
+      </UiInputGroupAddon>
+    </UiInputGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { reactiveOmit } from "@vueuse/core";
+  import { ListboxFilter, useForwardProps } from "reka-ui";
+  import type { ListboxFilterProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  import { useCommand } from "./Command.vue";
+
+  defineOptions({ inheritAttrs: false });
+
+  const props = withDefaults(
+    defineProps<
+      ListboxFilterProps & {
+        /** Custom class(es) to add to the element */
+        class?: HTMLAttributes["class"];
+        /**
+         * The name of the icon to display for the search input.
+         *
+         * @default "lucide:search"
+         */
+        icon?: string;
+      }
+    >(),
+    {
+      icon: "lucide:search",
+    }
+  );
+
+  const styles = tv({
+    base: "w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+  });
+
+  const forwardedProps = useForwardProps(reactiveOmit(props, "class"));
+
+  const { filterState } = useCommand();
+</script>

package/app/components/Ui/Command/Item.vue

@@ -0,0 +1,102 @@
+<template>
+  <ListboxItem
+    v-if="isRender"
+    v-bind="forwarded"
+    :id="id"
+    ref="itemRef"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+    data-slot="command-item"
+    cmdk-item
+    @select="
+      () => {
+        filterState.search = '';
+      }
+    "
+  >
+    <slot>
+      <slot name="icon">
+        <Icon v-if="icon" :name="icon" />
+      </slot>
+      <slot name="text">
+        {{ text }}
+      </slot>
+      <slot name="shortcut">
+        <UiCommandShortcut v-if="shortcut" :shortcut="shortcut" />
+      </slot>
+    </slot>
+  </ListboxItem>
+</template>
+
+<script setup lang="ts">
+  import { reactiveOmit, useCurrentElement } from "@vueuse/core";
+  import type { ListboxItemEmits, ListboxItemProps } from "reka-ui";
+  import { ListboxItem, useForwardPropsEmits, useId } from "reka-ui";
+  import type { HTMLAttributes } from "vue";
+  import { normalizeClass } from "vue";
+
+  import { useCommand, useCommandGroup } from "./Command.vue";
+
+  const props = defineProps<
+    ListboxItemProps & {
+      /** Custom class(es) to add to the element */
+      class?: HTMLAttributes["class"];
+      /** Icon to render */
+      icon?: string;
+      /** Text to render */
+      text?: string;
+      /** Shortcut to render */
+      shortcut?: string;
+    }
+  >();
+  const emits = defineEmits<ListboxItemEmits>();
+
+  const forwarded = useForwardPropsEmits(
+    reactiveOmit(props, "class", "icon", "text", "shortcut"),
+    emits
+  );
+
+  const id = useId();
+  const { filterState, allItems, allGroups } = useCommand();
+  const groupContext = useCommandGroup();
+
+  const styles = tv({
+    base: "group/command-item relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none in-data-[slot=dialog-content]:rounded-lg! data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=checked]:bg-muted data-[state=checked]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
+  });
+
+  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>

package/app/components/Ui/Command/List.vue

@@ -0,0 +1,33 @@
+<template>
+  <ListboxContent
+    data-slot="command-list"
+    v-bind="forwarded"
+    cmdk-list
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+  >
+    <div role="presentation">
+      <slot />
+    </div>
+  </ListboxContent>
+</template>
+
+<script setup lang="ts">
+  import { reactiveOmit } from "@vueuse/core";
+  import { ListboxContent, useForwardProps } from "reka-ui";
+  import type { ListboxContentProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<
+    ListboxContentProps & {
+      /** Custom class(es) to add to the element */
+      class?: HTMLAttributes["class"];
+    }
+  >();
+
+  const forwarded = useForwardProps(reactiveOmit(props, "class"));
+
+  const styles = tv({
+    base: "no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none",
+  });
+</script>

package/app/components/Ui/Command/Separator.vue

@@ -0,0 +1,30 @@
+<template>
+  <Separator
+    v-bind="forwarded"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+    data-slot="command-separator"
+    cmdk-separator
+  >
+    <slot />
+  </Separator>
+</template>
+
+<script setup lang="ts">
+  import { reactiveOmit } from "@vueuse/core";
+  import { Separator } from "reka-ui";
+  import type { SeparatorProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<
+    SeparatorProps & {
+      /** Custom class(es) to add to the element */
+      class?: HTMLAttributes["class"];
+    }
+  >();
+
+  const forwarded = reactiveOmit(props, "class");
+  const styles = tv({
+    base: "-mx-1 h-px bg-border",
+  });
+</script>

package/app/components/Ui/Command/Shortcut.vue

@@ -0,0 +1,28 @@
+<template>
+  <Primitive
+    :as="as || 'span'"
+    :as-child="asChild"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+  >
+    <slot>{{ shortcut }}</slot>
+  </Primitive>
+</template>
+
+<script lang="ts" setup>
+  import { Primitive } from "reka-ui";
+  import type { PrimitiveProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<
+    PrimitiveProps & {
+      /** Custom class(es) to add to the element */
+      class?: HTMLAttributes["class"];
+      /** The shortcut text to render */
+      shortcut?: any;
+    }
+  >();
+  const styles = tv({
+    base: "ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground",
+  });
+</script>

package/app/components/Ui/Container.vue

@@ -0,0 +1,46 @@
+<template>
+  <Primitive
+    data-slot="container"
+    :data-constrained="constrained"
+    :class="styles({ class: normalizeClass(props.class) || undefined, constrained })"
+    v-bind="forwarded"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<script lang="ts" setup>
+  import { Primitive } from "reka-ui";
+  import type { PrimitiveProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = withDefaults(
+    defineProps<
+      PrimitiveProps & {
+        /** Custom class(es) to add to the element */
+        class?: HTMLAttributes["class"];
+        /** Whether to constrain the width of the container */
+        constrained?: boolean;
+      }
+    >(),
+    {
+      as: "div",
+    }
+  );
+
+  const forwarded = reactiveOmit(props, "class", "constrained");
+
+  const styles = tv({
+    base: "mx-auto w-full max-w-7xl 2xl:max-w-(--breakpoint-2xl)",
+    variants: {
+      constrained: {
+        true: "sm:px-6",
+        false: "px-4 sm:px-6",
+      },
+    },
+    defaultVariants: {
+      constrained: false,
+    },
+  });
+</script>

package/app/components/Ui/ContextMenu/Arrow.vue

@@ -0,0 +1,43 @@
+<template>
+  <ContextMenuArrow
+    data-slot="context-menu-arrow"
+    v-bind="forwarded"
+    :class="
+      styles({
+        translucent: props.translucent,
+        class: normalizeClass(props.class) || undefined,
+      })
+    "
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ContextMenuArrow } from "reka-ui";
+  import type { ContextMenuArrowProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = withDefaults(
+    defineProps<
+      ContextMenuArrowProps & {
+        /** Custom class(es) to add to the arrow */
+        class?: HTMLAttributes["class"];
+        /** Whether to render the arrow with a translucent surface */
+        translucent?: boolean;
+      }
+    >(),
+    {
+      width: 12,
+      height: 6,
+    }
+  );
+  const forwarded = reactiveOmit(props, "class", "translucent");
+  const styles = tv({
+    base: "fill-popover stroke-border",
+    variants: {
+      translucent: {
+        true: getTranslucentFloatingArrowClasses("popover"),
+      },
+    },
+  });
+</script>