@aziontech/webkit 0.0.1

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

@@ -0,0 +1,41 @@
+<script setup>
+  import { useField } from 'vee-validate'
+  import { toRef } from 'vue'
+  import InputSwitch from 'primevue/inputswitch'
+
+  const props = defineProps({
+    name: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    }
+  })
+
+  const inputName = toRef(props.name)
+  const { value: inputValue } = useField(inputName)
+</script>
+<template>
+  <InputSwitch
+    v-model="inputValue"
+    :inputId="inputName"
+  />
+  <label
+    :for="inputName"
+    class="flex flex-col text-base items-start gap-1"
+  >
+    <span class="text-color font-normal leading-5">{{ props.label }} </span>
+    <span
+      v-if="props.description"
+      class="text-sm text-color-secondary font-normal leading-5"
+    >
+      {{ props.description }}
+    </span>
+  </label>
+</template>

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

@@ -0,0 +1,33 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    label: string;
+    description: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=field-switch.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field-switch.vue.d.ts","sourceRoot":"","sources":["field-switch.vue"],"names":[],"mappings":"wBA4IqB,OAAO,YAAY;;AAhBxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAeG"}

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

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

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

@@ -0,0 +1,123 @@
+<template>
+  <SelectorBlock
+    v-bind="props"
+    :selected="checked"
+    :nameId="props.name"
+    @change="changeState"
+    :inputClass="props.selectorClass"
+    :rootClass="rootClass"
+    :data-testid="customTestId.selector"
+  >
+    <template #selector>
+      <InputSwitch
+        :disabled="disabled"
+        :inputId="props.name"
+        :name="props.name"
+        @change="stopPropagation"
+        v-model="inputValue"
+        :readonly="readonly"
+        :data-testid="customTestId.switch"
+      />
+    </template>
+    <template #footer>
+      <slot name="footer" />
+    </template>
+  </SelectorBlock>
+</template>
+
+<script setup>
+  import InputSwitch from 'primevue/inputswitch'
+  import SelectorBlock from '../selector-block'
+
+  import { useField } from 'vee-validate'
+  import { toRefs, useAttrs, computed } from 'vue'
+
+  defineOptions({ name: 'FieldSwitchBlock' })
+
+  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
+    },
+    value: {
+      type: Boolean
+    },
+    readonly: {
+      type: Boolean
+    },
+    selectorClass: {
+      type: String
+    },
+    rootClass: {
+      type: String
+    }
+  })
+
+  const { nameField } = toRefs(props)
+  const emit = defineEmits(['onSwitchChange'])
+
+  const attrs = useAttrs()
+
+  const customTestId = computed(() => {
+    const id = attrs['data-testid'] || 'field-switch'
+
+    return {
+      selector: `${id}__selector`,
+      switch: `${id}__switch`
+    }
+  })
+
+  const {
+    value: inputValue,
+    checked,
+    handleChange
+  } = useField(nameField, undefined, {
+    type: 'checkbox',
+    checkedValue: true,
+    uncheckedValue: false
+  })
+
+  const stopPropagation = (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    emit('onSwitchChange', inputValue.value)
+  }
+
+  const changeState = (event) => {
+    stopPropagation(event)
+    handleChange(!inputValue.value)
+  }
+</script>

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

@@ -0,0 +1,123 @@
+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;
+    };
+    value: {
+        type: BooleanConstructor;
+    };
+    readonly: {
+        type: BooleanConstructor;
+    };
+    selectorClass: {
+        type: StringConstructor;
+    };
+    rootClass: {
+        type: StringConstructor;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    onSwitchChange: (...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;
+    };
+    value: {
+        type: BooleanConstructor;
+    };
+    readonly: {
+        type: BooleanConstructor;
+    };
+    selectorClass: {
+        type: StringConstructor;
+    };
+    rootClass: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{
+    onOnSwitchChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    value: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    isLabel: boolean;
+    auto: boolean;
+    isCard: boolean;
+    hideSelector: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    footer?: ((props: {}) => any) | undefined;
+};
+//# sourceMappingURL=field-switch-block.vue.d.ts.map

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

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

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

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

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

@@ -0,0 +1,128 @@
+<script setup>
+  import { computed, ref, toRef, useAttrs, useSlots } from 'vue'
+  import { useField } from 'vee-validate'
+  import InputText from 'primevue/inputtext'
+  import LabelBlock from '../label'
+
+  const emit = defineEmits(['blur', 'input'])
+  const props = defineProps({
+    value: {
+      type: String,
+      default: ''
+    },
+    class: {
+      type: String
+    },
+    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
+    },
+    sensitive: {
+      type: Boolean,
+      default: false
+    },
+    aditionalError: {
+      type: String,
+      default: ''
+    }
+  })
+  const inputRef = ref(null)
+  const name = toRef(props, 'name')
+  const slots = useSlots()
+  const attrs = useAttrs()
+  const hasDescriptionSlot = !!slots.description
+
+  const customTestId = computed(() => {
+    const id = attrs['data-testid'] || 'field-text'
+
+    return {
+      label: `${id}__label`,
+      input: `${id}__input`,
+      description: `${id}__description`,
+      error: `${id}__error-message`
+    }
+  })
+
+  const {
+    value: inputValue,
+    errorMessage: veeValidateErrorMessage,
+    handleBlur,
+    handleChange
+  } = useField(name, undefined, {
+    initialValue: props.value
+  })
+
+  const onBlur = (event) => {
+    handleBlur(event)
+    emit('blur', event)
+  }
+
+  const onChange = (event) => {
+    handleChange(event)
+    emit('input', event.target.value)
+  }
+
+  defineExpose({ inputRef })
+</script>
+
+<template>
+  <LabelBlock
+    v-if="props.label"
+    :for="props.name"
+    :data-testid="customTestId.label"
+    :label="props.label"
+    :isRequired="attrs.required"
+  />
+  <InputText
+    v-bind="sensitive ? { 'data-sentry-mask': '' } : {}"
+    v-model="inputValue"
+    ref="inputRef"
+    type="text"
+    :data-testid="customTestId.input"
+    :id="name"
+    :name="name"
+    :readonly="readonly"
+    :disabled="disabled"
+    :placeholder="props.placeholder"
+    :class="[{ 'p-invalid': aditionalError || veeValidateErrorMessage }, props.class]"
+    @input="onChange"
+    @keypress.enter.prevent
+    @blur="onBlur"
+  />
+  <small
+    v-if="aditionalError || veeValidateErrorMessage"
+    class="p-error text-xs font-normal leading-tight"
+    :data-testid="customTestId.error"
+  >
+    {{ aditionalError || veeValidateErrorMessage }}
+  </small>
+  <small
+    v-if="props.description || hasDescriptionSlot"
+    class="text-xs text-color-secondary font-normal leading-5"
+    :data-testid="customTestId.description"
+  >
+    <slot name="description">
+      {{ props.description }}
+    </slot>
+  </small>
+</template>

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

@@ -0,0 +1,108 @@
+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;
+    };
+    class: {
+        type: StringConstructor;
+    };
+    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;
+    };
+    sensitive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    aditionalError: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {
+    inputRef: import("vue").Ref<null, null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    input: (...args: any[]) => void;
+    blur: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    class: {
+        type: StringConstructor;
+    };
+    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;
+    };
+    sensitive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    aditionalError: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onInput?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+}>, {
+    value: string;
+    label: string;
+    placeholder: string;
+    description: string;
+    disabled: boolean;
+    readonly: boolean;
+    aditionalError: string;
+    sensitive: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    description?: ((props: {}) => any) | undefined;
+};
+//# sourceMappingURL=field-text.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field-text.vue.d.ts","sourceRoot":"","sources":["field-text.vue"],"names":[],"mappings":"wBAsYqB,OAAO,YAAY;;AADxC,4BAA2B,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;qBAEtD,CAAC,EAAE,CAAC;;;AA/CzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EA4CG"}

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

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