vueless 1.2.10-beta.1 → 1.2.10-beta.3

package/ui.container-drawer/types.ts

@@ -0,0 +1,67 @@
+import defaultConfig from "./config";
+
+import type { ComponentConfig } from "../types";
+
+export type Config = typeof defaultConfig;
+
+export interface Props {
+  /**
+   * Drawer state (shown / hidden).
+   */
+  modelValue?: boolean;
+
+  /**
+   * Drawer title.
+   */
+  title?: string;
+
+  /**
+   * Drawer description.
+   */
+  description?: string;
+
+  /**
+   * Drawer position.
+   */
+  position?: "top" | "bottom" | "left" | "right";
+
+  /**
+   * Drawer variant.
+   */
+  variant?: "solid" | "outlined" | "subtle" | "soft";
+
+  /**
+   * Control whether the Drawer has a handle or not.
+   */
+  handle?: boolean;
+
+  /**
+   * Inset the drawer from the edges.
+   */
+  inset?: boolean;
+
+  /**
+   * Allow closing drawer by clicking on overlay.
+   */
+  closeOnOverlay?: boolean;
+
+  /**
+   * Allow closing drawer by pressing escape (esc) on the keyboard.
+   */
+  closeOnEsc?: boolean;
+
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: ComponentConfig<Config>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string | null;
+}

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

@@ -25,7 +25,7 @@ import type { UnknownObject } from "../../types";
 
 interface UModalArgs extends Props {
   slotTemplate?: string;
-  enum: "size";
+  enum: "size" | "variant";
   modelValues?: UnknownObject;
 }
 
@@ -280,6 +280,9 @@ WithoutDivider.parameters = {
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size", modelValues: {} };
 
+export const Variant = EnumTemplate.bind({});
+Variant.args = { enum: "variant", modelValues: {} };
+
 export const BackLink: StoryFn<UModalArgs> = (args: UModalArgs) => ({
   components: { UModal, UButton, UCheckbox, UCol, URow, UDivider, UInput, UInputPassword },
   setup() {

package/ui.container-modal-confirm/storybook/stories.ts

@@ -23,7 +23,7 @@ import type { UnknownObject } from "../../types";
 interface UModalConfirmArgs extends Props {
   width: string;
   slotTemplate?: string;
-  enum: "size" | "confirmColor";
+  enum: "size" | "variant" | "confirmColor";
   modelValues?: UnknownObject;
 }
 
@@ -83,6 +83,30 @@ const DefaultTemplate: StoryFn<UModalConfirmArgs> = (args: UModalConfirmArgs) =>
   `,
 });
 
+const EnumTemplate: StoryFn<UModalConfirmArgs> = (args: UModalConfirmArgs, { argTypes }) => ({
+  components: { UModalConfirm, UButton, URow },
+  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]"
+      />
+
+      <UModalConfirm
+        v-for="option in argTypes?.[args.enum]?.options"
+        :key="option"
+        v-bind="getArgs(args, option)"
+        v-model="args.modelValues[option]"
+      >
+        ${defaultTemplate}
+      </UModalConfirm>
+    </URow>
+  `,
+});
+
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
@@ -194,31 +218,12 @@ WithoutCancelButton.args = { cancelHidden: true };
 export const DisableConfirmButton = DefaultTemplate.bind({});
 DisableConfirmButton.args = { confirmDisabled: true };
 
-export const Sizes: StoryFn<UModalConfirmArgs> = (args: UModalConfirmArgs, { argTypes }) => ({
-  components: { UModalConfirm, UButton, URow },
-  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]"
-      />
-
-      <UModalConfirm
-        v-for="option in argTypes?.[args.enum]?.options"
-        :key="option"
-        v-bind="getArgs(args, option)"
-        v-model="args.modelValues[option]"
-      >
-        ${defaultTemplate}
-      </UModalConfirm>
-    </URow>
-  `,
-});
+export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size", modelValues: {} };
 
+export const Variant = EnumTemplate.bind({});
+Variant.args = { enum: "variant", modelValues: {} };
+
 export const Colors: StoryFn<UModalConfirmArgs> = (args: UModalConfirmArgs, { argTypes }) => ({
   components: { UModalConfirm, UButton, URow },
   setup: () => ({ args, argTypes, getArgs }),