@vifui/core 0.4.0-alpha.6 → 0.6.0-alpha.8

package/dist/components/checkbox/checkbox-root.vue.js

@@ -7,7 +7,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     color: { type: String, required: false, default: "brand" },
     size: { type: String, required: false, default: "md" },
-    class: { type: String, required: false },
+    class: { type: null, required: false },
     defaultValue: { type: [Boolean, String], required: false },
     modelValue: { type: [Boolean, String, null], required: false },
     disabled: { type: Boolean, required: false },

package/dist/components/divider/divider.vue.d.ts

@@ -1,3 +1,4 @@
+import { type HTMLAttributes } from "vue";
 import type { Colors, Sizes } from "../types/shared-types";
 /**
  * Props for the VifUI Divider component.
@@ -67,7 +68,7 @@ export interface DividerProps {
      * <Divider class="my-8" />
      * ```
      */
-    class?: string;
+    class?: HTMLAttributes["class"];
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/components/divider/divider.vue.js

@@ -14,7 +14,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     size: { type: String, required: false, default: "sm" },
     color: { type: String, required: false, default: "neutral" },
     labelPosition: { type: String, required: false, default: "center" },
-    class: { type: String, required: false }
+    class: { type: null, required: false }
   },
   setup(__props) {
     const props = __props;

package/dist/components/divider/index.d.ts

@@ -1,3 +1,3 @@
-export { default as Divider } from './divider.vue';
-export { dividerVariants, type DividerVariantProps } from './divider.styles';
-export type { DividerProps } from './divider.vue';
+export { default as Divider } from "./divider.vue";
+export { dividerVariants, type DividerVariantProps } from "./divider.styles";
+export type { DividerProps } from "./divider.vue";

package/dist/components/index.d.ts

@@ -6,5 +6,8 @@ export * from "./button";
 export * from "./card";
 export * from "./checkbox";
 export * from "./divider";
+export * from "./list";
 export * from "./spinner";
 export * from "./alert";
+export * from "./tooltip";
+export * from "./tabs";

package/dist/components/list/index.d.ts

@@ -0,0 +1,19 @@
+export { default as ListRoot } from "./list-root.vue";
+export { default as ListHeader } from "./list-header.vue";
+export { default as ListItem } from "./list-item.vue";
+export { default as ListIcon } from "./list-icon.vue";
+export { default as ListAvatar } from "./list-avatar.vue";
+export { default as ListContent } from "./list-content.vue";
+export { default as ListTitle } from "./list-title.vue";
+export { default as ListSubtitle } from "./list-subtitle.vue";
+export { default as ListSlot } from "./list-slot.vue";
+export { listVariants, type ListVariantProps } from "./list.styles";
+export type { ListRootProps } from "./list-root.vue";
+export type { ListHeaderProps } from "./list-header.vue";
+export type { ListItemProps } from "./list-item.vue";
+export type { ListIconProps } from "./list-icon.vue";
+export type { ListAvatarProps } from "./list-avatar.vue";
+export type { ListContentProps } from "./list-content.vue";
+export type { ListTitleProps } from "./list-title.vue";
+export type { ListSubtitleProps } from "./list-subtitle.vue";
+export type { ListSlotProps } from "./list-slot.vue";

package/dist/components/list/index.js

@@ -0,0 +1,10 @@
+export { default as ListRoot } from './list-root.vue.js';
+export { default as ListHeader } from './list-header.vue.js';
+export { default as ListItem } from './list-item.vue.js';
+export { default as ListIcon } from './list-icon.vue.js';
+export { default as ListAvatar } from './list-avatar.vue.js';
+export { default as ListContent } from './list-content.vue.js';
+export { default as ListTitle } from './list-title.vue.js';
+export { default as ListSubtitle } from './list-subtitle.vue.js';
+export { default as ListSlot } from './list-slot.vue.js';
+export { listVariants } from './list.styles.js';

package/dist/components/list/list-avatar.vue.d.ts

@@ -0,0 +1,19 @@
+import { type HTMLAttributes } from "vue";
+export interface ListAvatarProps {
+    /**
+     * Custom class names.
+     */
+    class?: HTMLAttributes["class"];
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<ListAvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ListAvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/list/list-avatar.vue.js

@@ -0,0 +1,27 @@
+import { defineComponent, inject, createElementBlock, openBlock, normalizeClass, unref, renderSlot } from 'vue';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "list-avatar",
+  props: {
+    class: { type: null, required: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = inject("listSlots", null);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass([unref(slots)?.avatar?.(), props.class])
+        },
+        [
+          renderSlot(_ctx.$slots, "default")
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/list/list-avatar.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from './list-avatar.vue.js';
+
+
+
+export { _sfc_main as default };

package/dist/components/list/list-content.vue.d.ts

@@ -0,0 +1,19 @@
+import { type HTMLAttributes } from "vue";
+export interface ListContentProps {
+    /**
+     * Custom class names.
+     */
+    class?: HTMLAttributes["class"];
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<ListContentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ListContentProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/list/list-content.vue.js

@@ -0,0 +1,27 @@
+import { defineComponent, inject, createElementBlock, openBlock, normalizeClass, unref, renderSlot } from 'vue';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "list-content",
+  props: {
+    class: { type: null, required: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = inject("listSlots", null);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass([unref(slots)?.content?.(), props.class])
+        },
+        [
+          renderSlot(_ctx.$slots, "default")
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/list/list-content.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from './list-content.vue.js';
+
+
+
+export { _sfc_main as default };

package/dist/components/list/list-header.vue.d.ts

@@ -0,0 +1,31 @@
+import { type HTMLAttributes } from "vue";
+import type { Colors } from "../types/shared-types";
+export interface ListHeaderProps {
+    /**
+     * Color of the header text.
+     */
+    color?: Colors;
+    /**
+     * HTML heading level for semantic structure.
+     * @default "div"
+     */
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div";
+    /**
+     * Custom class names.
+     */
+    class?: HTMLAttributes["class"];
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<ListHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ListHeaderProps> & Readonly<{}>, {
+    as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/list/list-header.vue.js

@@ -0,0 +1,32 @@
+import { defineComponent, inject, computed, createBlock, openBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot } from 'vue';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "list-header",
+  props: {
+    color: { type: String, required: false },
+    as: { type: String, required: false, default: "div" },
+    class: { type: null, required: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = inject("listSlots", null);
+    const headerClasses = computed(() => {
+      const baseClass = slots?.value?.header?.();
+      const colorClass = props.color ? `vif-list__header--${props.color}` : "";
+      return [baseClass, colorClass, props.class];
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+        class: normalizeClass(headerClasses.value)
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["class"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/list/list-header.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from './list-header.vue.js';
+
+
+
+export { _sfc_main as default };

package/dist/components/list/list-icon.vue.d.ts

@@ -0,0 +1,19 @@
+import { type HTMLAttributes } from "vue";
+export interface ListIconProps {
+    /**
+     * Custom class names.
+     */
+    class?: HTMLAttributes["class"];
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<ListIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ListIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/list/list-icon.vue.js

@@ -0,0 +1,27 @@
+import { defineComponent, inject, createElementBlock, openBlock, normalizeClass, unref, renderSlot } from 'vue';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "list-icon",
+  props: {
+    class: { type: null, required: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = inject("listSlots", null);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass([unref(slots)?.icon?.(), props.class])
+        },
+        [
+          renderSlot(_ctx.$slots, "default")
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/list/list-icon.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from './list-icon.vue.js';
+
+
+
+export { _sfc_main as default };

package/dist/components/list/list-item.vue.d.ts

@@ -0,0 +1,46 @@
+import { type HTMLAttributes } from "vue";
+export interface ListItemProps {
+    /**
+     * Makes this specific item active/selected.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Disables the list item.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Makes item behave as a button (clickable).
+     * @default false
+     */
+    button?: boolean;
+    /**
+     * Accessible label for the item.
+     */
+    "aria-label"?: string;
+    /**
+     * Custom class names.
+     */
+    class?: HTMLAttributes["class"];
+}
+declare var __VLS_11: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<ListItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<ListItemProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    button: boolean;
+    disabled: boolean;
+    active: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/list/list-item.vue.js

@@ -0,0 +1,60 @@
+import { defineComponent, inject, computed, createBlock, openBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot } from 'vue';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "list-item",
+  props: {
+    active: { type: Boolean, required: false, default: false },
+    disabled: { type: Boolean, required: false, default: false },
+    button: { type: Boolean, required: false, default: false },
+    "aria-label": { type: String, required: false },
+    class: { type: null, required: false }
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = inject("listSlots", null);
+    const itemClasses = computed(() => {
+      const baseClass = slots?.value?.item?.();
+      const activeClass = props.active ? "vif-list__item--active" : "";
+      return [baseClass, activeClass, props.class];
+    });
+    const handleClick = (event) => {
+      if (!props.disabled) {
+        emit("click", event);
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (props.button && !props.disabled && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        emit("click", event);
+      }
+    };
+    const elementTag = computed(() => props.button ? "button" : "div");
+    const tabIndex = computed(() => {
+      if (props.disabled) return -1;
+      return props.button ? 0 : void 0;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(elementTag.value), {
+        role: "listitem",
+        class: normalizeClass(itemClasses.value),
+        tabindex: tabIndex.value,
+        "aria-disabled": __props.disabled || void 0,
+        "aria-selected": __props.button && __props.active ? true : void 0,
+        "aria-label": props["aria-label"],
+        disabled: __props.button && __props.disabled ? true : void 0,
+        onClick: handleClick,
+        onKeydown: handleKeyDown
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 40, ["class", "tabindex", "aria-disabled", "aria-selected", "aria-label", "disabled"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/list/list-item.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from './list-item.vue.js';
+
+
+
+export { _sfc_main as default };

package/dist/components/list/list-root.vue.d.ts

@@ -0,0 +1,52 @@
+import { type HTMLAttributes } from "vue";
+import type { Sizes } from "../types/shared-types";
+/**
+ * Props for the VifUI ListRoot component.
+ */
+export interface ListRootProps {
+    /**
+     * Defines the visual style of the list.
+     * @default "default"
+     */
+    variant?: "default" | "outline" | "shadow" | "flat" | "divided";
+    /**
+     * Controls the overall list size.
+     * @default "md"
+     */
+    size?: Extract<Sizes, "sm" | "md" | "lg">;
+    /**
+     * Makes list items hoverable.
+     * @default false
+     */
+    hoverable?: boolean;
+    /**
+     * Accessible label for the list.
+     * Required for screen readers.
+     */
+    "aria-label"?: string;
+    /**
+     * ID of element that labels this list.
+     * Alternative to aria-label.
+     */
+    "aria-labelledby"?: string;
+    /**
+     * Custom class names for extending or overriding styles.
+     */
+    class?: HTMLAttributes["class"];
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<ListRootProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ListRootProps> & Readonly<{}>, {
+    size: Extract<Sizes, "sm" | "md" | "lg">;
+    variant: "default" | "outline" | "shadow" | "flat" | "divided";
+    hoverable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/list/list-root.vue.js

@@ -0,0 +1,38 @@
+import { defineComponent, computed, provide, createElementBlock, openBlock, normalizeClass, renderSlot } from 'vue';
+import { listVariants } from './list.styles.js';
+
+const _hoisted_1 = ["aria-label", "aria-labelledby"];
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "list-root",
+  props: {
+    variant: { type: String, required: false, default: "default" },
+    size: { type: String, required: false, default: "md" },
+    hoverable: { type: Boolean, required: false, default: false },
+    "aria-label": { type: String, required: false },
+    "aria-labelledby": { type: String, required: false },
+    class: { type: null, required: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = computed(
+      () => listVariants({
+        variant: props.variant,
+        size: props.size,
+        hoverable: props.hoverable
+      })
+    );
+    provide("listSlots", slots);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        role: "list",
+        class: normalizeClass([slots.value.root(), props.class]),
+        "aria-label": props["aria-label"],
+        "aria-labelledby": props["aria-labelledby"]
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 10, _hoisted_1);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/list/list-root.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from './list-root.vue.js';
+
+
+
+export { _sfc_main as default };

package/dist/components/list/list-slot.vue.d.ts

@@ -0,0 +1,19 @@
+import { type HTMLAttributes } from "vue";
+export interface ListSlotProps {
+    /**
+     * Custom class names.
+     */
+    class?: HTMLAttributes["class"];
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<ListSlotProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ListSlotProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/list/list-slot.vue.js

@@ -0,0 +1,27 @@
+import { defineComponent, inject, createElementBlock, openBlock, normalizeClass, unref, renderSlot } from 'vue';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "list-slot",
+  props: {
+    class: { type: null, required: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = inject("listSlots", null);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass([unref(slots)?.slot?.(), props.class])
+        },
+        [
+          renderSlot(_ctx.$slots, "default")
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/list/list-slot.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from './list-slot.vue.js';
+
+
+
+export { _sfc_main as default };

package/dist/components/list/list-subtitle.vue.d.ts

@@ -0,0 +1,19 @@
+import { type HTMLAttributes } from "vue";
+export interface ListSubtitleProps {
+    /**
+     * Custom class names.
+     */
+    class?: HTMLAttributes["class"];
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<ListSubtitleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ListSubtitleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/list/list-subtitle.vue.js

@@ -0,0 +1,27 @@
+import { defineComponent, inject, createElementBlock, openBlock, normalizeClass, unref, renderSlot } from 'vue';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "list-subtitle",
+  props: {
+    class: { type: null, required: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = inject("listSlots", null);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass([unref(slots)?.subtitle?.(), props.class])
+        },
+        [
+          renderSlot(_ctx.$slots, "default")
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/list/list-subtitle.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from './list-subtitle.vue.js';
+
+
+
+export { _sfc_main as default };