@xy-planning-network/trees 0.3.2 → 0.4.0-rc-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (82) hide show
  1. package/README.md +3 -8
  2. package/config/tailwind.config.js +4 -7
  3. package/config/theme/colors.js +3 -75
  4. package/config/theme/fontFamily.js +1 -1
  5. package/config/theme/index.js +0 -3
  6. package/dist/style.css +1 -0
  7. package/dist/trees.es.js +8399 -0
  8. package/dist/trees.umd.js +10 -0
  9. package/dist/types/api/base.d.ts +12 -0
  10. package/dist/types/entry.d.ts +8 -0
  11. package/dist/types/helpers/Uniques.d.ts +4 -0
  12. package/dist/types/lib-components/forms/BaseInput.vue.d.ts +38 -0
  13. package/dist/types/lib-components/forms/Checkbox.vue.d.ts +22 -0
  14. package/dist/types/lib-components/forms/DateRangePicker.vue.d.ts +45 -0
  15. package/dist/types/lib-components/forms/InputHelp.vue.d.ts +22 -0
  16. package/dist/types/lib-components/forms/InputLabel.vue.d.ts +22 -0
  17. package/dist/types/lib-components/forms/MultiCheckboxes.vue.d.ts +34 -0
  18. package/dist/types/lib-components/forms/Radio.vue.d.ts +44 -0
  19. package/dist/types/lib-components/forms/Select.vue.d.ts +58 -0
  20. package/dist/types/lib-components/forms/TextArea.vue.d.ts +32 -0
  21. package/dist/types/lib-components/forms/Toggle.vue.d.ts +17 -0
  22. package/dist/types/lib-components/forms/YesOrNoRadio.vue.d.ts +33 -0
  23. package/dist/types/lib-components/index.d.ts +64 -0
  24. package/dist/types/lib-components/layout/DateFilter.vue.d.ts +34 -0
  25. package/dist/types/lib-components/layout/SidebarLayout.vue.d.ts +33 -0
  26. package/dist/types/lib-components/layout/StackedLayout.vue.d.ts +40 -0
  27. package/dist/types/lib-components/lists/Cards.vue.d.ts +23 -0
  28. package/dist/types/lib-components/lists/DetailList.vue.d.ts +34 -0
  29. package/dist/types/lib-components/lists/DownloadCell.vue.d.ts +20 -0
  30. package/dist/types/lib-components/lists/StaticTable.vue.d.ts +18 -0
  31. package/dist/types/lib-components/lists/Table.vue.d.ts +29 -0
  32. package/dist/types/lib-components/navigation/ActionsDropdown.vue.d.ts +26 -0
  33. package/dist/types/lib-components/navigation/Paginator.vue.d.ts +27 -0
  34. package/dist/types/lib-components/navigation/Steps.vue.d.ts +53 -0
  35. package/dist/types/lib-components/navigation/Tabs.vue.d.ts +36 -0
  36. package/dist/types/lib-components/overlays/ContentModal.vue.d.ts +24 -0
  37. package/dist/types/lib-components/overlays/Flash.vue.d.ts +6 -0
  38. package/dist/types/lib-components/overlays/Modal.vue.d.ts +51 -0
  39. package/dist/types/lib-components/overlays/Slideover.vue.d.ts +30 -0
  40. package/dist/types/lib-components/overlays/Spinner.vue.d.ts +2 -0
  41. package/dist/types/types/nav.d.ts +7 -0
  42. package/dist/types/types/table.d.ts +32 -0
  43. package/dist/types/types/users.d.ts +9 -0
  44. package/package.json +47 -64
  45. package/src/index.css +24 -36
  46. package/src/lib-components/forms/BaseInput.vue +51 -45
  47. package/src/lib-components/forms/Checkbox.vue +31 -22
  48. package/src/lib-components/forms/DateRangePicker.vue +56 -56
  49. package/src/lib-components/forms/InputHelp.vue +12 -9
  50. package/src/lib-components/forms/InputLabel.vue +12 -9
  51. package/src/lib-components/forms/MultiCheckboxes.vue +48 -44
  52. package/src/lib-components/forms/Radio.vue +34 -24
  53. package/src/lib-components/forms/Select.vue +40 -46
  54. package/src/lib-components/forms/TextArea.vue +23 -17
  55. package/src/lib-components/forms/Toggle.vue +7 -11
  56. package/src/lib-components/forms/YesOrNoRadio.vue +31 -27
  57. package/src/lib-components/layout/DateFilter.vue +31 -30
  58. package/src/lib-components/layout/SidebarLayout.vue +36 -51
  59. package/src/lib-components/layout/StackedLayout.vue +32 -55
  60. package/src/lib-components/lists/Cards.vue +8 -12
  61. package/src/lib-components/lists/DetailList.vue +83 -83
  62. package/src/lib-components/lists/DownloadCell.vue +8 -12
  63. package/src/lib-components/lists/StaticTable.vue +30 -23
  64. package/src/lib-components/lists/Table.vue +146 -122
  65. package/src/lib-components/navigation/ActionsDropdown.vue +39 -43
  66. package/src/lib-components/navigation/Paginator.vue +65 -80
  67. package/src/lib-components/navigation/Steps.vue +38 -27
  68. package/src/lib-components/navigation/Tabs.vue +64 -60
  69. package/src/lib-components/overlays/ContentModal.vue +27 -31
  70. package/src/lib-components/overlays/Flash.vue +85 -70
  71. package/src/lib-components/overlays/Modal.vue +39 -42
  72. package/src/lib-components/overlays/Slideover.vue +30 -35
  73. package/src/lib-components/overlays/Spinner.vue +51 -51
  74. package/src/types/env.d.ts +18 -0
  75. package/src/types/global.d.ts +10 -0
  76. package/config/theme/fontSize.js +0 -16
  77. package/config/theme/fontWeight.js +0 -27
  78. package/config/theme/spacing.js +0 -3
  79. package/dist/trees.esm.js +0 -10994
  80. package/dist/trees.min.js +0 -7
  81. package/dist/trees.ssr.js +0 -11669
  82. package/trees.d.ts +0 -43
@@ -0,0 +1,53 @@
1
+ declare const _default: import("vue").DefineComponent<{
2
+ hideActions: {
3
+ type: import("vue").PropType<boolean>;
4
+ } & {
5
+ default: boolean;
6
+ };
7
+ hidePrevious: {
8
+ type: import("vue").PropType<boolean>;
9
+ } & {
10
+ default: boolean;
11
+ };
12
+ nextText: {
13
+ type: import("vue").PropType<string>;
14
+ } & {
15
+ default: string;
16
+ };
17
+ previousText: {
18
+ type: import("vue").PropType<string>;
19
+ } & {
20
+ default: string;
21
+ };
22
+ step: {
23
+ type: import("vue").PropType<number>;
24
+ required: true;
25
+ };
26
+ total: {
27
+ type: import("vue").PropType<number>;
28
+ required: true;
29
+ };
30
+ }, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("next" | "previous")[], "next" | "previous", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
31
+ hideActions?: unknown;
32
+ hidePrevious?: unknown;
33
+ nextText?: unknown;
34
+ previousText?: unknown;
35
+ step?: unknown;
36
+ total?: unknown;
37
+ } & {
38
+ total: number;
39
+ step: number;
40
+ hideActions: boolean;
41
+ hidePrevious: boolean;
42
+ nextText: string;
43
+ previousText: string;
44
+ } & {}> & {
45
+ onNext?: ((...args: any[]) => any) | undefined;
46
+ onPrevious?: ((...args: any[]) => any) | undefined;
47
+ }, {
48
+ hideActions: boolean;
49
+ hidePrevious: boolean;
50
+ nextText: string;
51
+ previousText: string;
52
+ }>;
53
+ export default _default;
@@ -0,0 +1,36 @@
1
+ declare const _default: import("vue").DefineComponent<{
2
+ modelValue: {
3
+ type: import("vue").PropType<string>;
4
+ required: true;
5
+ };
6
+ pillDesign: {
7
+ type: import("vue").PropType<boolean>;
8
+ } & {
9
+ default: boolean;
10
+ };
11
+ tabs: {
12
+ type: import("vue").PropType<{
13
+ label: string;
14
+ value: string;
15
+ }[]>;
16
+ required: true;
17
+ };
18
+ }, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
19
+ "update:modelValue": (val: string) => void;
20
+ }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
21
+ modelValue?: unknown;
22
+ pillDesign?: unknown;
23
+ tabs?: unknown;
24
+ } & {
25
+ modelValue: string;
26
+ pillDesign: boolean;
27
+ tabs: {
28
+ label: string;
29
+ value: string;
30
+ }[];
31
+ } & {}> & {
32
+ "onUpdate:modelValue"?: ((val: string) => any) | undefined;
33
+ }, {
34
+ pillDesign: boolean;
35
+ }>;
36
+ export default _default;
@@ -0,0 +1,24 @@
1
+ declare const _default: import("vue").DefineComponent<{
2
+ modelValue: {
3
+ type: import("vue").PropType<boolean>;
4
+ required: true;
5
+ };
6
+ title: {
7
+ type: import("vue").PropType<string>;
8
+ } & {
9
+ default: string;
10
+ };
11
+ }, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
12
+ "update:modelValue": (val: boolean) => void;
13
+ }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
14
+ modelValue?: unknown;
15
+ title?: unknown;
16
+ } & {
17
+ title: string;
18
+ modelValue: boolean;
19
+ } & {}> & {
20
+ "onUpdate:modelValue"?: ((val: boolean) => any) | undefined;
21
+ }, {
22
+ title: string;
23
+ }>;
24
+ export default _default;
@@ -0,0 +1,6 @@
1
+ export interface Flash {
2
+ type?: string;
3
+ message: string;
4
+ }
5
+ 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<{} & {} & {}>, {}>;
6
+ export default _default;
@@ -0,0 +1,51 @@
1
+ declare const _default: import("vue").DefineComponent<{
2
+ destructive: {
3
+ type: import("vue").PropType<boolean>;
4
+ } & {
5
+ default: boolean;
6
+ };
7
+ disabled: {
8
+ type: import("vue").PropType<boolean>;
9
+ } & {
10
+ default: boolean;
11
+ };
12
+ modelValue: {
13
+ type: import("vue").PropType<boolean>;
14
+ required: true;
15
+ };
16
+ submitText: {
17
+ type: import("vue").PropType<string>;
18
+ } & {
19
+ default: string;
20
+ };
21
+ title: {
22
+ type: import("vue").PropType<string>;
23
+ } & {
24
+ default: string;
25
+ };
26
+ }, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
27
+ submit: () => void;
28
+ } & {
29
+ "update:modelValue": (val: boolean) => void;
30
+ }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
31
+ destructive?: unknown;
32
+ disabled?: unknown;
33
+ modelValue?: unknown;
34
+ submitText?: unknown;
35
+ title?: unknown;
36
+ } & {
37
+ title: string;
38
+ disabled: boolean;
39
+ modelValue: boolean;
40
+ destructive: boolean;
41
+ submitText: string;
42
+ } & {}> & {
43
+ onSubmit?: (() => any) | undefined;
44
+ "onUpdate:modelValue"?: ((val: boolean) => any) | undefined;
45
+ }, {
46
+ title: string;
47
+ disabled: boolean;
48
+ destructive: boolean;
49
+ submitText: string;
50
+ }>;
51
+ export default _default;
@@ -0,0 +1,30 @@
1
+ declare const _default: import("vue").DefineComponent<__VLS_DefinePropsToOptions<{
2
+ header: string;
3
+ description: string;
4
+ modelValue: boolean;
5
+ }>, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
6
+ close: (val: boolean) => void;
7
+ } & {
8
+ "update:modelValue": (val: boolean) => void;
9
+ }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
10
+ header?: unknown;
11
+ description?: unknown;
12
+ modelValue?: unknown;
13
+ } & {
14
+ description: string;
15
+ header: string;
16
+ modelValue: boolean;
17
+ } & {}> & {
18
+ "onUpdate:modelValue"?: ((val: boolean) => any) | undefined;
19
+ onClose?: ((val: boolean) => any) | undefined;
20
+ }, {}>;
21
+ export default _default;
22
+ declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
23
+ declare type __VLS_DefinePropsToOptions<T> = {
24
+ [K in keyof T]-?: {} extends Pick<T, K> ? {
25
+ type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
26
+ } : {
27
+ type: import('vue').PropType<T[K]>;
28
+ required: true;
29
+ };
30
+ };
@@ -0,0 +1,2 @@
1
+ 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<{} & {} & {}>, {}>;
2
+ export default _default;
@@ -0,0 +1,7 @@
1
+ import { DefineComponent } from "vue";
2
+ export interface Item {
3
+ icon?: DefineComponent<unknown, unknown, any>;
4
+ name: string;
5
+ openInTab?: boolean;
6
+ url: string;
7
+ }
@@ -0,0 +1,32 @@
1
+ import { ComponentPublicInstance, DefineComponent } from "vue";
2
+ import User from "./users";
3
+ export interface Column {
4
+ display: string;
5
+ class?: string;
6
+ key?: string;
7
+ presenter?(row: any, instance: ComponentPublicInstance): any;
8
+ component?: DefineComponent<unknown, unknown, any>;
9
+ items?: Array<MenuItem>;
10
+ sort?: string;
11
+ }
12
+ export interface Dynamic {
13
+ currentUser: User;
14
+ columns: Array<Column>;
15
+ dateSearch?: boolean;
16
+ defaultSort?: string;
17
+ defaultSortDirection?: string;
18
+ refreshTrigger: number;
19
+ reloadTrigger?: number;
20
+ search?: boolean;
21
+ url: string;
22
+ }
23
+ export interface MenuItem {
24
+ label: string;
25
+ event: string;
26
+ show?(propsData: any, currentUser: User): boolean;
27
+ }
28
+ export interface Static {
29
+ currentUser: User;
30
+ columns: Array<Column>;
31
+ items: Record<string, unknown>[];
32
+ }
@@ -0,0 +1,9 @@
1
+ export interface User {
2
+ accountID: number;
3
+ accountOwner: boolean;
4
+ archived: boolean;
5
+ id: number;
6
+ email: string;
7
+ name: string;
8
+ }
9
+ export default User;
package/package.json CHANGED
@@ -1,89 +1,72 @@
1
1
  {
2
2
  "name": "@xy-planning-network/trees",
3
- "version": "0.3.2",
3
+ "version": "0.4.0-rc-1",
4
4
  "description": "",
5
5
  "license": "MIT",
6
6
  "repository": "github:xy-planning-network/trees",
7
- "main": "dist/trees.ssr.js",
8
- "browser": "dist/trees.esm.js",
9
- "module": "dist/trees.esm.js",
10
- "style": "src/index.css",
11
- "unpkg": "dist/trees.min.js",
12
- "types": "trees.d.ts",
13
7
  "files": [
14
8
  "config/*",
15
9
  "dist/*",
16
- "trees.d.ts",
10
+ "src/**/*.d.ts",
17
11
  "src/**/*.vue",
18
12
  "src/**/*.css"
19
13
  ],
14
+ "main": "dist/trees.es.js",
15
+ "module": "dist/trees.es.js",
16
+ "style": "src/index.css",
17
+ "unpkg": "dist/trees.umd.js",
18
+ "types": "dist/types/entry.d.ts",
20
19
  "sideEffects": [
21
20
  "*.css",
22
21
  "*.vue"
23
22
  ],
24
23
  "scripts": {
25
- "serve": "vue-cli-service serve dev/serve.ts",
26
- "build:deploy": "vue-cli-service build dev/serve.ts",
27
- "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
28
- "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
29
- "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
30
- "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
31
- },
32
- "dependencies": {
33
- "@headlessui/vue": "^1.3.0",
34
- "@heroicons/vue": "^1.0.1",
35
- "axios": "^0.21.1",
36
- "flatpickr": "^4.6.9"
24
+ "dev": "vite",
25
+ "build": "vite build && vue-tsc -d --emitDeclarationOnly && tsc-alias",
26
+ "build:docs": "vue-tsc --noEmit && vite build --config vite.docs.config.ts",
27
+ "lint": "eslint --ext .js,.ts,.vue src",
28
+ "lint:fix": "eslint --fix --ext .js,.ts,.vue src dev && prettier -w -u src dev",
29
+ "preview": "vite preview --config vite.docs.config.ts"
37
30
  },
38
31
  "devDependencies": {
39
- "@babel/core": "^7.12.10",
40
- "@babel/preset-env": "^7.12.11",
41
- "@babel/preset-typescript": "^7.12.7",
42
- "@rollup/plugin-alias": "^3.1.1",
43
- "@rollup/plugin-babel": "^5.2.2",
44
- "@rollup/plugin-commonjs": "^17.0.0",
45
- "@rollup/plugin-eslint": "^8.0.1",
46
- "@rollup/plugin-node-resolve": "^11.0.1",
47
- "@rollup/plugin-replace": "^2.3.4",
48
- "@tailwindcss/aspect-ratio": "^0.2.0",
49
- "@tailwindcss/forms": "^0.3.2",
50
- "@tailwindcss/typography": "^0.4.0",
51
- "@typescript-eslint/eslint-plugin": "^4.22.0",
52
- "@typescript-eslint/parser": "^4.22.0",
53
- "@vue/cli-plugin-babel": "~5.0.0-beta.2",
54
- "@vue/cli-plugin-eslint": "~5.0.0-beta.2",
55
- "@vue/cli-plugin-typescript": "~5.0.0-beta.2",
56
- "@vue/cli-service": "~5.0.0-beta.2",
57
- "@vue/compiler-sfc": "^3.0.5",
32
+ "@types/node": "^16.11.13",
33
+ "@typescript-eslint/eslint-plugin": "^5.7.0",
34
+ "@typescript-eslint/parser": "^5.7.0",
35
+ "@vitejs/plugin-vue": "^2.0.0",
58
36
  "@vue/eslint-config-prettier": "^6.0.0",
59
- "@vue/eslint-config-typescript": "^7.0.0",
60
- "autoprefixer": "^10.2.6",
61
- "cross-env": "^7.0.3",
62
- "eslint": "^7.25.0",
63
- "eslint-plugin-prettier": "^3.4.0",
64
- "eslint-plugin-vue": "^7.9.0",
65
- "minimist": "^1.2.5",
37
+ "@vue/eslint-config-typescript": "^9.1.0",
38
+ "autoprefixer": "^10.4.0",
39
+ "deepmerge": "^4.2.2",
40
+ "eslint": "^8.4.1",
41
+ "eslint-config-prettier": "^8.3.0",
42
+ "eslint-import-resolver-typescript": "^2.5.0",
43
+ "eslint-plugin-import": "^2.25.3",
44
+ "eslint-plugin-prettier": "^3.4.1",
45
+ "eslint-plugin-vue": "^8.2.0",
66
46
  "mitt": "^2.1.0",
67
- "postcss": "^8.3.0",
68
- "prettier": "^2.2.1",
69
- "rollup": "^2.36.1",
70
- "rollup-plugin-postcss": "^4.0.0",
71
- "rollup-plugin-terser": "^7.0.2",
72
- "rollup-plugin-vue": "^6.0.0",
73
- "tailwindcss": "^2.2.0",
74
- "typescript": "~4.1.5",
75
- "vue": "^3.0.5",
76
- "vue-class-component": "^8.0.0-0",
77
- "vue-property-decorator": "^10.0.0-rc.3"
47
+ "postcss": "^8.4.5",
48
+ "tailwindcss": "^2.2.19",
49
+ "tsc-alias": "^1.5.0",
50
+ "typescript": "^4.4.4",
51
+ "vite": "^2.7.2",
52
+ "vite-plugin-environment": "^1.0.1",
53
+ "vue-tsc": "^0.29.8"
54
+ },
55
+ "dependencies": {
56
+ "@headlessui/vue": "^1.4.2",
57
+ "@heroicons/vue": "^1.0.5",
58
+ "axios": "^0.21.4",
59
+ "flatpickr": "^4.6.9"
78
60
  },
79
61
  "peerDependencies": {
80
- "@tailwindcss/aspect-ratio": "0.x",
81
- "@tailwindcss/forms": "0.x",
82
- "@tailwindcss/typography": "0.x",
83
- "autoprefixer": "10.x",
84
- "postcss": "8.x",
85
- "tailwindcss": "2.2.x",
86
- "vue": "^3.x"
62
+ "@tailwindcss/aspect-ratio": "^0.3.0",
63
+ "@tailwindcss/forms": "^0.3.4",
64
+ "@tailwindcss/line-clamp": "^0.3.0",
65
+ "@tailwindcss/typography": "^0.3.1",
66
+ "autoprefixer": "^10.4.0",
67
+ "postcss": "^8.4.5",
68
+ "tailwindcss": "^2.2.19",
69
+ "vue": "^3.2.0"
87
70
  },
88
71
  "engines": {
89
72
  "node": ">=12"
package/src/index.css CHANGED
@@ -9,38 +9,32 @@
9
9
 
10
10
  /* general body copy */
11
11
  body {
12
- @apply text-base text-gray-900;
12
+ @apply text-base leading-normal text-gray-900;
13
13
  }
14
14
 
15
15
  /* Headers */
16
- h1,
17
- .h1 {
18
- @apply text-3xl font-semibold text-gray-900;
16
+ h1 {
17
+ @apply text-3xl leading-9 font-semibold;
19
18
  }
20
19
 
21
- h2,
22
- .h2 {
23
- @apply text-2xl font-semibold text-gray-900;
20
+ h2 {
21
+ @apply text-2xl leading-7 font-semibold;
24
22
  }
25
23
 
26
- h3,
27
- .h3 {
28
- @apply text-lg font-semibold text-gray-900;
24
+ h3 {
25
+ @apply text-lg leading-6 font-semibold;
29
26
  }
30
27
 
31
- h4,
32
- .h4 {
33
- @apply text-base font-semibold text-gray-900;
28
+ h4 {
29
+ @apply text-base leading-5 font-semibold;
34
30
  }
35
31
 
36
- h5,
37
- .h5 {
38
- @apply text-sm font-semibold text-gray-900;
32
+ h5 {
33
+ @apply text-sm leading-5 font-semibold;
39
34
  }
40
35
 
41
- h6,
42
- .h6 {
43
- @apply text-xxs font-semibold text-gray-900;
36
+ h6 {
37
+ @apply text-xs leading-4 font-semibold;
44
38
  }
45
39
 
46
40
  /* Forms: here for backward compatibility. Use <BaseInput> instead. */
@@ -53,11 +47,6 @@
53
47
  textarea {
54
48
  @apply mt-1 shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-600 rounded-md;
55
49
  }
56
-
57
- /* Paragraphs -- TODO: think about removing this in favor of .prose */
58
- p {
59
- @apply text-sm text-gray-900;
60
- }
61
50
  }
62
51
 
63
52
  @layer components {
@@ -97,49 +86,48 @@
97
86
 
98
87
  /* Header classes */
99
88
  .h1 {
100
- @apply text-3xl font-semibold text-gray-900;
89
+ @apply text-3xl leading-9 font-semibold;
101
90
  }
102
91
 
103
92
  .h2 {
104
- @apply text-2xl font-semibold text-gray-900;
93
+ @apply text-2xl leading-7 font-semibold;
105
94
  }
106
95
 
107
96
  .h3 {
108
- @apply text-lg font-semibold text-gray-900;
97
+ @apply text-lg leading-6 font-semibold;
109
98
  }
110
99
 
111
100
  .h4 {
112
- @apply text-base font-semibold text-gray-900;
101
+ @apply text-base leading-5 font-semibold;
113
102
  }
114
103
 
115
104
  .h5 {
116
- @apply text-sm font-semibold text-gray-900;
105
+ @apply text-sm leading-5 font-semibold;
117
106
  }
118
107
 
119
108
  .h6 {
120
- @apply text-xxs font-semibold text-gray-900;
109
+ @apply text-xs leading-4 font-semibold;
121
110
  }
122
111
 
123
112
  .xy-h1-extra-flair {
124
- @apply text-3xl font-bold text-gray-900 leading-9 tracking-tight sm:text-4xl sm:leading-10;
113
+ @apply text-3xl font-bold leading-9 tracking-tight sm:text-4xl sm:leading-10;
125
114
  }
126
115
 
127
116
  .xy-h1-responsive {
128
- @apply text-2xl font-semibold lg:text-3xl;
117
+ @apply text-2xl leading-7 font-semibold lg:text-3xl lg:leading-9;
129
118
  }
130
119
 
131
120
  .xy-h2-responsive {
132
- @apply text-lg font-semibold lg:text-2xl;
121
+ @apply text-lg leading-6 font-semibold lg:text-2xl lg:leading-7;
133
122
  }
134
123
 
135
124
  .xy-h3-responsive {
136
- @apply text-base font-semibold lg:text-lg;
125
+ @apply text-base leading-5 font-semibold lg:text-lg lg:leading-6;
137
126
  }
138
127
 
139
128
  /* Link classes */
140
129
  .xy-link {
141
- /* TODO: determine a visited state and implement in .prose */
142
- @apply font-semibold underline text-blue-500 hover:text-blue-600;
130
+ @apply font-semibold underline text-xy-blue hover:text-blue-700;
143
131
  }
144
132
  }
145
133
 
@@ -1,3 +1,53 @@
1
+ <script setup lang="ts">
2
+ import Uniques from "@/helpers/Uniques"
3
+ import InputLabel from "./InputLabel.vue"
4
+ import InputHelp from "./InputHelp.vue"
5
+ import { computed, useAttrs } from "vue"
6
+
7
+ const attrs = useAttrs()
8
+ const props = withDefaults(
9
+ defineProps<{
10
+ type: string
11
+ help?: string
12
+ label?: string
13
+ modelValue?: string | number
14
+ }>(),
15
+ {
16
+ help: "",
17
+ label: "",
18
+ modelValue: "",
19
+ }
20
+ )
21
+
22
+ const emit = defineEmits(["update:modelValue"])
23
+
24
+ const uuid = (attrs.id as string) || Uniques.CreateIdAttribute()
25
+
26
+ /**
27
+ * common text based inputs
28
+ */
29
+ const textInputTypes = [
30
+ "date",
31
+ "datetime-local",
32
+ "email",
33
+ "month",
34
+ "number",
35
+ "password",
36
+ "search",
37
+ "tel",
38
+ "text",
39
+ "time",
40
+ "url",
41
+ "week",
42
+ ]
43
+
44
+ /**
45
+ * determine if this input is a common text based input
46
+ */
47
+ const isTextType = computed((): boolean => {
48
+ return typeof props.type === "string" && textInputTypes.includes(props.type)
49
+ })
50
+ </script>
1
51
  <template>
2
52
  <InputLabel
3
53
  class="block"
@@ -26,52 +76,8 @@
26
76
  :placeholder="label"
27
77
  :type="type"
28
78
  :value="modelValue"
29
- @input="$emit('update:modelValue', $event.target.value)"
79
+ @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
30
80
  v-bind="$attrs"
31
81
  />
32
82
  <InputHelp :id="`${uuid}-help`" :text="help"></InputHelp>
33
83
  </template>
34
-
35
- <script lang="ts">
36
- import Uniques from "@/helpers/Uniques";
37
- import { Options, Prop, Vue } from "vue-property-decorator";
38
- import InputLabel from "./InputLabel.vue";
39
- import InputHelp from "./InputHelp.vue";
40
-
41
- @Options({ name: "BaseInput", components: { InputLabel, InputHelp } })
42
- export default class BaseInput extends Vue {
43
- @Prop({ type: String, required: true }) type?: string;
44
- @Prop({ type: String, required: false }) label?: string;
45
- @Prop({ type: String, required: false }) help?: string;
46
- @Prop({ type: [String, Number], required: false }) modelValue?: string;
47
-
48
- uuid = (this.$attrs.id as string) || Uniques.CreateIdAttribute();
49
-
50
- /**
51
- * common text based inputs
52
- */
53
- textInputTypes = [
54
- "date",
55
- "datetime-local",
56
- "email",
57
- "month",
58
- "number",
59
- "password",
60
- "search",
61
- "tel",
62
- "text",
63
- "time",
64
- "url",
65
- "week",
66
- ];
67
-
68
- /**
69
- * determine if this input is a common text based input
70
- */
71
- get isTextType(): boolean {
72
- return (
73
- typeof this.type === "string" && this.textInputTypes.includes(this.type)
74
- );
75
- }
76
- }
77
- </script>