sprintify-ui 0.4.5 → 0.4.6

package/src/components/BaseHeader.stories.js

@@ -1,133 +1,133 @@
-import BaseHeader from './BaseHeader.vue';
-
-export default {
-  title: 'Layout/BaseHeader',
-  component: BaseHeader,
-  argTypes: {
-    layout: {
-      control: { type: 'select' },
-      options: ['default', 'compact'],
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: {
-    BaseHeader,
-  },
-  setup() {
-    return { args };
-  },
-  template: `
-  <BaseHeader v-bind="args"></BaseHeader>
-  `,
-});
-
-const badge = {
-  label: 'Draft',
-  color: 'yellow',
-  icon: 'heroicons:document-text-solid',
-};
-
-const attributes = [
-  {
-    label: 'Full Time',
-    icon: 'heroicons:briefcase-solid',
-  },
-  {
-    label: 'Remote',
-    icon: 'heroicons:map-pin-solid',
-  },
-];
-
-const actions = [
-  {
-    label: 'View',
-    icon: 'heroicons:link-solid',
-    action() {
-      alert('View');
-    },
-  },
-  {
-    label: 'Edit',
-    to: '/articles',
-    icon: 'heroicons:pencil-solid',
-  },
-  {
-    label: 'Publish 2',
-    to: '/articles',
-    color: 'secondary',
-    icon: 'heroicons:check-solid',
-  },
-
-  {
-    label: 'Publish',
-    to: '/articles',
-    color: 'primary',
-    icon: 'heroicons:check-solid',
-  },
-];
-
-const breadcrumbs = [
-  {
-    label: 'Home',
-    icon: 'heroicons:home-20-solid',
-    to: '/',
-  },
-  {
-    label: 'Users',
-    to: '/users',
-  },
-  {
-    label: 'John Doe',
-    to: '/users/1',
-  },
-  {
-    label: 'Very long title this is a very long title that will be truncated',
-    to: '/users/1/settings',
-  },
-];
-
-export const Demo = Template.bind({});
-Demo.args = {
-  title: 'Create Article',
-  subtitle: 'Create a new article, and publish it to the world. ',
-  actions: actions,
-  attributes: attributes,
-  badge: badge,
-  breadcrumbs: breadcrumbs,
-};
-
-export const Simple = Template.bind({});
-Simple.args = {
-  title: 'Create Article',
-  actions: actions,
-};
-
-export const Subtitle = Template.bind({});
-Subtitle.args = {
-  title: 'Create Article',
-  subtitle: 'Create a new article, and publish it to the world. ',
-  actions: actions,
-};
-
-export const Attributes = Template.bind({});
-Attributes.args = {
-  title: 'Create Article',
-  attributes: attributes,
-  actions: actions,
-};
-
-export const Badge = Template.bind({});
-Badge.args = {
-  title: 'Create Article',
-  actions: actions,
-  badge: badge,
-};
-
-export const Breadcrumbs = Template.bind({});
-Breadcrumbs.args = {
-  title: 'Create Article',
-  actions: actions,
-  breadcrumbs: breadcrumbs,
-};
+import BaseHeader from './BaseHeader.vue';
+
+export default {
+  title: 'Layout/BaseHeader',
+  component: BaseHeader,
+  argTypes: {
+    layout: {
+      control: { type: 'select' },
+      options: ['default', 'compact'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseHeader,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <BaseHeader v-bind="args"></BaseHeader>
+  `,
+});
+
+const badge = {
+  label: 'Draft',
+  color: 'yellow',
+  icon: 'heroicons:document-text-solid',
+};
+
+const attributes = [
+  {
+    label: 'Full Time',
+    icon: 'heroicons:briefcase-solid',
+  },
+  {
+    label: 'Remote',
+    icon: 'heroicons:map-pin-solid',
+  },
+];
+
+const actions = [
+  {
+    label: 'View',
+    icon: 'heroicons:link-solid',
+    action() {
+      alert('View');
+    },
+  },
+  {
+    label: 'Edit',
+    to: '/articles',
+    icon: 'heroicons:pencil-solid',
+  },
+  {
+    label: 'Publish 2',
+    to: '/articles',
+    color: 'secondary',
+    icon: 'heroicons:check-solid',
+  },
+
+  {
+    label: 'Publish',
+    to: '/articles',
+    color: 'primary',
+    icon: 'heroicons:check-solid',
+  },
+];
+
+const breadcrumbs = [
+  {
+    label: 'Home',
+    icon: 'heroicons:home-20-solid',
+    to: '/',
+  },
+  {
+    label: 'Users',
+    to: '/users',
+  },
+  {
+    label: 'John Doe',
+    to: '/users/1',
+  },
+  {
+    label: 'Very long title this is a very long title that will be truncated',
+    to: '/users/1/settings',
+  },
+];
+
+export const Demo = Template.bind({});
+Demo.args = {
+  title: 'Create Article',
+  subtitle: 'Create a new article, and publish it to the world. ',
+  actions: actions,
+  attributes: attributes,
+  badge: badge,
+  breadcrumbs: breadcrumbs,
+};
+
+export const Simple = Template.bind({});
+Simple.args = {
+  title: 'Create Article',
+  actions: actions,
+};
+
+export const Subtitle = Template.bind({});
+Subtitle.args = {
+  title: 'Create Article',
+  subtitle: 'Create a new article, and publish it to the world. ',
+  actions: actions,
+};
+
+export const Attributes = Template.bind({});
+Attributes.args = {
+  title: 'Create Article',
+  attributes: attributes,
+  actions: actions,
+};
+
+export const Badge = Template.bind({});
+Badge.args = {
+  title: 'Create Article',
+  actions: actions,
+  badge: badge,
+};
+
+export const Breadcrumbs = Template.bind({});
+Breadcrumbs.args = {
+  title: 'Create Article',
+  actions: actions,
+  breadcrumbs: breadcrumbs,
+};

package/src/components/BaseHeader.vue

@@ -1,188 +1,188 @@
-<template>
-  <div ref="baseHeaderRef">
-    <BaseBreadcrumbs
-      v-if="breadcrumbs"
-      :breadcrumbs="breadcrumbs"
-      class="mb-1"
-    />
-
-    <div class="lg:flex lg:items-top lg:justify-between">
-      <div class="min-w-0 flex-1">
-        <div class="flex flex-col xs:flex-row xs:flex-wrap xs:items-center">
-          <h1 class="order-2 font-bold text-slate-900 xs:order-1 mr-3 truncate text-3xl tracking-tight">
-            {{ title }}
-          </h1>
-
-          <div
-            v-if="badge"
-            class="order-1 mb-1 xs:order-2 xs:mb-0"
-          >
-            <BaseBadge
-              :color="badge.color"
-              :icon="badge.icon"
-              class="relative xs:-bottom-[2px]"
-            >
-              {{ badge.label }}
-            </BaseBadge>
-          </div>
-        </div>
-        <h2
-          v-if="subtitle"
-          class="mt-1 leading-tight font-light text-slate-600 text-xs"
-          :class="[compactLayout ? '' : 'truncate']"
-        >
-          {{ subtitle }}
-        </h2>
-        <div
-          v-if="attributes"
-          class="flex"
-          :class="[
-            compactLayout
-              ? 'mt-2 flex-col'
-              : 'mt-2 flex-row flex-wrap space-x-4',
-          ]"
-        >
-          <div
-            v-for="attribute in attributes"
-            :key="attribute.label"
-            class="flex items-center"
-          >
-            <BaseIcon
-              :icon="attribute.icon"
-              class="mr-1.5 h-4 w-4 shrink-0 text-slate-600"
-              aria-hidden="true"
-            />
-            <span class="text-sm text-slate-600">
-              {{ attribute.label }}
-            </span>
-          </div>
-        </div>
-      </div>
-
-      <div
-        class="mt-3 lg:mt-0 mb-2 lg:mb-0"
-      >
-        <div
-          class="flex gap-2"
-          :class="{
-            'lg:mt-0 lg:ml-4': !compactLayout,
-          }"
-        >
-          <BaseActionItemButton
-            v-for="(primaryAction, i) in primaryActions"
-            :key="i"
-            :action="primaryAction"
-            size="sm"
-          />
-          <BaseMenu
-            v-if="secondaryActions.length"
-            :items="secondaryActions"
-            size="sm"
-            :position="compactLayout ? 'bottom-right' : 'bottom-left'"
-          >
-            <template #button="{ open }">
-              <div
-                class="btn btn-sm flex items-center rounded-full 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>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ActionItem, Breadcrumb } from '@/types';
-import { useResizeObserver } from '@vueuse/core';
-import { BaseBreadcrumbs, BaseIcon } from '..';
-import BaseActionItemButton from './BaseActionItemButton.vue';
-import BaseBadge from './BaseBadge.vue';
-import BaseMenu from './BaseMenu.vue';
-import { cloneDeep } from 'lodash';
-
-const props = withDefaults(
-  defineProps<{
-    title: string;
-    subtitle?: string;
-    attributes?: { icon: string; label: string }[];
-    actions?: ActionItem[];
-    badge?: { icon: string; label: string; color: string };
-    layout?: 'default' | 'compact';
-    breadcrumbs?: Breadcrumb[];
-    maxActions?: number;
-  }>(),
-  {
-    subtitle: undefined,
-    attributes: undefined,
-    actions: undefined,
-    badge: undefined,
-    layout: 'default',
-    breadcrumbs: undefined,
-    maxActions: 3,
-  }
-);
-
-const baseHeaderRef = ref<HTMLElement | null>(null);
-
-const width = ref(800);
-useResizeObserver(baseHeaderRef, () => {
-  width.value = baseHeaderRef.value?.clientWidth ?? 800;
-});
-
-const compactLayout = computed(() => {
-  if (props.layout === 'compact') {
-    return true;
-  }
-  return width.value < 500;
-});
-
-const maxActionsInternal = computed(() => {
-  if (compactLayout.value) {
-    return 1;
-  }
-  return Math.max(1, props.maxActions);
-});
-
-const primaryActions = computed(() => {
-  if (!props.actions) {
-    return [];
-  }
-
-  return cloneDeep(props.actions)
-    .sort(sortByColor(false))
-    .slice(0, maxActionsInternal.value)
-    .sort(sortByColor(true));
-});
-
-function sortByColor(reverse = false) {
-  const sortingArr = ['secondary', 'primary'];
-
-  return (a: ActionItem, b: ActionItem) => {
-    if (!reverse) {
-      return (
-        sortingArr.indexOf(b.color ?? '') - sortingArr.indexOf(a.color ?? '')
-      );
-    }
-    return (
-      sortingArr.indexOf(a.color ?? '') - sortingArr.indexOf(b.color ?? '')
-    );
-  };
-}
-
-const secondaryActions = computed(() => {
-  if (!props.actions) {
-    return [];
-  }
-
-  return props.actions.filter(
-    (a) => !primaryActions.value.map((a) => a.label).includes(a.label)
-  );
-});
-</script>
+<template>
+  <div ref="baseHeaderRef">
+    <BaseBreadcrumbs
+      v-if="breadcrumbs"
+      :breadcrumbs="breadcrumbs"
+      class="mb-1"
+    />
+
+    <div class="lg:flex lg:items-top lg:justify-between">
+      <div class="min-w-0 flex-1">
+        <div class="flex flex-col xs:flex-row xs:flex-wrap xs:items-center">
+          <h1 class="order-2 font-bold text-slate-900 xs:order-1 mr-3 truncate text-3xl tracking-tight">
+            {{ title }}
+          </h1>
+
+          <div
+            v-if="badge"
+            class="order-1 mb-1 xs:order-2 xs:mb-0"
+          >
+            <BaseBadge
+              :color="badge.color"
+              :icon="badge.icon"
+              class="relative xs:-bottom-[2px]"
+            >
+              {{ badge.label }}
+            </BaseBadge>
+          </div>
+        </div>
+        <h2
+          v-if="subtitle"
+          class="mt-1 leading-tight font-light text-slate-600 text-xs"
+          :class="[compactLayout ? '' : 'truncate']"
+        >
+          {{ subtitle }}
+        </h2>
+        <div
+          v-if="attributes"
+          class="flex"
+          :class="[
+            compactLayout
+              ? 'mt-2 flex-col'
+              : 'mt-2 flex-row flex-wrap space-x-4',
+          ]"
+        >
+          <div
+            v-for="attribute in attributes"
+            :key="attribute.label"
+            class="flex items-center"
+          >
+            <BaseIcon
+              :icon="attribute.icon"
+              class="mr-1.5 h-4 w-4 shrink-0 text-slate-600"
+              aria-hidden="true"
+            />
+            <span class="text-sm text-slate-600">
+              {{ attribute.label }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="mt-3 lg:mt-0 mb-2 lg:mb-0"
+      >
+        <div
+          class="flex gap-2"
+          :class="{
+            'lg:mt-0 lg:ml-4': !compactLayout,
+          }"
+        >
+          <BaseActionItemButton
+            v-for="(primaryAction, i) in primaryActions"
+            :key="i"
+            :action="primaryAction"
+            size="sm"
+          />
+          <BaseMenu
+            v-if="secondaryActions.length"
+            :items="secondaryActions"
+            size="sm"
+            :position="compactLayout ? 'bottom-right' : 'bottom-left'"
+          >
+            <template #button="{ open }">
+              <div
+                class="btn btn-sm flex items-center rounded-full 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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ActionItem, Breadcrumb } from '@/types';
+import { useResizeObserver } from '@vueuse/core';
+import { BaseBreadcrumbs, BaseIcon } from '..';
+import BaseActionItemButton from './BaseActionItemButton.vue';
+import BaseBadge from './BaseBadge.vue';
+import BaseMenu from './BaseMenu.vue';
+import { cloneDeep } from 'lodash';
+
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    subtitle?: string;
+    attributes?: { icon: string; label: string }[];
+    actions?: ActionItem[];
+    badge?: { icon: string; label: string; color: string };
+    layout?: 'default' | 'compact';
+    breadcrumbs?: Breadcrumb[];
+    maxActions?: number;
+  }>(),
+  {
+    subtitle: undefined,
+    attributes: undefined,
+    actions: undefined,
+    badge: undefined,
+    layout: 'default',
+    breadcrumbs: undefined,
+    maxActions: 3,
+  }
+);
+
+const baseHeaderRef = ref<HTMLElement | null>(null);
+
+const width = ref(800);
+useResizeObserver(baseHeaderRef, () => {
+  width.value = baseHeaderRef.value?.clientWidth ?? 800;
+});
+
+const compactLayout = computed(() => {
+  if (props.layout === 'compact') {
+    return true;
+  }
+  return width.value < 500;
+});
+
+const maxActionsInternal = computed(() => {
+  if (compactLayout.value) {
+    return 1;
+  }
+  return Math.max(1, props.maxActions);
+});
+
+const primaryActions = computed(() => {
+  if (!props.actions) {
+    return [];
+  }
+
+  return cloneDeep(props.actions)
+    .sort(sortByColor(false))
+    .slice(0, maxActionsInternal.value)
+    .sort(sortByColor(true));
+});
+
+function sortByColor(reverse = false) {
+  const sortingArr = ['secondary', 'primary'];
+
+  return (a: ActionItem, b: ActionItem) => {
+    if (!reverse) {
+      return (
+        sortingArr.indexOf(b.color ?? '') - sortingArr.indexOf(a.color ?? '')
+      );
+    }
+    return (
+      sortingArr.indexOf(a.color ?? '') - sortingArr.indexOf(b.color ?? '')
+    );
+  };
+}
+
+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/BaseIconPicker.stories.js

@@ -1,22 +1,22 @@
-import BaseIconPicker from './BaseIconPicker.vue';
-import ShowValue from '../../.storybook/components/ShowValue.vue';
-
-export default {
-  title: 'Components/BaseIconPicker',
-  component: BaseIconPicker,
-};
-
-const Template = (args) => ({
-  components: { BaseIconPicker, ShowValue },
-  setup() {
-    const value = ref('heroicons:user-group-solid');
-    return { args, value };
-  },
-  template: `
-    <BaseIconPicker v-bind="args" v-model="value"></BaseIconPicker>
-    <ShowValue :value="value" />
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
+import BaseIconPicker from './BaseIconPicker.vue';
+import ShowValue from '../../.storybook/components/ShowValue.vue';
+
+export default {
+  title: 'Components/BaseIconPicker',
+  component: BaseIconPicker,
+};
+
+const Template = (args) => ({
+  components: { BaseIconPicker, ShowValue },
+  setup() {
+    const value = ref('heroicons:user-group-solid');
+    return { args, value };
+  },
+  template: `
+    <BaseIconPicker v-bind="args" v-model="value"></BaseIconPicker>
+    <ShowValue :value="value" />
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};