@umbra.ui/core 0.1.0

package/src/components/inputs/StringCapture/StringCapture.vue

@@ -0,0 +1,315 @@
+<script setup lang="ts">
+import { ref, onMounted, nextTick, onUnmounted, watch } from "vue";
+import { IconButton } from "@umbra-ui/core";
+import {
+  offset,
+  flip,
+  shift,
+  size,
+  computePosition,
+  autoUpdate,
+} from "@floating-ui/vue";
+import "./theme.css";
+
+// Props
+export interface Props {
+  modelValue?: string;
+  placeholder?: string;
+  headerLabel?: string;
+  loading?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: "",
+  placeholder: "Enter text...",
+  headerLabel: "Enter Text",
+  loading: false,
+});
+
+// Emits
+const emits = defineEmits<{
+  "update:modelValue": [value: string];
+  submit: [value: string];
+  cancel: [];
+}>();
+
+// State
+const showPopover = ref<boolean>(false);
+const inputValue = ref<string>(props.modelValue || "");
+
+// Watch for changes to modelValue prop
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    inputValue.value = newValue || "";
+  }
+);
+
+// Element references
+const trigger = ref<HTMLElement | null>(null);
+const popup = ref<HTMLElement | null>(null);
+const overlay = ref<HTMLElement | null>(null);
+const input = ref<HTMLInputElement | null>(null);
+
+// Position tracking
+let cleanupAutoUpdate: (() => void) | null = null;
+
+// Lifecycle
+onUnmounted(() => {
+  if (cleanupAutoUpdate) {
+    cleanupAutoUpdate();
+  }
+});
+
+// Event handlers
+const onSubmit = () => {
+  if (!inputValue.value.trim()) return;
+
+  emits("update:modelValue", inputValue.value);
+  emits("submit", inputValue.value);
+  togglePopover();
+};
+
+const onCancel = () => {
+  inputValue.value = props.modelValue || "";
+  emits("cancel");
+  togglePopover();
+};
+
+const onInputKeydown = (event: KeyboardEvent) => {
+  if (event.key === "Enter") {
+    onSubmit();
+  } else if (event.key === "Escape") {
+    onCancel();
+  }
+};
+
+// Popover management
+const togglePopover = () => {
+  showPopover.value = !showPopover.value;
+  if (showPopover.value) {
+    inputValue.value = props.modelValue || "";
+    nextTick(() => {
+      updatePopoverPosition();
+      input.value?.focus();
+    });
+  } else {
+    if (cleanupAutoUpdate) {
+      cleanupAutoUpdate();
+      cleanupAutoUpdate = null;
+    }
+  }
+};
+
+const updatePopoverPosition = async () => {
+  if (!trigger.value || !popup.value) return;
+
+  await nextTick();
+
+  if (cleanupAutoUpdate) {
+    cleanupAutoUpdate();
+  }
+
+  cleanupAutoUpdate = autoUpdate(trigger.value, popup.value, () => {
+    computePosition(trigger.value!, popup.value!, {
+      placement: "bottom-start",
+      middleware: [
+        offset(4),
+        flip(),
+        shift(),
+        size({
+          padding: 20,
+          apply({
+            availableWidth,
+            availableHeight,
+            elements,
+          }: {
+            availableWidth: number;
+            availableHeight: number;
+            elements: {
+              floating: {
+                style: {
+                  maxWidth: string;
+                  maxHeight: string;
+                };
+              };
+            };
+          }) {
+            Object.assign(elements.floating.style, {
+              maxWidth: `${availableWidth}px`,
+              maxHeight: `${availableHeight}px`,
+            });
+          },
+        }),
+      ],
+    }).then(({ x, y }) => {
+      if (popup.value) {
+        Object.assign(popup.value.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      }
+    });
+  });
+};
+
+const handleOverlayClick = () => {
+  togglePopover();
+};
+
+// Expose togglePopover for external use
+defineExpose({
+  togglePopover,
+});
+</script>
+
+<template>
+  <div :class="$style.container">
+    <!-- Slot for the trigger button -->
+    <div
+      ref="trigger"
+      @click="togglePopover"
+      :class="showPopover ? $style.triggerActive : null"
+    >
+      <slot />
+    </div>
+
+    <!-- Teleport the overlay and popup to body -->
+    <Teleport to="body">
+      <Transition name="overlay">
+        <div
+          v-if="showPopover"
+          :class="$style.overlay"
+          ref="overlay"
+          @click="handleOverlayClick"
+        ></div>
+      </Transition>
+      <div v-if="showPopover" :class="$style.popup" ref="popup">
+        <div :class="$style.header">
+          <p class="callout">{{ headerLabel }}</p>
+        </div>
+        <div :class="$style.input_container">
+          <input
+            class="callout"
+            type="text"
+            v-model="inputValue"
+            :placeholder="placeholder"
+            @keydown="onInputKeydown"
+            ref="input"
+          />
+          <IconButton
+            iconName="circle-check"
+            :buttonSize="18"
+            buttonType="plain"
+            buttonStyle="#eeeeee"
+            @click="onSubmit"
+            :style="{
+              opacity: inputValue.length > 0 ? 1 : 0.33,
+              pointerEvents: inputValue.length > 0 ? 'auto' : 'none',
+            }"
+          />
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style module>
+.container {
+  display: inline-block;
+}
+
+.triggerActive {
+  position: relative;
+  z-index: 1000; /* Ensure trigger appears above the overlay (z-index: 999) */
+}
+
+.popup {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: var(--stringcapture-popup-bg);
+  border-radius: 0.353rem;
+  min-width: 18.824rem;
+  overflow: hidden;
+  z-index: 1001;
+  box-shadow: 0px 1px 0px 0px var(--stringcapture-popup-shadow),
+    inset 0px 1px 0px 0px var(--stringcapture-popup-inset-shadow);
+  animation: popupFadeIn 0.2s ease-out;
+  border: var(--stringcapture-popup-border);
+}
+
+@keyframes popupFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-8px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.header {
+  background-color: var(--stringcapture-header-bg);
+  border-bottom: 1px solid var(--stringcapture-header-border);
+  padding-left: 0.706rem;
+  padding-right: 0.706rem;
+  min-height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+
+.header p {
+  opacity: 1;
+  color: var(--stringcapture-header-text);
+}
+
+.input_container {
+  background-color: var(--stringcapture-input-container-bg);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.706rem;
+  padding-left: 0.706rem;
+  padding-right: 0.706rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.input_container input {
+  background-color: transparent;
+  border: none;
+  outline: none;
+  color: var(--stringcapture-input-text);
+  width: 100%;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--stringcapture-overlay-bg);
+  opacity: 0.7;
+  z-index: 999;
+}
+
+/* Transition classes for overlay (use global since we're in CSS modules) */
+:global(.overlay-enter-active),
+:global(.overlay-leave-active) {
+  transition: opacity 0.2s ease-out;
+}
+
+:global(.overlay-enter-from),
+:global(.overlay-leave-to) {
+  opacity: 0;
+}
+
+:global(.overlay-enter-to),
+:global(.overlay-leave-from) {
+  opacity: 0.7;
+}
+</style>

package/src/components/inputs/StringCapture/theme.css

@@ -0,0 +1,86 @@
+/* Light theme using Colors */
+:root {
+  /* StringCapture popup colors */
+  --stringcapture-popup-bg: #ffffff; /* white - light background for light mode */
+  --stringcapture-popup-border: 1px solid rgba(0, 0, 0, 0.1); /* border for light mode */
+  --stringcapture-popup-shadow: transparent;
+  --stringcapture-popup-inset-shadow: rgba(
+    255,
+    255,
+    255,
+    0.8
+  ); /* whiteA8 - inset highlight for light mode */
+
+  /* StringCapture header colors */
+  --stringcapture-header-bg: rgba(
+    0,
+    0,
+    0,
+    0.05
+  ); /* blackA6 - very light background for light mode */
+  --stringcapture-header-border: rgba(
+    0,
+    0,
+    0,
+    0.1
+  ); /* blackA6 - lighter border for light mode */
+  --stringcapture-header-text: #1f2937; /* gray8 - dark text for light mode */
+
+  /* StringCapture input container colors */
+  --stringcapture-input-container-bg: #ffffff; /* white - light background for light mode */
+
+  /* StringCapture input colors */
+  --stringcapture-input-text: #1f2937; /* gray8 - dark text for light mode */
+
+  /* StringCapture overlay colors */
+  --stringcapture-overlay-bg: rgba(
+    0,
+    0,
+    0,
+    0.4
+  ); /* blackA8 - lighter overlay for light mode */
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* StringCapture popup colors */
+  --stringcapture-popup-bg: #484848; /* Original dark mode value */
+  --stringcapture-popup-border: none; /* no border for dark mode */
+  --stringcapture-popup-shadow: rgba(
+    0,
+    0,
+    0,
+    0.21
+  ); /* Original dark mode value */
+  --stringcapture-popup-inset-shadow: rgba(
+    255,
+    255,
+    255,
+    0.1
+  ); /* Original dark mode value */
+
+  /* StringCapture header colors */
+  --stringcapture-header-bg: rgba(
+    255,
+    255,
+    255,
+    0.1
+  ); /* Original dark mode value */
+  --stringcapture-header-border: rgba(
+    0,
+    0,
+    0,
+    0.25
+  ); /* Original dark mode value */
+  --stringcapture-header-text: #eeeeee; /* Original dark mode value */
+
+  /* StringCapture input container colors */
+  --stringcapture-input-container-bg: #484848; /* Original dark mode value */
+
+  /* StringCapture input colors */
+  --stringcapture-input-text: #eeeeee; /* Original dark mode value */
+
+  /* StringCapture overlay colors */
+  --stringcapture-overlay-bg: rgba(0, 0, 0, 0.7); /* Original dark mode value */
+}