@vc-shell/framework 1.1.44 → 1.1.46

package/dist/vendor-w3c-keyname-BOm2dtJm.js

@@ -0,0 +1,121 @@
+var base = {
+  8: "Backspace",
+  9: "Tab",
+  10: "Enter",
+  12: "NumLock",
+  13: "Enter",
+  16: "Shift",
+  17: "Control",
+  18: "Alt",
+  20: "CapsLock",
+  27: "Escape",
+  32: " ",
+  33: "PageUp",
+  34: "PageDown",
+  35: "End",
+  36: "Home",
+  37: "ArrowLeft",
+  38: "ArrowUp",
+  39: "ArrowRight",
+  40: "ArrowDown",
+  44: "PrintScreen",
+  45: "Insert",
+  46: "Delete",
+  59: ";",
+  61: "=",
+  91: "Meta",
+  92: "Meta",
+  106: "*",
+  107: "+",
+  108: ",",
+  109: "-",
+  110: ".",
+  111: "/",
+  144: "NumLock",
+  145: "ScrollLock",
+  160: "Shift",
+  161: "Shift",
+  162: "Control",
+  163: "Control",
+  164: "Alt",
+  165: "Alt",
+  173: "-",
+  186: ";",
+  187: "=",
+  188: ",",
+  189: "-",
+  190: ".",
+  191: "/",
+  192: "`",
+  219: "[",
+  220: "\\",
+  221: "]",
+  222: "'"
+};
+
+var shift = {
+  48: ")",
+  49: "!",
+  50: "@",
+  51: "#",
+  52: "$",
+  53: "%",
+  54: "^",
+  55: "&",
+  56: "*",
+  57: "(",
+  59: ":",
+  61: "+",
+  173: "_",
+  186: ":",
+  187: "+",
+  188: "<",
+  189: "_",
+  190: ">",
+  191: "?",
+  192: "~",
+  219: "{",
+  220: "|",
+  221: "}",
+  222: "\""
+};
+
+var mac = typeof navigator != "undefined" && /Mac/.test(navigator.platform);
+var ie = typeof navigator != "undefined" && /MSIE \d|Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(navigator.userAgent);
+
+// Fill in the digit keys
+for (var i = 0; i < 10; i++) base[48 + i] = base[96 + i] = String(i);
+
+// The function keys
+for (var i = 1; i <= 24; i++) base[i + 111] = "F" + i;
+
+// And the alphabetic keys
+for (var i = 65; i <= 90; i++) {
+  base[i] = String.fromCharCode(i + 32);
+  shift[i] = String.fromCharCode(i);
+}
+
+// For each code that doesn't have a shift-equivalent, copy the base name
+for (var code in base) if (!shift.hasOwnProperty(code)) shift[code] = base[code];
+
+function keyName(event) {
+  // On macOS, keys held with Shift and Cmd don't reflect the effect of Shift in `.key`.
+  // On IE, shift effect is never included in `.key`.
+  var ignoreKey = mac && event.metaKey && event.shiftKey && !event.ctrlKey && !event.altKey ||
+      ie && event.shiftKey && event.key && event.key.length == 1 ||
+      event.key == "Unidentified";
+  var name = (!ignoreKey && event.key) ||
+    (event.shiftKey ? shift : base)[event.keyCode] ||
+    event.key || "Unidentified";
+  // Edge sometimes produces wrong names (Issue #3)
+  if (name == "Esc") name = "Escape";
+  if (name == "Del") name = "Delete";
+  // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8860571/
+  if (name == "Left") name = "ArrowLeft";
+  if (name == "Up") name = "ArrowUp";
+  if (name == "Right") name = "ArrowRight";
+  if (name == "Down") name = "ArrowDown";
+  return name
+}
+
+export { base as b, keyName as k };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.1.44",
+  "version": "1.1.46",
   "type": "module",
   "main": "./dist/framework.js",
   "types": "./dist/index.d.ts",
@@ -23,12 +23,16 @@
     "./tailwind.config": "./tailwind.config.ts",
     "./*": "./*"
   },
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss",
+    "index.ts"
+  ],
   "scripts": {
     "build": "shx rm -rf ./dist && tsx scripts/build.mts",
     "build:lib": "vite build",
     "build:types": "vue-tsc --declaration --emitDeclarationOnly --outDir dist",
     "type-check": "vue-tsc --noEmit",
-    "generate-icons": "tsx scripts/generate-icons.mts",
     "check-locales": "tsx scripts/check-locales.mts",
     "test": "vitest run",
     "test:watch": "vitest",
@@ -37,26 +41,33 @@
   "dependencies": {
     "@floating-ui/vue": "^1.0.6",
     "@fontsource/plus-jakarta-sans": "^5.1.0",
-    "@fortawesome/fontawesome-free": "^6.7.2",
     "@headlessui/vue": "^1.7.19",
+    "@iconify/vue": "^5.0.0",
     "@microsoft/signalr": "^8.0.0",
-    "@vavt/cm-extension": "^1.5.0",
+    "@tiptap/extension-image": "^2.23.0",
+    "@tiptap/extension-link": "^2.23.0",
+    "@tiptap/extension-placeholder": "^2.23.0",
+    "@tiptap/extension-table": "^2.23.0",
+    "@tiptap/extension-table-cell": "^2.23.1",
+    "@tiptap/extension-table-header": "^2.23.1",
+    "@tiptap/extension-table-row": "^2.23.1",
+    "@tiptap/extension-underline": "^2.23.0",
+    "@tiptap/pm": "^2.23.0",
+    "@tiptap/starter-kit": "^2.23.0",
+    "@tiptap/vue-3": "^2.23.0",
     "@vee-validate/i18n": "^4.12.4",
     "@vee-validate/rules": "^4.12.4",
     "@vuepic/vue-datepicker": "^9.0.2",
     "@vueuse/components": "^10.7.1",
     "@vueuse/core": "^10.7.1",
     "@vueuse/integrations": "^10.7.1",
-    "bootstrap-icons": "^1.11.3",
     "core-js": "^3.35.0",
     "dompurify": "^3.0.11",
     "iso-639-1": "^3.1.0",
-    "lucide-vue-next": "^0.503.0",
-    "material-symbols": "^0.31.2",
-    "md-editor-v3": "^4.20.2",
     "moment": "^2.30.1",
     "normalize.css": "^8.0.1",
     "swiper": "^6.8.4",
+    "tiptap-markdown": "^0.8.10",
     "truncate-html": "^1.1.1",
     "vee-validate": "^4.12.4",
     "vue": "^3.5.13",
@@ -70,9 +81,9 @@
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "^7.0.2",
     "@types/dompurify": "^3.0.5",
-    "@vc-shell/api-client-generator": "^1.1.44",
-    "@vc-shell/config-generator": "^1.1.44",
-    "@vc-shell/ts-config": "^1.1.44",
+    "@vc-shell/api-client-generator": "^1.1.46",
+    "@vc-shell/config-generator": "^1.1.46",
+    "@vc-shell/ts-config": "^1.1.46",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/test-utils": "^2.4.5",
     "cypress-signalr-mock": "^1.5.0",

package/shared/components/blade-navigation/components/vc-blade-navigation/_internal/vc-mobile-back-button.vue

@@ -10,9 +10,9 @@
       >
         <VcButton
           ref="buttonRef"
-          :icon="ArrowLeftIcon"
+          icon="material-arrow_back"
           icon-class="tw-text-[color:var(--neutrals-500)]"
-          icon-size="s"
+          icon-size="l"
           text
           @click="onClick"
           @contextmenu.prevent
@@ -25,7 +25,7 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 import { onLongPress } from "@vueuse/core";
-import { VcButton, ArrowLeftIcon } from "../../../../../../ui/components";
+import { VcButton } from "../../../../../../ui/components";
 import VcBreadcrumbs from "../../../../../../ui/components/molecules/vc-breadcrumbs/vc-breadcrumbs.vue";
 import type { Breadcrumbs } from "../../../../../../ui/types";
 import { OnLongPress, vOnClickOutside } from "@vueuse/components";

package/shared/components/blade-navigation/components/vc-blade-view/vc-blade-view.ts

@@ -16,8 +16,9 @@ import {
 import { BladeInstance, navigationViewLocation, BLADE_BACK_BUTTON } from "./../../../../../injection-keys";
 import { BladeVNode, CoreBladeExposed, IBladeInstance } from "../../types";
 import { toRef, watchTriggerable } from "@vueuse/core";
-import { Breadcrumbs, FALLBACK_BLADE_ID } from "../../../../..";
 import { DisplayableError } from "../../../../../core/utilities/error";
+import { Breadcrumbs } from "../../../../../ui/types";
+import { FALLBACK_BLADE_ID } from "../../../../../core/constants";
 
 /**
  * Normalizes slot content

package/shared/components/blade-navigation/composables/useBladeNavigation/internal/bladeRouteResolver.ts

@@ -123,6 +123,7 @@ export function _createBladeRouteResolver(
 
       if (toPathDecoded.startsWith(currentPathDecoded) && toSegments.length === currentSegments.length) {
         const targetRoute = routerUtils.allRoutes.find((r) => r.name === to.name);
+
         if (
           targetRoute &&
           bladeState.activeWorkspace.value &&

package/shared/components/change-password-button/change-password-button.vue

@@ -1,6 +1,6 @@
 <template>
   <SettingsMenuItem
-    :icon="SettingsBoltIcon"
+    icon="lucide-bolt"
     :title="$t('SHELL.ACCOUNT.CHANGE_PASSWORD')"
     @trigger:click="handleClick"
   />
@@ -8,7 +8,6 @@
 
 <script lang="ts" setup>
 import { SettingsMenuItem } from "../settings-menu-item";
-import { SettingsBoltIcon } from "../../../ui/components/atoms/vc-icon/icons";
 import { usePopup } from "../popup-handler/composables/usePopup";
 import { ChangePassword } from "../change-password";
 

package/shared/components/logout-button/logout-button.vue

@@ -1,6 +1,6 @@
 <template>
   <SettingsMenuItem
-    :icon="LogoutIcon"
+    icon="lucide-log-out"
     :title="$t('SHELL.ACCOUNT.LOGOUT')"
     @trigger:click="handleLogout"
   />
@@ -8,7 +8,6 @@
 
 <script lang="ts" setup>
 import { SettingsMenuItem } from "../settings-menu-item";
-import { LogoutIcon } from "../../../ui/components/atoms/vc-icon/icons";
 import { useUserManagement } from "../../../core/composables/useUserManagement";
 import { useRouter } from "vue-router";
 import { useBladeNavigation } from "../blade-navigation";

package/shared/components/notifications/components/notification-container/index.ts

@@ -1,7 +1,7 @@
 import { VcToast } from "./../../../../../ui/components";
 import { PropType, computed, defineComponent, h, toRaw } from "vue";
 import { Content, NotificationType, NotificationPosition } from "../../types";
-import { useContainer } from "../../composables";
+import { useContainer } from "../../composables/useContainer";
 
 const NotificationContainer = defineComponent({
   name: "NotificationContainer",

package/shared/components/notifications/core/notification.ts

@@ -1,6 +1,6 @@
 import { mergeProps } from "vue";
 import { Content, InternalNotificationOptions, NotificationOptions, NotificationPosition } from "../types";
-import { useContainer } from "../composables";
+import { useContainer } from "../composables/useContainer";
 
 const {
   defaultOptions,

package/shared/components/settings-menu-item/settings-menu-item.vue

@@ -18,6 +18,7 @@
             <VcIcon
               v-if="icon"
               :icon="icon"
+              size="l"
               class="vc-menu-item__icon"
             />
             <VcImage

package/shared/components/sidebar/sidebar.vue

@@ -45,7 +45,7 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { h } from "vue";
-import { VcIcon, CrossSignIcon } from "../../../ui/components";
+import { VcIcon } from "../../../ui/components";
 
 export interface Props {
   position?: "left" | "right";
@@ -79,7 +79,7 @@ defineOptions({
 const header = h("div", { class: "sidebar__header" }, [
   props.title ? h("h3", { class: "sidebar__title" }, props.title) : null,
   props.closeCross
-    ? h(VcIcon, { icon: CrossSignIcon, size: "xs", onClick: () => emit("close"), class: "sidebar__close-icon" })
+    ? h(VcIcon, { icon: "material-close", size: "m", onClick: () => emit("close"), class: "sidebar__close-icon" })
     : null,
 ]);
 </script>

package/shared/modules/dynamic/pages/dynamic-blade-list.vue

@@ -149,7 +149,8 @@ import {
 } from "vue";
 import { useI18n } from "vue-i18n";
 import { DynamicGridSchema, ListContentSchema, SettingsSchema } from "../types";
-import { useFilterBuilder, useTableTemplates } from "../composables";
+import useFilterBuilder from "../composables/useFilterBuilder";
+import { useTableTemplates } from "../composables";
 import { useFunctions } from "../../../../core/composables";
 import { IActionBuilderResult, ITableColumns } from "../../../../core/types";
 import { useToolbarReducer } from "../composables/useToolbarReducer";

package/ui/components/atoms/vc-hint/vc-hint.vue

@@ -4,6 +4,8 @@
   </div>
 </template>
 
+<script lang="ts" setup></script>
+
 <style lang="scss">
 :root {
   --hint-color: var(--neutrals-500);

package/ui/components/atoms/vc-icon/composables/use-icon.ts

@@ -90,7 +90,7 @@ export function useIcon(options: UseIconOptions) {
     const styles: Record<string, string> = {};
 
     // For SVG and Lucide icons, we need width and height
-    if (type === "svg" || type === "lucide") {
+    if (type === "svg") {
       styles.width = "1em";
       styles.height = "1em";
     }

package/ui/components/atoms/vc-icon/icons/MenuBurgerIcon.vue

@@ -1,20 +1,24 @@
-
 <template>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" :width="width" :height="height">
-  <path
-    d="M6 11H11M1 6H11M1 1H11"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-</svg>
-
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 12 12"
+    fill="none"
+    :width="width"
+    :height="height"
+  >
+    <path
+      d="M6 11H11M1 6H11M1 1H11"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
 </template>
 
 <script setup lang="ts">
 defineProps<{
-  width?: number | string
-  height?: number | string
-}>()
+  width?: number | string;
+  height?: number | string;
+}>();
 </script>

package/ui/components/atoms/vc-icon/icons/index.ts

@@ -1,27 +1 @@
-export { default as AppWindowIcon } from "./AppWindowIcon.vue"
-export { default as ArrowLeftIcon } from "./ArrowLeftIcon.vue"
-export { default as ArrowRightIcon } from "./ArrowRightIcon.vue"
-export { default as BellIcon } from "./BellIcon.vue"
-export { default as ChevronDownIcon } from "./ChevronDownIcon.vue"
-export { default as ChevronLeftIcon } from "./ChevronLeftIcon.vue"
-export { default as ChevronRightIcon } from "./ChevronRightIcon.vue"
-export { default as ChevronUpIcon } from "./ChevronUpIcon.vue"
-export { default as CircleDotsIcon } from "./CircleDotsIcon.vue"
-export { default as CrossSignIcon } from "./CrossSignIcon.vue"
-export { default as DoubleArrowLeftIcon } from "./DoubleArrowLeftIcon.vue"
-export { default as DoubleArrowRightIcon } from "./DoubleArrowRightIcon.vue"
-export { default as FulfillmentCentersIcon } from "./FulfillmentCentersIcon.vue"
-export { default as GridDotsIcon } from "./GridDotsIcon.vue"
-export { default as LogoutIcon } from "./LogoutIcon.vue"
-export { default as MenuBurgerIcon } from "./MenuBurgerIcon.vue"
-export { default as MinusSignIcon } from "./MinusSignIcon.vue"
-export { default as OffersIcon } from "./OffersIcon.vue"
-export { default as OrdersIcon } from "./OrdersIcon.vue"
-export { default as PeopleIcon } from "./PeopleIcon.vue"
-export { default as PlusSignIcon } from "./PlusSignIcon.vue"
-export { default as ProductsIcon } from "./ProductsIcon.vue"
-export { default as ProfileIcon } from "./ProfileIcon.vue"
-export { default as SearchIcon } from "./SearchIcon.vue"
-export { default as SettingsBoltIcon } from "./SettingsBoltIcon.vue"
-export { default as ShoppingCardIcon } from "./ShoppingCardIcon.vue"
-export { default as VertDotsIcon } from "./VertDotsIcon.vue"
+export { default as MenuBurgerIcon } from "./MenuBurgerIcon.vue";

package/ui/components/atoms/vc-icon/vc-bootstrap-icon.vue

@@ -1,18 +1,19 @@
 <template>
-  <i
+  <Icon
+    :icon="iconName"
     :class="[
       'vc-bootstrap-icon',
       !hasCustomSize && `vc-bootstrap-icon--${size}`,
-      iconClass,
       variant ? `vc-bootstrap-icon--${variant}` : '',
     ]"
     :style="mergedStyle"
     aria-hidden="true"
-  ></i>
+  />
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
+import { Icon } from "@iconify/vue";
 import type { IconSize, IconVariant } from "./types";
 import { useIcon } from "./composables";
 
@@ -66,16 +67,11 @@ const mergedStyle = computed(() => {
 });
 
 // Compute proper Bootstrap icon class
-const iconClass = computed(() => {
+const iconName = computed(() => {
   if (!props.icon) return "";
 
-  // If already includes the bi- prefix, use as is
-  if (props.icon.startsWith("bi-")) {
-    return props.icon;
-  }
-
-  // Otherwise, add the bi- prefix
-  return `bi-${props.icon}`;
+  const icon = props.icon.startsWith("bi-") ? props.icon.substring(3) : props.icon;
+  return `bi:${icon}`;
 });
 </script>
 

package/ui/components/atoms/vc-icon/vc-fontawesome-icon.vue

@@ -1,18 +1,15 @@
 <template>
-  <i
-    :class="[
-      'vc-fa-icon',
-      !hasCustomSize && `vc-fa-icon--${size}`,
-      iconClasses,
-      variant ? `vc-fa-icon--${variant}` : '',
-    ]"
+  <Icon
+    :icon="iconName"
+    :class="['vc-fa-icon', !hasCustomSize && `vc-fa-icon--${size}`, variant ? `vc-fa-icon--${variant}` : '']"
     :style="mergedStyle"
     aria-hidden="true"
-  ></i>
+  />
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
+import { Icon } from "@iconify/vue";
 import type { IconSize, IconVariant } from "./types";
 import { useIcon } from "./composables";
 
@@ -65,31 +62,40 @@ const mergedStyle = computed(() => {
   return styles;
 });
 
-// Compute the FontAwesome class from the icon string
-const iconClasses = computed(() => {
-  // If icon already has a style prefix (fas, far, fal, fab), use it as is
-  if (
-    props.icon.startsWith("fas ") ||
-    props.icon.startsWith("far ") ||
-    props.icon.startsWith("fal ") ||
-    props.icon.startsWith("fab ") ||
-    props.icon.startsWith("fad ")
-  ) {
-    return props.icon;
+const iconName = computed(() => {
+  const iconParts = props.icon.split(" ");
+  let style = "solid";
+  let name = props.icon;
+
+  if (iconParts.length > 1) {
+    const prefix = iconParts[0];
+    name = iconParts.slice(1).join(" ").replace("fa-", "");
+
+    switch (prefix) {
+      case "fas":
+        style = "solid";
+        break;
+      case "far":
+        style = "regular";
+        break;
+      case "fab":
+        style = "brands";
+        break;
+      case "fal":
+        style = "light";
+        break;
+      case "fad":
+        style = "duotone";
+        break;
+      default:
+        name = props.icon.replace("fa-", "");
+        break;
+    }
+  } else {
+    name = name.replace("fa-", "");
   }
 
-  // If icon starts with fa-, add the default style prefix
-  if (props.icon.startsWith("fa-")) {
-    return `fas ${props.icon}`;
-  }
-
-  // If icon contains fa- but doesn't start with a style prefix, assume the style prefix is included
-  if (props.icon.includes("fa-")) {
-    return props.icon;
-  }
-
-  // Otherwise, assume it's a bare icon name and add both the style prefix and fa- prefix
-  return `fas fa-${props.icon}`;
+  return `fa-${style}:${name}`;
 });
 </script>
 

package/ui/components/atoms/vc-icon/vc-icon-examples.vue

@@ -496,7 +496,7 @@
         </div>
         <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-border tw-border-gray-200 tw-rounded-lg tw-shadow-sm">
           <VcIcon
-            icon="material-highlight_off"
+            icon="material-cancel"
             variant="danger"
             size="xl"
           />

package/ui/components/atoms/vc-icon/vc-icon.stories.ts

@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3";
 import { VcIcon } from "./index";
-import { SearchIcon, ChevronRightIcon, PlusSignIcon } from "./icons";
 import VcIconTest from "./vc-icon-test.vue";
 import VcIconExamples from "./vc-icon-examples.vue";
 
@@ -413,7 +412,7 @@ export const FontAwesomeIcons: Story = {
  */
 export const CustomSvgIcon: Story = {
   args: {
-    icon: SearchIcon,
+    icon: "material-search",
     size: "l",
   },
   parameters: {
@@ -523,7 +522,7 @@ export const VariantWarning: Story = {
  */
 export const VariantDanger: Story = {
   args: {
-    icon: "material-highlight_off",
+    icon: "material-cancel",
     size: "l",
     variant: "danger",
   },
@@ -652,9 +651,9 @@ export const StatusIcons: Story = {
       const statusIcons = [
         { icon: "material-check_circle", variant: "success", label: "In Stock" },
         { icon: "material-error_outline", variant: "warning", label: "Low Stock" },
-        { icon: "material-highlight_off", variant: "danger", label: "Out of Stock" },
+        { icon: "material-cancel", variant: "danger", label: "Out of Stock" },
         { icon: "material-local_shipping", variant: "success", label: "Shipped" },
-        { icon: "material-access_time", variant: "warning", label: "Processing" },
+        { icon: "material-schedule", variant: "warning", label: "Processing" },
         { icon: "material-inventory_2", variant: undefined, label: "New Arrival" },
         { icon: "material-verified", variant: "success", label: "Verified" },
         { icon: "material-percent", variant: undefined, label: "On Sale" },