vueless 1.3.7-beta.2 → 1.3.7-beta.4

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/icons/storybook/help.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M483.52-247q16.48 0 28.2-11.72 11.71-11.71 11.71-28.35 0-16.63-11.71-28.19-11.72-11.57-28.32-11.57t-28.19 11.55q-11.6 11.54-11.6 28.33 0 16.52 11.63 28.23Q466.87-247 483.52-247Zm-36.91-146h62.59q0-25.52 6.5-47.02 6.5-21.5 39.78-49.02 30.52-25.05 43.4-50.34 12.88-25.29 12.88-55.69 0-53.69-34.09-86.05t-91.19-32.36q-49.72 0-88.06 25.46-38.33 25.45-55.81 69.45l56.82 21.4q11.24-28.24 32.88-43.62 21.64-15.38 50.21-15.38 31.73 0 51.83 17.58 20.11 17.58 20.11 45.47 0 21.12-12.64 40.38-12.65 19.26-36.45 39.07-29.52 25.52-44.14 51.75-14.62 26.24-14.62 68.92Zm33.42 318.98q-83.46 0-157.54-31.88-74.07-31.88-129.39-87.2-55.32-55.32-87.2-129.36-31.88-74.04-31.88-157.51 0-84.46 31.88-158.54 31.88-74.07 87.16-128.9 55.28-54.84 129.34-86.82 74.06-31.99 157.55-31.99 84.48 0 158.59 31.97 74.1 31.97 128.91 86.77 54.82 54.8 86.79 128.88 31.98 74.08 31.98 158.6 0 83.5-31.99 157.57-31.98 74.07-86.82 129.36-54.83 55.29-128.87 87.17-74.04 31.88-158.51 31.88Zm-.03-68.13q141.04 0 239.45-98.75 98.4-98.76 98.4-239.1 0-141.04-98.4-239.45-98.41-98.4-239.57-98.4-140.16 0-238.95 98.4-98.78 98.41-98.78 239.57 0 140.16 98.75 238.95 98.76 98.78 239.1 98.78ZM480-480Z"/></svg>

package/icons/storybook/logout.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M182.15-114.02q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-595.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34h298.28v68.37H182.15v595.7h298.28v68.13H182.15Zm481.46-182.37-48.74-48.5 100.8-101.04h-357.1v-68.14h355.1l-100.8-101.04 48.74-48.5L846.22-479 663.61-296.39Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.3.7-beta.2",
+  "version": "1.3.7-beta.4",
   "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-max",
+    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,238 @@
+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 UIcon from "../../ui.image-icon/UIcon.vue";
+import UAvatar from "../../ui.image-avatar/UAvatar.vue";
+import UDivider from "../../ui.container-divider/UDivider.vue";
+import UText from "../../ui.text-block/UText.vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3-vite";
+import type { Props } from "../types";
+
+interface UCollapsibleArgs extends Props {
+  slotTemplate?: string;
+  enum: "yPosition" | "xPosition";
+  class?: string;
+  label?: string;
+  rowClass?: string;
+}
+
+const defaultTemplate = `
+  <template #default>
+    <UButton label="John Doe" variant="outlined" size="sm" />
+  </template>
+
+  <template #content>
+    <UCard class="min-w-[280px] !p-2.5">
+      <URow align="center" gap="sm" class="mb-2">
+        <UAvatar label="John Doe" size="md" />
+        <UCol gap="none">
+          <UText size="sm">John Doe</UText>
+          <UText variant="lifted" size="xs">john.doe@example.com</UText>
+        </UCol>
+      </URow>
+      <UDivider />
+      <UCol gap="2xs" class="mt-2">
+        <UButton
+          label="Settings"
+          variant="subtle"
+          size="sm"
+          left-icon="settings"
+          color="neutral"
+          block
+          class="justify-start"
+        />
+        <UButton
+          label="Help & Support"
+          variant="subtle"
+          size="sm"
+          left-icon="help"
+          color="info"
+          block
+          class="justify-start"
+        />
+        <UButton
+          label="Sign Out"
+          variant="subtle"
+          size="sm"
+          left-icon="logout"
+          color="error"
+          block
+          class="justify-start"
+        />
+      </UCol>
+    </UCard>
+  </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, UIcon, UAvatar, UDivider, UText, UCol, URow },
+  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, UIcon, UAvatar, UDivider, UText, UCol, URow },
+  setup: () => {
+    const openStates = ref<Record<string, boolean>>({});
+
+    return { args, argTypes, getArgs, openStates };
+  },
+  template: `
+    <URow :class="args.rowClass">
+      <UCollapsible
+        v-for="option in argTypes?.[args.enum]?.options"
+        v-bind="getArgs(args, option)"
+        v-model:open="openStates[option]"
+        :key="option"
+      >
+        <template #default>
+          <UButton :label="option" variant="outlined" size="sm" />
+        </template>
+
+        <template #content>
+          <UCard class="min-w-[280px] !p-2.5">
+            <URow align="center" gap="sm" class="mb-2">
+              <UAvatar label="John Doe" size="md" />
+              <UCol gap="none">
+                <UText size="sm">John Doe</UText>
+                <UText variant="lifted" size="xs">john.doe@example.com</UText>
+              </UCol>
+            </URow>
+            <UDivider />
+            <UCol gap="2xs" class="mt-2">
+              <UButton
+                label="Settings"
+                variant="subtle"
+                size="sm"
+                left-icon="settings"
+                color="neutral"
+                block
+                class="justify-start"
+              />
+              <UButton
+                label="Help & Support"
+                variant="subtle"
+                size="sm"
+                left-icon="help"
+                color="info"
+                block
+                class="justify-start"
+              />
+              <UButton
+                label="Sign Out"
+                variant="subtle"
+                size="sm"
+                left-icon="logout"
+                color="error"
+                block
+                class="justify-start"
+              />
+            </UCol>
+          </UCard>
+        </template>
+      </UCollapsible>
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Disabled: StoryFn<UCollapsibleArgs> = (args) => ({
+  components: { UCollapsible, UButton, UCard, UDivider, UText, UIcon, UCol, URow },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UCollapsible disabled>
+      <UButton label="John Doe" disabled variant="subtle" size="sm" />
+    </UCollapsible>
+  `,
+});
+Disabled.parameters = {
+  docs: {
+    story: {
+      height: "120px",
+    },
+  },
+};
+
+export const XPosition = EnumTemplate.bind({});
+XPosition.args = {
+  enum: "xPosition",
+  label: "{enumValue}",
+  rowClass: "w-full justify-center gap-96",
+};
+
+export const YPosition = EnumTemplate.bind({});
+YPosition.args = { enum: "yPosition", label: "{enumValue}" };
+YPosition.parameters = {
+  storyClasses: "h-[500px] flex items-center px-6 pt-8 pb-12",
+};
+
+export const NonAbsolute: StoryFn<UCollapsibleArgs> = (args) => ({
+  components: { UCollapsible, UButton, UCard, UCol, UDivider, UText },
+  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 NoCloseOnOutside = DefaultTemplate.bind({});
+NoCloseOnOutside.args = { closeOnOutside: false };
+
+export const CloseOnContent = DefaultTemplate.bind({});
+CloseOnContent.args = { closeOnContent: true };