@useinsider/guido 1.0.0-beta.f2fcf4d → 1.0.0-beta.f47d56f

package/dist/static/editor.css.js

@@ -1,22 +1,36 @@
 const n = `:host {
-    --guido-primary-color: #0a2ecc;
+    --guido-color-white: #FFFFFF;
+    --guido-color-primary-500: #0A2ECC;
+    --guido-color-primary-100: #DAE1FB;
+    --guido-color-gray-800: #292929;
+    --guido-color-gray-300: #E1E1E1;
 }
 
 .label {
     font-size: 13px;
-    color: #292929;
+    color: var(--guido-color-gray-800);
 }
 
 .stacked-panel-title {
-    font-size: 18px;
+    padding: 16px;
+    font-size: 16px;
     font-weight: 600;
-    color: #2c3546
+    color: var(--guido-color-gray-800);
+    text-align: left;
 }
 
 .stacked-panel-item {
     border-radius: 4px;
     border: 1px solid #dcdfe6;
-    box-shadow: 0 0 0 0 #e1e1e1,0 15px 35px -5px rgba(0, 0, 0, .1),0 8px 10px -6px rgba(0, 0, 0, .1)
+    box-shadow: 0 0 0 0 var(--guido-color-gray-300),0 15px 35px -5px rgba(0, 0, 0, .1),0 8px 10px -6px rgba(0, 0, 0, .1);
+}
+
+.container {
+    padding: 16px;
+}
+
+.container.parent-container>.container {
+    padding: 0 16px;
 }
 
 /** SEGMENT BUTTON */
@@ -43,7 +57,7 @@ ue-switcher input:before {
 }
 
 .tabs-header button ue-icon-component.icon-button {
-    color: #2c3546;
+    color: var(--guido-color-gray-800);
 }
 
 .tabs-header button:not(:last-child),
@@ -60,13 +74,13 @@ ue-switcher input:before {
 }
 
 .tabs-header button.checked {
-    background-color: #c2ddff;
-    color: var(--guido-primary-color);
-    border-color: var(--guido-primary-color);
+    background-color: var(--guido-color-primary-100);
+    color: var(--guido-color-primary-500);
+    border-color: var(--guido-color-primary-500);
 }
 
 .tabs-header button.checked ue-icon-component.icon-button {
-    color: var(--guido-primary-color);
+    color: var(--guido-color-primary-500);
 }
 /** SEGMENT BUTTON */
 
@@ -94,7 +108,7 @@ ue-switcher input:before {
 }
 
 .button-group .button ue-icon-component.icon-button {
-    color: #2c3546;
+    color: var(--guido-color-gray-800);
 }
 
 .button-group > div:first-of-type .button {
@@ -107,14 +121,14 @@ ue-switcher input:before {
 
 ue-check-buttons input:checked + .button,
 ue-radio-buttons input:checked + .button {
-    background-color: #c2ddff;
-    color: var(--guido-primary-color);
-    border-color: var(--guido-primary-color);
+    background-color: var(--guido-color-primary-100);
+    color: var(--guido-color-primary-500);
+    border-color: var(--guido-color-primary-500);
 }
 
 ue-check-buttons input:checked + .button ue-icon-component.icon-button,
 ue-radio-buttons input:checked + .button ue-icon-component.icon-button {
-    color: var(--guido-primary-color);
+    color: var(--guido-color-primary-500);
 }
 /** BUTTON GROUP */
 
@@ -127,12 +141,12 @@ ue-radio-buttons input:checked + .button ue-icon-component.icon-button {
 
 .button[role="combobox"] {
     background-color: #f9f9f9;
-    border: 1px solid #e1e1e1;
+    border: 1px solid var(--guido-color-gray-300);
     border-radius: 4px;
     box-shadow: none;
     min-height: 42px;
     padding: 8px;
-    color: #292929;
+    color: var(--guido-color-gray-800);
     text-align: left;
     outline: none;
     white-space: nowrap;
@@ -142,25 +156,25 @@ ue-radio-buttons input:checked + .button ue-icon-component.icon-button {
 
 .button[role="combobox"].on {
     background-color: #f9f9f9;
-    border-color: var(--guido-primary-color);
+    border-color: var(--guido-color-primary-500);
     box-shadow: 0 0 0 3px #b5c1f1 !important;
 }
 /** COMBOBOX */
 
 /** BASE INPUT */
 .base-input {
-    border: 1px solid #e1e1e1;
+    border: 1px solid var(--guido-color-gray-300);
     border-radius: 4px;
     background-color: #f9f9f9;
     align-items: center;
-    height: 42px;
-    max-height: 42px;
+    height: 40px;
+    max-height: 40px;
     box-sizing: content-box;
     outline: none;
     resize: vertical;
     padding: 8px;
     transition: none !important;
-    color: #292929;
+    color: var(--guido-color-gray-800);
     box-shadow: none !important;
     box-sizing: border-box !important;
 }
@@ -176,6 +190,42 @@ ue-radio-buttons input:checked + .button ue-icon-component.icon-button {
     box-shadow: 0 0 0 3px #b5c1f1 !important;
 }
 /** BASE INPUT */
+
+/** COUNTER */
+ue-counter {
+    padding: 0 !important;
+    background-color: var(--guido-color-white) !important;
+    border: 1px solid var(--guido-color-gray-300);
+}
+
+ue-counter .button {
+    width: 40px;
+    height: 40px;
+    box-shadow: none;
+}
+
+ue-counter .button .icon-button {
+    color: var(--guido-color-primary-500);
+}
+
+ue-counter ue-button:first-child .button {
+    border-right: 1px solid var(--guido-color-gray-300);
+}
+
+ue-counter ue-button:last-child .button {
+    border-left: 1px solid var(--guido-color-gray-300);
+}
+/** COUNTER */
+
+/** COLOR */
+ue-color {
+    width: 80px;
+}
+
+ue-color .base-input {
+    width: 100%;
+}
+/** COLOR */
 `;
 export {
   n as default

package/dist/stores/editor.d.ts

@@ -0,0 +1,5 @@
+export declare const useEditorStore: import("pinia").StoreDefinition<"editor", {
+    isCodeEditorOpen: boolean;
+    isVersionHistoryOpen: boolean;
+    editorVisualMode: string;
+}, {}, {}>;

package/dist/stores/editor.js

@@ -0,0 +1,11 @@
+import { defineStore as e } from "pinia";
+const t = e("editor", {
+  state: () => ({
+    isCodeEditorOpen: !1,
+    isVersionHistoryOpen: !1,
+    editorVisualMode: "desktop"
+  })
+});
+export {
+  t as useEditorStore
+};

package/dist/stores/version-history.d.ts

@@ -0,0 +1,80 @@
+import type { VersionHistoryState } from '@@/Types/version-history-api';
+export interface StoreState extends VersionHistoryState {
+    editorVisualMode: 'desktop' | 'mobile';
+}
+export declare const useVersionHistoryStore: import("pinia").StoreDefinition<"versionHistory", StoreState, {
+    hasPreviousPatch: (state: {
+        editorVisualMode: "desktop" | "mobile";
+        previousPatch: {
+            id: string;
+            date: number;
+            description: string;
+            authorId: string;
+            authorName: string;
+        };
+        currentPatch: {
+            id: string;
+            date: number;
+            description: string;
+            authorId: string;
+            authorName: string;
+        };
+        nextPatch: {
+            id: string;
+            date: number;
+            description: string;
+            authorId: string;
+            authorName: string;
+        };
+    } & import("pinia").PiniaCustomStateProperties<StoreState>) => boolean;
+    hasCurrentPatch: (state: {
+        editorVisualMode: "desktop" | "mobile";
+        previousPatch: {
+            id: string;
+            date: number;
+            description: string;
+            authorId: string;
+            authorName: string;
+        };
+        currentPatch: {
+            id: string;
+            date: number;
+            description: string;
+            authorId: string;
+            authorName: string;
+        };
+        nextPatch: {
+            id: string;
+            date: number;
+            description: string;
+            authorId: string;
+            authorName: string;
+        };
+    } & import("pinia").PiniaCustomStateProperties<StoreState>) => boolean;
+    hasNextPatch: (state: {
+        editorVisualMode: "desktop" | "mobile";
+        previousPatch: {
+            id: string;
+            date: number;
+            description: string;
+            authorId: string;
+            authorName: string;
+        };
+        currentPatch: {
+            id: string;
+            date: number;
+            description: string;
+            authorId: string;
+            authorName: string;
+        };
+        nextPatch: {
+            id: string;
+            date: number;
+            description: string;
+            authorId: string;
+            authorName: string;
+        };
+    } & import("pinia").PiniaCustomStateProperties<StoreState>) => boolean;
+}, {
+    updateState(state: VersionHistoryState): void;
+}>;

package/dist/stores/version-history.js

@@ -0,0 +1,28 @@
+import { defineStore as a } from "pinia";
+const e = () => ({
+  id: "",
+  date: 0,
+  description: "",
+  authorId: "",
+  authorName: ""
+}), r = () => ({
+  previousPatch: e(),
+  currentPatch: e(),
+  nextPatch: e(),
+  editorVisualMode: "desktop"
+}), o = a("versionHistory", {
+  state: () => r(),
+  getters: {
+    hasPreviousPatch: (t) => !!t.previousPatch.id,
+    hasCurrentPatch: (t) => !!t.currentPatch.id,
+    hasNextPatch: (t) => !!t.nextPatch.id
+  },
+  actions: {
+    updateState(t) {
+      t.previousPatch && (this.previousPatch = t.previousPatch), t.currentPatch && (this.currentPatch = t.currentPatch), t.nextPatch && (this.nextPatch = t.nextPatch);
+    }
+  }
+});
+export {
+  o as useVersionHistoryStore
+};

package/dist/utils/dateUtil.d.ts

@@ -0,0 +1 @@
+export declare const formatPatchDate: (timestamp: number) => string;

package/dist/utils/dateUtil.js

@@ -0,0 +1,16 @@
+const o = (t) => {
+  if (!t)
+    return "";
+  const e = new Date(t);
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: !1
+  }).format(e);
+};
+export {
+  o as formatPatchDate
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "1.0.0-beta.f2fcf4d",
+  "version": "1.0.0-beta.f47d56f",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",

package/dist/components/organisms/top-bar/Header.vue2.js

@@ -1,14 +0,0 @@
-import { defineComponent as e } from "vue";
-import { InContainer as r } from "@useinsider/design-system-vue";
-import o from "./HeaderLeftSlot.vue.js";
-import t from "./HeaderMiddleSlot.vue.js";
-import m from "./HeaderRightSlot.vue.js";
-const _ = /* @__PURE__ */ e({
-  __name: "Header",
-  setup(f) {
-    return { __sfc: !0, InContainer: r, HeaderLeftSlot: o, HeaderMiddleSlot: t, HeaderRightSlot: m };
-  }
-});
-export {
-  _ as default
-};

package/dist/components/organisms/top-bar/HeaderLeftSlot.vue2.js

@@ -1,11 +0,0 @@
-import { defineComponent as t } from "vue";
-import { InButtonV2 as e } from "@useinsider/design-system-vue";
-const _ = /* @__PURE__ */ t({
-  __name: "HeaderLeftSlot",
-  setup(o) {
-    return { __sfc: !0, InButtonV2: e };
-  }
-});
-export {
-  _ as default
-};

package/dist/components/organisms/top-bar/HeaderMiddleSlot.vue.js

@@ -1,17 +0,0 @@
-import o from "./HeaderMiddleSlot.vue2.js";
-import s from "../../../_virtual/_plugin-vue2_normalizer.js";
-var l = function() {
-  var n = this, t = n._self._c, e = n._self._setupProxy;
-  return t("div", { staticClass: "d-f" }, [t(e.InButtonV2, { attrs: { id: "guido__undo-button", "left-icon": "line-undo", styling: "ghost", type: "secondary", "label-text-status": !1 } }), t(e.InButtonV2, { attrs: { id: "guido__redo-button", "left-icon": "line-redo", styling: "ghost", type: "secondary", "label-text-status": !1 } }), t(e.InButtonV2, { attrs: { id: "guido__code-button", "left-icon": "line-code", styling: "ghost", type: "secondary", "label-text-status": !1 } }), t(e.InButtonV2, { attrs: { id: "guido__preview-button", "left-icon": "line-show-on", styling: "ghost", type: "secondary", "label-text-status": !1 } })], 1);
-}, a = [], i = /* @__PURE__ */ s(
-  o,
-  l,
-  a,
-  !1,
-  null,
-  null
-);
-const _ = i.exports;
-export {
-  _ as default
-};

package/dist/components/organisms/top-bar/HeaderMiddleSlot.vue2.js

@@ -1,11 +0,0 @@
-import { defineComponent as e } from "vue";
-import { InButtonV2 as t } from "@useinsider/design-system-vue";
-const _ = /* @__PURE__ */ e({
-  __name: "HeaderMiddleSlot",
-  setup(o) {
-    return { __sfc: !0, InButtonV2: t };
-  }
-});
-export {
-  _ as default
-};

package/dist/components/organisms/top-bar/HeaderRightSlot.vue.js

@@ -1,18 +0,0 @@
-import n from "./HeaderRightSlot.vue2.js";
-/* empty css                     */
-import o from "../../../_virtual/_plugin-vue2_normalizer.js";
-var a = function() {
-  var s = this, t = s._self._c, e = s._self._setupProxy;
-  return t("div", { staticClass: "d-f header-right-slot" }, [t("div", { staticClass: "d-f" }, [t(e.InSegments, { attrs: { id: "preview-platform-selection", "with-icon": "", selected: "desktop", "segment-list": e.segmentList } })], 1), t("div", { staticClass: "d-f" }, [t(e.InButtonV2, { attrs: { id: "guido__history-button", "left-icon": "line-architect-version-history", styling: "ghost", type: "secondary", "label-text-status": !1 } }), t(e.InButtonV2, { attrs: { id: "guido__export-button", "left-icon": "line-export", styling: "ghost", type: "secondary", "label-text-status": !1 } }), t(e.InButtonV2, { attrs: { id: "guido__save-as-button", "left-icon": "line-newsletter-save-as-template", styling: "ghost", type: "secondary", "label-text-status": !1 } }), t(e.InButtonV2, { attrs: { id: "guido__test-button", "left-icon": "line-architect-test-journey", styling: "ghost", type: "secondary", "label-text-status": !1 } })], 1), t(e.InButtonV2, { attrs: { id: "guido__save-button", "label-text": "Save" } })], 1);
-}, i = [], l = /* @__PURE__ */ o(
-  n,
-  a,
-  i,
-  !1,
-  null,
-  "9d879f6f"
-);
-const u = l.exports;
-export {
-  u as default
-};

package/dist/components/organisms/top-bar/HeaderRightSlot.vue2.js

@@ -1,14 +0,0 @@
-import { defineComponent as e } from "vue";
-import { InSegments as t, InButtonV2 as n } from "@useinsider/design-system-vue";
-const p = /* @__PURE__ */ e({
-  __name: "HeaderRightSlot",
-  setup(o) {
-    return { __sfc: !0, segmentList: [
-      { text: "", icon: "line-desktop", value: "desktop" },
-      { text: "", icon: "line-menu-mobileapp", value: "mobile" }
-    ], InButtonV2: n, InSegments: t };
-  }
-});
-export {
-  p as default
-};

package/dist/enums/defaults.enum.d.ts

@@ -1,18 +0,0 @@
-export declare const DefaultApiEndpoints: {
-    dynamicContent: string;
-    unsubPages: string;
-    header: string;
-    footer: string;
-    productName: string;
-    productVersion: string;
-    token: string;
-};
-export declare const DefaultExtensions: {
-    dynamicContent: boolean;
-    unsubPages: boolean;
-    header: boolean;
-    footer: boolean;
-};
-export declare const DefaultConfig: {
-    translationsPath: string;
-};

package/dist/stores/counter.d.ts

@@ -1,12 +0,0 @@
-export declare const useCounterStore: import("pinia").StoreDefinition<"counter", {
-    count: number;
-}, {
-    doubleCount: (state: {
-        count: number;
-    } & import("pinia").PiniaCustomStateProperties<{
-        count: number;
-    }>) => number;
-}, {
-    increment(): void;
-    decrement(): void;
-}>;