ropav 0.0.6 → 0.0.7

package/dist/components/tabs/types.d.ts

@@ -0,0 +1,160 @@
+import { ComputedRef } from 'vue';
+export type TabsValue = string | number;
+export type TabsOrientation = 'horizontal' | 'vertical';
+export type TabsPlacement = 'left' | 'right';
+export type TabsTriggerAlign = 'left' | 'center' | 'right';
+export type TabsActivationMode = 'automatic' | 'manual';
+export type TabsState = 'active' | 'inactive';
+export type TabsSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type TabsVariant = 'line' | 'pills' | 'outline';
+export interface TabsProps {
+    id?: string;
+    modelValue?: TabsValue | null;
+    defaultValue?: TabsValue | null;
+    size?: TabsSize;
+    variant?: TabsVariant;
+    orientation?: TabsOrientation;
+    placement?: TabsPlacement;
+    align?: TabsTriggerAlign;
+    activationMode?: TabsActivationMode;
+    disabled?: boolean;
+    unmountOnExit?: boolean;
+    ariaLabel?: string;
+    describedby?: string;
+    labelledby?: string;
+}
+export interface TabsListProps {
+    id?: string;
+    ariaLabel?: string;
+    ariaDescribedby?: string;
+    ariaLabelledby?: string;
+}
+export interface TabsTriggerProps {
+    id?: string;
+    value: TabsValue;
+    disabled?: boolean;
+    align?: TabsTriggerAlign;
+}
+export interface TabsContentProps {
+    id?: string;
+    value: TabsValue;
+    unmountOnExit?: boolean;
+    ariaLabel?: string;
+    ariaDescribedby?: string;
+    ariaLabelledby?: string;
+}
+export interface TabsRootProps {
+    id?: string;
+    class: string[];
+    'data-disabled'?: boolean;
+    'data-size': TabsSize;
+    'data-variant': TabsVariant;
+    'data-orientation': TabsOrientation;
+    'data-placement'?: TabsPlacement;
+    'data-activation-mode': TabsActivationMode;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+}
+export interface TabsListRootProps {
+    id?: string;
+    class: string[];
+    role: 'tablist';
+    'data-disabled'?: boolean;
+    'data-variant': TabsVariant;
+    'data-orientation': TabsOrientation;
+    'data-placement'?: TabsPlacement;
+    'aria-orientation': TabsOrientation;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    onKeydown: (event: KeyboardEvent) => void;
+}
+export interface TabsTriggerRootProps {
+    id: string;
+    class: string[];
+    role: 'tab';
+    type: 'button';
+    disabled?: boolean;
+    tabIndex: number;
+    'data-state': TabsState;
+    'data-disabled'?: boolean;
+    'data-variant': TabsVariant;
+    'data-align'?: TabsTriggerAlign;
+    'aria-selected': boolean;
+    'aria-controls'?: string;
+    'aria-disabled'?: boolean;
+    onClick: (event: MouseEvent) => void;
+    onFocus: (event: FocusEvent) => void;
+    onKeydown: (event: KeyboardEvent) => void;
+}
+export interface TabsContentRootProps {
+    id: string;
+    class: string[];
+    role: 'tabpanel';
+    tabIndex: number;
+    hidden?: boolean;
+    'data-state': TabsState;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+}
+export interface TabsSlotProps {
+    value: TabsValue | null;
+    size: TabsSize;
+    variant: TabsVariant;
+    disabled: boolean;
+    placement: TabsPlacement;
+    align: TabsTriggerAlign;
+    select: (value: TabsValue) => void;
+}
+export interface TabsListSlotProps {
+    disabled: boolean;
+    variant: TabsVariant;
+    orientation: TabsOrientation;
+    placement: TabsPlacement;
+}
+export interface TabsTriggerSlotProps {
+    value: TabsValue;
+    selected: boolean;
+    size: TabsSize;
+    variant: TabsVariant;
+    disabled: boolean;
+    align: TabsTriggerAlign;
+    select: () => void;
+}
+export interface TabsContentSlotProps {
+    value: TabsValue;
+    selected: boolean;
+}
+export interface UseTabsReturn {
+    rootClass: ComputedRef<string[]>;
+    rootProps: ComputedRef<TabsRootProps>;
+    slotProps: ComputedRef<TabsSlotProps>;
+    selectedValue: ComputedRef<TabsValue | null>;
+    selectValue: (value: TabsValue) => void;
+}
+export interface UseTabsListReturn {
+    rootClass: ComputedRef<string[]>;
+    rootProps: ComputedRef<TabsListRootProps>;
+    slotProps: ComputedRef<TabsListSlotProps>;
+}
+export interface UseTabsTriggerReturn {
+    id: ComputedRef<string>;
+    state: ComputedRef<TabsState>;
+    isSelected: ComputedRef<boolean>;
+    isDisabled: ComputedRef<boolean>;
+    rootClass: ComputedRef<string[]>;
+    rootProps: ComputedRef<TabsTriggerRootProps>;
+    slotProps: ComputedRef<TabsTriggerSlotProps>;
+    select: () => void;
+}
+export interface UseTabsContentReturn {
+    id: ComputedRef<string>;
+    state: ComputedRef<TabsState>;
+    isSelected: ComputedRef<boolean>;
+    shouldRenderContent: ComputedRef<boolean>;
+    rootClass: ComputedRef<string[]>;
+    rootProps: ComputedRef<TabsContentRootProps>;
+    slotProps: ComputedRef<TabsContentSlotProps>;
+}

package/dist/components/tabs/useTabs.d.ts

@@ -0,0 +1,5 @@
+import { TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps, TabsValue, UseTabsContentReturn, UseTabsListReturn, UseTabsReturn, UseTabsTriggerReturn } from './types';
+export declare function useTabs(props: Readonly<TabsProps>, emitUpdate: (value: TabsValue) => void): UseTabsReturn;
+export declare function useTabsList(props: Readonly<TabsListProps>): UseTabsListReturn;
+export declare function useTabsTrigger(props: Readonly<TabsTriggerProps>): UseTabsTriggerReturn;
+export declare function useTabsContent(props: Readonly<TabsContentProps>): UseTabsContentReturn;

package/dist/dropdown-menu.css

@@ -0,0 +1,159 @@
+.rp-dropdown-menu {
+  --_rp-dropdown-menu-radius: var(--rp-radius-sm);
+  --_rp-dropdown-menu-focused-bg: var(--rp-color-surface-hover);
+  position: relative;
+  display: inline-flex;
+  font-family: var(--rp-font-family);
+  vertical-align: middle;
+}
+html.dark .rp-dropdown-menu {
+  --_rp-dropdown-menu-focused-bg: var(--rp-color-button-default-bg-active);
+}
+.rp-dropdown-menu--disabled {
+  opacity: var(--rp-opacity-disabled);
+  cursor: not-allowed;
+}
+.rp-dropdown-menu__content {
+  z-index: 100;
+  background-color: var(--rp-color-surface-raised);
+  border: var(--rp-border-width-thin) solid var(--rp-color-border);
+  border-radius: var(--_rp-dropdown-menu-radius);
+  box-shadow: var(--rp-shadow-md);
+  padding: var(--rp-spacing-1) 0;
+  position: absolute;
+  min-width: 180px;
+  max-width: min(24rem, 100vw - var(--rp-spacing-6));
+  max-height: 240px;
+  overflow-y: auto;
+  padding: var(--rp-spacing-1);
+  color: var(--rp-color-text);
+  font-size: var(--rp-font-size-base);
+  line-height: var(--rp-line-height-normal);
+  outline: none;
+}
+.rp-dropdown-menu__content--has-submenu {
+  overflow: visible;
+}
+.rp-dropdown-menu--placement-bottom-start .rp-dropdown-menu__content {
+  top: calc(100% + var(--rp-spacing-2));
+  left: 0;
+}
+.rp-dropdown-menu--placement-bottom-end .rp-dropdown-menu__content {
+  top: calc(100% + var(--rp-spacing-2));
+  right: 0;
+}
+.rp-dropdown-menu--placement-top-start .rp-dropdown-menu__content {
+  bottom: calc(100% + var(--rp-spacing-2));
+  left: 0;
+}
+.rp-dropdown-menu--placement-top-end .rp-dropdown-menu__content {
+  right: 0;
+  bottom: calc(100% + var(--rp-spacing-2));
+}
+.rp-dropdown-menu__item-wrap {
+  position: relative;
+}
+.rp-dropdown-menu__item {
+  padding: 0;
+  font: inherit;
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: var(--rp-size-control-sm);
+  padding: var(--rp-spacing-2) var(--rp-spacing-3);
+  gap: var(--rp-spacing-4);
+  color: var(--rp-color-text);
+  text-align: left;
+  border-radius: calc(var(--_rp-dropdown-menu-radius) - var(--rp-spacing-1));
+  transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast);
+  user-select: none;
+  white-space: nowrap;
+}
+.rp-dropdown-menu__item:focus-visible, .rp-dropdown-menu__item--focused {
+  outline: none;
+  background-color: var(--_rp-dropdown-menu-focused-bg);
+}
+.rp-dropdown-menu__item--destructive {
+  color: var(--rp-color-danger-fg);
+}
+.rp-dropdown-menu__item--disabled {
+  color: var(--rp-color-text-disabled);
+  cursor: not-allowed;
+}
+.rp-dropdown-menu__item--submenu {
+  padding-right: var(--rp-spacing-2);
+}
+.rp-dropdown-menu__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rp-dropdown-menu__shortcut {
+  color: var(--rp-color-text-secondary);
+  font: inherit;
+  font-size: var(--rp-font-size-sm);
+}
+.rp-dropdown-menu__submenu-icon {
+  display: inline-flex;
+  align-items: center;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+.rp-dropdown-menu__submenu-icon svg {
+  width: 100%;
+  height: 100%;
+}
+.rp-dropdown-menu__submenu-icon {
+  margin-left: auto;
+  color: var(--rp-color-text-secondary);
+}
+.rp-dropdown-menu__submenu {
+  z-index: 100;
+  background-color: var(--rp-color-surface-raised);
+  border: var(--rp-border-width-thin) solid var(--rp-color-border);
+  border-radius: var(--_rp-dropdown-menu-radius);
+  box-shadow: var(--rp-shadow-md);
+  padding: var(--rp-spacing-1) 0;
+  position: absolute;
+  top: calc(-1 * var(--rp-spacing-1));
+  left: calc(100% + var(--rp-spacing-1));
+  min-width: 180px;
+  max-width: min(24rem, 100vw - var(--rp-spacing-6));
+  max-height: 240px;
+  overflow-y: auto;
+  padding: var(--rp-spacing-1);
+  color: var(--rp-color-text);
+  font-size: var(--rp-font-size-base);
+  line-height: var(--rp-line-height-normal);
+  outline: none;
+}
+.rp-dropdown-menu__submenu--has-submenu {
+  overflow: visible;
+}
+.rp-dropdown-menu--placement-bottom-end .rp-dropdown-menu__submenu, .rp-dropdown-menu--placement-top-end .rp-dropdown-menu__submenu {
+  right: calc(100% + var(--rp-spacing-1));
+  left: auto;
+}
+.rp-dropdown-menu__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--rp-size-control-sm);
+  padding: var(--rp-spacing-2) var(--rp-spacing-4);
+  color: var(--rp-color-text-secondary);
+  font-size: var(--rp-font-size-base);
+}
+.rp-dropdown-menu-content-enter-active,
+.rp-dropdown-menu-content-leave-active {
+  transition: opacity var(--rp-transition-fast), transform var(--rp-transition-fast);
+}
+.rp-dropdown-menu-content-enter-from,
+.rp-dropdown-menu-content-leave-to {
+  opacity: 0;
+  transform: translateY(calc(-1 * var(--rp-spacing-1)));
+}