npm - @vc-shell/framework - Versions diffs - 1.2.4-beta.3 → 1.2.4-beta.5 - Mend

@vc-shell/framework 1.2.4-beta.3 → 1.2.4-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1076) hide show

package/ui/components/molecules/vc-dropdown/vc-dropdown.vue CHANGED Viewed

@@ -456,6 +456,9 @@ onBeforeUnmount(() => {
   --vc-dropdown-accent: var(--neutrals-100);
   --vc-dropdown-accent-foreground: var(--neutrals-900);
   --vc-dropdown-divider: var(--neutrals-200);
+  --vc-dropdown-trigger-focus-ring-width: 2px;
+  --vc-dropdown-trigger-focus-ring-offset: 1px;
+  --vc-dropdown-trigger-focus-ring-color: var(--primary-300);
   @apply tw-relative tw-flex tw-w-full tw-h-full;
@@ -463,7 +466,10 @@ onBeforeUnmount(() => {
     @apply tw-flex tw-items-center tw-justify-center;
     &:focus-visible {
-      @apply tw-outline-none tw-ring-2 tw-ring-primary-500 tw-ring-offset-1;
+      @apply tw-outline-none
+        tw-ring-[length:var(--vc-dropdown-trigger-focus-ring-width)]
+        tw-ring-offset-[length:var(--vc-dropdown-trigger-focus-ring-offset)]
+        tw-ring-[color:var(--vc-dropdown-trigger-focus-ring-color)];
     }
   }

package/ui/components/molecules/vc-dropdown-panel/vc-dropdown-panel.vue CHANGED Viewed

@@ -178,6 +178,17 @@ const handlePointerDownOutside = (e: PointerEvent) => {
       return;
     }
   }
+  // Handle teleported child dropdowns (e.g. VcSelect dropdown inside this panel).
+  // VcSelect teleports its dropdown to <body>, so it's outside our DOM tree.
+  // We identify ownership via the ARIA contract: the dropdown has id="listboxId"
+  // and the trigger inside our panel has aria-controls="listboxId".
+  const selectDropdown = target.closest?.(".vc-select__dropdown");
+  if (selectDropdown && floatingRef.value) {
+    const listboxId = selectDropdown.getAttribute("id");
+    if (listboxId && floatingRef.value.querySelector(`[aria-controls="${listboxId}"]`)) {
+      return;
+    }
+  }
   close();
 };

package/ui/components/molecules/vc-editor/_internal/vc-editor-button.vue CHANGED Viewed

@@ -20,26 +20,20 @@
 <script lang="ts" setup>
 import { VcIcon } from "@ui/components/atoms";
-defineProps({
-  icon: {
-    type: String,
-    required: true,
-  },
-  active: {
-    type: Boolean,
-    default: undefined,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  ariaLabel: {
-    type: String,
-    default: undefined,
-  },
+interface Props {
+  icon: string;
+  active?: boolean;
+  disabled?: boolean;
+  ariaLabel?: string;
+}
+withDefaults(defineProps<Props>(), {
+  disabled: false,
 });
-defineEmits(["action"]);
+defineEmits<{
+  action: [];
+}>();
 </script>
 <style lang="scss">
@@ -54,7 +48,7 @@ defineEmits(["action"]);
   --vc-button-bg-active: var(--primary-100);
   --vc-button-bg-disabled: transparent;
   --vc-button-border-radius: 6px;
-  --vc-editor-focus-ring-color: rgba(59, 130, 246, 0.3);
+  --vc-editor-focus-ring-color: color-mix(in srgb, var(--primary-500) 30%, transparent);
 }
 .vc-editor-button {

package/ui/components/molecules/vc-editor/index.ts CHANGED Viewed

@@ -1,6 +1,15 @@
-export { default as VcEditor } from "@ui/components/molecules/vc-editor/vc-editor.vue";
-export type {
-  CustomToolbarButton,
-  CustomToolbarDropdown,
-  CustomToolbarItem,
-} from "@ui/components/molecules/vc-editor/_internal/toolbar-types";
+import { defineAsyncComponent } from "vue";
+type VcEditorComponent = typeof import("./vc-editor.vue")["default"];
+export const VcEditor = defineAsyncComponent({
+  loader: () => import("./vc-editor.vue"),
+  delay: 200,
+  timeout: 10000,
+  suspensible: false,
+}) as VcEditorComponent;
+export type {
+  CustomToolbarButton,
+  CustomToolbarDropdown,
+  CustomToolbarItem,
+} from "./_internal/toolbar-types";

package/ui/components/molecules/vc-editor/vc-editor.vue CHANGED Viewed

@@ -176,7 +176,8 @@ import { format } from "prettier/standalone";
 import * as prettierPluginHtml from "prettier/parser-html";
 // eslint-disable-next-line import/no-named-as-default
 import DOMPurify from "dompurify";
-import { VcLabel, VcHint } from "@ui/components";
+import { VcLabel } from "@ui/components/atoms/vc-label";
+import { VcHint } from "@ui/components/atoms/vc-hint";
 import VcEditorToolbar from "@ui/components/molecules/vc-editor/_internal/vc-editor-toolbar.vue";
 import VcEditorButton from "@ui/components/molecules/vc-editor/_internal/vc-editor-button.vue";
 import type { CustomToolbarItem } from "@ui/components/molecules/vc-editor/_internal/toolbar-types";
@@ -452,11 +453,18 @@ function toggleSideBySideView() {
   editorMode.value = editorMode.value === "split" ? "editor" : "split";
 }
+// Guard flag: prevents emitting update:modelValue when content is set
+// programmatically from prop watcher (e.g., language switch), not from user input.
+let settingContentFromProp = false;
 const editor = useEditor({
   content: props.modelValue,
   editable: !props.disabled,
   extensions: extensions.value,
   onUpdate: ({ editor: tipTapEditor }) => {
+    // Skip emit when content was set programmatically from prop change
+    if (settingContentFromProp) return;
     // Always output in Markdown by default, unless HTML is detected
     const output =
       detectedType.value === "html"
@@ -489,7 +497,9 @@ watch(
         : (editor.value.storage as any).markdown?.getMarkdown?.() || editor.value.getHTML();
     if (editorContent !== value) {
+      settingContentFromProp = true;
       editor.value.commands.setContent(value || "");
+      settingContentFromProp = false;
     }
   },
 );
@@ -562,7 +572,7 @@ async function handleImageSelection(event: Event) {
   --vc-editor-background-disabled: var(--neutrals-200);
   --vc-editor-focus-border: var(--primary-500);
   --vc-editor-focus-shadow: var(--primary-500);
-  --vc-editor-focus-ring-color: rgba(59, 130, 246, 0.3);
+  --vc-editor-focus-ring-color: color-mix(in srgb, var(--primary-500) 30%, transparent);
   --vc-editor-error-border: var(--danger-500);
   --vc-editor-error-text: var(--danger-500);
   --vc-editor-error-ring-color: rgba(239, 68, 68, 0.2);
@@ -819,17 +829,5 @@ async function handleImageSelection(event: Event) {
     }
   }
-  .slide-up-enter-active,
-  .slide-up-leave-active {
-    @apply tw-transition-all tw-duration-[250ms] tw-ease-out;
-  }
-  .slide-up-enter-from {
-    @apply tw-opacity-0 tw-translate-y-[5px];
-  }
-  .slide-up-leave-to {
-    @apply tw-opacity-0 tw--translate-y-[5px];
-  }
 }
 </style>

package/ui/components/molecules/vc-field/_internal/vc-field-type/vc-field-type.vue CHANGED Viewed

@@ -21,7 +21,7 @@
   <template v-if="type === 'date-ago'">
     <div class="vc-field-type">
       <div class="vc-field-type__text-wrap">
-        <p class="vc-field-type__text">{{ value instanceof Date ? (moment(value).fromNow() ?? "N/A") : value }}</p>
+        <p class="vc-field-type__text">{{ value instanceof Date ? (formatDateRelative(value) ?? "N/A") : value }}</p>
       </div>
     </div>
   </template>
@@ -56,7 +56,7 @@
 </template>
 <script lang="ts" setup>
-import moment from "moment";
+import { formatDateRelative } from "@core/utilities/date";
 export interface Props {
   type: "text" | "date" | "date-ago" | "link" | "email";

package/ui/components/molecules/vc-field/vc-field.vue CHANGED Viewed

@@ -42,7 +42,8 @@
 <script lang="ts" setup>
 import { ref } from "vue";
-import { VcLabel, VcCol } from "@ui/components";
+import { VcLabel } from "@ui/components/atoms/vc-label";
+import { VcCol } from "@ui/components/atoms/vc-col";
 import VcFieldType from "@ui/components/molecules/vc-field/_internal/vc-field-type/vc-field-type.vue";
 export interface Props {

package/ui/components/molecules/vc-file-upload/vc-file-upload.stories.ts CHANGED Viewed

@@ -2,8 +2,6 @@ import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcFileUpload } from "@ui/components/molecules/vc-file-upload";
 import { ref } from "vue";
-const VARIANT = ["gallery", "file-upload"];
 /**
  * `VcFileUpload` is a component for uploading files with support for
  * drag-and-drop and browsing from file system.
@@ -13,7 +11,6 @@ const meta = {
   component: VcFileUpload,
   tags: ["autodocs"],
   args: {
-    variant: "gallery",
     loading: false,
     accept: ".jpg, .png, .jpeg, .webp, .heic, .svg",
     multiple: false,
@@ -21,16 +18,6 @@ const meta = {
     icon: "material-cloud_upload",
   },
   argTypes: {
-    variant: {
-      description: "Display mode for the file upload component",
-      control: "radio",
-      options: VARIANT,
-      table: {
-        category: "Appearance",
-        type: { summary: VARIANT.join(" | ") },
-        defaultValue: { summary: "gallery" },
-      },
-    },
     onUpload: {
       description: "Event emitted when files are uploaded",
       table: {
@@ -102,11 +89,40 @@ const meta = {
         defaultValue: { summary: "undefined" },
       },
     },
+    disabled: {
+      description: "Whether the file upload is disabled",
+      control: "boolean",
+      table: {
+        category: "State",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    required: {
+      description: "Whether the field is required",
+      control: "boolean",
+      table: {
+        category: "Validation",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
     error: {
-      description: "Slot for custom error message",
+      description: "External error flag (also available as slot)",
+      control: "boolean",
+      table: {
+        category: "Validation",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    errorMessage: {
+      description: "Error message text — also sets error state when truthy",
+      control: "text",
       table: {
-        category: "Slots",
-        type: { summary: "VNode | string" },
+        category: "Validation",
+        type: { summary: "string" },
+        defaultValue: { summary: "undefined" },
       },
     },
   },
@@ -116,7 +132,7 @@ const meta = {
         component: `
 The VcFileUpload component provides functionality for uploading files with the following features:
-- Two display variants: gallery view (square) and standard file upload (full width)
+- Full-width layout, sized by its container
 - Support for drag and drop file uploads
 - File type filtering through the accept property
 - Multiple file upload support
@@ -130,7 +146,6 @@ The VcFileUpload component provides functionality for uploading files with the f
 \`\`\`vue
 <template>
   <VcFileUpload
-    variant="gallery"
     accept=".jpg, .png"
     :multiple="true"
     @upload="handleUpload"
@@ -154,13 +169,10 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 /**
- * Gallery variant provides a square upload area, suitable for image uploads
- * and grid layouts.
+ * Default full-width upload area, sized by its container.
  */
-export const Gallery: Story = {
-  args: {
-    variant: "gallery",
-  },
+export const Default: Story = {
+  args: {},
   render: (args) => ({
     components: { VcFileUpload },
     setup() {
@@ -185,13 +197,11 @@ export const Gallery: Story = {
 };
 /**
- * File upload variant provides a wider upload area that spans the full width
- * of its container, suitable for form integrations.
+ * Full-width upload area constrained by a max-width container,
+ * suitable for form integrations.
  */
 export const FileUpload: Story = {
-  args: {
-    variant: "file-upload",
-  },
+  args: {},
   render: (args) => ({
     components: { VcFileUpload },
     setup() {
@@ -221,7 +231,6 @@ export const FileUpload: Story = {
  */
 export const Loading: Story = {
   args: {
-    variant: "gallery",
     loading: true,
   },
   render: (args) => ({
@@ -253,7 +262,6 @@ export const Loading: Story = {
  */
 export const RestrictedFileTypes: Story = {
   args: {
-    variant: "file-upload",
     accept: ".pdf, .doc, .docx",
   },
   render: (args) => ({
@@ -285,7 +293,6 @@ export const RestrictedFileTypes: Story = {
  */
 export const MultipleFiles: Story = {
   args: {
-    variant: "file-upload",
     multiple: true,
   },
   render: (args) => ({
@@ -322,7 +329,6 @@ export const MultipleFiles: Story = {
  */
 export const CustomText: Story = {
   args: {
-    variant: "gallery",
     customText: {
       dragHere: "Drop your files here",
       browse: "Select files",
@@ -352,12 +358,10 @@ export const CustomText: Story = {
 };
 /**
- * You can show error messages using the error slot.
+ * You can show custom error messages using the error slot.
  */
-export const WithError: Story = {
-  args: {
-    variant: "file-upload",
-  },
+export const WithErrorSlot: Story = {
+  args: {},
   render: (args) => ({
     components: { VcFileUpload },
     setup() {
@@ -392,12 +396,56 @@ export const WithError: Story = {
   }),
 };
+/**
+ * The component can be disabled, preventing all interactions.
+ */
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  render: (args) => ({
+    components: { VcFileUpload },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="tw-p-4 tw-max-w-md">
+        <VcFileUpload
+          v-bind="args"
+        />
+      </div>
+    `,
+  }),
+};
+/**
+ * Error state can be driven by the errorMessage prop (from IFormFieldProps),
+ * in addition to vee-validate rules or the error slot.
+ */
+export const WithErrorMessage: Story = {
+  args: {
+    errorMessage: "Maximum file size exceeded (5 MB)",
+  },
+  render: (args) => ({
+    components: { VcFileUpload },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="tw-p-4 tw-max-w-md">
+        <VcFileUpload
+          v-bind="args"
+        />
+      </div>
+    `,
+  }),
+};
 /**
  * You can customize the icon displayed in the upload area.
  */
 export const CustomIcon: Story = {
   args: {
-    variant: "gallery",
     icon: "bi-file-earmark-upload",
   },
   render: (args) => ({

package/ui/components/molecules/vc-file-upload/vc-file-upload.vue CHANGED Viewed

@@ -1,17 +1,15 @@
 <template>
   <div
     class="vc-file-upload__container"
-    :class="{ 'vc-file-upload__container--error': !!errorMessage }"
+    :class="{ 'vc-file-upload__container--error': !!resolvedErrorMessage }"
   >
     <div
       v-loading="loading"
       class="vc-file-upload__drop-zone"
-      :class="[
-        `vc-file-upload__drop-zone--${variant}`,
-        {
-          'vc-file-upload__drop-zone--dragging': isDragging,
-        },
-      ]"
+      :class="{
+        'vc-file-upload__drop-zone--dragging': isDragging,
+        'vc-file-upload__drop-zone--disabled': resolvedDisabled,
+      }"
       @drop.stop.prevent="onDrop"
       @drag.stop.prevent
       @dragstart.stop.prevent
@@ -20,9 +18,11 @@
       @dragenter.stop.prevent
       @dragleave.stop.prevent="dragLeave"
       role="button"
-      tabindex="0"
+      :tabindex="resolvedDisabled ? -1 : 0"
       :aria-label="customText?.dragHere || 'Upload files'"
       :aria-describedby="ariaDescribedBy"
+      :aria-disabled="resolvedDisabled || undefined"
+      :aria-required="ariaRequired"
       @keydown.enter="toggleUploader"
       @keydown.space.prevent="toggleUploader"
     >
@@ -50,7 +50,8 @@
         hidden
         :accept="accept"
         :multiple="multiple"
-        :name="name"
+        :name="resolvedName"
+        :disabled="resolvedDisabled"
         @change="upload"
       />
     </div>
@@ -58,14 +59,14 @@
       name="slide-up"
       mode="out-in"
     >
-      <div v-if="errorMessage">
+      <div v-if="resolvedErrorMessage">
         <slot name="error">
           <VcHint
             :id="errorId"
             class="vc-file-upload__error"
             :error="true"
           >
-            {{ errorMessage }}
+            {{ resolvedErrorMessage }}
           </VcHint>
         </slot>
       </div>
@@ -74,19 +75,21 @@
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { getCurrentInstance, ref, unref, computed, useId } from "vue";
+import { ref, unref, computed } from "vue";
 import { useField } from "vee-validate";
-import { VcIcon, VcLink, VcHint } from "@ui/components";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
+import { VcLink } from "@ui/components/atoms/vc-link";
+import { VcHint } from "@ui/components/atoms/vc-hint";
 import { useI18n } from "vue-i18n";
 import { IValidationRules } from "@core/types";
+import { useFormField } from "@ui/composables/useFormField";
+import type { IFormFieldProps } from "@ui/types/form-field";
-export interface Props {
-  variant?: "gallery" | "file-upload";
+export interface Props extends IFormFieldProps {
   loading?: boolean;
   accept?: string;
   multiple?: boolean;
   rules?: keyof IValidationRules | IValidationRules;
-  name?: string;
   icon?: string;
   customText?: {
     dragHere: string;
@@ -99,7 +102,6 @@ export interface Emits {
 }
 const props = withDefaults(defineProps<Props>(), {
-  variant: "gallery",
   accept: ".jpg, .png, .jpeg, .webp, .heic, .svg",
   name: "Gallery",
   icon: "lucide-cloud-upload",
@@ -112,25 +114,46 @@ defineSlots<{
 const { t } = useI18n({ useScope: "global" });
-const instance = getCurrentInstance();
+const {
+  fieldId,
+  errorId,
+  resolvedDisabled,
+  resolvedName,
+  ariaRequired,
+  groupContext,
+} = useFormField(props);
 const internalRules = unref(props.rules) || "";
 const isDragging = ref(false);
-const { errorMessage, handleChange, validate } = useField(
-  `${props.name === "Gallery" ? instance?.uid : props.name}`,
+const { errorMessage: veeErrorMessage, handleChange, validate } = useField(
+  `${props.name === "Gallery" ? fieldId.value : props.name}`,
   internalRules as IValidationRules,
 );
-const uploader = ref<HTMLInputElement | null>(null);
+const resolvedErrorMessage = computed(
+  () => props.errorMessage || veeErrorMessage.value,
+);
-const uid = useId();
-const errorId = computed(() => `vc-file-upload-${uid}-error`);
 const ariaDescribedBy = computed(() => {
-  if (errorMessage.value) return errorId.value;
-  return undefined;
+  const ids = new Set<string>();
+  if (groupContext?.describedBy.value) {
+    groupContext.describedBy.value.split(/\s+/).forEach((id) => ids.add(id));
+  }
+  if (resolvedErrorMessage.value) {
+    ids.add(errorId.value);
+  }
+  return ids.size ? Array.from(ids).join(" ") : undefined;
 });
+const uploader = ref<HTMLInputElement | null>(null);
 const upload = async (event: Event) => {
+  if (resolvedDisabled.value) return;
   await handleChange(event.target);
   const isValid = await validate();
@@ -146,6 +169,7 @@ const upload = async (event: Event) => {
 };
 function toggleUploader() {
+  if (resolvedDisabled.value) return;
   if (uploader.value) {
     uploader.value.value = "";
     uploader.value.click();
@@ -153,6 +177,7 @@ function toggleUploader() {
 }
 function onDrop(event: DragEvent) {
+  if (resolvedDisabled.value) return;
   dragLeave();
   const fileList = event.dataTransfer?.files;
@@ -162,6 +187,7 @@ function onDrop(event: DragEvent) {
 }
 function dragOver() {
+  if (resolvedDisabled.value) return;
   isDragging.value = true;
 }
@@ -181,9 +207,9 @@ function dragLeave() {
   --file-upload-icon-color: var(--neutrals-400);
   --file-upload-text-color: var(--neutrals-400);
   --file-upload-error-color: var(--danger-500);
-  --file-upload-error-ring-color: rgba(239, 68, 68, 0.2);
+  --file-upload-error-ring-color: var(--danger-100);
   --file-upload-background-color: transparent;
-  --file-upload-focus-ring-color: rgba(59, 130, 246, 0.3);
+  --file-upload-focus-ring-color: var(--primary-100);
 }
 .vc-file-upload {
@@ -197,32 +223,28 @@ function dragLeave() {
   }
   &__drop-zone {
-    @apply tw-relative tw-h-40 tw-box-border tw-border tw-border-dashed tw-p-4 tw-flex tw-flex-col tw-items-center tw-justify-center
+    @apply tw-relative tw-w-full tw-h-40 tw-box-border tw-border tw-border-dashed tw-p-4 tw-flex tw-flex-col tw-items-center tw-justify-center
       tw-border-[color:var(--file-upload-border-color)]
       tw-rounded-[var(--file-upload-border-radius)]
       tw-transition-[color,border-color,box-shadow] tw-duration-200
       tw-bg-[color:var(--file-upload-background-color)]
       tw-outline-none;
-    &--gallery {
-      @apply tw-w-40 tw-h-40;
-    }
-    &--file-upload {
-      @apply tw-w-full;
-    }
     &--dragging {
       @apply tw-bg-[color:var(--file-upload-drag-bg)] tw-border-solid tw-cursor-copy
         tw-border-[color:var(--file-upload-border-color-dragover)];
     }
+    &--disabled {
+      @apply tw-opacity-50 tw-pointer-events-none tw-cursor-default;
+    }
     &:hover {
       @apply tw-border-[color:var(--file-upload-border-color-hover)];
     }
     &:focus-within {
-      @apply tw-border-primary-500
+      @apply tw-border-[color:var(--file-upload-border-color-dragover)]
         tw-ring-[3px] tw-ring-[color:var(--file-upload-focus-ring-color)]
         tw-outline-none;
     }
@@ -245,17 +267,5 @@ function dragLeave() {
     @apply tw-mt-1 [--hint-error-color:var(--file-upload-error-color)];
   }
-  .slide-up-enter-active,
-  .slide-up-leave-active {
-    @apply tw-transition-all tw-duration-[250ms] tw-ease-out;
-  }
-  .slide-up-enter-from {
-    @apply tw-opacity-0 tw-translate-y-[5px];
-  }
-  .slide-up-leave-to {
-    @apply tw-opacity-0 tw--translate-y-[5px];
-  }
 }
 </style>