minm-ui 1.0.0

package/src/components/UiPagination.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import UiIcon from './UiIcon.vue';
+
+const props = defineProps<{
+  currentPage: number;
+  lastPage: number;
+  total?: number;
+  from?: number | null;
+  to?: number | null;
+}>();
+
+const emit = defineEmits<{ (e: 'change', page: number): void }>();
+
+// Compact page window around the current page.
+const pages = computed(() => {
+  const { currentPage: c, lastPage: l } = props;
+  const out: (number | '…')[] = [];
+  const push = (n: number | '…') => out.push(n);
+  const window = 1;
+  for (let p = 1; p <= l; p++) {
+    if (p === 1 || p === l || (p >= c - window && p <= c + window)) push(p);
+    else if (out[out.length - 1] !== '…') push('…');
+  }
+  return out;
+});
+
+function go(p: number) {
+  if (p >= 1 && p <= props.lastPage && p !== props.currentPage) emit('change', p);
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center justify-between gap-3 px-4 py-3 text-sm">
+    <p class="text-muted">
+      <span v-if="total != null" class="tabular">
+        Showing <span class="font-medium text-content">{{ from ?? 0 }}</span>–<span class="font-medium text-content">{{ to ?? 0 }}</span>
+        of <span class="font-medium text-content">{{ total }}</span>
+      </span>
+    </p>
+    <div v-if="lastPage > 1" class="flex items-center gap-1">
+      <button
+        class="flex h-8 w-8 items-center justify-center rounded-md border border-border text-muted transition-colors hover:bg-surface-hover disabled:opacity-40"
+        :disabled="currentPage <= 1"
+        @click="go(currentPage - 1)"
+      >
+        <UiIcon name="chevron-left" :size="16" />
+      </button>
+      <button
+        v-for="(p, i) in pages"
+        :key="i"
+        :disabled="p === '…'"
+        :class="[
+          'tabular flex h-8 min-w-8 items-center justify-center rounded-md px-2 text-[13px] font-medium transition-colors',
+          p === currentPage ? 'bg-accent text-accent-fg' : p === '…' ? 'text-subtle' : 'border border-border text-muted hover:bg-surface-hover',
+        ]"
+        @click="typeof p === 'number' && go(p)"
+      >
+        {{ p }}
+      </button>
+      <button
+        class="flex h-8 w-8 items-center justify-center rounded-md border border-border text-muted transition-colors hover:bg-surface-hover disabled:opacity-40"
+        :disabled="currentPage >= lastPage"
+        @click="go(currentPage + 1)"
+      >
+        <UiIcon name="chevron-right" :size="16" />
+      </button>
+    </div>
+  </div>
+</template>

package/src/components/UiSelect.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import UiIcon from './UiIcon.vue';
+
+interface Option { label: string; value: string | number | boolean | null }
+
+defineProps<{
+  modelValue?: string | number | boolean | null;
+  label?: string;
+  options: Option[];
+  placeholder?: string;
+  error?: string;
+  hint?: string;
+  disabled?: boolean;
+  required?: boolean;
+}>();
+
+defineEmits<{ (e: 'update:modelValue', value: string): void }>();
+</script>
+
+<template>
+  <label class="block">
+    <span v-if="label" class="mb-1.5 block text-[13px] font-medium text-content">
+      {{ label }}
+      <span v-if="required" class="text-danger">*</span>
+    </span>
+    <div class="relative">
+      <select
+        :value="modelValue as any"
+        :disabled="disabled"
+        :class="[
+          'h-10 w-full appearance-none rounded-md border bg-surface pl-3 pr-9 text-sm text-content transition-colors',
+          'focus:outline-none focus:ring-2 focus:ring-[var(--ring)] disabled:opacity-60',
+          error ? 'border-danger' : 'border-border focus:border-accent',
+        ]"
+        @change="$emit('update:modelValue', ($event.target as HTMLSelectElement).value)"
+      >
+        <option v-if="placeholder" value="" disabled :selected="modelValue === '' || modelValue == null">
+          {{ placeholder }}
+        </option>
+        <option v-for="opt in options" :key="String(opt.value)" :value="opt.value as any">
+          {{ opt.label }}
+        </option>
+      </select>
+      <UiIcon
+        name="chevron-down"
+        :size="17"
+        class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-subtle"
+      />
+    </div>
+    <p v-if="error" class="mt-1 text-xs text-danger">{{ error }}</p>
+    <p v-else-if="hint" class="mt-1 text-xs text-muted">{{ hint }}</p>
+  </label>
+</template>

package/src/components/UiSkeleton.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ width?: string; height?: string; rounded?: string }>(), {
+  height: '1rem',
+});
+</script>
+
+<template>
+  <span
+    class="relative block overflow-hidden bg-surface-2"
+    :style="{ width: width || '100%', height, borderRadius: rounded || 'var(--radius-sm)' }"
+  >
+    <span
+      class="absolute inset-0 -translate-x-full"
+      style="background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--border-strong) 40%, transparent), transparent); animation: shimmer 1.5s infinite;"
+    />
+  </span>
+</template>

package/src/components/UiSpinner.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import UiIcon from './UiIcon.vue';
+withDefaults(defineProps<{ size?: number; label?: string }>(), { size: 22 });
+</script>
+
+<template>
+  <div class="flex items-center justify-center gap-2 text-muted">
+    <UiIcon name="refresh" :size="size" class="animate-spin" />
+    <span v-if="label" class="text-sm">{{ label }}</span>
+  </div>
+</template>

package/src/components/UiStatTile.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import UiIcon from './UiIcon.vue';
+
+const props = defineProps<{
+  label: string;
+  value: string | number;
+  icon?: string;
+  tone?: 'accent' | 'success' | 'warning' | 'danger' | 'info';
+  delta?: number | null;      // percentage change; sign drives colour/arrow
+  deltaLabel?: string;
+  hint?: string;
+}>();
+
+const toneBg: Record<string, string> = {
+  accent: 'bg-accent-soft text-accent-soft-fg',
+  success: 'bg-success-bg text-success',
+  warning: 'bg-warning-bg text-warning',
+  danger: 'bg-danger-bg text-danger',
+  info: 'bg-info-bg text-info',
+};
+
+const deltaUp = computed(() => (props.delta ?? 0) >= 0);
+</script>
+
+<template>
+  <div class="rounded-lg border border-border bg-surface p-5 shadow-sm transition-shadow hover:shadow-md">
+    <div class="flex items-start justify-between gap-3">
+      <p class="text-[13px] font-medium text-muted">{{ label }}</p>
+      <span
+        v-if="icon"
+        :class="['flex h-9 w-9 shrink-0 items-center justify-center rounded-lg', toneBg[tone || 'accent']]"
+      >
+        <UiIcon :name="icon" :size="18" />
+      </span>
+    </div>
+    <p class="tabular mt-3 text-[28px] font-semibold leading-none text-content">{{ value }}</p>
+    <div class="mt-2 flex items-center gap-2 text-xs">
+      <span
+        v-if="delta !== null && delta !== undefined"
+        :class="['inline-flex items-center gap-0.5 font-medium', deltaUp ? 'text-success' : 'text-danger']"
+      >
+        <UiIcon :name="deltaUp ? 'trend-up' : 'trend-down'" :size="14" />
+        {{ Math.abs(delta) }}%
+      </span>
+      <span v-if="deltaLabel || hint" class="text-subtle">{{ deltaLabel || hint }}</span>
+    </div>
+  </div>
+</template>

package/src/components/UiTable.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import UiIcon from './UiIcon.vue';
+import UiSkeleton from './UiSkeleton.vue';
+import type { Column } from '../types';
+
+import { computed } from 'vue';
+
+const props = defineProps<{
+  columns: Column[];
+  rows: Record<string, any>[];
+  loading?: boolean;
+  sort?: string;
+  order?: 'asc' | 'desc';
+  rowKey?: string;
+  clickable?: boolean;
+  selectable?: boolean;
+  selected?: (string | number)[];
+}>();
+
+const emit = defineEmits<{
+  (e: 'sort', key: string): void;
+  (e: 'row-click', row: Record<string, any>): void;
+  (e: 'update:selected', ids: (string | number)[]): void;
+}>();
+
+function alignClass(a?: string) {
+  return a === 'right' ? 'text-right' : a === 'center' ? 'text-center' : 'text-left';
+}
+
+function onSort(col: Column) {
+  if (col.sortable) emit('sort', col.key);
+}
+
+const keyOf = (row: Record<string, any>) => row[props.rowKey || 'id'];
+const selectedSet = computed(() => new Set(props.selected ?? []));
+const allSelected = computed(() =>
+  props.rows.length > 0 && props.rows.every((r) => selectedSet.value.has(keyOf(r))));
+
+function toggleRow(row: Record<string, any>) {
+  const id = keyOf(row);
+  const next = new Set(props.selected ?? []);
+  next.has(id) ? next.delete(id) : next.add(id);
+  emit('update:selected', [...next]);
+}
+function toggleAll() {
+  emit('update:selected', allSelected.value ? [] : props.rows.map(keyOf));
+}
+</script>
+
+<template>
+  <div class="overflow-x-auto">
+    <table class="w-full border-collapse text-sm">
+      <thead>
+        <tr class="border-b border-border">
+          <th v-if="selectable" class="w-10 px-4 py-3">
+            <input type="checkbox" class="ui-checkbox" :checked="allSelected" @change="toggleAll" />
+          </th>
+          <th
+            v-for="col in columns"
+            :key="col.key"
+            :style="col.width ? { width: col.width } : undefined"
+            :class="[
+              'whitespace-nowrap px-4 py-3 text-[12px] font-semibold uppercase tracking-wide text-subtle',
+              alignClass(col.align),
+              col.sortable ? 'cursor-pointer select-none hover:text-content' : '',
+            ]"
+            @click="onSort(col)"
+          >
+            <span class="inline-flex items-center gap-1" :class="col.align === 'right' ? 'flex-row-reverse' : ''">
+              {{ col.label }}
+              <UiIcon
+                v-if="col.sortable && sort === col.key"
+                :name="order === 'asc' ? 'chevron-up' : 'chevron-down'"
+                :size="14"
+                class="text-accent"
+              />
+            </span>
+          </th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <!-- Loading skeleton -->
+        <template v-if="loading">
+          <tr v-for="n in 6" :key="`sk-${n}`" class="border-b border-border">
+            <td v-if="selectable" class="px-4 py-3.5"><UiSkeleton width="1rem" height="1rem" /></td>
+            <td v-for="col in columns" :key="col.key" class="px-4 py-3.5">
+              <UiSkeleton :width="col.key === columns[0].key ? '60%' : '80%'" height="0.9rem" />
+            </td>
+          </tr>
+        </template>
+
+        <!-- Rows -->
+        <template v-else>
+          <tr
+            v-for="(row, i) in rows"
+            :key="rowKey ? row[rowKey] : i"
+            :class="[
+              'border-b border-border transition-colors',
+              selectedSet.has(keyOf(row)) ? 'bg-accent-soft/40' : '',
+              clickable ? 'cursor-pointer hover:bg-surface-hover' : 'hover:bg-surface-2',
+            ]"
+            @click="clickable && emit('row-click', row)"
+          >
+            <td v-if="selectable" class="px-4 py-3" @click.stop>
+              <input type="checkbox" class="ui-checkbox" :checked="selectedSet.has(keyOf(row))" @change="toggleRow(row)" />
+            </td>
+            <td
+              v-for="col in columns"
+              :key="col.key"
+              :class="['px-4 py-3 align-middle text-content', alignClass(col.align), col.class]"
+            >
+              <slot :name="`cell-${col.key}`" :row="row" :value="row[col.key]">
+                {{ row[col.key] ?? '—' }}
+              </slot>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+
+    <!-- Empty -->
+    <div v-if="!loading && rows.length === 0">
+      <slot name="empty">
+        <div class="px-4 py-12 text-center text-sm text-muted">No records found.</div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ui-checkbox {
+  width: 1rem;
+  height: 1rem;
+  cursor: pointer;
+  accent-color: var(--accent);
+  border-radius: 4px;
+}
+</style>

package/src/components/UiTextarea.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+defineProps<{
+  modelValue?: string;
+  label?: string;
+  placeholder?: string;
+  rows?: number;
+  error?: string;
+  hint?: string;
+  required?: boolean;
+}>();
+
+defineEmits<{ (e: 'update:modelValue', value: string): void }>();
+</script>
+
+<template>
+  <label class="block">
+    <span v-if="label" class="mb-1.5 block text-[13px] font-medium text-content">
+      {{ label }}
+      <span v-if="required" class="text-danger">*</span>
+    </span>
+    <textarea
+      :value="modelValue"
+      :rows="rows || 3"
+      :placeholder="placeholder"
+      :class="[
+        'w-full rounded-md border bg-surface px-3 py-2 text-sm text-content transition-colors resize-y',
+        'placeholder:text-subtle focus:outline-none focus:ring-2 focus:ring-[var(--ring)]',
+        error ? 'border-danger' : 'border-border focus:border-accent',
+      ]"
+      @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
+    />
+    <p v-if="error" class="mt-1 text-xs text-danger">{{ error }}</p>
+    <p v-else-if="hint" class="mt-1 text-xs text-muted">{{ hint }}</p>
+  </label>
+</template>

package/src/components/UiToaster.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { useToast } from '../composables/useToast';
+import UiIcon from './UiIcon.vue';
+
+const toast = useToast();
+
+const config = {
+  success: { icon: 'check_circle', class: 'text-success', bar: 'bg-success' },
+  error: { icon: 'alert', class: 'text-danger', bar: 'bg-danger' },
+  warning: { icon: 'alert', class: 'text-warning', bar: 'bg-warning' },
+  info: { icon: 'bell', class: 'text-info', bar: 'bg-info' },
+} as const;
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="pointer-events-none fixed bottom-4 right-4 z-[100] flex w-full max-w-sm flex-col gap-2.5">
+      <TransitionGroup name="toast">
+        <div
+          v-for="t in toast.items"
+          :key="t.id"
+          class="pointer-events-auto relative flex items-start gap-3 overflow-hidden rounded-lg border border-border bg-surface p-4 pr-10 shadow-lg"
+        >
+          <span :class="['absolute inset-y-0 left-0 w-1', config[t.type].bar]" />
+          <UiIcon :name="config[t.type].icon" :size="19" :class="['mt-0.5 shrink-0', config[t.type].class]" />
+          <div class="min-w-0">
+            <p class="text-sm font-semibold text-content">{{ t.title }}</p>
+            <p v-if="t.message" class="mt-0.5 text-[13px] text-muted">{{ t.message }}</p>
+          </div>
+          <button
+            class="absolute right-2 top-2 rounded-md p-1 text-subtle transition-colors hover:bg-surface-hover hover:text-content"
+            @click="toast.dismiss(t.id)"
+          >
+            <UiIcon name="x" :size="15" />
+          </button>
+        </div>
+      </TransitionGroup>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.toast-enter-active, .toast-leave-active { transition: all 0.3s cubic-bezier(0.16,1,0.3,1); }
+.toast-enter-from { opacity: 0; transform: translateX(100%); }
+.toast-leave-to { opacity: 0; transform: translateX(100%); }
+.toast-move { transition: transform 0.3s ease; }
+</style>

package/src/composables/useToast.ts

@@ -0,0 +1,43 @@
+import { reactive } from 'vue';
+
+export type ToastType = 'success' | 'error' | 'info' | 'warning';
+
+export interface Toast {
+  id: number;
+  type: ToastType;
+  title: string;
+  message?: string;
+}
+
+const state = reactive<{ items: Toast[] }>({ items: [] });
+let seq = 0;
+
+function push(type: ToastType, title: string, message?: string, duration = 4000) {
+  const id = ++seq;
+  state.items.push({ id, type, title, message });
+  if (duration > 0) {
+    setTimeout(() => dismiss(id), duration);
+  }
+  return id;
+}
+
+function dismiss(id: number) {
+  const i = state.items.findIndex((t) => t.id === id);
+  if (i !== -1) state.items.splice(i, 1);
+}
+
+/**
+ * Global toast API. Import anywhere:
+ *   const toast = useToast();
+ *   toast.success('Saved', 'Location updated.');
+ */
+export function useToast() {
+  return {
+    items: state.items,
+    dismiss,
+    success: (title: string, message?: string) => push('success', title, message),
+    error: (title: string, message?: string) => push('error', title, message, 6000),
+    info: (title: string, message?: string) => push('info', title, message),
+    warning: (title: string, message?: string) => push('warning', title, message),
+  };
+}

package/src/index.ts

@@ -0,0 +1,24 @@
+// @confast/ui — shared design system for all Confast web apps.
+export { default as UiIcon } from './components/UiIcon.vue';
+export { default as UiButton } from './components/UiButton.vue';
+export { default as UiInput } from './components/UiInput.vue';
+export { default as UiSelect } from './components/UiSelect.vue';
+export { default as UiTextarea } from './components/UiTextarea.vue';
+export { default as UiBadge } from './components/UiBadge.vue';
+export { default as UiCard } from './components/UiCard.vue';
+export { default as UiStatTile } from './components/UiStatTile.vue';
+export { default as UiSpinner } from './components/UiSpinner.vue';
+export { default as UiSkeleton } from './components/UiSkeleton.vue';
+export { default as UiEmptyState } from './components/UiEmptyState.vue';
+export { default as UiModal } from './components/UiModal.vue';
+export { default as UiDrawer } from './components/UiDrawer.vue';
+export { default as UiTable } from './components/UiTable.vue';
+export { default as UiPagination } from './components/UiPagination.vue';
+export { default as UiToaster } from './components/UiToaster.vue';
+export { default as UiAreaChart } from './components/UiAreaChart.vue';
+export { default as UiBarChart } from './components/UiBarChart.vue';
+export { default as UiDonutChart } from './components/UiDonutChart.vue';
+
+export { useToast } from './composables/useToast';
+export type { Toast, ToastType } from './composables/useToast';
+export type { Column } from './types';