@fy-/fws-vue 0.0.1

package/components/ui/DefaultInput.vue

@@ -0,0 +1,243 @@
+<script setup lang="ts">
+import { LinkIcon } from "@heroicons/vue/24/solid";
+import { computed, ref, toRef } from "vue";
+import type { ErrorObject } from "@vuelidate/core";
+import { useTranslation } from "../../translations";
+type modelValueType = string | number | string[] | undefined;
+type checkboxValueType = any[] | Set<any> | undefined | boolean;
+const props = withDefaults(
+  defineProps<{
+    id: string;
+    showLabel?: boolean;
+    label?: string;
+    type?: string;
+    placeholder?: string;
+    autocomplete?: string;
+    checkboxTrueValue?: string | boolean;
+    checkboxFalseValue?: string | boolean;
+    req?: boolean;
+    linkIcon?: string;
+    modelValue?: modelValueType;
+    checkboxValue?: checkboxValueType;
+    options?: string[][];
+    help?: string;
+    error?: string;
+    errorVuelidate?: ErrorObject[];
+    disabled?: boolean;
+  }>(),
+  {
+    showLabel: true,
+    type: "text",
+    req: false,
+    options: () => [],
+    checkboxTrueValue: true,
+    checkboxFalseValue: false,
+    disabled: false,
+  },
+);
+const translate = useTranslation();
+const inputRef = ref<HTMLInputElement>();
+const errorProps = toRef(props, "error");
+const errorVuelidateProps = toRef(props, "errorVuelidate");
+
+const checkErrors = computed(() => {
+  if (errorProps.value) return errorProps.value;
+  if (errorVuelidateProps.value && errorVuelidateProps.value.length > 0) {
+    const err = `vuelidate_validator_${errorVuelidateProps.value[0].$validator.toString()}`;
+    return translate(err);
+  }
+
+  return null;
+});
+
+const focus = () => {
+  if (inputRef.value) inputRef.value.focus();
+};
+const getInputRef = () => {
+  if (inputRef.value) return inputRef.value;
+};
+
+const emit = defineEmits(["update:modelValue", "update:checkboxValue"]);
+const model = computed({
+  get: () => props.modelValue,
+  set: (items) => {
+    emit("update:modelValue", items);
+  },
+});
+const modelCheckbox = computed({
+  get: () => props.checkboxValue,
+  set: (items) => {
+    emit("update:checkboxValue", items);
+  },
+});
+defineExpose({ focus, getInputRef });
+</script>
+<template>
+  <div>
+    <template
+      v-if="
+        [
+          'text',
+          'password',
+          'email',
+          'search',
+          'date',
+          'datetime',
+          'url',
+          'textarea',
+          'select',
+          'phone',
+        ].includes(type)
+      "
+    >
+      <label
+        :for="id"
+        v-if="label"
+        class="fws-label"
+        :class="{
+          error: checkErrors,
+        }"
+      >
+        {{ label }} <span v-if="req" class="text-red-700">*</span>
+      </label>
+      <input
+        v-if="
+          [
+            'text',
+            'password',
+            'email',
+            'search',
+            'date',
+            'datetime',
+            'url',
+          ].includes(type)
+        "
+        class="fws-input"
+        :class="{
+          error: checkErrors,
+        }"
+        ref="inputRef"
+        :aria-describedby="label"
+        :autocomplete="autocomplete"
+        :id="id"
+        v-model="model"
+        :type="type"
+        :disabled="disabled"
+        :required="req"
+        :placeholder="placeholder"
+      />
+      <textarea
+        :aria-describedby="label"
+        ref="inputRef"
+        v-if="type == 'textarea'"
+        class="fws-textarea"
+        :class="{
+          error: checkErrors,
+        }"
+        :autocomplete="autocomplete"
+        :id="id"
+        v-model="model"
+        :disabled="disabled"
+        :required="req"
+        :placeholder="placeholder"
+      ></textarea>
+      <select
+        :aria-describedby="label"
+        :disabled="disabled"
+        v-if="type == 'select'"
+        :required="req"
+        v-model="model"
+        :id="id"
+        ref="inputRef"
+        :class="{
+          error: checkErrors,
+        }"
+        class="fws-select"
+      >
+        <option v-for="opt in options" :value="opt[0]" :key="opt[0].toString()">
+          {{ opt[1] }}
+        </option>
+      </select>
+    </template>
+
+    <template v-if="type == 'checkbox'">
+      <div class="fws-checkbox">
+        <input
+          :aria-describedby="label"
+          :id="id"
+          ref="inputRef"
+          :true-value="checkboxTrueValue"
+          :false-value="checkboxFalseValue"
+          v-model="modelCheckbox"
+          type="checkbox"
+          value=""
+        />
+        <label
+          :for="id"
+          v-if="label"
+          :class="{
+            error: checkErrors,
+          }"
+          >{{ label }}
+          <a class="fws-link" :href="linkIcon" target="_blank" v-if="linkIcon">
+            <LinkIcon class="w-4 h-4" />
+          </a>
+        </label>
+      </div>
+    </template>
+    <p v-if="checkErrors" class="mt-2 text-xs fws-error-text">
+      {{ checkErrors }}
+    </p>
+
+    <p
+      class="fws-input-helper"
+      v-if="help && !['checkbox', 'radio'].includes(type)"
+    >
+      {{ help }}
+    </p>
+  </div>
+</template>
+<style scoped>
+.fws-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;
+  }
+}
+.fws-input-helper {
+  @apply mt-2 text-sm text-fv-neutral-500 dark:text-fv-neutral-400;
+}
+.fws-input {
+  @apply shadow-sm 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;
+  &.error {
+    @apply bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 focus:border-red-500 block w-full p-2.5 dark:bg-red-100 dark:border-red-400;
+  }
+}
+.fws-textarea {
+  @apply 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;
+  &.error {
+    @apply bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 focus:border-red-500 block w-full p-2.5 dark:bg-red-100 dark:border-red-400;
+  }
+}
+
+.fws-select {
+  @apply 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;
+  &.error {
+    @apply bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 focus:border-red-500 block w-full p-2.5 dark:bg-red-100 dark:border-red-400;
+  }
+}
+.fws-checkbox {
+  @apply flex items-center mb-4;
+}
+
+.fws-checkbox input {
+  @apply 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;
+  &.error {
+    @apply bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 focus:border-red-500 block w-full p-2.5 dark:bg-red-100 dark:border-red-400;
+  }
+}
+.fws-checkbox label {
+  @apply ml-2 text-sm font-medium text-fv-neutral-900 dark:text-fv-neutral-300;
+}
+</style>

package/components/ui/DefaultLoader.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from "vue";
+import type { Component } from "vue";
+import { useEventBus } from "../../event-bus";
+
+const props = withDefaults(
+  defineProps<{
+    image: string;
+    force?: boolean;
+    id?: string;
+  }>(),
+  {
+    force: false,
+    id: "",
+  },
+);
+const eventBus = useEventBus();
+const loading = ref<boolean>(false);
+function setLoading(value: boolean) {
+  loading.value = value;
+}
+onMounted(() => {
+  if (props.id) eventBus.on(`${props.id}-loading`, setLoading);
+  else eventBus.on("loading", setLoading);
+});
+onUnmounted(() => {
+  if (props.id) eventBus.off(`${props.id}-loading`, setLoading);
+  else eventBus.off("loading", setLoading);
+});
+</script>
+
+<template>
+  <div
+    v-if="loading || force"
+    class="flex-grow flex flex-col bg-fv-neutral-800/[.8] items-center justify-center absolute inset-0 z-50"
+  >
+    <div class="text-center animate-pulse w-40 h-40 p-4 rounded-full shadow">
+      <div class="relative flex flex-col items-center">
+        <div class="flex items-center justify-center flex-col">
+          <img
+            :src="image"
+            :alt="$t('global_loading')"
+            class="w-full h-full relative"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/components/ui/DefaultModal.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import {
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { ref, onMounted, onUnmounted, h } from "vue";
+import { XCircleIcon } from "@heroicons/vue/24/solid";
+import { useEventBus } from "../../event-bus";
+const props = withDefaults(
+  defineProps<{
+    id: string;
+    title?: string;
+    onOpen?: Function;
+    onClose?: Function;
+    closeIcon?: Object;
+  }>(),
+  {
+    closeIcon: () => h(XCircleIcon),
+  },
+);
+
+const eventBus = useEventBus();
+
+const isOpen = ref<boolean>(false);
+const setModal = (value: boolean) => {
+  if (value === true) {
+    if (props.onOpen) props.onOpen();
+  } else {
+    if (props.onClose) props.onClose();
+  }
+  isOpen.value = value;
+};
+onMounted(() => {
+  eventBus.on(`${props.id}Modal`, setModal);
+});
+onUnmounted(() => {
+  eventBus.off(`${props.id}Modal`, setModal);
+});
+</script>
+<template>
+  <TransitionRoot
+    :show="isOpen"
+    as="template"
+    enter="duration-300 ease-out"
+    enter-from="opacity-0"
+    enter-to="opacity-100"
+    leave="duration-200 ease-in"
+    leave-from="opacity-100"
+    leave-to="opacity-0"
+  >
+    <Dialog
+      :open="isOpen"
+      @close="setModal"
+      class="fixed inset-0 overflow-y-auto"
+      style="z-index: 40"
+    >
+      <DialogPanel
+        class="flex flex-col items-center justify-center min-h-screen text-fv-neutral-800 dark:text-fv-neutral-300 bg-fv-neutral-900/[.20] dark:bg-fv-neutral-50/[.20]"
+        style="z-index: 41"
+      >
+        <div
+          class="relative w-full max-w-2xl max-h-full bg-white rounded-lg shadow dark:bg-gray-700"
+        >
+          <div
+            class="flex items-center justify-between p-2 w-full border-b rounded-t dark:border-gray-600"
+          >
+            <slot name="before"></slot>
+            <DialogTitle
+              class="text-xl font-semibold text-gray-900 dark:text-white"
+              v-if="title"
+            >
+              {{ title }}
+            </DialogTitle>
+            <button
+              @click="setModal(false)"
+              class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
+            >
+              <component :is="closeIcon" class="w-7 h-7" />
+            </button>
+          </div>
+          <div class="p-3 space-y-3">
+            <slot></slot>
+          </div>
+        </div>
+      </DialogPanel>
+    </Dialog>
+  </TransitionRoot>
+</template>

package/components/ui/DefaultPaging.vue

@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/vue/24/solid";
+import {
+  watch,
+  onUnmounted,
+  ref,
+  WatchStopHandle,
+  onMounted,
+  computed,
+} from "vue";
+import type { APIPaging } from "../../rest";
+import { useEventBus } from "../../event-bus";
+import { useServerRouter } from "../../stores/serverRouter";
+import { useRoute } from "vue-router";
+import { useFyHead } from "@fy-/head";
+import { hasFW, getURL } from "@fy-/fws-js";
+const props = defineProps<{
+  items: APIPaging;
+  id: string;
+}>();
+const route = useRoute();
+const eventBus = useEventBus();
+const history = useServerRouter();
+const prevNextSeo = ref<any>({});
+const isNewPage = (page: number) => {
+  return (
+    page >= 1 && page <= props.items.page_max && page != props.items.page_no
+  );
+};
+const pageWatcher = ref<WatchStopHandle>();
+
+const next = () => {
+  const page = props.items.page_no + 1;
+
+  if (!isNewPage(page)) return;
+
+  history.push({
+    path: history.currentRoute.path,
+    query: { page: page.toString() },
+  });
+};
+const prev = () => {
+  const page = props.items.page_no - 1;
+  if (!isNewPage(page)) return;
+
+  history.push({
+    path: history.currentRoute.path,
+    query: { page: page.toString() },
+  });
+};
+const page = (page: number) => {
+  if (!isNewPage(page)) return;
+
+  history.push({
+    path: history.currentRoute.path,
+    query: { page: page.toString() },
+  });
+};
+
+const checkPageNumber = (page: number = 1) => {
+  prevNextSeo.value.next = undefined;
+  prevNextSeo.value.prev = undefined;
+
+  if (hasFW()) {
+    const url = getURL();
+    if (page + 1 <= props.items.page_max && url) {
+      prevNextSeo.value.next = `${url.Scheme}://${url.Host}${url.Path}?page=${
+        page + 1
+      }`;
+    }
+    if (page - 1 >= 1 && url) {
+      prevNextSeo.value.prev = `${url.Scheme}://${url.Host}${url.Path}?page=${
+        page - 1
+      }`;
+    }
+  }
+};
+
+pageWatcher.value = watch(
+  () => route.query.page,
+  (v) => {
+    eventBus.emit(`${props.id}GoToPage`, v ? v : 1);
+  },
+);
+onMounted(() => {
+  eventBus.on(`${props.id}GoToPage`, checkPageNumber);
+});
+onUnmounted(() => {
+  eventBus.off(`${props.id}GoToPage`, checkPageNumber);
+  //if (pageWatcher.value) pageWatcher.value();
+});
+
+checkPageNumber(props.items.page_no);
+useFyHead({
+  links: computed(() => {
+    const result: any = [];
+    if (prevNextSeo.value.next)
+      result.push({
+        href: prevNextSeo.value.next,
+        rel: "next",
+        key: "next",
+      });
+    if (prevNextSeo.value.prev)
+      result.push({
+        href: prevNextSeo.value.prev,
+        rel: "prev",
+        key: "prev",
+      });
+    return result;
+  }),
+});
+</script>
+<template>
+  <div
+    class="flex items-center justify-center"
+    v-if="items && items.page_max > 1 && items.page_no"
+  >
+    <div class="paging-container">
+      <nav
+        aria-label="Pagination"
+        class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
+      >
+        <a
+          href="javascript:void(0);"
+          @click="prev()"
+          v-if="items.page_no >= 2"
+          class="relative inline-flex items-center px-2 pt-2 pb-1.5 border text-sm font-medium border-fv-neutral-300 bg-fv-neutral-100 text-fv-neutral-500 hover:bg-fv-neutral-200 hover:text-fv-neutral-600 dark:border-fv-neutral-600 dark:bg-fv-neutral-800 dark:text-fv-neutral-200 dark:hover:bg-fv-neutral-800 dark:hover:text-fv-neutral-100"
+        >
+          <span class="sr-only">{{ $t("previous_paging") }}</span>
+          <ChevronLeftIcon class="w-4 h-4" />
+        </a>
+        <a
+          v-if="items.page_no - 2 > 1"
+          class="relative inline-flex items-center px-4 pt-2 pb-1.5 border text-sm font-medium bg-fv-neutral-100 border-fv-neutral-300 text-fv-neutral-500 hover:bg-fv-neutral-200 hover:text-fv-neutral-600 dark:bg-fv-neutral-800 dark:border-fv-neutral-600 dark:text-fv-neutral-200 dark:hover:bg-fv-neutral-800 dark:hover:text-fv-neutral-100"
+          href="javascript:void(0);"
+          @click="page(1)"
+        >
+          1
+        </a>
+        <span
+          v-if="items.page_no - 2 > 2"
+          class="relative inline-flex items-center px-2 pt-2 pb-1.5 border text-sm font-medium border-fv-neutral-300 bg-fv-neutral-100 text-fv-neutral-700 hover:text-fv-neutral-600 dark:border-fv-neutral-600 dark:bg-fv-neutral-800 dark:text-fv-neutral-700 dark:hover:text-fv-neutral-100"
+        >
+          ...
+        </span>
+        <template v-for="i in 2">
+          <a
+            v-if="items.page_no - (3 - i) >= 1"
+            class="relative inline-flex items-center px-4 pt-2 pb-1.5 border text-sm font-medium bg-fv-neutral-100 border-fv-neutral-300 text-fv-neutral-500 hover:bg-fv-neutral-200 hover:text-fv-neutral-600 dark:bg-fv-neutral-800 dark:border-fv-neutral-600 dark:text-fv-neutral-200 dark:hover:bg-fv-neutral-800 dark:hover:text-fv-neutral-100"
+            href="javascript:void(0);"
+            :key="`${i}-sm`"
+            @click="page(items.page_no - (3 - i))"
+          >
+            {{ items.page_no - (3 - i) }}
+          </a>
+        </template>
+        <a
+          href="#"
+          aria-current="page"
+          class="z-10 relative inline-flex items-center px-4 pt-2 pb-1.5 border text-sm font-medium font-bold bg-fv-primary-50 border-fv-primary-500 text-fv-primary-600 hover:text-fv-neutral-600 dark:bg-fv-primary-900 dark:border-fv-primary-500 dark:text-fv-primary-200 dark:hover:text-fv-neutral-100"
+        >
+          {{ items.page_no }}
+        </a>
+        <template v-for="i in 2">
+          <a
+            v-if="items.page_no + i <= items.page_max"
+            class="relative inline-flex items-center px-4 pt-2 pb-1.5 border text-sm font-medium bg-fv-neutral-100 border-fv-neutral-300 text-fv-neutral-500 hover:bg-fv-neutral-200 hover:text-fv-neutral-600 dark:bg-fv-neutral-800 dark:border-fv-neutral-600 dark:text-fv-neutral-200 dark:hover:bg-fv-neutral-800 dark:hover:text-fv-neutral-100"
+            href="javascript:void(0);"
+            :key="`${i}-md`"
+            @click="page(items.page_no + i)"
+          >
+            {{ items.page_no + i }}
+          </a>
+        </template>
+        <span
+          v-if="items.page_no + 2 < items.page_max - 1"
+          class="relative inline-flex items-center px-2 pt-2 pb-1.5 border text-sm font-medium border-fv-neutral-300 bg-fv-neutral-100 text-fv-neutral-700 hover:text-fv-neutral-600 dark:border-fv-neutral-600 dark:bg-fv-neutral-800 dark:text-fv-neutral-700 dark:hover:text-fv-neutral-100"
+        >
+          ...
+        </span>
+        <a
+          v-if="items.page_no + 2 < items.page_max"
+          class="relative inline-flex items-center px-4 pt-2 pb-1.5 border text-sm font-medium bg-fv-neutral-100 border-fv-neutral-300 text-fv-neutral-500 hover:bg-fv-neutral-200 hover:text-fv-neutral-600 dark:bg-fv-neutral-800 dark:border-fv-neutral-600 dark:text-fv-neutral-200 dark:hover:bg-fv-neutral-800 dark:hover:text-fv-neutral-100"
+          href="javascript:void(0);"
+          @click="page(items.page_max)"
+        >
+          {{ items.page_max }}
+        </a>
+        <a
+          href="javascript:void(0);"
+          @click="next()"
+          v-if="items.page_no < items.page_max - 1"
+          class="relative inline-flex items-center px-2 pt-2 pb-1.5 border text-sm font-medium border-fv-neutral-300 bg-fv-neutral-100 text-fv-neutral-500 hover:bg-fv-neutral-200 hover:text-fv-neutral-600 dark:border-fv-neutral-600 dark:bg-fv-neutral-800 dark:text-fv-neutral-200 dark:hover:bg-fv-neutral-800 dark:hover:text-fv-neutral-100"
+        >
+          <span class="sr-only">{{ $t("next_paging") }}</span>
+          <ChevronRightIcon class="w-4 h-4" />
+        </a>
+      </nav>
+      <p
+        class="text-xs text-center italic mt-0.5 text-fv-neutral-700 dark:text-fv-neutral-300"
+      >
+        {{
+          $t("global_paging", {
+            start: items.results_per_page * (items.page_no - 1),
+            end: items.results_per_page * items.page_no,
+            total: items.count >= 10000 ? $t("paging_a_lot_of") : items.count,
+          })
+        }}
+      </p>
+    </div>
+  </div>
+</template>

package/components/ui/transitions/CollapseTransition.vue

@@ -0,0 +1,30 @@
+<template>
+  <Transition name="collapse">
+    <slot></slot>
+  </Transition>
+</template>
+
+<style scoped>
+.collapse-enter-active {
+  animation: collapse reverse 300ms ease;
+}
+
+.collapse-leave-active {
+  animation: collapse 300ms ease;
+}
+
+@keyframes collapse {
+  100% {
+    max-height: 0px;
+    opacity: 0;
+  }
+
+  50% {
+    max-height: 400px;
+  }
+
+  0% {
+    opacity: 1;
+  }
+}
+</style>

package/components/ui/transitions/ExpandTransition.vue

@@ -0,0 +1,32 @@
+<template>
+  <Transition name="expand">
+    <slot></slot>
+  </Transition>
+</template>
+
+<style scoped>
+.expand-enter-active {
+  animation: expand reverse 300ms ease;
+}
+
+.expand-leave-active {
+  animation: expand 300ms ease;
+}
+
+@keyframes expand {
+  100% {
+    max-height: 0px;
+    opacity: 0;
+    transform: scale(0.9);
+  }
+
+  50% {
+    max-height: 400px;
+  }
+
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+</style>

package/components/ui/transitions/FadeTransition.vue

@@ -0,0 +1,17 @@
+<template>
+  <Transition name="fade" mode="out-in">
+    <slot></slot>
+  </Transition>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease-in;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>