From 3d40228f0ef2a5703c5511f2a0a8ade2f97e0327 Mon Sep 17 00:00:00 2001
From: Sam <ns8448407@gmail.com>
Date: Mon, 28 Oct 2024 08:51:40 +0700
Subject: [PATCH 1/6] props composition api

---
 manifest.json                            |  3 +-
 src/components/address/index.vue         |  3 +-
 src/components/checkboxes/index.vue      | 45 +++++-----------
 src/components/code_json/index.vue       |  2 +-
 src/components/dropdown/index.vue        |  4 +-
 src/components/email/index.vue           |  3 +-
 src/components/image_choice/index.vue    | 65 +++++++-----------------
 src/components/likert_scale/index.vue    | 38 +++++---------
 src/components/list/index.vue            | 34 ++++---------
 src/components/locale_selector/index.vue | 25 ++-------
 src/components/multiple_choice/index.vue | 48 +++++------------
 src/components/number/index.vue          |  1 -
 src/components/phone_number/index.vue    |  2 +-
 src/components/ranking/index.vue         | 53 +++++--------------
 src/components/rating_scale/index.vue    | 44 ++++++----------
 src/components/short_text/index.vue      |  5 +-
 src/components/slider/index.vue          | 60 +++++++---------------
 src/components/website/index.vue         | 44 +++++-----------
 src/types/index.ts                       | 38 ++++++++++++--
 19 files changed, 174 insertions(+), 343 deletions(-)

diff --git a/manifest.json b/manifest.json
index bfd79d7..261c8f7 100644
--- a/manifest.json
+++ b/manifest.json
@@ -72,7 +72,6 @@
                         "label": "List",
                         "component": "list",
                         "description": "A sortable list of items.",
-                        "placeholder": "Add an item",
                         "props": {
                             "items": ["First item", "Second item"]
                         }
@@ -729,7 +728,7 @@
                 "properties": {
                     "display": {
                         "component": "html_block_list",
-                        "tag": "ordered",
+                        "type": "ordered",
                         "items": ["First item", "Second item", "Third item"]
                     }
                 }
diff --git a/src/components/address/index.vue b/src/components/address/index.vue
index 86cd9ac..8b68e7b 100644
--- a/src/components/address/index.vue
+++ b/src/components/address/index.vue
@@ -51,8 +51,7 @@ const isRequired = computed(() =>
             :input-id="props.input.key"
             :class="props.theme.input"
             rows="4"
-            :placeholder="props.input?.placeholder || 'Enter your address'"
-            v-bind="{ ...$attrs, ...props.input.props }"
+            v-bind="props.input.props"
         />
         <!-- if error -->
         <small
diff --git a/src/components/checkboxes/index.vue b/src/components/checkboxes/index.vue
index 7f9d416..4aa2219 100644
--- a/src/components/checkboxes/index.vue
+++ b/src/components/checkboxes/index.vue
@@ -1,30 +1,13 @@
 <script setup lang="ts">
-import { defineModel, computed, defineProps, type PropType } from 'vue'
-import type { InputProperties } from '~/types'
+import type { InputChoiceProperties } from '~/types'
 import Checkbox from 'primevue/checkbox'
+import { computed } from 'vue'
 
-const props = defineProps({
-    input: {
-        type: Object as PropType<InputProperties>,
-        required: true,
-    },
-    theme: {
-        type: Object,
-        default: () => ({
-            container: '',
-            label: 'w-full text-black dark:text-white', // Added text color for label
-            input: 'flex flex-col gap-2', // Layout for checkboxes
-            description: 'text-sm text-slate-700 dark:text-slate-300', // Description text for both modes
-            checkbox: 'mr-2', // Margin for checkbox alignment
-            checkboxLabel: 'text-black dark:text-white', // Added text color for checkbox labels
-            error: 'text-red-600 dark:text-red-400', // Added dark mode color for error
-        }),
-    },
-    error: {
-        type: String,
-        default: '',
-    },
-})
+interface Props {
+    input: InputChoiceProperties
+    error?: string
+}
+const props = defineProps<Props>()
 const model = defineModel<string[]>()
 const isRequired = computed(() =>
     props.input.validations?.map((v) => v.rule).includes('required'),
@@ -32,16 +15,16 @@ const isRequired = computed(() =>
 </script>
 
 <template>
-    <div :class="theme.container">
-        <label :class="theme.label" :for="input.key">
+    <div>
+        <label :for="input.key">
             {{ input.label }}
             <span v-if="isRequired" class="text-red-600 dark:text-red-400"
                 >*</span
             >
             <!-- Adjusted for dark mode -->
         </label>
-        <p :class="theme.description">{{ input.description }}</p>
-        <div :class="theme.input">
+        <p>{{ input.description }}</p>
+        <div>
             <div
                 v-for="option in input.choices"
                 :key="option.value"
@@ -54,13 +37,11 @@ const isRequired = computed(() =>
                     :input-id="option.value"
                     v-bind="{ ...$attrs, ...props.input.props }"
                 />
-                <label :for="option.value" :class="theme.checkboxLabel">{{
-                    option.label
-                }}</label>
+                <label :for="option.value">{{ option.label }}</label>
                 <!-- Applied label styling -->
             </div>
         </div>
-        <small v-if="error" :id="`${input.key}-help`" :class="theme.error">
+        <small v-if="error" :id="`${input.key}-help`">
             {{ error }}
         </small>
     </div>
diff --git a/src/components/code_json/index.vue b/src/components/code_json/index.vue
index a7dd0c7..e3d80c0 100644
--- a/src/components/code_json/index.vue
+++ b/src/components/code_json/index.vue
@@ -115,10 +115,10 @@ const handleReady = (payload: { view: EditorView }) => {
             <Codemirror
                 v-model="code"
                 :disabled="readonly"
-                :placeholder="input.placeholder || 'Enter your code'"
                 :style="{ height: '400px' }"
                 :autofocus="true"
                 :indent-with-tab="true"
+                :v-bind="input.props"
                 :tab-size="2"
                 :extensions="extensions"
                 @ready="handleReady"
diff --git a/src/components/dropdown/index.vue b/src/components/dropdown/index.vue
index 9ec2250..9e9b91e 100644
--- a/src/components/dropdown/index.vue
+++ b/src/components/dropdown/index.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { computed, defineModel, defineProps } from 'vue'
-import type { InputProperties } from '~/types'
+import type { InputChoiceProperties } from '~/types'
 import Select from 'primevue/select'
 
 interface Props {
-    input: InputProperties
+    input: InputChoiceProperties
     error?: string
     readonly?: boolean
 }
diff --git a/src/components/email/index.vue b/src/components/email/index.vue
index b10f7b6..1d243e1 100644
--- a/src/components/email/index.vue
+++ b/src/components/email/index.vue
@@ -44,8 +44,7 @@ const isRequired = computed(() =>
             :input-id="input.key"
             :class="theme.input"
             type="email"
-            :placeholder="input?.placeholder || 'Enter your email'"
-            v-bind="{ ...$attrs, ...input.props }"
+            v-bind="input.props"
         />
         <!-- if error -->
         <small v-if="error" :id="`${input.key}-help`" :class="theme.error">{{
diff --git a/src/components/image_choice/index.vue b/src/components/image_choice/index.vue
index 16cff66..b21b0e3 100644
--- a/src/components/image_choice/index.vue
+++ b/src/components/image_choice/index.vue
@@ -1,33 +1,12 @@
 <script setup lang="ts">
-import { ref, computed, defineModel, defineProps, type PropType } from 'vue'
-import type { InputProperties } from '~/types'
+import { ref, computed } from 'vue'
+import type { InputChoiceProperties } from '~/types'
 
-const props = defineProps({
-    input: {
-        type: Object as PropType<InputProperties>,
-        required: true,
-    },
-    theme: {
-        type: Object,
-        default: () => ({
-            container: '',
-            label: 'w-full text-lg font-semibold text-gray-900 dark:text-gray-100',
-            input: 'w-full flex flex-wrap gap-2',
-            description: 'text-sm text-gray-700 dark:text-gray-300',
-            error: 'text-red-600 dark:text-red-400',
-            imageOption:
-                'relative flex flex-col items-center p-2 cursor-pointer transition-transform duration-300 ease-in-out transform hover:scale-105',
-            image: 'w-24 h-24 object-cover border-2 border-transparent rounded-lg',
-            imageSelected: 'border-blue-500 dark:border-blue-300',
-            selectedOverlay:
-                'absolute inset-0 border-4 border-blue-500 dark:border-blue-300 rounded-lg pointer-events-none',
-        }),
-    },
-    error: {
-        type: String,
-        default: '',
-    },
-})
+interface Props {
+    input: InputChoiceProperties
+    error?: string
+}
+const props = defineProps<Props>()
 
 const model = defineModel<string>({ default: '' })
 
@@ -42,35 +21,38 @@ const isRequired = computed(() =>
 </script>
 
 <template>
-    <div :class="theme.container">
-        <label :class="theme.label" :for="input.key">
+    <div>
+        <label :for="input.key">
             {{ input.label }}
             <span v-if="isRequired" class="text-red-600 dark:text-red-400"
                 >*</span
             >
         </label>
-        <p :class="theme.description">{{ input.description }}</p>
+        <p>{{ input.description }}</p>
         <!-- input section -->
-        <div :class="theme.input">
+        <div>
             <div
                 v-for="option in input.choices"
                 :key="option.value"
-                :class="theme.imageOption"
+                class="relative flex flex-col items-center p-2 cursor-pointer transition-transform duration-300 ease-in-out transform hover:scale-105"
                 @click="selectImage(option.value)"
             >
                 <div
                     :class="[
                         'relative',
-                        { [theme.selectedOverlay]: selected === option.value },
+                        {
+                            'absolute inset-0 border-4 border-blue-500 dark:border-blue-300 rounded-lg pointer-events-none':
+                                selected === option.value,
+                        },
                     ]"
                 >
                     <img
                         :src="option.value"
                         :alt="option.label"
                         :class="[
-                            theme.image,
+                            'w-24 h-24 object-cover border-2 border-transparent rounded-lg',
                             {
-                                [theme.imageSelected]:
+                                ['border-blue-500 dark:border-blue-300']:
                                     selected === option.value,
                             },
                         ]"
@@ -82,17 +64,8 @@ const isRequired = computed(() =>
             </div>
         </div>
         <!-- if error -->
-        <small v-if="error" :id="`${input.key}-help`" :class="theme.error">{{
+        <small v-if="error" :id="`${input.key}-help`" class="text-red-500">{{
             error
         }}</small>
     </div>
 </template>
-
-<style scoped>
-.imageOption {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
-}
-</style>
diff --git a/src/components/likert_scale/index.vue b/src/components/likert_scale/index.vue
index 6b4df71..df292e8 100644
--- a/src/components/likert_scale/index.vue
+++ b/src/components/likert_scale/index.vue
@@ -1,36 +1,23 @@
 <script setup lang="ts">
-import { defineModel, computed, defineProps, type PropType } from 'vue'
-import type { InputProperties } from '~/types'
+import { computed } from 'vue'
+import type { InputChoiceProperties } from '~/types'
 import RadioButton from 'primevue/radiobutton'
 
-const props = defineProps({
-    input: {
-        type: Object as PropType<InputProperties>,
-        required: true,
-    },
-    theme: {
-        type: Object,
-        default: () => ({
-            container: '',
-            label: 'w-full text-black dark:text-white', // Label colors for dark and light mode
-            input: 'flex items-center text-black dark:text-white', // Ensure RadioButton and label text colors adapt
-            description: 'text-sm text-slate-700 dark:text-slate-300', // Description text for both modes
-            error: 'text-red-600 dark:text-red-400', // Error colors for dark and light mode
-        }),
-    },
-    error: {
-        type: String,
-        default: '',
-    },
-})
+interface Props {
+    input: InputChoiceProperties
+    error?: string
+}
+const props = defineProps<Props>()
+
 const model = defineModel<string>({ default: '' })
+
 const isRequired = computed(() =>
     props.input.validations?.map((v) => v.rule).includes('required'),
 )
 </script>
 
 <template>
-    <div :class="theme.container">
+    <div>
         <p class="font-medium">
             {{ props.input.label }}
             <span v-if="isRequired" class="text-red-500">*</span>
@@ -48,8 +35,7 @@ const isRequired = computed(() =>
                     v-model="model"
                     :value="option.value"
                     :input-id="`${input.key}-${option.value}`"
-                    :class="theme.input"
-                    v-bind="{ ...$attrs, ...input.props }"
+                    v-bind="input.props"
                 />
                 <label
                     :for="`${input.key}-${option.value}`"
@@ -59,7 +45,7 @@ const isRequired = computed(() =>
                 </label>
             </div>
         </div>
-        <small v-if="error" :id="`${input.key}-help`" :class="theme.error">
+        <small v-if="error" :id="`${input.key}-help`" class="text-red-500">
             {{ error }}
         </small>
     </div>
diff --git a/src/components/list/index.vue b/src/components/list/index.vue
index 12a95d6..22330eb 100644
--- a/src/components/list/index.vue
+++ b/src/components/list/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { PropType, ref, watch, type Ref } from 'vue'
+import { ref, watch } from 'vue'
+import type { Ref } from 'vue'
 import { useSortable } from '@vueuse/integrations/useSortable'
 import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
@@ -7,30 +8,13 @@ import DragIcon from '~icons/material-symbols/drag-pan-rounded'
 import TrashIcon from '~icons/material-symbols/delete'
 import { InputProperties } from '~/types'
 
-const props = defineProps({
-    input: {
-        type: Object as PropType<InputProperties>,
-        required: true,
-    },
-    theme: {
-        type: Object,
-        default: () => ({
-            container: '',
-            label: 'w-full text-black dark:text-white', // Added text color for label
-            input: 'w-full h-32 bg-white dark:bg-surface-800 text-black dark:text-white', // Added background and text color for TextArea
-            description: 'text-sm text-slate-700 dark:text-slate-300',
-            error: 'text-red-600 dark:text-red-400', // Added dark mode color for error
-        }),
-    },
-    error: {
-        type: String,
-        default: '',
-    },
-    readonly: {
-        type: Boolean,
-        default: false,
-    },
-})
+interface Props {
+    input: InputProperties
+    error?: string
+    readonly?: boolean
+}
+
+const props = defineProps<Props>()
 const model = defineModel<string[]>({ default: [] })
 
 const list: Ref<{ label: string; id: string }[]> = ref([])
diff --git a/src/components/locale_selector/index.vue b/src/components/locale_selector/index.vue
index 1e1454b..5ddfb27 100644
--- a/src/components/locale_selector/index.vue
+++ b/src/components/locale_selector/index.vue
@@ -1,26 +1,11 @@
 <script setup lang="ts">
-import { defineModel, defineProps, type PropType } from 'vue'
-import type { InputProperties } from '~/types'
+import type { InputChoiceProperties } from '~/types'
 import Select from 'primevue/select'
 
-defineProps({
-    input: {
-        type: Object as PropType<InputProperties>,
-        required: true,
-    },
-    theme: {
-        type: Object,
-        default: () => ({
-            container: 'relative inline-block',
-            button: 'flex items-center justify-between w-full px-4 py-2 text-left bg-white border border-gray-300 rounded-md shadow-sm hover:bg-surface-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
-            dropdown:
-                'absolute z-10 w-full mt-1 bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm',
-            option: 'cursor-default select-none relative py-2 pl-3 pr-9 hover:bg-surface-100',
-            selectedOption: 'bg-indigo-600 text-white',
-            flag: 'mr-3 h-5 w-5 rounded-full',
-        }),
-    },
-})
+interface Props {
+    input: InputChoiceProperties
+}
+defineProps<Props>()
 
 const model = defineModel<string>({ default: '' })
 </script>
diff --git a/src/components/multiple_choice/index.vue b/src/components/multiple_choice/index.vue
index 7cb78fe..8b0e82f 100644
--- a/src/components/multiple_choice/index.vue
+++ b/src/components/multiple_choice/index.vue
@@ -1,30 +1,13 @@
 <script setup lang="ts">
-import { computed, defineModel, defineProps, type PropType } from 'vue'
-import type { InputProperties } from '~/types'
+import { computed } from 'vue'
+import type { InputChoiceProperties } from '~/types'
 import RadioButton from 'primevue/radiobutton'
 
-const props = defineProps({
-    input: {
-        type: Object as PropType<InputProperties>,
-        required: true,
-    },
-    theme: {
-        type: Object,
-        default: () => ({
-            container: '',
-            label: 'w-full text-black dark:text-white', // Added text color for label
-            input: 'flex flex-wrap gap-4', // Layout for radio buttons
-            description: 'text-sm text-slate-700 dark:text-slate-300', // Description text for both modes
-            radioButton: 'mr-2', // Margin for radio button alignment
-            radioLabel: 'text-black dark:text-white', // Added text color for radio labels
-            error: 'text-red-600 dark:text-red-400', // Added dark mode color for error
-        }),
-    },
-    error: {
-        type: String,
-        default: '',
-    },
-})
+interface Props {
+    input: InputChoiceProperties
+    error?: string
+}
+const props = defineProps<Props>()
 const isRequired = computed(() =>
     props.input.validations?.map((v) => v.rule).includes('required'),
 )
@@ -32,16 +15,16 @@ const model = defineModel<string>({ default: '' })
 </script>
 
 <template>
-    <div :class="theme.container">
-        <label :class="theme.label" :for="input.key">
+    <div>
+        <label :for="input.key">
             {{ input.label }}
             <span v-if="isRequired" class="text-red-600 dark:text-red-400"
                 >*</span
             >
             <!-- Adjusted for dark mode -->
         </label>
-        <p :class="theme.description">{{ input.description }}</p>
-        <div :class="theme.input">
+        <p>{{ input.description }}</p>
+        <div>
             <div
                 v-for="option in input.choices"
                 :key="option.value"
@@ -52,16 +35,13 @@ const model = defineModel<string>({ default: '' })
                     v-model="model"
                     :value="option.value"
                     :input-id="option.value"
-                    :class="theme.radioButton"
-                    v-bind="{ ...$attrs, ...input.props }"
+                    v-bind="input.props"
                 />
-                <label :for="option.value" :class="theme.radioLabel">{{
-                    option.label
-                }}</label>
+                <label :for="option.value">{{ option.label }}</label>
                 <!-- Applied label styling -->
             </div>
         </div>
-        <small v-if="error" :id="`${input.key}-help`" :class="theme.error">
+        <small v-if="error" :id="`${input.key}-help`" class="text-red-500">
             {{ error }}
         </small>
     </div>
diff --git a/src/components/number/index.vue b/src/components/number/index.vue
index 93f8255..984933c 100644
--- a/src/components/number/index.vue
+++ b/src/components/number/index.vue
@@ -27,7 +27,6 @@ const isRequired = computed(() =>
             :id="input.key"
             v-model="model"
             :input-id="input.key"
-            :placeholder="input?.placeholder || 'Enter a number'"
             v-bind="input.props"
         />
         <!-- if error -->
diff --git a/src/components/phone_number/index.vue b/src/components/phone_number/index.vue
index e36900c..c409ac7 100644
--- a/src/components/phone_number/index.vue
+++ b/src/components/phone_number/index.vue
@@ -104,7 +104,7 @@ const isRequired = computed(() =>
                 v-model="model.phoneNumber"
                 :input-id="props.input.key"
                 :class="props.theme.phoneInput"
-                :placeholder="props.input?.placeholder || 'Enter phone number'"
+                :v-bind="input.props"
                 mode="decimal"
                 :min="10"
                 :use-grouping="false"
diff --git a/src/components/ranking/index.vue b/src/components/ranking/index.vue
index 9259153..1589ff1 100644
--- a/src/components/ranking/index.vue
+++ b/src/components/ranking/index.vue
@@ -1,40 +1,15 @@
 <script setup lang="ts">
-import {
-    ref,
-    computed,
-    watch,
-    defineProps,
-    defineModel,
-    type PropType,
-} from 'vue'
+import { ref, computed, watch } from 'vue'
 import { useSortable } from '@vueuse/integrations/useSortable'
-import type { InputProperties } from '~/types'
+import type { InputChoiceProperties } from '~/types'
 
-const props = defineProps({
-    input: {
-        type: Object as PropType<InputProperties>,
-        required: true,
-    },
-    theme: {
-        type: Object,
-        default: () => ({
-            container: '', // Dark mode background
-            dragHandle: 'cursor-move',
-            submitButton:
-                'mt-4 p-2 bg-blue-500 dark:bg-blue-700 text-white rounded hover:bg-blue-600 dark:hover:bg-blue-800',
-            label: 'w-full text-lg font-semibold text-gray-900 dark:text-gray-100',
-            description: 'text-sm text-gray-700 dark:text-gray-400 mb-1',
-            error: 'text-red-600',
-        }),
-    },
-    error: {
-        type: String,
-        default: '',
-    },
-    readonly: {
-        type: Boolean,
-        default: false,
-    },
+interface Props {
+    input: InputChoiceProperties
+    error?: string
+    readonly?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+    readonly: false,
 })
 
 const el = ref<HTMLElement | null>(null)
@@ -63,12 +38,12 @@ const isRequired = computed(() =>
 </script>
 
 <template>
-    <div :class="theme.container">
-        <label :class="theme.label" :for="input.key">
+    <div>
+        <label :for="input.key">
             {{ input.label }}
             <span v-if="isRequired" class="text-red-600">*</span>
         </label>
-        <p :class="theme.description">{{ input.description }}</p>
+        <p>{{ input.description }}</p>
         <!-- input section -->
         <div ref="el" class="flex flex-col gap-3">
             <div
@@ -76,12 +51,12 @@ const isRequired = computed(() =>
                 :key="item"
                 class="p-2 bg-surface-100 rounded dark:bg-surface-900"
             >
-                <span class="handle" :class="theme.dragHandle">☰</span>
+                <i class="handle">☰</i>
                 {{ item }}
             </div>
         </div>
         <!-- if error -->
-        <small v-if="error" :id="`${input.key}-help`" :class="theme.error">
+        <small v-if="error" :id="`${input.key}-help`" class="text-red-500">
             {{ error }}
         </small>
     </div>
diff --git a/src/components/rating_scale/index.vue b/src/components/rating_scale/index.vue
index dbb1d18..244f8f5 100644
--- a/src/components/rating_scale/index.vue
+++ b/src/components/rating_scale/index.vue
@@ -1,53 +1,39 @@
 <script setup lang="ts">
-import { computed, defineModel, defineProps, type PropType } from 'vue'
-import type { InputProperties } from '~/types'
+import { computed } from 'vue'
+import type { InputRatingProperties } from '~/types'
 import Rating from 'primevue/rating'
 
-const props = defineProps({
-    input: {
-        type: Object as PropType<InputProperties>,
-        required: true,
-    },
-    theme: {
-        type: Object,
-        default: () => ({
-            container: '',
-            label: 'w-full text-lg font-semibold text-gray-900 dark:text-gray-100',
-            input: 'w-full', // Ensure the rating component takes full width
-            description: 'text-sm text-slate-700 dark:text-slate-300', // Description text for both modes
-            error: 'text-red-600 dark:text-red-400', // Error colors for dark and light mode
-        }),
-    },
-    error: {
-        type: String,
-        default: '',
-    },
-})
+interface Props {
+    input: InputRatingProperties
+    error?: string
+}
+const props = defineProps<Props>()
+
 const model = defineModel<number>()
+
 const isRequired = computed(() =>
     props.input.validations?.map((v) => v.rule).includes('required'),
 )
 </script>
 
 <template>
-    <div :class="theme.container">
-        <label :class="theme.label" :for="input.key">
+    <div>
+        <label :for="input.key">
             {{ input.label }}
             <span v-if="isRequired" class="text-red-600 dark:text-red-400"
                 >*</span
             >
         </label>
-        <p :class="theme.description">{{ input.description }}</p>
+        <p>{{ input.description }}</p>
         <Rating
             :id="input.key"
             v-model="model"
-            :stars="input.scale || 5"
+            :stars="input.stars || 5"
             :cancel="false"
-            :class="theme.input"
             :input-id="input.key"
-            v-bind="{ ...$attrs, ...input.props }"
+            v-bind="input.props"
         />
-        <small v-if="error" :id="`${input.key}-help`" :class="theme.error">
+        <small v-if="error" :id="`${input.key}-help`" class="text-red-500">
             {{ error }}
         </small>
     </div>
diff --git a/src/components/short_text/index.vue b/src/components/short_text/index.vue
index 01b81d5..10a19c4 100644
--- a/src/components/short_text/index.vue
+++ b/src/components/short_text/index.vue
@@ -27,11 +27,10 @@ const isRequired = computed(() =>
         <InputText
             :id="input.key"
             v-model="model"
-            :placeholder="props.input.placeholder"
             :input-id="input.key"
-            v-bind="{ ...$attrs, ...input.props }"
+            v-bind="input.props"
         />
-        <p v-if="error">
+        <p v-if="error" class="text-red-500">
             {{ error }}
         </p>
     </div>
diff --git a/src/components/slider/index.vue b/src/components/slider/index.vue
index 5951e93..317d33a 100644
--- a/src/components/slider/index.vue
+++ b/src/components/slider/index.vue
@@ -1,68 +1,42 @@
 <script setup lang="ts">
-import { defineModel, computed, defineProps, type PropType } from 'vue'
+import { computed } from 'vue'
 import InputSlider from 'primevue/slider'
 import type { InputProperties } from '~/types'
 
-const props = defineProps({
-    input: {
-        type: Object as PropType<InputProperties>,
-        required: true,
-    },
-    theme: {
-        type: Object,
-        default: () => ({
-            container: '',
-            label: 'w-full text-lg font-semibold text-gray-900 dark:text-gray-100',
-            input: 'w-full bg-white dark:bg-surface-800 border border-gray-300 dark:border-gray-600 rounded-md',
-            description: 'text-sm text-gray-700 dark:text-gray-400',
-            error: 'text-red-600',
-        }),
-    },
-    error: {
-        type: String,
-        default: '',
-    },
-    readonly: {
-        type: Boolean,
-        default: false,
-    },
+interface Props {
+    input: InputProperties
+    error?: string
+    readonly?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+    readonly: false,
 })
+
+const model = defineModel<number>()
+
 const isRequired = computed(() =>
     props.input.validations?.map((v) => v.rule).includes('required'),
 )
-const model = defineModel<number>()
 </script>
 
 <template>
-    <div :class="theme.container">
-        <p class="font-medium">
+    <div>
+        <label :for="input.key">
             {{ props.input.label }}
             <span v-if="isRequired" class="text-red-500">*</span>
-        </p>
-        <p class="mb-4 text-sm">{{ props.input.description }}</p>
+        </label>
+        <p>{{ props.input.description }}</p>
 
         <!-- input section -->
         <InputSlider
             :id="input.key"
             v-model="model"
             :input-id="input.key"
-            :class="[
-                theme.input,
-                {
-                    'border-red-600': error,
-                    'border-gray-300 dark:border-gray-600': !error,
-                },
-            ]"
             :disabled="readonly"
-            :min="input.props?.min"
-            :max="input.props?.max"
-            :step="input.props?.step"
-            :tooltip="input.props?.tooltip || false"
-            :placeholder="input?.placeholder || 'Select a value'"
-            v-bind="{ ...$attrs, ...input.props }"
+            v-bind="input.props"
         />
         <!-- if error -->
-        <small v-if="error" :id="`${input.key}-help`" :class="theme.error">{{
+        <small v-if="error" :id="`${input.key}-help`" class="text-red-500">{{
             error
         }}</small>
     </div>
diff --git a/src/components/website/index.vue b/src/components/website/index.vue
index c2d8945..7464c43 100644
--- a/src/components/website/index.vue
+++ b/src/components/website/index.vue
@@ -1,53 +1,37 @@
 <script setup lang="ts">
-import { defineModel, computed, defineProps, type PropType } from 'vue'
+import { computed } from 'vue'
 import InputText from 'primevue/inputtext'
 import type { InputProperties } from '~/types'
 
-const props = defineProps({
-    input: {
-        type: Object as PropType<InputProperties>,
-        required: true,
-    },
-    theme: {
-        type: Object,
-        default: () => ({
-            container: '',
-            label: 'w-full text-lg font-semibold text-gray-900 dark:text-gray-100',
-            input: 'w-full p-2 border rounded-md shadow-sm bg-white dark:bg-surface-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100',
-            description: 'text-sm text-gray-700 dark:text-gray-400',
-            error: 'text-red-600',
-        }),
-    },
-    error: {
-        type: String,
-        default: '',
-    },
-})
+interface Props {
+    input: InputProperties
+    error?: string
+}
+const props = defineProps<Props>()
 
 const model = defineModel<string>({ default: '' })
+
 const isRequired = computed(() =>
     props.input.validations?.map((v) => v.rule).includes('required'),
 )
 </script>
 <template>
-    <div :class="theme.container">
-        <label :class="theme.label" :for="input.key">
+    <div>
+        <label :for="input.key">
             {{ input.label }}
             <span v-if="isRequired" class="text-red-600">*</span>
         </label>
-        <p :class="theme.description">{{ input.description }}</p>
+        <p>{{ input.description }}</p>
+
         <!-- input section -->
         <InputText
             :id="input.key"
             v-model="model"
             :input-id="input.key"
-            :class="theme.input"
-            :placeholder="input?.placeholder || 'Enter website URL'"
-            v-bind="{ ...$attrs, ...input.props }"
+            v-bind="input.props"
         />
+
         <!-- if error -->
-        <small v-if="error" :id="`${input.key}-help`" :class="theme.error">{{
-            error
-        }}</small>
+        <small v-if="error" :id="`${input.key}-help`">{{ error }}</small>
     </div>
 </template>
diff --git a/src/types/index.ts b/src/types/index.ts
index 5118aac..9590756 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -86,17 +86,45 @@ export interface Validation {
  */
 export interface InputProperties {
     key: string; // Unique key for the input
-    repeatable?: boolean; // Indicates if the input can be repeated
     component?: InputComponentType; // Type of input component
     label: string; // Display label for the input
     description?: string; // Optional description for the input
-    placeholder?: string; // Placeholder text for the input
-    scale?: number; // Optional scale value
-    choices?: InputChoice[]; // Optional choices for the input
     validations?: Validation[]; // Optional validations for the input
     props?: Record<string, any>; // Additional properties for the input
 }
 
+
+// ==============================
+// List Input Field
+// ==============================
+/**
+ * Input list, add remove sort items in list.
+ */
+export interface InputListProperties extends InputProperties {
+    items: string[]
+}
+
+
+// ==============================
+// Ratings input field
+// ==============================
+/**
+ * Rate stars component.
+ */
+export interface InputRatingProperties extends InputProperties {
+    stars: number
+}
+
+// ==============================
+// Choice Input Field
+// ==============================
+/**
+ * Input field with multiple choices.
+ */
+export interface InputChoiceProperties extends InputProperties {
+    choices: InputChoice[];
+}
+
 // ==============================
 // Display Properties
 // ==============================
@@ -213,4 +241,4 @@ export interface ElementManifest {
             display: DisplayProperties; // Display properties
         };
     };
-}
\ No newline at end of file
+}

From 9872c19d6fd4474a2775a0397e6210facf562c6b Mon Sep 17 00:00:00 2001
From: Sam <ns8448407@gmail.com>
Date: Mon, 28 Oct 2024 10:31:57 +0700
Subject: [PATCH 2/6] fix component props typing

---
 .gitignore                                | 4 +---
 .prettierignore                           | 1 +
 components.d.ts                           | 4 +---
 eslint.config.js                          | 2 +-
 package.json                              | 1 +
 src/index.ts                              | 4 +++-
 tailwind.config.js => tailwind.config.cjs | 0
 vite.config.ts                            | 2 ++
 8 files changed, 10 insertions(+), 8 deletions(-)
 create mode 100644 .prettierignore
 rename tailwind.config.js => tailwind.config.cjs (100%)

diff --git a/.gitignore b/.gitignore
index b5d8608..950a936 100644
--- a/.gitignore
+++ b/.gitignore
@@ -132,6 +132,4 @@ dist
 #vite config timestamp
 /vite.config.ts.timestamp-*.mjs
 
-pnpm-lock.yaml
-
-components.d.ts
\ No newline at end of file
+/components.d.ts
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..3f22815
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+/components.d.ts
\ No newline at end of file
diff --git a/components.d.ts b/components.d.ts
index e5f0e8d..274e5b0 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -1,10 +1,8 @@
-/* eslint-disable */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-export {}
+export { }
 
-/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     Action_redirect: typeof import('./src/components/action_redirect/index.vue')['default']
diff --git a/eslint.config.js b/eslint.config.js
index d4c1bc4..427fdce 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -24,7 +24,7 @@ export default [
         languageOptions: { parserOptions: { parser: tseslint.parser } },
     },
     {
-        files: ['**/*.{js,ts,vue}'],
+        files: ['**/*.{js,ts,vue,cjs}'],
         rules: {
             // Disable the rule that forbids require imports
             '@typescript-eslint/no-require-imports': 'off',
diff --git a/package.json b/package.json
index e9a928b..09faf45 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "module": "dist/element.js",
     "exports": {
         ".": {
+            "types": "./dist/index.d.ts",
             "import": "./dist/element.js",
             "require": "./dist/element.umd.js"
         },
diff --git a/src/index.ts b/src/index.ts
index 5e4982c..f0d177c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -69,4 +69,6 @@ export {
   HtmlBlockContent,
   HtmlBlockList,
   HtmlBlockMedia
-}
\ No newline at end of file
+}
+
+export * from './types/index'
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.cjs
similarity index 100%
rename from tailwind.config.js
rename to tailwind.config.cjs
diff --git a/vite.config.ts b/vite.config.ts
index f3ebed3..f87711f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -11,6 +11,7 @@ export default defineConfig({
   plugins: [
     vue(),
     Components({
+      dts: true,
       resolvers: [PrimeVueResolver()],
     }),
     Icons(),
@@ -25,6 +26,7 @@ export default defineConfig({
     }
   },
   build: {
+    copyPublicDir: false,
     lib: {
       entry: path.resolve(__dirname, 'src/index'),
       name: '@formsible/element',

From 0dd85b40a33dd648f383ce56d493871f62c212bf Mon Sep 17 00:00:00 2001
From: Sam <ns8448407@gmail.com>
Date: Mon, 28 Oct 2024 10:33:02 +0700
Subject: [PATCH 3/6] update

---
 components.d.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components.d.ts b/components.d.ts
index 274e5b0..e5f0e8d 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -1,8 +1,10 @@
+/* eslint-disable */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-export { }
+export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     Action_redirect: typeof import('./src/components/action_redirect/index.vue')['default']

From c75f0b12a3195a1e29b2d70c5cb803e66ce68870 Mon Sep 17 00:00:00 2001
From: Sam <ns8448407@gmail.com>
Date: Mon, 28 Oct 2024 10:33:58 +0700
Subject: [PATCH 4/6] update

---
 .prettierignore | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 .prettierignore

diff --git a/.prettierignore b/.prettierignore
deleted file mode 100644
index 3f22815..0000000
--- a/.prettierignore
+++ /dev/null
@@ -1 +0,0 @@
-/components.d.ts
\ No newline at end of file

From 2ae39f01c2dfe6305caeb5856dde78fd62c65da3 Mon Sep 17 00:00:00 2001
From: Sam <ns8448407@gmail.com>
Date: Mon, 28 Oct 2024 10:48:28 +0700
Subject: [PATCH 5/6] restructure

---
 src/index.ts          |   3 +-
 src/types/display.ts  | 114 +++++++++++++++++++
 src/types/index.ts    | 247 +-----------------------------------------
 src/types/input.ts    | 117 ++++++++++++++++++++
 src/types/manifest.ts |  28 +++++
 5 files changed, 264 insertions(+), 245 deletions(-)
 create mode 100644 src/types/display.ts
 create mode 100644 src/types/input.ts
 create mode 100644 src/types/manifest.ts

diff --git a/src/index.ts b/src/index.ts
index f0d177c..b52b239 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,4 @@
-// src/index.ts
+// Exporting all components
 import Address from './components/address/index.vue'
 import AudioRecorder from './components/audio_recorder/index.vue'
 import ActionRedirect from './components/action_redirect/index.vue'
@@ -71,4 +71,5 @@ export {
   HtmlBlockMedia
 }
 
+// Exporting all types
 export * from './types/index'
\ No newline at end of file
diff --git a/src/types/display.ts b/src/types/display.ts
new file mode 100644
index 0000000..8e9ed38
--- /dev/null
+++ b/src/types/display.ts
@@ -0,0 +1,114 @@
+// ==============================
+// Component Types
+// ==============================
+/**
+ * Different types of display components.
+ */
+/**
+ * Different types of input components.
+ */
+export type DisplayComponentType =
+    | 'html'
+    | 'icon'
+    | 'video'
+    | 'slide'
+    | 'document'
+    | 'locale_selector'
+    | 'page_break';
+
+
+// ==============================
+// Display Properties
+// ==============================
+/**
+ * Properties for display components.
+ */
+export interface DisplayProperties {
+    component?: DisplayComponentType; // Type of display component
+    icon?: string; // Optional icon name or path
+}
+
+// ==============================
+// Embedded Document Properties
+// ==============================
+/**
+ * Properties for embedded documents.
+ */
+export interface EmbedProperties extends DisplayProperties {
+    src: string; // Source URL of the embedded document
+    width?: number; // Optional width for the embedded document
+    height?: number; // Optional height for the embedded document
+}
+
+
+// ==============================
+// Redirect Properties
+// ==============================
+/**
+ * Properties for redirect.
+ */
+export interface ActionRedirectProperties extends DisplayProperties {
+    src: string; // Source URL of the embedded document
+}
+
+// ==============================
+// HTML Content Blocks
+// ==============================
+/**
+ * Different types of HTML block content.
+ */
+type HTMLBlockContentType = 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'blockquote' | 'pre' | 'code';
+
+/**
+ * Properties for HTML content blocks.
+ */
+export interface HtmlBlockContentProperties extends DisplayProperties {
+    type: HTMLBlockContentType; // Type of HTML block
+    content: string; // Content of the HTML block
+}
+
+// ==============================
+// HTML List Blocks
+// ==============================
+/**
+ * Different types of HTML lists.
+ */
+type HTMLBlockListType = 'ordered' | 'unordered';
+
+/**
+ * Properties for HTML list blocks.
+ */
+export interface HTMLBlockListProperties extends DisplayProperties {
+    type: HTMLBlockListType; // Type of HTML list
+    items: string[]; // Array of items in the list
+}
+
+// ==============================
+// HTML Media Blocks
+// ==============================
+/**
+ * Different types of HTML media.
+ */
+type HTMLBlockMediaType = 'video' | 'audio' | 'img';
+
+/**
+ * Attributes for media sources.
+ */
+interface HTMLSourceAttributes {
+    src: string; // Source URL for the media
+    type?: string; // Optional media type (e.g., "video/mp4")
+    media: string; // Media query for the source
+}
+
+/**
+ * Properties for HTML media blocks.
+ */
+export interface HTMLBlockMediaProperties {
+    type: HTMLBlockMediaType; // Type of media block
+    sources?: HTMLSourceAttributes[]; // Optional sources for the media
+    src?: string; // Optional source URL for the media
+    alt: string; // Alternative text for the media
+    width?: number; // Optional width for the media
+    controls?: boolean; // Indicates if media controls are available
+    height?: number; // Optional height for the media
+}
\ No newline at end of file
diff --git a/src/types/index.ts b/src/types/index.ts
index 9590756..b8eaf00 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,244 +1,3 @@
-// ==============================
-// File Handling
-// ==============================
-/**
- * Represents a file object with optional properties for ID, URL, duration, and status.
- */
-export interface IFile {
-    id?: string; // Optional unique identifier for the file
-    url?: string; // Optional URL of the file
-    readonly file: File; // The actual File object
-    duration?: number; // Optional duration for media files
-    status?: 'queued' | 'pending' | 'uploaded' | 'error'; // Current status of the file
-}
-
-// ==============================
-// Input Choices
-// ==============================
-/**
- * Describes choices available for inputs, containing a label, value, and source.
- */
-interface InputChoice {
-    label: string; // Display label for the choice
-    value: string; // Value associated with the choice
-    src: string; // Source path or URL related to the choice
-}
-
-// ==============================
-// Component Types
-// ==============================
-/**
- * Different types of display components.
- */
-export type DisplayComponentType =
-    | 'html'
-    | 'icon'
-    | 'video'
-    | 'slide'
-    | 'document'
-    | 'locale_selector'
-    | 'page_break';
-
-/**
- * Different types of input components.
- */
-export type InputComponentType =
-    | 'address'
-    | 'captcha'
-    | 'checkboxes'
-    | 'date_picker'
-    | 'dropdown'
-    | 'email'
-    | 'file_upload'
-    | 'image_choice'
-    | 'likert_scale'
-    | 'long_text'
-    | 'matrix'
-    | 'multiple_choice'
-    | 'net_promoter_score'
-    | 'number'
-    | 'password'
-    | 'phone_number'
-    | 'ranking'
-    | 'rating_scale'
-    | 'short_text'
-    | 'signature'
-    | 'slider'
-    | 'time_picker'
-    | 'website';
-
-// ==============================
-// Validation
-// ==============================
-/**
- * Defines rules for input validation, such as required fields or maximum length.
- */
-export interface Validation {
-    rule: 'required' | 'maxLength' | string; // Validation rule type
-    params?: string[]; // Optional parameters for the rule
-}
-
-// ==============================
-// Input Properties
-// ==============================
-/**
- * Properties for input components in the form.
- */
-export interface InputProperties {
-    key: string; // Unique key for the input
-    component?: InputComponentType; // Type of input component
-    label: string; // Display label for the input
-    description?: string; // Optional description for the input
-    validations?: Validation[]; // Optional validations for the input
-    props?: Record<string, any>; // Additional properties for the input
-}
-
-
-// ==============================
-// List Input Field
-// ==============================
-/**
- * Input list, add remove sort items in list.
- */
-export interface InputListProperties extends InputProperties {
-    items: string[]
-}
-
-
-// ==============================
-// Ratings input field
-// ==============================
-/**
- * Rate stars component.
- */
-export interface InputRatingProperties extends InputProperties {
-    stars: number
-}
-
-// ==============================
-// Choice Input Field
-// ==============================
-/**
- * Input field with multiple choices.
- */
-export interface InputChoiceProperties extends InputProperties {
-    choices: InputChoice[];
-}
-
-// ==============================
-// Display Properties
-// ==============================
-/**
- * Properties for display components.
- */
-export interface DisplayProperties {
-    component: DisplayComponentType; // Type of display component
-    icon?: string; // Optional icon name or path
-}
-
-// ==============================
-// Embedded Document Properties
-// ==============================
-/**
- * Properties for embedded documents.
- */
-export interface EmbedProperties extends DisplayProperties {
-    src: string; // Source URL of the embedded document
-    width?: number; // Optional width for the embedded document
-    height?: number; // Optional height for the embedded document
-}
-
-
-// ==============================
-// Redirect Properties
-// ==============================
-/**
- * Properties for redirect.
- */
-export interface ActionRedirectProperties extends DisplayProperties {
-    src: string; // Source URL of the embedded document
-}
-
-// ==============================
-// HTML Content Blocks
-// ==============================
-/**
- * Different types of HTML block content.
- */
-type HTMLBlockContentType = 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'blockquote' | 'pre' | 'code';
-
-/**
- * Properties for HTML content blocks.
- */
-export interface HtmlBlockContentProperties extends DisplayProperties {
-    type: HTMLBlockContentType; // Type of HTML block
-    content: string; // Content of the HTML block
-}
-
-// ==============================
-// HTML List Blocks
-// ==============================
-/**
- * Different types of HTML lists.
- */
-type HTMLBlockListType = 'ordered' | 'unordered';
-
-/**
- * Properties for HTML list blocks.
- */
-export interface HTMLBlockListProperties extends DisplayProperties {
-    type: HTMLBlockListType; // Type of HTML list
-    items: string[]; // Array of items in the list
-}
-
-// ==============================
-// HTML Media Blocks
-// ==============================
-/**
- * Different types of HTML media.
- */
-type HTMLBlockMediaType = 'video' | 'audio' | 'img';
-
-/**
- * Attributes for media sources.
- */
-interface HTMLSourceAttributes {
-    src: string; // Source URL for the media
-    type?: string; // Optional media type (e.g., "video/mp4")
-    media: string; // Media query for the source
-}
-
-/**
- * Properties for HTML media blocks.
- */
-export interface HTMLBlockMediaProperties {
-    type: HTMLBlockMediaType; // Type of media block
-    sources?: HTMLSourceAttributes[]; // Optional sources for the media
-    src?: string; // Optional source URL for the media
-    alt: string; // Alternative text for the media
-    width?: number; // Optional width for the media
-    controls?: boolean; // Indicates if media controls are available
-    height?: number; // Optional height for the media
-}
-
-// ==============================
-// Element Manifest
-// ==============================
-/**
- * Represents the metadata and initial properties for a UI component.
- */
-export interface ElementManifest {
-    meta: {
-        name: string; // Name of the component
-        enabled: boolean; // Indicates if the component is enabled
-        description: string; // Description of the component
-        icon: string; // Icon for the component
-    };
-    init: {
-        type: 'input' | 'display'; // Type of the component
-        properties: {
-            input: InputProperties; // Input properties
-            display: DisplayProperties; // Display properties
-        };
-    };
-}
+export * from './display'
+export * from './input'
+export * from './manifest'
\ No newline at end of file
diff --git a/src/types/input.ts b/src/types/input.ts
new file mode 100644
index 0000000..0c87d8b
--- /dev/null
+++ b/src/types/input.ts
@@ -0,0 +1,117 @@
+// ==============================
+// File Handling
+// ==============================
+/**
+ * Represents a file object with optional properties for ID, URL, duration, and status.
+ */
+export interface IFile {
+    id?: string; // Optional unique identifier for the file
+    url?: string; // Optional URL of the file
+    readonly file: File; // The actual File object
+    duration?: number; // Optional duration for media files
+    status?: 'queued' | 'pending' | 'uploaded' | 'error'; // Current status of the file
+}
+
+// ==============================
+// Input Choices
+// ==============================
+/**
+ * Describes choices available for inputs, containing a label, value, and source.
+ */
+interface InputChoice {
+    label: string; // Display label for the choice
+    value: string; // Value associated with the choice
+    src: string; // Source path or URL related to the choice
+}
+
+// ==============================
+// Component Types
+// ==============================
+/**
+ * Different types of display components.
+ */
+/**
+ * Different types of input components.
+ */
+export type InputComponentType =
+    | 'address'
+    | 'captcha'
+    | 'checkboxes'
+    | 'date_picker'
+    | 'dropdown'
+    | 'email'
+    | 'file_upload'
+    | 'image_choice'
+    | 'likert_scale'
+    | 'long_text'
+    | 'matrix'
+    | 'multiple_choice'
+    | 'net_promoter_score'
+    | 'number'
+    | 'password'
+    | 'phone_number'
+    | 'ranking'
+    | 'rating_scale'
+    | 'short_text'
+    | 'signature'
+    | 'slider'
+    | 'time_picker'
+    | 'website';
+
+// ==============================
+// Validation
+// ==============================
+/**
+ * Defines rules for input validation, such as required fields or maximum length.
+ */
+export interface Validation {
+    rule: 'required' | 'maxLength' | string; // Validation rule type
+    params?: string[]; // Optional parameters for the rule
+}
+
+// ==============================
+// Input Properties
+// ==============================
+/**
+ * Properties for input components in the form.
+ */
+export interface InputProperties {
+    key: string; // Unique key for the input
+    component?: InputComponentType; // Type of input component
+    label: string; // Display label for the input
+    description?: string; // Optional description for the input
+    validations?: Validation[]; // Optional validations for the input
+    props?: Record<string, any>; // Additional properties for the input
+}
+
+
+// ==============================
+// List Input Field
+// ==============================
+/**
+ * Input list, add remove sort items in list.
+ */
+export interface InputListProperties extends InputProperties {
+    items: string[]
+}
+
+
+// ==============================
+// Ratings input field
+// ==============================
+/**
+ * Rate stars component.
+ */
+export interface InputRatingProperties extends InputProperties {
+    stars: number
+}
+
+// ==============================
+// Choice Input Field
+// ==============================
+/**
+ * Input field with multiple choices.
+ */
+export interface InputChoiceProperties extends InputProperties {
+    choices: InputChoice[];
+}
\ No newline at end of file
diff --git a/src/types/manifest.ts b/src/types/manifest.ts
new file mode 100644
index 0000000..0784456
--- /dev/null
+++ b/src/types/manifest.ts
@@ -0,0 +1,28 @@
+
+
+
+// ==============================
+// Element Manifest
+// ==============================
+
+import { DisplayProperties } from "./display";
+import { InputProperties } from "./input";
+
+/**
+ * Represents the metadata and initial properties for a UI component.
+ */
+export interface ElementManifest {
+    meta: {
+        name: string; // Name of the component
+        enabled: boolean; // Indicates if the component is enabled
+        description: string; // Description of the component
+        icon: string; // Icon for the component
+    };
+    init: {
+        type: 'input' | 'display'; // Type of the component
+        properties: {
+            input: InputProperties; // Input properties
+            display: DisplayProperties; // Display properties
+        };
+    };
+}

From 140dedf24107ce0042210422263a82f8f9734322 Mon Sep 17 00:00:00 2001
From: Sam <ns8448407@gmail.com>
Date: Mon, 28 Oct 2024 10:58:13 +0700
Subject: [PATCH 6/6] fix routing

---
 src/App.vue    | 32 ++++++++++++++++++++------------
 vite.config.ts |  2 +-
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9af0ad8..e426c9d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -181,18 +181,26 @@ onMounted(async () => {
         return comp.meta?.enabled
     })
 
-    formComponents.value = availableComponents.value.map((comp) => {
-        return {
-            name: comp.meta?.name || 'Unnamed Component',
-            component:
-                comp.init?.properties.input?.component ||
-                comp.init?.properties.display?.component,
-            inputProps: {
-                ...comp.init?.properties.input,
-                ...comp.init?.properties.display,
-            },
-        }
-    })
+    formComponents.value = availableComponents.value
+        .filter(
+            (components) =>
+                !!components.init.properties.display.component ||
+                !!components.init.properties.input.component,
+        )
+        .map((comp) => {
+            const displayComponent = comp.init?.properties.display.component
+            const inputComponent = comp.init?.properties.input.component
+            const component = inputComponent || displayComponent
+
+            return {
+                name: comp.meta?.name || 'Unnamed Component',
+                component: component as string | Component, // Ensure the type matches
+                inputProps: {
+                    ...comp.init.properties.input,
+                    ...comp.init.properties.display,
+                },
+            }
+        })
 
     for (const comp of formComponents.value) {
         const module = await import(`./components/${comp.component}/index.vue`)
diff --git a/vite.config.ts b/vite.config.ts
index f87711f..30b7a2a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -16,7 +16,7 @@ export default defineConfig({
     }),
     Icons(),
     dts({
-      include: ['src/components/**/*.vue', 'src/types/index.ts', 'src/index.ts'],
+      include: ['src/components/**/*.vue', 'src/types/**/*.ts', 'src/index.ts'],
       insertTypesEntry: true,
     })
   ],