vueless 0.0.815 → 0.0.816

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.815",
+  "version": "0.0.816",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.loader/storybook/stories.ts

@@ -76,14 +76,14 @@ const LoadingTemplate: StoryFn<ULoaderArgs> = (args: ULoaderArgs) => ({
       isLoading.value = !isLoading.value;
     }
 
-    const isLoading = ref(false);
+    const isLoading = ref(true);
 
     return { args, isLoading, toggleLoader };
   },
   template: `
     <URow align="center">
+      <UButton @click="toggleLoader" size="sm">Toggle Loader</UButton>
       <ULoader v-bind="args" :loading="isLoading" />
-      <UButton @click="toggleLoader" size="sm">ToggleLoader</UButton>
     </URow>
   `,
 });
@@ -99,3 +99,13 @@ Colors.args = { enum: "color" };
 
 export const Loading = LoadingTemplate.bind({});
 Loading.args = {};
+
+export const SlotDefault = DefaultTemplate.bind({});
+SlotDefault.args = {
+  size: "lg",
+  slotTemplate: `
+    <template #default>
+      <img src="https://media.tenor.com/9zmtHZ0tIjkAAAAi/nyancat-rainbow-cat.gif" alt="Cat" />
+    </template>
+  `,
+};

package/ui.loader-overlay/storybook/stories.ts

@@ -1,3 +1,4 @@
+import { ref, computed } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -7,7 +8,7 @@ import {
 
 import ULoaderOverlay from "../ULoaderOverlay.vue";
 import UButton from "../../ui.button/UButton.vue";
-import UCol from "../../ui.container-col/UCol.vue";
+import USelect from "../../ui.form-select/USelect.vue";
 
 import { useLoaderOverlay } from "../useLoaderOverlay.ts";
 
@@ -16,6 +17,7 @@ import type { Props } from "../types.ts";
 
 interface ULoaderOverlayArgs extends Props {
   slotTemplate?: string;
+  enum: "color";
 }
 
 export default {
@@ -43,42 +45,95 @@ const DefaultTemplate: StoryFn<ULoaderOverlayArgs> = (args: ULoaderOverlayArgs)
     return { args, slots };
   },
   template: `
-    <ULoaderOverlay v-bind="args" class="w-full h-full">
+    <ULoaderOverlay v-bind="args" :config="{ overlay: 'h-full w-full' }">
       ${args.slotTemplate || getSlotsFragment("")}
     </ULoaderOverlay>
   `,
 });
 
+const EnumVariantTemplate: StoryFn<ULoaderOverlayArgs> = (
+  args: ULoaderOverlayArgs,
+  { argTypes },
+) => ({
+  components: { ULoaderOverlay, USelect },
+  setup() {
+    const selectModel = ref(null);
+    const options = computed(() =>
+      argTypes?.[args.enum]?.options?.map((label, id) => ({ label, id })),
+    );
+    const selectedValue = computed(
+      () => options.value?.find((option) => option.id === selectModel.value)?.label,
+    );
+
+    return {
+      args,
+      selectModel,
+      selectedValue,
+      options,
+    };
+  },
+  template: `
+    <USelect
+      v-model="selectModel"
+      :options="options"
+      placeholder="Select loader color..."
+      open-direction="bottom"
+      class="max-w-60 absolute z-50"
+    />
+
+    <ULoaderOverlay
+      v-bind="args"
+      :[args.enum]="selectedValue"
+      :config="{ overlay: 'h-full w-full z-10' }"
+    />
+  `,
+});
+
 const LoadingTemplate: StoryFn<ULoaderOverlayArgs> = (args: ULoaderOverlayArgs) => ({
-  components: { ULoaderOverlay, UButton, UCol },
+  components: { ULoaderOverlay, UButton },
   setup() {
     const loaderOverlay = useLoaderOverlay();
 
-    const loaderOverlayOn = loaderOverlay?.loaderOverlayOn || (() => {});
-    const loaderOverlayOff = loaderOverlay?.loaderOverlayOff || (() => {});
-    const isLoading = loaderOverlay?.isLoading || { value: false };
+    const loaderOverlayOn = loaderOverlay.loaderOverlayOn;
+    const loaderOverlayOff = loaderOverlay.loaderOverlayOff;
+    const isLoading = loaderOverlay.isLoading;
 
     function toggleLoading() {
-      if (isLoading.value) {
-        loaderOverlayOff();
-      } else {
-        loaderOverlayOn();
-      }
+      isLoading.value ? loaderOverlayOff() : loaderOverlayOn();
     }
 
-    return { args, loaderOverlayOn, loaderOverlayOff, isLoading, toggleLoading };
+    return { args, isLoading, toggleLoading };
   },
   template: `
-    <UCol align="center" class="pb-4">
-      <UButton label="Toggle loading" size="sm" @click="toggleLoading"/>
-    </UCol>
+    <UButton
+      label="Toggle loading"
+      size="sm"
+      class="absolute z-50"
+      @click="toggleLoading"
+    />
 
-    <ULoaderOverlay  v-bind="args" class="!static w-full h-96" />
+    <ULoaderOverlay
+      v-bind="args"
+      :loading="isLoading"
+      :config="{ overlay: 'h-full w-full z-10' }"
+    />
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const LoadingToggling = LoadingTemplate.bind({});
-LoadingToggling.args = {};
+export const Loading = LoadingTemplate.bind({});
+Loading.args = {};
+
+export const Color = EnumVariantTemplate.bind({});
+Color.args = { enum: "color" };
+
+export const SlotDefault = DefaultTemplate.bind({});
+SlotDefault.args = {
+  slotTemplate: `
+    <template #default>
+      <img src="https://media.tenor.com/9zmtHZ0tIjkAAAAi/nyancat-rainbow-cat.gif" alt="Cat" />
+    </template>
+  `,
+};

package/ui.loader-progress/storybook/stories.ts

@@ -1,3 +1,4 @@
+import { ref } from "vue";
 import { getArgTypes, getSlotNames, getDocsDescription } from "../../utils/storybook.ts";
 
 import ULoaderProgress from "../ULoaderProgress.vue";
@@ -14,7 +15,7 @@ import type { Props } from "../types.ts";
 
 interface ULoaderProgressArgs extends Props {
   slotTemplate?: string;
-  enum: "color";
+  enum: "color" | "size";
 }
 
 export default {
@@ -82,7 +83,7 @@ const EnumVariantTemplate: StoryFn<ULoaderProgressArgs> = (
       >
         <UBadge
           :label="option"
-          :[args.enum]="option"
+          :[args.enum]="args.enum !== 'size' ? option : undefined"
         />
         <ULoaderProgress
           resources="https://api.publicapis.org/images"
@@ -96,8 +97,33 @@ const EnumVariantTemplate: StoryFn<ULoaderProgressArgs> = (
   `,
 });
 
+const LoadingTemplate: StoryFn<ULoaderProgressArgs> = (args: ULoaderProgressArgs) => ({
+  components: { ULoaderProgress, UButton, URow },
+  setup() {
+    function toggleLoader() {
+      isLoading.value = !isLoading.value;
+    }
+
+    const isLoading = ref(false);
+
+    return { args, isLoading, toggleLoader };
+  },
+  template: `
+    <URow align="center">
+      <UButton @click="toggleLoader" size="sm">Toggle Loader</UButton>
+      <ULoaderProgress v-bind="args" :loading="isLoading" />
+    </URow>
+  `,
+});
+
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Size = EnumVariantTemplate.bind({});
+Size.args = { enum: "size" };
+
 export const Color = EnumVariantTemplate.bind({});
 Color.args = { enum: "color" };
+
+export const Loading = LoadingTemplate.bind({});
+Loading.args = {};