sprintify-ui 0.10.63 → 0.10.65

package/src/components/BaseLayoutSidebarConfigurable.stories.js

@@ -1,217 +1,217 @@
-import { DateTime } from "luxon";
-import PageDashboard from "../../.storybook/components/PageDashboard.vue";
-import BaseLayoutSidebarConfigurable from "./BaseLayoutSidebarConfigurable.vue";
-import { useSystemAlertStore } from "../stores/systemAlerts";
-import { sizes } from "../../.storybook/utils";
-import BaseAutocompleteFetch from "./BaseAutocompleteFetch.vue";
-
-export default {
-  title: "Layout/BaseLayoutSidebarConfigurable",
-  component: BaseLayoutSidebarConfigurable,
-  parameters: {
-    layout: "fullscreen",
-  },
-  argTypes: {
-    size: {
-      control: {
-        type: "select",
-      },
-      options: sizes,
-    },
-  },
-  args: {
-    user: {
-      email: "jane@witify.io",
-      first_name: "Jane",
-      last_name: "Doe",
-      full_name: "Jane Doe",
-      avatar_url:
-        "https://images.unsplash.com/photo-1494790108377-be9c29b29330??auto=format&fit=crop&w=200&h=200&q=80&g=face",
-    },
-    menu: [
-      {
-        label: "Dashboard",
-        to: "/dashboard",
-        icon: "heroicons:home-20-solid",
-        count: 1,
-        meta: {
-          showSubItems: "always",
-        },
-        actions: [
-          {
-            label: "Sales",
-            to: "/dashboard/1",
-            count: 10,
-          },
-          {
-            label: "Performance",
-            to: "/dashboard/2",
-          },
-          {
-            label: "Workload",
-            to: "/dashboard/3",
-          },
-        ],
-      },
-      {
-        label: "General",
-        actions: [
-          {
-            label: "Articles",
-            to: "/articles",
-            icon: "heroicons:document-text-20-solid",
-            count: 3134,
-            actions: [
-              {
-                label: "Articles",
-                to: "/articles/1",
-                count: 10,
-              },
-              {
-                label: "Videos",
-                to: "/articles/2",
-              },
-              {
-                label: "Training",
-                to: "/articles/3",
-              },
-              {
-                label: "Archived",
-                to: "/articles/4",
-              },
-            ],
-          },
-
-          {
-            label: "Users",
-            to: "/users",
-            icon: "heroicons:users-20-solid",
-          },
-        ],
-      },
-      {
-        label: "Settings",
-        actions: [
-          {
-            label: "Account",
-            to: "/account",
-            icon: "heroicons:cog-20-solid",
-          },
-          {
-            label: "Logout",
-            action: logout,
-            icon: "heroicons:arrow-left-on-rectangle-20-solid",
-          },
-        ],
-      },
-    ],
-    userMenu: [
-      {
-        label: "Dashboard",
-        to: "/",
-        icon: "heroicons:home-20-solid",
-      },
-      {
-        label: "Settings",
-        to: "/account",
-        icon: "heroicons:cog-20-solid",
-      },
-      {
-        label: "Logout",
-        action: logout,
-        icon: "heroicons:arrow-left-on-rectangle-20-solid",
-      },
-    ],
-    notifications: {
-      footerTo: "/",
-      footerLabel: "See all notifications",
-      items: [
-        {
-          id: "1",
-          text: "You have a new message",
-          created_at: DateTime.now().minus({ second: 1 }).toISO(),
-        },
-        {
-          id: "2",
-          text: "Your inbox is now full. Please empty your inbox before it goes bang.",
-          to: "/",
-          created_at: "2022-01-01T00:00:00",
-        },
-      ],
-    },
-  },
-};
-
-async function logout() {
-  alert("logout");
-}
-
-const Template = (args) => ({
-  components: {
-    BaseLayoutSidebarConfigurable,
-    PageDashboard,
-    BaseAutocompleteFetch,
-  },
-  setup() {
-    const alerts = useSystemAlertStore();
-    alerts.push({
-      color: "warning",
-      message: "This is a warning message",
-    });
-
-    return { args };
-  },
-  template: `
-    <BaseLayoutSidebarConfigurable v-bind="args">
-
-      <template #navbar>
-        <div class="hidden items-center grow || sm:flex">
-          <BaseAutocompleteFetch
-            url="https://faker.witify.io/api/todos"
-            labelKey="title"
-            valueKey="id"
-            class="w-full"
-            size="md"
-          />
-        </div>
-      </template>
-
-      <div class="py-10 bg-slate-50">
-        <PageDashboard />
-      </div>
-    </BaseLayoutSidebarConfigurable>
-  `,
-});
-
-export const Light = Template.bind({});
-Light.args = {
-  dark: false,
-  logoUrl: "https://demo.sprintify.app/img/logo/logo-side.svg",
-};
-
-export const Dark = Template.bind({});
-Dark.args = {
-  dark: true,
-  logoUrl: "https://demo.sprintify.app/img/logo/logo-side-dark.svg",
-};
-
-export const SizeXS = Template.bind({});
-SizeXS.args = {
-  size: "xs",
-  dark: true,
-  logoUrl: "https://demo.sprintify.app/img/logo/logo-side-dark.svg",
-};
-
-export const SizeSM = Template.bind({});
-SizeSM.args = {
-  size: "sm",
-  dark: true,
-  logoUrl: "https://demo.sprintify.app/img/logo/logo-side-dark.svg",
-};
-
-export const SizeMD = Template.bind({});
-SizeMD.args = {
-  size: "md",
-  dark: true,
-  logoUrl: "https://demo.sprintify.app/img/logo/logo-side-dark.svg",
-};
+import { DateTime } from "luxon";
+import PageDashboard from "../../.storybook/components/PageDashboard.vue";
+import BaseLayoutSidebarConfigurable from "./BaseLayoutSidebarConfigurable.vue";
+import { useSystemAlertStore } from "../stores/systemAlerts";
+import { sizes } from "../../.storybook/utils";
+import BaseAutocompleteFetch from "./BaseAutocompleteFetch.vue";
+
+export default {
+  title: "Layout/BaseLayoutSidebarConfigurable",
+  component: BaseLayoutSidebarConfigurable,
+  parameters: {
+    layout: "fullscreen",
+  },
+  argTypes: {
+    size: {
+      control: {
+        type: "select",
+      },
+      options: sizes,
+    },
+  },
+  args: {
+    user: {
+      email: "jane@witify.io",
+      first_name: "Jane",
+      last_name: "Doe",
+      full_name: "Jane Doe",
+      avatar_url:
+        "https://images.unsplash.com/photo-1494790108377-be9c29b29330??auto=format&fit=crop&w=200&h=200&q=80&g=face",
+    },
+    menu: [
+      {
+        label: "Dashboard",
+        to: "/dashboard",
+        icon: "heroicons:home-20-solid",
+        count: 1,
+        meta: {
+          showSubItems: "always",
+        },
+        actions: [
+          {
+            label: "Sales",
+            to: "/dashboard/1",
+            count: 10,
+          },
+          {
+            label: "Performance",
+            to: "/dashboard/2",
+          },
+          {
+            label: "Workload",
+            to: "/dashboard/3",
+          },
+        ],
+      },
+      {
+        label: "General",
+        actions: [
+          {
+            label: "Articles",
+            to: "/articles",
+            icon: "heroicons:document-text-20-solid",
+            count: 3134,
+            actions: [
+              {
+                label: "Articles",
+                to: "/articles/1",
+                count: 10,
+              },
+              {
+                label: "Videos",
+                to: "/articles/2",
+              },
+              {
+                label: "Training",
+                to: "/articles/3",
+              },
+              {
+                label: "Archived",
+                to: "/articles/4",
+              },
+            ],
+          },
+
+          {
+            label: "Users",
+            to: "/users",
+            icon: "heroicons:users-20-solid",
+          },
+        ],
+      },
+      {
+        label: "Settings",
+        actions: [
+          {
+            label: "Account",
+            to: "/account",
+            icon: "heroicons:cog-20-solid",
+          },
+          {
+            label: "Logout",
+            action: logout,
+            icon: "heroicons:arrow-left-on-rectangle-20-solid",
+          },
+        ],
+      },
+    ],
+    userMenu: [
+      {
+        label: "Dashboard",
+        to: "/",
+        icon: "heroicons:home-20-solid",
+      },
+      {
+        label: "Settings",
+        to: "/account",
+        icon: "heroicons:cog-20-solid",
+      },
+      {
+        label: "Logout",
+        action: logout,
+        icon: "heroicons:arrow-left-on-rectangle-20-solid",
+      },
+    ],
+    notifications: {
+      footerTo: "/",
+      footerLabel: "See all notifications",
+      items: [
+        {
+          id: "1",
+          text: "You have a new message",
+          created_at: DateTime.now().minus({ second: 1 }).toISO(),
+        },
+        {
+          id: "2",
+          text: "Your inbox is now full. Please empty your inbox before it goes bang.",
+          to: "/",
+          created_at: "2022-01-01T00:00:00",
+        },
+      ],
+    },
+  },
+};
+
+async function logout() {
+  alert("logout");
+}
+
+const Template = (args) => ({
+  components: {
+    BaseLayoutSidebarConfigurable,
+    PageDashboard,
+    BaseAutocompleteFetch,
+  },
+  setup() {
+    const alerts = useSystemAlertStore();
+    alerts.push({
+      color: "warning",
+      message: "This is a warning message",
+    });
+
+    return { args };
+  },
+  template: `
+    <BaseLayoutSidebarConfigurable v-bind="args">
+
+      <template #navbar>
+        <div class="hidden items-center grow || sm:flex">
+          <BaseAutocompleteFetch
+            url="https://faker.witify.io/api/todos"
+            labelKey="title"
+            valueKey="id"
+            class="w-full"
+            size="md"
+          />
+        </div>
+      </template>
+
+      <div class="py-10 bg-slate-50">
+        <PageDashboard />
+      </div>
+    </BaseLayoutSidebarConfigurable>
+  `,
+});
+
+export const Light = Template.bind({});
+Light.args = {
+  dark: false,
+  logoUrl: "https://demo.sprintify.app/img/logo/logo-side.svg",
+};
+
+export const Dark = Template.bind({});
+Dark.args = {
+  dark: true,
+  logoUrl: "https://demo.sprintify.app/img/logo/logo-side-dark.svg",
+};
+
+export const SizeXS = Template.bind({});
+SizeXS.args = {
+  size: "xs",
+  dark: true,
+  logoUrl: "https://demo.sprintify.app/img/logo/logo-side-dark.svg",
+};
+
+export const SizeSM = Template.bind({});
+SizeSM.args = {
+  size: "sm",
+  dark: true,
+  logoUrl: "https://demo.sprintify.app/img/logo/logo-side-dark.svg",
+};
+
+export const SizeMD = Template.bind({});
+SizeMD.args = {
+  size: "md",
+  dark: true,
+  logoUrl: "https://demo.sprintify.app/img/logo/logo-side-dark.svg",
+};