@fy-/fws-vue 0.2.0 → 0.2.1

package/components/fws/UserFlow.vue

@@ -288,13 +288,15 @@ onMounted(async () => {
                   v-if="
                     field.type == 'text' ||
                     field.type == 'password' ||
-                    field.type == 'email'
+                    field.type == 'email' ||
+                    field.type == 'mask'
                   "
                 >
                   <DefaultInput
                     v-if="field.name"
                     :id="field.name"
                     :label="field.label"
+                    :mask="field.mask"
                     class="mt-3"
                     :placeholder="
                       field.name == 'name' ? 'John Doe' : field.label

package/components/ui/DefaultInput.vue

@@ -10,6 +10,8 @@ import Password from "primevue/password";
 import Checkbox from "primevue/checkbox";
 import Dropdown from "primevue/dropdown";
 import Chips from "primevue/chips";
+import InputSwitch from "primevue/inputswitch";
+import InputMask from "primevue/inputmask";
 
 type modelValueType = string | number | string[] | number[] | undefined;
 
@@ -22,6 +24,7 @@ const props = withDefaults(
     type?: string;
     placeholder?: string;
     autocomplete?: string;
+    mask?: string;
     checkboxTrueValue?: string | boolean;
     checkboxFalseValue?: string | boolean;
     req?: boolean;
@@ -103,6 +106,8 @@ defineExpose({ focus, getInputRef });
           'select',
           'phone',
           'chips',
+          'opts',
+          'mask',
         ].includes(type)
       "
     >
@@ -115,6 +120,7 @@ defineExpose({ focus, getInputRef });
           :placeholder="placeholder"
           :invalid="checkErrors ? true : false"
           :pt:root:autocomplete="autocomplete"
+          :pt:root:type="type"
           :aria-describedby="
             help && !['checkbox', 'radio'].includes(type)
               ? `${id}-help`
@@ -129,6 +135,24 @@ defineExpose({ focus, getInputRef });
           "
         />
         <!-- @vue-skip -->
+        <InputMask
+          :id="id"
+          v-model="model"
+          :placeholder="placeholder"
+          :invalid="checkErrors ? true : false"
+          :pt:root:autocomplete="autocomplete"
+          :pt:root:type="type"
+          :mask="mask"
+          :aria-describedby="
+            help && !['checkbox', 'radio'].includes(type)
+              ? `${id}-help`
+              : undefined
+          "
+          v-if="
+            type == 'mask',
+          "
+        />
+        <!-- @vue-skip -->
         <Textarea
           :id="id"
           v-model="model"
@@ -224,8 +248,23 @@ defineExpose({ focus, getInputRef });
         </small>
       </div>
     </template>
+    <template v-else-if="type === 'toggle'">
+      <label class="inline-flex items-start cursor-pointer">
+        <!-- @vue-skip -->
+        <InputSwitch v-model="modelCheckbox" class="flex-0 flex-shrink-0" />
 
-    <template v-if="type == 'checkbox'">
+        <span
+          class="ms-3 font-medium text-fv-neutral-900 dark:text-fv-neutral-300"
+          >{{ label }}
+          <template v-if="help">
+            <p class="text-fv-neutral-600 dark:text-fv-neutral-400 !text-sm">
+              {{ help }}
+            </p>
+          </template>
+        </span>
+      </label>
+    </template>
+    <template v-else-if="type == 'checkbox'">
       <div class="flex items-center">
         <Checkbox
           v-model="modelCheckbox"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "repository": {
@@ -28,7 +28,7 @@
   },
   "peerDependencies": {
     "@fy-/fws-js": "^0.0.x",
-    "@fy-/fws-types": "^0.0.x",
+    "@fy-/fws-types": "^0.5.x",
     "@fy-/head": "^0.0.x",
     "@vuelidate/core": "^2.0.x",
     "@vuelidate/validators": "^2.0.x",

package/components/ui/DefaultTagInput.vue

@@ -1,164 +0,0 @@
-<template>
-  <div>
-    <label class="tag-label" :for="`tags_${id}`">{{ label }}</label>
-    <div
-      class="tags-input"
-      @click="focusInput"
-      @keydown.enter.prevent="addTag"
-      @keydown.delete="removeLastTag"
-    >
-      <span v-for="(tag, index) in tags" :key="index" :class="`tag ${color}`">
-        {{ tag }}
-        <button @click.stop="removeTag(index)" type="button">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="w-3 h-3 text-red-600 dark:text-red-200"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-            />
-          </svg>
-        </button>
-      </span>
-      <div
-        contenteditable
-        class="input"
-        :id="`tags_${id}`"
-        ref="textInput"
-        @input="updateInput"
-        @paste.prevent="handlePaste"
-        placeholder="Add a tag..."
-      ></div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, watch, onMounted } from "vue";
-
-const props = defineProps({
-  modelValue: {
-    type: Array,
-    default: () => [],
-  },
-  color: {
-    type: String,
-    default: "blue",
-  },
-  label: {
-    type: String,
-    default: "Tags",
-  },
-  id: {
-    type: String,
-    required: true,
-  },
-  autofocus: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(["update:modelValue"]);
-const tags = ref([...props.modelValue]);
-const textInput = ref(null);
-
-watch(
-  tags,
-  (newTags) => {
-    emit("update:modelValue", newTags);
-  },
-  { deep: true },
-);
-
-onMounted(() => {
-  if (props.autofocus) {
-    focusInput();
-  }
-});
-
-const updateInput = (event) => {
-  const text = event.target.innerText;
-  if (text.includes(",")) {
-    addTag();
-  }
-};
-
-const addTag = () => {
-  const newTags = textInput.value.innerText
-    .split(",")
-    .map((tag) => tag.trim())
-    .filter((tag) => tag.length > 0);
-  tags.value.push(...newTags);
-  textInput.value.innerText = "";
-};
-
-const removeTag = (index) => {
-  tags.value.splice(index, 1);
-  focusInput();
-};
-
-const removeLastTag = () => {
-  if (textInput.value.innerText === "") {
-    tags.value.pop();
-  }
-};
-
-const focusInput = () => {
-  textInput.value.focus();
-};
-
-const handlePaste = (e) => {
-  const text = (e.clipboardData || window.clipboardData).getData("text");
-  textInput.value.innerText += text;
-  e.preventDefault();
-};
-</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;
-  &.blue {
-    @apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200;
-  }
-  &.purple {
-    @apply bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200;
-  }
-  &.red {
-    @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200;
-  }
-  &.orange {
-    @apply bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200;
-  }
-  &.neutral {
-    @apply bg-fv-neutral-100 text-fv-neutral-800 dark:bg-fv-neutral-900 dark:text-fv-neutral-200;
-  }
-  &.green {
-    @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
-  }
-}
-
-.input {
-  flex-grow: 1;
-  min-width: 100px;
-  outline: none;
-  border: none;
-}
-</style>