cja-phoenix 0.3.6 → 0.3.7

package/dist/types/components/structural/GridItem.vue.d.ts

@@ -1,27 +1,24 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    sizeSm: {
-        type: import("vue").PropType<1 | 2 | 3 | 4>;
-    };
-    sizeMd: {
-        type: import("vue").PropType<1 | 2 | 3 | 4>;
-    };
-    sizeLg: {
-        type: import("vue").PropType<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    sizeSm: {
-        type: import("vue").PropType<1 | 2 | 3 | 4>;
-    };
-    sizeMd: {
-        type: import("vue").PropType<1 | 2 | 3 | 4>;
-    };
-    sizeLg: {
-        type: import("vue").PropType<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;
-    };
-}>>, {}, {}>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    sizeSm?: 1 | 2 | 3 | 4 | undefined;
+    sizeMd?: 1 | 2 | 3 | 4 | undefined;
+    sizeLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    sizeSm?: 1 | 2 | 3 | 4 | undefined;
+    sizeMd?: 1 | 2 | 3 | 4 | undefined;
+    sizeLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined;
+}>>>, {}, {}>, {
     default?(_: {}): any;
 }>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/types/components/structural/InfoMessage.vue.d.ts

@@ -1,37 +1,28 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    title: {
-        type: import("vue").PropType<string>;
-    };
-    description: {
-        type: import("vue").PropType<string>;
-    };
-    toggle: {
-        type: import("vue").PropType<boolean>;
-    };
-    color: {
-        type: import("vue").PropType<"blue" | "green">;
-        required: true;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "btn:close"[], "btn:close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    title: {
-        type: import("vue").PropType<string>;
-    };
-    description: {
-        type: import("vue").PropType<string>;
-    };
-    toggle: {
-        type: import("vue").PropType<boolean>;
-    };
-    color: {
-        type: import("vue").PropType<"blue" | "green">;
-        required: true;
-    };
-}>> & {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    title?: string | undefined;
+    description?: string | undefined;
+    toggle?: boolean | undefined;
+    color: "blue" | "green";
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "btn:close"[], "btn:close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    title?: string | undefined;
+    description?: string | undefined;
+    toggle?: boolean | undefined;
+    color: "blue" | "green";
+}>>> & {
     "onBtn:close"?: ((...args: any[]) => any) | undefined;
 }, {}, {}>, {
     icon?(_: {}): any;
 }>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/types/components/structural/LoadingSpinner.vue.d.ts

@@ -1,16 +1,17 @@
-declare const _default: import("vue").DefineComponent<{
-    size: {
-        type: import("vue").PropType<number>;
-    };
-    border: {
-        type: import("vue").PropType<number>;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    size: {
-        type: import("vue").PropType<number>;
-    };
-    border: {
-        type: import("vue").PropType<number>;
-    };
-}>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    size?: number | undefined;
+    border?: number | undefined;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    size?: number | undefined;
+    border?: number | undefined;
+}>>>, {}, {}>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/types/components/structural/Modal.vue.d.ts

@@ -1,23 +1,28 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    title: {
-        type: import("vue").PropType<string>;
-    };
-}, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    title?: string | undefined;
+}>, {
     active: import("vue").Ref<boolean>;
     openModal: () => void;
     closeModal: () => void;
     toggleModal: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    title: {
-        type: import("vue").PropType<string>;
-    };
-}>> & {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    title?: string | undefined;
+}>>> & {
     onClose?: ((...args: any[]) => any) | undefined;
 }, {}, {}>, {
     body?(_: {}): any;
     footer?(_: {}): any;
 }>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "cja-phoenix",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "scripts": {
     "build:dev": "rimraf dist && vue-tsc && vite build -m development",
     "build:link": "rimraf dist && vue-tsc && vite build -m development && npm link",
     "build:prod": "rimraf dist && vue-tsc && vite build -m production",
     "publish:lib": "npm run build:prod && npm publish",
-    "docs:dev": "vitepress dev docs",
     "story:dev": "histoire dev",
     "story:build": "histoire build",
     "story:preview": "histoire preview"
@@ -23,9 +22,9 @@
   },
   "devDependencies": {
     "@gtm-support/vue-gtm": "^2.0.0",
-    "@histoire/plugin-vue": "^0.16.1",
     "@types/node": "^17.0.14",
     "@vitejs/plugin-vue": "^2.0.0",
+    "@histoire/plugin-vue": "^0.16.1",
     "histoire": "^0.16.2",
     "intl-tel-input": "^17.0.19",
     "maska": "^2.1.7",
@@ -35,7 +34,6 @@
     "typescript": "^4.4.4",
     "vee-validate": "^4.7.2",
     "vite": "^3.0.0",
-    "vitepress": "^0.21.6",
     "vue": "^3.3.4",
     "vue-currency-input": "^3.0.5",
     "vue-i18n": "^9.2.2",
@@ -46,8 +44,7 @@
   },
   "files": [
     "src",
-    "dist",
-    "public"
+    "dist"
   ],
   "types": "./dist/types/index.d.ts",
   "module": "./dist/cja-phoenix.es.js",

package/src/utils/cjaStore.ts

@@ -27,22 +27,14 @@ export const getCjaStore = (options: {
       const field = this[target][payload.key];
 
       if (field) {
-        if (field.hasOwnProperty("options")) {
-          if (typeof payload.value == "string" && payload.value.includes(",")) {
-            field.value = payload.value.split(",");
-          } else {
-            field.value = payload.value;
-          }
+        field.value = payload.value;
 
-          if (field.options) {
-            field.label = Array.isArray(field.value)
-              ? field.value.map(
-                  (v) => field.options.find((k) => k.value == v)?.label
-                )
-              : field.options.find((k) => k.value == field.value)?.label;
-          }
-        } else {
-          field.value = payload.value;
+        if (field.options) {
+          field.label = Array.isArray(payload.value)
+            ? field.value.map(
+                (v) => field.options.find((k) => k.value == v)?.label
+              )
+            : field.options.find((k) => k.value == payload.value)?.label;
         }
       }
     },

package/dist/types/histoire.setup.d.ts

@@ -1,2 +0,0 @@
-import "./assets/main.scss";
-import "./assets/iconia/style.scss";

package/dist/types/stories/CjaButton.story.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
-export default _default;

package/dist/types/stories/ContentTabs.story.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
-export default _default;

package/dist/types/stories/Modal.story.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
-export default _default;

package/src/histoire.setup.ts

@@ -1,2 +0,0 @@
-import "./assets/main.scss";
-import "./assets/iconia/style.scss";

package/src/stories/CjaButton.story.vue

@@ -1,192 +0,0 @@
-<script setup lang="ts">
-import CjaButton from "../components/structural/CjaButton.vue";
-import TextInput from "../components/forms/TextInput.vue";
-
-const initState = () => ({
-  content: "Button Text",
-});
-
-const initStateAllConfigs = () => ({
-  content: "Button Text",
-  type: "primary" as "primary" | "secondary" | "tertiary",
-  color: "blue" as "blue" | "orange" | "white",
-  size: "md" as "sm" | "md" | "lg",
-  icon: "" as string,
-  iconAny: "" as string,
-  iconPosition: "right" as "left" | "right",
-  loading: false as boolean,
-  disabled: false as boolean,
-});
-
-const initStateIcon = () => ({
-  type: "primary" as "primary" | "secondary" | "tertiary",
-  color: "blue" as "blue" | "orange" | "white",
-  size: "md" as "sm" | "md" | "lg",
-  icon: "m-cgg-icon--gears" as string,
-  iconAny: "" as string,
-  iconPosition: "right" as "left" | "right",
-  loading: false as boolean,
-  disabled: false as boolean,
-});
-
-const options = {
-  type: ["primary", "secondary", "tertiary"],
-  color: ["blue", "orange", "white"],
-  size: ["sm", "md", "lg"],
-  icon: [
-    { label: "None", value: "" },
-    { label: "Chevron Right", value: "m-cgg-icon--chevron-right" },
-    { label: "Chevron Down", value: "m-cgg-icon--chevron-down" },
-    { label: "Gears", value: "m-cgg-icon--gears" },
-  ],
-  iconPosition: ["right", "left"],
-};
-
-const inputValue = "";
-</script>
-
-<template>
-  <Story title="Button">
-    <Variant title="Default" :init-state="initState">
-      <template #default="{ state }">
-        <CjaButton>{{ state.content }}</CjaButton>
-      </template>
-
-      <template #controls="{ state }">
-        <HstText type="text" v-model="state.content" title="Content" />
-      </template>
-    </Variant>
-    <Variant title="All Configs" :init-state="initStateAllConfigs">
-      <template #default="{ state }">
-        <div class="form-container">
-          <TextInput v-model="inputValue" :size="state.size" />
-          <CjaButton
-            :type="state.type"
-            :color="state.color"
-            :size="state.size"
-            :icon="state.iconAny || state.icon"
-            :iconPosition="state.iconPosition"
-            :loading="state.loading"
-            :disabled="state.disabled"
-            >{{ state.content }}</CjaButton
-          >
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstText type="text" v-model="state.content" title="Content" />
-        <HstSelect v-model="state.type" :options="options.type" title="Type" />
-        <HstSelect
-          v-model="state.color"
-          :options="options.color"
-          title="Color"
-        />
-        <HstSelect v-model="state.size" :options="options.size" title="Size" />
-        <HstText type="text" v-model="state.iconAny" title="Icon Any" />
-        <HstSelect v-model="state.icon" :options="options.icon" title="Icon" />
-        <HstSelect
-          v-model="state.iconPosition"
-          :options="options.iconPosition"
-          title="Icon Position"
-        />
-        <HstCheckbox v-model="state.loading" title="Loading" />
-        <HstCheckbox v-model="state.disabled" title="Disabled" />
-      </template>
-    </Variant>
-    <Variant title="Icon Button" :init-state="initStateIcon">
-      <template #default="{ state }">
-        <div class="form-container">
-          <TextInput v-model="inputValue" :size="state.size" />
-          <CjaButton
-            :type="state.type"
-            :color="state.color"
-            :size="state.size"
-            :icon="state.iconAny || state.icon"
-            :iconPosition="state.iconPosition"
-            :loading="state.loading"
-            :disabled="state.disabled"
-          />
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstSelect v-model="state.type" :options="options.type" title="Type" />
-        <HstSelect
-          v-model="state.color"
-          :options="options.color"
-          title="Color"
-        />
-        <HstSelect v-model="state.size" :options="options.size" title="Size" />
-        <HstText type="text" v-model="state.iconAny" title="Icon Any" />
-        <HstSelect v-model="state.icon" :options="options.icon" title="Icon" />
-        <HstSelect
-          v-model="state.iconPosition"
-          :options="options.iconPosition"
-          title="Icon Position"
-        />
-        <HstCheckbox v-model="state.loading" title="Loading" />
-        <HstCheckbox v-model="state.disabled" title="Disabled" />
-      </template>
-    </Variant>
-  </Story>
-</template>
-
-<style lang="scss" scoped>
-.form-container {
-  display: grid;
-  grid-template-columns: 200px max-content;
-  gap: 24px;
-}
-</style>
-
-<docs lang="md">
-## Props
-
-#### type
-
-Defines fill and border type
-
-- **primary** has background fill
-- **secondary** is bordered without fill
-- **tertiary** does not have background or border
-
-#### color
-
-Defines button color profile
-
-- <b style="color: #076b9c">blue</b>
-- <b style="color: #f58423">orange</b>
-- <b style="color: #fff">white</b>
-
-#### size
-
-Defines button size, changing padding and font-size
-
-- **sm**
-- **md**
-- **lg**
-
-#### icon
-
-An iconia class icon, inserted as a class into a span
-
-#### iconPosition
-
-Defines icon position relative to button text
-
-- **left**
-- **right**
-
-#### loading
-
-Displays a spinner when boolean is true, prevents display of button text and icon
-
-## Defaults
-
-When implementing a **CjaButton** component with no props, the following props are pre-defined as default:
-
-- **type**: primary
-- **color**: <b style="color: #076b9c">blue</b>
-- **size**: md
-- **iconPosition**: right
-</docs>

package/src/stories/ContentTabs.story.vue

@@ -1,59 +0,0 @@
-<script lang="ts" setup>
-import ContentTabs from "../components/structural/ContentTabs.vue";
-
-const initState = () => ({
-  tabs: ["Tab 1", "Tab 2"],
-});
-</script>
-
-<template>
-  <Story title="Content Tabs">
-    <Variant title="Default" :init-state="initState">
-      <template #default="{ state }">
-        <ContentTabs :defaultTab="0" :tabs="state.tabs">
-          <template #[i] v-for="(tab, i) in state.tabs">
-            Each tab must match a numbered slot equivalent to the position on
-            the array, this is the slot for: {{ tab }}
-          </template>
-        </ContentTabs>
-      </template>
-
-      <template #controls="{ state }">
-        <HstJson v-model="state.tabs" title="Tabs"></HstJson>
-      </template>
-
-      <template #source>
-        <textarea v-pre>
-            <ContentTabs :defaultTab="0" :tabs="['Tab 1', 'Tab 2']">
-              <template #0> Slot content </template>
-              <template #1> Slot content </template>
-            </ContentTabs>
-        </textarea>
-      </template>
-    </Variant>
-  </Story>
-</template>
-
-<docs lang="md">
-### Props
-
-#### defaultTab
-
-The initial active tab when the component is first rendered.
-
-#### tabs
-
-An array of strings displayed on the tab controls, each one must match a numbered slot in order to display content properly.
-
-### Emits
-
-#### tab:changed
-
-Triggered when the tab controls are clicked, sends the new tab number.
-
-### Exposed
-
-#### activeTab
-
-Exposes the **activeTab** variable, used to display the current selected tab.
-</docs>

package/src/stories/Modal.story.vue

@@ -1,88 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive } from "vue";
-import Modal from "../components/structural/Modal.vue";
-import CjaButton from "../components/structural/CjaButton.vue";
-
-const modal = ref();
-
-const initState = () => ({
-  title: "Modal Title",
-  modalBody: true,
-  modalFooter: false,
-});
-</script>
-
-<template>
-  <Story title="Modal">
-    <Variant title="Default" :init-state="initState">
-      <template #default="{ state }">
-        <Modal ref="modal" :title="state.title">
-          <template #body v-if="state.modalBody">
-            <div class="modal-body">
-              <h2>Modal Body Slot</h2>
-              <p>
-                The modal body slot can host whatever component you need to use
-                inside
-              </p>
-            </div>
-          </template>
-          <template #footer v-if="state.modalFooter">
-            <div class="modal-footer">
-              <CjaButton :color="'orange'">Continuar</CjaButton>
-            </div>
-          </template>
-        </Modal>
-
-        <CjaButton @click="modal.openModal()">Open modal</CjaButton>
-      </template>
-
-      <template #controls="{ state }">
-        <HstText type="text" v-model="state.title" title="Modal Title" />
-        <HstCheckbox v-model="state.modalBody" title="Modal Body" />
-        <HstCheckbox v-model="state.modalFooter" title="Modal Footer" />
-      </template>
-    </Variant>
-  </Story>
-</template>
-
-<docs lang="md">
-### Props
-
-#### title
-
-Adds a title and a horizontal rule below it to the modal.
-
-### Slots
-
-#### #body
-
-Displays content inside the modal, becoming scrollable after a threshold. If you need to stylize slotted content, wrap the html within a div, it will be scoped to the vue scope you are currently working with.
-
-#### #footer
-
-Displays content below the modal body, separated by a horizontal ruler. Exempt from the scrollable container.
-
-### Emits
-
-#### @close
-
-Triggered when the modal is closed, through the close button or clicking outside the modal window.
-
-### Exposed
-
-#### active
-
-Exposes the modal's current **active** status, allows you to detect if the modal is opened or closed.
-
-#### openModal()
-
-Exposes the **openModal** method, used to display the modal, typically wrapped in a local function to perform additional changes before opening the modal.
-
-#### closeModal()
-
-Exposes the **closeModal** method, used to hide the modal, emits a **@close** event.
-
-#### toggleModal()
-
-Exposes the **toggleModal** method, used to hide or show the modal depending on the current **active** value. Emits a **@close** event if the modal was closed.
-</docs>