@icvdeveloper/common-module 0.0.93 → 0.0.94

package/dist/runtime/components/forms/AlertBox.vue

@@ -1,21 +1,21 @@
-<script lang="ts" setup>
-import { toRefs } from "vue";
-
-type Props = {
-  errors: Array<any>;
-};
-
-const props = defineProps<Props>();
-
-const { errors } = toRefs(props);
-</script>
-
-<template>
-  <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red">
-    <span class="inline-block align-middle">
-      <ul>
-        <li v-for="error in errors" :key="error[0]">{{ error[0] }}</li>
-      </ul>
-    </span>
-  </div>
-</template>
+<script lang="ts" setup>
+import { toRefs } from "vue";
+
+type Props = {
+  errors: Array<any>;
+};
+
+const props = defineProps<Props>();
+
+const { errors } = toRefs(props);
+</script>
+
+<template>
+  <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red">
+    <span class="inline-block align-middle">
+      <ul>
+        <li v-for="error in errors" :key="error[0]">{{ error[0] }}</li>
+      </ul>
+    </span>
+  </div>
+</template>

package/dist/runtime/components/forms/ErrorField.vue

@@ -1,17 +1,17 @@
-<script lang="ts" setup>
-type Props = {
-  errors: Array<string>;
-};
-
-const props = defineProps<Props>();
-
-const { errors } = toRefs(props);
-</script>
-
-<template>
-  <div>
-    <div v-if="errors" class="my-1 text-red-500">
-      <div v-for="error in errors">{{ error }}</div>
-    </div>
-  </div>
-</template>
+<script lang="ts" setup>
+type Props = {
+  errors: Array<string>;
+};
+
+const props = defineProps<Props>();
+
+const { errors } = toRefs(props);
+</script>
+
+<template>
+  <div>
+    <div v-if="errors" class="my-1 text-red-500">
+      <div v-for="error in errors">{{ error }}</div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/forms/Message.vue

@@ -1,31 +1,31 @@
-<script setup lang="ts">
-interface Props {
-  success?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  success: true,
-});
-
-const { success } = toRefs(props);
-
-const errorClass = computed(() => {
-  return "message-base bg-red-100 border-red-400 text-red-600";
-});
-
-const successClass = computed(() => {
-  return "message-base bg-green-100 border-green-400 text-green-600";
-});
-</script>
-
-<template>
-  <div :class="success ? successClass : errorClass">
-    <slot class="pb-0" />
-  </div>
-</template>
-
+<script setup lang="ts">
+interface Props {
+  success?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  success: true,
+});
+
+const { success } = toRefs(props);
+
+const errorClass = computed(() => {
+  return "message-base bg-red-100 border-red-400 text-red-600";
+});
+
+const successClass = computed(() => {
+  return "message-base bg-green-100 border-green-400 text-green-600";
+});
+</script>
+
+<template>
+  <div :class="success ? successClass : errorClass">
+    <slot class="pb-0" />
+  </div>
+</template>
+
 <style scoped>
 .message-base {
   @apply border font-bold px-4 py-3 mb-4 rounded relative;
 }
-</style>
+</style>

package/dist/runtime/components/forms/SearchInput.vue

@@ -1,38 +1,38 @@
-<script lang="ts" setup>
-import CloseIcon from "../../assets/svg/close-icon.svg";
-
-type Props = {
-  placeholder: string;
-};
-
-const props = withDefaults(defineProps<Props>(), {
-  placeholder: "Search...",
-});
-
-const value = ref<string>("");
-
-const emit = defineEmits<{
-  (e: "onChange", value: string): void;
-  (e: "clear"): void;
-}>();
-
-const clear = () => {
-  value.value = "";
-  emit("clear");
-};
-</script>
-
-<template>
-  <div class="flex flex-row items-center">
-    <input
-      v-model="value"
-      type="text"
-      class="flex-1 pl-2 pr-5 py-1"
-      :placeholder="placeholder"
-      @input="emit('onChange', value)"
-    />
-    <span class="flex-initial cursor-pointer px-4 py-2" @click="clear">
-      <close-icon class="fill-current text-black" />
-    </span>
-  </div>
-</template>
+<script lang="ts" setup>
+import CloseIcon from "../../assets/svg/close-icon.svg";
+
+type Props = {
+  placeholder: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: "Search...",
+});
+
+const value = ref<string>("");
+
+const emit = defineEmits<{
+  (e: "onChange", value: string): void;
+  (e: "clear"): void;
+}>();
+
+const clear = () => {
+  value.value = "";
+  emit("clear");
+};
+</script>
+
+<template>
+  <div class="flex flex-row items-center">
+    <input
+      v-model="value"
+      type="text"
+      class="flex-1 pl-2 pr-5 py-1"
+      :placeholder="placeholder"
+      @input="emit('onChange', value)"
+    />
+    <span class="flex-initial cursor-pointer px-4 py-2" @click="clear">
+      <close-icon class="fill-current text-black" />
+    </span>
+  </div>
+</template>

package/dist/runtime/components/forms/SupportForm.vue

@@ -1,112 +1,112 @@
-<script lang="ts" setup>
-import { get } from "lodash-es";
-
-const form = ref({
-  name: "",
-  email: "",
-  phone: "",
-  message: "",
-});
-const submitted = ref<boolean>(false);
-
-// @todo add error handling to other form fields, or remove error fields from each field
-const errors = ref<[]>([]);
-
-const supportStore = useSupportStore();
-
-const handleForm = () => {
-  errors.value = [];
-  supportStore
-    .submit(form.value)
-    .then(() => {
-      submitted.value = true;
-    })
-    .catch((error) => {
-      console.log(error.response);
-      errors.value = get(error.response._data, "errors", {});
-      errors.value.response = [
-        "Error: " + get(error.response._data, "message", ""),
-      ];
-    });
-};
-
-const acceptNumber = () => {
-  const x = form.value.phone
-    .replace(/\D/g, "")
-    .match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
-  form.value.phone = !x[2]
-    ? x[1]
-    : "(" + x[1] + ") " + x[2] + (x[3] ? "-" + x[3] : "");
-};
-</script>
-
-<template>
-  <section>
-    <form v-if="!submitted" @submit.prevent="handleForm">
-      <div class="font-bold mb-4">
-        To contact support, please fill out the form below.
-      </div>
-
-      <div class="mb-3">
-        <label class="block font-semibold text-grey-darkest mb-1">Name</label>
-
-        <CommonTextInput
-          v-model="form.name"
-          placeholder="Name"
-          :required="true"
-          type="text"
-        />
-
-        <CommonErrorField :errors="errors['name']" />
-      </div>
-
-      <div class="mb-3">
-        <label class="block font-semibold text-grey-darkest mb-1">Email</label>
-
-        <CommonTextInput
-          v-model="form.email"
-          placeholder="you@company.com"
-          :required="true"
-          type="email"
-        />
-
-        <CommonErrorField :errors="errors['email']" />
-      </div>
-
-      <div class="mb-3">
-        <label class="block font-semibold text-grey-darkest mb-1">Phone</label>
-
-        <CommonTextInput
-          v-model="form.phone"
-          placeholder="Phone"
-          :required="false"
-          type="tel"
-          @input="acceptNumber"
-        />
-      </div>
-
-      <div class="mb-3">
-        <label class="block font-semibold text-grey-darkest mb-1"
-          >Message</label
-        >
-
-        <CommonTextArea v-model="form.message" />
-
-        <CommonErrorField :errors="errors['message']" />
-      </div>
-
-      <button class="btn btn-secondary" type="submit">Submit</button>
-      <div class="mb-3">
-        <CommonErrorField :errors="errors['response']" />
-      </div>
-    </form>
-
-    <!-- Submitted Message -->
-    <div v-if="submitted" class="text-center my-12">
-      <div class="text-2xl font-bold text-grey-darkest mb-2">Thank you.</div>
-      <div class="text-lg font-semibold text-grey-darker">
-        Your message has been received.
-      </div>
-    </div>
-  </section>
-</template>
+<script lang="ts" setup>
+import { get } from "lodash-es";
+
+const form = ref({
+  name: "",
+  email: "",
+  phone: "",
+  message: "",
+});
+const submitted = ref<boolean>(false);
+
+// @todo add error handling to other form fields, or remove error fields from each field
+const errors = ref<[]>([]);
+
+const supportStore = useSupportStore();
+
+const handleForm = () => {
+  errors.value = [];
+  supportStore
+    .submit(form.value)
+    .then(() => {
+      submitted.value = true;
+    })
+    .catch((error) => {
+      console.log(error.response);
+      errors.value = get(error.response._data, "errors", {});
+      errors.value.response = [
+        "Error: " + get(error.response._data, "message", ""),
+      ];
+    });
+};
+
+const acceptNumber = () => {
+  const x = form.value.phone
+    .replace(/\D/g, "")
+    .match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
+  form.value.phone = !x[2]
+    ? x[1]
+    : "(" + x[1] + ") " + x[2] + (x[3] ? "-" + x[3] : "");
+};
+</script>
+
+<template>
+  <section>
+    <form v-if="!submitted" @submit.prevent="handleForm">
+      <div class="font-bold mb-4">
+        To contact support, please fill out the form below.
+      </div>
+
+      <div class="mb-3">
+        <label class="block font-semibold text-grey-darkest mb-1">Name</label>
+
+        <CommonTextInput
+          v-model="form.name"
+          placeholder="Name"
+          :required="true"
+          type="text"
+        />
+
+        <CommonErrorField :errors="errors['name']" />
+      </div>
+
+      <div class="mb-3">
+        <label class="block font-semibold text-grey-darkest mb-1">Email</label>
+
+        <CommonTextInput
+          v-model="form.email"
+          placeholder="you@company.com"
+          :required="true"
+          type="email"
+        />
+
+        <CommonErrorField :errors="errors['email']" />
+      </div>
+
+      <div class="mb-3">
+        <label class="block font-semibold text-grey-darkest mb-1">Phone</label>
+
+        <CommonTextInput
+          v-model="form.phone"
+          placeholder="Phone"
+          :required="false"
+          type="tel"
+          @input="acceptNumber"
+        />
+      </div>
+
+      <div class="mb-3">
+        <label class="block font-semibold text-grey-darkest mb-1"
+          >Message</label
+        >
+
+        <CommonTextArea v-model="form.message" />
+
+        <CommonErrorField :errors="errors['message']" />
+      </div>
+
+      <button class="btn btn-secondary" type="submit">Submit</button>
+      <div class="mb-3">
+        <CommonErrorField :errors="errors['response']" />
+      </div>
+    </form>
+
+    <!-- Submitted Message -->
+    <div v-if="submitted" class="text-center my-12">
+      <div class="text-2xl font-bold text-grey-darkest mb-2">Thank you.</div>
+      <div class="text-lg font-semibold text-grey-darker">
+        Your message has been received.
+      </div>
+    </div>
+  </section>
+</template>

package/dist/runtime/components/forms/SwitchInput.vue

@@ -1,44 +1,44 @@
-<script lang="ts" setup>
-import { ref } from "vue";
-
-interface Props {
-  isEnabled: boolean;
-  color?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  isEnabled: false,
-  color: "#4D4D4D",
-});
-
-const value = ref<boolean>(props.isEnabled);
-
-const emit = defineEmits<{
-  (event: "toggle", value: boolean): void;
-}>();
-
-const toggle = () => {
-  value.value = !value.value;
-  emit("toggle", value.value);
-};
-</script>
-
-<template id="switch-button">
-  <div class="switch-button-control">
-    <div
-      class="switch-button"
-      :class="{ enabled: value }"
-      :style="{ '--color': color }"
-      @click="toggle"
-    >
-      <div class="button" />
-    </div>
-    <div class="switch-button-label">
-      <slot />
-    </div>
-  </div>
-</template>
-
+<script lang="ts" setup>
+import { ref } from "vue";
+
+interface Props {
+  isEnabled: boolean;
+  color?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isEnabled: false,
+  color: "#4D4D4D",
+});
+
+const value = ref<boolean>(props.isEnabled);
+
+const emit = defineEmits<{
+  (event: "toggle", value: boolean): void;
+}>();
+
+const toggle = () => {
+  value.value = !value.value;
+  emit("toggle", value.value);
+};
+</script>
+
+<template id="switch-button">
+  <div class="switch-button-control">
+    <div
+      class="switch-button"
+      :class="{ enabled: value }"
+      :style="{ '--color': color }"
+      @click="toggle"
+    >
+      <div class="button" />
+    </div>
+    <div class="switch-button-label">
+      <slot />
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .switch-button-control {
   display: flex;
@@ -79,4 +79,4 @@ const toggle = () => {
 .switch-button-control .switch-button-label {
   margin-left: 10px;
 }
-</style>
+</style>

package/dist/runtime/components/forms/TextArea.vue

@@ -1,26 +1,26 @@
-<script lang="ts" setup>
-type Props = {
-  modelValue: string;
-};
-
-const emit = defineEmits<{
-  (event: "update:modelValue", value: string): void;
-}>();
-
-const props = defineProps<Props>();
-
-const onInput = (e) => {
-  emit("update:modelValue", e.target.value);
-};
-</script>
-
-<template>
-  <span>
-    <textarea
-      :value="props.modelValue"
-      class="form-input"
-      rows="4"
-      @change="onInput"
-    ></textarea>
-  </span>
-</template>
+<script lang="ts" setup>
+type Props = {
+  modelValue: string;
+};
+
+const emit = defineEmits<{
+  (event: "update:modelValue", value: string): void;
+}>();
+
+const props = defineProps<Props>();
+
+const onInput = (e) => {
+  emit("update:modelValue", e.target.value);
+};
+</script>
+
+<template>
+  <span>
+    <textarea
+      :value="props.modelValue"
+      class="form-input"
+      rows="4"
+      @change="onInput"
+    ></textarea>
+  </span>
+</template>

package/dist/runtime/components/forms/TextInput.vue

@@ -1,28 +1,28 @@
-<script lang="ts" setup>
-type Props = {
-  modelValue: string;
-  placeholder: string;
-  type: string;
-};
-
-const props = defineProps<Props>();
-
-const emit = defineEmits<{
-  (event: "update:modelValue", value: string): void;
-}>();
-
-// methods
-const changeInput = (e) => {
-  emit("update:modelValue", e.target.value);
-};
-</script>
-
-<template>
-  <input
-    class="form-input px-2 py-1"
-    :type="type"
-    :value="props.modelValue"
-    :placeholder="placeholder"
-    @change="changeInput"
-  />
-</template>
+<script lang="ts" setup>
+type Props = {
+  modelValue: string;
+  placeholder: string;
+  type: string;
+};
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (event: "update:modelValue", value: string): void;
+}>();
+
+// methods
+const changeInput = (e) => {
+  emit("update:modelValue", e.target.value);
+};
+</script>
+
+<template>
+  <input
+    class="form-input px-2 py-1"
+    :type="type"
+    :value="props.modelValue"
+    :placeholder="placeholder"
+    @change="changeInput"
+  />
+</template>