Add new base structures to core

packages/core/package.json

@@ -22,6 +22,8 @@
         "./basecomponent/style": "./src/basecomponent/style/BaseComponentStyle.js",
         "./basecomponent": "./src/basecomponent/BaseComponent.vue",
         "./basedirective": "./src/basedirective/BaseDirective.js",
+        "./baseeditableholder": "./src/baseeditableholder/BaseEditableHolder.vue",
+        "./baseinput": "./src/baseinput/BaseInput.vue",
         "./config": "./src/config/PrimeVue.js",
         "./service": "./src/service/PrimeVueService.js",
         "./usestyle": "./src/usestyle/UseStyle.js",

packages/core/src/baseeditableholder/BaseEditableHolder.d.ts

@@ -0,0 +1,30 @@
+/**
+ *
+ * [Live Demo](https://primevue.org/)
+ *
+ * @module basecomponent
+ *
+ */
+export interface ComponentHooks {
+    onBeforeCreate?(): void;
+    onCreated?(): void;
+    onBeforeMount?(): void;
+    onMounted?(): void;
+    onBeforeUpdate?(): void;
+    onUpdated?(): void;
+    onBeforeUnmount?(): void;
+    onUnmounted?(): void;
+}
+
+export interface BaseComponentPassThroughOptions {
+    hooks?: ComponentHooks;
+}
+
+/**
+ * @todo Update all d.ts with it.
+ */
+export interface BaseComponentPassThroughMethodOptions<I = any, P = any, S = any> {
+    instance?: I | undefined | null;
+    props?: P | undefined | null;
+    state?: S | undefined | null;
+}

packages/core/src/baseeditableholder/BaseEditableHolder.vue

@@ -0,0 +1,94 @@
+<script>
+import { isNotEmpty } from '@primeuix/utils';
+import BaseComponent from '@primevue/core/basecomponent';
+
+export default {
+    name: 'BaseEditableHolder',
+    extends: BaseComponent,
+    emits: ['update:modelValue', 'value-change'],
+    props: {
+        modelValue: {
+            type: null,
+            default: undefined
+        },
+        defaultValue: {
+            type: null,
+            default: undefined
+        },
+        name: {
+            type: String,
+            default: undefined
+        },
+        invalid: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        formControl: {
+            type: Object,
+            default: undefined
+        }
+    },
+    inject: {
+        $parentInstance: {
+            default: undefined
+        },
+        $pcForm: {
+            default: undefined
+        }
+    },
+    data() {
+        return {
+            d_value: this.defaultValue || this.modelValue
+        };
+    },
+    watch: {
+        modelValue(newValue) {
+            this.d_value = newValue;
+        },
+        formControl: {
+            immediate: true,
+            handler(newValue) {
+                this.formField = this.$pcForm?.register?.(this.$formName, newValue) || {};
+            }
+        },
+        $formName: {
+            immediate: true,
+            handler(newValue) {
+                this.formField = this.$pcForm?.register?.(newValue, this.formControl) || {};
+            }
+        }
+    },
+    formField: {},
+    methods: {
+        updateValue(value, event) {
+            // uncontrolled
+            this.d_value = value;
+            this.$emit('value-change', value);
+
+            // controlled
+            this.$emit('update:modelValue', value);
+
+            this.formField.onChange?.({ originalEvent: event, value });
+        }
+    },
+    computed: {
+        $filled() {
+            return isNotEmpty(this.d_value);
+        },
+        $invalid() {
+            return this.invalid || this.$pcForm?.states?.[this.$formName]?.invalid;
+        },
+        $formName() {
+            return this.formControl?.name || this.name || this.$attrs.name;
+        },
+        // @deprecated use $filled instead
+        filled() {
+            return this.$filled;
+        }
+    }
+};
+</script>

packages/core/src/baseeditableholder/package.json

@@ -0,0 +1,11 @@
+{
+    "main": "./BaseEditableHolder.vue",
+    "module": "./BaseEditableHolder.vue",
+    "types": "./BaseEditableHolder.d.ts",
+    "browser": {
+        "./sfc": "./BaseEditableHolder.vue"
+    },
+    "sideEffects": [
+        "*.vue"
+    ]
+}

packages/core/src/baseinput/BaseInput.d.ts

@@ -0,0 +1,30 @@
+/**
+ *
+ * [Live Demo](https://primevue.org/)
+ *
+ * @module basecomponent
+ *
+ */
+export interface ComponentHooks {
+    onBeforeCreate?(): void;
+    onCreated?(): void;
+    onBeforeMount?(): void;
+    onMounted?(): void;
+    onBeforeUpdate?(): void;
+    onUpdated?(): void;
+    onBeforeUnmount?(): void;
+    onUnmounted?(): void;
+}
+
+export interface BaseComponentPassThroughOptions {
+    hooks?: ComponentHooks;
+}
+
+/**
+ * @todo Update all d.ts with it.
+ */
+export interface BaseComponentPassThroughMethodOptions<I = any, P = any, S = any> {
+    instance?: I | undefined | null;
+    props?: P | undefined | null;
+    state?: S | undefined | null;
+}

packages/core/src/baseinput/BaseInput.vue

@@ -0,0 +1,42 @@
+<script>
+import BaseEditableHolder from '@primevue/core/baseeditableholder';
+
+export default {
+    name: 'BaseInput',
+    extends: BaseEditableHolder,
+    props: {
+        size: {
+            type: String,
+            default: null
+        },
+        fluid: {
+            type: Boolean,
+            default: null
+        },
+        variant: {
+            type: String,
+            default: null
+        }
+    },
+    inject: {
+        $parentInstance: {
+            default: undefined
+        },
+        $pcFluid: {
+            default: undefined
+        }
+    },
+    computed: {
+        $variant() {
+            return this.variant || this.$primevue.config.inputStyle || this.$primevue.config.inputVariant;
+        },
+        $fluid() {
+            return this.fluid ?? !!this.$pcFluid;
+        },
+        // @deprecated use $fluid instead
+        hasFluid() {
+            return this.$fluid;
+        }
+    }
+};
+</script>

packages/core/src/baseinput/package.json

@@ -0,0 +1,11 @@
+{
+    "main": "./BaseInput.vue",
+    "module": "./BaseInput.vue",
+    "types": "./BaseInput.d.ts",
+    "browser": {
+        "./sfc": "./BaseInput.vue"
+    },
+    "sideEffects": [
+        "*.vue"
+    ]
+}

pnpm-workspace.yaml

@@ -5,3 +5,4 @@ packages:
 catalog:
   '@primeuix/styled': ^0.2.0
   '@primeuix/utils': ^0.2.0
+  '@primeuix/form': ^0.2.0