sprintify-ui 0.2.26 → 0.2.28

package/src/stories/PageShow.vue

@@ -0,0 +1,424 @@
+<template>
+  <div class="bg-slate-100 py-6">
+    <BaseContainer size="5xl">
+      <BaseHeader
+        title="Order #21496"
+        subtitle="August 6, 2023 at 1:56 pm from Online Store"
+        :max-actions="3"
+        :badge="{
+          icon: 'heroicons:check-circle-solid',
+          label: 'Paid',
+          color: 'blue',
+        }"
+        :actions="[
+          { label: 'Refund', icon: 'heroicons:banknotes', action: () => showAlert('Refund') },
+          { label: 'Edit', icon: 'heroicons:cog', action: () => showAlert('Edit') },
+          { label: 'PDF', icon: 'heroicons:document', action: () => showAlert('PDF') },
+          { label: 'Duplicate', icon: 'heroicons:document-duplicate', action: () => showAlert('Duplicate') },
+          { label: 'Print', icon: 'heroicons:printer', action: () => showAlert('Print') },
+          { label: 'Archive', icon: 'heroicons:trash', action: () => showAlert('Archive') },
+        ]"
+        :breadcrumbs="[{ label: 'Home', to: '/' }, { label: 'Orders', to: '/orders' }, { label: '#21496', to: '/' }]"
+        class="mb-1"
+      />
+
+      <BaseTabs
+        class="mb-4"
+        size="sm"
+      >
+        <BaseTabItem to="/">
+          General
+        </BaseTabItem>
+        <BaseTabItem to="/settings">
+          Transactions <BaseCounter :count="4" />
+        </BaseTabItem>
+        <BaseTabItem to="/setup">
+          Edit
+        </BaseTabItem>
+      </BaseTabs>
+
+      <div class="lg:flex lg:space-x-6 space-y-5 lg:space-y-0 font-light">
+        <div class="lg:grow lg:w-8/12">
+          <BaseCard class="mb-6">
+            <BaseCardRow size="sm">
+              <BaseBadge
+                color="yellow"
+                contrast="low"
+                bordered
+                icon="heroicons:inbox"
+              >
+                Unfulfilled (2)
+              </BaseBadge>
+            </BaseCardRow>
+
+            <BaseCardRow
+              v-for="i in 2"
+              :key="i"
+              size="sm"
+            >
+              <div class="flex space-x-3">
+                <div class="shrink-0">
+                  <div class="h-10 w-10 bg-slate-500 rounded-md overflow-hidden">
+                    <img
+                      class="h-full w-full object-cover"
+                      src="https://images.unsplash.com/photo-1568605114967-8130f3a36994?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80"
+                    >
+                  </div>
+                </div>
+                <div class="grow">
+                  <div class="sm:flex space-y-0.5 sm:space-y-0 sm:space-x-3 text-sm mb-2">
+                    <a
+                      href="#"
+                      class="text-blue-600 grow"
+                    >Contemporaine Blanche- 2 chiffres (6'' à 24'')</a>
+                    <p class="min-w-[70px] sm:text-right whitespace-nowrap">
+                      $ 1,000.00 x 1
+                    </p>
+                    <p class="min-w-[70px] sm:text-right whitespace-nowrap">
+                      $ 1,000.00
+                    </p>
+                  </div>
+                  <div class="space-y-1">
+                    <p class="text-xs text-slate-600">
+                      SKU: 5f918d672028b
+                    </p>
+                    <p class="text-xs text-slate-600">
+                      <span class="text-slate-500">GPO</span>: 97829
+                    </p>
+                    <p class="text-xs text-slate-600">
+                      <span class="text-slate-500">Numéro de porte</span>: 66
+                    </p>
+                    <p class="text-xs text-slate-600">
+                      <span class="text-slate-500">Taille</span>: 6"
+                    </p>
+                    <p class="text-xs text-slate-600">
+                      <span class="text-slate-500">Couleur</span>: Blanc
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </BaseCardRow>
+            <BaseCardRow size="sm">
+              <div class="flex justify-end gap-2">
+                <button
+                  type="button"
+                  class="btn btn-xs"
+                >
+                  Fulfill items
+                </button>
+                <button
+                  type="button"
+                  class="btn btn-xs btn-primary"
+                >
+                  Create shipping label
+                </button>
+              </div>
+            </BaseCardRow>
+          </BaseCard>
+
+          <BaseCard class="mb-6">
+            <BaseCardRow size="sm">
+              <BaseBadge
+                color="green"
+                contrast="low"
+                bordered
+                icon="heroicons:banknotes"
+              >
+                Paid
+              </BaseBadge>
+            </BaseCardRow>
+            <BaseCardRow size="sm">
+              <table class="text-sm leading-relaxed w-full">
+                <tr>
+                  <td>Subtotal</td>
+                  <td class="text-slate-600">
+                    2 items
+                  </td>
+                  <td class="text-right whitespace-nowrap">
+                    $ 1,000.00
+                  </td>
+                </tr>
+                <tr>
+                  <td>Shipping</td>
+                  <td class="text-slate-600">
+                    Standard
+                  </td>
+                  <td class="text-right whitespace-nowrap">
+                    $ 0.00
+                  </td>
+                </tr>
+                <tr>
+                  <td>Taxes</td>
+                  <td class="text-slate-600">
+                    GST
+                  </td>
+                  <td class="text-right whitespace-nowrap">
+                    $ 0.00
+                  </td>
+                </tr>
+                <tr>
+                  <td class="font-semibold">
+                    Total
+                  </td>
+                  <td />
+                  <td class="text-right font-semibold whitespace-nowrap">
+                    $ 1,000.00
+                  </td>
+                </tr>
+                <tr>
+                  <td colspan="3">
+                    <div class="border-t border-slate-300 my-4" />
+                  </td>
+                </tr>
+                <tr>
+                  <td>Paid by customer</td>
+                  <td />
+                  <td class="text-right">
+                    $ 1,000.00
+                  </td>
+                </tr>
+              </table>
+            </BaseCardRow>
+          </BaseCard>
+
+          <div>
+            <h2 class="font-semibold text-sm mb-4">
+              Timeline
+            </h2>
+            <BaseTimeline :items="timelineItems" />
+          </div>
+        </div>
+        
+        <div class="lg:shrink-0 lg:w-4/12 space-y-4">
+          <BaseCard>
+            <BaseCardRow size="sm">
+              <div class="flex mb-6">
+                <div class="flex-grow">
+                  <h2 class="font-medium mb-2 text-sm">
+                    Notes
+                  </h2>
+                  <p class="text-slate-500 text-xs">
+                    No notes from customer
+                  </p>
+                </div>
+                <div class="shrink-0">
+                  <button
+                    type="button"
+                    class="btn btn-white p-2"
+                  >
+                    <BaseIcon icon="heroicons:pencil-solid" />
+                  </button>
+                </div>
+              </div>
+
+              <div class="flex">
+                <div class="flex-grow">
+                  <h2 class="font-medium mb-2 text-sm">
+                    Additional details
+                  </h2>
+                  <p class="text-xs">
+                    language: fr
+                  </p>
+                </div>
+                <div class="shrink-0">
+                  <button
+                    type="button"
+                    class="btn btn-white p-2"
+                  >
+                    <BaseIcon icon="heroicons:pencil-solid" />
+                  </button>
+                </div>
+              </div>
+            </BaseCardRow>
+          </BaseCard>
+
+          <BaseCard>
+            <BaseCardRow size="sm">
+              <div class="space-y-4">
+                <div>
+                  <h2 class="font-medium mb-2 text-sm">
+                    Customer
+                  </h2>
+                  <a
+                    href="#"
+                    class="text-blue-600 text-sm"
+                  >John Doe</a>
+                  <br>
+                  <a
+                    href="#"
+                    class="text-blue-600 text-sm"
+                  >2 orders</a>
+                </div>
+
+                <div>
+                  <h2 class="font-medium mb-2 text-sm">
+                    Contact information
+                  </h2>
+                  <div class="flex justify-between">
+                    <a
+                      href="mailto:john.doe@witify.io"
+                      class="text-blue-600 text-sm"
+                    >john.doe@witify.io</a>
+                    <BaseClipboard
+                      value="john.doe@witify.io"
+                      class="shrink-0"
+                    >
+                      <BaseIcon
+                        icon="heroicons:clipboard-solid"
+                        class="text-slate-600"
+                      />
+                    </BaseClipboard>
+                  </div>
+                </div>
+
+                <div>
+                  <h2 class="font-medium mb-2 text-sm">
+                    Shipping address
+                  </h2>
+                  <div class="flex justify-between items-start">
+                    <div>
+                      <p class="text-sm mb-1">
+                        Philippe Lamarche<br>
+                        Gestion Philippe Lamarche Inc<br>
+                        250 Rue Westgate<br>
+                        Rosemère QC J7A 2E9<br>
+                        Canada<br>
+                        (514) 618-9961
+                      </p>
+                      <a
+                        href="#"
+                        class="text-blue-600 text-sm underline"
+                      >View map</a>
+                    </div>
+                    <BaseClipboard
+                      value="john.doe@witify.io"
+                      class="shrink-0"
+                    >
+                      <BaseIcon
+                        icon="heroicons:clipboard-solid"
+                        class="text-slate-600"
+                      />
+                    </BaseClipboard>
+                  </div>
+                </div>
+              </div>
+            </BaseCardRow>
+          </BaseCard>
+
+          <BaseCard>
+            <BaseCardRow size="sm">
+              <div>
+                <h2 class="font-medium mb-3 text-sm">
+                  Conversion Summary
+                </h2>
+
+                <div class="space-y-1.5 mb-2">
+                  <div class="flex space-x-2 items-center justify-between">
+                    <BaseIcon
+                      icon="heroicons:inbox-arrow-down-solid"
+                      class="text-slate-600 shrink-0"
+                    />
+                    <div class="grow">
+                      <p class="text-sm">
+                        This is their 2nd order
+                      </p>
+                    </div>
+                  </div>
+
+                  <div class="flex space-x-2 items-center justify-between">
+                    <BaseIcon
+                      icon="heroicons:eye-solid"
+                      class="text-slate-600 shrink-0"
+                    />
+                    <div class="grow">
+                      <p class="text-sm">
+                        1st session from Google
+                      </p>
+                    </div>
+                  </div>
+
+                  <div class="flex space-x-2 items-center justify-between">
+                    <BaseIcon
+                      icon="heroicons:chart-bar-square-solid"
+                      class="text-slate-600 shrink-0"
+                    />
+                    <div class="grow">
+                      <p class="text-sm">
+                        1 session over 1 day
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                <a
+                  href="#"
+                  class="text-blue-600 text-sm underline"
+                >View conversion details</a>
+              </div>
+            </BaseCardRow>
+          </BaseCard>
+        </div>
+      </div>
+    </BaseContainer>
+
+    <BaseAppNotifications />
+    <BaseAppDialogs />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useNotificationsStore } from '..';
+
+import BaseCard from '@/components/BaseCard.vue';
+import BaseCardRow from '@/components/BaseCardRow.vue';
+import BaseHeader from '@/components/BaseHeader.vue';
+import BaseTabs from '@/components/BaseTabs.vue';
+import BaseBadge from '@/components/BaseBadge.vue';
+import BaseCounter from '@/components/BaseCounter.vue';
+import BaseTabItem from '@/components/BaseTabItem.vue';
+import BaseTimeline from '@/components/BaseTimeline.vue';
+import { BaseIcon } from '../components/index';
+import BaseContainer from '@/components/BaseContainer.vue';
+import BaseClipboard from '@/components/BaseClipboard.vue';
+import BaseAppNotifications from '@/components/BaseAppNotifications.vue';
+import BaseAppDialogs from '@/components/BaseAppDialogs.vue';
+
+const timelineItems = [
+  {
+    title: 'Order placed',
+    description: 'Philippe Lamarche placed this order on Online Store (checkout #36886026060090).',
+    icon: 'heroicons:inbox-solid',
+    color: null,
+    date: '1:56 PM',
+  },
+  {
+    title: 'Confirmation created',
+    description: 'Confirmation #X9WH46CK5 was generated for this order.',
+    icon: 'heroicons:check-circle-solid',
+    color: null,
+    date: '1:56 PM',
+  },
+  {
+    title: 'Payment captured',
+    description: 'Payment of $1,000.00 was captured for this order.',
+    icon: 'heroicons:credit-card-solid',
+    color: null,
+    date: '1:56 PM',
+  },
+  {
+    title: 'Order fulfilled',
+    description: 'Order #21496 was fulfilled.',
+    icon: 'heroicons:check-circle-solid',
+    color: null,
+    date: '3:43 PM',
+  },
+];
+
+function showAlert(text: string) {
+  useNotificationsStore().push({
+    title: text,
+    text: text,
+    color: 'success'
+  });
+}
+</script>

package/src/stories/Show.stories.js

@@ -0,0 +1,22 @@
+import PageShow from './PageShow.vue';
+
+export default {
+    title: 'Pages/Show',
+    component: PageShow,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+
+
+const Template = (args) => ({
+    components: {
+        PageShow
+    },
+    template: `<PageShow></PageShow>`,
+    setup() {
+        return { args };
+    },
+});
+
+export const Demo = Template.bind({});

package/src/types/TimelineItem.ts

@@ -1,8 +1,7 @@
-import { Color } from './Color';
 export interface TimelineItem {
   title: string;
   icon: string;
   description?: null | string;
   date?: string | null;
-  color?: Color | null;
+  color?: string | null;
 }

package/src/utils/colors.ts

@@ -175,7 +175,17 @@ export const palette: Record<string, ColorPalette> = {
   },
 };
 
+const colorNames = {
+  info: 'blue',
+  success: 'green',
+  warning: 'yellow',
+  danger: 'red',
+} as Record<string, string>;
+
 export function getColorConfig(color: string, contrast = false): ColorConfig {
+
+  color = colorNames[color] || color;
+
   const colorConfig = palette[color]?.[contrast ? 'high' : 'low'];
 
   if (colorConfig) {