sprintify-ui 0.1.8 → 0.1.10

package/src/components/BaseHeader.stories.js

@@ -0,0 +1,120 @@
+import BaseHeader from './BaseHeader.vue';
+
+export default {
+  title: 'Form/BaseHeader',
+  component: BaseHeader,
+};
+
+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: 'Edit',
+    to: '/articles',
+    icon: 'heroicons:pencil-solid',
+  },
+  {
+    label: 'View',
+    icon: 'heroicons:link-solid',
+    action() {
+      alert('View');
+    },
+  },
+  {
+    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

@@ -0,0 +1,177 @@
+<template>
+  <div ref="baseHeaderRef">
+    <BaseBreadcrumbs
+      v-if="breadcrumbs"
+      :breadcrumbs="breadcrumbs"
+      :class="[attributes || subtitle ? 'mb-3' : 'mb-2']"
+    ></BaseBreadcrumbs>
+    <div class="lg:flex lg:items-center lg:justify-between">
+      <div class="min-w-0 flex-1">
+        <div
+          class="flex flex-wrap items-center"
+          :class="[compactLayout ? 'gap-2' : 'gap-3']"
+        >
+          <h2
+            class="font-bold text-slate-900"
+            :class="[
+              compactLayout
+                ? 'text-2xl leading-7'
+                : 'truncate text-3xl tracking-tight',
+            ]"
+          >
+            {{ title }}
+          </h2>
+
+          <BaseBadge
+            v-if="badge"
+            :color="badge.color"
+            :icon="badge.icon"
+            class="relative -bottom-px"
+          >
+            {{ badge.label }}
+          </BaseBadge>
+        </div>
+        <h3
+          v-if="subtitle"
+          class="mt-0.5 leading-tight text-slate-500"
+          :class="[compactLayout ? 'text-sm' : 'truncate text-base']"
+        >
+          {{ subtitle }}
+        </h3>
+        <div
+          v-if="attributes"
+          class="flex"
+          :class="[
+            compactLayout
+              ? 'mt-1 flex-col'
+              : 'mt-0 flex-row flex-wrap space-x-6',
+          ]"
+        >
+          <div
+            v-for="attribute in attributes"
+            :key="attribute.label"
+            class="mt-2 flex items-center text-sm text-slate-500"
+          >
+            <BaseIcon
+              :icon="attribute.icon"
+              class="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
+              aria-hidden="true"
+            />
+            {{ attribute.label }}
+          </div>
+        </div>
+      </div>
+
+      <div v-if="compactLayout" class="mt-5 flex gap-2">
+        <BaseActionItemButton
+          v-if="primaryAction"
+          :action="primaryAction"
+          size="sm"
+        />
+
+        <BaseMenu
+          v-if="secondaryActions.length"
+          :items="secondaryActions"
+          size="sm"
+          position="bottom-right"
+        >
+          <template #button="{ open }">
+            <div
+              class="btn btn-sm flex items-center gap-1 hover:border-slate-400"
+              :class="[open ? 'bg-slate-100' : '']"
+            >
+              <span>{{ $t('sui.more') }}</span>
+              <BaseIcon
+                icon="heroicons:chevron-down-solid"
+                class="h-5 w-5 text-slate-500"
+              />
+            </div>
+          </template>
+        </BaseMenu>
+      </div>
+
+      <div v-else class="mt-5 flex gap-2 lg:mt-0 lg:ml-4">
+        <BaseActionItemButton
+          v-for="action in actions"
+          :key="action.label"
+          :action="action"
+          size="sm"
+        />
+      </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';
+
+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[];
+  }>(),
+  {
+    subtitle: undefined,
+    attributes: undefined,
+    actions: undefined,
+    badge: undefined,
+    layout: 'default',
+    breadcrumbs: undefined,
+  }
+);
+
+const primaryActionIndex = computed(() => {
+  if (!props.actions) {
+    return undefined;
+  }
+  if (props.actions?.length === 1) {
+    return 0;
+  }
+  return props.actions?.findIndex((a) => a.color == 'primary');
+});
+
+const primaryAction = computed(() => {
+  if (!props.actions) {
+    return undefined;
+  }
+
+  const index = primaryActionIndex.value;
+
+  if (index) {
+    return props.actions[index];
+  }
+
+  return null;
+});
+
+const secondaryActions = computed(() => {
+  if (!props.actions) {
+    return [];
+  }
+  return props.actions?.filter((a, i) => i !== primaryActionIndex.value);
+});
+
+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;
+});
+</script>

package/src/components/BaseMenuItem.vue

@@ -34,7 +34,7 @@ const props = defineProps({
   color: {
     default: 'dark',
     type: String as PropType<
-      'dark' | 'light' | 'danger' | 'success' | 'warning'
+      'dark' | 'light' | 'danger' | 'success' | 'warning' | 'primary'
     >,
   },
   size: {
@@ -54,6 +54,8 @@ const textColor = computed((): string => {
     return 'text-green-600';
   } else if (props.color == 'warning') {
     return 'text-yellow-600';
+  } else if (props.color == 'primary') {
+    return 'text-primary-600';
   }
 
   return '';

package/src/components/index.ts

@@ -42,6 +42,7 @@ import BaseFilePickerCrop from './BaseFilePickerCrop.vue';
 import BaseFileUploader from './BaseFileUploader.vue';
 import BaseForm from './BaseForm.vue';
 import BaseHasMany from './BaseHasMany.vue';
+import BaseHeader from './BaseHeader.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 import BaseIconPicker from './BaseIconPicker.vue';
 import BaseInput from './BaseInput.vue';
@@ -136,6 +137,7 @@ export {
   BaseFileUploader,
   BaseForm,
   BaseHasMany,
+  BaseHeader,
   BaseIcon,
   BaseIconPicker,
   BaseInput,

package/src/lang/en.json

@@ -39,6 +39,7 @@
     "maximum_x_decimal_places": "Maximum 1 decimal place|Maximum {count} decimal places",
     "min_x_characters": "{x} characters minimum",
     "month": "Month",
+    "more": "More",
     "next": "Next",
     "next_month": "Next month",
     "none": "None",

package/src/lang/fr.json

@@ -39,6 +39,7 @@
     "maximum_x_decimal_places": "Maximum 1 décimale|Maximum {count} décimales",
     "min_x_characters": "{x} caractères minimum",
     "month": "Mois",
+    "more": "Plus",
     "next": "Suivant",
     "next_month": "Mois prochain",
     "none": "Aucun",

package/src/types/index.ts

@@ -67,13 +67,13 @@ export interface PaginatedCollection extends PaginationMetadata {
 
 export interface MenuItemInterface {
   label?: string;
-  icon?: string;
-  action?: () => Promise<void> | void;
-  to?: RouteLocationRaw;
   href?: string;
-  line?: boolean;
+  to?: RouteLocationRaw;
+  action?: () => Promise<void> | void;
+  icon?: string;
   count?: number;
-  color?: 'dark' | 'light' | 'danger' | 'success' | 'warning';
+  color?: 'dark' | 'light' | 'danger' | 'success' | 'warning' | 'primary';
+  line?: boolean;
 }
 
 export interface ActionItem {
@@ -83,6 +83,7 @@ export interface ActionItem {
   action?: () => Promise<void> | void;
   icon?: string;
   count?: number;
+  color?: 'dark' | 'light' | 'danger' | 'success' | 'warning' | 'primary';
   disabled?: boolean;
   meta?: Record<string, any>;
   actions?: ActionItem[];