@fastkit/vui 0.6.16 → 0.6.20

package/dist/vui.css

@@ -512,6 +512,15 @@ template {
   --toolbar-dense-height: calc(var(--toolbar-height) * 0.8);
   --card-content-padding: 1rem;
   --card-actions-padding: 0.5rem;
+  --pagination-item-radius: 2px;
+  --pagination-item-font-size: var(--root-em);
+  --pagination-item-size: calc(var(--root-em) * 2);
+  --pagination-item-margin: calc(var(--root-em) * 0.5);
+  --pagination-item-font-size-dense: calc(
+    var(--pagination-item-font-size) * 0.625
+  );
+  --pagination-item-size-dense: calc(var(--pagination-item-size) * 0.8125);
+  --pagination-item-margin-dense: calc(var(--pagination-item-margin) * 0.75);
 }
 
 :root,
@@ -922,6 +931,108 @@ h6,
   z-index: 1;
   transform: translate(-50%, -50%);
 }
+.v-pagination {
+  --pagination-size: var(--pagination-item-size);
+  --pagination-margin: var(--pagination-item-margin);
+  --pagination-font-size: var(--pagination-item-font-size);
+  --pagination-radius: var(--pagination-item-radius);
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  font-weight: bold;
+  line-height: 1;
+}
+.v-pagination::before {
+  width: var(--pagination-size);
+  margin: var(--pagination-margin);
+  content: none;
+}
+.v-pagination--left {
+  justify-content: flex-start;
+}
+.v-pagination--center {
+  justify-content: center;
+}
+.v-pagination--right {
+  justify-content: flex-end;
+}
+.v-pagination__item,
+.v-pagination a.v-pagination__item {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  padding: 0;
+  touch-action: manipulation;
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  outline: 0;
+  appearance: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--pagination-size);
+  height: var(--pagination-size);
+  margin: calc(var(--pagination-margin) * 0.5);
+  font-size: var(--pagination-font-size);
+  color: inherit;
+  border-radius: var(--pagination-radius);
+  transition: 0.1s;
+}
+.v-pagination__item::-moz-focus-inner,
+.v-pagination a.v-pagination__item::-moz-focus-inner {
+  border: 0;
+}
+.v-pagination__item, .v-pagination__item:hover, .v-pagination__item:focus,
+.v-pagination a.v-pagination__item,
+.v-pagination a.v-pagination__item:hover,
+.v-pagination a.v-pagination__item:focus {
+  text-decoration: none;
+}
+.v-pagination__item:hover, .v-pagination__item:focus,
+.v-pagination a.v-pagination__item:hover,
+.v-pagination a.v-pagination__item:focus {
+  background: rgba(0, 0, 0, 0.1);
+}
+.v-pagination__item--active, .v-pagination__item--active:hover, .v-pagination__item--active:focus, .v-pagination__item--active:active,
+.v-pagination a.v-pagination__item--active,
+.v-pagination a.v-pagination__item--active:hover,
+.v-pagination a.v-pagination__item--active:focus,
+.v-pagination a.v-pagination__item--active:active {
+  color: var(--text-color);
+  pointer-events: none;
+  background-color: var(--main-color);
+}
+.v-pagination__item--disabled,
+.v-pagination a.v-pagination__item--disabled {
+  color: var(--palette-muted) !important;
+  pointer-events: none !important;
+  background: transparent !important;
+}
+.v-pagination__item--truncate,
+.v-pagination a.v-pagination__item--truncate {
+  color: var(--palette-muted) !important;
+  pointer-events: none !important;
+  background: transparent !important;
+}
+.v-pagination__item .v-icon,
+.v-pagination a.v-pagination__item .v-icon {
+  font-size: 150%;
+}
+.v-pagination--dense .v-pagination__item {
+  --pagination-size: var(--pagination-item-size-dense);
+  --pagination-margin: var(--pagination-item-margin-dense);
+  --pagination-font-size: var(--pagination-item-font-size-dense);
+}
+.v-pagination--disabled .v-pagination__item {
+  color: var(--palette-muted);
+  pointer-events: none;
+}
+.v-pagination--disabled .v-pagination__item:hover, .v-pagination--disabled .v-pagination__item:focus {
+  background: transparent;
+}
+.v-pagination--disabled .v-pagination__item--active {
+  background: var(--palette-muted);
+}
 .v-list-tile {
   --tile-background: var(--main-color, transparent);
   --tile-active-background: var(--deep-color, transparent);
@@ -994,8 +1105,24 @@ h6,
   flex: 0 0 auto;
   margin-top: auto;
 }
+.v-hero {
+  --hero-background-color: var(--main-color);
+  --hero-text-color: var(--text-color);
+  padding: 20px 30px;
+  margin: 0;
+  color: var(--hero-text-color);
+  background-color: var(--hero-background-color);
+}
+.v-hero__title {
+  margin: 0;
+  font-size: 1.75rem;
+  font-weight: 300;
+  line-height: 1;
+  color: inherit;
+}
 .v-navigation-item--opened {
   --tile-background: var(--tile-active-background);
+  --tile-text-color: var(--tile-text-active-color);
 }
 .v-navigation-item__expand {
   transition: height 0.2s;
@@ -1522,20 +1649,27 @@ h6,
   --height: var(--toolbar-dense-height);
 }
 .v-toolbar-menu {
+  height: 100%;
+  margin: 0;
+  box-shadow: none;
+}
+.v-toolbar-edge {
   display: flex;
+  flex: 0 0;
   align-items: center;
   align-self: stretch;
 }
-.v-toolbar-menu:empty, .v-toolbar-menu--empty {
+.v-toolbar-edge:empty, .v-toolbar-edge--empty {
   display: none;
 }
-.v-toolbar-menu--start {
+.v-toolbar-edge--start {
   margin-right: calc(var(--root-em) * 0.75);
   margin-left: calc(-1 * var(--root-em) * 0.75);
 }
-.v-toolbar-menu--end {
+.v-toolbar-edge--end {
+  padding-left: calc(var(--root-em) * 0.75);
   margin-right: calc(-1 * var(--root-em) * 0.75);
-  margin-left: calc(var(--root-em) * 0.75);
+  margin-left: auto;
 }
 .v-toolbar-title {
   display: flex;

package/dist/vui.d.ts

@@ -123,6 +123,7 @@ export declare function createListTileProps(): {
     };
     startIconEmptySpace: BooleanConstructor;
     color: PropType<ScopeName>;
+    exactMatch: BooleanConstructor;
     tag: StringConstructor;
     to: PropType<RouteLocationRaw>;
     replace: BooleanConstructor;
@@ -157,6 +158,7 @@ export declare function createNavigationItemProps(): {
     };
     startIconEmptySpace: BooleanConstructor;
     color: PropType<ScopeName>;
+    exactMatch: BooleanConstructor;
     tag: StringConstructor;
     to: PropType<RouteLocationRaw>;
     replace: BooleanConstructor;
@@ -482,6 +484,44 @@ export declare interface NavigationItemInput extends ExtractPropInput<ReturnType
     children?: NavigationItemInput[];
 }
 
+export declare const PAGINATION_ALIGNS: readonly ["left", "center", "right"];
+
+export declare function paginationProps(): {
+    /**
+     * Active Pages
+     */
+    modelValue: {
+        type: PropType<string | number>;
+        default: number;
+    };
+    /**
+     * Total number of pages
+     */
+    length: {
+        type: PropType<string | number>;
+        default: number;
+    };
+    /**
+     * Maximum number of links to display.
+     */
+    totalVisible: PropType<string | number>;
+    /**
+     * true when narrowing
+     */
+    dense: BooleanConstructor;
+    disabled: BooleanConstructor;
+    align: {
+        type: PropType<"left" | "center" | "right">;
+        default: string;
+    };
+    /**
+     * To synchronize with a query, use the query name
+     */
+    routeQuery: StringConstructor;
+    beforeChange: PropType<VPaginationGuard>;
+    color: PropType<ScopeName>;
+};
+
 export declare type RawIconProp = IconName | EmptyIconSymbol | ToggleableIconHook;
 
 export declare function rawIconProp(): PropType<RawIconProp>;
@@ -1311,6 +1351,33 @@ export declare interface VFormSlots {
     default: VueForm;
 }
 
+export declare const VHero: DefineComponent<{
+    color: {
+        type: PropType<ScopeName>;
+        default: string;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    hTag: {
+        type: StringConstructor;
+        default: string;
+    };
+}, () => JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{
+    color?: unknown;
+    tag?: unknown;
+    hTag?: unknown;
+} & {
+    color: ScopeName;
+    tag: string;
+    hTag: string;
+} & {}>, {
+    color: ScopeName;
+    tag: string;
+    hTag: string;
+}>;
+
 export declare const VIcon: DefineComponent<{
     name: {
         type: PropType<IconName | "$empty">;
@@ -1341,6 +1408,7 @@ export declare const VListTile: DefineComponent<{
     };
     startIconEmptySpace: BooleanConstructor;
     color: PropType<ScopeName>;
+    exactMatch: BooleanConstructor;
     tag: StringConstructor;
     to: PropType<RouteLocationRaw>;
     replace: BooleanConstructor;
@@ -1372,6 +1440,7 @@ export declare const VListTile: DefineComponent<{
     fallbackTag?: unknown;
     startIconEmptySpace?: unknown;
     color?: unknown;
+    exactMatch?: unknown;
     tag?: unknown;
     to?: unknown;
     replace?: unknown;
@@ -1395,6 +1464,7 @@ export declare const VListTile: DefineComponent<{
     replace: boolean;
     ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false" | undefined;
     startIconEmptySpace: boolean;
+    exactMatch: boolean;
     fallbackTag: string;
     custom: boolean;
     disabled: boolean;
@@ -1424,6 +1494,7 @@ export declare const VListTile: DefineComponent<{
     replace: boolean;
     ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false" | undefined;
     startIconEmptySpace: boolean;
+    exactMatch: boolean;
     fallbackTag: string;
     custom: boolean;
     disabled: boolean;
@@ -1468,6 +1539,7 @@ export declare const VNavigationItem: DefineComponent<{
     };
     startIconEmptySpace: BooleanConstructor;
     color: PropType<ScopeName>;
+    exactMatch: BooleanConstructor;
     tag: StringConstructor;
     to: PropType<RouteLocationRaw>;
     replace: BooleanConstructor;
@@ -1501,6 +1573,7 @@ export declare const VNavigationItem: DefineComponent<{
     fallbackTag?: unknown;
     startIconEmptySpace?: unknown;
     color?: unknown;
+    exactMatch?: unknown;
     tag?: unknown;
     to?: unknown;
     replace?: unknown;
@@ -1524,6 +1597,7 @@ export declare const VNavigationItem: DefineComponent<{
     ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false" | undefined;
     replace: boolean;
     startIconEmptySpace: boolean;
+    exactMatch: boolean;
     fallbackTag: string;
     custom: boolean;
     disabled: boolean;
@@ -1555,6 +1629,7 @@ export declare const VNavigationItem: DefineComponent<{
     ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false" | undefined;
     replace: boolean;
     startIconEmptySpace: boolean;
+    exactMatch: boolean;
     fallbackTag: string;
     custom: boolean;
     disabled: boolean;
@@ -1726,6 +1801,77 @@ export declare const VOptionGroup: DefineComponent<{
     disabled: boolean;
 }>;
 
+export declare const VPagination: DefineComponent<{
+    /**
+     * Active Pages
+     */
+    modelValue: {
+        type: PropType<string | number>;
+        default: number;
+    };
+    /**
+     * Total number of pages
+     */
+    length: {
+        type: PropType<string | number>;
+        default: number;
+    };
+    /**
+     * Maximum number of links to display.
+     */
+    totalVisible: PropType<string | number>;
+    /**
+     * true when narrowing
+     */
+    dense: BooleanConstructor;
+    disabled: BooleanConstructor;
+    align: {
+        type: PropType<"left" | "center" | "right">;
+        default: string;
+    };
+    /**
+     * To synchronize with a query, use the query name
+     */
+    routeQuery: StringConstructor;
+    beforeChange: PropType<VPaginationGuard>;
+    color: PropType<ScopeName>;
+}, () => JSX.Element | undefined, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    change: (page: number) => true;
+}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{
+    modelValue?: unknown;
+    length?: unknown;
+    totalVisible?: unknown;
+    dense?: unknown;
+    disabled?: unknown;
+    align?: unknown;
+    routeQuery?: unknown;
+    beforeChange?: unknown;
+    color?: unknown;
+} & {
+    dense: boolean;
+    disabled: boolean;
+    length: string | number;
+    modelValue: string | number;
+    align: "left" | "center" | "right";
+} & {
+    totalVisible?: string | number | undefined;
+    routeQuery?: string | undefined;
+    beforeChange?: VPaginationGuard | undefined;
+    color?: ScopeName | undefined;
+}> & {
+    onChange?: ((page: number) => any) | undefined;
+}, {
+    dense: boolean;
+    disabled: boolean;
+    length: string | number;
+    modelValue: string | number;
+    align: "left" | "center" | "right";
+}>;
+
+export declare type VPaginationAlign = typeof PAGINATION_ALIGNS[number];
+
+export declare type VPaginationGuard = (page: number) => boolean | void | Promise<boolean | void>;
+
 export declare const VPaper: DefineComponent<{
     square: BooleanConstructor;
     headerProps: PropType<ARGS>;
@@ -3226,17 +3372,131 @@ export declare const VToolbar: DefineComponent<{
     dense: boolean;
 }>;
 
-export declare const VToolbarMenu: DefineComponent<{
+export declare const VToolbarEdge: DefineComponent<{
     edge: {
-        type: PropType<VToolbarMenuEdge>;
+        type: PropType<VToolbarEdgeEdge>;
         required: true;
     };
 }, () => JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{
     edge?: unknown;
 } & {
-    edge: VToolbarMenuEdge;
+    edge: VToolbarEdgeEdge;
 } & {}>, {}>;
 
+export declare type VToolbarEdgeEdge = 'start' | 'end';
+
+export declare const VToolbarMenu: DefineComponent<{
+    size: {
+        type: PropType<"sm" | "md" | "lg">;
+        validator: (value: any) => boolean;
+    };
+    spacer: PropType<RawVButtonSpacer>;
+    loading: BooleanConstructor;
+    rounded: BooleanConstructor;
+    icon: PropType<RawVButtonIcon>;
+    startIcon: PropType<RawVButtonIcon>;
+    endIcon: PropType<RawVButtonIcon>;
+    tag: StringConstructor;
+    to: PropType<RouteLocationRaw>;
+    replace: BooleanConstructor;
+    activeClass: StringConstructor;
+    exactActiveClass: StringConstructor;
+    custom: BooleanConstructor;
+    ariaCurrentValue: {
+        readonly type: PropType<"page" | "step" | "location" | "date" | "time" | "true" | "false" | undefined>;
+        readonly default: "page";
+    };
+    disabled: BooleanConstructor;
+    href: StringConstructor;
+    target: StringConstructor;
+    rel: StringConstructor;
+    name: StringConstructor;
+    charset: StringConstructor;
+    hreflang: StringConstructor;
+    download: PropType<string | boolean>;
+    media: StringConstructor;
+    ping: StringConstructor;
+    referrerpolicy: StringConstructor;
+    type: PropType<"submit" | "reset" | "button" | undefined>;
+    variant: PropType<ColorVariant>;
+    theme: PropType<ThemeName>;
+    color: PropType<ScopeName>;
+    textColor: PropType<PaletteName>;
+    borderColor: PropType<PaletteName>;
+}, () => JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{
+    size?: unknown;
+    spacer?: unknown;
+    loading?: unknown;
+    rounded?: unknown;
+    icon?: unknown;
+    startIcon?: unknown;
+    endIcon?: unknown;
+    tag?: unknown;
+    to?: unknown;
+    replace?: unknown;
+    activeClass?: unknown;
+    exactActiveClass?: unknown;
+    custom?: unknown;
+    ariaCurrentValue?: unknown;
+    disabled?: unknown;
+    href?: unknown;
+    target?: unknown;
+    rel?: unknown;
+    name?: unknown;
+    charset?: unknown;
+    hreflang?: unknown;
+    download?: unknown;
+    media?: unknown;
+    ping?: unknown;
+    referrerpolicy?: unknown;
+    type?: unknown;
+    variant?: unknown;
+    theme?: unknown;
+    color?: unknown;
+    textColor?: unknown;
+    borderColor?: unknown;
+} & {
+    loading: boolean;
+    rounded: boolean;
+    ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false" | undefined;
+    replace: boolean;
+    custom: boolean;
+    disabled: boolean;
+} & {
+    theme?: ThemeName | undefined;
+    color?: ScopeName | undefined;
+    textColor?: PaletteName | undefined;
+    borderColor?: PaletteName | undefined;
+    type?: "submit" | "reset" | "button" | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    spacer?: RawVButtonSpacer | undefined;
+    icon?: RawVButtonIcon | undefined;
+    startIcon?: RawVButtonIcon | undefined;
+    endIcon?: RawVButtonIcon | undefined;
+    tag?: string | undefined;
+    to?: RouteLocationRaw | undefined;
+    activeClass?: string | undefined;
+    exactActiveClass?: string | undefined;
+    href?: string | undefined;
+    target?: string | undefined;
+    rel?: string | undefined;
+    name?: string | undefined;
+    charset?: string | undefined;
+    hreflang?: string | undefined;
+    download?: string | boolean | undefined;
+    media?: string | undefined;
+    ping?: string | undefined;
+    referrerpolicy?: string | undefined;
+    variant?: ColorVariant | undefined;
+}>, {
+    loading: boolean;
+    rounded: boolean;
+    ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false" | undefined;
+    replace: boolean;
+    custom: boolean;
+    disabled: boolean;
+}>;
+
 export declare type VToolbarMenuEdge = 'start' | 'end';
 
 export declare const VToolbarTitle: DefineComponent<{