sprintify-ui 0.10.65 → 0.10.66

package/src/changelog.mdx

@@ -1,7 +1,7 @@
-import { Meta, Markdown } from '@storybook/blocks';
- 
-import Readme from '../CHANGELOG.md?raw';
- 
-<Meta title="Changelog" />
- 
+import { Meta, Markdown } from '@storybook/blocks';
+ 
+import Readme from '../CHANGELOG.md?raw';
+ 
+<Meta title="Changelog" />
+ 
 <Markdown>{Readme}</Markdown>

package/src/components/BaseActionButtons.vue

@@ -1,77 +1,77 @@
-<template>
-  <div
-    :class="[
-      variant === 'buttons' ? 'flex space-x-2' : 'btn-group',
-    ]"
-  >
-    <BaseActionItemButton
-      v-for="(primaryAction, i) in primaryActions"
-      :key="i"
-      :item="primaryAction"
-      size="sm"
-    />
-    <BaseMenu
-      v-if="secondaryActions.length"
-      :items="secondaryActions"
-      size="sm"
-    >
-      <template #button="{ open }">
-        <div
-          class="btn btn-sm flex items-center p-2 hover:border-slate-400"
-          :class="[open ? 'bg-slate-100' : '']"
-        >
-          <BaseIcon
-            icon="heroicons-outline:dots-horizontal"
-            class="h-4 w-4 text-slate-500"
-          />
-        </div>
-      </template>
-    </BaseMenu>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ActionItem } from '@/types';
-import { cloneDeep } from 'lodash';
-import BaseActionItemButton from './BaseActionItemButton.vue';
-import BaseMenu from './BaseMenu.vue';
-
-interface PropsInterface {
-  actions: ActionItem[],
-  maxActions?: number,
-  compact?: boolean,
-  variant?: 'buttons' | 'button-group',
-}
-
-const props = withDefaults(defineProps<PropsInterface>(), {
-  maxActions: 3,
-  compact: false,
-  variant: 'buttons',
-});
-
-const maxActionsInternal = computed(() => {
-  if (props.compact) {
-    return 1;
-  }
-  return Math.max(1, props.maxActions);
-});
-
-const primaryActions = computed(() => {
-  if (!props.actions) {
-    return [];
-  }
-
-  return cloneDeep(props.actions).slice(0, maxActionsInternal.value);
-});
-
-
-const secondaryActions = computed(() => {
-  if (!props.actions) {
-    return [];
-  }
-
-  return props.actions.filter(
-    (a) => !primaryActions.value.map((a) => a.label).includes(a.label)
-  );
-});
+<template>
+  <div
+    :class="[
+      variant === 'buttons' ? 'flex space-x-2' : 'btn-group',
+    ]"
+  >
+    <BaseActionItemButton
+      v-for="(primaryAction, i) in primaryActions"
+      :key="i"
+      :item="primaryAction"
+      size="sm"
+    />
+    <BaseMenu
+      v-if="secondaryActions.length"
+      :items="secondaryActions"
+      size="sm"
+    >
+      <template #button="{ open }">
+        <div
+          class="btn btn-sm flex items-center p-2 hover:border-slate-400"
+          :class="[open ? 'bg-slate-100' : '']"
+        >
+          <BaseIcon
+            icon="heroicons-outline:dots-horizontal"
+            class="h-4 w-4 text-slate-500"
+          />
+        </div>
+      </template>
+    </BaseMenu>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ActionItem } from '@/types';
+import { cloneDeep } from 'lodash';
+import BaseActionItemButton from './BaseActionItemButton.vue';
+import BaseMenu from './BaseMenu.vue';
+
+interface PropsInterface {
+  actions: ActionItem[],
+  maxActions?: number,
+  compact?: boolean,
+  variant?: 'buttons' | 'button-group',
+}
+
+const props = withDefaults(defineProps<PropsInterface>(), {
+  maxActions: 3,
+  compact: false,
+  variant: 'buttons',
+});
+
+const maxActionsInternal = computed(() => {
+  if (props.compact) {
+    return 1;
+  }
+  return Math.max(1, props.maxActions);
+});
+
+const primaryActions = computed(() => {
+  if (!props.actions) {
+    return [];
+  }
+
+  return cloneDeep(props.actions).slice(0, maxActionsInternal.value);
+});
+
+
+const secondaryActions = computed(() => {
+  if (!props.actions) {
+    return [];
+  }
+
+  return props.actions.filter(
+    (a) => !primaryActions.value.map((a) => a.label).includes(a.label)
+  );
+});
 </script>

package/src/components/BaseActionItem.vue

@@ -1,80 +1,80 @@
-<template>
-  <RouterLink
-    v-if="item.to"
-    v-slot="{ isActive, href: slotHref, navigate }"
-    custom
-    :to="item.to"
-  >
-    <a
-      :active="isActive"
-      :href="slotHref"
-      :class="classInternal"
-      :aria-current="isActive ? 'page' : undefined"
-      @click.prevent="onClick(navigate)"
-    >
-      <slot :active="isActive" />
-    </a>
-  </RouterLink>
-  <button
-    v-else-if="item.action"
-    type="button"
-    :class="classInternal"
-    @click="onClick(item.action)"
-  >
-    <slot :active="false" />
-  </button>
-  <a
-    v-else-if="item.href"
-    :href="item.href"
-    :class="classInternal"
-    @click="onClick()"
-  >
-    <slot :active="false" />
-  </a>
-  <div
-    v-else
-    :class="classInternal"
-  >
-    <slot :active="false" />
-  </div>
-</template>
-
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-};
-</script>
-
-<script setup lang="ts">
-import { ActionItem } from '@/types';
-import { twMerge } from 'tailwind-merge';
-
-const props = defineProps<{
-  item: ActionItem,
-  class?: string | string[] | null;
-}>();
-
-const classInternal = computed(() => {
-  return twMerge(
-    'block text-left',
-    props.class,
-  );
-});
-
-const closeMenu = inject('closeMenu', () => {
-  return;
-}) as () => void;
-
-const emit = defineEmits(['click']);
-
-type asyncFunc = () => Promise<void>;
-type func = () => void;
-
-async function onClick(func: func | asyncFunc | null = null) {
-  if (func) {
-    await func();
-  }
-  emit('click');
-  closeMenu();
-}
-</script>
+<template>
+  <RouterLink
+    v-if="item.to"
+    v-slot="{ isActive, href: slotHref, navigate }"
+    custom
+    :to="item.to"
+  >
+    <a
+      :active="isActive"
+      :href="slotHref"
+      :class="classInternal"
+      :aria-current="isActive ? 'page' : undefined"
+      @click.prevent="onClick(navigate)"
+    >
+      <slot :active="isActive" />
+    </a>
+  </RouterLink>
+  <button
+    v-else-if="item.action"
+    type="button"
+    :class="classInternal"
+    @click="onClick(item.action)"
+  >
+    <slot :active="false" />
+  </button>
+  <a
+    v-else-if="item.href"
+    :href="item.href"
+    :class="classInternal"
+    @click="onClick()"
+  >
+    <slot :active="false" />
+  </a>
+  <div
+    v-else
+    :class="classInternal"
+  >
+    <slot :active="false" />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
+
+<script setup lang="ts">
+import { ActionItem } from '@/types';
+import { twMerge } from 'tailwind-merge';
+
+const props = defineProps<{
+  item: ActionItem,
+  class?: string | string[] | null;
+}>();
+
+const classInternal = computed(() => {
+  return twMerge(
+    'block text-left',
+    props.class,
+  );
+});
+
+const closeMenu = inject('closeMenu', () => {
+  return;
+}) as () => void;
+
+const emit = defineEmits(['click']);
+
+type asyncFunc = () => Promise<void>;
+type func = () => void;
+
+async function onClick(func: func | asyncFunc | null = null) {
+  if (func) {
+    await func();
+  }
+  emit('click');
+  closeMenu();
+}
+</script>

package/src/components/BaseActionItemButton.vue

@@ -1,75 +1,75 @@
-<template>
-  <BaseActionItem
-    :item="item"
-    :class="classes"
-    class="flex items-center justify-center"
-  >
-    <BaseIcon
-      v-if="item.icon"
-      :icon="item.icon"
-      :class="iconClasses"
-      class="mr-2"
-    />
-    <span
-      :class="[item.icon ? 'pr-1' : '']"
-    >{{ item.label }}</span>
-  </BaseActionItem>
-</template>
-
-<script lang="ts" setup>
-import { BaseIcon } from '..';
-import { ActionItem } from '@/types';
-import BaseActionItem from './BaseActionItem.vue';
-
-const props = withDefaults(
-  defineProps<{
-    item: ActionItem;
-    size: 'sm' | 'md' | 'lg';
-  }>(),
-  {
-    size: 'md',
-  }
-);
-
-const classes = computed(() => {
-  const classList = ['btn'];
-
-  if (props.item.color == 'primary') {
-    classList.push('btn-primary');
-  } else if (props.item.color == 'secondary') {
-    classList.push('btn-secondary-outline');
-  } else if (props.item.color == 'danger') {
-    classList.push('btn-danger');
-  } else if (props.item.color == 'warning') {
-    classList.push('btn-warning');
-  } else if (props.item.color == 'success') {
-    classList.push('btn-success');
-  } else if (props.item.color == 'light') {
-    classList.push('');
-  } else if (props.item.color == 'dark') {
-    classList.push('btn-black');
-  }
-
-  if (props.size == 'sm') {
-    classList.push('btn-sm');
-  } else if (props.size == 'lg') {
-    classList.push('btn-lg');
-  }
-
-  return classList;
-});
-
-const iconClasses = computed(() => {
-  const classList = [];
-
-  if (props.size == 'sm') {
-    classList.push('h-4 w-4');
-  } else if (props.size == 'lg') {
-    classList.push('h-6 w-6');
-  } else {
-    classList.push('h-5 w-5');
-  }
-
-  return classList;
-});
-</script>
+<template>
+  <BaseActionItem
+    :item="item"
+    :class="classes"
+    class="flex items-center justify-center"
+  >
+    <BaseIcon
+      v-if="item.icon"
+      :icon="item.icon"
+      :class="iconClasses"
+      class="mr-2"
+    />
+    <span
+      :class="[item.icon ? 'pr-1' : '']"
+    >{{ item.label }}</span>
+  </BaseActionItem>
+</template>
+
+<script lang="ts" setup>
+import { BaseIcon } from '..';
+import { ActionItem } from '@/types';
+import BaseActionItem from './BaseActionItem.vue';
+
+const props = withDefaults(
+  defineProps<{
+    item: ActionItem;
+    size: 'sm' | 'md' | 'lg';
+  }>(),
+  {
+    size: 'md',
+  }
+);
+
+const classes = computed(() => {
+  const classList = ['btn'];
+
+  if (props.item.color == 'primary') {
+    classList.push('btn-primary');
+  } else if (props.item.color == 'secondary') {
+    classList.push('btn-secondary-outline');
+  } else if (props.item.color == 'danger') {
+    classList.push('btn-danger');
+  } else if (props.item.color == 'warning') {
+    classList.push('btn-warning');
+  } else if (props.item.color == 'success') {
+    classList.push('btn-success');
+  } else if (props.item.color == 'light') {
+    classList.push('');
+  } else if (props.item.color == 'dark') {
+    classList.push('btn-black');
+  }
+
+  if (props.size == 'sm') {
+    classList.push('btn-sm');
+  } else if (props.size == 'lg') {
+    classList.push('btn-lg');
+  }
+
+  return classList;
+});
+
+const iconClasses = computed(() => {
+  const classList = [];
+
+  if (props.size == 'sm') {
+    classList.push('h-4 w-4');
+  } else if (props.size == 'lg') {
+    classList.push('h-6 w-6');
+  } else {
+    classList.push('h-5 w-5');
+  }
+
+  return classList;
+});
+</script>