@fy-/fws-vue 0.3.22 → 0.3.24

package/components/ui/DefaultInput.vue

@@ -3,7 +3,7 @@ import { LinkIcon } from "@heroicons/vue/24/solid";
 import { computed, ref, toRef } from "vue";
 import type { ErrorObject } from "@vuelidate/core";
 import { useTranslation } from "../../composables/translations";
-
+import DefaultTagInput from "./DefaultTagInput.vue";
 type modelValueType = string | number | string[] | number[] | undefined;
 
 type checkboxValueType = any[] | Set<any> | undefined | boolean;
@@ -25,6 +25,7 @@ const props = withDefaults(
     options?: string[][];
     help?: string;
     error?: string;
+    color?: string;
     errorVuelidate?: ErrorObject[];
     disabled?: boolean;
   }>(),
@@ -152,11 +153,21 @@ defineExpose({ focus, blur, getInputRef });
             @blur="handleBlur"
           />
         </div>
+        <div v-if="type == 'chips'">
+          <!-- @vue-skip -->
+          <DefaultTagInput
+            v-model="model"
+            :id="id"
+            :disabled="disabled"
+            :color="color"
+          />
+        </div>
         <div class="group relative" v-else-if="type == 'textarea'">
           <label
+            v-if="label"
             :for="id"
             class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
-            >Your message</label
+            >{{ label }}</label
           >
           <!-- @vue-skip -->
           <textarea

package/components/ui/DefaultTagInput.vue

@@ -0,0 +1,177 @@
+<template>
+  <div>
+    <label
+      :for="`tags_${id}`"
+      v-if="label"
+      class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
+      >{{ label }}</label
+    >
+    <div
+      class="tags-input"
+      @click="focusInput"
+      @keydown.delete.prevent="removeLastTag"
+      @keydown.enter.prevent="addTag"
+    >
+      <span v-for="(tag, index) in tags" :key="index" :class="`tag ${color}`">
+        {{ tag }}
+        <button @click.stop="removeTag(index)">
+          <svg
+            class="w-3 h-3"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+            />
+          </svg>
+        </button>
+      </span>
+      <div
+        contenteditable
+        class="input"
+        :id="`tags_${id}`"
+        ref="textInput"
+        @input="handleInput"
+        @paste.prevent="handlePaste"
+        placeholder="Add a tag..."
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from "vue";
+type colorType = "blue" | "red" | "green" | "purple" | "orange" | "neutral";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string[];
+    color?: colorType;
+    label?: string;
+    id: string;
+    separators?: string[];
+    autofocus?: boolean;
+  }>(),
+  {
+    color: "blue",
+    label: "Tags",
+    separators: () => [","],
+    autofocus: false,
+  },
+);
+
+const emit = defineEmits(["update:modelValue"]);
+const tags = ref([...props.modelValue]);
+const textInput = ref<HTMLElement>();
+
+watch(
+  tags,
+  (newTags) => {
+    emit("update:modelValue", newTags);
+  },
+  { deep: true },
+);
+
+onMounted(() => {
+  if (props.autofocus) {
+    focusInput();
+  }
+});
+
+const handleInput = (event: any) => {
+  const separatorsRegex = new RegExp(props.separators.join("|"));
+  if (separatorsRegex.test(event.data)) {
+    addTag();
+  }
+};
+
+const addTag = () => {
+  if (!textInput.value) return;
+
+  const separatorsRegex = new RegExp(props.separators.join("|"));
+  const newTags = textInput.value.innerText
+    .split(separatorsRegex)
+    .map((tag: string) => tag.trim())
+    .filter((tag: string) => tag.length > 0);
+  tags.value.push(...newTags);
+  textInput.value.innerText = "";
+};
+
+const removeTag = (index: number) => {
+  tags.value.splice(index, 1);
+  focusInput();
+};
+
+const removeLastTag = () => {
+  if (!textInput.value) return;
+
+  if (textInput.value.innerText === "") {
+    tags.value.pop();
+  }
+};
+
+const focusInput = () => {
+  if (!textInput.value) return;
+
+  textInput.value.focus();
+};
+
+const handlePaste = (e: any) => {
+  if (!textInput.value) return;
+
+  // @ts-ignore
+  const text = (e.clipboardData || window.clipboardData).getData("text");
+  const separatorsRegex = new RegExp(props.separators.join("|"), "g");
+  const pasteText = text.replace(separatorsRegex, ",");
+  textInput.value.innerText += pasteText;
+  e.preventDefault();
+  addTag();
+};
+</script>
+
+<style scoped>
+.tags-input {
+  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;
+}
+.tag-label {
+  @apply block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white;
+
+  &.error {
+    @apply text-red-700 dark:text-red-500;
+  }
+}
+.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;
+  }
+}
+
+.input {
+  flex-grow: 1;
+  min-width: 100px;
+  outline: none;
+  border: none;
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "0.3.22",
+  "version": "0.3.24",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "repository": {