cja-phoenix 0.0.1 → 0.0.2

package/src/components/PhoneInput.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="form-group">
+    <div class="input-title" v-if="title">{{ title }}</div>
+
+    <div class="input-container" :class="{ error: errorMessage }">
+      <input
+        ref="inputEl"
+        :id="id"
+        v-maska="'#########'"
+        :placeholder="placeholder && placeholder"
+        type="tel"
+        :value="value"
+        :autocomplete="autocomplete"
+        @input="
+          emit('update:modelValue', (<HTMLInputElement>$event.target).value)
+        "
+      />
+    </div>
+
+    <div v-if="errorMessage && errorDisplay" class="input-error">
+      {{ errorMessage }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useField } from "vee-validate";
+import intlTelInput from "intl-tel-input";
+import { ref, onMounted, watch } from "vue";
+
+const inputEl = ref();
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: "",
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: String,
+    default: "",
+  },
+  phoneCountryCode: {
+    type: String,
+    default: "",
+  },
+  errorDisplay: {
+    type: Boolean,
+    default: true,
+  },
+  validation: Object,
+  autocomplete: String,
+  id: String,
+});
+
+const { value, errorMessage, meta, validate, setValue } = useField(
+  "input",
+  props.validation,
+  { initialValue: props.modelValue }
+);
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    setValue(newVal);
+  }
+);
+
+defineExpose({ errorMessage, meta, validate });
+
+const emit = defineEmits(["update:modelValue", "update:phoneCountryCode"]);
+
+onMounted(() => {
+  inputEl.value.addEventListener("countrychange", () =>
+    emit(
+      "update:phoneCountryCode",
+      window.intlTelInputGlobals
+        .getInstance(inputEl.value)
+        .getSelectedCountryData().dialCode
+    )
+  );
+
+  intlTelInput(inputEl.value, {
+    initialCountry: "pt",
+    preferredCountries: ["pt"],
+    separateDialCode: true,
+  });
+});
+</script>

package/src/components/TextInput.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="form-group">
+    <div class="input-title" v-if="title">{{ title }}</div>
+
+    <div
+      class="input-container"
+      :class="{
+        error: errorMessage,
+      }"
+    >
+      <input
+        v-maska="mask"
+        :id="id"
+        :inputmode="inputmode"
+        :placeholder="placeholder && placeholder"
+        :type="type"
+        :value="value"
+        @input="
+          emit('update:modelValue', (<HTMLInputElement>$event.target).value)
+        "
+        :autocomplete="autocomplete"
+      />
+    </div>
+
+    <div v-if="errorMessage && errorDisplay" class="input-error">
+      {{ errorMessage }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useField } from "vee-validate";
+import { HTMLAttributes, InputHTMLAttributes, watch } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    mask?: string;
+    placeholder?: InputHTMLAttributes["placeholder"];
+    icon?: string;
+    title?: string;
+    inputmode?: HTMLAttributes["inputmode"];
+    type?: InputHTMLAttributes["type"];
+    error?: string;
+    modelValue: InputHTMLAttributes["value"];
+    autocomplete?: InputHTMLAttributes["autocomplete"];
+    id?: InputHTMLAttributes["id"];
+    validation?: any;
+    errorDisplay?: boolean;
+  }>(),
+  {
+    type: "text",
+    errorDisplay: true,
+  }
+);
+
+const { value, errorMessage, meta, validate, setValue } = useField(
+  "input",
+  props.validation,
+  { initialValue: props.modelValue }
+);
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    setValue(newVal);
+  }
+);
+
+defineExpose({ errorMessage, meta, validate });
+
+const emit = defineEmits(["update:modelValue"]);
+</script>

package/src/components/index.ts

@@ -1,7 +1,17 @@
-import ComponentA from './ComponentA.vue'
-import ComponentB from './ComponentB.vue'
+import ComponentA from "./ComponentA.vue";
+import ComponentB from "./ComponentB.vue";
+import Modal from "./Modal.vue";
+import CjaButton from "./CjaButton.vue";
+import TextInput from "./TextInput.vue";
+import PhoneInput from "./PhoneInput.vue";
+import CheckboxInput from "./CheckboxInput.vue";
 
 export {
   ComponentA,
-  ComponentB
-}
+  ComponentB,
+  Modal,
+  CjaButton,
+  TextInput,
+  PhoneInput,
+  CheckboxInput,
+};

package/src/env.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="vite/client" />
+/// <reference types="@histoire/plugin-vue/components" />
 
-declare module '*.vue' {
-  import { DefineComponent } from 'vue'
+declare module "*.vue" {
+  import { DefineComponent } from "vue";
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>
-  export default component
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 }

package/src/index.ts

@@ -1,11 +1,14 @@
 import { App } from "vue";
 import * as components from "./components";
+import Maska from "maska";
 
 function install(app: App) {
   for (const key in components) {
     // @ts-expect-error
     app.component(key, components[key]);
   }
+
+  app.use(Maska);
 }
 
 import "./assets/main.scss";

package/src/stories/Modal.story.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import Modal from "../components/Modal.vue";
+
+const modal = ref();
+
+const state = reactive({
+  title: "",
+});
+</script>
+
+<template>
+  <Story title="Modal">
+    <modal ref="modal" :title="state.title"></modal>
+
+    <button @click="modal.openModal()" type="button">Open modal</button>
+  </Story>
+</template>