@xy-planning-network/trees 0.4.0-rc-7 → 0.4.0-rc-8

package/README.md

@@ -59,44 +59,34 @@ npm i @xy-planning-network/trees mitt
 
 This example installs all components of Trees, which may not be necessary for all projects. Assumes you have a vue 3 project with tailwind created.
 
-**Establish global types for VueBus and Flashes in global.d.ts**
-
-```ts
-// global.d.ts
-
-import { Emitter } from "mitt";
-
-declare global {
-  interface Window {
-    Flashes: Array<{ message: string }>;
-    VueBus: Emitter;
-  }
-}
-```
-
 **Initialize trees components in main.ts**
 
 ```ts
 // main.ts
-import Vue, { createApp } from "vue";
-import Mitt from "mitt";
-import Trees from "@xy-planning-network/trees";
-import HelloWorld from "@/components/HelloWorld.vue";
+
+// include the type interfaces for Window and GlobalComponents
+/// <reference types="@xy-planning-network/trees/types/global" />
+/// <reference types="@xy-planning-network/trees/types/components" />
+
+import Vue, { createApp } from "vue"
+import Mitt from "mitt"
+import Trees from "@xy-planning-network/trees"
+import HelloWorld from "@/components/HelloWorld.vue"
 
 // import your project's main stylesheet
-import "@/main.css";
+import "@/main.css"
 
 // initialize the app
-const app = createApp(HelloWorld);
+const app = createApp(HelloWorld)
 
 // initialize mitt on VueBus
-window.VueBus = mitt();
+window.VueBus = mitt()
 
 // use all of Trees as a vue plugin
-app.use(Trees);
+app.use(Trees)
 
 // mount the application
-app.mount("#vue-app");
+app.mount("#vue-app")
 ```
 
 **Initialize styles in main.css**
@@ -129,10 +119,10 @@ Note you may need a deep merge utility depending on the depth of properties you
 
 ```js
 /* eslint-disable */
-const treesConfig = require("@xy-planning-network/trees/config/tailwind.config");
+const treesConfig = require("@xy-planning-network/trees/config/tailwind.config")
 module.exports = {
   ...treesConfig,
   mode: "jit", // Optional
   purge: [...treesConfig.purge, ...["./src/**/*.vue"]],
-};
+}
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.4.0-rc-7",
+  "version": "0.4.0-rc-8",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",
@@ -16,17 +16,17 @@
   "unpkg": "dist/trees.umd.js",
   "types": "types/entry.d.ts",
   "sideEffects": [
-    "*.css",
-    "*.vue"
+    "*.css"
   ],
   "scripts": {
     "dev": "vite",
-    "build": "vite build && vue-tsc -p src && npm run copy:types && tsc-alias -p src/tsconfig.json",
+    "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/types/**/*.d.ts ./types",
+    "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",

package/types/components.d.ts

@@ -1,7 +1,11 @@
 import { TreesComponents } from "./lib-components"
 
-export default TreesComponents
-
+/**
+ * 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 { DefineComponent, RenderFunction } from "vue";
+export interface Item {
+    icon?: DefineComponent<unknown, unknown, any> | 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/types/composables/table.d.ts

@@ -0,0 +1,32 @@
+import { ComponentPublicInstance, DefineComponent } 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>;
+    items?: Array<MenuItem>;
+    sort?: string;
+}
+export interface Dynamic {
+    currentUser: User;
+    columns: Array<Column>;
+    dateSearch?: boolean;
+    defaultSort?: string;
+    defaultSortDirection?: string;
+    refreshTrigger: number;
+    reloadTrigger?: number;
+    search?: boolean;
+    url: string;
+}
+export interface MenuItem {
+    label: string;
+    event: string;
+    show?(propsData: any, currentUser: User): boolean;
+}
+export interface Static {
+    currentUser: User;
+    columns: Array<Column>;
+    items: Record<string, unknown>[];
+}

package/types/composables/user.d.ts

@@ -0,0 +1,9 @@
+export interface User {
+    accountID: number;
+    accountOwner: boolean;
+    archived: boolean;
+    id: number;
+    email: string;
+    name: string;
+}
+export default User;

package/types/global.d.ts

@@ -1,7 +1,10 @@
 import { Emitter } from "mitt"
 
-export {}
-
+/**
+ * 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 }>

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

@@ -29,14 +29,6 @@ import { default as YesOrNoRadio } from "./forms/YesOrNoRadio.vue";
 export { ActionsDropdown, Cards, ContentModal, DateFilter, DetailList, DownloadCell, Flash, Modal, SidebarLayout, Slideover, StackedLayout, Paginator, Spinner, StaticTable, Steps, Table, Tabs, Toggle, BaseInput, Checkbox, DateRangePicker, InputHelp, InputLabel, MultiCheckboxes, Radio, Select, TextArea, YesOrNoRadio, };
 /**
  * declare global component types for App.use(Trees)
- *
- * apply to project with the following
-import { TreesComponents } from "@xy-planning-network/trees"
-
-declare module "@vue/runtime-core" {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  interface GlobalComponents extends TreesComponents {}
-}
  */
 export interface TreesComponents {
     ActionsDropdown: typeof ActionsDropdown;

package/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/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/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/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/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/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/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/types/lib-components/overlays/Flash.vue.d.ts

@@ -1,6 +1,2 @@
-export interface Flash {
-    type?: string;
-    message: string;
-}
 declare const _default: import("vue").DefineComponent<{}, () => void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
 export default _default;

package/types/index.d.ts

@@ -1,3 +0,0 @@
-export * as NavTypes from "./nav"
-export * as TableTypes from "./table"
-export * as UserTypes from "./users"

package/types/nav.d.ts

@@ -1,8 +0,0 @@
-import { DefineComponent, RenderFunction } from "vue"
-
-export interface Item {
-  icon?: DefineComponent<unknown, unknown, any> | RenderFunction
-  name: string
-  openInTab?: boolean
-  url: string
-}

package/types/table.d.ts

@@ -1,36 +0,0 @@
-import { ComponentPublicInstance, DefineComponent } from "vue"
-import User from "./users"
-
-export interface Column {
-  display: string
-  class?: string
-  key?: string
-  presenter?(row: any, instance: ComponentPublicInstance): any
-  component?: DefineComponent<unknown, unknown, any>
-  items?: Array<MenuItem>
-  sort?: string
-}
-
-export interface Dynamic {
-  currentUser: User
-  columns: Array<Column>
-  dateSearch?: boolean
-  defaultSort?: string
-  defaultSortDirection?: string
-  refreshTrigger: number
-  reloadTrigger?: number
-  search?: boolean
-  url: string
-}
-
-export interface MenuItem {
-  label: string
-  event: string
-  show?(propsData: any, currentUser: User): boolean
-}
-
-export interface Static {
-  currentUser: User
-  columns: Array<Column>
-  items: Record<string, unknown>[]
-}

package/types/users.d.ts

@@ -1,10 +0,0 @@
-export interface User {
-  accountID: number
-  accountOwner: boolean
-  archived: boolean
-  id: number
-  email: string
-  name: string
-}
-
-export default User