@aziontech/webkit 0.0.1

package/src/core/field-phone-number-country/field-phone-number-country.vue

@@ -0,0 +1,60 @@
+<script setup>
+  import { computed, onMounted, ref, watch } from 'vue'
+  import { useField } from 'vee-validate'
+  import FieldPhoneNumber from '../field-phone-number'
+
+  const props = defineProps({
+    listCountriesPhoneService: {
+      type: Function,
+      required: true
+    }
+  })
+
+  const emit = defineEmits(['countries-loaded'])
+
+  const options = ref([])
+
+  const loading = computed(() => !options.value.length)
+
+  const { value: countryCallCode, resetField } = useField('countryCallCode')
+
+  const normalizeCountryCode = (countries) => {
+    const currentValue = countryCallCode.value
+    if (!currentValue) return
+
+    const hasExactMatch = countries.some((country) => country.value === currentValue)
+    if (hasExactMatch) return
+
+    const partialMatch = countries.find((country) => country.value.endsWith(` - ${currentValue}`))
+    if (partialMatch) {
+      resetField({ value: partialMatch.value })
+    }
+  }
+
+  watch(countryCallCode, (newValue) => {
+    if (!options.value.length || !newValue) return
+
+    const hasMatch = options.value.some((country) => country.value === newValue)
+    if (!hasMatch) {
+      const partialMatch = options.value.find((country) => country.value.endsWith(` - ${newValue}`))
+      if (partialMatch) {
+        resetField({ value: partialMatch.value })
+      }
+    }
+  })
+
+  onMounted(async () => {
+    const countries = await props.listCountriesPhoneService()
+    options.value = countries
+    normalizeCountryCode(countries)
+    emit('countries-loaded', countries)
+  })
+</script>
+
+<template>
+  <FieldPhoneNumber
+    v-bind="$attrs"
+    :options="options"
+    :loading="loading"
+  />
+</template>

package/src/core/field-phone-number-country/field-phone-number-country.vue.d.ts

@@ -0,0 +1,18 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    listCountriesPhoneService: {
+        type: FunctionConstructor;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "countries-loaded": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    listCountriesPhoneService: {
+        type: FunctionConstructor;
+        required: true;
+    };
+}>> & Readonly<{
+    "onCountries-loaded"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=field-phone-number-country.vue.d.ts.map

package/src/core/field-phone-number-country/field-phone-number-country.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-phone-number-country.vue.d.ts","sourceRoot":"","sources":["field-phone-number-country.vue"],"names":[],"mappings":"wBAkKqB,OAAO,YAAY;;AATxC;;;;;;;;;;;;;;kFAQG"}

package/src/core/field-phone-number-country/package.json

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

package/src/core/field-pick-list/field-pick-list.vue

@@ -0,0 +1,285 @@
+<template>
+  <div>
+    <PickList
+      :modelValue="[filteredSource, filteredTarget]"
+      :disabled="disabled"
+      @update:modelValue="onPickListUpdate"
+      :pt="{
+        sourceList: { class: ['h-80'] },
+        targetList: { class: ['h-80'] },
+        sourceWrapper: { class: 'max-w-[340px]' },
+        targetWrapper: { class: 'max-w-[340px]' }
+      }"
+      :dataKey="dataKey"
+      breakpoint="1400px"
+      :showSourceControls="false"
+      :showTargetControls="false"
+      data-testid="picklist__field"
+      :move-all-to-source-props="{
+        'data-testid': 'picklist__move-all-to-source-btn'
+      }"
+      :move-all-to-target-props="{
+        'data-testid': 'picklist__move-all-to-target-btn'
+      }"
+      :move-to-target-props="{
+        'data-testid': 'picklist__move-to-target-btn'
+      }"
+      :move-to-source-props="{
+        'data-testid': 'picklist__move-to-source-btn'
+      }"
+    >
+      <template #sourceheader>
+        <div class="flex flex-col w-full">
+          <span class="mb-4">Available {{ title }}</span>
+
+          <Divider class="ml-[-16px] w-[calc(100%+32px)]" />
+
+          <span class="p-input-icon-right w-full mt-4">
+            <i class="pi pi-search text-[var(--text-color-secondary)]" />
+            <InputText
+              class="h-8 w-full"
+              v-model.trim="searchSource"
+              data-testid="search-input-source"
+              placeholder="Search"
+            />
+          </span>
+        </div>
+      </template>
+      <template #targetheader>
+        <div class="flex flex-col w-full">
+          <span class="mb-4">Chosen {{ title }}</span>
+
+          <Divider class="ml-[-16px] w-[calc(100%+32px)]" />
+
+          <span class="p-input-icon-right w-full mt-4">
+            <i class="pi pi-search text-[var(--text-color-secondary)]" />
+            <InputText
+              class="h-8 w-full"
+              v-model.trim="searchTarget"
+              data-testid="search-input-target"
+              placeholder="Search"
+            />
+          </span>
+        </div>
+      </template>
+
+      <template #item="slotProps">
+        <div class="flex flex-wrap pl-3 align-items-center gap-3 py-2">
+          <div
+            class="flex-1 flex flex-column gap-2"
+            v-if="!slotProps.item?.loading"
+          >
+            <span data-testid="picklist_name-item">{{ slotProps.item.name }} </span>
+          </div>
+          <div
+            class="flex-1 flex flex-column gap-2"
+            v-else
+          >
+            <ProgressSpinner style="width: 25px; height: 25px" />
+          </div>
+        </div>
+      </template>
+    </PickList>
+  </div>
+</template>
+
+<script setup>
+  import { ref, onMounted, onBeforeUnmount, nextTick, computed, watch } from 'vue'
+  import { watchDebounced } from '@vueuse/core'
+  import PickList from 'primevue/picklist'
+  import ProgressSpinner from 'primevue/progressspinner'
+  import InputText from 'primevue/inputtext'
+  import Divider from 'primevue/divider'
+  import { useToast } from 'primevue/usetoast'
+
+  const props = defineProps({
+    disabled: {
+      type: Boolean
+    },
+    dataPick: {
+      type: Array,
+      default: () => [[], []]
+    },
+    dataKey: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String
+    },
+    service: {
+      type: Function
+    }
+  })
+  let scrollElement = null
+  const PAGE_SIZE = 100
+  const page = ref(1)
+  const PAGE_INCREMENT = 1
+  const notRequest = ref(false)
+  const NUMBER_OF_CHARACTERS_MIN_FOR_SEARCH = 3
+  const NUMBER_OF_CHARACTERS_TO_RESET_SEARCH = 0
+  const SEARCH_DEBOUNCE = 500
+  const SEARCH_MAX_WAIT = 1000
+  const searchSource = ref('')
+  const searchTarget = ref('')
+  const originalSource = ref([])
+  const originalTarget = ref([])
+  const data = ref(props.dataPick)
+  const loading = ref(false)
+
+  const toast = useToast()
+
+  const addUniqueItems = (targetArray, itemsToAdd) => {
+    const existingIds = new Set(targetArray.map((item) => item.id))
+    itemsToAdd.forEach((item) => {
+      if (!existingIds.has(item.id)) {
+        data.value[0].push(item)
+      }
+    })
+  }
+  const handleLazyLoad = async () => {
+    if (!notRequest.value) {
+      page.value += PAGE_INCREMENT
+      await fetchData(page.value)
+      if (!searchSource.value) {
+        originalSource.value = [...data.value[0]]
+      }
+    }
+  }
+  const handleScroll = (event) => {
+    const element = event.target
+    const isBottom = element.scrollTop + element.clientHeight >= element.scrollHeight
+    if (isBottom && !loading.value) {
+      handleLazyLoad()
+    }
+  }
+  const filteredSource = computed(() => {
+    return data.value[0]
+  })
+  const filteredTarget = computed(() => {
+    return data.value[1]?.filter((item) =>
+      item.name.toLowerCase().includes(searchTarget.value.toLowerCase())
+    )
+  })
+  const handleSelectItemWithSearch = () => {
+    const idsParaRemover = new Set(data.value[1].map((item) => item.id))
+    data.value[0] = originalSource.value.filter((item) => !idsParaRemover.has(item.id))
+    originalSource.value = data.value[0]
+  }
+  const setOriginalTarget = (target) => {
+    originalTarget.value = target
+  }
+  const handleSelectItemWithSearchTarget = (targets) => {
+    const map = new Map()
+    originalTarget.value.forEach((item) => {
+      map.set(item.id, item)
+    })
+    targets.forEach((item) => {
+      map.set(item.id, item)
+    })
+    data.value[1] = Array.from(map.values())
+  }
+  function onPickListUpdate([newSource, newTarget]) {
+    data.value[0] = newSource
+    data.value[1] = newTarget
+    if (searchSource.value) {
+      handleSelectItemWithSearch()
+    } else {
+      originalSource.value = [...data.value[0]]
+    }
+    if (searchTarget.value) {
+      handleSelectItemWithSearchTarget(newTarget)
+    } else {
+      setOriginalTarget(newTarget)
+    }
+  }
+  const searchFilter = () => {
+    const pageToSearch = 1
+    data.value[0] = []
+    if (!searchSource.value) {
+      data.value[0] = [...originalSource.value]
+      return
+    }
+    fetchData(pageToSearch)
+  }
+  const loadingPickList = () => {
+    data.value[0].push({ id: 0, loading: true })
+  }
+  const removeLoadingPickList = () => {
+    data.value[0].pop()
+  }
+  const fetchData = async (currentPage = 1) => {
+    loading.value = true
+    loadingPickList()
+    try {
+      const response = await props.service({
+        pageSize: PAGE_SIZE,
+        fields: 'id, name',
+        page: currentPage,
+        search: searchSource.value,
+        ordering: 'name'
+      })
+      // remove load item
+      removeLoadingPickList()
+      const dataPicks = [...data.value[0], ...data.value[1]]
+      addUniqueItems(dataPicks, response.results)
+    } catch (error) {
+      notRequest.value = true
+      removeLoadingPickList()
+
+      toast.add({
+        severity: 'info',
+        summary: 'Info',
+        detail: 'No more items to load',
+        life: 5000
+      })
+    } finally {
+      loading.value = false
+    }
+  }
+  watchDebounced(
+    searchSource,
+    () => {
+      if (
+        searchSource.value.length >= NUMBER_OF_CHARACTERS_MIN_FOR_SEARCH ||
+        searchSource.value.length === NUMBER_OF_CHARACTERS_TO_RESET_SEARCH
+      ) {
+        searchFilter()
+      }
+    },
+    { debounce: SEARCH_DEBOUNCE, maxWait: SEARCH_MAX_WAIT }
+  )
+
+  watch(
+    () => props.dataPick,
+    (newDataPick) => {
+      if (newDataPick && Array.isArray(newDataPick)) {
+        data.value = newDataPick
+        originalSource.value = [...(newDataPick[0] || [])]
+        originalTarget.value = [...(newDataPick[1] || [])]
+      }
+    },
+    { deep: true }
+  )
+  onMounted(async () => {
+    await nextTick()
+    scrollElement = document.querySelector('.p-picklist-source-list')
+    if (scrollElement) {
+      scrollElement.addEventListener('scroll', handleScroll)
+    }
+    originalSource.value = [...props.dataPick[0]]
+    originalTarget.value = [...props.dataPick[1]]
+  })
+  onBeforeUnmount(() => {
+    if (scrollElement) {
+      scrollElement.removeEventListener('scroll', handleScroll)
+    }
+  })
+</script>
+
+<style>
+  .p-picklist-source-wrapper .p-picklist-list li,
+  .p-picklist-target-wrapper .p-picklist-list li {
+    padding: 0 !important;
+  }
+</style>

package/src/core/field-pick-list/field-pick-list.vue.d.ts

@@ -0,0 +1,43 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+    };
+    dataPick: {
+        type: ArrayConstructor;
+        default: () => never[][];
+    };
+    dataKey: {
+        type: StringConstructor;
+        required: true;
+    };
+    title: {
+        type: StringConstructor;
+    };
+    service: {
+        type: FunctionConstructor;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+    };
+    dataPick: {
+        type: ArrayConstructor;
+        default: () => never[][];
+    };
+    dataKey: {
+        type: StringConstructor;
+        required: true;
+    };
+    title: {
+        type: StringConstructor;
+    };
+    service: {
+        type: FunctionConstructor;
+    };
+}>> & Readonly<{}>, {
+    disabled: boolean;
+    dataPick: unknown[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=field-pick-list.vue.d.ts.map

package/src/core/field-pick-list/field-pick-list.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-pick-list.vue.d.ts","sourceRoot":"","sources":["field-pick-list.vue"],"names":[],"mappings":"wBA+vBqB,OAAO,YAAY;;AArBxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAoBG"}

package/src/core/field-pick-list/package.json

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

package/src/core/field-radio-block/field-radio-block.vue

@@ -0,0 +1,108 @@
+<template>
+  <SelectorBlock
+    v-bind="props"
+    :selected="checked"
+    :nameId="props.name"
+    @click="clickCard"
+  >
+    <template #selector>
+      <PrimeRadio
+        :disabled="disabled"
+        :inputId="props.name"
+        :name="props.name"
+        @click="stopPropagation"
+        :value="props.inputValue"
+        v-model="inputValue"
+        :binary="props.binary"
+        @change="emit('onRadioChange')"
+      />
+    </template>
+    <template #footer>
+      <slot name="footer" />
+    </template>
+  </SelectorBlock>
+</template>
+
+<script setup>
+  import PrimeRadio from 'primevue/radiobutton'
+  import SelectorBlock from '../selector-block'
+
+  import { useField } from 'vee-validate'
+  import { toRefs } from 'vue'
+
+  defineOptions({ name: 'FieldRadioBlock' })
+  const emit = defineEmits(['onRadioChange'])
+
+  const props = defineProps({
+    title: {
+      type: String
+    },
+    isLabel: {
+      type: Boolean,
+      default: false
+    },
+    subtitle: {
+      type: String
+    },
+    description: {
+      type: String
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    auto: {
+      type: Boolean,
+      default: false
+    },
+    isCard: {
+      type: Boolean,
+      default: true
+    },
+    hideSelector: {
+      type: Boolean,
+      default: false
+    },
+    nameField: {
+      type: String,
+      required: true
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    inputValue: {
+      type: [Boolean, String, Object],
+      default: false
+    },
+    binary: {
+      type: Boolean,
+      default: false
+    }
+  })
+
+  const { nameField } = toRefs(props)
+
+  const {
+    value: inputValue,
+    checked,
+    handleChange
+  } = useField(nameField, undefined, {
+    type: 'checkbox',
+    checkedValue: props.binary ? true : props.inputValue,
+    uncheckedValue: props.binary ? false : ''
+  })
+
+  const stopPropagation = (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
+  const clickCard = (event) => {
+    if (props.binary) {
+      stopPropagation(event)
+      handleChange(!inputValue.value)
+      return
+    }
+  }
+</script>

package/src/core/field-radio-block/field-radio-block.vue.d.ts

@@ -0,0 +1,115 @@
+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<{
+    title: {
+        type: StringConstructor;
+    };
+    isLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    subtitle: {
+        type: StringConstructor;
+    };
+    description: {
+        type: StringConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    auto: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isCard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideSelector: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    nameField: {
+        type: StringConstructor;
+        required: true;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    inputValue: {
+        type: (StringConstructor | BooleanConstructor | ObjectConstructor)[];
+        default: boolean;
+    };
+    binary: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    onRadioChange: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+    };
+    isLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    subtitle: {
+        type: StringConstructor;
+    };
+    description: {
+        type: StringConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    auto: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isCard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideSelector: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    nameField: {
+        type: StringConstructor;
+        required: true;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    inputValue: {
+        type: (StringConstructor | BooleanConstructor | ObjectConstructor)[];
+        default: boolean;
+    };
+    binary: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onOnRadioChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    inputValue: string | boolean | Record<string, any>;
+    isLabel: boolean;
+    auto: boolean;
+    isCard: boolean;
+    hideSelector: boolean;
+    binary: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    footer?: ((props: {}) => any) | undefined;
+};
+//# sourceMappingURL=field-radio-block.vue.d.ts.map

package/src/core/field-radio-block/field-radio-block.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-radio-block.vue.d.ts","sourceRoot":"","sources":["field-radio-block.vue"],"names":[],"mappings":"wBA+VqB,OAAO,YAAY;;AADxC,4BAA2B,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;qBAEtD,CAAC,EAAE,CAAC;;;AApDzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAiDG"}

package/src/core/field-radio-block/package.json

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