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

package/dist/types/lib-components/navigation/Tabs.vue.d.ts

@@ -0,0 +1,36 @@
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    pillDesign: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    tabs: {
+        type: import("vue").PropType<{
+            label: string;
+            value: string;
+        }[]>;
+        required: true;
+    };
+}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (val: string) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    modelValue?: unknown;
+    pillDesign?: unknown;
+    tabs?: unknown;
+} & {
+    modelValue: string;
+    pillDesign: boolean;
+    tabs: {
+        label: string;
+        value: string;
+    }[];
+} & {}> & {
+    "onUpdate:modelValue"?: ((val: string) => any) | undefined;
+}, {
+    pillDesign: boolean;
+}>;
+export default _default;

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

@@ -0,0 +1,24 @@
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+    title: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (val: boolean) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    modelValue?: unknown;
+    title?: unknown;
+} & {
+    title: string;
+    modelValue: boolean;
+} & {}> & {
+    "onUpdate:modelValue"?: ((val: boolean) => any) | undefined;
+}, {
+    title: string;
+}>;
+export default _default;

package/dist/types/lib-components/overlays/Flash.vue.d.ts

@@ -0,0 +1,6 @@
+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/dist/types/lib-components/overlays/Modal.vue.d.ts

@@ -0,0 +1,51 @@
+declare const _default: import("vue").DefineComponent<{
+    destructive: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    modelValue: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+    submitText: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    title: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: () => void;
+} & {
+    "update:modelValue": (val: boolean) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    destructive?: unknown;
+    disabled?: unknown;
+    modelValue?: unknown;
+    submitText?: unknown;
+    title?: unknown;
+} & {
+    title: string;
+    disabled: boolean;
+    modelValue: boolean;
+    destructive: boolean;
+    submitText: string;
+} & {}> & {
+    onSubmit?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((val: boolean) => any) | undefined;
+}, {
+    title: string;
+    disabled: boolean;
+    destructive: boolean;
+    submitText: string;
+}>;
+export default _default;

package/dist/types/lib-components/overlays/Slideover.vue.d.ts

@@ -0,0 +1,30 @@
+declare const _default: import("vue").DefineComponent<__VLS_DefinePropsToOptions<{
+    header: string;
+    description: string;
+    modelValue: boolean;
+}>, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (val: boolean) => void;
+} & {
+    "update:modelValue": (val: boolean) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    header?: unknown;
+    description?: unknown;
+    modelValue?: unknown;
+} & {
+    description: string;
+    header: string;
+    modelValue: boolean;
+} & {}> & {
+    "onUpdate:modelValue"?: ((val: boolean) => any) | undefined;
+    onClose?: ((val: boolean) => any) | undefined;
+}, {}>;
+export default _default;
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+declare type __VLS_DefinePropsToOptions<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/dist/types/lib-components/overlays/Spinner.vue.d.ts

@@ -0,0 +1,2 @@
+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/dist/types/types/nav.d.ts

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

package/dist/types/types/table.d.ts

@@ -0,0 +1,32 @@
+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/dist/types/types/users.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/package.json

@@ -1,89 +1,72 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.3.1",
+  "version": "0.4.0-rc",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",
-  "main": "dist/trees.ssr.js",
-  "browser": "dist/trees.esm.js",
-  "module": "dist/trees.esm.js",
-  "style": "src/index.css",
-  "unpkg": "dist/trees.min.js",
-  "types": "trees.d.ts",
   "files": [
     "config/*",
     "dist/*",
-    "trees.d.ts",
+    "src/**/*.d.ts",
     "src/**/*.vue",
     "src/**/*.css"
   ],
+  "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",
   "sideEffects": [
     "*.css",
     "*.vue"
   ],
   "scripts": {
-    "serve": "vue-cli-service serve dev/serve.ts",
-    "build:deploy": "vue-cli-service build dev/serve.ts",
-    "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
-    "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
-    "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
-    "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
-  },
-  "dependencies": {
-    "@headlessui/vue": "^1.3.0",
-    "@heroicons/vue": "^1.0.1",
-    "axios": "^0.21.1",
-    "flatpickr": "^4.6.9"
+    "dev": "vite",
+    "build": "vite build && vue-tsc -d --emitDeclarationOnly && tsc-alias",
+    "build:docs": "vue-tsc --noEmit && vite build --config vite.docs.config.ts",
+    "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"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/preset-typescript": "^7.12.7",
-    "@rollup/plugin-alias": "^3.1.1",
-    "@rollup/plugin-babel": "^5.2.2",
-    "@rollup/plugin-commonjs": "^17.0.0",
-    "@rollup/plugin-eslint": "^8.0.1",
-    "@rollup/plugin-node-resolve": "^11.0.1",
-    "@rollup/plugin-replace": "^2.3.4",
-    "@tailwindcss/aspect-ratio": "^0.2.0",
-    "@tailwindcss/forms": "^0.3.2",
-    "@tailwindcss/typography": "^0.4.0",
-    "@typescript-eslint/eslint-plugin": "^4.22.0",
-    "@typescript-eslint/parser": "^4.22.0",
-    "@vue/cli-plugin-babel": "~5.0.0-beta.2",
-    "@vue/cli-plugin-eslint": "~5.0.0-beta.2",
-    "@vue/cli-plugin-typescript": "~5.0.0-beta.2",
-    "@vue/cli-service": "~5.0.0-beta.2",
-    "@vue/compiler-sfc": "^3.0.5",
+    "@types/node": "^16.11.13",
+    "@typescript-eslint/eslint-plugin": "^5.7.0",
+    "@typescript-eslint/parser": "^5.7.0",
+    "@vitejs/plugin-vue": "^2.0.0",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^7.0.0",
-    "autoprefixer": "^10.2.6",
-    "cross-env": "^7.0.3",
-    "eslint": "^7.25.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-vue": "^7.9.0",
-    "minimist": "^1.2.5",
+    "@vue/eslint-config-typescript": "^9.1.0",
+    "autoprefixer": "^10.4.0",
+    "deepmerge": "^4.2.2",
+    "eslint": "^8.4.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-import-resolver-typescript": "^2.5.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-prettier": "^3.4.1",
+    "eslint-plugin-vue": "^8.2.0",
     "mitt": "^2.1.0",
-    "postcss": "^8.3.0",
-    "prettier": "^2.2.1",
-    "rollup": "^2.36.1",
-    "rollup-plugin-postcss": "^4.0.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-vue": "^6.0.0",
-    "tailwindcss": "^2.2.0",
-    "typescript": "~4.1.5",
-    "vue": "^3.0.5",
-    "vue-class-component": "^8.0.0-0",
-    "vue-property-decorator": "^10.0.0-rc.3"
+    "postcss": "^8.4.5",
+    "tailwindcss": "^2.2.19",
+    "tsc-alias": "^1.5.0",
+    "typescript": "^4.4.4",
+    "vite": "^2.7.2",
+    "vite-plugin-environment": "^1.0.1",
+    "vue-tsc": "^0.29.8"
+  },
+  "dependencies": {
+    "@headlessui/vue": "^1.4.2",
+    "@heroicons/vue": "^1.0.5",
+    "axios": "^0.21.4",
+    "flatpickr": "^4.6.9"
   },
   "peerDependencies": {
-    "@tailwindcss/aspect-ratio": "0.x",
-    "@tailwindcss/forms": "0.x",
-    "@tailwindcss/typography": "0.x",
-    "autoprefixer": "10.x",
-    "postcss": "8.x",
-    "tailwindcss": "2.2.x",
-    "vue": "^3.x"
+    "@tailwindcss/aspect-ratio": "^0.3.0",
+    "@tailwindcss/forms": "^0.3.4",
+    "@tailwindcss/line-clamp": "^0.3.0",
+    "@tailwindcss/typography": "^0.3.1",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.5",
+    "tailwindcss": "^2.2.19",
+    "vue": "^3.2.0"
   },
   "engines": {
     "node": ">=12"

package/src/index.css

@@ -9,38 +9,32 @@
 
   /* general body copy */
   body {
-    @apply text-base text-gray-900;
+    @apply text-base leading-normal text-gray-900;
   }
 
   /* Headers */
-  h1,
-  .h1 {
-    @apply text-3xl font-semibold text-gray-900;
+  h1 {
+    @apply text-3xl leading-9 font-semibold;
   }
 
-  h2,
-  .h2 {
-    @apply text-2xl font-semibold text-gray-900;
+  h2 {
+    @apply text-2xl leading-7 font-semibold;
   }
 
-  h3,
-  .h3 {
-    @apply text-lg font-semibold text-gray-900;
+  h3 {
+    @apply text-lg leading-6 font-semibold;
   }
 
-  h4,
-  .h4 {
-    @apply text-base font-semibold text-gray-900;
+  h4 {
+    @apply text-base leading-5 font-semibold;
   }
 
-  h5,
-  .h5 {
-    @apply text-sm font-semibold text-gray-900;
+  h5 {
+    @apply text-sm leading-5 font-semibold;
   }
 
-  h6,
-  .h6 {
-    @apply text-xxs font-semibold text-gray-900;
+  h6 {
+    @apply text-xs leading-4 font-semibold;
   }
 
   /* Forms: here for backward compatibility.  Use <BaseInput> instead. */
@@ -53,11 +47,6 @@
   textarea {
     @apply mt-1 shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-600 rounded-md;
   }
-
-  /* Paragraphs -- TODO: think about removing this in favor of .prose */
-  p {
-    @apply text-sm text-gray-900;
-  }
 }
 
 @layer components {
@@ -97,49 +86,48 @@
 
   /* Header classes */
   .h1 {
-    @apply text-3xl font-semibold text-gray-900;
+    @apply text-3xl leading-9 font-semibold;
   }
 
   .h2 {
-    @apply text-2xl font-semibold text-gray-900;
+    @apply text-2xl leading-7 font-semibold;
   }
 
   .h3 {
-    @apply text-lg font-semibold text-gray-900;
+    @apply text-lg leading-6 font-semibold;
   }
 
   .h4 {
-    @apply text-base font-semibold text-gray-900;
+    @apply text-base leading-5 font-semibold;
   }
 
   .h5 {
-    @apply text-sm font-semibold text-gray-900;
+    @apply text-sm leading-5 font-semibold;
   }
 
   .h6 {
-    @apply text-xxs font-semibold text-gray-900;
+    @apply text-xs leading-4 font-semibold;
   }
 
   .xy-h1-extra-flair {
-    @apply text-3xl font-bold text-gray-900 leading-9 tracking-tight sm:text-4xl sm:leading-10;
+    @apply text-3xl font-bold leading-9 tracking-tight sm:text-4xl sm:leading-10;
   }
 
   .xy-h1-responsive {
-    @apply text-2xl font-semibold lg:text-3xl;
+    @apply text-2xl leading-7 font-semibold lg:text-3xl lg:leading-9;
   }
 
   .xy-h2-responsive {
-    @apply text-lg font-semibold lg:text-2xl;
+    @apply text-lg leading-6 font-semibold lg:text-2xl lg:leading-7;
   }
 
   .xy-h3-responsive {
-    @apply text-base font-semibold lg:text-lg;
+    @apply text-base leading-5 font-semibold lg:text-lg lg:leading-6;
   }
 
   /* Link classes */
   .xy-link {
-    /* TODO: determine a visited state and implement in .prose */
-    @apply font-semibold underline text-blue-500 hover:text-blue-600;
+    @apply font-semibold underline text-xy-blue hover:text-blue-700;
   }
 }
 

package/src/lib-components/forms/BaseInput.vue

@@ -1,3 +1,53 @@
+<script setup lang="ts">
+import Uniques from "@/helpers/Uniques"
+import InputLabel from "./InputLabel.vue"
+import InputHelp from "./InputHelp.vue"
+import { computed, useAttrs } from "vue"
+
+const attrs = useAttrs()
+const props = withDefaults(
+  defineProps<{
+    type: string
+    help?: string
+    label?: string
+    modelValue?: string | number
+  }>(),
+  {
+    help: "",
+    label: "",
+    modelValue: "",
+  }
+)
+
+const emit = defineEmits(["update:modelValue"])
+
+const uuid = (attrs.id as string) || Uniques.CreateIdAttribute()
+
+/**
+ * common text based inputs
+ */
+const textInputTypes = [
+  "date",
+  "datetime-local",
+  "email",
+  "month",
+  "number",
+  "password",
+  "search",
+  "tel",
+  "text",
+  "time",
+  "url",
+  "week",
+]
+
+/**
+ * determine if this input is a common text based input
+ */
+const isTextType = computed((): boolean => {
+  return typeof props.type === "string" && textInputTypes.includes(props.type)
+})
+</script>
 <template>
   <InputLabel
     class="block"
@@ -26,52 +76,8 @@
     :placeholder="label"
     :type="type"
     :value="modelValue"
-    @input="$emit('update:modelValue', $event.target.value)"
+    @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
     v-bind="$attrs"
   />
   <InputHelp :id="`${uuid}-help`" :text="help"></InputHelp>
 </template>
-
-<script lang="ts">
-import Uniques from "@/helpers/Uniques";
-import { Options, Prop, Vue } from "vue-property-decorator";
-import InputLabel from "./InputLabel.vue";
-import InputHelp from "./InputHelp.vue";
-
-@Options({ name: "BaseInput", components: { InputLabel, InputHelp } })
-export default class BaseInput extends Vue {
-  @Prop({ type: String, required: true }) type?: string;
-  @Prop({ type: String, required: false }) label?: string;
-  @Prop({ type: String, required: false }) help?: string;
-  @Prop({ type: [String, Number], required: false }) modelValue?: string;
-
-  uuid = (this.$attrs.id as string) || Uniques.CreateIdAttribute();
-
-  /**
-   * common text based inputs
-   */
-  textInputTypes = [
-    "date",
-    "datetime-local",
-    "email",
-    "month",
-    "number",
-    "password",
-    "search",
-    "tel",
-    "text",
-    "time",
-    "url",
-    "week",
-  ];
-
-  /**
-   * determine if this input is a common text based input
-   */
-  get isTextType(): boolean {
-    return (
-      typeof this.type === "string" && this.textInputTypes.includes(this.type)
-    );
-  }
-}
-</script>

package/src/lib-components/forms/Checkbox.vue

@@ -1,6 +1,26 @@
+<script setup lang="ts">
+import InputLabel from "./InputLabel.vue"
+import Uniques from "@/helpers/Uniques"
+import { useAttrs } from "vue"
+
+// TODO: checkbox should support the help text prop - possibly as a tooltip
+// TODO: aria-labelledby may be superfluous here since the input is wrapped in a label
+withDefaults(
+  defineProps<{
+    label?: string
+    modelValue: boolean
+  }>(),
+  {
+    label: "",
+  }
+)
+const emits = defineEmits(["update:modelValue"])
+const attrs = useAttrs()
+const uuid = (attrs.id as string) || Uniques.CreateIdAttribute()
+</script>
 <template>
-  <div class="relative flex items-start">
-    <div class="h-5 flex items-center">
+  <div>
+    <label class="inline-flex items-center">
       <input
         :aria-labelledby="label ? `${uuid}-label` : undefined"
         :checked="modelValue"
@@ -10,28 +30,17 @@
         v-bind="{
           ...$attrs,
           onChange: ($event) => {
-            $emit('update:modelValue', $event.target.checked);
+            emits('update:modelValue', ($event.target as HTMLInputElement).checked)
           },
         }"
       />
-    </div>
-    <div class="ml-3 text-sm font-semibold leading-snug text-gray-900">
-      <label :id="`${uuid}-label`" :for="uuid" v-text="label"></label>
-    </div>
+      <InputLabel
+        class="ml-2"
+        :id="`${uuid}-label`"
+        :for="uuid"
+        :label="label"
+        tag="span"
+      ></InputLabel>
+    </label>
   </div>
 </template>
-
-<script lang="ts">
-import Uniques from "@/helpers/Uniques";
-import { Options, Prop, Vue } from "vue-property-decorator";
-
-@Options({ name: "Checkbox" })
-export default class Checkbox extends Vue {
-  // TODO: checkbox should support the help text prop like base input, and label should use the label component or possible support a legend prop
-  @Prop({ type: Boolean, required: false }) emphasis?: boolean;
-  @Prop({ type: String, required: false }) label?: string;
-  @Prop({ type: Boolean, required: true }) modelValue!: boolean;
-
-  uuid = (this.$attrs.id as string) || Uniques.CreateIdAttribute();
-}
-</script>