@antify/template-module 0.0.2

package/dist/runtime/components/crud/CrudDetail.d.vue.ts

@@ -0,0 +1,17 @@
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    footer?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/crud/CrudDetail.vue

@@ -0,0 +1,14 @@
+<template>
+  <div
+    class="flex flex-col bg-base-300 gap-px h-full"
+    data-e2e="crud-detail"
+  >
+    <slot name="header" />
+
+    <div class="grow h-px overflow-y-auto bg-base-100">
+      <slot />
+    </div>
+
+    <slot name="footer" />
+  </div>
+</template>

package/dist/runtime/components/crud/CrudDetail.vue.d.ts

@@ -0,0 +1,17 @@
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    footer?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/crud/CrudDetailActions.d.vue.ts

@@ -0,0 +1,40 @@
+import { InputState } from '@antify/ui';
+type __VLS_Props = {
+    disabled?: boolean;
+    skeleton?: boolean;
+    canSave?: boolean;
+    tooltipState?: InputState;
+    saveTooltipMessage?: string;
+    saveAndNewTooltipMessage?: string;
+};
+declare var __VLS_1: {}, __VLS_11: {}, __VLS_13: {}, __VLS_29: {};
+type __VLS_Slots = {} & {
+    'buttons-left'?: (props: typeof __VLS_1) => any;
+} & {
+    'before-buttons-right'?: (props: typeof __VLS_11) => any;
+} & {
+    'buttons-right'?: (props: typeof __VLS_13) => any;
+} & {
+    'after-buttons-right'?: (props: typeof __VLS_29) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    save: (...args: any[]) => void;
+    back: (...args: any[]) => void;
+    "save-and-new": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSave?: ((...args: any[]) => any) | undefined;
+    onBack?: ((...args: any[]) => any) | undefined;
+    "onSave-and-new"?: ((...args: any[]) => any) | undefined;
+}>, {
+    skeleton: boolean;
+    disabled: boolean;
+    canSave: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/crud/CrudDetailActions.vue

@@ -0,0 +1,72 @@
+<script setup>
+import {
+  AntButton
+} from "@antify/ui";
+import {
+  faAngleLeft
+} from "@fortawesome/free-solid-svg-icons";
+import SaveAndNewButton from "../buttons/SaveAndNewButton.vue";
+import SaveButton from "../buttons/SaveButton.vue";
+import {
+  InputState
+} from "@antify/ui";
+defineEmits([
+  "back",
+  "save",
+  "save-and-new"
+]);
+defineProps({
+  disabled: { type: Boolean, required: false, default: false },
+  skeleton: { type: Boolean, required: false, default: false },
+  canSave: { type: Boolean, required: false, default: true },
+  tooltipState: { type: String, required: false },
+  saveTooltipMessage: { type: String, required: false },
+  saveAndNewTooltipMessage: { type: String, required: false }
+});
+</script>
+
+<template>
+  <div
+    class="flex justify-between p-2 gap-2 bg-white"
+    data-e2e="crud-detail-actions"
+  >
+    <div class="flex gap-2.5">
+      <slot name="buttons-left">
+        <AntButton
+          :outlined="false"
+          :filled="false"
+          :icon-left="faAngleLeft"
+          :disabled="disabled"
+          :skeleton="skeleton"
+          @click="$emit('back')"
+        >
+          Zurück
+        </AntButton>
+      </slot>
+    </div>
+
+    <div class="flex gap-2.5">
+      <slot name="before-buttons-right" />
+      <slot name="buttons-right">
+        <SaveAndNewButton
+          :skeleton="skeleton"
+          :disabled="disabled"
+          :can-save="canSave"
+          :save-tooltip-message="saveTooltipMessage"
+          :tooltip-state="tooltipState"
+          @click="$emit('save-and-new')"
+        />
+
+        <SaveButton
+          :skeleton="skeleton"
+          :disabled="disabled"
+          :can-save="canSave"
+          :save-tooltip-message="saveAndNewTooltipMessage"
+          :tooltip-state="tooltipState"
+          @click="$emit('save')"
+        />
+      </slot>
+      <slot name="after-buttons-right" />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/crud/CrudDetailActions.vue.d.ts

@@ -0,0 +1,40 @@
+import { InputState } from '@antify/ui';
+type __VLS_Props = {
+    disabled?: boolean;
+    skeleton?: boolean;
+    canSave?: boolean;
+    tooltipState?: InputState;
+    saveTooltipMessage?: string;
+    saveAndNewTooltipMessage?: string;
+};
+declare var __VLS_1: {}, __VLS_11: {}, __VLS_13: {}, __VLS_29: {};
+type __VLS_Slots = {} & {
+    'buttons-left'?: (props: typeof __VLS_1) => any;
+} & {
+    'before-buttons-right'?: (props: typeof __VLS_11) => any;
+} & {
+    'buttons-right'?: (props: typeof __VLS_13) => any;
+} & {
+    'after-buttons-right'?: (props: typeof __VLS_29) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    save: (...args: any[]) => void;
+    back: (...args: any[]) => void;
+    "save-and-new": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSave?: ((...args: any[]) => any) | undefined;
+    onBack?: ((...args: any[]) => any) | undefined;
+    "onSave-and-new"?: ((...args: any[]) => any) | undefined;
+}>, {
+    skeleton: boolean;
+    disabled: boolean;
+    canSave: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/crud/CrudDetailNav.d.vue.ts

@@ -0,0 +1,40 @@
+import { type TabItem, InputState } from '@antify/ui';
+type __VLS_Props = {
+    tabItems?: TabItem[];
+    deleteButtonDisabled?: boolean;
+    getEntityName: () => string;
+    canDelete?: boolean;
+    showDeleteButton?: boolean;
+    skeleton?: boolean;
+    deleteTooltipMessage?: string;
+    tooltipState?: InputState;
+};
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {}, __VLS_19: {};
+type __VLS_Slots = {} & {
+    tabs?: (props: typeof __VLS_1) => any;
+} & {
+    buttons?: (props: typeof __VLS_8) => any;
+} & {
+    'before-delete-button'?: (props: typeof __VLS_10) => any;
+} & {
+    'after-delete-button'?: (props: typeof __VLS_19) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: ((...args: any[]) => any) | undefined;
+}>, {
+    skeleton: boolean;
+    tabItems: TabItem[];
+    canDelete: boolean;
+    deleteButtonDisabled: boolean;
+    showDeleteButton: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/crud/CrudDetailNav.vue

@@ -0,0 +1,65 @@
+<script setup>
+import {
+  ref
+} from "vue";
+import {
+  AntTabs,
+  Position,
+  InputState
+} from "@antify/ui";
+import DeleteDialog from "../dialogs/DeleteDialog.vue";
+import DeleteButton from "../buttons/DeleteButton.vue";
+defineEmits([
+  "delete"
+]);
+defineProps({
+  tabItems: { type: Array, required: false, default: () => [] },
+  deleteButtonDisabled: { type: Boolean, required: false, default: false },
+  getEntityName: { type: Function, required: true },
+  canDelete: { type: Boolean, required: false, default: true },
+  showDeleteButton: { type: Boolean, required: false, default: true },
+  skeleton: { type: Boolean, required: false, default: false },
+  deleteTooltipMessage: { type: String, required: false },
+  tooltipState: { type: String, required: false }
+});
+const dialogOpen = ref(false);
+</script>
+
+<template>
+  <div
+    class="flex justify-between items-stretch gap-2 bg-white h-[52px]"
+    data-e2e="crud-detail-nav"
+  >
+    <slot name="tabs">
+      <AntTabs
+        :tab-items="tabItems"
+        :skeleton="skeleton"
+      />
+    </slot>
+
+    <div class="flex gap-2 pr-2 py-2">
+      <slot name="buttons">
+        <slot name="before-delete-button" />
+
+        <DeleteButton
+          v-if="showDeleteButton"
+          :disabled="deleteButtonDisabled || !canDelete"
+          :skeleton="skeleton"
+          :can-delete="canDelete"
+          :delete-tooltip-message="deleteTooltipMessage"
+          :invalid-permission-tooltip-position="Position.left"
+          :tooltip-state="tooltipState"
+          @click="() => dialogOpen = true"
+        />
+
+        <slot name="after-delete-button" />
+      </slot>
+    </div>
+
+    <DeleteDialog
+      v-model:open="dialogOpen"
+      :entity="getEntityName()"
+      @confirm="$emit('delete')"
+    />
+  </div>
+</template>

package/dist/runtime/components/crud/CrudDetailNav.vue.d.ts

@@ -0,0 +1,40 @@
+import { type TabItem, InputState } from '@antify/ui';
+type __VLS_Props = {
+    tabItems?: TabItem[];
+    deleteButtonDisabled?: boolean;
+    getEntityName: () => string;
+    canDelete?: boolean;
+    showDeleteButton?: boolean;
+    skeleton?: boolean;
+    deleteTooltipMessage?: string;
+    tooltipState?: InputState;
+};
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {}, __VLS_19: {};
+type __VLS_Slots = {} & {
+    tabs?: (props: typeof __VLS_1) => any;
+} & {
+    buttons?: (props: typeof __VLS_8) => any;
+} & {
+    'before-delete-button'?: (props: typeof __VLS_10) => any;
+} & {
+    'after-delete-button'?: (props: typeof __VLS_19) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: ((...args: any[]) => any) | undefined;
+}>, {
+    skeleton: boolean;
+    tabItems: TabItem[];
+    canDelete: boolean;
+    deleteButtonDisabled: boolean;
+    showDeleteButton: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/crud/CrudTableFilter.d.vue.ts

@@ -0,0 +1,48 @@
+import { InputState } from '@antify/ui';
+type __VLS_Props = {
+    fullWidth?: boolean;
+    showFilter?: boolean;
+    showSearch?: boolean;
+    searchQuery?: string;
+    searchAutoFocus?: boolean;
+    hasFilter?: boolean;
+    canCreate?: boolean;
+    skeleton?: boolean;
+    searchPlaceholderText?: string;
+    createTooltipMessage?: string;
+    tooltipState?: InputState;
+};
+declare var __VLS_1: {}, __VLS_29: {}, __VLS_31: {};
+type __VLS_Slots = {} & {
+    filter?: (props: typeof __VLS_1) => any;
+} & {
+    dropdownContent?: (props: typeof __VLS_29) => any;
+} & {
+    buttons?: (props: typeof __VLS_31) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    search: (...args: any[]) => void;
+    create: (...args: any[]) => void;
+    removeFilter: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSearch?: ((...args: any[]) => any) | undefined;
+    onCreate?: ((...args: any[]) => any) | undefined;
+    onRemoveFilter?: ((...args: any[]) => any) | undefined;
+}>, {
+    skeleton: boolean;
+    canCreate: boolean;
+    fullWidth: boolean;
+    showFilter: boolean;
+    showSearch: boolean;
+    searchQuery: string;
+    searchAutoFocus: boolean;
+    hasFilter: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/crud/CrudTableFilter.vue

@@ -0,0 +1,153 @@
+<script setup>
+import CreateButton from "../buttons/CreateButton.vue";
+import {
+  computed,
+  ref,
+  watch
+} from "vue";
+import {
+  faFilter,
+  faMultiply
+} from "@fortawesome/free-solid-svg-icons";
+import {
+  useRoute,
+  useRouter
+} from "vue-router";
+import {
+  AntDropdown,
+  AntButton,
+  AntSearch,
+  State,
+  Grouped,
+  Position,
+  InputState
+} from "@antify/ui";
+const props = defineProps({
+  fullWidth: { type: Boolean, required: false, default: true },
+  showFilter: { type: Boolean, required: false, default: true },
+  showSearch: { type: Boolean, required: false, default: true },
+  searchQuery: { type: String, required: false, default: "search" },
+  searchAutoFocus: { type: Boolean, required: false, default: true },
+  hasFilter: { type: Boolean, required: false, default: false },
+  canCreate: { type: Boolean, required: false, default: true },
+  skeleton: { type: Boolean, required: false, default: false },
+  searchPlaceholderText: { type: String, required: false },
+  createTooltipMessage: { type: String, required: false },
+  tooltipState: { type: String, required: false }
+});
+const emit = defineEmits([
+  "search",
+  "create",
+  "removeFilter"
+]);
+const router = useRouter();
+const route = useRoute();
+const showDropdown = ref(false);
+const _fullWidth = ref(props.fullWidth);
+const search = computed({
+  get: () => decodeURIComponent(route.query[props.searchQuery] || ""),
+  set: (value) => {
+    const query = {
+      ...route.query,
+      [props.searchQuery]: encodeURIComponent(value)
+    };
+    if (!value) {
+      delete query[props.searchQuery];
+    }
+    (async () => {
+      await router.replace({
+        ...route,
+        query
+      });
+      emit("search", value);
+    })();
+  }
+});
+const searchInputRef = ref(null);
+watch(() => props.fullWidth, (val) => {
+  setTimeout(() => {
+    _fullWidth.value = val;
+  }, val ? 250 : 300);
+});
+watch(searchInputRef, (val) => {
+  if (!val || !props.searchAutoFocus) {
+    return;
+  }
+  val.focus();
+});
+</script>
+
+<template>
+  <div
+    class="flex h-full items-center p-2 gap-2 bg-white"
+    data-e2e="crud-table-filter"
+  >
+    <div
+      class="flex gap-2.5 grow"
+      :class="{ 'grow': !_fullWidth }"
+    >
+      <div :class="{ 'w-80': _fullWidth, 'w-full': !_fullWidth }">
+        <slot name="filter">
+          <AntSearch
+            v-if="showSearch"
+            v-model="search"
+            v-model:input-ref="searchInputRef"
+            :skeleton="skeleton"
+            :placeholder="searchPlaceholderText || 'Suche'"
+          />
+        </slot>
+      </div>
+
+      <AntDropdown
+        v-if="showFilter"
+        v-model:show-dropdown="showDropdown"
+        :position="Position.left"
+        :close-on-click-outside="!showDropdown"
+      >
+        <div class="flex">
+          <AntButton
+            :state="hasFilter ? State.info : State.base"
+            :grouped="hasFilter ? Grouped.left : Grouped.none"
+            :skeleton="skeleton"
+            :icon-left="faFilter"
+            @click="() => showDropdown = !showDropdown"
+          />
+
+          <AntButton
+            v-if="hasFilter"
+            :state="State.info"
+            :grouped="Grouped.right"
+            :skeleton="skeleton"
+            :icon-left="faMultiply"
+            filled
+            @click="$emit('removeFilter')"
+          />
+        </div>
+
+        <template #content>
+          <slot name="dropdownContent" />
+        </template>
+      </AntDropdown>
+
+<!--  Temporary solution: Use backlayer instead of on click outside to solve the problem with popover over other popover    -->
+      <div
+        v-if="showDropdown"
+        class="inset-0 absolute w-full h-full z-20"
+        @click="showDropdown = false"
+      />
+    </div>
+
+    <div>
+      <slot name="buttons">
+        <CreateButton
+          :skeleton="skeleton"
+          :can-create="canCreate"
+          :invalid-permission-tooltip-position="Position.left"
+          :create-tooltip-message="createTooltipMessage"
+          :tooltip-state="tooltipState"
+          @click="() => emit('create')"
+        />
+      </slot>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/crud/CrudTableFilter.vue.d.ts

@@ -0,0 +1,48 @@
+import { InputState } from '@antify/ui';
+type __VLS_Props = {
+    fullWidth?: boolean;
+    showFilter?: boolean;
+    showSearch?: boolean;
+    searchQuery?: string;
+    searchAutoFocus?: boolean;
+    hasFilter?: boolean;
+    canCreate?: boolean;
+    skeleton?: boolean;
+    searchPlaceholderText?: string;
+    createTooltipMessage?: string;
+    tooltipState?: InputState;
+};
+declare var __VLS_1: {}, __VLS_29: {}, __VLS_31: {};
+type __VLS_Slots = {} & {
+    filter?: (props: typeof __VLS_1) => any;
+} & {
+    dropdownContent?: (props: typeof __VLS_29) => any;
+} & {
+    buttons?: (props: typeof __VLS_31) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    search: (...args: any[]) => void;
+    create: (...args: any[]) => void;
+    removeFilter: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSearch?: ((...args: any[]) => any) | undefined;
+    onCreate?: ((...args: any[]) => any) | undefined;
+    onRemoveFilter?: ((...args: any[]) => any) | undefined;
+}>, {
+    skeleton: boolean;
+    canCreate: boolean;
+    fullWidth: boolean;
+    showFilter: boolean;
+    showSearch: boolean;
+    searchQuery: string;
+    searchAutoFocus: boolean;
+    hasFilter: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/crud/CrudTableNav.d.vue.ts

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    count: number | null;
+    pageQuery?: string;
+    itemsPerPageQuery?: string;
+    fullWidth?: boolean;
+    validItemsPerPage?: number[];
+    skeleton?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    changeItemsPerPage: (...args: any[]) => void;
+    changePage: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChangeItemsPerPage?: ((...args: any[]) => any) | undefined;
+    onChangePage?: ((...args: any[]) => any) | undefined;
+}>, {
+    skeleton: boolean;
+    fullWidth: boolean;
+    pageQuery: string;
+    itemsPerPageQuery: string;
+    validItemsPerPage: number[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;