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

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

@@ -45,23 +45,27 @@
       <div class="vc-editor__header-actions">
         <VcEditorButton
           icon="lucide-eye"
+          aria-label="Preview"
           :active="currentMode === 'preview'"
           :disabled="disabled"
           @action="togglePreview"
         />
         <VcEditorButton
           icon="lucide-columns-2"
+          aria-label="Side-by-side view"
           :active="currentMode === 'split'"
           @action="toggleSideBySideView"
         />
         <VcEditorButton
           icon="lucide-code"
+          aria-label="Source code"
           :active="currentMode === 'source'"
           :disabled="disabled"
           @action="toggleSourceView"
         />
         <VcEditorButton
           :icon="isFullscreen ? 'lucide-shrink' : 'lucide-expand'"
+          :aria-label="isFullscreen ? 'Exit fullscreen' : 'Fullscreen'"
           @action="isFullscreen = !isFullscreen"
         />
       </div>
@@ -135,12 +139,21 @@
       @change="handleImageSelection"
     />
 
-    <slot
-      v-if="errorMessage && !isFullscreen"
-      name="error"
+    <Transition
+      name="slide-up"
+      mode="out-in"
     >
-      <VcHint class="vc-editor__error-hint">{{ errorMessage }}</VcHint>
-    </slot>
+      <div v-if="errorMessage && !isFullscreen">
+        <slot name="error">
+          <VcHint
+            class="vc-editor__error-hint"
+            :error="true"
+          >
+            {{ errorMessage }}
+          </VcHint>
+        </slot>
+      </div>
+    </Transition>
   </div>
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
@@ -158,18 +171,18 @@ import { Image } from "@tiptap/extension-image";
 import { Placeholder } from "@tiptap/extension-placeholder";
 import { TextStyle } from "@tiptap/extension-text-style";
 import { Markdown } from "tiptap-markdown";
-import { FontSize } from "./_internal/extensions/font-size";
+import { FontSize } from "@ui/components/molecules/vc-editor/_internal/extensions/font-size";
 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 "../..";
-import VcEditorToolbar from "./_internal/vc-editor-toolbar.vue";
-import VcEditorButton from "./_internal/vc-editor-button.vue";
-import type { CustomToolbarItem } from "./_internal/toolbar-types";
+import { VcLabel, VcHint } from "@ui/components";
+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";
 
 // Export types for external use
-export type { CustomToolbarItem, CustomToolbarButton, CustomToolbarDropdown } from "./_internal/toolbar-types";
+export type { CustomToolbarItem, CustomToolbarButton, CustomToolbarDropdown } from "@ui/components/molecules/vc-editor/_internal/toolbar-types";
 
 // Define toolbar button types
 export type ToolbarNames =
@@ -570,7 +583,7 @@ async function handleImageSelection(event: Event) {
     border: 1px solid var(--vc-editor-border);
     border-bottom: none;
     border-radius: 6px 6px 0 0;
-    background-color: var(--vc-editor-background);
+    background-color: var(--vc-toolbar-bg);
     padding: 0.5rem;
   }
 
@@ -765,8 +778,7 @@ async function handleImageSelection(event: Event) {
   }
 
   &__error-hint {
-    color: var(--vc-editor-error-text);
-    margin-top: 0.25rem;
+    @apply tw-mt-1 [--hint-error-color:var(--vc-editor-error-text)];
   }
 
   &__char-count {
@@ -806,5 +818,18 @@ async function handleImageSelection(event: Event) {
       min-height: 0;
     }
   }
+
+  .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/index.ts

@@ -1 +1 @@
-export { default as VcField } from "./vc-field.vue";
+export { default as VcField } from "@ui/components/molecules/vc-field/vc-field.vue";

package/ui/components/molecules/vc-field/vc-field.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import VcField from "./vc-field.vue";
+import VcField from "@ui/components/molecules/vc-field/vc-field.vue";
 
 const TYPE = ["text", "date", "date-ago", "link", "email"];
 const ORIENTATION = ["vertical", "horizontal"];

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

@@ -32,6 +32,7 @@
           icon-size="m"
           class="vc-field__copy-button"
           text
+          aria-label="Copy to clipboard"
           @click="copy(modelValue)"
         ></VcButton>
       </VcFieldType>
@@ -41,8 +42,8 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import { VcLabel, VcCol } from "./../../";
-import VcFieldType from "./_internal/vc-field-type/vc-field-type.vue";
+import { VcLabel, VcCol } from "@ui/components";
+import VcFieldType from "@ui/components/molecules/vc-field/_internal/vc-field-type/vc-field-type.vue";
 
 export interface Props {
   /**
@@ -82,23 +83,28 @@ withDefaults(defineProps<Props>(), {
   aspectRatio: () => [1, 1],
 });
 
-const copyIcon = ref("material-content_copy");
+const copyIcon = ref("lucide-copy");
 
 function copy(value: string) {
   navigator.clipboard?.writeText(value);
-  copyIcon.value = "material-check";
+  copyIcon.value = "lucide-check";
   setTimeout(() => {
-    copyIcon.value = "material-content_copy";
+    copyIcon.value = "lucide-copy";
   }, 1000);
 }
 </script>
 
 <style lang="scss">
+:root {
+  --field-gap: 0.5rem;
+}
+
 .vc-field {
   @apply tw-flex;
 
   &--vertical {
-    @apply tw-flex-col tw-gap-2;
+    @apply tw-flex-col;
+    gap: var(--field-gap);
   }
 
   &--horizontal {

package/ui/components/molecules/vc-file-upload/index.ts

@@ -1 +1 @@
-export { default as VcFileUpload } from "./vc-file-upload.vue";
+export { default as VcFileUpload } from "@ui/components/molecules/vc-file-upload/vc-file-upload.vue";

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcFileUpload } from "./";
+import { VcFileUpload } from "@ui/components/molecules/vc-file-upload";
 import { ref } from "vue";
 
 const VARIANT = ["gallery", "file-upload"];

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

@@ -22,6 +22,7 @@
       role="button"
       tabindex="0"
       :aria-label="customText?.dragHere || 'Upload files'"
+      :aria-describedby="ariaDescribedBy"
       @keydown.enter="toggleUploader"
       @keydown.space.prevent="toggleUploader"
     >
@@ -53,23 +54,31 @@
         @change="upload"
       />
     </div>
-    <slot
-      v-if="errorMessage"
-      name="error"
+    <Transition
+      name="slide-up"
+      mode="out-in"
     >
-      <VcHint class="vc-file-upload__error">
-        {{ errorMessage }}
-      </VcHint>
-    </slot>
+      <div v-if="errorMessage">
+        <slot name="error">
+          <VcHint
+            :id="errorId"
+            class="vc-file-upload__error"
+            :error="true"
+          >
+            {{ errorMessage }}
+          </VcHint>
+        </slot>
+      </div>
+    </Transition>
   </div>
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { getCurrentInstance, ref, unref } from "vue";
+import { getCurrentInstance, ref, unref, computed, useId } from "vue";
 import { useField } from "vee-validate";
-import { VcIcon, VcLink, VcHint } from "./../../";
+import { VcIcon, VcLink, VcHint } from "@ui/components";
 import { useI18n } from "vue-i18n";
-import { IValidationRules } from "./../../../../core/types";
+import { IValidationRules } from "@core/types";
 
 export interface Props {
   variant?: "gallery" | "file-upload";
@@ -114,6 +123,13 @@ const { errorMessage, handleChange, validate } = useField(
 
 const uploader = ref<HTMLInputElement | null>(null);
 
+const uid = useId();
+const errorId = computed(() => `vc-file-upload-${uid}-error`);
+const ariaDescribedBy = computed(() => {
+  if (errorMessage.value) return errorId.value;
+  return undefined;
+});
+
 const upload = async (event: Event) => {
   await handleChange(event.target);
 
@@ -158,6 +174,7 @@ function dragLeave() {
 :root {
   --file-upload-border-color: var(--neutrals-200);
   --file-upload-border-color-hover: var(--neutrals-400);
+  --file-upload-border-color-dragover: var(--primary-500);
   --file-upload-border-color-error: var(--danger-500);
   --file-upload-border-radius: 6px;
   --file-upload-drag-bg: var(--neutrals-100);
@@ -196,7 +213,8 @@ function dragLeave() {
     }
 
     &--dragging {
-      @apply tw-bg-[color:var(--file-upload-drag-bg)] tw-border-solid tw-cursor-copy;
+      @apply tw-bg-[color:var(--file-upload-drag-bg)] tw-border-solid tw-cursor-copy
+        tw-border-[color:var(--file-upload-border-color-dragover)];
     }
 
     &:hover {
@@ -204,7 +222,7 @@ function dragLeave() {
     }
 
     &:focus-within {
-      @apply tw-border-[color:var(--primary-500)]
+      @apply tw-border-primary-500
         tw-ring-[3px] tw-ring-[color:var(--file-upload-focus-ring-color)]
         tw-outline-none;
     }
@@ -224,7 +242,20 @@ function dragLeave() {
   }
 
   &__error {
-    @apply tw-mt-1 [--hint-color:var(--file-upload-error-color)];
+    @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>

package/ui/components/molecules/vc-form/index.ts

@@ -1,5 +1,5 @@
 import { VNode } from "vue";
-import _Form from "./vc-form.vue";
+import _Form from "@ui/components/molecules/vc-form/vc-form.vue";
 
 export const VcForm = _Form as typeof _Form & {
   new (): {

package/ui/components/molecules/vc-form/vc-form.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcForm } from "./";
-import { VcInput } from "../vc-input";
-import { VcButton } from "../../atoms/vc-button";
+import { VcForm } from "@ui/components/molecules/vc-form";
+import { VcInput } from "@ui/components/molecules/vc-input";
+import { VcButton } from "@ui/components/atoms/vc-button";
 import { ref } from "vue";
 
 /**

package/ui/components/molecules/vc-form/vc-form.vue

@@ -1,15 +1,38 @@
 <template>
-  <form @submit.prevent="submit">
+  <form
+    class="vc-form"
+    novalidate
+    :aria-label="ariaLabel"
+    :aria-labelledby="ariaLabelledby"
+    @submit.prevent="submit"
+  >
     <slot>vc-form</slot>
   </form>
 </template>
 
 <script lang="ts" setup>
+export interface Props {
+  ariaLabel?: string;
+  ariaLabelledby?: string;
+}
+
+defineProps<Props>();
+
 const emit = defineEmits<{
-  (e: 'submit'): void;
-}>()
+  (e: "submit"): void;
+}>();
 
 const submit = () => {
-  emit('submit');
-}
+  emit("submit");
+};
 </script>
+
+<style lang="scss">
+:root {
+  --form-gap: 1rem;
+}
+
+.vc-form {
+  @apply tw-flex tw-flex-col;
+}
+</style>

package/ui/components/molecules/vc-input/index.ts

@@ -1 +1 @@
-export { default as VcInput } from "./vc-input.vue";
+export { default as VcInput } from "@ui/components/molecules/vc-input/vc-input.vue";

package/ui/components/molecules/vc-input/vc-input.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcInput } from "./";
-import { VcButton, VcIcon } from "../..";
+import { VcInput } from "@ui/components/molecules/vc-input";
+import { VcButton, VcIcon } from "@ui/components";
 import { ref, computed } from "vue";
 
 /**

package/ui/components/molecules/vc-input/vc-input.vue

@@ -39,8 +39,8 @@
       `vc-input_${type}`,
       {
         'vc-input_clearable': clearable,
-        'vc-input_error': error,
-        'vc-input_disabled': disabled,
+        'vc-input_error': invalid,
+        'vc-input_disabled': resolvedDisabled,
         'vc-input_focused': isFocused,
       },
     ]"
@@ -53,7 +53,7 @@
       :required="required"
       :multilanguage="multilanguage"
       :current-language="currentLanguage"
-      :error="error"
+      :error="invalid"
     >
       <span>{{ label }}</span>
       <template
@@ -102,7 +102,7 @@
 
             <slot
               name="control"
-              :editable="disabled"
+              :editable="resolvedDisabled"
               :focused="autofocus"
               :model-value="handleValue"
               :emit-value="emitValue"
@@ -114,11 +114,11 @@
                 v-model="handleValue"
                 :placeholder="placeholder"
                 :type="internalTypeComputed"
-                :disabled="disabled"
-                :name="name"
+                :disabled="resolvedDisabled"
+                :name="resolvedName"
                 :maxlength="maxlength"
                 :autofocus="autofocus"
-                :aria-invalid="error || undefined"
+                :aria-invalid="invalid || undefined"
                 :aria-describedby="ariaDescribedBy"
                 :aria-labelledby="label ? labelId : undefined"
                 class="vc-input__input"
@@ -137,7 +137,7 @@
             </div>
 
             <div
-              v-if="clearable && mutatedModel && !disabled && type !== 'password'"
+              v-if="clearable && mutatedModel && !resolvedDisabled && type !== 'password'"
               class="vc-input__clear"
               tabindex="0"
               @click="onReset"
@@ -217,10 +217,9 @@
       name="slide-up"
       mode="out-in"
     >
-      <div v-if="error">
+      <div v-if="invalid && errorMessage">
         <slot name="error">
           <VcHint
-            v-if="errorMessage"
             :id="errorId"
             class="vc-input__hint-error"
             >{{ errorMessage }}</VcHint
@@ -242,33 +241,18 @@
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { computed, ref, unref, useId, watch } from "vue";
-import { VcLabel, VcIcon, VcHint } from "./../../";
-import { VcDatePicker } from "../vc-date-picker";
-import { VcColorInput } from "../vc-color-input";
+import { computed, ref, unref, watch } from "vue";
+import { VcLabel, VcIcon, VcHint } from "@ui/components";
+import { VcDatePicker } from "@ui/components/molecules/vc-date-picker";
+import { VcColorInput } from "@ui/components/molecules/vc-color-input";
+import { useFormField } from "@ui/composables/useFormField";
 import type { VueDatePickerProps, ModelValue } from "@vuepic/vue-datepicker";
+import type { ITextFieldProps } from "@ui/types";
 
 /**
  * Base props for VcInput
  */
-interface VcInputBaseProps {
-  /**
-   * Input label text
-   */
-  label?: string;
-  /**
-   * Input placeholder text
-   */
-  placeholder?: string;
-  /**
-   * Input description (hint) text below input component
-   */
-  hint?: string;
-  /**
-   * Appends clearable icon when a value is set;
-   * When clicked, model becomes null
-   */
-  clearable?: boolean;
+interface VcInputBaseProps extends ITextFieldProps {
   /**
    * Prefix
    */
@@ -277,60 +261,19 @@ interface VcInputBaseProps {
    * Suffix
    */
   suffix?: string;
-  /**
-   * Used to specify the name of the control; If not specified, it takes the value 'Field'
-   */
-  name?: string;
-  /**
-   * Signals the user a process is in progress by displaying a spinner
-   */
-  loading?: boolean;
   /**
    * Debounce amount (in milliseconds) when updating model
    */
   debounce?: string | number;
-  /**
-   * Put component in disabled mode
-   */
-  disabled?: boolean;
-  /**
-   * Focus field on initial component render
-   */
-  autofocus?: boolean;
-  /**
-   * Does field have validation errors?
-   */
-  error?: boolean;
-  /**
-   * Validation error message (gets displayed only if 'error' is set to 'true')
-   */
-  errorMessage?: string;
   /**
    * Specify a max length of model
    * Default value: 1024
    */
   maxlength?: string | number;
-  /**
-   * Input tooltip information
-   */
-  tooltip?: string;
-  /**
-   * Input required state
-   */
-  required?: boolean;
-  /**
-   * Input multilanguage state
-   */
-  multilanguage?: boolean;
-  /**
-   * Input current language
-   */
-  currentLanguage?: string;
   /**
    * The step attribute is a number that specifies the granularity that the value must adhere to.
    */
   step?: string;
-  size?: "default" | "small";
 }
 
 /**
@@ -465,19 +408,7 @@ defineSlots<{
   hint: (props: any) => any;
 }>();
 
-// Accessibility IDs
-const uid = useId();
-const inputId = computed(() => `vc-input-${uid}`);
-const labelId = computed(() => `vc-input-${uid}-label`);
-const hintId = computed(() => `vc-input-${uid}-hint`);
-const errorId = computed(() => `vc-input-${uid}-error`);
-
-const ariaDescribedBy = computed(() => {
-  const ids: string[] = [];
-  if (props.error && props.errorMessage) ids.push(errorId.value);
-  if (props.hint) ids.push(hintId.value);
-  return ids.length ? ids.join(" ") : undefined;
-});
+const { fieldId: inputId, labelId, errorId, hintId, invalid, resolvedDisabled, resolvedName, ariaDescribedBy } = useFormField(props);
 
 let emitTimer: NodeJS.Timeout;
 let emitValueFn;
@@ -630,9 +561,9 @@ function handleFocus() {
   // Focus
   --input-border-color-focus: var(--primary-500);
 
-  // Ring colors (new)
-  --input-focus-ring-color: rgba(59, 130, 246, 0.3);
-  --input-error-ring-color: rgba(239, 68, 68, 0.2);
+  // Ring colors
+  --input-focus-ring-color: var(--primary-100);
+  --input-error-ring-color: var(--danger-100);
 }
 
 .vc-input {

package/ui/components/molecules/vc-input-currency/index.ts

@@ -1 +1 @@
-export { default as VcInputCurrency } from "./vc-input-currency.vue";
+export { default as VcInputCurrency } from "@ui/components/molecules/vc-input-currency/vc-input-currency.vue";

package/ui/components/molecules/vc-input-currency/vc-input-currency.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcInputCurrency } from "./";
+import { VcInputCurrency } from "@ui/components/molecules/vc-input-currency";
 import { ref } from "vue";
 
 /**

package/ui/components/molecules/vc-input-currency/vc-input-currency.vue

@@ -47,8 +47,8 @@
 <script lang="ts" setup>
 import { useCurrencyInput, CurrencyDisplay } from "vue-currency-input";
 import { unref, watch } from "vue";
-import { VcInputDropdown } from "./../../molecules/vc-input-dropdown";
-import { type OptionProp } from "../vc-select";
+import { VcInputDropdown } from "@ui/components/molecules/vc-input-dropdown";
+import { type OptionProp } from "@ui/components/molecules/vc-select";
 
 export interface Props {
   /**
@@ -262,7 +262,7 @@ function handlePaste(e: ClipboardEvent) {
 
 .vc-input-currency {
   &__control {
-    @apply tw-border tw-border-solid tw-px-2 tw-py-1 tw-text-sm tw-outline-none tw-bg-transparent;
+    @apply tw-border-none tw-px-0 tw-py-0 tw-text-sm tw-outline-none tw-bg-transparent tw-w-full tw-h-full;
   }
 }
 </style>

package/ui/components/molecules/vc-input-dropdown/index.ts

@@ -1,4 +1,4 @@
-import VcInputDropdown from "./vc-input-dropdown.vue";
+import VcInputDropdown from "@ui/components/molecules/vc-input-dropdown/vc-input-dropdown.vue";
 
 export { VcInputDropdown };
 export default VcInputDropdown;

package/ui/components/molecules/vc-input-dropdown/vc-input-dropdown.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcInputDropdown } from "./";
-import { VcIcon } from "../../atoms/vc-icon";
-import { VcButton } from "../../atoms/vc-button";
+import { VcInputDropdown } from "@ui/components/molecules/vc-input-dropdown";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
+import { VcButton } from "@ui/components/atoms/vc-button";
 import { ref, computed, watch } from "vue";
 
 /**

package/ui/components/molecules/vc-input-dropdown/vc-input-dropdown.vue

@@ -49,8 +49,12 @@
             >
               <template v-if="options && options.length">
                 <button
+                  type="button"
                   class="vc-input-dropdown__toggle-button"
                   tabindex="0"
+                  aria-label="Select option"
+                  :aria-expanded="isOpened"
+                  aria-haspopup="listbox"
                   @click.stop.prevent="toggleHandler"
                   @keydown.enter.stop.prevent="toggleHandler"
                   @keydown.space.stop.prevent="toggleHandler"
@@ -61,9 +65,10 @@
             </slot>
             <VcButton
               v-if="options && options.length"
-              :icon="isOpened ? 'material-keyboard_arrow_up' : 'material-keyboard_arrow_down'"
+              :icon="isOpened ? 'lucide-chevron-up' : 'lucide-chevron-down'"
               icon-size="s"
               text
+              aria-label="Toggle dropdown"
               icon-class="vc-input-dropdown__toggle-button-icon"
               @click.stop.prevent="toggleHandler"
             ></VcButton>
@@ -107,8 +112,8 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { unref } from "vue";
-import { VcSelect, VcInput } from "./../../";
-import { type OptionProp } from "../vc-select";
+import { VcSelect, VcInput } from "@ui/components";
+import { type OptionProp } from "@ui/components/molecules/vc-select";
 
 export interface Props {
   /**