@paraxe/vue 1.0.0

package/src/feedback/Skeleton.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+type SkeletonVariant =
+  | "text"
+  | "heading"
+  | "avatar"
+  | "circle"
+  | "button"
+  | "default";
+
+interface Props {
+  variant?: SkeletonVariant;
+  width?: string;
+  height?: string;
+}
+
+const props = withDefaults(
+  defineProps<Props>(),
+  {
+    variant: "default",
+    width: undefined,
+    height: undefined,
+  },
+);
+
+const skeletonClasses = computed(() => ({
+  skeleton: true,
+  [`skeleton--${props.variant}`]:
+    props.variant !== "default",
+}));
+</script>
+
+<template>
+  <div
+    :class="skeletonClasses"
+    :style="{
+      width: props.width,
+      height: props.height,
+    }"
+    aria-hidden="true"
+  />
+</template>

package/src/feedback/Toast.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import {
+  onBeforeUnmount,
+  ref,
+  watch,
+} from "vue";
+
+type ToastVariant =
+  | "info"
+  | "success"
+  | "warning"
+  | "danger";
+
+interface Props {
+  modelValue?: boolean;
+  title?: string;
+  variant?: ToastVariant;
+  duration?: number;
+  dismissible?: boolean;
+}
+
+const props = withDefaults(
+  defineProps<Props>(),
+  {
+    modelValue: false,
+    title: undefined,
+    variant: "info",
+    duration: 4000,
+    dismissible: true,
+  },
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [
+    value: boolean,
+  ];
+
+  close: [];
+}>();
+
+const visible = ref(
+  props.modelValue,
+);
+
+let timer:
+  | ReturnType<typeof setTimeout>
+  | undefined;
+
+function clearTimer() {
+  if (timer) {
+    clearTimeout(timer);
+    timer = undefined;
+  }
+}
+
+function close() {
+  clearTimer();
+
+  visible.value = false;
+
+  emit(
+    "update:modelValue",
+    false,
+  );
+
+  emit("close");
+}
+
+function startTimer() {
+  clearTimer();
+
+  if (
+    props.duration <= 0 ||
+    !props.modelValue
+  ) {
+    return;
+  }
+
+  timer = setTimeout(() => {
+    close();
+  }, props.duration);
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    visible.value = value;
+
+    if (value) {
+      startTimer();
+    } else {
+      clearTimer();
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+onBeforeUnmount(() => {
+  clearTimer();
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="visible"
+      class="toast"
+      :class="{
+        'toast--visible': visible,
+        [`toast-${variant}`]: true,
+      }"
+      role="status"
+      aria-live="polite"
+    >
+      <div class="toast-content">
+        <div
+          v-if="title"
+          class="toast-title"
+        >
+          {{ title }}
+        </div>
+
+        <div class="toast-message">
+          <slot />
+        </div>
+      </div>
+
+      <button
+        v-if="dismissible"
+        class="toast-close"
+        type="button"
+        aria-label="Dismiss notification"
+        @click="close"
+      >
+        ×
+      </button>
+    </div>
+  </Teleport>
+</template>

package/src/forms/Checkbox.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+  value?: boolean;
+  disabled?: boolean;
+  name?: string;
+  required?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: false,
+  disabled: false,
+  required: false,
+});
+
+const emit = defineEmits<{
+  change: [value: boolean];
+}>();
+
+const checkboxClasses = computed(() => ({
+  checkbox: true,
+  "checkbox--checked": props.value,
+  "checkbox--disabled": props.disabled,
+}));
+</script>
+
+<template>
+  <label :class="checkboxClasses">
+    <input
+      class="checkbox-input"
+      type="checkbox"
+      :name="props.name"
+      :checked="props.value"
+      :disabled="props.disabled"
+      :required="props.required"
+      @change="
+        emit(
+          'change',
+          ($event.target as HTMLInputElement).checked,
+        )
+      "
+    />
+
+    <span
+      class="checkbox-control"
+      aria-hidden="true"
+    />
+
+    <span class="checkbox-label">
+      <slot />
+    </span>
+  </label>
+</template>

package/src/forms/Choice.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import {
+  computed,
+  inject,
+} from "vue";
+
+export interface ChoiceProps {
+  value: string | number;
+  disabled?: boolean;
+}
+
+const props = withDefaults(
+  defineProps<ChoiceProps>(),
+  {
+    disabled: false,
+  },
+);
+
+interface ChoiceGroupContext {
+  multiple: boolean;
+  disabled: boolean;
+
+  isSelected: (
+    value: string | number,
+  ) => boolean;
+
+  toggleChoice: (
+    value: string | number,
+  ) => void;
+}
+
+const injectedGroup = inject<ChoiceGroupContext>(
+  "loba-choice-group",
+);
+
+if (!injectedGroup) {
+  throw new Error(
+    "Choice must be used inside a ChoiceGroup.",
+  );
+}
+
+const group = injectedGroup;
+
+
+const selected = computed(() =>
+  group.isSelected(props.value),
+);
+
+const disabled = computed(
+  () =>
+    props.disabled ||
+    group.disabled,
+);
+
+const classes = computed(() => ({
+  choice: true,
+  "choice--selected":
+    selected.value,
+  "choice--disabled":
+    disabled.value,
+}));
+
+function handleClick() {
+  if (disabled.value) {
+    return;
+  }
+
+  group.toggleChoice(props.value);
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    :class="classes"
+    :disabled="disabled"
+    :aria-pressed="selected"
+    @click="handleClick"
+  >
+    <slot />
+  </button>
+</template>

package/src/forms/ChoiceGroup.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import {
+  computed,
+  provide,
+} from "vue";
+
+export interface ChoiceGroupProps {
+  modelValue?:
+    | string
+    | number
+    | Array<string | number>
+    | null;
+
+  multiple?: boolean;
+  disabled?: boolean;
+}
+
+export interface ChoiceGroupContext {
+  multiple: boolean;
+  disabled: boolean;
+
+  isSelected: (
+    value: string | number,
+  ) => boolean;
+
+  toggleChoice: (
+    value: string | number,
+  ) => void;
+}
+
+const props = withDefaults(
+  defineProps<ChoiceGroupProps>(),
+  {
+    modelValue: null,
+    multiple: false,
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [
+    value:
+      | string
+      | number
+      | Array<string | number>
+      | null,
+  ];
+}>();
+
+const classes = computed(() => ({
+  "choice-group": true,
+  "choice-group--multiple": props.multiple,
+}));
+
+const selectedValues = computed<
+  Array<string | number>
+>(() => {
+  if (Array.isArray(props.modelValue)) {
+    return props.modelValue;
+  }
+
+  if (
+    props.modelValue === null ||
+    props.modelValue === undefined
+  ) {
+    return [];
+  }
+
+  return [props.modelValue];
+});
+
+function isSelected(
+  value: string | number,
+) {
+  return selectedValues.value.includes(
+    value,
+  );
+}
+
+function toggleChoice(
+  value: string | number,
+) {
+  if (props.disabled) {
+    return;
+  }
+
+  if (props.multiple) {
+    const next = new Set(
+      selectedValues.value,
+    );
+
+    if (next.has(value)) {
+      next.delete(value);
+    } else {
+      next.add(value);
+    }
+
+    emit(
+      "update:modelValue",
+      [...next],
+    );
+
+    return;
+  }
+
+  emit(
+    "update:modelValue",
+    value,
+  );
+}
+
+provide<ChoiceGroupContext>(
+  "loba-choice-group",
+  {
+    multiple: props.multiple,
+    disabled: props.disabled,
+    isSelected,
+    toggleChoice,
+  },
+);
+</script>
+
+<template>
+  <div
+    :class="classes"
+    role="group"
+  >
+    <slot />
+  </div>
+</template>

package/src/forms/FormField.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import Label from "../typography/Label.vue";
+import Text from "../typography/Text.vue";
+
+interface Props {
+  id: string;
+  label?: string;
+  description?: string;
+  error?: string;
+  required?: boolean;
+  optional?: boolean;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: undefined,
+  description: undefined,
+  error: undefined,
+  required: false,
+  optional: false,
+  disabled: false,
+});
+</script>
+
+<template>
+  <div
+    class="form-field"
+  >
+    <Label
+      v-if="props.label"
+      :for="props.id"
+      :required="props.required"
+      :optional="props.optional"
+      :disabled="props.disabled"
+    >
+      {{ props.label }}
+    </Label>
+
+    <slot />
+
+    <Text
+      v-if="props.description && !props.error"
+      tone="muted"
+    >
+      {{ props.description }}
+    </Text>
+
+    <Text
+      v-if="props.error"
+      tone="accent"
+    >
+      {{ props.error }}
+    </Text>
+  </div>
+</template>

package/src/forms/Input.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import type {
+  InputType,
+} from "@paraxe/core";
+
+interface Props {
+  type: InputType;
+  placeholder?: string;
+  value?: string;
+  required?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+  error?: boolean;
+  success?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: "text",
+  placeholder: "",
+  value: "",
+  required: false,
+  disabled: false,
+  readonly: false,
+  error: false,
+  success: false,
+});
+
+const emit = defineEmits<{
+  input: [value: string];
+  change: [value: string];
+}>();
+
+const inputClasses = computed(() => ({
+  "input-error": props.error,
+  "input-success": props.success,
+}));
+</script>
+
+<template>
+  <input
+    class="input"
+    :class="inputClasses"
+    :type="props.type"
+    :placeholder="props.placeholder"
+    :value="props.value"
+    :required="props.required"
+    :disabled="props.disabled"
+    :readonly="props.readonly"
+    @input="emit('input', ($event.target as HTMLInputElement).value)"
+    @change="emit('change', ($event.target as HTMLInputElement).value)"
+  />
+</template>

package/src/forms/Radio.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+export interface RadioProps {
+  modelValue?: string | number | null;
+  value: string | number;
+  name: string;
+  disabled?: boolean;
+}
+
+const props = withDefaults(
+  defineProps<RadioProps>(),
+  {
+    modelValue: null,
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [
+    value: string | number,
+  ];
+}>();
+
+const checked = computed(
+  () => props.modelValue === props.value,
+);
+
+const classes = computed(() => ({
+  radio: true,
+  "radio--checked": checked.value,
+  "radio--disabled": props.disabled,
+}));
+
+function handleChange() {
+  emit(
+    "update:modelValue",
+    props.value,
+  );
+}
+</script>
+
+<template>
+  <label :class="classes">
+    <input
+      type="radio"
+      :name="name"
+      :value="value"
+      :checked="checked"
+      :disabled="disabled"
+      class="sr-only"
+      @change="handleChange"
+    />
+
+    <span
+      class="radio-control"
+      aria-hidden="true"
+    />
+
+    <span>
+      <slot />
+    </span>
+  </label>
+</template>

package/src/forms/Select.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+  value?: string;
+  disabled?: boolean;
+  error?: boolean;
+  success?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: "",
+  disabled: false,
+  error: false,
+  success: false,
+});
+
+const emit = defineEmits<{
+  change: [value: string];
+}>();
+
+const selectClasses = computed(() => ({
+  "input-error": props.error,
+  "input-success": props.success,
+}));
+
+function handleChange(event: Event) {
+  const target = event.target as HTMLSelectElement;
+  emit("change", target.value);
+}
+</script>
+
+<template>
+  <select
+    class="select"
+    :class="selectClasses"
+    :value="props.value"
+    :disabled="props.disabled"
+    @change="handleChange"
+  >
+    <slot />
+  </select>
+</template>

package/src/forms/Switch.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+export interface SwitchProps {
+  modelValue?: boolean;
+  disabled?: boolean;
+}
+
+const props = withDefaults(
+  defineProps<SwitchProps>(),
+  {
+    modelValue: false,
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+}>();
+
+const classes = computed(() => ({
+  switch: true,
+  "switch--checked": props.modelValue,
+  "switch--disabled": props.disabled,
+}));
+
+function handleChange(event: Event) {
+  const input = event.target as HTMLInputElement;
+
+  emit(
+    "update:modelValue",
+    input.checked,
+  );
+}
+</script>
+
+<template>
+  <label :class="classes">
+    <input
+      type="checkbox"
+      role="switch"
+      :checked="modelValue"
+      :disabled="disabled"
+      class="sr-only"
+      @change="handleChange"
+    />
+
+    <span
+      class="switch-control"
+      aria-hidden="true"
+    />
+
+    <span>
+      <slot />
+    </span>
+  </label>
+</template>