@vc-shell/framework 1.1.0-alpha.8 → 1.1.0

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

@@ -4,6 +4,7 @@
     :class="{
       'vc-editor--error': errorMessage,
       'vc-editor--disabled': disabled,
+      'vc-editor--focused': isFocused,
     }"
   >
     <!-- Editor label -->
@@ -13,6 +14,7 @@
       :required="required"
       :multilanguage="multilanguage"
       :current-language="currentLanguage"
+      :error="!!errorMessage"
     >
       <span>{{ label }}</span>
       <template
@@ -36,8 +38,11 @@
       :toolbars="toolbars"
       no-katex
       no-mermaid
+      tabindex="0"
       class="vc-editor__editor"
       @on-upload-img="onUploadImage"
+      @focus="isFocused = true"
+      @blur="isFocused = false"
     />
 
     <slot
@@ -88,6 +93,7 @@ const { t } = useI18n({ useScope: "global" });
 
 const uid = getCurrentInstance()?.uid;
 const id = `editor-${uid}`;
+const isFocused = ref(false);
 
 const editorRef = ref(null) as Ref<typeof MdEditor | null>;
 defineSlots<{
@@ -161,7 +167,7 @@ const tagColors = [
   { tag: tags.paren, color: "var(--neutrals-700)" },
   { tag: tags.brace, color: "var(--neutrals-700)" },
 
-  { tag: tags.content, color: "var(--neutrals-900)" },
+  { tag: tags.content, color: "var(--neutrals-800)" },
 
   { tag: tags.heading, color: "var(--primary-700)" },
   { tag: tags.heading1, color: "var(--primary-800)" },
@@ -368,12 +374,16 @@ defineExpose({
 
 <style lang="scss">
 :root {
-  --editor-border-radius: 3px;
-  --editor-border-color: var(--secondary-200);
-  --editor-border-color-error: var(--base-error-color, var(--danger-500));
-  --editor-disabled-bg: var(--neutrals-50);
-  --editor-disabled-text: var(--neutrals-400);
+  --editor-border-radius: 4px;
+  --editor-border-color: var(--neutrals-300);
+  --editor-border-color-error: var(--danger-500);
+  --editor-disabled-bg: var(--neutrals-200);
+  --editor-disabled-text: var(--neutrals-500);
   --editor-placeholder-color: var(--neutrals-400);
+  --editor-text-color: var(--neutrals-800);
+
+  // Focus
+  --editor-border-color-focus: var(--primary-100);
 }
 
 .vc-editor {
@@ -392,6 +402,17 @@ defineExpose({
   &__error {
     @apply tw-text-[color:var(--editor-border-color-error)] tw-mt-1;
   }
+
+  &--focused .vc-editor__editor {
+    @apply tw-outline-2 tw-outline tw-outline-[color:var(--editor-border-color-focus)] tw-outline-offset-[0px];
+  }
+
+  &--disabled {
+    .cm-content *,
+    .md-editor * {
+      @apply tw-text-[color:var(--editor-disabled-text)] tw-bg-[var(--editor-disabled-bg)];
+    }
+  }
 }
 
 .md-editor {
@@ -400,23 +421,40 @@ defineExpose({
   --md-bk-color: var(--additional-50);
   --md-bk-color-outstand: var(--neutrals-100);
   --md-bk-hover-color: var(--secondary-50);
-  --md-border-color: var(--base-border-color, var(--neutrals-200));
+  --md-border-color: var(--neutrals-300);
   --md-border-hover-color: var(--neutrals-400);
   --md-border-active-color: var(--neutrals-400);
   --md-modal-mask: rgba(0, 0, 0, 0.45);
   --md-modal-shadow: 0px 6px 24px 2px rgba(0, 0, 0, 0.1);
-  --md-scrollbar-bg-color: var(--base-border-color, var(--neutrals-200));
+  --md-scrollbar-bg-color: var(--neutrals-200);
   --md-scrollbar-thumb-color: rgba(0, 0, 0, 0.3);
   --md-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.35);
   --md-scrollbar-thumb-active-color: rgba(0, 0, 0, 0.38);
   color: var(--md-color);
-  font-family: inherit;
   border: 1px solid var(--md-border-color);
   background-color: var(--md-bk-color);
   height: 350px;
+  border-radius: var(--editor-border-radius);
+  @apply tw-font-jakarta #{!important};
 }
 
 .ͼ15 {
-  color: var(--secondary-900);
+  color: var(--editor-text-color);
+}
+
+.ͼ1 .cm-placeholder {
+  color: var(--editor-placeholder-color);
+}
+
+.cm-content {
+  color: var(--editor-text-color);
+}
+
+.cm-scroller {
+  @apply tw-font-jakarta #{!important};
+}
+
+.md-editor-preview {
+  @apply tw-text-sm;
 }
 </style>

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

@@ -1,114 +1,179 @@
-import { StoryFn, Meta } from "@storybook/vue3";
-import VcField from "./vc-field.vue";
-
-const TYPE = ["text", "date", "date-ago", "link", "email"];
-const ORIENTATION = ["vertical", "horizontal"];
-
-export default {
-  title: "molecules/VcField",
-  component: VcField,
-  args: {
-    label: "Field Label",
-    tooltip: "Field Tooltip",
-    type: "text",
-    modelValue: "Field Value",
-    orientation: "vertical",
-    aspectRatio: [1, 1],
-  },
-  argTypes: {
-    type: {
-      control: "radio",
-
-      options: TYPE,
-      table: {
-        type: {
-          summary: TYPE.join(" | "),
-        },
-      },
-    },
-    orientation: {
-      control: "radio",
-      options: ORIENTATION,
-      table: {
-        type: {
-          summary: ORIENTATION.join(" | "),
-        },
-      },
-    },
-    aspectRatio: {
-      control: "object",
-      table: {
-        type: {
-          summary: "number[]",
-        },
-      },
-    },
-  },
-} satisfies Meta;
-
-const Template: StoryFn = (args) => ({
-  components: { VcField },
-  setup() {
-    return { args };
-  },
-  template: `
-    <vc-field v-bind="args" />
-  `,
-  args: {},
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  ...Template.args,
-  type: "text",
-  modelValue: "Field Value",
-};
-
-export const DateType = Template.bind({});
-DateType.args = {
-  ...Template.args,
-  type: "date",
-  modelValue: new Date(),
-};
-
-export const DateAgo = Template.bind({});
-DateAgo.args = {
-  ...Template.args,
-  type: "date-ago",
-  modelValue: new Date(),
-};
-
-export const Link = Template.bind({});
-Link.args = {
-  ...Template.args,
-  type: "link",
-  modelValue: "https://virtocommerce.com/",
-};
-
-export const LinkCopyable = Template.bind({});
-LinkCopyable.args = {
-  ...Template.args,
-  type: "link",
-  modelValue: "https://virtocommerce.com/",
-  copyable: true,
-};
-
-export const Email = Template.bind({});
-Email.args = {
-  ...Template.args,
-  type: "email",
-  modelValue: "email@virtocommerce.com",
-};
-
-export const Horizontal = Template.bind({});
-Horizontal.args = {
-  ...Template.args,
-  orientation: "horizontal",
-};
-
-export const HorizontalAspectRatio = Template.bind({});
-HorizontalAspectRatio.args = {
-  ...Template.args,
-  orientation: "horizontal",
-  aspectRatio: [1, 2],
-};
+import type { Meta, StoryObj } from "@storybook/vue3";
+import VcField from "./vc-field.vue";
+
+const TYPE = ["text", "date", "date-ago", "link", "email"];
+const ORIENTATION = ["vertical", "horizontal"];
+
+/**
+ * `VcField` is a component used to display labeled information, supporting various content types and layouts.
+ */
+const meta = {
+  title: "molecules/VcField",
+  component: VcField,
+  tags: ["autodocs"],
+  args: {
+    label: "Field Label",
+    tooltip: "Field Tooltip",
+    type: "text",
+    modelValue: "Field Value",
+    orientation: "vertical",
+    aspectRatio: [1, 1],
+  },
+  argTypes: {
+    label: {
+      description: "Field label text",
+      control: "text",
+      table: {
+        type: { summary: "string" },
+      },
+    },
+    tooltip: {
+      description: "Field tooltip information that appears on hover",
+      control: "text",
+      table: {
+        type: { summary: "string" },
+      },
+    },
+    type: {
+      description: "Type of field content to display",
+      control: "radio",
+      options: TYPE,
+      table: {
+        type: { summary: TYPE.join(" | ") },
+        defaultValue: { summary: "text" },
+      },
+    },
+    modelValue: {
+      description: "Content to display in the field",
+      control: "text",
+      table: {
+        type: { summary: "string | Date | any" },
+      },
+    },
+    copyable: {
+      description: "Add a copy button for field content",
+      control: "boolean",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    orientation: {
+      description: "Layout orientation of the field",
+      control: "radio",
+      options: ORIENTATION,
+      table: {
+        type: { summary: ORIENTATION.join(" | ") },
+        defaultValue: { summary: "vertical" },
+      },
+    },
+    aspectRatio: {
+      description: "Column width ratio for label and value when in horizontal orientation",
+      control: "object",
+      table: {
+        type: { summary: "[number, number]" },
+        defaultValue: { summary: "[1, 1]" },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The VcField component is used to display labeled read-only information in various formats:
+
+- Plain text
+- Formatted dates
+- Relative time (date ago)
+- Clickable links
+- Email addresses with mailto links
+
+It supports both vertical and horizontal layouts with customizable aspect ratios for flexible UI design.
+        `,
+      },
+    },
+  },
+} satisfies Meta<typeof VcField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default text field in vertical orientation
+ */
+export const Default: Story = {
+  args: {
+    type: "text",
+    modelValue: "Field Value",
+  },
+};
+
+/**
+ * Field displaying a formatted date
+ */
+export const DateType: Story = {
+  args: {
+    type: "date",
+    modelValue: new Date(),
+  },
+};
+
+/**
+ * Field displaying a relative time (e.g., "2 days ago")
+ */
+export const DateAgo: Story = {
+  args: {
+    type: "date-ago",
+    modelValue: new Date(),
+  },
+};
+
+/**
+ * Field displaying a clickable link
+ */
+export const Link: Story = {
+  args: {
+    type: "link",
+    modelValue: "https://virtocommerce.com/",
+  },
+};
+
+/**
+ * Link field with a copy button
+ */
+export const LinkCopyable: Story = {
+  args: {
+    type: "link",
+    modelValue: "https://virtocommerce.com/",
+    copyable: true,
+  },
+};
+
+/**
+ * Field displaying an email address with a mailto link
+ */
+export const Email: Story = {
+  args: {
+    type: "email",
+    modelValue: "email@virtocommerce.com",
+  },
+};
+
+/**
+ * Field in horizontal orientation with label beside the value
+ */
+export const Horizontal: Story = {
+  args: {
+    orientation: "horizontal",
+  },
+};
+
+/**
+ * Horizontal field with custom aspect ratio between label and value
+ */
+export const HorizontalAspectRatio: Story = {
+  args: {
+    orientation: "horizontal",
+    aspectRatio: [1, 2],
+  },
+};

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

@@ -29,7 +29,7 @@
       >
         <VcButton
           v-if="copyable"
-          icon="far fa-copy"
+          icon="material-content_copy"
           icon-size="m"
           class="vc-field__copy-button"
           text