@voicenter-team/voicenter-ui-plus 2.0.10 → 3.0.0

package/library/theme/index.mjs

@@ -0,0 +1,80 @@
+import __themes from "./themes.json.mjs";
+import { overrideElementTheme as overrideElementTheme$1, globalVariables } from "./themeMerge.mjs";
+const _default = __themes.redGreen;
+const themes = __themes;
+const overrideElementTheme = overrideElementTheme$1;
+function appendGlobalCssVariables(cssData, appendTo) {
+  Object.entries(cssData).forEach(([variableName, variableValue]) => {
+    appendTo.style.setProperty(`--${variableName}`, variableValue);
+  });
+}
+async function getThemeConfigData(themeConfig) {
+  let currentTheme = _default;
+  if (themeConfig) {
+    if (themeConfig.type === "local") {
+      if (themes[themeConfig.themeName]) {
+        currentTheme = themes[themeConfig.themeName];
+      } else {
+        console.warn(`[VoicenterUI-plus] No such theme: ${themeConfig.themeName}`);
+      }
+    }
+    if (themeConfig.type === "remote") {
+      let body = JSON.stringify(
+        {
+          SectionList: [
+            themeConfig.brandingSectionName
+          ],
+          Domain: window.location.hostname
+        }
+      );
+      if (themeConfig.payloadData) {
+        body = JSON.stringify(themeConfig.payloadData);
+      }
+      const apiStyling = await fetch(themeConfig.apiUrl, {
+        method: "POST",
+        cache: "no-cache",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        referrerPolicy: "no-referrer",
+        body
+      }).then((res) => res.json()).then((res) => res.Data).then((res) => {
+        return Object.fromEntries(Object.entries(res).map(([key, value]) => {
+          return [
+            key.replace(`${themeConfig.brandingSectionName}.`, ""),
+            String(value)
+          ];
+        }));
+      }).catch((e) => console.error(e));
+      if (apiStyling) {
+        currentTheme = apiStyling;
+      }
+    }
+    if (themeConfig.type === "customJson") {
+      currentTheme = themeConfig.config ?? {};
+    }
+  }
+  return currentTheme;
+}
+async function Theme(themeConfig, appendTo = document.documentElement) {
+  if ((themeConfig == null ? void 0 : themeConfig.type) === "none") {
+    return (themeConfig == null ? void 0 : themeConfig.onSetupCallback) ? themeConfig == null ? void 0 : themeConfig.onSetupCallback({}) : {};
+  }
+  const currentTheme = await getThemeConfigData(themeConfig);
+  appendGlobalCssVariables(
+    {
+      ...overrideElementTheme(currentTheme),
+      ...globalVariables
+    },
+    appendTo
+  );
+  if (themeConfig == null ? void 0 : themeConfig.onSetupCallback) {
+    themeConfig.onSetupCallback(currentTheme);
+  }
+}
+export {
+  appendGlobalCssVariables,
+  Theme as default,
+  getThemeConfigData,
+  overrideElementTheme
+};

package/library/theme/themeMerge.mjs

@@ -0,0 +1,31 @@
+const globalVariables = {
+  "input-font-size": "0.875rem",
+  "input-font-weight": "500",
+  "select-option-height": "2rem",
+  "base-border-radius": "0.25rem"
+};
+function overrideElementTheme(theme) {
+  return {
+    ...theme,
+    "el-color-primary": theme["el-color-primary"] ?? theme.primary,
+    "el-color-success": theme["el-color-success"] ?? theme.success,
+    "el-color-warning": theme["el-color-warning"] ?? theme.warning,
+    "el-color-danger": theme["el-color-danger"] ?? theme.error,
+    "el-color-error": theme["el-color-error"] ?? theme.error,
+    "el-color-info": theme["el-color-info"] ?? theme["secondary"],
+    "el-fill-color": theme["el-fill-color"] ?? theme["field-bg"],
+    "el-text-color-primary": theme["el-text-color-primary"] ?? theme["default-text"],
+    "el-text-color-regular": theme["el-text-color-regular"] ?? theme["default-text"],
+    "el-text-color-placeholder": theme["el-text-color-placeholder"] ?? theme.placeholders,
+    "el-disabled-text-color": theme["el-disabled-text-color"] ?? theme["inactive-text"],
+    "el-text-color-disabled": theme["el-text-color-disabled"] ?? theme["inactive-text"],
+    transparent: "transparent",
+    white: "#FFFFFF",
+    black: "#000000",
+    current: "currentColor"
+  };
+}
+export {
+  globalVariables,
+  overrideElementTheme
+};

package/library/theme/themes.json.mjs

@@ -0,0 +1,240 @@
+const blue = {
+  "card-shadow-color": "#E0E2E5",
+  "card-bg-color": "#fff",
+  "table-shadow-color": "#EBEBEB",
+  "default-text": "#263148",
+  "primary-text": "#263148",
+  "secondary-text": "#567391",
+  "heading-text": "#263148",
+  "active-elements": "#2675FF",
+  "inactive-elements": "#BEC2C9",
+  primary: "#2675FF",
+  "primary-alternative": "#2675FF",
+  secondary: "#BEC2C9",
+  destructive: "#FF4D4D",
+  "ui-lines": "#EBEBEB",
+  "major-ui-lines": "#E0E2E5",
+  "progress-line-done": "#2675FF",
+  "progress-line-not-done": "#BEC2C9",
+  icons: "#2675FF",
+  headers: "#263148",
+  placeholders: "#9EA6B2",
+  "field-borders": "#EBEBEB",
+  "field-bg": "#FFFFFF",
+  "table-headings": "#2675FF",
+  "inactive-text": "#888F9D",
+  "default-loader": "#FFFFFF",
+  "skeleton-loader": "#EDEDED",
+  "skeleton-loader-animation": "#ffffff59",
+  transparent: "transparent",
+  current: "currentColor",
+  error: "#FF4D4D",
+  success: "#7ED321",
+  warning: "#FAB11E",
+  white: "#FFFFFF",
+  black: "#000000",
+  "light-bg": "#FFFFFF",
+  "main-bg": "#F5F6FA",
+  "dark-bg": "#E0E2E5",
+  "btn-filled-text": "#FFF",
+  "overlay-bg": "#000",
+  "scrollbar-track": "#f1f1f1",
+  "scrollbar-thumb": "#888",
+  "scrollbar-thumb-hover": "#555",
+  "actions-mix-color": "#000000"
+};
+const red = {
+  "card-shadow-color": "#CCCCCC",
+  "card-bg-color": "#fff",
+  "table-shadow-color": "#EBEBEB",
+  "default-text": "#575757",
+  "heading-text": "#575757",
+  "primary-text": "#263148",
+  "secondary-text": "#567391",
+  "active-elements": "#5969E4",
+  "inactive-elements": "#8292A5",
+  "primary-alternative": "#EC444D",
+  primary: "#fc0303",
+  secondary: "#8292A5",
+  destructive: "#EC444D",
+  "ui-lines": "#E0E2E5",
+  "major-ui-lines": "#FFCCCE",
+  "progress-line-done": "#575757",
+  "progress-line-not-done": "#8292A5",
+  icons: "#0E5263",
+  headers: "#263148",
+  placeholders: "#9EA6B2",
+  "field-borders": "#BEC2C9",
+  "field-bg": "#FFFFFF",
+  "table-headings": "#0E5263",
+  "inactive-text": "#888F9D",
+  "default-loader": "#FFFFFF",
+  "skeleton-loader": "#EDEDED",
+  "skeleton-loader-animation": "#ffffff59",
+  transparent: "transparent",
+  current: "currentColor",
+  error: "#EC444D",
+  success: "#0EB886",
+  warning: "#ECA944",
+  white: "#FFFFFF",
+  black: "#000000",
+  "light-bg": "#FFFFFF",
+  "main-bg": "#F7FAFC",
+  "dark-bg": "#FFCCCE",
+  "btn-filled-text": "#FFF",
+  "overlay-bg": "#000",
+  "scrollbar-track": "#f1f1f1",
+  "scrollbar-thumb": "#888",
+  "scrollbar-thumb-hover": "#555",
+  "actions-mix-color": "#000000"
+};
+const redGreen = {
+  "card-shadow-color": "#CCCCCC",
+  "card-bg-color": "#fff",
+  "table-shadow-color": "#EBEBEB",
+  "default-text": "#263148",
+  "heading-text": "#263148",
+  "primary-text": "#263148",
+  "secondary-text": "#567391",
+  "active-elements": "#D34C4C",
+  "inactive-elements": "#8292A5",
+  "primary-alternative": "#19815A",
+  primary: "#D34C4C",
+  secondary: "#8292A5",
+  destructive: "#FF4D4D",
+  "ui-lines": "#E0E2E5",
+  "major-ui-lines": "#FFCCCE",
+  "progress-line-done": "#575757",
+  "progress-line-not-done": "#8292A5",
+  icons: "#D34C4C",
+  headers: "#263148",
+  placeholders: "#9EA6B2",
+  "field-borders": "#BEC2C9",
+  "field-bg": "#FFFFFF",
+  "table-headings": "#D34C4C",
+  "inactive-text": "#888F9D",
+  "default-loader": "#FFFFFF",
+  "skeleton-loader": "#EDEDED",
+  "skeleton-loader-animation": "#ffffff59",
+  transparent: "transparent",
+  current: "currentColor",
+  error: "#EC444D",
+  success: "#0EB886",
+  warning: "#ECA944",
+  white: "#FFFFFF",
+  black: "#000000",
+  "light-bg": "#FFFFFF",
+  "main-bg": "#F7FAFC",
+  "dark-bg": "#FFCCCE",
+  "btn-filled-text": "#FFF",
+  "overlay-bg": "#000",
+  "scrollbar-track": "#f1f1f1",
+  "scrollbar-thumb": "#888",
+  "scrollbar-thumb-hover": "#555",
+  "actions-mix-color": "#000000"
+};
+const black = {
+  "default-text": "#FFF",
+  "heading-text": "#FFF",
+  "primary-text": "#FFF",
+  "secondary-text": "#FFF",
+  "card-shadow-color": "#EBEBEB",
+  "card-bg-color": "#000",
+  "active-elements": "#D34C4C",
+  "inactive-elements": "#8292A5",
+  "primary-alternative": "#0f8ea7",
+  primary: "#D34C4C",
+  secondary: "#8292A5",
+  destructive: "#711132",
+  "ui-lines": "#474747",
+  "major-ui-lines": "#E0E2E5",
+  "progress-line-done": "#575757",
+  "progress-line-not-done": "#363636",
+  icons: "#07687B",
+  headers: "#338ea9",
+  placeholders: "#CCCCCC",
+  "field-borders": "#E0E2E5",
+  "field-bg": "#151515",
+  "table-headings": "#338ea9",
+  "table-shadow-color": "#EBEBEB",
+  "inactive-text": "#CCCCCC",
+  "default-loader": "#FFFFFF",
+  "skeleton-loader": "#3b3d41",
+  "skeleton-loader-animation": "#00000059",
+  error: "#dc3643",
+  success: "#13a363",
+  warning: "#ffb341",
+  transparent: "transparent",
+  current: "currentColor",
+  white: "#FFFFFF",
+  black: "#000000",
+  "light-bg": "#000",
+  "main-bg": "#202124",
+  "dark-bg": "#131212",
+  "btn-filled-text": "#FFF",
+  "overlay-bg": "#636c78",
+  "scrollbar-track": "#f1f1f1",
+  "scrollbar-thumb": "#888",
+  "scrollbar-thumb-hover": "#555",
+  "actions-mix-color": "#FFF"
+};
+const voicenterRed = {
+  "card-shadow-color": "#0000001f",
+  "card-bg-color": "#ffffff",
+  "table-shadow-color": "#00000012",
+  "default-text": "#525D70",
+  "heading-text": "#161922",
+  "primary-text": "#161922",
+  "secondary-text": "#525D70",
+  "active-elements": "#E80130",
+  "inactive-elements": "#A6B0C0",
+  "primary-alternative": "#cf1137",
+  primary: "#E80130",
+  secondary: "#567391",
+  destructive: "#720118",
+  "ui-lines": "#E2E6EE",
+  "major-ui-lines": "#CDD4E0",
+  "progress-line-done": "#0eb886",
+  "progress-line-not-done": "#cfd8e1",
+  icons: "#161922",
+  headers: "#161922",
+  placeholders: "#567391",
+  "field-borders": "#CDD4E0",
+  "field-bg": "#FFFFFF",
+  "table-headings": "#161922",
+  "inactive-text": "#A6B0C0",
+  "default-loader": "#FFFFFF",
+  "skeleton-loader": "#EEF1F4",
+  "skeleton-loader-animation": "#ffffff59",
+  transparent: "transparent",
+  current: "currentColor",
+  error: "#720118",
+  success: "#0eb886",
+  warning: "#D67804",
+  white: "#FFFFFF",
+  black: "#000000",
+  "light-bg": "#FFFFFF",
+  "main-bg": "#F8F9FB",
+  "dark-bg": "#EEF1F4",
+  "btn-filled-text": "#FFFFFF",
+  "overlay-bg": "#161922",
+  "scrollbar-track": "#FFFFFF",
+  "scrollbar-thumb": "#E2E6EE",
+  "scrollbar-thumb-hover": "#949EAF",
+  "actions-mix-color": "#161922"
+};
+const __themes = {
+  blue,
+  red,
+  redGreen,
+  black,
+  voicenterRed
+};
+export {
+  black,
+  blue,
+  __themes as default,
+  red,
+  redGreen,
+  voicenterRed
+};

package/library/tokens/tokens.mjs

@@ -0,0 +1,17 @@
+import { globalSymbol } from "../utils/globalSingleton.mjs";
+const VcCollapseProvideKey = globalSymbol("CollapseProvideKey");
+const VcTabsProvideKey = globalSymbol("VcTabsProvideKey");
+const VcTabPaneProvideKey = globalSymbol("VcTabPaneProvideKey");
+const VcSoundPlayerProvideKey = globalSymbol("VcSoundPlayerProvideKey");
+const VcEntityToken = globalSymbol("entity");
+const VcEditableTabsDataToken = globalSymbol("editableTabsData");
+const VcEntityListTableExternalPaginateToken = globalSymbol("entityListTableExternalPaginate");
+export {
+  VcCollapseProvideKey,
+  VcEditableTabsDataToken,
+  VcEntityListTableExternalPaginateToken,
+  VcEntityToken,
+  VcSoundPlayerProvideKey,
+  VcTabPaneProvideKey,
+  VcTabsProvideKey
+};

package/library/types/VcMdEditor.types.mjs

@@ -0,0 +1,6 @@
+function isGroupParameter(item) {
+  return "options" in item && Array.isArray(item.options);
+}
+export {
+  isGroupParameter
+};

package/library/types/components/VcAutocomplete/VcAutocomplete.vue.d.ts

@@ -0,0 +1,197 @@
+import { AutocompleteFetchSuggestions } from 'element-plus';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: import("vue").PropType<string>;
+    id: {
+        type: import("vue").PropType<string>;
+        default: undefined;
+    };
+    size: {
+        type: import("vue").PropType<"" | "small" | "default" | "large">;
+        default: string;
+    };
+    color: {
+        type: import("vue").PropType<"" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative">;
+        default: string;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    name: {
+        type: import("vue").PropType<string>;
+        default: undefined;
+    };
+    placeholder: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    popperClass: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    teleported: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    fetchSuggestions: {
+        type: import("vue").PropType<AutocompleteFetchSuggestions>;
+        required: true;
+    };
+    valueKey: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    debounce: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    clearable: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    highlightFirstItem: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    fitInputWidth: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    triggerOnFocus: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    dataTestName: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    prefixIconColor: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    prefixIcon: {
+        type: import("vue").PropType<import('../../types').TIcon>;
+        default: string;
+    };
+    prefixIconSize: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (pl: string) => void;
+    select: (pl: unknown) => void;
+    change: (pl: string) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: import("vue").PropType<string>;
+    id: {
+        type: import("vue").PropType<string>;
+        default: undefined;
+    };
+    size: {
+        type: import("vue").PropType<"" | "small" | "default" | "large">;
+        default: string;
+    };
+    color: {
+        type: import("vue").PropType<"" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative">;
+        default: string;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    name: {
+        type: import("vue").PropType<string>;
+        default: undefined;
+    };
+    placeholder: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    popperClass: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    teleported: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    fetchSuggestions: {
+        type: import("vue").PropType<AutocompleteFetchSuggestions>;
+        required: true;
+    };
+    valueKey: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    debounce: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    clearable: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    highlightFirstItem: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    fitInputWidth: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    triggerOnFocus: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    dataTestName: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    prefixIconColor: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    prefixIcon: {
+        type: import("vue").PropType<import('../../types').TIcon>;
+        default: string;
+    };
+    prefixIconSize: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((pl: string) => any) | undefined;
+    onChange?: ((pl: string) => any) | undefined;
+    onSelect?: ((pl: unknown) => any) | undefined;
+}>, {
+    id: string;
+    size: "" | "small" | "default" | "large";
+    color: "" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative";
+    disabled: boolean;
+    name: string;
+    placeholder: string;
+    popperClass: string;
+    teleported: boolean;
+    valueKey: string;
+    debounce: number;
+    clearable: boolean;
+    highlightFirstItem: boolean;
+    fitInputWidth: boolean;
+    triggerOnFocus: boolean;
+    dataTestName: string;
+    prefixIconColor: string;
+    prefixIcon: import('../../types').TIcon;
+    prefixIconSize: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    "prefix-icon"?(_: {}): any;
+    suffix?(_: {}): any;
+    option?(_: {
+        item: import("element-plus/es/components/autocomplete/src/autocomplete").AutocompleteDataItem;
+    }): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/library/types/components/VcButton/VcButton.vue.d.ts

@@ -0,0 +1,99 @@
+import { ButtonColor, ButtonElementType, ButtonSize, ButtonType } from '../../types';
+import { TIcon } from '../../types/icons.types';
+interface IProps {
+    /** @description Whether the button is disabled and cannot be clicked */
+    disabled?: boolean;
+    /** @description Whether the button is in loading state with a spinner */
+    loading?: boolean;
+    /** @description Whether the button should take full width of its container */
+    block?: boolean;
+    /** @description Data attribute for testing purposes */
+    dataTestName?: string;
+    /**
+     * @description Icon shown inside the loader overlay. Accepts a class
+     * string (legacy `vc-icon-*`) or a Vue component (e.g. a Lucide icon
+     * from `@lucide/vue`).
+     */
+    loaderIcon?: TIcon;
+    /** @description Size variant of the button */
+    size?: ButtonSize;
+    /** @description Visual style variant of the button */
+    type?: ButtonType;
+    /**
+     * @description Icon shown before the button text. Accepts a class
+     * string (legacy `vc-icon-*`) or a Vue component (e.g. a Lucide icon
+     * from `@lucide/vue`). For full control, use the `#icon` slot instead.
+     */
+    icon?: TIcon;
+    /** @description Color theme of the button */
+    color?: ButtonColor;
+    /** @description Native HTML button type attribute */
+    buttonType?: ButtonElementType;
+    /** @description Round property, determine whether it's a round button */
+    round?: boolean;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IProps>, {
+    block: boolean;
+    buttonType: string;
+    color: string;
+    dataTestName: string;
+    disabled: boolean;
+    icon: string;
+    loading: boolean;
+    loaderIcon: string;
+    size: string;
+    type: string;
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (pl: MouseEvent) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IProps>, {
+    block: boolean;
+    buttonType: string;
+    color: string;
+    dataTestName: string;
+    disabled: boolean;
+    icon: string;
+    loading: boolean;
+    loaderIcon: string;
+    size: string;
+    type: string;
+}>>> & Readonly<{
+    onClick?: ((pl: MouseEvent) => any) | undefined;
+}>, {
+    size: ButtonSize;
+    icon: TIcon;
+    color: "" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative";
+    type: ButtonType;
+    disabled: boolean;
+    loading: boolean;
+    dataTestName: string;
+    block: boolean;
+    loaderIcon: TIcon;
+    buttonType: ButtonElementType;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    icon?(_: {}): any;
+    default?(_: {}): any;
+    loader?(_: {}): 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_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};