@fy-/fws-vue 2.1.43 → 2.1.45

package/components/ui/DefaultNotif.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import type { Component } from 'vue'
-
 import {
   CheckCircleIcon,
   ExclamationTriangleIcon,
   LightBulbIcon,
+  SparklesIcon,
 } from '@heroicons/vue/24/solid'
 import { onMounted, onUnmounted, ref } from 'vue'
 import { useEventBus } from '../../composables/event-bus'
 import ScaleTransition from './transitions/ScaleTransition.vue'
 
+/** Notification interface */
 interface NotifProps {
   imgSrc?: string
   imgIcon?: Component
@@ -18,56 +19,97 @@ interface NotifProps {
   ctaText?: string
   ctaLink?: string
   ctaAction?: () => void
-  type?: 'info' | 'warning' | 'success'
+  /** Add your new 'secret' type */
+  type?: 'info' | 'warning' | 'success' | 'secret'
+  /** Notification timeout in milliseconds */
   time?: number
 }
+
+/** Our global event bus (replace with your own logic if needed) */
 const eventBus = useEventBus()
+
+/** Current displayed notification */
 const currentNotif = ref<NotifProps | null>(null)
-let currentTimeout: any | null = null
+
+/** Progress percentage (0 to 100) for the notification’s life */
+const progress = ref(0)
+
+/** References to setTimeout / setInterval so we can clear them properly */
+let hideTimeout: ReturnType<typeof setTimeout> | null = null
+let progressInterval: ReturnType<typeof setInterval> | null = null
+
+/**
+ * Primary logic when a 'SendNotif' event is called.
+ * - Clears any existing notification first
+ * - Sets up the new notification
+ * - Starts a progress bar
+ */
 function onCall(data: NotifProps) {
-  if (currentNotif.value !== null) {
-    hideNotif()
-  }
-  const actualIcon = ref(data.imgIcon)
-  if (data.imgIcon === undefined) {
-    if (data.type === 'info') {
-      actualIcon.value = LightBulbIcon
-    }
-    else if (data.type === 'warning') {
-      actualIcon.value = ExclamationTriangleIcon
-    }
-    else if (data.type === 'success') {
-      actualIcon.value = CheckCircleIcon
-    }
-  }
+  // If there's an existing notification, remove it first
+  hideNotif()
+
+  // Ensure a minimum of 1s if time is too short or undefined
   if (!data.time || data.time < 1000) {
     data.time = 5000
   }
 
+  // Automatically compute an icon if none is provided
+  if (!data.imgIcon) {
+    if (data.type === 'info') data.imgIcon = LightBulbIcon
+    else if (data.type === 'warning') data.imgIcon = ExclamationTriangleIcon
+    else if (data.type === 'success') data.imgIcon = CheckCircleIcon
+    else if (data.type === 'secret') data.imgIcon = SparklesIcon
+  }
+
+  // Set the new notification
   currentNotif.value = {
-    imgSrc: data.imgSrc,
-    imgIcon: actualIcon.value,
-    title: data.title,
-    content: data.content,
-    ctaText: data.ctaText,
-    ctaLink: data.ctaLink,
-    time: data.time,
-    type: data.type,
-    ctaAction: data.ctaAction,
+    ...data,
   }
 
-  currentTimeout = setTimeout(hideNotif, currentNotif.value.time)
+  // (A) Hide the notification after the specified time
+  hideTimeout = setTimeout(() => hideNotif(), data.time)
+
+  // (B) Animate the progress bar from 0 to 100% within that time
+  progress.value = 0
+  progressInterval = setInterval(() => {
+    if (currentNotif.value && data.time) {
+      // update progress based on a 100ms tick
+      progress.value += (100 / (data.time / 100))
+      // if progress hits or exceeds 100, hide
+      if (progress.value >= 100) {
+        hideNotif()
+      }
+    }
+  }, 100)
 }
 
+/**
+ * Clears everything related to the current notification
+ */
 function hideNotif() {
   currentNotif.value = null
-  if (currentTimeout !== null) {
-    clearTimeout(currentTimeout)
+  progress.value = 0
+
+  if (hideTimeout) {
+    clearTimeout(hideTimeout)
+    hideTimeout = null
+  }
+  if (progressInterval) {
+    clearInterval(progressInterval)
+    progressInterval = null
   }
 }
+
+/**
+ * Setup: Listen to the global event bus
+ */
 onMounted(() => {
   eventBus.on('SendNotif', onCall)
 })
+
+/**
+ * Cleanup: remove event listeners
+ */
 onUnmounted(() => {
   eventBus.off('SendNotif', onCall)
 })
@@ -78,17 +120,20 @@ onUnmounted(() => {
     <div
       v-if="currentNotif !== null"
       id="base-notif"
-      class="p-2 mb-4 fixed bottom-4 right-8 !z-[2000] bg-fv-neutral-50/[.6] dark:bg-neutral-800/[.6]"
+      class="p-2 mb-4 fixed bottom-4 right-8 !z-[2000] bg-fv-neutral-50/[.6] dark:bg-neutral-800/[.6] rounded-lg border"
       role="alert"
       :class="{
-        'text-fv-neutral-800 border border-fv-neutral-300 rounded-lg  dark:text-fv-neutral-400 dark:border-fv-neutral-600':
+        'text-fv-neutral-800 border-fv-neutral-300 dark:text-fv-neutral-400 dark:border-fv-neutral-600':
           currentNotif.type === 'info',
-        'text-red-800 border border-red-300 rounded-lg  dark:text-red-300 dark:border-red-800':
+        'text-red-800 border-red-300 dark:text-red-300 dark:border-red-800':
           currentNotif.type === 'warning',
-        'text-green-800 border border-green-300 rounded-lg  dark:text-green-300 dark:border-green-800':
+        'text-green-800 border-green-300 dark:text-green-300 dark:border-green-800':
           currentNotif.type === 'success',
+        'text-fuchsia-800 border-fuchsia-300 dark:text-fuchsia-300 dark:border-fuchsia-800':
+          currentNotif.type === 'secret',
       }"
     >
+      <!-- Title + icon or image -->
       <div class="flex items-center gap-2">
         <img
           v-if="currentNotif.imgSrc"
@@ -103,11 +148,24 @@ onUnmounted(() => {
         />
         <h3 class="text-lg font-medium" v-text="currentNotif.title" />
       </div>
+
+      <!-- Optional content -->
       <div
         v-if="currentNotif.content"
-        class="mt-2text-sm"
+        class="mt-2 text-sm"
         v-text="currentNotif.content"
       />
+
+      <!-- Progress bar (3px) -->
+      <div class="relative mt-3 h-[3px] bg-gray-200 rounded-full overflow-hidden">
+        <!-- We re-use text color (text-*) as background or define a custom color -->
+        <div
+          class="absolute left-0 top-0 h-full bg-current transition-[width]"
+          :style="{ width: `${progress}%` }"
+        />
+      </div>
+
+      <!-- CTA row (if you need more buttons, just extend it) -->
       <div class="flex justify-end gap-2 pt-3">
         <button
           type="button"
@@ -115,6 +173,7 @@ onUnmounted(() => {
           aria-label="Close"
           @click="hideNotif"
         >
+          <!-- i18n example, or plain text like "Dismiss" -->
           {{ $t("dismiss_cta") }}
         </button>
       </div>

package/components/ui/DefaultTagInput.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useEventBus } from '../../composables/event-bus'
 
+/**
+ * Tag color variants
+ */
 type colorType = 'blue' | 'red' | 'green' | 'purple' | 'orange' | 'neutral'
 
+/**
+ * Define component properties
+ */
 const props = withDefaults(
   defineProps<{
     modelValue: string[]
@@ -14,8 +20,13 @@ const props = withDefaults(
     autofocus?: boolean
     help?: string
     maxLenghtPerTag?: number
+    /** Error string; if present, the border turns red and you can display a helper message */
     error?: string
     copyButton?: boolean
+    /** If true, prevents the user from adding duplicate tags */
+    noDuplicates?: boolean
+    /** If > 0, sets the maximum number of tags allowed */
+    maxTags?: number
   }>(),
   {
     copyButton: false,
@@ -24,12 +35,22 @@ const props = withDefaults(
     label: 'Tags',
     separators: () => [','],
     autofocus: false,
+    noDuplicates: false,
+    maxTags: 0,
   },
 )
 
+/**
+ * Refs & Data
+ */
 const textInput = ref<HTMLElement>()
+const isMaxReached = ref(false)
 
 const emit = defineEmits(['update:modelValue'])
+
+/**
+ * Create a two-way computed property for modelValue
+ */
 const model = computed({
   get: () => props.modelValue,
   set: (items) => {
@@ -37,75 +58,151 @@ const model = computed({
   },
 })
 
+/**
+ * Watch the model to see if maxTags is reached
+ */
+watch(
+  () => model.value.length,
+  (newLength) => {
+    if (props.maxTags && props.maxTags > 0) {
+      isMaxReached.value = newLength >= props.maxTags
+    }
+  },
+  { immediate: true },
+)
+
+/**
+ * Focus on the input if autofocus is enabled
+ */
 onMounted(() => {
   if (props.autofocus) {
     focusInput()
   }
 })
+
+/**
+ * Event Bus example (if you'd like notifications)
+ */
 const eventBus = useEventBus()
+
+/**
+ * Copy the tags to clipboard
+ */
 async function copyText() {
   const text = model.value.join(', ')
   await navigator.clipboard.writeText(text)
+
+  // Example event bus notification
   eventBus.emit('SendNotif', {
-    title: 'Text copied!',
+    title: 'Tags copied!',
     type: 'success',
     time: 2500,
   })
 }
 
-function handleInput(event: any) {
+/**
+ * On each character input, check if user typed a separator
+ */
+function handleInput(event: Event) {
+  const inputEvent = event as InputEvent
+  if (!inputEvent.data) return
   const separatorsRegex = new RegExp(props.separators.join('|'))
-  if (separatorsRegex.test(event.data)) {
+  if (separatorsRegex.test(inputEvent.data)) {
     addTag()
   }
 }
 
+/**
+ * Add a tag by splitting on the separator
+ */
 function addTag() {
-  if (!textInput.value) return
+  if (!textInput.value || isMaxReached.value) return
 
   const separatorsRegex = new RegExp(props.separators.join('|'))
-  if (!textInput.value.textContent) return
-  const newTags = textInput.value.textContent
+  const textContent = textInput.value.textContent?.trim()
+
+  if (!textContent) return
+
+  const newTags = textContent
     .split(separatorsRegex)
     .map((tag: string) => tag.trim())
     .filter((tag: string) => tag.length > 0)
-  model.value.push(...newTags)
+
+  // Remove duplicates if noDuplicates is enabled
+  const filteredTags = props.noDuplicates
+    ? newTags.filter(tag => !model.value.includes(tag))
+    : newTags
+
+  // If maxTags is set, ensure adding tags doesn't exceed the limit
+  if (props.maxTags && props.maxTags > 0) {
+    const slotsAvailable = props.maxTags - model.value.length
+    filteredTags.splice(slotsAvailable)
+  }
+
+  model.value.push(...filteredTags)
   textInput.value.textContent = ''
 }
 
+/**
+ * Remove a tag by index
+ */
 function removeTag(index: number) {
   model.value.splice(index, 1)
   focusInput()
 }
 
+/**
+ * Handle backspace/delete on an empty input
+ */
 function removeLastTag() {
   if (!textInput.value) return
   if (textInput.value.textContent === '') {
+    // If input is empty, remove the last tag
     model.value.pop()
   }
   else {
-    if (!textInput.value.textContent) return
-    textInput.value.textContent = textInput.value.textContent.slice(0, -1)
-
-    const range = document.createRange()
-    const sel = window.getSelection()
-    range.selectNodeContents(textInput.value)
-    range.collapse(false)
-    if (!sel) return
-    sel.removeAllRanges()
-    sel.addRange(range)
+    // Otherwise, remove the last character in the input
+    if (textInput.value.textContent) {
+      textInput.value.textContent = textInput.value.textContent.slice(0, -1)
+    }
+    placeCursorToEnd()
   }
 }
-function focusInput() {
+
+/**
+ * Place the cursor at the end of the contenteditable text
+ */
+function placeCursorToEnd() {
   if (!textInput.value) return
+  const range = document.createRange()
+  const sel = window.getSelection()
+  range.selectNodeContents(textInput.value)
+  range.collapse(false)
+  if (!sel) return
+  sel.removeAllRanges()
+  sel.addRange(range)
+}
 
-  textInput.value.focus()
+/**
+ * Focus the contenteditable input
+ */
+function focusInput() {
+  if (textInput.value) {
+    textInput.value.focus()
+    placeCursorToEnd()
+  }
 }
 
-function handlePaste(e: any) {
-  if (!textInput.value) return
-  // @ts-expect-error: Property 'clipboardData' does not exist on type 'ClipboardEvent'.
-  const text = (e.clipboardData || window.clipboardData).getData('text')
+/**
+ * Handle pasting text
+ */
+function handlePaste(e: ClipboardEvent) {
+  if (!textInput.value || isMaxReached.value) return
+
+  const clipboardData = e.clipboardData ?? (window as any).clipboardData
+  if (!clipboardData) return
+
+  const text = clipboardData.getData('text')
   const separatorsRegex = new RegExp(props.separators.join('|'), 'g')
   const pasteText = text.replace(separatorsRegex, ',')
   textInput.value.textContent += pasteText
@@ -115,16 +212,34 @@ function handlePaste(e: any) {
 </script>
 
 <template>
-  <div>
+  <div class="space-y-1 w-full">
+    <!-- Optional label -->
+    <label
+      v-if="label"
+      :for="`tags_${id}`"
+      class="block text-sm font-medium dark:text-white"
+    >
+      {{ label }}
+      <!-- optional help text -->
+      <span v-if="help" class="ml-1 text-xs text-fv-neutral-500 dark:text-fv-neutral-300">{{ help }}</span>
+    </label>
+
     <div
-      :class="`tags-input ${$props.error ? 'error' : ''}`"
+      class="tags-input" :class="[
+        $props.error ? 'error' : '',
+        isMaxReached ? 'pointer-events-none opacity-75' : '',
+      ]"
+      role="textbox"
+      :aria-label="label || 'Tags input'"
+      :aria-invalid="$props.error ? 'true' : 'false'"
       @click="focusInput"
       @keydown.delete.prevent="removeLastTag"
       @keydown.enter.prevent="addTag"
     >
+      <!-- Render each tag -->
       <span
         v-for="(tag, index) in model"
-        :key="index"
+        :key="`${tag}-${index}`"
         class="tag"
         :class="{
           red: maxLenghtPerTag > 0 && tag.length > maxLenghtPerTag,
@@ -132,13 +247,18 @@ function handlePaste(e: any) {
         }"
       >
         {{ tag }}
-        <button type="button" @click.prevent="removeTag(index)">
+        <button
+          type="button"
+          class="flex items-center"
+          aria-label="Remove tag"
+          @click.prevent="removeTag(index)"
+        >
           <svg
-            class="w-4 h-4"
+            class="w-3 h-3"
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"
-            stroke-width="1.5"
+            stroke-width="2"
             stroke="currentColor"
           >
             <path
@@ -149,18 +269,33 @@ function handlePaste(e: any) {
           </svg>
         </button>
       </span>
+
+      <!-- Contenteditable input for typing/pasting tags -->
       <div
         :id="`tags_${id}`"
         ref="textInput"
-        contenteditable
+        contenteditable="true"
         class="input"
-        placeholder="Add a tag..."
+        :placeholder="isMaxReached
+          ? 'Max tags reached'
+          : 'Type or paste and press Enter...'"
         @input="handleInput"
         @paste.prevent="handlePaste"
       />
     </div>
+
+    <!-- Inline error display if needed -->
+    <p v-if="$props.error" class="text-xs text-red-500 mt-1">
+      {{ $props.error }}
+    </p>
+
+    <!-- Copy button / or any additional actions -->
     <div v-if="copyButton" class="flex justify-end mt-1">
-      <button class="btn neutral small" type="button" @click.prevent="copyText">
+      <button
+        class="btn neutral small"
+        type="button"
+        @click.prevent="copyText"
+      >
         Copy tags
       </button>
     </div>
@@ -168,42 +303,65 @@ function handlePaste(e: any) {
 </template>
 
 <style scoped>
+/* Container for all tags plus input */
 .tags-input {
+  @apply w-full flex flex-wrap gap-2 items-center shadow-sm bg-fv-neutral-50
+    border border-fv-neutral-300 text-fv-neutral-900 text-sm rounded-sm
+    focus-within:ring-fv-primary-500 focus-within:border-fv-primary-500
+    p-2.5 dark:bg-fv-neutral-700 dark:border-fv-neutral-600
+    dark:placeholder-fv-neutral-400 dark:text-white
+    dark:focus-within:ring-fv-primary-500 dark:focus-within:border-fv-primary-500;
   cursor: text;
-  @apply flex flex-wrap gap-2  items-center shadow-sm bg-fv-neutral-50 border border-fv-neutral-300 text-fv-neutral-900 text-sm rounded-sm focus:ring-fv-primary-500 focus:border-fv-primary-500 w-full p-2.5 dark:bg-fv-neutral-700 dark:border-fv-neutral-600 dark:placeholder-fv-neutral-400 dark:text-white dark:focus:ring-fv-primary-500 dark:focus:border-fv-primary-500;
-  &.error {
-    @apply border-red-500  dark:border-red-400 border !important;
-  }
 }
-.tag-label {
-  @apply block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white;
+
+/* Error border */
+.tags-input.error {
+  @apply border-red-500 dark:border-red-400 border !important;
 }
+
+/* Tag styling */
 .tag {
-  @apply inline-flex gap-1   font-medium  px-2.5 py-0.5 rounded text-black dark:text-white;
-  &.blue {
-    @apply bg-blue-400  dark:bg-blue-900;
-  }
-  &.red {
-    @apply bg-red-400  dark:bg-red-900;
-  }
-  &.green {
-    @apply bg-green-400  dark:bg-green-900;
-  }
-  &.purple {
-    @apply bg-purple-400  dark:bg-purple-900;
-  }
-  &.orange {
-    @apply bg-orange-400  dark:bg-orange-900;
-  }
-  &.neutral {
-    @apply bg-fv-neutral-400  dark:bg-fv-neutral-900;
-  }
+  @apply inline-flex gap-1 items-center
+    font-medium px-2.5 py-0.5 rounded text-black
+    dark:text-white cursor-default;
+}
+
+/* Color variants */
+.tag.blue {
+  @apply bg-blue-400 dark:bg-blue-800;
+}
+.tag.red {
+  @apply bg-red-400 dark:bg-red-800;
+}
+.tag.green {
+  @apply bg-green-400 dark:bg-green-800;
+}
+.tag.purple {
+  @apply bg-purple-400 dark:bg-purple-800;
+}
+.tag.orange {
+  @apply bg-orange-400 dark:bg-orange-800;
+}
+.tag.neutral {
+  @apply bg-fv-neutral-400 dark:bg-fv-neutral-900;
 }
 
+/* The editable input area for new tags */
 .input {
-  flex-grow: 1;
-  min-width: 100px;
-  outline: none;
-  border: none;
+  @apply flex-grow min-w-[100px] outline-none border-none break-words;
+}
+
+/* Example button classes */
+.btn {
+  @apply inline-flex items-center justify-center rounded text-sm px-3 py-1
+    border border-transparent font-medium focus:outline-none
+    focus-visible:ring-2 focus-visible:ring-offset-2;
+}
+.btn.small {
+  @apply text-xs px-2 py-1;
+}
+.btn.neutral {
+  @apply bg-fv-neutral-300 hover:bg-fv-neutral-400 text-black
+    dark:bg-fv-neutral-600 dark:hover:bg-fv-neutral-500;
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "2.1.43",
+  "version": "2.1.45",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",