@fy-/fws-vue 0.3.1 → 0.3.4

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;
   }>(),
@@ -106,7 +107,7 @@ defineExpose({ focus, blur, getInputRef });
           'select',
           'phone',
           'chips',
-          'opts',
+          'tags',
           'mask',
         ].includes(type)
       "
@@ -122,10 +123,18 @@ defineExpose({ focus, blur, getInputRef });
               'search',
               'url',
               'mask',
+              'date',
+              'datetime',
             ].includes(type)
           "
           class="relative"
         >
+          <label
+            :for="id"
+            v-if="label"
+            class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
+            >{{ label }}
+          </label>
           <input
             ref="inputRef"
             :type="type"
@@ -134,27 +143,41 @@ defineExpose({ focus, blur, getInputRef });
             :class="{
               error: checkErrors,
             }"
+            v-model="model"
             :autocomplete="autocomplete"
             :disabled="disabled"
             :aria-describedby="help ? `${id}-help` : id"
-            class="block px-2.5 pb-2.5 pt-4 w-full text-sm text-fv-neutral-900 bg-transparent rounded-lg border-1 border-fv-neutral-300 appearance-none dark:text-white dark:border-fv-neutral-600 dark:focus:border-fv-primary-500 focus:outline-none focus:ring-0 focus:border-fv-primary-600 peer"
+            class="bg-fv-neutral-50 border border-fv-neutral-300 text-fv-neutral-900 text-sm rounded-lg focus:ring-fv-primary-500 focus:border-fv-primary-500 block 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"
             :required="req"
             @focus="handleFocus"
             @blur="handleBlur"
           />
+        </div>
+        <div v-if="type == 'chips' || type == 'tags'">
           <label
             :for="id"
             v-if="label || placeholder"
-            class="absolute text-sm text-fv-neutral-500 dark:text-fv-neutral-400 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white dark:bg-fv-neutral-900 px-2 peer-focus:px-2 peer-focus:text-fv-primary-600 peer-focus:dark:text-fv-primary-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto start-1"
+            class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
             >{{ label ? label : placeholder }}
           </label>
+          <!-- @vue-skip -->
+          <DefaultTagInput
+            v-model="model"
+            :id="id"
+            :disabled="disabled"
+            :color="color"
+            :error="checkErrors"
+            :help="help"
+          />
         </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
             :id="id"
             :name="id"
@@ -162,6 +185,7 @@ defineExpose({ focus, blur, getInputRef });
             :class="{
               error: checkErrors,
             }"
+            v-model="model"
             :placeholder="placeholder"
             :disabled="disabled"
             :aria-describedby="help ? `${id}-help` : id"
@@ -171,50 +195,6 @@ defineExpose({ focus, blur, getInputRef });
             class="block p-2.5 w-full text-sm text-fv-neutral-900 bg-fv-neutral-50 rounded-lg border border-fv-neutral-300 focus:ring-fv-primary-500 focus:border-fv-primary-500 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"
           ></textarea>
         </div>
-        <div
-          class="relative max-w-sm"
-          v-else-if="type == 'datetime' || type == 'date'"
-        >
-          <div
-            class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none"
-          >
-            <svg
-              class="w-4 h-4 text-fv-neutral-500 dark:text-fv-neutral-400"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-            >
-              <path
-                d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"
-              />
-            </svg>
-          </div>
-          <label
-            :for="id"
-            v-if="label"
-            class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
-            >{{ label }}</label
-          >
-
-          <input
-            datepicker
-            ref="inputRef"
-            type="text"
-            :class="{
-              error: checkErrors,
-            }"
-            class="bg-fv-neutral-50 border border-fv-neutral-300 text-fv-neutral-900 text-sm rounded-lg focus:ring-fv-primary-500 focus:border-fv-primary-500 block w-full ps-10 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"
-            :id="id"
-            :name="id"
-            :disabled="disabled"
-            :aria-describedby="help ? `${id}-help` : id"
-            :required="req"
-            @focus="handleFocus"
-            @blur="handleBlur"
-            :placeholder="placeholder"
-          />
-        </div>
         <div class="relative" v-else-if="type == 'select'">
           <label
             :for="id"
@@ -226,6 +206,7 @@ defineExpose({ focus, blur, getInputRef });
             :id="id"
             :name="id"
             ref="inputRef"
+            v-model="model"
             :disabled="disabled"
             :aria-describedby="help ? `${id}-help` : id"
             :required="req"
@@ -257,12 +238,14 @@ defineExpose({ focus, blur, getInputRef });
         <input
           type="checkbox"
           v-model="modelCheckbox"
+          :true-value="checkboxTrueValue"
+          :false-value="checkboxFalseValue"
           class="sr-only peer"
           @focus="handleFocus"
           @blur="handleBlur"
         />
         <div
-          class="relative w-11 h-6 bg-fv-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-fv-primary-300 dark:peer-focus:ring-fv-primary-800 rounded-full peer dark:bg-fv-neutral-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-fv-neutral-300 after:border after:rounded-full after:w-5 after:h-5 after:transition-all dark:border-fv-neutral-600 peer-checked:bg-fv-primary-600"
+          class="relative flex-0 flex-shrink-0 w-11 h-6 bg-fv-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-fv-primary-300 dark:peer-focus:ring-fv-primary-800 rounded-full peer dark:bg-fv-neutral-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-fv-neutral-300 after:border after:rounded-full after:w-5 after:h-5 after:transition-all dark:border-fv-neutral-600 peer-checked:bg-fv-primary-600"
         ></div>
         <span
           class="ms-3 text-sm font-medium text-fv-neutral-900 dark:text-fv-neutral-300"
@@ -288,6 +271,8 @@ defineExpose({ focus, blur, getInputRef });
             :type="type"
             @focus="handleFocus"
             @blur="handleBlur"
+            :true-value="checkboxTrueValue"
+            :false-value="checkboxFalseValue"
             v-model="modelCheckbox"
             class="w-4 h-4 text-fv-primary-600 bg-fv-neutral-100 border-fv-neutral-300 rounded focus:ring-fv-primary-500 dark:focus:ring-fv-primary-600 dark:ring-offset-fv-neutral-800 dark:focus:ring-offset-fv-neutral-800 focus:ring-2 dark:bg-fv-neutral-700 dark:border-fv-neutral-600"
           />
@@ -295,13 +280,13 @@ defineExpose({ focus, blur, getInputRef });
         <div class="ms-2 text-sm">
           <label
             :for="id"
-            class="font-medium text-gray-900 dark:text-gray-300"
+            class="font-medium text-fv-neutral-900 dark:text-fv-neutral-300"
             >{{ label }}</label
           >
           <p
             :id="`${id}-help`"
             v-if="help"
-            class="text-xs font-normal text-gray-500 dark:text-gray-400"
+            class="text-xs font-normal text-fv-neutral-500 dark:text-fv-neutral-400"
           >
             {{ help }}
           </p>

package/components/ui/DefaultTagInput.vue

@@ -0,0 +1,170 @@
+<template>
+  <div
+    :class="`tags-input ${$props.error ? 'error' : ''}`"
+    @click="focusInput"
+    @keydown.delete.prevent="removeLastTag"
+    @keydown.enter.prevent="addTag"
+  >
+    <span v-for="(tag, index) in tags" :key="index" :class="`tag ${color}`">
+      {{ tag }}
+      <button type="button" @click.prevent="removeTag(index)">
+        <svg
+          class="w-4 h-4"
+          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>
+</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;
+    help?: string;
+    error?: string;
+  }>(),
+  {
+    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;
+  &.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;
+}
+.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/index.ts

@@ -41,6 +41,7 @@ import DefaultSidebar from "./components/ui/DefaultSidebar.vue";
 import DefaultGallery from "./components/ui/DefaultGallery.vue";
 import DefaultDropdown from "./components/ui/DefaultDropdown.vue";
 import DefaultDropdownLink from "./components/ui/DefaultDropdownLink.vue";
+import DefaultTagInput from "./components/ui/DefaultTagInput.vue";
 // Components/FWS
 import UserFlow from "./components/fws/UserFlow.vue";
 import DataTable from "./components/fws/DataTable.vue";
@@ -125,6 +126,7 @@ export {
   DefaultGallery,
   DefaultDropdown,
   DefaultDropdownLink,
+  DefaultTagInput,
 
   // FWS
   UserFlow,

package/package.json

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