@xy-planning-network/trees 0.3.4 → 0.4.0-rc-3
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.
- package/dist/style.css +1 -0
- package/dist/trees.es.js +8399 -0
- package/dist/trees.umd.js +10 -0
- package/dist/types/api/base.d.ts +12 -0
- package/dist/types/entry.d.ts +8 -0
- package/dist/types/helpers/Uniques.d.ts +4 -0
- package/dist/types/lib-components/forms/BaseInput.vue.d.ts +38 -0
- package/dist/types/lib-components/forms/Checkbox.vue.d.ts +22 -0
- package/dist/types/lib-components/forms/DateRangePicker.vue.d.ts +45 -0
- package/dist/types/lib-components/forms/InputHelp.vue.d.ts +22 -0
- package/dist/types/lib-components/forms/InputLabel.vue.d.ts +22 -0
- package/dist/types/lib-components/forms/MultiCheckboxes.vue.d.ts +34 -0
- package/dist/types/lib-components/forms/Radio.vue.d.ts +44 -0
- package/dist/types/lib-components/forms/Select.vue.d.ts +58 -0
- package/dist/types/lib-components/forms/TextArea.vue.d.ts +32 -0
- package/dist/types/lib-components/forms/Toggle.vue.d.ts +17 -0
- package/dist/types/lib-components/forms/YesOrNoRadio.vue.d.ts +33 -0
- package/dist/types/lib-components/index.d.ts +64 -0
- package/dist/types/lib-components/layout/DateFilter.vue.d.ts +34 -0
- package/dist/types/lib-components/layout/SidebarLayout.vue.d.ts +33 -0
- package/dist/types/lib-components/layout/StackedLayout.vue.d.ts +40 -0
- package/dist/types/lib-components/lists/Cards.vue.d.ts +23 -0
- package/dist/types/lib-components/lists/DetailList.vue.d.ts +34 -0
- package/dist/types/lib-components/lists/DownloadCell.vue.d.ts +20 -0
- package/dist/types/lib-components/lists/StaticTable.vue.d.ts +18 -0
- package/dist/types/lib-components/lists/Table.vue.d.ts +29 -0
- package/dist/types/lib-components/navigation/ActionsDropdown.vue.d.ts +26 -0
- package/dist/types/lib-components/navigation/Paginator.vue.d.ts +27 -0
- package/dist/types/lib-components/navigation/Steps.vue.d.ts +53 -0
- package/dist/types/lib-components/navigation/Tabs.vue.d.ts +36 -0
- package/dist/types/lib-components/overlays/ContentModal.vue.d.ts +24 -0
- package/dist/types/lib-components/overlays/Flash.vue.d.ts +6 -0
- package/dist/types/lib-components/overlays/Modal.vue.d.ts +51 -0
- package/dist/types/lib-components/overlays/Slideover.vue.d.ts +30 -0
- package/dist/types/lib-components/overlays/Spinner.vue.d.ts +2 -0
- package/dist/types/types/nav.d.ts +7 -0
- package/dist/types/types/table.d.ts +32 -0
- package/dist/types/types/users.d.ts +9 -0
- package/package.json +47 -66
- package/src/lib-components/forms/BaseInput.vue +51 -45
- package/src/lib-components/forms/Checkbox.vue +31 -22
- package/src/lib-components/forms/DateRangePicker.vue +56 -56
- package/src/lib-components/forms/InputHelp.vue +12 -9
- package/src/lib-components/forms/InputLabel.vue +12 -9
- package/src/lib-components/forms/MultiCheckboxes.vue +48 -44
- package/src/lib-components/forms/Radio.vue +34 -24
- package/src/lib-components/forms/Select.vue +40 -46
- package/src/lib-components/forms/TextArea.vue +23 -17
- package/src/lib-components/forms/Toggle.vue +7 -11
- package/src/lib-components/forms/YesOrNoRadio.vue +31 -27
- package/src/lib-components/layout/DateFilter.vue +31 -30
- package/src/lib-components/layout/SidebarLayout.vue +36 -51
- package/src/lib-components/layout/StackedLayout.vue +32 -55
- package/src/lib-components/lists/Cards.vue +8 -12
- package/src/lib-components/lists/DetailList.vue +83 -83
- package/src/lib-components/lists/DownloadCell.vue +8 -12
- package/src/lib-components/lists/StaticTable.vue +30 -23
- package/src/lib-components/lists/Table.vue +146 -122
- package/src/lib-components/navigation/ActionsDropdown.vue +39 -43
- package/src/lib-components/navigation/Paginator.vue +65 -80
- package/src/lib-components/navigation/Steps.vue +38 -27
- package/src/lib-components/navigation/Tabs.vue +64 -60
- package/src/lib-components/overlays/ContentModal.vue +27 -31
- package/src/lib-components/overlays/Flash.vue +85 -70
- package/src/lib-components/overlays/Modal.vue +39 -42
- package/src/lib-components/overlays/Slideover.vue +30 -35
- package/src/lib-components/overlays/Spinner.vue +51 -51
- package/src/types/env.d.ts +18 -0
- package/src/types/global.d.ts +10 -0
- package/dist/trees.esm.js +0 -10994
- package/dist/trees.min.js +0 -7
- package/dist/trees.ssr.js +0 -11669
- 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,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
|
+
}
|
package/package.json
CHANGED
|
@@ -1,91 +1,72 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xy-planning-network/trees",
|
|
3
|
-
"version": "0.3
|
|
3
|
+
"version": "0.4.0-rc-3",
|
|
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
|
-
"
|
|
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
|
-
"
|
|
26
|
-
"build
|
|
27
|
-
"build": "
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
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
|
-
"@
|
|
40
|
-
"@
|
|
41
|
-
"@
|
|
42
|
-
"@
|
|
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/line-clamp": "^0.2.2",
|
|
51
|
-
"@tailwindcss/typography": "^0.4.0",
|
|
52
|
-
"@typescript-eslint/eslint-plugin": "^4.22.0",
|
|
53
|
-
"@typescript-eslint/parser": "^4.22.0",
|
|
54
|
-
"@vue/cli-plugin-babel": "~5.0.0-beta.2",
|
|
55
|
-
"@vue/cli-plugin-eslint": "~5.0.0-beta.2",
|
|
56
|
-
"@vue/cli-plugin-typescript": "~5.0.0-beta.2",
|
|
57
|
-
"@vue/cli-service": "~5.0.0-beta.2",
|
|
58
|
-
"@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",
|
|
59
36
|
"@vue/eslint-config-prettier": "^6.0.0",
|
|
60
|
-
"@vue/eslint-config-typescript": "^
|
|
61
|
-
"autoprefixer": "^10.
|
|
62
|
-
"
|
|
63
|
-
"eslint": "^
|
|
64
|
-
"eslint-
|
|
65
|
-
"eslint-
|
|
66
|
-
"
|
|
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",
|
|
67
46
|
"mitt": "^2.1.0",
|
|
68
|
-
"postcss": "^8.
|
|
69
|
-
"
|
|
70
|
-
"
|
|
71
|
-
"
|
|
72
|
-
"
|
|
73
|
-
"
|
|
74
|
-
"
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
"vue
|
|
78
|
-
"vue
|
|
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"
|
|
79
60
|
},
|
|
80
61
|
"peerDependencies": {
|
|
81
|
-
"@tailwindcss/aspect-ratio": "0.
|
|
82
|
-
"@tailwindcss/forms": "0.
|
|
83
|
-
"@tailwindcss/line-clamp": "^0.
|
|
84
|
-
"@tailwindcss/typography": "0.
|
|
85
|
-
"autoprefixer": "10.
|
|
86
|
-
"postcss": "8.
|
|
87
|
-
"tailwindcss": "2.2.
|
|
88
|
-
"vue": "^3.
|
|
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"
|
|
89
70
|
},
|
|
90
71
|
"engines": {
|
|
91
72
|
"node": ">=12"
|
|
@@ -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="
|
|
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>
|
|
@@ -1,6 +1,26 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import InputLabel from "./InputLabel.vue"
|
|
3
|
+
import Uniques from "@/helpers/Uniques"
|
|
4
|
+
import { useAttrs } from "vue"
|
|
5
|
+
|
|
6
|
+
// TODO: checkbox should support the help text prop - possibly as a tooltip
|
|
7
|
+
// TODO: aria-labelledby may be superfluous here since the input is wrapped in a label
|
|
8
|
+
withDefaults(
|
|
9
|
+
defineProps<{
|
|
10
|
+
label?: string
|
|
11
|
+
modelValue: boolean
|
|
12
|
+
}>(),
|
|
13
|
+
{
|
|
14
|
+
label: "",
|
|
15
|
+
}
|
|
16
|
+
)
|
|
17
|
+
const emits = defineEmits(["update:modelValue"])
|
|
18
|
+
const attrs = useAttrs()
|
|
19
|
+
const uuid = (attrs.id as string) || Uniques.CreateIdAttribute()
|
|
20
|
+
</script>
|
|
1
21
|
<template>
|
|
2
|
-
<div
|
|
3
|
-
<
|
|
22
|
+
<div>
|
|
23
|
+
<label class="inline-flex items-center">
|
|
4
24
|
<input
|
|
5
25
|
:aria-labelledby="label ? `${uuid}-label` : undefined"
|
|
6
26
|
:checked="modelValue"
|
|
@@ -10,28 +30,17 @@
|
|
|
10
30
|
v-bind="{
|
|
11
31
|
...$attrs,
|
|
12
32
|
onChange: ($event) => {
|
|
13
|
-
|
|
33
|
+
emits('update:modelValue', ($event.target as HTMLInputElement).checked)
|
|
14
34
|
},
|
|
15
35
|
}"
|
|
16
36
|
/>
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
37
|
+
<InputLabel
|
|
38
|
+
class="ml-2"
|
|
39
|
+
:id="`${uuid}-label`"
|
|
40
|
+
:for="uuid"
|
|
41
|
+
:label="label"
|
|
42
|
+
tag="span"
|
|
43
|
+
></InputLabel>
|
|
44
|
+
</label>
|
|
21
45
|
</div>
|
|
22
46
|
</template>
|
|
23
|
-
|
|
24
|
-
<script lang="ts">
|
|
25
|
-
import Uniques from "@/helpers/Uniques";
|
|
26
|
-
import { Options, Prop, Vue } from "vue-property-decorator";
|
|
27
|
-
|
|
28
|
-
@Options({ name: "Checkbox" })
|
|
29
|
-
export default class Checkbox extends Vue {
|
|
30
|
-
// TODO: checkbox should support the help text prop like base input, and label should use the label component or possible support a legend prop
|
|
31
|
-
@Prop({ type: Boolean, required: false }) emphasis?: boolean;
|
|
32
|
-
@Prop({ type: String, required: false }) label?: string;
|
|
33
|
-
@Prop({ type: Boolean, required: true }) modelValue!: boolean;
|
|
34
|
-
|
|
35
|
-
uuid = (this.$attrs.id as string) || Uniques.CreateIdAttribute();
|
|
36
|
-
}
|
|
37
|
-
</script>
|