@gemafajarramadhan/dynamic-ui 1.0.0 → 1.0.2

package/dist/index.d.ts

@@ -0,0 +1,271 @@
+declare module '@gemafajarramadhan/dynamic-ui' {
+    import type { DefineComponent, Plugin } from 'vue'
+
+    // ─── Base Components ─────────────────────────────────────────────────────────
+
+    export const DCodeAutoComplete: DefineComponent<{
+        modelValue?: any
+        options?: any[]
+        label?: string
+        placeholder?: string
+        disabled?: boolean
+        visible?: boolean
+        skeleton?: boolean
+        error?: string | null
+        [key: string]: any
+    }>
+
+    export const DCodeButton: DefineComponent<{
+        text?: string
+        variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' | 'tonal' | 'elevated'
+        size?: 'default' | 'sm' | 'lg' | 'icon'
+        tooltip?: string
+        bgColor?: string
+        textColor?: string
+        hoverBgColor?: string
+        borderColor?: string
+        disabled?: boolean
+        type?: 'BUTTON' | 'SUBMIT' | 'RESET' | 'button' | 'submit' | 'reset'
+        visible?: boolean
+        skeleton?: boolean
+        [key: string]: any
+    }>
+
+    export const DCodeCard: DefineComponent<{
+        [key: string]: any
+    }>
+
+    export const DCodeChekbox: DefineComponent<{
+        modelValue?: boolean | string[] | any
+        label?: string
+        disabled?: boolean
+        visible?: boolean
+        [key: string]: any
+    }>
+
+    export const DCodeCurrencyField: DefineComponent<{
+        modelValue?: number | null
+        label?: string
+        placeholder?: string
+        disabled?: boolean
+        visible?: boolean
+        skeleton?: boolean
+        error?: string | null
+        currency?: string
+        [key: string]: any
+    }>
+
+    export const DCodeDatePicker: DefineComponent<{
+        modelValue?: string | Date | null
+        label?: string
+        placeholder?: string
+        disabled?: boolean
+        visible?: boolean
+        skeleton?: boolean
+        error?: string | null
+        format?: string
+        [key: string]: any
+    }>
+
+    export const DCodeDateRangePicker: DefineComponent<{
+        modelValue?: [string | Date | null, string | Date | null]
+        label?: string
+        placeholder?: string
+        disabled?: boolean
+        visible?: boolean
+        skeleton?: boolean
+        error?: string | null
+        [key: string]: any
+    }>
+
+    export const DCodeDialog: DefineComponent<{
+        modelValue?: boolean
+        title?: string
+        [key: string]: any
+    }>
+
+    export const DCodeDialogCloseBtn: DefineComponent<{
+        [key: string]: any
+    }>
+
+    export const DCodeDropzone: DefineComponent<{
+        modelValue?: File | File[] | null
+        label?: string
+        accept?: string
+        multiple?: boolean
+        disabled?: boolean
+        visible?: boolean
+        [key: string]: any
+    }>
+
+    export const DCodeFileField: DefineComponent<{
+        modelValue?: File | null
+        label?: string
+        accept?: string
+        disabled?: boolean
+        visible?: boolean
+        skeleton?: boolean
+        error?: string | null
+        [key: string]: any
+    }>
+
+    export const DCodeFileResult: DefineComponent<{
+        value?: string | null
+        label?: string
+        visible?: boolean
+        [key: string]: any
+    }>
+
+    export const DCodeIconDropdown: DefineComponent<{
+        items?: any[]
+        disabled?: boolean
+        visible?: boolean
+        [key: string]: any
+    }>
+
+    export const DCodeImageCropperDialog: DefineComponent<{
+        modelValue?: boolean
+        imageSrc?: string
+        [key: string]: any
+    }>
+
+    export const DCodeImageField: DefineComponent<{
+        modelValue?: string | File | null
+        label?: string
+        disabled?: boolean
+        visible?: boolean
+        skeleton?: boolean
+        error?: string | null
+        [key: string]: any
+    }>
+
+    export const DCodeImageResult: DefineComponent<{
+        value?: string | null
+        label?: string
+        visible?: boolean
+        [key: string]: any
+    }>
+
+    export const DCodeLabel: DefineComponent<{
+        for?: string
+        required?: boolean
+        [key: string]: any
+    }>
+
+    export const DCodeMultiSelect: DefineComponent<{
+        modelValue?: any[]
+        options?: any[]
+        label?: string
+        placeholder?: string
+        disabled?: boolean
+        visible?: boolean
+        skeleton?: boolean
+        error?: string | null
+        [key: string]: any
+    }>
+
+    export const DCodeOtpInput: DefineComponent<{
+        modelValue?: string
+        length?: number
+        disabled?: boolean
+        visible?: boolean
+        [key: string]: any
+    }>
+
+    export const DCodeProgressBar: DefineComponent<{
+        isApiLoading?: boolean
+        apiProgress?: number
+    }>
+
+    export const DCodeRadioCustom: DefineComponent<{
+        modelValue?: string | number | boolean
+        options?: any[]
+        label?: string
+        disabled?: boolean
+        visible?: boolean
+        [key: string]: any
+    }>
+
+    export const DCodeSwitch: DefineComponent<{
+        modelValue?: boolean
+        label?: string
+        disabled?: boolean
+        visible?: boolean
+        skeleton?: boolean
+        [key: string]: any
+    }>
+
+    export const DCodeTextField: DefineComponent<{
+        modelValue?: string | number | null
+        label?: string
+        placeholder?: string
+        clearable?: boolean
+        hideClearWhenEmpty?: boolean
+        textCase?: 'none' | 'uppercase' | 'lowercase' | 'titlecase' | 'sentencecase'
+        applyTextCaseToValue?: boolean
+        valueType?: 'free' | 'number' | 'letter' | 'letternumber' | 'email' | 'password'
+        allowSpaces?: boolean
+        allowChars?: string | string[]
+        pattern?: RegExp
+        visible?: boolean
+        skeleton?: boolean
+        showCharCount?: boolean
+        returnNumber?: boolean
+        error?: string | null
+        disabled?: boolean
+        [key: string]: any
+    }>
+
+    export const DCodeTextarea: DefineComponent<{
+        modelValue?: string | null
+        label?: string
+        placeholder?: string
+        disabled?: boolean
+        visible?: boolean
+        skeleton?: boolean
+        error?: string | null
+        [key: string]: any
+    }>
+
+    export const DCodeTimelineWithIcons: DefineComponent<{
+        items?: any[]
+        visible?: boolean
+        [key: string]: any
+    }>
+
+    export const DCodeUploadFile: DefineComponent<{
+        modelValue?: File | null
+        label?: string
+        accept?: string
+        disabled?: boolean
+        visible?: boolean
+        [key: string]: any
+    }>
+
+    export const DCodeWizard: DefineComponent<{
+        steps?: any[]
+        modelValue?: number
+        visible?: boolean
+        [key: string]: any
+    }>
+
+    // ─── Web Components (Custom Elements) ────────────────────────────────────────
+
+    export const MicroDynamicForm: any
+    export const MicroDynamicDatatable: any
+
+    // ─── Logic Registry ──────────────────────────────────────────────────────────
+
+    export function registerLogic(name: string, module: any): void
+    export function getLogicModule(name: string): any
+    export function unregisterLogic(name: string): void
+
+    // ─── Utilities ───────────────────────────────────────────────────────────────
+
+    export function cn(...inputs: any[]): string
+
+    // ─── Vue Plugin ──────────────────────────────────────────────────────────────
+
+    declare const DynamicUI: Plugin
+    export default DynamicUI
+}

package/package.json

@@ -1,25 +1,55 @@
 {
   "name": "@gemafajarramadhan/dynamic-ui",
-  "version": "1.0.0",
-  "description": "Vue 3 Microfrontend Dynamic Form & DataTable Builder (Web Components)",
+  "version": "1.0.2",
+  "description": "Vue 3 Dynamic UI Component Library - Compatible with Vue, React, Angular, and any other framework via Web Components",
   "type": "module",
+  "license": "MIT",
   "files": [
-    "dist"
+    "dist",
+    "src/index.d.ts"
   ],
-  "main": "./dist/dynamic-ui.umd.cjs",
-  "module": "./dist/dynamic-ui.js",
+  "main": "./dist/dynamic-ui.umd.js",
+  "module": "./dist/dynamic-ui.es.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/dynamic-ui.js",
-      "require": "./dist/dynamic-ui.umd.cjs"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/dynamic-ui.es.js",
+      "require": "./dist/dynamic-ui.umd.js"
     },
-    "./style.css": "./dist/style.css"
+    "./style.css": "./dist/style.css",
+    "./webcomponents": {
+      "import": "./dist/webcomponents/dynamic-ui.es.js",
+      "require": "./dist/webcomponents/dynamic-ui.umd.js"
+    }
   },
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vite build && node scripts/copy-types.js",
+    "build:lib": "vite build && node scripts/copy-types.js",
+    "build:webcomponent": "cross-env BUILD_MODE=webcomponent vite build --outDir dist/webcomponents",
+    "build:all": "npm run build:lib && npm run build:webcomponent",
     "preview": "vite preview"
   },
+  "keywords": [
+    "vue",
+    "vue3",
+    "components",
+    "ui",
+    "dynamic",
+    "form",
+    "datatable",
+    "web-components",
+    "micro-frontend"
+  ],
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": false
+    }
+  },
   "dependencies": {
     "@uppy/core": "^5.2.0",
     "@uppy/dashboard": "^5.1.1",
@@ -38,6 +68,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
+    "cross-env": "^7.0.3",
     "vite": "^7.2.4",
     "vue": "^3.5.24"
   }

package/src/index.d.ts

@@ -0,0 +1,271 @@
+declare module '@gemafajarramadhan/dynamic-ui' {
+    import type { DefineComponent, Plugin } from 'vue'
+
+    // ─── Base Components ─────────────────────────────────────────────────────────
+
+    export const DCodeAutoComplete: DefineComponent<{
+        modelValue?: any
+        options?: any[]
+        label?: string
+        placeholder?: string
+        disabled?: boolean
+        visible?: boolean
+        skeleton?: boolean
+        error?: string | null
+        [key: string]: any
+    }>
+
+    export const DCodeButton: DefineComponent<{
+        text?: string
+        variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' | 'tonal' | 'elevated'
+        size?: 'default' | 'sm' | 'lg' | 'icon'
+        tooltip?: string
+        bgColor?: string
+        textColor?: string
+        hoverBgColor?: string
+        borderColor?: string
+        disabled?: boolean
+        type?: 'BUTTON' | 'SUBMIT' | 'RESET' | 'button' | 'submit' | 'reset'
+        visible?: boolean
+        skeleton?: boolean
+        [key: string]: any
+    }>
+
+    export const DCodeCard: DefineComponent<{
+        [key: string]: any
+    }>
+
+    export const DCodeChekbox: DefineComponent<{
+        modelValue?: boolean | string[] | any
+        label?: string
+        disabled?: boolean
+        visible?: boolean
+        [key: string]: any
+    }>
+
+    export const DCodeCurrencyField: DefineComponent<{
+        modelValue?: number | null
+        label?: string
+        placeholder?: string
+        disabled?: boolean
+        visible?: boolean
+        skeleton?: boolean
+        error?: string | null
+        currency?: string
+        [key: string]: any
+    }>
+
+    export const DCodeDatePicker: DefineComponent<{
+        modelValue?: string | Date | null
+        label?: string
+        placeholder?: string
+        disabled?: boolean
+        visible?: boolean
+        skeleton?: boolean
+        error?: string | null
+        format?: string
+        [key: string]: any
+    }>
+
+    export const DCodeDateRangePicker: DefineComponent<{
+        modelValue?: [string | Date | null, string | Date | null]
+        label?: string
+        placeholder?: string
+        disabled?: boolean
+        visible?: boolean
+        skeleton?: boolean
+        error?: string | null
+        [key: string]: any
+    }>
+
+    export const DCodeDialog: DefineComponent<{
+        modelValue?: boolean
+        title?: string
+        [key: string]: any
+    }>
+
+    export const DCodeDialogCloseBtn: DefineComponent<{
+        [key: string]: any
+    }>
+
+    export const DCodeDropzone: DefineComponent<{
+        modelValue?: File | File[] | null
+        label?: string
+        accept?: string
+        multiple?: boolean
+        disabled?: boolean
+        visible?: boolean
+        [key: string]: any
+    }>
+
+    export const DCodeFileField: DefineComponent<{
+        modelValue?: File | null
+        label?: string
+        accept?: string
+        disabled?: boolean
+        visible?: boolean
+        skeleton?: boolean
+        error?: string | null
+        [key: string]: any
+    }>
+
+    export const DCodeFileResult: DefineComponent<{
+        value?: string | null
+        label?: string
+        visible?: boolean
+        [key: string]: any
+    }>
+
+    export const DCodeIconDropdown: DefineComponent<{
+        items?: any[]
+        disabled?: boolean
+        visible?: boolean
+        [key: string]: any
+    }>
+
+    export const DCodeImageCropperDialog: DefineComponent<{
+        modelValue?: boolean
+        imageSrc?: string
+        [key: string]: any
+    }>
+
+    export const DCodeImageField: DefineComponent<{
+        modelValue?: string | File | null
+        label?: string
+        disabled?: boolean
+        visible?: boolean
+        skeleton?: boolean
+        error?: string | null
+        [key: string]: any
+    }>
+
+    export const DCodeImageResult: DefineComponent<{
+        value?: string | null
+        label?: string
+        visible?: boolean
+        [key: string]: any
+    }>
+
+    export const DCodeLabel: DefineComponent<{
+        for?: string
+        required?: boolean
+        [key: string]: any
+    }>
+
+    export const DCodeMultiSelect: DefineComponent<{
+        modelValue?: any[]
+        options?: any[]
+        label?: string
+        placeholder?: string
+        disabled?: boolean
+        visible?: boolean
+        skeleton?: boolean
+        error?: string | null
+        [key: string]: any
+    }>
+
+    export const DCodeOtpInput: DefineComponent<{
+        modelValue?: string
+        length?: number
+        disabled?: boolean
+        visible?: boolean
+        [key: string]: any
+    }>
+
+    export const DCodeProgressBar: DefineComponent<{
+        isApiLoading?: boolean
+        apiProgress?: number
+    }>
+
+    export const DCodeRadioCustom: DefineComponent<{
+        modelValue?: string | number | boolean
+        options?: any[]
+        label?: string
+        disabled?: boolean
+        visible?: boolean
+        [key: string]: any
+    }>
+
+    export const DCodeSwitch: DefineComponent<{
+        modelValue?: boolean
+        label?: string
+        disabled?: boolean
+        visible?: boolean
+        skeleton?: boolean
+        [key: string]: any
+    }>
+
+    export const DCodeTextField: DefineComponent<{
+        modelValue?: string | number | null
+        label?: string
+        placeholder?: string
+        clearable?: boolean
+        hideClearWhenEmpty?: boolean
+        textCase?: 'none' | 'uppercase' | 'lowercase' | 'titlecase' | 'sentencecase'
+        applyTextCaseToValue?: boolean
+        valueType?: 'free' | 'number' | 'letter' | 'letternumber' | 'email' | 'password'
+        allowSpaces?: boolean
+        allowChars?: string | string[]
+        pattern?: RegExp
+        visible?: boolean
+        skeleton?: boolean
+        showCharCount?: boolean
+        returnNumber?: boolean
+        error?: string | null
+        disabled?: boolean
+        [key: string]: any
+    }>
+
+    export const DCodeTextarea: DefineComponent<{
+        modelValue?: string | null
+        label?: string
+        placeholder?: string
+        disabled?: boolean
+        visible?: boolean
+        skeleton?: boolean
+        error?: string | null
+        [key: string]: any
+    }>
+
+    export const DCodeTimelineWithIcons: DefineComponent<{
+        items?: any[]
+        visible?: boolean
+        [key: string]: any
+    }>
+
+    export const DCodeUploadFile: DefineComponent<{
+        modelValue?: File | null
+        label?: string
+        accept?: string
+        disabled?: boolean
+        visible?: boolean
+        [key: string]: any
+    }>
+
+    export const DCodeWizard: DefineComponent<{
+        steps?: any[]
+        modelValue?: number
+        visible?: boolean
+        [key: string]: any
+    }>
+
+    // ─── Web Components (Custom Elements) ────────────────────────────────────────
+
+    export const MicroDynamicForm: any
+    export const MicroDynamicDatatable: any
+
+    // ─── Logic Registry ──────────────────────────────────────────────────────────
+
+    export function registerLogic(name: string, module: any): void
+    export function getLogicModule(name: string): any
+    export function unregisterLogic(name: string): void
+
+    // ─── Utilities ───────────────────────────────────────────────────────────────
+
+    export function cn(...inputs: any[]): string
+
+    // ─── Vue Plugin ──────────────────────────────────────────────────────────────
+
+    declare const DynamicUI: Plugin
+    export default DynamicUI
+}