@paraxe/vue 1.0.0

package/src/data/Table.vue

@@ -0,0 +1,382 @@
+<script setup lang="ts">
+import {
+  computed,
+  ref,
+} from "vue";
+
+export interface TableColumn<
+  T = unknown,
+> {
+  key: string;
+  label: string;
+  sortable?: boolean;
+  width?: string;
+  align?: "start" | "center" | "end";
+}
+
+export interface TableProps<
+  T = unknown,
+> {
+  columns: TableColumn<T>[];
+  rows: T[];
+  rowKey?: string;
+  sortable?: boolean;
+  selectable?: boolean;
+  multiple?: boolean;
+  loading?: boolean;
+}
+
+const props = withDefaults(
+  defineProps<TableProps>(),
+  {
+    rowKey: "id",
+    sortable: false,
+    selectable: false,
+    multiple: false,
+    loading: false,
+  },
+);
+
+const emit = defineEmits<{
+  "update:selectedRows": [
+    rows: unknown[],
+  ];
+
+  sort: [
+    payload: {
+      key: string;
+      direction: "asc" | "desc";
+    },
+  ];
+}>();
+
+const sortKey = ref<string | null>(
+  null,
+);
+
+const sortDirection = ref<
+  "asc" | "desc"
+>("asc");
+
+const selectedKeys = ref<
+  Set<string | number>
+>(new Set());
+
+function getRowValue(
+  row: unknown,
+  key: string,
+) {
+  if (
+    typeof row !== "object" ||
+    row === null
+  ) {
+    return undefined;
+  }
+
+  return (
+    row as Record<
+      string,
+      unknown
+    >
+  )[key];
+}
+
+function getRowKey(
+  row: unknown,
+): string | number {
+  const value = getRowValue(
+    row,
+    props.rowKey,
+  );
+
+  if (
+    typeof value === "string" ||
+    typeof value === "number"
+  ) {
+    return value;
+  }
+
+  return props.rows.indexOf(row);
+}
+
+function isSelected(
+  row: unknown,
+) {
+  return selectedKeys.value.has(
+    getRowKey(row),
+  );
+}
+
+const sortedRows = computed(() => {
+  if (
+    !props.sortable ||
+    !sortKey.value
+  ) {
+    return props.rows;
+  }
+
+  const key = sortKey.value;
+  const direction =
+    sortDirection.value;
+
+  return [...props.rows].sort(
+    (a, b) => {
+      const aValue =
+        getRowValue(a, key);
+      const bValue =
+        getRowValue(b, key);
+
+      if (
+        aValue === bValue
+      ) {
+        return 0;
+      }
+
+      if (
+        aValue === undefined ||
+        aValue === null
+      ) {
+        return 1;
+      }
+
+      if (
+        bValue === undefined ||
+        bValue === null
+      ) {
+        return -1;
+      }
+
+      if (
+        typeof aValue === "number" &&
+        typeof bValue === "number"
+      ) {
+        return direction === "asc"
+          ? aValue - bValue
+          : bValue - aValue;
+      }
+
+      const result =
+        String(aValue).localeCompare(
+          String(bValue),
+          undefined,
+          {
+            numeric: true,
+            sensitivity: "base",
+          },
+        );
+
+      return direction === "asc"
+        ? result
+        : -result;
+    },
+  );
+});
+
+function toggleSort(
+  column: TableColumn,
+) {
+  if (
+    !props.sortable ||
+    !column.sortable
+  ) {
+    return;
+  }
+
+  if (sortKey.value !== column.key) {
+    sortKey.value = column.key;
+    sortDirection.value = "asc";
+  } else {
+    sortDirection.value =
+      sortDirection.value === "asc"
+        ? "desc"
+        : "asc";
+  }
+
+  emit("sort", {
+    key: column.key,
+    direction:
+      sortDirection.value,
+  });
+}
+
+function toggleRowSelection(
+  row: unknown,
+) {
+  if (!props.selectable) {
+    return;
+  }
+
+  const key = getRowKey(row);
+
+  const next = new Set(
+    selectedKeys.value,
+  );
+
+  if (props.multiple) {
+    if (next.has(key)) {
+      next.delete(key);
+    } else {
+      next.add(key);
+    }
+  } else {
+    next.clear();
+    next.add(key);
+  }
+
+  selectedKeys.value = next;
+
+  emit(
+    "update:selectedRows",
+    props.rows.filter((item) =>
+      next.has(getRowKey(item)),
+    ),
+  );
+}
+
+function sortIndicator(
+  column: TableColumn,
+) {
+  if (
+    sortKey.value !== column.key
+  ) {
+    return "";
+  }
+
+  return sortDirection.value ===
+    "asc"
+    ? "↑"
+    : "↓";
+}
+
+function cellClass(
+  column: TableColumn,
+) {
+  return {
+    [`table-cell--${column.align ?? "start"}`]:
+      true,
+  };
+}
+
+function isSorted(
+  column: TableColumn,
+) {
+  return (
+    sortKey.value === column.key
+  );
+}
+</script>
+
+<template>
+  <div class="table">
+    <table>
+      <thead>
+        <tr>
+          <th
+            v-for="column in columns"
+            :key="column.key"
+            :style="{
+              width: column.width,
+            }"
+            :class="[
+              cellClass(column),
+              {
+                'table-header--sortable':
+                  sortable &&
+                  column.sortable,
+
+                'table-header--sorted':
+                  isSorted(column),
+              },
+            ]"
+            :tabindex="
+              sortable &&
+              column.sortable
+                ? 0
+                : undefined
+            "
+            :aria-sort="
+              isSorted(column)
+                ? sortDirection ===
+                  'asc'
+                  ? 'ascending'
+                  : 'descending'
+                : undefined
+            "
+            @click="
+              toggleSort(column)
+            "
+            @keydown.enter="
+              toggleSort(column)
+            "
+            @keydown.space.prevent="
+              toggleSort(column)
+            "
+          >
+            <span>
+              {{ column.label }}
+            </span>
+
+            <span
+              v-if="
+                sortable &&
+                column.sortable
+              "
+              aria-hidden="true"
+            >
+              {{
+                sortIndicator(column)
+              }}
+            </span>
+          </th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr
+          v-for="row in sortedRows"
+          :key="getRowKey(row)"
+          :class="{
+            'table-row--selected':
+              isSelected(row),
+          }"
+          @click="
+            selectable &&
+            toggleRowSelection(row)
+          "
+        >
+          <td
+            v-for="column in columns"
+            :key="column.key"
+            :class="
+              cellClass(column)
+            "
+          >
+            <slot
+              :name="`cell-${column.key}`"
+              :row="row"
+              :value="
+                getRowValue(
+                  row,
+                  column.key,
+                )
+              "
+            >
+              {{
+                getRowValue(
+                  row,
+                  column.key,
+                )
+              }}
+            </slot>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div
+      v-if="loading"
+      class="table-loading"
+      aria-hidden="true"
+    />
+  </div>
+</template>

package/src/elements/Badge.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+export type BadgeVariant =
+  | "default"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info"
+  | "brand";
+
+interface Props {
+  variant?: BadgeVariant;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: "default",
+});
+
+const badgeClasses = computed(() => ({
+  "badge": true,
+  [`badge-${props.variant}`]: true,
+}));
+</script>
+
+<template>
+  <span :class="badgeClasses">
+    <slot />
+  </span>
+</template>

package/src/elements/Button.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import type {
+    ButtonVariant,
+    ButtonSize,
+    ButtonWidth,
+    ButtonIconPosition,
+} from "@paraxe/core";
+
+interface Props {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    width?: ButtonWidth;
+    iconPosition?: ButtonIconPosition;
+    disabled?: boolean;
+    loading?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(),
+{
+    variant: "primary",
+    size: "medium",
+    width: "auto",
+    iconPosition: "leading",
+    disabled: false,
+    loading: false,
+}
+)
+
+const emit = defineEmits<{
+  activate: [];
+}>()
+
+const sizeClasses: Record<ButtonSize, string> = {
+  small: "btn-sm",
+  medium: "btn-md",
+  large: "btn-lg",
+};
+
+const buttonClasses = computed(() => [
+  `btn-${props.variant}`,
+  sizeClasses[props.size],
+  props.width === "full" ? "btn-full" : "",
+]);
+
+</script>
+<template>
+    <button
+    class="btn"
+    :class="buttonClasses"
+    :disabled="props.disabled || props.loading"
+    @click="emit('activate')">
+    <slot />
+    </button>
+</template>

package/src/elements/Card.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+export type CardVariant =
+  | "default"
+  | "outlined"
+  | "elevated"
+  | "interactive"
+  | "selected";
+
+export interface Props {
+  variant?: CardVariant;
+  as?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: "default",
+  as: "div",
+});
+
+const cardClasses = computed(() => [
+  "card",
+  `card-${props.variant}`,
+]);
+</script>
+
+<template>
+  <component
+    :is="props.as"
+    :class="cardClasses"
+  >
+    <slot />
+  </component>
+</template>

package/src/elements/Image.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type {
+  ImageAspectRatio,
+  ImageFit,
+} from "@paraxe/core";
+
+interface Props {
+  src: string;
+  alt: string;
+  fit?: ImageFit;
+  aspectRatio?: ImageAspectRatio;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  fit: "cover",
+  aspectRatio: "auto",
+});
+</script>
+
+<template>
+  <div
+    class="media"
+    :class="{
+      'media-square': props.aspectRatio === 'square',
+      'media-video': props.aspectRatio === 'video',
+      'media-portrait': props.aspectRatio === 'portrait',
+      'media-wide': props.aspectRatio === 'wide',
+      'media-contain': props.fit === 'contain',
+    }"
+  >
+    <img
+      :src="props.src"
+      :alt="props.alt"
+    />
+  </div>
+</template>

package/src/elements/Tag.vue

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

package/src/env.d.ts

@@ -0,0 +1,8 @@
+// packages/vue/src/env.d.ts
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+declare module "*.css";

package/src/feedback/Alert.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+type AlertVariant =
+  | "info"
+  | "success"
+  | "warning"
+  | "danger";
+
+interface Props {
+  variant?: AlertVariant;
+  dismissible?: boolean;
+}
+
+const props = withDefaults(
+  defineProps<Props>(),
+  {
+    variant: "info",
+    dismissible: false,
+  },
+);
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const alertClasses = computed(() => ({
+  alert: true,
+  [`alert-${props.variant}`]: true,
+}));
+
+function handleClose() {
+  emit("close");
+}
+</script>
+
+<template>
+  <div
+    :class="alertClasses"
+    role="alert"
+  >
+    <div class="alert-content">
+      <slot />
+      
+      <div
+        v-if="$slots.actions"
+        class="alert-actions"
+      >
+        <slot name="actions" />
+      </div>
+    </div>
+
+    <button
+      v-if="dismissible"
+      class="alert-close"
+      type="button"
+      aria-label="Dismiss alert"
+      @click="handleClose"
+    >
+      ×
+    </button>
+  </div>
+</template>

package/src/feedback/Progress.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+type ProgressVariant =
+  | "default"
+  | "success"
+  | "warning"
+  | "danger";
+
+interface Props {
+  value?: number;
+  max?: number;
+  indeterminate?: boolean;
+  variant?: ProgressVariant;
+  showValue?: boolean;
+}
+
+const props = withDefaults(
+  defineProps<Props>(),
+  {
+    value: 0,
+    max: 100,
+    indeterminate: false,
+    variant: "default",
+    showValue: false,
+  },
+);
+
+const percentage = computed(() => {
+  if (props.max <= 0) {
+    return 0;
+  }
+
+  return Math.min(
+    100,
+    Math.max(
+      0,
+      (props.value / props.max) * 100,
+    ),
+  );
+});
+
+const progressClasses = computed(() => ({
+  progress: true,
+  [`progress--${props.variant}`]:
+    true,
+  "progress--indeterminate":
+    props.indeterminate,
+}));
+</script>
+
+<template>
+  <div
+    :class="progressClasses"
+    role="progressbar"
+    :aria-valuemin="indeterminate ? undefined : 0"
+    :aria-valuemax="indeterminate ? undefined : max"
+    :aria-valuenow="
+      indeterminate
+        ? undefined
+        : value
+    "
+  >
+    <div class="progress-track">
+      <div
+        class="progress-value"
+        :style="
+          indeterminate
+            ? undefined
+            : {
+                width: `${percentage}%`,
+              }
+        "
+      />
+    </div>
+
+    <div
+      v-if="showValue"
+      class="progress-label"
+    >
+      <span>
+        <slot />
+      </span>
+
+      <span>
+        {{ Math.round(percentage) }}%
+      </span>
+    </div>
+
+    <slot
+      v-else
+      name="label"
+    />
+  </div>
+</template>