@fy-/fws-vue 2.1.6 → 2.1.7

package/components/ui/DefaultTagInput.vue

@@ -1,3 +1,119 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useEventBus } from '../../composables/event-bus'
+
+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
+    maxLenghtPerTag?: number
+    error?: string
+    copyButton?: boolean
+  }>(),
+  {
+    copyButton: false,
+    maxLenghtPerTag: 0,
+    color: 'blue',
+    label: 'Tags',
+    separators: () => [','],
+    autofocus: false,
+  },
+)
+
+const textInput = ref<HTMLElement>()
+
+const emit = defineEmits(['update:modelValue'])
+const model = computed({
+  get: () => props.modelValue,
+  set: (items) => {
+    emit('update:modelValue', items)
+  },
+})
+
+onMounted(() => {
+  if (props.autofocus) {
+    focusInput()
+  }
+})
+const eventBus = useEventBus()
+async function copyText() {
+  const text = model.value.join(', ')
+  await navigator.clipboard.writeText(text)
+  eventBus.emit('SendNotif', {
+    title: 'Text copied!',
+    type: 'success',
+    time: 2500,
+  })
+}
+
+function handleInput(event: any) {
+  const separatorsRegex = new RegExp(props.separators.join('|'))
+  if (separatorsRegex.test(event.data)) {
+    addTag()
+  }
+}
+
+function addTag() {
+  if (!textInput.value) return
+
+  const separatorsRegex = new RegExp(props.separators.join('|'))
+  if (!textInput.value.textContent) return
+  const newTags = textInput.value.textContent
+    .split(separatorsRegex)
+    .map((tag: string) => tag.trim())
+    .filter((tag: string) => tag.length > 0)
+  model.value.push(...newTags)
+  textInput.value.textContent = ''
+}
+
+function removeTag(index: number) {
+  model.value.splice(index, 1)
+  focusInput()
+}
+
+function removeLastTag() {
+  if (!textInput.value) return
+  if (textInput.value.textContent === '') {
+    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)
+  }
+}
+function focusInput() {
+  if (!textInput.value) return
+
+  textInput.value.focus()
+}
+
+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')
+  const separatorsRegex = new RegExp(props.separators.join('|'), 'g')
+  const pasteText = text.replace(separatorsRegex, ',')
+  textInput.value.textContent += pasteText
+  e.preventDefault()
+  addTag()
+}
+</script>
+
 <template>
   <div>
     <div
@@ -34,16 +150,16 @@
         </button>
       </span>
       <div
-        contenteditable
-        class="input"
         :id="`tags_${id}`"
         ref="textInput"
+        contenteditable
+        class="input"
+        placeholder="Add a tag..."
         @input="handleInput"
         @paste.prevent="handlePaste"
-        placeholder="Add a tag..."
-      ></div>
+      />
     </div>
-    <div class="flex justify-end mt-1" v-if="copyButton">
+    <div v-if="copyButton" class="flex justify-end mt-1">
       <button class="btn neutral small" type="button" @click.prevent="copyText">
         Copy tags
       </button>
@@ -51,120 +167,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
-import { useEventBus } from "../../composables/event-bus";
-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;
-    maxLenghtPerTag?: number;
-    error?: string;
-    copyButton?: boolean;
-  }>(),
-  {
-    copyButton: false,
-    maxLenghtPerTag: 0,
-    color: "blue",
-    label: "Tags",
-    separators: () => [","],
-    autofocus: false,
-  },
-);
-
-const textInput = ref<HTMLElement>();
-
-const emit = defineEmits(["update:modelValue"]);
-const model = computed({
-  get: () => props.modelValue,
-  set: (items) => {
-    emit("update:modelValue", items);
-  },
-});
-
-onMounted(() => {
-  if (props.autofocus) {
-    focusInput();
-  }
-});
-const eventBus = useEventBus();
-const copyText = async () => {
-  const text = model.value.join(", ");
-  await navigator.clipboard.writeText(text);
-  eventBus.emit("SendNotif", {
-    title: "Text copied!",
-    type: "success",
-    time: 2500,
-  });
-};
-
-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);
-  model.value.push(...newTags);
-  textInput.value.innerText = "";
-};
-
-const removeTag = (index: number) => {
-  model.value.splice(index, 1);
-  focusInput();
-};
-
-const removeLastTag = () => {
-  if (!textInput.value) return;
-  if (textInput.value.innerText === "") {
-    model.value.pop();
-  } else {
-    const currentLength = textInput.value.innerText.length;
-    textInput.value.innerText = textInput.value.innerText.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);
-  }
-};
-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;

package/components/ui/transitions/CollapseTransition.vue

@@ -1,6 +1,6 @@
 <template>
   <Transition name="collapse">
-    <slot></slot>
+    <slot />
   </Transition>
 </template>
 

package/components/ui/transitions/ExpandTransition.vue

@@ -1,6 +1,6 @@
 <template>
   <Transition name="expand">
-    <slot></slot>
+    <slot />
   </Transition>
 </template>
 

package/components/ui/transitions/FadeTransition.vue

@@ -1,6 +1,6 @@
 <template>
   <Transition name="fade" mode="out-in">
-    <slot></slot>
+    <slot />
   </Transition>
 </template>
 

package/components/ui/transitions/ScaleTransition.vue

@@ -1,6 +1,6 @@
 <template>
   <Transition name="scale">
-    <slot></slot>
+    <slot />
   </Transition>
 </template>
 

package/components/ui/transitions/SlideTransition.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 const props = defineProps<{
-  animation: string;
-}>();
+  animation: string
+}>()
 </script>
 
 <template>
   <Transition :name="props.animation" mode="out-in">
-    <slot></slot>
+    <slot />
   </Transition>
 </template>
 

package/composables/event-bus.ts

@@ -1,14 +1,16 @@
-import { inject } from "vue";
-import type { Emitter } from "mitt";
+import type { Emitter } from 'mitt'
+import { inject } from 'vue'
 
-export type Events = {
-  [key: string]: any;
-};
+export interface Events {
+  [key: string]: any
+}
 
+// @ts-expect-error: Emitter is not exported
 export function useEventBus(): Emitter<Events> {
-  const eventBus = inject<Emitter<Events>>("fwsVueEventBus");
+  // @ts-expect-error: Emitter is not exported
+  const eventBus = inject<Emitter<Events>>('fwsVueEventBus')
 
-  if (!eventBus) throw new Error("Did you apply app.use(fwsVue)?");
+  if (!eventBus) throw new Error('Did you apply app.use(fwsVue)?')
 
-  return eventBus;
+  return eventBus
 }

package/composables/rest.ts

@@ -1,91 +1,94 @@
-import { RestMethod, RestParams, getMode, rest, stringHash } from "@fy-/fws-js";
-import { useServerRouter } from "../stores/serverRouter";
-import { isServerRendered } from "./ssr";
-import { useEventBus } from "./event-bus";
+import type { RestMethod, RestParams } from '@fy-/fws-js'
+import { getMode, rest, stringHash } from '@fy-/fws-js'
+import { useServerRouter } from '../stores/serverRouter'
+import { useEventBus } from './event-bus'
+import { isServerRendered } from './ssr'
 
 export interface APIPaging {
-  page_no: number;
-  results_per_page: number;
-  page_max: number;
-  page_max_relation: string;
-  count: number;
+  page_no: number
+  results_per_page: number
+  page_max: number
+  page_max_relation: string
+  count: number
 }
 
 export interface APIResult {
-  result: "redirect" | "success" | "error";
-  param?: string;
-  code?: number;
-  error?: string;
-  request?: string;
-  time?: number;
-  token?: string;
-  paging?: APIPaging;
-  message?: string;
-  fvReject?: boolean;
-  data?: any;
-  status?: number;
+  result: 'redirect' | 'success' | 'error'
+  param?: string
+  code?: number
+  error?: string
+  request?: string
+  time?: number
+  token?: string
+  paging?: APIPaging
+  message?: string
+  fvReject?: boolean
+  data?: any
+  status?: number
 }
 
 export function useRest(): <ResultType extends APIResult>(
-  url: string,
-  method: RestMethod,
-  params?: RestParams,
+url: string,
+method: RestMethod,
+params?: RestParams,
 ) => Promise<ResultType> {
-  const serverRouter = useServerRouter();
-  const eventBus = useEventBus();
+  const serverRouter = useServerRouter()
+  const eventBus = useEventBus()
 
   return async <ResultType extends APIResult>(
     url: string,
     method: RestMethod,
     params?: RestParams,
   ): Promise<ResultType> => {
-    let urlForHash: string = url;
+    let urlForHash: string = url
     try {
-      const urlParse = new URL(url);
-      urlForHash = urlParse.pathname + urlParse.search;
-    } catch (error) {
-      urlForHash = url;
+      const urlParse = new URL(url)
+      urlForHash = urlParse.pathname + urlParse.search
+    }
+    catch {
+      urlForHash = url
     }
 
     const requestHash = stringHash(
       urlForHash + method + JSON.stringify(params),
-    );
+    )
     if (isServerRendered()) {
-      const hasResult = serverRouter.getResult(requestHash);
+      const hasResult = serverRouter.getResult(requestHash)
       if (hasResult !== undefined) {
-        const result = hasResult as ResultType;
-        serverRouter.removeResult(requestHash);
-        if (result.result === "error") {
-          eventBus.emit("main-loading", false);
-          eventBus.emit("rest-error", result);
-          return Promise.reject(result);
+        const result = hasResult as ResultType
+        serverRouter.removeResult(requestHash)
+        if (result.result === 'error') {
+          eventBus.emit('main-loading', false)
+          eventBus.emit('rest-error', result)
+          return Promise.reject(result)
         }
-        return Promise.resolve(result);
+        return Promise.resolve(result)
       }
     }
 
     try {
-      const restResult: ResultType = await rest(url, method, params);
-      if (getMode() === "ssr") {
+      const restResult: ResultType = await rest(url, method, params)
+      if (getMode() === 'ssr') {
         serverRouter.addResult(
           requestHash,
           JSON.parse(JSON.stringify(restResult)),
-        );
+        )
       }
-      if (restResult.result === "error") {
-        eventBus.emit("main-loading", false);
-        eventBus.emit("rest-error", restResult);
-        return Promise.reject(restResult);
+      if (restResult.result === 'error') {
+        eventBus.emit('main-loading', false)
+        eventBus.emit('rest-error', restResult)
+        return Promise.reject(restResult)
       }
-      return Promise.resolve(restResult);
-    } catch (error) {
-      const restError: ResultType = error as ResultType;
-      if (getMode() === "ssr") {
-        serverRouter.addResult(requestHash, restError);
+      return Promise.resolve(restResult)
+    }
+    catch (error) {
+      const restError: ResultType = error as ResultType
+      if (getMode() === 'ssr') {
+        serverRouter.addResult(requestHash, restError)
       }
-      eventBus.emit("main-loading", false);
-      eventBus.emit("rest-error", restError);
-      return Promise.resolve(restError);
+      eventBus.emit('main-loading', false)
+      eventBus.emit('rest-error', restError)
+      return Promise.resolve(restError)
     }
-  };
+  }
 }