sprintify-ui 0.4.5 → 0.4.7

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>

package/src/components/BaseMenuItem.vue

@@ -1,145 +1,145 @@
-<template>
-  <div
-    :style="buttonStyles"
-    class="rounded leading-tight"
-    :class="[active ? 'bg-slate-100' : 'bg-white']"
-  >
-    <div class="flex items-center">
-      <BaseIcon
-        v-if="icon"
-        :icon="icon"
-        :class="[iconClasses]"
-      />
-      <span :class="[textClasses, textColor]">{{ label }}</span>
-    </div>
-    <div
-      v-if="count"
-      class="relative -top-px ml-[5px]"
-    >
-      <BaseCounter
-        :count="count"
-        :max-digit="2"
-        :color="color"
-        :size="size"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { PropType, StyleValue } from 'vue';
-import BaseCounter from './BaseCounter.vue';
-import { ActionColors } from '@/types';
-
-const props = defineProps({
-  label: {
-    default: undefined,
-    type: String,
-  },
-  icon: {
-    default: undefined,
-    type: String,
-  },
-  active: {
-    default: false,
-    type: Boolean,
-  },
-  count: {
-    default: undefined,
-    type: Number,
-  },
-  color: {
-    default: 'dark',
-    type: String as PropType<ActionColors>,
-  },
-  size: {
-    default: 'md',
-    type: String as PropType<'xs' | 'sm' | 'md'>,
-  },
-});
-
-const textColor = computed((): string => {
-  if (props.color == 'dark') {
-    return 'text-slate-700';
-  } else if (props.color == 'light') {
-    return 'text-slate-600';
-  } else if (props.color == 'danger') {
-    return 'text-red-600';
-  } else if (props.color == 'success') {
-    return 'text-green-600';
-  } else if (props.color == 'warning') {
-    return 'text-yellow-600';
-  } else if (props.color == 'primary') {
-    return 'text-primary-600';
-  } else if (props.color == 'secondary') {
-    return 'text-slate-600';
-  }
-
-  return '';
-});
-
-const textClasses = computed((): string => {
-  if (props.size == 'xs') {
-    return 'text-xs';
-  } else if (props.size == 'sm') {
-    return 'text-sm';
-  } else if (props.size == 'md') {
-    return 'text-base';
-  }
-
-  return '';
-});
-
-const buttonStyles = computed((): StyleValue => {
-
-  let paddingY = 0.5;
-  let paddingLeft = 1;
-  let paddingRight = 1;
-
-  const baseStyles = {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    width: '100%',
-    lineHeight: '1.25rem',
-    text: 'left',
-    paddingTop: '',
-    paddingBottom: '',
-    paddingLeft: '',
-    paddingRight: '',
-  }
-
-  if (props.icon) {
-    paddingLeft = 0.5;
-    paddingRight = 1;
-  }
-
-  if (props.size == 'xs') {
-    paddingY = 0.3;
-    if (props.icon) {
-      paddingRight = 0.75;
-    }
-  } else if (props.size == 'sm') {
-    paddingY = 0.5;
-  } else if (props.size == 'md') {
-    paddingY = 0.5;
-  }
-
-  baseStyles.paddingLeft = paddingLeft + 'rem';
-  baseStyles.paddingRight = paddingRight + 'rem';
-  baseStyles.paddingTop = paddingY + 'rem';
-  baseStyles.paddingBottom = paddingY + 'rem';
-
-  return baseStyles;
-});
-
-const iconClasses = computed((): string => {
-  let baseClasses = ' w-5 h-5 shrink-0 mr-2';
-
-  if (!props.active) {
-    baseClasses += ' opacity-70 ' + textColor.value;
-  }
-
-  return baseClasses;
-});
-</script>
+<template>
+  <div
+    :style="buttonStyles"
+    class="rounded leading-tight"
+    :class="[active ? 'bg-slate-100' : 'bg-white']"
+  >
+    <div class="flex items-center">
+      <BaseIcon
+        v-if="icon"
+        :icon="icon"
+        :class="[iconClasses]"
+      />
+      <span :class="[textClasses, textColor]">{{ label }}</span>
+    </div>
+    <div
+      v-if="count"
+      class="relative -top-px ml-[5px]"
+    >
+      <BaseCounter
+        :count="count"
+        :max-digit="2"
+        :color="color"
+        :size="size"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType, StyleValue } from 'vue';
+import BaseCounter from './BaseCounter.vue';
+import { ActionColors } from '@/types';
+
+const props = defineProps({
+  label: {
+    default: undefined,
+    type: String,
+  },
+  icon: {
+    default: undefined,
+    type: String,
+  },
+  active: {
+    default: false,
+    type: Boolean,
+  },
+  count: {
+    default: undefined,
+    type: Number,
+  },
+  color: {
+    default: 'dark',
+    type: String as PropType<ActionColors>,
+  },
+  size: {
+    default: 'md',
+    type: String as PropType<'xs' | 'sm' | 'md'>,
+  },
+});
+
+const textColor = computed((): string => {
+  if (props.color == 'dark') {
+    return 'text-slate-700';
+  } else if (props.color == 'light') {
+    return 'text-slate-600';
+  } else if (props.color == 'danger') {
+    return 'text-red-600';
+  } else if (props.color == 'success') {
+    return 'text-green-600';
+  } else if (props.color == 'warning') {
+    return 'text-yellow-600';
+  } else if (props.color == 'primary') {
+    return 'text-primary-600';
+  } else if (props.color == 'secondary') {
+    return 'text-slate-600';
+  }
+
+  return '';
+});
+
+const textClasses = computed((): string => {
+  if (props.size == 'xs') {
+    return 'text-xs';
+  } else if (props.size == 'sm') {
+    return 'text-sm';
+  } else if (props.size == 'md') {
+    return 'text-base';
+  }
+
+  return '';
+});
+
+const buttonStyles = computed((): StyleValue => {
+
+  let paddingY = 0.5;
+  let paddingLeft = 1;
+  let paddingRight = 1;
+
+  const baseStyles = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    lineHeight: '1.25rem',
+    text: 'left',
+    paddingTop: '',
+    paddingBottom: '',
+    paddingLeft: '',
+    paddingRight: '',
+  }
+
+  if (props.icon) {
+    paddingLeft = 0.5;
+    paddingRight = 1;
+  }
+
+  if (props.size == 'xs') {
+    paddingY = 0.3;
+    if (props.icon) {
+      paddingRight = 0.75;
+    }
+  } else if (props.size == 'sm') {
+    paddingY = 0.5;
+  } else if (props.size == 'md') {
+    paddingY = 0.5;
+  }
+
+  baseStyles.paddingLeft = paddingLeft + 'rem';
+  baseStyles.paddingRight = paddingRight + 'rem';
+  baseStyles.paddingTop = paddingY + 'rem';
+  baseStyles.paddingBottom = paddingY + 'rem';
+
+  return baseStyles;
+});
+
+const iconClasses = computed((): string => {
+  let baseClasses = ' w-5 h-5 shrink-0 mr-2';
+
+  if (!props.active) {
+    baseClasses += ' opacity-70 ' + textColor.value;
+  }
+
+  return baseClasses;
+});
+</script>