@aziontech/webkit 0.0.1

package/src/core/field-group-switch/field-group-switch.vue

@@ -0,0 +1,121 @@
+<script setup>
+  import FieldSwitchBlock from '../field-switch-block'
+  import { computed, ref, useAttrs } from 'vue'
+  import PrimeDivider from 'primevue/divider'
+
+  defineOptions({ name: 'FieldGroupSwitch' })
+
+  const props = defineProps({
+    hideSelector: {
+      type: Boolean,
+      default: false
+    },
+    auto: {
+      type: Boolean,
+      default: false
+    },
+    isCard: {
+      type: Boolean,
+      default: true
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    helpText: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    options: {
+      type: Array,
+      required: true
+    },
+    inputClass: {
+      type: String,
+      default: ''
+    }
+  })
+
+  const pickListSize = ref(props.options.length - 1)
+
+  const classStateRoot = computed(() => ({
+    'p-disabled': props.disabled
+  }))
+
+  const classListSelector = computed(() => ({
+    'flex-wrap': props.auto,
+    'flex-col': !props.auto,
+    'gap-3': !props.divider
+  }))
+
+  const showDivider = (position) => {
+    return position < pickListSize.value && !props.isCard
+  }
+
+  const attrs = useAttrs()
+
+  const customTestId = (type, name = 'default') => {
+    const id = attrs['data-testid'] || 'field-group-switch'
+
+    const options = {
+      label: `${id}__label`,
+      switch: `${id}__switch-${name}`,
+      description: `${id}__description`
+    }
+
+    return options[type] || id
+  }
+</script>
+
+<template>
+  <div :class="['flex flex-col gap-2', classStateRoot]">
+    <label
+      class="text-color text-base font-medium leading-5"
+      :data-testid="customTestId('label')"
+    >
+      {{ props.label }}
+    </label>
+    <div
+      class="flex"
+      :class="classListSelector"
+    >
+      <template
+        v-for="(item, index) in props.options"
+        :key="index"
+      >
+        <FieldSwitchBlock
+          :nameField="`${item.nameField}`"
+          :name="`${item.nameField}-switch-${index}`"
+          :auto="props.auto"
+          :hideSelector="props.hideSelector"
+          :isCard="props.isCard"
+          v-bind="item"
+          :selectorClass="props.inputClass"
+          :data-testid="customTestId('switch', item.nameField)"
+        >
+          <template #footer>
+            <slot
+              name="footer"
+              :item="item"
+            />
+          </template>
+        </FieldSwitchBlock>
+        <PrimeDivider
+          v-if="showDivider(index)"
+          class="my-2"
+        />
+      </template>
+    </div>
+    <small
+      class="text-xs text-color-secondary font-normal leading-5"
+      v-if="props.helpText"
+      :data-testid="customTestId('description')"
+    >
+      {{ props.helpText }}
+    </small>
+  </div>
+</template>

package/src/core/field-group-switch/field-group-switch.vue.d.ts

@@ -0,0 +1,87 @@
+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<{
+    hideSelector: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    auto: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isCard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    helpText: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    options: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    inputClass: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    hideSelector: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    auto: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isCard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    helpText: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    options: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    inputClass: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    label: string;
+    disabled: boolean;
+    inputClass: string;
+    auto: boolean;
+    isCard: boolean;
+    hideSelector: boolean;
+    helpText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    footer?: ((props: {
+        item: unknown;
+    }) => any) | undefined;
+};
+//# sourceMappingURL=field-group-switch.vue.d.ts.map

package/src/core/field-group-switch/field-group-switch.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-group-switch.vue.d.ts","sourceRoot":"","sources":["field-group-switch.vue"],"names":[],"mappings":"wBA0VqB,OAAO,YAAY;;AADxC,4BAA2B,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;qBAEtD,CAAC,EAAE,CAAC;;;AAtCzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAmCG"}

package/src/core/field-group-switch/package.json

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

package/src/core/field-input-group/field-input-group.vue

@@ -0,0 +1,111 @@
+<script setup>
+  import { toRef, useSlots, computed, useAttrs } from 'vue'
+  import { useField } from 'vee-validate'
+  import InputText from 'primevue/inputtext'
+  import LabelBlock from '../label'
+
+  const props = defineProps({
+    value: {
+      type: String,
+      default: ''
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    inputClass: {
+      type: String,
+      default: ''
+    }
+  })
+
+  const name = toRef(props, 'name')
+  const attrs = useAttrs()
+
+  const customTestId = computed(() => {
+    const id = attrs['data-testid'] || 'field-input-group'
+
+    return {
+      label: `${id}__label`,
+      input: `${id}__input`,
+      description: `${id}__description`,
+      error: `${id}__error-message`
+    }
+  })
+
+  const slots = useSlots()
+  const hasIconSlot = !!slots.icon
+
+  const {
+    value: inputValue,
+    errorMessage,
+    handleBlur,
+    handleChange
+  } = useField(name, undefined, {
+    initialValue: props.value
+  })
+</script>
+
+<template>
+  <LabelBlock
+    v-if="props.label"
+    :for="props.name"
+    :data-testid="customTestId.label"
+    :label="props.label"
+    :isRequired="attrs.required"
+  />
+  <div class="p-inputgroup">
+    <div
+      class="p-inputgroup-addon"
+      v-if="hasIconSlot"
+    >
+      <slot name="icon"></slot>
+    </div>
+
+    <InputText
+      :id="name"
+      v-model="inputValue"
+      :name="name"
+      :readonly="readonly"
+      :disabled="disabled"
+      :class="[{ 'p-invalid': errorMessage }, $attrs.class, inputClass]"
+      type="text"
+      :placeholder="props.placeholder"
+      @input="handleChange"
+      @blur="handleBlur"
+    />
+    <slot name="button"></slot>
+  </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-input-group/field-input-group.vue.d.ts

@@ -0,0 +1,87 @@
+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;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    inputClass: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    inputClass: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    value: string;
+    label: string;
+    placeholder: string;
+    description: string;
+    disabled: boolean;
+    readonly: boolean;
+    inputClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    icon?: ((props: {}) => any) | undefined;
+} & {
+    button?: ((props: {}) => any) | undefined;
+};
+//# sourceMappingURL=field-input-group.vue.d.ts.map

package/src/core/field-input-group/field-input-group.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-input-group.vue.d.ts","sourceRoot":"","sources":["field-input-group.vue"],"names":[],"mappings":"wBAmVqB,OAAO,YAAY;;AADxC,4BAA2B,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;qBAEtD,CAAC,EAAE,CAAC;;;AAtCzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAmCG"}

package/src/core/field-input-group/package.json

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

package/src/core/field-multi-select/field-multi-select.vue

@@ -0,0 +1,167 @@
+<script setup>
+  import Checkbox from 'primevue/checkbox'
+  import { useField } from 'vee-validate'
+  import { computed, toRef, useSlots, useAttrs } from 'vue'
+  import LabelBlock from '../label'
+
+  const props = defineProps({
+    value: {
+      type: Array,
+      default: () => []
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    optionLabel: {
+      type: String,
+      default: 'label'
+    },
+    optionValue: {
+      type: String,
+      default: 'value'
+    },
+    optionDisabled: {
+      type: [String, Function],
+      default: ''
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    filter: {
+      type: Boolean,
+      default: false
+    },
+    pt: {
+      type: Object,
+      default: () => {}
+    }
+  })
+
+  const emit = defineEmits(['onBlur', 'onChange'])
+
+  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 = () => {
+    emit('onChange', inputValue.value)
+  }
+
+  const attrs = useAttrs()
+
+  const customTestId = computed(() => {
+    const id = attrs['data-testid'] || 'field-multiselect'
+
+    return {
+      label: `${id}__label`,
+      multiselect: `${id}__multiselect`,
+      description: `${id}__description`,
+      error: `${id}__error-message`,
+      filterInput: `${id}__multiselect-filter-input`,
+      trigger: `${id}__multiselect-trigger`,
+      loadingIcon: `${id}__loading-icon`
+    }
+  })
+</script>
+
+<template>
+  <LabelBlock
+    :for="props.name"
+    :label="props.label"
+    :isRequired="$attrs.required"
+    :data-testid="customTestId.label"
+    v-if="props.label"
+  />
+
+  <div
+    class="flex flex-col gap-3"
+    :data-testid="customTestId.multiselect"
+  >
+    <div
+      v-for="option in props.options"
+      :key="option[props.optionValue]"
+      class="flex items-center gap-3"
+    >
+      <Checkbox
+        :id="`${props.name}_${option[props.optionValue]}`"
+        :name="props.name"
+        :value="option[props.optionValue]"
+        v-model="inputValue"
+        :disabled="
+          props.disabled ||
+          (typeof props.optionDisabled === 'function'
+            ? props.optionDisabled(option)
+            : option[props.optionDisabled])
+        "
+        @change="emitChange"
+        @blur="emitBlur"
+      />
+      <label
+        :for="`${props.name}_${option[props.optionValue]}`"
+        class="cursor-pointer"
+        :class="{
+          'opacity-50':
+            props.disabled ||
+            (typeof props.optionDisabled === 'function'
+              ? props.optionDisabled(option)
+              : option[props.optionDisabled])
+        }"
+      >
+        <div class="font-medium">{{ option[props.optionLabel] }}</div>
+        <div
+          v-if="option.description"
+          class="text-sm text-color-secondary"
+        >
+          {{ option.description }}
+        </div>
+      </label>
+    </div>
+  </div>
+
+  <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>