@xy-planning-network/trees 0.9.9 → 0.10.0

package/src/lib-components/layout/SidebarLayout.vue

@@ -35,7 +35,7 @@ const isActive = (url: string): boolean => {
 }
 </script>
 <template>
-  <div class="h-screen flex overflow-hidden bg-gray-100">
+  <div class="h-screen flex overflow-hidden bg-gray-50">
     <TransitionRoot as="template" :show="sidebarOpen">
       <Dialog
         as="div"
@@ -90,32 +90,36 @@ const isActive = (url: string): boolean => {
               <img class="w-auto h-12" :src="iconUrl" alt="Logo" />
             </div>
             <div class="mt-5 flex flex-col flex-1 h-0 overflow-y-auto">
-              <nav class="flex-1 px-2 space-y-1">
-                <a
-                  v-for="item in navigation"
-                  :key="item.name"
-                  :href="item.url"
-                  :class="[
-                    isActive(item.url)
-                      ? 'bg-gray-100 text-gray-900'
-                      : 'text-gray-700 hover:bg-gray-50 hover:text-gray-900',
-                    'group flex items-center px-2 py-2 text-base font-medium rounded-md',
-                  ]"
-                  :target="item.openInTab ? '_blank' : '_self'"
-                >
-                  <component
-                    :is="item.icon"
-                    :class="[
-                      isActive(item.url)
-                        ? 'text-gray-600'
-                        : 'text-gray-500 group-hover:text-gray-600',
-                      'mr-4 h-6 w-6',
-                    ]"
-                    aria-hidden="true"
-                  />
-                  {{ item.name }}
-                </a>
-              </nav>
+              <div class="flex-1 px-2">
+                <slot name="sidebar-nav">
+                  <nav class="space-y-1">
+                    <a
+                      v-for="item in navigation"
+                      :key="item.name"
+                      :href="item.url"
+                      :class="[
+                        isActive(item.url)
+                          ? 'bg-gray-100 text-gray-900'
+                          : 'text-gray-700 hover:bg-gray-50 hover:text-gray-900',
+                        'group flex items-center px-2 py-2 text-base font-semibold rounded-md',
+                      ]"
+                      :target="item.openInTab ? '_blank' : '_self'"
+                    >
+                      <component
+                        :is="item.icon"
+                        :class="[
+                          isActive(item.url)
+                            ? 'text-gray-600'
+                            : 'text-gray-500 group-hover:text-gray-600',
+                          'mr-4 h-6 w-6',
+                        ]"
+                        aria-hidden="true"
+                      />
+                      {{ item.name }}
+                    </a>
+                  </nav>
+                </slot>
+              </div>
               <div v-if="$slots['sidebar-bottom']" class="mt-auto">
                 <div class="mt-6 px-2">
                   <slot name="sidebar-bottom" />
@@ -141,32 +145,36 @@ const isActive = (url: string): boolean => {
             <img class="w-auto h-12" :src="iconUrl" alt="Logo" />
           </div>
           <div class="mt-5 grow flex flex-col">
-            <nav class="flex-1 px-2 bg-white space-y-1">
-              <a
-                v-for="item in navigation"
-                :key="item.name"
-                :href="item.url"
-                :class="[
-                  isActive(item.url)
-                    ? 'bg-gray-100 text-gray-900'
-                    : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900',
-                  'group flex items-center px-2 py-2 text-sm font-medium rounded-md',
-                ]"
-                :target="item.openInTab ? '_blank' : '_self'"
-              >
-                <component
-                  :is="item.icon"
-                  :class="[
-                    isActive(item.url)
-                      ? 'text-gray-600'
-                      : 'text-gray-500 group-hover:text-gray-600',
-                    'mr-3 h-6 w-6',
-                  ]"
-                  aria-hidden="true"
-                />
-                {{ item.name }}
-              </a>
-            </nav>
+            <div class="flex-1 px-2 bg-white">
+              <slot name="sidebar-nav">
+                <nav class="space-y-1">
+                  <a
+                    v-for="item in navigation"
+                    :key="item.name"
+                    :href="item.url"
+                    :class="[
+                      isActive(item.url)
+                        ? 'bg-gray-100 text-gray-900'
+                        : 'text-gray-800 hover:bg-gray-100 hover:text-gray-900',
+                      'group flex items-center px-2 py-2 text-sm font-semibold rounded-md',
+                    ]"
+                    :target="item.openInTab ? '_blank' : '_self'"
+                  >
+                    <component
+                      :is="item.icon"
+                      :class="[
+                        isActive(item.url)
+                          ? 'text-gray-600'
+                          : 'text-gray-400 group-hover:text-gray-600',
+                        'mr-3 h-6 w-6',
+                      ]"
+                      aria-hidden="true"
+                    />
+                    {{ item.name }}
+                  </a>
+                </nav>
+              </slot>
+            </div>
 
             <div v-if="$slots['sidebar-bottom']" class="mt-atuo">
               <div class="mt-6 px-2">

package/src/lib-components/layout/StackedLayout.vue

@@ -31,7 +31,7 @@ const isActive = (url: string): boolean => {
 }
 </script>
 <template>
-  <div class="min-h-screen bg-gray-100">
+  <div class="min-h-screen bg-gray-50">
     <Disclosure v-slot="{ open }" as="nav" class="bg-white shadow-sm">
       <div class="mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex justify-between h-16">

package/src/lib-components/lists/Cards.vue

@@ -14,7 +14,7 @@ defineProps<{
     <div
       v-for="(card, idx) in cards"
       :key="idx"
-      class="bg-white overflow-hidden shadow rounded-lg"
+      class="bg-white overflow-hidden shadow rounded-xy"
     >
       <div class="px-4 py-5 sm:p-6 text-center">
         <dl>

package/src/lib-components/navigation/Steps.vue

@@ -65,7 +65,7 @@ const previous = (): void => {
       <span v-if="!hidePrevious" class="inline-flex rounded-md shadow-sm">
         <button
           type="button"
-          class="xy-btn-white"
+          class="xy-btn-secondary"
           @click="previous"
           v-text="previousText"
         ></button>

package/src/lib-components/overlays/ContentModal.vue

@@ -67,7 +67,7 @@ const updateModelValue = (value: boolean) => {
           leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
         >
           <div
-            class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6"
+            class="inline-block align-bottom bg-white rounded-xy px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-md sm:w-full sm:p-8 sm:rounded-xy-lg"
           >
             <div>
               <slot name="icon"></slot>

package/src/lib-components/overlays/Modal.vue

@@ -81,10 +81,10 @@ const updateModelValue = (value: boolean) => {
           leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
         >
           <div
-            class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle w-full"
+            class="inline-block align-bottom bg-white rounded-xy text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:rounded-xy-lg w-full"
             :class="wide ? 'sm:max-w-6xl' : 'sm:max-w-2xl'"
           >
-            <div class="block absolute top-0 right-0 pt-4 pr-4">
+            <div class="block absolute top-0 right-0 pt-4 pr-4 sm:pt-6 sm:pr-8">
               <button
                 type="button"
                 class="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
@@ -94,7 +94,7 @@ const updateModelValue = (value: boolean) => {
                 <XIcon class="h-6 w-6" aria-hidden="true" />
               </button>
             </div>
-            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+            <div class="bg-white px-4 pt-5 pb-4 sm:p-8 sm:pb-6">
               <div class="mt-3 sm:mt-0 sm:text-left">
                 <DialogTitle
                   as="h3"
@@ -108,7 +108,7 @@ const updateModelValue = (value: boolean) => {
             </div>
             <div
               v-if="submitText"
-              class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"
+              class="bg-gray-50 px-4 py-3 sm:py-4 sm:px-8 sm:flex sm:flex-row-reverse"
             >
               <button
                 type="button"
@@ -121,7 +121,7 @@ const updateModelValue = (value: boolean) => {
               <button
                 ref="cancelButtonRef"
                 type="button"
-                class="xy-btn-white mt-3 w-full sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+                class="xy-btn-neutral mt-3 w-full sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                 @click="updateModelValue(false)"
               >
                 Cancel

package/src/lib-components/overlays/Popover/PopoverContent.vue

@@ -1,7 +1,7 @@
 <template>
   <!--styling wrapper - top level element will merge attrs for class overrides -->
   <div
-    class="w-full max-w-xs bg-white rounded-md p-2 border border-gray-100 shadow-md"
+    class="w-full max-w-xs bg-white rounded-xy p-2 border border-gray-100 shadow-md"
   >
     <slot></slot>
   </div>

package/src/lib-components/overlays/Tooltip.vue

@@ -36,7 +36,7 @@ const hoverPopover = (e: MouseEvent, open: boolean): void => {
 
 <template>
   <Popover :position="position" :as="as">
-    <template #button="{ open, close }: { open: boolean, close: () => void }">
+    <template #button="{ open, close }: { open: boolean; close: () => void }">
       <div
         class="leading-none relative w-4 h-4"
         @mouseover="hoverPopover($event, open)"
@@ -51,7 +51,7 @@ const hoverPopover = (e: MouseEvent, open: boolean): void => {
     </template>
     <template #default="{ close }: { close: () => void }">
       <div
-        class="sm:min-w-max bg-white rounded-md px-3 py-2 border border-gray-100 drop-shadow-md text-xs text-gray-900 leading-snug font-medium"
+        class="sm:min-w-max bg-white rounded-xy px-3.5 py-2.5 border border-gray-100 drop-shadow-md text-xs text-gray-900 leading-snug font-medium"
         @mouseover.prevent="popoverHover = true"
         @mouseleave.prevent="closePopover(close)"
       >

package/types/components.d.ts

@@ -6,7 +6,7 @@ import { TreesComponents } from "./lib-components"
  * import GlobalComponents from "@xy-planning-network/trees/types/components"
  * in the project.
  */
-declare module "@vue/runtime-core" {
+declare module "vue" {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
   interface GlobalComponents extends TreesComponents {}
 }

package/types/lib-components/index.d.ts

@@ -22,6 +22,8 @@ import { default as DynamicTable } from "./lists/DynamicTable.vue";
 import { default as Tabs } from "./navigation/Tabs.vue";
 import { default as Toggle } from "./forms/Toggle.vue";
 import { default as XYSpinner } from "./indicators/XYSpinner.vue";
+import { default as ProgressCircles } from "./indicators/ProgressCircles.vue";
+import { default as ProgressCirclesLabeled } from "./indicators/ProgressCirclesLabeled.vue";
 import { default as BaseInput } from "./forms/BaseInput.vue";
 import { default as Checkbox } from "./forms/Checkbox.vue";
 import { default as DateRangePicker } from "./forms/DateRangePicker.vue";
@@ -37,7 +39,7 @@ import { default as Select } from "./forms/Select.vue";
 import { default as TextArea } from "./forms/TextArea.vue";
 import { default as YesOrNoRadio } from "./forms/YesOrNoRadio.vue";
 export { ActionsDropdown, Cards, ContentModal, DateFilter, DetailList, DownloadCell, Flash, InlineAlert, Modal, SidebarLayout, Slideover, StackedLayout, Popover, PopoverContent, PopoverPosition, // Type export
-Paginator, Spinner, DataTable, Steps, DynamicTable, Tabs, Toggle, Tooltip, BaseInput, Checkbox, DateRangePicker, DateTime, InputError, InputHelp, InputLabel, FieldsetLegend, MultiCheckboxes, Radio, RadioCards, Select, TextArea, YesOrNoRadio, XYSpinner, };
+Paginator, Spinner, DataTable, Steps, DynamicTable, Tabs, Toggle, Tooltip, BaseInput, Checkbox, DateRangePicker, DateTime, InputError, InputHelp, InputLabel, FieldsetLegend, MultiCheckboxes, Radio, RadioCards, Select, TextArea, YesOrNoRadio, XYSpinner, ProgressCircles, ProgressCirclesLabeled, };
 /**
  * declare global component types for App.use(Trees)
  */
@@ -78,4 +80,6 @@ export interface TreesComponents {
     TextArea: typeof TextArea;
     YesOrNoRadio: typeof YesOrNoRadio;
     XYSpinner: typeof XYSpinner;
+    ProgressCircles: typeof ProgressCircles;
+    ProgressCirclesLabeled: typeof ProgressCirclesLabeled;
 }

package/types/lib-components/indicators/ProgressCircles.vue.d.ts

@@ -0,0 +1,31 @@
+interface Step {
+    name: string;
+    description?: string;
+}
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    /**
+     * current sets the "current" step using an index of the steps prop
+     * to show all steps in an "incomplete" state set step to -1
+     * to show all steps in an "complete" state set step to a value >= steps.length
+     */
+    current: number;
+    steps: Step[];
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    /**
+     * current sets the "current" step using an index of the steps prop
+     * to show all steps in an "incomplete" state set step to -1
+     * to show all steps in an "complete" state set step to a value >= steps.length
+     */
+    current: number;
+    steps: Step[];
+}>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/types/lib-components/indicators/ProgressCirclesLabeled.vue.d.ts

@@ -0,0 +1,31 @@
+interface Step {
+    name: string;
+    description?: string;
+}
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    /**
+     * current sets the "current" step using an index of the steps prop
+     * to show all steps in an "incomplete" state set step to -1
+     * to show all steps in an "complete" state set step to a value >= steps.length
+     */
+    current: number;
+    steps: Step[];
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    /**
+     * current sets the "current" step using an index of the steps prop
+     * to show all steps in an "incomplete" state set step to -1
+     * to show all steps in an "complete" state set step to a value >= steps.length
+     */
+    current: number;
+    steps: Step[];
+}>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/types/lib-components/layout/SidebarLayout.vue.d.ts

@@ -16,6 +16,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>>, {
     activeUrl: string;
 }, {}>, {
+    "sidebar-nav"?(_: {}): any;
+    "sidebar-nav"?(_: {}): any;
     "sidebar-bottom"?(_: {}): any;
     "sidebar-bottom"?(_: {}): any;
     header?(_: {}): any;

package/config/theme/fontFamily.ts

@@ -1,5 +0,0 @@
-import defaultTheme from "tailwindcss/defaultTheme"
-export default {
-  display: ["Work Sans", ...defaultTheme.fontFamily.sans],
-  sans: ["Inter var", ...defaultTheme.fontFamily.sans],
-}