sprintify-ui 0.1.15 → 0.1.17

package/src/components/BaseShortcut.vue

@@ -1,105 +1,105 @@
-<template>
-  <BaseCard class="flex duration-200 hover:bg-slate-50">
-    <BaseActionItem :to="to" :href="href" :action="action" class="block w-full">
-      <section class="whitespace-pre-line p-4">
-        <!-- Icon -->
-        <div
-          class="mb-2.5 inline-flex items-center rounded p-2"
-          :style="colorStyle"
-        >
-          <BaseIcon
-            v-if="icon"
-            :icon="icon"
-            :class="iconSizeClasses"
-          ></BaseIcon>
-        </div>
-        <!-- Title -->
-        <div class="text-md font-semibold">
-          {{ title }}
-        </div>
-        <!-- Description -->
-        <div
-          v-if="description"
-          class="mt-1 mb-3 whitespace-pre-line text-sm text-slate-500 line-clamp-2"
-        >
-          {{ description }}
-        </div>
-        <!-- Text link -->
-        <div
-          v-if="linkText"
-          class="flex items-center justify-start text-sm font-medium"
-        >
-          <div class="mr-1 leading-none">{{ linkText }}</div>
-          <div>
-            <BaseIcon
-              icon="heroicons:arrow-right-20-solid"
-              class="mt-px h-4 w-4"
-            ></BaseIcon>
-          </div>
-        </div>
-      </section>
-    </BaseActionItem>
-  </BaseCard>
-</template>
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-import { Icon as BaseIcon } from '@iconify/vue';
-import BaseCard from './BaseCard.vue';
-import { RouteLocationRaw } from 'vue-router';
-import { getColorConfig } from '@/utils/colors';
-import BaseActionItem from './BaseActionItem.vue';
-
-const props = defineProps({
-  to: {
-    default: undefined,
-    type: [String, Object, undefined] as PropType<RouteLocationRaw | undefined>,
-  },
-  href: {
-    default: undefined,
-    type: [String, undefined] as PropType<string | undefined>,
-  },
-  action: {
-    default: undefined,
-    type: [Function, undefined] as PropType<() => Promise<void> | undefined>,
-  },
-  title: {
-    required: true,
-    type: String,
-  },
-  description: {
-    default: null,
-    type: String,
-  },
-  linkText: {
-    default: null,
-    type: String,
-  },
-  color: {
-    default: 'gray',
-    type: String as PropType<string>,
-  },
-  icon: {
-    required: true,
-    type: String,
-  },
-  contrast: {
-    default: 'low',
-    type: String as PropType<'low' | 'high'>,
-  },
-});
-
-const colorStyle = computed((): Record<string, string> => {
-  const config = getColorConfig(props.color, props.contrast == 'high');
-
-  return {
-    backgroundColor: config.backgroundColor,
-    border: `1px solid ${config.borderColor}`,
-    color: config.textColor,
-  };
-});
-
-const iconSizeClasses = computed(() => {
-  return 'h-4 w-4';
-});
-</script>
+<template>
+  <BaseCard class="flex duration-200 hover:bg-slate-50">
+    <BaseActionItem :to="to" :href="href" :action="action" class="block w-full">
+      <section class="whitespace-pre-line p-4">
+        <!-- Icon -->
+        <div
+          class="mb-2.5 inline-flex items-center rounded p-2"
+          :style="colorStyle"
+        >
+          <BaseIcon
+            v-if="icon"
+            :icon="icon"
+            :class="iconSizeClasses"
+          ></BaseIcon>
+        </div>
+        <!-- Title -->
+        <div class="text-md font-semibold">
+          {{ title }}
+        </div>
+        <!-- Description -->
+        <div
+          v-if="description"
+          class="mt-1 mb-3 whitespace-pre-line text-sm text-slate-500 line-clamp-2"
+        >
+          {{ description }}
+        </div>
+        <!-- Text link -->
+        <div
+          v-if="linkText"
+          class="flex items-center justify-start text-sm font-medium"
+        >
+          <div class="mr-1 leading-none">{{ linkText }}</div>
+          <div>
+            <BaseIcon
+              icon="heroicons:arrow-right-20-solid"
+              class="mt-px h-4 w-4"
+            ></BaseIcon>
+          </div>
+        </div>
+      </section>
+    </BaseActionItem>
+  </BaseCard>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+import BaseCard from './BaseCard.vue';
+import { RouteLocationRaw } from 'vue-router';
+import { getColorConfig } from '@/utils/colors';
+import BaseActionItem from './BaseActionItem.vue';
+
+const props = defineProps({
+  to: {
+    default: undefined,
+    type: [String, Object, undefined] as PropType<RouteLocationRaw | undefined>,
+  },
+  href: {
+    default: undefined,
+    type: [String, undefined] as PropType<string | undefined>,
+  },
+  action: {
+    default: undefined,
+    type: [Function, undefined] as PropType<() => Promise<void> | undefined>,
+  },
+  title: {
+    required: true,
+    type: String,
+  },
+  description: {
+    default: null,
+    type: String,
+  },
+  linkText: {
+    default: null,
+    type: String,
+  },
+  color: {
+    default: 'gray',
+    type: String as PropType<string>,
+  },
+  icon: {
+    required: true,
+    type: String,
+  },
+  contrast: {
+    default: 'low',
+    type: String as PropType<'low' | 'high'>,
+  },
+});
+
+const colorStyle = computed((): Record<string, string> => {
+  const config = getColorConfig(props.color, props.contrast == 'high');
+
+  return {
+    backgroundColor: config.backgroundColor,
+    border: `1px solid ${config.borderColor}`,
+    color: config.textColor,
+  };
+});
+
+const iconSizeClasses = computed(() => {
+  return 'h-4 w-4';
+});
+</script>

package/src/components/BaseSideNavigation.stories.js

@@ -1,80 +1,80 @@
-import BaseSideNavigation from './BaseSideNavigation.vue';
-import BaseSideNavigationItem from './BaseSideNavigationItem.vue';
-import BaseContainer from './BaseContainer.vue';
-import BaseCard from './BaseCard.vue';
-import BaseCardRow from './BaseCardRow.vue';
-import BaseCounter from './BaseCounter.vue';
-
-export default {
-  title: 'Layout/BaseSideNavigation',
-  component: BaseSideNavigation,
-  args: {},
-};
-
-const Template = (args) => ({
-  components: {
-    BaseSideNavigation,
-    BaseSideNavigationItem,
-    BaseContainer,
-    BaseCard,
-    BaseCardRow,
-    BaseCounter,
-  },
-  setup() {
-    return { args };
-  },
-  template: `
-  <div class="bg-slate-100 py-10">
-    <BaseContainer>
-      <div class="md:flex">
-        <div class="shrink-0 mb-6 md:mb-0" style="margin-right: 2rem; width: 200px;">
-          <BaseSideNavigation v-bind="args">
-            <BaseSideNavigationItem to="/"  v-slot="{active}">
-              <div class="flex items-center">
-                <span class="mr-1">Home</span>
-                <BaseCounter :size="['lg', 'md'].includes(args.size) ? 'sm' : 'xs'" :color="active ? 'primary' : 'light'" :count="1"></BaseCounter>  
-                </div>
-            </BaseSideNavigationItem>
-            <BaseSideNavigationItem to="/setup">
-              Setup
-            </BaseSideNavigationItem>
-            <BaseSideNavigationItem to="/settings">
-              Settings
-            </BaseSideNavigationItem>
-          </BaseSideNavigation>
-        </div>
-        <div class="grow">
-          <BaseCard>
-            <BaseCardRow>
-              {{ $route.path }}
-            </BaseCardRow>
-          </BaseCard>
-        </div>
-      </div>
-    </BaseContainer>
-  </div>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-export const SizeXS = Template.bind({});
-SizeXS.args = {
-  size: 'xs',
-};
-
-export const SizeSM = Template.bind({});
-SizeSM.args = {
-  size: 'sm',
-};
-
-export const SizeMD = Template.bind({});
-SizeMD.args = {
-  size: 'md',
-};
-
-export const SizeLG = Template.bind({});
-SizeLG.args = {
-  size: 'lg',
-};
+import BaseSideNavigation from './BaseSideNavigation.vue';
+import BaseSideNavigationItem from './BaseSideNavigationItem.vue';
+import BaseContainer from './BaseContainer.vue';
+import BaseCard from './BaseCard.vue';
+import BaseCardRow from './BaseCardRow.vue';
+import BaseCounter from './BaseCounter.vue';
+
+export default {
+  title: 'Layout/BaseSideNavigation',
+  component: BaseSideNavigation,
+  args: {},
+};
+
+const Template = (args) => ({
+  components: {
+    BaseSideNavigation,
+    BaseSideNavigationItem,
+    BaseContainer,
+    BaseCard,
+    BaseCardRow,
+    BaseCounter,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <div class="bg-slate-100 py-10">
+    <BaseContainer>
+      <div class="md:flex">
+        <div class="shrink-0 mb-6 md:mb-0" style="margin-right: 2rem; width: 200px;">
+          <BaseSideNavigation v-bind="args">
+            <BaseSideNavigationItem to="/"  v-slot="{active}">
+              <div class="flex items-center">
+                <span class="mr-1">Home</span>
+                <BaseCounter :size="['lg', 'md'].includes(args.size) ? 'sm' : 'xs'" :color="active ? 'primary' : 'light'" :count="1"></BaseCounter>  
+                </div>
+            </BaseSideNavigationItem>
+            <BaseSideNavigationItem to="/setup">
+              Setup
+            </BaseSideNavigationItem>
+            <BaseSideNavigationItem to="/settings">
+              Settings
+            </BaseSideNavigationItem>
+          </BaseSideNavigation>
+        </div>
+        <div class="grow">
+          <BaseCard>
+            <BaseCardRow>
+              {{ $route.path }}
+            </BaseCardRow>
+          </BaseCard>
+        </div>
+      </div>
+    </BaseContainer>
+  </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const SizeXS = Template.bind({});
+SizeXS.args = {
+  size: 'xs',
+};
+
+export const SizeSM = Template.bind({});
+SizeSM.args = {
+  size: 'sm',
+};
+
+export const SizeMD = Template.bind({});
+SizeMD.args = {
+  size: 'md',
+};
+
+export const SizeLG = Template.bind({});
+SizeLG.args = {
+  size: 'lg',
+};

package/src/components/BaseSideNavigation.vue

@@ -1,29 +1,29 @@
-<template>
-  <nav aria-label="Sidebar" class="relative">
-    <div class="absolute bottom-0 left-0 h-full w-px bg-slate-300" />
-    <div
-      class="relative overflow-x-auto overflow-y-hidden"
-      data-scroll-lock-scrollable
-    >
-      <div class="space-y-0">
-        <slot />
-      </div>
-    </div>
-  </nav>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    size?: 'xs' | 'sm' | 'md' | 'lg';
-  }>(),
-  {
-    size: 'md',
-  }
-);
-
-provide(
-  'sideNavigation:size',
-  computed(() => props.size)
-);
-</script>
+<template>
+  <nav aria-label="Sidebar" class="relative">
+    <div class="absolute bottom-0 left-0 h-full w-px bg-slate-300" />
+    <div
+      class="relative overflow-x-auto overflow-y-hidden"
+      data-scroll-lock-scrollable
+    >
+      <div class="space-y-0">
+        <slot />
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+  }>(),
+  {
+    size: 'md',
+  }
+);
+
+provide(
+  'sideNavigation:size',
+  computed(() => props.size)
+);
+</script>

package/src/components/BaseSideNavigationItem.vue

@@ -1,92 +1,92 @@
-<template>
-  <RouterLink
-    v-slot="{ href, navigate, isActive, isExactActive }"
-    :to="to"
-    custom
-  >
-    <a
-      :href="disabled ? undefined : href"
-      :disabled="disabled"
-      class="group block"
-      :class="[
-        isActiveInternal(isActive, isExactActive)
-          ? 'font-semibold text-primary-600'
-          : 'text-slate-600 hover:text-slate-900',
-        disabled ? 'cursor-not-allowed opacity-60' : '',
-        sizeClassOuter,
-      ]"
-      @click.prevent="onClick(navigate)"
-    >
-      <div class="relative flex items-center" :class="[sizeClassInner]">
-        <div
-          class="absolute left-0 top-0 h-full"
-          :class="[
-            isActiveInternal(isActive, isExactActive)
-              ? 'w-[2px] bg-primary-600'
-              : 'group-hover:w-px group-hover:bg-slate-700',
-          ]"
-        ></div>
-        <slot :active="isActiveInternal(isActive, isExactActive)" />
-      </div>
-    </a>
-  </RouterLink>
-</template>
-
-<script lang="ts" setup>
-import { NavigationFailure, RouteLocationRaw } from 'vue-router';
-
-const props = withDefaults(
-  defineProps<{
-    to: RouteLocationRaw;
-    disabled?: boolean;
-    activeStrategy?: 'default' | 'exact';
-  }>(),
-  {
-    disabled: false,
-    activeStrategy: 'default',
-  }
-);
-
-const size = inject(
-  'sideNavigation:size',
-  ref<'xs' | 'sm' | 'md' | 'lg'>('md')
-);
-
-function onClick(navigate: () => Promise<void | NavigationFailure>) {
-  if (props.disabled) {
-    return;
-  }
-
-  return navigate();
-}
-
-function isActiveInternal(isActive: boolean, isExactActive: boolean) {
-  return props.activeStrategy == 'default' ? isActive : isExactActive;
-}
-
-const sizeClassOuter = computed(() => {
-  switch (size.value) {
-    case 'xs':
-      return 'py-0.5';
-    case 'sm':
-      return 'py-1';
-    case 'md':
-      return 'py-2';
-    case 'lg':
-      return 'py-2';
-  }
-});
-
-const sizeClassInner = computed(() => {
-  switch (size.value) {
-    case 'xs':
-      return 'text-xs px-3 py-0.5 font-normal';
-    case 'sm':
-      return 'text-sm px-4 py-0.5 font-normal';
-    case 'md':
-      return 'text-sm px-4 py-0.5 font-normal';
-    case 'lg':
-      return 'text-base px-5 py-0.5 font-normal';
-  }
-});
-</script>
+<template>
+  <RouterLink
+    v-slot="{ href, navigate, isActive, isExactActive }"
+    :to="to"
+    custom
+  >
+    <a
+      :href="disabled ? undefined : href"
+      :disabled="disabled"
+      class="group block"
+      :class="[
+        isActiveInternal(isActive, isExactActive)
+          ? 'font-semibold text-primary-600'
+          : 'text-slate-600 hover:text-slate-900',
+        disabled ? 'cursor-not-allowed opacity-60' : '',
+        sizeClassOuter,
+      ]"
+      @click.prevent="onClick(navigate)"
+    >
+      <div class="relative flex items-center" :class="[sizeClassInner]">
+        <div
+          class="absolute left-0 top-0 h-full"
+          :class="[
+            isActiveInternal(isActive, isExactActive)
+              ? 'w-[2px] bg-primary-600'
+              : 'group-hover:w-px group-hover:bg-slate-700',
+          ]"
+        ></div>
+        <slot :active="isActiveInternal(isActive, isExactActive)" />
+      </div>
+    </a>
+  </RouterLink>
+</template>
+
+<script lang="ts" setup>
+import { NavigationFailure, RouteLocationRaw } from 'vue-router';
+
+const props = withDefaults(
+  defineProps<{
+    to: RouteLocationRaw;
+    disabled?: boolean;
+    activeStrategy?: 'default' | 'exact';
+  }>(),
+  {
+    disabled: false,
+    activeStrategy: 'default',
+  }
+);
+
+const size = inject(
+  'sideNavigation:size',
+  ref<'xs' | 'sm' | 'md' | 'lg'>('md')
+);
+
+function onClick(navigate: () => Promise<void | NavigationFailure>) {
+  if (props.disabled) {
+    return;
+  }
+
+  return navigate();
+}
+
+function isActiveInternal(isActive: boolean, isExactActive: boolean) {
+  return props.activeStrategy == 'default' ? isActive : isExactActive;
+}
+
+const sizeClassOuter = computed(() => {
+  switch (size.value) {
+    case 'xs':
+      return 'py-0.5';
+    case 'sm':
+      return 'py-1';
+    case 'md':
+      return 'py-2';
+    case 'lg':
+      return 'py-2';
+  }
+});
+
+const sizeClassInner = computed(() => {
+  switch (size.value) {
+    case 'xs':
+      return 'text-xs px-3 py-0.5 font-normal';
+    case 'sm':
+      return 'text-sm px-4 py-0.5 font-normal';
+    case 'md':
+      return 'text-sm px-4 py-0.5 font-normal';
+    case 'lg':
+      return 'text-base px-5 py-0.5 font-normal';
+  }
+});
+</script>