@finggujadhav/vue 0.9.0

package/package.json

@@ -0,0 +1,32 @@
+{
+    "name": "@finggujadhav/vue",
+    "version": "0.9.0",
+    "description": "Vue adapter for FingguFlux UI library",
+    "main": "dist/index.js",
+    "module": "src/index.ts",
+    "types": "src/index.ts",
+    "scripts": {
+        "build": "echo 'SFCs do not require pre-build for this release'"
+    },
+    "files": [
+        "dist",
+        "src"
+    ],
+    "exports": {
+        ".": {
+            "types": "./src/index.ts",
+            "import": "./src/index.ts"
+        }
+    },
+    "dependencies": {
+        "@finggujadhav/core": "0.9.0",
+        "@finggujadhav/js-helper": "0.9.0"
+    },
+    "peerDependencies": {
+        "vue": ">=3.0.0"
+    },
+    "devDependencies": {
+        "vue": "^3.0.0",
+        "typescript": "^5.0.0"
+    }
+}

package/src/Button.vue

@@ -0,0 +1,74 @@
+<template>
+  <button :class="ffClasses" v-bind="$attrs">
+    <slot />
+  </button>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, PropType } from 'vue';
+import { useFinggu } from './composable';
+
+const VARIANTS = {
+  primary: 'ff-btn-primary',
+  secondary: 'ff-btn-secondary',
+  ghost: 'ff-btn-ghost',
+  outline: 'ff-btn-outline'
+};
+
+const SIZES = {
+  sm: 'ff-btn-sm',
+  md: 'ff-btn-md',
+  lg: 'ff-btn-lg'
+};
+
+const MOTIONS = {
+  fade: 'ff-fade-in',
+  'slide-up': 'ff-slide-up',
+  'scale-in': 'ff-scale-in',
+  lift: 'ff-hover-lift'
+};
+
+export const __ffClasses_Button = [
+  'ff-btn',
+  ...Object.values(VARIANTS),
+  ...Object.values(SIZES),
+  ...Object.values(MOTIONS),
+  'ff-card-glass'
+];
+
+export default defineComponent({
+  name: 'FingguButton',
+  inheritAttrs: false,
+  props: {
+    variant: {
+      type: String as PropType<keyof typeof VARIANTS>,
+      default: 'primary'
+    },
+    size: {
+      type: String as PropType<keyof typeof SIZES>,
+      default: 'md'
+    },
+    motion: {
+      type: String as PropType<keyof typeof MOTIONS>,
+      default: undefined
+    },
+    glass: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const { resolveAll } = useFinggu();
+
+    const ffClasses = computed(() => resolveAll([
+      'ff-btn',
+      VARIANTS[props.variant],
+      SIZES[props.size],
+      props.glass && 'ff-card-glass',
+      props.motion && MOTIONS[props.motion]
+    ]));
+
+    return { ffClasses };
+  }
+});
+</script>

package/src/Card.vue

@@ -0,0 +1,56 @@
+<template>
+  <div :class="ffClasses" v-bind="$attrs">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, PropType } from 'vue';
+import { useFinggu } from './composable';
+
+const VARIANTS = {
+  outline: 'ff-card-outline',
+  glass: 'ff-card-glass'
+};
+
+const PADDINGS = {
+  none: 'ff-p-0',
+  sm: 'ff-p-2',
+  md: 'ff-p-4',
+  lg: 'ff-p-8'
+};
+
+export const __ffClasses_Card = [
+  'ff-card',
+  'ff-card-header',
+  'ff-card-body',
+  ...Object.values(VARIANTS),
+  ...Object.values(PADDINGS)
+];
+
+export default defineComponent({
+  name: 'FingguCard',
+  inheritAttrs: false,
+  props: {
+    variant: {
+      type: String as PropType<keyof typeof VARIANTS>,
+      default: undefined
+    },
+    padding: {
+      type: String as PropType<keyof typeof PADDINGS>,
+      default: 'md'
+    }
+  },
+  setup(props) {
+    const { resolveAll } = useFinggu();
+
+    const ffClasses = computed(() => resolveAll([
+      'ff-card',
+      props.variant && VARIANTS[props.variant],
+      PADDINGS[props.padding]
+    ]));
+
+    return { ffClasses };
+  }
+});
+</script>

package/src/Dropdown.vue

@@ -0,0 +1,93 @@
+<template>
+  <div :class="ffContainerClasses" ref="containerRef">
+    <button
+      type="button"
+      :class="ffTriggerClasses"
+      @click="toggle"
+      aria-haspopup="true"
+      :aria-expanded="isOpen"
+    >
+      <slot name="trigger" />
+    </button>
+    <div
+      :class="ffMenuClasses"
+      :data-ff-state="isOpen ? 'open' : 'closed'"
+      role="menu"
+      :aria-hidden="!isOpen"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted, onUnmounted, computed, PropType } from 'vue';
+import { useFinggu } from './composable';
+
+export const __ffClasses_Dropdown = [
+  'ff-dropdown',
+  'ff-dropdown-trigger',
+  'ff-dropdown-menu',
+  'ff-dropdown-menu-right',
+  'ff-dropdown-item'
+];
+
+export default defineComponent({
+  name: 'FingguDropdown',
+  props: {
+    align: {
+      type: String as PropType<'left' | 'right'>,
+      default: 'left'
+    }
+  },
+  setup(props) {
+    const { resolveAll } = useFinggu();
+    const isOpen = ref(false);
+    const containerRef = ref<HTMLElement | null>(null);
+
+    const toggle = () => { isOpen.value = !isOpen.value; };
+    const close = () => { isOpen.value = false; };
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.value && !containerRef.value.contains(event.target as Node)) {
+        close();
+      }
+    };
+
+    onMounted(() => {
+      document.addEventListener('mousedown', handleClickOutside);
+    });
+
+    onUnmounted(() => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    });
+
+    const ffContainerClasses = computed(() => resolveAll(['ff-dropdown']));
+    const ffTriggerClasses = computed(() => resolveAll(['ff-dropdown-trigger']));
+    const ffMenuClasses = computed(() => resolveAll([
+      'ff-dropdown-menu',
+      props.align === 'right' && 'ff-dropdown-menu-right'
+    ]));
+
+    return { 
+      isOpen, 
+      containerRef, 
+      toggle, 
+      ffContainerClasses, 
+      ffTriggerClasses, 
+      ffMenuClasses 
+    };
+  }
+});
+
+// DropdownItem as a simple functional-like component
+export const DropdownItem = defineComponent({
+  name: 'FingguDropdownItem',
+  setup(_, { slots, attrs }) {
+    const { resolveAll } = useFinggu();
+    const ffClasses = computed(() => resolveAll(['ff-dropdown-item', attrs.class as string]));
+    return () => h('div', { ...attrs, class: ffClasses.value }, slots.default?.());
+  }
+});
+import { h } from 'vue';
+</script>

package/src/Input.vue

@@ -0,0 +1,32 @@
+<template>
+  <input :class="ffClasses" v-bind="$attrs" />
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue';
+import { useFinggu } from './composable';
+
+export const __ffClasses_Input = [
+  'ff-input',
+  'ff-input-error'
+];
+
+export default defineComponent({
+  name: 'FingguInput',
+  inheritAttrs: false,
+  props: {
+    error: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const { resolveAll } = useFinggu();
+    const ffClasses = computed(() => resolveAll([
+      'ff-input',
+      props.error && 'ff-input-error'
+    ]));
+    return { ffClasses };
+  }
+});
+</script>

package/src/Modal.vue

@@ -0,0 +1,79 @@
+<template>
+  <teleport to="body" v-if="mounted">
+    <div
+      v-show="isOpen || animating"
+      :class="ffContainerClasses"
+      aria-hidden="!isOpen"
+    >
+      <div class="ff-modal-overlay" @click="$emit('close')" />
+      <div :class="ffContentClasses">
+        <slot />
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watch, onMounted, onUnmounted, computed } from 'vue';
+import { useFinggu } from './composable';
+
+export const __ffClasses_Modal = [
+  'ff-modal',
+  'ff-modal-open',
+  'ff-modal-closed',
+  'ff-modal-overlay',
+  'ff-modal-content'
+];
+
+export default defineComponent({
+  name: 'FingguModal',
+  props: {
+    isOpen: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: ['close'],
+  setup(props) {
+    const { resolveAll } = useFinggu();
+    const mounted = ref(false);
+    const animating = ref(false);
+
+    onMounted(() => {
+      mounted.value = true;
+    });
+
+    watch(() => props.isOpen, (val) => {
+      if (val) {
+        document.body.style.overflow = 'hidden';
+        animating.value = true;
+      } else {
+        setTimeout(() => {
+          animating.value = false;
+          document.body.style.overflow = '';
+        }, 300); // Exit animation duration
+      }
+    });
+
+    onUnmounted(() => {
+      document.body.style.overflow = '';
+    });
+
+    const ffContainerClasses = computed(() => resolveAll([
+      'ff-modal',
+      props.isOpen ? 'ff-modal-open' : 'ff-modal-closed'
+    ]));
+
+    const ffContentClasses = computed(() => resolveAll([
+      'ff-modal-content'
+    ]));
+
+    return { 
+      mounted, 
+      animating, 
+      ffContainerClasses, 
+      ffContentClasses 
+    };
+  }
+});
+</script>

package/src/Tabs.ts

@@ -0,0 +1,87 @@
+<script lang="ts" >
+import { defineComponent, h, provide, ref, InjectionKey, Ref, PropType } from 'vue';
+import { useFinggu } from './composable';
+
+export const __ffClasses_Tabs = [
+    'ff-tabs',
+    'ff-tab-list',
+    'ff-tab',
+    'ff-tab-active',
+    'ff-tab-content'
+];
+
+interface TabsContext {
+    activeTab: Ref<string>;
+    setActiveTab: (value: string) => void;
+}
+
+export const TabsSymbol: InjectionKey<TabsContext> = Symbol('FingguTabs');
+
+export const Tabs = defineComponent({
+    name: 'FingguTabs',
+    props: {
+        defaultValue: {
+            type: String,
+            required: true
+        }
+    },
+    setup(props, { slots }) {
+        const activeTab = ref(props.defaultValue);
+        const setActiveTab = (value: string) => { activeTab.value = value; };
+
+        provide(TabsSymbol, { activeTab, setActiveTab });
+
+        return () => h('div', { class: 'ff-tabs' }, slots.default?.());
+    }
+});
+
+export const TabList = defineComponent({
+    name: 'FingguTabList',
+    setup(_, { slots }) {
+        return () => h('div', { class: 'ff-tab-list', role: 'tablist' }, slots.default?.());
+    }
+});
+
+export const TabTrigger = defineComponent({
+    name: 'FingguTabTrigger',
+    props: {
+        value: {
+            type: String,
+            required: true
+        }
+    },
+    setup(props, { slots }) {
+        const context = inject(TabsSymbol);
+        const { resolveAll } = useFinggu();
+
+        return () => {
+            const isActive = context?.activeTab.value === props.value;
+            return h('button', {
+                role: 'tab',
+                'aria-selected': isActive,
+                class: resolveAll(['ff-tab', isActive && 'ff-tab-active']),
+                onClick: () => context?.setActiveTab(props.value)
+            }, slots.default?.());
+        };
+    }
+});
+
+export const TabContent = defineComponent({
+    name: 'FingguTabContent',
+    props: {
+        value: {
+            type: String,
+            required: true
+        }
+    },
+    setup(props, { slots }) {
+        const context = inject(TabsSymbol);
+        return () => (context?.activeTab.value === props.value)
+            ? h('div', { class: 'ff-tab-content' }, slots.default?.())
+            : null;
+    }
+});
+
+// For SFC imports
+import { inject } from 'vue';
+export default Tabs;

package/src/composable.ts

@@ -0,0 +1,44 @@
+import { inject } from 'vue';
+import { FingguSymbol, FingguOptions } from './plugin';
+
+/**
+ * useFinggu composable to resolve FingguFlux classes.
+ */
+export function useFinggu() {
+    const finggu = inject<FingguOptions>(FingguSymbol, {
+        mapping: null,
+        mode: 'dev'
+    });
+
+    const resolve = (className: string): string => {
+        const { mapping, mode } = finggu;
+        if (mode === 'dev' || !mapping) return className;
+
+        const mapped = mapping[className];
+        if (mode === 'ext' && !mapped && className.startsWith('ff-')) {
+            const errorMsg = `[FingguFlux] Critical: Class '${className}' not found in mapping.json in Extreme mode. This will cause broken styles in production.`;
+            // @ts-ignore - support vite/nuxt environments
+            const isDev = typeof process !== 'undefined' ? process.env.NODE_ENV === 'development' : (import.meta as any).env?.DEV;
+
+            if (isDev) {
+                throw new Error(errorMsg);
+            } else {
+                console.error(errorMsg);
+            }
+        }
+        return mapped || className;
+    };
+
+    const resolveAll = (classes: (string | undefined | null | false)[]): string => {
+        return classes
+            .filter(Boolean)
+            .map(c => resolve(c as string))
+            .join(' ');
+    };
+
+    return {
+        resolve,
+        resolveAll,
+        mode: finggu.mode
+    };
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+export * from './plugin';
+export * from './composable';
+
+// Components
+export { default as Button, __ffClasses_Button } from './Button.vue';
+export { default as Card, __ffClasses_Card } from './Card.vue';
+export { default as Input, __ffClasses_Input } from './Input.vue';
+export { default as Modal, __ffClasses_Modal } from './Modal.vue';
+export { Tabs, TabList, TabTrigger, TabContent, __ffClasses_Tabs } from './Tabs';
+export { default as Dropdown, __ffClasses_Dropdown, DropdownItem } from './Dropdown.vue';

package/src/plugin.ts

@@ -0,0 +1,42 @@
+import { InjectionKey, App, reactive, watch } from 'vue';
+import { setTheme, FingguTheme } from '@finggujadhav/js-helper';
+
+export interface FingguMapping {
+    _version?: string;
+    [key: string]: string | undefined;
+}
+
+export interface FingguOptions {
+    mapping?: FingguMapping;
+    mode?: 'dev' | 'opt' | 'ext';
+    version?: string;
+    theme?: FingguTheme;
+}
+
+export const FingguSymbol: InjectionKey<FingguOptions> = Symbol('FingguFlux');
+
+/**
+ * FingguFlux Vue Plugin
+ * Installs mapping, mode, and theme via provide/inject.
+ */
+export const FingguPlugin = {
+    install(app: App, options: FingguOptions = {}) {
+        const state = reactive({
+            mapping: options.mapping || null,
+            mode: options.mode || 'dev',
+            version: options.version,
+            theme: options.theme || 'system'
+        });
+
+        if (state.mapping && state.version && state.mapping._version && state.mapping._version !== state.version) {
+            console.warn(`[FingguFlux] Version Mismatch: mapping.json (${state.mapping._version}) does not match expected CSS version (${state.version})`);
+        }
+
+        // Global theme application (optional, can be scoped)
+        watch(() => state.theme, (newTheme) => {
+            setTheme(newTheme as FingguTheme);
+        }, { immediate: true });
+
+        app.provide(FingguSymbol, state);
+    }
+};