sprintify-ui 0.2.18 → 0.2.21

package/src/components/BaseMenu.stories.js

@@ -1,125 +1,125 @@
-import BaseMenu from './BaseMenu.vue';
-import { Icon as BaseIcon } from '@iconify/vue';
-import BaseAvatar from './BaseAvatar.vue';
-
-export default {
-  title: 'Components/BaseMenu',
-  component: BaseMenu,
-  args: {
-    position: 'bottom-right',
-  },
-  argTypes: {
-    position: {
-      control: { type: 'select' },
-      options: ['bottom-left', 'bottom-right'],
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: {
-    BaseMenu,
-    BaseIcon,
-    BaseAvatar,
-  },
-  setup() {
-    const items = [
-      {
-        label: 'Export file',
-        icon: 'mdi-export',
-        action() {
-          alert('Export!');
-        },
-      },
-      {
-        label: 'Google',
-        icon: 'mdi-google',
-        href: 'https://google.com',
-        count: 1000,
-      },
-      {
-        icon: 'mdi-access-point',
-        label: 'Reconnect',
-        to: 'home',
-        color: 'success',
-      },
-      {
-        icon: 'mdi-archive',
-        label: 'Archive',
-        href: 'https://google.com',
-        color: 'warning',
-      },
-      {
-        icon: 'mdi-trash-can',
-        label: 'Delete',
-        href: 'https://google.com',
-        color: 'danger',
-        count: 1,
-      },
-    ];
-
-    const 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',
-    };
-
-    args.items = items;
-
-    return { args, user };
-  },
-  template: `
-    <div class="pb-52">
-
-      <h2 class="mb-5 font-semibold">Various examples</h2>
-      
-      <p class="text-sm mb-1 text-slate-600">Simple button</p>
-
-      <BaseMenu v-bind="args" class="inline-block">
-        <template #button="{ open }">
-          <div 
-            class="btn" 
-            :class="[open ? 'ring-2 ring-primary-500 ring-offset-2': '']"
-          >
-            Click me
-          </div>
-        </template>
-      </BaseMenu>
-
-      <br>
-      <br>
-
-      <p class="text-sm mb-1 text-slate-600">Contextual action button</p>
-
-      <BaseMenu v-bind="args" class="inline-block">
-        <template #button="{ open }">
-          <div
-            class="flex h-10 w-10 items-center justify-center rounded-full border border-slate-300 bg-white duration-150 hover:bg-slate-50"
-            :class="[open ? 'ring-2 ring-primary-500 ring-offset-2': '']"
-          >
-            <BaseIcon icon="heroicons-solid:dots-vertical" />
-          </div>
-        </template>
-      </BaseMenu>
-
-      <br>
-      <br>
-
-      <p class="text-sm mb-1 text-slate-600">With BaseAvatar</p>
-
-      <BaseMenu v-bind="args" class="inline-block">
-        <template #button="{ open }">
-          <div class="bg-white">
-            <BaseAvatar show-details :user="user" />
-          </div>
-        </template>
-      </BaseMenu>
-    </div>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
+import BaseMenu from './BaseMenu.vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+import BaseAvatar from './BaseAvatar.vue';
+
+export default {
+  title: 'Components/BaseMenu',
+  component: BaseMenu,
+  args: {
+    position: 'bottom-right',
+  },
+  argTypes: {
+    position: {
+      control: { type: 'select' },
+      options: ['bottom-left', 'bottom-right'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseMenu,
+    BaseIcon,
+    BaseAvatar,
+  },
+  setup() {
+    const items = [
+      {
+        label: 'Export file',
+        icon: 'mdi-export',
+        action() {
+          alert('Export!');
+        },
+      },
+      {
+        label: 'Google',
+        icon: 'mdi-google',
+        href: 'https://google.com',
+        count: 1000,
+      },
+      {
+        icon: 'mdi-access-point',
+        label: 'Reconnect',
+        to: 'home',
+        color: 'success',
+      },
+      {
+        icon: 'mdi-archive',
+        label: 'Archive',
+        href: 'https://google.com',
+        color: 'warning',
+      },
+      {
+        icon: 'mdi-trash-can',
+        label: 'Delete',
+        href: 'https://google.com',
+        color: 'danger',
+        count: 1,
+      },
+    ];
+
+    const 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',
+    };
+
+    args.items = items;
+
+    return { args, user };
+  },
+  template: `
+    <div class="pb-52">
+
+      <h2 class="mb-5 font-semibold">Various examples</h2>
+      
+      <p class="text-sm mb-1 text-slate-600">Simple button</p>
+
+      <BaseMenu v-bind="args" class="inline-block">
+        <template #button="{ open }">
+          <div 
+            class="btn" 
+            :class="[open ? 'ring-2 ring-primary-500 ring-offset-2': '']"
+          >
+            Click me
+          </div>
+        </template>
+      </BaseMenu>
+
+      <br>
+      <br>
+
+      <p class="text-sm mb-1 text-slate-600">Contextual action button</p>
+
+      <BaseMenu v-bind="args" class="inline-block">
+        <template #button="{ open }">
+          <div
+            class="flex h-10 w-10 items-center justify-center rounded-full border border-slate-300 bg-white duration-150 hover:bg-slate-50"
+            :class="[open ? 'ring-2 ring-primary-500 ring-offset-2': '']"
+          >
+            <BaseIcon icon="heroicons-solid:dots-vertical" />
+          </div>
+        </template>
+      </BaseMenu>
+
+      <br>
+      <br>
+
+      <p class="text-sm mb-1 text-slate-600">With BaseAvatar</p>
+
+      <BaseMenu v-bind="args" class="inline-block">
+        <template #button="{ open }">
+          <div class="bg-white">
+            <BaseAvatar show-details :user="user" />
+          </div>
+        </template>
+      </BaseMenu>
+    </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseMenu.vue

@@ -1,165 +1,165 @@
-<template>
-  <Menu
-    v-slot="{ open }"
-    as="div"
-    class="text-left"
-    :class="[position == 'custom' ? 'static' : 'relative']"
-  >
-    <div>
-      <MenuButton :class="twButton">
-        <slot
-          name="button"
-          :open="open"
-        />
-      </MenuButton>
-    </div>
-
-    <transition
-      enter-active-class="transition duration-200 ease-out"
-      enter-from-class="transform scale-95 opacity-0"
-      enter-to-class="transform scale-100 opacity-100"
-      leave-active-class="transition duration-75 ease-in"
-      leave-from-class="transform scale-100 opacity-100"
-      leave-to-class="transform scale-95 opacity-0"
-    >
-      <MenuItems
-        :style="menuPositionStyles"
-        :class="twMerge('w-48', twMenu)"
-        class="absolute z-menu mt-2 rounded-md bg-white p-1 shadow-lg outline-none ring-1 ring-black ring-opacity-10 focus:outline-none"
-      >
-        <slot
-          name="items"
-          :items="items"
-        >
-          <template
-            v-for="item in items"
-            :key="item.label + 'link'"
-          >
-            <div
-              v-if="item.line"
-              class="-mx-1 my-1 flex h-px bg-slate-200"
-            />
-
-            <MenuItem
-              v-else-if="item.to"
-              v-slot="{ active, close }"
-            >
-              <RouterLink
-                :to="item.to"
-                @mouseup="close"
-              >
-                <slot
-                  name="item"
-                  :item="item"
-                >
-                  <BaseMenuItem
-                    :label="item.label"
-                    :count="item.count"
-                    :icon="item.icon"
-                    :color="item.color"
-                    :active="active"
-                    :size="size"
-                  />
-                </slot>
-              </RouterLink>
-            </MenuItem>
-
-            <MenuItem
-              v-else-if="item.href"
-              v-slot="{ active }"
-              as="a"
-              :href="item.href"
-            >
-              <slot
-                name="item"
-                :item="item"
-              >
-                <BaseMenuItem
-                  :label="item.label"
-                  :count="item.count"
-                  :icon="item.icon"
-                  :color="item.color"
-                  :active="active"
-                  :size="size"
-                />
-              </slot>
-            </MenuItem>
-
-            <MenuItem
-              v-else-if="item.action"
-              v-slot="{ active }"
-              as="button"
-              type="button"
-              class="w-full"
-              @click="item.action"
-            >
-              <slot
-                name="item"
-                :item="item"
-                :active="active"
-              >
-                <BaseMenuItem
-                  :label="item.label"
-                  :count="item.count"
-                  :icon="item.icon"
-                  :color="item.color"
-                  :active="active"
-                  :size="size"
-                />
-              </slot>
-            </MenuItem>
-          </template>
-        </slot>
-      </MenuItems>
-    </transition>
-  </Menu>
-</template>
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
-import { MenuItemInterface } from '@/types';
-import BaseMenuItem from './BaseMenuItem.vue';
-import { twMerge } from 'tailwind-merge';
-
-const props = defineProps({
-  items: {
-    default: undefined,
-    type: Array as PropType<MenuItemInterface[]>,
-  },
-  position: {
-    default: 'bottom-left',
-    type: String as PropType<'bottom-left' | 'bottom-right' | 'custom'>,
-  },
-  size: {
-    default: 'sm',
-    type: String as PropType<'xs' | 'sm' | 'md'>,
-  },
-  twMenu: {
-    default: '',
-    type: [String, Array] as PropType<string | string[]>,
-  },
-  twButton: {
-    default: 'flex',
-    type: [String, Array, Object],
-  },
-});
-
-const menuPositionStyles = computed(() => {
-  if (props.position == 'custom') {
-    return {};
-  }
-  if (props.position == 'bottom-left') {
-    return {
-      origin: 'top-right',
-      right: '0',
-    };
-  }
-  if (props.position == 'bottom-right') {
-    return {
-      origin: 'top-left',
-      left: '0',
-    };
-  }
-});
-</script>
+<template>
+  <Menu
+    v-slot="{ open }"
+    as="div"
+    class="text-left"
+    :class="[position == 'custom' ? 'static' : 'relative']"
+  >
+    <div>
+      <MenuButton :class="twButton">
+        <slot
+          name="button"
+          :open="open"
+        />
+      </MenuButton>
+    </div>
+
+    <transition
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="transform scale-95 opacity-0"
+      enter-to-class="transform scale-100 opacity-100"
+      leave-active-class="transition duration-75 ease-in"
+      leave-from-class="transform scale-100 opacity-100"
+      leave-to-class="transform scale-95 opacity-0"
+    >
+      <MenuItems
+        :style="menuPositionStyles"
+        :class="twMerge('w-48', twMenu)"
+        class="absolute z-menu mt-2 rounded-md bg-white p-1 shadow-lg outline-none ring-1 ring-black ring-opacity-10 focus:outline-none"
+      >
+        <slot
+          name="items"
+          :items="items"
+        >
+          <template
+            v-for="item in items"
+            :key="item.label + 'link'"
+          >
+            <div
+              v-if="item.line"
+              class="-mx-1 my-1 flex h-px bg-slate-200"
+            />
+
+            <MenuItem
+              v-else-if="item.to"
+              v-slot="{ active, close }"
+            >
+              <RouterLink
+                :to="item.to"
+                @mouseup="close"
+              >
+                <slot
+                  name="item"
+                  :item="item"
+                >
+                  <BaseMenuItem
+                    :label="item.label"
+                    :count="item.count"
+                    :icon="item.icon"
+                    :color="item.color"
+                    :active="active"
+                    :size="size"
+                  />
+                </slot>
+              </RouterLink>
+            </MenuItem>
+
+            <MenuItem
+              v-else-if="item.href"
+              v-slot="{ active }"
+              as="a"
+              :href="item.href"
+            >
+              <slot
+                name="item"
+                :item="item"
+              >
+                <BaseMenuItem
+                  :label="item.label"
+                  :count="item.count"
+                  :icon="item.icon"
+                  :color="item.color"
+                  :active="active"
+                  :size="size"
+                />
+              </slot>
+            </MenuItem>
+
+            <MenuItem
+              v-else-if="item.action"
+              v-slot="{ active }"
+              as="button"
+              type="button"
+              class="w-full"
+              @click="item.action"
+            >
+              <slot
+                name="item"
+                :item="item"
+                :active="active"
+              >
+                <BaseMenuItem
+                  :label="item.label"
+                  :count="item.count"
+                  :icon="item.icon"
+                  :color="item.color"
+                  :active="active"
+                  :size="size"
+                />
+              </slot>
+            </MenuItem>
+          </template>
+        </slot>
+      </MenuItems>
+    </transition>
+  </Menu>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
+import { MenuItemInterface } from '@/types';
+import BaseMenuItem from './BaseMenuItem.vue';
+import { twMerge } from 'tailwind-merge';
+
+const props = defineProps({
+  items: {
+    default: undefined,
+    type: Array as PropType<MenuItemInterface[]>,
+  },
+  position: {
+    default: 'bottom-left',
+    type: String as PropType<'bottom-left' | 'bottom-right' | 'custom'>,
+  },
+  size: {
+    default: 'sm',
+    type: String as PropType<'xs' | 'sm' | 'md'>,
+  },
+  twMenu: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  },
+  twButton: {
+    default: 'flex',
+    type: [String, Array, Object],
+  },
+});
+
+const menuPositionStyles = computed(() => {
+  if (props.position == 'custom') {
+    return {};
+  }
+  if (props.position == 'bottom-left') {
+    return {
+      origin: 'top-right',
+      right: '0',
+    };
+  }
+  if (props.position == 'bottom-right') {
+    return {
+      origin: 'top-left',
+      left: '0',
+    };
+  }
+});
+</script>