@umbra.ui/core 0.1.0

package/src/components/dialogs/Toast/useToast.ts

@@ -0,0 +1,127 @@
+// useToast.ts
+import { ref, computed, nextTick, App, inject, provide } from "vue";
+import type { ToastOptions, ToastInstance } from "./types";
+
+const TOAST_INJECTION_KEY = Symbol("toast");
+
+class ToastManager {
+  private toasts = ref<ToastInstance[]>([]);
+  private toastIdCounter = 0;
+  private currentToastStyle = ref<"bar" | "full" | "notification">("bar");
+
+  // Expose reactive toasts
+  public readonly toastList = computed(() => this.toasts.value);
+
+  // Expose reactive toast style
+  public readonly toastStyle = computed(() => this.currentToastStyle.value);
+
+  // Method to set the global toast style
+  setToastStyle(style: "bar" | "full" | "notification") {
+    this.currentToastStyle.value = style;
+  }
+
+  async addToast(options: ToastOptions): Promise<string> {
+    const id = `toast-${++this.toastIdCounter}`;
+    const toast: ToastInstance = {
+      id,
+      show: false,
+      duration: 5000,
+      dismissible: true,
+      position: "Top",
+      toastType: "info",
+      description: options.description || "",
+      iconName: options.iconName || "",
+      ...options,
+    };
+
+    this.toasts.value.push(toast);
+
+    // Trigger show animation on next tick
+    await nextTick();
+    const toastInstance = this.toasts.value.find((t) => t.id === id);
+    if (toastInstance) {
+      toastInstance.show = true;
+    }
+
+    // Auto-dismiss is now handled by the container
+
+    return id;
+  }
+
+  removeToast(id: string) {
+    const index = this.toasts.value.findIndex((t) => t.id === id);
+    if (index > -1) {
+      // Remove immediately - the container has already handled the animation
+      this.toasts.value.splice(index, 1);
+    }
+  }
+
+  removeAllToasts() {
+    // Clear all toasts immediately - container handles animations
+    this.toasts.value = [];
+  }
+
+  // Convenience methods
+  showSuccess = (
+    title: string,
+    description?: string,
+    options?: Partial<ToastOptions>
+  ) => this.addToast({ title, description, toastType: "success", ...options });
+
+  showError = (
+    title: string,
+    description?: string,
+    options?: Partial<ToastOptions>
+  ) => this.addToast({ title, description, toastType: "error", ...options });
+
+  showWarning = (
+    title: string,
+    description?: string,
+    options?: Partial<ToastOptions>
+  ) => this.addToast({ title, description, toastType: "warning", ...options });
+
+  showInfo = (
+    title: string,
+    description?: string,
+    options?: Partial<ToastOptions>
+  ) => this.addToast({ title, description, toastType: "info", ...options });
+}
+
+// Singleton instance
+let toastManager: ToastManager | null = null;
+
+// Plugin for Vue app installation
+export const ToastPlugin = {
+  install(app: App) {
+    if (!toastManager) {
+      toastManager = new ToastManager();
+    }
+    app.provide(TOAST_INJECTION_KEY, toastManager);
+  },
+};
+
+// Composable for components
+export const useToast = () => {
+  // Try to inject first (if using plugin)
+  const injected = inject<ToastManager | null>(TOAST_INJECTION_KEY, null);
+
+  // Fall back to singleton if not using plugin
+  if (!toastManager && !injected) {
+    toastManager = new ToastManager();
+  }
+
+  const manager = injected || toastManager!;
+
+  return {
+    toasts: manager.toastList,
+    toastStyle: manager.toastStyle,
+    addToast: manager.addToast.bind(manager),
+    removeToast: manager.removeToast.bind(manager),
+    removeAllToasts: manager.removeAllToasts.bind(manager),
+    setToastStyle: manager.setToastStyle.bind(manager),
+    showSuccess: manager.showSuccess.bind(manager),
+    showError: manager.showError.bind(manager),
+    showWarning: manager.showWarning.bind(manager),
+    showInfo: manager.showInfo.bind(manager),
+  };
+};

package/src/components/indicators/ProgressBar/ProgressBar.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import "./theme.css";
+
+export interface Props {
+  progress?: number;
+  barType?: "default" | "capsule" | "capline";
+  trackColor?: string;
+  progressColor?: string;
+  height?: string;
+}
+
+const emit = defineEmits(["update:progress"]);
+
+const props = withDefaults(defineProps<Props>(), {
+  progress: 0,
+  barType: "default",
+  trackColor: (props) =>
+    props.barType === "capline"
+      ? "var(--progressbar-track-capline)"
+      : "var(--progressbar-track-default)",
+  progressColor: "var(--progressbar-progress-default)",
+  height: (props) => (props.barType === "default" ? "6px" : "12px"),
+});
+
+const progressStyle = computed(() => ({
+  width: `${Math.max(0, Math.min(100, props.progress!))}%`,
+  backgroundColor: props.progressColor,
+}));
+
+const containerStyle = computed(() => ({
+  backgroundColor: props.trackColor,
+  height: props.height,
+  "--progress": `${props.progress}%`,
+}));
+</script>
+
+<template>
+  <div :class="[$style.container, $style[barType]]" :style="containerStyle">
+    <div :class="$style.progress" :style="progressStyle">
+      <p v-if="parseInt(height) >= 20" class="caption">{{ progress }}%</p>
+    </div>
+  </div>
+</template>
+
+<style module>
+.container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.default {
+  border-radius: 3px;
+}
+
+.capsule {
+  border-radius: 999px;
+}
+
+.capline {
+  border-radius: 999px;
+  border: 0.118rem solid var(--progressbar-border-capline);
+}
+
+.progress {
+  height: 100%;
+  transition: width 0.3s ease-in-out;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 0.294rem;
+}
+
+.default .progress {
+  border-radius: 3px;
+}
+
+.capsule .progress {
+  border-radius: 999px;
+}
+
+.capline .progress {
+  border-radius: 999px;
+  border: 0.2rem solid var(--progressbar-border-progress);
+}
+
+.capline .progress p {
+  color: var(--progressbar-text-capline);
+}
+
+.progress p {
+  cursor: default;
+  user-select: none;
+  opacity: var(--progress);
+  color: var(--progressbar-text-default);
+}
+</style>