@xy-planning-network/trees 0.4.0-rc-5 → 0.4.0

package/package.json

@@ -1,32 +1,34 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.4.0-rc-5",
+  "version": "0.4.0",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",
   "files": [
     "config/*",
     "dist/*",
-    "src/**/*.d.ts",
+    "src/**/*.css",
     "src/**/*.vue",
-    "src/**/*.css"
+    "types/*"
   ],
   "main": "dist/trees.es.js",
   "module": "dist/trees.es.js",
   "style": "src/index.css",
   "unpkg": "dist/trees.umd.js",
-  "types": "dist/types/entry.d.ts",
+  "types": "types/entry.d.ts",
   "sideEffects": [
     "*.css",
     "*.vue"
   ],
   "scripts": {
     "dev": "vite",
-    "build": "vite build && vue-tsc -d --emitDeclarationOnly && tsc-alias",
-    "build:docs": "vue-tsc --noEmit && vite build --config vite.docs.config.ts",
+    "build": "vite build && vue-tsc -p src --emitDeclarationOnly && npm run copy:types && tsc-alias -p src/tsconfig.json",
+    "build:docs": "vue-tsc -p dev --noEmit && vite build --config vite.docs.config.ts",
+    "copy:types": "copyfiles -f ./src/*.d.ts ./types",
     "lint": "eslint --ext .js,.ts,.vue src",
     "lint:fix": "eslint --fix --ext .js,.ts,.vue src dev && prettier -w -u src dev",
-    "preview": "vite preview --config vite.docs.config.ts"
+    "preview": "vite preview --config vite.docs.config.ts",
+    "typecheck": "vue-tsc -p src --noEmit"
   },
   "devDependencies": {
     "@types/node": "^16.11.13",
@@ -36,6 +38,7 @@
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^9.1.0",
     "autoprefixer": "^10.4.0",
+    "copyfiles": "^2.4.1",
     "deepmerge": "^4.2.2",
     "eslint": "^8.4.1",
     "eslint-config-prettier": "^8.3.0",

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

@@ -1,12 +1,8 @@
-<script lang="ts">
-export interface DateRange {
-  minDate: number
-  maxDate: number
-}
-</script>
 <script setup lang="ts">
+import { DateRange } from "@/composables/date"
 import { ref } from "vue"
 import DateRangePicker from "../forms/DateRangePicker.vue"
+import Select from "@/lib-components/forms/Select.vue"
 
 const props = defineProps<{
   dateRange: DateRange
@@ -14,6 +10,11 @@ const props = defineProps<{
   title: string
 }>()
 const dateRange = ref<DateRange>(props.dateRange)
+const sortDir = ref<string>(props.sortDir)
+const sortOptions = [
+  { label: "Newest-Oldest", value: "DESC" },
+  { label: "Oldest-Newest", value: "ASC" },
+]
 
 const emits = defineEmits<{
   (e: "sort-dir-changed", val: string): void
@@ -38,17 +39,14 @@ const dateRangeChanged = (dateRange: DateRange) => {
       </h1>
     </div>
     <div class="mt-4 flex md:mt-0 md:ml-4">
-      <select
-        @change="sortDirChanged(($event.target as HTMLInputElement).value)"
-        class="block w-full border border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-      >
-        <option value="DESC">Newest-Oldest</option>
-        <option value="ASC">Oldest-Newest</option>
-      </select>
-
+      <Select
+        v-model="sortDir"
+        :options="sortOptions"
+        @update:modelValue="sortDirChanged"
+      ></Select>
       <DateRangePicker
-        :modelValue="dateRange"
-        @update:modelValue="dateRangeChanged($event)"
+        v-model="dateRange"
+        @update:modelValue="dateRangeChanged"
         class="ml-3"
       />
     </div>

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

@@ -13,7 +13,7 @@ import {
 } from "@headlessui/vue"
 import { MenuAlt2Icon, XIcon } from "@heroicons/vue/outline"
 import { CogIcon } from "@heroicons/vue/solid"
-import * as NavTypes from "../../types/nav"
+import * as NavTypes from "@/composables/nav"
 import { ref } from "vue"
 
 const props = withDefaults(

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

@@ -11,8 +11,8 @@ import {
   MenuItems,
 } from "@headlessui/vue"
 import { MenuIcon, UserCircleIcon, XIcon } from "@heroicons/vue/outline"
-import * as NavTypes from "../../types/nav"
-import User from "../../types/users"
+import * as NavTypes from "@/composables/nav"
+import User from "@/composables/user"
 
 const props = withDefaults(
   defineProps<{
@@ -132,6 +132,7 @@ const isActive = (url: string): boolean => {
             <div class="ml-3">
               <div
                 class="text-base font-medium text-gray-800"
+                v-if="currentUser.name"
                 v-text="currentUser.name"
               ></div>
               <div

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ComponentPublicInstance, getCurrentInstance } from "vue"
-import * as TableTypes from "../../types/table"
+import * as TableTypes from "@/composables/table"
 
 defineProps<{
   tableData: TableTypes.Static

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

@@ -10,7 +10,7 @@ import {
 import DateRangePicker from "../forms/DateRangePicker.vue"
 import Paginator from "../navigation/Paginator.vue"
 import BaseAPI from "../../api/base"
-import * as TableTypes from "../../types/table"
+import * as TableTypes from "@/composables/table"
 
 const props = withDefaults(
   defineProps<{

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

@@ -2,8 +2,8 @@
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue"
 import { DotsVerticalIcon } from "@heroicons/vue/solid"
 import { onMounted, ref } from "vue"
-import * as TableTypes from "../../types/table"
-import User from "../../types/users"
+import * as TableTypes from "@/composables/table"
+import User from "@/composables/user"
 
 const props = defineProps<{
   currentUser: User

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

@@ -1,13 +1,5 @@
-<script lang="ts">
-// TODO: explore this further as a pattern for exporting commonly used types
-export interface Pagination {
-  page: number
-  perPage: number
-  totalItems: number
-  totalPages: number
-}
-</script>
 <script setup lang="ts">
+import { Pagination } from "@/composables/nav"
 import { computed, ref } from "vue"
 
 const props = defineProps<{

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

@@ -1,10 +1,5 @@
-<script lang="ts">
-export interface Flash {
-  type?: string
-  message: string
-}
-</script>
 <script setup lang="ts">
+import { Flash } from "@/composables/overlay"
 import { onMounted, ref } from "vue"
 
 // TODO: spk this might benefit from the composition api to avoid race conditions where a flash is requested before the component is mounted.

package/types/components.d.ts

@@ -0,0 +1,12 @@
+import { TreesComponents } from "./lib-components"
+
+/**
+ * When using App.use(Trees) include a
+ * /// <reference types="@xy-planning-network/trees/types/components" /> or
+ * import GlobalComponents from "@xy-planning-network/trees/types/components"
+ * in the project.
+ */
+declare module "@vue/runtime-core" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface GlobalComponents extends TreesComponents {}
+}

package/types/composables/date.d.ts

@@ -0,0 +1,4 @@
+export interface DateRange {
+    minDate: number;
+    maxDate: number;
+}

package/types/composables/nav.d.ts

@@ -0,0 +1,13 @@
+import { Component, RenderFunction } from "vue";
+export interface Item {
+    icon?: Component | RenderFunction;
+    name: string;
+    openInTab?: boolean;
+    url: string;
+}
+export interface Pagination {
+    page: number;
+    perPage: number;
+    totalItems: number;
+    totalPages: number;
+}

package/types/composables/overlay.d.ts

@@ -0,0 +1,4 @@
+export interface Flash {
+    type?: string;
+    message: string;
+}

package/{dist/types/types → types/composables}/table.d.ts

@@ -1,11 +1,11 @@
-import { ComponentPublicInstance, DefineComponent } from "vue";
-import User from "./users";
+import { Component, ComponentPublicInstance } from "vue";
+import User from "../composables/user";
 export interface Column {
     display: string;
     class?: string;
     key?: string;
     presenter?(row: any, instance: ComponentPublicInstance): any;
-    component?: DefineComponent<unknown, unknown, any>;
+    component?: Component;
     items?: Array<MenuItem>;
     sort?: string;
 }

package/types/composables/user.d.ts

@@ -0,0 +1,6 @@
+export interface User {
+    id: number;
+    email: string;
+    name?: string;
+}
+export default User;

package/{dist/types → types}/entry.d.ts

@@ -1,8 +1,6 @@
 import { Plugin } from "vue";
 import BaseAPI from "./api/base";
-import * as TableTypes from "./types/table";
-import * as NavTypes from "./types/nav";
 declare const install: Exclude<Plugin["install"], undefined>;
 export default install;
 export * from "./lib-components/index";
-export { BaseAPI, NavTypes, TableTypes };
+export { BaseAPI };

package/types/global.d.ts

@@ -0,0 +1,13 @@
+import { Emitter } from "mitt"
+
+/**
+ * When using window.VueBus.emit("Flash-show-generic-error", "support@trees.com") include
+ * /// <reference types="@xy-planning-network/trees/types/global" />
+ * in the project.
+ */
+declare global {
+  interface Window {
+    Flashes: Array<{ type?: string; message: string }>
+    VueBus: Emitter
+  }
+}

package/{dist/types → types}/lib-components/forms/BaseInput.vue.d.ts

@@ -25,14 +25,14 @@ declare const _default: import("vue").DefineComponent<{
     modelValue?: unknown;
 } & {
     type: string;
+    modelValue: string | number;
     label: string;
     help: string;
-    modelValue: string | number;
 } & {}> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    modelValue: string | number;
     label: string;
     help: string;
-    modelValue: string | number;
 }>;
 export default _default;

package/{dist/types → types}/lib-components/forms/Checkbox.vue.d.ts

@@ -12,8 +12,8 @@ declare const _default: import("vue").DefineComponent<{
     label?: unknown;
     modelValue?: unknown;
 } & {
-    label: string;
     modelValue: boolean;
+    label: string;
 } & {}> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {

package/{dist/types → types}/lib-components/forms/DateRangePicker.vue.d.ts

@@ -28,12 +28,12 @@ declare const _default: import("vue").DefineComponent<{
     label?: unknown;
     help?: unknown;
 } & {
-    label: string;
-    help: string;
     modelValue: {
         minDate: number;
         maxDate: number;
     };
+    label: string;
+    help: string;
     startDate: number;
 } & {}> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;

package/{dist/types → types}/lib-components/forms/InputHelp.vue.d.ts

@@ -13,10 +13,10 @@ declare const _default: import("vue").DefineComponent<{
     tag?: unknown;
     text?: unknown;
 } & {
-    text: string;
     tag: string;
-} & {}>, {
     text: string;
+} & {}>, {
     tag: string;
+    text: string;
 }>;
 export default _default;

package/{dist/types → types}/lib-components/forms/MultiCheckboxes.vue.d.ts

@@ -20,12 +20,12 @@ declare const _default: import("vue").DefineComponent<{
     legend?: unknown;
     modelValue?: unknown;
 } & {
-    legend: string;
+    modelValue: string[];
     options: {
         label: string;
         value: string;
     }[];
-    modelValue: string[];
+    legend: string;
 } & {}> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {

package/{dist/types → types}/lib-components/forms/Radio.vue.d.ts

@@ -27,18 +27,18 @@ declare const _default: import("vue").DefineComponent<{
     modelValue?: unknown;
     vertical?: unknown;
 } & {
-    legend: string;
+    modelValue: string;
     options: {
         label: string;
         value: string;
     }[];
+    legend: string;
     vertical: boolean;
-    modelValue: string;
 } & {}> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    modelValue: string;
     legend: string;
     vertical: boolean;
-    modelValue: string;
 }>;
 export default _default;

package/{dist/types → types}/lib-components/forms/Select.vue.d.ts

@@ -38,21 +38,21 @@ declare const _default: import("vue").DefineComponent<{
     options?: unknown;
     modelValue?: unknown;
 } & {
+    modelValue: string | number | undefined;
     label: string;
+    help: string;
+    design: "standard" | "compressed";
+    placeholder: string;
     options: {
         label: string;
         value: string | number;
     }[];
-    help: string;
-    placeholder: string;
-    modelValue: string | number | undefined;
-    design: "standard" | "compressed";
 } & {}> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     label: string;
     help: string;
-    placeholder: string;
     design: "standard" | "compressed";
+    placeholder: string;
 }>;
 export default _default;

package/{dist/types → types}/lib-components/forms/TextArea.vue.d.ts

@@ -19,14 +19,14 @@ declare const _default: import("vue").DefineComponent<{
     label?: unknown;
     modelValue?: unknown;
 } & {
+    modelValue: string | number;
     label: string;
     help: string;
-    modelValue: string | number;
 } & {}> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    modelValue: string | number;
     label: string;
     help: string;
-    modelValue: string | number;
 }>;
 export default _default;

package/{dist/types → types}/lib-components/forms/YesOrNoRadio.vue.d.ts

@@ -19,15 +19,15 @@ declare const _default: import("vue").DefineComponent<{
     legend?: unknown;
     name?: unknown;
 } & {
-    name: string;
     legend: string;
+    name: string;
 } & {
     modelValue?: boolean | undefined;
 }> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    name: string;
-    legend: string;
     modelValue: boolean;
+    legend: string;
+    name: string;
 }>;
 export default _default;

package/{dist/types → types}/lib-components/index.d.ts

@@ -30,35 +30,33 @@ export { ActionsDropdown, Cards, ContentModal, DateFilter, DetailList, DownloadC
 /**
  * declare global component types for App.use(Trees)
  */
-declare module "@vue/runtime-core" {
-    interface GlobalComponents {
-        ActionsDropdown: typeof ActionsDropdown;
-        Cards: typeof Cards;
-        ContentModal: typeof ContentModal;
-        DateFilter: typeof DateFilter;
-        DetailList: typeof DetailList;
-        DownloadCell: typeof DownloadCell;
-        Flash: typeof Flash;
-        Modal: typeof Modal;
-        SidebarLayout: typeof SidebarLayout;
-        Slideover: typeof Slideover;
-        StackedLayout: typeof StackedLayout;
-        Paginator: typeof Paginator;
-        Spinner: typeof Spinner;
-        StaticTable: typeof StaticTable;
-        Steps: typeof Steps;
-        Table: typeof Table;
-        Tabs: typeof Tabs;
-        Toggle: typeof Toggle;
-        BaseInput: typeof BaseInput;
-        Checkbox: typeof Checkbox;
-        DateRangePicker: typeof DateRangePicker;
-        InputHelp: typeof InputHelp;
-        InputLabel: typeof InputLabel;
-        MultiCheckboxes: typeof MultiCheckboxes;
-        Radio: typeof Radio;
-        Select: typeof Select;
-        TextArea: typeof TextArea;
-        YesOrNoRadio: typeof YesOrNoRadio;
-    }
+export interface TreesComponents {
+    ActionsDropdown: typeof ActionsDropdown;
+    Cards: typeof Cards;
+    ContentModal: typeof ContentModal;
+    DateFilter: typeof DateFilter;
+    DetailList: typeof DetailList;
+    DownloadCell: typeof DownloadCell;
+    Flash: typeof Flash;
+    Modal: typeof Modal;
+    SidebarLayout: typeof SidebarLayout;
+    Slideover: typeof Slideover;
+    StackedLayout: typeof StackedLayout;
+    Paginator: typeof Paginator;
+    Spinner: typeof Spinner;
+    StaticTable: typeof StaticTable;
+    Steps: typeof Steps;
+    Table: typeof Table;
+    Tabs: typeof Tabs;
+    Toggle: typeof Toggle;
+    BaseInput: typeof BaseInput;
+    Checkbox: typeof Checkbox;
+    DateRangePicker: typeof DateRangePicker;
+    InputHelp: typeof InputHelp;
+    InputLabel: typeof InputLabel;
+    MultiCheckboxes: typeof MultiCheckboxes;
+    Radio: typeof Radio;
+    Select: typeof Select;
+    TextArea: typeof TextArea;
+    YesOrNoRadio: typeof YesOrNoRadio;
 }

package/{dist/types → types}/lib-components/layout/DateFilter.vue.d.ts

@@ -1,7 +1,4 @@
-export interface DateRange {
-    minDate: number;
-    maxDate: number;
-}
+import { DateRange } from "../../composables/date";
 declare const _default: import("vue").DefineComponent<__VLS_DefinePropsToOptions<{
     dateRange: DateRange;
     sortDir: string;

package/{dist/types → types}/lib-components/layout/SidebarLayout.vue.d.ts

@@ -1,4 +1,4 @@
-import * as NavTypes from "../../types/nav";
+import * as NavTypes from "../../composables/nav";
 declare const _default: import("vue").DefineComponent<{
     activeURL: {
         type: import("vue").PropType<string>;

package/{dist/types → types}/lib-components/layout/StackedLayout.vue.d.ts

@@ -1,5 +1,5 @@
-import * as NavTypes from "../../types/nav";
-import User from "../../types/users";
+import * as NavTypes from "../../composables/nav";
+import User from "../../composables/user";
 declare const _default: import("vue").DefineComponent<{
     activeURL: {
         type: import("vue").PropType<string>;

package/{dist/types → types}/lib-components/lists/DetailList.vue.d.ts

@@ -23,8 +23,8 @@ declare const _default: import("vue").DefineComponent<{
     title?: unknown;
     url?: unknown;
 } & {
-    url: string;
     title: string;
+    url: string;
     refreshTrigger: number;
     reloadTrigger: number;
 } & {}>, {

package/{dist/types → types}/lib-components/lists/StaticTable.vue.d.ts

@@ -1,4 +1,4 @@
-import * as TableTypes from "../../types/table";
+import * as TableTypes from "../../composables/table";
 declare const _default: import("vue").DefineComponent<__VLS_DefinePropsToOptions<{
     tableData: TableTypes.Static;
 }>, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{

package/{dist/types → types}/lib-components/lists/Table.vue.d.ts

@@ -1,4 +1,4 @@
-import * as TableTypes from "../../types/table";
+import * as TableTypes from "../../composables/table";
 declare const _default: import("vue").DefineComponent<{
     clickable: {
         type: import("vue").PropType<boolean>;

package/{dist/types → types}/lib-components/navigation/ActionsDropdown.vue.d.ts

@@ -1,6 +1,6 @@
 import { MenuItem } from "@headlessui/vue";
-import * as TableTypes from "../../types/table";
-import User from "../../types/users";
+import * as TableTypes from "../../composables/table";
+import User from "../../composables/user";
 declare const _default: import("vue").DefineComponent<__VLS_DefinePropsToOptions<{
     currentUser: User;
     items: TableTypes.MenuItem[];

package/{dist/types → types}/lib-components/navigation/Paginator.vue.d.ts

@@ -1,9 +1,4 @@
-export interface Pagination {
-    page: number;
-    perPage: number;
-    totalItems: number;
-    totalPages: number;
-}
+import { Pagination } from "../../composables/nav";
 declare const _default: import("vue").DefineComponent<__VLS_DefinePropsToOptions<{
     modelValue: Pagination;
 }>, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/{dist/types → types}/lib-components/navigation/Steps.vue.d.ts

@@ -35,12 +35,12 @@ declare const _default: import("vue").DefineComponent<{
     step?: unknown;
     total?: unknown;
 } & {
-    total: number;
-    step: number;
     hideActions: boolean;
     hidePrevious: boolean;
     nextText: string;
     previousText: string;
+    step: number;
+    total: number;
 } & {}> & {
     onNext?: ((...args: any[]) => any) | undefined;
     onPrevious?: ((...args: any[]) => any) | undefined;

package/{dist/types → types}/lib-components/overlays/ContentModal.vue.d.ts

@@ -14,8 +14,8 @@ declare const _default: import("vue").DefineComponent<{
     modelValue?: unknown;
     title?: unknown;
 } & {
-    title: string;
     modelValue: boolean;
+    title: string;
 } & {}> & {
     "onUpdate:modelValue"?: ((val: boolean) => any) | undefined;
 }, {