@antify/template-module 0.0.2

package/README.md

@@ -0,0 +1,163 @@
+# @antify/template-module
+
+![Nuxt](https://img.shields.io/badge/Nuxt-3-green)
+
+A powerful Nuxt module providing a high-level UI layer for the Antify ecosystem. It seamlessly integrates `@antify/ui` and adds a set of smart, logic-heavy components and client-side utilities to accelerate your development workflow.
+
+## Features
+
+- 🚀 **Zero Config Auto-Imports**: Use any component without manual imports.
+- 🎨 **Seamless @antify/ui Integration**: All base components (prefixed with `Ant`) are available out of the box.
+- 🧠 **Smart Logic Components**: Specialized components (prefixed with `AntTemplate`) with built-in logic.
+- 🍞 **Built-in Toaster**: Simple global API to trigger success or error notifications.
+- 🧪 **Advanced Validation**: The `useFormField` utility to bridge Yup validation with UI states.
+- 🛠 **Client-Side Toolbox**: Composables for CRUD routing, error handling, and state detection.
+
+## Installation
+
+Add the module to your project:
+
+```bash
+pnpm add @antify/template-module
+```
+
+Then, add it to your `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  modules: [
+    '@antify/template-module'
+  ]
+})
+```
+
+## Configuration
+You can customize the module behavior via the templateModule key:
+
+```ts
+export default defineNuxtConfig({
+  templateModule: {
+    /**
+     * Absolute or relative path to your custom tailwind.css file.
+     * Use this to inject custom @theme blocks or plugins.
+     */
+    tailwindCSSPath: '@/assets/css/tailwind.css'
+  }
+})
+```
+
+## Usage
+## Components
+The module automatically exports components from both the UI library and the template layer.
+
+- **Base UI components**  
+  Prefixed with `Ant` (e.g. `<AntButton />`)
+
+- **Logic-driven template components**  
+  Prefixed with `AntTemplate` (e.g. `<AntTemplateSaveButton />`)
+
+```vue
+<template>
+  <div>
+    <AntButton>Button</AntButton>
+
+    <AntTemplateSaveButton @click="handleSave" />
+  </div>
+</template>
+```
+
+## Toaster Plugin
+Trigger notifications from anywhere in your app using the $templateModule helper.
+The toaster is intended for global, non-blocking feedback such as:
+- API success or error messages
+- Redirect notifications
+- Form submission feedback
+
+```ts
+const { $templateModule } = useNuxtApp();
+
+// Success Notification
+$templateModule.toaster.toastSuccess('Success message');
+
+// Error Notification
+$templateModule.toaster.toastError('Error message');
+```
+
+## Composables (useUiClient)
+> The `useUiClient()` composable is the main entry point for all client-side helpers.
+> It exposes grouped utilities such as `utils` (forms, routing) and `handler` (response handling).
+
+Form Validation with useFormField
+Wraps a validation function (e.g., a Yup schema check) and returns reactive properties ready for use with Antify UI components.
+
+```vue
+<script setup lang="ts">
+import {
+useUiClient,
+ref,
+} from '#imports'
+import {
+  string
+} from 'yup';
+  
+const { utils } = useUiClient();
+
+const mySchema = string().required('This field is required');
+const val = ref('');
+
+const { errors, state, validate } = utils.useFormField(async () => {
+  // Your yup validation logic
+  await mySchema.validate(val.value);
+});
+</script>
+
+<template>
+  <AntTextInput 
+    v-model="val"
+    :messages="errors" 
+    :state="state" 
+    @validate="validate"
+  />
+</template>
+```
+
+CRUD Routing
+Easily manage navigation and state detection (Create vs. Update page) within your application.
+
+```ts
+const { utils } = useUiClient();
+const { isCreatePage, isUpdatePage, getDetailRoute, isListingPage, isDetailPage } = utils.useCrudRouting(
+  'users-id', // Detail route name
+  'users'    // Listing route name
+);
+```
+
+Response Handling
+Automate repetitive tasks like handling 404s or fatal errors during data fetching.
+
+```ts
+const { handler } = useUiClient();
+
+// Handles "not found" data from API and redirects with a toast message
+await handler.handleNotFoundResponse(response, '/fallback-url');
+
+// Throws a fatal Nuxt error if a fetch error occurs
+handler.handleResponseError(error);
+```
+
+## Development
+
+1. Clone this repository
+
+2. Install dependencies:
+```bash
+   pnpm install
+```
+3. Start the playground:
+```bash
+   pnpm dev
+```
+
+## License
+MIT License
+

package/dist/module.d.mts

@@ -0,0 +1,10 @@
+import * as _nuxt_schema from '@nuxt/schema';
+export * from '../dist/runtime/types.js';
+
+type ModuleOptions = {
+    tailwindCSSPath?: string;
+};
+
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };

package/dist/module.d.ts

@@ -0,0 +1,10 @@
+import * as _nuxt_schema from '@nuxt/schema';
+export * from '../dist/runtime/types.js';
+
+type ModuleOptions = {
+    tailwindCSSPath?: string;
+};
+
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "@antify/template-module",
+  "configKey": "templateModule",
+  "version": "0.0.2",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "2.0.0"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,101 @@
+import { defineNuxtModule, createResolver, addPlugin, addImportsDir, addComponentsDir, addComponent } from '@nuxt/kit';
+import tailwindcss from '@tailwindcss/vite';
+
+const uiComponents = [
+  "AntButton",
+  "AntColorInput",
+  "AntDatePicker",
+  "AntDialog",
+  "AntField",
+  "AntFormGroup",
+  "AntFormGroupLabel",
+  "AntBaseInput",
+  "AntDropDown",
+  "AntInputDescription",
+  "AntInputLabel",
+  "AntInputLimiter",
+  "AntCheckbox",
+  "AntCheckboxGroup",
+  "AntDateInput",
+  "AntNumberInput",
+  "AntPasswordInput",
+  "AntRadio",
+  "AntRadioGroup",
+  "AntRangeSlider",
+  "AntSearch",
+  "AntSelect",
+  "AntSwitch",
+  "AntSwitcher",
+  "AntTagInput",
+  "AntTextarea",
+  "AntTextInput",
+  "AntUnitInput",
+  "AntImageInput",
+  "AntNavLeftLayout",
+  "AntNavbar",
+  "AntNavbarItem",
+  "AntTable",
+  "AntTabs",
+  "AntTransitionCollapseHeight",
+  "AntAccordion",
+  "AntAccordionItem",
+  "AntAlert",
+  "AntCard",
+  "AntContent",
+  "AntDropdown",
+  "AntIcon",
+  "AntKeycap",
+  "AntListGroup",
+  "AntListGroupItem",
+  "AntModal",
+  "AntPagination",
+  "AntPopover",
+  "AntSkeleton",
+  "AntSpinner",
+  "AntTag",
+  "AntToast",
+  "AntToaster",
+  "AntTooltip"
+];
+
+const moduleKey = "templateModule";
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "@antify/template-module",
+    configKey: moduleKey
+  },
+  defaults: {},
+  async setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    const runtimeDir = resolve("./runtime");
+    nuxt.options.build.transpile.push(runtimeDir);
+    addPlugin(resolve(runtimeDir, "plugins/template-module"));
+    addImportsDir(resolve(runtimeDir, "composables"));
+    nuxt.options.alias["#template-module"] = "@antify/ui";
+    await addComponentsDir({
+      path: resolve(resolve(runtimeDir, "components")),
+      prefix: "AntTemplate",
+      pathPrefix: false,
+      global: true
+    });
+    uiComponents.forEach((name) => {
+      addComponent({
+        name,
+        export: name,
+        global: true,
+        filePath: "@antify/ui/components"
+      });
+    });
+    nuxt.hook("vite:extendConfig", (viteInlineConfig) => {
+      viteInlineConfig.plugins.push(tailwindcss());
+    });
+    nuxt.options.css.push(resolve(runtimeDir, "assets/antify.css"));
+    if (options.tailwindCSSPath) {
+      const tailwindCSSPath = resolve(nuxt.options.rootDir, options.tailwindCSSPath);
+      nuxt.options.css.push(tailwindCSSPath);
+    }
+    nuxt.options.runtimeConfig.public[moduleKey] = options;
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/assets/antify.css

@@ -0,0 +1 @@
+@import "@antify/ui";

package/dist/runtime/components/Main.mdx

@@ -0,0 +1,6 @@
+import {Canvas, Meta, Story} from '@storybook/blocks';
+import * as MainStories from './Main.stories';
+
+<Meta of={MainStories}/>
+
+<h1>This is the storybook for default template.</h1>

package/dist/runtime/components/buttons/ActionButton.d.vue.ts

@@ -0,0 +1,52 @@
+/**
+ * This button is used for everything what is the primary
+ * action like save, confirm, create, etc.
+ */
+import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { Position, State, InputState, Size, Grouped } from '@antify/ui';
+type __VLS_Props = {
+    iconLeft?: IconDefinition;
+    iconRight?: IconDefinition;
+    size?: Size;
+    disabled?: boolean;
+    grouped?: Grouped;
+    state?: State;
+    skeleton?: boolean;
+    expanded?: boolean;
+    filled?: boolean;
+    hasPermission?: boolean;
+    tooltipPosition?: Position;
+    tooltipState?: InputState;
+    tooltipDelay?: number;
+    submit?: boolean;
+    dataE2e?: string;
+};
+declare var __VLS_11: {}, __VLS_14: {}, __VLS_16: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+} & {
+    tooltipContent?: (props: typeof __VLS_14) => any;
+} & {
+    invalidPermissionTooltipContent?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (...args: any[]) => void;
+    click: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onBlur?: ((...args: any[]) => any) | undefined;
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {
+    submit: boolean;
+    state: State;
+    filled: boolean;
+    dataE2e: string;
+    hasPermission: 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/buttons/ActionButton.vue

@@ -0,0 +1,74 @@
+<script setup>
+import {
+  computed,
+  useSlots
+} from "vue";
+import {
+  AntButton,
+  Position,
+  State,
+  InputState,
+  Size,
+  Grouped,
+  hasSlotContent
+} from "@antify/ui";
+defineEmits([
+  "click",
+  "blur"
+]);
+const props = defineProps({
+  iconLeft: { type: Object, required: false },
+  iconRight: { type: Object, required: false },
+  size: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  grouped: { type: String, required: false },
+  state: { type: String, required: false, default: State.primary },
+  skeleton: { type: Boolean, required: false },
+  expanded: { type: Boolean, required: false },
+  filled: { type: Boolean, required: false, default: true },
+  hasPermission: { type: Boolean, required: false, default: true },
+  tooltipPosition: { type: String, required: false },
+  tooltipState: { type: String, required: false },
+  tooltipDelay: { type: Number, required: false },
+  submit: { type: Boolean, required: false, default: false },
+  dataE2e: { type: String, required: false, default: "action-button" }
+});
+const slots = useSlots();
+const hasTooltip = computed(() => !props.skeleton && !props.disabled && props.hasPermission && hasSlotContent(slots["tooltipContent"]));
+const hasPermissionTooltip = computed(() => !props.skeleton && !(!props.disabled && props.hasPermission) && hasSlotContent(slots["invalidPermissionTooltipContent"]));
+</script>
+
+<template>
+  <AntButton
+    :icon-left="iconLeft"
+    :icon-right="iconRight"
+    :size="size"
+    :disabled="disabled || !hasPermission"
+    :grouped="grouped"
+    :skeleton="skeleton"
+    :expanded="expanded"
+    :state="state"
+    :filled="filled"
+    :tooltip-position="tooltipPosition"
+    :tooltip-state="tooltipState"
+    :tooltip-delay="hasPermissionTooltip ? 300 : tooltipDelay"
+    :submit="submit"
+    :data-e2e="dataE2e"
+    @click="$emit('click')"
+    @blur="$emit('blur')"
+  >
+    <slot />
+
+    <template #tooltip-content>
+      <slot
+        v-if="hasTooltip"
+        name="tooltipContent"
+      />
+
+      <slot
+        v-if="hasPermissionTooltip"
+        name="invalidPermissionTooltipContent"
+      />
+    </template>
+  </AntButton>
+</template>

package/dist/runtime/components/buttons/ActionButton.vue.d.ts

@@ -0,0 +1,52 @@
+/**
+ * This button is used for everything what is the primary
+ * action like save, confirm, create, etc.
+ */
+import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { Position, State, InputState, Size, Grouped } from '@antify/ui';
+type __VLS_Props = {
+    iconLeft?: IconDefinition;
+    iconRight?: IconDefinition;
+    size?: Size;
+    disabled?: boolean;
+    grouped?: Grouped;
+    state?: State;
+    skeleton?: boolean;
+    expanded?: boolean;
+    filled?: boolean;
+    hasPermission?: boolean;
+    tooltipPosition?: Position;
+    tooltipState?: InputState;
+    tooltipDelay?: number;
+    submit?: boolean;
+    dataE2e?: string;
+};
+declare var __VLS_11: {}, __VLS_14: {}, __VLS_16: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+} & {
+    tooltipContent?: (props: typeof __VLS_14) => any;
+} & {
+    invalidPermissionTooltipContent?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (...args: any[]) => void;
+    click: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onBlur?: ((...args: any[]) => any) | undefined;
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {
+    submit: boolean;
+    state: State;
+    filled: boolean;
+    dataE2e: string;
+    hasPermission: 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/buttons/CreateButton.d.vue.ts

@@ -0,0 +1,25 @@
+import { Position, Size, Grouped, InputState } from '@antify/ui';
+type __VLS_Props = {
+    iconVariant?: boolean;
+    size?: Size;
+    disabled?: boolean;
+    grouped?: Grouped;
+    skeleton?: boolean;
+    expanded?: boolean;
+    canCreate?: boolean;
+    tooltipPosition?: Position;
+    createTooltipMessage?: string;
+    tooltipState?: InputState;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (...args: any[]) => void;
+    click: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onBlur?: ((...args: any[]) => any) | undefined;
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {
+    iconVariant: boolean;
+    canCreate: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/buttons/CreateButton.vue

@@ -0,0 +1,67 @@
+<script setup>
+import ActionButton from "./ActionButton.vue";
+import {
+  Position,
+  Size,
+  Grouped,
+  State,
+  InputState
+} from "@antify/ui";
+import {
+  faPlus
+} from "@fortawesome/free-solid-svg-icons";
+defineEmits([
+  "click",
+  "blur"
+]);
+defineProps({
+  iconVariant: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  grouped: { type: String, required: false },
+  skeleton: { type: Boolean, required: false },
+  expanded: { type: Boolean, required: false },
+  canCreate: { type: Boolean, required: false, default: true },
+  tooltipPosition: { type: String, required: false },
+  createTooltipMessage: { type: String, required: false },
+  tooltipState: { type: String, required: false }
+});
+</script>
+
+<template>
+  <ActionButton
+    :filled="false"
+    :state="State.primary"
+    :size="size"
+    :disabled="disabled"
+    :icon-left="iconVariant ? faPlus : void 0"
+    :grouped="grouped"
+    :skeleton="skeleton"
+    :expanded="expanded"
+    :has-permission="canCreate"
+    :tooltip-position="tooltipPosition"
+    :tooltip-state="tooltipState"
+    data-e2e="create-button"
+    @click="$emit('click')"
+    @blur="$emit('blur')"
+  >
+    <template
+      v-if="!iconVariant"
+      #default
+    >
+      Erstellen
+    </template>
+
+    <template #invalidPermissionTooltipContent>
+      <div>
+        <template v-if="createTooltipMessage">
+          {{ createTooltipMessage }}
+        </template>
+
+        <template v-else>
+          Du hast keine Berechtigung um Einträge zu erstellen.<br> Bitte kontaktiere deinen Administrator
+        </template>
+      </div>
+    </template>
+  </ActionButton>
+</template>

package/dist/runtime/components/buttons/CreateButton.vue.d.ts

@@ -0,0 +1,25 @@
+import { Position, Size, Grouped, InputState } from '@antify/ui';
+type __VLS_Props = {
+    iconVariant?: boolean;
+    size?: Size;
+    disabled?: boolean;
+    grouped?: Grouped;
+    skeleton?: boolean;
+    expanded?: boolean;
+    canCreate?: boolean;
+    tooltipPosition?: Position;
+    createTooltipMessage?: string;
+    tooltipState?: InputState;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (...args: any[]) => void;
+    click: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onBlur?: ((...args: any[]) => any) | undefined;
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {
+    iconVariant: boolean;
+    canCreate: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/buttons/DeleteButton.d.vue.ts

@@ -0,0 +1,25 @@
+import { Position, Size, Grouped, InputState } from '@antify/ui';
+type __VLS_Props = {
+    iconVariant?: boolean;
+    size?: Size;
+    disabled?: boolean;
+    grouped?: Grouped;
+    skeleton?: boolean;
+    expanded?: boolean;
+    canDelete?: boolean;
+    tooltipPosition?: Position;
+    deleteTooltipMessage?: string;
+    tooltipState?: InputState;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (...args: any[]) => void;
+    click: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onBlur?: ((...args: any[]) => any) | undefined;
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {
+    iconVariant: boolean;
+    canDelete: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;