@paraxe/vue 1.0.0

package/src/forms/Textarea.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+  value?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  error?: boolean;
+  success?: boolean;
+  maxlength?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: "",
+  disabled: false,
+  readonly: false,
+  error: false,
+  success: false,
+  maxlength: undefined,
+});
+
+const emit = defineEmits<{
+  input: [value: string];
+  change: [value: string];
+}>();
+
+const textareaClasses = computed(() => ({
+  "input-error": props.error,
+  "input-success": props.success,
+}));
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLTextAreaElement;
+  emit("input", target.value);
+}
+
+function handleChange(event: Event) {
+  const target = event.target as HTMLTextAreaElement;
+  emit("change", target.value);
+}
+</script>
+
+<template>
+  <textarea
+    class="textarea"
+    :class="textareaClasses"
+    :value="props.value"
+    :disabled="props.disabled"
+    :readonly="props.readonly"
+    :maxlength="props.maxlength"
+    @input="handleInput"
+    @change="handleChange"
+  />
+</template>

package/src/index.ts

@@ -0,0 +1,47 @@
+export { default as Button } from "./elements/Button.vue";
+export { default as Card } from "./elements/Card.vue";
+export { default as Input } from "./forms/Input.vue";
+export { default as Section } from "./primitives/Section.vue"
+export { default as Stack } from "./primitives/Stack.vue";
+export { default as Container } from "./primitives/Container.vue"
+export { default as Grid } from "./primitives/Grid.vue"
+export { default as Heading } from "./typography/Heading.vue"
+export { default as Text } from "./typography/Text.vue"
+export { default as Eyebrow } from "./typography/Eyebrow.vue"
+export { default as SectionHeader } from "./composites/SectionHeader.vue"
+export { default as ButtonGroup } from "./composites/ButtonGroup.vue";
+export { default as Divider } from "./primitives/Divider.vue";
+export { default as Label } from "./typography/Label.vue";
+export { default as Image } from "./elements/Image.vue";
+export { default as FormField } from "./forms/FormField.vue";
+export { default as Textarea } from "./forms/Textarea.vue";
+export { default as Select } from "./forms/Select.vue";
+export { default as Accordion } from "./composites/Accordion.vue";
+export { default as AccordionItem } from "./composites/AccordionItem.vue";
+export { default as Tag } from "./elements/Tag.vue";
+export { default as Badge } from "./elements/Badge.vue";
+export { default as EmptyState } from "./data/EmptyState.vue";
+export { default as List } from "./data/List.vue";
+export { default as ListItem } from "./data/ListItem.vue";
+export { default as Pagination } from "./data/Pagination.vue";
+export { default as Table } from "./data/Table.vue";
+export { default as Checkbox } from "./forms/Checkbox.vue";
+export { default as Radio } from "./forms/Radio.vue";
+export { default as Switch } from "./forms/Switch.vue";
+export { default as ChoiceGroup } from "./forms/ChoiceGroup.vue";
+export { default as Choice } from "./forms/Choice.vue";
+export { default as Sidebar } from "./navigation/Sidebar.vue"
+export { default as SidebarGroup } from "./navigation/SidebarGroup.vue"
+export { default as SidebarItem } from "./navigation/SidebarItem.vue"
+export { default as Tabs } from "./navigation/Tabs.vue";
+export { default as Tab } from "./navigation/Tab.vue";
+export { default as Breadcrumb } from "./navigation/Breadcrumb.vue"
+export { default as Breadcrumbs } from "./navigation/Breadcrumbs.vue"
+export { default as Dialog } from "./overlays/Dialog.vue"
+export { default as Drawer } from "./overlays/Drawer.vue"
+export { default as Popover } from "./overlays/Popover.vue"
+export { default as Tooltip } from "./overlays/Tooltip.vue"
+export { default as Alert} from "./feedback/Alert.vue"
+export { default as Progress } from "./feedback/Progress.vue"
+export { default as Skeleton } from "./feedback/Skeleton.vue"
+export { default as Toast } from "./feedback/Toast.vue"

package/src/navigation/Breadcrumb.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import {
+  computed,
+  inject,
+} from "vue";
+
+interface Props {
+  href?: string;
+  current?: boolean;
+}
+
+const props = withDefaults(
+  defineProps<Props>(),
+  {
+    href: undefined,
+    current: false,
+  },
+);
+
+const separator = inject(
+  "loba-breadcrumbs-separator",
+  "/",
+);
+
+const classes = computed(() => ({
+  "breadcrumbs-item": true,
+}));
+</script>
+
+<template>
+  <li :class="classes">
+    <a
+      v-if="props.href && !props.current"
+      class="breadcrumbs-link"
+      :href="props.href"
+    >
+      <slot />
+    </a>
+
+    <span
+      v-else
+      class="breadcrumbs-current"
+      :aria-current="
+        props.current
+          ? 'page'
+          : undefined
+      "
+    >
+      <slot />
+    </span>
+
+    <span
+      class="breadcrumbs-separator"
+      aria-hidden="true"
+    >
+      {{ separator }}
+    </span>
+  </li>
+</template>

package/src/navigation/Breadcrumbs.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { provide } from "vue";
+
+interface Props {
+  separator?: string;
+}
+
+const props = withDefaults(
+  defineProps<Props>(),
+  {
+    separator: "/",
+  },
+);
+
+provide(
+  "loba-breadcrumbs-separator",
+  props.separator,
+);
+</script>
+
+<template>
+  <nav
+    class="breadcrumbs"
+    aria-label="Breadcrumb"
+  >
+    <ol class="breadcrumbs-list">
+      <slot />
+    </ol>
+  </nav>
+</template>

package/src/navigation/Sidebar.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+export interface SidebarProps {
+  collapsed?: boolean;
+}
+
+const props = withDefaults(
+  defineProps<SidebarProps>(),
+  {
+    collapsed: false,
+  },
+);
+
+const sidebarClasses = computed(() => ({
+  sidebar: true,
+  "sidebar--collapsed": props.collapsed,
+}));
+</script>
+
+<template>
+  <aside :class="sidebarClasses">
+    <div class="sidebar-header">
+      <slot name="header" />
+    </div>
+
+    <nav class="sidebar-navigation">
+      <slot />
+    </nav>
+
+    <div class="sidebar-footer">
+      <slot name="footer" />
+    </div>
+  </aside>
+</template>

package/src/navigation/SidebarGroup.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+export interface SidebarGroupProps {
+  label?: string;
+}
+
+const props = withDefaults(
+  defineProps<SidebarGroupProps>(),
+  {
+    label: "",
+  },
+);
+
+const groupClasses = computed(() => ({
+  "sidebar-group": true,
+  "sidebar-group--labeled": Boolean(props.label),
+}));
+</script>
+
+<template>
+  <div :class="groupClasses">
+    <div
+      v-if="props.label"
+      class="sidebar-group-label"
+    >
+      {{ props.label }}
+    </div>
+
+    <div class="sidebar-group-items">
+      <slot />
+    </div>
+  </div>
+</template>

package/src/navigation/SidebarItem.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import {
+  computed,
+  ref,
+  useSlots,
+} from "vue";
+
+export interface SidebarItemProps {
+  active?: boolean;
+  disabled?: boolean;
+  href?: string;
+  expanded?: boolean;
+}
+
+const props = withDefaults(
+  defineProps<SidebarItemProps>(),
+  {
+    active: false,
+    disabled: false,
+    href: undefined,
+    expanded: false,
+  },
+);
+
+const slots = useSlots();
+
+const isExpanded = ref(
+  props.expanded,
+);
+
+const hasChildren = computed(
+  () => Boolean(slots.children),
+);
+
+const itemClasses = computed(() => ({
+  "sidebar-item": true,
+  "sidebar-item--active":
+    props.active,
+  "sidebar-item--disabled":
+    props.disabled,
+  "sidebar-item--expandable":
+    hasChildren.value,
+  "sidebar-item--expanded":
+    hasChildren.value &&
+    isExpanded.value,
+}));
+
+function handleClick(event: MouseEvent) {
+  if (props.disabled) {
+    event.preventDefault();
+    return;
+  }
+
+  if (hasChildren.value) {
+    event.preventDefault();
+    isExpanded.value =
+      !isExpanded.value;
+  }
+}
+</script>
+
+<template>
+  <div class="sidebar-item-wrapper">
+    <component
+      :is="hasChildren ? 'button' : 'a'"
+      :href="
+        hasChildren || !props.href
+          ? undefined
+          : props.href
+      "
+      :type="
+        hasChildren
+          ? 'button'
+          : undefined
+      "
+      :class="itemClasses"
+      :disabled="
+        hasChildren
+          ? props.disabled
+          : undefined
+      "
+      :aria-current="
+        props.active
+          ? 'page'
+          : undefined
+      "
+      :aria-expanded="
+        hasChildren
+          ? isExpanded
+          : undefined
+      "
+      :aria-disabled="
+        props.disabled
+          ? 'true'
+          : undefined
+      "
+      @click="handleClick"
+    >
+      <span
+        v-if="$slots.icon"
+        class="sidebar-item-icon"
+        aria-hidden="true"
+      >
+        <slot name="icon" />
+      </span>
+
+      <span class="sidebar-item-label">
+        <slot />
+      </span>
+
+      <span
+        v-if="hasChildren"
+        class="sidebar-item-chevron"
+        aria-hidden="true"
+      >
+        <span
+          :class="{
+            'sidebar-item-chevron--expanded':
+              isExpanded,
+          }"
+        >
+          ›
+        </span>
+      </span>
+    </component>
+
+    <div
+      v-if="
+        hasChildren &&
+        isExpanded
+      "
+      class="sidebar-item-children"
+    >
+      <slot name="children" />
+    </div>
+  </div>
+</template>

package/src/navigation/Tab.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import {
+  computed,
+  inject,
+} from "vue";
+
+interface Props {
+  value: string | number;
+  disabled?: boolean;
+}
+
+const props = withDefaults(
+  defineProps<Props>(),
+  {
+    disabled: false,
+  },
+);
+
+interface TabsContext {
+  activeValue: () =>
+    | string
+    | number
+    | null;
+
+  selectTab: (
+    value: string | number,
+  ) => void;
+}
+
+const injectedTabs =
+  inject<TabsContext>("loba-tabs");
+
+if (!injectedTabs) {
+  throw new Error(
+    "Tab must be used inside Tabs.",
+  );
+}
+
+const tabs = injectedTabs;
+
+const active = computed(
+  () =>
+    tabs.activeValue() ===
+    props.value,
+);
+
+const tabClasses = computed(() => ({
+  tab: true,
+  "tab--active": active.value,
+  "tab--disabled": props.disabled,
+}));
+
+function handleClick() {
+  if (props.disabled) {
+    return;
+  }
+
+  tabs.selectTab(props.value);
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    :class="tabClasses"
+    role="tab"
+    :aria-selected="active"
+    :aria-disabled="
+      props.disabled || undefined
+    "
+    :tabindex="
+      active ? 0 : -1
+    "
+    @click="handleClick"
+  >
+    <slot />
+  </button>
+</template>

package/src/navigation/Tabs.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import {
+  provide,
+  ref,
+  watch,
+} from "vue";
+
+interface Props {
+  modelValue?: string | number | null;
+}
+
+interface TabsContext {
+  activeValue: () => string | number | null;
+  selectTab: (value: string | number) => void;
+}
+
+const props = withDefaults(
+  defineProps<Props>(),
+  {
+    modelValue: null,
+  },
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [
+    value: string | number,
+  ];
+}>();
+
+const activeValue = ref<
+  string | number | null
+>(props.modelValue);
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    activeValue.value = value;
+  },
+);
+
+function selectTab(value: string | number) {
+  activeValue.value = value;
+
+  emit(
+    "update:modelValue",
+    value,
+  );
+}
+
+provide<TabsContext>(
+  "loba-tabs",
+  {
+    activeValue: () => activeValue.value,
+    selectTab,
+  },
+);
+</script>
+
+<template>
+  <div class="tabs">
+    <div
+      class="tabs-list"
+      role="tablist"
+    >
+      <slot />
+    </div>
+  </div>
+</template>