@aziontech/webkit 0.0.1

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

@@ -0,0 +1,240 @@
+<script setup>
+  import Dropdown from 'primevue/dropdown'
+  import { useField } from 'vee-validate'
+  import { computed, toRef, useSlots, useAttrs } from 'vue'
+  import LabelBlock from '../label'
+
+  const props = defineProps({
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    optionLabel: {
+      type: String,
+      default: ''
+    },
+    optionValue: {
+      type: String,
+      default: ''
+    },
+    optionDisabled: {
+      type: [String, Function],
+      default: ''
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    enableWorkaroundLabelToDisabledOptions: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    filter: {
+      type: Boolean,
+      default: false
+    },
+    pt: {
+      type: Object,
+      default: () => {}
+    },
+    optionGroupLabel: {
+      type: String,
+      default: ''
+    },
+    optionGroupChildren: {
+      type: String,
+      default: ''
+    },
+    editable: {
+      type: Boolean,
+      default: false
+    },
+    emptyMessage: {
+      type: String,
+      default: 'No available options'
+    },
+    emptyFilterMessage: {
+      type: String,
+      default: 'No results found'
+    },
+    aditionalError: {
+      type: String,
+      default: ''
+    }
+  })
+
+  const emit = defineEmits(['onBlur', 'onChange', 'onSelectOption'])
+
+  const name = toRef(props, 'name')
+  const slots = useSlots()
+
+  const hasDescriptionSlot = !!slots.description
+  const { value: inputValue, errorMessage } = useField(name, undefined, {
+    initialValue: props.value
+  })
+
+  const emitBlur = () => {
+    emit('onBlur')
+  }
+
+  const emitChange = () => {
+    const selectedOption = props.options.find(
+      (option) => option[props.optionValue] === inputValue.value
+    )
+
+    emit('onChange', inputValue.value)
+
+    if (selectedOption) {
+      emit('onSelectOption', selectedOption)
+    }
+  }
+
+  /**
+   * Workaround to resolve the issue described in https://github.com/primefaces/primevue/issues/4431
+   * This should be remove from this field component as soon as the
+   * primevue team fixes the issue.
+   * When we select a disabled value, the label  is not showing
+   * @param {*} selectedValue The selected value in the Dropdown component.
+   * @returns {string | null} The selected value if it corresponds to a disabled option, or null otherwise.
+   */
+  const getLabelBySelectedValue = (selectedValue) => {
+    const result = props.options.find((option) => option.value === selectedValue)
+    return result?.label
+  }
+  const enableCustomLabel = computed(() => {
+    return props.enableWorkaroundLabelToDisabledOptions && !!inputValue.value
+  })
+  /**
+   * end of primevue workaround
+   */
+
+  const attrs = useAttrs()
+
+  const customTestId = computed(() => {
+    const id = attrs['data-testid'] || 'field-dropdown'
+
+    return {
+      label: `${id}__label`,
+      dropdown: `${id}__dropdown`,
+      value: `${id}__value`,
+      description: `${id}__description`,
+      error: `${id}__error-message`,
+      filterInput: `${id}__dropdown-filter-input`,
+      trigger: `${id}__dropdown-trigger`,
+      loadingIcon: `${id}__loading-icon`
+    }
+  })
+
+  const isDisabledIcon = computed(() => {
+    const iconDisabled = props.iconDisabled || 'pi pi-lock'
+    return props.disabled ? iconDisabled : ''
+  })
+
+  const passThrough = computed(() => {
+    return {
+      filterInput: {
+        class: 'w-full',
+        'data-testid': customTestId.value.filterInput
+      },
+      trigger: {
+        'data-testid': customTestId.value.trigger
+      },
+      loadingIcon: {
+        'data-testid': customTestId.value.loadingIcon
+      },
+      ...props.pt
+    }
+  })
+</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"
+    >
+      <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>

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

@@ -0,0 +1,203 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    optionLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    optionValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    optionDisabled: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: string;
+    };
+    options: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableWorkaroundLabelToDisabledOptions: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    filter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pt: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+    optionGroupLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    optionGroupChildren: {
+        type: StringConstructor;
+        default: string;
+    };
+    editable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    emptyMessage: {
+        type: StringConstructor;
+        default: string;
+    };
+    emptyFilterMessage: {
+        type: StringConstructor;
+        default: string;
+    };
+    aditionalError: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    onBlur: (...args: any[]) => void;
+    onChange: (...args: any[]) => void;
+    onSelectOption: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    optionLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    optionValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    optionDisabled: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: string;
+    };
+    options: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableWorkaroundLabelToDisabledOptions: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    filter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pt: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+    optionGroupLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    optionGroupChildren: {
+        type: StringConstructor;
+        default: string;
+    };
+    editable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    emptyMessage: {
+        type: StringConstructor;
+        default: string;
+    };
+    emptyFilterMessage: {
+        type: StringConstructor;
+        default: string;
+    };
+    aditionalError: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onOnBlur?: ((...args: any[]) => any) | undefined;
+    onOnChange?: ((...args: any[]) => any) | undefined;
+    onOnSelectOption?: ((...args: any[]) => any) | undefined;
+}>, {
+    value: string | number;
+    label: string;
+    placeholder: string;
+    description: string;
+    disabled: boolean;
+    filter: boolean;
+    optionLabel: string;
+    optionDisabled: string | Function;
+    optionGroupLabel: string;
+    optionGroupChildren: string;
+    loading: boolean;
+    pt: Record<string, any>;
+    optionValue: string;
+    options: unknown[];
+    enableWorkaroundLabelToDisabledOptions: boolean;
+    editable: boolean;
+    emptyMessage: string;
+    emptyFilterMessage: string;
+    aditionalError: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    footer?: ((props: {}) => any) | undefined;
+} & {
+    description?: ((props: {}) => any) | undefined;
+};
+//# sourceMappingURL=field-dropdown.vue.d.ts.map

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

@@ -0,0 +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"}

package/src/core/field-dropdown/package.json

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

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

@@ -0,0 +1,129 @@
+<script setup>
+  import { ref, toRef } from 'vue'
+  import { useField } from 'vee-validate'
+  import Dropdown from 'primevue/dropdown'
+
+  const emit = defineEmits(['onChange'])
+
+  const props = defineProps({
+    value: {
+      type: String,
+      default: ''
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    suggestions: {
+      type: Array,
+      default: () => []
+    },
+    onComplete: {
+      type: Function,
+      default: () => {}
+    },
+    completeOnFocus: {
+      type: Boolean,
+      default: false
+    }
+  })
+
+  const autoCompleteRef = ref(null)
+  const nameInput = toRef(props, 'name')
+
+  const {
+    value: inputValue,
+    errorMessage,
+    handleBlur,
+    handleChange
+  } = useField(nameInput, undefined, {
+    initialValue: props.value
+  })
+
+  const handleChangeEvent = ({ value }) => {
+    emit('onChange', value)
+  }
+
+  defineExpose({
+    autoCompleteRef
+  })
+</script>
+
+<template>
+  <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 }"
+    >
+      <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>
+
+  <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>
+</template>

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

@@ -0,0 +1,111 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    suggestions: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    onComplete: {
+        type: FunctionConstructor;
+        default: () => void;
+    };
+    completeOnFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    autoCompleteRef: import("vue").Ref<null, null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    onChange: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    suggestions: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    onComplete: {
+        type: FunctionConstructor;
+        default: () => void;
+    };
+    completeOnFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onOnChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    value: string;
+    label: string;
+    placeholder: string;
+    description: string;
+    disabled: boolean;
+    readonly: boolean;
+    icon: string;
+    suggestions: unknown[];
+    onComplete: Function;
+    completeOnFocus: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=field-dropdown-icon.vue.d.ts.map

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

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

package/src/core/field-dropdown-icon/package.json

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