@aziontech/webkit 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aziontech/webkit",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Reusable UI components and design system utilities for building Azion web interfaces.",
   "license": "MIT",
   "repository": {
@@ -13,7 +13,7 @@
   },
   "scripts": {
     "clean": "rm -rf dist/",
-    "clean:dts": "rm -rf src/core/**/*.d.ts src/core/**/*.d.ts.map",
+    "clean:dts": "rm -rf src/core/form/**/*.d.ts src/core/form/**/*.d.ts.map",
     "build:dts": "vue-tsc --declaration --emitDeclarationOnly",
     "build": "npm run clean:dts; npm run build:dts",
     "publish": "npm publish",
@@ -40,7 +40,31 @@
     "package.json"
   ],
   "exports": {
-    "./field-text": "./src/core/field-text",
-    "./field-number": "./src/core/field-number"
+    "./field-auto-complete": "./src/core/form/field-auto-complete/field-auto-complete.vue",
+    "./field-checkbox-block": "./src/core/form/field-checkbox-block/field-checkbox-block.vue",
+    "./field-dropdown": "./src/core/form/field-dropdown/field-dropdown.vue",
+    "./field-dropdown-icon": "./src/core/form/field-dropdown-icon/field-dropdown-icon.vue",
+    "./field-dropdown-lazy-loader": "./src/core/form/field-dropdown-lazy-loader/field-dropdown-lazy-loader.vue",
+    "./field-dropdown-lazy-loader-dynamic": "./src/core/form/field-dropdown-lazy-loader-dynamic/field-dropdown-lazy-loader-dynamic.vue",
+    "./field-dropdown-lazy-loader-with-filter": "./src/core/form/field-dropdown-lazy-loader-with-filter/field-dropdown-lazy-loader-with-filter.vue",
+    "./field-dropdown-multi-select-lazy-loader": "./src/core/form/field-dropdown-multi-select-lazy-loader/field-dropdown-multi-select-lazy-loader.vue",
+    "./field-group-checkbox": "./src/core/form/field-group-checkbox/field-group-checkbox.vue",
+    "./field-group-radio": "./src/core/form/field-group-radio/field-group-radio.vue",
+    "./field-group-switch": "./src/core/form/field-group-switch/field-group-switch.vue",
+    "./field-input-group": "./src/core/form/field-input-group/field-input-group.vue",
+    "./field-multi-select": "./src/core/form/field-multi-select/field-multi-select.vue",
+    "./field-number": "./src/core/form/field-number/field-number.vue",
+    "./field-phone-number": "./src/core/form/field-phone-number/field-phone-number.vue",
+    "./field-phone-number-country": "./src/core/form/field-phone-number-country/field-phone-number-country.vue",
+    "./field-pick-list": "./src/core/form/field-pick-list/field-pick-list.vue",
+    "./field-radio-block": "./src/core/form/field-radio-block/field-radio-block.vue",
+    "./field-switch": "./src/core/form/field-switch/field-switch.vue",
+    "./field-switch-block": "./src/core/form/field-switch-block/field-switch-block.vue",
+    "./field-text": "./src/core/form/field-text/field-text.vue",
+    "./field-text-area": "./src/core/form/field-text-area/field-text-area.vue",
+    "./field-text-icon": "./src/core/form/field-text-icon/field-text-icon.vue",
+    "./field-text-password": "./src/core/form/field-text-password/field-text-password.vue",
+    "./label": "./src/core/form/label/label.vue",
+    "./selector-block": "./src/core/selector-block/selector-block.vue"
   }
 }

package/src/core/{field-checkbox-block → form/field-checkbox-block}/field-checkbox-block.vue

@@ -24,7 +24,7 @@
 
 <script setup>
   import PrimeCheckbox from 'primevue/checkbox'
-  import SelectorBlock from '../selector-block'
+  import SelectorBlock from '../../selector-block/selector-block.vue'
 
   import { useField } from 'vee-validate'
   import { toRefs } from 'vue'

package/src/core/{field-dropdown-lazy-loader → form/field-dropdown-lazy-loader}/field-dropdown-lazy-loader.vue

@@ -1,132 +1,9 @@
-<template>
-  <LabelBlock
-    v-if="props.label"
-    :for="props.name"
-    :label="props.label"
-    :isRequired="$attrs.required"
-    :data-testid="customTestId.label"
-  />
-  <Dropdown
-    appendTo="self"
-    :id="name"
-    :name="props.name"
-    :loading="loading"
-    v-model="inputValue"
-    :options="data"
-    :optionLabel="props.optionLabel"
-    :optionDisabled="props.optionDisabled"
-    :optionValue="props.optionValue"
-    :optionGroupLabel="props.optionGroupLabel"
-    :optionGroupChildren="props.optionGroupChildren"
-    :placeholder="props.placeholder"
-    :showClear="props.enableClearOption"
-    @change="emitChange"
-    @blur="emitBlur"
-    :class="errorMessage ? 'p-invalid' : ''"
-    v-bind="$attrs"
-    class="w-full"
-    :pt="{
-      clearIcon: {
-        'data-testid': customTestId.clearIcon
-      },
-      filterInput: {
-        class: 'w-full',
-        'data-testid': customTestId.filterInput
-      },
-      trigger: {
-        'data-testid': customTestId.trigger
-      },
-      loadingIcon: {
-        'data-testid': customTestId.loadingIcon
-      }
-    }"
-    :data-testid="customTestId.dropdown"
-    :virtualScrollerOptions="VIRTUAL_SCROLLER_CONFIG"
-  >
-    <template
-      v-if="enableCustomLabel"
-      #value="slotProps"
-    >
-      <span
-        class="flex align-items-center gap-2 max-w-full"
-        :data-testid="customTestId.value"
-      >
-        <i
-          v-if="showIcon"
-          :class="`pi ${iconSelected} ${applyIconColor(iconSelected)}`"
-        ></i>
-        <span
-          class="truncate max-w-full"
-          :title="getLabelBySelectedValue(slotProps.value)"
-        >
-          {{ getLabelBySelectedValue(slotProps.value) }}
-        </span>
-      </span>
-    </template>
-    <template #option="slotProps">
-      <div class="flex align-items-center gap-2">
-        <i
-          v-if="slotProps.option.icon"
-          :class="`pi ${slotProps.option.icon} ${applyIconColor(slotProps.option.icon)}`"
-        ></i>
-        <span
-          v-else-if="!slotProps.option.icon && showIcon"
-          class="w-4"
-        ></span>
-        <div>{{ slotProps.option.name }}</div>
-      </div>
-    </template>
-
-    <template #header>
-      <div class="p-2 flex">
-        <div class="p-inputgroup">
-          <InputText
-            type="text"
-            v-model="search"
-            placeholder="Search"
-            class="w-full rounded-r-none"
-            ref="focusSearch"
-            :data-testid="customTestId.search"
-          />
-          <span
-            class="p-inputgroup-addon"
-            @click="searchFilter"
-          >
-            <i class="pi pi-search"></i>
-          </span>
-        </div>
-      </div>
-    </template>
-
-    <template #footer>
-      <slot name="footer" />
-    </template>
-  </Dropdown>
-
-  <small
-    v-if="errorMessage"
-    :data-testid="customTestId.error"
-    class="p-error text-xs font-normal leading-tight"
-  >
-    {{ errorMessage }}
-  </small>
-  <small
-    class="text-xs text-color-secondary font-normal leading-5"
-    :data-testid="customTestId.description"
-    v-if="props.description || hasDescriptionSlot"
-  >
-    <slot name="description">
-      {{ props.description }}
-    </slot>
-  </small>
-</template>
-
 <script setup>
+  import { computed, toRef, useSlots, useAttrs, ref, onMounted, watchEffect, watch, inject } from 'vue'
+  import { watchDebounced } from '@vueuse/core'
   import Dropdown from 'primevue/dropdown'
   import InputText from 'primevue/inputtext'
   import { useField } from 'vee-validate'
-  import { computed, toRef, useSlots, useAttrs, ref, onMounted, watchEffect, watch } from 'vue'
-  import { watchDebounced } from '@vueuse/core'
   import LabelBlock from '../label'
 
   const props = defineProps({
@@ -208,7 +85,7 @@
     }
   })
 
-  const emit = defineEmits(['onBlur', 'onChange', 'onSelectOption', 'onAccessDenied'])
+  const emit = defineEmits(['onBlur', 'onChange', 'onSelectOption', 'onAccessDenied', 'onLoaded'])
 
   const PAGE_INCREMENT = 1
   const PAGE_SIZE = 100
@@ -231,8 +108,13 @@
   const disableEmitInit = ref(props.disableEmitFirstRender)
   const alreadyLoadedData = ref(false)
 
+  const registerAsyncFormChild = inject('registerAsyncFormChild', null)
+  const notifyFormChildReady = registerAsyncFormChild?.()
+
   onMounted(async () => {
     await fetchData()
+    notifyFormChildReady?.()
+    emit('onLoaded')
   })
 
   const hasDescriptionSlot = !!slots.description
@@ -376,9 +258,9 @@
               [props.optionLabel]: item.name,
               [props.optionValue]: item.id,
               ...props?.moreOptions?.reduce(
-                (additionalFields, option) => ({
+                (additionalFields, fieldKey) => ({
                   ...additionalFields,
-                  [option]: item[option]
+                  [fieldKey]: item[fieldKey]
                 }),
                 {}
               )
@@ -480,9 +362,9 @@
         [props.optionLabel]: results.name,
         [props.optionValue]: results.id,
         ...props?.moreOptions?.reduce(
-          (additionalFields, option) => ({
+          (additionalFields, fieldKey) => ({
             ...additionalFields,
-            [option]: results[option]
+            [fieldKey]: results[fieldKey]
           }),
           {}
         )
@@ -609,11 +491,23 @@
     loading
   }
 
-  const checkValueInList = (value) => {
-    const existitemInList = data.value?.some((item) => item[props.optionValue] === value)
+  const checkValueInList = async (value) => {
+    const isGroupedData =
+      data.value.length > 0 &&
+      data.value.some((item) => item[props.optionGroupLabel] && item[props.optionGroupChildren])
+
+    let existsInList = false
+
+    if (isGroupedData) {
+      existsInList = data.value.some((group) =>
+        group[props.optionGroupChildren]?.some((item) => item[props.optionValue] === value)
+      )
+    } else {
+      existsInList = data.value?.some((item) => item[props.optionValue] === value)
+    }
 
-    if (!existitemInList) {
-      loadSelectedValue(value)
+    if (!existsInList) {
+      await loadSelectedValue(value)
       alreadyLoadedData.value = true
     }
   }
@@ -629,3 +523,126 @@
     refreshData
   })
 </script>
+
+<template>
+  <LabelBlock
+    v-if="props.label"
+    :for="props.name"
+    :label="props.label"
+    :isRequired="$attrs.required"
+    :data-testid="customTestId.label"
+  />
+  <Dropdown
+    appendTo="self"
+    :id="name"
+    :name="props.name"
+    :loading="loading"
+    v-model="inputValue"
+    :options="data"
+    :optionLabel="props.optionLabel"
+    :optionDisabled="props.optionDisabled"
+    :optionValue="props.optionValue"
+    :optionGroupLabel="props.optionGroupLabel"
+    :optionGroupChildren="props.optionGroupChildren"
+    :placeholder="props.placeholder"
+    :showClear="props.enableClearOption"
+    @change="emitChange"
+    @blur="emitBlur"
+    :class="errorMessage ? 'p-invalid' : ''"
+    v-bind="$attrs"
+    class="w-full"
+    :pt="{
+      clearIcon: {
+        'data-testid': customTestId.clearIcon
+      },
+      filterInput: {
+        class: 'w-full',
+        'data-testid': customTestId.filterInput
+      },
+      trigger: {
+        'data-testid': customTestId.trigger
+      },
+      loadingIcon: {
+        'data-testid': customTestId.loadingIcon
+      }
+    }"
+    :data-testid="customTestId.dropdown"
+    :virtualScrollerOptions="VIRTUAL_SCROLLER_CONFIG"
+  >
+    <template
+      v-if="enableCustomLabel"
+      #value="slotProps"
+    >
+      <span
+        class="flex align-items-center gap-2 max-w-full"
+        :data-testid="customTestId.value"
+      >
+        <i
+          v-if="showIcon"
+          :class="`pi ${iconSelected} ${applyIconColor(iconSelected)}`"
+        ></i>
+        <span
+          class="truncate max-w-full"
+          :title="getLabelBySelectedValue(slotProps.value)"
+        >
+          {{ getLabelBySelectedValue(slotProps.value) }}
+        </span>
+      </span>
+    </template>
+    <template #option="slotProps">
+      <div class="flex align-items-center gap-2">
+        <i
+          v-if="slotProps.option.icon"
+          :class="`pi ${slotProps.option.icon} ${applyIconColor(slotProps.option.icon)}`"
+        ></i>
+        <span
+          v-else-if="!slotProps.option.icon && showIcon"
+          class="w-4"
+        ></span>
+        <div>{{ slotProps.option.name }}</div>
+      </div>
+    </template>
+
+    <template #header>
+      <div class="p-2 flex">
+        <div class="p-inputgroup">
+          <InputText
+            type="text"
+            v-model="search"
+            placeholder="Search"
+            class="w-full rounded-r-none"
+            ref="focusSearch"
+            :data-testid="customTestId.search"
+          />
+          <span
+            class="p-inputgroup-addon"
+            @click="searchFilter"
+          >
+            <i class="pi pi-search"></i>
+          </span>
+        </div>
+      </div>
+    </template>
+
+    <template #footer>
+      <slot name="footer" />
+    </template>
+  </Dropdown>
+
+  <small
+    v-if="errorMessage"
+    :data-testid="customTestId.error"
+    class="p-error text-xs font-normal leading-tight"
+  >
+    {{ errorMessage }}
+  </small>
+  <small
+    class="text-xs text-color-secondary font-normal leading-5"
+    :data-testid="customTestId.description"
+    v-if="props.description || hasDescriptionSlot"
+  >
+    <slot name="description">
+      {{ props.description }}
+    </slot>
+  </small>
+</template>

package/src/core/{field-dropdown-multi-select-lazy-loader → form/field-dropdown-multi-select-lazy-loader}/field-dropdown-multi-select-lazy-loader.vue

@@ -1,101 +1,9 @@
-<template>
-  <LabelBlock
-    v-if="props.label"
-    :for="props.name"
-    :label="props.label"
-    :isRequired="$attrs.required"
-    :data-testid="customTestId.label"
-  />
-  <MultiSelect
-    :id="name"
-    :name="props.name"
-    :loading="loading"
-    v-model="inputValue"
-    :options="data"
-    :optionLabel="props.optionLabel"
-    :optionDisabled="props.optionDisabled"
-    :optionValue="props.optionValue"
-    :placeholder="props.placeholder"
-    :showClear="props.enableClearOption"
-    @change="emitChange"
-    @blur="emitBlur"
-    :class="errorMessage ? 'p-invalid' : ''"
-    v-bind="$attrs"
-    class="w-full md:w-80"
-    display="chip"
-    :pt="{
-      clearIcon: {
-        'data-testid': customTestId.clearIcon
-      },
-      filterInput: {
-        class: 'w-full',
-        'data-testid': customTestId.filterInput
-      },
-      trigger: {
-        'data-testid': customTestId.trigger
-      },
-      loadingIcon: {
-        'data-testid': customTestId.loadingIcon
-      }
-    }"
-    :data-testid="customTestId.multiselect"
-    :virtualScrollerOptions="VIRTUAL_SCROLLER_CONFIG"
-  >
-    <template
-      v-if="enableCustomLabel"
-      #value="slotProps"
-    >
-      <span :data-testid="customTestId.value">
-        {{ getLabelsForSelectedValues(slotProps.value) }}
-      </span>
-    </template>
-    <template #header>
-      <div class="p-2 flex">
-        <div class="p-inputgroup">
-          <InputText
-            type="text"
-            v-model="search"
-            placeholder="Search"
-            class="w-full rounded-r-none"
-            ref="focusSearch"
-            :data-testid="customTestId.search"
-          />
-          <span
-            class="p-inputgroup-addon"
-            @click="searchFilter"
-          >
-            <i class="pi pi-search"></i>
-          </span>
-        </div>
-      </div>
-    </template>
-    <template #footer>
-      <slot name="footer" />
-    </template>
-  </MultiSelect>
-  <small
-    v-if="errorMessage"
-    :data-testid="customTestId.error"
-    class="p-error text-xs font-normal leading-tight"
-  >
-    {{ errorMessage }}
-  </small>
-  <small
-    class="text-xs text-color-secondary font-normal leading-5"
-    :data-testid="customTestId.description"
-    v-if="props.description || hasDescriptionSlot"
-  >
-    <slot name="description">
-      {{ props.description }}
-    </slot>
-  </small>
-</template>
 <script setup>
+  import { computed, toRef, useSlots, useAttrs, ref, onMounted, watchEffect, watch } from 'vue'
+  import { watchDebounced } from '@vueuse/core'
   import MultiSelect from 'primevue/multiselect'
   import InputText from 'primevue/inputtext'
   import { useField } from 'vee-validate'
-  import { computed, toRef, useSlots, useAttrs, ref, onMounted, watchEffect, watch } from 'vue'
-  import { watchDebounced } from '@vueuse/core'
   import LabelBlock from '../label'
 
   const props = defineProps({
@@ -161,7 +69,14 @@
     }
   })
 
-  const emit = defineEmits(['onBlur', 'onChange', 'onSelectOption', 'onAccessDenied', 'onClear'])
+  const emit = defineEmits([
+    'onBlur',
+    'onChange',
+    'onSelectOption',
+    'onAccessDenied',
+    'onClear',
+    'onLoaded'
+  ])
   const PAGE_INCREMENT = 1
   const PAGE_SIZE = 100
   const INITIAL_PAGE = 1
@@ -184,6 +99,7 @@
 
   onMounted(async () => {
     await fetchData()
+    emit('onLoaded')
   })
 
   const hasDescriptionSlot = !!slots.description
@@ -437,3 +353,97 @@
     refreshData
   })
 </script>
+
+<template>
+  <LabelBlock
+    v-if="props.label"
+    :for="props.name"
+    :label="props.label"
+    :isRequired="$attrs.required"
+    :data-testid="customTestId.label"
+  />
+  <MultiSelect
+    :id="name"
+    :name="props.name"
+    :loading="loading"
+    v-model="inputValue"
+    :options="data"
+    :optionLabel="props.optionLabel"
+    :optionDisabled="props.optionDisabled"
+    :optionValue="props.optionValue"
+    :placeholder="props.placeholder"
+    :showClear="props.enableClearOption"
+    @change="emitChange"
+    @blur="emitBlur"
+    :class="errorMessage ? 'p-invalid' : ''"
+    v-bind="$attrs"
+    class="w-full md:w-80"
+    display="chip"
+    :pt="{
+      clearIcon: {
+        'data-testid': customTestId.clearIcon
+      },
+      filterInput: {
+        class: 'w-full',
+        'data-testid': customTestId.filterInput
+      },
+      trigger: {
+        'data-testid': customTestId.trigger
+      },
+      loadingIcon: {
+        'data-testid': customTestId.loadingIcon
+      }
+    }"
+    :data-testid="customTestId.multiselect"
+    :virtualScrollerOptions="VIRTUAL_SCROLLER_CONFIG"
+  >
+    <template
+      v-if="enableCustomLabel"
+      #value="slotProps"
+    >
+      <span :data-testid="customTestId.value">
+        {{ getLabelsForSelectedValues(slotProps.value) }}
+      </span>
+    </template>
+    <template #header>
+      <div class="p-2 flex">
+        <div class="p-inputgroup">
+          <InputText
+            type="text"
+            v-model="search"
+            placeholder="Search"
+            class="w-full rounded-r-none"
+            ref="focusSearch"
+            :data-testid="customTestId.search"
+          />
+          <span
+            class="p-inputgroup-addon"
+            @click="searchFilter"
+          >
+            <i class="pi pi-search"></i>
+          </span>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <slot name="footer" />
+    </template>
+  </MultiSelect>
+  <small
+    v-if="errorMessage"
+    :data-testid="customTestId.error"
+    class="p-error text-xs font-normal leading-tight"
+  >
+    {{ errorMessage }}
+  </small>
+  <small
+    class="text-xs text-color-secondary font-normal leading-5"
+    :data-testid="customTestId.description"
+    v-if="props.description || hasDescriptionSlot"
+  >
+    <slot name="description">
+      {{ props.description }}
+    </slot>
+  </small>
+</template>
+

package/src/core/{field-radio-block → form/field-radio-block}/field-radio-block.vue

@@ -25,7 +25,7 @@
 
 <script setup>
   import PrimeRadio from 'primevue/radiobutton'
-  import SelectorBlock from '../selector-block'
+  import SelectorBlock from '../../selector-block/selector-block.vue'
 
   import { useField } from 'vee-validate'
   import { toRefs } from 'vue'

package/src/core/{field-switch-block → form/field-switch-block}/field-switch-block.vue

@@ -27,7 +27,7 @@
 
 <script setup>
   import InputSwitch from 'primevue/inputswitch'
-  import SelectorBlock from '../selector-block'
+  import SelectorBlock from '../../selector-block/selector-block.vue'
 
   import { useField } from 'vee-validate'
   import { toRefs, useAttrs, computed } from 'vue'