vueless 1.2.10-beta.0 → 1.2.10-beta.10

package/ui.container-drawer/config.ts

@@ -0,0 +1,128 @@
+export default /*tw*/ {
+  wrapper: "fixed inset-0 z-50 outline-hidden",
+  wrapperTransitionTop: {
+    enterActiveClass: "ease-out duration-300",
+    leaveActiveClass: "ease-in duration-200",
+    enterFromClass: "opacity-0 -translate-y-full",
+    enterToClass: "opacity-100 translate-y-0",
+    leaveFromClass: "opacity-100 translate-y-0",
+    leaveToClass: "opacity-0 -translate-y-full",
+  },
+  wrapperTransitionBottom: {
+    enterActiveClass: "ease-out duration-300",
+    leaveActiveClass: "ease-in duration-200",
+    enterFromClass: "opacity-0 translate-y-full",
+    enterToClass: "opacity-100 translate-y-0",
+    leaveFromClass: "opacity-100 translate-y-0",
+    leaveToClass: "opacity-0 translate-y-full",
+  },
+  wrapperTransitionLeft: {
+    enterActiveClass: "ease-out duration-300",
+    leaveActiveClass: "ease-in duration-200",
+    enterFromClass: "opacity-0 -translate-x-full",
+    enterToClass: "opacity-100 translate-x-0",
+    leaveFromClass: "opacity-100 translate-x-0",
+    leaveToClass: "opacity-0 -translate-x-full",
+  },
+  wrapperTransitionRight: {
+    enterActiveClass: "ease-out duration-300",
+    leaveActiveClass: "ease-in duration-200",
+    enterFromClass: "opacity-0 translate-x-full",
+    enterToClass: "opacity-100 translate-x-0",
+    leaveFromClass: "opacity-100 translate-x-0",
+    leaveToClass: "opacity-0 translate-x-full",
+  },
+  overlay: "fixed inset-0 z-40 bg-inverted/15 dark:bg-lifted/75 backdrop-blur-md",
+  overlayTransition: {
+    enterActiveClass: "ease-out duration-300",
+    enterFromClass: "opacity-0",
+    enterToClass: "opacity-100",
+    leaveActiveClass: "ease-in duration-200",
+    leaveFromClass: "opacity-100",
+    leaveToClass: "opacity-0",
+  },
+  innerWrapper: {
+    base: "h-full relative", // add overflow-y
+    variants: {
+      inset: {
+        true: "m-4 h-[calc(100%-2rem)]",
+      },
+    },
+  },
+  header: {
+    base: "flex justify-between p-6",
+    compoundVariants: [
+      { handle: true, position: "left", class: "pr-0" },
+      { handle: true, position: "right", class: "pl-0" },
+      { handle: true, position: "bottom", class: "pt-0" },
+    ],
+  },
+  beforeTitle: "flex items-center gap-3",
+  titleFallback: "flex flex-col",
+  title: "{UHeader}",
+  description: "mt-1.5 text-medium font-normal text-lifted",
+  body: {
+    base: "px-6 pb-6 text-medium",
+    compoundVariants: [
+      { handle: true, position: "left", class: "pr-0" },
+      { handle: true, position: "right", class: "pl-0" },
+      { handle: true, position: "top", class: "pb-0" },
+    ],
+  },
+  footer: {
+    base: "flex justify-between p-6 max-md:flex-col max-md:gap-4 border-t border-muted",
+    compoundVariants: [
+      { handle: true, position: "left", class: "pr-0" },
+      { handle: true, position: "right", class: "pl-0" },
+    ],
+  },
+  footerLeft: "flex flex-col md:flex-row gap-4 w-full",
+  footerRight: "flex flex-col md:flex-row gap-4 w-full justify-end",
+  drawerWrapper: {
+    base: "flex border absolute select-none cursor-grab active:cursor-grabbing overflow-x-hidden overflow-y-auto",
+    variants: {
+      variant: {
+        solid: "bg-default border-transparent",
+        outlined: "bg-default border-muted",
+        subtle: "bg-muted border-default/50",
+        soft: "bg-muted border-transparent",
+      },
+      position: {
+        top: "top-0 flex-col rounded-b-large w-full h-auto",
+        bottom: "bottom-0 flex-col-reverse rounded-t-large w-full h-auto",
+        left: "left-0 flex-row rounded-r-large w-max h-full",
+        right: "right-0 flex-row-reverse rounded-l-large w-max h-full",
+      },
+      inset: {
+        true: "rounded-large",
+      },
+    },
+  },
+  drawer: "",
+  handleWrapper: {
+    base: "flex items-center justify-center bg-inherit",
+    variants: {
+      position: {
+        top: "w-full h-11",
+        bottom: "w-full h-11",
+        left: "w-11 h-auto",
+        right: "w-11 h-auto",
+      },
+    },
+  },
+  handle: {
+    base: "rounded-large cursor-pointer bg-lifted hover:bg-accented transition",
+    compoundVariants: [
+      { position: ["top", "bottom"], class: "w-11 h-1.5" },
+      { position: ["left", "right"], class: "w-1.5 h-11" },
+    ],
+  },
+  defaults: {
+    variant: "solid",
+    position: "left",
+    inset: false,
+    handle: true,
+    closeOnEsc: true,
+    closeOnOverlay: true,
+  },
+};

package/ui.container-drawer/constants.ts

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const COMPONENT_NAME = "UDrawer";

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

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
+import { getSource } from "../../utils/storybook";
+
+import * as stories from "./stories";
+import defaultConfig from "../config?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-drawer/storybook/stories.ts

@@ -0,0 +1,255 @@
+import {
+  getArgs,
+  getArgTypes,
+  getSlotNames,
+  getSlotsFragment,
+  getDocsDescription,
+} from "../../utils/storybook";
+
+import UDrawer from "../../ui.container-drawer/UDrawer.vue";
+import UButton from "../../ui.button/UButton.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import UHeader from "../../ui.text-header/UHeader.vue";
+import USkeleton from "../../ui.skeleton/USkeleton.vue";
+import USkeletonText from "../../ui.skeleton-text/USkeletonText.vue";
+import USkeletonInput from "../../ui.skeleton-input/USkeletonInput.vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3-vite";
+import type { Props } from "../types";
+import type { UnknownObject } from "../../types";
+
+interface UDrawerArgs extends Props {
+  slotTemplate?: string;
+  enum: "variant" | "position";
+  modelValues?: UnknownObject;
+}
+
+export default {
+  id: "5000",
+  title: "Containers / Drawer",
+  component: UDrawer,
+  args: {
+    title: "Sign Up",
+    modelValue: false,
+  },
+  argTypes: {
+    ...getArgTypes(UDrawer.__name),
+  },
+  parameters: {
+    docs: {
+      ...getDocsDescription(UDrawer.__name),
+      story: {
+        height: "550px",
+      },
+    },
+  },
+} as Meta;
+
+const defaultTemplate = `
+  <UCol
+    justify="between"
+    align="stretch"
+    class="h-full min-w-96"
+    gap="xl"
+  >
+    <USkeletonText />
+
+    <URow
+      align="center"
+      justify="between"
+      gap="sm"
+    >
+      <USkeleton class="h-12" />
+      <USkeleton class="h-12" />
+    </URow>
+
+    <UCol gap="sm" block>
+      <USkeletonInput label label-align="top" />
+      <USkeletonInput label label-align="top" />
+    </UCol>
+  </UCol>
+`;
+
+const DefaultTemplate: StoryFn<UDrawerArgs> = (args: UDrawerArgs) => ({
+  components: {
+    UDrawer,
+    URow,
+    UCol,
+    UButton,
+    UIcon,
+    UHeader,
+    USkeleton,
+    USkeletonText,
+    USkeletonInput,
+  },
+  setup() {
+    function onClick() {
+      args.modelValue = true;
+    }
+
+    const slots = getSlotNames(UDrawer.__name);
+
+    return { args, slots, onClick };
+  },
+  template: `
+    <UCol>
+      <UDrawer v-bind="args" v-model="args.modelValue">
+        ${args.slotTemplate || getSlotsFragment(defaultTemplate)}
+      </UDrawer>
+
+      <UButton label="Show drawer" @click="onClick" />
+    </UCol>
+  `,
+});
+
+const EnumTemplate: StoryFn<UDrawerArgs> = (args: UDrawerArgs, { argTypes }) => ({
+  components: {
+    UDrawer,
+    UButton,
+    URow,
+    UCol,
+    USkeleton,
+    USkeletonText,
+    USkeletonInput,
+  },
+  setup: () => ({ args, argTypes, getArgs }),
+  template: `
+    <URow>
+      <UButton
+        v-for="option in argTypes?.[args.enum]?.options"
+        :key="option"
+        :label="option"
+        @click="args.modelValues[option] = !args.modelValues[option]"
+      />
+
+      <UDrawer
+        v-for="option in argTypes?.[args.enum]?.options"
+        :key="option"
+        v-bind="getArgs(args, option)"
+        v-model="args.modelValues[option]"
+      >
+        ${defaultTemplate}
+      </UDrawer>
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Description = DefaultTemplate.bind({});
+Description.args = {
+  description: "Enter your email below to get started and create your account.",
+};
+
+export const NoHandle = DefaultTemplate.bind({});
+NoHandle.args = { handle: false };
+
+export const Inset = DefaultTemplate.bind({});
+Inset.args = { inset: true };
+
+export const NoCloseOnEscAndOverlay = DefaultTemplate.bind({});
+NoCloseOnEscAndOverlay.args = {
+  closeOnEsc: false,
+  closeOnOverlay: false,
+};
+
+export const Position = EnumTemplate.bind({});
+Position.args = { enum: "position", modelValues: {} };
+
+export const Variant = EnumTemplate.bind({});
+Variant.args = { enum: "variant", modelValues: {} };
+
+export const BeforeTitleSlot = DefaultTemplate.bind({});
+BeforeTitleSlot.args = {
+  slotTemplate: `
+    <template #before-title>
+      <UIcon name="account_circle" size="sm" color="primary" />
+    </template>
+    <template #default>
+      ${defaultTemplate}
+    </template>
+  `,
+};
+
+export const TitleSlot = DefaultTemplate.bind({});
+TitleSlot.args = {
+  slotTemplate: `
+    <template #title="{ title }">
+      <UHeader :label="title" color="primary" />
+    </template>
+    <template #default>
+      ${defaultTemplate}
+    </template>
+  `,
+};
+
+export const AfterTitleSlot = DefaultTemplate.bind({});
+AfterTitleSlot.args = {
+  slotTemplate: `
+    <template #after-title>
+      <UIcon name="verified" size="sm" color="primary" />
+    </template>
+    <template #default>
+      ${defaultTemplate}
+    </template>
+  `,
+};
+
+export const ActionsSlot = DefaultTemplate.bind({});
+ActionsSlot.args = {
+  slotTemplate: `
+    <template #actions="{ close }">
+      <UButton
+        label="Close"
+        size="sm"
+        color="grayscale"
+        variant="subtle"
+        @click="close"
+      />
+    </template>
+    <template #default>
+      ${defaultTemplate}
+    </template>
+  `,
+};
+
+export const HandleSlot = DefaultTemplate.bind({});
+HandleSlot.args = {
+  slotTemplate: `
+    <template #default>
+      ${defaultTemplate}
+    </template>
+    <template #handle>
+      <UIcon name="arrow_forward_ios" size="sm" color="neutral" />
+    </template>
+  `,
+};
+
+export const FooterLeftSlot = DefaultTemplate.bind({});
+FooterLeftSlot.args = {
+  slotTemplate: `
+    <template #default>
+      ${defaultTemplate}
+    </template>
+
+    <template #footer-left>
+      <UButton label="Back" variant="subtle" color="neutral" />
+    </template>
+  `,
+};
+
+export const FooterRightSlot = DefaultTemplate.bind({});
+FooterRightSlot.args = {
+  slotTemplate: `
+    <template #default>
+      ${defaultTemplate}
+    </template>
+
+    <template #footer-right>
+      <UButton label="Submit" variant="subtle" />
+    </template>
+  `,
+};