sprintify-ui 0.1.16 → 0.1.17

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>

package/src/components/BaseSkeleton.stories.js

@@ -1,36 +1,36 @@
-import BaseSkeleton from './BaseSkeleton.vue';
-import BaseContainer from './BaseContainer.vue';
-
-export default {
-  title: 'Components/BaseSkeleton',
-  component: BaseSkeleton,
-  args: {},
-};
-
-const Template = (args) => ({
-  components: {
-    BaseSkeleton,
-    BaseContainer,
-  },
-  setup() {
-    return { args };
-  },
-  template: `
-  <BaseContainer size="xl">
-    <div class="flex space-x-5">
-      <div class="shrink-0">
-        <BaseSkeleton class="h-16 rounded-full w-16" v-bind="args"></BaseSkeleton>
-      </div>
-      <div class="grow">
-        <BaseSkeleton class="w-52 h-8 mb-3" v-bind="args"></BaseSkeleton>
-        <BaseSkeleton class="w-full h-4 mb-1" v-bind="args"></BaseSkeleton>
-        <BaseSkeleton class="w-full h-4 mb-1" v-bind="args"></BaseSkeleton>
-        <BaseSkeleton class="w-full h-4 mb-1" v-bind="args"></BaseSkeleton>
-      </div>
-    </div>
-  </BaseContainer>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
+import BaseSkeleton from './BaseSkeleton.vue';
+import BaseContainer from './BaseContainer.vue';
+
+export default {
+  title: 'Components/BaseSkeleton',
+  component: BaseSkeleton,
+  args: {},
+};
+
+const Template = (args) => ({
+  components: {
+    BaseSkeleton,
+    BaseContainer,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <BaseContainer size="xl">
+    <div class="flex space-x-5">
+      <div class="shrink-0">
+        <BaseSkeleton class="h-16 rounded-full w-16" v-bind="args"></BaseSkeleton>
+      </div>
+      <div class="grow">
+        <BaseSkeleton class="w-52 h-8 mb-3" v-bind="args"></BaseSkeleton>
+        <BaseSkeleton class="w-full h-4 mb-1" v-bind="args"></BaseSkeleton>
+        <BaseSkeleton class="w-full h-4 mb-1" v-bind="args"></BaseSkeleton>
+        <BaseSkeleton class="w-full h-4 mb-1" v-bind="args"></BaseSkeleton>
+      </div>
+    </div>
+  </BaseContainer>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseSkeleton.vue

@@ -1,24 +1,24 @@
-<template>
-  <div class="relative isolate overflow-hidden rounded" :class="[background]">
-    <div
-      class="absolute inset-0 -translate-x-full animate-shimmer border-t border-white/80 bg-gradient-to-r from-transparent via-white/80 to-transparent"
-      :style="{
-        animationDelay: delay,
-      }"
-    ></div>
-    <slot></slot>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineProps({
-  delay: {
-    default: '0s',
-    type: String,
-  },
-  background: {
-    default: 'bg-slate-200',
-    type: String,
-  },
-});
-</script>
+<template>
+  <div class="relative isolate overflow-hidden rounded" :class="[background]">
+    <div
+      class="absolute inset-0 -translate-x-full animate-shimmer border-t border-white/80 bg-gradient-to-r from-transparent via-white/80 to-transparent"
+      :style="{
+        animationDelay: delay,
+      }"
+    ></div>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  delay: {
+    default: '0s',
+    type: String,
+  },
+  background: {
+    default: 'bg-slate-200',
+    type: String,
+  },
+});
+</script>

package/src/components/BaseStatistic.stories.js

@@ -1,51 +1,51 @@
-import BaseStatistic from './BaseStatistic.vue';
-
-export default {
-  title: 'Components/BaseStatistic',
-  component: BaseStatistic,
-  argTypes: {
-    trend: {
-      control: { type: 'select' },
-      options: ['up', 'down', null],
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: { BaseStatistic },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseStatistic v-bind="args">
-    </BaseStatistic>
-  `,
-});
-
-export const Simple = Template.bind({});
-Simple.args = {
-  primaryValue: '$7,552.90',
-};
-
-export const TrendUp = Template.bind({});
-TrendUp.args = {
-  primaryValue: '$15,289.63',
-  secondaryValue: '15%',
-  trend: 'up',
-};
-
-export const TrendDown = Template.bind({});
-TrendDown.args = {
-  primaryValue: '$10,123.25',
-  secondaryValue: '-22%',
-  trend: 'down',
-};
-
-export const Complex = Template.bind({});
-Complex.args = {
-  label: 'Complex example',
-  primaryValue: '$10,123.25',
-  secondaryValue: '-22%',
-  trend: 'down',
-  caption: 'Since last week',
-};
+import BaseStatistic from './BaseStatistic.vue';
+
+export default {
+  title: 'Components/BaseStatistic',
+  component: BaseStatistic,
+  argTypes: {
+    trend: {
+      control: { type: 'select' },
+      options: ['up', 'down', null],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseStatistic },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseStatistic v-bind="args">
+    </BaseStatistic>
+  `,
+});
+
+export const Simple = Template.bind({});
+Simple.args = {
+  primaryValue: '$7,552.90',
+};
+
+export const TrendUp = Template.bind({});
+TrendUp.args = {
+  primaryValue: '$15,289.63',
+  secondaryValue: '15%',
+  trend: 'up',
+};
+
+export const TrendDown = Template.bind({});
+TrendDown.args = {
+  primaryValue: '$10,123.25',
+  secondaryValue: '-22%',
+  trend: 'down',
+};
+
+export const Complex = Template.bind({});
+Complex.args = {
+  label: 'Complex example',
+  primaryValue: '$10,123.25',
+  secondaryValue: '-22%',
+  trend: 'down',
+  caption: 'Since last week',
+};

package/src/components/BaseStatistic.vue

@@ -1,98 +1,98 @@
-<template>
-  <div class="inline-flex rounded-xl p-4" :class="[centerClass]">
-    <section>
-      <!-- Label -->
-      <header class="mb-0.5 text-base font-medium">
-        {{ label }}
-      </header>
-      <!-- Content -->
-      <div class="flex" :class="[centerClass]">
-        <div class="text-3xl font-bold leading-tight">
-          {{ primaryValue }}
-        </div>
-
-        <div
-          v-if="secondaryValue"
-          class="ml-1 flex rounded-md px-1 text-lg font-bold"
-          :class="[backgroundClass, textClass, centerClass]"
-        >
-          <!-- Icon trend -->
-          <div v-if="trend">
-            <BaseIcon :icon="icon" :class="iconClass" />
-          </div>
-          <div class="text-lg">{{ secondaryValue }}</div>
-        </div>
-      </div>
-      <!-- Caption -->
-      <footer class="text-base text-slate-500">
-        {{ caption }}
-      </footer>
-    </section>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import { Icon as BaseIcon } from '@iconify/vue';
-
-export default defineComponent({
-  components: { BaseIcon },
-  props: {
-    label: {
-      default: null,
-      type: String as PropType<string | null>,
-    },
-    primaryValue: {
-      required: true,
-      type: String,
-    },
-    secondaryValue: {
-      default: null,
-      type: String as PropType<string | null>,
-    },
-    trend: {
-      default: null,
-      type: String as PropType<'up' | 'down' | null>,
-    },
-    caption: {
-      default: null,
-      type: String as PropType<string | null>,
-    },
-  },
-  computed: {
-    backgroundClass(): string {
-      if (this.trend == 'up') {
-        return 'bg-green-50';
-      }
-      if (this.trend == 'down') {
-        return 'bg-red-50';
-      }
-      return '';
-    },
-    textClass(): string {
-      if (this.trend == 'up') {
-        return 'text-green-700';
-      }
-      if (this.trend == 'down') {
-        return 'text-red-700';
-      }
-      return 'text-slate-400';
-    },
-    iconClass(): string {
-      return 'w-5 h-5';
-    },
-    icon(): string {
-      if (this.trend == 'up') {
-        return 'heroicons-solid:chevron-up';
-      }
-      if (this.trend == 'down') {
-        return 'heroicons-solid:chevron-down';
-      }
-      return '';
-    },
-    centerClass(): string {
-      return 'items-center justify-center';
-    },
-  },
-});
-</script>
+<template>
+  <div class="inline-flex rounded-xl p-4" :class="[centerClass]">
+    <section>
+      <!-- Label -->
+      <header class="mb-0.5 text-base font-medium">
+        {{ label }}
+      </header>
+      <!-- Content -->
+      <div class="flex" :class="[centerClass]">
+        <div class="text-3xl font-bold leading-tight">
+          {{ primaryValue }}
+        </div>
+
+        <div
+          v-if="secondaryValue"
+          class="ml-1 flex rounded-md px-1 text-lg font-bold"
+          :class="[backgroundClass, textClass, centerClass]"
+        >
+          <!-- Icon trend -->
+          <div v-if="trend">
+            <BaseIcon :icon="icon" :class="iconClass" />
+          </div>
+          <div class="text-lg">{{ secondaryValue }}</div>
+        </div>
+      </div>
+      <!-- Caption -->
+      <footer class="text-base text-slate-500">
+        {{ caption }}
+      </footer>
+    </section>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+
+export default defineComponent({
+  components: { BaseIcon },
+  props: {
+    label: {
+      default: null,
+      type: String as PropType<string | null>,
+    },
+    primaryValue: {
+      required: true,
+      type: String,
+    },
+    secondaryValue: {
+      default: null,
+      type: String as PropType<string | null>,
+    },
+    trend: {
+      default: null,
+      type: String as PropType<'up' | 'down' | null>,
+    },
+    caption: {
+      default: null,
+      type: String as PropType<string | null>,
+    },
+  },
+  computed: {
+    backgroundClass(): string {
+      if (this.trend == 'up') {
+        return 'bg-green-50';
+      }
+      if (this.trend == 'down') {
+        return 'bg-red-50';
+      }
+      return '';
+    },
+    textClass(): string {
+      if (this.trend == 'up') {
+        return 'text-green-700';
+      }
+      if (this.trend == 'down') {
+        return 'text-red-700';
+      }
+      return 'text-slate-400';
+    },
+    iconClass(): string {
+      return 'w-5 h-5';
+    },
+    icon(): string {
+      if (this.trend == 'up') {
+        return 'heroicons-solid:chevron-up';
+      }
+      if (this.trend == 'down') {
+        return 'heroicons-solid:chevron-down';
+      }
+      return '';
+    },
+    centerClass(): string {
+      return 'items-center justify-center';
+    },
+  },
+});
+</script>