vueless 1.3.7-beta.1 → 1.3.7-beta.3

package/components.d.ts

@@ -44,6 +44,7 @@ export { default as URow } from "./ui.container-row/URow.vue";
 export { default as UGrid } from "./ui.container-grid/UGrid.vue";
 export { default as UGroup } from "./ui.container-group/UGroup.vue";
 export { default as UGroups } from "./ui.container-groups/UGroups.vue";
+export { default as UCollapsible } from "./ui.container-collapsible/UCollapsible.vue";
 export { default as UAccordion } from "./ui.container-accordion/UAccordion.vue";
 export { default as UAccordionItem } from "./ui.container-accordion-item/UAccordionItem.vue";
 export { default as UEmpty } from "./ui.container-empty/UEmpty.vue";

package/components.ts

@@ -44,6 +44,7 @@ export { default as URow } from "./ui.container-row/URow.vue";
 export { default as UGrid } from "./ui.container-grid/UGrid.vue";
 export { default as UGroup } from "./ui.container-group/UGroup.vue";
 export { default as UGroups } from "./ui.container-groups/UGroups.vue";
+export { default as UCollapsible } from "./ui.container-collapsible/UCollapsible.vue";
 export { default as UAccordion } from "./ui.container-accordion/UAccordion.vue";
 export { default as UAccordionItem } from "./ui.container-accordion-item/UAccordionItem.vue";
 export { default as UEmpty } from "./ui.container-empty/UEmpty.vue";

package/constants.d.ts

@@ -145,6 +145,7 @@ export namespace COMPONENTS {
     let UButton: string;
     let ULink: string;
     let UToggle: string;
+    let UDropdown: string;
     let UDropdownButton: string;
     let UDropdownBadge: string;
     let UDropdownLink: string;
@@ -183,6 +184,7 @@ export namespace COMPONENTS {
     let UGrid: string;
     let UGroup: string;
     let UGroups: string;
+    let UCollapsible: string;
     let UAccordion: string;
     let UAccordionItem: string;
     let UEmpty: string;

package/constants.js

@@ -249,6 +249,7 @@ export const COMPONENTS = {
   UToggle: "ui.button-toggle",
 
   /* Dropdowns */
+  UDropdown: "ui.dropdown",
   UDropdownButton: "ui.dropdown-button",
   UDropdownBadge: "ui.dropdown-badge",
   UDropdownLink: "ui.dropdown-link",
@@ -293,6 +294,7 @@ export const COMPONENTS = {
   UGrid: "ui.container-grid",
   UGroup: "ui.container-group",
   UGroups: "ui.container-groups",
+  UCollapsible: "ui.container-collapsible",
   UAccordion: "ui.container-accordion",
   UAccordionItem: "ui.container-accordion-item",
   UEmpty: "ui.container-empty",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.3.7-beta.1",
+  "version": "1.3.7-beta.3",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -57,7 +57,7 @@
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "@vueless/storybook": "^1.3.16",
+    "@vueless/storybook": "^1.3.18",
     "eslint": "^9.32.0",
     "eslint-plugin-storybook": "^10.0.2",
     "eslint-plugin-vue": "^10.3.0",

package/ui.container-col/UCol.vue

@@ -28,7 +28,6 @@ defineExpose({
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-
 const { getDataTest, wrapperAttrs } = useUI<Config>(defaultConfig);
 </script>
 

package/ui.container-collapsible/UCollapsible.vue

@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import { nextTick, computed, ref, useId, useTemplateRef, watch } from "vue";
+
+import { useUI } from "../composables/useUI";
+import { getDefaults } from "../utils/ui";
+
+import vClickOutside from "../v.click-outside/vClickOutside";
+
+import defaultConfig from "./config";
+import { COMPONENT_NAME } from "./constants";
+
+import type { Props, Config } from "./types";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+});
+
+const emit = defineEmits([
+  /**
+   * Triggers when the opened state changes.
+   * @property {boolean} value
+   */
+  "update:open",
+
+  /**
+   * Triggers when collapsible is opened.
+   */
+  "open",
+
+  /**
+   * Triggers when collapsible is closed.
+   */
+  "close",
+]);
+
+const internalIsOpened = ref(false);
+const isClickingContent = ref(false);
+
+const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
+const elementId = props.id || useId();
+
+watch(
+  () => props.open,
+  (newValue) => {
+    if (newValue !== undefined) {
+      internalIsOpened.value = newValue;
+    }
+  },
+  { immediate: true },
+);
+
+const isOpened = computed({
+  get: () => internalIsOpened.value,
+  set: (value) => {
+    internalIsOpened.value = value;
+    emit("update:open", value);
+  },
+});
+
+function handleClickOutside() {
+  if (isClickingContent.value || !props.closeOnOutside) {
+    return;
+  }
+
+  hide();
+}
+
+function toggle() {
+  if (props.disabled) return;
+
+  isOpened.value = !isOpened.value;
+
+  isOpened.value ? emit("open") : emit("close");
+}
+
+function hide() {
+  isOpened.value = false;
+
+  emit("close");
+}
+
+function show() {
+  if (props.disabled) return;
+
+  isOpened.value = true;
+
+  emit("open");
+}
+
+function onContentClick() {
+  if (!props.closeOnContent) {
+    isClickingContent.value = true;
+
+    nextTick(() => {
+      isClickingContent.value = false;
+    });
+
+    return;
+  }
+
+  hide();
+}
+
+defineExpose({
+  /**
+   * A reference to the component's wrapper element for direct DOM manipulation.
+   * @property {HTMLDivElement}
+   */
+  wrapperRef,
+
+  /**
+   * Hides the collapsible content.
+   * @property {function}
+   */
+  hide,
+
+  /**
+   * Shows the collapsible content.
+   * @property {function}
+   */
+  show,
+
+  /**
+   * Toggles the collapsible visibility.
+   * @property {function}
+   */
+  toggle,
+
+  /**
+   * Indicates whether the collapsible is opened.
+   * @property {boolean}
+   */
+  isOpened,
+});
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const mutatedProps = computed(() => ({
+  /* component state, not a props */
+  opened: isOpened.value,
+}));
+
+const { getDataTest, config, wrapperAttrs, contentAttrs } = useUI<Config>(
+  defaultConfig,
+  mutatedProps,
+);
+</script>
+
+<template>
+  <div
+    :id="elementId"
+    ref="wrapper"
+    v-click-outside="handleClickOutside"
+    v-bind="wrapperAttrs"
+    tabindex="0"
+    :data-test="getDataTest()"
+    @click="toggle"
+    @keydown.enter="toggle"
+  >
+    <!--
+      @slot Use it to add custom trigger element for the collapsible.
+      @binding {boolean} opened
+    -->
+    <slot :opened="isOpened" />
+
+    <Transition v-bind="config.contentTransition">
+      <!--
+        @slot Use it to add collapsible content.
+        @binding {boolean} opened
+      -->
+      <div
+        v-if="isOpened"
+        v-bind="contentAttrs"
+        :data-test="getDataTest('content')"
+        @click.stop="onContentClick"
+      >
+        <!--
+          @slot Use it to add some content need to be shown.
+          @binding {boolean} opened
+          @binding {string} contentClasses
+        -->
+        <slot name="content" :opened="isOpened" :content-classes="contentAttrs.class" />
+      </div>
+    </Transition>
+  </div>
+</template>

package/ui.container-collapsible/config.ts

@@ -0,0 +1,45 @@
+export default /*tw*/ {
+  wrapper: {
+    base: `
+      relative inline-block h-max rounded-medium transition cursor-pointer outline-transparent
+      focus-visible:outline-medium focus-visible:outline-offset-2 focus-visible:outline-primary`,
+    variants: {
+      disabled: {
+        true: "cursor-not-allowed",
+      },
+    },
+  },
+  content: {
+    base: "z-10 w-fit",
+    variants: {
+      absolute: {
+        true: "absolute",
+        false: "",
+      },
+      yPosition: {
+        top: "bottom-full mb-1",
+        bottom: "top-full mt-1",
+      },
+      xPosition: {
+        left: "left-0",
+        right: "right-0",
+      },
+    },
+  },
+  contentTransition: {
+    enterActiveClass: "ease-out duration-200",
+    enterFromClass: "opacity-0 scale-95",
+    enterToClass: "opacity-100 scale-100",
+    leaveActiveClass: "ease-in duration-150",
+    leaveFromClass: "opacity-100 scale-100",
+    leaveToClass: "opacity-0 scale-95",
+  },
+  defaults: {
+    absolute: true,
+    yPosition: "bottom",
+    xPosition: "left",
+    closeOnOutside: true,
+    closeOnContent: false,
+    disabled: false,
+  },
+};

package/ui.container-collapsible/constants.ts

@@ -0,0 +1 @@
+export const COMPONENT_NAME = "UCollapsible";

package/ui.container-collapsible/storybook/docs.mdx

@@ -0,0 +1,17 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
+import { getSource } from "../../utils/storybook.ts";
+
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />
+

package/ui.container-collapsible/storybook/stories.ts

@@ -0,0 +1,261 @@
+import { ref } from "vue";
+import {
+  getArgs,
+  getArgTypes,
+  getSlotNames,
+  getSlotsFragment,
+  getDocsDescription,
+} from "../../utils/storybook";
+
+import UCollapsible from "../UCollapsible.vue";
+import UButton from "../../ui.button/UButton.vue";
+import UCard from "../../ui.container-card/UCard.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3-vite";
+import type { Props } from "../types";
+
+interface UCollapsibleArgs extends Props {
+  slotTemplate?: string;
+  enum: "yPosition" | "xPosition";
+}
+
+const defaultTemplate = `
+  <template #default="{ opened }">
+    <UButton :label="opened ? 'Close' : 'Open'" />
+  </template>
+
+  <template #content>
+    <UCard title="Collapsible Content" description="This is the collapsible content area." />
+  </template>
+`;
+
+export default {
+  id: "5270",
+  title: "Containers / Collapsible",
+  component: UCollapsible,
+  args: {
+    slotTemplate: defaultTemplate,
+  },
+  argTypes: {
+    ...getArgTypes(UCollapsible.__name),
+  },
+  parameters: {
+    docs: {
+      ...getDocsDescription(UCollapsible.__name),
+      story: {
+        height: "300px",
+      },
+    },
+  },
+} as Meta;
+
+const DefaultTemplate: StoryFn<UCollapsibleArgs> = (args: UCollapsibleArgs) => ({
+  components: { UCollapsible, UButton, UCard },
+  setup: () => ({ args, slots: getSlotNames(UCollapsible.__name) }),
+  template: `
+    <UCollapsible v-bind="args">
+      ${args.slotTemplate || getSlotsFragment("")}
+    </UCollapsible>
+  `,
+});
+
+const EnumTemplate: StoryFn<UCollapsibleArgs> = (args: UCollapsibleArgs, { argTypes }) => ({
+  components: { UCollapsible, UButton, UCard, URow },
+  setup: () => ({ args, argTypes, getArgs }),
+  template: `
+    <URow>
+      <UCollapsible
+        v-for="option in argTypes?.[args.enum]?.options"
+        v-bind="getArgs(args, option)"
+        v-model:open="args.open"
+        :key="option"
+      >
+        ${args.slotTemplate}
+      </UCollapsible>
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const YPositions = EnumTemplate.bind({});
+YPositions.args = { enum: "yPosition", slotTemplate: defaultTemplate };
+
+export const XPositions = EnumTemplate.bind({});
+XPositions.args = { enum: "xPosition" };
+
+export const NonAbsolute: StoryFn<UCollapsibleArgs> = (args) => ({
+  components: { UCollapsible, UButton, UCard, UCol },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UCol gap="md">
+      <UCollapsible :absolute="false">
+        <template #default="{ opened }">
+          <UButton :label="opened ? 'Close' : 'Open'" />
+        </template>
+        <template #content>
+          <UCard
+            title="Non-Absolute Content"
+            description="This content is not positioned absolutely, so it flows with the document."
+          />
+        </template>
+      </UCollapsible>
+      <div class="p-4 border border-gray-300 rounded">
+        <p>This content appears below the collapsible and will be pushed down when it opens.</p>
+      </div>
+    </UCol>
+  `,
+});
+
+export const VModel: StoryFn<UCollapsibleArgs> = (args) => ({
+  components: { UCollapsible, UButton, UCard, URow },
+  setup() {
+    const isOpen = ref(false);
+
+    function toggle() {
+      isOpen.value = !isOpen.value;
+    }
+
+    return { args, isOpen, toggle };
+  },
+  template: `
+    <UCol gap="md">
+      <URow gap="md">
+        <UButton label="Toggle Collapsible" @click="toggle" />
+        <UButton :label="isOpen ? 'Close' : 'Open'" variant="outlined" @click="isOpen = !isOpen" />
+      </URow>
+
+      <UCollapsible v-model:open="isOpen">
+        <template #default="{ opened }">
+          <UButton :label="opened ? 'Opened' : 'Closed'" color="secondary" />
+        </template>
+        <template #content>
+          <UCard
+            title="Controlled Content"
+            description="This collapsible is controlled by v-model. Use the buttons above to toggle it."
+          />
+        </template>
+      </UCollapsible>
+    </UCol>
+  `,
+});
+
+export const CloseOnOutside: StoryFn<UCollapsibleArgs> = (args) => ({
+  components: { UCollapsible, UButton, UCard },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div class="p-8">
+      <p class="mb-4 text-sm text-gray-600">Click outside the collapsible content to close it.</p>
+      <UCollapsible close-on-outside>
+        <template #default="{ opened }">
+          <UButton :label="opened ? 'Close' : 'Open'" />
+        </template>
+        <template #content>
+          <UCard
+            title="Click Outside to Close"
+            description="This collapsible will close when you click outside of it."
+          />
+        </template>
+      </UCollapsible>
+    </div>
+  `,
+});
+
+export const CloseOnContent: StoryFn<UCollapsibleArgs> = (args) => ({
+  components: { UCollapsible, UButton, UCard },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div class="p-8">
+      <p class="mb-4 text-sm text-gray-600">Click on the content to close the collapsible.</p>
+      <UCollapsible close-on-content>
+        <template #default="{ opened }">
+          <UButton :label="opened ? 'Close' : 'Open'" />
+        </template>
+        <template #content>
+          <UCard
+            title="Click Content to Close"
+            description="Click anywhere on this card to close the collapsible."
+          />
+        </template>
+      </UCollapsible>
+    </div>
+  `,
+});
+
+export const Disabled: StoryFn<UCollapsibleArgs> = (args) => ({
+  components: { UCollapsible, UButton, UCard },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UCollapsible disabled>
+      <template #default="{ opened }">
+        <UButton :label="opened ? 'Close' : 'Open'" disabled />
+      </template>
+      <template #content>
+        <UCard title="Disabled Content" description="This content cannot be shown." />
+      </template>
+    </UCollapsible>
+  `,
+});
+
+export const CustomContent: StoryFn<UCollapsibleArgs> = (args) => ({
+  components: { UCollapsible, UButton, UCard, URow },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow gap="xl">
+      <UCollapsible>
+        <template #default="{ opened }">
+          <UButton
+            :label="opened ? 'Hide Menu' : 'Show Menu'"
+            :left-icon="opened ? 'expand_less' : 'expand_more'"
+          />
+        </template>
+        <template #content>
+          <UCard class="w-64">
+            <div class="p-4 space-y-2">
+              <div class="hover:bg-gray-100 p-2 rounded cursor-pointer">Menu Item 1</div>
+              <div class="hover:bg-gray-100 p-2 rounded cursor-pointer">Menu Item 2</div>
+              <div class="hover:bg-gray-100 p-2 rounded cursor-pointer">Menu Item 3</div>
+              <div class="hover:bg-gray-100 p-2 rounded cursor-pointer">Menu Item 4</div>
+            </div>
+          </UCard>
+        </template>
+      </UCollapsible>
+
+      <UCollapsible y-position="top">
+        <template #default="{ opened }">
+          <UButton
+            :label="opened ? 'Hide Tooltip' : 'Show Tooltip'"
+            variant="outlined"
+          />
+        </template>
+        <template #content>
+          <UCard class="w-48">
+            <div class="p-3 text-sm">
+              This is a tooltip-like collapsible that appears above the trigger.
+            </div>
+          </UCard>
+        </template>
+      </UCollapsible>
+    </URow>
+  `,
+});
+CustomContent.parameters = {
+  docs: {
+    story: {
+      height: "300px",
+    },
+  },
+};