@aziontech/webkit 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aziontech/webkit",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Reusable UI components and design system utilities for building Azion web interfaces.",
   "license": "MIT",
   "repository": {
@@ -22,7 +22,8 @@
   "dependencies": {
     "primevue": "3.35.0",
     "vee-validate": "^4.15.1",
-    "vue-tsc": "^3.2.5"
+    "vue-tsc": "^3.2.5",
+    "@vueuse/core": "^10.11.1"
   },
   "devDependencies": {
     "@semantic-release/changelog": "^6.0.3",

package/src/components/azion-system-status/azion-system-status.vue

@@ -1,5 +1,4 @@
 <script setup>
-// azion system status button
 import PrimeButton from 'primevue/button'
 import { ref, computed, onMounted } from 'vue'
 

package/src/components/azion-system-status/azion-system-status.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"azion-system-status.vue.d.ts","sourceRoot":"","sources":["azion-system-status.vue"],"names":[],"mappings":"wBA0SqB,OAAO,YAAY;;AAFxC,0SACG"}
+{"version":3,"file":"azion-system-status.vue.d.ts","sourceRoot":"","sources":["azion-system-status.vue"],"names":[],"mappings":"wBAwSqB,OAAO,YAAY;;AAFxC,0SACG"}

package/src/core/form/field-auto-complete/field-auto-complete.vue

@@ -2,6 +2,7 @@
   import { ref, toRef } from 'vue'
   import { useField } from 'vee-validate'
   import AutoComplete from 'primevue/autocomplete'
+  import InputSlot from '../slots/input-slot'
 
   const props = defineProps({
     value: {
@@ -67,55 +68,57 @@
 </script>
 
 <template>
-  <label
-    :for="props.name"
-    class="text-color text-base font-medium leading-5"
-  >
-    {{ props.label }}
-  </label>
+  <InputSlot>
+    <label
+      :for="props.name"
+      class="text-color text-base font-medium leading-5"
+    >
+      {{ props.label }}
+    </label>
 
-  <div
-    class="p-inputgroup h-fit"
-    :class="{ 'border border-red-500 rounded-md surface-border': errorMessage }"
-  >
     <div
-      class="p-inputgroup-addon"
-      :class="{ 'opacity-20': props.disabled }"
+      class="p-inputgroup h-fit"
+      :class="{ 'border border-red-500 rounded-md surface-border': errorMessage }"
     >
-      <i
-        v-if="props.icon"
-        :class="props.icon"
-        class="text-color-secondary"
+      <div
+        class="p-inputgroup-addon"
+        :class="{ 'opacity-20': props.disabled }"
+      >
+        <i
+          v-if="props.icon"
+          :class="props.icon"
+          class="text-color-secondary"
+        />
+      </div>
+      <AutoComplete
+        ref="autoCompleteRef"
+        :readonly="props.readonly"
+        class="w-full"
+        :placeholder="props.placeholder"
+        :id="props.name"
+        :name="props.name"
+        v-model="inputValue"
+        :suggestions="props.suggestions"
+        @complete="props.onComplete"
+        :disabled="props.disabled"
+        :completeOnFocus="props.completeOnFocus"
+        @input="handleChange"
+        @blur="handleBlur"
+        v-bind="$attrs"
       />
     </div>
-    <AutoComplete
-      ref="autoCompleteRef"
-      :readonly="props.readonly"
-      class="w-full"
-      :placeholder="props.placeholder"
-      :id="props.name"
-      :name="props.name"
-      v-model="inputValue"
-      :suggestions="props.suggestions"
-      @complete="props.onComplete"
-      :disabled="props.disabled"
-      :completeOnFocus="props.completeOnFocus"
-      @input="handleChange"
-      @blur="handleBlur"
-      v-bind="$attrs"
-    />
-  </div>
 
-  <small
-    v-if="errorMessage"
-    class="p-error text-xs font-normal leading-tight"
-  >
-    {{ errorMessage }}
-  </small>
-  <small
-    class="text-xs text-color-secondary font-normal leading-5"
-    v-if="props.description"
-  >
-    {{ props.description }}
-  </small>
+    <small
+      v-if="errorMessage"
+      class="p-error text-xs font-normal leading-tight"
+    >
+      {{ errorMessage }}
+    </small>
+    <small
+      class="text-xs text-color-secondary font-normal leading-5"
+      v-if="props.description"
+    >
+      {{ props.description }}
+    </small>
+  </InputSlot>
 </template>

package/src/core/form/field-auto-complete/field-auto-complete.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-auto-complete.vue.d.ts","sourceRoot":"","sources":["field-auto-complete.vue"],"names":[],"mappings":"wBA+WqB,OAAO,YAAY;;AAjDxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAgDG"}
+{"version":3,"file":"field-auto-complete.vue.d.ts","sourceRoot":"","sources":["field-auto-complete.vue"],"names":[],"mappings":"wBAmYqB,OAAO,YAAY;;AAjDxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAgDG"}

package/src/core/form/field-dropdown/field-dropdown.vue

@@ -2,7 +2,8 @@
   import Dropdown from 'primevue/dropdown'
   import { useField } from 'vee-validate'
   import { computed, toRef, useSlots, useAttrs } from 'vue'
-  import LabelBlock from '../label'
+  import Label from '../label'
+  import InputSlot from '../slots/input-slot'
 
   const props = defineProps({
     value: {
@@ -172,69 +173,71 @@
 </script>
 
 <template>
-  <LabelBlock
-    :for="props.name"
-    :label="props.label"
-    :isRequired="$attrs.required"
-    :data-testid="customTestId.label"
-    v-if="props.label"
-  />
-  <Dropdown
-    :dropdown-icon="isDisabledIcon"
-    :editable="props.editable"
-    appendTo="self"
-    :id="name"
-    :name="props.name"
-    :loading="props.loading"
-    v-model="inputValue"
-    :options="props.options"
-    :optionLabel="props.optionLabel"
-    :optionDisabled="props.optionDisabled"
-    :filter="props.filter"
-    :optionValue="props.optionValue"
-    :optionGroupLabel="props.optionGroupLabel"
-    :optionGroupChildren="props.optionGroupChildren"
-    :placeholder="props.placeholder"
-    :autoFilterFocus="props.filter"
-    :emptyMessage="props.emptyMessage"
-    :emptyFilterMessage="props.emptyFilterMessage"
-    @change="emitChange"
-    @blur="emitBlur"
-    :class="{ 'p-invalid': aditionalError || errorMessage }"
-    v-bind="$attrs"
-    :disabled="props.disabled"
-    class="w-full"
-    :pt="passThrough"
-    :data-testid="customTestId.dropdown"
-  >
-    <template
-      v-if="enableCustomLabel"
-      #value="slotProps"
+  <InputSlot>
+    <Label
+      :for="props.name"
+      :label="props.label"
+      :isRequired="$attrs.required"
+      :data-testid="customTestId.label"
+      v-if="props.label"
+    />
+    <Dropdown
+      :dropdown-icon="isDisabledIcon"
+      :editable="props.editable"
+      appendTo="self"
+      :id="name"
+      :name="props.name"
+      :loading="props.loading"
+      v-model="inputValue"
+      :options="props.options"
+      :optionLabel="props.optionLabel"
+      :optionDisabled="props.optionDisabled"
+      :filter="props.filter"
+      :optionValue="props.optionValue"
+      :optionGroupLabel="props.optionGroupLabel"
+      :optionGroupChildren="props.optionGroupChildren"
+      :placeholder="props.placeholder"
+      :autoFilterFocus="props.filter"
+      :emptyMessage="props.emptyMessage"
+      :emptyFilterMessage="props.emptyFilterMessage"
+      @change="emitChange"
+      @blur="emitBlur"
+      :class="{ 'p-invalid': aditionalError || errorMessage }"
+      v-bind="$attrs"
+      :disabled="props.disabled"
+      class="w-full"
+      :pt="passThrough"
+      :data-testid="customTestId.dropdown"
     >
-      <span :data-testid="customTestId.value">
-        {{ getLabelBySelectedValue(slotProps.value) }}
-      </span>
-    </template>
-
-    <template #footer>
-      <slot name="footer" />
-    </template>
-  </Dropdown>
-
-  <small
-    v-if="aditionalError || errorMessage"
-    :data-testid="customTestId.error"
-    class="p-error text-xs font-normal leading-tight"
-  >
-    {{ aditionalError || 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
+        v-if="enableCustomLabel"
+        #value="slotProps"
+      >
+        <span :data-testid="customTestId.value">
+          {{ getLabelBySelectedValue(slotProps.value) }}
+        </span>
+      </template>
+
+      <template #footer>
+        <slot name="footer" />
+      </template>
+    </Dropdown>
+
+    <small
+      v-if="aditionalError || errorMessage"
+      :data-testid="customTestId.error"
+      class="p-error text-xs font-normal leading-tight"
+    >
+      {{ aditionalError || 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>
+  </InputSlot>
 </template>

package/src/core/form/field-dropdown/field-dropdown.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-dropdown.vue.d.ts","sourceRoot":"","sources":["field-dropdown.vue"],"names":[],"mappings":"wBA+pBqB,OAAO,YAAY;;AADxC,4BAA2B,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;qBAEtD,CAAC,EAAE,CAAC;;;AAvFzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAoFG"}
+{"version":3,"file":"field-dropdown.vue.d.ts","sourceRoot":"","sources":["field-dropdown.vue"],"names":[],"mappings":"wBAmrBqB,OAAO,YAAY;;AADxC,4BAA2B,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;qBAEtD,CAAC,EAAE,CAAC;;;AAvFzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAoFG"}

package/src/core/form/field-dropdown-icon/field-dropdown-icon.vue

@@ -2,6 +2,7 @@
   import { ref, toRef } from 'vue'
   import { useField } from 'vee-validate'
   import Dropdown from 'primevue/dropdown'
+  import InputSlot from '../slots/input-slot'
 
   const emit = defineEmits(['onChange'])
 
@@ -74,56 +75,58 @@
 </script>
 
 <template>
-  <label
-    :for="props.name"
-    class="text-color text-base font-medium leading-5"
-  >
-    {{ props.label }}
-  </label>
+  <InputSlot>
+    <label
+      :for="props.name"
+      class="text-color text-base font-medium leading-5"
+    >
+      {{ props.label }}
+    </label>
 
-  <div
-    class="p-inputgroup h-fit"
-    :class="{ 'border border-red-500 rounded-md surface-border': errorMessage }"
-  >
     <div
-      class="p-inputgroup-addon"
-      :class="{ 'opacity-20': props.disabled }"
+      class="p-inputgroup h-fit"
+      :class="{ 'border border-red-500 rounded-md surface-border': errorMessage }"
     >
-      <i
-        v-if="props.icon"
-        :class="props.icon"
-        class="text-color-secondary"
+      <div
+        class="p-inputgroup-addon"
+        :class="{ 'opacity-20': props.disabled }"
+      >
+        <i
+          v-if="props.icon"
+          :class="props.icon"
+          class="text-color-secondary"
+        />
+      </div>
+      <Dropdown
+        ref="autoCompleteRef"
+        :readonly="props.readonly"
+        class="w-full"
+        :placeholder="props.placeholder"
+        :id="props.name"
+        :name="props.name"
+        v-model="inputValue"
+        :suggestions="props.suggestions"
+        @complete="props.onComplete"
+        :disabled="props.disabled"
+        :completeOnFocus="props.completeOnFocus"
+        @input="handleChange"
+        @blur="handleBlur"
+        v-bind="$attrs"
+        @change="handleChangeEvent"
       />
     </div>
-    <Dropdown
-      ref="autoCompleteRef"
-      :readonly="props.readonly"
-      class="w-full"
-      :placeholder="props.placeholder"
-      :id="props.name"
-      :name="props.name"
-      v-model="inputValue"
-      :suggestions="props.suggestions"
-      @complete="props.onComplete"
-      :disabled="props.disabled"
-      :completeOnFocus="props.completeOnFocus"
-      @input="handleChange"
-      @blur="handleBlur"
-      v-bind="$attrs"
-      @change="handleChangeEvent"
-    />
-  </div>
 
-  <small
-    v-if="errorMessage"
-    class="p-error text-xs font-normal leading-tight"
-  >
-    {{ errorMessage }}
-  </small>
-  <small
-    class="text-xs text-color-secondary font-normal leading-5"
-    v-if="props.description"
-  >
-    {{ props.description }}
-  </small>
+    <small
+      v-if="errorMessage"
+      class="p-error text-xs font-normal leading-tight"
+    >
+      {{ errorMessage }}
+    </small>
+    <small
+      class="text-xs text-color-secondary font-normal leading-5"
+      v-if="props.description"
+    >
+      {{ props.description }}
+    </small>
+  </InputSlot>
 </template>

package/src/core/form/field-dropdown-icon/field-dropdown-icon.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-dropdown-icon.vue.d.ts","sourceRoot":"","sources":["field-dropdown-icon.vue"],"names":[],"mappings":"wBAuYqB,OAAO,YAAY;;AAlDxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAiDG"}
+{"version":3,"file":"field-dropdown-icon.vue.d.ts","sourceRoot":"","sources":["field-dropdown-icon.vue"],"names":[],"mappings":"wBA2ZqB,OAAO,YAAY;;AAlDxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAiDG"}