sprintify-ui 0.4.3 → 0.4.5

package/src/components/BaseShortcut.stories.js

@@ -1,102 +1,102 @@
-import BaseShortcut from './BaseShortcut.vue';
-import { palette } from '@/utils/colors';
-
-const colors = [...Object.keys(palette), '#ff0000', '#dbeafe'];
-
-const sizes = ['base', 'lg'];
-
-export default {
-  title: 'Components/BaseShortcut',
-  component: BaseShortcut,
-  argTypes: {
-    color: {
-      control: { type: 'select' },
-      options: colors,
-    },
-    contrast: {
-      control: { type: 'select' },
-      options: ['low', 'high'],
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: { BaseShortcut },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseShortcut v-bind="args">
-    </BaseShortcut>
-  `,
-});
-
-export const Basic = Template.bind({});
-Basic.args = {
-  to: '/restaurants',
-  title: 'Basic shortcut',
-  icon: 'heroicons:user-solid',
-  color: 'blue',
-};
-
-export const Colors = (args) => ({
-  components: { BaseShortcut },
-  setup() {
-    return { args, colors, sizes };
-  },
-  template: `
-  <div v-for="color in colors" :key="color">
-    <p class="text-xs text-slate-600 leading-tight my-2">{{ color }}</p>
-    <BaseShortcut v-bind="args" :color="color" icon="heroicons:beaker-20-solid"></BaseShortcut>
-  </div>
-  `,
-});
-
-Colors.args = {
-  contrast: 'high',
-  to: '/restaurants',
-  title: 'Contrast example',
-  description:
-    'Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page',
-  linkText: 'Open app',
-};
-
-export const Contrast = (args) => ({
-  components: { BaseShortcut },
-  setup() {
-    return { args, colors, sizes };
-  },
-  template: `
-  <div v-for="color in colors" :key="color">
-    <p class="text-xs text-slate-600 leading-tight my-2">{{ color }}</p>
-    <BaseShortcut v-bind="args" :color="color" icon="heroicons:beaker-20-solid"></BaseShortcut>
-  </div>
-  `,
-});
-
-Contrast.args = {
-  contrast: 'low',
-  to: '/restaurants',
-  title: 'Contrast example',
-  description:
-    'Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page',
-  linkText: 'Open app',
-};
-
-export const Href = Template.bind({});
-Href.args = {
-  href: 'https://www.google.com',
-  title: 'Basic shortcut',
-  icon: 'heroicons:user-solid',
-  color: 'blue',
-};
-
-export const Action = Template.bind({});
-Action.args = {
-  action() {
-    alert(1);
-  },
-  title: 'Basic shortcut',
-  icon: 'heroicons:user-solid',
-  color: 'blue',
-};
+import BaseShortcut from './BaseShortcut.vue';
+import { palette } from '@/utils/colors';
+
+const colors = [...Object.keys(palette), '#ff0000', '#dbeafe'];
+
+const sizes = ['base', 'lg'];
+
+export default {
+  title: 'Components/BaseShortcut',
+  component: BaseShortcut,
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: colors,
+    },
+    contrast: {
+      control: { type: 'select' },
+      options: ['low', 'high'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseShortcut },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseShortcut v-bind="args">
+    </BaseShortcut>
+  `,
+});
+
+export const Basic = Template.bind({});
+Basic.args = {
+  to: '/restaurants',
+  title: 'Basic shortcut',
+  icon: 'heroicons:user-solid',
+  color: 'blue',
+};
+
+export const Colors = (args) => ({
+  components: { BaseShortcut },
+  setup() {
+    return { args, colors, sizes };
+  },
+  template: `
+  <div v-for="color in colors" :key="color">
+    <p class="text-xs text-slate-600 leading-tight my-2">{{ color }}</p>
+    <BaseShortcut v-bind="args" :color="color" icon="heroicons:beaker-20-solid"></BaseShortcut>
+  </div>
+  `,
+});
+
+Colors.args = {
+  contrast: 'high',
+  to: '/restaurants',
+  title: 'Contrast example',
+  description:
+    'Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page',
+  linkText: 'Open app',
+};
+
+export const Contrast = (args) => ({
+  components: { BaseShortcut },
+  setup() {
+    return { args, colors, sizes };
+  },
+  template: `
+  <div v-for="color in colors" :key="color">
+    <p class="text-xs text-slate-600 leading-tight my-2">{{ color }}</p>
+    <BaseShortcut v-bind="args" :color="color" icon="heroicons:beaker-20-solid"></BaseShortcut>
+  </div>
+  `,
+});
+
+Contrast.args = {
+  contrast: 'low',
+  to: '/restaurants',
+  title: 'Contrast example',
+  description:
+    'Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page',
+  linkText: 'Open app',
+};
+
+export const Href = Template.bind({});
+Href.args = {
+  href: 'https://www.google.com',
+  title: 'Basic shortcut',
+  icon: 'heroicons:user-solid',
+  color: 'blue',
+};
+
+export const Action = Template.bind({});
+Action.args = {
+  action() {
+    alert(1);
+  },
+  title: 'Basic shortcut',
+  icon: 'heroicons:user-solid',
+  color: 'blue',
+};

package/src/components/BaseShortcut.vue

@@ -1,112 +1,112 @@
-<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"
-          />
-        </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 font-light 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"
-            />
-          </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"
+          />
+        </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 font-light 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"
+            />
+          </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,85 +1,85 @@
-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 
-                  class="shrink-0"
-                  :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 
+                  class="shrink-0"
+                  :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,32 +1,32 @@
-<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>