@paraxe/vue 1.0.0

package/src/overlays/Dialog.vue

@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import {
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from "vue";
+
+interface Props {
+  modelValue?: boolean;
+  closeOnBackdrop?: boolean;
+  closeOnEscape?: boolean;
+}
+
+const props = withDefaults(
+  defineProps<Props>(),
+  {
+    modelValue: false,
+    closeOnBackdrop: true,
+    closeOnEscape: true,
+  },
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [
+    value: boolean,
+  ];
+}>();
+
+const dialogElement =
+  ref<HTMLElement | null>(null);
+
+let previouslyFocused:
+  | HTMLElement
+  | null = null;
+
+const focusableSelector = [
+  "button:not([disabled])",
+  "[href]",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])",
+].join(", ");
+
+function close() {
+  emit("update:modelValue", false);
+}
+
+function handleBackdropClick() {
+  if (props.closeOnBackdrop) {
+    close();
+  }
+}
+
+function handleKeydown(
+  event: KeyboardEvent,
+) {
+  if (
+    !props.modelValue ||
+    !dialogElement.value
+  ) {
+    return;
+  }
+
+  if (
+    event.key === "Escape" &&
+    props.closeOnEscape
+  ) {
+    event.preventDefault();
+    close();
+    return;
+  }
+
+  if (event.key !== "Tab") {
+    return;
+  }
+
+  const focusable =
+    Array.from(
+      dialogElement.value.querySelectorAll<HTMLElement>(
+        focusableSelector,
+      ),
+    );
+
+  if (focusable.length === 0) {
+    event.preventDefault();
+    return;
+  }
+
+  const first = focusable[0];
+  const last =
+    focusable[focusable.length - 1];
+
+  if (
+    event.shiftKey &&
+    document.activeElement === first
+  ) {
+    event.preventDefault();
+    last.focus();
+    return;
+  }
+
+  if (
+    !event.shiftKey &&
+    document.activeElement === last
+  ) {
+    event.preventDefault();
+    first.focus();
+  }
+}
+
+async function openDialog() {
+  previouslyFocused =
+    document.activeElement instanceof
+    HTMLElement
+      ? document.activeElement
+      : null;
+
+  await nextTick();
+
+  const focusable =
+    dialogElement.value?.querySelector<HTMLElement>(
+      focusableSelector,
+    );
+
+  focusable?.focus();
+}
+
+function restoreFocus() {
+  previouslyFocused?.focus();
+  previouslyFocused = null;
+}
+
+watch(
+  () => props.modelValue,
+  async (open) => {
+    if (open) {
+      await openDialog();
+    } else {
+      restoreFocus();
+    }
+  },
+);
+
+onMounted(() => {
+  if (props.modelValue) {
+    openDialog();
+  }
+
+  document.addEventListener(
+    "keydown",
+    handleKeydown,
+  );
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener(
+    "keydown",
+    handleKeydown,
+  );
+
+  restoreFocus();
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="modelValue"
+      class="dialog dialog--open"
+      role="presentation"
+    >
+      <button
+        class="dialog-backdrop"
+        type="button"
+        aria-label="Close dialog"
+        tabindex="-1"
+        @click="handleBackdropClick"
+      />
+
+      <div
+        ref="dialogElement"
+        class="dialog-content"
+        role="dialog"
+        aria-modal="true"
+      >
+        <slot />
+      </div>
+    </div>
+  </Teleport>
+</template>

package/src/overlays/Drawer.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import {
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from "vue";
+
+interface Props {
+  modelValue?: boolean;
+  side?: "left" | "right";
+  closeOnBackdrop?: boolean;
+  closeOnEscape?: boolean;
+}
+
+const props = withDefaults(
+  defineProps<Props>(),
+  {
+    modelValue: false,
+    side: "right",
+    closeOnBackdrop: true,
+    closeOnEscape: true,
+  },
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [
+    value: boolean,
+  ];
+}>();
+
+const panel = ref<HTMLElement | null>(null);
+
+let previouslyFocused:
+  | HTMLElement
+  | null = null;
+
+const focusableSelector = [
+  "button:not([disabled])",
+  "[href]",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])",
+].join(", ");
+
+function close() {
+  emit("update:modelValue", false);
+}
+
+function handleBackdropClick() {
+  if (props.closeOnBackdrop) {
+    close();
+  }
+}
+
+function handleKeydown(
+  event: KeyboardEvent,
+) {
+  if (
+    !props.modelValue ||
+    !panel.value
+  ) {
+    return;
+  }
+
+  if (
+    event.key === "Escape" &&
+    props.closeOnEscape
+  ) {
+    event.preventDefault();
+    close();
+    return;
+  }
+
+  if (event.key !== "Tab") {
+    return;
+  }
+
+  const focusable = Array.from(
+    panel.value.querySelectorAll<HTMLElement>(
+      focusableSelector,
+    ),
+  );
+
+  if (focusable.length === 0) {
+    event.preventDefault();
+    return;
+  }
+
+  const first = focusable[0];
+  const last =
+    focusable[focusable.length - 1];
+
+  if (
+    event.shiftKey &&
+    document.activeElement === first
+  ) {
+    event.preventDefault();
+    last.focus();
+    return;
+  }
+
+  if (
+    !event.shiftKey &&
+    document.activeElement === last
+  ) {
+    event.preventDefault();
+    first.focus();
+  }
+}
+
+async function openDrawer() {
+  previouslyFocused =
+    document.activeElement instanceof
+    HTMLElement
+      ? document.activeElement
+      : null;
+
+  await nextTick();
+
+  const focusable =
+    panel.value?.querySelector<HTMLElement>(
+      focusableSelector,
+    );
+
+  focusable?.focus();
+}
+
+function restoreFocus() {
+  previouslyFocused?.focus();
+  previouslyFocused = null;
+}
+
+watch(
+  () => props.modelValue,
+  async (open) => {
+    if (open) {
+      await openDrawer();
+    } else {
+      restoreFocus();
+    }
+  },
+);
+
+onMounted(() => {
+  document.addEventListener(
+    "keydown",
+    handleKeydown,
+  );
+
+  if (props.modelValue) {
+    openDrawer();
+  }
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener(
+    "keydown",
+    handleKeydown,
+  );
+
+  restoreFocus();
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="modelValue"
+      class="drawer"
+      :class="{
+        'drawer--open': modelValue,
+        'drawer--left': side === 'left',
+        'drawer--right': side === 'right',
+      }"
+      role="presentation"
+    >
+      <button
+        class="drawer-backdrop"
+        type="button"
+        aria-label="Close drawer"
+        tabindex="-1"
+        @click="handleBackdropClick"
+      />
+
+      <aside
+        ref="panel"
+        class="drawer-panel"
+        role="dialog"
+        aria-modal="true"
+      >
+        <div class="drawer-content">
+          <slot />
+        </div>
+      </aside>
+    </div>
+  </Teleport>
+</template>

package/src/overlays/Popover.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import {
+  onBeforeUnmount,
+  onMounted,
+  ref,
+} from "vue";
+
+interface Props {
+  placement?: "top" | "bottom" | "left" | "right";
+}
+
+const props = withDefaults(
+  defineProps<Props>(),
+  {
+    placement: "bottom",
+  },
+);
+
+const open = ref(false);
+
+const popover = ref<HTMLElement | null>(null);
+
+function toggle() {
+  open.value = !open.value;
+}
+
+function close() {
+  open.value = false;
+}
+
+function handleDocumentClick(
+  event: MouseEvent,
+) {
+  if (!popover.value) {
+    return;
+  }
+
+  const target = event.target;
+
+  if (
+    target instanceof Node &&
+    !popover.value.contains(target)
+  ) {
+    close();
+  }
+}
+
+function handleKeydown(
+  event: KeyboardEvent,
+) {
+  if (event.key === "Escape") {
+    close();
+  }
+}
+
+onMounted(() => {
+  document.addEventListener(
+    "click",
+    handleDocumentClick,
+  );
+
+  document.addEventListener(
+    "keydown",
+    handleKeydown,
+  );
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener(
+    "click",
+    handleDocumentClick,
+  );
+
+  document.removeEventListener(
+    "keydown",
+    handleKeydown,
+  );
+});
+</script>
+
+<template>
+  <div
+    ref="popover"
+    class="popover"
+    :class="{
+      'popover--open': open,
+      [`popover--${props.placement}`]:
+        true,
+    }"
+  >
+    <div
+      class="popover-trigger"
+      @click="toggle"
+    >
+      <slot name="trigger" />
+    </div>
+
+    <div
+      v-if="open"
+      class="popover-content"
+      role="dialog"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

package/src/overlays/Tooltip.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import {
+  onBeforeUnmount,
+  ref,
+} from "vue";
+
+interface Props {
+  placement?: "top" | "bottom" | "left" | "right";
+  text: string;
+  delay?: number;
+}
+
+const props = withDefaults(
+  defineProps<Props>(),
+  {
+    placement: "top",
+    delay: 300,
+  },
+);
+
+const visible = ref(false);
+
+let timer: ReturnType<
+  typeof setTimeout
+> | undefined;
+
+function show() {
+  clearTimeout(timer);
+
+  timer = setTimeout(() => {
+    visible.value = true;
+  }, props.delay);
+}
+
+function hide() {
+  clearTimeout(timer);
+  visible.value = false;
+}
+
+onBeforeUnmount(() => {
+  clearTimeout(timer);
+});
+</script>
+
+<template>
+  <span
+    class="tooltip"
+    :class="{
+      'tooltip--visible': visible,
+      [`tooltip--${props.placement}`]:
+        true,
+    }"
+    @mouseenter="show"
+    @mouseleave="hide"
+    @focusin="show"
+    @focusout="hide"
+  >
+    <span class="tooltip-trigger">
+      <slot />
+    </span>
+
+    <span
+      class="tooltip-content"
+      role="tooltip"
+    >
+      {{ props.text }}
+    </span>
+  </span>
+</template>

package/src/primitives/Container.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+type ContainerSize = "default" | "narrow";
+
+interface Props {
+  size?: ContainerSize;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: "default",
+});
+
+const containerClasses = computed(() => ({
+  container: props.size === "default",
+  "container-narrow": props.size === "narrow",
+}));
+</script>
+
+<template>
+  <div :class="containerClasses">
+    <slot />
+  </div>
+</template>

package/src/primitives/Divider.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="divider" aria-hidden="true" />
+</template>

package/src/primitives/Grid.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+type GridColumns = 1 | 2 | 3 | 4 | 5 | 6;
+type GridRows = 1 | 2 | 3 | 4 | 5 | 6;
+type GridSize = "small" | "medium" | "large";
+
+interface Props {
+  columns?: GridColumns;
+  rows?: GridRows;
+  size?: GridSize;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  columns: 1,
+  rows: 1,
+  size: "medium",
+});
+
+const gridClasses = computed(() => [
+  props.size === "small"
+    ? "grid-sm"
+    : props.size === "large"
+      ? "grid-lg"
+      : "grid",
+
+  `grid-cols-${props.columns}`,
+  `grid-rows-${props.rows}`,
+]);
+</script>
+
+<template>
+  <div :class="gridClasses">
+    <slot />
+  </div>
+</template>

package/src/primitives/Section.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <section class="section">
+    <slot />
+  </section>
+</template>

package/src/primitives/Stack.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+type StackSize = "small" | "medium" | "large";
+
+interface Props {
+  size?: StackSize;
+  fullWidth?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: "medium",
+  fullWidth: false,
+});
+
+const stackClasses = computed(() => ({
+  stack: props.size === "medium",
+  "stack-sm": props.size === "small",
+  "stack-lg": props.size === "large",
+  "stack-full": props.fullWidth,
+}));
+</script>
+
+<template>
+  <div :class="stackClasses">
+    <slot />
+  </div>
+</template>

package/src/typography/Eyebrow.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <span class="eyebrow">
+    <slot />
+  </span>
+</template>

package/src/typography/Heading.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+interface Props {
+  level?: HeadingLevel;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  level: "h2",
+});
+
+const headingClasses = computed(() => ({
+  "heading-xl": props.level === "h1",
+  "heading-lg": props.level === "h2",
+  "heading-md": props.level === "h3",
+  "heading-sm": props.level === "h4",
+  "heading-xs": props.level === "h5" || props.level === "h6",
+}));
+</script>
+
+<template>
+  <component :is="level" :class="headingClasses">
+    <slot />
+  </component>
+</template>