@umbra.ui/core 0.1.0

package/src/components/inputs/Tags/TagCreation.vue

@@ -0,0 +1,219 @@
+//
+================================================================================================
+// SCRIPT //
+================================================================================================
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { gsap } from "gsap";
+import ColorPicker from "../../pickers/ColorPicker/ColorPicker.vue";
+import { Color } from "../../pickers/ColorPicker/colors";
+import { CheckIcon } from "@umbra-ui/icons";
+const props = defineProps({
+  containerID: {
+    type: String,
+    required: true,
+  },
+  initialColor: {
+    type: Object as () => Color,
+    default: { name: "Gray", hex: "#3A3A3C", weight: 900 },
+  },
+  existingTitles: {
+    type: Array as () => string[],
+    default: [],
+  },
+});
+const hasError = ref<boolean>(false);
+const errorTitle = ref<string>("");
+const emits = defineEmits(["onCreate"]);
+const input = ref(null);
+const confirm = ref(null);
+const title = ref<string>("");
+const color = ref<Color>(null);
+const currentHex = () => {
+  return color.value?.hex ?? props.initialColor.hex;
+};
+const originalTitle = ref<string | null>(null);
+const hasChanges = ref<boolean>(false);
+const onChange = () => {
+  if (title.value.trim() !== "") {
+    hasChanges.value = true;
+  } else {
+    hasChanges.value = false;
+  }
+  let opacity = hasChanges.value ? 1 : 0;
+  let scale = hasChanges.value ? 1 : 0.5;
+  if (hasErrors()) {
+    opacity = 0;
+    scale = 0.5;
+  }
+  gsap.to(confirm.value, { duration: 0.3, opacity: opacity, scale: scale });
+};
+const hasErrors = (): boolean => {
+  if (
+    props.existingTitles.some(
+      (t) => t.toLowerCase() === title.value.trim().toLowerCase()
+    )
+  ) {
+    errorTitle.value = "Name Already Used";
+    hasError.value = true;
+    return true;
+  }
+  errorTitle.value = "";
+  hasError.value = false;
+  return false;
+};
+const onConfirm = () => {
+  if (title.value.trim() === "") {
+    console.log("no title.  Ignoring confirm");
+    return;
+  }
+  if (hasErrors()) {
+    console.log("errors present. Ignoring confirm");
+    return;
+  }
+  emits("onCreate", title.value, color.value);
+  reset();
+};
+const onCancel = () => {
+  title.value = originalTitle.value;
+  gsap.to(confirm.value, { duration: 0.3, opacity: 0, scale: 0.5 });
+};
+
+const onColorSelection = (selectedColor: Color) => {
+  color.value = selectedColor;
+};
+
+const reset = () => {
+  title.value = "";
+  color.value = null;
+  originalTitle.value = null;
+  hasChanges.value = false;
+  gsap.to(confirm.value, { duration: 0.3, opacity: 0, scale: 0.5 });
+};
+</script>
+//
+================================================================================================
+// TEMPLATE //
+================================================================================================
+<template>
+  <div :class="$style.container">
+    <div :class="$style.content">
+      <ColorPicker
+        :containerID="$props.containerID"
+        :pickerOffsetX="-8"
+        @onColorSelect="onColorSelection"
+        :buttonStyle="{ backgroundColor: currentHex() }"
+      />
+      <input
+        :class="[$style.field, 'body']"
+        type="text"
+        placeholder="Type Tag Name"
+        v-model="title"
+        @keydown.enter="onConfirm"
+        @keydown.escape="onCancel"
+        @input="onChange"
+        ref="input"
+      />
+      <div :class="$style.confirm_edit" ref="confirm">
+        <div :class="$style.confirm_edit_background"></div>
+        <CheckIcon
+          :size="16"
+          :style="{
+            color:
+              'rgba(0, 0, 255, 0.25)' /* TODO: Fix color - was var(--TagCreation_confirmEditBackground_backgroundColor) */,
+          }"
+          @click="onConfirm"
+        />
+      </div>
+    </div>
+    <div v-if="hasError" :class="$style.error">
+      <p class="caption">{{ errorTitle }}</p>
+    </div>
+  </div>
+</template>
+//
+================================================================================================
+// STYLE //
+================================================================================================
+<style module>
+.container {
+  background-color: rgba(
+    0,
+    0,
+    255,
+    0.25
+  ); /* TODO: Fix color - was var(--TagCreation_container_backgroundColor) */
+}
+.content {
+  min-height: 2.588rem;
+  padding-left: 0.588rem;
+  padding-right: 0.588rem;
+  border-radius: 0.47rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.confirm_edit {
+  display: grid;
+  grid-template-areas: "content";
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+}
+.confirm_edit_background {
+  grid-area: content;
+  background-color: rgba(
+    0,
+    0,
+    255,
+    0.25
+  ); /* TODO: Fix color - was var(--TagCreation_confirmEditBackground_backgroundColor) */
+  width: 1.176rem;
+  height: 1.176rem;
+  align-self: center;
+  justify-self: center;
+  border-radius: 999px;
+}
+.confirm_edit img {
+  grid-area: content;
+  border-radius: 999px;
+  width: 1.647rem;
+  height: 1.647rem;
+  filter: brightness(0) saturate(100%) invert(39%) sepia(45%) saturate(6266%)
+    hue-rotate(201deg) brightness(109%) contrast(101%);
+}
+.field {
+  background-color: rgba(
+    0,
+    0,
+    255,
+    0.25
+  ); /* TODO: Fix color - was var(--TagCreation_field_backgroundColor) */
+  color: rgba(
+    0,
+    0,
+    255,
+    0.25
+  ); /* TODO: Fix color - was var(--TagCreation_field_color) */
+  border: none;
+  padding-left: 0.706rem;
+}
+input:focus {
+  outline: none;
+}
+.error {
+  padding-left: 0.588rem;
+  padding-right: 0.588rem;
+  padding-bottom: 0.588rem;
+}
+.error p {
+  color: rgba(
+    0,
+    0,
+    255,
+    0.25
+  ); /* TODO: Fix color - was var(--TagCreation_errorP_color) */
+}
+</style>

package/src/components/inputs/Tags/TagPicker.vue

@@ -0,0 +1,380 @@
+<script setup lang="ts">
+import { computed, ref, watch, nextTick } from "vue";
+import { TagItem, generateTagStyle } from "./types";
+import { ArrowTurnLeftIcon } from "@umbra-ui/icons";
+import "./theme.css";
+
+// - Props (Pure Data)
+export interface Props {
+  allTags: TagItem[];
+  selectedTags: TagItem[];
+  query: string;
+  matchIndex: number;
+  canCreateTag?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  allTags: () => [],
+  selectedTags: () => [],
+  query: "",
+  matchIndex: -1,
+  canCreateTag: false,
+});
+
+// - Emits (Pure Actions)
+const emits = defineEmits<{
+  "tag-select": [tag: TagItem];
+  "tag-create": [title: string];
+  "update:query": [query: string];
+  "update:matchIndex": [index: number];
+  quit: [];
+}>();
+
+// - Element References
+const tagListRef = ref<HTMLElement | null>(null);
+const createBarRef = ref<HTMLElement | null>(null);
+const containerRef = ref<HTMLElement | null>(null);
+
+// Helper function to get tag style
+const getTagStyle = (tag: TagItem) => {
+  if (tag.style) {
+    return generateTagStyle(tag.style);
+  }
+  // Default style if none provided
+  return generateTagStyle({
+    variant: "default",
+    colorScheme: "#6b7280",
+    size: "md",
+  });
+};
+
+const availableTags = computed(() => {
+  if (props.allTags === undefined) {
+    return [];
+  }
+  return props.allTags.filter(
+    (tag) =>
+      !props.selectedTags.some(
+        (selectedTag) =>
+          selectedTag.title.toLowerCase() === tag.title.toLowerCase()
+      )
+  );
+});
+
+const matches = computed(() => {
+  const lowercaseQuery = props.query.toLowerCase().trim();
+  return availableTags.value
+    .filter((tag) => tag.title.toLowerCase().includes(lowercaseQuery))
+    .sort((a, b) =>
+      a.title.localeCompare(b.title, "en", { sensitivity: "base" })
+    );
+});
+
+const showCreateBar = computed(() => {
+  /*
+  if (props.matchIndex !== -1) {
+    return false;
+  }
+  */
+  return props.canCreateTag;
+});
+
+const queryMatchesTag = computed(() => {
+  return matches.value.some(
+    (tag) => tag.title.toLowerCase().trim() === props.query.toLowerCase().trim()
+  );
+});
+
+const queryAlreadyAdded = computed(() => {
+  return props.selectedTags.some(
+    (tag) => tag.title.toLowerCase().trim() === props.query.toLowerCase().trim()
+  );
+});
+
+const subheaderTitle = computed(() => {
+  return props.query.trim() === "" ? "Showing All Tags" : "Tags Matching";
+});
+
+const createTitle = computed(() => {
+  return queryAlreadyAdded.value ? "Already Added" : "Create Tag";
+});
+
+const isCreateOptionSelected = computed(() => {
+  return props.canCreateTag && props.matchIndex === matches.value.length;
+});
+
+const onTagClick = (tag: TagItem) => {
+  emits("tag-select", tag);
+  emits("update:query", "");
+  emits("update:matchIndex", -1);
+};
+
+const onCreateClick = () => {
+  if (!queryAlreadyAdded.value && props.query.trim()) {
+    emits("tag-create", props.query);
+    emits("update:query", "");
+    emits("update:matchIndex", -1);
+  }
+};
+
+// Scroll selected item into view
+const scrollSelectedIntoView = () => {
+  nextTick(() => {
+    if (props.matchIndex === -1) return;
+
+    let selectedElement: HTMLElement | null = null;
+
+    if (isCreateOptionSelected.value && createBarRef.value) {
+      selectedElement = createBarRef.value;
+    } else if (props.matchIndex < matches.value.length && containerRef.value) {
+      const tagElements =
+        containerRef.value.querySelectorAll("[data-tag-index]");
+      selectedElement = tagElements[props.matchIndex] as HTMLElement;
+    }
+
+    if (selectedElement && containerRef.value) {
+      // Calculate if element is in view
+      const containerRect = containerRef.value.getBoundingClientRect();
+      const elementRect = selectedElement.getBoundingClientRect();
+
+      // Only scroll if element is not fully visible
+      if (
+        elementRect.top < containerRect.top ||
+        elementRect.bottom > containerRect.bottom
+      ) {
+        selectedElement.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+        });
+      }
+    }
+  });
+};
+
+// Watch for matchIndex changes to scroll into view
+watch(
+  () => props.matchIndex,
+  () => {
+    scrollSelectedIntoView();
+  }
+);
+
+// Determine if a specific tag is highlighted
+const isTagHighlighted = (index: number) => {
+  // Highlighted if explicitly selected via arrow keys
+  if (index === props.matchIndex) {
+    return true;
+  }
+
+  // Highlighted if it's an exact match and nothing is selected with arrows
+  if (props.matchIndex === -1 && props.query !== "" && matches.value[index]) {
+    return (
+      props.query.toLowerCase().trim() ===
+      matches.value[index].title.toLowerCase()
+    );
+  }
+
+  return false;
+};
+</script>
+
+<template>
+  <div :class="$style.container" ref="containerRef">
+    <div v-if="matches.length > 0" :class="$style.subheader">
+      <p :class="[$style.label, 'callout']">{{ subheaderTitle }}</p>
+      <p :class="[$style.value, 'callout']">
+        {{ query.trim() === "" ? "" : `"${query}"` }}
+      </p>
+    </div>
+    <div v-if="matches.length > 0" :class="$style.tag_list" ref="tagListRef">
+      <div
+        v-for="(tag, index) in matches"
+        :key="index"
+        :id="tag.title"
+        :data-tag-index="index"
+        :class="[
+          $style.tag,
+          isTagHighlighted(index) ? $style.tag_selected : '',
+        ]"
+        @click="onTagClick(tag)"
+      >
+        <div
+          :class="$style.circle"
+          :style="{ backgroundColor: getTagStyle(tag).container.color }"
+        ></div>
+        <p>{{ tag.title }}</p>
+        <ArrowTurnLeftIcon
+          v-if="isTagHighlighted(index)"
+          :size="16"
+          alt="return key"
+        />
+      </div>
+    </div>
+    <div
+      v-if="matches.length === 0 && query.trim() === ''"
+      :class="$style.empty_state"
+    >
+      <p class="callout">No available tags</p>
+    </div>
+    <div
+      v-if="showCreateBar"
+      ref="createBarRef"
+      :class="[
+        $style.create_tag,
+        isCreateOptionSelected ? $style.create_tag_selected : '',
+      ]"
+      :style="{
+        backgroundColor: queryAlreadyAdded
+          ? 'var(--tagpicker-create-bg)'
+          : isCreateOptionSelected
+          ? 'var(--tagpicker-create-selected-bg)'
+          : 'var(--tagpicker-create-bg)',
+      }"
+      @click="onCreateClick"
+    >
+      <div :class="$style.create_tag_labels">
+        <p
+          class="callout"
+          :style="{
+            color: queryAlreadyAdded
+              ? 'var(--tagpicker-create-error-text)'
+              : 'var(--tagpicker-create-text)',
+          }"
+        >
+          {{ createTitle }}
+        </p>
+        <p
+          class="callout"
+          :style="{
+            color: queryAlreadyAdded
+              ? 'var(--tagpicker-create-text)'
+              : 'var(--tagpicker-create-text)',
+          }"
+        >
+          "{{ query }}"
+        </p>
+      </div>
+      <ArrowTurnLeftIcon :size="16" color="#eeeeee" alt="return key" />
+    </div>
+  </div>
+</template>
+
+<style module>
+.container {
+  background-color: var(--tagpicker-container-bg);
+  border-radius: 0.471rem;
+  min-width: 18.824rem;
+  max-height: 20rem;
+  overflow-y: auto;
+  box-shadow: 0px 1px 0px 0px var(--tagpicker-container-shadow),
+    inset 0px 1px 0px 0px var(--tagpicker-container-inset-shadow);
+}
+.subheader {
+  padding-top: 0.412rem;
+  padding-bottom: 0.412rem;
+  padding-left: 0.706rem;
+  padding-right: 0.706rem;
+  display: flex;
+  align-items: center;
+  gap: 0.235rem;
+  background-color: var(--tagpicker-subheader-bg);
+  border-bottom: 1px solid var(--tagpicker-subheader-border);
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  color: var(--tagpicker-subheader-text);
+}
+.label {
+  color: var(--tagpicker-subheader-label);
+}
+.value {
+  font-weight: 700;
+  font-variation-settings: "wght" 700;
+}
+.tag_list {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+.tag_list > :last-child {
+  border-bottom: none;
+}
+.tag {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: 0.588rem;
+  padding-top: 0.588rem;
+  padding-bottom: 0.588rem;
+  padding-left: 0.882rem;
+  padding-right: 0.882rem;
+  cursor: default;
+  user-select: none;
+  border-bottom: 1px solid var(--tagpicker-tag-border);
+  transition: background-color 0.15s ease;
+  color: var(--tagpicker-tag-text);
+}
+.tag:hover {
+  background-color: var(--tagpicker-tag-hover-bg);
+}
+.circle {
+  width: 0.588rem;
+  height: 0.588rem;
+  border-radius: 999px;
+}
+.tag_selected {
+  background-color: var(--tagpicker-tag-selected-bg);
+}
+.tag_selected > :last-child {
+  margin-left: auto;
+  width: 0.941rem;
+}
+.tag_selected:hover {
+  background-color: var(--tagpicker-tag-selected-bg);
+}
+.empty_state {
+  padding: 1.5rem;
+  text-align: center;
+  color: var(--tagpicker-empty-text);
+}
+.create_tag {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.412rem;
+  padding-left: 0.706rem;
+  padding-right: 0.706rem;
+  padding-top: 0.412rem;
+  padding-bottom: 0.412rem;
+  position: sticky;
+  bottom: 0;
+  border-top: 1px solid var(--tagpicker-create-border);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+.create_tag:hover {
+  background-color: var(--tagpicker-create-hover-bg);
+}
+.create_tag_selected {
+  background-color: var(--tagpicker-create-selected-bg);
+}
+.create_tag_selected:hover {
+  background-color: var(--tagpicker-create-selected-bg);
+}
+.create_tag_labels {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: 0.412rem;
+}
+.create_tag_labels > :first-child {
+  opacity: 0.7;
+}
+.create_tag_labels > :last-child {
+  font-weight: 700;
+  font-variation-settings: "wght" 700;
+}
+.create_tag > img {
+  width: 0.941rem;
+}
+</style>