@aziontech/webkit 0.0.1

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@aziontech/webkit",
+  "version": "0.0.1",
+  "description": "Reusable UI components and design system utilities for building Azion web interfaces.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/aziontech/webkit.git",
+    "directory": "packages/webkit"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rm -rf dist/",
+    "clean:dts": "rm -rf src/core/**/*.d.ts src/core/**/*.d.ts.map",
+    "build:dts": "vue-tsc --declaration --emitDeclarationOnly",
+    "build": "npm run clean:dts; npm run build:dts",
+    "publish": "npm publish",
+    "pack:dry": "npm pack --dry-run",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "vee-validate": "^4.15.1",
+    "vue-tsc": "^3.2.5"
+  },
+  "devDependencies": {
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^10.0.1",
+    "@semantic-release/exec": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^9.2.6",
+    "@semantic-release/npm": "^11.0.0",
+    "@semantic-release/release-notes-generator": "^12.1.0",
+    "conventional-changelog-conventionalcommits": "^7.0.0",
+    "semantic-release": "^23.0.0"
+  },
+  "files": [
+    "src",
+    "package.json"
+  ],
+  "exports": {
+    "./field-text": "./src/core/field-text",
+    "./field-number": "./src/core/field-number"
+  }
+}

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

@@ -0,0 +1,121 @@
+<script setup>
+  import { ref, toRef } from 'vue'
+  import { useField } from 'vee-validate'
+  import AutoComplete from 'primevue/autocomplete'
+
+  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
+  })
+
+  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>
+    <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>
+</template>

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

@@ -0,0 +1,107 @@
+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, {}, 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<{}>, {
+    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-auto-complete.vue.d.ts.map

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

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

package/src/core/field-auto-complete/package.json

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

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

@@ -0,0 +1,106 @@
+<template>
+  <SelectorBlock
+    v-bind="props"
+    :selected="checked"
+    :nameId="props.name"
+    @click="clickCard"
+  >
+    <template #selector>
+      <PrimeCheckbox
+        :disabled="props.disabled"
+        :inputId="props.name"
+        :name="props.name"
+        @click="stopPropagation"
+        :value="props.value"
+        v-model="inputValue"
+        :binary="props.binary"
+      />
+    </template>
+    <template #footer>
+      <slot name="footer" />
+    </template>
+  </SelectorBlock>
+</template>
+
+<script setup>
+  import PrimeCheckbox from 'primevue/checkbox'
+  import SelectorBlock from '../selector-block'
+
+  import { useField } from 'vee-validate'
+  import { toRefs } from 'vue'
+
+  defineOptions({ name: 'FieldCheckboxBlock' })
+
+  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, 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.value,
+    uncheckedValue: props.binary ? false : ''
+  })
+
+  const stopPropagation = (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
+  const clickCard = (event) => {
+    if (props.binary && !props.disabled) {
+      stopPropagation(event)
+      handleChange(!inputValue.value)
+      return
+    }
+  }
+</script>

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

@@ -0,0 +1,111 @@
+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: (StringConstructor | BooleanConstructor | ObjectConstructor)[];
+        default: boolean;
+    };
+    binary: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, 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: (StringConstructor | BooleanConstructor | ObjectConstructor)[];
+        default: boolean;
+    };
+    binary: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    value: string | boolean | Record<string, any>;
+    disabled: boolean;
+    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-checkbox-block.vue.d.ts.map

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

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

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

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