@vc-shell/framework 1.2.4-beta.8 → 2.0.0-alpha.0

package/ui/components/organisms/vc-popup/vc-popup.vue

@@ -1,405 +0,0 @@
-<template>
-  <TransitionRoot
-    appear
-    :show="isVisible"
-    as="template"
-  >
-    <Dialog
-      as="div"
-      class="vc-popup"
-      @close="handleDialogDismiss"
-      @keydown.esc="handleEscapeKeydown"
-    >
-      <TransitionChild
-        as="template"
-        enter="vc-popup__transition-enter"
-        enter-from="vc-popup__transition-enter-from"
-        enter-to="vc-popup__transition-enter-to"
-        leave="vc-popup__transition-leave"
-        leave-from="vc-popup__transition-leave-from"
-        leave-to="vc-popup__transition-leave-to"
-      >
-        <div class="vc-popup__overlay" />
-      </TransitionChild>
-
-      <div
-        class="vc-popup__container"
-        :class="{
-          'vc-popup__container--desktop': !isMobileView,
-          'vc-popup__container--mobile': isMobileView,
-          'vc-popup__container--fullscreen': isFullscreen,
-        }"
-      >
-        <div class="vc-popup__center">
-          <TransitionChild
-            as="template"
-            enter="vc-popup__dialog-enter"
-            enter-from="vc-popup__dialog-enter-from"
-            enter-to="vc-popup__dialog-enter-to"
-            leave="vc-popup__dialog-leave"
-            leave-from="vc-popup__dialog-leave-from"
-            leave-to="vc-popup__dialog-leave-to"
-          >
-            <DialogPanel
-              class="vc-popup__panel"
-              :class="[
-                {
-                  'vc-popup__panel--desktop': !isMobileView,
-                  'vc-popup__panel--mobile': isMobileView,
-                  'vc-popup__panel--fullscreen': isFullscreen,
-                },
-                modalWidth,
-              ]"
-            >
-              <DialogTitle
-                as="h3"
-                class="vc-popup__title"
-              >
-                <slot name="header">{{ title }}</slot>
-
-                <button
-                  v-if="closable"
-                  type="button"
-                  class="vc-popup__close-btn"
-                  :aria-label="$t('COMPONENTS.ORGANISMS.VC_POPUP.CLOSE')"
-                  @click="closeFromAction"
-                >
-                  <svg
-                    width="12"
-                    height="12"
-                    viewBox="0 0 12 12"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M7.27173 5.99939L11.1499 2.12967C11.3198 1.95981 11.4152 1.72943 11.4152 1.48922C11.4152 1.24901 11.3198 1.01863 11.1499 0.848777C10.9801 0.67892 10.7497 0.583496 10.5096 0.583496C10.2694 0.583496 10.0391 0.67892 9.86922 0.848777L6.00004 4.72752L2.13086 0.848777C1.96103 0.67892 1.73069 0.583496 1.49051 0.583496C1.25033 0.583496 1.01999 0.67892 0.850156 0.848777C0.680324 1.01863 0.584913 1.24901 0.584913 1.48922C0.584913 1.72943 0.680324 1.95981 0.850156 2.12967L4.72835 5.99939L0.850156 9.86912C0.765622 9.95298 0.698526 10.0527 0.652737 10.1627C0.606948 10.2726 0.583374 10.3905 0.583374 10.5096C0.583374 10.6286 0.606948 10.7465 0.652737 10.8565C0.698526 10.9664 0.765622 11.0662 0.850156 11.15C0.934 11.2346 1.03375 11.3017 1.14366 11.3475C1.25356 11.3933 1.37145 11.4168 1.49051 11.4168C1.60957 11.4168 1.72746 11.3933 1.83736 11.3475C1.94727 11.3017 2.04702 11.2346 2.13086 11.15L6.00004 7.27126L9.86922 11.15C9.95306 11.2346 10.0528 11.3017 10.1627 11.3475C10.2726 11.3933 10.3905 11.4168 10.5096 11.4168C10.6286 11.4168 10.7465 11.3933 10.8564 11.3475C10.9663 11.3017 11.0661 11.2346 11.1499 11.15C11.2345 11.0662 11.3016 10.9664 11.3473 10.8565C11.3931 10.7465 11.4167 10.6286 11.4167 10.5096C11.4167 10.3905 11.3931 10.2726 11.3473 10.1627C11.3016 10.0527 11.2345 9.95298 11.1499 9.86912L7.27173 5.99939Z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </button>
-              </DialogTitle>
-
-              <div class="vc-popup__content">
-                <VcIcon
-                  v-if="variant !== 'default'"
-                  :class="['vc-popup__icon', iconStyle]"
-                  :icon="icon"
-                />
-
-                <div
-                  class="vc-popup__content-inner"
-                  :class="{
-                    'vc-popup__content-inner--grow': isMobileView,
-                  }"
-                >
-                  <div
-                    class="vc-popup__content-wrapper"
-                    :class="{ 'vc-popup__content-wrapper--full': isFullscreen }"
-                  >
-                    <slot name="content"></slot>
-                  </div>
-                </div>
-              </div>
-              <div
-                v-if="$slots.footer"
-                class="vc-popup__footer"
-              >
-                <slot
-                  name="footer"
-                  :close="closeFromAction"
-                >
-                  <VcButton
-                    class="vc-popup__close-button"
-                    @click="closeFromAction"
-                  >
-                    {{ $t("COMPONENTS.ORGANISMS.VC_POPUP.CLOSE") }}
-                  </VcButton>
-                </slot>
-              </div>
-            </DialogPanel>
-          </TransitionChild>
-        </div>
-      </div>
-    </Dialog>
-  </TransitionRoot>
-</template>
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup>
-import { computed, inject, ref } from "vue";
-import { IsMobileKey } from "@framework/injection-keys";
-import { TransitionRoot, TransitionChild, Dialog, DialogPanel, DialogTitle } from "@headlessui/vue";
-
-export type PopupVariant = "default" | "error" | "warning" | "success" | "info";
-export type PopupCloseReason = "overlay" | "escape" | "action";
-
-export interface Props {
-  modelValue?: boolean;
-  title?: string;
-  closable?: boolean;
-  variant?: PopupVariant;
-  isMobileFullscreen?: boolean;
-  isFullscreen?: boolean;
-  modalWidth?: string;
-  closeOnOverlay?: boolean;
-  closeOnEscape?: boolean;
-}
-
-interface Emits {
-  (event: "close", reason?: PopupCloseReason): void;
-  (event: "update:modelValue", value: boolean): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: undefined,
-  closable: true,
-  variant: "default",
-  modalWidth: "tw-max-w-md",
-  closeOnOverlay: undefined,
-  closeOnEscape: undefined,
-});
-
-const emit = defineEmits<Emits>();
-
-defineSlots<{
-  header: (props: any) => any;
-  content: (props: any) => any;
-  footer: (props: { close: () => void }) => any;
-}>();
-
-const isMobile = inject(IsMobileKey, ref(false));
-const pendingDismissReason = ref<PopupCloseReason | null>(null);
-
-const variantMeta: Record<Exclude<PopupVariant, "default">, { icon: string; className: string }> = {
-  warning: { icon: "material-warning", className: "vc-popup__icon--warning" },
-  error: { icon: "material-error", className: "vc-popup__icon--error" },
-  success: { icon: "material-check_circle", className: "vc-popup__icon--success" },
-  info: { icon: "material-info", className: "vc-popup__icon--info" },
-};
-
-const isVisible = computed(() => props.modelValue ?? true);
-const canCloseOnOverlay = computed(() => props.closeOnOverlay ?? props.closable);
-const canCloseOnEscape = computed(() => props.closeOnEscape ?? props.closable);
-
-const icon = computed(() => {
-  if (props.variant === "default") {
-    return "";
-  }
-
-  return variantMeta[props.variant].icon;
-});
-
-const iconStyle = computed(() => {
-  if (props.variant === "default") {
-    return "";
-  }
-
-  return variantMeta[props.variant].className;
-});
-
-const isMobileView = computed(() => isMobile.value && props.isMobileFullscreen);
-
-function emitClose(reason: PopupCloseReason): void {
-  emit("update:modelValue", false);
-  emit("close", reason);
-}
-
-function closeFromAction(): void {
-  if (!props.closable) {
-    return;
-  }
-
-  emitClose("action");
-}
-
-function handleEscapeKeydown(): void {
-  pendingDismissReason.value = "escape";
-}
-
-function handleDialogDismiss(): void {
-  const reason = pendingDismissReason.value ?? "overlay";
-  pendingDismissReason.value = null;
-
-  if (reason === "overlay" && !canCloseOnOverlay.value) {
-    return;
-  }
-
-  if (reason === "escape" && !canCloseOnEscape.value) {
-    return;
-  }
-
-  emitClose(reason);
-}
-</script>
-
-<style lang="scss">
-:root {
-  --vc-popup-border-radius: var(--popup-border-radius, 6px);
-  --vc-popup-shadow: var(--popup-shadow, var(--shadow-md));
-  --vc-popup-overlay-blur: var(--popup-overlay-blur, var(--overlay-blur));
-
-  // Deprecated aliases (prefer --vc-popup-* variables for new themes)
-  --popup-close-btn-bg: var(--neutrals-100);
-  --popup-close-btn-bg-hover: color-mix(in srgb, var(--popup-close-btn-bg), #000 5%);
-  --popup-header-color: var(--primary-700);
-  --popup-content-text-color: var(--primary-700);
-  --popup-warning-icon-color: var(--warning-500);
-  --popup-error-icon-color: var(--danger-500);
-  --popup-success-icon-color: var(--success-500);
-  --popup-info-icon-color: var(--info-500);
-  --popup-footer-separator: var(--neutrals-200);
-  --popup-overlay: var(--popup-overlay-override, var(--overlay-bg));
-  --popup-bg: var(--additional-50);
-}
-
-.vc-popup {
-  &__overlay {
-    @apply tw-fixed tw-inset-0;
-    background: var(--popup-overlay);
-    backdrop-filter: blur(var(--vc-popup-overlay-blur));
-    -webkit-backdrop-filter: blur(var(--vc-popup-overlay-blur));
-  }
-
-  &__container {
-    @apply tw-fixed tw-inset-0 tw-overflow-y-auto;
-
-    &--desktop {
-      @apply tw-p-4;
-    }
-
-    &--mobile {
-      @apply tw-p-0;
-    }
-
-    &--fullscreen {
-      @apply tw-p-0 tw-overflow-hidden;
-    }
-  }
-
-  &__center {
-    @apply tw-flex tw-min-h-full tw-items-center tw-justify-center tw-text-center;
-  }
-
-  &__panel {
-    @apply tw-w-full tw-transform tw-overflow-hidden tw-text-left tw-align-middle tw-transition-all;
-    border-radius: var(--vc-popup-border-radius);
-    background: var(--popup-bg);
-    box-shadow: var(--vc-popup-shadow);
-
-    &--desktop {
-      @apply tw-flex tw-flex-col [max-height:calc(100vh-40px)];
-    }
-
-    &--mobile {
-      @apply tw-max-w-full tw-h-[100dvh] tw-rounded-none tw-flex tw-flex-col;
-    }
-
-    &--fullscreen {
-      @apply tw-h-[100dvh] tw-max-h-[100dvh] tw-w-screen tw-max-w-none tw-rounded-none #{!important};
-    }
-  }
-
-  &__title {
-    @apply tw-text-lg tw-font-semibold tw-leading-5 tw-text-[var(--popup-header-color)] tw-flex tw-items-center tw-gap-4 tw-px-6 tw-py-5;
-  }
-
-  &__close-btn {
-    @apply tw-h-[26px] tw-w-[26px] tw-bg-[var(--popup-close-btn-bg)] tw-rounded-[4px] tw-inline-flex tw-items-center tw-justify-center tw-ml-auto tw-shrink-0 hover:tw-bg-[var(--popup-close-btn-bg-hover)] tw-outline-none tw-ring-offset-2 tw-ring-offset-transparent focus-visible:tw-ring-2 focus-visible:tw-ring-[var(--primary-300)];
-  }
-
-  &__content {
-    @apply tw-flex tw-w-full tw-min-h-0 tw-grow tw-gap-5 tw-px-6 tw-pb-5 tw-pt-3;
-  }
-
-  &__content-inner {
-    @apply tw-text-sm tw-font-normal tw-leading-5 tw-text-[var(--popup-content-text-color)] tw-flex tw-items-center tw-flex-auto tw-overflow-y-auto [word-break:break-word];
-
-    &--grow {
-      @apply tw-grow;
-    }
-  }
-
-  &__content-wrapper {
-    @apply tw-flex tw-flex-auto tw-self-center tw-min-h-0 tw-max-h-[-webkit-fill-available] tw-max-h-[-moz-available];
-
-    &--full {
-      @apply tw-h-full;
-    }
-  }
-
-  &__footer {
-    @apply tw-flex tw-items-center tw-px-6 tw-py-5 tw-border-t tw-border-t-[var(--popup-footer-separator)] tw-border-solid;
-  }
-
-  &__close-button {
-    @apply tw-ml-auto;
-  }
-
-  &__icon {
-    @apply tw-self-center tw-text-[40px];
-
-    &--warning {
-      @apply tw-text-[var(--popup-warning-icon-color)];
-    }
-
-    &--error {
-      @apply tw-text-[var(--popup-error-icon-color)];
-    }
-
-    &--success {
-      @apply tw-text-[var(--popup-success-icon-color)];
-    }
-
-    &--info {
-      @apply tw-text-[var(--popup-info-icon-color)];
-    }
-  }
-
-  &__transition-enter {
-    @apply tw-duration-300 tw-ease-out;
-  }
-
-  &__transition-enter-from {
-    @apply tw-opacity-0;
-  }
-
-  &__transition-enter-to {
-    @apply tw-opacity-100;
-  }
-
-  &__transition-leave {
-    @apply tw-duration-200 tw-ease-in;
-  }
-
-  &__transition-leave-from {
-    @apply tw-opacity-100;
-  }
-
-  &__transition-leave-to {
-    @apply tw-opacity-0;
-  }
-
-  &__dialog-enter {
-    @apply tw-duration-300 tw-ease-out;
-  }
-
-  &__dialog-enter-from {
-    @apply tw-opacity-0 tw-scale-95;
-  }
-
-  &__dialog-enter-to {
-    @apply tw-opacity-100 tw-scale-100;
-  }
-
-  &__dialog-leave {
-    @apply tw-duration-200 tw-ease-in;
-  }
-
-  &__dialog-leave-from {
-    @apply tw-opacity-100 tw-scale-100;
-  }
-
-  &__dialog-leave-to {
-    @apply tw-opacity-0 tw-scale-95;
-  }
-}
-</style>

package/ui/components/organisms/vc-sidebar/index.ts

@@ -1 +0,0 @@
-export { default as VcSidebar } from "@ui/components/organisms/vc-sidebar/vc-sidebar.vue";

package/ui/components/organisms/vc-sidebar/vc-sidebar.stories.ts

@@ -1,251 +0,0 @@
-import { ref } from "vue";
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcSidebar } from "@ui/components/organisms/vc-sidebar";
-import { VcButton, VcIcon } from "@ui/components/atoms";
-
-/**
- * `VcSidebar` is a modern overlay panel for contextual workflows and settings.
- *
- * Features:
- * - animated transitions (left/right/bottom)
- * - scroll locking for modal mode
- * - keyboard support (`Escape`, focus trap)
- * - return focus to trigger on close
- * - visual variants (`default`, `elevated`, `minimal`)
- * - responsive sizing (`sm`, `md`, `lg`, `full`)
- */
-const meta = {
-  title: "Organisms/VcSidebar",
-  component: VcSidebar,
-  tags: ["autodocs"],
-  args: {
-    position: "right",
-    size: "md",
-    variant: "elevated",
-    title: "Project settings",
-    subtitle: "Control visibility, permissions, and publishing",
-    closeButton: true,
-    showOverlay: true,
-    closeOnEscape: true,
-    closeOnOverlay: true,
-    trapFocus: true,
-    lockScroll: true,
-    returnFocus: true,
-    autoFocus: true,
-    inset: true,
-  },
-  argTypes: {
-    position: {
-      control: "select",
-      options: ["left", "right", "bottom"],
-      table: { category: "Layout" },
-    },
-    size: {
-      control: "select",
-      options: ["sm", "md", "lg", "full"],
-      table: { category: "Layout" },
-    },
-    variant: {
-      control: "select",
-      options: ["default", "elevated", "minimal"],
-      table: { category: "Appearance" },
-    },
-    width: {
-      control: "text",
-      table: { category: "Layout" },
-    },
-    height: {
-      control: "text",
-      table: { category: "Layout" },
-    },
-    inset: {
-      control: "boolean",
-      table: { category: "Layout" },
-    },
-    trapFocus: {
-      control: "boolean",
-      table: { category: "Accessibility" },
-    },
-    lockScroll: {
-      control: "boolean",
-      table: { category: "Behavior" },
-    },
-    returnFocus: {
-      control: "boolean",
-      table: { category: "Behavior" },
-    },
-    closeOnEscape: {
-      control: "boolean",
-      table: { category: "Behavior" },
-    },
-    closeOnOverlay: {
-      control: "boolean",
-      table: { category: "Behavior" },
-    },
-  },
-  parameters: {
-    layout: "fullscreen",
-  },
-} satisfies Meta<typeof VcSidebar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const ElevatedPanel: Story = {
-  render: (args) => ({
-    components: { VcSidebar, VcButton, VcIcon },
-    setup() {
-      const opened = ref(false);
-      const lastCloseReason = ref("-");
-      return {
-        args,
-        opened,
-        lastCloseReason,
-        onClose: (reason: string) => {
-          lastCloseReason.value = reason;
-        },
-      };
-    },
-    template: `
-      <div class="tw-min-h-screen tw-bg-gradient-to-br tw-from-additional-50 tw-to-neutrals-100 tw-p-10">
-        <div class="tw-mx-auto tw-max-w-5xl tw-rounded-2xl tw-border tw-border-solid tw-border-neutrals-200 tw-bg-additional-50 tw-p-8">
-          <div class="tw-flex tw-items-center tw-justify-between tw-gap-4">
-            <div>
-              <p class="tw-text-sm tw-text-neutrals-500">Sidebar demo</p>
-              <p class="tw-text-2xl tw-font-semibold tw-text-neutrals-900">Workspace shell</p>
-            </div>
-            <VcButton @click="opened = true">
-              <span class="tw-flex tw-items-center tw-gap-2">
-                <VcIcon icon="material-tune" size="m" />
-                Open settings
-              </span>
-            </VcButton>
-          </div>
-
-          <p class="tw-mt-3 tw-text-sm tw-text-neutrals-600">
-            Last close reason: <span class="tw-font-semibold">{{ lastCloseReason }}</span>
-          </p>
-        </div>
-
-        <VcSidebar
-          v-bind="args"
-          :model-value="opened"
-          @update:modelValue="opened = $event"
-          @close="onClose"
-        >
-          <template #actions>
-            <VcButton variant="ghost" size="sm">Preview</VcButton>
-          </template>
-
-          <div class="tw-space-y-6 tw-p-6">
-            <section class="tw-space-y-2">
-              <p class="tw-text-sm tw-font-semibold tw-text-neutrals-900">Visibility</p>
-              <p class="tw-text-sm tw-text-neutrals-600">Public project is visible to all authenticated users.</p>
-              <VcButton variant="outline" size="sm">Change visibility</VcButton>
-            </section>
-
-            <section class="tw-space-y-2">
-              <p class="tw-text-sm tw-font-semibold tw-text-neutrals-900">Publishing</p>
-              <p class="tw-text-sm tw-text-neutrals-600">3 unpublished changes are waiting for review.</p>
-              <VcButton size="sm">Publish now</VcButton>
-            </section>
-          </div>
-
-          <template #footer>
-            <div class="tw-flex tw-items-center tw-justify-end tw-gap-2 tw-p-4">
-              <VcButton variant="outline" @click="opened = false">Cancel</VcButton>
-              <VcButton @click="opened = false">Save changes</VcButton>
-            </div>
-          </template>
-        </VcSidebar>
-      </div>
-    `,
-  }),
-};
-
-export const LeftMinimal: Story = {
-  args: {
-    position: "left",
-    size: "sm",
-    variant: "minimal",
-    title: "Filters",
-    subtitle: "Refine list content",
-  },
-  render: (args) => ({
-    components: { VcSidebar, VcButton, VcIcon },
-    setup() {
-      const opened = ref(true);
-      return { args, opened };
-    },
-    template: `
-      <div class="tw-min-h-screen tw-bg-additional-50 tw-p-10">
-        <VcSidebar v-bind="args" :model-value="opened" @update:modelValue="opened = $event">
-          <div class="tw-space-y-4 tw-p-5">
-            <div class="tw-rounded-lg tw-border tw-border-solid tw-border-neutrals-200 tw-p-4">
-              <p class="tw-text-sm tw-font-semibold tw-text-neutrals-900">Status</p>
-              <p class="tw-mt-1 tw-text-sm tw-text-neutrals-600">Published, Draft, Scheduled</p>
-            </div>
-            <div class="tw-rounded-lg tw-border tw-border-solid tw-border-neutrals-200 tw-p-4">
-              <p class="tw-text-sm tw-font-semibold tw-text-neutrals-900">Price range</p>
-              <p class="tw-mt-1 tw-text-sm tw-text-neutrals-600">$10 to $350</p>
-            </div>
-          </div>
-          <template #footer>
-            <div class="tw-flex tw-items-center tw-justify-between tw-gap-2 tw-p-4">
-              <VcButton variant="ghost">Reset</VcButton>
-              <VcButton @click="opened = false">Apply</VcButton>
-            </div>
-          </template>
-        </VcSidebar>
-      </div>
-    `,
-  }),
-};
-
-export const BottomSheet: Story = {
-  args: {
-    position: "bottom",
-    size: "md",
-    variant: "elevated",
-    title: "Quick actions",
-    subtitle: "Mobile-style action sheet",
-    inset: false,
-    draggable: true,
-    dragHandle: true,
-    closeButton: false,
-  },
-  render: (args) => ({
-    components: { VcSidebar, VcButton, VcIcon },
-    setup() {
-      const opened = ref(false);
-      return { args, opened };
-    },
-    template: `
-      <div class="tw-min-h-screen tw-bg-neutrals-100 tw-p-10">
-        <VcButton @click="opened = true">
-          <span class="tw-flex tw-items-center tw-gap-2">
-            <VcIcon icon="material-more_horiz" size="m" />
-            Open bottom sheet
-          </span>
-        </VcButton>
-
-        <VcSidebar v-bind="args" :model-value="opened" @update:modelValue="opened = $event">
-          <div class="tw-grid tw-grid-cols-1 tw-gap-2 tw-p-4 md:tw-grid-cols-2">
-            <button class="tw-rounded-lg tw-border tw-border-solid tw-border-neutrals-200 tw-bg-transparent tw-p-4 tw-text-left hover:tw-bg-primary-50">
-              <p class="tw-text-sm tw-font-semibold">Duplicate</p>
-              <p class="tw-text-xs tw-text-neutrals-600">Create a copy of this entry</p>
-            </button>
-            <button class="tw-rounded-lg tw-border tw-border-solid tw-border-neutrals-200 tw-bg-transparent tw-p-4 tw-text-left hover:tw-bg-primary-50">
-              <p class="tw-text-sm tw-font-semibold">Archive</p>
-              <p class="tw-text-xs tw-text-neutrals-600">Hide from active lists</p>
-            </button>
-            <button class="tw-rounded-lg tw-border tw-border-solid tw-border-neutrals-200 tw-bg-transparent tw-p-4 tw-text-left hover:tw-bg-primary-50">
-              <p class="tw-text-sm tw-font-semibold tw-text-danger-600">Delete</p>
-              <p class="tw-text-xs tw-text-neutrals-600">Permanently remove this entry</p>
-            </button>
-          </div>
-        </VcSidebar>
-      </div>
-    `,
-  }),
-};