vueless 1.2.10-beta.1 → 1.2.10-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.10-beta.1",
+  "version": "1.2.10-beta.2",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

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 }),